/* ==========================================================================
   Volga Waterfront Villas — базовые стили.
   Палитра тёплая и приглушённая: песок, лён, хвоя.
   ========================================================================== */

:root{
  --bg:            #f6f4ef;
  --bg-warm:       #efece4;
  --bg-deep:       #2a322c;
  --ink:           #232a25;
  --ink-soft:      #5b665d;
  --ink-faint:     #8d968e;
  --sage:          #7d8f7b;
  --sage-deep:     #4a5a4c;
  --sand:          #c2ae8e;
  --line:          rgba(35,42,37,.12);
  --line-soft:     rgba(35,42,37,.07);
  --white:         #fffdf9;

  /* арабские шрифты стоят в тех же стеках: латиница и кириллица берутся
     из первых семейств, арабская вязь — из следующих за ними */
  --font-display: "Cormorant Garamond", "Amiri", Georgia, "Times New Roman", serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans Arabic", Tahoma, sans-serif;
  /* Optima есть в macOS/iOS; на Windows подхватывается Candara — та же
     гуманистическая антиква-гротеск с расширяющимися штрихами */
  --font-optima: Optima, "Optima nova LT Pro", Candara, "Gill Sans",
                 "Gill Sans MT", "Segoe UI", "Noto Sans Arabic", sans-serif;

  --wrap: 1220px;
  --gap: clamp(28px, 4vw, 64px);
  --radius: 14px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .7s;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.62;
  font-weight:380;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ display:block; max-width:100%; height:auto; }
button{ font:inherit; color:inherit; }
a{ color:inherit; }

p{ margin:0 0 1.1em; color:var(--ink-soft); }
p:last-child{ margin-bottom:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }

.skip-link{
  position:fixed; left:-999px; top:12px; z-index:200;
  background:var(--white); padding:10px 18px; border-radius:8px;
}
.skip-link:focus{ left:12px; }

:focus-visible{ outline:2px solid var(--sage); outline-offset:3px; border-radius:4px; }

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

.h2{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(34px, 5vw, 60px);
  line-height:1.08;
  letter-spacing:-.015em;
  margin:.1em 0 .55em;
}
.h2 em{ font-style:italic; color:var(--sage-deep); }

.h3{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(26px,3.2vw,36px);
  line-height:1.15;
  margin:0 0 .5em;
}

.eyebrow{
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 .9em;
  font-weight:500;
}

.section__lead{ font-size:clamp(17px,1.5vw,19px); max-width:56ch; }

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

.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:22px clamp(20px,5vw,40px);
  color:var(--white);
  transition:background var(--dur) var(--ease),
             color var(--dur) var(--ease),
             padding .4s var(--ease),
             box-shadow .4s var(--ease);
}
.site-header.is-stuck{
  background:rgba(246,244,239,.88);
  backdrop-filter:blur(14px) saturate(1.1);
  color:var(--ink);
  padding-block:12px;
  box-shadow:0 1px 0 var(--line-soft);
}

.logo{ display:flex; align-items:center; gap:16px; text-decoration:none; }

/* знак — чёрные глифы на прозрачном фоне; поверх видео (шапка не "прилипла")
   инвертируем в белый, поверх светлого фона после скролла возвращаем чёрный */
.logo__mark{
  height:69px; width:auto; flex:none; display:block;
  transition:height .4s var(--ease), filter .4s var(--ease);
}
.site-header:not(.is-stuck) .logo__mark{ filter:brightness(0) invert(1); }
.site-header.is-stuck .logo__mark{ height:57px; }

/* инициалы стоят перед двумя строками и занимают их высоту целиком */
.logo__initials{
  font-family:var(--font-display); font-weight:400;
  font-size:50px; line-height:1; letter-spacing:.01em;
  margin-right:-2px;
  transition:font-size .4s var(--ease);
}
.site-header.is-stuck .logo__initials{ font-size:42px; }

.logo__text{ display:flex; flex-direction:column; line-height:1.2; }
.logo__name{
  font-family:var(--font-display); font-size:29px; font-weight:400; letter-spacing:.02em;
  transition:font-size .4s var(--ease);
}
.logo__sub{ font-size:13px; letter-spacing:.15em; text-transform:uppercase; opacity:.7; }
.site-header.is-stuck .logo__name{ font-size:25px; }

.nav{ display:flex; gap:clamp(14px,2vw,28px); font-size:14.5px; }
.nav a{ text-decoration:none; opacity:.85; position:relative; padding-block:4px; }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav a:hover{ opacity:1; }
.nav a:hover::after{ transform:scaleX(1); }

