/* ==========================================================================
   Стеклянный слой Madely Properties.

   Подключается после properties.css и переопределяет ключевые поверхности.
   Правила стекла:
     • подложка полупрозрачная, но не мутная — читаемость важнее эффекта;
     • одна тонкая светлая грань сверху, как на матовом стекле, а не рамка
       по всему периметру;
     • blur умеренный: сильное размытие превращает фон в кашу и выглядит дёшево;
     • тени мягкие и низкие по контрасту, без «пластикового» глянца.
   Там, где backdrop-filter не поддерживается, остаётся плотная подложка —
   текст не теряется.
   ========================================================================== */

:root {
  --glass-bg: rgba(255, 255, 255, .62);
  --glass-bg-strong: rgba(255, 255, 255, .82);
  --glass-edge: rgba(255, 255, 255, .85);
  --glass-line: rgba(20, 16, 14, .07);
  --glass-blur: 18px;
  --glass-shadow: 0 18px 48px -28px rgba(28, 18, 12, .55);
  --glass-shadow-lg: 0 34px 90px -46px rgba(28, 18, 12, .68);
  --hero-overlay: linear-gradient(180deg,
      rgba(16, 11, 8, .58) 0%,
      rgba(16, 11, 8, .40) 42%,
      rgba(16, 11, 8, .74) 100%);
}

[data-theme="dark"] {
  --glass-bg: rgba(22, 20, 19, .58);
  --glass-bg-strong: rgba(22, 20, 19, .8);
  --glass-edge: rgba(255, 255, 255, .14);
  --glass-line: rgba(255, 255, 255, .08);
  --glass-shadow: 0 18px 48px -28px rgba(0, 0, 0, .8);
  --glass-shadow-lg: 0 34px 90px -46px rgba(0, 0, 0, .9);
}

/* Общая заготовка: подложка + грань + тень. */
.glass,
.hero-search,
.catalogue-filters-panel,
.catalogue-map,
.lead-form,
.quiz,
.listing-card,
.article-card,
.review-card,
.term-card,
.property-facts,
.payment-stage,
.agent-box,
.property-price-box,
.property-developer-badge {
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
}

/* Модальное окно — исключение из стекла.
   Стекло уместно для карточки, лежащей поверх страницы: сквозь неё видно
   контекст, и это помогает. Диалог же выводится поверх затемнённой страницы и
   требует внимания только к себе — просвечивающий заголовок первого экрана
   сквозь форму делал текст нечитаемым. Поэтому подложка здесь плотная. */
.exit-popup-card {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow-lg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Внутри плотного диалога вторая стеклянная подложка не нужна: получалась
   карточка в карточке с двойной рамкой и двойной тенью. */
.exit-popup-card .lead-form,
.exit-popup-card .lead-form-compact {
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
}

.exit-popup-card .lead-form::before,
.exit-popup-card .lead-form-compact::before { content: none; }

/* Верхняя грань — то, что отличает стекло от простой полупрозрачности. */
.hero-search,
.lead-form,
.quiz,
.listing-card,
.article-card,
.property-price-box {
  position: relative;
}

.hero-search::before,
.lead-form::before,
.quiz::before,
.listing-card::before,
.article-card::before,
.property-price-box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-edge), transparent);
  pointer-events: none;
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
}

/* ── шапка ───────────────────────────────────────────────────────────────── */

.header {
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--glass-line);
}

/* ── первый экран ────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(82vh, 760px);
  padding: clamp(96px, 12vh, 150px) 0 clamp(40px, 6vh, 72px);
  background: var(--c-dark);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Небольшое приближение прячет artefacts масштабирования по краям. */
  transform: scale(1.04);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hero-overlay);
}

/* Текст лежит на фотографии, поэтому цвета фиксированы и не зависят от темы. */
.hero-inner {
  gap: clamp(16px, 2.4vh, 26px);
  color: #fff;
  max-width: 1240px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 7px 14px;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-title {
  max-width: 20ch;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}

.hero-sub {
  max-width: 56ch;
  color: rgba(255, 255, 255, .88);
}

/* Поиск лежит прямо на фотографии. */
.hero-search {
  margin-top: clamp(10px, 2vh, 22px);
  padding: clamp(14px, 1.6vw, 20px);
  background: var(--glass-bg-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow-lg);
}

.hero-search-field > span { color: var(--c-subtle); }

/* Квиз лежит на фото, как первый экран, но форма остаётся читаемой. */
.quiz-photo-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-dark);
  padding-block: clamp(64px, 9vw, 112px);
}

.quiz-section-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  transform: scale(1.04);
}

.quiz-photo-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 22% 20%, rgba(255, 255, 255, .12), transparent 34%),
    linear-gradient(180deg, rgba(12, 10, 8, .42) 0%, rgba(12, 10, 8, .72) 100%);
}

.quiz-photo-section .container {
  position: relative;
  z-index: 0;
}

.quiz-photo-section .quiz {
  background: rgba(255, 255, 255, .84);
  border-color: rgba(255, 255, 255, .62);
  box-shadow: 0 30px 80px -42px rgba(0, 0, 0, .75);
}

[data-theme="dark"] .quiz-photo-section .quiz {
  background: rgba(15, 14, 13, .82);
  border-color: rgba(255, 255, 255, .12);
}

.hero-stats {
  margin-top: clamp(14px, 2.5vh, 30px);
  color: #fff;
}

.hero-stats li {
  padding-inline-start: 16px;
  border-inline-start-color: rgba(255, 255, 255, .5);
}

.hero-stats strong { color: #fff; }
.hero-stats span { color: rgba(255, 255, 255, .74); }

/* ── лента застройщиков внутри первого экрана ────────────────────────────── */

.hero-developers {
  margin-top: clamp(18px, 3vh, 34px);
  padding-top: clamp(14px, 2vh, 22px);
  border-top: 1px solid rgba(255, 255, 255, .18);
}

.hero-developers .developer-strip-label {
  color: rgba(255, 255, 255, .68);
  margin-bottom: 12px;
}

.hero-developers .developer-strip a {
  background: #5c6063;
  border-color: rgba(0, 0, 0, .08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hero-developers .developer-strip a:hover {
  background: #696d70;
  border-color: rgba(0, 0, 0, .18);
}

.hero-developers .developer-strip img {
  filter: none;
  opacity: 1;
}

.hero-developers .developer-strip a:hover img { opacity: 1; }

[data-theme="dark"] .hero-developers .developer-strip a {
  background: #050505;
  border-color: rgba(255, 255, 255, .12);
}

[data-theme="dark"] .hero-developers .developer-strip a:hover {
  background: #0c0c0c;
  border-color: rgba(255, 255, 255, .24);
}

/* ── слайдер: перелистывание точками, без полосы прокрутки ───────────────── */

.slider { position: relative; }

.slider-track {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  /* Полосу убираем: листаем точками и стрелками. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.slider-track::-webkit-scrollbar { display: none; }

.slider-track > li { flex: 0 0 auto; scroll-snap-align: start; }

.slider-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.slider-dot {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 50%;
  opacity: 1;
  transition: opacity var(--transition), transform var(--transition);
}

.slider-dot:hover { opacity: .6; }

.slider-dot[aria-current="true"] {
  opacity: 1;
}

.hero-developers .slider-dots { color: #fff; }

/* ── карточки: усиливаем стекло и приближение фото ───────────────────────── */

.listing-card:hover,
.article-card:hover {
  box-shadow: var(--glass-shadow-lg);
  border-color: color-mix(in srgb, var(--c-primary) 40%, transparent);
}

.listing-card-media img { transition: transform 500ms cubic-bezier(.2, .7, .3, 1); }
.listing-card:hover .listing-card-media img { transform: scale(1.06); }

/* ── кнопка WhatsApp в фирменном цвете ───────────────────────────────────── */

.wa-fab {
  color: #fff;
  background: var(--c-primary);
  box-shadow: 0 14px 34px -14px rgba(199, 123, 92, .8);
}

.wa-fab:hover { background: var(--c-primary-h); transform: scale(1.06); }

/* ── формы ───────────────────────────────────────────────────────────────── */

/* Поле сообщения тянется только по вертикали и не выше разумного: иначе
   форма выпадает из липкой колонки и её кнопка уезжает за экран. */
.lead-form textarea {
  resize: vertical;
  max-height: 220px;
}

@media (prefers-reduced-motion: reduce) {
  .slider-track { scroll-behavior: auto; }
  .listing-card:hover .listing-card-media img { transform: none; }
}

/* Прозрачность съедает контраст — при запросе на его повышение убираем её. */
@media (prefers-contrast: more) {
  :root {
    --glass-bg: var(--c-surface);
    --glass-bg-strong: var(--c-surface);
  }

  .glass, .hero-search, .catalogue-filters-panel, .catalogue-map, .lead-form, .quiz,
  .listing-card, .article-card, .review-card, .exit-popup-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ==========================================================================
   Impeccable public polish pass
   ========================================================================== */

:root {
  --c-accent: var(--c-primary);
  --c-accent-h: var(--c-primary-h);
  --c-ink-soft: #15191b;
  --c-cool-surface: #f3f8f7;
  --c-cool-line: #ecd7cd;
  --glass-bg: rgba(255, 255, 255, .76);
  --glass-bg-strong: rgba(255, 255, 255, .9);
  --glass-shadow: 0 22px 58px -38px rgba(24, 32, 34, .45);
  --glass-shadow-lg: 0 36px 92px -48px rgba(20, 28, 31, .58);
  --hero-overlay:
    radial-gradient(80% 100% at 82% 12%, rgba(199, 123, 92, .22), transparent 54%),
    linear-gradient(90deg, rgba(9, 13, 15, .78) 0%, rgba(9, 13, 15, .52) 48%, rgba(9, 13, 15, .7) 100%),
    linear-gradient(180deg, rgba(9, 13, 15, .22) 0%, rgba(9, 13, 15, .78) 100%);
}

[data-theme="dark"] {
  --c-accent: #c77b5c;
  --c-accent-h: #de9678;
  --c-cool-surface: #0d1414;
  --c-cool-line: rgba(199, 123, 92, .22);
  --glass-bg: rgba(18, 21, 22, .72);
  --glass-bg-strong: rgba(18, 21, 22, .88);
}

body {
  background:
    linear-gradient(180deg, rgba(255, 251, 247, .98) 0%, rgba(243, 248, 247, .72) 44%, var(--c-bg) 100%);
}

[data-theme="dark"] body {
  background:
    linear-gradient(180deg, #060808 0%, #0d1111 48%, var(--c-bg) 100%);
}

.section-muted {
  background:
    linear-gradient(180deg, var(--c-cool-surface), color-mix(in srgb, var(--c-cool-surface) 52%, var(--c-bg)));
}

.header-inner { min-height: 76px; }

.header-nav a,
.header-nav button.nav-link,
.btn-lang,
.theme-toggle,
.header-cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.header-nav a,
.header-nav button.nav-link {
  padding-inline: 2px;
}

.menu-toggle {
  width: 46px;
  height: 46px;
  place-items: center;
  gap: 4px;
  align-content: center;
  grid-template-rows: repeat(3, 1.5px);
  border-radius: 14px;
  background: var(--glass-bg-strong);
  box-shadow: 0 14px 32px -26px rgba(0, 0, 0, .45);
}

/* Полоски раскладывает грид с зазором 4px, поэтому до центра каждой ровно
   5.5px (1.5px сама полоска + 4px зазор) — столько и сдвигает .is-open. Но в
   madely.css им задан ещё и margin: 4px 0, из-за чего настоящий шаг был
   9.5px: полоски не доезжали до середины и вместо креста получался
   перекошенный значок, обрезанный краем кнопки. */
.menu-toggle span { margin: 0; }

.menu-toggle.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.menu-toggle span { transition: transform .2s ease, opacity .2s ease; }

.mobile-nav {
  display: flex;
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
  width: min(480px, calc(100% - 24px));
  margin-inline: auto;
  max-height: calc(100dvh - var(--header-height, 96px) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 12px;
  border: 1px solid var(--glass-line);
  border-radius: 22px;
  /* Панель сплошная, без backdrop-filter. Фильтр здесь вложен в такой же у
     .header: размывать внутреннему уже нечего (родитель создаёт backdrop
     root), а в Chrome он вдобавок ломает отрисовку собственного фона —
     сквозь меню просвечивал первый экран, и пункты читались поверх
     заголовка «Tomorrow's Landmark». */
  background: var(--c-surface);
  box-shadow: var(--glass-shadow-lg);
}

.mobile-nav[hidden] { display: none; }
.mobile-nav > * { flex-shrink: 0; }
.mobile-nav-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}
.mobile-nav .mobile-nav-links a {
  min-width: 0;
  padding: 10px 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.mobile-nav-links a[aria-current="page"] {
  color: var(--c-text);
  background: var(--c-bg-card);
  font-weight: 700;
}
.mobile-nav .mobile-nav-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.mobile-control-currency { grid-column: 1 / -1; }
.mobile-currency-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
.mobile-nav .mobile-currency-options button {
  justify-content: center;
  padding-inline: 4px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
}
.mobile-nav .mobile-currency-options button.active {
  color: var(--c-text);
  border-color: var(--c-primary);
  background: var(--c-bg-card);
  font-weight: 700;
}
.header :is(a, button):focus-visible,
.mobile-lang-sheet :is(a, button):focus-visible {
  outline: 2px solid var(--c-text);
  outline-offset: 3px;
}

.mobile-nav a,
.mobile-nav button {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 14px;
}

.mobile-nav a:hover,
.mobile-nav button:hover {
  color: var(--c-text);
  background: color-mix(in srgb, var(--c-accent) 10%, transparent);
}

.hero {
  min-height: clamp(520px, calc(100svh - 76px), 720px);
  align-items: center;
  padding-block: clamp(64px, 9vh, 104px) clamp(30px, 5vh, 56px);
}

.hero-bg {
  object-position: center 46%;
  filter: saturate(1.04) contrast(1.04);
}

.hero > .container {
  position: relative;
  z-index: 1;
}

.hero-inner {
  max-width: 1120px;
  gap: clamp(16px, 2.2vh, 24px);
}

.hero > .hero-inner > .hero-eyebrow,
.hero .hero-inner > .hero-eyebrow,
.home-photo-cta .hero-eyebrow {
  display: none;
}

.hero-title {
  max-width: 17ch;
  font-size: clamp(2.45rem, 5.6vw, 4.9rem);
  letter-spacing: 0;
}

.hero-sub {
  max-width: 58ch;
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
}

.hero-search {
  width: min(100%, 1030px);
  grid-template-columns: minmax(190px, 1.18fr) minmax(150px, .82fr) minmax(170px, .9fr) auto;
  align-items: stretch;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
}

.hero-search-field {
  min-height: 62px;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--c-cool-surface) 72%, #fff);
}

.hero-search-field select,
.hero-search-field input {
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.hero-search .btn {
  min-width: 158px;
  height: auto;
  justify-content: center;
  border-radius: 13px;
  background: var(--c-primary);
}

.hero-search .btn:hover { background: var(--c-primary-h); }

.hero-stats {
  max-width: 800px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.hero-stats li {
  min-height: 82px;
  justify-content: center;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-stats strong {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
}

.slider { overflow: hidden; }
.slider-track {
  max-width: 100%;
  mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}

.slider-dot {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  background: transparent;
  color: currentColor;
  opacity: 1;
}

.slider-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: .34;
  transform-origin: center;
  transition: transform var(--transition), opacity var(--transition);
}

.slider-dot[aria-current="true"]::before {
  transform: scaleX(2.75);
  opacity: 1;
}

.listing-card,
.article-card,
.review-card,
.term-card,
.home-feature,
.home-step-grid li,
.home-contact-panel {
  border-radius: 16px;
  border-color: rgba(20, 28, 31, .08);
  box-shadow: 0 22px 58px -44px rgba(24, 32, 34, .55);
}

.listing-card,
.article-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .72));
}

.listing-card-media { aspect-ratio: 4 / 3; }
.listing-card-body { padding: 18px 18px 20px; gap: 10px; }
.listing-card-area { color: var(--c-accent); }
.listing-card-title { font-size: 1.12rem; color: var(--c-text); }
.listing-card-footer { gap: 12px; }
.listing-card-developer {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.article-card > a {
  min-height: 0;
  flex: 0 0 auto;
}
.article-card h2,
.article-card h3 {
  padding-inline: 20px;
  font-size: 1.08rem;
}

.article-card img,
.article-card img.img-fade:not(.loaded),
.listing-card-media img.img-fade:not(.loaded) {
  opacity: 1;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--c-accent) 20%, transparent), transparent 48%),
    linear-gradient(180deg, color-mix(in srgb, var(--c-primary) 12%, #fff), var(--c-cool-surface));
}

.article-card:not(:has(img)) > a::before {
  content: "";
  display: block;
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--c-accent) 18%, transparent), transparent 52%),
    linear-gradient(180deg, color-mix(in srgb, var(--c-primary) 18%, #fff), var(--c-cool-surface));
}

.article-card-meta {
  padding-inline: 20px;
  margin-top: auto;
}

.home-photo-cta {
  border-radius: 18px;
  box-shadow: 0 34px 90px -52px rgba(0, 0, 0, .7);
}

.home-photo-cta-body {
  display: grid;
  gap: clamp(12px, 1.5vw, 16px);
  padding-bottom: clamp(34px, 5vw, 54px);
  transform: translateY(clamp(-12px, -.9vw, -7px));
}

.home-photo-cta h2 {
  line-height: 1.05;
}

.home-photo-cta-body > p:not(.hero-eyebrow) {
  margin: 0;
  font-family: var(--font-serif);
  line-height: 1.58;
}

.home-photo-cta .home-actions {
  margin-top: 2px;
}

.home-photo-cta .btn-ghost {
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 13px;
  box-shadow: 0 18px 38px -26px rgba(0, 0, 0, .7);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .42);
  backdrop-filter: blur(10px) saturate(145%);
  -webkit-backdrop-filter: blur(10px) saturate(145%);
}

.home-photo-cta .btn-ghost:hover,
.home-photo-cta .btn-ghost:focus-visible {
  color: var(--c-text);
  background: rgba(255, 255, 255, .92);
  border-color: rgba(255, 255, 255, .92);
  text-shadow: none;
}

.home-photo-cta::after {
  background:
    radial-gradient(90% 80% at 88% 12%, rgba(199, 123, 92, .2), transparent 56%),
    linear-gradient(90deg, rgba(5, 8, 9, .78), rgba(5, 8, 9, .42) 66%, rgba(5, 8, 9, .68)),
    linear-gradient(180deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, .76));
}

.home-photo-cta .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .42);
  background: rgba(5, 8, 9, .42);
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 13px;
  box-shadow: 0 16px 38px -28px rgba(0, 0, 0, .88);
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
}

