@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════
   PRINCE ROYAL — тема 01 «Mira»
   Тёплый песочный минимализм: крупная фотография, много воздуха,
   тонкая гротескная типографика, капслочные микро-лейблы.
   Палитра и метрики сняты с референса miradevelopments.ae.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@200;300;400;500&family=Inter:wght@300;400;500;600&display=swap');

/* ─────────────────────────── ТОКЕНЫ ─────────────────────────── */
:root {
  /* Цвет */
  --sand:        #F4F1EA;   /* основной фон */
  --sand-deep:   #EAE5D9;   /* чередующиеся секции */
  --paper:       #FBFAF7;   /* карточки, поля */
  --ink:         #14130F;   /* основной текст */
  --ink-soft:    #37342C;
  --muted:       #78736A;   /* вторичный текст */
  --muted-2:     #9A958B;
  --line:        #DFD9CB;   /* границы */
  --line-soft:   #ECE7DC;
  --bronze:      #937442;   /* акцент */
  --bronze-lite: #B49468;
  --bronze-wash: #F0E9DC;
  --dark:        #100F0C;   /* тёмные секции */
  --dark-soft:   #1C1A16;
  --white:       #FFFFFF;
  --ok:          #3F7A55;
  --warn:        #A8632B;

  /* Производные от основных. Вынесены, чтобы тема меняла их заодно:
     раньше они были вписаны прямо в правила, и при смене палитры
     тёмные секции оставались со старыми оттенками. */
  --on-dark:      #FFFFFF;
  --on-dark-80:   rgba(255,255,255,.8);
  --on-dark-60:   rgba(255,255,255,.6);
  --on-dark-40:   rgba(255,255,255,.4);
  --on-dark-20:   rgba(255,255,255,.2);
  --on-dark-10:   rgba(255,255,255,.1);
  --wa:           #25D366;
  --wa-dark:      #1EB658;
  --tg:           #29A9EB;

  /* Типографика */
  --font-display: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Ритм */
  --gap:      clamp(16px, 2vw, 28px);
  --pad-sec:  clamp(56px, 8vw, 132px);
  --radius:   2px;
  --radius-l: 3px;
  --shell:    1680px;
  /* Размер заголовка первого экрана вынесен в переменную: к нему
     привязано выравнивание подписи справа */
  --t-hero-size: clamp(2.6rem, 6.6vw, 6.4rem);
  --measure:  68ch;

  /* Движение (пружины из motion) */
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-io:   cubic-bezier(.65, 0, .35, 1);
  --spring:    cubic-bezier(.34, 1.56, .64, 1);
  --t-fast:    180ms;
  --t-base:    280ms;
  --t-slow:    620ms;

  /* Высота шапки: верхний ряд с контактами (38px) + ряд меню.
     К ней привязана липкая панель фильтров и отступ мобильного меню. */
  --header-h: 76px;
}

/* ─────────────────────────── СБРОС ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.62;
  color: var(--ink);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; background: var(--sand-deep); }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

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

::selection { background: var(--ink); color: var(--sand); }

/* ─────────────────────────── ТИПОГРАФИКА ─────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.t-hero  { font-size: var(--t-hero-size); font-weight: 200; letter-spacing: -0.035em; line-height: 0.98; }
.t-h1    { font-size: clamp(2.1rem, 4.6vw, 4.1rem); font-weight: 200; letter-spacing: -0.03em; }
.t-h2    { font-size: clamp(1.7rem, 3.2vw, 2.9rem); }
.t-h3    { font-size: clamp(1.25rem, 2vw, 1.65rem); letter-spacing: -0.02em; }
.t-h4    { font-size: clamp(1.05rem, 1.4vw, 1.22rem); letter-spacing: -0.015em; font-weight: 400; }
.t-lead  { font-size: clamp(1.02rem, 1.35vw, 1.24rem); line-height: 1.6; color: var(--ink-soft); font-weight: 300; }
.t-body  { font-size: 1rem; line-height: 1.68; }
.t-small { font-size: .875rem; line-height: 1.55; }

/* Капслочный микро-лейбл — фирменный приём референса */
.eyebrow {
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: '';
  width: 26px; height: 1px;
  background: var(--bronze);
  flex: none;
}
.eyebrow.is-plain::before { display: none; }
.eyebrow.is-light { color: rgba(255,255,255,.6); }

.u-dim   { color: var(--muted); }
.u-mono  { font-variant-numeric: tabular-nums; }
.u-measure { max-width: var(--measure); }
.u-center  { text-align: center; }
.u-nowrap  { white-space: nowrap; }

/* Визуально скрыто, но доступно скринридерам */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─────────────────────────── СЕТКА ─────────────────────────── */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 64px);
}
.shell-narrow { max-width: 1100px; }

.section { padding-block: var(--pad-sec); }
.section-tight { padding-block: clamp(40px, 5vw, 76px); }
.section--sand { background: var(--sand-deep); }
.section--paper { background: var(--paper); }
.section--dark { background: var(--dark); color: rgba(255,255,255,.9); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--on-dark); }
.section--dark .u-dim { color: rgba(255,255,255,.5); }

.grid { display: grid; gap: var(--gap); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-auto { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.flex { display: flex; }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); }
.stack { display: flex; flex-direction: column; }

/* Шапка секции: заголовок слева, действие справа */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap);
  margin-bottom: clamp(28px, 4vw, 56px);
  flex-wrap: wrap;
}
.sec-head__text { max-width: 62ch; }
.sec-head .eyebrow { margin-bottom: 18px; }

/* ─────────────────────────── КНОПКИ ─────────────────────────── */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--sand);
  --btn-bd: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 14px 30px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}
/* Заливка «шторкой» снизу вверх */
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--bronze);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--t-base) var(--ease-out);
  z-index: 0;
}
/* Текст должен лежать над «шторкой» заливки. Раньше поднимались только
   вложенные теги, и кнопка с голым текстом при наведении оказывалась
   закрашена целиком — надпись пропадала. Теперь поднимаем и сам текст. */
.btn { isolation: isolate; }
.btn > *, .btn::first-line { position: relative; z-index: 1; }
.btn::after { z-index: -1; }
.btn:hover::after, .btn:focus-visible::after { transform: scaleY(1); }
.btn:hover { color: var(--on-dark); border-color: var(--bronze); }
.btn:active { transform: translateY(1px); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line); }
.btn--ghost:hover { color: var(--on-dark); }
.btn--light { --btn-bg: transparent; --btn-fg: var(--on-dark); --btn-bd: rgba(255,255,255,.35); }
.btn--solid-light { --btn-bg: var(--on-dark); --btn-fg: var(--ink); --btn-bd: var(--on-dark); }
.btn--bronze { --btn-bg: var(--bronze); --btn-fg: var(--on-dark); --btn-bd: var(--bronze); }
.btn--bronze::after { background: var(--ink); }
.btn--sm { min-height: 40px; padding: 10px 18px; font-size: .6875rem; }
.btn--lg { min-height: 60px; padding: 18px 40px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* Текстовая ссылка со стрелкой */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  transition: border-color var(--t-base), gap var(--t-base) var(--ease-out);
}
.link-arrow:hover { border-color: var(--bronze); gap: 16px; color: var(--bronze); }
.link-arrow svg { transition: transform var(--t-base) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ─────────────────────────── ЧИПЫ / БЕЙДЖИ ─────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: transparent;
  font-size: .75rem;
  letter-spacing: .02em;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: all var(--t-fast) var(--ease-out);
}
a.chip:hover, button.chip:hover { border-color: var(--ink); background: var(--ink); color: var(--sand); }
.chip.is-active { border-color: var(--ink); background: var(--ink); color: var(--sand); }
.chip--solid { background: var(--bronze-wash); border-color: transparent; }
.chip__x { opacity: .5; }
.chip__x:hover { opacity: 1; }

.badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: 2px;
  background: rgba(255,255,255,.94);
  color: var(--ink);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.badge--bronze { background: var(--bronze); color: var(--on-dark); }
.badge--dark   { background: rgba(16,15,12,.86); color: var(--on-dark); }
.badge--sold   { background: rgba(16,15,12,.7); color: rgba(255,255,255,.75); }
.badge--new    { background: var(--ok); color: var(--on-dark); }

/* ─────────────────────────── ШАПКА ─────────────────────────── */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: var(--header-h);
  display: flex;
  align-items: center;
  color: var(--on-dark);
  transition: background var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out),
              box-shadow var(--t-base), height var(--t-base);
}
.header::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,9,7,.55), transparent);
  opacity: 1;
  transition: opacity var(--t-base);
  pointer-events: none;
}
body:not(.has-hero) .header {
  background: var(--sand);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
}
body:not(.has-hero) .header::before { opacity: 0; }

.header.is-solid {
  background: var(--sand);
  color: var(--ink);
  height: 66px;
  box-shadow: 0 1px 0 var(--line);
}
.header.is-solid::before { opacity: 0; }
.header.is-hidden { transform: translateY(-100%); }
.header { transition: transform var(--t-base) var(--ease-out), background var(--t-base), color var(--t-base), height var(--t-base); }

.header__inner { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); width: 100%; position: relative; z-index: 1; }

/* Только у меню авто-отступы: логотип остаётся прижатым к левому краю.
   С margin-right: auto ещё и у логотипа свободное место делилось на три
   части, и логотип уезжал к центру. */
.logo { display: flex; flex-direction: column; line-height: 1; flex: none; }
.logo__mark {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 400;
  letter-spacing: .26em;
}
.logo__sub {
  font-size: .5625rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .6;
  margin-top: 5px;
}

/* Логотип прижат к левому краю, меню по центру, инструменты справа.
   При margin-left: auto меню липло к правой части и утягивало за собой
   визуальный центр шапки — логотип казался съехавшим. */
.nav { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px); margin-inline: auto; }
.nav__link {
  position: relative;
  font-size: .8125rem;
  letter-spacing: .06em;
  padding: 6px 0;
  white-space: nowrap;
  opacity: .88;
  transition: opacity var(--t-fast);
}
.nav__link::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-base) var(--ease-out);
}
.nav__link:hover { opacity: 1; }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-active { opacity: 1; }

.header__tools { display: flex; align-items: center; gap: 12px; flex: none; }
.header__phone { font-size: .8125rem; letter-spacing: .04em; white-space: nowrap; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  transition: background var(--t-fast);
}
.icon-btn:hover { background: rgba(128,128,128,.14); }

/* Бургер */
.burger { display: none; width: 44px; height: 44px; place-items: center; }
.burger span {
  display: block; width: 20px; height: 1px;
  background: currentColor;
  position: relative;
  transition: transform var(--t-base) var(--ease-out), background var(--t-fast);
}
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 1px; background: currentColor;
  transition: transform var(--t-base) var(--ease-out);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger.is-open span { background: transparent; }
.burger.is-open span::before { transform: translateY(6px) rotate(45deg); }
.burger.is-open span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Мобильное меню */
.mmenu {
  position: fixed; inset: 0;
  z-index: 89;
  background: var(--dark);
  color: var(--on-dark);
  padding: calc(var(--header-h) + 30px) clamp(18px, 6vw, 60px) 40px;
  display: flex; flex-direction: column;
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--t-slow) var(--ease-out);
  pointer-events: none;
}
.mmenu.is-open { clip-path: inset(0 0 0 0); pointer-events: auto; }
.mmenu__link {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6vw, 2.6rem);
  font-weight: 200;
  letter-spacing: -.02em;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  opacity: 0; transform: translateY(18px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out), color var(--t-fast);
}
.mmenu.is-open .mmenu__link { opacity: 1; transform: none; }
.mmenu__link:hover { color: var(--bronze-lite); }
.mmenu__link small { font-family: var(--font-body); font-size: .75rem; opacity: .4; letter-spacing: .1em; }
.mmenu__foot { margin-top: auto; padding-top: 34px; display: flex; flex-wrap: wrap; gap: 20px 30px; font-size: .875rem; opacity: .7; }

/* ─────────────────────────── ГЕРОЙ ─────────────────────────── */
.hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: flex;
  align-items: flex-end;
  color: var(--on-dark);
  background: var(--dark);

  /* Без overflow: hidden. Он держал фотографию в границах экрана, но
     заодно срезал всё, что выпадает вниз: подсказки поиска и списки
     фильтров обрывались по нижнему краю блока.
     Фотографию теперь обрезает её собственный контейнер .hero__photo. */
  overflow: visible;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img, .hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
.hero__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,7,5,.42) 0%, rgba(8,7,5,.12) 34%, rgba(8,7,5,.78) 100%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(40px, 7vh, 88px); }
.hero__title { max-width: 17ch; margin-bottom: 22px; }
.hero__sub { max-width: 46ch; color: rgba(255,255,255,.78); font-size: clamp(.95rem, 1.3vw, 1.14rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

/* Счётчики под геро */
.hero__facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  /* Без верхней линии: поиск и счётчики разделяет воздух, а лишняя
     черта резала первый экран пополам */
  margin-top: clamp(40px, 6vh, 76px);
  padding-top: 4px;
}
.fact__num {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 3rem);
  font-weight: 200;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.fact__label {
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .55;
  margin-top: 10px;
}

/* Индикатор скролла */
.scroll-hint {
  position: absolute;
  left: clamp(18px, 4vw, 64px);
  bottom: 30px;
  z-index: 3;
  display: flex; align-items: center; gap: 12px;
  font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.scroll-hint__line { width: 1px; height: 46px; background: rgba(255,255,255,.3); position: relative; overflow: hidden; }
.scroll-hint__line::after {
  content: ''; position: absolute; inset: 0;
  background: var(--on-dark);
  animation: scrollDrop 2.1s var(--ease-io) infinite;
}
@keyframes scrollDrop {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ─────────────────────────── ПОИСК В ГЕРО ─────────────────────────── */
.searchbar {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr auto;
  gap: 1px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius);
  margin-top: 34px;
  max-width: 940px;
  backdrop-filter: blur(14px);

  /* Без overflow: hidden. Он скруглял углы ячеек, но заодно обрезал всё,
     что выпадает наружу — список фильтра и подсказки поиска просто
     не показывались. Скругление даём самим ячейкам. */
  position: relative; z-index: 5;
}
/* Скругление краёв — на крайних ячейках, а не обрезкой контейнера */
.searchbar > *:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.searchbar > *:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }
[dir="rtl"] .searchbar > *:first-child { border-radius: 0 var(--radius) var(--radius) 0; }
[dir="rtl"] .searchbar > *:last-child  { border-radius: var(--radius) 0 0 var(--radius); }
.searchbar__cell { background: rgba(18,17,14,.44); padding: 14px 20px; position: relative; }
.searchbar__cell label {
  display: block;
  font-size: .625rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin-bottom: 5px;
}
.searchbar__cell input, .searchbar__cell select {
  width: 100%; background: transparent; border: 0; color: var(--on-dark);
  font-size: .95rem; font-weight: 300; padding: 0; outline: none;
  appearance: none; cursor: pointer;
}
.searchbar__cell input { cursor: text; }
.searchbar__cell input::placeholder { color: rgba(255,255,255,.4); }
.searchbar__cell select option { background: var(--dark); color: var(--on-dark); }
.searchbar__submit {
  background: var(--bronze); color: var(--on-dark);
  padding-inline: clamp(22px, 3vw, 46px);
  display: grid; place-items: center;
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  transition: background var(--t-base);
}
.searchbar__submit:hover { background: var(--on-dark); color: var(--ink); }

/* Выпадающие подсказки */
.suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(20,19,15,.16);
  z-index: 40;

  /* Высота ограничена и экраном, и абсолютным пределом: при длинном
     списке панель раньше уходила за нижний край окна, и последние
     совпадения было не достать. */
  max-height: min(380px, calc(100vh - 220px));
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
  display: none;
}
.suggest::-webkit-scrollbar { width: 8px; }
.suggest::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }

/* Заголовок группы: закреплён сверху, чтобы при прокрутке было видно,
   район это, застройщик или проект */
.suggest__group {
  position: sticky; top: 0; z-index: 1;
  padding: 9px 16px 7px;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
  font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted-2);
}
.suggest.is-open { display: block; }
.suggest__item { display: flex; align-items: center; gap: 12px; padding: 11px 16px; transition: background var(--t-fast); }
.suggest__item:hover, .suggest__item.is-cursor { background: var(--sand-deep); }
.suggest__img { width: 44px; height: 34px; object-fit: cover; border-radius: 2px; flex: none; }
.suggest__t { font-size: .9rem; }
.suggest__s { font-size: .75rem; color: var(--muted); }
.suggest__kind { margin-left: auto; font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }

/* ─────────────────────────── КАРТОЧКА ПРОЕКТА ─────────────────────────── */
.card { position: relative; display: flex; flex-direction: column; }

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sand-deep);
  border-radius: var(--radius);
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out), opacity var(--t-base);
}
.card:hover .card__media img { transform: scale(1.045); }
/* У многокадровых карточек масштаб не трогаем: он мешал бы
   считывать смену кадров при движении мыши */
.card[data-scrub]:hover .card__media img { transform: none; }
.card[data-scrub] .card__media { cursor: ew-resize; }

/* Слои карточки: растянутая ссылка заголовка лежит ниже всего (z-index 1),
   поэтому кнопки и метки поверх неё кликаются и ловят курсор. */
/* Отступ элементов от краёв фотографии. Один параметр на всё:
   бейджи, «сердце», код и полоски держатся общей линии. */
.card { --pad: 22px; }
.card__badges { position: absolute; top: var(--pad); left: var(--pad); display: flex; flex-wrap: wrap; gap: 6px; z-index: 5; }
.card__fav {
  position: absolute; top: var(--pad); right: var(--pad); z-index: 6;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(4px);
  transition: transform var(--t-fast) var(--spring), background var(--t-fast);
}
.card__fav:hover { transform: scale(1.09); }
.card__fav svg {
  width: 17px; height: 17px;
  stroke: var(--ink); fill: none;
  transition: fill .2s var(--ease-out), stroke .2s var(--ease-out), transform .3s var(--spring);
}

/* Добавлено в избранное: заливка сердца, тёмная подложка и короткий
   толчок. Раньше менялся только цвет заливки — на белом круге это
   почти не читалось, и казалось, что клик не сработал. */
.card__fav.is-on { background: var(--ink); }
.card__fav.is-on svg { fill: var(--bronze); stroke: var(--bronze); transform: scale(1.12); }
.card__fav.is-on { animation: favPop .38s var(--ease-out); }
@keyframes favPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}
.card__fav:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }

/* Точки-индикаторы фото (паттерн Airbnb) */
/* ─── Кадры в карточке ───
   Все кадры лежат стопкой и переключаются прозрачностью:
   без мигания и без догрузки при наведении */