.lang{ display:flex; align-items:center; gap:6px; font-size:13px; letter-spacing:.1em; }
.lang__btn{
  background:none; border:0; padding:4px 2px; cursor:pointer;
  opacity:.55; transition:opacity .3s var(--ease);
}
.lang__btn:hover{ opacity:.85; }
.lang__btn.is-active{ opacity:1; text-decoration:underline; text-underline-offset:5px; }
.lang__sep{ opacity:.35; }

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

/* Обложка идёт двумя ярусами: сверху чистый кадр без единой надписи,
   под ним — тёмная полоса с заголовком и кнопкой обратного звонка. */
.hero{
  position:relative; display:block; padding:0;
  color:var(--white); background:var(--bg-deep);
}
/* кадр держит пропорции ролика (16:9) — тогда он виден целиком */
.hero__media{
  position:relative; aspect-ratio:16/9;
  overflow:hidden; background:var(--bg-deep);
}
/* ни масштаба, ни медленного наезда: любое увеличение съедало бы края */
.hero__video,.hero__media > img{
  width:100%; height:100%; object-fit:contain;
}
/* текста на кадре больше нет — затемнение оставлено только сверху,
   под прозрачную шапку, и внизу, чтобы кадр мягко уходил в тёмную полосу */
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to bottom,
    rgba(24,30,26,.5) 0%, rgba(24,30,26,.06) 26%,
    rgba(24,30,26,.06) 74%, rgba(24,30,26,.45) 100%);
}

/* тёмный фон полосы даёт сама .hero, поэтому здесь только колонка */
.hero__inner{
  position:relative; z-index:2;
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:clamp(20px,5vw,40px);
  padding-block:clamp(40px,6vw,76px);
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(28px,5vw,72px);
}
.hero__copy{ flex:1 1 auto; max-width:760px; }

