/* ============================================================
   Marina Breeze Family Villa — стили сайта
   Стиль: дорогой средиземноморский минимализм уровня бутик-отеля
   (ориентир: Aman, One&Only, Four Seasons) — натуральная палитра,
   крупная фотография, тонкая латунная деталь, стеклянные акценты.
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; max-width:100%; }
body{ margin:0; overflow-x:hidden; max-width:100%; }

:root{
  /* натуральная палитра: белый, бежевый, песочный, графитовый, оливковый + тонкий латунный акцент */
  --cream:#FBF8F2;
  --sand:#EFE6D3;
  --sand-line:#E2D7BE;
  --warm-grey:#8C8577;
  --charcoal:#211D18;
  --charcoal-soft:#4A443A;
  --charcoal-deep:#16130F;
  --olive:#6E7350;
  --olive-deep:#454A34;
  --gold:#A9895A;
  --gold-soft:#C9AD82;
  --sea:#3E5C58;
  --surface:#FFFFFF;

  --font-display:'PT Serif', Georgia, 'Times New Roman', serif;
  --font-body:'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --container:1220px;
  --ease:cubic-bezier(.16,.7,.15,1);
}

body{ margin:0; background:var(--cream); color:var(--charcoal); font-family:var(--font-body); -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font-family:inherit; cursor:pointer; }
.icon{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* ---------- NAV ---------- */
.nav{ position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:1.9rem clamp(1.25rem,4vw,3.5rem); color:#fff; transition:background .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease), padding .4s var(--ease); }
.nav.solid{ background:color-mix(in srgb, var(--cream) 88%, transparent); color:var(--charcoal); box-shadow:0 1px 0 var(--sand-line); padding-top:1.15rem; padding-bottom:1.15rem; backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4); }
.brand{ font-family:var(--font-display); font-weight:400; font-size:1.05rem; letter-spacing:.04em; text-decoration:none; }
.nav-links{ display:flex; gap:2.4rem; list-style:none; margin:0; padding:0; font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; }
.nav-links a{ text-decoration:none; opacity:.8; position:relative; padding-bottom:.2rem; transition:opacity .3s ease; }
.nav-links a::after{ content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:currentColor; transition:right .35s var(--ease); }
.nav-links a:hover{ opacity:1; }
.nav-links a:hover::after{ right:0; }
@media (max-width:920px){ .nav-links{ display:none; } }
.nav-right{ display:flex; align-items:center; gap:1.1rem; }

/* ---------- ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА ---------- */
.lang-switch{ position:relative; }
.lang-current{ display:flex; align-items:center; gap:.45rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.32);
  color:inherit; border-radius:30px; padding:.5rem .8rem; font:600 .7rem/1 var(--font-body); letter-spacing:.06em;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:background .3s ease, border-color .3s ease; }
.nav.solid .lang-current{ background:var(--surface); border-color:var(--sand-line); }
.lang-current:hover{ border-color:var(--gold-soft); }
.lang-current .icon{ opacity:.7; transition:transform .3s ease; }
.lang-current[aria-expanded="true"] .icon{ transform:rotate(180deg); }
.lang-menu{ position:absolute; top:calc(100% + .6rem); right:0; min-width:170px; background:var(--surface); border:1px solid var(--sand-line);
  border-radius:10px; box-shadow:0 30px 50px -24px rgba(22,19,15,.4); padding:.4rem; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s; z-index:60; }
.lang-menu.open{ opacity:1; visibility:visible; transform:translateY(0); }
.lang-menu button{ display:flex; align-items:center; gap:.6rem; width:100%; text-align:left; background:none; border:none; border-radius:6px;
  padding:.6rem .7rem; font:500 .84rem/1 var(--font-body); color:var(--charcoal); transition:background .2s ease; }
.lang-menu button:hover{ background:var(--sand); }
.lang-menu button[aria-current="true"]{ color:var(--gold); font-weight:700; }
@media (max-width:560px){
  .lang-current span:last-of-type{ display:none; }
  .lang-current{ padding:.5rem .6rem; }
  /* на узких экранах кнопка «Забронировать» в шапке убирается — снизу уже есть постоянная
     mobile-bar с той же кнопкой; так шапка не перегружена и не рискует переполниться */
  .nav-right > .btn-primary{ display:none; }
}
@media (max-width:400px){ .nav{ padding-left:1rem; padding-right:1rem; } .brand{ font-size:.92rem; } }

/* ---------- BUTTONS: сдержанные, дорогие, без "мультяшности" ---------- */
.btn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:.6rem; font:600 .74rem/1 var(--font-body);
  text-transform:uppercase; letter-spacing:.14em; text-decoration:none; padding:1.1rem 2.3rem; border-radius:2px;
  border:1px solid transparent; transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
  white-space:nowrap; will-change:transform; }
.btn::after{ content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg); transition:left .75s var(--ease); pointer-events:none; }
.btn:hover::after{ left:130%; }
.btn-primary{ background:var(--charcoal); color:var(--cream); border-color:var(--charcoal); box-shadow:0 14px 30px -14px rgba(22,19,15,.5); }
.btn-primary:hover{ background:var(--olive-deep); border-color:var(--olive-deep); transform:translateY(-2px); box-shadow:0 20px 36px -14px rgba(22,19,15,.55); }
.btn-primary-on-photo{ background:rgba(251,248,242,.96); color:var(--charcoal); border-color:rgba(251,248,242,.96); box-shadow:0 14px 34px -12px rgba(0,0,0,.4); }
.btn-primary-on-photo:hover{ background:transparent; color:#fff; border-color:#fff; transform:translateY(-2px); }
.btn-secondary{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.5); color:#fff; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.btn-secondary:hover{ border-color:#fff; background:rgba(255,255,255,.16); transform:translateY(-2px); }
.btn-outline{ background:transparent; border-color:var(--sand-line); color:var(--charcoal); }
.btn-outline:hover{ border-color:var(--olive); color:var(--olive-deep); transform:translateY(-2px); }
.btn-gold{ background:var(--gold); color:var(--cream); border-color:var(--gold); box-shadow:0 14px 30px -14px rgba(169,137,90,.6); }
.btn-gold:hover{ background:var(--olive-deep); border-color:var(--olive-deep); transform:translateY(-2px); }
.btn-block{ width:100%; white-space:normal; text-align:center; line-height:1.35; }

/* ---------- HERO (плавающее фото моря + Ken Burns + мерцание света на воде) ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--charcoal-deep); }
.hero-photo{ position:absolute; inset:-6%; background-image:url('../images/villa/poster-hero.jpg'); background-size:cover; background-position:50% 55%;
  animation:kenburns-still 46s ease-in-out infinite alternate, photo-reveal 2.2s ease-out forwards; will-change:transform, filter; }
/* настоящее видео моря — подгружается и включается через JS только на широких экранах и без
   prefers-reduced-motion (см. main.js), чтобы не тратить мобильный трафик; пока видео не готово
   или отключено, за ним остаётся статичное фото + синтетическое мерцание/дрейф ниже */
.hero-video{ display:none; position:absolute; inset:-3%; width:106%; height:106%; object-fit:cover; opacity:0; transition:opacity 1.2s ease;
  animation:kenburns-video 90s ease-in-out infinite alternate; will-change:transform; }
@keyframes kenburns-video{ 0%{ transform:scale(1); } 100%{ transform:scale(1.07); } }
.hero.hero-has-video .hero-video{ display:block; }
.hero.hero-has-video .hero-video.is-playing{ opacity:1; }
.hero.hero-has-video .hero-shimmer, .hero.hero-has-video .hero-wavedrift, .hero.hero-has-video .hero-clouddrift{ display:none; }
@keyframes kenburns-still{ 0%{ transform:scale(1) translate3d(0,0,0); } 100%{ transform:scale(1.05) translate3d(-.8%,-.6%,0); } }
@keyframes photo-reveal{ 0%{ filter:blur(14px) brightness(.7) saturate(.8); opacity:.55; } 100%{ filter:blur(0) brightness(1) saturate(1); opacity:1; } }
/* лёгкое "живое" мерцание света на волнах — без видео, чистый SVG-шум; небо и скалы неподвижны,
   светится только область, где на фото разбиваются волны (бухта у Старого Бара, рядом с виллой, без людей в кадре) */
.hero-shimmer{ position:absolute; inset:0; width:100%; height:100%; mix-blend-mode:overlay; opacity:.75; pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 48% 34% at 28% 66%, black 0%, black 40%, transparent 80%);
  mask-image:radial-gradient(ellipse 48% 34% at 28% 66%, black 0%, black 40%, transparent 80%); }