.card__media .frm {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .28s ease;
}
.card__media .frm.is-on { opacity: 1; }

/* Фотография открывает галерею. Кнопка лежит поверх растянутой ссылки
   заголовка (z-index 1), но ниже «сердца», бейджей и кода (5-6), поэтому
   те продолжают нажиматься, а клик по самой картинке показывает крупные
   кадры вместо перехода на страницу. */
.card__zoom {
  position: absolute; inset: 0; z-index: 4;
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: none;
  cursor: zoom-in;
}
/* На многокадровых карточках курсор подсказывает про движение мышью —
   про клик говорит появляющаяся иконка. */
.card[data-scrub] .card__zoom { cursor: ew-resize; }
.card__zoom-i {
  position: absolute; left: var(--pad); bottom: calc(var(--pad) + 13px);
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  color: var(--ink);
  opacity: 0; transform: scale(.88);
  transition: opacity var(--t-fast), transform var(--t-fast) var(--spring);
}
.card:hover .card__zoom-i,
.card.touched .card__zoom-i,
.card__zoom:focus-visible .card__zoom-i { opacity: 1; transform: none; }
.card__zoom:focus-visible { outline: 2px solid var(--bronze); outline-offset: -4px; }
.card__zoom-i svg { width: 15px; height: 15px; }

/* Полоски-индикаторы: видно, какое фото сейчас показано.
   Активная — сплошная белая, остальные приглушены. */
.card__segs {
  position: absolute; left: var(--pad); right: var(--pad); bottom: var(--pad); z-index: 5;
  display: grid; gap: 4px; opacity: .8;
  transition: opacity .3s; pointer-events: none;
}
.card:hover .card__segs, .card.touched .card__segs { opacity: 1; }
.card__segs .seg {
  height: 3px; border-radius: 3px; overflow: hidden;
  background: rgba(16,15,12,.32);
  box-shadow: 0 1px 3px rgba(16,15,12,.28);
}
.card__segs .seg::after {
  content: ''; display: block; height: 100%; width: 0;
  background: var(--on-dark); border-radius: 3px;
  transition: width .25s var(--ease-out);
}
.card__segs .seg.on::after { width: 100%; }

.card__body { padding-top: 18px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.card__meta {
  display: flex; align-items: center; gap: 8px;
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.card__meta span + span::before { content: '·'; margin-right: 8px; opacity: .6; }
.card__title { font-family: var(--font-display); font-size: 1.28rem; font-weight: 400; letter-spacing: -.02em; }
.card:hover .card__title { color: var(--bronze); }
.card__title { transition: color var(--t-fast); }
.card__place { font-size: .875rem; color: var(--muted); }
.card__specs { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8125rem; color: var(--ink-soft); margin-top: 4px; }
.card__specs i { color: var(--muted-2); font-style: normal; }
.card__foot {
  margin-top: auto; padding-top: 14px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--line-soft);
}
.card__price { font-family: var(--font-display); font-size: 1.16rem; font-weight: 400; letter-spacing: -.01em; }
.card__price small { display: block; font-family: var(--font-body); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; font-weight: 400; }
.card__usd { font-size: .75rem; color: var(--muted); }
.card__dev { display: flex; align-items: center; gap: 8px; font-size: .75rem; color: var(--muted); }
.card__dev img { width: 26px; height: 26px; object-fit: contain; opacity: .75; mix-blend-mode: multiply; }

/* Растянутая ссылка по всей карточке */
.stretch::after { content: ''; position: absolute; inset: 0; z-index: 1; }

/* Крупная карточка-герой для главной */
.card--wide { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(20px, 3vw, 48px); align-items: center; }
.card--wide .card__media { aspect-ratio: 16 / 11; }
.card--tall .card__media { aspect-ratio: 3 / 4; }

/* ─────────────────────────── СЛАЙДЕР (drag) ─────────────────────────── */
.rail {
  display: flex;
  gap: var(--gap);
  /* Прокрутка только по горизонтали.
     overflow-y обязателен явно: если задать лишь overflow-x, браузер
     по стандарту включает прокрутку и по вертикали — лента «ездила»
     вверх-вниз, из-за чего верх карточек уходил под край блока
     и казалось, что у бейджей и «сердца» нет отступа. */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Запас снизу под тень карточки, чтобы её не срезало */
  padding-bottom: 8px;
  cursor: grab;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }
.rail.is-drag { cursor: grabbing; scroll-snap-type: none; }
.rail.is-drag * { pointer-events: none; }
.rail > * { flex: 0 0 clamp(260px, 30vw, 420px); scroll-snap-align: start; }
.rail--wide > * { flex: 0 0 clamp(300px, 44vw, 660px); }

.rail-nav { display: flex; gap: 8px; }
.rail-nav button {
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: all var(--t-fast) var(--ease-out);
}
.rail-nav button:hover { background: var(--ink); border-color: var(--ink); color: var(--sand); }
.rail-nav button[disabled] { opacity: .3; pointer-events: none; }

/* Индикатор прогресса прокрутки */
.rail-progress { height: 1px; background: var(--line); margin-top: 26px; position: relative; }
.rail-progress i { position: absolute; inset: 0 auto 0 0; background: var(--ink); width: 20%; transition: width 120ms linear, transform 120ms linear; }

/* ─────────────────────────── ФИЛЬТРЫ КАТАЛОГА ─────────────────────────── */
/* Липкая панель фильтров.
   Раньше она стояла на 66px и наезжала на шапку: та стала выше из-за
   верхнего ряда с контактами. Теперь высота шапки задана переменной,
   и панель встаёт точно под ней. Плюс тень и плотный фон — при прокрутке
   под панель уезжает контент, и без них он просвечивал. */
.filters {
  position: sticky;
  top: var(--header-h, 76px);
  z-index: 40;
  background: var(--sand);
  border-bottom: 1px solid var(--line);
  padding-block: 14px;
  transition: box-shadow var(--t-base);

  /* Выпадающие блоки выходят за нижнюю границу панели: обрезать нельзя.
     Прокрутка по горизонтали живёт на внутреннем ряду, а не здесь. */
  overflow: visible;
}
.filters .shell { overflow: visible; }
/* Тень появляется, только когда панель действительно прилипла */
.filters.is-stuck {
  box-shadow: 0 14px 34px -22px rgba(16,15,12,.45);
  border-bottom-color: var(--muted-2);
}

/* Сортировка рядом со счётчиком найденного */
.catalog__sort { margin-top: 12px; }
.filters__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filters__search {
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 240px; min-width: 200px;
  height: 44px; padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.filters__search input { border: 0; background: none; outline: none; width: 100%; font-size: .9rem; }

/* Кнопка-поповер */
.pop { position: relative; }
.pop__btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: .8125rem; white-space: nowrap;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.pop__btn:hover { border-color: var(--ink); }
.pop.is-open .pop__btn, .pop__btn.is-set { border-color: var(--ink); background: var(--ink); color: var(--sand); }
.pop__btn svg { transition: transform var(--t-fast); }
.pop.is-open .pop__btn svg { transform: rotate(180deg); }
.pop__panel {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 290px; max-width: min(92vw, 420px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 22px 60px rgba(20,19,15,.15);
  padding: 20px;
  z-index: 50;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), visibility var(--t-fast);
}
.pop.is-open .pop__panel { opacity: 1; visibility: visible; transform: none; }
.pop__panel--right { left: auto; right: 0; }

/* Панель не должна уходить за край окна. Крайние фильтры справа
   раскрываем к левому краю: иначе на узком экране «Amenities»
   вылезал за границу и часть вариантов было не достать. */
.filters__row > .pop:nth-last-child(-n+3) .pop__panel { left: auto; right: 0; }
@media (max-width: 1280px) {
  .filters__row > .pop:nth-last-child(-n+5) .pop__panel { left: auto; right: 0; }
}
/* Совсем узкие экраны: панель по ширине поля, с прокруткой внутри */
@media (max-width: 720px) {
  .filters__row > .pop .pop__panel {
    left: 0; right: auto;
    min-width: min(300px, calc(100vw - 36px));
    max-width: calc(100vw - 36px);
  }
}
.pop__foot { display: flex; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }

.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  height: 48px; padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: .95rem; outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  width: 100%;
}
.field textarea { height: auto; min-height: 118px; padding: 13px 14px; resize: vertical; line-height: 1.6; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2378736A' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(147,116,66,.12); }
.field__hint { font-size: .75rem; color: var(--muted); }
.field__err { font-size: .75rem; color: #B04A2F; }
.field.has-err input, .field.has-err select { border-color: #B04A2F; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Чекбоксы и радио */
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 6px 0; font-size: .875rem; line-height: 1.45; }
.check input { appearance: none; width: 18px; height: 18px; flex: none; margin-top: 2px;
  border: 1px solid var(--line); border-radius: 2px; background: var(--paper); cursor: pointer;
  transition: all var(--t-fast); position: relative; }
.check input:checked { background: var(--ink); border-color: var(--ink); }
.check input:checked::after {
  content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid var(--on-dark); border-width: 0 1.5px 1.5px 0; transform: rotate(43deg);
}
.check input[type=radio] { border-radius: 50%; }
.check input[type=radio]:checked::after { left: 4px; top: 4px; width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--on-dark); transform: none; }
.check span { user-select: none; }
.check small { color: var(--muted); }

/* Сегментированный переключатель */
/* Переключатель: при нехватке ширины переносим кнопки, а не обрезаем.
   Английские подписи длиннее русских, и «Non-resident» уезжал за край. */
.seg {
  display: inline-flex; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; max-width: 100%;
  /* Разделители — просветы фона контейнера, а не border-left у соседей.
     С border-left первая кнопка перенесённой строки получала висящую
     грань слева, а между строками разделителя не было вовсе. */
  gap: 1px; background: var(--line);
}
.seg a, .seg button {
  padding: 11px 18px; font-size: .8125rem; letter-spacing: .04em;
  white-space: nowrap; background: var(--paper);
  transition: background var(--t-fast), color var(--t-fast);
}
/* Выбранный элемент. is-active ставится на сервере, is-on — из скрипта
   (переключатель статуса в калькуляторе). Раньше описан был только
   первый, и выбранный статус ничем не выделялся. */
.seg .is-active, .seg .is-on { background: var(--ink); color: var(--sand); }
.seg a:hover:not(.is-active):not(.is-on),
.seg button:hover:not(.is-active):not(.is-on) { background: var(--sand-deep); }

/* Активные фильтры */
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }

/* ─────────────────────────── КАТАЛОГ ─────────────────────────── */
.catalog-head { padding-block: clamp(30px, 4vw, 56px) 22px; }
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: clamp(24px, 2.6vw, 44px) var(--gap); }

.empty { text-align: center; padding: clamp(50px, 8vw, 110px) 20px; }
.empty svg { margin: 0 auto 22px; opacity: .3; }

/* Пагинация */
.pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: clamp(40px, 5vw, 72px); flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 44px; height: 44px; padding: 0 12px;
  display: grid; place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: .875rem;
  transition: all var(--t-fast);
}
.pager a:hover { border-color: var(--line); background: var(--paper); }
.pager .is-current { background: var(--ink); color: var(--sand); }
.pager .is-gap { pointer-events: none; color: var(--muted); }

/* ─────────────────────────── СТРАНИЦА ОБЪЕКТА ─────────────────────────── */
/* Галерея живёт в той же сетке, что и остальной контент. Раньше она
   тянулась во всю ширину окна, и на широком экране снимки выходили
   за границы страницы, а сама фотография растягивалась и мылила. */
.obj-hero {
  position: relative;
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 64px);
}
.obj-gallery {
  display: grid; grid-template-columns: 2fr 1fr; gap: 6px;
  height: clamp(300px, 48vh, 520px);
  border-radius: var(--radius); overflow: hidden;
}
.obj-gallery[data-gallery] { grid-template-rows: 1fr 1fr; }
.obj-gallery__main, .obj-gallery__side, .obj-gallery__cell {
  position: relative; overflow: hidden; background: var(--sand-deep);
}
.obj-gallery__side { display: grid; grid-template-rows: 1fr 1fr; gap: 6px; }
/* Крупный первый кадр слева, два вспомогательных справа. Остальные
   лежат в разметке ради ленты на телефоне и здесь не показываются. */
.obj-gallery__cell:first-child { grid-row: 1 / span 2; }
.obj-gallery__cell:nth-child(n+4) { display: none; }
.obj-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.obj-gallery a:hover img { transform: scale(1.03); }
.obj-gallery__count { display: none; }
.obj-gallery__more {
  position: absolute; right: 18px; bottom: 18px;
  background: rgba(255,255,255,.94); color: var(--ink);
  padding: 11px 20px; border-radius: 2px;
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
  backdrop-filter: blur(6px);
  transition: background var(--t-fast);
}
.obj-gallery__more:hover { background: var(--on-dark); }

.obj-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(28px, 4vw, 72px); align-items: start; }

/* Липкая панель заявки */
.aside-card {
  position: sticky; top: 90px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: clamp(20px, 2vw, 30px);
}
.aside-card__price { font-family: var(--font-display); font-size: 2rem; font-weight: 300; letter-spacing: -.03em; line-height: 1.1; }
.aside-card__price small { display: block; font-family: var(--font-body); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }

/* Таблица характеристик */
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.specs__i { background: var(--sand); padding: 18px 20px; }
.specs__k { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.specs__v { font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; letter-spacing: -.01em; }

.dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; font-size: .9375rem; }
.dl dt { color: var(--muted); }
.dl dd { text-align: right; }

/* Список удобств */
.amenities { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px 24px; }
.amenity { display: flex; align-items: center; gap: 12px; font-size: .9375rem; }
.amenity svg { width: 19px; height: 19px; flex: none; stroke: var(--bronze); fill: none; stroke-width: 1.3; }

/* Таблица планировок */
.units-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.units-table th {
  text-align: left; padding: 13px 16px;
  font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 500;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.units-table td { padding: 15px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.units-table tr { transition: background var(--t-fast); }
.units-table tbody tr:hover { background: var(--paper); }
.units-table .is-sold { opacity: .45; }
.units-table__plan { width: 62px; height: 52px; object-fit: contain; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 2px; }
.units-table__price { font-family: var(--font-display); font-size: 1.05rem; white-space: nowrap; }

/* План оплаты */
.plan { display: flex; gap: 2px; margin-top: 22px; }
.plan__seg { position: relative; padding: 16px 14px; background: var(--bronze-wash); flex: var(--w, 1); min-width: 0; }
.plan__seg:nth-child(even) { background: var(--sand-deep); }
.plan__pct { font-family: var(--font-display); font-size: 1.4rem; font-weight: 300; letter-spacing: -.02em; }
.plan__when { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 5px; line-height: 1.4; }

/* Аккордеон */
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; text-align: left; font-family: var(--font-display); font-size: 1.14rem; font-weight: 400; letter-spacing: -.015em; }
.acc__btn svg { flex: none; transition: transform var(--t-base) var(--ease-out); }
.acc__item.is-open .acc__btn svg { transform: rotate(45deg); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-base) var(--ease-out); }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__inner > div { padding-bottom: 24px; color: var(--ink-soft); }

/* Вкладки */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  padding: 14px 20px; white-space: nowrap;
  font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid transparent; margin-bottom: -1px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tabs button:hover { color: var(--ink); }
.tabs button.is-active { color: var(--ink); border-color: var(--ink); }
.tab-panel { display: none; padding-top: clamp(26px, 3vw, 44px); }
.tab-panel.is-active { display: block; }

/* Лайтбокс */
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(10,9,7,.96); display: none; }
.lb.is-open { display: grid; grid-template-rows: auto 1fr auto; }
.lb__top { display: flex; justify-content: space-between; align-items: center; padding: 18px clamp(16px,3vw,36px); color: rgba(255,255,255,.7); font-size: .8125rem; letter-spacing: .1em; }
.lb__stage { display: grid; place-items: center; padding: 0 clamp(16px,4vw,80px); overflow: hidden; }
.lb__stage img { max-width: 100%; max-height: 78vh; object-fit: contain; }
.lb__thumbs { display: flex; gap: 8px; padding: 16px clamp(16px,3vw,36px); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.lb__thumbs::-webkit-scrollbar { display: none; }
.lb__thumbs img { width: 84px; height: 60px; object-fit: cover; opacity: .4; cursor: pointer; transition: opacity var(--t-fast); border-radius: 2px; }
.lb__thumbs img.is-on { opacity: 1; }
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; display: grid; place-items: center; color: var(--on-dark); background: rgba(255,255,255,.1); border-radius: 50%; transition: background var(--t-fast); }
.lb__nav:hover { background: rgba(255,255,255,.24); }
.lb__prev { left: clamp(10px,2vw,28px); }
.lb__next { right: clamp(10px,2vw,28px); }

/* ─────────────────────────── КАРТА ─────────────────────────── */
.map-embed { width: 100%; aspect-ratio: 16/9; min-height: 320px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sand-deep); filter: grayscale(.35) contrast(.95); }
.map-embed iframe { width: 100%; height: 100%; border: 0; }

/* ─────────────────────────── ИПОТЕЧНЫЙ КАЛЬКУЛЯТОР ─────────────────────────── */
.calc { display: grid; grid-template-columns: 1fr 380px; gap: clamp(24px, 4vw, 64px); align-items: start; }
/* Позиционирование результата: фон и цвет заданы ниже, в светлом
   варианте блока — здесь только липкость и отступ. */
.calc__out { border-radius: var(--radius-l); position: sticky; top: 90px; }
.calc__big { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 200; letter-spacing: -.035em; line-height: 1.05; }
.calc__row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: .9375rem; }
.calc__row:last-child { border: 0; }
.calc__row span:first-child { color: rgba(255,255,255,.55); }
.calc__row b { font-weight: 400; font-variant-numeric: tabular-nums; }

/* Ползунок */
.range { width: 100%; appearance: none; height: 1px; background: var(--line); outline: none; margin: 20px 0 8px; }
.range::-webkit-slider-thumb {
  appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink); cursor: pointer; border: 3px solid var(--sand);
  box-shadow: 0 1px 6px rgba(20,19,15,.28);
  transition: transform var(--t-fast) var(--spring);
}
.range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--ink);
  cursor: pointer; border: 3px solid var(--sand); box-shadow: 0 1px 6px rgba(20,19,15,.28);
}
.range-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.range-head b { font-family: var(--font-display); font-size: 1.24rem; font-weight: 400; letter-spacing: -.02em; }
.range-scale { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted-2); }