.hero__title{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(38px,6.2vw,86px); line-height:1.02;
  letter-spacing:-.025em; margin:0 0 .38em;
  text-wrap:balance;
}
.hero__title em{ display:block; font-style:italic; color:#e8e2d3; }
.hero__lead{ color:rgba(255,253,249,.86); max-width:44ch; font-size:clamp(16px,1.5vw,19px); }
.hero .eyebrow{ color:rgba(255,253,249,.6); }

/* ---------- обратный звонок: кнопка → форма ---------- */

/* панель стоит рядом с заголовком в тёмной полосе под кадром */
.lead-wrap{
  flex:none; width:min(392px, 42vw); text-align:right;
}
.lead-wrap .lead{ width:100%; }

.lead-toggle{
  display:inline-flex; align-items:center; gap:11px;
  padding:15px 26px; border-radius:999px; cursor:pointer;
  background:rgba(246,244,239,.08);
  border:1px solid rgba(255,253,249,.45);
  color:var(--white); font-size:15px; letter-spacing:.02em;
  backdrop-filter:blur(6px);
  animation:formIn 1.1s var(--ease) .45s both;
  transition:background .45s var(--ease), border-color .45s var(--ease),
             transform .45s var(--ease), color .45s var(--ease);
}
.lead-toggle svg{ width:18px; height:18px; opacity:.85; }
.lead-toggle:hover{
  background:var(--white); border-color:var(--white);
  color:var(--ink); transform:translateY(-2px);
}
.lead-wrap.is-open .lead-toggle{ display:none; }

.lead__close{
  position:absolute; top:10px; right:14px;
  background:none; border:0; cursor:pointer;
  font-size:26px; line-height:1; color:var(--ink-faint);
  padding:4px 8px; border-radius:8px;
  transition:color .3s var(--ease);
}
.lead__close:hover{ color:var(--ink); }

/* ---------- форма ---------- */

.lead{
  position:relative; text-align:left;
  background:rgba(246,244,239,.93);
  backdrop-filter:blur(18px) saturate(1.15);
  color:var(--ink);
  border-radius:var(--radius);
  padding:clamp(24px,2.6vw,32px);
  box-shadow:0 24px 60px -30px rgba(20,26,21,.55);
  animation:formIn .6s var(--ease) both;
}
@keyframes formIn{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

.lead[hidden]{ display:none; }

.lead__title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(24px,2.4vw,30px); line-height:1.15; margin:0 0 .35em;
}
.lead__sub{ font-size:14.5px; margin-bottom:1.5em; }

.field{ display:block; margin-bottom:14px; }
.field__label{
  display:block; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:6px;
}
.field input,.field select{
  width:100%; font:inherit; font-size:16px; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:8px 2px; border-radius:0;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.field select{ appearance:none; cursor:pointer; }
.field input:focus,.field select:focus{
  outline:none; border-bottom-color:var(--sage-deep);
}
.field input::placeholder{ color:var(--ink-faint); opacity:.65; }
.field.is-invalid input{ border-bottom-color:#b4736a; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:0; border-radius:999px; cursor:pointer;
  padding:15px 30px; font-size:15px; letter-spacing:.03em;
  transition:transform .35s var(--ease), background .35s var(--ease),
             box-shadow .35s var(--ease);
}
.btn--primary{
  width:100%; margin-top:20px;
  background:var(--sage-deep); color:var(--white);
  box-shadow:0 10px 26px -16px rgba(42,50,44,.9);
}
.btn--primary:hover{ background:#3d4b3f; transform:translateY(-2px); }
.btn--primary:active{ transform:translateY(0); }

.field textarea{
  width:100%; font:inherit; font-size:16px; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:8px 2px; border-radius:0; resize:vertical; min-height:96px;
  transition:border-color .4s var(--ease);
}
.field textarea:focus{ outline:none; border-bottom-color:var(--sage-deep); }
.field textarea::placeholder{ color:var(--ink-faint); opacity:.65; }
.field.is-invalid textarea{ border-bottom-color:#b4736a; }

/* ловушка для ботов — видна только им */
.hp{
  position:absolute !important; left:-9999px; width:1px; height:1px;
  opacity:0; pointer-events:none;
}

.form__note{ font-size:11.5px; line-height:1.5; color:var(--ink-faint); margin:14px 0 0; }
.form__status{ font-size:14px; margin:12px 0 0; min-height:1.2em; color:var(--sage-deep); }
.form__status.is-error{ color:#a6635a; }

/* ==========================================================================
   Секции
   ========================================================================== */

/* Ритм фонов: светлый → тёплый → тёмно-зелёный (видео) → светлый →
   тёплый (форма) → тёмно-зелёный подвал. Два тёмных блока не соседствуют. */
.section{ padding:clamp(76px,11vw,140px) 0; }
/* фото Стрелки уходит в фон всей секции, текст ложится поверх;
   читаемость держит двойная подложка — вертикальная и слева направо */
.section--city{
  position:relative; isolation:isolate;
  background:var(--bg-deep) url("../assets/img/strelka.jpg") center / cover no-repeat;
  color:var(--white);
  padding-block:clamp(90px,13vw,170px);
}
.section--city::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to right,
      rgba(18,24,19,.92) 0%, rgba(18,24,19,.86) 38%,
      rgba(18,24,19,.62) 68%, rgba(18,24,19,.42) 100%),
    linear-gradient(to bottom, rgba(18,24,19,.45), rgba(18,24,19,.55));
}

.city__copy{ max-width:60ch; }
.section--city .eyebrow{ color:rgba(255,253,249,.75); }
.section--city .h2 em{ color:var(--sand); }
.section--city p{ color:rgba(255,253,249,.88); }
.section--city .facts{ border-top-color:rgba(255,253,249,.22); }
.section--city .fact b{ color:var(--white); }
.section--city .fact span{ color:rgba(255,253,249,.78); }
.section--map{ background:var(--bg-warm); }
.section--project{ background:var(--bg-warm); }
/* секция заканчивается самим роликом — тёмной полосы под ним нет,
   следующий блок начинается сразу за кадром */
.section--films{ background:var(--bg-deep); color:var(--white); padding-bottom:0; }
.section--houses{ background:var(--bg); }
.section--feedback{ background:var(--bg); }

/* текстовый блок в одну колонку — для рассказа о застройщике */
.prose .h2{ margin-bottom:.6em; max-width:22ch; }
.prose p{ font-size:clamp(16px,1.4vw,18px); }
.prose__last{ color:var(--ink); }

/* текст идёт во всю ширину, но в две колонки: строка остаётся
   удобной для чтения, а блок занимает вдвое меньше высоты */
.cols{
  columns:2; column-gap:clamp(34px,4.5vw,72px);
  orphans:3; widows:3;
}
.cols p{ break-inside:avoid; margin-bottom:1.15em; }
.cols p:last-child{ margin-bottom:0; }

.dev-block{ margin:clamp(34px,4vw,56px) 0 clamp(40px,5vw,64px); }
.dev-block .h3{ margin-bottom:.65em; max-width:24ch; }
.dev-block .h3 em{ font-style:italic; color:var(--sage-deep); }

.section__head{ max-width:70ch; margin-bottom:clamp(38px,5vw,64px); }

.grid-2{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(36px,6vw,88px); align-items:center;
}

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

.facts{
  list-style:none; padding:0; margin:36px 0 0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:22px 28px;
  border-top:1px solid var(--line); padding-top:28px;
}
.facts--row{
  grid-template-columns:repeat(3,1fr);
  margin-top:clamp(40px,5vw,64px); gap:24px clamp(28px,4vw,56px);
}
.fact{ display:flex; flex-direction:column; gap:2px; }
.fact b{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(26px,3vw,34px); line-height:1; color:var(--sage-deep);
}
.fact b i{ font-style:normal; font-size:.55em; letter-spacing:.02em; }
.fact span{ font-size:13.5px; color:var(--ink-faint); }

/* ---------- карта ---------- */

.map__frame{
  position:relative; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:21/9; background:var(--bg-deep);
  box-shadow:0 40px 70px -55px rgba(20,26,21,.6);
}
.map__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- видео ---------- */

.section--films .eyebrow{ color:rgba(255,253,249,.5); }
.section--films .h2 em{ color:var(--sand); }
.section--films .section__lead{ color:rgba(255,253,249,.72); }

.section--films .film p{ color:rgba(255,253,249,.55); }
/* текст о застройщике теперь на тёмно-зелёном фоне */
.section--films .prose p{ color:rgba(255,253,249,.72); }
.section--films .prose__last{ color:rgba(255,253,249,.92); }
.section--films .dev-block .h3 em{ color:var(--sand); }

.films{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,40px); }
/* один ролик — крупной кинематографичной плиткой */
.films--single{ grid-template-columns:1fr; }
.films--single .film__play{ aspect-ratio:16/9; }

/* плеер во всю ширину экрана: стоит вне .wrap, поэтому просто снимаем
   скругления. Пропорции — родные 16:9, и кадр вписывается целиком:
   ничего не срезается ни сверху, ни снизу */
.films--bleed{ margin-top:clamp(40px,5vw,64px); }
.films--bleed .film__play{ border-radius:0; aspect-ratio:16/9; }
.films--bleed .film__play img,
.films--bleed .film__play video{
  object-fit:contain; background:var(--bg-deep);
}
.film h3{
  font-family:var(--font-display); font-weight:400; font-size:23px;
  margin:18px 0 2px;
}
.film p{ font-size:13.5px; color:var(--ink-faint); margin:0; }

.film__play{
  position:relative; display:block; width:100%; padding:0; border:0;
  background:var(--bg-deep); border-radius:var(--radius); overflow:hidden;
  cursor:pointer; aspect-ratio:4/3;
}
.film__play img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease), filter .6s var(--ease);
}
.film__play:hover img{ transform:scale(1.045); filter:brightness(.92); }
.film__icon{
  position:absolute; inset:0; margin:auto;
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(246,244,239,.9); color:var(--sage-deep);
  transition:transform .45s var(--ease), background .45s var(--ease);
}
.film__icon svg{ width:24px; height:24px; margin-left:3px; }
.film__play:hover .film__icon{ transform:scale(1.08); background:var(--white); }
.film__play.is-playing .film__icon{ opacity:0; pointer-events:none; }
.film__play video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.film__play video:fullscreen,
.film__play video:-webkit-full-screen{ object-fit:contain; background:#000; }

/* ---------- дома ---------- */

/* блок виллы: текст слева, визуализация справа */
.villa{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(32px,5vw,72px); align-items:stretch;
}
/* визуализация ровно в высоту текстовой колонки */
.villa__figure{ margin:0; display:flex; }
.villa__figure .shot{
  display:block; width:100%; height:100%; aspect-ratio:auto;
  background:#fff; border-radius:var(--radius);
  box-shadow:0 40px 70px -55px rgba(20,26,21,.6);
}
.villa__figure .shot img{ width:100%; height:100%; object-fit:cover; object-position:center; }

.specs{
  list-style:none; padding:22px 0 0; margin:26px 0 0;
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px 24px;
}
.specs li{ display:flex; flex-direction:column; }
.specs b{
  font-family:var(--font-display); font-weight:400; font-size:27px;
  line-height:1.1; color:var(--sage-deep);
}
.specs b i{ font-style:normal; font-size:.6em; }
.specs span{ font-size:13px; color:var(--ink-faint); }

/* что есть на участке: пары «название — величина» в две колонки */
.yard{ margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.yard__title{
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 14px;
}
.yard__list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:2px clamp(20px,3vw,40px);
}
.yard__list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--line-soft);
  font-size:14.5px;
}
.yard__list b{ font-weight:400; color:var(--ink); }
.yard__list span{ color:var(--ink-faint); white-space:nowrap; }
.yard__list span i{ font-style:normal; font-size:.85em; }