/* второй слой — медленный горизонтальный дрейф полос света, имитирующий накат волн */
.hero-wavedrift{ position:absolute; inset:0; width:100%; height:100%; mix-blend-mode:soft-light; opacity:.5; pointer-events:none;
  background-image:repeating-linear-gradient(100deg, rgba(255,255,255,.9) 0px, rgba(255,255,255,.9) 2px, transparent 14px, transparent 34px);
  background-size:200% 200%; animation:wavedrift 14s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse 48% 34% at 28% 66%, black 0%, black 40%, transparent 80%);
  mask-image:radial-gradient(ellipse 48% 34% at 28% 66%, black 0%, black 40%, transparent 80%); }
@keyframes wavedrift{ 0%{ background-position:0% 0%; } 100%{ background-position:-200% 40%; } }
/* лёгкий дрейф облаков/дымки в верхней части кадра — едва заметное движение, чтобы небо не выглядело "замороженным" */
.hero-clouddrift{ position:absolute; inset:0; width:100%; height:100%; mix-blend-mode:soft-light; opacity:.28; pointer-events:none;
  background-image:
    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(ellipse 50% 35% at 70% 6%, rgba(255,255,255,.55), transparent 70%);
  background-size:180% 180%; animation:clouddrift 90s ease-in-out infinite alternate;
  -webkit-mask-image:linear-gradient(180deg, black 0%, black 30%, transparent 55%);
  mask-image:linear-gradient(180deg, black 0%, black 30%, transparent 55%); }
@keyframes clouddrift{ 0%{ background-position:0% 0%, 100% 0%; } 100%{ background-position:-30% 8%, 70% -6%; } }
.hero-scrim{ position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(14,12,9,.75) 0%, rgba(14,12,9,.32) 32%, rgba(14,12,9,.12) 55%, rgba(14,12,9,.4) 100%),
    radial-gradient(120% 90% at 50% 100%, rgba(14,12,9,.35), transparent 60%); }
.hero-content{ position:relative; z-index:2; max-width:var(--container); margin:0 auto; width:100%;
  padding:0 clamp(1.25rem,4vw,3.5rem) clamp(4rem,8vw,7rem); color:#fff; }
.hero-tag{ display:inline-flex; align-items:center; gap:.6rem; padding:.55rem 1.1rem; margin:0 0 2rem; border-radius:30px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  font:600 .68rem/1 var(--font-body); text-transform:uppercase; letter-spacing:.18em; color:rgba(255,255,255,.95);
  opacity:0; transform:translateY(12px); animation:rise 1s .2s var(--ease) forwards; }
.hero-tag .icon{ width:14px; height:14px; color:var(--gold-soft); }
.hero-brand{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.5rem,6vw,2rem); line-height:1.2; letter-spacing:.01em;
  margin:0 0 1rem; color:#fff; opacity:0; transform:translateY(12px); animation:rise 1s .1s var(--ease) forwards; }
.hero-brand em{ font-style:italic; color:var(--gold-soft); }
.hero-content h1{ font-family:var(--font-display); font-weight:400; font-size:clamp(2.8rem,4vw + 1.4rem,5.4rem); line-height:1.04;
  margin:0 0 1.6rem; max-width:16ch; letter-spacing:-.01em; }
.line-mask{ display:block; overflow:hidden; }
.line-inner{ display:block; transform:translateY(112%); filter:blur(6px); animation:line-reveal 1.15s .32s var(--ease) forwards; }
@keyframes line-reveal{ to{ transform:translateY(0); filter:blur(0); } }
.hero-content .lede{ font-size:1.18rem; line-height:1.7; max-width:42ch; color:rgba(255,255,255,.86); font-weight:300; margin:0 0 2.8rem;
  opacity:0; transform:translateY(16px); animation:rise 1.1s .68s var(--ease) forwards; }
.cta-row{ display:flex; flex-wrap:wrap; gap:1.1rem; opacity:0; transform:translateY(14px); animation:rise 1.1s .84s var(--ease) forwards; }
@keyframes rise{ to{ opacity:1; transform:translateY(0); } }
/* короткие по высоте окна (маленькие ноутбуки, альбомная ориентация) — контент hero не должен
   наезжать на фиксированную навигацию сверху; сокращаем вертикальные отступы и типографику */
@media (max-height:700px){
  .hero-content{ padding-top:5.5rem; padding-bottom:clamp(2rem,5vw,3.5rem); }
  .hero-content h1{ font-size:clamp(2.2rem,3vw + 1rem,3.6rem); }
  .hero-tag{ margin-bottom:1.2rem; }
  .hero-content .lede{ margin-bottom:1.6rem; }
}
.scroll-cue{ position:absolute; z-index:2; left:50%; bottom:1.8rem; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.6rem;
  color:rgba(255,255,255,.75); font-size:.66rem; text-transform:uppercase; letter-spacing:.16em; }
/* на мобильных hero-контент (тег+бренд+заголовок+текст+кнопки) занимает почти всю высоту экрана —
   «Листайте» может наложиться на кнопки. Проще и надёжнее убрать его на узких экранах, чем
   гадать с точным расчётом отступа под разный текст/языки */
@media (max-width:640px){ .scroll-cue{ display:none; } }
.scroll-cue i{ width:1px; height:34px; background:rgba(255,255,255,.4); position:relative; overflow:hidden; display:block; }
.scroll-cue i::after{ content:''; position:absolute; left:0; top:-100%; width:100%; height:100%; background:var(--gold-soft); animation:cue 2.4s ease-in-out infinite; }
@keyframes cue{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* ---------- GENERIC SECTION ---------- */
.section{ max-width:var(--container); margin:0 auto; padding:clamp(5.5rem,9vw,8.5rem) clamp(1.25rem,4vw,3.5rem); }
.section-alt{ background:var(--sand); }
.section-alt > .section{ padding-left:clamp(1.25rem,4vw,3.5rem); padding-right:clamp(1.25rem,4vw,3.5rem); }
.section-head{ max-width:60ch; margin-bottom:3.4rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.eyebrow{ font:600 .72rem/1 var(--font-body); text-transform:uppercase; letter-spacing:.24em; color:var(--gold); margin:0 0 1.1rem; display:flex; align-items:center; gap:.7rem; }
.section-head.center .eyebrow{ justify-content:center; }
.eyebrow::before{ content:''; width:26px; height:1px; background:var(--gold); display:inline-block; }
.section-head h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(2rem,2.2vw + 1.2rem,3rem); margin:0 0 1rem; text-wrap:balance; letter-spacing:-.01em; }
.section-head p{ color:var(--warm-grey); line-height:1.7; margin:0; font-size:1.04rem; }
[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].in-view{ opacity:1; transform:translateY(0); }
[data-reveal-blur]{ opacity:0; filter:blur(14px); transform:translateY(22px); transition:opacity 1.1s var(--ease), filter 1.1s var(--ease), transform 1.1s var(--ease); }
[data-reveal-blur].in-view{ opacity:1; filter:blur(0); transform:translateY(0); }
[data-reveal-stagger] > *{ opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease), transform .85s var(--ease); transition-delay:calc(var(--stagger-i,0) * 110ms); }
[data-reveal-stagger].in-view > *{ opacity:1; transform:translateY(0); }

/* ---------- ПАУЗА МЕЖДУ ВИДЕО-БЛОКАМИ — тихий типографический интерлюдия, воздух вместо резкого стыка ---------- */
/* мягкое цветовое эхо видео сверху блока, чтобы переход из тёмного видео в светлую секцию не читался
   как резкий обрыв — тонкий dark→transparent градиент поверх собственного фона секции */
.fade-from-video{ position:relative; }
.fade-from-video::before{ content:''; position:absolute; top:0; left:0; right:0; height:clamp(70px,9vw,140px);
  background:linear-gradient(180deg, var(--charcoal-deep) 0%, transparent 100%); opacity:.55; pointer-events:none; z-index:0; }
.philosophy-pause{ background:var(--cream); padding:clamp(6rem,15vw,10.5rem) clamp(1.25rem,4vw,3.5rem); display:flex; align-items:center; justify-content:center; text-align:center; }
.philosophy-inner{ position:relative; z-index:1; }
.philosophy-inner{ max-width:740px; }
.philosophy-mark{ display:block; width:40px; height:1px; background:var(--gold); margin:0 auto 2.6rem; }
.philosophy-quote{ margin:0; font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(1.4rem,2vw + 1rem,2.3rem); line-height:1.55; color:var(--charcoal); letter-spacing:-.005em; }
.philosophy-body{ margin:1.6rem 0 0; font-size:1.05rem; line-height:1.8; color:var(--charcoal-soft); }

/* ---------- ATMOSPHERIC VIDEO DIVIDER (между смысловыми блоками — только эмоция, без продажи) ---------- */
.divider{ position:relative; min-height:74vh; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--charcoal-deep); }
.divider-photo{ position:absolute; inset:0; background-size:cover; background-position:center; }
.divider-video{ position:absolute; inset:-3%; width:106%; height:106%; object-fit:cover; opacity:0; transition:opacity 1.4s ease;
  animation:kenburns-video 70s ease-in-out infinite alternate; will-change:transform; }