/* ─────────────────────────── ПЛИТКИ РАЙОНОВ / ТИПОВ ─────────────────────────── */
.tile { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--dark); aspect-ratio: 3/4; }
.tile img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: transform 1000ms var(--ease-out), opacity var(--t-base); }
.tile:hover img { transform: scale(1.06); opacity: .68; }
.tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 32%, rgba(8,7,5,.82) 100%); }
.tile__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(16px,2vw,26px); color: var(--on-dark); }
.tile__t { font-family: var(--font-display); font-size: clamp(1.1rem, 1.7vw, 1.5rem); font-weight: 400; letter-spacing: -.02em; }
.tile__s { font-size: .8125rem; opacity: .7; margin-top: 5px; }
.tile--wide { aspect-ratio: 16/10; }
.tile--sq { aspect-ratio: 1; }

/* ─────────────────────────── ЗАСТРОЙЩИКИ ─────────────────────────── */
.dev-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(20px, 2vw, 28px);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  position: relative;
  transition: border-color var(--t-base), transform var(--t-base) var(--ease-out);
}
.dev-card:hover { border-color: var(--line); transform: translateY(-3px); }
.dev-card__logo { height: 46px; display: flex; align-items: center; }
.dev-card__logo img { max-height: 46px; max-width: 150px; object-fit: contain; mix-blend-mode: multiply; }
.dev-card__logo b { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; letter-spacing: -.02em; }
.dev-card__stats { display: flex; gap: 22px; font-size: .8125rem; color: var(--muted); margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.dev-card__stats b { display: block; font-family: var(--font-display); font-size: 1.16rem; font-weight: 400; color: var(--ink); letter-spacing: -.01em; }

/* Бегущая строка логотипов */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: clamp(40px, 6vw, 92px); width: max-content; animation: marquee 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee img { height: 34px; width: auto; object-fit: contain; opacity: .42; mix-blend-mode: multiply; transition: opacity var(--t-base); flex: none; }
.marquee img:hover { opacity: .9; }
.marquee b { font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; letter-spacing: .04em; color: var(--muted-2); white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ─────────────────────────── ХЛЕБНЫЕ КРОШКИ ─────────────────────────── */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .75rem; color: var(--muted); padding-block: 18px; }
/* Крошки внутри уже отступившего контейнера: свой отступ снимаем,
   иначе они сдвигаются правее заголовка страницы */
.shell .crumbs, .shell-narrow .crumbs { padding-inline: 0; max-width: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs span[aria-hidden] { opacity: .45; }

/* ─────────────────────────── CTA-ПОЛОСА ─────────────────────────── */
.cta {
  position: relative; overflow: hidden;
  color: var(--on-dark);
  padding-block: clamp(56px, 8vw, 118px);

  /* Градиент вместо растянутого фото. Кадры у нас 780 px — на всю
     ширину секции их тянуть нельзя, получается мыло. Фон делает
     градиент, а снимок стоит справа в своём размере. */
  background:
    radial-gradient(120% 90% at 78% 30%, rgba(43,62,84,.85) 0%, rgba(16,15,12,.96) 62%),
    linear-gradient(120deg, var(--dark) 0%, #16202b 55%, var(--dark) 100%);
}

/* Снимок не растягиваем: показываем один к одному, привязав к правому
   краю, и мягко растворяем в градиенте */
.cta__bg {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  width: min(780px, 58%); aspect-ratio: 780 / 482;
  opacity: .34; pointer-events: none;
}
.cta__bg img { width: 100%; height: 100%; object-fit: cover; }
/* Растушёвка краёв: слева длинная, чтобы кадр не обрывался прямоугольником */
.cta__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--dark) 0%, rgba(16,15,12,.65) 34%, rgba(16,15,12,0) 78%),
    linear-gradient(0deg, var(--dark) 0%, rgba(16,15,12,0) 34%),
    linear-gradient(180deg, var(--dark) 0%, rgba(16,15,12,0) 30%);
}
@media (max-width: 900px) { .cta__bg { width: 100%; opacity: .2; } }
.cta__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 440px; gap: clamp(30px, 5vw, 80px); align-items: center; }
.cta__form { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-l); padding: clamp(22px, 2.6vw, 34px); backdrop-filter: blur(10px); }
.cta__form .field label { color: rgba(255,255,255,.5); }
.cta__form .field input, .cta__form .field textarea {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: var(--on-dark);
}
.cta__form .field input::placeholder, .cta__form .field textarea::placeholder { color: rgba(255,255,255,.32); }
.cta__form .check span { color: rgba(255,255,255,.6); }
.cta__form .check input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.24); }
.cta__form .check input:checked { background: var(--bronze); border-color: var(--bronze); }

/* ─────────────────────────── ПОДВАЛ ─────────────────────────── */
.footer { background: var(--dark); color: rgba(255,255,255,.62); padding-block: clamp(48px, 6vw, 84px) 30px; font-size: .875rem; }
.footer a { transition: color var(--t-fast); }
.footer a:hover { color: var(--on-dark); }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(26px, 3vw, 56px); padding-bottom: clamp(34px, 4vw, 56px); border-bottom: 1px solid rgba(255,255,255,.1); }
.footer__logo .logo__mark { color: var(--on-dark); }
.footer h4 { color: var(--on-dark); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; margin-bottom: 18px; font-family: var(--font-body); }
.footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: space-between; padding-top: 26px; font-size: .75rem; color: rgba(255,255,255,.4); }
.socials { display: flex; gap: 10px; margin-top: 22px; }
.socials a { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; display: grid; place-items: center; transition: all var(--t-fast); }
.socials a:hover { background: var(--on-dark); color: var(--dark); border-color: var(--on-dark); }

/* ─────────────────────────── ПЛАВАЮЩИЕ ЭЛЕМЕНТЫ ─────────────────────────── */
.fab { position: fixed; right: 20px; bottom: 20px; z-index: 70; display: flex; flex-direction: column; gap: 10px; }
.fab a {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: var(--sand);
  box-shadow: 0 8px 26px rgba(20,19,15,.28);
  transition: transform var(--t-fast) var(--spring), background var(--t-fast);
}
.fab a:hover { transform: scale(1.07); background: var(--bronze); color: var(--on-dark); }
.fab a.is-wa { background: var(--wa); color: var(--on-dark); }

/* Липкая панель действий на мобильном (страница объекта) */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 75;
  display: none;
  gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.mobile-bar__price { flex: 1; min-width: 0; }
.mobile-bar__price b { display: block; font-family: var(--font-display); font-size: 1.14rem; font-weight: 400; letter-spacing: -.02em; }
.mobile-bar__price small { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* Прогресс чтения */
.readbar { position: fixed; top: 0; left: 0; height: 2px; background: var(--bronze); z-index: 95; width: 0; transition: width 90ms linear; }

/* Уведомление */
.toast {
  position: fixed; left: 50%; bottom: 26px;
  z-index: 210;
  background: var(--dark); color: var(--on-dark);
  padding: 14px 24px; border-radius: 2px;
  font-size: .875rem;
  box-shadow: 0 12px 40px rgba(20,19,15,.3);
  max-width: min(92vw, 460px);

  /* Скрытое состояние прячем полностью.
     Сдвига вниз мало: до края экрана 26px, и часть плашки оставалась
     торчать. Добавляем прозрачность и убираем из потока событий. */
  transform: translate(-50%, 24px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform 420ms var(--spring), opacity 240ms var(--ease-out), visibility 240ms;
}
.toast.is-on {
  transform: translate(-50%, 0);
  opacity: 1; visibility: visible;
}

/* ─────────────────────────── АНИМАЦИИ ПОЯВЛЕНИЯ ─────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 760ms var(--ease-out), transform 760ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal='fade']  { transform: none; }
[data-reveal='left']  { transform: translateX(-32px); }
[data-reveal='right'] { transform: translateX(32px); }
[data-reveal='scale'] { transform: scale(.965); }

/* Построчное появление заголовка */
.split-line { display: block; overflow: hidden; }
.split-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 900ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.is-in .split-line > span, .split-line.is-in > span { transform: none; }

/* Раскрытие изображения «шторкой» */
[data-clip] { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-out); transition-delay: var(--d, 0ms); }
[data-clip].is-in { clip-path: inset(0 0 0 0); }

/* Ленивая загрузка: плавное появление.
   Кадры карточек (.frm) исключены — там прозрачностью управляет
   переключение при движении мыши, и это правило его перебивало:
   все кадры оказывались видимыми одновременно. */
img[loading='lazy']:not(.frm) { opacity: 0; transition: opacity 500ms var(--ease-out); }
img[loading='lazy']:not(.frm).is-loaded,
img[loading='lazy']:not(.frm)[data-loaded] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  /* Кадры карточек исключены: у них прозрачность — это не анимация,
     а способ показать нужное фото. Оставляем мгновенное переключение. */
  [data-reveal], [data-clip], .split-line > span, img[loading='lazy']:not(.frm) {
    opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
  }
  .card__media img, .tile img { transition: none !important; }
  .card__media .frm { opacity: 0; }
  .card__media .frm.is-on { opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════
   БЛОК 2 — внутренние страницы
   ═══════════════════════════════════════════════════════════════ */

/* ─────────── Шапка страницы ─────────── */
.page-head { padding-block: calc(var(--header-h) + clamp(38px, 6vw, 80px)) clamp(28px, 4vw, 52px); }
.page-head .eyebrow { display: block; margin-bottom: 14px; }
.page-head .t-lead { margin-top: 18px; }
.page-head__grid {
  display: grid; gap: clamp(28px, 4vw, 64px);
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: end;
}
.page-head__facts { display: grid; gap: 20px; }
.page-head__facts div { display: grid; gap: 2px; padding-left: 18px; border-left: 1px solid var(--line); }
.page-head__facts strong { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 300; letter-spacing: -.02em; }
.page-head__facts span { font-size: 12px; color: var(--muted); }
@media (max-width: 900px) { .page-head__grid { grid-template-columns: 1fr; } .page-head__facts { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } }

/* ─────────── Чипы ─────────── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chips--lg { gap: 10px; }
.chips i {
  font-style: normal; margin-left: 6px; padding-left: 8px;
  border-left: 1px solid var(--line); color: var(--muted); font-size: 12px;
}
.chip--solid { background: var(--paper); }
.chip--pick { cursor: pointer; position: relative; user-select: none; }
.chip--pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip--pick:has(input:checked) { background: var(--ink); color: var(--sand); border-color: var(--ink); }
.chip--pick:has(input:focus-visible) { outline: 2px solid var(--bronze); outline-offset: 2px; }

/* ─────────── Плитки / мозаика ─────────── */
.mosaic { display: grid; gap: var(--gap); grid-template-columns: repeat(4, 1fr); }
.mosaic .tile { grid-column: span 1; aspect-ratio: 3 / 4; }
.mosaic .tile--wide { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; min-height: 100%; }
@media (max-width: 900px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); }
  .mosaic .tile--wide { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) { .mosaic { grid-template-columns: 1fr; } .mosaic .tile--wide { grid-column: span 1; } }

/* ─────────── Карточка «01/02/03» ─────────── */
.num-card { padding: 26px 0 0; border-top: 1px solid var(--line); }
.num-card__n {
  display: block; margin-bottom: 14px; font-family: var(--font-display);
  font-size: 13px; letter-spacing: .16em; color: var(--bronze);
}
.num-card h3 { margin-bottom: 10px; }

/* ─────────── Принципы ─────────── */
.prin { padding: 30px 0 0; border-top: 1px solid var(--line); }
.prin h3 { margin-bottom: 12px; }

/* ─────────── Услуги ─────────── */
.svc {
  display: block; padding: 26px; background: var(--paper);
  border: 1px solid var(--line); transition: border-color var(--t-base), transform var(--t-base) var(--ease-out);
}
.svc:hover { border-color: var(--ink); transform: translateY(-3px); }
.svc h3 { margin-bottom: 8px; }
.svc .link-arrow { margin-top: 16px; display: inline-flex; }

.svc-list { display: grid; }
.svc-row {
  display: grid; gap: clamp(18px, 3vw, 48px); align-items: start;
  grid-template-columns: 56px minmax(0, 1fr) 210px;
  padding: clamp(28px, 4vw, 46px) 0; border-top: 1px solid var(--line);
}
.svc-row:last-child { border-bottom: 1px solid var(--line); }
.svc-row__n { font-family: var(--font-display); font-size: 13px; letter-spacing: .16em; color: var(--bronze); padding-top: 6px; }
.svc-row__main h2 { margin-bottom: 12px; }
.svc-row__side { display: grid; gap: 12px; justify-items: start; }
.svc-row__price { font-size: 13px; color: var(--muted); }
@media (max-width: 900px) { .svc-row { grid-template-columns: 1fr; gap: 16px; } .svc-row__n { padding: 0; } }

/* ─────────── Галочки ─────────── */
.ticks { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 16px; }
.ticks li { position: relative; padding-left: 26px; font-size: 14px; color: var(--ink-soft); }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: .55em; width: 12px; height: 6px;
  border-left: 1.4px solid var(--bronze); border-bottom: 1.4px solid var(--bronze);
  transform: rotate(-45deg);
}
.ticks--inline { display: flex; flex-wrap: wrap; gap: 10px 26px; }

/* ─────────── Факты ─────────── */
.facts-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--gap); }
.fact { text-align: center; padding: 26px 12px; border-left: 1px solid var(--line); }
.fact:first-child { border-left: 0; }
@media (max-width: 700px) { .fact { border-left: 0; border-top: 1px solid var(--line); } }

/* ─────────── Полоса-изображение ─────────── */
.about-band { overflow: hidden; }
.about-band__img { height: clamp(240px, 42vh, 520px); }
.about-band__img img { width: 100%; height: 100%; object-fit: cover; }

/* ═══════════════════ ЗАСТРОЙЩИКИ ═══════════════════ */
.dev-hero { position: relative; padding-top: var(--header-h); overflow: hidden; background: var(--dark); }
.dev-hero__bg { position: absolute; inset: -8% 0; opacity: .38; }
.dev-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.dev-hero__inner { position: relative; padding-block: clamp(30px, 5vw, 64px) clamp(34px, 5vw, 70px); color: var(--sand); }
.dev-hero__inner .crumbs { padding-left: 0; padding-right: 0; color: rgba(244,241,234,.62); }
.dev-hero__inner .crumbs a:hover { color: var(--on-dark); }
.dev-hero__card { display: flex; gap: clamp(18px, 3vw, 40px); align-items: center; flex-wrap: wrap; }
.dev-hero__logo {
  width: 116px; height: 116px; flex: none; display: grid; place-items: center;
  background: var(--white); padding: 16px; border-radius: var(--radius);
}
.dev-hero__logo img { max-height: 100%; object-fit: contain; }
.dev-hero__facts { display: flex; flex-wrap: wrap; gap: 12px 34px; margin-top: 18px; }
.dev-hero__facts div { display: grid; }
.dev-hero__facts strong { font-family: var(--font-display); font-size: 22px; font-weight: 300; }
.dev-hero__facts span { font-size: 12px; color: rgba(244,241,234,.6); }

.dev-about { display: grid; gap: clamp(28px, 4vw, 70px); grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.dev-about__text { margin-top: 14px; }
.dev-about__districts { margin-top: 32px; }
.dev-contacts { padding: 28px; background: var(--paper); border: 1px solid var(--line); align-self: start; }
.dev-contacts .dl { margin: 16px 0 20px; }
.dev-contacts__note { margin: 18px 0; }
@media (max-width: 900px) { .dev-about { grid-template-columns: 1fr; } }

.dev-card--feat { text-align: left; }
.dev-card__initials { font-family: var(--font-display); font-size: 24px; color: var(--muted); }
.dev-card__name { font-family: var(--font-display); font-size: 18px; font-weight: 400; margin: 14px 0 8px; }

.alpha-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.alpha-nav a {
  min-width: 30px; height: 30px; display: grid; place-items: center;
  font-size: 12px; color: var(--muted); border: 1px solid transparent; transition: all var(--t-fast);
}
.alpha-nav a:hover { color: var(--ink); border-color: var(--line); }

.alpha-group { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 0 24px; padding: 22px 0; border-top: 1px solid var(--line); scroll-margin-top: 100px; }
.alpha-group__letter { font-family: var(--font-display); font-size: clamp(30px, 4vw, 48px); font-weight: 200; color: var(--line); line-height: 1; }
.dev-list { list-style: none; padding: 0; display: grid; }
.dev-list a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; gap: 16px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--line-soft); transition: padding var(--t-fast);
}
.dev-list a:hover { padding-left: 8px; }
.dev-list a:hover .dev-list__arr { opacity: 1; transform: none; }
.dev-list__name { font-size: 16px; }
.dev-list__meta { font-size: 12px; color: var(--muted); }
.dev-list__arr { opacity: 0; transform: translateX(-4px); transition: all var(--t-fast); }
@media (max-width: 640px) { .alpha-group { grid-template-columns: 1fr; gap: 8px; } }

/* ═══════════════════ РАЙОНЫ ═══════════════════ */
.dist-hero { position: relative; padding-top: var(--header-h); overflow: hidden; background: var(--dark); color: var(--sand); }
.dist-hero__bg { position: absolute; inset: -8% 0; opacity: .46; }
.dist-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.dist-hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,15,12,.5), rgba(16,15,12,.85)); }
/* Только вертикальные отступы: сокращённая запись padding обнуляла
   боковые, которые задаёт .shell, и весь заголовок района прилипал
   к левому краю окна. */
.dist-hero__inner { position: relative; padding-block: clamp(30px, 5vw, 60px) clamp(38px, 6vw, 78px); }
.dist-hero__inner .crumbs { padding-left: 0; padding-right: 0; color: rgba(244,241,234,.62); }
.dist-hero__inner .eyebrow { display: block; margin-bottom: 12px; color: var(--bronze-lite); }
.dist-hero__facts { display: flex; flex-wrap: wrap; gap: 16px 44px; margin-top: 26px; }
.dist-hero__facts div { display: grid; }
.dist-hero__facts strong { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 28px); font-weight: 300; }
.dist-hero__facts span { font-size: 12px; color: rgba(244,241,234,.6); }