/* две выноски: тип вилл и стартовая цена */
.highlights{
  list-style:none; margin:32px 0 0; padding:0;
  display:grid; grid-template-columns:1fr; gap:clamp(12px,1.4vw,18px);
}
.highlight{
  display:flex; align-items:center; gap:14px;
  border:1px solid var(--line); border-radius:4px;
  padding:clamp(18px,2vw,26px) clamp(16px,1.8vw,24px);
  font-family:var(--font-optima); font-size:clamp(15.5px,1.35vw,18.5px);
  font-weight:400; line-height:1.3; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink);
}
.highlight svg{ width:26px; height:26px; flex:none; color:var(--sand); }
.highlight b{ font-weight:400; white-space:nowrap; }

/* цена — антиквой в разрядку, заглавными: как в выносках выше */
.price{
  margin-top:26px; display:flex; align-items:baseline; gap:10px;
  font-family:var(--font-display); font-size:clamp(17px,1.5vw,21px);
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint);
}
.price__note{
  margin-top:8px; font-size:12.5px; line-height:1.5;
  color:var(--ink-faint); max-width:46ch;
  font-family:var(--font-sans); letter-spacing:normal; text-transform:none;
}
.price b{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(21px,2vw,26px); letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink); white-space:nowrap;
}

/* ---------- проект целиком: текст слева, плитка фото справа ---------- */