.divider.video-ready .divider-video{ opacity:1; }
.divider-scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,12,9,.4) 0%, rgba(14,12,9,.18) 35%, rgba(14,12,9,.42) 100%); }
.divider-content{ position:relative; z-index:2; text-align:center; max-width:620px; padding:clamp(4rem,9vw,6rem) 1.5rem; color:#fff; }
.divider-content .eyebrow{ justify-content:center; color:var(--gold-soft); }
.divider-content .eyebrow::before{ background:var(--gold-soft); }
.divider-content h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(2.1rem,3vw + 1rem,3.3rem); margin:0 0 1.1rem; color:#fff; letter-spacing:-.01em; }
.divider-content p{ color:rgba(255,255,255,.84); font-size:1.05rem; line-height:1.75; margin:0 auto; max-width:44ch; font-weight:300; }
.divider-content .btn{ margin-top:1.9rem; }
@media (max-width:640px){ .divider{ min-height:64vh; } }
/* больше "воздуха" и веса как самостоятельной сцене — divider перед бронированием, после того как
   локация уже полностью раскрылась; не приклеен к другому видео, поэтому просто даём ему больше высоты */
.divider-spaced{ min-height:86vh; }
@media (max-width:640px){ .divider-spaced{ min-height:74vh; } }

.note{ font-size:.84rem; color:var(--warm-grey); background:var(--surface); border:1px solid var(--sand-line);
  border-radius:2px; padding:.8rem 1.1rem; display:inline-flex; gap:.55rem; align-items:flex-start; }
.note .icon{ width:16px; height:16px; margin-top:.15rem; color:var(--gold); }

/* ---------- ПРЕИМУЩЕСТВА ---------- */
.adv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:3rem 2.2rem; }
#advGrid{ grid-template-columns:repeat(5,1fr); }
#whyGrid{ grid-template-columns:repeat(4,1fr); }
@media (max-width:860px){ #whyGrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:860px){ .adv-grid{ grid-template-columns:repeat(2,1fr); gap:2.6rem 1.6rem; } }
@media (max-width:520px){ .adv-grid{ grid-template-columns:1fr; gap:2.4rem; } }
.adv-item{ text-align:center; }
.adv-icon{ width:58px; height:58px; margin:0 auto 1.3rem; background:var(--sand); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--gold); transition:background .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); }
.adv-item:hover .adv-icon{ background:var(--gold); color:var(--cream); transform:translateY(-5px); box-shadow:0 18px 30px -16px rgba(169,137,90,.55); }
.adv-item b{ display:block; font-weight:600; font-size:.98rem; letter-spacing:.01em; color:var(--charcoal); }

/* ---------- О ВИЛЛЕ ---------- */
.about-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:4.5rem; align-items:center; }
@media (max-width:900px){ .about-grid{ grid-template-columns:1fr; gap:2.4rem; } }
.media-frame{ position:relative; overflow:hidden; border-radius:6px; box-shadow:0 40px 70px -40px rgba(22,19,15,.4); }
.media-frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.media-frame:hover img{ transform:scale(1.05); }
.about-media{ aspect-ratio:4/5; }
/* фото фасада виллы имеет вшитый рекламный текст сверху и снизу — кадрируем чисто через object-position,
   без реального редактирования файла, показывая только чистую среднюю часть с самим домом */
.about-media--facade{ aspect-ratio:9/8; }
.about-media--facade img{ object-position:center 71%; }
.about-media--winter{ aspect-ratio:5/4; }
.about-text p{ line-height:1.8; color:var(--charcoal-soft); font-size:1.06rem; }
.usp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem 1.6rem; margin-top:2rem; }
.usp{ display:flex; gap:.8rem; align-items:flex-start; }
.usp .icon{ color:var(--gold); margin-top:.15rem; width:19px; height:19px; }
.usp b{ display:block; font-size:.94rem; }
.usp span{ font-size:.83rem; color:var(--warm-grey); }

/* ---------- АПАРТАМЕНТЫ ---------- */
.apt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; }
@media (max-width:900px){ .apt-grid{ grid-template-columns:1fr; } }
.apt-card{ background:var(--surface); border:1px solid var(--sand-line); border-radius:6px; overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease); position:relative;
  display:block; width:100%; text-align:left; padding:0; font-family:inherit; cursor:pointer; }
.apt-card:hover{ transform:translateY(-8px); box-shadow:0 46px 70px -36px rgba(22,19,15,.4); }
.apt-media{ aspect-ratio:4/3; position:relative; overflow:hidden; }
.apt-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.apt-card:hover .apt-media img{ transform:scale(1.07); }
.apt-num{ position:absolute; top:1rem; left:1rem; z-index:2; font-family:var(--font-display); font-size:.82rem; color:#fff;
  background:rgba(20,18,13,.42); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.3);
  border-radius:30px; padding:.35rem .9rem; letter-spacing:.05em; }