.dist-about { display: grid; gap: clamp(28px, 4vw, 70px); grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.dist-about__block { margin-top: 30px; }
@media (max-width: 900px) { .dist-about { grid-template-columns: 1fr; } }

.dist-table { display: grid; }
.dist-row {
  display: grid; align-items: center; gap: 18px;
  grid-template-columns: 56px minmax(0, 2fr) minmax(0, 1fr) 130px 130px 20px;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft); transition: padding var(--t-fast);
}
.dist-row:hover { padding-left: 8px; }
.dist-row:hover .dist-row__arr { opacity: 1; transform: none; }
.dist-row__img { width: 56px; height: 42px; overflow: hidden; background: var(--sand-deep); }
.dist-row__img img { width: 100%; height: 100%; object-fit: cover; }
.dist-row__name { font-size: 16px; }
.dist-row__city, .dist-row__cnt, .dist-row__price { font-size: 13px; color: var(--muted); }
.dist-row__cnt i { font-style: normal; }
.dist-row__price { text-align: right; color: var(--ink); }
.dist-row__arr { opacity: 0; transform: translateX(-4px); transition: all var(--t-fast); }
.dist-row.is-hidden { display: none; }
@media (max-width: 860px) {
  .dist-row { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; }
  .dist-row__city, .dist-row__arr { display: none; }
  .dist-row__cnt i { display: none; }
}

/* ═══════════════════ ТИПЫ ═══════════════════ */
.type-card { display: block; background: var(--paper); border: 1px solid var(--line); transition: border-color var(--t-base), transform var(--t-base) var(--ease-out); }
.type-card:hover { border-color: var(--ink); transform: translateY(-3px); }
.type-card:hover .type-card__media img { transform: scale(1.04); }
.type-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand-deep); }
.type-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.type-card__body { padding: 20px 22px 24px; }
.type-card__body p { margin-top: 10px; }
.type-card__cnt { font-family: var(--font-display); font-size: 20px; font-weight: 300; color: var(--muted-2); }
.type-card__price { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 14px; }

.quick-cuts { display: grid; gap: clamp(24px, 3vw, 50px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* ═══════════════════ КАРТОЧКА ЮНИТА ═══════════════════ */
.obj-aside { align-self: start; }
.obj-head { margin: clamp(24px, 3vw, 40px) 0 clamp(20px, 2.5vw, 32px); }
.obj-head .t-h1 { margin: 14px 0 10px; }
.obj-head__place { color: var(--muted); font-size: 15px; }
.obj-head__place a { border-bottom: 1px solid var(--line); }
.card__badges--static { position: static; display: flex; flex-wrap: wrap; gap: 6px; }
.obj-gallery__note { position: absolute; left: 14px; bottom: 14px; }
.obj-block { padding-top: clamp(30px, 4vw, 52px); margin-top: clamp(30px, 4vw, 52px); border-top: 1px solid var(--line); }
.obj-block h2 { margin-bottom: 20px; }
.specs--wide { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.plans-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.plan-fig { margin: 0; background: var(--white); border: 1px solid var(--line); padding: 16px; }
.plan-fig img { width: 100%; aspect-ratio: 1; object-fit: contain; cursor: zoom-in; }
.plan-fig figcaption { margin-top: 10px; font-size: 12px; color: var(--muted); text-align: center; }

.aside-card__actions { display: grid; gap: 8px; margin: 18px 0; }
.aside-card__calc { padding: 16px 0; margin-top: 6px; border-top: 1px solid var(--line); }
.aside-card__pay { margin: 10px 0 6px; font-family: var(--font-display); font-size: 24px; font-weight: 300; }
.aside-card__contact { padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.aside-card__wa {
  display: inline-flex; align-items: center; gap: 9px; font-size: 14px;
  color: var(--ok); transition: opacity var(--t-fast);
}
.aside-card__wa:hover { opacity: .7; }
.aside-card__tel { font-family: var(--font-display); font-size: 18px; }

/* ═══════════════════ ФОРМЫ ═══════════════════ */
.field-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.field__lab { display: block; margin-bottom: 7px; font-size: 12px; letter-spacing: .04em; color: var(--muted); }
.field__lab i { font-style: normal; color: var(--bronze); }

.fset { border: 0; padding: 0; margin: 0 0 clamp(28px, 4vw, 44px); }
.fset legend {
  display: flex; align-items: baseline; gap: 12px; width: 100%; margin-bottom: 18px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: 19px; font-weight: 400;
}
.fset__n { font-size: 12px; letter-spacing: .16em; color: var(--bronze); }
.fset .field-grid + .field { margin-top: 16px; }
.fset .field { margin-bottom: 16px; }

.order-layout { display: grid; gap: clamp(28px, 4vw, 64px); grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.order-layout > div:first-child .t-lead { margin: 16px 0 30px; }
.order-form { display: grid; gap: 22px; }
.order-form__kinds { border: 0; padding: 0; margin: 0; }
.order-form__kinds legend { display: block; margin-bottom: 10px; padding: 0; border: 0; font-family: var(--font-body); }
.order-form__goal { border: 0; padding: 0; margin: 0; }
.order-form__note { margin-top: -6px; }
.order-aside { display: grid; gap: 20px; align-self: start; }
.order-subject { background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
.order-subject__img { aspect-ratio: 16 / 10; background: var(--sand-deep); }
.order-subject__img img { width: 100%; height: 100%; object-fit: cover; }
.order-subject__body { padding: 20px 22px 24px; }
.order-subject__body h2 { margin: 8px 0 14px; }
.order-subject__price { margin: 14px 0; font-family: var(--font-display); font-size: 21px; font-weight: 300; }
.order-trust { padding: 24px; border: 1px solid var(--line); }
.order-trust__contacts { display: flex; gap: 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 14px; }
.order-trust__contacts a { border-bottom: 1px solid var(--line); }
@media (max-width: 900px) { .order-layout { grid-template-columns: 1fr; } }

.listing-form { max-width: 100%; }
.alert { padding: 14px 18px; margin: 18px 0; font-size: 14px; border-left: 2px solid; }
.alert--err { background: #FBF0EA; border-color: var(--warn); color: #7A431B; }

.seg--sm button { padding: 7px 12px; font-size: 12px; }
.seg--wrap { flex-wrap: wrap; }
.seg__opt { position: relative; }
.seg__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg__opt span {
  display: block; padding: 9px 16px; font-size: 13px; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper); transition: all var(--t-fast);
}
.seg__opt:has(input:checked) span { background: var(--ink); color: var(--sand); border-color: var(--ink); }
.seg__opt:has(input:focus-visible) span { outline: 2px solid var(--bronze); outline-offset: 2px; }

/* ═══════════════════ КАЛЬКУЛЯТОР ═══════════════════ */
.calc { display: grid; gap: clamp(26px, 4vw, 60px); grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
.calc__inputs { display: grid; gap: clamp(26px, 3vw, 38px); }
.calc__row-2 { display: grid; gap: clamp(20px, 3vw, 34px); grid-template-columns: 1fr 1fr; }
.calc__rent { margin-top: 4px; }
.calc__rent i { font-style: normal; }
/* Блок результата светлый. Раньше выше по файлу он был тёмным, и от
   того правила остался белый цвет текста — сумма платежа выходила
   белым по белому. Цвет задаём здесь же, чтобы не зависеть от порядка. */
.calc__out {
  padding: clamp(24px, 3vw, 34px);
  background: var(--paper); border: 1px solid var(--line);
  color: var(--ink);
}
.calc__out .eyebrow { color: var(--bronze); }
.calc__out .u-dim { color: var(--muted); }
.calc__out .calc__row { border-bottom-color: var(--line-soft); }
.calc__main { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.calc__pay { display: block; margin: 8px 0 4px; font-family: var(--font-display); font-size: clamp(30px, 4vw, 44px); font-weight: 200; letter-spacing: -.02em; }
.calc__list { margin: 16px 0 0; display: grid; gap: 9px; }
.calc__list > div { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.calc__list dt { color: var(--muted); }
.calc__list dd { margin: 0; text-align: right; white-space: nowrap; }
.calc__list .is-total { padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--line); font-weight: 500; }
.calc__list .is-total dt { color: var(--ink); }
.calc__fees, .calc__rent-out { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--line); }
.calc__cta { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--line); }
.calc__cta .field-row { display: flex; gap: 8px; margin-top: 12px; }
.calc__cta .field { flex: 1; margin: 0; }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } .calc__row-2 { grid-template-columns: 1fr; } }
@media (max-width: 500px) { .calc__cta .field-row { flex-direction: column; } }

/* ═══════════════════ КОНТАКТЫ ═══════════════════ */
.contacts-layout { display: grid; gap: clamp(26px, 4vw, 64px); grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
.contacts-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* Длинная почта не должна вылезать за рамку: разрешаем перенос
   по любому месту и уменьшаем кегль на узких карточках */
.contact-card {
  display: grid; gap: 6px; padding: 26px; background: var(--paper); border: 1px solid var(--line);
  min-width: 0; overflow-wrap: anywhere;
  transition: border-color var(--t-base), transform var(--t-base) var(--ease-out);
}
.contact-card:hover { border-color: var(--ink); transform: translateY(-3px); }
.contact-card span:last-child { font-size: 13px; }
.contacts-office { padding: 28px; border: 1px solid var(--line); min-width: 0; }
/* Длинный адрес переносим по словам: без этого строка выходила
   за рамку карточки */
.contacts-office .t-h4 { overflow-wrap: anywhere; hyphens: auto; }

/* В карточке офиса подпись стоит над значением и слева. Общий стиль
   .dl прижимает значение к правому краю колонки — здесь это давало
   пустоту слева от «Языки», будто там потеряна иконка. */
.contacts-office .dl {
  margin: 16px 0 22px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px 24px;
}
.contacts-office .dl > div { display: grid; gap: 3px; min-width: 0; }
.contacts-office .dl dt { font-size: 12px; }
.contacts-office .dl dd { text-align: left; overflow-wrap: anywhere; }
.map-embed--tall { aspect-ratio: 3 / 4; }
.socials--sm a { width: 34px; height: 34px; font-size: 11px; }
@media (max-width: 900px) { .contacts-layout { grid-template-columns: 1fr; } .map-embed--tall { aspect-ratio: 16 / 10; } }

/* ═══════════════════ СПАСИБО ═══════════════════ */
.thanks { padding: calc(var(--header-h) + clamp(50px, 10vw, 130px)) 0 clamp(60px, 10vw, 140px); }
.thanks__mark { width: 66px; height: 66px; margin: 0 auto 26px; color: var(--bronze); }
.thanks .t-h1 { margin: 12px 0 16px; }
.thanks__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 34px 0 0; }
.thanks__next { margin-top: clamp(46px, 7vw, 80px); padding-top: 30px; border-top: 1px solid var(--line); }
.thanks__links { display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: center; margin-top: 14px; }

/* ═══════════════════ АККОРДЕОН ═══════════════════ */
.acc { border-top: 1px solid var(--line); }
.empty--sm { padding: 26px 0; }

/* ═══════════════════ ЛАЙТБОКС (доп.) ═══════════════════ */
.lb__close { position: absolute; top: 18px; right: 18px; z-index: 3; }
.lb__count { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); font-size: 13px; color: rgba(255,255,255,.7); }

/* ═══════════════════ ЛЕНТА ИЗОБРАЖЕНИЙ ═══════════════════ */
.rail__img { flex: 0 0 clamp(240px, 32vw, 400px); aspect-ratio: 4 / 3; object-fit: cover; cursor: zoom-in; }

/* ═══════════════════ ПОИСК ПО СПИСКУ ═══════════════════ */
.filters__search--sm { max-width: 260px; }

.chips--radio, .chips--check { margin-top: 10px; }
.page-head--split { padding-bottom: clamp(20px, 3vw, 36px); }

.is-clamped { overflow: hidden; max-height: var(--clamp-h); position: relative; transition: max-height var(--t-slow) var(--ease-out); }
.is-clamped::after { content: ''; position: absolute; inset: auto 0 0; height: 70px; background: linear-gradient(transparent, var(--sand)); pointer-events: none; }
.is-clamped.is-open { max-height: 300vh; }
.is-clamped.is-open::after { opacity: 0; }
.clamp-more { margin-top: 14px; }

/* ─────────── Служебная страница /_health ─────────── */
.health { display: grid; gap: clamp(24px, 3vw, 40px); }
.health__grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.health__box { padding: 26px; background: var(--paper); border: 1px solid var(--line); }
.health__box .dl { margin-top: 14px; }
.health__box .is-zero { color: var(--warn); }
.health__errors, .health__hint { padding: 26px; border: 1px solid var(--line); }
.health__table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }
.health__table th { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); font-weight: 500; color: var(--muted); }
.health__table td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.health__steps { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 9px; font-size: 14px; }
.health__steps code, .health__hint code {
  padding: 2px 6px; background: var(--sand-deep); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px;
}
.u-break { word-break: break-all; }
.u-nowrap { white-space: nowrap; }
.health__env { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.health__env li { display: grid; grid-template-columns: 20px 190px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 13px; }
.health__env-mark { font-weight: 600; }
.health__env li.is-ok .health__env-mark { color: var(--ok); }
.health__env li.is-bad .health__env-mark { color: var(--warn); }
.health__env-hint { color: var(--muted); }
@media (max-width: 640px) { .health__env li { grid-template-columns: 20px minmax(0, 1fr); } .health__env-hint { grid-column: 2; } }

/* ─────────── Источник данных ─────────── */
/* Наши объекты отмечаем явно: бронзовая рамка вместо заливки —
   заметно, но не спорит с бейджами статуса продаж */
.badge--own {
  background: transparent; color: var(--bronze);
  border: 1px solid currentColor; backdrop-filter: blur(6px);
  font-weight: 500;
}
.card__code {
  /* Правый край вровень с полосками, по вертикали — выше них:
     полоски занимают 3px от нижнего отступа, добавляем зазор */
  position: absolute; right: var(--pad); bottom: calc(var(--pad) + 13px); z-index: 5;
  padding: 3px 8px; border-radius: 2px;
  background: rgba(16,15,12,.55); backdrop-filter: blur(6px);
  color: rgba(244,241,234,.9);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; letter-spacing: .06em;
  opacity: 0; transform: translateY(3px);
  transition: opacity var(--t-base), transform var(--t-base);
}
.card:hover .card__code { opacity: 1; transform: none; }
@media (hover: none) { .card__code { opacity: .85; transform: none; } }

/* Код на странице объекта — служебная строка, а не заголовок: без рамки, тише имени */
.obj-code {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 0; border: 0; background: none;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px; letter-spacing: .06em; color: var(--muted-2, var(--muted));
  cursor: pointer; transition: color var(--t-fast);
}
.obj-code:hover { color: var(--ink); }
.obj-code[data-copied]::after { content: attr(data-copied); font-family: var(--font-body); color: var(--ok); }
.obj-code__src { color: var(--bronze); }

/* Переключатель источника в каталоге */
.src-switch { display: inline-flex; border: 1px solid var(--line); }
.src-switch button {
  padding: 8px 15px; background: transparent; border: 0; cursor: pointer;
  font-size: 12px; letter-spacing: .04em; color: var(--muted);
  transition: all var(--t-fast);
}
.src-switch button + button { border-left: 1px solid var(--line); }
.src-switch button.is-on { background: var(--ink); color: var(--sand); }
.src-switch button i { font-style: normal; opacity: .6; margin-left: 5px; }

/* ─────────── Переключатель языка ─────────── */
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.lang__i {
  padding: 5px 9px; font-size: 11px; letter-spacing: .08em; color: var(--muted);
  transition: background var(--t-fast), color var(--t-fast);
}
.lang__i + .lang__i { border-left: 1px solid var(--line); }
.lang__i:hover { color: var(--ink); }
.lang__i.is-on { background: var(--ink); color: var(--sand); }
.is-dark .lang { border-color: rgba(244,241,234,.24); }
.is-dark .lang__i { color: rgba(244,241,234,.7); }
.is-dark .lang__i.is-on { background: var(--sand); color: var(--ink); }

/* ─────────── Удобства и очереди строительства ─────────── */
.amen-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 8px 22px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.amen-grid li { position: relative; padding-left: 18px; font-size: 14px; color: var(--ink-soft); }
.amen-grid li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--bronze);
}
.phases { display: grid; gap: 0; border-top: 1px solid var(--line); }
.phases__i {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px;
}
.phases__d { color: var(--muted); white-space: nowrap; }

/* Заглушка, когда фотографий нет вовсе */
.card__noimg {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--sand-deep), var(--paper));
}
.card__noimg span {
  font-family: var(--font-display); font-size: 30px; font-weight: 200;
  letter-spacing: .06em; color: var(--muted-2); opacity: .55;
}

/* ═══════════════ КАРТОЧКА: отступы бейджей ═══════════════ */
/* Раньше метка и «сердце» прижимались вплотную к краю */
/* Отступы карточки заданы в основных правилах выше */


/* Кнопки поверх растянутой ссылки карточки (.stretch::after — z-index 4),
   иначе клик по «сердцу» уходил в переход на проект */
.card__fav { z-index: 6; }
.card__badges, .card__code { z-index: 5; }


/* Счётчик избранного в шапке */
.fav-link { position: relative; display: inline-flex; align-items: center; gap: 7px; }
.fav-link__count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--bronze); color: var(--on-dark);
  font-size: 11px; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}

/* ═══════════════ АРАБСКИЙ: письмо справа налево ═══════════════ */
[dir="rtl"] { direction: rtl; }
[dir="rtl"] .eyebrow,
[dir="rtl"] .card__code { letter-spacing: 0; }          /* трекинг ломает арабскую вязь */
[dir="rtl"] .card__badges { left: auto; right: var(--pad); }
[dir="rtl"] .card__fav    { right: auto; left: var(--pad); }
[dir="rtl"] .card__code   { right: auto; left: var(--pad); }
[dir="rtl"] .hero__picks  { right: auto; left: max(24px, 4vw); }
[dir="rtl"] .hero-pick    { grid-template-columns: 26px minmax(0, 1fr) 58px; }
[dir="rtl"] .hero-pick:hover { transform: translateX(4px); }
[dir="rtl"] .hero-pick__bar  { left: auto; right: 0; }
[dir="rtl"] .hero__veil {
  background:
    linear-gradient(180deg, rgba(16,15,12,.62) 0%, rgba(16,15,12,.28) 34%, rgba(16,15,12,.72) 100%),
    linear-gradient(270deg, rgba(16,15,12,.55) 0%, transparent 62%);
}
/* Стрелки и «читать далее» разворачиваем зеркально */
[dir="rtl"] .link-arrow svg,
[dir="rtl"] .hero-pick__go svg,
[dir="rtl"] .dev-list__arr,
[dir="rtl"] .dist-row__arr { transform: scaleX(-1); }
[dir="rtl"] .alpha-group,
[dir="rtl"] .dev-list a,
[dir="rtl"] .dist-row { direction: rtl; }
[dir="rtl"] .specs__i,
[dir="rtl"] .calc__list > div { flex-direction: row-reverse; }
[dir="rtl"] .u-measure { text-align: right; }
/* Числа и цены оставляем слева направо — так их читают и в арабском */
[dir="rtl"] .card__price strong,
[dir="rtl"] .calc__pay,
[dir="rtl"] .fact__num,
[dir="rtl"] .hero-pick__price { direction: ltr; unicode-bidi: embed; display: inline-block; }