.project-grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,5vw,72px); align-items:center;
}
.project__text .h2--wide{
  text-transform:uppercase; letter-spacing:.06em;
  font-size:clamp(28px,3.2vw,44px); margin-bottom:.7em;
}
.project__text p{ font-size:clamp(15px,1.25vw,16.5px); line-height:1.72; }

/* тонкая линия справа от надстрочника — как в референсе */
.eyebrow--rule{ display:flex; align-items:center; gap:16px; }
.eyebrow--rule::after{
  content:""; flex:1; height:1px; background:var(--line); max-width:190px;
}

/* галерея чертежей: листаем влево-вправо, карточка центрируется по высоте */
.gallery{ align-self:center; min-width:0; }
.gallery__viewport{ position:relative; }

.gallery__track{
  display:flex;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  background:#fff; border:1px solid var(--line-soft);
  border-radius:var(--radius);
  box-shadow:0 30px 70px -50px rgba(20,26,21,.6);
  scrollbar-width:none; -ms-overflow-style:none;
}
.gallery__track::-webkit-scrollbar{ display:none; }
.gallery__track:focus-visible{ outline:2px solid var(--sage-deep); outline-offset:3px; }

.gallery .shot{
  flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always;
  height:clamp(430px,44vw,660px);
  background:#fff; border-radius:0;
}
/* это всё чертежи: показываем целиком, без обрезки */
.gallery .shot img{ object-fit:contain; padding:clamp(14px,1.8vw,30px); }
.gallery .shot:hover img{ transform:none; filter:none; }

.gallery__nav{
  position:absolute; top:50%; translate:0 -50%;
  width:clamp(42px,3.4vw,54px); height:clamp(42px,3.4vw,54px);
  display:grid; place-items:center;
  padding:0; border:1px solid var(--line); border-radius:50%;
  background:rgba(255,253,249,.92); cursor:pointer;
  box-shadow:0 14px 34px -20px rgba(20,26,21,.8);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.gallery__nav:hover{ background:var(--white); border-color:var(--sage); }
.gallery__nav svg{ width:44%; height:44%; }
.gallery__nav--prev{ left:clamp(10px,1.2vw,18px); }
.gallery__nav--next{ right:clamp(10px,1.2vw,18px); }

.gallery__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; margin-top:16px;
}
.gallery__dots{ display:flex; align-items:center; gap:9px; }
.gallery__dot{
  width:8px; height:8px; padding:0; border:0; border-radius:50%;
  background:var(--line); cursor:pointer;
  transition:background .3s var(--ease), scale .3s var(--ease);
}
.gallery__dot:hover{ background:var(--sage); }
.gallery__dot.is-active{ background:var(--sage-deep); scale:1.35; }
.gallery__count{
  margin:0; font-size:13px; letter-spacing:.08em;
  color:var(--ink-faint); font-variant-numeric:tabular-nums;
}
/* остался один кадр — листать нечего */
.gallery--single .gallery__nav,
.gallery--single .gallery__foot{ display:none; }