.apt-body{ padding:1.7rem 1.7rem 1.9rem; }
.apt-body h3{ font-family:var(--font-display); font-weight:400; font-size:1.28rem; margin:0 0 .6rem; letter-spacing:-.005em; }
.apt-meta{ display:block; font-size:.83rem; color:var(--warm-grey); margin-bottom:1.2rem; line-height:1.6; }
.apt-price{ font-family:var(--font-display); font-size:1.3rem; color:var(--gold); margin-bottom:1.1rem; padding-top:1.1rem; border-top:1px solid var(--sand-line); }
.apt-price small{ display:block; font-family:var(--font-body); font-size:.72rem; color:var(--warm-grey); text-transform:none; letter-spacing:0; margin-top:.25rem; }

/* ---------- МОДАЛЬНОЕ ОКНО АПАРТАМЕНТА ---------- */
.apt-modal{ position:fixed; inset:0; z-index:110; background:var(--cream); display:none; }
.apt-modal.open{ display:block; }
.apt-modal-dialog{ position:relative; background:var(--cream); width:100%; height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch;
  animation:apt-modal-in .35s var(--ease); }
@keyframes apt-modal-in{ from{ opacity:0; } to{ opacity:1; } }
.apt-modal-topbar{ position:sticky; top:0; z-index:6; display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1.25rem,4vw,3.5rem); background:color-mix(in srgb, var(--cream) 90%, transparent);
  backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); border-bottom:1px solid var(--sand-line); }
.apt-modal-brand{ font-family:var(--font-display); font-size:1.05rem; letter-spacing:.04em; }
.apt-modal-close{ display:inline-flex; align-items:center; gap:.5rem; background:var(--charcoal); color:var(--cream); border:none;
  border-radius:30px; padding:.6rem 1.2rem; font:600 .74rem/1 var(--font-body); text-transform:uppercase; letter-spacing:.1em; transition:background .3s ease; }
.apt-modal-close:hover{ background:var(--olive-deep); }
.apt-modal-close .icon{ color:var(--cream); }
.apt-modal-scroll{ padding:0 0 6rem; }
.apt-modal-gallery{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:.6rem; padding:1.4rem clamp(1.25rem,4vw,3.5rem) 0; max-width:var(--container); margin:0 auto; }
.apt-modal-shot{ position:relative; border-radius:6px; overflow:hidden; cursor:pointer; border:none; padding:0; background:none; display:block; width:100%; height:100%; }
.apt-modal-shot:first-child{ grid-column:span 2; grid-row:span 2; }
.apt-modal-shot img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.apt-modal-shot:hover img{ transform:scale(1.06); }
.apt-modal-shot span{ position:absolute; left:.6rem; right:.6rem; bottom:.5rem; font-size:.66rem; color:#fff; line-height:1.3;
  opacity:0; transition:opacity .25s ease; text-shadow:0 1px 4px rgba(0,0,0,.6); text-align:left; }
.apt-modal-shot::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,18,13,.6) 0%, transparent 40%); opacity:0; transition:opacity .25s ease; }
.apt-modal-shot:hover span, .apt-modal-shot:hover::after{ opacity:1; }
@media (max-width:760px){ .apt-modal-gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:140px; } .apt-modal-shot:first-child{ grid-column:span 2; grid-row:span 2; } }
.apt-modal-info{ max-width:var(--container); margin:0 auto; padding:2.2rem clamp(1.25rem,4vw,3.5rem) 2.4rem; }
.apt-modal-stickybar{ position:sticky; bottom:0; z-index:6; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem clamp(1.25rem,4vw,3.5rem) calc(1rem + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--cream) 94%, transparent); backdrop-filter:blur(14px);
  border-top:1px solid var(--sand-line); }
.apt-modal-stickybar-price{ font-family:var(--font-display); font-size:1.2rem; color:var(--gold); }
.apt-modal-stickybar-price small{ display:block; font-family:var(--font-body); font-size:.68rem; color:var(--warm-grey); text-transform:uppercase; letter-spacing:.06em; }
@media (max-width:560px){
  .apt-modal-stickybar-price{ font-size:1rem; overflow:hidden; }
  .apt-modal-stickybar-price small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:44vw; }
  .apt-modal-close span{ display:none; }
  .apt-modal-topbar{ padding:1rem 1.1rem; }
  .apt-modal-stickybar{ padding:.85rem 1.1rem calc(.85rem + env(safe-area-inset-bottom)); }
}
.apt-modal-info h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.6rem,1.6vw + 1.1rem,2.3rem); margin:0 0 1rem; letter-spacing:-.01em; }
.apt-modal-desc{ color:var(--charcoal-soft); line-height:1.8; font-size:1.02rem; margin:0 0 1.6rem; max-width:70ch; }
.apt-modal-facts{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem 1.6rem; padding:1.3rem 1.5rem; background:var(--surface);
  border:1px solid var(--sand-line); border-radius:8px; margin-bottom:1.8rem; }
@media (max-width:560px){ .apt-modal-facts{ grid-template-columns:1fr; } }
.apt-modal-facts b{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold); margin-bottom:.3rem; }
.apt-modal-facts span{ font-size:.94rem; color:var(--charcoal); line-height:1.5; }
.apt-modal-amenities-title{ font-family:var(--font-display); font-weight:400; font-size:1.1rem; margin:0 0 1rem; }
.apt-modal-amenities{ list-style:none; margin:0 0 2rem; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1.2rem; }
@media (max-width:560px){ .apt-modal-amenities{ grid-template-columns:1fr; } }
.apt-modal-amenities li{ display:flex; align-items:flex-start; gap:.6rem; font-size:.9rem; color:var(--charcoal-soft); line-height:1.4; }
.apt-modal-amenities .icon{ width:15px; height:15px; color:var(--gold); flex:none; margin-top:.2rem; }
.apt-modal-price{ font-family:var(--font-display); font-size:1.5rem; color:var(--gold); margin-bottom:1.2rem; padding-top:1.2rem; border-top:1px solid var(--sand-line); }
.apt-modal-price small{ display:block; font-family:var(--font-body); font-size:.78rem; color:var(--warm-grey); margin-top:.25rem; }