/* Медиа-блок выше растянутой ссылки: иначе она перехватывала движение мыши
   и кадры в карточке не переключались */
.card__media { z-index: 2; }
.card__body  { position: relative; z-index: 2; }
.card__body .card__title a { position: static; }

/* Фон героя: не растягиваем кадр — только лёгкий наезд, без искажения */
.hero__slide img { transform: scale(1.02); transition: transform 9s linear; }
.hero__slide.is-on img { transform: scale(1); }

/* ═══════════════ ВЫПАДАЮЩИЕ РАЗДЕЛЫ ═══════════════ */
.nav__item { position: relative; }
.nav__item .nav__link { display: inline-flex; align-items: center; gap: 5px; }
.nav__caret { opacity: .5; transition: transform var(--t-fast), opacity var(--t-fast); }
.nav__item.is-open .nav__caret { transform: rotate(180deg); opacity: 1; }

.drop {
  position: absolute; top: calc(100% + 14px); left: -18px; z-index: 60;
  min-width: 300px; padding: 22px;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 26px 60px -28px rgba(16,15,12,.42);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility .22s;
}
.nav__item.is-open .drop { opacity: 1; visibility: visible; transform: none; }
/* Мостик до панели: без него меню закрывается, пока ведёшь к нему мышь */
.drop::before { content: ''; position: absolute; inset: -14px 0 auto; height: 14px; }

/* Широкая панель начинается там же, где узкие: у своего пункта меню.
   Сдвиг влево на 120px выбивал её из общего ряда — это первое, что
   бросалось в глаза при наведении. Растём вправо, места хватает. */
.drop--wide { min-width: 640px; max-width: min(720px, calc(100vw - 48px)); }
.drop__cols { display: grid; gap: 26px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.drop__cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.drop__col { display: grid; gap: 2px; align-content: start; }
.drop__ttl {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.drop__l {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 6px 8px; margin: 0 -8px; font-size: 14px;
  border-radius: 2px; transition: background var(--t-fast), color var(--t-fast);
}
.drop__l:hover { background: var(--paper); color: var(--ink); }
.drop__l i { font-style: normal; font-size: 11px; color: var(--muted-2); }
.drop__l--2 { flex-direction: column; gap: 1px; align-items: flex-start; }
.drop__l--2 em { font-style: normal; font-size: 11px; color: var(--muted); }
.drop__all {
  display: inline-block; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line-soft); width: 100%;
  font-size: 12px; letter-spacing: .06em; color: var(--muted);
}
.drop__all:hover { color: var(--ink); }

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

/* ═══════════════ ПЕРВЫЙ ЭКРАН: ФОТО СПРАВА ═══════════════
   Кадры узкие (780 px), поэтому фото не растягивается на всю ширину,
   а занимает правую часть в натуральном размере. Слева и снизу
   растушёвка длинная и плавная, справа — короткая, чтобы снимок
   не обрывался о край окна. */
.hero__photo {
  position: absolute; right: 0; z-index: 0; overflow: hidden;

  /* Блок повторяет пропорции самого кадра и не превышает его размер.
     Раньше он тянулся во всю высоту экрана: при кадре 780×482 и высоте
     блока ~860px object-fit: cover увеличивал фотографию почти вдвое —
     отсюда мыло. Теперь масштаб всегда 1:1 или меньше. */
  width: min(var(--hero-w, 780px), 52vw);
  aspect-ratio: var(--hero-ratio, 780 / 482);
  max-height: 92%;

  /* По вертикали — по центру экрана */
  top: 50%; transform: translateY(-50%);
}
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.1s var(--ease-out);
  margin: 0;
}
.hero__slide.is-on { opacity: 1; }
.hero__slide img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  /* Без наезда: любое увеличение растягивает кадр и мылит его */
  transform: none;
}

/* Растушёвка краёв */
.hero__fade { position: absolute; pointer-events: none; z-index: 2; }
.hero__fade--left {
  inset: 0 auto 0 0; width: 62%;
  background: linear-gradient(90deg,
    var(--dark) 0%, rgba(16,15,12,.94) 22%, rgba(16,15,12,.55) 62%, rgba(16,15,12,0) 100%);
}
.hero__fade--bottom {
  inset: auto 0 0 0; height: 48%;
  background: linear-gradient(0deg, var(--dark) 0%, rgba(16,15,12,.62) 42%, rgba(16,15,12,0) 100%);
}
.hero__fade--right {
  inset: 0 0 0 auto; width: 38px;
  background: linear-gradient(270deg, var(--dark) 0%, rgba(16,15,12,0) 100%);
}
/* Верх и низ гасим сильнее: блок больше не доходит до краёв экрана,
   и без растушёвки был бы виден его прямоугольный контур */
.hero__fade--top {
  inset: 0 0 auto 0; height: 34%;
  background: linear-gradient(180deg, var(--dark) 0%, rgba(16,15,12,.5) 40%, rgba(16,15,12,0) 100%);
}

/* ─── Подпись к слайду ───
   Компактная: по высоте примерно как строка поиска слева. Без плашки —
   текст стоит на тёмной части кадра и держится растушёвкой, читаемость
   добирается тенью. Цена и застройщик убраны: они есть в карточках ниже,
   а здесь ломали высоту блока. */
/* Две колонки первого экрана: слева текст и поиск, справа подпись к слайду.
   Выравнивание по верху — подпись встаёт на уровень заголовка и ложится
   поверх фотографии. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 340px);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.hero__lead { min-width: 0; }

/* Подпись выравнивается по верху строчных букв заголовка, а не по его
   самому верху: у крупного начертания над строчными остаётся заметный
   просвет, и блок казался задранным.
   Складываем высоту надписи над заголовком и высоту выносных элементов
   (примерно 0.30 от кегля). */
.hero__info {
  position: relative; z-index: 5;
  padding-top: calc(clamp(30px, 3.6vh, 42px) + var(--t-hero-size) * 0.30);
}

.hero-card {
  position: relative; display: none;
  color: var(--sand);
  text-shadow: 0 1px 14px rgba(16,15,12,.75), 0 1px 3px rgba(16,15,12,.6);
}
.hero-card.is-on { display: block; animation: heroCardIn .5s var(--ease-out) both; }

@keyframes heroCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.hero-card__place {
  display: flex; align-items: center; gap: 6px;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  /* Ближе к заголовку: раньше между ними был лишний воздух и метка
     висела сама по себе */
  color: var(--bronze-lite); margin-bottom: 3px;
}
.hero-card__place svg { width: 12px; height: 12px; flex: none; }

/* Иконка выходит первой, до текста: она задаёт точку, куда смотреть */
.hero-card.is-on .hero-card__place svg { animation: pinIn .32s var(--spring) both; }
@keyframes pinIn {
  from { opacity: 0; transform: translateY(-4px) scale(.7); }
  to   { opacity: 1; transform: none; }
}

/* Строка набирается по буквам; курсор мигает только во время набора */
.hero-card__place-txt { display: inline-block; min-height: 1em; }
.hero-card__place-txt.is-typing::after {
  content: ''; display: inline-block;
  width: 1px; height: .95em; margin-left: 2px;
  background: currentColor; vertical-align: -1px;
  animation: caret .7s steps(1) infinite;
}
@keyframes caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* Строка локации при смене кадра появляется без общего сдвига:
   её выход берёт на себя набор букв */
.hero-card.is-on .hero-card__place { animation: none; opacity: 1; transform: none; }

.hero-card__name {
  display: block; font-family: var(--font-display);
  font-size: clamp(19px, 1.6vw, 23px); font-weight: 300;
  line-height: 1.16; letter-spacing: -.02em; color: var(--on-dark);
}

/* Нижняя строка: параметры, цена и стрелка в одну линию */
.hero-card__row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 14px; margin-top: 10px;
}
.hero-card__tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: rgba(244,241,234,.82);
}
.hero-card__tag svg { width: 12px; height: 12px; flex: none; opacity: .6; }

/* Цена: короткой строкой в общем ряду, без отдельного блока */
.hero-card__price {
  font-size: 11.5px; color: rgba(244,241,234,.62);
  letter-spacing: .02em;
}
.hero-card__price b {
  font-family: var(--font-display); font-weight: 400;
  font-size: 14.5px; color: var(--bronze-lite); margin-left: 3px;
}

/* Диагональная стрелка справа внизу — привычный знак «открыть».
   Круглая кнопка была тяжелее и спорила с лёгкой подписью. */
.hero-card__go {
  margin-left: auto; flex: none;
  display: grid; place-items: center;
  width: 26px; height: 26px; color: rgba(244,241,234,.7);
  transition: color var(--t-fast), transform var(--t-base) var(--ease-out);
}
.hero-card__go svg { width: 20px; height: 20px; }
.hero-card:hover .hero-card__go { color: var(--bronze-lite); transform: translate(3px, 3px); }
.hero-card:hover .hero-card__name { color: var(--bronze-lite); }


/* ─── Правая половина ─── */
.cat-facts { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.cat-facts li {
  position: relative; padding-left: 22px; font-size: 13.5px; color: var(--ink-soft);
}
.cat-facts li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 8px; height: 1px; background: var(--bronze);
}
.cat-form { margin-top: 30px; max-width: 460px; }
.cat-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.cat-form__note { font-size: 12px; color: var(--muted-2); margin: 12px 0 0; line-height: 1.5; }

@media (max-width: 1000px) {
  .cat-grid { grid-template-columns: 1fr; }
  .cat-book__scene { transform: none; }
  .cat-form { max-width: none; }
}
@media (max-width: 560px) {
  .cat-form__row { grid-template-columns: 1fr; }
  .cat-spread__list { display: none; }
}
/* Без анимации: страницы просто лежат стопкой, обложка сверху */
@media (prefers-reduced-motion: reduce) {
  .cat-page, .cat-cover { transition: none; }
}

/* ═══════════════ ПРОМО-КАРТОЧКА В СЕТКЕ ═══════════════
   Того же размера, что карточка объекта: попадается там, где человек
   уже листает выдачу. Баннер сбоку взгляд пропускает, эту — нет. */
.promo {
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: var(--radius);
  min-height: 100%;
}
/* В горизонтальной ленте карточка держит ту же ширину, что объекты */
/* В ленте карточка занимает ту же ячейку и ту же высоту, что объекты:
   иначе она выпирает и ломает ряд */
.rail > .promo { flex: 0 0 clamp(260px, 30vw, 420px); align-self: stretch; }
.rail > .promo .promo__title { font-size: clamp(18px, 1.8vw, 22px); }
.rail > .promo .promo__text { font-size: 13px; }
.rail > .promo .promo__icon { width: 36px; height: 36px; }
.rail > .promo .promo__icon svg { width: 19px; height: 19px; }

.promo--light  { background: var(--paper); border: 1px solid var(--line); }
/* Закрытые продажи: градиент уходит от тёмного к глубокому синему —
   карточка выглядит как «другая дверь», а не как ещё один объект */
.promo--dark {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(58,86,120,.85) 0%, transparent 58%),
    linear-gradient(150deg, #101319 0%, var(--dark) 45%, #0a0d12 100%);
  color: var(--sand);
}
/* Тонкий блик по диагонали: намёк на приоткрытую дверь */
.promo--dark::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(197,162,95,.14) 50%, transparent 62%);
}

/* Иконка вверху карточки: знак читается раньше текста */
.promo__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid currentColor; opacity: .5; margin-bottom: 2px;
}
.promo__icon svg { width: 24px; height: 24px; }
.promo--dark .promo__icon { color: var(--bronze-lite); opacity: .85; }
.promo--bronze .promo__icon { color: var(--on-dark); opacity: .7; }
.promo--bronze {
  background: linear-gradient(150deg, #6d5430 0%, #8a6c3d 55%, #55411f 100%);
  color: var(--on-dark);
}
/* На бронзе всё, что мельче заголовка, легко теряется: задаём цвета
   явно, иначе наследуется тёмный текст и получается тёмное на тёмном */
.promo--bronze .promo__eyebrow { color: rgba(255,255,255,.75); }
.promo--bronze .promo__text { color: rgba(255,255,255,.85); opacity: 1; }
.promo--bronze .promo__list li { color: rgba(255,255,255,.85); }
.promo--bronze .promo__agree { color: rgba(255,255,255,.75); }
.promo--bronze .promo__phone {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.42); color: var(--on-dark);
}
.promo--bronze .promo__phone::placeholder { color: rgba(255,255,255,.6); }
.promo--bronze .promo__phone:focus { border-color: var(--on-dark); background: rgba(255,255,255,.2); }
.promo--bronze .promo__btn { background: var(--on-dark); color: #3f3116; border-color: var(--on-dark); }
.promo--bronze .promo__btn:hover { background: rgba(255,255,255,.9); }
.promo--dark .promo__phone::placeholder { color: rgba(244,241,234,.5); }

.promo__eyebrow {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; opacity: .7;
}
.promo__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(20px, 2vw, 26px); line-height: 1.15; letter-spacing: -.02em; margin: 0;
}
.promo--dark .promo__title, .promo--bronze .promo__title { color: var(--on-dark); }
.promo__text { font-size: 13.5px; line-height: 1.5; margin: 0; opacity: .78; }

.promo__list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; }
.promo__list li {
  position: relative; padding-left: 16px; font-size: 13px; color: var(--ink-soft);
}
.promo__list li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 8px; height: 1px; background: var(--bronze);
}

.promo__btn {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px; cursor: pointer;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--ink); color: var(--sand); border: 1px solid var(--ink);
  transition: background var(--t-fast), color var(--t-fast), gap var(--t-fast);
}
.promo__btn svg { width: 15px; height: 15px; }
.promo__btn:hover { gap: 13px; }
.promo--dark .promo__btn,
.promo--bronze .promo__btn { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
.promo--light .promo__btn:hover { background: var(--bronze); border-color: var(--bronze); }
.promo__note { font-size: 10.5px; opacity: .55; line-height: 1.45; }

/* ═══════════════ КВИЗ ═══════════════
   Один вопрос на экран, ответы кнопками. Блок низкий: высота задана
   так, чтобы шаг помещался целиком и при переключении ничего
   не прыгало. */
/* Квиз и карта стоят подряд: между ними хватает одного отступа,
   двойной разрывал страницу пустотой */
.quiz-sec { background: var(--sand-deep); padding-block: clamp(30px, 4vw, 52px); }
/* Карта стоит сразу под лентой проектов: сверху хватает одного
   отступа, иначе между ними образуется провал */
.section + .map-block { padding-top: clamp(24px, 3vw, 44px); }
.quiz-sec + .map-block { padding-top: clamp(28px, 3.6vw, 48px); }
.map-block { padding-bottom: clamp(28px, 3.6vw, 48px); }
.map-block + .section,
.map-block + .catalog-cta { padding-top: clamp(24px, 3vw, 44px); }
.quiz {
  max-width: 900px; margin-inline: auto;
  text-align: center;
}
.quiz__bar {
  width: 100%; max-width: 420px; height: 2px; margin: 0 auto 30px;
  background: rgba(16,15,12,.12); position: relative; overflow: hidden;
}
.quiz__bar i {
  position: absolute; inset: 0 auto 0 0; width: 25%;
  background: var(--bronze); transition: width .35s var(--ease-out);
}

/* Шаги лежат друг на друге: переключение не двигает соседние блоки */
/* Высота подстраивается под текущий шаг. Раньше шаги лежали друг
   на друге и блок резервировал место под самый высокий — под коротким
   вопросом оставалась пустота почти в экран. */
.quiz__form { position: relative; }
.quiz__step {
  display: none; flex-direction: column; align-items: center; gap: 18px;
}
.quiz__step.is-on { display: flex; animation: quizIn .32s var(--ease-out) both; }
.quiz__done:not([hidden]) { display: flex; animation: quizIn .32s var(--ease-out) both; }
@keyframes quizIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.quiz__q {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(22px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -.03em;
  margin: 0; max-width: 20ch;
}
.quiz__lead { font-size: 14px; color: var(--muted); margin: 0; max-width: 52ch; line-height: 1.5; }

.quiz__opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.quiz__opt {
  padding: 13px 24px; border-radius: 40px; cursor: pointer;
  background: var(--white); border: 1px solid var(--line);
  font-size: 14px; color: var(--ink);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.quiz__opt:hover { border-color: var(--bronze); transform: translateY(-2px); }
.quiz__opt.is-on { background: var(--ink); border-color: var(--ink); color: var(--sand); }

.quiz__row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; }
.quiz__phone {
  flex: 1 1 260px; max-width: 340px;
  padding: 14px 18px; font-size: 15px; border-radius: 40px;
  background: var(--white); border: 1px solid var(--line); color: var(--ink);
}
.quiz__phone:focus { outline: none; border-color: var(--bronze); }
.quiz__phone.is-bad { border-color: var(--warn); }
.quiz__send { border-radius: 40px; padding-inline: 28px; }

.quiz__agree {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--muted); cursor: pointer;
}
.quiz__agree input { width: 15px; height: 15px; accent-color: var(--bronze); flex: none; }

/* Возврат к предыдущему вопросу: тихая ссылка, не кнопка */
.quiz__back {
  background: none; border: 0; cursor: pointer;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2); transition: color var(--t-fast);
}
.quiz__back:hover { color: var(--ink); }

@media (max-width: 560px) {
  .quiz__opt { padding: 11px 18px; font-size: 13px; }
}

/* ═══════════════ РАССЫЛКА ═══════════════ */
.news {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(24px, 4vw, 60px); align-items: center;
  margin-top: clamp(24px, 3vw, 40px); padding: clamp(20px, 2.4vw, 32px);
  background: var(--dark); color: var(--sand);
}
.news__eyebrow {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--bronze-lite);
}
.news__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(20px, 2.2vw, 28px); line-height: 1.15; margin: 10px 0 0; color: var(--on-dark);
}
.news__sub { font-size: 13.5px; line-height: 1.6; color: rgba(244,241,234,.66); margin: 12px 0 0; }
.news__form { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.news__field input {
  width: 100%; padding: 14px 16px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(244,241,234,.2);
  color: var(--on-dark); font-size: 14.5px;
}
.news__field input::placeholder { color: rgba(244,241,234,.4); }
.news__field input:focus { outline: none; border-color: var(--bronze); }
.news__note { font-size: 11px; color: rgba(244,241,234,.45); }

@media (max-width: 820px) { .news { grid-template-columns: 1fr; } }


/* Форма прямо в промо-карточке: поле видно сразу, нажатие даёт
   результат на месте — без открытия отдельного окна */
.promo__form { margin-top: auto; display: grid; gap: 10px; }
.promo__phone {
  width: 100%; padding: 12px 14px; font-size: 14.5px;
  background: var(--on-dark); border: 1px solid var(--line); color: var(--ink);
}
.promo__phone:focus { outline: none; border-color: var(--bronze); }
.promo--dark .promo__phone, .promo--bronze .promo__phone {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); color: var(--on-dark);
}
.promo__agree {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 11px; line-height: 1.35; color: var(--muted); cursor: pointer;
}
.promo__agree input { width: 15px; height: 15px; margin-top: 1px; flex: none; accent-color: var(--bronze); }
.promo__form .promo__btn { margin-top: 0; align-self: stretch; justify-content: center; }