.shot{
  padding:0; border:0; cursor:zoom-in; overflow:hidden;
  border-radius:6px; background:var(--bg-warm);
  height:100%;
}
.shot img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease), filter .5s var(--ease);
}
.shot:hover img{ transform:scale(1.05); filter:brightness(.95); }

/* ---------- обратная связь ---------- */

.section--feedback{ padding:clamp(76px,10vw,130px) 0; }
.feedback{
  display:grid; grid-template-columns:1fr minmax(320px,440px);
  gap:clamp(36px,6vw,88px); align-items:center;
}
.feedback__tour{
  margin-top:26px; font-size:14.5px; line-height:1.6;
  color:var(--ink-faint); max-width:46ch;
}
/* карточка формы, чтобы она читалась на тёплом фоне */
.feedback .form--wide{
  background:var(--white); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:clamp(26px,3vw,36px);
  box-shadow:0 24px 60px -44px rgba(20,26,21,.55);
}

.form--wide .field{ margin-bottom:22px; }
.form__row{
  display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(20px,3vw,36px);
}
.feedback .form__row{ grid-template-columns:1fr; }
.form__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; margin-top:10px; flex-wrap:wrap;
}
.form__foot .form__note{ margin:0; max-width:44ch; flex:1 1 240px; }
.btn--auto{ width:auto; margin-top:0; flex:none; }

.contacts{
  list-style:none; padding:26px 0 0; margin:30px 0 0;
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px; font-size:17px;
}
.contacts a{ text-decoration:none; border-bottom:1px solid var(--line); }
.contacts a:hover{ border-bottom-color:var(--sage-deep); }
.contacts li:last-child{ color:var(--ink-faint); font-size:15px; margin-top:4px; }

/* ---------- footer ---------- */

.site-footer{
  background:var(--bg-deep); color:rgba(255,253,249,.55);
  padding:38px 0;
}
.footer__row{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  flex-wrap:wrap; font-size:13px;
}
.footer__row a{ text-decoration:none; }

/* кнопка обратного звонка над строкой подвала */
.footer__cta{
  display:flex; justify-content:center;
  padding-bottom:clamp(28px,3.5vw,40px);
  margin-bottom:clamp(26px,3vw,36px);
  border-bottom:1px solid rgba(255,253,249,.14);
}
.footer__cta .lead-wrap{
  width:min(392px,100%); max-width:none; text-align:center;
}
/* фейд с задержкой нужен только на обложке */
.footer__cta .lead-toggle{ animation:none; }

/* телефон и почта в подвале */
.footer__contacts{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:6px 22px; flex-wrap:wrap;
}
.footer__contacts a{
  color:rgba(255,253,249,.8);
  border-bottom:1px solid rgba(255,253,249,.25);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.footer__contacts a:hover{ color:var(--white); border-bottom-color:var(--white); }

/* логотип из шапки, но на тёмно-зелёном: глифы выбеливаем */
.footer__logo{ color:var(--white); margin-right:auto; }
.footer__logo .logo__mark{ height:56px; filter:brightness(0) invert(1); }
.footer__logo .logo__initials{ font-size:40px; }
.footer__logo .logo__name{ font-size:23px; }
.footer__logo .logo__sub{ opacity:.6; }

/* ==========================================================================
   Lightbox
   ========================================================================== */

.lightbox[hidden]{ display:none; }
.lightbox{
  position:fixed; inset:0; z-index:120;
  display:grid; place-items:center;
  background:rgba(22,27,23,.94);
  animation:fade .35s var(--ease);
  padding:clamp(20px,5vw,60px);
}
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
.lightbox__img{
  max-width:min(1100px,100%); max-height:82vh;
  border-radius:10px; object-fit:contain;
  animation:panelIn .45s var(--ease);
  transform-origin:center center;
  transition:transform .18s var(--ease);
  touch-action:none;                 /* щипок обрабатываем сами */
  cursor:zoom-in; will-change:transform;
}
.lightbox.is-zoomed .lightbox__img{ cursor:grab; }
.lightbox.is-zoomed .lightbox__img:active{ cursor:grabbing; }

/* лупа */
.lightbox__tools{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  background:rgba(22,27,23,.72); border:1px solid rgba(255,253,249,.18);
  border-radius:999px; padding:6px; backdrop-filter:blur(8px);
}
.lightbox__zoom{
  width:40px; height:40px; display:grid; place-items:center;
  border:0; border-radius:50%; cursor:pointer;
  background:transparent; color:rgba(255,253,249,.85);
  font-size:12.5px; letter-spacing:.04em;
  transition:background .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
}
.lightbox__zoom svg{ width:20px; height:20px; }
.lightbox__zoom:hover:not(:disabled){ background:rgba(255,253,249,.14); color:var(--white); }
.lightbox__zoom:disabled{ opacity:.35; cursor:default; }
.lightbox__close,.lightbox__nav{
  position:absolute; background:none; border:0; cursor:pointer;
  color:rgba(255,253,249,.75); line-height:1;
  transition:color .3s var(--ease), transform .3s var(--ease);
}
.lightbox__close{ top:22px; right:26px; font-size:38px; }
.lightbox__nav{ top:50%; transform:translateY(-50%); font-size:56px; padding:0 18px; }
.lightbox__nav--prev{ left:clamp(4px,2vw,24px); }
.lightbox__nav--next{ right:clamp(4px,2vw,24px); }
.lightbox__close:hover,.lightbox__nav:hover{ color:var(--white); }
/* счётчик — сверху: снизу он ложился бы на светлые чертежи и пропадал */
.lightbox__count{
  position:absolute; top:28px; left:0; right:0; text-align:center;
  color:rgba(255,253,249,.55); font-size:13px; letter-spacing:.14em; margin:0;
  pointer-events:none;
}

/* ==========================================================================
   Появление при скролле
   ========================================================================== */

.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }
.films .film:nth-child(2){ transition-delay:.12s; }

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