/* ---------- ОТЗЫВЫ ГОСТЕЙ (компактные премиальные карточки, слайдер 3-up) ---------- */
.reviews-section{ position:relative; overflow:hidden; background:var(--sand); padding-top:clamp(4rem,7vw,6rem); padding-bottom:clamp(4rem,7vw,6rem); }
.reviews-rating{ display:flex; flex-direction:column; align-items:center; gap:.5rem; margin-top:.6rem; color:var(--charcoal-soft); font-size:.94rem; }
.reviews-stars-big{ display:inline-flex; gap:.25rem; color:var(--gold); }
.reviews-stars-big .icon{ width:18px; height:18px; fill:var(--gold); stroke:var(--gold); }
.reviews-slider{ position:relative; z-index:1; display:flex; align-items:center; gap:1rem; max-width:calc(var(--container) + 4rem); margin:2.6rem auto 0; padding:0 clamp(1.25rem,4vw,3.5rem); }
.reviews-viewport{ flex:1; overflow:hidden; }
.reviews-track{ display:flex; transition:transform .65s var(--ease); }
.review-card{ flex:0 0 100%; padding:0 .55rem; box-sizing:border-box; }
@media (min-width:760px){ .review-card{ flex:0 0 50%; } }
@media (min-width:1080px){ .review-card{ flex:0 0 33.333%; } }
.review-card-inner{ position:relative; height:100%; background:var(--surface);
  border:1px solid var(--sand-line); border-radius:10px; padding:1.5rem 1.5rem 1.4rem; box-shadow:0 20px 40px -30px rgba(22,19,15,.25);
  display:flex; flex-direction:column; gap:.8rem; transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.review-card-inner:hover{ transform:translateY(-4px); box-shadow:0 30px 50px -30px rgba(22,19,15,.32); }
.review-top{ display:flex; align-items:center; gap:.7rem; }
.review-avatar{ width:38px; height:38px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg, var(--gold-soft), var(--gold)); color:#fff; font-family:var(--font-display); font-size:1rem; }
.review-who b{ display:block; font-size:.9rem; font-weight:600; letter-spacing:.01em; }
.review-meta{ display:flex; align-items:center; gap:.4rem; font-size:.72rem; color:var(--warm-grey); margin-top:.1rem; }
.review-source{ display:inline-flex; align-items:center; gap:.35rem; text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.review-source::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--sea); }
.review-source.airbnb::before{ background:var(--gold); }
.review-stars{ display:flex; gap:.15rem; color:var(--gold); }
.review-stars .icon{ width:12px; height:12px; fill:var(--gold); stroke:var(--gold); }
.review-text{ margin:0; font-size:.87rem; line-height:1.6; color:var(--charcoal-soft); flex:1;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.rev-arrow{ flex:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--sand-line); background:var(--surface); color:var(--charcoal);
  font-size:1.3rem; display:flex; align-items:center; justify-content:center; transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease; }
.rev-arrow:hover{ background:var(--charcoal); color:var(--cream); border-color:var(--charcoal); transform:translateY(-2px); }
.reviews-dots{ position:relative; z-index:1; display:flex; justify-content:center; gap:.5rem; margin-top:1.7rem; }
.rev-dot{ width:7px; height:7px; border-radius:50%; background:var(--sand-line); border:none; padding:0; transition:background .3s ease, transform .3s ease; }
.rev-dot[aria-current="true"]{ background:var(--gold); transform:scale(1.3); }
.reviews-cta{ position:relative; z-index:1; text-align:center; margin-top:2.2rem; }
@media (max-width:600px){ .reviews-slider{ gap:.4rem; } .rev-arrow{ width:34px; height:34px; font-size:1.1rem; } .review-card-inner{ padding:1.4rem 1.3rem 1.2rem; } }

/* ---------- ГАЛЕРЕЯ — editorial: большой кадр (stage) + миниатюры, без обрезанных «выглядывающих» соседей ---------- */
.gallery-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-bottom:2.6rem; }
.gtab{ border:1px solid var(--sand-line); background:var(--surface); border-radius:30px; padding:.55rem 1.2rem; font-size:.76rem;
  text-transform:uppercase; letter-spacing:.06em; color:var(--warm-grey); transition:background .3s ease, color .3s ease, border-color .3s ease; }
.gtab[aria-pressed="true"]{ background:var(--charcoal); color:var(--cream); border-color:var(--charcoal); }

.gallery-stage{ max-width:1040px; margin:0 auto; }
.gallery-stage-main{ display:flex; align-items:center; gap:1rem; }
.gallery-stage-frame{ position:relative; flex:1; aspect-ratio:16/10; border-radius:10px; overflow:hidden; background:var(--sand);
  box-shadow:0 50px 90px -40px rgba(22,19,15,.45); cursor:zoom-in; }
.gallery-stage-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s ease, transform 1.2s var(--ease); }
.gallery-stage-frame img.active{ opacity:1; }
.gallery-stage-frame:hover img.active{ transform:scale(1.025); }
.gallery-stage-caption{ position:absolute; left:1.4rem; right:1.4rem; bottom:1.2rem; z-index:2; color:#fff; font-size:.86rem; letter-spacing:.01em;
  text-shadow:0 2px 10px rgba(0,0,0,.45); }
.gallery-stage-frame::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(18,16,12,.55) 0%, transparent 32%); pointer-events:none; }
.gallery-stage-arrow{ flex:none; width:48px; height:48px; border-radius:50%; border:1px solid var(--sand-line); background:var(--surface); color:var(--charcoal);
  font-size:1.4rem; display:flex; align-items:center; justify-content:center; transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease; }
.gallery-stage-arrow:hover{ background:var(--charcoal); color:var(--cream); border-color:var(--charcoal); transform:translateY(-2px); }
.gallery-thumbs{ display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; margin-top:1.6rem; }
.gthumb{ position:relative; width:92px; height:70px; border-radius:6px; overflow:hidden; border:2px solid transparent; padding:0; background:none;
  opacity:.55; transition:opacity .3s ease, border-color .3s ease, transform .3s ease; }
.gthumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.gthumb:hover{ opacity:.85; transform:translateY(-2px); }
.gthumb[aria-current="true"]{ opacity:1; border-color:var(--gold); }
.gthumb[hidden]{ display:none; }
@media (max-width:760px){
  .gallery-stage-main{ gap:.5rem; }
  .gallery-stage-arrow{ width:38px; height:38px; font-size:1.15rem; }
  .gallery-stage-frame{ aspect-ratio:4/3; }
  .gthumb{ width:70px; height:54px; }
}

.lightbox{ position:fixed; inset:0; z-index:120; background:rgba(11,10,8,.96); display:none; align-items:center; justify-content:center; padding:2rem; }
.lightbox.open{ display:flex; }
.lightbox figure{ margin:0; max-width:1040px; width:100%; }
.lightbox img{ width:100%; max-height:78vh; object-fit:contain; border-radius:3px; }
.lightbox figcaption{ color:rgba(255,255,255,.7); font-size:.85rem; margin-top:1.1rem; text-align:center; }
.lightbox-controls{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 1rem; pointer-events:none; }
.lightbox-controls button{ pointer-events:auto; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28); color:#fff; width:46px; height:46px; border-radius:50%; backdrop-filter:blur(8px); transition:background .3s ease; }
.lightbox-controls button:hover{ background:rgba(255,255,255,.18); }
.lightbox-close{ position:absolute; top:1.4rem; right:1.5rem; background:none; border:none; color:#fff; }

/* ---------- ОПЛАТА БРОНИРОВАНИЯ ---------- */
.pay-modal{ position:fixed; inset:0; z-index:130; background:rgba(11,10,8,.72); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:none; align-items:flex-start; justify-content:center; padding:clamp(1rem,4vw,3.5rem) 1rem; overflow-y:auto; }
.pay-modal.open{ display:flex; }
.pay-modal-dialog{ position:relative; background:var(--cream); border-radius:14px; max-width:520px; width:100%; overflow:hidden;
  box-shadow:0 60px 120px -40px rgba(0,0,0,.55); animation:apt-modal-in .35s var(--ease); }
.pay-modal-topbar{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:1.05rem 1.3rem; border-bottom:1px solid var(--sand-line); }
.pay-modal-back{ background:none; border:none; color:var(--charcoal-soft); display:inline-flex; align-items:center; cursor:pointer; padding:.4rem; margin-right:-.4rem; }
.pay-modal-back:hover{ color:var(--charcoal); }
.pay-modal-body{ padding:1.7rem 1.6rem 2.2rem; max-height:80vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }

.pay-summary{ background:var(--sand); border-radius:10px; padding:1.2rem 1.3rem; margin:1.5rem 0; }
.pay-summary-row{ display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; font-size:.86rem; border-bottom:1px solid var(--sand-line); }
.pay-summary-row span{ color:var(--warm-grey); }
.pay-summary-row b{ color:var(--charcoal); text-align:right; font-weight:600; }
.pay-summary-row:last-child{ border-bottom:none; }
.pay-summary-total{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-top:.7rem; padding-top:1rem; border-top:1px solid var(--gold-soft); }
.pay-summary-total b{ font-family:var(--font-display); font-size:1.5rem; color:var(--gold); }

.pay-btn-main{ width:100%; display:flex; align-items:center; justify-content:center; gap:.7rem; background:var(--charcoal); color:var(--cream);
  border:none; border-radius:8px; padding:1.05rem 1.4rem; font:600 .92rem/1 var(--font-body); cursor:pointer; transition:background .3s ease, transform .2s ease; }
.pay-btn-main:hover{ background:var(--olive-deep); transform:translateY(-1px); }
.pay-btn-main:disabled{ opacity:.7; cursor:default; transform:none; }
.pay-btn-main .icon{ width:17px; height:17px; color:var(--gold-soft); flex:none; }
.pay-badges{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:1rem 0 0; }
.pay-badge{ font:600 .68rem/1 var(--font-body); letter-spacing:.03em; padding:.45rem .85rem; border:1px solid var(--sand-line); border-radius:20px; color:var(--warm-grey); background:var(--surface); }
.pay-security{ display:flex; align-items:flex-start; gap:.6rem; font-size:.73rem; color:var(--warm-grey); line-height:1.55; margin:1.1rem 0 0; }
.pay-security .icon{ width:15px; height:15px; flex:none; margin-top:.15rem; color:var(--olive); }

.pay-alt{ margin-top:1.6rem; border-top:1px solid var(--sand-line); padding-top:1.1rem; }
.pay-alt-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; background:none; border:none; font:600 .8rem/1 var(--font-body); color:var(--charcoal-soft); cursor:pointer; padding:.4rem 0; }
.pay-alt-toggle .icon{ color:var(--warm-grey); transition:transform .3s ease; }
.pay-alt-toggle[aria-expanded="true"] .icon{ transform:rotate(180deg); }
.pay-alt-body{ padding-top:1rem; }
.pay-alt-item b{ display:block; margin-bottom:.4rem; font-size:.88rem; }
.pay-alt-item p{ font-size:.8rem; color:var(--warm-grey); margin:0 0 .9rem; line-height:1.55; }