.home-photo-cta .btn-ghost:hover,
.home-photo-cta .btn-ghost:focus-visible {
  color: #16110f;
  text-shadow: none;
  background: rgba(255, 255, 255, .92);
  border-color: rgba(255, 255, 255, .72);
}

/* Обе кнопки карточки одной формы: базовый .btn-primary — таблетка. */
.home-photo-cta .btn-primary {
  border-radius: 13px;
}

.home-feature,
.home-step-grid li {
  min-height: 230px;
  background:
    linear-gradient(180deg, var(--c-surface), color-mix(in srgb, var(--c-cool-surface) 36%, var(--c-surface)));
}

.home-feature-kicker,
.home-step-grid span {
  color: var(--c-accent);
  background: color-mix(in srgb, var(--c-accent) 13%, var(--c-surface));
}

.catalogue-tabs a {
  min-height: 44px;
  align-items: center;
}

.home-area-section {
  position: relative;
  padding-bottom: clamp(58px, 7vw, 92px);
  border-bottom: 1px solid color-mix(in srgb, var(--c-primary) 18%, var(--c-border));
  box-shadow: inset 0 -24px 44px -42px rgba(13, 38, 33, .32);
}

.home-area-section::after {
  content: "";
  position: absolute;
  left: max(20px, calc((100% - 1240px) / 2));
  right: max(20px, calc((100% - 1240px) / 2));
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-primary) 42%, transparent), transparent);
}

.home-area-section + .home-expertise-section {
  padding-top: clamp(64px, 8vw, 108px);
}

.catalogue-filters-panel,
.catalogue-map {
  border-radius: 18px;
}

.pagination {
  max-width: 100%;
  flex-wrap: wrap;
  overflow: hidden;
}

.pagination-link {
  min-width: 44px;
  min-height: 44px;
}

.pagination-gap {
  min-width: 20px;
  text-align: center;
}

.footer {
  background:
    linear-gradient(180deg, var(--c-bg), color-mix(in srgb, var(--c-cool-surface) 68%, var(--c-bg)));
}

.footer-inner {
  row-gap: 20px;
}

.footer-links {
  align-items: center;
  gap: 4px 18px;
}

.footer-links a,
.footer-link-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: 4px;
}

.breadcrumbs a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

.property-gallery-more { min-height: 44px; }

.contact-card a,
.social-links a,
.contact-details a,
.section-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

@media (pointer: coarse) {
  .listing-card-developer,
  .breadcrumbs a,
  .footer-links a,
  .footer-link-btn {
    min-height: 44px;
  }
}

@media (max-width: 900px) {
  .hero {
    min-height: auto;
    align-items: center;
    padding-block: 88px 38px;
  }

  .hero-title {
    max-width: 13ch;
    font-size: clamp(2.35rem, 12vw, 4rem);
  }

  .hero-search,
  .hero-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-stats li {
    min-height: 72px;
  }

  .hero-developers {
    margin-top: 16px;
  }
}

@media (max-width: 560px) {
  .hero {
    padding-block: 74px 30px;
  }

  .hero-title {
    font-size: clamp(2.15rem, 12vw, 3.2rem);
    letter-spacing: -0.02em;
  }

  .hero-sub {
    font-size: 1rem;
  }

  .hero-search {
    padding: 8px;
    border-radius: 16px;
  }

  .hero-search .btn {
    min-height: 52px;
    width: 100%;
  }

  .section-head {
    align-items: flex-start;
  }

  .section-link {
    white-space: normal;
  }

  .article-grid,
  .listing-grid,
  .review-grid {
    gap: 18px;
  }

  .footer-inner {
    padding-inline: 28px;
  }
}

/* ── карточка объекта: галерея, карта, липкая колонка ────────────────────── */

.property-gallery { gap: 10px; }

.property-gallery-item {
  padding: 0;
  border: 0;
  cursor: zoom-in;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-bg-card);
}

.property-gallery-item img {
  transition: transform 500ms cubic-bezier(.2, .7, .3, 1);
}

/* Приближение подсказывает, что кадр кликабелен. */
.property-gallery-item:hover img,
.property-gallery-item:focus-visible img { transform: scale(1.06); }

.property-gallery-item:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}

.property-gallery-count {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 1.5rem;
  color: #fff;
  background: rgba(16, 11, 8, .5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.property-gallery-item { position: relative; }

.property-gallery-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 28px;
  padding: 10px 18px;
  cursor: pointer;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.property-map {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 9;
}

.property-map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Консультант стоит, цена и форма приклеиваются ниже. */
.property-aside { position: static; display: flex; flex-direction: column; gap: 14px; }

.property-aside-sticky {
  position: sticky;
  inset-block-start: 92px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.property-price-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
}

.property-price-box strong {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.1;
}

.property-price-note {
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--c-subtle);
}

.agent-box { align-items: center; padding: 16px 18px; border-radius: var(--radius-lg); }
.agent-box-photo { width: 64px; height: 108px; }
.agent-box-info { display: flex; flex-direction: column; gap: 2px; }
.agent-box-langs { font-size: 0.78rem; color: var(--c-subtle); }

.agent-box-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.82rem;
}

/* Раньше это были две голые ссылки цветом акцента, стоящие вплотную к тексту
   должности — блок выглядел незакончённым. Теперь такие же таблетки со
   значком, как в карточках команды. */
.agent-box-links a {
  min-height: 36px;
  padding: 0 13px;
  gap: 7px;
  color: var(--c-text);
  font-weight: 600;
  text-decoration: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  transition: border-color var(--transition), color var(--transition),
              background var(--transition);
}

.agent-box-links a svg { width: 14px; height: 14px; flex: none; }

.agent-box-links a:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
  text-decoration: none;
}

.agent-box-links a.is-wa {
  border-color: color-mix(in srgb, var(--c-primary) 45%, transparent);
  background: var(--c-mint-light);
  color: var(--c-mint-fg);
}

.agent-box-links a.is-wa:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

/* ── просмотр фотографий ─────────────────────────────────────────────────── */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  background: rgba(10, 7, 5, .92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lightbox[hidden] { display: none; }

.lightbox-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 24px 0;
  height: 100dvh;
  max-height: 100vh;
  min-width: 0;
  overflow: hidden;
  touch-action: pan-y;
}

.lightbox-stage::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .18);
  border-top-color: rgba(255, 255, 255, .82);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  animation: lightboxSpin 850ms linear infinite;
}

.lightbox.is-loading .lightbox-stage::before {
  opacity: 1;
}

.lightbox-stage img {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  max-width: 100%;
  max-height: calc(100vh - 96px);
  object-fit: contain;
  border-radius: var(--radius);
  opacity: 1;
  transform: translate(-50%, -50%);
  transition:
    transform 300ms cubic-bezier(.22,.61,.36,1),
    opacity 220ms ease;
  will-change: transform, opacity;
}

.lightbox-counter {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, .7);
  font-variant-numeric: tabular-nums;
}

@keyframes lightboxSpin {
  to { transform: rotate(360deg); }
}

.lightbox-nav,
.lightbox-close {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  font-size: 1.7rem;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  transition: background var(--transition);
}

.lightbox-nav:hover, .lightbox-close:hover { background: rgba(255, 255, 255, .24); }

.lightbox-close {
  position: absolute;
  inset-block-start: 18px;
  inset-inline-end: 18px;
  z-index: 1;
}

@media (max-width: 720px) {
  /* Одна колонка вместо трёх. Раньше сцена растягивалась на всю ширину
     (grid-column: 1 / -1), а стрелки оставались обычными элементами сетки и
     уезжали в отдельные ряды над и под снимком — отсюда кнопки «где попало».
     Теперь они лежат поверх кадра по его краям. */
  .lightbox { grid-template-columns: minmax(0, 1fr); }
  .lightbox-nav, .lightbox-close { width: 38px; height: 38px; font-size: 1.4rem; }
  .lightbox-stage { grid-column: 1 / -1; padding-inline: 14px; }
  .lightbox-stage img {
    max-width: calc(100vw - 28px);
    max-height: calc(100dvh - 92px);
  }
  .lightbox-nav {
    position: absolute;
    inset-block-start: 50%;
    z-index: 2;
    transform: translateY(-50%);
  }
  .lightbox-nav.is-prev { inset-inline-start: 10px; }
  .lightbox-nav.is-next { inset-inline-end: 10px; }
  .property-aside-sticky { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox-stage::before {
    animation: none;
  }

  .lightbox-stage img {
    transition: none;
  }
}

/* ── пагинация ───────────────────────────────────────────────────────────── */

.pagination-link {
  min-width: 44px;
  width: auto;
  padding: 0 12px;
  font-variant-numeric: tabular-nums;
  background: var(--glass-bg);
  border-color: var(--glass-line);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.pagination-link.is-current {
  color: #fff;
  background: var(--c-primary);
  border-color: transparent;
}

.pagination-link.is-disabled { opacity: .35; pointer-events: none; }

.pagination-gap { color: var(--c-subtle); padding: 0 2px; }

/* ── удобства со значками ────────────────────────────────────────────────── */

.amenity-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px 22px;
}

.amenity-grid li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  color: var(--c-text);
  font-size: 0.9rem;
}

.amenity-grid li::before { content: none; }

.amenity-icon {
  flex: 0 0 auto;
  color: var(--c-primary);
}

.section-count {
  margin-inline-start: 8px;
  padding: 2px 9px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--c-mint-fg);
  background: var(--c-warm);
  border-radius: var(--radius-pill);
  vertical-align: middle;
}

.about-hero-photo {
  border-bottom: 1px solid color-mix(in srgb, var(--c-primary) 16%, var(--c-border));
  box-shadow: inset 0 -64px 86px -92px rgba(13, 38, 33, .72);
}

.about-page .header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 300;
  background: rgba(255, 255, 255, .66);
  border-bottom-color: rgba(229, 219, 207, .38);
  box-shadow: 0 20px 54px -48px rgba(16, 24, 24, .42);
}

.about-page .header.is-scrolled {
  background: rgba(255, 255, 255, .8);
}

.about-page .about-video-hero {
  min-height: 100svh;
  align-items: center;
  padding-block: clamp(112px, 17vh, 168px) clamp(76px, 11vh, 128px);
  background: #050605;
}

.about-page .about-video-hero::after {
  background:
    linear-gradient(180deg, rgba(5, 6, 5, .28) 0%, rgba(5, 6, 5, .18) 42%, rgba(5, 6, 5, .7) 100%),
    linear-gradient(90deg, rgba(5, 6, 5, .56), rgba(5, 6, 5, .08) 52%, rgba(5, 6, 5, .52));
}

.about-page .about-hero-video {
  display: block;
  object-position: center;
  filter: saturate(1.03) contrast(1.08) brightness(.82);
  transform: scale(1.08);
  pointer-events: none;
  background: #050605;
}

.about-page .about-hero-video::-webkit-media-controls {
  display: none !important;
}

.about-page .about-video-hero-inner {
  align-items: center;
  max-width: 1080px;
  color: #fff;
  text-align: center;
}

.about-page .about-video-hero .hero-title {
  max-width: min(920px, calc(100vw - 48px));
  color: #fff;
  font-size: clamp(2.45rem, 5.1vw, 4.35rem);
  font-weight: 780;
  line-height: 1.06;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow: 0 8px 22px rgba(0, 0, 0, .34);
}

.about-page .about-video-hero .hero-sub {
  max-width: 62ch;
  color: rgba(255, 255, 255, .88);
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: 1.58;
  text-shadow: 0 12px 34px rgba(0, 0, 0, .42);
}

.about-page .about-video-hero .hero-prose {
  max-width: 68ch;
  margin-top: clamp(8px, 1.5vh, 18px);
  color: rgba(255, 255, 255, .84);
  font-size: clamp(.98rem, 1.05vw, 1.08rem);
  line-height: 1.68;
  text-shadow: 0 12px 34px rgba(0, 0, 0, .44);
}

.about-page .about-video-hero .hero-prose :is(p, ul, ol) {
  color: inherit;
}

.about-page .about-video-hero .hero-prose a {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, .48);
  text-underline-offset: 4px;
}

.about-team-intro.team-intro {
  padding-block: clamp(44px, 5vw, 68px) clamp(34px, 4vw, 54px);
  border-bottom: 1px solid color-mix(in srgb, var(--c-primary) 18%, var(--c-border));
}

.about-team-intro .section-head {
  margin-bottom: clamp(18px, 2vw, 26px);
}

.about-team-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: min(980px, 100%);
  margin-inline: auto;
}

.about-team-nav a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 7px 10px 7px 15px;
  color: var(--c-text);
  text-decoration: none;
  background: color-mix(in srgb, var(--c-surface) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-border) 86%, transparent);
  border-radius: var(--radius-pill);
  transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition);
}

.about-team-nav a:hover,
.about-team-nav a:focus-visible {
  color: var(--c-primary-h);
  background: color-mix(in srgb, var(--c-primary) 10%, var(--c-surface));
  border-color: color-mix(in srgb, var(--c-primary) 36%, var(--c-border));
  outline: none;
  transform: translateY(-1px);
}

.about-team-nav strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 25px;
  height: 25px;
  padding-inline: 7px;
  color: var(--c-mint-fg);
  font-size: .76rem;
  line-height: 1;
  background: var(--c-mint-light);
  border-radius: var(--radius-pill);
}

.about-department-section {
  position: relative;
  scroll-margin-top: 96px;
}

.about-department-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: max(20px, calc((100% - 1240px) / 2));
  right: max(20px, calc((100% - 1240px) / 2));
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-primary) 28%, var(--c-border)), transparent);
}

/* Заголовок отдела стоит НАД карточками и по центру, а не сбоку: в боковой
   колонке длинные названия («Administration») и подписи налезали на фотографии
   на промежуточных ширинах. */
.about-department-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 34px);
  justify-items: center;
}

.about-department-head {
  display: grid;
  justify-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  text-align: center;
}

.about-department-head > div {
  min-width: 0;
}

.about-department-head h2 {
  font-size: clamp(1.9rem, 2.8vw, 2.9rem);
  line-height: 1.06;
}

.about-department-head .section-sub {
  max-width: 52ch;
  margin: 9px auto 0;
  line-height: 1.5;
}

.about-department-head .section-count {
  justify-self: center;
  margin-inline-start: 0;
  padding: 6px 11px;
  font-size: .74rem;
}

/* Flex, not grid: an incomplete last row (e.g. 1 card after 3) must sit in
   the middle, and a grid track layout pins it to the left. */
.about-department-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  gap: clamp(18px, 2vw, 26px);
}

.about-department-grid .team-card {
  flex: 0 0 auto;
  width: 300px;
  max-width: 100%;
  border-radius: 16px;
}

@media (max-width: 900px) {
  .about-department-section {
    padding-block: clamp(50px, 11vw, 72px);
  }

  .about-department-layout {
    gap: 20px;
  }

  .about-department-head {
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--c-primary) 18%, var(--c-border));
  }

  .about-department-head h2 {
    font-size: clamp(1.7rem, 7vw, 2.35rem);
  }

  .about-department-head .section-sub {
    max-width: 42ch;
  }

  .about-department-grid .team-card {
    width: min(100%, 340px);
  }
}