@media (max-width: 1080px){
  .nav{ display:none; }
  /* заголовок и форма перестают помещаться в строку — ставим их друг под друга */
  .hero__inner{ display:block; }
  .hero__copy{ max-width:none; margin-bottom:30px; }
  .lead-wrap{ width:100%; max-width:520px; text-align:left; }
}

@media (max-width: 820px){
  body{ font-size:16px; }

  .hero__inner{ padding-block:clamp(30px,7vw,46px); }
  .hero__copy{ margin-bottom:26px; }
  .lead-wrap{ max-width:none; }
  .lead-toggle{ width:100%; justify-content:center; }
  .grid-2,.villa,.feedback,.project-grid{ grid-template-columns:1fr; }
  /* в одну колонку картинке нечего тянуть — возвращаем родные пропорции */
  .villa__figure .shot{ height:auto; }
  .villa__figure .shot img{ height:auto; object-fit:contain; }

  /* на телефоне порядок другой: заголовок и текст, затем визуализация,
     и только после неё выноски про комнаты и цену */
  .villa{ gap:0; }
  .villa__text{ display:contents; }
  .villa__text > *{ order:1; }
  .villa__figure{ order:2; margin-top:30px; }
  .highlights{ order:3; margin-top:30px; }
  .section--city::before{
    background:
      linear-gradient(to right, rgba(18,24,19,.92), rgba(18,24,19,.84)),
      linear-gradient(to bottom, rgba(18,24,19,.5), rgba(18,24,19,.6));
  }

  .prose .h2,.dev-block .h3{ max-width:none; }
  .cols{ columns:1; }
  .films{ grid-template-columns:1fr; }
  .film__play{ aspect-ratio:16/10; }
  .map__frame{ aspect-ratio:1/1; }
  .form__row{ grid-template-columns:1fr; }
  .form__foot{ flex-direction:column-reverse; align-items:stretch; gap:16px; }
  .btn--auto{ width:100%; }
  .gallery .shot{ height:min(78vw,520px); }
  .gallery__nav{ width:42px; height:42px; }
  .footer__row{ justify-content:center; text-align:center; }
  .footer__logo{ margin-right:0; }
}

@media (max-width: 520px){
  /* заголовок и переключатель языков не умещаются в одну строку —
     ставим их друг под другом отдельным компактным блоком у самого верха */
  .site-header{
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:10px 20px 12px;
  }
  .lang{ justify-content:center; }
  .logo{ gap:10px; }
  .logo__mark{ height:42px; }
  .site-header.is-stuck .logo__mark{ height:36px; }
  .logo__initials{ font-size:30px; }
  .site-header.is-stuck .logo__initials{ font-size:26px; }
  .logo__name{ font-size:19px; }
  .site-header.is-stuck .logo__name{ font-size:17px; }
  /* вторая строка остаётся и на телефоне — просто мельче и плотнее */
  .logo__sub{ font-size:10px; letter-spacing:.1em; }
  .footer__logo .logo__mark{ height:46px; }
  .footer__logo .logo__initials{ font-size:32px; }
  .footer__logo .logo__name{ font-size:19px; }
  .facts,.facts--row{ grid-template-columns:1fr; }
  /* характеристики остаются в две колонки — строки короткие */
  .specs{ grid-template-columns:repeat(2,1fr); gap:16px 18px; }
  .yard__list{ grid-template-columns:1fr; }
  .lightbox__nav{ font-size:40px; }
}