/* ═══════════════ СВЯЗЬ И НАСТРОЙКИ В ШАПКЕ ═══════════════
   Блок был случайно удалён вместе с двухрядной шапкой — телефон,
   мессенджеры и переключатель языка остались без оформления. */

/* Мессенджеры: одинаковые кружки в тон шапки, фирменный цвет
   проявляется при наведении — пёстрые иконки удешевляют вид */
.msg {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid currentColor; color: inherit; opacity: .55;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), opacity var(--t-fast);
}
.msg svg { width: 15px; height: 15px; }
.msg:hover { opacity: 1; }
.msg--wa:hover { background: var(--wa); border-color: var(--wa); color: var(--on-dark); }
.msg--tg:hover { background: var(--tg); border-color: var(--tg); color: var(--on-dark); }

/* ─── Язык, валюта, единицы: один блок вместо трёх ─── */
.pref { position: relative; }
.pref__btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 2px; cursor: pointer;
  background: transparent; color: inherit;
  border: 0; border-bottom: 1px solid rgba(255,255,255,.28); border-radius: 0;
  font-size: 11px; letter-spacing: .07em;
  opacity: .78; transition: opacity var(--t-fast), border-color var(--t-fast);
}
.pref__btn:hover, .pref.is-open .pref__btn { opacity: 1; border-bottom-color: currentColor; }
body:not(.has-hero) .pref__btn,
.header.is-solid .pref__btn { border-bottom-color: rgba(26,24,21,.24); }
.pref__btn i { font-style: normal; opacity: .45; }
.pref__caret { margin-left: 3px; transition: transform var(--t-fast); }
.pref.is-open .pref__caret { transform: rotate(180deg); }

.pref__menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 70;
  min-width: 264px; padding: 18px 18px 14px;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line); box-shadow: 0 24px 54px -28px rgba(16,15,12,.42);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility .2s;
}
.pref.is-open .pref__menu { opacity: 1; visibility: visible; transform: none; }
.pref__group + .pref__group { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.pref__ttl {
  display: block; margin-bottom: 8px;
  font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted);
}
.pref__row { display: flex; flex-wrap: wrap; gap: 6px; }
.pref__i {
  padding: 7px 11px; font-size: 12.5px;
  border: 1px solid var(--line); color: var(--ink-soft);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.pref__i:hover { border-color: var(--muted-2); color: var(--ink); }
.pref__i.is-on { background: var(--ink); border-color: var(--ink); color: var(--sand); }
.pref__sign { opacity: .7; }
.pref__note {
  display: block; margin-top: 14px; padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 10.5px; color: var(--muted-2);
}
[dir="rtl"] .pref__menu { right: auto; left: 0; }

/* На узких экранах номер и мессенджеры прячем: они есть в меню */
@media (max-width: 1180px) { .header__phone, .msg { display: none; } }

/* ═══════════════ ВСПЛЫВАЮЩАЯ ФОРМА ЗАЯВКИ ═══════════════ */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__back {
  position: absolute; inset: 0; background: rgba(16,15,12,.62);
  backdrop-filter: blur(4px); opacity: 0; transition: opacity .24s;
}
.modal.is-open .modal__back { opacity: 1; }
.modal__box {
  position: relative; z-index: 1;
  width: min(460px, 100%); max-height: 92vh; overflow-y: auto;
  padding: clamp(26px, 4vw, 36px);
  background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 40px 90px -40px rgba(16,15,12,.5);
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity .26s var(--ease-out), transform .26s var(--ease-out);
}
.modal.is-open .modal__box { opacity: 1; transform: none; }
.modal__x {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer; color: var(--muted);
  transition: color var(--t-fast), transform var(--t-fast);
}
.modal__x:hover { color: var(--ink); transform: rotate(90deg); }
.modal__form { display: grid; gap: 14px; margin-top: 22px; }

/* Выбор канала связи */
.modal__ch { border: 0; padding: 0; margin: 0; }
.ch-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.ch {
  display: grid; justify-items: center; gap: 6px;
  padding: 12px 6px; cursor: pointer; text-align: center;
  border: 1px solid var(--line); background: var(--paper);
  font-size: 12px; color: var(--muted);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.ch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ch svg { width: 20px; height: 20px; }
.ch:hover { border-color: var(--muted-2); color: var(--ink); }
.ch.is-on { background: var(--ink); border-color: var(--ink); color: var(--sand); }
.ch:has(input:focus-visible) { outline: 2px solid var(--bronze); outline-offset: 2px; }

/* Ошибки полей */
.field__err { display: block; margin-top: 5px; font-size: 12px; color: var(--warn); }
.field input.is-bad, .field textarea.is-bad { border-color: var(--warn); }

/* Экран после отправки */
.modal__done { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 20px 0 6px; }
.modal__done-mark { width: 56px; height: 56px; color: var(--ok); }
.modal__done-mark svg { width: 100%; height: 100%; }
.btn.is-loading { opacity: .6; pointer-events: none; }

@media (max-width: 420px) {
  .ch-row { grid-template-columns: 1fr; }
  .ch { grid-template-columns: 22px 1fr; justify-items: start; text-align: left; align-items: center; }
}


/* ═══════════════ СПИСКИ В СТРОКЕ ПОИСКА ═══════════════
   Замена системному <select>: тот рисует операционная система —
   синяя подсветка, чужой шрифт, своя ширина. Здесь всё в стиле сайта. */
.searchbar__cell--sel { padding: 0; position: relative; }
.fsel { position: relative; height: 100%; }

.fsel__btn {
  /* Точка отсчёта для стрелки. Раньше она считалась от .fsel, и когда
     под кнопкой раскрывался список, стрелка уезжала на середину всего
     поля вместо середины кнопки. */
  position: relative;
  width: 100%; height: 100%; display: grid; gap: 5px;
  padding: 14px 34px 14px 20px; text-align: left;
  background: transparent; border: 0; cursor: pointer; color: inherit;
  transition: background var(--t-fast);
}
.fsel:hover .fsel__btn, .fsel.is-open .fsel__btn { background: rgba(255,255,255,.04); }
.fsel__lab {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(244,241,234,.5);
}
.fsel__val {
  font-size: 14.5px; color: var(--on-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fsel__caret {
  position: absolute; right: 16px; top: 50%; margin-top: -5px;
  color: rgba(244,241,234,.45); transition: transform var(--t-fast), color var(--t-fast);
}
.fsel.is-open .fsel__caret { transform: rotate(180deg); color: var(--on-dark); }

/* Панель раскрывается вниз от поля, шириной не уже самого поля */
.fsel__menu {
  position: absolute; top: calc(100% + 1px); left: 0; z-index: 60;
  min-width: 100%; width: max-content; max-width: min(340px, 90vw);
  max-height: 320px; overflow-y: auto;
  padding: 6px;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 24px 54px -26px rgba(16,15,12,.45);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility .18s;
}
.fsel.is-open .fsel__menu { opacity: 1; visibility: visible; transform: none; }

.fsel__i {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; background: none; border: 0; cursor: pointer;
  font-size: 13.5px; color: var(--ink-soft);
  transition: background var(--t-fast), color var(--t-fast);
}
.fsel__i:hover, .fsel__i:focus-visible { background: var(--paper); color: var(--ink); outline: none; }
.fsel__i.is-on { background: var(--ink); color: var(--sand); }

@media (max-width: 640px) {
  /* На узком экране список раскрывается в потоке, а не поверх страницы:
     всплывающая панель не помещалась и вылезала за край. */
  .fsel__menu { position: static; opacity: 1; visibility: visible; transform: none;
                box-shadow: none; border-width: 1px 0 0; max-height: 220px; display: none; }
  .fsel.is-open .fsel__menu { display: block; }

  /* Высоту не тянем. С height:100% кнопка растягивалась на всё поле,
     выросшее под список: подпись оставалась наверху, значение повисало
     посередине, и между ними зияла пустота — выглядело как поломка. */
  .fsel, .fsel__btn { height: auto; }
}


/* ═══════════════ КОРОТКИЙ КАЛЬКУЛЯТОР НА ГЛАВНОЙ ═══════════════
   Два ползунка вместо шести полей: человек должен успеть подвигать
   раньше, чем решит, что это анкета. */
.mini-calc {
  background: var(--dark); color: var(--on-dark);
  padding: clamp(26px, 3vw, 40px); border-radius: var(--radius-l);
}
.mini-calc__pay {
  font-family: var(--font-display); font-weight: 200;
  font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -.035em; line-height: 1.05;
  margin-bottom: 26px;
}
.mini-calc__pay b { font-weight: 200; }
.mini-calc__pay span { font-size: .4em; opacity: .5; }

.mini-calc__row + .mini-calc__row { margin-top: 20px; }
.mini-calc__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 9px;
}
.mini-calc__head label { font-size: 12.5px; color: rgba(255,255,255,.6); }
.mini-calc__head output {
  font-size: 13.5px; color: var(--bronze-lite);
  font-variant-numeric: tabular-nums;
}

/* Ползунок на тёмном: пройденная часть бронзой, остаток приглушён */
.range--light {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 2px; border-radius: 2px; cursor: pointer;
  background: linear-gradient(90deg, var(--bronze) 0 var(--fill, 0%), rgba(255,255,255,.2) var(--fill, 0%) 100%);
}
.range--light::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--on-dark); border: 3px solid var(--bronze); cursor: grab;
  transition: transform var(--t-fast);
}
.range--light::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }
.range--light::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--on-dark); border: 3px solid var(--bronze); cursor: grab;
}
.range--light::-moz-range-track { height: 2px; background: transparent; }

.mini-calc__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14);
}
.mini-calc__grid span { display: block; font-size: 11.5px; color: rgba(255,255,255,.5); margin-bottom: 4px; }
.mini-calc__grid b { font-family: var(--font-display); font-size: 17px; font-weight: 300; }

.mini-calc__note {
  font-size: .8125rem; color: rgba(255,255,255,.42);
  margin: 18px 0 0; line-height: 1.6;
}
.mini-calc__note b { color: rgba(255,255,255,.7); font-weight: 400; }

@media (max-width: 480px) { .mini-calc__grid { grid-template-columns: 1fr; } }


/* ═══════════════ ПРОЕКТЫ НА КАРТЕ ═══════════════ */
.map-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 26px 0 16px; }
.map-bar__types { display: flex; gap: 8px; flex-wrap: wrap; }
.map-bar__types .chip { cursor: pointer; }
.map-bar__types .chip i { font-style: normal; margin-left: 6px; opacity: .5; font-size: 11px; }
.map-bar__types .chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--sand); }
.map-bar__price { display: grid; gap: 7px; min-width: 240px; flex: 1 1 240px; max-width: 340px; }
.map-bar__lab { font-size: 12px; color: var(--muted); }
.map-bar__lab b { color: var(--ink); font-weight: 500; }
.map-bar__count { margin-left: auto; font-size: 12px; color: var(--muted); }
.map-bar__count b { font-family: var(--font-display); font-size: 20px; font-weight: 300; color: var(--ink); }

/* Leaflet раскладывает свои слои индексами до 1000 (панели 400, элементы
   управления 800, всплывашки 700), а собственные слои сайта не выше 401.
   Без своего контекста наложения эти индексы считались от всей страницы,
   и карта перекрывала всё, что над ней: кнопки звонка и WhatsApp (70)
   уходили под неё. isolate замыкает индексы Leaflet внутри карты. */
.map-wrap {
  position: relative; isolation: isolate;
  border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden;
}
.map-canvas { height: clamp(360px, 52vh, 580px); background: var(--paper); }
.map-canvas__stub { height: 100%; display: grid; place-items: center; color: var(--muted); font-size: 13.5px; }
.map-note { margin-top: 12px; font-size: 12.5px; color: var(--muted-2); }

/* Метка: точная — заливка, приблизительная (центр района) — контур */
.map-pin span {
  display: block; width: 14px; height: 14px; border-radius: 50%;
  background: var(--bronze); border: 2px solid var(--on-dark);
  box-shadow: 0 2px 8px rgba(16,15,12,.4); transition: transform var(--t-fast);
}
.map-pin--appr span { background: transparent; border-color: var(--bronze); }
.map-pin:hover span { transform: scale(1.35); }