@media (max-width: 560px) {
  .about-team-intro.team-intro {
    padding-block: 38px 30px;
  }

  .about-team-nav {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-padding-inline: 2px;
    -webkit-overflow-scrolling: touch;
  }

  .about-team-nav a {
    flex: 0 0 auto;
  }

  .about-department-head {
    padding-bottom: 14px;
  }
}

/* ── архивы районов и застройщиков ───────────────────────────────────────── */

.term-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.term-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.term-card > a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }

.term-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-bg-card);
}

.term-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(.2, .7, .3, 1);
}

.term-card:hover .term-card-media img { transform: scale(1.06); }

.term-card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  padding: 22px;
  background: var(--c-surface-soft);
}

.term-card-logo img {
  display: block;
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}

.term-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px 16px;
}

.term-card-body strong { font-size: 1rem; }
.term-card-body span { font-size: 0.82rem; color: var(--c-subtle); }

.term-search {
  display: flex;
  gap: 10px;
  margin-bottom: clamp(20px, 3vw, 30px);
}

.term-search input {
  width: 100%;
  max-width: 420px;
  min-height: 44px;
  padding: 10px 14px;
  font: inherit;
  color: var(--c-text);
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.term-search input:focus-visible {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-mint-light);
}

/* ── текст статьи ────────────────────────────────────────────────────────── */

.article-body {
  font-size: 1.06rem;
  line-height: 1.78;
}

.article-body > p:first-of-type {
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--c-text);
}

.article-body h2 {
  margin: 1.9em 0 .5em;
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.22;
}

.article-body h3 {
  margin: 1.5em 0 .4em;
  font-size: 1.14rem;
  font-weight: 600;
}

.article-body ul { margin: 0 0 1.2em; padding-inline-start: 0; list-style: none; }

.article-body ul li {
  position: relative;
  margin-bottom: .55em;
  padding-inline-start: 22px;
}

.article-body ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-primary);
}

.article-body strong { font-weight: 650; color: var(--c-text); }

/* Врезка с ключевой мыслью. */
.article-body blockquote {
  margin: 1.6em 0;
  padding: 18px 22px;
  font-size: 1.06rem;
  line-height: 1.6;
  border: 1px solid color-mix(in srgb, var(--c-primary) 22%, var(--c-border));
  border-radius: var(--radius);
  background: var(--c-surface-soft);
}

.article-lead {
  margin: 0 0 1.4em;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--c-muted);
}

.admin-avatar {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 50%;
  background: var(--c-bg-card);
}

.admin-avatar.is-empty {
  display: grid;
  place-items: center;
  color: var(--c-subtle);
}

.admin-preview {
  width: 120px;
  border-radius: var(--radius);
  align-self: flex-start;
}

/* ══ правки после первого просмотра ═════════════════════════════════════ */

/* Экран был почти во всю высоту — заголовок с поиском уезжали под сгиб. */
.hero {
  min-height: min(62vh, 620px);
  padding: clamp(84px, 9vh, 118px) 0 clamp(28px, 4vh, 48px);
}

.hero-bg {
  /* Фон должен покрывать всю ширину даже на широких экранах: раньше кадр
     упирался в свою исходную ширину и справа оставалась полоса. */
  min-width: 100%;
  min-height: 100%;
  object-position: center 42%;
  transform: none;
}

.hero-title { font-size: clamp(1.9rem, 4.4vw, 3.2rem); max-width: 24ch; }
.hero-sub { font-size: clamp(.98rem, 1.2vw, 1.06rem); }
.hero-search { margin-top: clamp(8px, 1.4vh, 16px); }
.hero-stats { margin-top: clamp(12px, 2vh, 22px); }
.hero-developers { margin-top: clamp(14px, 2.2vh, 24px); padding-top: clamp(12px, 1.6vh, 18px); }
.hero-developers .developer-strip a { width: 122px; height: 62px; padding: 10px 14px; }

/* Логотипы показываем как есть — обесцвеченные читались как «выключенные». */
.hero-developers .developer-strip img {
  filter: none;
  opacity: 1;
  max-height: 42px;
}

.developer-strip img { filter: none; opacity: 1; }

.slider-track.developer-strip a {
  background: #5c6063;
  border-color: rgba(0, 0, 0, .08);
}

.slider-track.developer-strip a:hover {
  background: #696d70;
  border-color: rgba(0, 0, 0, .18);
}

[data-theme="dark"] .slider-track.developer-strip a {
  background: #050505;
  border-color: rgba(255, 255, 255, .12);
}

[data-theme="dark"] .slider-track.developer-strip a:hover {
  background: #0c0c0c;
  border-color: rgba(255, 255, 255, .24);
}

.slider-track.developer-strip img {
  background: transparent;
  padding: 0;
  filter: none;
  opacity: 1;
}

.slider-track.developer-strip a:hover img,
[data-theme="dark"] .slider-track.developer-strip img,
[data-theme="dark"] .slider-track.developer-strip a:hover img {
  filter: none;
  opacity: 1;
}

[data-theme="dark"] .slider-track.developer-strip a {
  background: #000;
  border-color: #202020;
}

[data-theme="dark"] .slider-track.developer-strip a:hover {
  background: #0b0b0b;
  border-color: #3a3a3a;
}

/* Услуги: шесть плиток ровно по три в ряд. */
.service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.service-card {
  position: relative;
  isolation: isolate;
  min-height: 168px;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
  border-color: transparent;
}

.service-card-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.2, .7, .3, 1);
}

.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(16, 11, 8, .18) 0%, rgba(16, 11, 8, .78) 100%);
}

.service-card:hover { color: #fff; background: none; }
.service-card:hover .service-card-bg { transform: scale(1.06); }
.service-card h3 { text-shadow: 0 1px 16px rgba(0, 0, 0, .5); }

@media (max-width: 900px) { .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .service-grid { grid-template-columns: 1fr; } }

/* Заглушка вместо чужого логотипа: у 57 застройщиков он был неоднозначным. */
.term-card-initial {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  font-family: var(--font-head);
  font-size: 1.8rem;
  color: var(--c-mint-fg);
  background: var(--c-warm);
  border-radius: 50%;
}

/* Логотип застройщика в архиве должен заполнять плашку, а не теряться. */
.term-card-logo {
  width: 100%;
  height: clamp(156px, 14vw, 188px);
  box-sizing: border-box;
  padding: 18px;
  aspect-ratio: auto;
  background: #4a4a4a;
  border-bottom: 1px solid #626262;
}

[data-theme="dark"] .term-card-logo {
  background: #000;
  border-bottom-color: #202020;
}

.term-card-logo img {
  filter: none;
  opacity: 1;
}

.term-card:hover .term-card-logo img,
[data-theme="dark"] .term-card-logo img {
  filter: none;
  opacity: 1;
}

.term-card-body {
  min-height: 104px;
}

.term-card-body strong {
  min-height: 2.5em;
  line-height: 1.25;
}

.term-card-logo img.logo-fit-square {
  width: auto;
  height: 100%;
}

.term-card-logo img.logo-fit-wide {
  width: 100%;
  height: auto;
}

.developer-term-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.developer-term-grid .term-card {
  border-radius: var(--radius-sm);
}

.developer-term-grid .term-card > a {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 98px;
  padding: 12px 14px;
}

.developer-term-grid .term-card-logo {
  width: 82px;
  height: 64px;
  padding: 10px;
  aspect-ratio: auto;
  background: #5c6063;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
}

[data-theme="dark"] .developer-term-grid .term-card-logo {
  background: #050505;
  border-color: rgba(255, 255, 255, .12);
}

.developer-term-grid .term-card-body {
  min-height: 0;
  padding: 0;
}

.developer-term-grid .term-card-body strong {
  min-height: 0;
}

/* ══ первый экран: ширина как на madelyhome, высота по экрану ═══════════ */

/* Фон — во всю ширину окна, независимо от того, во что вложена секция.
   Отрицательные поля безопасны: у html стоит overflow-x: clip, поэтому
   горизонтальной полосы прокрутки не появится. */
.hero {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;

  /* Высота тянется за окном и упирается в 1230 px на больших мониторах.
     Нижняя граница нужна, чтобы на невысоком ноутбуке заголовок, поиск и
     лента застройщиков помещались без обрезки. */
  min-height: min(700px, calc(100svh - 140px));

  display: flex;
  align-items: center;
  padding-block: clamp(58px, 7vh, 76px) clamp(30px, 4vh, 44px);
}

/* Контент — той же ширины, что и остальной сайт: 1280 px с полями по 40. */
.hero > .container,
.hero-inner {
  width: min(1240px, calc(100% - 2 * clamp(20px, 4vw, 48px)));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

/* На высоком экране заголовок может позволить себе больше. */
.hero-inner {
  align-items: flex-start;
  gap: clamp(12px, 1.8vh, 18px);
  text-align: start;
}

.hero-title { font-size: clamp(2.25rem, 4.2vw, 3.7rem); }
.hero-search,
.hero-stats,
.hero-developers {
  width: 100%;
  margin-top: 0;
}

@media (min-width: 1600px) {
  .hero-title { font-size: clamp(3rem, 3.4vw, 4rem); }
  .hero-sub { font-size: 1.14rem; }
}

/* Низкие окна: не растягиваем экран на всю высоту, иначе под сгибом
   не остаётся ничего, кроме шапки. */
@media (max-height: 700px) {
  .hero {
    min-height: auto;
    padding-block: clamp(66px, 10vh, 92px) clamp(24px, 4vh, 40px);
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding-block: clamp(52px, 8vh, 72px) 32px;
  }

  .hero-inner {
    align-items: center;
    gap: 14px;
    text-align: center;
  }

  .hero-title {
    font-size: clamp(2rem, 8vw, 2.7rem);
    max-width: 13ch;
  }

  .hero-sub { max-width: 34ch; }

  .hero-search {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
    border-radius: 20px;
  }

  .hero-search .btn {
    width: 100%;
    min-width: 0;
  }

  .hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .hero-stats li {
    padding-inline-start: 8px;
    text-align: start;
  }

  .hero-stats strong { font-size: clamp(1.25rem, 6vw, 1.7rem); }
  .hero-stats span { font-size: .72rem; }

  .hero-developers { display: none; }
}

@media (max-width: 360px) {
  .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Final public overrides: this file has legacy hero rules above, so keep the
   shipping pass last in the cascade. */
@media (max-width: 1380px) {
  .menu-toggle { display: grid; }
}

.hero {
  min-height: clamp(620px, 84vh, 820px);
  align-items: end;
  padding-block: clamp(112px, 14vh, 164px) clamp(42px, 7vh, 76px);
}

.hero > .container,
.hero-inner {
  width: min(1240px, calc(100% - 2 * clamp(20px, 4vw, 48px)));
}

.hero-inner {
  align-items: flex-start;
  text-align: start;
  gap: clamp(16px, 2.2vh, 24px);
}

.hero-title {
  max-width: 17ch;
  font-size: clamp(2.65rem, 6.4vw, 5.45rem);
  letter-spacing: -0.03em;
}

.hero-sub {
  max-width: 58ch;
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
}

.hero .hero-inner > .hero-eyebrow,
.home-photo-cta .hero-eyebrow {
  display: none;
}

.hero-search {
  grid-template-columns: minmax(190px, 1.18fr) minmax(150px, .82fr) minmax(170px, .9fr) auto;
  gap: 8px;
  padding: 8px;
  border-radius: 16px;
}

.hero-search-field {
  position: relative;
  min-height: 56px;
  gap: 2px;
  padding: 7px 12px;
  border-radius: 11px;
}

.hero-search-field select,
.hero-search-field input {
  width: 100%;
  min-height: 28px;
  color: var(--c-text);
  font-size: .95rem;
  font-weight: 650;
  line-height: 1.2;
  border: 0;
  border-radius: 0;
  outline: none;
  background-color: transparent;
  box-shadow: none;
}

.hero-search-field select {
  appearance: none;
  padding-inline: 0 30px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c77b5c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
}

.hero-search-field input::placeholder {
  color: var(--c-ph);
  font-weight: 600;
}

.hero-search .btn {
  min-height: 56px;
}

.hero-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.pagination {
  max-width: 100%;
  flex-wrap: wrap;
  overflow: hidden;
  padding-inline: 2px;
}

.pagination-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.header-nav a,
.header-nav button.nav-link {
  min-width: 44px;
  justify-content: center;
}

.slider-dot {
  width: 30px;
  height: 18px;
}

.slider-dot[aria-current="true"] {
  width: 38px;
}

.slider-dot::before {
  width: 14px;
  height: 3px;
  border-radius: 999px;
  transform: none;
  transition: opacity var(--transition), background-color var(--transition);
}

.slider-dot[aria-current="true"]::before {
  width: 30px;
  height: 3px;
  transform: none;
  background: var(--c-primary);
}

.listing-card-developer,
.breadcrumbs a,
.contact-item-body a,
.contact-socials-links a,
.footer-links a,
.footer-link-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.contact-item-body {
  gap: 0;
}

.contact-socials-links a {
  padding-block: 0;
}

.team-card-links .team-card-link,
.agent-box-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.article-card:not(:has(img)) {
  min-height: 208px;
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--c-accent) 18%, transparent), transparent 56%),
    linear-gradient(180deg, var(--c-surface), color-mix(in srgb, var(--c-cool-surface) 72%, var(--c-surface)));
}

.article-card:not(:has(img)) > a {
  position: relative;
  min-height: 176px;
  padding-top: 74px;
  justify-content: flex-end;
}

.article-card:not(:has(img)) > a::before {
  content: "";
  display: block;
  position: absolute;
  inset-block-start: 18px;
  inset-inline: 20px;
  height: 38px;
  aspect-ratio: auto;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--c-accent), color-mix(in srgb, var(--c-primary) 78%, #fff));
  box-shadow: 0 16px 34px -26px color-mix(in srgb, var(--c-accent) 60%, #000);
}

.article-card-no-image {
  min-height: auto;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--c-accent) 10%, transparent), transparent 48%),
    var(--c-surface);
}

.article-card-no-image > a {
  min-height: 0;
  padding-top: 0;
}

.article-card-no-image > a::before {
  content: none;
}

.article-card-no-image h2,
.article-card-no-image h3 {
  padding-top: 22px;
}