.pay-success-icon{ width:60px; height:60px; border-radius:50%; background:var(--olive); display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.3rem; animation:pay-success-pop .5s var(--ease); }
.pay-success-icon .icon{ width:28px; height:28px; color:#fff; }
@keyframes pay-success-pop{ from{ transform:scale(.5); opacity:0; } to{ transform:scale(1); opacity:1; } }

@media (max-width:480px){
  .pay-modal-topbar{ padding:.9rem 1rem; }
  .pay-modal-body{ padding:1.3rem 1.1rem 1.8rem; }
}

/* ---------- РАСПОЛОЖЕНИЕ — эмоциональный full-bleed баннер, как в hero ---------- */
.location-hero{ position:relative; min-height:72vh; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--charcoal-deep); }
.location-hero-media{ position:absolute; inset:0; background-size:cover; background-position:center 62%; transform:scale(1.02); }
.location-hero-scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,12,9,.5) 0%, rgba(14,12,9,.2) 38%, rgba(14,12,9,.55) 100%); }
.location-hero-content{ position:relative; z-index:2; text-align:center; max-width:720px; padding:clamp(4rem,9vw,6rem) 1.5rem; color:#fff; }
.location-hero-content .eyebrow{ justify-content:center; color:var(--gold-soft); }
.location-hero-content .eyebrow::before{ background:var(--gold-soft); }
.location-hero-content h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(2.2rem,3.2vw + 1rem,3.6rem); line-height:1.12; margin:0 0 1.2rem; color:#fff; letter-spacing:-.01em; }
.location-hero-content p{ color:rgba(255,255,255,.86); font-size:1.08rem; line-height:1.75; margin:0 auto; max-width:52ch; font-weight:300; }
@media (max-width:640px){ .location-hero{ min-height:60vh; } }

/* ---------- КАРТА + РАССТОЯНИЯ ---------- */
.map-layout{ display:grid; grid-template-columns:1.5fr 1fr; gap:1.6rem; margin-bottom:4.5rem; align-items:stretch; }
@media (max-width:900px){ .map-layout{ grid-template-columns:1fr; } }
.map-frame{ position:relative; border-radius:8px; overflow:hidden; min-height:420px; box-shadow:0 40px 70px -40px rgba(22,19,15,.4); background:var(--sand); }
.map-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(.15) contrast(1.03); }
.map-distances{ background:var(--surface); border:1px solid var(--sand-line); border-radius:8px; padding:2rem 2rem 1.4rem; }
.dist-list{ list-style:none; margin:0; padding:0; }
.dist-list li{ display:flex; align-items:flex-start; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--sand-line); }
.dist-list li:last-child{ border-bottom:none; }
.dist-icon{ font-size:1.25rem; flex:none; line-height:1; margin-top:.1rem; }
.dist-list b{ display:block; font-size:.94rem; font-weight:600; color:var(--charcoal); }
.dist-list span{ display:block; font-size:.82rem; color:var(--warm-grey); margin-top:.15rem; line-height:1.4; }

.location-layout{ display:grid; grid-template-columns:1.7fr 1fr; gap:1.2rem; height:clamp(440px,46vw,680px); margin-bottom:3.2rem; }
@media (max-width:900px){ .location-layout{ grid-template-columns:1fr; height:auto; } }
.location-main{ position:relative; border-radius:8px; overflow:hidden; height:100%; box-shadow:0 40px 70px -40px rgba(22,19,15,.4); }
@media (max-width:900px){ .location-main{ height:320px; } }
.location-main img{ width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--ease); }
.location-main:hover img{ transform:scale(1.05); }
.location-cards{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:1.2rem; height:100%; }
@media (max-width:900px){ .location-cards{ height:auto; grid-auto-rows:170px; } }
.loc-card{ position:relative; border-radius:8px; overflow:hidden; box-shadow:0 26px 40px -28px rgba(22,19,15,.4); }
.loc-card img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.loc-card:hover img{ transform:scale(1.09); }
.loc-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(18,16,12,.62) 0%, rgba(18,16,12,.06) 55%); transition:background .4s ease; }
.loc-card:hover::after{ background:linear-gradient(0deg, rgba(18,16,12,.75) 0%, rgba(18,16,12,.15) 60%); }
.loc-card-label{ position:absolute; left:1.1rem; bottom:1rem; z-index:2; color:#fff; font-family:var(--font-display); font-size:1.05rem; display:flex; align-items:center; gap:.55rem; letter-spacing:.01em; }
.loc-card-label .emoji{ font-size:1.05rem; }


/* ---------- БРОНИРОВАНИЕ ---------- */
.booking-hero{ background:var(--charcoal); color:var(--cream); border-radius:8px; padding:clamp(2.4rem,5vw,4.2rem); position:relative; overflow:hidden; margin-bottom:3rem; box-sizing:border-box; }
.booking-hero::before{ content:''; position:absolute; inset:0; background:radial-gradient(80% 100% at 100% 0%, rgba(169,137,90,.16), transparent 60%); }
.booking-hero-inner{ position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2rem; min-width:0; }
.booking-hero-inner > div{ min-width:0; }
.booking-hero h3{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.5rem,1.6vw + 1rem,2.1rem); margin:0 0 .7rem; max-width:20ch; }
.booking-hero p{ color:rgba(251,248,242,.72); margin:0; max-width:44ch; line-height:1.65; }
.booking-hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; min-width:0; }
.booking-hero-cta .btn{ white-space:normal; text-align:center; max-width:100%; }