/* ==========================================================================
   Арабский: письмо справа налево
   ========================================================================== */

[dir="rtl"] body{ line-height:1.85; letter-spacing:0; }

/* арабская вязь не терпит разрядки и капитализации */
[dir="rtl"] .eyebrow,
[dir="rtl"] .field__label,
[dir="rtl"] .yard__title,
[dir="rtl"] .logo__sub,
[dir="rtl"] .highlight,
[dir="rtl"] .project__text .h2--wide{
  letter-spacing:.04em; text-transform:none;
}
[dir="rtl"] .h2,[dir="rtl"] .h3,[dir="rtl"] .hero__title{ letter-spacing:0; }
/* курсив в арабском не выделяет, а искажает букву — красим цветом */
[dir="rtl"] .h2 em,[dir="rtl"] .h3 em,[dir="rtl"] .hero__title em{ font-style:normal; }

/* латинские имена, цены и величины внутри арабского текста:
   изолируем, иначе знак валюты и «²» уезжают на другую сторону числа */
[dir="rtl"] .logo__initials,[dir="rtl"] .logo__name,[dir="rtl"] .logo__sub,
[dir="rtl"] .fact b,[dir="rtl"] .specs b,[dir="rtl"] .gallery__count,
[dir="rtl"] .footer__contacts{ direction:ltr; }
[dir="rtl"] .highlight b,[dir="rtl"] .price b,
[dir="rtl"] .yard__list span{ direction:ltr; unicode-bidi:isolate; }
[dir="rtl"] .footer__contacts{ justify-content:flex-end; }

/* шапка */
[dir="rtl"] .logo__initials{ margin-right:0; margin-left:-2px; }
[dir="rtl"] .nav a::after{ transform-origin:right; }

/* обложка: панель обратного звонка встаёт слева от заголовка */
[dir="rtl"] .lead-wrap{ text-align:left; }
[dir="rtl"] .lead{ text-align:right; }
[dir="rtl"] .lead__close{ right:auto; left:14px; }
/* ловушку для ботов уносим за противоположный край — иначе она
   растягивает панель и внизу появляется горизонтальная прокрутка */
[dir="rtl"] .hp{ left:auto; right:-9999px; }

/* тёмная подложка на фото Стрелки идёт от того края, где лежит текст */
[dir="rtl"] .section--city::before{
  background:
    linear-gradient(to left,
      rgba(18,24,19,.92) 0%, rgba(18,24,19,.86) 38%,
      rgba(18,24,19,.62) 68%, rgba(18,24,19,.42) 100%),
    linear-gradient(to bottom, rgba(18,24,19,.45), rgba(18,24,19,.55));
}

/* галерея и лайтбокс: стрелки меняются местами */
[dir="rtl"] .gallery__nav--prev{ left:auto; right:clamp(10px,1.2vw,18px); }
[dir="rtl"] .gallery__nav--next{ right:auto; left:clamp(10px,1.2vw,18px); }
[dir="rtl"] .gallery__nav svg{ transform:scaleX(-1); }
[dir="rtl"] .lightbox__close{ right:auto; left:26px; }
[dir="rtl"] .lightbox__nav--prev{ left:auto; right:clamp(4px,2vw,24px); }
[dir="rtl"] .lightbox__nav--next{ right:auto; left:clamp(4px,2vw,24px); }
[dir="rtl"] .film__icon svg{ margin-left:0; margin-right:3px; transform:scaleX(-1); }

/* подвал */
[dir="rtl"] .footer__logo{ margin-right:0; margin-left:auto; }
[dir="rtl"] .skip-link{ left:auto; right:-999px; }
[dir="rtl"] .skip-link:focus{ right:12px; }

@media (max-width: 1080px){
  [dir="rtl"] .lead-wrap{ text-align:right; }
}
@media (max-width: 820px){
  [dir="rtl"] .footer__contacts{ justify-content:center; }
}

/* ---------- уважение к настройкам движения ---------- */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}