@media (max-width: 900px) {
  .hero {
    min-height: auto;
    align-items: center;
    padding-block: 88px 38px;
  }

  .hero-title {
    max-width: 13ch;
    font-size: clamp(2.35rem, 12vw, 4rem);
  }

  .hero-search {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-developers { display: none; }
}

@media (max-width: 560px) {
  .hero {
    padding-block: 74px 30px;
  }

  .hero-inner {
    align-items: flex-start;
    text-align: start;
  }

  .hero-title {
    max-width: 12ch;
    font-size: clamp(2.15rem, 12vw, 3.2rem);
    letter-spacing: -0.02em;
  }

  .hero-sub {
    max-width: 32ch;
    font-size: 1rem;
  }

  .hero-search {
    padding: 8px;
    border-radius: 16px;
  }

  .hero-search .btn {
    min-height: 52px;
    width: 100%;
  }
}

/* Dark theme contrast pass: solid elevation, not translucent gray. */
[data-theme="dark"] {
  --c-primary: #c77b5c;
  --c-primary-h: #de9678;
  --c-bg: #050706;
  --c-bg-card: #101514;
  --c-surface: #141918;
  --c-surface-soft: #0b0f0e;
  --c-border: rgba(238, 220, 204, .14);
  --c-header-bg: rgba(8, 10, 10, .84);
  --c-header-bg-scrolled: rgba(8, 10, 10, .94);
  --c-text: #f7f1e9;
  --c-muted: #d0c6bb;
  --c-subtle: #aca197;
  --c-ph: #91867d;
  --c-mint-light: rgba(199, 123, 92, .18);
  --c-mint-fg: #f0b49c;
  --c-warm: rgba(199, 123, 92, .18);
  --c-warm-fg: #f0b49c;
  --c-red-bg: rgba(239, 68, 68, .18);
  --c-red-fg: #ffc3c3;
  --c-accent: #c77b5c;
  --c-accent-h: #de9678;
  --c-cool-surface: #0b1211;
  --c-cool-line: rgba(199, 123, 92, .22);
  --glass-bg: rgba(18, 23, 22, .94);
  --glass-bg-strong: rgba(22, 27, 26, .97);
  --glass-edge: rgba(255, 238, 224, .22);
  --glass-line: rgba(238, 220, 204, .14);
  --glass-shadow: 0 24px 56px -38px rgba(0, 0, 0, .92);
  --glass-shadow-lg: 0 38px 94px -50px rgba(0, 0, 0, .96);
}

[data-theme="dark"] body {
  background:
    linear-gradient(180deg, #060807 0%, #0a1110 46%, #050706 100%);
}

[data-theme="dark"] .section-muted {
  background:
    linear-gradient(180deg, #0a1110 0%, #070b0a 100%);
}

.hero-title {
  letter-spacing: 0;
}

[data-theme="dark"] .header,
[data-theme="dark"] .mobile-nav,
[data-theme="dark"] .search-sticky-bar {
  background: var(--c-header-bg);
  border-color: var(--glass-line);
}

[data-theme="dark"] .mobile-nav {
  background: rgba(16, 20, 19, .98);
}

[data-theme="dark"] .hero-search,
[data-theme="dark"] .catalogue-filters-panel,
[data-theme="dark"] .catalogue-map,
[data-theme="dark"] .lead-form,
[data-theme="dark"] .quiz,
[data-theme="dark"] .property-price-box,
[data-theme="dark"] .agent-box,
[data-theme="dark"] .property-developer-badge {
  background: var(--glass-bg-strong);
  border-color: var(--glass-line);
  box-shadow: var(--glass-shadow-lg);
}

/* Тёмное правило выше по файлу пересиливало исключение для диалога, и внутри
   окна при уходе снова появлялась карточка в карточке — со своей рамкой и
   тенью. Повторяем исключение здесь. */
[data-theme="dark"] .exit-popup-card .lead-form,
[data-theme="dark"] .exit-popup-card .lead-form-compact {
  background: none;
  border: 0;
  box-shadow: none;
}

[data-theme="dark"] .hero-search-field,
[data-theme="dark"] .filter,
[data-theme="dark"] .quiz-option,
[data-theme="dark"] .quiz-fields input,
[data-theme="dark"] .lead-form input,
[data-theme="dark"] .lead-form textarea,
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] .form-select,
[data-theme="dark"] .searchbar,
[data-theme="dark"] .searchbar-input,
[data-theme="dark"] .booking-date-input,
[data-theme="dark"] .table-search input,
[data-theme="dark"] .search-sticky-bar input,
[data-theme="dark"] .search-sticky-bar select {
  background-color: #0c1110 !important;
  color: var(--c-text) !important;
  border-color: rgba(238, 220, 204, .16);
}

[data-theme="dark"] .hero-search-field > span,
[data-theme="dark"] .lead-form label,
[data-theme="dark"] .quiz-fields label,
[data-theme="dark"] .form-label {
  color: var(--c-muted);
}

[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .form-textarea::placeholder,
[data-theme="dark"] .lead-form input::placeholder,
[data-theme="dark"] .lead-form textarea::placeholder,
[data-theme="dark"] .searchbar-input::placeholder {
  color: var(--c-ph);
}

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .hero-search .btn,
[data-theme="dark"] .searchbar-btn button,
[data-theme="dark"] .btn-mint {
  background: var(--c-primary);
  color: #160f0c;
  box-shadow: 0 16px 34px -22px rgba(199, 123, 92, .72);
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .hero-search .btn:hover,
[data-theme="dark"] .searchbar-btn button:hover,
[data-theme="dark"] .btn-mint:hover {
  background: var(--c-primary-h);
  color: #160f0c;
}

[data-theme="dark"] .btn-outline,
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .btn-lang,
[data-theme="dark"] .user-menu-btn,
[data-theme="dark"] .page-link,
[data-theme="dark"] .page-btn,
[data-theme="dark"] .pagination-link,
[data-theme="dark"] .catalogue-tabs a,
[data-theme="dark"] .area-grid a,
[data-theme="dark"] .contact-socials-links a {
  background: #101514;
  color: var(--c-text);
  border-color: rgba(238, 220, 204, .15);
}

[data-theme="dark"] .btn-outline:hover,
[data-theme="dark"] .theme-toggle:hover,
[data-theme="dark"] .btn-lang:hover,
[data-theme="dark"] .page-link:hover,
[data-theme="dark"] .page-btn:hover,
[data-theme="dark"] .pagination-link:hover,
[data-theme="dark"] .catalogue-tabs a:hover,
[data-theme="dark"] .catalogue-tabs a.is-active,
[data-theme="dark"] .area-grid a:hover,
[data-theme="dark"] .contact-socials-links a:hover {
  background: rgba(199, 123, 92, .12);
  color: var(--c-accent-h);
  border-color: rgba(199, 123, 92, .32);
}

[data-theme="dark"] .listing-card,
[data-theme="dark"] .article-card,
[data-theme="dark"] .review-card,
[data-theme="dark"] .term-card,
[data-theme="dark"] .home-feature,
[data-theme="dark"] .home-step-grid li,
[data-theme="dark"] .home-contact-panel,
[data-theme="dark"] .contact-item,
[data-theme="dark"] .partner-card {
  color: var(--c-text);
  background:
    linear-gradient(180deg, rgba(199, 123, 92, .06), rgba(255, 255, 255, .012) 46%),
    linear-gradient(180deg, #171c1b 0%, #111615 100%);
  border-color: rgba(238, 220, 204, .13);
  box-shadow: 0 24px 58px -44px rgba(0, 0, 0, .96);
}

[data-theme="dark"] .listing-card,
[data-theme="dark"] .article-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-theme="dark"] .listing-card:hover,
[data-theme="dark"] .article-card:hover,
[data-theme="dark"] .term-card:hover {
  border-color: rgba(199, 123, 92, .34);
  box-shadow: 0 34px 82px -52px rgba(0, 0, 0, .98);
}

[data-theme="dark"] .listing-card-title,
[data-theme="dark"] .listing-card-price strong,
[data-theme="dark"] .article-card h2,
[data-theme="dark"] .article-card h3,
[data-theme="dark"] .review-card-head strong,
[data-theme="dark"] .home-feature h3,
[data-theme="dark"] .home-step-grid h3,
[data-theme="dark"] .home-contact-panel h2,
[data-theme="dark"] .faq-item dt {
  color: var(--c-text);
}

[data-theme="dark"] .listing-card-area,
[data-theme="dark"] .section-link,
[data-theme="dark"] .contact-item-icon,
[data-theme="dark"] .home-feature-kicker,
[data-theme="dark"] .home-step-grid span {
  color: var(--c-accent-h);
}

[data-theme="dark"] .listing-card-specs,
[data-theme="dark"] .listing-card-developer,
[data-theme="dark"] .article-card-meta,
[data-theme="dark"] .review-body,
[data-theme="dark"] .home-feature p,
[data-theme="dark"] .home-step-grid p,
[data-theme="dark"] .home-contact-panel p,
[data-theme="dark"] .contact-item-body a,
[data-theme="dark"] .contact-item-body span,
[data-theme="dark"] .faq-item dd,
[data-theme="dark"] .section-sub,
[data-theme="dark"] .quiz-sub {
  color: var(--c-muted);
}

[data-theme="dark"] .listing-card-price-label,
[data-theme="dark"] .lead-form-notice,
[data-theme="dark"] .footer-copy,
[data-theme="dark"] .footer-links a,
[data-theme="dark"] .footer-link-btn {
  color: var(--c-subtle);
}

[data-theme="dark"] .listing-card-footer {
  border-top-color: rgba(238, 220, 204, .13);
}

[data-theme="dark"] .listing-card-badge,
[data-theme="dark"] .badge-type {
  color: #fff;
  background: rgba(8, 10, 10, .78);
  border-color: rgba(255, 255, 255, .32);
}

[data-theme="dark"] .listing-card-media,
[data-theme="dark"] .listing-card-placeholder,
[data-theme="dark"] .article-card img,
[data-theme="dark"] .team-card img,
[data-theme="dark"] .ph,
[data-theme="dark"] .listing-card-img,
[data-theme="dark"] .listing-thumb-ph,
[data-theme="dark"] .booking-item-ph {
  background:
    linear-gradient(135deg, rgba(199, 123, 92, .16), transparent 52%),
    linear-gradient(180deg, #1a201f, #0d1110);
}

[data-theme="dark"] .article-card img.img-fade:not(.loaded),
[data-theme="dark"] .listing-card-media img.img-fade:not(.loaded) {
  background:
    linear-gradient(135deg, rgba(199, 123, 92, .18), transparent 48%),
    linear-gradient(180deg, rgba(199, 123, 92, .12), #101514);
}

[data-theme="dark"] .article-card:not(:has(img)) {
  background:
    radial-gradient(110% 78% at 0% 0%, rgba(199, 123, 92, .16), transparent 58%),
    linear-gradient(180deg, #171c1b, #111615);
}

[data-theme="dark"] .article-card:not(:has(img)) > a::before {
  background:
    linear-gradient(90deg, var(--c-accent), var(--c-primary));
  box-shadow: 0 18px 34px -26px rgba(199, 123, 92, .72);
}

[data-theme="dark"] .home-feature-kicker,
[data-theme="dark"] .home-step-grid span,
[data-theme="dark"] .review-avatar,
/* Плавающая панель на фотографии сотрудника задумывалась «всегда светлой»,
   независимо от темы сайта. На тёмной странице белый прямоугольник с чёрным
   текстом бил по глазам, поэтому в тёмной теме панель становится тёмным
   стеклом с той же логикой: она лежит на снимке, значит опирается на
   собственные фиксированные цвета, а не на токены страницы. */
[data-theme="dark"] .team-card-info {
  background: rgba(16, 15, 14, .58);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 16px 34px -20px rgba(0, 0, 0, .8);
}

[data-theme="dark"] .team-card-info strong { color: #fff; }

[data-theme="dark"] .team-card-info span { color: rgba(255, 255, 255, .68); }

[data-theme="dark"] .team-card-info { background: rgba(16, 15, 14, .92); }
[data-theme="dark"] .team-card-info .team-card-langs { color: #d4d0cc !important; }

[data-theme="dark"] .team-card-info .team-card-role { color: var(--c-accent-h) !important; }

[data-theme="dark"] .team-card-initials,
[data-theme="dark"] .section-count {
  background: rgba(199, 123, 92, .13);
  color: var(--c-accent-h);
}

[data-theme="dark"] .service-card {
  background:
    linear-gradient(135deg, rgba(199, 123, 92, .12), transparent 58%),
    linear-gradient(180deg, #171c1b, #101413);
  border: 1px solid rgba(238, 220, 204, .12);
}

[data-theme="dark"] .service-card::after {
  background:
    linear-gradient(180deg, rgba(8, 10, 10, .1) 0%, rgba(8, 10, 10, .58) 100%),
    linear-gradient(90deg, rgba(8, 10, 10, .62), rgba(8, 10, 10, .22));
}

[data-theme="dark"] .service-card h3 {
  color: #fff;
  text-shadow: 0 1px 18px rgba(0, 0, 0, .66);
}

[data-theme="dark"] .footer {
  background:
    linear-gradient(180deg, #050706 0%, #0a1110 100%);
  border-top-color: rgba(238, 220, 204, .12);
}

[data-theme="dark"] ::selection {
  background: rgba(199, 123, 92, .38);
  color: #fff;
}

[data-theme="dark"] .faq-item {
  padding: 18px 0;
  color: var(--c-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(238, 220, 204, .12);
  border-radius: 0;
  box-shadow: none;
}

[data-theme="dark"] .faq-item:last-child {
  border-bottom: 0;
}

[data-theme="dark"] .hero-search-field {
  background: #0c1110 !important;
  border-color: rgba(238, 220, 204, .16);
}

[data-theme="dark"] .hero-search-field select,
[data-theme="dark"] .hero-search-field input {
  color: var(--c-text) !important;
  background-color: transparent !important;
}

[dir="rtl"] .hero-search-field select {
  background-position: left 4px center;
  padding-inline: 30px 0;
}

/* Final requested corrections. Keep this last: legacy public passes above
   repeat the same hero/search/dot selectors several times. */
.hero {
  min-height: clamp(500px, calc(100svh - 78px), 700px);
  align-items: center;
  padding-block: clamp(54px, 7vh, 88px) clamp(28px, 4.5vh, 50px);
}

.hero-title {
  font-size: clamp(2.35rem, 5.4vw, 4.7rem);
  letter-spacing: 0;
}

.hero-search {
  width: min(100%, 960px);
  grid-template-columns: minmax(180px, 1.15fr) minmax(138px, .75fr) minmax(158px, .85fr) auto;
  gap: 7px;
  padding: 6px;
  border-radius: 13px;
}

.hero-search-field {
  position: relative;
  min-height: 48px;
  justify-content: center;
  gap: 2px;
  padding: 5px 11px;
  border: 1px solid rgba(20, 16, 14, .09);
  border-radius: 10px;
  background: color-mix(in srgb, var(--c-cool-surface) 54%, #fff);
}

.hero-search-field:focus-within {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-mint-light);
}

.hero-search-field > span {
  font-size: .63rem;
  line-height: 1.1;
}

.hero-search-field select,
.hero-search-field input {
  width: 100%;
  min-height: 22px;
  padding-block: 0;
  color: var(--c-text);
  font-size: .92rem;
  font-weight: 650;
  line-height: 1.2;
  border: 0;
  outline: 0;
  background-color: transparent;
  box-shadow: none;
}

.hero-search-field select {
  appearance: none;
  padding-inline: 0 30px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c77b5c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
}

.hero-search-field option {
  color: var(--c-text);
  background: var(--c-surface);
}

.hero-search-field :is(input, .hero-select-trigger):focus-visible {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}

.hero-select-field {
  cursor: default;
  isolation: isolate;
}

.hero-select-field.is-open {
  z-index: 60;
}

.hero-select-trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-text);
  font: inherit;
  font-size: .92rem;
  font-weight: 750;
  line-height: 1.2;
  text-align: start;
}

.hero-select-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--c-primary);
  display: block;
  overflow: visible;
}

.hero-select-menu {
  position: absolute;
  inset-inline: 5px;
  top: calc(100% + 8px);
  z-index: 40;
  display: grid;
  gap: 3px;
  padding: 6px;
  border: 1px solid rgba(20, 16, 14, .1);
  border-radius: 13px;
  background: var(--c-surface);
  box-shadow: 0 20px 46px -28px rgba(0, 0, 0, .5);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}

.hero-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--c-text);
  font-size: .9rem;
  font-weight: 720;
  line-height: 1;
  text-align: start;
}

.hero-select-option::after {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--c-primary);
  opacity: 0;
}

.hero-select-option:is(:hover, :focus-visible) {
  outline: none;
  background: color-mix(in srgb, var(--c-primary) 13%, transparent);
}

.hero-select-option[aria-selected="true"] {
  color: var(--c-primary-h);
}

.hero-select-option[aria-selected="true"]::after {
  opacity: 1;
}

.hero-budget-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  color: var(--c-text);
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.hero-budget-symbol {
  color: var(--c-primary);
  font-size: .94rem;
  font-weight: 800;
  line-height: 1;
}

.hero-budget-field input {
  min-width: 0;
  padding-inline: 0;
}

.hero-budget-field input::-webkit-outer-spin-button,
.hero-budget-field input::-webkit-inner-spin-button,
.calculator-number-shell input::-webkit-outer-spin-button,
.calculator-number-shell input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.hero-budget-field input[type="number"],
.calculator-number-shell input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.hero-search .btn {
  min-width: 132px;
  min-height: 48px;
  height: auto;
  border-radius: 11px;
}

.slider-dot,
.slider-dot[aria-current="true"] {
  width: 34px;
  height: 18px;
}

.slider-dot::before,
.slider-dot[aria-current="true"]::before {
  width: 22px;
  height: 3px;
  border-radius: 999px;
  transform: none;
}

.slider-dot::before {
  opacity: .34;
  transition: opacity var(--transition), background-color var(--transition);
}

.slider-dot[aria-current="true"]::before {
  opacity: 1;
  background: var(--c-primary);
}

[data-theme="dark"] .hero-search-field {
  background: #0c1110 !important;
  border-color: rgba(238, 220, 204, .16);
}

[data-theme="dark"] .hero-search-field:focus-within {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(199, 123, 92, .18);
}

[data-theme="dark"] .hero-search-field select,
[data-theme="dark"] .hero-search-field input,
[data-theme="dark"] .hero-search-field option {
  color: var(--c-text) !important;
  background-color: #0c1110 !important;
}

[data-theme="dark"] .faq-item {
  background: transparent;
  box-shadow: none;
}

[dir="rtl"] .hero-search-field select {
  background-position: left 4px center;
  padding-inline: 30px 0;
}

.hero:has(.hero-search-field-location .location-suggestions:not([hidden])) {
  overflow: visible;
  z-index: 80;
}

.hero-search {
  position: relative;
  z-index: 4;
}

.hero-search-field-location {
  z-index: 6;
}

.hero-search-field-location::after {
  content: "";
  position: absolute;
  inset-inline-end: 12px;
  inset-block-end: 13px;
  width: 14px;
  height: 14px;
  opacity: .72;
  pointer-events: none;
  background: currentColor;
  color: var(--c-primary);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10.8 4a6.8 6.8 0 1 1 0 13.6 6.8 6.8 0 0 1 0-13.6Zm0 2a4.8 4.8 0 1 0 0 9.6 4.8 4.8 0 0 0 0-9.6Zm5.2 9.4 4.3 4.3-1.4 1.4-4.3-4.3 1.4-1.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hero-search-field-location input[type="search"] {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 28px;
}

.hero-search-field-location input[type="search"]::-webkit-search-decoration,
.hero-search-field-location input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

.hero-search-field-location .location-suggestions {
  top: calc(100% + 9px);
  inset-inline: 0 auto;
  width: min(440px, calc(100vw - 36px));
  max-height: min(340px, 58vh);
  overflow: auto;
  padding: 7px;
  border-color: color-mix(in srgb, var(--c-primary) 18%, var(--glass-line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--c-surface) 96%, transparent);
  box-shadow: 0 24px 72px -38px rgba(28, 18, 12, .58);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.hero-search-field-location .location-suggestion {
  min-height: 42px;
  border-radius: 10px;
}

.hero-search-field-location .location-suggestion span {
  font-size: .9rem;
}

.hero-search-field-location .location-suggestion small {
  font-size: .72rem;
}

[dir="rtl"] .hero-search-field-location::after {
  inset-inline: 12px auto;
}

[dir="rtl"] .hero-search-field-location input[type="search"] {
  padding-inline: 28px 0;
}

[data-theme="dark"] .hero-search-field-location .location-suggestions {
  background: rgba(16, 21, 20, .98);
  border-color: rgba(238, 220, 204, .16);
  box-shadow: 0 24px 72px -38px rgba(0, 0, 0, .92);
}

@media (max-width: 900px) {
  .hero {
    min-height: auto;
    padding-block: 68px 30px;
  }

  .hero-search {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .hero-search-field,
  .hero-search .btn {
    min-height: 46px;
  }

  .hero-search-field-location .location-suggestions {
    width: 100%;
    max-height: 300px;
  }
}

@media (max-width: 560px) {
  .hero {
    padding-block: 58px 28px;
  }

  .hero-search {
    gap: 6px;
    padding: 6px;
  }
}

/* Public UX pass: catalogue filters, maps, currency tools, comparison. */
.listing-card {
  position: relative;
}

.listing-card-tools {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  z-index: 2;
  display: flex;
  gap: 7px;
}

.listing-card-tool {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--c-text);
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 50%;
  box-shadow: 0 14px 30px -22px rgba(0, 0, 0, .7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.listing-card-tool:hover,
.listing-card-tool.is-active {
  color: #fff;
  background: var(--c-primary);
}

.listing-card-placeholder,
.listing-card-media img.img-fade:not(.loaded),
.article-card img.img-fade:not(.loaded) {
  background:
    linear-gradient(110deg, transparent 0%, rgba(255,255,255,.4) 18%, transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--c-accent) 14%, transparent), transparent 54%),
    linear-gradient(180deg, color-mix(in srgb, var(--c-primary) 10%, #fff), var(--c-cool-surface));
  background-size: 220% 100%, auto, auto;
  animation: softShimmer 1.4s ease-in-out infinite;
}

@keyframes softShimmer {
  0% { background-position: 180% 0, 0 0, 0 0; }
  100% { background-position: -40% 0, 0 0, 0 0; }
}

.map-preview {
  --map-paper: #fff;
  --map-ink: rgba(0, 0, 0, .76);
  --map-line: rgba(0, 0, 0, .075);
  --map-road: rgba(0, 0, 0, .13);
  --map-road-strong: rgba(0, 0, 0, .24);
  --map-panel: rgba(255, 255, 255, .9);
  --map-panel-border: rgba(0, 0, 0, .09);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: clamp(280px, 42vw, 430px);
  padding: clamp(18px, 3vw, 26px);
  overflow: hidden;
  color: #000;
  border: 1px solid var(--map-panel-border);
  border-radius: var(--radius-lg);
  background: var(--map-paper);
  box-shadow: 0 24px 70px -48px rgba(0, 0, 0, .55);
}

.map-preview-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  background: var(--map-paper);
  transition: opacity 220ms ease;
}

.map-preview-art {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  opacity: .96;
  pointer-events: none;
  background:
    linear-gradient(34deg, transparent 0 46%, var(--map-road-strong) 46.3% 47.3%, transparent 47.6%),
    linear-gradient(122deg, transparent 0 42%, var(--map-road) 42.3% 43.1%, transparent 43.4%),
    linear-gradient(8deg, transparent 0 55%, var(--map-road) 55.2% 56%, transparent 56.3%),
    var(--map-paper);
  transition: opacity 220ms ease;
}

.map-preview-art::before,
.map-preview-art::after {
  content: "";
  position: absolute;
  inset: -18%;
}

.map-preview-art::before {
  background:
    linear-gradient(58deg, transparent 45%, var(--map-road-strong) 46% 47%, transparent 48%),
    linear-gradient(128deg, transparent 37%, var(--map-road) 38% 39%, transparent 40%),
    repeating-linear-gradient(90deg, transparent 0 74px, var(--map-line) 75px 76px),
    repeating-linear-gradient(0deg, transparent 0 58px, var(--map-line) 59px 60px);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.98), rgba(0,0,0,.42));
}

.map-preview-art::after {
  inset: 18% 10%;
  border: 1px solid var(--map-road);
  border-radius: 50%;
  transform: rotate(-16deg) scaleX(1.55);
}

.map-preview-art span:not(.map-preview-pin) {
  border-inline-start: 1px solid var(--map-line);
  border-block-start: 1px solid var(--map-line);
}

.map-preview-pin {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #fff;
  background: var(--c-primary);
  border-radius: 50% 50% 50% 8px;
  transform: translate(-50%, -60%) rotate(-45deg);
  box-shadow: 0 18px 42px -18px rgba(0, 0, 0, .75);
}

.map-preview-pin svg {
  transform: rotate(45deg);
}

.map-preview-copy,
.map-preview-actions {
  position: relative;
  z-index: 1;
}

.map-preview-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 46ch;
}

.map-preview-copy strong {
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.map-preview-copy span {
  color: color-mix(in srgb, var(--map-ink) 72%, transparent);
  line-height: 1.45;
}

.map-preview-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.map-preview.has-interactive-map {
  display: block;
  min-height: 0;
  padding: 0;
  aspect-ratio: 16 / 9;
  background: var(--map-paper);
}

.map-preview.has-interactive-map .map-preview-canvas {
  opacity: 1;
  pointer-events: auto;
}

.map-preview.has-interactive-map .map-preview-art {
  opacity: 0;
}

.map-preview.has-interactive-map .map-preview-copy {
  position: absolute;
  inset: auto auto 14px 14px;
  z-index: 2;
  max-width: min(380px, calc(100% - 28px));
  padding: 12px 14px;
  color: var(--map-ink);
  border: 1px solid var(--map-panel-border);
  border-radius: 14px;
  background: var(--map-panel);
  box-shadow: 0 18px 45px -30px rgba(0, 0, 0, .62);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
}

.map-preview.has-interactive-map .map-preview-copy strong {
  font-family: var(--font-sans);
  font-size: .95rem;
  line-height: 1.2;
}

.map-preview.has-interactive-map .map-preview-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .84rem;
}

.map-preview.has-interactive-map .map-preview-actions {
  position: absolute;
  inset: 14px 14px auto auto;
  z-index: 2;
  max-width: calc(100% - 28px);
}

.map-preview.has-interactive-map .map-preview-actions .btn-outline {
  color: var(--map-ink);
  border-color: var(--map-panel-border);
  background: var(--map-panel);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
}

/* Подсказка совместных жестов. Карта больше не крадёт прокрутку страницы,
   поэтому в ответ на «неработающий» жест она говорит, чем масштабировать:
   Ctrl/⌘ + колесо на десктопе, два пальца на телефоне. */
.map-gesture-hint {
  position: absolute;
  inset: 50% 0 auto;
  z-index: 1200;               /* выше пейнов и контролов Leaflet */
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  padding: 10px 16px;
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  border-radius: 999px;
  background: rgba(17, 17, 19, .84);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.shows-gesture-hint .map-gesture-hint {
  opacity: 1;
  visibility: visible;
}

/* Один палец принадлежит странице. Leaflet ставит ту же политику сам, когда
   перетаскивание выключено; дублируем на случай, если его классы разъедутся.
   Селектор с html — чтобы перебить leaflet.css, который подключается позже. */
html .leaflet-container.is-gesture-cooperative {
  touch-action: pan-x pan-y;
}

@media (prefers-reduced-motion: reduce) {
  .map-gesture-hint { transition: none; }
}

.property-map-marker {
  border: 0;
  background: transparent;
}

.property-map-marker span {
  position: absolute;
  inset: 2px 4px 8px;
  display: block;
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 8px;
  background: var(--c-primary);
  box-shadow: 0 18px 34px -17px rgba(0, 0, 0, .8);
  transform: rotate(-45deg);
}

.property-map-marker span::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: #fff;
}

.property-map-popup .leaflet-popup-content-wrapper {
  color: #000;
  border: 1px solid rgba(0, 0, 0, .09);
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 18px 45px -30px rgba(0, 0, 0, .72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.property-map-popup .leaflet-popup-content {
  display: grid;
  gap: 3px;
  min-width: 190px;
  margin: 10px 12px;
}

.property-map-popup .leaflet-popup-content strong {
  font-family: var(--font-sans);
  font-size: .92rem;
  line-height: 1.2;
}

.property-map-popup .leaflet-popup-content span {
  font-size: .82rem;
  line-height: 1.35;
  color: #555;
}

.property-map-popup .leaflet-popup-tip {
  background: rgba(255, 255, 255, .94);
  box-shadow: none;
}

.map-preview.is-map-loading::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: 3;
  width: 30px;
  height: 30px;
  border: 2px solid color-mix(in srgb, var(--map-ink) 16%, transparent);
  border-block-start-color: var(--c-primary);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: mapPreviewSpin 800ms linear infinite;
}

@keyframes mapPreviewSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .map-preview-canvas,
  .map-preview-art {
    transition: none;
  }

  .map-preview.is-map-loading::after {
    animation: none;
  }
}

@media (max-width: 680px) {
  .map-preview {
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    min-height: 340px;
  }

  .map-preview-actions {
    justify-content: flex-start;
  }

  .map-preview.has-interactive-map {
    aspect-ratio: auto;
    min-height: 380px;
  }

  .map-preview.has-interactive-map .map-preview-copy {
    inset: auto 12px 12px;
    max-width: none;
  }

  .map-preview.has-interactive-map .map-preview-actions {
    inset: 12px 12px auto;
    justify-content: flex-start;
  }

  .map-preview.has-interactive-map .map-preview-actions .btn {
    min-height: 40px;
  }
}

.property-trust {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
}

.property-trust span {
  position: relative;
  padding-inline-start: 18px;
  font-size: .84rem;
  line-height: 1.35;
  color: var(--c-muted);
}

.property-trust span::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .45em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-primary);
}

.property-calculator {
  padding: clamp(18px, 2.6vw, 28px);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  background: var(--glass-bg-strong);
  box-shadow: 0 24px 68px -52px rgba(24, 32, 34, .55);
}

.property-calculator-head,
.calculator-grid {
  display: grid;
  gap: 14px;
}

.property-calculator-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  margin-bottom: 18px;
}

.property-calculator-head h2 {
  margin: 0;
}

.calculator-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}

/* Больше места слайдеру первого взноса — раньше он делил четверть строки с
   числовым полем и двумя результатами, и сам ползунок был совсем тесным. */
.calculator-grid label:has(input[type="range"]) {
  grid-column: span 2;
}

.calculator-grid label,
.calculator-result {
  display: flex;
  min-height: 86px;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  background: var(--c-surface);
}

.calculator-grid span {
  color: var(--c-subtle);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.calculator-grid input[type="number"] {
  width: 100%;
}

.calculator-result strong,
.calculator-grid label strong {
  font-size: 1.05rem;
}

.property-calculator {
  padding: clamp(20px, 2.8vw, 32px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--c-primary) 10%, transparent), transparent 42%),
    var(--glass-bg-strong);
  box-shadow: 0 30px 80px -58px rgba(24, 32, 34, .62);
}