.booking-wrap{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:2.8rem; align-items:start; min-width:0; }
@media (max-width:960px){ .booking-wrap{ grid-template-columns:minmax(0,1fr); } }
.booking-wrap > div{ min-width:0; }
.price-box{ background:var(--surface); border:1px solid var(--sand-line); border-radius:6px; padding:1.8rem 1.7rem; box-shadow:0 30px 50px -34px rgba(22,19,15,.3); min-width:0; box-sizing:border-box; }
.price-box .big{ font-family:var(--font-display); font-size:2rem; color:var(--gold); }
.price-box .big small{ font-family:var(--font-body); font-size:.85rem; color:var(--warm-grey); font-weight:400; }
.policy-line{ display:flex; gap:.7rem; align-items:flex-start; margin-top:1.3rem; padding:1.05rem 1.2rem; background:var(--sand); border-radius:4px; font-size:.87rem; box-sizing:border-box; }
.policy-line .icon{ color:var(--gold); margin-top:.1rem; flex:none; }

.booking-card{ border:1px solid var(--sand-line); border-radius:6px; background:var(--surface); padding:1.9rem clamp(1.4rem,3vw,2.3rem); box-shadow:0 30px 50px -34px rgba(22,19,15,.3); min-width:0; box-sizing:border-box; }
.form-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem; }
@media (max-width:520px){ .form-row{ grid-template-columns:minmax(0,1fr); } }
.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; min-width:0; }
.field label{ font-size:.78rem; color:var(--warm-grey); text-transform:uppercase; letter-spacing:.04em; }
.field input, .field select, .field textarea{ width:100%; max-width:100%; box-sizing:border-box; font:inherit; padding:.8rem .95rem; border-radius:3px; border:1px solid var(--sand-line); background:var(--cream); color:var(--charcoal); transition:border-color .3s ease; -webkit-appearance:none; appearance:none; }
.field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C8577' stroke-width='1.6'%3E%3Cpath d='M5 8.5l7 7 7-7'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .9rem center; background-size:14px; padding-right:2.4rem; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--gold); }
.field textarea{ resize:vertical; min-height:70px; }
.form-actions{ display:flex; flex-direction:column; gap:.8rem; margin-top:.4rem; }
.form-alt{ display:flex; align-items:center; gap:.7rem; font-size:.8rem; color:var(--warm-grey); }
.form-alt hr{ flex:1; border:none; border-top:1px solid var(--sand-line); }

/* ---------- КАЛЬКУЛЯТОР СТОИМОСТИ ---------- */
.calc-summary{ margin:.4rem 0 1.5rem; padding:1.2rem 1.4rem; background:var(--sand); border-radius:6px; min-height:1.4rem; }
.calc-summary-hint{ font-size:.84rem; color:var(--warm-grey); }
.calc-row{ display:flex; align-items:baseline; justify-content:space-between; font-size:.98rem; }
.calc-row b{ font-family:var(--font-display); font-size:1.4rem; color:var(--gold); }
.calc-note{ margin:.6rem 0 0; font-size:.74rem; color:var(--warm-grey); line-height:1.5; }

/* ---------- ЗАГЛУШКА ОНЛАЙН-ОПЛАТЫ (Stripe-ready) ---------- */
.btn-pay{ background:var(--cream); border:1px dashed var(--gold); color:var(--charcoal); margin-top:.8rem; }
.btn-pay:hover{ background:var(--sand); border-style:solid; }
.pay-note{ margin:.6rem 0 0; font-size:.72rem; color:var(--warm-grey); text-align:center; line-height:1.5; }
.form-success{ display:none; text-align:center; padding:2rem 1rem; }
.form-success.show{ display:block; }
.form-success .icon{ width:38px; height:38px; color:var(--gold); margin:0 auto 1rem; }
.form-success h3{ font-family:var(--font-display); font-weight:400; margin:0 0 .5rem; }
.form-success p{ color:var(--warm-grey); margin:0; font-size:.92rem; }

/* ---------- ХОЗЯИН ---------- */
.host-layout{ display:grid; grid-template-columns:auto 1fr; gap:3rem; align-items:flex-start; max-width:840px; margin:0 auto; }
.host-mark{ width:92px; height:92px; border-radius:50%; flex:none; position:relative; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--gold-soft); }
.host-mark::before{ content:''; position:absolute; inset:6px; border:1px solid var(--sand-line); border-radius:50%; }
.host-mark span{ font-family:var(--font-display); font-weight:400; font-size:2.1rem; color:var(--gold); position:relative; }
.host-name{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.6rem,1.4vw + 1.1rem,2rem); margin:.2rem 0 1.3rem; letter-spacing:-.005em; }
.host-quote{ margin:0 0 1.3rem; padding-left:1.3rem; border-left:2px solid var(--gold); font-family:var(--font-display); font-weight:400; font-style:italic;
  font-size:clamp(1.12rem,.6vw + .95rem,1.32rem); line-height:1.6; color:var(--charcoal); }
.host-desc{ margin:0; color:var(--charcoal-soft); line-height:1.75; font-size:.98rem; max-width:52ch; }
.host-langs{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem; }
.lang-tag{ font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; padding:.45rem 1rem; border:1px solid var(--sand-line);
  border-radius:30px; color:var(--charcoal-soft); background:var(--surface); }
@media (max-width:640px){ .host-layout{ grid-template-columns:1fr; text-align:center; gap:1.4rem; justify-items:center; }
  .host-quote{ border-left:none; border-top:2px solid var(--gold); padding-left:0; padding-top:1rem; }
  .host-langs{ justify-content:center; } }

/* ---------- WHY-STRIP (встроено в секцию хозяина) ---------- */
.why-strip{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem 2.4rem; margin-top:3rem; padding-top:2.4rem; border-top:1px solid var(--sand-line); }
.why-item{ display:flex; align-items:center; gap:.6rem; font-size:.9rem; font-weight:600; color:var(--charcoal-soft); }
.why-item .icon{ width:19px; height:19px; color:var(--gold); }