/* Карточка проекта в метке */
.mapp { width: 244px; }
.mapp--nopic { width: 226px; }
.mapp--nopic .mapp__body { padding-top: 15px; }
.mapp__img { width: 100%; height: 132px; object-fit: cover; display: block; }
.mapp__body { padding: 12px 14px 14px; display: grid; gap: 4px; }
.mapp__place { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.mapp__name { font-family: var(--font-display); font-size: 16px; font-weight: 400; line-height: 1.2; }
.mapp__meta { font-size: 12px; color: var(--muted); }
.mapp__price { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.mapp__price b { font-family: var(--font-display); font-size: 15px; font-weight: 400; color: var(--bronze); }
.mapp__go {
  margin-top: 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 3px; justify-self: start;
}
.mapp__go:hover { border-color: var(--bronze); color: var(--bronze); }
.mapp__appr { font-size: 11px; color: var(--muted-2); margin-top: 6px; line-height: 1.4; }

.leaflet-popup-content-wrapper { border-radius: 2px; padding: 0; box-shadow: 0 22px 60px rgba(16,15,12,.28); }
.leaflet-popup-content { margin: 0; width: auto !important; }
.leaflet-container { font-family: var(--font-body); }
.leaflet-control-attribution { font-size: 10px; background: rgba(255,255,255,.75); }

/* Ползунок с двумя концами: два input поверх общей дорожки */
.rng { position: relative; height: 22px; display: flex; align-items: center; }
.rng__track { position: absolute; left: 0; right: 0; height: 2px; background: var(--line); border-radius: 2px; }
.rng__track i { position: absolute; top: 0; bottom: 0; background: var(--bronze); }
.rng__in {
  position: absolute; left: 0; right: 0; width: 100%; margin: 0;
  background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.rng__in::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--on-dark); border: 2px solid var(--bronze); cursor: grab;
  box-shadow: 0 2px 6px rgba(16,15,12,.2);
}
.rng__in::-moz-range-thumb {
  pointer-events: auto; width: 16px; height: 16px; border-radius: 50%;
  background: var(--on-dark); border: 2px solid var(--bronze); cursor: grab;
}
.rng__in::-moz-range-track { background: none; }

/* ═══════════════ КАТАЛОГ: ПОКАДРОВАЯ АНИМАЦИЯ ═══════════════ */
.catalog-cta { overflow: hidden; padding-top: clamp(22px, 3vw, 40px); }
.cat-grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px); align-items: center;
}
.cat-anim { display: grid; justify-items: center; }
.cat-anim__cv {
  /* Кадр 606 px. Показываем крупнее прежнего, но всё ещё меньше
     натурального размера — так он остаётся резким на плотных экранах. */
  display: block; width: min(100%, 470px); height: auto;
  filter: drop-shadow(0 22px 34px rgba(16,15,12,.18));
}
.cat-title { margin-top: 14px; }
.cat-sub { margin-top: 16px; max-width: 44ch; font-size: 15px; }
.cat-facts { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.cat-facts li { position: relative; padding-left: 22px; font-size: 13px; color: var(--ink-soft); }
.cat-facts li::before {
  content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 1px; background: var(--bronze);
}
.cat-form { margin-top: 22px; max-width: 460px; }
.cat-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.cat-form__note { font-size: 12px; color: var(--muted-2); margin: 12px 0 0; line-height: 1.5; }

/* Заглушка для плиток без фотографий */
.tile__noimg {
  position: absolute; inset: 0;
  background: linear-gradient(140deg, var(--sand-deep) 0%, var(--paper) 55%, var(--sand-deep) 100%);
}

@media (max-width: 1000px) { .cat-grid { grid-template-columns: 1fr; } .cat-form { max-width: none; } }
@media (max-width: 640px) { .map-bar__count { display: none; } .map-canvas { height: 380px; } }
@media (max-width: 560px) { .cat-form__row { grid-template-columns: 1fr; } }

/* Выбор валюты в мобильном меню */
.mmenu__cur { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.mmenu__cur-i {
  padding: 8px 13px; font-size: 13px;
  border: 1px solid rgba(244,241,234,.28); color: rgba(244,241,234,.8);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.mmenu__cur-i:hover { border-color: var(--bronze); color: var(--on-dark); }
.mmenu__cur-i.is-on { background: var(--sand); border-color: var(--sand); color: var(--ink); }

/* Секция рассылки в конце страницы */
.news-sec { padding-bottom: clamp(30px, 4vw, 56px); }
.news__text { min-width: 0; }

/* ═══════════════ ИНДИКАТОРЫ СЛАЙДОВ ═══════════════
   Полоски по числу кадров: активная заливается ровно за время показа,
   поэтому видно, сколько осталось до смены. Пропали вместе с блоком
   двухрядной шапки — восстановлены. */
.hero__dots { display: flex; gap: 7px; margin-top: 22px; }
.hero-dot {
  flex: 1; max-width: 46px; height: 16px; padding: 0;
  background: none; border: 0; cursor: pointer;
  display: flex; align-items: center;
}
.hero-dot span {
  display: block; width: 100%; height: 2px; border-radius: 2px;
  background: rgba(244,241,234,.28); overflow: hidden; position: relative;
  transition: background var(--t-fast);
}
.hero-dot:hover span { background: rgba(244,241,234,.5); }
.hero-dot span::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--bronze);
}
.hero-dot.is-on span::after { width: 100%; transition: width var(--hero-dur, 6s) linear; }


/* ═══════════════ ПОИСК ПОД ПЕРВЫМ ЭКРАНОМ ═══════════════
   Скрипт переносит форму сюда из тёмного героя на экранах уже 1024 px.
   Поля идут друг под другом во всю ширину: и на телефоне, и на планшете
   так проще попасть пальцем, а заголовок героя ничем не перекрыт.
   Блок существует только после переноса, поэтому медиазапрос не нужен. */
.m-search { background: var(--sand-deep); padding: 18px 0 22px; }
.m-search .searchbar {
  grid-template-columns: 1fr; gap: 1px;
  margin-top: 0; max-width: none;
  background: var(--line); border-color: var(--line);
  backdrop-filter: none;
}
.m-search .searchbar__cell { background: var(--white); padding: 12px 16px; }
.m-search .searchbar__cell label,
.m-search .fsel__lab { color: var(--muted); }
.m-search .searchbar__cell input,
.m-search .fsel__val { color: var(--ink); }
.m-search .searchbar__cell input::placeholder { color: var(--muted-2); }
.m-search .fsel__caret { color: var(--muted); }
.m-search .searchbar__submit { padding-block: 16px; }
.m-search .searchbar > *:first-child,
.m-search .searchbar > *:last-child { border-radius: 0; }

/* На планшете все поля встают в одну строку: два ряда с пустой ячейкой
   выглядели как незаполненная форма и занимали лишнюю высоту. */
@media (min-width: 640px) and (max-width: 1024px) {
  .m-search .searchbar { grid-template-columns: minmax(0, 1.5fr) 1fr 1fr auto; }
  .m-search .searchbar__cell { padding: 10px 14px; }
  .m-search .searchbar__cell label,
  .m-search .fsel__lab { font-size: 9px; letter-spacing: .1em; }
  .m-search .searchbar__cell input,
  .m-search .fsel__val { font-size: 13.5px; }
  .m-search .searchbar__submit { padding-inline: 22px; }
}

/* Планшет: подпись к проекту возвращается в правый верхний угол героя —
   там свободно, а внизу она отнимала место у текста и поиска. */
@media (min-width: 701px) and (max-width: 1080px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 290px);
    align-items: start;
  }
  .hero__info { display: block; padding-top: 0; }
  .hero__dots { margin-top: 16px; }
  .hero-card__name { font-size: 19px; }
  .hero-card__row { gap: 8px 12px; }
  .hero-card__price b { font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════
   АДАПТИВ И ПЕЧАТЬ — строго в конце файла.

   Медиазапросы обязаны идти последними: при равной специфичности
   побеждает правило, записанное ниже. Поздние правки дописывались
   после этого блока и перебивали мобильные правила.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────── АДАПТИВ ─────────────────────────── */
@media (max-width: 1280px) {
  .footer__top { grid-template-columns: 1fr 1fr 1fr; }
  .footer__logo { grid-column: 1 / -1; }
  .obj-layout { grid-template-columns: minmax(0,1fr) 330px; }
}

@media (max-width: 1080px) {
  :root { --header-h: 66px; }
  .nav { display: none; }
  .burger { display: grid; }
  /* Первый экран в одну колонку: правило потерялось при правках, и на
     телефоне текст ужимался в 90-пиксельную колонку — по слову в строку */
  .hero__grid { grid-template-columns: 1fr; }
  .hero__info { padding-top: 0; }
  .header__phone { display: none; }
  .obj-layout, .calc, .cta__inner { grid-template-columns: minmax(0, 1fr); }
  .aside-card, .calc__out { position: static; }
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .searchbar { grid-template-columns: 1fr 1fr; }
  .searchbar__submit { grid-column: 1 / -1; padding-block: 16px; }
  .card--wide { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 15.5px; }
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .hero { min-height: 88svh; }
  .hero__facts { grid-template-columns: 1fr 1fr; gap: 22px 12px; }
  /* Лента с перелистыванием: показываем все кадры, а не первый один. */
  .obj-gallery { grid-template-columns: 1fr; height: auto; }
  .obj-gallery[data-gallery] {
    display: flex; gap: 4px; border-radius: 0;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .obj-gallery[data-gallery]::-webkit-scrollbar { display: none; }
  .obj-gallery__cell {
    flex: 0 0 92%; aspect-ratio: 4/3; scroll-snap-align: center;
  }
  .obj-gallery__cell:first-child { grid-row: auto; }
  .obj-gallery__cell:nth-child(n+4) { display: block; }
  .obj-gallery__cell .obj-gallery__more { display: none; }
  .obj-gallery__count {
    display: block; position: absolute; right: clamp(18px, 4vw, 64px); bottom: 12px;
    padding: 4px 10px; border-radius: 2px;
    background: rgba(20,19,17,.62); color: #fff;
    font-size: 11.5px; letter-spacing: .06em; font-variant-numeric: tabular-nums;
    pointer-events: none;
  }
  /* Страница юнита: боковые кадры тоже листаем, а не прячем. */
  .obj-gallery__main { aspect-ratio: 4/3; }
  .obj-gallery__side {
    display: flex; gap: 4px; overflow-x: auto;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .obj-gallery__side::-webkit-scrollbar { display: none; }
  .obj-gallery__side > * { flex: 0 0 46%; aspect-ratio: 4/3; scroll-snap-align: center; }
  .catalog-grid { grid-template-columns: 1fr; }
  /* Панель фильтров привязана к высоте шапки, а не к числу: при 58px
     она наезжала на шапку, которая на узких экранах равна 66px. */
  .filters { top: var(--header-h); }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .specs { grid-template-columns: 1fr 1fr; }
  .plan { flex-wrap: wrap; }
  .plan__seg { flex: 1 1 44%; }
  .field-row { grid-template-columns: 1fr; }
  .scroll-hint { display: none; }
  .mobile-bar { display: flex; }
  .fab { bottom: 88px; }
  body.has-mobile-bar { padding-bottom: 78px; }
  /* Планировка карточкой: план слева, характеристики парами справа,
     цена и кнопка — во всю ширину. Раньше ячейки раскладывались как
     придётся: цена попадала в узкую колонку плана, а «Забронировать»
     вставало посреди строки и не помещалось. */
  .units-table thead { display: none; }
  .units-table tr {
    display: grid; grid-template-columns: 62px repeat(2, minmax(0, 1fr));
    gap: 10px 14px; padding: 14px 0;
    border-bottom: 1px solid var(--line-soft); align-items: start;
  }
  /* Строка без миниатюры — без колонки под неё. */
  .units-table tr:not(:has(> td:first-child:not([data-k]))) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .units-table td { border: 0; padding: 0; min-width: 0; }
  .units-table td:first-child:not([data-k]) { grid-column: 1; grid-row: 1 / span 2; }
  .units-table td[data-k]::before {
    content: attr(data-k); display: block;
    color: var(--muted); font-size: .6875rem; letter-spacing: .04em;
  }
  .units-table__price { grid-column: 1 / -1; }
  .units-table td:last-child { grid-column: 1 / -1; }
  .units-table td:last-child .btn { display: flex; width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .card { --pad: 16px; }
  .searchbar { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
  .footer__top { grid-template-columns: 1fr; }
}

/* ─────────────────────────── ПЕЧАТЬ ─────────────────────────── */
@media print {
  .header, .footer, .fab, .mobile-bar, .cta, .rail-nav, .filters { display: none !important; }
  body { background: var(--on-dark); color: #000; }
  .obj-layout { grid-template-columns: minmax(0, 1fr); }
  a[href]::after { content: ' (' attr(href) ')'; font-size: .7em; color: #555; }
}


/* Кнопка WhatsApp: фирменный зелёный, но приглушённый под палитру сайта */
/* WhatsApp: заливка сразу, а не контур. Зелёный контур с зелёным
   текстом на тёмной карточке проекта не читался — цвет почти сливался
   с фоном. Белый текст на фирменном зелёном виден на любом фоне. */
.btn--wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--ok); border-color: var(--ok); color: var(--on-dark);
}
.btn--wa > * { color: var(--on-dark); }
.btn--wa:hover { background: var(--wa-dark); border-color: var(--wa-dark); color: var(--on-dark); }
.btn--wa::after { display: none; }

/* Снятие из избранного: уведомление приглушённое, чтобы отличалось
   от добавления — иначе оба действия выглядят одинаково */
.toast.is-off { border-left: 3px solid var(--muted-2); }

/* Кнопка возвращается в исходный вид с тем же толчком, что и при добавлении:
   без этого снятие выглядело как «ничего не произошло» */
.card__fav:not(.is-on) svg { transform: scale(1); }
@keyframes favOff {
  0%   { transform: scale(1); }
  40%  { transform: scale(.86); }
  100% { transform: scale(1); }
}
.card__fav.was-on { animation: favOff .34s var(--ease-out); }

/* Счётчик избранного подпрыгивает при изменении — подтверждение клика,
   которое видно даже когда объект сняли из списка */
@keyframes favBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}
.fav-link__count.is-bump { animation: favBump .45s var(--ease-out); }
.fav-link.has-items svg { stroke: var(--bronze); fill: var(--bronze); }

/* «Сердце» — ссылка. Явные размеры и слой, чтобы её ничем не перекрывало
   и клик всегда попадал именно по ней. */
a.card__fav { text-decoration: none; }
.card__fav { pointer-events: auto; }

/* Уход текста при смене кадра: подпись сдвигается и гаснет,
   потом появляется новая — смена читается как одно движение */
.hero-card.is-out { animation: heroCardOut .24s var(--ease-out) both; }
@keyframes heroCardOut {
  to { opacity: 0; transform: translateY(-8px); }
}
/* Появление с лёгкой задержкой по строкам */
/* Порядок выхода подписи: сначала печатается адрес, потом всплывает
   название, следом по одной — метки под ним. Задержки подобраны под
   набор букв: строка успевает допечататься до появления названия. */
.hero-card.is-on .hero-card__name { animation: heroLine .5s 820ms var(--ease-out) both; }

/* Метки выходят по очереди: задержка каждой задана в разметке
   переменной --d, поэтому не зависит от того, какие поля заполнены */
.hero-card.is-on .hero-card__tag,
.hero-card.is-on .hero-card__price { animation: heroTag .42s var(--d, 1080ms) var(--spring) both; }
.hero-card.is-on .hero-card__go    { animation: heroLine .45s 1560ms var(--ease-out) both; }

@keyframes heroTag {
  from { opacity: 0; transform: translateY(8px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroLine {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Кнопка настроек: рамка была тяжёлой — оставляем подчёркивание */
.pref__btn {
  border: 0; border-bottom: 1px solid rgba(255,255,255,.28);
  padding: 6px 2px; border-radius: 0;
}
.pref__btn:hover, .pref.is-open .pref__btn { border-bottom-color: currentColor; }
body:not(.has-hero) .pref__btn,
.header.is-solid .pref__btn { border-bottom-color: rgba(26,24,21,.24); }

/* Подсказка о прокрутке. Стоит на той же вертикали, что и контент:
   раньше отсчитывалась от края окна и на широком экране уезжала левее
   блока поиска. Линия вертикальная и слева от слова — горизонтальная
   читалась как «листать вправо». */
.scroll-hint {
  left: max(clamp(18px, 4vw, 64px),
            calc((100vw - var(--shell)) / 2 + clamp(18px, 4vw, 64px)));
  bottom: 26px; gap: 12px;
  flex-direction: row-reverse;      /* линия впереди слова */
  justify-content: flex-end;
}
.scroll-hint__line { width: 1px; height: 34px; }
.scroll-hint__line::after { animation: scrollLineY 2.4s var(--ease-out) infinite; }
@keyframes scrollLineY {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}
.scroll-hint span:first-child {
  font-size: 9.5px; letter-spacing: .22em; color: rgba(244,241,234,.5);
}
.scroll-hint__line { background: rgba(244,241,234,.28); }

/* Кнопка призыва в шапке: стрелка подсказывает продолжение действия */
.btn--cta { display: inline-flex; align-items: center; gap: 8px; }
.btn--cta .btn__arrow { flex: none; transition: transform var(--t-base) var(--ease-out); }
.btn--cta:hover .btn__arrow { transform: translateX(3px); }
[dir="rtl"] .btn--cta .btn__arrow { transform: scaleX(-1); }
[dir="rtl"] .btn--cta:hover .btn__arrow { transform: scaleX(-1) translateX(3px); }

/* Взнос и кредит рядом с ползунком: две стороны одной суммы */
.calc__split {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 10px; font-size: 12.5px; color: var(--muted);
}
.calc__split b { color: var(--ink); font-weight: 500; }
.calc__split i { font-style: normal; color: var(--bronze); }

/* Пояснение под выбором статуса: требования банка различаются */
.range-note {
  margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted-2);
}
.seg--sm button { white-space: nowrap; }

/* Строка выбора статуса. Английские подписи длиннее русских, и втроём
   рядом с пояснением переключатель переставал помещаться — ломался
   на две строки прямо внутри рамки. Подпись занимает строку целиком,
   переключатель идёт следом, пояснение встаёт рядом или под ним. */
.calc__row--res { flex-wrap: wrap; align-items: center; row-gap: 12px; }
.calc__row--res > .range-head { flex: 0 0 100%; }
.calc__row--res .range-note { flex: 1 1 clamp(220px, 30vw, 340px); margin: 0; }
@media (max-width: 560px) {
  .calc__row--res .seg { width: 100%; }
  .calc__row--res .seg button { flex: 1 1 auto; text-align: center; }
}

/* ═══════════════ РЕЖИМ ПРАВКИ ТЕКСТОВ ═══════════════ */
.edbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 18px; background: var(--ink); color: var(--sand);
  font-size: 12.5px; box-shadow: 0 -8px 30px rgba(16,15,12,.28);
}
.edbar a { color: var(--bronze-lite); }
.edbar__dot { width: 8px; height: 8px; border-radius: 50%; background: #3F7D54; flex: none; }
.edbar__state { margin-left: auto; color: rgba(244,241,234,.7); }
.edbar__state.is-bad { color: #E2A08A; }

/* Подсветка того, что можно править. Пунктир, а не заливка:
   иначе не видно, как текст выглядит на самом деле. */
.ct-edit {
  outline: 1px dashed rgba(147,116,66,.55); outline-offset: 3px;
  border-radius: 2px; transition: outline-color .2s, background .2s;
  cursor: text;
}
.ct-edit:hover  { outline-color: var(--bronze); background: rgba(147,116,66,.07); }
.ct-edit:focus  { outline: 2px solid var(--bronze); background: rgba(147,116,66,.1); }
.ct-edit.is-saving { opacity: .6; }
.ct-edit.is-saved  { outline-color: #3F7D54; background: rgba(63,125,84,.12); }

/* Карточка без фотографии: просто текст, без пустого места сверху.
   Серый прямоугольник вместо снимка читается как недоделка. */
.mapp--nopic { width: 226px; }
.mapp--nopic .mapp__body { padding-top: 15px; }

/* Ползунок с двумя концами: два обычных input поверх общей дорожки.
   Готовых элементов для диапазона в браузере нет, поэтому верхний
   слой пропускает нажатия везде, кроме самих ручек. */
.rng { position: relative; height: 22px; display: flex; align-items: center; }
.rng__track {
  position: absolute; left: 0; right: 0; height: 2px;
  background: var(--line); border-radius: 2px;
}
.rng__track i { position: absolute; top: 0; bottom: 0; background: var(--bronze); }
.rng__in {
  position: absolute; left: 0; right: 0; width: 100%;
  margin: 0; background: none; pointer-events: none;
  -webkit-appearance: none; appearance: none;
}
.rng__in::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--on-dark); border: 2px solid var(--bronze); cursor: grab;
  box-shadow: 0 2px 6px rgba(16,15,12,.2);
}
.rng__in::-moz-range-thumb {
  pointer-events: auto;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--on-dark); border: 2px solid var(--bronze); cursor: grab;
}
.rng__in::-moz-range-track { background: none; }
.map-bar__price .map-bar__lab b { color: var(--ink); font-weight: 500; }

/* Гид стоит в сетке районов — значит и высота у него плиточная.
   Отдельная форма из трёх полей делала карточку вдвое выше соседей. */
.grid .promo--guide { padding: 20px; gap: 8px; }
.grid .promo--guide .promo__icon { width: 34px; height: 34px; margin-bottom: 0; }
.grid .promo--guide .promo__icon svg { width: 18px; height: 18px; }
.grid .promo--guide .promo__title { font-size: clamp(17px, 1.6vw, 20px); }
.grid .promo--guide .promo__text { font-size: 12.5px; }
.grid .promo--guide .promo__form { gap: 7px; }
.grid .promo--guide .promo__phone { padding: 9px 12px; font-size: 13px; }
.grid .promo--guide .promo__agree { font-size: 10px; }
.grid .promo--guide .promo__btn { padding: 10px 16px; font-size: 11px; }

/* Действия в карточке проекта: основная кнопка и два быстрых канала.
   Слой выше растянутой ссылки заголовка — иначе нажатие уходило бы
   на переход к проекту. */
.card__actions {
  position: relative; z-index: 7;
  display: grid; grid-template-columns: 1fr auto auto; gap: 6px;
  margin-top: 14px;
}
.card__cta {
  padding: 12px 16px; cursor: pointer;
  background: var(--ink); color: var(--sand); border: 1px solid var(--ink);
  font-size: 12.5px; letter-spacing: .04em;
  transition: background var(--t-fast), color var(--t-fast);
}
.card__cta:hover { background: var(--bronze); border-color: var(--bronze); }
.card__ico {
  width: 42px; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--muted);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.card__ico svg { width: 17px; height: 17px; }
.card__ico:hover { border-color: var(--ink); color: var(--ink); }
.card__ico--wa { background: var(--wa); border-color: var(--wa); color: var(--on-dark); }
.card__ico--wa:hover { background: var(--wa-dark); border-color: var(--wa-dark); color: var(--on-dark); }

/* Страница типа: подборки идут сразу под заголовком, поэтому отступы
   между ними сжимаем. Раньше складывались нижний отступ шапки и верхний
   отступ секции — получалась пустая полоса почти в экран. */
.page-head--split { padding-bottom: clamp(18px, 2.4vw, 32px); }
.page-head--split + .section-tight { padding-top: clamp(18px, 2.4vw, 30px); }
.quick-cuts { display: grid; gap: clamp(18px, 2.4vw, 30px); }
.section-tight + .section { padding-top: clamp(30px, 4vw, 56px); }

/* Группа планировок: заголовок с ценой и диапазоном площадей —
   человек решает, раскрывать ли таблицу, не открывая её */
.ugroup {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin: clamp(26px, 3vw, 38px) 0 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.ugroup__t { font-family: var(--font-display); font-size: 20px; font-weight: 400; margin: 0; }
.ugroup__meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.ugroup__meta b { color: var(--bronze); font-weight: 500; }

/* Расчёт рассрочки: цена лота ползунком, суммы траншей пересчитываются */
.paycalc {
  margin: clamp(24px, 3vw, 36px) 0 0; padding: 20px;
  background: var(--paper); border: 1px solid var(--line);
}
.paycalc__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-bottom: 12px;
}
.paycalc__head label { font-size: 12.5px; color: var(--muted); }
.paycalc__head output {
  font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--bronze);
}

/* Расположение: карта и фото рядом — место и вид считываются вместе */
.loc-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: stretch; }
.loc-grid .map-embed { margin: 0; height: 100%; }
.loc-pic { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); }
.loc-pic a { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.loc-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loc-pic figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 12px 14px; font-size: 12px; color: var(--on-dark);
  background: linear-gradient(0deg, rgba(16,15,12,.78), transparent);
}
@media (max-width: 820px) { .loc-grid { grid-template-columns: 1fr; } .loc-pic { height: 220px; } }

/* Разделы страницы проекта вместо вкладок */
.pnav .tabs { gap: 18px; padding-bottom: 2px; }
.pnav .tabs a {
  padding: 12px 2px; font-size: 13px; letter-spacing: .04em;
  color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.pnav .tabs a:hover { color: var(--ink); border-bottom-color: var(--bronze); }
.psec { padding-top: clamp(30px, 4vw, 52px); scroll-margin-top: calc(var(--header-h) + 20px); }
.psec__t {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -.02em; margin: 0 0 18px;
}

/* Калькулятор ипотеки в карточке проекта: компактная версия того же
   расчёта, что на главной — прикинуть платёж, не уходя со страницы */
/* Калькулятор в карточке проекта. Карточка светлая, а стили писались
   под тёмный фон — подписи получались светло-серыми на светлом и почти
   не читались. Цвета взяты из основной палитры страницы. */
.aside-calc {
  margin-top: 22px; padding: 18px; border-radius: var(--radius);
  background: var(--paper); border: 1px solid var(--line);
}
.aside-calc__lab { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.aside-calc__pay {
  font-family: var(--font-display); font-size: 26px; font-weight: 300;
  color: var(--ink); margin: 6px 0 16px;
}
.aside-calc__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 7px;
}
.aside-calc__row label { font-size: 11.5px; color: var(--muted); }
.aside-calc__row output { font-size: 13px; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.aside-calc .range--light + .aside-calc__row { margin-top: 14px; }
.aside-calc__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft);
}
.aside-calc__grid span { display: block; font-size: 10.5px; color: var(--muted); margin-bottom: 2px; }
.aside-calc__grid b { font-family: var(--font-display); font-size: 16px; font-weight: 400; color: var(--ink); }
.aside-calc__more {
  display: inline-block; margin-top: 14px; font-size: 11.5px;
  color: var(--bronze); border-bottom: 1px solid rgba(147,116,66,.35);
}
/* Ползунки на светлом фоне: дорожка темнее, ручка контрастнее */
.aside-calc .range--light {
  background: linear-gradient(90deg, var(--bronze) 0 var(--fill, 0%), var(--line) var(--fill, 0%) 100%);
}

/* Карта на странице проекта: ниже, чем на главной — рядом стоит фото */
.loc-map { height: 100%; }
.loc-map .map-canvas { height: clamp(300px, 42vh, 420px); }

/* ═══════════════ ПАНЕЛЬ ПРЕДПРОСМОТРА ═══════════════
   Видна только вошедшему в панель управления. Ширину устройства
   задаём рамкой вокруг страницы, а не масштабом: медиазапросы должны
   срабатывать так же, как на настоящем телефоне. */
.pvw {
  position: fixed; top: 0; left: 0; right: 0; z-index: 400;
  background: #14130F; color: #F4F1EA;
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-size: 12.5px;
}
.pvw__in {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 7px 16px; max-width: 1680px; margin-inline: auto;
}
.pvw__group { display: flex; gap: 2px; }
.pvw__group a {
  width: 34px; height: 30px; display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; color: rgba(244,241,234,.55);
  cursor: pointer; border-radius: 3px; transition: all 160ms;
}
.pvw__group a svg { width: 17px; height: 17px; }
.pvw__group a:hover { color: #F4F1EA; background: rgba(255,255,255,.07); }
.pvw__group a.is-on { color: #14130F; background: #F4F1EA; }
.pvw__size { color: rgba(244,241,234,.45); font-variant-numeric: tabular-nums; }

/* Выбор схемы */
.pvw__scheme { position: relative; margin-left: auto; }
.pvw__cur {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 11px; cursor: pointer; border-radius: 3px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  color: #F4F1EA; font-size: 12.5px;
}
.pvw__cur:hover { background: rgba(255,255,255,.12); }
.pvw__dots { display: inline-flex; gap: 3px; }
.pvw__dots i {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25); display: block;
}
.pvw__menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 210px;
  background: #1C1A16; border: 1px solid rgba(255,255,255,.14);
  border-radius: 4px; padding: 5px; z-index: 5;
  opacity: 0; visibility: hidden; transform: translateY(-5px);
  transition: opacity 160ms, transform 160ms, visibility 160ms;
  box-shadow: 0 20px 44px rgba(0,0,0,.45);
}
.pvw__scheme.is-open .pvw__menu { opacity: 1; visibility: visible; transform: none; }
.pvw__menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; background: none; border: 0; cursor: pointer;
  color: rgba(244,241,234,.8); font-size: 13px; text-align: left; border-radius: 3px;
}
.pvw__menu button:hover { background: rgba(255,255,255,.08); color: #fff; }
.pvw__menu button.is-on { background: rgba(255,255,255,.14); color: #fff; }
.pvw__hide {
  background: none; border: 0; cursor: pointer; padding: 4px 6px;
  color: rgba(244,241,234,.45); font-size: 14px;
}
.pvw__hide:hover { color: #F4F1EA; }

/* Страница сдвигается вниз, чтобы панель ничего не перекрывала */
body.has-preview { padding-top: 45px; }
body.has-preview .header { top: 45px; }

/* Фиксированные элементы внутри рамки должны следовать её ширине */
body.is-framed .header,

@media (max-width: 640px) {
  .pvw__size { display: none; }
  .pvw__in { gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   МОБИЛЬНАЯ ВЕРСИЯ — 700 px и уже

   Главный приём: всё, что на большом экране лежит сеткой, на телефоне
   становится горизонтальной лентой. Вертикальная простыня из двадцати
   карточек заставляет прокручивать экран за экраном, лента же
   показывает, что вариантов много, и листается пальцем.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

  /* Поля страницы: 18px на телефоне читаются как «впритык».
     20 даёт воздух, но не съедает ширину.
     Правило идёт первым: ниже блок карты обнуляет свои поля, и порядок
     здесь важнее специфичности. */
  .shell { padding-inline: 20px; }

  /* ─── Сетки → ленты ─── */
  .m-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 80vw;              /* следующая карточка выглядывает */
    grid-template-columns: none !important;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    /* Без выхода за поля контейнера: при отрицательных отступах
       карточки прилипали к краю экрана и текст в них оказывался
       ближе к границе, чем весь остальной текст страницы. */
  }
  .m-rail::-webkit-scrollbar { display: none; }

  /* Карточка занимает всю дорожку. Без этого элементы с заданной
     пропорцией (плитки районов) считали ширину от высоты и оказывались
     уже дорожки — между ними зияла пустота в половину экрана. */
  .m-rail > * {
    scroll-snap-align: start;
    width: 100%; min-width: 0; max-width: none;
    margin: 0;
  }
  .m-rail .tile { height: 250px; aspect-ratio: auto; }
  .m-rail .card { height: auto; }

  /* ─── Карта во всю ширину экрана ─── */
  .map-block .shell { padding-inline: 0; }
  .map-block .sec-head,
  .map-block .map-bar,
  .map-block .map-note { padding-inline: clamp(18px, 4vw, 64px); }
  .map-wrap { border-radius: 0; border-inline: 0; }
  .map-canvas { height: 62vh; }

  /* ─── Первый экран: один кадр фоном, без слайдера ───
     Смена кадров на телефоне не окупается: подпись к слайду перекрывает
     заголовок, а кадры тянут трафик. Показываем первый снимок фоном
     во всю площадь, поверх — затемнение и текст. */
  .hero { min-height: 78svh; padding-top: calc(var(--header-h) + 24px); }
  .hero__photo {
    position: absolute; inset: 0; top: 0; transform: none;
    width: 100%; height: 100%; aspect-ratio: auto;
    max-height: none; opacity: .5;
  }
  .hero__slide:not(.is-on) { display: none; }
  .hero__fade--left, .hero__fade--right, .hero__fade--top { display: none; }
  .hero__fade--bottom {
    inset: 0; height: 100%;
    background: linear-gradient(180deg, rgba(16,15,12,.55) 0%, rgba(16,15,12,.9) 70%, var(--dark) 100%);
  }
  /* Подпись к слайду и индикаторы не нужны без слайдера */
  .hero__info, .hero__dots { display: none; }
  .hero__grid { gap: 0; }
  .hero__facts { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  .scroll-hint { display: none; }

  /* ─── Крупные заголовки ─── */
  :root { --t-hero-size: clamp(2rem, 9vw, 2.8rem); }
  .t-h1 { font-size: clamp(1.6rem, 7.5vw, 2.2rem); }
  .t-h2 { font-size: clamp(1.4rem, 6.5vw, 1.9rem); }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .sec-head .t-lead { max-width: none; }

  /* ─── Секции плотнее ─── */
  .section { padding-block: clamp(34px, 8vw, 52px); }
  .section-tight { padding-block: clamp(26px, 6vw, 40px); }

  /* ─── Каталог: анимация тяжёлая и мелкая, показываем предложение ─── */
  .cat-anim { display: none; }
  .cat-grid { grid-template-columns: 1fr; gap: 0; }

  /* ─── Подвал: колонки в одну, ссылки крупнее для пальца ─── */
  .footer__top { grid-template-columns: 1fr; gap: 26px; }
  .footer__col ul { display: grid; gap: 10px; }
  .footer__col a { display: inline-block; padding-block: 3px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* ─── Шапка: гамбургер не должен теряться ─── */
  .header__inner { gap: 10px; min-height: 56px; }
  .header__tools { gap: 8px; margin-left: auto; }
  .header__tools .btn { display: none; }        /* кнопка призыва — в меню */
  .pref__btn { font-size: 10px; letter-spacing: .04em; }
  .burger { width: 40px; height: 40px; flex: none; order: 99; }
  .logo__mark { font-size: 15px; letter-spacing: .22em; }
  .logo__sub { font-size: 8.5px; }

  /* ─── Плавающие кнопки: мельче и ниже, чтобы не закрывать карточки ─── */
  .fab { right: 12px; bottom: 12px; gap: 8px; }
  .fab a { width: 46px; height: 46px; }
  .fab a svg { width: 20px; height: 20px; }

  /* ─── Действия в карточке: кнопка на всю ширину, каналы под ней ─── */
  .card__actions { grid-template-columns: 1fr auto auto; gap: 6px; }
  .card__cta { padding: 13px 10px; font-size: 12px; }
  .card__ico { width: 46px; }


  /* ═══════ ВНУТРЕННИЕ СТРАНИЦЫ ═══════
     Те же приёмы, что на главной: ничего не должно выходить за экран,
     таблицы превращаются в карточки, длинные ряды листаются пальцем. */

  /* Шапки внутренних страниц: заголовок и показатели */
  .page-head { padding-block: calc(var(--header-h) + 24px) 22px; }
  .page-head__facts { grid-template-columns: 1fr 1fr; gap: 14px; }
  .dist-hero__inner, .dev-hero__inner { padding-block: 24px 28px; }
  .dist-hero__facts, .dev-hero__facts { gap: 12px 24px; }

  /* Фильтры каталога: ряд листается, панели во всю ширину */
  .filters { padding-block: 10px; }
  .filters__row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 8px; }
  .filters__row::-webkit-scrollbar { display: none; }
  .filters__row > * { flex: none; }
  .filters__search { flex: 1 0 70%; }
  .pop__panel { position: fixed; left: 12px; right: 12px; min-width: 0; max-width: none; }

  /* Разделы страницы проекта: навигация листается */
  .pnav .tabs { overflow-x: auto; scrollbar-width: none; }
  .pnav .tabs::-webkit-scrollbar { display: none; }
  .psec { padding-top: 28px; }

  /* Карточка объекта и калькулятор — в один столбец */
  .obj-layout, .calc, .cta__inner, .loc-grid, .news { grid-template-columns: minmax(0, 1fr); }
  .aside-card, .calc__out, .dev-contacts { position: static; }

  /* Списки характеристик: подпись над значением, значение слева */
  .dl { grid-template-columns: 1fr; gap: 3px 0; }
  .dl dt { font-size: 12px; margin-top: 10px; }
  .dl dd { text-align: left; }

  /* Планировки: таблица уже карточная, поправляем плотность */
  .units-table tr { grid-template-columns: 54px repeat(2, minmax(0, 1fr)); padding: 12px 0; }
  .units-table tr:not(:has(> td:first-child:not([data-k]))) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ugroup { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ugroup__meta { gap: 12px; font-size: 12px; }

  /* Квиз и формы */
  .quiz__row { flex-direction: column; }
  .quiz__phone, .quiz__send { max-width: none; width: 100%; }
  .news__form { grid-template-columns: 1fr; }
  .promo__form { gap: 8px; }

  /* Ипотека: два ползунка в столбик */
  .calc__row-2 { grid-template-columns: 1fr; gap: 18px; }
  .calc__split { flex-direction: column; gap: 4px; }

  /* Ничего не должно вылезать за экран */
  img, iframe, canvas, video, table { max-width: 100%; }
  .shell, .m-search .searchbar { max-width: 100%; }

  /* ─── Прочее ─── */
  .quiz__opts { gap: 8px; }
  .promo { min-height: 0; }
  .cat-form__row { grid-template-columns: 1fr; }
  .loc-grid { gap: 12px; }
}

/* Совсем узкие экраны */
@media (max-width: 420px) {
  .m-rail { grid-auto-columns: 84vw; }
  .hero__facts { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════ МОБИЛЬНОЕ МЕНЮ ═══════════════ */

/* Пункты были набраны в 25.6px и занимали по 68px: девять штук съедали
   612px из семисот, последний упирался в нижний край, а до языка,
   валюты и контактов приходилось листать. Размер здесь витринный,
   а меню — навигация: важнее, сколько видно сразу. */
.mmenu__link { font-size: clamp(1.15rem, 4.6vw, 1.45rem); padding: 9px 0; }
.mmenu__link small { font-size: .68rem; }

.mmenu__set { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
.mmenu__set-t {
  display: block; margin: 16px 0 8px;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(244,241,234,.45);
}
.mmenu__set-t:first-child { margin-top: 0; }

/* Связь: главное действие с телефона — крупные кнопки под пальцем */
.mmenu__act { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.mmenu__wa, .mmenu__call {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 12px; border-radius: 3px;
  font-size: 14px; letter-spacing: .02em;
}
.mmenu__wa { background: var(--wa); color: #fff; }
.mmenu__wa svg { width: 18px; height: 18px; }
.mmenu__call { border: 1px solid rgba(244,241,234,.3); color: var(--sand); white-space: nowrap; }
@media (max-width: 400px) { .mmenu__act { grid-template-columns: 1fr; } }

/* Выбор дизайна в панели предпросмотра */
.pvw__ico { display: grid; place-items: center; }
.pvw__ico svg { width: 15px; height: 15px; }
.pvw__st { display: grid; gap: 1px; }
.pvw__st b { font-weight: 500; }
.pvw__st i { font-style: normal; font-size: 11px; opacity: .5; }
[data-style-pick] { margin-left: auto; }
[data-scheme-pick] { margin-left: 0; }

/* Кто вошёл и переход в управление */
.pvw__who { display: inline-flex; align-items: center; gap: 7px; color: rgba(244,241,234,.6); }
.pvw__dot { width: 7px; height: 7px; border-radius: 50%; background: #3F7D54; flex: none; }
.pvw__adm {
  padding: 6px 12px; border-radius: 3px; font-size: 12.5px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: #F4F1EA;
}
.pvw__adm:hover { background: rgba(255,255,255,.18); }
.pvw__adm--out { background: none; border-color: transparent; color: rgba(244,241,234,.5); }
.pvw__adm--out:hover { color: #F4F1EA; background: none; }
@media (max-width: 900px) { .pvw__who { display: none; } }

/* Язычок возврата панели управления */
.pvw-back {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  z-index: 401; width: 42px; height: 22px; cursor: pointer;
  border: 0; border-radius: 0 0 6px 6px;
  background: #14130F; color: rgba(244,241,234,.7); font-size: 13px;
  line-height: 1; box-shadow: 0 6px 16px -8px rgba(0,0,0,.6);
}
.pvw-back:hover { color: #F4F1EA; }

/* Кнопка включения правки текстов в панели */
.pvw__adm--edit.is-on { background: var(--bronze); border-color: var(--bronze); color: #fff; }

/* Значение в карточке контакта: телефон и почта одной величины, но почта
   длиннее — даём ей уменьшаться по ширине карточки, а не вылезать. */
.contact-card .t-h3 {
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  line-height: 1.2; overflow-wrap: anywhere; hyphens: none;
}

/* ═══════════════ ВЫПАДАЮЩИЕ БЛОКИ: ЦВЕТА ЯВНО ═══════════════
   Панели живут внутри тёмной строки поиска и наследовали от неё белый
   текст. На светлом фоне панели он пропадал. Задаём цвета явно, чтобы
   любая цветовая схема оставалась читаемой. */
.suggest, .fsel__menu, .pop__panel, .pref__menu, .modal__box {
  background: var(--white);
  color: var(--ink);
}
.suggest *, .fsel__menu *, .pop__panel *, .pref__menu * { color: inherit; }

/* Второстепенные строки — приглушённым цветом схемы, а не прозрачным
   белым: на светлой панели прозрачный белый превращался в невидимый */
.suggest__s, .suggest__kind,
.pop__panel .u-dim, .pop__panel label,
.fsel__menu .u-dim { color: var(--muted); }

.suggest__group {
  background: var(--paper); color: var(--muted);
}
.suggest__item:hover, .suggest__item.is-cursor,
.fsel__i:hover, .pref__i:hover { background: var(--sand-deep); color: var(--ink); }

/* Поля внутри панелей: на тёмных схемах фон панели тёмный, поле должно
   следовать за ним, а не оставаться белым */
.pop__panel input, .pop__panel select,
.fsel__menu input {
  background: var(--paper); color: var(--ink); border-color: var(--line);
}
.pop__panel input::placeholder { color: var(--muted-2); }