.property-calculator-head {
  align-items: end;
  gap: 18px;
}

.calculator-price,
.calculator-grid .calculator-control,
.calculator-grid .calculator-result {
  border: 1px solid color-mix(in srgb, var(--glass-line) 84%, transparent);
  background: color-mix(in srgb, var(--c-surface) 90%, transparent);
}

.calculator-price {
  display: grid;
  gap: 2px;
  min-width: min(230px, 100%);
  padding: 11px 14px;
  border-radius: 12px;
  text-align: end;
}

.calculator-grid {
  grid-template-columns: minmax(190px, 1.05fr) minmax(220px, 1.35fr) minmax(150px, .8fr);
  gap: 12px;
  align-items: stretch;
}

.calculator-grid .calculator-result-primary {
  grid-column: 1 / span 2;
  grid-row: 1;
}

.calculator-grid .calculator-result-secondary {
  grid-column: 3;
  grid-row: 1;
}

.calculator-grid .calculator-control-range {
  grid-column: 1 / span 2;
  grid-row: 2;
}

.calculator-grid .calculator-control-months {
  grid-column: 3;
  grid-row: 2;
}

.calculator-grid .calculator-control,
.calculator-grid .calculator-result {
  min-height: 108px;
  gap: 10px;
  padding: 16px;
  border-radius: 14px;
}

.calculator-grid .calculator-result-primary {
  min-height: 128px;
  padding: 20px;
  background:
    linear-gradient(135deg, rgba(199, 123, 92, .18), transparent 62%),
    color-mix(in srgb, var(--c-surface) 94%, transparent);
}

.calculator-price span,
.calculator-control > span:not(.calculator-number-shell),
.calculator-result > span,
.calculator-control-head > span {
  color: var(--c-subtle);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.15;
  text-transform: uppercase;
}

.calculator-price strong,
.calculator-result strong,
.calculator-control strong {
  color: var(--c-text);
  font-weight: 850;
  line-height: 1.05;
}

.calculator-grid .calculator-result-primary strong {
  color: var(--c-primary-h);
  font-size: clamp(1.55rem, 3vw, 2.35rem);
}

.calculator-grid .calculator-result-secondary strong,
.calculator-grid .calculator-control strong,
.calculator-price strong {
  font-size: 1.06rem;
}

.calculator-control-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.calculator-number-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  color: var(--c-text);
  font-size: .95rem;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--c-bg) 82%, transparent);
}

.calculator-number-shell input {
  width: 100%;
  min-width: 0;
  height: 40px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--c-text);
  font: inherit;
  font-size: .95rem;
  font-weight: 750;
}

.calculator-number-shell span {
  color: var(--c-subtle);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.calculator-number-shell:focus-within {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-mint-light);
}

.property-similar {
  margin-top: clamp(34px, 5vw, 64px);
}

.property-similar-grid {
  gap: clamp(14px, 1.6vw, 20px);
}

@media (min-width: 1120px) {
  .property-similar-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 680px) and (max-width: 1119px) {
  .property-similar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── стилизованный range-слайдер ─────────────────────────────────────────── */
/* Общий класс: первый взнос в калькуляторе объекта и фильтры каталога
   (цена, спальни). Раньше это был голый нативный range без единой строки CSS. */

.range-input {
  --range-fill: 0%;
  width: 100%;
  height: 6px;
  margin: 12px 0 6px;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(to right,
    var(--c-primary) 0%, var(--c-primary) var(--range-fill),
    var(--c-border) var(--range-fill), var(--c-border) 100%);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

.range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 3px solid var(--c-primary);
  box-shadow: 0 2px 8px rgba(24, 32, 34, .25);
  cursor: grab;
  transition: transform .15s ease;
}

.range-input::-webkit-slider-thumb:hover,
.range-input::-webkit-slider-thumb:active {
  transform: scale(1.12);
}

.range-input::-moz-range-track {
  height: 6px;
  background: var(--c-border);
  border-radius: 999px;
}

.range-input::-moz-range-progress {
  height: 6px;
  background: var(--c-primary);
  border-radius: 999px;
}

.range-input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 3px solid var(--c-primary);
  box-shadow: 0 2px 8px rgba(24, 32, 34, .25);
  cursor: grab;
}

.range-input:active::-webkit-slider-thumb,
.range-input:active::-moz-range-thumb {
  cursor: grabbing;
}

.range-input:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 4px;
}

/* Двуручечный слайдер (диапазон цены): два прозрачных range поверх общей
   дорожки — виден только их бегунок, полоса и заливка рисуются отдельно. */
.range-dual {
  position: relative;
  height: 20px;
  margin: 16px 2px 8px;
}

.range-dual-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 6px;
  transform: translateY(-50%);
  background: var(--c-border);
  border-radius: 999px;
}

.range-dual-fill {
  position: absolute;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  background: var(--c-primary);
  border-radius: 999px;
}

.range-dual .range-input {
  position: absolute;
  inset: 0;
  width: 100%;
  /* The base .range-input rule sets height:6px, which — combined with
     inset:0's implied top:0/bottom:0 — over-constrains the box and wins
     over "bottom", leaving the input only 6px tall pinned to the top of
     this 20px-tall wrapper. The thumb then centers on that 6px box instead
     of the visible track, sitting visibly above it. Force full height so
     the input (and its thumb) actually fills the wrapper. */
  height: 100%;
  margin: 0;
  background: none;
  pointer-events: none;
}

.range-dual .range-input::-webkit-slider-thumb { pointer-events: auto; }
.range-dual .range-input::-moz-range-thumb { pointer-events: auto; }