/* ---------- УДОБСТВА — компактная premium-сетка из самого важного + всё остальное по кнопке ---------- */
#amenityEssentials{ grid-template-columns:repeat(4,1fr); margin-bottom:3rem; }
@media (max-width:860px){ #amenityEssentials{ grid-template-columns:repeat(2,1fr); } }

.apt-highlights{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; max-width:900px; margin:0 auto 3rem; }
@media (max-width:760px){ .apt-highlights{ grid-template-columns:1fr; } }
.apt-highlight{ display:flex; align-items:flex-start; gap:.9rem; padding:1.3rem 1.4rem; background:var(--surface); border:1px solid var(--sand-line);
  border-radius:8px; transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }
.apt-highlight:hover{ border-color:var(--gold-soft); transform:translateY(-3px); box-shadow:0 24px 40px -30px rgba(22,19,15,.3); }
.apt-highlight .icon{ width:19px; height:19px; color:var(--gold); flex:none; margin-top:.15rem; }
.apt-highlight b{ display:block; font-size:.88rem; margin-bottom:.2rem; }
.apt-highlight span{ display:block; font-size:.8rem; color:var(--warm-grey); line-height:1.4; }

.amenities-toggle-wrap{ text-align:center; }
.amenities-toggle{ display:inline-flex; align-items:center; gap:.6rem; background:none; border:1px solid var(--sand-line); border-radius:30px;
  padding:.8rem 1.6rem; font:600 .78rem/1 var(--font-body); text-transform:uppercase; letter-spacing:.08em; color:var(--charcoal-soft);
  transition:border-color .3s ease, color .3s ease, background .3s ease; }
.amenities-toggle:hover{ border-color:var(--gold); color:var(--charcoal); background:var(--surface); }
.amenities-toggle .icon{ transition:transform .35s var(--ease); }
.amenities-toggle[aria-expanded="true"] .icon{ transform:rotate(180deg); }
.amenities-full{ max-height:0; overflow:hidden; transition:max-height .6s var(--ease); }
.amenities-full.open{ max-height:2400px; }
.amenities-full-inner{ padding-top:3rem; }

#amenityGroups{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; }
.amenity-card{ position:relative; background:linear-gradient(160deg, #FFFFFF 0%, var(--cream) 100%); border:1px solid var(--sand-line); border-radius:10px; padding:2.4rem 2.1rem;
  overflow:hidden; box-shadow:0 20px 40px -34px rgba(22,19,15,.3);
  transition:border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease); }
.amenity-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.amenity-card:hover{ border-color:var(--sand-line); transform:translateY(-8px); box-shadow:0 42px 64px -34px rgba(22,19,15,.4); }
.amenity-card:hover::before{ transform:scaleX(1); }
.amenity-icon{ width:52px; height:52px; border-radius:50%; background:var(--sand); display:flex; align-items:center; justify-content:center;
  color:var(--gold); margin-bottom:1.5rem; transition:background .5s var(--ease), transform .5s var(--ease); }
.amenity-card:hover .amenity-icon{ background:var(--gold); color:var(--cream); transform:scale(1.06); }
.amenity-icon .icon{ width:22px; height:22px; }
.amenity-title{ font:400 1.28rem/1 var(--font-display); letter-spacing:.005em; color:var(--charcoal); margin:0 0 1.4rem; }
.amenity-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.75rem; }
.amenity-list li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.93rem; color:var(--charcoal-soft); line-height:1.5; }
.amenity-list .icon{ width:15px; height:15px; margin-top:.22rem; color:var(--gold); flex:none; }
@media (max-width:860px){ #amenityGroups{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ #amenityGroups{ grid-template-columns:1fr; } }

/* ---------- FAQ ---------- */
.faq{ max-width:1000px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; column-gap:3.4rem; }
@media (max-width:760px){ .faq{ grid-template-columns:1fr; } }
.faq details{ border-bottom:1px solid var(--sand-line); padding:1.6rem 0; align-self:start; transition:border-color .4s var(--ease); }
.faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1.3rem; font-family:var(--font-display); font-size:1.1rem; transition:color .4s var(--ease); }
.faq summary::-webkit-details-marker{ display:none; }
.faq details:hover summary{ color:var(--gold); }
.faq summary .plus{ flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--sand-line); position:relative;
  transition:background .4s var(--ease), border-color .4s var(--ease); }
.faq details:hover summary .plus{ border-color:var(--gold); }
.faq details[open] summary .plus{ background:var(--gold); border-color:var(--gold); }
.faq summary .plus::before, .faq summary .plus::after{ content:''; position:absolute; background:var(--gold); top:50%; left:50%; transform:translate(-50%,-50%); transition:background .4s var(--ease); }
.faq details[open] summary .plus::before, .faq details[open] summary .plus::after{ background:var(--cream); }
.faq summary .plus::before{ width:10px; height:1.2px; }
.faq summary .plus::after{ width:1.2px; height:10px; transition:transform .35s var(--ease), opacity .35s var(--ease); }
.faq details[open] summary .plus::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq p{ margin:1rem 0 0; color:var(--warm-grey); line-height:1.7; font-size:.95rem; padding-right:1.6rem; }

/* ---------- FOOTER ---------- */
footer{ background:var(--charcoal-deep); color:rgba(251,248,242,.68); }
.foot-wrap{ max-width:var(--container); margin:0 auto; padding:5rem clamp(1.25rem,4vw,3.5rem) 2.4rem; display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:2.5rem; }
@media (max-width:860px){ .foot-wrap{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot-wrap{ grid-template-columns:1fr; } }
.foot-brand{ font-family:var(--font-display); color:var(--cream); font-size:1.3rem; margin-bottom:.9rem; letter-spacing:.02em; }
.foot-col h4{ font:700 .72rem/1 var(--font-body); text-transform:uppercase; letter-spacing:.12em; color:var(--gold-soft); margin:0 0 1.1rem; opacity:.85; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; font-size:.88rem; }
.foot-col a{ text-decoration:none; transition:color .3s ease; }
.foot-col a:hover{ color:var(--gold-soft); }
.foot-bottom{ max-width:var(--container); margin:0 auto; padding:1.5rem clamp(1.25rem,4vw,3.5rem) 2.2rem; border-top:1px solid rgba(251,248,242,.1);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.76rem; }

/* ---------- FLOATING ---------- */
.fab-whatsapp{ position:fixed; right:1.4rem; bottom:1.4rem; z-index:70; width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; border:none; box-shadow:0 16px 32px -10px rgba(0,0,0,.4); opacity:0; transform:scale(.8); pointer-events:none; transition:opacity .4s var(--ease), transform .4s var(--ease); }
.fab-whatsapp.show{ opacity:1; transform:scale(1); pointer-events:auto; }
.fab-whatsapp:hover{ transform:scale(1.08); }
.fab-whatsapp svg{ width:27px; height:27px; }
.mobile-bar{ position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; gap:.7rem; box-sizing:border-box;
  padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--sand-line); }
.mobile-bar .btn-primary{ flex:1; justify-content:center; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding-left:1rem; padding-right:1rem; letter-spacing:.06em; }
.mobile-bar .wa{ width:48px; height:48px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
.mobile-bar .wa svg{ width:22px; height:22px; }
/* прячем нижнюю панель, пока активно поле ввода — на iOS фикс-позиционирование при открытой
   клавиатуре ведёт себя непредсказуемо и панель может «наплыть» на середину формы */
.mobile-bar.kb-hidden{ transform:translateY(100%); }
@media (max-width:760px){
  .mobile-bar{ display:flex; transition:transform .25s ease; }
  .fab-whatsapp{ display:none; }
  /* с запасом: высота панели (~70px) + безопасная зона снизу у iPhone с Face ID/чёлкой */
  body{ padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
}

/* защита от переполнения: длинные надписи на кнопках переносятся, а не выталкивают контейнер за края экрана */
@media (max-width:480px){
  .btn{ white-space:normal; text-align:center; padding:1rem 1.4rem; }
}

@media (prefers-reduced-motion: reduce){
  .hero-tag, .hero-content h1, .hero-content .lede, .cta-row{ animation:none !important; opacity:1 !important; transform:none !important; }
  .hero-photo{ animation:none !important; filter:none !important; }
  .hero-shimmer{ display:none !important; }
  .hero-wavedrift{ display:none !important; }
  .hero-clouddrift{ display:none !important; }
  .hero-video{ display:none !important; }
  .line-inner{ animation:none !important; transform:none !important; filter:none !important; }
  .scroll-cue i::after{ animation:none !important; }
  [data-reveal]{ transition:none !important; opacity:1 !important; transform:none !important; }
  [data-reveal-blur]{ transition:none !important; opacity:1 !important; filter:none !important; transform:none !important; }
  [data-reveal-stagger] > *{ transition:none !important; opacity:1 !important; transform:none !important; }
  .media-frame img, .gallery-stage-frame img, .gthumb img, .apt-media img{ transition:none !important; }
  .btn::after{ display:none !important; }
  .divider-video{ display:none !important; }
}