.range-values {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--c-text);
}

.property-mobile-cta {
  display: none;
}

.property-tray {
  position: fixed;
  inset-inline: 50% auto;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 360;
  width: min(760px, calc(100vw - 28px));
  padding: 12px;
  color: var(--c-text);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-line);
  border-radius: 18px;
  box-shadow: 0 28px 80px -36px rgba(0, 0, 0, .48);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  pointer-events: none;
  transform: translateX(-50%);
}

html:has(.property-tray) {
  scroll-padding-bottom: 220px;
}

body:has(.property-tray) [data-property-card],
body:has(.property-tray) [data-compare-toggle],
body:has(.property-tray) [data-shortlist-toggle] {
  scroll-margin-block-end: 220px;
}

.property-tray-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  pointer-events: auto;
}

.property-tray-head span {
  color: var(--c-muted);
  font-size: .86rem;
}

.property-tray-head button,
.property-compare-grid > button,
.property-compare-slot > button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-inline-start: auto;
  border: 1px solid var(--glass-line);
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-text);
}

.property-compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 170px));
  gap: 9px;
  justify-content: start;
  pointer-events: auto;
}

.property-compare-slot {
  position: relative;
  min-width: 0;
}

.property-compare-slot > button {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-end: 6px;
  margin-inline-start: 0;
}

.property-compare-item {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.property-compare-item img,
.property-compare-ph {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  object-fit: cover;
  background: var(--c-bg-card);
}

.property-compare-item strong,
.property-compare-item span,
.property-compare-item em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-compare-item strong {
  font-size: .82rem;
}

.property-compare-item span,
.property-compare-item em {
  color: var(--c-muted);
  font-size: .74rem;
  font-style: normal;
}

.property-compare-item dl {
  display: grid;
  gap: 3px;
  margin: 5px 0 0;
  padding: 0;
}

.property-compare-item dl div {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
}

.property-compare-item dt,
.property-compare-item dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--c-muted);
  font-size: .68rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-compare-item dd {
  color: var(--c-text);
}

.property-tray {
  width: min(1080px, calc(100vw - 28px));
  max-height: min(52vh, 520px);
  z-index: 450;
  padding: 14px;
  overflow: hidden;
  pointer-events: auto;
  transform-origin: 50% 100%;
  transition:
    background .24s ease,
    border-color .24s ease,
    box-shadow .32s cubic-bezier(.16, 1, .3, 1),
    filter .24s ease;
}

.property-tray.is-collapsed {
  max-height: none;
  box-shadow: 0 18px 54px -34px rgba(0, 0, 0, .44);
}

.property-tray.is-compact {
  width: min(560px, calc(100vw - 28px));
}

.property-tray.is-collapsed .property-tray-head {
  margin-bottom: 0;
}

.property-tray.is-collapsed .property-tray-count {
  display: none;
}

html:has(.property-tray) {
  scroll-padding-bottom: 320px;
}

html:has(.property-tray.is-collapsed) {
  scroll-padding-bottom: 120px;
}

body:has(.property-tray) [data-property-card],
body:has(.property-tray) [data-compare-toggle],
body:has(.property-tray) [data-shortlist-toggle] {
  scroll-margin-block-end: 320px;
}

body:has(.property-tray.is-collapsed) [data-property-card],
body:has(.property-tray.is-collapsed) [data-compare-toggle],
body:has(.property-tray.is-collapsed) [data-shortlist-toggle] {
  scroll-margin-block-end: 120px;
}

.property-tray-head {
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
  margin-bottom: 0;
}

.property-tray-body {
  display: grid;
  grid-template-rows: 1fr;
  margin-top: 12px;
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition:
    grid-template-rows .34s cubic-bezier(.16, 1, .3, 1),
    opacity .2s ease,
    filter .24s ease;
}

.property-tray-body-inner {
  min-height: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 0 round 8px);
  opacity: 1;
  transform: translateY(0);
  transform-origin: 50% 0;
  transition:
    clip-path .34s cubic-bezier(.16, 1, .3, 1),
    opacity .22s ease,
    transform .34s cubic-bezier(.16, 1, .3, 1);
}

.property-tray.is-collapsed .property-tray-body {
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  filter: blur(2px);
  pointer-events: none;
}

.property-tray.is-collapsed .property-tray-body-inner {
  clip-path: inset(0 0 100% 0 round 8px);
  opacity: 0;
  transform: translateY(10px);
}

.property-tray-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  margin-inline-end: auto;
}

.property-tray-head strong {
  color: var(--c-text);
  font-size: .95rem;
  line-height: 1.2;
}

.property-tray-count {
  flex: none;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--c-primary) 18%, var(--glass-line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-primary) 8%, transparent);
  white-space: nowrap;
}

.property-tray-head button,
.property-compare-colhead > button,
.property-compare-single > button,
.property-shortlist-item > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  margin-inline-start: 0;
  border: 1px solid var(--glass-line);
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-text);
  font-weight: 700;
  cursor: pointer;
  pointer-events: auto;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.property-tray-head button:hover,
.property-compare-colhead > button:hover,
.property-compare-single > button:hover,
.property-shortlist-item > button:hover {
  border-color: color-mix(in srgb, var(--c-primary) 30%, var(--glass-line));
  background: color-mix(in srgb, var(--c-primary) 10%, var(--c-surface));
  color: var(--c-primary);
}


.property-tray-chevron {
  transform: rotate(180deg);
  transform-origin: 50% 50%;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

.property-tray.is-collapsed .property-tray-chevron {
  transform: rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
  .property-tray,
  .property-tray-body,
  .property-tray-body-inner,
  .property-tray-chevron {
    transition-duration: .01ms;
  }

  .property-tray.is-collapsed .property-tray-body {
    filter: none;
  }

  .property-tray.is-collapsed .property-tray-body-inner {
    transform: none;
  }
}

.property-compare-scroll {
  max-height: calc(min(52vh, 520px) - 74px);
  overflow: auto;
  border: 1px solid var(--glass-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--c-surface) 84%, transparent);
  pointer-events: auto;
}

.property-compare-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: .82rem;
}

.property-compare-table th,
.property-compare-table td {
  min-width: 0;
  padding: 10px;
  border-block-end: 1px solid var(--glass-line);
  border-inline-end: 1px solid var(--glass-line);
  text-align: start;
  vertical-align: top;
}

.property-compare-table th:last-child,
.property-compare-table td:last-child {
  border-inline-end: 0;
}

.property-compare-table tbody tr:last-child th,
.property-compare-table tbody tr:last-child td {
  border-block-end: 0;
}

.property-compare-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--c-surface) 96%, transparent);
}

.property-compare-table thead th:first-child,
.property-compare-table tbody th {
  position: sticky;
  inset-inline-start: 0;
  width: 150px;
  background: color-mix(in srgb, var(--c-bg-card) 94%, var(--c-surface));
}

.property-compare-table thead th:first-child {
  z-index: 4;
  color: var(--c-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.property-compare-table tbody th {
  z-index: 1;
  color: var(--c-muted);
  font-size: .76rem;
  font-weight: 700;
}

.property-compare-colhead {
  position: relative;
  min-width: 0;
}

.property-compare-colhead a {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding-inline-end: 28px;
  color: inherit;
  text-decoration: none;
}

.property-compare-colhead img,
.property-compare-colhead .property-compare-ph {
  width: 100%;
  height: 68px;
  aspect-ratio: auto;
  border-radius: 8px;
  object-fit: cover;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--c-primary) 10%, transparent), transparent 54%),
    var(--c-bg-card);
}

.property-compare-colhead strong,
.property-compare-colhead span,
.property-shortlist-link strong,
.property-shortlist-link small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.property-compare-colhead strong {
  display: -webkit-box;
  color: var(--c-text);
  font-size: .82rem;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.property-compare-colhead span {
  color: var(--c-muted);
  font-size: .72rem;
  white-space: nowrap;
}

.property-compare-colhead > button {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 26px;
  min-width: 26px;
  height: 26px;
  font-size: 1rem;
}

.property-compare-table td span {
  display: block;
  overflow: hidden;
  color: var(--c-text);
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-compare-table tr.is-long td span {
  display: -webkit-box;
  min-height: 2.7em;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.property-compare-table td.is-best {
  background: color-mix(in srgb, var(--c-primary) 9%, transparent);
}

.property-compare-table td.is-best span {
  color: var(--c-primary);
}

.property-compare-table td em {
  display: inline-flex;
  margin-top: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-primary) 12%, transparent);
  color: var(--c-primary);
  font-size: .66rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.property-compare-hint,
.property-compare-empty {
  margin: 10px 0 0;
  color: var(--c-muted);
  font-size: .82rem;
  pointer-events: auto;
}

.property-compare-empty {
  display: grid;
  gap: 3px;
  padding: 16px;
  border: 1px solid var(--glass-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--c-surface) 86%, transparent);
}

.property-compare-empty strong {
  color: var(--c-text);
}

.property-compare-single {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--glass-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--c-surface) 88%, transparent);
  pointer-events: auto;
}

.property-compare-single-link {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.property-compare-single-link img,
.property-compare-single-link .property-compare-ph {
  width: 72px;
  height: 54px;
  aspect-ratio: auto;
  border-radius: 8px;
  object-fit: cover;
  background: var(--c-bg-card);
}

.property-compare-single-link span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.property-compare-single-link strong,
.property-compare-single-link small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-compare-single-link strong {
  color: var(--c-text);
  font-size: .86rem;
}

.property-compare-single-link small {
  color: var(--c-muted);
  font-size: .74rem;
}

.property-compare-single p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--c-muted);
  font-size: .8rem;
  line-height: 1.45;
}

.property-shortlist-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  max-height: calc(min(52vh, 520px) - 74px);
  overflow: auto;
  pointer-events: auto;
}

.property-shortlist-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--glass-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--c-surface) 88%, transparent);
}

.property-shortlist-link {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.property-shortlist-link img,
.property-shortlist-link .property-compare-ph {
  width: 62px;
  height: 48px;
  aspect-ratio: auto;
  border-radius: 8px;
  object-fit: cover;
  background: var(--c-bg-card);
}

.property-shortlist-link span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.property-shortlist-link strong,
.property-shortlist-link small {
  display: block;
  white-space: nowrap;
}

.property-shortlist-link strong {
  color: var(--c-text);
  font-size: .82rem;
}

.property-shortlist-link small {
  color: var(--c-muted);
  font-size: .74rem;
}

.article-card-excerpt {
  display: -webkit-box;
  min-height: 4.6em;
  margin: -2px 20px 20px;
  overflow: hidden;
  color: var(--c-muted);
  font-size: .9rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.article-card-no-image > a::before,
.article-card:not(:has(img)) > a::before,
[data-theme="dark"] .article-card:not(:has(img)) > a::before {
  min-height: 0;
  aspect-ratio: auto;
  height: 0;
  background: none;
  box-shadow: none;
}

.article-grid .article-card {
  min-height: 0;
}

.article-grid .article-card img {
  display: block;
  width: 100%;
  height: clamp(170px, 18vw, 230px);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.article-grid .article-card img.img-fade:not(.loaded) {
  border-radius: 0;
  background:
    linear-gradient(110deg, transparent 0%, rgba(255,255,255,.42) 22%, transparent 44%),
    linear-gradient(135deg, color-mix(in srgb, var(--c-primary) 8%, #f7fbfa), var(--c-cool-surface));
  background-size: 220% 100%, auto;
  animation: softShimmer 1.4s ease-in-out infinite;
}

.article-grid .article-card-no-image h2,
.article-grid .article-card-no-image h3 {
  padding-top: 18px;
}

@media (max-width: 760px) {
  .map-preview {
    grid-template-columns: 1fr;
    min-height: 220px;
    padding: 18px;
  }

  .map-preview-actions {
    justify-content: stretch;
  }

  .map-preview-actions .btn {
    flex: 1;
    justify-content: center;
  }

  .calculator-grid {
    grid-template-columns: 1fr;
  }

  .calculator-grid .calculator-result-primary,
  .calculator-grid .calculator-result-secondary,
  .calculator-grid .calculator-control-range,
  .calculator-grid .calculator-control-months {
    grid-column: auto;
    grid-row: auto;
  }

  .property-calculator-head {
    grid-template-columns: 1fr;
  }

  .calculator-price {
    text-align: start;
  }

  .property-mobile-cta {
    position: sticky;
    bottom: 10px;
    z-index: 120;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 8px;
    margin: 20px 0;
    padding: 8px;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-line);
    border-radius: 16px;
    box-shadow: 0 18px 46px -28px rgba(0,0,0,.45);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
  }

  .property-mobile-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 10px;
    color: #fff;
    background: var(--c-primary);
    border-radius: 12px;
    font-size: .82rem;
    font-weight: 800;
    text-decoration: none;
  }

  body:has(.property-mobile-cta) .cookie-banner {
    bottom: max(84px, calc(84px + env(safe-area-inset-bottom)));
  }

  body:has(.cookie-banner:not([hidden])) .wa-fab {
    inset-block-end: 142px;
  }

  body:has(.property-mobile-cta) .wa-fab {
    inset-block-end: 86px;
  }

  body:has(.property-mobile-cta):has(.cookie-banner:not([hidden])) .wa-fab {
    inset-block-end: 214px;
  }

  .property-tray {
    bottom: max(10px, env(safe-area-inset-bottom));
    width: calc(100vw - 18px);
    max-height: min(60vh, 520px);
    padding: 10px;
    border-radius: 16px;
  }

  html:has(.property-tray) {
    scroll-padding-bottom: 280px;
  }

  html:has(.property-tray.is-collapsed) {
    scroll-padding-bottom: 120px;
  }

  body:has(.property-tray) [data-property-card],
  body:has(.property-tray) [data-compare-toggle],
  body:has(.property-tray) [data-shortlist-toggle] {
    scroll-margin-block-end: 280px;
  }

  body:has(.property-tray.is-collapsed) [data-property-card],
  body:has(.property-tray.is-collapsed) [data-compare-toggle],
  body:has(.property-tray.is-collapsed) [data-shortlist-toggle] {
    scroll-margin-block-end: 120px;
  }

  .property-tray-head {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
  }

  .property-tray-head > div {
    flex: 1 1 100%;
  }

  .property-tray.is-collapsed .property-tray-head {
    align-items: center;
  }

  .property-tray.is-collapsed .property-tray-head > div {
    flex: 1 1 min(210px, 62%);
  }

  .property-tray-count {
    font-size: .74rem;
  }

  .property-tray-head [data-tray-close] {
    margin-inline-start: auto;
  }

  .property-compare-scroll,
  .property-shortlist-list {
    max-height: calc(min(60vh, 520px) - 104px);
  }

  .property-compare-table {
    min-width: 660px;
    font-size: .78rem;
  }

  .property-compare-table th,
  .property-compare-table td {
    padding: 8px;
  }

  .property-compare-table thead th:first-child,
  .property-compare-table tbody th {
    width: 118px;
  }

  .property-compare-colhead img,
  .property-compare-colhead .property-compare-ph {
    height: 56px;
  }

  .property-shortlist-list {
    grid-template-columns: 1fr;
  }

  .property-shortlist-link {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .property-compare-single-link {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .property-compare-single-link img,
  .property-compare-single-link .property-compare-ph {
    width: 58px;
    height: 44px;
  }

  .property-shortlist-link img,
  .property-shortlist-link .property-compare-ph {
    width: 56px;
    height: 44px;
  }
}

[data-theme="dark"] .listing-card-tool {
  color: var(--c-text);
  background: rgba(8, 12, 11, .82);
  border-color: rgba(255,255,255,.12);
}

[data-theme="dark"] .listing-card-tool:hover,
[data-theme="dark"] .listing-card-tool.is-active {
  color: #fff;
  background: var(--c-primary);
}

[data-theme="dark"] .map-preview {
  --map-paper: #000;
  --map-ink: rgba(255, 255, 255, .9);
  --map-line: rgba(255, 255, 255, .075);
  --map-road: rgba(255, 255, 255, .15);
  --map-road-strong: rgba(255, 255, 255, .28);
  --map-panel: rgba(0, 0, 0, .78);
  --map-panel-border: rgba(255, 255, 255, .14);
  color: #fff;
  background: var(--map-paper);
  box-shadow: 0 24px 70px -48px rgba(0, 0, 0, .92);
}

[data-theme="dark"] .property-map-marker span {
  border-color: #000;
}

[data-theme="dark"] .property-map-marker span::after {
  background: #000;
}

[data-theme="dark"] .property-map-popup .leaflet-popup-content-wrapper {
  color: #fff;
  border-color: rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .88);
}

[data-theme="dark"] .property-map-popup .leaflet-popup-content span {
  color: rgba(255, 255, 255, .72);
}

[data-theme="dark"] .property-map-popup .leaflet-popup-tip {
  background: rgba(0, 0, 0, .88);
}

[data-theme="dark"] .calculator-grid label,
[data-theme="dark"] .calculator-result {
  background: #101514;
}

[data-theme="dark"] .hero-select-menu {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(16, 18, 17, .96);
}

[data-theme="dark"] .calculator-price,
[data-theme="dark"] .calculator-grid .calculator-control,
[data-theme="dark"] .calculator-grid .calculator-result {
  background: #101514;
}

[data-theme="dark"] .calculator-number-shell {
  background: #0b0f0e;
}

@media (max-width: 760px) {
  [data-payment-calculator] .calculator-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-payment-calculator] .calculator-grid .calculator-result-primary,
  [data-payment-calculator] .calculator-grid .calculator-result-secondary,
  [data-payment-calculator] .calculator-grid .calculator-control-range,
  [data-payment-calculator] .calculator-grid .calculator-control-months {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

/* Home redesign: centered navigation, cinematic first viewport and public reviews. */
.home-page {
  --home-intro-after-title-delay: 80ms;
  --home-enter-ease: cubic-bezier(.22, 1, .36, 1);
  --home-veil-duration: 2800ms;
  --home-logo-duration: 2500ms;
  --home-hero-search-delay: calc(2700ms + var(--home-intro-after-title-delay));
  --home-header-delay: 3100ms;
  --home-controls-delay: 4000ms;
}

.home-page main {
  isolation: isolate;
}

.home-hero-scroll-stage {
  position: relative;
  z-index: 0;
}

.home-hero-scroll-stage ~ .section {
  position: relative;
  z-index: 2;
}

.header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 1.6vw, 28px);
}

.header-logo {
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  transition:
    transform 420ms cubic-bezier(.16, 1, .3, 1),
    filter 420ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

.header-logo:hover,
.header-logo:focus-visible {
  outline: none;
  transform: scale(1.045);
  filter: drop-shadow(0 12px 24px rgba(199, 123, 92, .22));
}

.header-logo .logo-img {
  transition: filter 420ms cubic-bezier(.16, 1, .3, 1);
}

.header-logo:hover .logo-img,
.header-logo:focus-visible .logo-img {
  filter: saturate(1.08) brightness(1.03);
}

/* Пункты меню собраны вокруг логотипа, а не разъезжаются по краям экрана:
   слева «All properties / Areas» прижаты к нему справа, справа «Blog /
   About us» — слева. Кнопки языка, валюты, темы и CTA при этом остаются у
   правого края (см. margin у .header-actions). */
.header-nav-left {
  justify-self: end;
  justify-content: flex-end;
}

.header-right {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(12px, 1.25vw, 20px);
  min-width: 0;
}

.header-nav {
  flex: 0 1 auto;
  gap: clamp(14px, 1.15vw, 24px);
}

.header-nav-right {
  justify-content: flex-start;
}

.header-nav .nav-link,
.header-nav .nav-link-parent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 2px;
  color: var(--c-muted);
  font-size: .88rem;
  font-weight: 720;
  line-height: 1;
  text-decoration: none;
}

.header-nav .nav-link:hover,
.header-nav .nav-link:focus-visible,
.nav-dropdown:focus-within > .nav-link-parent {
  color: var(--c-text);
  outline: none;
}

.nav-link-icon {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  color: var(--c-primary);
  transition: transform 180ms ease;
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown:hover .nav-link-icon,
.nav-dropdown:focus-within .nav-link-icon {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-start: -14px;
  z-index: 380;
  display: grid;
  gap: 4px;
  width: 210px;
  padding: 8px;
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--c-surface) 94%, transparent);
  box-shadow: 0 24px 54px -34px rgba(16, 24, 24, .52);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 170ms ease, visibility 170ms ease, transform 170ms ease;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

/* Между кнопкой и самим меню 10px пустоты. Пока курсор её пересекал, он не
   был ни над ссылкой, ни над меню — :hover срывался, и меню захлопывалось
   прямо под рукой. Мостим зазор невидимой полосой: она часть меню, значит
   ховер на .nav-dropdown не прерывается. */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 100%;
  height: 14px;
}

.nav-dropdown-menu-right {
  inset-inline-start: auto;
  inset-inline-end: -14px;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-dropdown-menu a {
  min-height: 40px;
  justify-content: flex-start;
  padding: 0 11px;
  color: var(--c-text);
  font-size: .86rem;
  font-weight: 720;
  border-radius: 10px;
  text-decoration: none;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  color: var(--c-primary-h);
  background: color-mix(in srgb, var(--c-primary) 10%, transparent);
  outline: none;
}

.header-actions {
  gap: 8px;
  margin-inline-start: auto;
}

.header-actions .btn-lang,
.header-actions .theme-toggle {
  min-width: 44px;
  min-height: 44px;
  height: 44px;
  padding: 0 10px;
  font-size: .74rem;
  line-height: 1;
}

.header-actions .currency-toggle {
  min-width: 46px;
  justify-content: center;
}

.header-actions .theme-toggle {
  width: 44px;
  padding: 0;
  border-radius: 12px;
}

.header-actions .theme-toggle-text {
  display: none;
}

.header-actions .lang-icon,
.header-actions .theme-icon {
  width: 14px;
  height: 14px;
}

.header-actions .header-cta {
  min-height: 44px;
  max-inline-size: 160px;
  padding-inline: 14px;
  font-size: .76rem;
  line-height: 1.3;
  white-space: normal;
  text-align: center;
  justify-content: center;
  border-radius: 12px;
}

/* One unhurried opening: signature, a held beat, then the scene, search,
   navigation and scroll cue. This is an introduction, not download progress.
   The preloaded first frame never waits for media readiness; input skips it. */
.site-intro { display: none; }
.home-enter .site-intro {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: #080706;
  animation: siteIntroExit var(--home-veil-duration) cubic-bezier(.4, 0, .2, 1) both;
}
.site-intro-shell {
  display: grid;
  justify-items: center;
  gap: 22px;
}
.site-intro-logo .logo-img { height: clamp(62px, 10vw, 112px); }
.home-enter .site-intro-logo {
  animation: siteIntroLogo var(--home-logo-duration) cubic-bezier(.4, 0, .2, 1) both;
}
.site-intro-loader {
  width: min(180px, 38vw);
  height: 1px;
  background: #c77b5c;
  transform-origin: center;
}
.home-enter .site-intro-loader {
  animation: siteIntroLine 2200ms cubic-bezier(.4, 0, .2, 1) 150ms both;
}
.home-enter .home-page .hero-bg {
  animation: homeHeroMediaIn 5000ms cubic-bezier(.3, 0, .2, 1) both;
}
/* Keep the H1 still and readable from the first paint. Moving the largest
   text delays LCP until it settles; the scene and signature carry the motion. */
.home-enter .home-page .hero-search {
  animation: homeHeroSearchIn 1500ms cubic-bezier(.25, .1, .25, 1) var(--home-hero-search-delay) backwards;
}
.home-enter .home-page .header {
  animation: homeHeaderIn 1500ms cubic-bezier(.25, .1, .25, 1) var(--home-header-delay) backwards;
}
.home-enter .home-page .hero-scroll-cue,
.home-enter .home-page .hero > .video-toggle {
  animation: homeControlIn 1000ms ease var(--home-controls-delay) backwards;
}
.home-enter .home-page .hero-scroll-cue i::before {
  animation: homeScrollDot 1600ms ease-in-out 4600ms 1;
}

/* A quiet, keyboard-operable control for every decorative background loop. */
.video-toggle {
  position: absolute;
  inset-inline-end: clamp(20px, 4vw, 48px);
  inset-block-end: 24px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 50%;
  background: rgba(8, 7, 6, .76);
  color: #fff;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
}
.video-toggle[hidden] { display: none; }
.hero > .video-toggle {
  inset-inline-start: clamp(20px, 4vw, 48px);
  inset-inline-end: auto;
}
.video-toggle:hover { background: #080706; border-color: #fff; }
.video-toggle svg { width: 20px; height: 20px; grid-area: 1 / 1; }
.video-toggle .video-toggle-pause,
.video-toggle.is-playing .video-toggle-play { display: none; }
.video-toggle.is-playing .video-toggle-pause { display: block; }
.home-photo-cta > .video-toggle { inset-inline-end: 18px; inset-block-end: 18px; }
.video-toggle:focus-visible,
.home-page .hero-scroll-cue:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 5px;
}

/* Retain the terracotta brand; use its darker ink shade for small text. */
[data-theme="light"] .btn-primary {
  background: var(--c-primary-h);
  color: #fff;
}
[data-theme="light"] .btn-primary:hover {
  background: color-mix(in srgb, var(--c-primary-h) 88%, #000);
}
[data-theme="light"] .section-link,
[data-theme="light"] .home-feature-kicker,
[data-theme="light"] .lead-form-notice a { color: #8b4b32; }
.lead-form-notice a { text-decoration: underline; text-underline-offset: .2em; }

/* The visual dots stay small; their hit areas are spacious and stable. */
.listing-card-dots { gap: 0; inset-block-end: 2px; }
.listing-card-dot,
.listing-card-dot.is-active {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transition: none;
}
.listing-card-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  transition: transform 180ms ease, background 180ms ease;
}
.listing-card-dot.is-active::before { background: #fff; transform: scaleX(2); }
.listing-card-dot:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

.home-page .header {
  position: fixed;
  inset: 0 0 auto;
}

/* Над видео первого экрана шапка всегда тёмная — вне зависимости от
   переключателя темы сайта, это просто состояние "поверх hero". После
   прокрутки .is-scrolled возвращает обычный светлый вид. */
.home-page .header:not(.is-scrolled) {
  background: rgba(10, 12, 12, .58);
  border-bottom-color: rgba(255, 255, 255, .12);
  box-shadow: none;
}

.home-page .header:not(.is-scrolled) .header-nav .nav-link,
.home-page .header:not(.is-scrolled) .header-nav .nav-link-parent {
  color: rgba(255, 255, 255, .82);
  font-weight: 720;
}

.home-page .header:not(.is-scrolled) .header-nav .nav-link:hover,
.home-page .header:not(.is-scrolled) .header-nav .nav-link:focus-visible,
.home-page .header:not(.is-scrolled) .nav-dropdown:focus-within > .nav-link-parent {
  color: #fff;
}

.home-page .header.is-scrolled {
  background: rgba(255, 255, 255, .78);
}

.home-page .hero {
  /* Sticky вместо relative: секции внутри .home-hero-scroll-stage (анкета,
     подборка — уже z-index 5/6, непрозрачный фон) идут дальше в обычном
     потоке и при скролле наезжают на hero сверху, а сам hero остаётся
     пристёгнут к верху вьюпорта, пока весь stage не прокрутится мимо. */
  position: sticky;
  top: 0;
  z-index: 0;
  min-height: 100svh;
  padding-block: clamp(96px, 15vh, 164px) clamp(72px, 10vh, 126px);
  background: #050605;
}

/* The preloaded poster paints at full opacity and never waits for video. */
.home-page .hero-bg {
  object-position: center;
  filter: saturate(1.03) contrast(1.08) brightness(.86);
  transform: none;
}

.home-page .hero::after {
  background:
    linear-gradient(180deg, rgba(5, 6, 5, .36) 0%, rgba(5, 6, 5, .2) 42%, rgba(5, 6, 5, .68) 100%),
    linear-gradient(90deg, rgba(5, 6, 5, .52), rgba(5, 6, 5, .1) 50%, rgba(5, 6, 5, .52));
}

.home-page .hero-inner {
  align-items: center;
  max-width: 1080px;
  text-align: center;
}

.home-page .hero-title {
  inline-size: fit-content;
  max-inline-size: min(1080px, calc(100vw - 48px));
  color: #fff;
  font-size: 4rem;
  font-weight: 780;
  line-height: 1.06;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow: 0 8px 22px rgba(0, 0, 0, .34);
  overflow: visible;
}

.home-page .hero-title span {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
}

.home-page .hero-search {
  width: min(960px, 100%);
  margin-top: clamp(28px, 5vh, 48px);
  background: rgba(255, 255, 255, .9);
  border-color: rgba(255, 255, 255, .56);
  box-shadow: 0 34px 80px -44px rgba(0, 0, 0, .74);
}

.home-page .hero-search-field > span:first-child {
  color: var(--c-muted);
  font-size: .6875rem;
  letter-spacing: 0;
}

.home-page .hero-search input::placeholder {
  color: var(--c-muted);
  opacity: 1;
}

.home-page .hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 3svh, 34px);
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  color: rgba(255, 255, 255, .82);
  font-size: .68rem;
  font-weight: 780;
  line-height: 1;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 12px 34px rgba(0, 0, 0, .64);
  min-width: 44px;
  min-height: 44px;
  transform: translateX(-50%);
}

.home-page .hero-scroll-cue i {
  position: relative;
  width: 22px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, .52);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 12px 28px rgba(0, 0, 0, .24);
}

.home-page .hero-scroll-cue i::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
}

.home-page .hero-scroll-cue:hover,
.home-page .hero-scroll-cue:focus-visible {
  color: #fff;
}

.home-page .home-quiz-section {
  --c-bg: #fff;
  --c-surface: #fff;
  --c-surface-soft: #f7f3ef;
  --c-border: rgba(41, 32, 25, .12);
  --c-text: #1e1915;
  --c-muted: #61584f;
  --c-subtle: #7d7167;
  --glass-bg-strong: rgba(255, 255, 255, .96);
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  margin-top: 0;
  min-height: clamp(460px, 54svh, 560px);
  padding-block: clamp(56px, 6vw, 86px) clamp(30px, 3.4vw, 48px);
  color: var(--c-text);
  background: #fff;
  border-top: 1px solid rgba(255, 255, 255, .72);
  border-radius: 0;
  box-shadow: none;
  scroll-margin-top: 100px;
}

/* A family of warm photographic materials, with enough presence to read
   at the edges while the content remains the strongest layer. */
:is(.home-page, .about-page) .home-atmosphere {
  --home-texture: url('../img/home/quiz-sand-water.webp');
  --home-texture-position: center;
  --home-texture-mobile-position: 22% center;
  position: relative;
  isolation: isolate;
}

:is(.home-page, .about-page) .home-atmosphere--dunes {
  --home-texture: url('../img/home/atmosphere-dunes.webp');
  --home-texture-position: center 58%;
  --home-texture-mobile-position: 72% center;
}
:is(.home-page, .about-page) .home-atmosphere--water {
  --home-texture: url('../img/home/atmosphere-water.webp');
  --home-texture-position: center 42%;
  --home-texture-mobile-position: 68% center;
}
:is(.home-page, .about-page) .home-atmosphere--silk {
  --home-texture: url('../img/home/atmosphere-silk.webp');
  --home-texture-mobile-position: 14% center;
}
:is(.home-page, .about-page) .home-atmosphere--stone {
  --home-texture: url('../img/home/atmosphere-stone.webp');
  --home-texture-position: center 62%;
  --home-texture-mobile-position: 78% center;
}

.home-page .home-atmosphere::before,
.about-page .home-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--home-texture);
  background-position: var(--home-texture-position);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: var(--home-texture-opacity, .18);
  filter: saturate(.8);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent);
}

:is(.home-page, .about-page) .home-atmosphere--soft {
  --home-texture-opacity: .153;
  --home-texture-opacity-mobile: .128;
  --home-texture-opacity-dark: .102;
}

/* Change the crop on repeated materials so neighbouring sections never echo. */
.home-page .home-atmosphere:nth-of-type(even)::before,
.about-page .home-atmosphere:nth-of-type(even)::after {
  transform: scaleX(-1);
}

[data-theme="dark"] .home-page .home-atmosphere::before,
[data-theme="dark"] .about-page .home-atmosphere::after {
  opacity: var(--home-texture-opacity-dark, .12);
  filter: invert(1) sepia(1) saturate(.8);
}

@media (max-width: 767px) {
  .home-page .home-atmosphere::before,
  .about-page .home-atmosphere::after {
    background-position: var(--home-texture-mobile-position);
    opacity: var(--home-texture-opacity-mobile, .15);
  }
}


.home-page .home-quiz-section .container.narrow {
  position: relative;
  z-index: 1;
  width: min(680px, 100% - 2 * clamp(16px, 4vw, 40px));
}

.home-page .home-quiz-section .quiz {
  margin-inline: auto;
  background: #fff;
  border-color: rgba(41, 32, 25, .1);
  box-shadow: 0 28px 70px -56px rgba(34, 28, 23, .38);
}

/* Между анкетой и подборкой было около 156px пустоты и ни одной линии —
   казалось, что блоки просто разъехались. Тонкая линия по низу анкеты делит
   их явно, а отступы с обеих сторон подтянуты. */
.home-page .home-quiz-section::after {
  content: "";
  position: absolute;
  inset-inline: clamp(20px, 9vw, 220px);
  inset-block-end: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--c-text) 28%, transparent),
    transparent);
}

.home-page .home-featured-section {
  position: relative;
  z-index: 6;
  padding-block-start: clamp(38px, 4.4vw, 62px);
  background: var(--c-bg);
}

/* В тёмной теме секция раньше принудительно оставалась белым островом посреди
   чёрной страницы: и фон, и вся палитра были прибиты к светлым значениям, а
   следом шёл длинный список правил с хардкодом #1e1915 для заголовка,
   вариантов ответа, прогресса и кнопок. Возвращаем секции тему сайта — токены
   обратно тёмные, и всё внутри считается от них само. */
[data-theme="dark"] .home-page .home-quiz-section {
  --c-bg: #000;
  --c-surface: #151515;
  --c-surface-soft: #0b0b0b;
  --c-border: #2b2b2b;
  --c-text: #fff;
  --c-muted: #d0cbc8;
  --c-subtle: #a49d98;
  --glass-bg-strong: rgba(22, 20, 19, .8);
  color: var(--c-text);
  background: var(--c-bg);
  border-top-color: rgba(255, 255, 255, .08);
}

[data-theme="dark"] .home-page .home-quiz-section .quiz {
  background: var(--c-surface);
  border-color: var(--c-border);
  box-shadow: 0 28px 70px -56px rgba(0, 0, 0, .8);
}

.home-photo-cta {
  --cta-sky-scale: 1;
  --cta-scene-brightness: 1;
  --cta-scene-saturate: 1.08;
  --cta-palm-x: 0px;
  --cta-palm-y: 0px;
  --cta-palm-rotate: 0deg;
  --cta-palm-scale: 1;
  --cta-palm-opacity: 1;
  --cta-building-x: 0px;
  --cta-building-y: 0px;
  --cta-building-scale: 1;
  --cta-building-opacity: 1;
  min-height: clamp(410px, 39vw, 520px);
  isolation: isolate;
  /* Подложка тёмная, а не «небесная»: по скруглённому краю антиалиасинг верхних
     слоёв (кадр + скрим) не докрывает нижние на доли пикселя, и любой светлый
     фон под ними проступает каймой по дуге — на чёрном фоне тёмной темы это
     хорошо видно. Итоговая картинка всё равно затемнена скримом, так что
     светлая подложка не давала ничего, кроме этой каймы. */
  background: #16191d;
}

.home-photo-cta-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #16191d;
}

/* Warm horizon light binds the photographic planes into one dusk exposure. */
.home-photo-cta-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at 76% 82%, rgba(211, 151, 89, .17), transparent 58%),
              linear-gradient(180deg, rgba(17, 30, 49, .18), transparent 65%);
}

.home-photo-cta .home-photo-cta-layer {
  position: absolute;
  inset: auto;
  display: block;
  max-width: none;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  /* Слой промотируется ради transform, который JS пересчитывает каждый кадр
     скролла. Раньше здесь стоял ещё и filter — это держало постоянный
     фильтрующий слой на каждом из трёх больших элементов сцены; вместе с
     isolation + mix-blend-mode + играющим видео карточка набирала столько
     композиторских слоёв, что после пересоздания GPU-поверхности (свернуть и
     развернуть окно) часть содержимого приходила обратно пустой. opacity на
     уже промотированном слое и так бесплатна, поэтому оставляем только
     transform. */
  will-change: auto;
}

.home-photo-cta.is-scene-active .home-photo-cta-layer {
  will-change: transform;
}

.home-photo-cta .home-photo-cta-sky {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--cta-sky-scale));
  transform-origin: center;
  filter: saturate(var(--cta-scene-saturate)) brightness(var(--cta-scene-brightness));
}

.home-photo-cta .home-photo-cta-video {
  display: block;
  background: #16191d;
}

.home-photo-cta .home-photo-cta-video::-webkit-media-controls {
  display: none !important;
}

.home-photo-cta .home-photo-cta-palm {
  left: clamp(-150px, -8vw, -70px);
  bottom: clamp(-135px, -9vw, -76px);
  z-index: 1;
  width: min(44vw, 560px);
  min-width: 320px;
  opacity: var(--cta-palm-opacity);
  transform: translate3d(var(--cta-palm-x), var(--cta-palm-y), 0) rotate(var(--cta-palm-rotate)) scale(var(--cta-palm-scale));
  transform-origin: 30% 92%;
}

.home-photo-cta .home-photo-cta-building {
  right: clamp(-360px, -22vw, -250px);
  bottom: clamp(-72px, -5vw, -38px);
  z-index: 1;
  width: min(78vw, 1080px);
  min-width: 560px;
  opacity: var(--cta-building-opacity);
  transform: translate3d(var(--cta-building-x), var(--cta-building-y), 0) scale(var(--cta-building-scale));
  transform-origin: 78% 92%;
}

.home-photo-cta .home-building-lights {
  aspect-ratio: 1877 / 838;
  overflow: visible;
}

.home-building-lights-base,
.home-building-lights-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.home-building-lights-base {
  z-index: 1;
  object-fit: contain;
  user-select: none;
}

.home-building-lights-svg {
  z-index: 2;
  overflow: visible;
}

.home-building-lights .window-light {
  /* will-change тут стоял на всех 96 окнах разом — это ровно тот случай, от
     которого предостерегает спека: браузер держит сотню слоёв постоянно, а не
     только на время проявления. Анимации окон запускаются через WAAPI, они и
     без подсказки уходят в композитор. */
  opacity: 0;
}

.home-building-lights .light-core,
.home-building-lights .light-glow {
  mix-blend-mode: screen;
}

.home-building-lights .light-glow {
  opacity: .28;
}

.home-photo-cta::after {
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 8, 9, .74), rgba(4, 8, 9, .36) 54%, rgba(4, 8, 9, .1)),
    linear-gradient(180deg, rgba(4, 8, 9, .04), rgba(4, 8, 9, .6));
}

.home-photo-cta-body {
  z-index: 3;
}

.home-photo-cta h2,
.home-photo-cta-body > p:not(.hero-eyebrow) {
  text-shadow: 0 16px 42px rgba(0, 0, 0, .56);
}

.reviews-page {
  padding-top: clamp(78px, 9vw, 122px);
  background:
    linear-gradient(180deg, var(--c-bg) 0%, color-mix(in srgb, var(--c-cool-surface) 34%, var(--c-bg)) 100%);
}

.reviews-page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(22px, 4vw, 54px);
  align-items: end;
  margin: clamp(24px, 4vw, 46px) 0 clamp(28px, 4vw, 52px);
  padding-bottom: clamp(22px, 3vw, 34px);
  border-bottom: 1px solid color-mix(in srgb, var(--c-primary) 20%, var(--c-border));
}

.reviews-page-head .page-title {
  max-width: 12ch;
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 5.5vw, 4.9rem);
  line-height: 1.02;
  letter-spacing: 0;
}

.reviews-page-head .section-sub {
  max-width: 58ch;
  margin-top: 14px;
}

/* Строку «Based on N Google reviews» убрали, остались оценка и звёзды —
   прежняя ширина в 320px под них уже не нужна. */
.reviews-page-summary {
  justify-content: flex-end;
  max-width: max-content;
  margin: 0;
  padding: 9px 14px;
  border: 1px solid var(--glass-line);
  border-radius: 13px;
  background: var(--glass-bg-strong);
  box-shadow: var(--glass-shadow);
}

.reviews-page-summary .reviews-score { font-size: 1.12rem; }

.reviews-page-summary .reviews-stars {
  font-size: .9rem;
  letter-spacing: 1px;
}

.reviews-page-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

.reviews-page-grid .review-card {
  min-height: 220px;
}

[data-theme="dark"] .nav-dropdown-menu {
  background: rgba(16, 21, 20, .94);
  border-color: rgba(238, 220, 204, .14);
  box-shadow: 0 24px 54px -34px rgba(0, 0, 0, .86);
}

[data-theme="dark"] .nav-dropdown-menu a:hover,
[data-theme="dark"] .nav-dropdown-menu a:focus-visible {
  color: var(--c-accent-h);
  background: rgba(199, 123, 92, .12);
}

[data-theme="dark"] .home-page .hero-search {
  background: rgba(16, 21, 20, .86);
  border-color: rgba(238, 220, 204, .16);
}

/* Не-скролленное состояние шапки на главной уже тёмное само по себе
   (см. .home-page .header:not(.is-scrolled) выше) — переключатель темы
   сайта на него не влияет, эффект зависит только от прокрутки. */
[data-theme="dark"] .home-page .header.is-scrolled {
  background: rgba(8, 10, 10, .76);
}

[data-theme="dark"] .about-page .header {
  background: rgba(8, 10, 10, .58);
  border-bottom-color: rgba(238, 220, 204, .12);
  box-shadow: 0 22px 60px -48px rgba(0, 0, 0, .78);
}

[data-theme="dark"] .about-page .header.is-scrolled {
  background: rgba(8, 10, 10, .76);
}

[data-theme="dark"] .reviews-page {
  background:
    linear-gradient(180deg, #070a09 0%, #0a1110 100%);
}

[data-theme="dark"] .reviews-page-head,
[data-theme="dark"] .about-hero-photo,
[data-theme="dark"] .about-team-intro.team-intro,
[data-theme="dark"] .about-department-head {
  border-color: rgba(238, 220, 204, .13);
}

[data-theme="dark"] .about-team-nav a {
  color: var(--c-text);
  background: rgba(16, 21, 20, .82);
  border-color: rgba(238, 220, 204, .14);
}

[data-theme="dark"] .about-team-nav a:hover,
[data-theme="dark"] .about-team-nav a:focus-visible {
  color: var(--c-accent-h);
  background: rgba(199, 123, 92, .12);
  border-color: rgba(199, 123, 92, .32);
}

[data-theme="dark"] .about-team-nav strong {
  color: var(--c-accent-h);
  background: rgba(199, 123, 92, .13);
}

[data-theme="dark"] .about-department-section::before {
  background: linear-gradient(90deg, transparent, rgba(238, 220, 204, .14), transparent);
}

@keyframes siteIntroLogo {
  0% { opacity: 0; transform: scale(.98); }
  28%, 60% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.015); }
}
@keyframes siteIntroLine {
  0% { opacity: 0; transform: scaleX(.2); }
  28% { opacity: .65; transform: scaleX(.3); }
  72% { opacity: .8; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
@keyframes siteIntroExit {
  0%, 38% { opacity: 1; visibility: visible; }
  to { opacity: 0; visibility: hidden; }
}
@keyframes homeHeroMediaIn {
  from { transform: scale(1.045); }
  to { transform: none; }
}
@keyframes homeHeroSearchIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes homeHeaderIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: none; }
}
@keyframes homeControlIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes homeScrollDot {
  0%, 100% { opacity: 0; transform: translate(-50%, 0); }
  25% { opacity: 1; }
  80% { opacity: 0; transform: translate(-50%, 14px); }
}

@media (max-width: 1380px) {
  .header-nav-left,
  .header-nav-right {
    display: none;
  }

  .header-right {
    grid-column: 2;
    justify-content: flex-end;
  }

  .header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .header-logo {
    grid-column: 1;
    justify-self: start;
    min-width: 0;
    max-width: 220px;
  }

  .header-logo .logo-img {
    width: 100%;
    height: auto;
  }

  .home-page .hero-title { font-size: 3.25rem; }

  .menu-toggle {
    display: grid;
  }
}

@media (min-width: 1381px) {
  .menu-toggle {
    display: none;
  }
}

@media (max-width: 900px) {
  .home-page .hero {
    min-height: 100svh;
    padding-block: 116px 88px;
  }

  .about-page .about-video-hero {
    min-height: 100svh;
    padding-block: clamp(96px, 15vh, 132px) clamp(54px, 8vh, 84px);
  }

  .home-page .hero-title {
    max-width: min(100%, calc(100vw - 40px));
    max-inline-size: min(100%, calc(100vw - 40px));
    font-size: 2.625rem;
  }

  .about-page .about-video-hero .hero-title {
    max-width: min(100%, calc(100vw - 40px));
    font-size: clamp(2.25rem, 8.4vw, 3.55rem);
  }

  .about-page .about-video-hero .hero-sub,
  .about-page .about-video-hero .hero-prose {
    max-width: min(100%, 58ch);
  }

  .home-page .hero-search {
    width: min(520px, 100%);
    margin-top: 28px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page .hero-search-field-location,
  .home-page .hero-search > .btn { grid-column: 1 / -1; }

  .home-page .hero-search-field { text-align: start; }
  .home-page .hero-search input { font-size: 1rem; }

  .catalogue-filters-panel {
    z-index: 1000;
    border-radius: 0;
    background: var(--c-surface);
    overscroll-behavior: contain;
  }

  .catalogue-filters-close { width: 44px; height: 44px; }

  .home-page .home-quiz-section {
    min-height: auto;
    padding-block: clamp(48px, 8vw, 68px) clamp(36px, 7vw, 54px);
  }

  .home-photo-cta {
    min-height: clamp(460px, 88vw, 540px);
  }

  .home-photo-cta .home-photo-cta-palm {
    left: clamp(-138px, -18vw, -86px);
    bottom: clamp(-112px, -13vw, -78px);
    width: 64vw;
    min-width: 260px;
  }

  .home-photo-cta .home-photo-cta-building {
    right: clamp(-350px, -36vw, -210px);
    bottom: clamp(-58px, -7vw, -34px);
    width: 118vw;
    min-width: 540px;
  }

  .home-photo-cta::after {
    background:
      linear-gradient(90deg, rgba(4, 8, 9, .82), rgba(4, 8, 9, .52) 68%, rgba(4, 8, 9, .32)),
      linear-gradient(180deg, rgba(4, 8, 9, .08), rgba(4, 8, 9, .78));
  }

  .home-photo-cta-body {
    max-width: min(100%, 560px);
    transform: none;
  }

  .reviews-page-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .reviews-page-summary {
    justify-content: flex-start;
    max-width: none;
  }
}

@media (max-width: 768px) {
  .header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
  }

  .header-logo {
    justify-self: start;
    max-width: 180px;
  }

  .header-right {
    gap: 0;
  }

  .header-actions > .language-wrapper { display: block; }
  .header-actions .btn-lang { gap: 5px; padding-inline: 8px; }
  .header-actions { gap: 6px; }
  .header .header-logo .logo-img,
  .header.is-scrolled .header-logo .logo-img { height: auto; max-width: 100%; }
}

@media (max-width: 560px) {
  .home-page .hero-title {
    max-width: min(100%, calc(100vw - 32px));
    max-inline-size: min(100%, calc(100vw - 32px));
    font-size: 1.875rem;
    line-height: 1.1;
  }

  .about-page .about-video-hero {
    padding-block: 92px 48px;
  }

  .about-page .about-video-hero .hero-title {
    max-width: min(100%, calc(100vw - 32px));
    font-size: clamp(2rem, 11vw, 2.7rem);
    line-height: 1.08;
  }

  .about-page .about-video-hero .hero-sub {
    font-size: .98rem;
    line-height: 1.5;
  }

  .about-page .about-video-hero .hero-prose {
    font-size: .94rem;
    line-height: 1.58;
  }

  .home-page .hero-scroll-cue {
    gap: 6px;
    bottom: 14px;
    margin-top: 0;
  }

  .home-page .hero-scroll-cue i {
    width: 20px;
    height: 30px;
  }

  .home-photo-cta {
    border-radius: 16px;
    min-height: 500px;
  }

  .home-photo-cta h2 {
    max-width: 12ch;
    font-size: clamp(2rem, 10.8vw, 2.72rem);
  }

  .home-page .home-quiz-section {
    min-height: auto;
    padding-block: 44px 34px;
  }

  .home-photo-cta .home-photo-cta-palm {
    left: -118px;
    bottom: -88px;
    width: 74vw;
    min-width: 248px;
  }

  .home-photo-cta .home-photo-cta-building {
    right: -255px;
    bottom: -36px;
    width: 154vw;
    min-width: 560px;
  }

  .site-intro-logo .logo-img {
    height: clamp(62px, 18vw, 92px);
  }

  .reviews-page-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 360px) {
  .home-page .hero-title { font-size: 1.625rem; }
  .mobile-nav-links { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .home-enter .site-intro,
  .site-intro {
    display: none;
    animation: none;
  }

  .site-intro::before,
  .site-intro::after,
  .site-intro-loader,
  .site-intro-loader::before {
    animation: none;
  }

  .home-enter .home-page .header,
  .home-enter .home-page .hero-bg,
  .home-enter .home-page .hero-title span,
  .home-enter .home-page .hero-search,
  .home-enter .home-page .hero-scroll-cue,
  .home-enter .home-page .hero > .video-toggle,
  .site-intro-logo,
  .home-page .header,
  .header-logo,
  .home-page .hero-bg,
  .home-page .hero-title,
  .home-page .hero-search,
  .home-page .hero-scroll-cue {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
  }

  .header-logo:hover,
  .header-logo:focus-visible {
    transform: none;
  }

  .home-enter .home-page .hero-scroll-cue,
  .home-page .hero-scroll-cue {
    transform: translateX(-50%);
  }

  .home-enter .home-page .hero-scroll-cue i::before,
  .home-page .hero-scroll-cue i::before {
    animation: none;
  }

  .home-photo-cta .home-photo-cta-layer {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .home-building-lights .window-light {
    opacity: 1 !important;
  }
}