/*
Theme Name: Спектр
Theme URI: https://spectr54.ru
Description: Тема ЖК «Спектр» — эко-квартал в наукограде Кольцово. Лендинг на ACF PRO, весь контент редактируется через админку. Требует плагины: Advanced Custom Fields PRO, Contact Form 7.
Author: Spectr
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spectr
*/

/* ============================================================
   SPECTR — CSS Design System
   Font: Stolzl (Regular + Book). Place files in /assets/fonts/
   ============================================================ */

/* --- @font-face --- */
@font-face {
  font-family: 'Stolzl';
  src: url('assets/fonts/stolzl_regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Stolzl';
  src: url('assets/fonts/stolzl_book.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Stolzl';
  src: url('assets/fonts/stolzl_medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Stolzl';
  src: url('assets/fonts/stolzl_bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   DESIGN TOKENS (CSS Custom Properties)
   ============================================================ */
:root {
  /* --- Brand Colors --- */
  --color-orange:       #EE6E47;
  --color-dark:         #1A1B1F;
  --color-brand-black:  #040404;
  --color-white:        #FFFFFF;
  --color-blue:         #739EED;
  --color-blue-light:   #499AD2;
  --color-blue-dark:    #4166A9;
  --color-green:        #4DB673;
  --color-pink:         #D34C80;
  --color-yellow:       #FFD34B;
  --color-mint:         #A5FDC5; /* плашка срока действия на карточках акций */

  /* --- Neutral / UI Colors --- */
  --color-surface:      #F2F5F8;
  --color-border:       #BFC3CB;
  --color-divider:      #D8DCE2;
  --color-gray-200:     #E4EAF0;
  --color-gray-desc:    #8F949E;

  /* --- Translucent --- */
  --color-header-bg:    rgba(255, 255, 255, 0.5);
  --color-white-80:     rgba(255, 255, 255, 0.8);
  --color-white-40:     rgba(255, 255, 255, 0.4);
  --color-white-20:     rgba(255, 255, 255, 0.2);
  --color-black-10:     rgba(0, 0, 0, 0.1);

  /* --- Gradient --- */
  --gradient-stories:   linear-gradient(180deg, rgba(150, 149, 255, 0.4) 0%, rgba(255, 6, 93, 1) 100%);
  --gradient-hero-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);

  /* --- Blur Effects --- */
  --blur-l: blur(12px);
  --blur-m: blur(8px);
  --blur-s: blur(4px);

  /* --- Typography: font-families --- */
  --font-regular: 'Stolzl', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-book: 'Stolzl', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Typography: H1 (48px / 110% / -3%) --- */
  --text-h1-size:     48px;
  --text-h1-lh:       110%;
  --text-h1-ls:       -0.03em;

  /* --- Typography: H2 (32px / 115%) --- */
  --text-h2-size:     32px;
  --text-h2-lh:       115%;

  /* --- Typography: H3 (24px / 120% / -2%) --- */
  --text-h3-size:     24px;
  --text-h3-lh:       120%;
  --text-h3-ls:       -0.02em;

  /* --- Typography: H4 (18px / 115% / -2%) --- */
  --text-h4-size:     18px;
  --text-h4-lh:       115%;
  --text-h4-ls:       -0.02em;

  /* --- Typography: H5 (16px / 120%) --- */
  --text-h5-size:     16px;
  --text-h5-lh:       120%;

  /* --- Typography: H6 (14px / 120%) --- */
  --text-h6-size:     14px;
  --text-h6-lh:       120%;

  /* --- Typography: Body-1 (16px / 145% / Book) --- */
  --text-body1-size:  16px;
  --text-body1-lh:    145%;

  /* --- Typography: Body-2 (14px / 145% / Book) --- */
  --text-body2-size:  14px;
  --text-body2-lh:    145%;

  /* --- Typography: Body-2-Strong (14px / 120% / Regular) --- */
  --text-body2s-size: 14px;
  --text-body2s-lh:   120%;

  /* --- Typography: Body-3 (12px / 130% / Book) --- */
  --text-body3-size:  12px;
  --text-body3-lh:    130%;

  /* --- Typography: Body-3-strong (12px / 130% / Regular) --- */
  --text-body3s-size: 12px;
  --text-body3s-lh:   130%;

  /* --- Typography: Body-XSmall (10px / 125%) --- */
  --text-xs-size:     10px;
  --text-xs-lh:       125%;

  /* --- Typography: ButtonLink/S (12px / 125%) --- */
  --text-btn-s-size:  12px;
  --text-btn-s-lh:    125%;

  /* --- Typography: ButtonLink/M (14px / 16px) --- */
  --text-btn-m-size:  14px;
  --text-btn-m-lh:    16px;

  /* --- Typography: ButtonLink/L (16px / 20px) --- */
  --text-btn-l-size:  16px;
  --text-btn-l-lh:    20px;

  /* --- Layout --- */
  --container-max:    1440px;
  --container-px:     80px;
  --header-height:    72px;
  --section-gap:      104px;

  /* --- Border Radii --- */
  --radius-xl:    20px;
  --radius-lg:    16px;
  --radius-md:    12px;
  --radius-sm:    8px;
  --radius-pill:  999px;
  --radius-full:  999px; /* алиас --radius-pill (используется в ряде правил) */
  --radius-line:  1px;

  /* Алиас серого (парный к --color-gray-desc) */
  --color-gray:   #8F949E;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: var(--text-body1-size);
  line-height: var(--text-body1-lh);
  color: var(--color-dark);
  background-color: var(--color-white);
  overflow-x: hidden;
}

/* Заголовки: в макете все h1–h6 = Stolzl Regular 400.
   Без этого сброса браузер применяет свой bold (700 → stolzl_bold.otf). */
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
}

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

[hidden] {
  display: none !important;
}

/* Ссылка «Перейти к содержимому»: не display:none и не visibility:hidden —
   иначе она выпадет из tab-порядка и смысла в ней не будет. Убираем за
   пределы экрана и возвращаем на фокусе. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-md) 0;
  background: var(--color-dark);
  color: var(--color-white);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  transform: translateY(-120%);
  transition: transform 0.15s ease-out;
}

.skip-link:focus {
  transform: translateY(0);
}

/* Логотип: десктоп/мобайл варианты из админки */
.logo__img--mobile { display: none; }

@media (max-width: 768px) {
  .logo__img--desktop { display: none; }
  .logo__img--mobile { display: block; }
}

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

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* ============================================================
   TYPOGRAPHY UTILITY CLASSES
   ============================================================ */
.text-h1 {
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-lh);
  letter-spacing: var(--text-h1-ls);
}

.text-h2 {
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
}

.text-h3 {
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
}

.text-h4 {
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
}

.text-h5 {
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-lh);
}

.text-h6 {
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: var(--text-h6-size);
  line-height: var(--text-h6-lh);
}

.text-body1 {
  font-family: var(--font-book);
  font-weight: 300;
  font-size: var(--text-body1-size);
  line-height: var(--text-body1-lh);
}

.text-body2 {
  font-family: var(--font-book);
  font-weight: 300;
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
}

.text-body2-strong {
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: var(--text-body2s-size);
  line-height: var(--text-body2s-lh);
}

.text-body3 {
  font-family: var(--font-book);
  font-weight: 300;
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
}

.text-body3-strong {
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: var(--text-body3s-size);
  line-height: var(--text-body3s-lh);
}

.text-xs {
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-lh);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

/* Full-width section wrapper */
.section {
  width: 100%;
}

/* Sections with inter-section spacing */
.section + .section {
  margin-top: var(--section-gap);
}

/* Точечные отступы по макету (зазоры в Figma не одинаковые) */
.section + .section.section--cards { margin-top: 44px; } /* карточки прижаты к hero */
.section + .section.section--features { margin-top: 110px; }
.section + .section.section--gallery { margin-top: 120px; }
.section + .section.section--visit { margin-top: 128px; }
.section + .section.section--finish { margin-top: 140px; }

/* ============================================================
   BUTTONS
   ============================================================ */

/* Base button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-regular);
  font-weight: 300; /* толщина текста кнопок по макету (тоньше) */
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s;
}

.btn:hover {
  opacity: 0.85;
}

/* Large CTA button (padding: 12px 24px, radius: 16px) */
.btn--lg {
  padding: 12px 24px;
  border-radius: var(--radius-lg);
  font-size: var(--text-btn-l-size);
  line-height: var(--text-btn-l-lh);
}

/* Medium button (padding: 8px 16px, radius: 16px) */
.btn--md {
  padding: 8px 16px;
  border-radius: var(--radius-lg);
  font-size: var(--text-btn-m-size);
  line-height: var(--text-btn-m-lh);
}

/* Small button (padding: 8px 12px, radius: 12px) — header */
.btn--sm {
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: var(--text-btn-m-size);
  line-height: var(--text-btn-m-lh);
}

/* Extra-small button (padding: 8px 12px, radius: 12px, S text) */
.btn--xs {
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: var(--text-btn-s-size);
  line-height: var(--text-btn-s-lh);
}

/* Variants */
.btn--orange {
  background-color: var(--color-orange);
  color: var(--color-white);
  border: 1.5px solid transparent;
}

.btn--orange:hover {
  opacity: 1;
  background-color: #d95d36;
}

.btn--outline {
  background-color: transparent;
  color: var(--color-dark);
  border: 1.5px solid var(--color-dark);
}

.btn--outline:hover {
  background-color: var(--color-dark);
  color: var(--color-white);
}

.btn--outline-white {
  background-color: transparent;
  color: var(--color-white);
  border: 1.5px solid var(--color-white);
}

.btn--outline-white:hover {
  background-color: var(--color-white);
  color: var(--color-dark);
}

.btn--ghost {
  background-color: var(--color-white);
  color: var(--color-dark);
  border: 1.5px solid transparent;
}

.btn--dark {
  background-color: var(--color-dark);
  color: var(--color-white);
  border: 1.5px solid transparent;
}

.btn--dark:hover {
  opacity: 1;
  background-color: #000;
}

/* Round icon button (30×30 px) */
.btn-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  /* fix22 img_8: обводка чёрная; на ховере круг НЕ заливается (заливка перекрывала
     бы цвет иконки) — вместо этого иконка меняется на вариант с заливкой. */
  border: 1.5px solid var(--color-dark);
  background: transparent;
  color: var(--color-dark);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  flex-shrink: 0;
}

.btn-round:hover {
  background-color: transparent;
  border-color: var(--color-dark);
  color: var(--color-dark);
}

.btn-round:hover svg path {
  fill: var(--color-dark);
}

/* Кнопка «Меню» (бургер) — без обводки и без заливки */
.btn-round--burger {
  border-color: transparent;
}

.btn-round--burger:hover {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-dark);
}

/* Сердечко «Избранное»: круг не заливается, на ховере чёрная заливка у самого сердца
   (общее поведение всех .btn-round, см. выше — правило оставлено как явное) */
.btn-round--fav:hover svg path {
  fill: var(--color-dark);
}

.btn-round svg {
  pointer-events: none;
}

/* ============================================================
   BURGER ICON
   ============================================================ */
.burger-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 18px;
  height: 13px;
  pointer-events: none;
}

.burger-icon span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  border-radius: 1px;
  transition: transform 0.25s, opacity 0.25s;
}

/* Burger morphs into × when the menu is open */
.btn-round--burger[aria-expanded="true"] .burger-icon span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.btn-round--burger[aria-expanded="true"] .burger-icon span:nth-child(2) {
  opacity: 0;
}

.btn-round--burger[aria-expanded="true"] .burger-icon span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Открытое меню → бургер становится крестиком (Правки img_3,4: «незакрытое
   бургер-меню торчит»). Правила выше написаны под старую span-разметку и
   на инлайновую SVG не действовали, поэтому иконка не менялась. */
.burger__ico--close { display: none; }
.btn-round--burger.is-open .burger__ico--menu { display: none; }
.btn-round--burger.is-open .burger__ico--close { display: block; }

/* ============================================================
   HEADER
   ============================================================ */
/* Пока висит затемнение меню — шапка непрозрачная. Иначе подложка (z-97)
   просвечивает сквозь полупрозрачный фон шапки (z-100) и на её нижней
   границе виден «второй слой» подложки (Правки img_3). */
body.nav-dim-on .header { background-color: var(--color-white); }

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-height);
  background-color: var(--color-header-bg);
  backdrop-filter: var(--blur-l);
  -webkit-backdrop-filter: var(--blur-l);
}

.header__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 83px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* --- Logo --- */
.logo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.logo__img {
  width: 192px;
  height: 20px;
  object-fit: contain;
}

.logo__descr {
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: 10px;
  line-height: 100%;
  color: var(--color-blue); /* макет: подпись логотипа #739EED */
  white-space: nowrap;
}

/* --- Desktop Navigation --- */
.header__nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.header__nav-list {
  display: flex;
  align-items: center;
  gap: 22px;
}

.header__nav-link {
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
  color: var(--color-dark);
  white-space: nowrap;
  transition: color 0.2s;
}

.header__nav-link:hover {
  color: var(--color-orange);
}

/* --- Desktop Right Group --- */
.header__right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}

.header__contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.header__phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: var(--text-body2s-size);
  line-height: var(--text-body2s-lh);
  color: var(--color-dark);
  white-space: nowrap;
  transition: color 0.2s;
}

.header__phone:hover {
  color: var(--color-orange);
}

.header__callback {
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: var(--text-btn-m-size);
  line-height: var(--text-btn-m-lh);
  color: var(--color-gray-desc);
  white-space: nowrap;
  transition: color 0.2s;
}

.header__callback:hover {
  color: var(--color-orange);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- Mobile Actions (hidden on desktop) --- */
.header__mobile-actions {
  display: none;
  align-items: center;
  gap: 8px;
}

/* ============================================================
   HERO SECTION (00 HERO) — Swiper-based
   ============================================================ */
.section--hero {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-px);
  position: relative;
}

/* Контролы баннера: десктоп — оверлей низа баннера (как было), мобайл — под баннером */
.hero__controls {
  position: absolute;
  left: calc(var(--container-px) + 48px);
  right: calc(var(--container-px) + 48px);
  bottom: 36px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 20px;
  pointer-events: none;
}

.hero__controls > * {
  pointer-events: auto;
}

/* Swiper container IS the hero block */
.hero {
  height: 640px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  /* Подложка под слайдами: при fade они на миг полупрозрачны, и без неё
     сквозь баннер просвечивал белый фон страницы. */
  background-color: var(--color-dark);
}

/* Each slide is a background image */
.hero__slide {
  background-image:
    radial-gradient(circle at 69% 65%, rgba(255, 255, 255, 0) 0%, rgba(9, 10, 18, 0.4) 100%),
    url('assets/img/hero-bg-7bb49c.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Свои фоны из админки: --hero-bg-d (десктоп) / --hero-bg-m (мобайл) */
.hero__slide[style*="--hero-bg-d"] {
  background-image:
    radial-gradient(circle at 69% 65%, rgba(255, 255, 255, 0) 0%, rgba(9, 10, 18, 0.4) 100%),
    var(--hero-bg-d);
}

@media (max-width: 768px) {
  .hero__slide[style*="--hero-bg-m"] {
    background-image:
      radial-gradient(circle at 69% 65%, rgba(255, 255, 255, 0) 0%, rgba(9, 10, 18, 0.4) 100%),
      var(--hero-bg-m);
  }
}

/* Overlay with all content — sits above Swiper slides */
.hero__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Макет 319:4657: padding 40/48/32, поэтому контент внутри ровно 568px. */
  padding: 40px 48px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  pointer-events: none;
}

.hero__left {
  width: 714px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  min-height: 0;
  pointer-events: auto;
}

.hero__header {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero__title {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-lh);
  letter-spacing: var(--text-h1-ls);
  color: var(--color-white);
}

/* Размеры сняты с макета Main Banner NEW 14 (кадр 1280×640): плашка 24px
   высотой, скругление 8, отступы по 12, текст 12px, зазор между плашками 10,
   размытие фона 2px (у Figma радиус 4). Плашки стоят между заголовком и
   текстом под ним — порядок задан в template-parts/sections/hero.php. */
.hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  padding: 0 12px;
  background: var(--color-white-80);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: var(--radius-sm);
  font-size: var(--text-body3-size);
  line-height: 1;
  color: var(--color-dark);
  white-space: nowrap;
}

.hero__tag-icon {
  width: 13px;
  height: 12px;
  display: block;
}

/* Плашка со своим цветом: фон непрозрачный, размывать под ним нечего. */
.hero__tag--solid {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Значение плашки-ссылки (ТЗ: «ссылка со значения») */
.hero__tag-link {
  color: var(--color-blue);
  text-decoration: none;
}

.hero__tag-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hero__subtitle {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  color: var(--color-white);
}

/* CTA слева + стрелки справа, на всю ширину баннера (как в макете).
   pointer-events: auto — т.к. .hero__body отключает клики (pointer-events: none),
   а .hero__nav теперь его прямой потомок (вынесен из .hero__left). */
.hero__nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  pointer-events: auto;
}

.hero__cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Кнопка «Видео» на баннере + попап видео-обзора (Правки img_1) */
.hero__video-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* fix22 img_15: кнопка чёрная — иконку «плей» инвертируем в белый */
.hero__video-btn img { flex: none; filter: brightness(0) invert(1); }

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.video-modal.is-open { display: flex; }

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 27, 31, 0.75);
}

.video-modal__body {
  position: relative;
  width: min(1040px, 100%);
  max-height: 90vh;
}

.video-modal__video {
  display: block;
  width: 100%;
  max-height: 90vh;
  border-radius: var(--radius-lg);
  background: #000;
}

.video-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--color-white);
  cursor: pointer;
}

@media (max-width: 768px) {
  .video-modal { padding: 16px; }
  .video-modal__close { top: -40px; }
}

/* Glass/white button variant (hero CTA #2) */
.btn--glass {
  background: var(--color-white);
  color: var(--color-dark);
  border: 1.5px solid transparent;
  backdrop-filter: var(--blur-s);
  -webkit-backdrop-filter: var(--blur-s);
}

.btn--glass:hover {
  opacity: 0.9;
}

/* Кнопки на баннере: в макете главной (фрейм 00 HERO) они полностью
   скруглённые пилюли, в отличие от системных кнопок с радиусом 16px
   (Buttons / Size=L в UI-ките). Размеры совпадают (высота 46, паддинги
   12/24, кегль 16) — отличие только в радиусе, поэтому переопределяем
   его точечно, не трогая кнопки в остальных местах сайта. */
.hero__cta .btn--lg {
  border-radius: 999px;
}

.hero__arrows {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.hero__arrow-btn {
  display: block;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.hero__arrow-btn:hover {
  opacity: 0.75;
}

.hero__arrow-btn img {
  width: 30px;
  height: 30px;
  display: block;
}

/* Progress bars — inside hero__body, last row */
.hero__progress {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  pointer-events: auto;
  position: relative;
  isolation: isolate;
}

.hero__dot {
  flex: 1;
  height: 2px;
  border-radius: 1px;
  background: var(--color-white-40);
  position: relative;
  overflow: hidden;
  /* fix22 img.png: точки — кнопки (листание кликом), поэтому сбрасываем стили кнопки.
     Полоска 2px мала для пальца: зону клика расширяем прозрачными бордерами,
     отрицательный margin возвращает исходную высоту ряда. */
  padding: 0;
  appearance: none;
  cursor: pointer;
  box-sizing: content-box;
  border: 9px solid transparent;
  border-inline-width: 0;
  margin-block: -9px;
  background-clip: content-box;
}

/* Fully filled past slides.
   Именно background-color, НЕ сокращённый background: сокращённая запись
   сбрасывает background-clip из базового правила в border-box, заливка
   растекается на прозрачные 9px-рамки (зону клика) — и вместо тонкой линии
   2px рисуется белый блок высотой 20px. */
.hero__dot.is-done {
  background-color: rgba(255, 255, 255, 0.75);
}

/* Затемнение-подложка под прогресс-баром удалено по правке заказчика
   (14.08.2026): в макете полоски лежат прямо на фото, без градиента. */

/* Active slide: fill animation over slide duration.
   background-color вместо background — по той же причине, что и в .is-done:
   не сбрасывать background-clip: content-box из базового правила. */
.hero__dot.is-active {
  background-color: var(--color-white-40);
}

.hero__dot.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: var(--color-white);
  animation: dotFill var(--hero-speed, 3s) linear forwards;
}

/* Пауза автопоказа: полоска о автоплее не знает и без этого дольётся до конца,
   обещая смену слайда, которой не будет. */
.hero__progress.is-paused .hero__dot.is-active::after {
  animation-play-state: paused;
}

/* Кнопка паузы: та же геометрия, что у стрелок, иконка инлайновая */
.hero__pause {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}

@keyframes dotFill {
  from { width: 0%; }
  to   { width: 100%; }
}

/* ============================================================
   01 CARDS SECTION
   ============================================================ */
.section--cards {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-px);
}

.cards__dots {
  display: none;
}

.cards {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

.card {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 387px;
  height: 148px;
  padding: 6px;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  overflow: hidden;
  flex-shrink: 0;
}

/* Ссылка-растяжка: при заданной ссылке кликабельна вся карточка */
.card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.card .btn {
  position: relative;
  z-index: 2;
  width: max-content;
}

.card__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  padding: 12px;
}

.card__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 199px;
}

.card__title {
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-lh);
  color: var(--color-brand-black);
}

.card__desc {
  font-family: var(--font-book);
  font-weight: 300;
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  color: var(--color-gray-desc);
}

.card__image {
  width: 136px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background-size: cover;
  background-position: center;
}

/* ============================================================
   02 STORIES SECTION
   ============================================================ */
.section--stories {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-px);
}

.stories {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.stories__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2px;
}

.stories__title {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  color: var(--color-dark);
}

/* Responsive heading text: "Что нового" desktop / "А у нас в квартире…" mobile */
.stories__title-m { display: none; }

.stories__dots { display: none; }

.stories__nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stories__list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 54px;
  padding: 0 10px;
}

.story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}

/* Кольцо сториза по макетам default.svg / hover.svg.
   Default: вертикальный градиент — сверху почти прозрачный #9695FF, снизу #FF065D.
   В макете кольцо нарисовано обводкой с stroke-opacity 0.5, поэтому итоговая
   прозрачность стопов 0.4*0.5 = 0.2 и 1*0.5 = 0.5.
   Градиент нельзя задать через border-color, поэтому обводка прозрачная, а цвет
   даёт двухслойный фон: padding-box красит белый зазор, border-box — кольцо. */
.story__image-wrap {
  width: 100%;
  height: max-content;
  aspect-ratio: 1 / 1; /* Правки.md: ровные квадраты на десктопе */
  border: 1.5px solid transparent;
  border-radius: var(--radius-lg);
  padding: 4px;
  box-sizing: border-box;
  background:
    linear-gradient(var(--color-white), var(--color-white)) padding-box,
    linear-gradient(180deg, rgba(150, 149, 255, 0.2) 0%, rgba(255, 6, 93, 0.5) 100%) border-box;
  transition: border-width 0.15s ease;
}

/* Hover: сплошной #F5629B и кольцо на 0.5px толще (в макете 11 → 12).
   Цвет меняется мгновенно: перейти от градиента к сплошному плавно нельзя —
   background-image не интерполируется. На полосе 2px это незаметно. */
.story:hover .story__image-wrap,
.story:focus-visible .story__image-wrap {
  border-width: 2px;
  background:
    linear-gradient(var(--color-white), var(--color-white)) padding-box,
    linear-gradient(#F5629B, #F5629B) border-box;
}

.story__ring {
  width: 100%;
  height: 100%;
  border-radius: 11px;
  overflow: hidden;
}

.story__inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.story__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.story__name {
  font-size: var(--text-body2s-size);
  line-height: var(--text-body2s-lh);
  color: var(--color-dark);
  text-align: center;
}

/* ============================================================
   03 OFFERS SECTION
   ============================================================ */
.section--offers {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-px);
}

.offers__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.offers__title {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  color: var(--color-dark);
}

.offers__all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--color-dark);
  border-radius: 12px;
  font-size: var(--text-btn-m-size);
  line-height: var(--text-btn-m-lh);
  color: var(--color-dark);
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s;
}

.offers__all:hover { border-color: var(--color-orange); color: var(--color-orange); }
.offers__all-ico { width: 12px; height: 12px; display: block; }

.offers__dots { display: none; }

.offers {
  display: flex;
  flex-direction: column;
  gap: 48px; /* макет 03 OFFERS: header→content 48 */
}

.offers__row {
  display: flex;
  /* Слева, а не space-between: при неполном ряде (3 акции) space-between
     растягивал остаток контейнера в огромные дыры между карточками.
     По макету ряд выровнен слева с постоянным зазором. */
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  height: 300px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.offers__row::-webkit-scrollbar { display: none; }

.offer-card {
  /* Ширина от контейнера: ровно 4 карточки с зазорами 16px заполняют ряд
     от края до края (в 1280 → 308px). При 3 карточках ряд остаётся слева,
     при 5+ работает горизонтальная прокрутка (flex-shrink: 0 ниже).
     На мобильном ширину задаёт flex-basis 78% — этот width там не действует. */
  width: calc((100% - 3 * 16px) / 4);
  height: 300px;
  border-radius: var(--radius-md);
  overflow: hidden;
  padding-right: 16px;
  display: flex;
  flex-shrink: 0;
  /* Фон по умолчанию (пока редактор не загрузил картинку) */
  background-color: var(--color-dark);
  background-image: linear-gradient(135deg, #2a2c33 0%, #1a1b1f 100%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* С загруженной фоновой картинкой фон задаётся инлайн (фото + затемнение) */
.offer-card--has-bg {
  background-color: var(--color-dark);
}

.offer-card--orange {
  background-image: linear-gradient(-45deg, rgba(238, 110, 71, 0) 0%, rgba(238, 110, 71, 1) 75%);
}

.offer-card--dark {
  background-image: url('assets/img/offer-card-mortgage.png');
}

.offer-card--finish {
  background-image:
    radial-gradient(circle at 58% 50%, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0.55) 100%),
    url('assets/img/offer-card-finish-58972a.png');
}

.offer-card--kids {
  background-image:
    radial-gradient(circle at 73% 73%, rgba(255, 255, 255, 0.12) 0%, rgba(0, 20, 58, 0.75) 100%),
    url('assets/img/offer-card-kids-60806a.png');
}

.offer-card__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
}

.offer-card__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.offer-card__heading {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  color: var(--color-white);
}

.offer-card__heading--dark {
  color: var(--color-dark);
}

.offer-card__subheading {
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-lh);
  color: var(--color-white);
}

.offer-card__note {
  font-size: var(--text-body3s-size);
  line-height: var(--text-body3s-lh);
  color: var(--color-white);
}

.offer-card__desc {
  font-size: var(--text-body3s-size);
  line-height: var(--text-body3s-lh);
  color: var(--color-white);
}

.offer-card__btns {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.offers__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.offers__nav-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================
   STORIES OVERLAY
   ============================================================ */
.stories-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.stories-overlay.is-open {
  display: flex;
}

.stories-overlay__bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

/* Бокс: прогресс над белой панелью (как в макете player.png).
   Размер укрупнён по просьбе заказчика (14.08): в окне 440×560 фото слайдов
   сильно ужимались — теперь 560×760 с ограничением по высоте экрана. */
.stories-overlay__box {
  position: relative;
  z-index: 1;
  width: min(560px, 92vw);
  flex-shrink: 0;
}

/* Полоса прогресса — поверх верха блока, на затемнении */
.stories-overlay__progress {
  position: absolute;
  top: 14px;
  left: 16px;
  right: 16px;
  z-index: 5;
  display: flex;
  gap: 4px;
}

.stories-overlay__prog-item {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}

.stories-overlay__prog-item.is-done,
.stories-overlay__prog-item.is-active {
  background: rgba(255, 255, 255, 1);
}

.stories-overlay__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 760px;
  max-height: 90vh;
  border-radius: 20px;
  overflow: hidden;
  background-color: var(--color-white);
}

/* Затенение под полосой прогресса (как в stories) */
.stories-overlay__panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Тап-зоны листания: левая/правая половина панели (под кнопками) */
.stories-overlay__tap {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 1;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.stories-overlay__tap--left { left: 0; }
.stories-overlay__tap--right { right: 0; }

.stories-overlay__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border: none;
  border-radius: 50%;
  color: var(--color-dark);
  cursor: pointer;
  z-index: 5;
  transition: opacity 0.2s;
}

.stories-overlay__close:hover {
  opacity: 1;
}

.stories-overlay__body {
  position: relative;
  z-index: 0;
  padding: 44px 40px 16px 20px;
  pointer-events: none;
}

.stories-overlay__title {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
  color: var(--color-dark);
}

.stories-overlay__desc {
  margin-top: 10px;
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  font-weight: 300;
  color: var(--color-dark);
  overflow: hidden;
}

.stories-overlay__img-wrap {
  position: relative;
  z-index: 0;
  flex: 1;
  min-height: 0;
  margin-top: auto;
  overflow: hidden;
  pointer-events: none;
}

.stories-overlay__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Кнопка-пилюля поверх низа фото; не перехватывается тап-зонами (z выше) */
.stories-overlay__cta {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 18px;
  white-space: nowrap;
  background: var(--color-white);
  color: var(--color-dark);
  border-radius: var(--radius-pill);
  font-size: var(--text-btn-m-size);
  line-height: var(--text-btn-m-lh);
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s;
}

.stories-overlay__cta:hover {
  transform: translateX(-50%) scale(1.03);
}

.stories-overlay__side-btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity 0.2s;
}

.stories-overlay__side-btn:hover {
  opacity: 1;
}

.stories-overlay__side-btn img {
  width: 30px;
  height: 30px;
  display: block;
}

@media (max-width: 768px) {
  /* На мобильных листание — только тапами по половинам панели */
  .stories-overlay__side-btn { display: none; }

  .stories-overlay { padding: 16px; }

  .stories-overlay__box {
    width: 100%;
    max-width: 340px;
  }

  .stories-overlay__panel {
    height: min(560px, 80vh);
  }
}

/* ============================================================
   FEATURES GALLERY MODAL (попап карточки «Почему Спектр?»,
   макет figma-ref/about/modal.png)
   ============================================================ */
.feat-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  /* visibility дискретна: в обычном transition она переключалась бы на середине,
     и диалог ~125мс был бы «открыт», но невидим — фокус туда не переводился.
     Скрытие откладываем до конца затухания, показ мгновенный (см. .is-open). */
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.feat-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s; /* visibility снимаем сразу, а не на середине перехода */
}

.feat-modal__bg {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 24, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  cursor: pointer;
}

.feat-modal__box {
  position: relative;
  z-index: 1;
  width: min(1200px, 94vw);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Заголовок (название фичи) под фото — макет галереи 353:22166 */
.feat-modal__caption {
  text-align: center;
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-lh);
  font-weight: 400;
  color: var(--color-white);
}

.feat-modal__caption:empty { display: none; }

.feat-modal__top {
  display: flex;
  justify-content: flex-end;
}

.feat-modal__close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  color: var(--color-white);
  font-family: var(--font-regular);
  font-size: var(--text-body3-size);
  cursor: pointer;
}

.feat-modal__close-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-dark);
}

.feat-modal__frame {
  position: relative;
  height: min(760px, 78vh);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-dark);
}

/* contain, а не cover: фото в просмотре не должно обрезаться */
.feat-modal__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Тап-зоны листания (под бейджем/стрелками/описанием) */
.feat-modal__tap {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 1;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.feat-modal__tap--left { left: 0; }
.feat-modal__tap--right { right: 0; }

.feat-modal__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  background: var(--color-white-80);
  backdrop-filter: var(--blur-m);
  -webkit-backdrop-filter: var(--blur-m);
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-lh);
  color: var(--color-dark);
}

.feat-modal__nav {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  gap: 8px;
}

.feat-modal__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--color-white-80);
  backdrop-filter: var(--blur-m);
  -webkit-backdrop-filter: var(--blur-m);
  color: var(--color-dark);
  cursor: pointer;
  transition: background-color 0.2s;
}

.feat-modal__nav-btn:hover { background: var(--color-white); }

.feat-modal__desc {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  z-index: 2;
  padding: 14px 20px;
  background: rgba(20, 22, 30, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  font-weight: 300;
  color: var(--color-white);
  pointer-events: none;
}

.feat-modal__progress {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  gap: 4px;
  pointer-events: none;
}

.feat-modal__prog-item {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}

.feat-modal__prog-item.is-done,
.feat-modal__prog-item.is-active {
  background: rgba(255, 255, 255, 1);
}

/* Кликабельная карточка-обложка в сетке */
.feat-item--clickable { cursor: pointer; }

.feat-item--clickable:hover .feat-item__label {
  color: var(--color-orange);
}

@media (max-width: 768px) {
  .feat-modal { padding: 12px; }

  .feat-modal__nav { display: none; } /* листание тапами по фото */

  .feat-modal__frame { height: min(480px, 64vh); }

  .feat-modal__desc {
    bottom: 26px;
    padding: 10px 14px;
    font-size: 12px;
  }
}

/* ============================================================
   GALLERY LIGHTBOX (.gallery-modal) — подробный просмотр фото
   Клик по слайду галереи → картинка + стрелки + крестик + прогресс,
   сверху переключатель категорий (макет 353:22166).
   ============================================================ */
.gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  /* visibility дискретна: в обычном transition она переключалась бы на середине,
     и диалог ~125мс был бы «открыт», но невидим — фокус туда не переводился.
     Скрытие откладываем до конца затухания, показ мгновенный (см. .is-open). */
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.gallery-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s; /* visibility снимаем сразу, а не на середине перехода */
}

.gallery-modal__bg {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 24, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.gallery-modal__box {
  position: relative;
  z-index: 1;
  width: min(1200px, 94vw);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gallery-modal__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Переключатель категорий — «морозные» пилюли в стиле сайта */
.gallery-modal__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.gallery-modal__tab {
  padding: 9px 18px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: var(--blur-m);
  backdrop-filter: var(--blur-m);
  color: var(--color-white);
  font-family: var(--font-regular);
  font-size: var(--text-body2-size);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.gallery-modal__tab:hover { background: rgba(255, 255, 255, 0.26); }

.gallery-modal__tab.is-active {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-dark);
}

.gallery-modal__close {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.gallery-modal__close-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-dark);
  transition: transform 0.2s;
}

.gallery-modal__close:hover .gallery-modal__close-x { transform: rotate(90deg); }

.gallery-modal__frame {
  position: relative;
  height: min(760px, 78vh);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-dark);
}

/* contain, а не cover: фото в просмотре не должно обрезаться */
.gallery-modal__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Тап-зоны листания (левая/правая половина фото) */
.gallery-modal__tap {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 1;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gallery-modal__tap--left { left: 0; }
.gallery-modal__tap--right { right: 0; }

.gallery-modal__nav {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  gap: 8px;
}

.gallery-modal__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--color-white-80);
  -webkit-backdrop-filter: var(--blur-m);
  backdrop-filter: var(--blur-m);
  color: var(--color-dark);
  cursor: pointer;
  transition: background-color 0.2s;
}

.gallery-modal__nav-btn:hover { background: var(--color-white); }

.gallery-modal__progress {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 2;
  display: flex;
  gap: 4px;
  pointer-events: none;
}

.gallery-modal__prog-item {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}

.gallery-modal__prog-item.is-done,
.gallery-modal__prog-item.is-active {
  background: rgba(255, 255, 255, 1);
}

/* Слайды галереи кликабельны — курсор-лупа */
.section--gallery .gallery__slide-img { cursor: zoom-in; }

@media (max-width: 768px) {
  .gallery-modal { padding: 12px; }

  .gallery-modal__box { gap: 10px; }

  /* Табы в один ряд с горизонтальным скроллом */
  .gallery-modal__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .gallery-modal__tabs::-webkit-scrollbar { display: none; }

  .gallery-modal__tab {
    padding: 8px 14px;
    font-size: var(--text-body3-size);
  }

  .gallery-modal__nav { display: none; } /* листание тапами по фото */

  .gallery-modal__frame { height: min(70vh, 560px); }
}

/* ============================================================
   HEADER DROPDOWNS (.nav-dd)
   ============================================================ */
.nav-dd {
  position: fixed;
  top: calc(var(--header-height) + 8px);
  left: 50%;
  width: 900px;
  max-width: calc(100vw - 32px);
  z-index: 98;
  background: var(--color-white);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
  border-radius: 20px;
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
  pointer-events: none;
  /* visibility, а не только opacity: при opacity:0 панель остаётся в дереве
     фокуса, и Tab по шапке уводил в ~40 невидимых ссылок закрытых меню — фокус
     пропадал с экрана. visibility скрывает и от Tab, и от скринридера.
     Тайминги важны: visibility дискретна и в обычном transition переключилась бы
     на середине — панель оставалась бы скрытой ~110мс после открытия, и перевод
     фокуса стрелкой вниз не срабатывал. Поэтому скрытие ОТКЛАДЫВАЕМ до конца
     затухания (0s с задержкой), а показ делаем мгновенным (см. .is-visible). */
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}

.nav-dd.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.2s ease, transform 0.22s ease, visibility 0s linear 0s;
}

/* Правки img_72: затемнение страницы под раскрытым меню (хедер z-index 100 остаётся поверх) */
.nav-dd-dim {
  position: fixed;
  inset: 0;
  z-index: 97;
  background: rgba(26, 27, 31, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Затемнение никогда не перехватывает мышь — иначе путь курсора
   от пункта хедера к панели (8px зазор) закрывал меню раньше времени */
.nav-dd-dim.is-visible {
  opacity: 1;
}

/* Невидимый мостик над панелью: курсор не «проваливается» в зазор до хедера */
.nav-dd::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

.nav-dd__inner {
  display: flex;
  align-items: stretch;
  min-height: 372px;
}

/* Left column (menu content) */
.nav-dd__content {
  flex: 1;
  min-width: 0;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.nav-dd__title {
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-lh);
  font-weight: 400;
  color: var(--color-dark);
}

.nav-dd__link {
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
  color: var(--color-dark);
  white-space: nowrap;
  transition: color 0.15s;
}

.nav-dd__link:hover { color: var(--color-orange); }

.nav-dd__all { align-self: flex-start; }

/* Right banner column (reusable) */
.nav-dd__aside {
  flex: none;
  width: 312px;
  padding: 12px;
  display: flex;
  box-sizing: border-box;
}

.menu-banner {
  flex: 1;
  min-width: 0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  color: var(--color-white);
  background-color: var(--color-orange);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
}

.menu-banner--orange    { background-color: var(--color-orange); }
.menu-banner--blue      { background-color: var(--color-blue); }
.menu-banner--green     { background-color: var(--color-green); }
.menu-banner--lightblue { background-color: #B6D0FF; color: #1A1B1F; }
.menu-banner--lightblue .btn--outline-white { color: #1A1B1F; border-color: rgba(26, 27, 31, 0.45); }

/* fix22 img_18: декор-рендер из макета (кроп 280:4386) — не на всю карточку,
   а в правом нижнем углу, поверх цветной заливки. */
.menu-banner--decor {
  background-size: 66% 74%;
  background-position: 117% 84%;
  background-repeat: no-repeat;
}

/* fix22 img_19: стрелка у кнопки баннера */
.menu-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.menu-banner__cta img { flex: none; }

/* белая кнопка (btn--ghost) — стрелка тёмная, обводочная — белая */
.menu-banner__cta.btn--outline-white img { filter: brightness(0) invert(1); }
.menu-banner__cta.btn--ghost img { filter: none; }

.menu-banner__text { display: flex; flex-direction: column; gap: 12px; }

.menu-banner__title {
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-lh);
  font-weight: 400;
}

.menu-banner__desc {
  font-size: 12px;
  line-height: 1.3;
  font-weight: 400;
  opacity: 0.92;
}

.menu-banner__btns { display: flex; gap: 8px; flex-wrap: wrap; }

.menu-banner__pin {
  align-self: center;
  margin: auto;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--color-orange);
  color: var(--color-white);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

/* ----- Квартиры ----- */
.nav-dd__apt { display: flex; flex-direction: column; gap: 24px; }

.nav-dd__apt-links,
.nav-dd__apt-feats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

.nav-dd__divider { height: 1px; background: var(--color-divider); }

.nav-dd__discount {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 8px;
  background: #88FF90;
  color: #1A1B1F;
  font-size: 14px;
  line-height: 16px;
}

.nav-dd__discount img { display: block; }

/* ----- Ипотека ----- */
.nav-dd__content--mortgage { gap: 0; }

.nav-dd__mcols { display: flex; gap: 34px; flex: 1; }

.nav-dd__mcol {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.nav-dd__mcol { min-width: 0; }
.nav-dd__mcol:first-child { flex: 3 1 0; }
.nav-dd__mcol:last-child  { flex: 2 1 0; }

/* «Все квартиры» — синяя обводка (Secondary Dark из макета).
   fix22 img_17: кнопка целиком в одном цвете — текст и иконка тоже синие. */
.nav-dd__content--apt .nav-dd__all {
  border-color: var(--color-blue);
  color: var(--color-blue);
}

.nav-dd__content--apt .nav-dd__all img {
  /* image-gallery.svg — чёрная; перекрашиваем в --color-blue (#739EED) */
  filter: brightness(0) saturate(100%) invert(66%) sepia(31%) saturate(1155%) hue-rotate(191deg) brightness(97%) contrast(89%);
}

.nav-dd__content--apt .nav-dd__all:hover {
  background-color: var(--color-blue);
  color: var(--color-white);
}

.nav-dd__content--apt .nav-dd__all:hover img { filter: brightness(0) invert(1); }

.nav-dd__mcol-top { display: flex; flex-direction: column; gap: 24px; }

.nav-dd__list { display: flex; flex-direction: column; gap: 20px; } /* больше расстояние между пунктами (макет) */
.nav-dd__list li { display: flex; flex-direction: column; gap: 4px; }
.nav-dd__list .nav-dd__link { white-space: normal; } /* длинные пункты ипотеки переносятся */

.nav-dd__note {
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  font-weight: 300;
  color: var(--color-gray-desc);
}

.nav-dd__mcol-btn { align-self: flex-start; }

/* ----- Акции ----- */
.nav-dd__content--offers { flex: 0 0 220px; gap: 16px; }
.nav-dd__content--offers .nav-dd__all { margin-top: auto; } /* кнопка «Все акции» — вниз колонки (макет) */

.nav-dd__offers-desc {
  /* Макет 280:4481 — описание Body-3: 12px, Book, чёрный (было серым 14px). */
  font-family: var(--font-book);
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  font-weight: 300;
  color: var(--color-dark);
}

.nav-dd__aside--offers { flex: 1; width: auto; }
.nav-dd__offers-row { display: flex; gap: 12px; flex: 1; }
.nav-dd__offer { flex: 1; min-width: 0; }

.nav-dd__offer .menu-banner__title {
  font-size: var(--text-body2s-size);
  line-height: var(--text-body2s-lh);
  color: var(--color-white); /* текст белый на карточках-картинках (макет) */
}

/* Стиль «Только картинка-ссылка»: пустая карточка-фон, клик по всей площади */
.nav-dd__offer--img {
  cursor: pointer;
  transition: opacity 0.2s;
}

.nav-dd__offer--img:hover { opacity: 0.9; }

/* ----- Контакты ----- */
.nav-dd__content--contacts { gap: 24px; }

.nav-dd__contact-list { display: flex; flex-direction: column; gap: 16px; }

/* Макет 280:4526 — весь текст Body-3-strong 12px, чёрный (серого нет). */
.nav-dd__contact-item {
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  font-weight: 400;
  color: var(--color-dark);
}

.nav-dd__contact-lbl { font-weight: 400; color: var(--color-dark); }
.nav-dd__contact-item a { color: var(--color-dark); }

/* Соцсети (единый источник ftr_socials) */
.nav-dd__socials { display: flex; gap: 12px; }
.nav-dd__social { display: inline-flex; }
.nav-dd__social img { width: 26px; height: 26px; display: block; }

.nav-sub__socials { display: flex; gap: 12px; margin: 4px 0 12px; }
.nav-sub__social { display: inline-flex; }
.nav-sub__social img { width: 28px; height: 28px; display: block; }

.nav-dd__contact-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}

/* Яндекс-карта в попапе контактов (макет 280:4526).
   Статичная картинка карты = фолбэк-фон, поверх рисуется ymaps. */
.nav-dd__aside--contacts { padding: 12px; }

.nav-dd__map {
  flex: 1;
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background-color: #dfe8e0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.nav-dd__map.is-map { background: none; }
.nav-dd__map .ymaps-2-1-79-map,
.nav-dd__map [class*="ymaps"][class*="-map"] { border-radius: 12px; }

/* Кастомный гео-тег на карте: пин + оранжевая пилюля (как в макете) */
.ymap-tag {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 2px;
  transform: translate(-14px, -35px);
}

.ymap-tag__pin { display: inline-flex; }

.ymap-tag__label {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--color-orange);
  color: var(--color-white);
  font-size: var(--text-body3-size);
  line-height: 1;
  white-space: nowrap;
}

/* ============================================================
   BURGER MEGA-MENU (.nav-overlay)
   Desktop: panel below header (auto height), not full-screen
   Mobile: full-screen overlay
   ============================================================ */
.nav-overlay {
  position: fixed;
  top: calc(var(--header-height) + 8px);
  left: 50%;
  z-index: 99;
  width: 900px;
  max-width: calc(100vw - 32px);
  background-color: var(--color-white);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
  border-radius: 20px;
  overflow-y: auto;
  max-height: calc(100vh - var(--header-height) - 24px);
  /* Карточка-дропдаун (как остальные меню, макет 353:15703) */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-16px);
  transition: opacity 0.28s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.3s;
}

.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s; /* visibility снимаем сразу, а не на середине перехода */
  transform: translateX(-50%) translateY(0);
}

/* Backdrop behind the mobile drawer (desktop: none) */
.nav-backdrop {
  display: none;
}

/* Mobile-only: list of main sections (drill-down triggers) */
.nav-overlay__sections {
  display: none;
  flex-direction: column;
}

.nav-sectionlink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-divider);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-regular);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
  color: var(--color-dark);
}

.nav-sectionlink svg { flex-shrink: 0; color: var(--color-gray-desc); }
.nav-sectionlink:hover { color: var(--color-orange); }
.nav-sectionlink:hover svg { color: var(--color-orange); }

/* ----- Full-screen drill-down sub-panel ----- */
.nav-sub {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.32s;
}

.nav-sub.is-open {
  transform: translateX(0);
  visibility: visible;
}

.nav-sub__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-divider);
  position: sticky;
  top: 0;
  background: var(--color-white);
  z-index: 1;
}

.nav-sub__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-regular);
  font-size: var(--text-btn-m-size);
  color: var(--color-dark);
  padding: 6px 0;
}

.nav-sub__back:hover { color: var(--color-orange); }

.nav-sub__title {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
  color: var(--color-dark);
}

.nav-sub__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

.nav-sub__all { align-self: flex-start; }

.nav-sub__links {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nav-sub__link {
  font-size: var(--text-body1-size);
  line-height: 1.25;
  font-weight: 300;
  color: var(--color-dark);
  transition: color 0.2s;
}

.nav-sub__link:hover { color: var(--color-orange); }
.nav-sub__link--accent { color: var(--color-orange); }

.nav-sub__group {
  font-size: var(--text-body3s-size);
  line-height: var(--text-body3s-lh);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-desc);
}

.nav-sub__note {
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  font-weight: 300;
  color: var(--color-gray-desc);
}

.nav-sub__lead {
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  font-weight: 300;
  color: var(--color-gray-desc);
}

.nav-sub__contact {
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  font-weight: 300;
  color: var(--color-dark);
}

.nav-sub__contact-lbl { color: var(--color-gray-desc); }

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

.nav-sub__btns .btn { width: 100%; }

.nav-sub__map {
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 180px;
}

.nav-sub__map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Promo cards inside sub-panels */
.nav-sub__promo {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--color-white);
}

.nav-sub__promo--orange { background: var(--color-orange); }
.nav-sub__promo--calc { background: var(--color-blue); }

.nav-sub__promo-title {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
}

.nav-sub__promo-sub {
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  font-weight: 300;
  opacity: 0.92;
}

.nav-sub__promo-pct {
  position: absolute;
  right: 12px;
  top: 8px;
  font-size: 56px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

.nav-sub__promo .btn { align-self: flex-start; margin-top: 4px; }

.nav-sub__offers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nav-sub__offer {
  border-radius: var(--radius-md);
  padding: 16px;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  color: var(--color-white);
}

.nav-sub__offer--orange { background: var(--color-orange); }
.nav-sub__offer--blue { background: var(--color-blue); }
.nav-sub__offer--green { background: var(--color-green); }

.nav-sub__offer-title {
  font-size: var(--text-body2s-size);
  line-height: var(--text-body2s-lh);
}

.nav-overlay__inner {
  display: flex;
  align-items: stretch;
  gap: 34px; /* макет 353:15703: колонки меню gap 34 */
  padding: 32px;
}

.nav-overlay__col { flex: 1 1 0; min-width: 0; }

/* По макету (Menu 05 Burger 353:15703): заголовок колонки — H5 16px */
.nav-overlay__col-title {
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-lh);
  font-weight: 400;
  color: var(--color-dark);
  margin-bottom: 24px;
}

.nav-overlay__list {
  display: flex;
  flex-direction: column;
  gap: 12px; /* макет: List gap 12 */
  margin-bottom: 24px;
}

/* По макету: пункты меню — Text/ButtonLink/S = 12px / 1.25 */
.nav-overlay__link {
  font-size: 12px;
  line-height: 1.25;
  color: var(--color-dark);
  transition: color 0.2s;
}

.nav-overlay__link:hover {
  color: var(--color-orange);
}

.nav-overlay__socials {
  display: flex;
  gap: 12px;
}

/* По макету: соцсети — иконки 26px без фоновых кружков */
.nav-overlay__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 0;
  transition: opacity 0.2s;
}

.nav-overlay__social img { width: 26px; height: 26px; display: block; }

.nav-overlay__social:hover { background: transparent; opacity: 0.8; }

.nav-overlay__promo-col {
  flex: 0 0 312px; /* макет: Banner width 312 */
  margin-left: 36px; /* макет: gap 70 между блоком меню и баннером (34 + 36) */
  display: flex;
  flex-direction: column;
  gap: 10px; /* макет: gap 10 между баннерами */
}

.nav-overlay__promo-card {
  border-radius: var(--radius-md); /* макет: 12 */
  padding: 16px; /* макет: Content padding 16 */
  display: flex;
  flex-direction: column;
  gap: 16px; /* макет: Text gap 16 */
  justify-content: space-between;
  min-height: 140px;
}

.nav-overlay__promo-card--blue {
  background: var(--color-blue);
  color: var(--color-white);
}

.nav-overlay__promo-card--green {
  background: var(--color-green);
  color: var(--color-white);
}

/* fix22 img_20: фон-рендер из макета — дом справа, текст на синей заливке слева */
.nav-overlay__promo-card--decor {
  background-color: var(--color-blue);
  background-size: cover, auto 115%;
  background-position: center, right center;
  background-repeat: no-repeat;
}

/* fix22 img_20: у кнопки маршрута — иконка Яндекс-нав */
.nav-overlay__promo-route {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav-overlay__promo-route img { flex: none; }

/* Правки img_52: промо-карточки бургера с фото-фоном (фон задаётся inline из bp_image) */
.nav-overlay__promo-card--img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-white);
}

.nav-overlay__promo-title {
  font-size: var(--text-h5-size); /* макет: H5 16 */
  line-height: var(--text-h5-lh);
  margin-bottom: 8px;
}

.nav-overlay__promo-sub {
  font-size: var(--text-body3-size); /* макет: Body-3/XSmall 12/10 */
  line-height: var(--text-body3-lh);
  font-weight: 400;
  opacity: 0.9;
}

/* Низ карточки — ряд «адрес + кнопка» (макет: Bottom row space-between) */
.nav-overlay__promo-bottom {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.nav-overlay__promo-addr {
  font-size: var(--text-xs-size); /* макет: Body-XSmall 10 */
  line-height: var(--text-xs-lh);
  font-weight: 400;
  opacity: 0.85;
}

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 24px;
  width: min(1280px, calc(100vw - 48px));
  padding: 10px 10px 10px 28px;
  background: var(--color-white);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  transition: opacity 0.3s, transform 0.3s;
}

.cookie-banner.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  pointer-events: none;
}

.cookie-banner__text {
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  font-weight: 300;
  color: var(--color-dark);
  flex: 1;
}

.cookie-banner__btn {
  flex-shrink: 0;
  padding-inline: 28px;
}

.cookie-banner__link {
  color: var(--color-orange);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* ============================================================
   04 APARTMENT SEARCH
   ============================================================ */
.section--apartments {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-px);
}

.apts {
  display: flex;
  flex-direction: column;
  gap: 40px; /* больше воздуха между заголовком/фильтрами/сеткой (макет) */
}

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

.apts__title {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
}

.apts__all {
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  font-weight: 400;
  color: var(--color-gray-desc);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}

.apts__all:hover { color: var(--color-orange); }
.apts__arrow { font-size: 1.1em; }

.apts__filters {
  display: flex;
  align-items: flex-end;
  gap: 24px 44px; /* шире между группами фильтров (макет) */
  flex-wrap: wrap;
}

/* Кнопка-тогл фильтров — только мобайл (Правки: фильтры под кнопку) */
.apts__filters-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border: none;
  border-radius: 12px;
  background: var(--color-orange); /* яркая кнопка (макет) */
  color: var(--color-white);
  font-family: var(--font-regular);
  font-size: var(--text-body2-size);
  cursor: pointer;
}

/* Шапка/футер фильтров — только в мобильном попапе */
.apts__filters-head,
.apts__filters-actions { display: none; }

.apts__filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* fix22 img_5: группа особенностей без подписи — пилюли выравниваем по низу
   строки фильтров, как в макете 353:22416 / 807:32899 */
.apts__filter-group--feats { justify-content: flex-end; }

.apts__filter-label {
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  font-weight: 400;
  color: var(--color-gray-desc);
}

.apts__pills {
  display: flex;
  gap: 4px;
  /* fix22 img_5: у группы особенностей пилюль много — переносим по строкам,
     иначе ряд уезжает за край (в мобильном попапе — с горизонтальным скроллом) */
  flex-wrap: wrap;
}

/* Стиль фильтров "Filled" (макет 807:32899): невыбранные — серый текст на #F2F5F8
   без обводки; выбранные — тёмный текст + оранжевая обводка 1.5px. */
.apt-pill {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: var(--color-surface);
  font-family: var(--font-regular);
  font-size: 14px;
  line-height: 16px;
  color: var(--color-gray-desc); /* невыбранные — серый (макет) */
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.apt-pill:hover:not(.is-active) {
  background: var(--color-gray-200);
  color: var(--color-dark);
}

.apt-pill.is-active {
  border-color: var(--color-orange);
  color: var(--color-dark); /* выбранные — тёмный текст */
}

/* Пилюля с подсказкой «i» (макет 439:7614) */
.apt-pill--info {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.apt-pill__i {
  display: inline-flex;
  color: var(--color-gray-desc);
  cursor: help;
}

.apt-pill__tip {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 200px;
  max-width: 260px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s;
  pointer-events: none;
}

/* fix22 img_6: открытая подсказка НЕ ловит клики — иначе она накрывает пилюли
   следующей строки и мульти-выбор в группе становится недоступен. */
.apt-pill--info:hover .apt-pill__tip,
.apt-pill--info.is-tip-open .apt-pill__tip {
  opacity: 1;
  visibility: visible;
}

.apt-pill__tip-title {
  font-size: var(--text-body2s-size);
  line-height: var(--text-body2s-lh);
  font-weight: 400;
  color: #000;
}

.apt-pill__tip-text {
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  font-weight: 300;
  color: #000;
}

.apts__filter-group--price { margin-left: auto; }

/* Кнопка «Больше фильтров» → каталог (Secondary Dark: тёмная обводка, radius 12) */
.apts__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-md);
  background: none;
  font-family: var(--font-regular);
  font-size: var(--text-body2-size);
  color: var(--color-dark);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.apts__more:hover { background: var(--color-dark); color: var(--color-white); }

/* Правки img_26/35: цена двумя инпутами «от/до». Filled-стиль (макет): фон #F2F5F8, без обводки */
.apts__price-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.apts__price-field {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  background: var(--color-surface);
  border: none;
  border-radius: var(--radius-pill);
}

.apts__price-input {
  width: 52px;
  border: none;
  background: transparent;
  font-family: var(--font-regular);
  font-size: var(--text-body2s-size);
  color: var(--color-dark);
  -moz-appearance: textfield;
  appearance: textfield;
}

.apts__price-input::-webkit-outer-spin-button,
.apts__price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* outline снят по макету, но фокус обязан быть виден — тот же inset, что у
   .book-modal__input (иначе поле с клавиатуры не отличить от соседнего) */
.apts__price-input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--color-dark); }

.apts__price-val {
  font-size: var(--text-body2s-size);
  color: var(--color-dark);
}

.apts__price-sep {
  color: var(--color-gray-desc);
}

/* fix22 img_10 (макет 807:32899): выдача лежит на серой плашке во всю ширину
   секции — карточки остаются в колонке контента, плашка уходит под поля. */
.apts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  background: var(--color-surface);
  padding: 40px var(--container-px);
  margin-inline: calc(-1 * var(--container-px));
}

.apt-card {
  position: relative; /* контейнер stretched-link: картинка и название ведут в карточку (img.png) */
  border-radius: var(--radius-lg);
  /*background: var(--color-surface);*/
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Заголовок-ссылка растягивается на всю карточку; слайдер-фото (multi) остаётся кликабельным для листания */
.apt-card__link { text-decoration: none; }
.apt-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.apt-card .apt-gallery--multi { z-index: 2; }
.apt-card__link:hover { color: var(--color-orange); }

.apt-card__img-wrap {
  position: relative;
  height: 280px;
  overflow: hidden;
  border-radius: 16px; /* скруглённые фото карточек (макет) */
  /* Планировка вписывается целиком и уже блока — без подложки карточки
     выглядели разной ширины. */
  background: var(--color-white);
}

/* Планировка показывается целиком: cover срезал ей края (в каталоге давно contain) */
.apt-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Фото-листалка квартиры: слайды стопкой, листаются наведением (JS pointermove) */
.apt-gallery--multi { cursor: pointer; }

.apt-gallery--multi .apt-gallery__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 1;
}

.apt-gallery--multi .apt-gallery__slide.is-active {
  opacity: 1;
  z-index: 2;
}

/* Ссылка-оверлей на фото карточки: клик по изображению ведёт на квартиру
   (Правки: «изображения в каталоге и на главной должны быть ссылками»).
   Прозрачный слой поверх слайдов, но под точками/бейджами — листалка по
   наведению продолжает работать, события мыши всплывают в .apt-gallery. */
.apt-card__img-link,
.cat-card__img-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
}

/* Сегменты-индикаторы внизу фото */
.apt-gallery__dots {
  position: absolute;
  bottom: 10px;
  left: 12px;
  right: 12px;
  z-index: 4;
  display: flex;
  gap: 4px;
}

.apt-gallery__dot {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.5);
  transition: background-color 0.18s;
}

.apt-gallery__dot.is-active {
  background: var(--color-white);
}

/* На карточках квартир под сегментами белая планировка, а не тёмное фото —
   светлые полоски на ней сливались в «белые линии». */
.apt-card .apt-gallery__dot,
.cat-card .apt-gallery__dot { background: rgba(26, 27, 31, 0.15); }

.apt-card .apt-gallery__dot.is-active,
.cat-card .apt-gallery__dot.is-active { background: var(--color-dark); }

.apt-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-body3s-size);
  line-height: var(--text-body3s-lh);
  color: var(--color-white);
}

.apt-card__badge--orange { background: var(--color-orange); }
.apt-card__badge--green  { background: var(--color-green); }
.apt-card__badge--blue   { background: var(--color-blue); }

.apt-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.apt-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-body2-size);
  font-weight: 400;
  color: var(--color-dark);
}

.apt-card__sep { color: var(--color-border); }

.apt-card__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.apt-card__price {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
}

.apt-card__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.apt-card__tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--color-gray-200);
  font-size: var(--text-body3s-size);
  line-height: var(--text-body3s-lh);
  color: var(--color-gray-desc);
}

.apt-card__tag--green { background: rgba(77, 182, 115, 0.15); color: var(--color-green); }
.apt-card__tag--blue  { background: rgba(115, 158, 237, 0.15); color: var(--color-blue-dark); }

.apts__footer {
  display: flex;
  align-items: center;
  gap: 24px;
}

.apts__count {
  font-size: var(--text-body2-size);
  font-weight: 400;
  color: var(--color-gray-desc);
}

/* ============================================================
   05 FEATURES FEED
   ============================================================ */
.section--features {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-px);
}

.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.features__left {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.features__title {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
}

.features__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.features__item {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-divider);
  align-items: flex-start;
}

.features__item:first-child {
  padding-top: 0;
}

.features__num {
  font-size: var(--text-body3s-size);
  line-height: var(--text-body3s-lh);
  color: var(--color-gray-desc);
  flex-shrink: 0;
  padding-top: 2px;
}

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

.features__item-title {
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-lh);
}

.features__item-desc {
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  font-weight: 300;
  color: var(--color-gray-desc);
}

.features__right {
  position: sticky;
  top: calc(var(--header-height) + 24px);
}

.features__img {
  width: 100%;
  border-radius: var(--radius-xl);
  object-fit: cover;
  display: block;
}

/* ============================================================
   06 GALLERY
   ============================================================ */
.section--gallery {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-px);
}

.gallery {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

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

.gallery__title {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
}

.gallery__nav {
  display: flex;
  gap: 6px;
}

.gallery__grid {
  display: grid;
  grid-template-columns: 1fr 296px;
  gap: 12px;
  height: 480px;
}

.gallery__main {
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.gallery__main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery__thumbs {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.gallery__thumb {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.gallery__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery__thumb--more::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.gallery__thumb-count {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  color: var(--color-white);
}

/* ============================================================
   07 MAP + COMMUTE
   ============================================================ */
.section--map {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-px);
}

.map-section {
  display: flex;
  flex-direction: column;
  gap: 64px; /* макет 07 MAP: header→content 64 */
}

.map-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.map-section__title {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
}

.map-section__desc {
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  font-weight: 300;
  color: var(--color-gray-desc);
  margin-top: 6px;
}

.map-section__body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
}

.map-section__img-wrap {
  border-radius: var(--radius-xl);
  overflow: hidden;
  height: 520px;
}

.map-section__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

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

.map-section__commute-title {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
}

.map-section__commute-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.commute-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
}

.commute-item__icon {
  font-size: 20px;
  flex-shrink: 0;
}

.commute-item__label {
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  font-weight: 300;
  flex: 1;
}

.commute-item__time {
  font-size: var(--text-body2s-size);
  line-height: var(--text-body2s-lh);
  font-weight: 400;
  color: var(--color-orange);
  flex-shrink: 0;
}

/* ============================================================
   VISIT FORM
   ============================================================ */
.section--visit {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-px);
}

.visit {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: center;
}

.visit__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.visit__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 12, 24, 0.85) 0%, rgba(10, 12, 24, 0.3) 100%);
}

.visit__content {
  position: relative;
  z-index: 1;
  padding: 64px 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 600px;
}

.visit__title {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  color: var(--color-white);
}

.visit__desc {
  font-size: var(--text-body1-size);
  line-height: var(--text-body1-lh);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.8);
}

.visit__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.visit__fields {
  display: flex;
  gap: 12px;
}

.visit__input {
  flex: 1;
  height: 48px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-md);
  font-family: var(--font-regular);
  font-size: var(--text-body2-size);
  font-weight: 300;
  color: var(--color-white);
  transition: border-color 0.2s;
}

.visit__input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.visit__input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.6);
}

.visit__submit {
  align-self: flex-start;
}

.visit__legal {
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.5);
}

.visit__legal-link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.visit__contacts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.visit__addr,
.visit__hours {
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.6);
}

.visit__phone {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  color: var(--color-white);
  transition: color 0.2s;
}

.visit__phone:hover { color: var(--color-orange); }

/* ============================================================
   08 FINISH GALLERY
   ============================================================ */
.section--finish {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-px);
}

.finish {
  display: flex;
  flex-direction: column;
  gap: 56px; /* макет 08 FINISH: header→content 56 */
}

.finish__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.finish__title {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
}

.finish__desc {
  font-size: var(--text-body1-size);
  line-height: var(--text-body1-lh);
  font-weight: 300;
  color: var(--color-gray-desc);
  max-width: 480px;
}

.finish__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.finish-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  transition: box-shadow 0.2s;
}

.finish-card--active {
  box-shadow: 0 0 0 2px var(--color-orange);
}

.finish-card__img-wrap {
  height: 280px;
  overflow: hidden;
}

.finish-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.finish-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.finish-card__title {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
}

.finish-card__desc {
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  font-weight: 300;
  color: var(--color-gray-desc);
  margin-bottom: 8px;
}

/* ============================================================
   09 REVIEWS
   ============================================================ */
.section--reviews {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-px);
}

.reviews {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.reviews__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.reviews__title {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
}

.reviews__subtitle {
  font-size: var(--text-body1-size);
  line-height: var(--text-body1-lh);
  font-weight: 300;
  color: var(--color-gray-desc);
  margin-top: 6px;
}

.reviews__nav {
  display: flex;
  gap: 6px;
}

.reviews__list {
  overflow: visible;
}

.review-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.review-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-orange);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-body3s-size);
  flex-shrink: 0;
}

.review-card__name {
  font-size: var(--text-body2s-size);
  line-height: var(--text-body2s-lh);
}

.review-card__date {
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  font-weight: 400;
  color: var(--color-gray-desc);
}

.review-card__stars {
  margin-left: auto;
  color: var(--color-orange);
  font-size: 14px;
  letter-spacing: 2px;
}

.review-card__text {
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  font-weight: 300;
  color: var(--color-dark);
}

/* ============================================================
   10 FAQ
   ============================================================ */
.section--faq {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-px);
}

.faq {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

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

.faq__title {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
}

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

.faq__item {
  border-top: 1px solid var(--color-divider);
}

.faq__item:last-child {
  border-bottom: 1px solid var(--color-divider);
}

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-regular);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  color: var(--color-dark);
}

.faq__icon {
  font-size: 24px;
  font-weight: 300;
  flex-shrink: 0;
  transition: transform 0.25s;
  color: var(--color-gray-desc);
}

.faq__q[aria-expanded="true"] .faq__icon {
  transform: rotate(45deg);
  color: var(--color-orange);
}

.faq__a {
  padding-bottom: 20px;
}

.faq__a p {
  font-size: var(--text-body1-size);
  line-height: var(--text-body1-lh);
  font-weight: 300;
  color: var(--color-gray-desc);
  max-width: 720px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--color-dark);
  color: var(--color-white);
  margin-top: var(--section-gap);
}

.footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 64px 83px 40px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.footer__top {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 64px;
  align-items: start;
}

.footer__logo .logo__descr {
  color: rgba(255, 255, 255, 0.5);
}

.footer__logo .logo__img {
  filter: brightness(0) invert(1);
}

.footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.footer__nav-title {
  font-size: var(--text-body3s-size);
  line-height: var(--text-body3s-lh);
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__nav-link {
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s;
}

.footer__nav-link:hover { color: var(--color-white); }

.footer__contacts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.footer__phone {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  color: var(--color-white);
  transition: color 0.2s;
}

.footer__phone:hover { color: var(--color-orange); }

.footer__hours,
.footer__addr {
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  text-align: right;
}

.footer__socials {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transition: background-color 0.2s;
}

.footer__social:hover { background: rgba(255, 255, 255, 0.2); }

.footer__social img {
  filter: brightness(0) invert(1);
}

.footer__bottom {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 24px;
  align-items: start;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.footer__legal-text { grid-column: span 2; }

.footer__copy {
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.4);
}

.footer__legal {
  display: flex;
  gap: 24px;
}

.footer__legal-link {
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}

.footer__legal-link:hover { color: rgba(255, 255, 255, 0.7); }

/* ============================================================
   RESPONSIVE — TABLET/MOBILE
   ============================================================ */
@media (max-width: 1280px) {
  .header__inner {
    padding-inline: 40px;
  }

  .header__nav-list {
    gap: 16px;
  }

  .header__contacts {
    display: none;
  }

  .nav-dd__inner {
    padding-inline: 40px;
  }

  .footer__inner {
    padding-inline: 40px;
  }

  .nav-overlay {
    padding-inline: 40px;
  }
}

@media (max-width: 1024px) {
  .header__nav {
    display: none;
  }

  .header__contacts {
    display: none;
  }

  .header__right {
    display: none;
  }

  .header__mobile-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
    gap: 10px;
  }

  .header__mobile-actions .btn-round {
    width: 36px;
    height: 36px;
    border-color: var(--color-dark); /* чёрная обводка по макету */
  }

  /* Burger on mobile = bare 3 lines, no circle (matches mockup); чуть отбит от иконок */
  .header__mobile-actions .btn-round--burger {
    width: auto;
    height: auto;
    border: none;
    background: transparent;
    margin-left: 10px;
  }

  .header__mobile-actions .btn-round--burger:hover {
    background: transparent;
    color: var(--color-dark);
  }

  .header__mobile-actions .burger-icon {
    width: 24px;
    height: 16px;
    gap: 6px;
  }

  .logo {
    flex-shrink: 1;
    min-width: 0;
  }

  .nav-dd {
    display: none !important;
  }

  /* Mobile: full-width panel filling the screen below the header */
  .nav-overlay {
    top: var(--header-height);
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    border-radius: 0;
    padding: 24px;
    max-height: none;
    box-shadow: none;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.32s;
  }

  .nav-overlay.is-open {
    transform: translateX(0);
  }

  /* No backdrop needed — the panel fills the whole area below the header */
  .nav-backdrop { display: none; }

  /* Show the mobile drill-down section list */
  .nav-overlay__sections {
    display: flex;
    margin-bottom: 8px;
  }

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

  .features__right {
    position: static;
  }

  .gallery__grid {
    grid-template-columns: 1fr;
    height: auto;
  }

  .gallery__thumbs {
    height: 200px;
  }

  .map-section__body {
    grid-template-columns: 1fr;
  }

  .footer__top {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer__contacts {
    align-items: flex-start;
  }

  .footer__hours,
  .footer__addr {
    text-align: left;
  }
}

@media (max-width: 768px) {
  :root {
    --container-px: 16px;
    --section-gap: 56px;
  }

  /* Мобайл: равномерный зазор секций 56 (десктоп-оверрайды 110-140 не нужны) */
  .section + .section.section--cards,
  .section + .section.section--features,
  .section + .section.section--gallery,
  .section + .section.section--visit,
  .section + .section.section--finish {
    margin-top: var(--section-gap);
  }

  .header__inner {
    padding-inline: 16px;
  }

  .logo__descr {
    display: none;
  }

  .logo__img {
    width: 120px;
    height: auto;
  }

  .section--hero { --hero-h-m: 426px; } /* макет 333:4635: высота баннера CONTENT = 426 */

  .hero {
    height: var(--hero-h-m);
  }

  .hero__body {
    padding: 24px 20px 20px;
  }

  .hero__left {
    width: 100%;
  }

  .hero__title {
    font-size: 24px;
  }

  .hero__subtitle {
    font-size: 14px;
  }

  .hero__cta {
    width: 100%;
  }

  .hero__cta .btn {
    width: 100%;
  }

  /* Мобайл: 2-я кнопка (glass) под баннером — тёмная обводка (Secondary Dark по макету) */
  .hero__controls .btn--glass {
    background: transparent;
    border: 1.5px solid var(--color-dark);
    color: var(--color-dark);
  }

  /* Мобайл: контролы — под баннером (точки над кнопками) */
  .hero__controls {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .hero__nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* Мобайл: у hero нет стрелок-переключателей (в макете только точки-пагинация).
     Скрываем именно стрелки, а не всю группу: автопоказ на телефоне работает так
     же, и кнопка паузы обязана остаться — иначе останавливать движение нечем. */
  .hero__arrows .hero__arrow-btn:not(.hero__pause) {
    display: none;
  }

  /* Кнопка паузы стоит НА баннере, сразу ПРАВЕЕ ряда точек. Ряд отцентрован, а
     его ширина равна «число точек × 16px» (шаг точки на мобильной), поэтому от
     центра отступаем на половину ряда: число точек приходит из шаблона в
     --hero-dots. Позиционируем всю группу контролов (стрелки внутри скрыты
     выше), иначе под кнопками CTA остаётся пустой ряд от flex-gap. */
  .hero__arrows {
    position: absolute;
    top: calc(var(--hero-h-m) - 16px);
    left: calc(50% + var(--hero-dots, 5) * 8px);
    right: auto;
    z-index: 5;
    gap: 0;
    transform: translateY(-50%);
  }

  /* Без подложки и рамки — как точки: на фото остаётся только белая иконка.
     Зона нажатия те же 44px (палец, а не курсор), поэтому кнопка шире иконки.
     Тень нужна, чтобы иконка не растворялась на светлом кадре. */
  .hero__pause {
    width: 44px;
    height: 44px;
    margin-inline-start: 0;
    color: var(--color-white);
    border: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  }

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

  /* Мобайл (Правки #2 / 333:4635): точки-пагинация НА баннере (оверлей у низа
     фото 480px), кнопки остаются под баннером. .section--hero — position:relative. */
  .hero__progress {
    position: absolute;
    top: calc(var(--hero-h-m) - 26px); /* у нижнего края баннера (padding 16) */
    left: var(--container-px);
    right: var(--container-px);
    z-index: 4;
    margin: 0;
    justify-content: center;
    gap: 0;
  }

  /* Мобайл: точка 8px рисуется псевдоэлементом, сама кнопка 16x20 — палец
     попадает по ней уверенно (fix22 img.png), визуально шаг тот же 16px. */
  .hero__dot {
    flex: none;
    width: 16px;
    height: 20px;
    margin-block: 0;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
  }

  .hero__dot::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
  }

  .hero__dot.is-done::before,
  .hero__dot.is-active::before { background: var(--color-white); }
  .hero__dot.is-active::after { display: none; }

  /* Заливку на мобильной показывает ТОЛЬКО точка-псевдоэлемент, а у самой
     кнопки 16×20 фон обязан оставаться прозрачным. Десктопные правила
     .is-done/.is-active задают background-color (чтобы не сбрасывать
     background-clip у полоски прогресса), сброс `background: none` выше его не
     отменяет — и при листании за просмотренными точками проступал белый
     прямоугольник, растущий с каждым слайдом. */
  .hero__dot.is-done,
  .hero__dot.is-active { background-color: transparent; }

  /* Cards become a horizontal swipe carousel (matches mockup) */
  .cards {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .cards::-webkit-scrollbar {
    display: none;
  }

  .card {
    flex: 0 0 86%;
    width: auto;
    height: 124px;
    scroll-snap-align: start;
  }

  .card__title { font-size: 14px; line-height: 1.2; }
  .card__desc { font-size: 10px; line-height: 1.25; }
  .card__text { width: auto; gap: 4px; }
  .card__content { padding: 8px; }
  .card__image { width: 112px; }

  /* Кнопка карточки на мобайле — белая (Primary White), радиус 12 (макет 319:4895) */
  .card .btn--ghost {
    background: var(--color-white);
    color: var(--color-dark);
    border: none;
    border-radius: 12px;
  }

  .cards__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
  }

  .cards__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border);
    transition: background-color 0.2s, width 0.2s;
  }

  .cards__dot.is-active {
    background: var(--color-dark);
  }

  .offers__title { display: block; }

  /* Точки-пагинация идут сразу под карточками, кнопка «Все акции» — ниже точек */
  .offers { gap: 24px; }
  .offers__nav { justify-content: center; order: 1; }
  .offers__nav-btns { display: none; }

  .offers__row {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .offers__row::-webkit-scrollbar { display: none; }

  .offer-card {
    flex: 0 0 78%;
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1; /* квадратные карточки акций (макет ~280x280) */
    scroll-snap-align: start;
  }

  .offers__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 0;
  }

  .offers__dot {
    width: 24px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-border);
    transition: background-color 0.2s, width 0.2s;
  }

  .offers__dot.is-active { background: var(--color-dark); }

  /* Stories: responsive heading + horizontal carousel */
  .stories__title-d { display: none; }
  .stories__title-m { display: inline; }

  .stories__nav { display: none; }

  .stories__list {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    padding: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .stories__list::-webkit-scrollbar { display: none; }

  .story {
    flex: 0 0 44%;
    scroll-snap-align: start;
  }

  .stories__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
  }

  .stories__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border);
    transition: background-color 0.2s;
  }

  .stories__dot.is-active { background: var(--color-dark); }

  .map-section {
    gap: 32px;
  }

  /* Полная мобильная переделка карты — ниже, в блоке после десктопных стилей 07 MAP
     (иначе базовые правила .map-section__* перебивают мобильные по каскаду). */

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

  .apts__filters-toggle {
    display: flex;
    width: 100%;
  }

  /* Фильтры свёрнуты под кнопку; раскрываются по .is-open */
  .apts__filters {
    gap: 16px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    margin-top: 12px;
  }

  /* Мобайл: фильтры открываются попапом на весь экран (макет 353:22466) */
  .apts__filters.is-open {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 200;
    margin-top: 0;
    padding: 24px 16px;
    background: var(--color-white);
    overflow-y: auto;
    gap: 24px;
  }

  .apts__filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px;
  }

  .apts__filters-title {
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #000;
  }

  .apts__filters-close {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-surface);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-dark);
    cursor: pointer;
  }

  .apts__filters-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
  }

  .apts__filters-apply { flex: 1; }

  .apts__filters-reset {
    padding: 8px 16px;
    border: 1px solid var(--color-dark);
    border-radius: 12px;
    background: transparent;
    color: var(--color-dark);
    font-family: var(--font-regular);
    font-size: var(--text-btn-m-size);
    cursor: pointer;
  }

  .apts__filter-group--price {
    margin-left: 0;
  }

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

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

  .gallery__grid {
    height: auto;
    grid-template-columns: 1fr;
  }

  .visit__content {
    padding: 40px 20px;
  }

  .visit__fields {
    flex-direction: column;
  }

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

  .footer__inner {
    padding-inline: 20px;
    padding-top: 40px;
  }

  .footer__bottom {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .nav-overlay {
    padding-inline: 16px;
  }

  .nav-overlay__inner {
    flex-direction: column;
    gap: 32px;
    padding: 0;
  }

  .nav-overlay__col,
  .nav-overlay__promo-col {
    flex: none;
  }

  .nav-overlay__promo-col { margin-left: 0; }
}

/* ============================================================
   PAGE OFFSET FOR FIXED HEADER
   ============================================================ */
main {
  padding-top: var(--header-height);
}

/* ============================================================
   04 APT CARDS — badges, new class overrides
   ============================================================ */
.apts__subtitle {
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  font-weight: 300;
  color: var(--color-gray-desc);
  margin-top: 6px;
}

.apts__subtitle-link {
  color: var(--color-gray-desc); /* «Подробнее» — серым (макет) */
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.apts__price-label {
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  font-weight: 400;
  color: var(--color-gray-desc);
}

.apts__price-unit {
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  font-weight: 400;
  color: var(--color-gray-desc);
}

.apts__feature-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}

/* apt-card__badges — overlay of colored pills on card image */
.apt-card__badges {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.apt-badge {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1;
  font-weight: 400;
  color: var(--color-white);
  white-space: nowrap;
}

/* Mockup semantics */
.apt-badge--house   { background: var(--color-orange); color: var(--color-white); }
.apt-badge--feature { background: var(--color-white); color: var(--color-dark); } /* без тени (макет) */
.apt-badge--program { background: var(--color-blue); color: var(--color-white); } /* Правки: тег ипотеки — синий #739EED (макет 597:14243), а не лавандовый */
.apt-badge--booked  { background: var(--color-dark); color: var(--color-white); }
.apt-badge--green   { background: var(--color-green); color: var(--color-white); }

/* Legacy aliases (kept so any stale markup still renders sanely) */
.apt-badge--blue   { background: var(--color-blue); }
.apt-badge--gray   { background: var(--color-white); color: var(--color-dark); }
.apt-badge--orange { background: var(--color-dark); }
.apt-badge--purple { background: var(--color-orange); }
.apt-badge--teal   { background: var(--color-green); }

.apt-card__body {
  padding: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.apt-card__type {
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-lh);
  font-weight: 400;
  color: var(--color-dark);
  white-space: nowrap;
}

.apt-card__prices {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.apt-card__price {
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-lh);
  font-weight: 400;
  color: #EE6E47;
  white-space: nowrap;
}

.apt-card__price-old {
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  font-weight: 400;
  color: var(--color-gray-desc);
  text-decoration: line-through;
  white-space: nowrap;
}

.apt-card__discount {
  /* fix22 img_1 (макет 594:15193): 24px высотой, паддинг 4/8, радиус 8, текст 10px */
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 4px 8px;
  border-radius: 8px;
  background: #88FF90; /* Правки: пилюля скидки — ярко-зелёная с тёмным текстом (макет 595:16324) */
  color: var(--color-dark);
  font-size: 10px;
  line-height: 1.25;
  white-space: nowrap;
}

.apts__nav {
  display: flex;
  gap: 6px;
}

.apts__footer {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.apts__show-all {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--color-dark);
  border-radius: 12px;
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  font-weight: 400;
  color: var(--color-dark);
  background: transparent;
  transition: border-color 0.2s, color 0.2s;
}

.apts__show-all:hover { border-color: var(--color-orange); color: var(--color-orange); }

.apts__show-all-ico { width: 16px; height: 16px; display: block; }

.apts__count-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--color-orange);
  font-size: 11px;
  line-height: 1;
  color: var(--color-white);
}

.apts__clear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: none;
  border-radius: 12px;
  background: var(--color-white);
  font-family: var(--font-regular);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  color: var(--color-dark);
  cursor: pointer;
  transition: color 0.2s;
}

.apts__clear:hover { color: var(--color-orange); }
.apts__clear img { display: block; opacity: 0.55; }

.apts__help {
  display: flex;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap;
}

.apts__help-text {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: -0.02em;
  font-weight: 400;
  flex: none;
}

.apts__help-desc {
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  font-weight: 400;
  color: var(--color-dark);
  flex: 1;
  min-width: 220px;
}

/* ============================================================
   ROUTE MODAL — попап «Построить маршрут» (Яндекс / 2ГИС)
   ============================================================ */
.route-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 60px 20px 20px;
}

.route-modal.is-open { display: flex; }

.route-modal__bg { position: absolute; inset: 0; background: rgba(16, 17, 20, 0.55); }

.route-modal__dialog {
  position: relative;
  display: flex;
  width: 834px;
  max-width: 100%;
  max-height: 100%;
  background: var(--color-white);
  border-radius: 20px;
  overflow: hidden;
}

.route-modal__close {
  position: absolute;
  top: -40px;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  color: var(--color-white);
  font-family: var(--font-regular);
  font-size: 12px;
  cursor: pointer;
}

.route-modal__close-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.route-modal__left {
  flex: none;
  width: 404px;
  max-width: 55%;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}

.route-modal__text { display: flex; flex-direction: column; gap: 16px; }

.route-modal__title {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--color-dark);
}

.route-modal__desc {
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  font-weight: 400;
  color: var(--color-dark);
}

.route-modal__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }

.route-modal__tab {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1.5px solid #BFC3CB;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  font-family: var(--font-regular);
  font-size: var(--text-body2-size);
  color: var(--color-dark);
  cursor: pointer;
  transition: border-color 0.2s;
}

.route-modal__tab img { display: block; width: 16px; height: 16px; }
.route-modal__tab.is-active { border-color: var(--color-dark); }

.route-modal__note {
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  color: var(--color-gray-desc);
}

.route-modal__note a { color: var(--color-gray-desc); text-decoration: underline; }

.route-modal__right {
  flex: 1;
  min-width: 0;
  background: var(--color-surface);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: center;
}

.route-modal__hint,
.route-modal__phone {
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  color: var(--color-dark);
}

.route-modal__phone a { color: var(--color-dark); }

.route-modal__panel { display: none; flex-direction: column; align-items: center; gap: 24px; }
.route-modal__panel.is-active { display: flex; }

.route-modal__link-lbl {
  font-size: var(--text-body2s-size);
  line-height: var(--text-body2s-lh);
  font-weight: 400;
  color: var(--color-dark);
}

.route-modal__qr {
  display: block;
  width: 174px;
  height: 174px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.route-modal__qr img { width: 100%; height: 100%; object-fit: cover; display: block; }

.route-modal__open-link {
  display: inline-flex;
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--color-orange);
  color: var(--color-white);
  font-size: var(--text-body2-size);
}

@media (max-width: 768px) {
  .route-modal__dialog {
    flex-direction: column;
    width: 420px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
  .route-modal__left { width: 100%; max-width: none; }
  .route-modal__right { width: 100%; }
}

/* ============================================================
   05 FEATURES PHOTO GRID
   ============================================================ */
.section--features {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-px);
}

.feat-section {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.feat-section__title {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
}

/* Сетка по макету: плитки 282px, гэп 40, поле 96 (контейнер 80 + 16) */
.feat-grid {
  columns: 4;
  column-gap: 40px;
  padding: 0 16px;
}

.feat-item {
  display: flex;
  flex-direction: column;
  gap: 16px; /* макет 234:4409: img → заголовок 16 */
  break-inside: avoid;
  margin-bottom: 48px; /* макет: вертикальный зазор между карточками в колонке 48 */
}

.feat-item__img {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 220px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Бейдж-счётчик фото (число = размер галереи карточки).
   fix22 img_2 (компонент 285:4683): 20px высотой, паддинг 4/10, радиус 10,
   иконка 12, текст 10px, полупрозрачная белая подложка с блюром 2px. */
.feat-item__badge {
  position: absolute;
  top: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  font-size: 10px;
  line-height: 1.25;
  color: var(--color-dark);
}

.feat-item__badge img {
  width: 12px;
  height: 12px;
}


/* Staggered masonry heights to mirror Figma (column fill order) */
.feat-item:nth-child(1) .feat-item__img { height: 336px; } /* парковки  (col1 top) */
.feat-item:nth-child(2) .feat-item__img { height: 312px; } /* кладовые  (col1 bot) */
.feat-item:nth-child(3) .feat-item__img { height: 358px; } /* двор      (col2 top) */
.feat-item:nth-child(4) .feat-item__img { height: 358px; } /* соседи    (col2 bot) */
.feat-item:nth-child(5) .feat-item__img { height: 266px; } /* лес       (col3 top) */
.feat-item:nth-child(6) .feat-item__img { height: 340px; } /* питомцы   (col3 bot) */
.feat-item:nth-child(7) .feat-item__img { height: 366px; } /* коворкинги(col4 top) */
.feat-item:nth-child(8) .feat-item__img { height: 345px; } /* спорт     (col4 bot) */

/* Типы карточки из админки; «авто» (без класса) — высоты макета выше */
.feat-grid .feat-item--standard .feat-item__img { height: 220px; }
.feat-grid .feat-item--tall .feat-item__img { height: 300px; }
.feat-grid .feat-item--compact .feat-item__img { height: 180px; }

.feat-item__label {
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  font-weight: 400;
  color: var(--color-dark);
}

/* ============================================================
   06 GALLERY — Swiper + vertical filter tabs sidebar
   ============================================================ */

/* Override old flex gap — spacing controlled via margin-bottom on header */
.gallery { gap: 0; }

.gallery__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.gallery__nav {
  display: flex;
  gap: 6px;
}

.gallery__body {
  display: flex;
  gap: 20px;
  align-items: stretch;
}

.gallery__side {
  flex: 0 0 170px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 4px;
}

/* Обёртка табы+стрелки: на десктопе прозрачна (display:contents → колонка как было),
   на мобайле становится строкой «табы слева / стрелки справа», как в секции «Отделка». */
.gallery__controls { display: contents; }

.gallery__side .gallery__title {
  margin-bottom: 32px;
}

.gallery__side .gallery__nav {
  margin-top: auto;
}

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

/* Дропдаун подразделов-месяцев у «Хода строительства» (Правки img_41) */
.gallery__months {
  position: relative;
  margin-top: 12px;
  width: max-content;
  min-width: 160px;
}

.gallery__months[hidden] { display: none; }

.gallery__months-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-family: var(--font-regular);
  font-size: var(--text-btn-m-size);
  line-height: var(--text-btn-m-lh);
  color: var(--color-dark);
  cursor: pointer;
}

.gallery__months.is-open .gallery__months-toggle img { transform: rotate(180deg); }
.gallery__months-toggle img { transition: transform 0.2s; }

.gallery__months-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  min-width: 100%;
  margin: 0;
  padding: 8px;
  list-style: none;
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: 0 8px 28px rgba(26, 27, 31, 0.14);
}

.gallery__months-list[hidden] { display: none; }

.gallery__months-option {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: var(--text-btn-m-size);
  line-height: var(--text-btn-m-lh);
  color: var(--color-gray-desc);
  white-space: nowrap;
  cursor: pointer;
}

.gallery__months-option:hover { background: var(--color-surface); }
.gallery__months-option.is-selected { color: var(--color-dark); }

.gallery__nav {
  display: flex;
  gap: 6px;
  margin-top: 24px;
}

.gallery__tab {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 16px;
  border: 1.5px solid #BFC3CB;
  background: transparent;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  font-family: var(--font-regular);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  color: var(--color-gray-desc); /* неактивные табы — серый текст (макет) */
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, color 0.2s;
}

.gallery__tab:hover {
  border-color: var(--color-dark);
}

.gallery__tab.is-active {
  background: transparent;
  border-color: var(--color-dark);
  color: var(--color-dark);
}

.gallery__swiper {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.gallery__slide-img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-xl);
}

/* Затемнение внизу фото (макет: у «Images» градиент в низ), чтобы белые
   полоски-сегменты читались на светлых кадрах. */
.gallery__swiper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.38) 100%);
  pointer-events: none;
}

/* Полоски-сегменты внизу фото: сколько картинок / какая активна (макет 234:4181).
   Штатная пагинация Swiper, стилизованная под полосы на всю ширину. */
.gallery__bullets {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 80%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 8px;
  pointer-events: none;
}

/* Swiper вешает свои классы (.swiper-pagination-bullets.swiper-pagination-horizontal
   → left:0; width:100%; bottom:8px). Перебиваем с большей специфичностью:
   пагинация 80% по центру. */
.gallery__bullets.swiper-pagination-bullets.swiper-pagination-horizontal {
  left: 50%;
  bottom: 16px;
  width: 80%;
  transform: translateX(-50%);
}

.gallery__bullets .swiper-pagination-bullet {
  flex: 1;
  height: 2px;
  margin: 0;
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
  border-radius: 1px;
  pointer-events: auto;
  cursor: pointer;
  transition: background-color 0.2s;
}

.gallery__bullets .swiper-pagination-bullet-active {
  background: var(--color-white);
}

/* ============================================================
   07 MAP — transit cards, pins, ymaps button
   ============================================================ */
/* ============================================================
   07 MAP — фирменные теги объектов, табы-фильтры, commute-карточки
   ============================================================ */
.map-section__img-wrap {
  border-radius: var(--radius-xl);
  overflow: hidden;
  height: 520px;
  position: relative;
}

/* Контейнер сцены: на десктопе прозрачный (inset 0), на мобайле — горизонтальный скролл */
.map-section__scroller {
  position: absolute;
  inset: 0;
}

/* Стрелки прокрутки карты — только мобайл */
.map-section__scroll-nav { display: none; }

/* Масштабируемая сцена (картинка + теги) для зума/пана */
.map-section__stage {
  position: absolute;
  inset: 0;
  transform-origin: center center;
  transition: transform 0.18s ease;
  will-change: transform;
}

.map-section__stage.is-pannable { cursor: grab; touch-action: none; }
.map-section__stage.is-grabbing { cursor: grabbing; transition: none; }

.map-section__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Новый рендер 2:1 в контейнере 2.46:1 — кроп как в макете (Images 234:4154,
     кадр показывает средне-нижнюю часть: строки ~89..609 из 640), чтобы теги совпали. */
  object-position: 50% 74%;
  display: block;
}

/* Левая панель: табы сверху + кнопка «Записаться» снизу */
.map-section__panel {
  position: absolute;
  top: 30px;
  left: 30px;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  z-index: 6;
  pointer-events: none;
}

.map-section__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 360px;
  pointer-events: auto;
}

.map-tab {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 16px;
  border: 1.5px solid #F2F5F8;
  background: rgba(26, 27, 31, 0.35);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: var(--color-white);
  font-family: var(--font-regular);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  font-weight: 400;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.map-tab:hover { background: rgba(26, 27, 31, 0.5); }

.map-tab.is-active {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-dark);
}

.map-section__excursion {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  border-radius: 16px;
  background: var(--color-white);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: var(--color-dark);
  font-family: var(--font-regular);
  font-size: 16px;
  line-height: 20px;
  pointer-events: auto;
  transition: opacity 0.2s;
}

.map-section__excursion:hover { opacity: 0.9; }

/* Теги объектов: кружок с иконкой + скруглённая плашка с текстом */
.map-section__pins {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.map-tag {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

.map-tag--schools { --tag-color: #D34C80; --tag-ink: #fff; }
.map-tag--shops   { --tag-color: #EE6E47; --tag-ink: #fff; }
.map-tag--sport   { --tag-color: #739EED; --tag-ink: #fff; }
.map-tag--med     { --tag-color: #FFD34B; --tag-ink: #1A1B1F; }
.map-tag--parks   { --tag-color: #4DB673; --tag-ink: #fff; }
.map-tag--quarter { --tag-color: #FFD34B; --tag-ink: #1A1B1F; } /* дома/застройщик — жёлтые (макет) */

/* Цвет пина можно задать явно в админке — он важнее цвета категории */
.map-tag--c-yellow { --tag-color: #FFD34B; --tag-ink: #1A1B1F; }
.map-tag--c-green  { --tag-color: #4DB673; --tag-ink: #fff; }
.map-tag--c-pink   { --tag-color: #D34C80; --tag-ink: #fff; }
.map-tag--c-blue   { --tag-color: #739EED; --tag-ink: #fff; }
.map-tag--c-orange { --tag-color: #EE6E47; --tag-ink: #fff; }

.map-tag__head {
  position: absolute;
  top: -14px;
  left: -14px;
  /* Тег — кнопка: клик раскрывает подпись (на телефоне навести нечем). */
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 2px;
  pointer-events: auto;
  /* Слой тегов лежит вне масштабируемой сцены (см. initMapZoom): позиции
     пересчитывает JS, сам тег всегда 1:1 — поэтому текст не мылит при зуме. */
  transition: transform 0.18s ease;
}

/* Пин без подписи и подсказки рендерится как <span> (называть нечем, раскрывать
   тоже) — он декоративный, поэтому не обещаем нажатие курсором. */
span.map-tag__head {
  cursor: default;
}

.map-tag--left .map-tag__head {
  left: auto;
  right: -14px;
  flex-direction: row-reverse;
}

.map-tag__dot {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tag-color);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.map-tag__icon {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: brightness(0) invert(1); /* белая иконка на цветном кружке */
}

.map-tag--med .map-tag__icon,
.map-tag--quarter .map-tag__icon,
.map-tag--c-yellow .map-tag__icon { filter: brightness(0); } /* тёмная иконка на жёлтом */

/* Явный цвет отменяет затемнение иконки, доставшееся от категории */
.map-tag--c-green .map-tag__icon,
.map-tag--c-pink .map-tag__icon,
.map-tag--c-blue .map-tag__icon,
.map-tag--c-orange .map-tag__icon { filter: none; }

.map-tag__label {
  display: none;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--tag-color);
  color: var(--tag-ink);
  font-family: var(--font-regular);
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  font-weight: 400;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* Подпись — flex-контейнер, а он съедает пробел перед ценой: отбиваем отступом. */
.map-tag__price { margin-left: 4px; }

.map-tag.is-open .map-tag__label,
.map-tag:hover .map-tag__label,
.map-tag:focus-within .map-tag__label {
  display: inline-flex;
}

/* Белая плашка с доп. текстом — раскрывается под тегом при наведении */
.map-tag__tip {
  position: absolute;
  top: 20px;
  left: -14px;
  width: 220px;
  box-sizing: border-box;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: 8px;
  color: #000;
  font-family: var(--font-regular);
  font-size: 10px;
  line-height: 1.25;
  font-weight: 400;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  pointer-events: none;
}

.map-tag--left .map-tag__tip { left: auto; right: -14px; }

/* По макету подсказка раскрывается ТОЛЬКО нажатием на текст точки: при показе
   по наведению она выскакивала сама и перекрывала соседние точки. */
.map-tag.is-picked .map-tag__tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.map-tag:hover, .map-tag:focus-within, .map-tag.is-picked { z-index: 8; }

/* Слой точек лежит ниже панели с табами и кнопкой, поэтому на время открытой
   подсказки поднимаем его: иначе кнопка «Записаться на экскурсию» её перекрывает. */
.map-section__pins.has-tip { z-index: 7; }

/* У бокового края подсказку раскрываем в сторону кадра, иначе её обрезает
   рамка (класс ставит JS; по вертикали он же подтягивает её отступом). */
.map-tag.is-tip-left .map-tag__tip { left: auto; right: -14px; }
.map-tag.is-tip-right .map-tag__tip { left: -14px; right: auto; }

/* --- Дома на карте: контуры на фото + сводка из каталога --- */

/* Слой лежит внутри масштабируемой сцены, поэтому контуры едут вместе с фото. */
.map-zones {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.map-zones__shape {
  /* Слой кликов не принимает, а сами контуры — принимают: клик по дому
     открывает ту же сводку, что и клик по подписи. */
  pointer-events: auto;
  cursor: pointer;
  fill: rgba(255, 255, 255, 0.06);
  stroke: rgba(255, 255, 255, 0.55);
  /* Толщина в пикселях: иначе зум растягивал бы и обводку. */
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  transition: fill 0.15s ease, stroke 0.15s ease;
}

.map-zones__shape.is-hot {
  fill: rgba(255, 92, 0, 0.26);
  stroke: var(--color-white);
}

/* Сводка по дому: та же плашка, что у подсказок, но с строками и ссылкой. */
.map-tag__tip--house {
  width: 240px;
  padding: 12px 14px;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-gray-desc);
}

/* Подсказка раскрывается кликом, значит по ссылке внутри надо давать щёлкнуть. */
.map-tag.is-picked .map-tag__tip { pointer-events: auto; }

.map-house__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.map-house__head b {
  font-size: var(--text-body3-size);
  font-weight: 500;
  color: var(--color-dark);
}

.map-house__status {
  flex: none;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--color-surface);
  font-size: 10px;
  font-style: normal;
  color: var(--color-gray-desc);
}

.map-house__status.is-done {
  background: rgba(46, 168, 100, 0.14);
  color: #2ea864;
}

.map-house__price {
  font-size: var(--text-body3-size);
  font-weight: 500;
  color: var(--color-dark);
}

.map-house__cta {
  margin-top: 2px;
  color: var(--color-orange);
  text-decoration: none;
}

.map-house__cta:hover { text-decoration: underline; }

/* Контролы зума (декоративные) */
.map-section__zoom {
  position: absolute;
  right: 30px;
  bottom: 30px;
  display: flex;
  gap: 4px;
  z-index: 6;
}

.map-zoom-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: #000;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.map-zoom-btn:hover { background: rgba(255, 255, 255, 0.75); }

/* Commute-карточки — горизонтальная лента с фейдом и стрелками.
   fix22 img_12 (макет 234:4167): лента и листалки лежат в ОДНОЙ строке —
   стрелки справа, за границей ленты карточек, прибиты к верху строки. */
.map-section__commute {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}

.map-section__transit {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  flex: 1 1 auto;
  min-width: 0;
}

.map-section__transit::-webkit-scrollbar { display: none; }

.transit-card {
  position: relative;
  flex: 0 0 340px;
  display: flex;
  flex-direction: column;
  height: 130px;
  padding: 20px 24px;
  background: var(--color-surface);
  border-radius: 20px;
  overflow: hidden;
}

.map-section__commute-fade {
  position: absolute;
  top: 0;
  right: 96px; /* фейд заканчивается на границе ленты, не заезжая под стрелки */
  bottom: 0;
  width: 92px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 72%);
}

/* fix22 img_12: листалки — справа в строке с карточками (макет 234:4173),
   а не над блоком, где было непонятно, к карте они относятся или к карточкам. */
.map-section__commute-nav {
  position: static;
  flex: none;
  display: flex;
  gap: 8px;
  z-index: 2;
}

.commute-arrow {
  flex: none;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--color-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s;
}

.commute-arrow:hover { opacity: 0.9; }

.commute-arrow__ico {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.transit-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 4px;
}

.transit-card__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-lh);
  font-weight: 400;
  color: var(--color-dark);
}

.transit-card__point { width: 12px; height: 12px; flex: none; opacity: 0.65; }

.transit-card__dist {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  font-weight: 400;
  color: var(--color-gray-desc);
}

.transit-card__ico {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}


.transit-card__sub {
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  font-weight: 400;
  color: var(--color-gray-desc);
}

.transit-card__img {
  /* Макет 234:4166 + fix22 img_13: транспорт торчит из карточки только «мордой».
     Кроп макета: картинка начинается на 56% ширины карточки и в 1.22 раза шире
     неё, т.е. внутрь попадает лишь первая треть изображения. Прозрачность 80%,
     чтобы картинка не спорила с текстом. */
  position: absolute;
  left: 56%;
  right: auto;
  bottom: 4px;
  width: 122%;
  height: auto;
  object-fit: contain;
  opacity: 0.8;
  pointer-events: none;
}

/* Правки img_58: QR-карточка — QR-код меньше и правее, с отступом по краю; заголовок переносится в 2 строки */
.transit-card--qr .transit-card__name {
  display: block;
  white-space: normal;
  max-width: 130px;
}

/* fix22 img_14: QR наезжал на подпись — картинка позиционировалась от левого края
   (базовое left:56%) и налезала на текст. По макету (676:11050) QR стоит у правого
   края карточки, 119x119, а текстовая колонка ограничена его левой границей. */
.transit-card--qr .transit-card__img {
  left: auto;
  right: 9px;
  top: 5px;
  bottom: auto;
  transform: none;
  width: 119px;
  height: 119px;
  opacity: 1; /* QR должен читаться сканером — без прозрачности */
}

.transit-card--qr .transit-card__body {
  max-width: 185px;
}

/* ============================================================
   VISIT FORM — Split layout (dark left, image right)
   ============================================================ */
.visit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
  background: var(--color-white);
  border-radius: 20px;
  padding: 12px;
}

.visit__left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px 16px 20px 28px;
  justify-content: center;
}

/* Кнопка-триггер попапа записи — только мобайл */
.visit__open { display: none; }

/* Правки img_61/62: кнопка «Построить маршрут» — чёрная (а не бледная обводка) */
.visit__route.btn--outline {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}

.visit__route.btn--outline:hover {
  background: #000;
  border-color: #000;
  color: var(--color-white);
}

.visit__title {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  color: var(--color-dark);
}

.visit__desc {
  font-size: var(--text-body1-size);
  line-height: var(--text-body1-lh);
  font-weight: 300;
  color: var(--color-gray-desc);
}

.visit__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 456px;
}

.visit__input {
  flex: none; /* перебивает flex:1 из старого блока — в колонке он схлопывал height */
  width: 100%;
  height: 52px;
  padding: 0 16px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-surface);
  border-radius: var(--radius-md);
  font-family: var(--font-regular);
  font-size: var(--text-body2-size);
  font-weight: 300;
  color: var(--color-dark);
  transition: border-color 0.2s;
}

.visit__input::placeholder {
  color: var(--color-gray-desc);
}

.visit__input:focus {
  outline: none;
  border-color: var(--color-dark);
}

.visit__btns {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
}

.visit__legal {
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  font-weight: 300;
  color: var(--color-gray-desc);
}

.visit__legal-link {
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Экран «заявка отправлена» вместо формы. Раньше об отправке говорила только
   надпись на кнопке на 4 секунды — её легко было не заметить, и человек
   отправлял повторно. Встаёт на место формы и держится до перезагрузки. */
.visit__success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.visit__success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--color-orange);
  color: var(--color-white);
}

.visit__success-title {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: 400;
  color: var(--color-dark);
}

.visit__success-text {
  font-size: var(--text-body1-size);
  line-height: var(--text-body1-lh);
  font-weight: 300;
  color: var(--color-gray-desc);
}

/* Кнопка маршрута под сообщением — отступ, чтобы не липла к тексту. */
.visit__success .visit__route { margin-top: 8px; }

.visit__right {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  align-self: stretch;
  min-height: 440px;
}

.visit__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   08 FINISH — tabs + full-width swiper + CTA
   ============================================================ */
.finish {
  display: flex;
  flex-direction: column;
  gap: 56px; /* макет 08 FINISH: заголовок→контент→CTA = 56 */
}

.finish__title {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
}

.finish__content {
  display: flex;
  flex-direction: column;
  gap: 32px; /* макет: ряд табов→видео = 32 */
}

/* Ряд: табы слева, стрелки справа (как в макете) */
.finish__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.finish__nav {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.finish__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.finish__tab {
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-border);
  background: transparent;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  font-family: var(--font-regular);
  font-size: var(--text-body2s-size);
  line-height: var(--text-body2s-lh);
  color: var(--color-gray-desc);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.finish__tab:hover {
  border-color: var(--color-dark);
  color: var(--color-dark);
}

/* Активный таб — тёмная обводка + тёмный текст (НЕ заливка), по макету */
.finish__tab.is-active {
  background: transparent;
  border-color: var(--color-dark);
  color: var(--color-dark);
}

.finish__swiper {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.finish__swiper .swiper-slide {
  position: relative;
}

.finish__slide-img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md);
  background: var(--color-dark);
}

/* Видео показываем ЦЕЛИКОМ, «как есть» (img_9): вертикальное не обрезается —
   contain + тёмный фон-леттербокс по бокам, а не cover-кроп. */
video.finish__slide-img {
  object-fit: contain;
}

/* «Bullets» = короткие полосы-прогресс по центру внизу видео (по макету), не на всю ширину */
.finish__bullets {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}

.finish__bullets .swiper-pagination-bullet {
  flex: none;
  width: 4%;
  min-width: 24px;
  max-width: 56px;
  height: 3px;
  margin: 0;
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
  border-radius: 2px;
  pointer-events: auto;
  cursor: pointer;
  transition: background-color 0.2s;
}

.finish__bullets .swiper-pagination-bullet-active {
  background: var(--color-white);
}

/* Play-кнопка по центру видео-слайда (как в макете) */
.finish__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.5;
  z-index: 2;
  transition: opacity 0.2s, transform 0.2s;
}

.finish__play:hover {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.06);
}

.finish__play img {
  width: 100%;
  height: 100%;
  display: block;
}

.finish__play.is-hidden {
  display: none;
}

.finish__cta-row {
  display: flex;
  align-items: center;
  gap: 48px;
}

.finish__cta-text {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: 400;
  color: var(--color-dark);
}

/* ============================================================
   09 NEIGHBORS (Добрособедство)
   ============================================================ */
.section--reviews {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-px);
}

.neighbors {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.neighbors__title {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
}

.neighbors__list {
  overflow: hidden;
  min-width: 0;
}

.neighbors__dots { display: none; }

.neighbor-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.neighbor-card__photo-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 300 / 308;
}

.neighbor-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.neighbor-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.neighbor-card__person {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.neighbor-card__name {
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-lh);
  font-weight: 400;
  color: var(--color-dark);
}

.neighbor-card__role {
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  font-weight: 400;
  color: var(--color-gray-desc);
}

.neighbor-card__review {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--color-dark);
  color: var(--color-white);
  font-family: var(--font-regular);
  font-size: var(--text-body2s-size);
  line-height: var(--text-body2s-lh);
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.neighbor-card__review:hover { opacity: 0.85; }

.neighbors__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.neighbors__nav {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.neighbors__cta {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 20px;
}

.neighbors__cta-text {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  font-weight: 400;
}

/* ============================================================
   10 FAQ — category tabs + chevron + side "Спросить" column
   ============================================================ */
.faq {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.faq__cats {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* Переключатели категорий = TabButton из макета (обводка, не заливка) */
.faq__cat {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 16px;
  border: 1.5px solid #BFC3CB;
  background: transparent;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  font-family: var(--font-regular);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  color: var(--color-gray-desc); /* Правки img_65: неактивные табы — серый текст */
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.faq__cat:hover {
  border-color: var(--color-dark);
  color: var(--color-dark);
}

.faq__cat.is-active {
  background: transparent;
  border-color: var(--color-dark);
  color: var(--color-dark);
}

.faq__list {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  padding: 0 32px; /* макет 10 Q&A (234:3696): контейнер вопросов с отступом 0 32 */
}

.faq__item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  border-top: 1px solid var(--color-divider); /* линия по краю текста с обеих сторон (инсет 32 даёт .faq__list) */
}

.faq__item:last-child {
  border-bottom: 1px solid var(--color-divider);
}

.faq__q {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Правки img_67: стрелка-открывашка вплотную к тексту */
  gap: 32px; /* макет: Header gap 32 (текст → стрелка) */
  padding: 26px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-regular);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  color: var(--color-dark);
}

.faq__chevron {
  flex-shrink: 0;
  color: var(--color-gray-desc);
  transition: transform 0.25s, color 0.25s;
}

.faq__q[aria-expanded="true"] .faq__chevron {
  transform: rotate(180deg);
  color: var(--color-gray-desc); /* при раскрытии стрелка остаётся серой (не оранжевой) */
}

.faq__side {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  padding-left: 24px;
}

/* Размер S с чёрной обводкой по макету (Правки img_42): была светло-серая
   обводка --color-border и высота 36. */
.faq__ask {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-dark);
  font-family: var(--font-regular);
  font-size: var(--text-btn-m-size);
  line-height: var(--text-btn-m-lh);
  color: var(--color-dark);
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}

.faq__ask:hover {
  background-color: var(--color-dark);
  color: var(--color-white);
}

.faq__ask:hover .faq__ask-ico { filter: brightness(0) invert(1); }

.faq__ask-ico { width: 12px; height: 12px; display: block; }

.faq__a {
  grid-column: 1 / -1;
  grid-row: 2;
  padding-bottom: 20px;
}

.faq__a p {
  font-size: var(--text-body1-size);
  line-height: var(--text-body1-lh);
  font-weight: 300;
  color: var(--color-gray-desc);
  max-width: 720px;
}

/* ============================================================
   FOOTER — White rounded card layout
   ============================================================ */
.footer {
  background: var(--color-surface); /* Правки: инверсия — серый фон подвала */
  color: var(--color-dark);
  margin-top: 132px;
}

.footer__wrap {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 48px var(--container-px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Макет 432:12618: основная карточка + отдельная карточка контактов в ряд */
.footer__row {
  display: flex;
  align-items: stretch;
  gap: 16px;
  flex-wrap: wrap;
}

.footer__card {
  flex: 1 1 640px;
  background: var(--color-white); /* Правки: белый блок контента на сером фоне */
  border-radius: var(--radius-xl);
  padding: 24px 24px 40px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  align-items: start;
}

/* Отдельная карточка «Контакты» (макет: Contacts Block 220px) */
.footer__contacts {
  flex: 0 0 220px;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: 24px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 32px; /* макет: раздвинуть контакты / соцсети / маршрут */
  /* fix22 img_29: «разъехалась вёрстка» — от старой тёмной шапки футера остался
     align-items: flex-end, из-за него заголовок и соцсети уезжали вправо.
     В макете 432:11946 весь блок прижат влево. */
  align-items: flex-start;
}

.footer__card-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer__cta {
  align-self: flex-start;
}

.footer__nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Макет: заголовки колонок — H5 16, тёмные (были uppercase-серые) */
.footer__nav-title {
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-lh);
  font-weight: 400;
  color: var(--color-dark);
  text-transform: none; /* перебиваем старый дубль-блок с uppercase */
  letter-spacing: 0;
  margin-bottom: 0;
}

.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 12px; /* макет: List gap 12 */
}

/* По макету (FOOTER desktop 432:12618): ссылки — Text/ButtonLink/S 12px / 1.25 */
.footer__nav-link {
  font-size: 12px;
  line-height: 1.25;
  font-weight: 400;
  color: var(--color-dark);
  transition: color 0.2s;
}

.footer__nav-link:hover { color: var(--color-orange); }

.footer__sales {
  display: flex;
  flex-direction: column;
  gap: 24px; /* макет: Sells gap 24 (заголовок → список) */
}

.footer__sales-title {
  font-size: var(--text-h4-size); /* макет: «Отдел продаж» H4 18 */
  line-height: var(--text-h4-lh);
  font-weight: 400;
}

.footer__sales-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  font-weight: 400;
  color: var(--color-dark);
}

.footer__sales-lbl {
  font-weight: 400;
  color: var(--color-dark); /* макет: весь текст тёмный (серого нет) */
}

.footer__sales-phone {
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-lh);
  font-weight: 400;
  color: var(--color-dark);
  transition: color 0.2s;
}

.footer__sales-phone:hover { color: var(--color-orange); }

.footer__sales-link {
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}

.footer__sales-link:hover { color: var(--color-orange); }

.footer__socials {
  display: flex;
  gap: 8px;
}

/* Иконки соцсетей — без фоновых кружков (макет): просто цветные иконки */
.footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  transition: opacity 0.2s;
}

.footer__social img { width: 28px; height: 28px; }

.footer__social:hover { background: transparent; opacity: 0.8; }

/* Кнопка маршрута — заметная (тёмная заливка), не бледная обводка */
.footer__route {
  align-self: flex-start;
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}

/* Social icons in light footer card should not be inverted */
.footer__card .footer__social img {
  filter: none;
}

.footer__bottom {
  padding: 20px 24px;
  background: var(--color-white); /* Правки: белый блок (легал) на сером фоне */
  border-radius: var(--radius-xl);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 24px 48px;
  align-items: start;
}

.footer__legal-text {
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  font-weight: 300;
  color: var(--color-gray-desc);
  grid-column: 1;
}

.footer__legal-links {
  display: contents;
}

.footer__legal-link {
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  font-weight: 300;
  color: var(--color-gray-desc);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}

.footer__legal-link:hover { color: var(--color-dark); }

/* ============================================================
   REVIEW MODAL (text testimonial / video player)
   ============================================================ */
.review-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  /* visibility дискретна: в обычном transition она переключалась бы на середине,
     и диалог ~125мс был бы «открыт», но невидим — фокус туда не переводился.
     Скрытие откладываем до конца затухания, показ мгновенный (см. .is-open). */
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.review-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s; /* visibility снимаем сразу, а не на середине перехода */
}

.review-modal__bg {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 24, 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.review-modal__dialog {
  position: relative;
  z-index: 1;
  width: 340px;
  max-width: 92vw;
  height: 560px;
  max-height: 86vh;
  background: var(--color-white);
  border-radius: 20px;
  overflow: hidden;
  transform: translateY(16px) scale(0.98);
  transition: transform 0.28s ease;
}

.review-modal.is-open .review-modal__dialog {
  transform: none;
}

/* затенение под полосой прогресса (stories) */
.review-modal__dialog::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: 2;
  pointer-events: none;
}

.review-modal__progress {
  position: absolute;
  top: 14px;
  left: 16px;
  right: 16px;
  z-index: 5;
  display: flex;
  gap: 4px;
}

.review-modal__prog-item {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.4);
}

.review-modal__prog-item.is-active,
.review-modal__prog-item.is-done { background: var(--color-white); }

.review-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
}

/* круглые стрелки по бокам */
.review-modal__arrow {
  position: relative;
  z-index: 1;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.review-modal__arrow img { width: 30px; height: 30px; display: block; }

/* --- Text mode (stories-карточка) --- */
.review-modal__text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 48px 24px 24px;
}

.review-modal__head { display: flex; flex-direction: column; gap: 10px; }

.review-modal__title {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
  color: var(--color-dark);
}

.review-modal__quote {
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  font-weight: 400;
  color: var(--color-dark);
}

.review-modal__person {
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-modal__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.review-modal__name {
  font-size: var(--text-body2s-size);
  line-height: var(--text-body2s-lh);
  color: var(--color-dark);
}

.review-modal__role {
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  font-weight: 400;
  color: var(--color-gray-desc);
}

/* --- Video player mode --- */
.review-modal__video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
}

.review-modal__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.review-modal__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-orange);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s, opacity 0.2s;
}

.review-modal__play:hover { transform: translate(-50%, -50%) scale(1.06); }
.review-modal__play.is-hidden { opacity: 0; pointer-events: none; }

/* ============================================================
   CALLBACK MODAL («Заказать консультацию» → «Мы приняли вашу заявку!»)
   Макет: figma-ref/new/modal-1.png (форма) и modal-2.png (успех).
   Слева — форма (радио способа связи + имя/телефон + тёмная кнопка),
   справа — серая панель с телефоном и QR-кодом.
   ============================================================ */
.callback-modal {
  position: fixed;
  inset: 0;
  /* fix22 img_33: попап заявки открывается в том числе поверх модалки расчёта
     программ (.ap-calc, z-index 420) — иначе форма уходит под неё и не видна. */
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  /* visibility дискретна: в обычном transition она переключалась бы на середине,
     и диалог ~125мс был бы «открыт», но невидим — фокус туда не переводился.
     Скрытие откладываем до конца затухания, показ мгновенный (см. .is-open). */
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.callback-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s; /* visibility снимаем сразу, а не на середине перехода */
}

.callback-modal__bg {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 24, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.callback-modal__dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px;
  width: 100%;
  max-width: 810px;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: 32px;
  transform: translateY(16px) scale(0.98);
  transition: transform 0.28s ease;
}

.callback-modal__dialog--single {
  grid-template-columns: 1fr;
  max-width: 460px;
}

.callback-modal.is-open .callback-modal__dialog {
  transform: none;
}

.callback-modal__close {
  position: absolute;
  top: -12px;
  right: -12px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s;
}

.callback-modal__close:hover { transform: scale(1.08); }

/* --- Левая колонка: форма / успех --- */
.callback-modal__left {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.callback-modal__title {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
  color: var(--color-dark);
}

/* Экран «Заявка принята»: фото справа + крупный заголовок (макет 518:12240) */
.callback-modal__right { position: relative; }

.callback-modal__success-img {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.callback-modal.is-success .callback-modal__phone-row,
.callback-modal.is-success .callback-modal__qr,
.callback-modal.is-success .callback-modal__qr-hint {
  display: none;
}

.callback-modal.is-success .callback-modal__success-img { display: block; }

.callback-modal__success .callback-modal__title {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: -0.02em;
}

.callback-modal__subtitle {
  margin-top: 10px;
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  font-weight: 300;
  color: var(--color-gray-desc);
}

.callback-modal__form,
.callback-modal__cf7 form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.callback-modal__cf7 p { margin: 0; }

/* Радио «Звонок / Telegram / WhatsApp» — пилюли, выбор 1 из 3 */
.callback-modal__methods,
.callback-modal__cf7 .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.callback-modal__method input,
.callback-modal__cf7 .wpcf7-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.callback-modal__method span,
.callback-modal__cf7 .wpcf7-radio .wpcf7-list-item-label {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-lh);
  color: var(--color-gray-desc);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.callback-modal__method input:checked + span,
.callback-modal__cf7 .wpcf7-radio input:checked + .wpcf7-list-item-label {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}

.callback-modal__cf7 .wpcf7-list-item { margin: 0; }

.callback-modal__input,
.callback-modal__cf7 input[type="text"],
.callback-modal__cf7 input[type="tel"],
.callback-modal__cf7 input[type="email"] {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-surface);
  border-radius: var(--radius-md);
  font-family: var(--font-regular);
  font-size: var(--text-body3-size);
  font-weight: 300;
  color: var(--color-dark);
  transition: border-color 0.2s;
}

.callback-modal__input::placeholder,
.callback-modal__cf7 input::placeholder {
  color: var(--color-gray);
}

.callback-modal__input:focus,
.callback-modal__cf7 input:focus {
  outline: none;
  border-color: var(--color-border);
}

/* Тёмная кнопка-пилюля «Ожидаю звонок» */
.callback-modal__submit,
.callback-modal__cf7 input[type="submit"],
.callback-modal__cf7 button[type="submit"] {
  align-self: stretch;
  width: 100%;
  height: 42px;
  margin-top: 10px;
  padding: 0 28px;
  background-color: var(--color-dark);
  color: var(--color-white);
  border: 1.5px solid var(--color-dark);
  border-radius: var(--radius-full);
  font-family: var(--font-regular);
  font-size: var(--text-btn-m-size);
  line-height: var(--text-btn-m-lh);
  cursor: pointer;
  transition: opacity 0.2s;
}

.callback-modal__submit:hover,
.callback-modal__cf7 input[type="submit"]:hover,
.callback-modal__cf7 button[type="submit"]:hover {
  opacity: 0.85;
}

/* Зелёная пилюля состояния «Заявка принята!» */
.callback-modal__done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: stretch;
  width: 100%;
  height: 42px;
  margin-top: auto;
  padding: 0 28px;
  background: transparent;
  color: var(--color-green);
  border: 1.5px solid var(--color-green);
  border-radius: var(--radius-full);
  font-family: var(--font-regular);
  font-size: var(--text-btn-m-size);
  line-height: var(--text-btn-m-lh);
  cursor: pointer;
}

.callback-modal__legal {
  margin-top: 14px;
  max-width: 300px;
  font-size: 11px;
  line-height: 140%;
  font-weight: 300;
  color: var(--color-gray);
}

.callback-modal__legal-link {
  color: var(--color-gray-desc);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.callback-modal__success {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.callback-modal__success .callback-modal__done {
  margin-top: 32px;
}

/* --- Правая колонка: телефон + QR --- */
.callback-modal__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
}

/* fix22 img_33: сводка расчёта в правой колонке (заявка из калькулятора).
   Пока она показана — QR прячем, контакты остаются внизу (макет 867:28275). */
.callback-modal__summary {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--color-divider);
}

.callback-modal__summary-title {
  font-size: var(--text-h6-size);
  line-height: var(--text-h6-lh);
  color: var(--color-dark);
}

.callback-modal__summary-sub {
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  color: var(--color-gray-desc);
}

.callback-modal__summary-prices {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Копия карточки программы в узкой колонке: строим в одну колонку, чтобы
   название не ломалось по слогам, и убираем интерактивные стили. */
.callback-modal__summary-prog .ap-prog {
  margin: 0;
  padding: 16px;
  cursor: default;
  flex-direction: column;
  gap: 12px;
  border: 0.5px solid var(--color-border);
}

.callback-modal__summary-prog .ap-prog__summary,
.callback-modal__summary-prog .ap-prog__price-wrap { width: 100%; min-width: 0; }

.callback-modal__summary-prog .ap-prog__price-wrap { align-items: flex-start; text-align: left; }

.callback-modal__right.has-summary .callback-modal__qr,
.callback-modal__right.has-summary .callback-modal__qr-hint {
  display: none;
}

.callback-modal__right.has-summary { justify-content: flex-start; }

.callback-modal__right.has-summary .callback-modal__phone-row { margin-top: auto; }

.callback-modal__phone-row {
  align-self: flex-start;
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  font-weight: 400;
  color: var(--color-gray-desc);
}

.callback-modal__phone {
  color: var(--color-dark);
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}

.callback-modal__phone:hover { text-decoration: underline; }

.callback-modal__qr {
  width: 168px;
  height: 168px;
  margin: auto 0;
  object-fit: contain;
}

.callback-modal__qr-hint {
  margin-top: auto;
  text-align: center;
  font-size: 11px;
  line-height: 140%;
  font-weight: 300;
  color: var(--color-gray-desc);
}

/* Мобильный контакт-блок попапа консультации (кнопка «Позвонить» + соцсети,
   макет 333:4636) — показывается только на мобайле вместо QR. */
.callback-modal__mcontact { display: none; }

/* CF7 service messages inside the modal */
.callback-modal__cf7 .wpcf7-not-valid-tip {
  font-size: var(--text-body3-size);
  color: var(--color-orange);
  margin-top: 4px;
}

.callback-modal__cf7 .wpcf7-response-output {
  margin: 12px 0 0;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-body3-size);
}

@media (max-width: 768px) {
  .callback-modal { padding: 16px; }

  .callback-modal__dialog {
    grid-template-columns: minmax(0, 1fr); /* minmax(0,…): трек может сжиматься, не распирает диалог по контенту */
    gap: 28px; /* чуть раздвинуть (макет) */
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px 20px;
  }

  /* Внутренние отступы формы — попросторнее */
  .callback-modal__form { gap: 14px; }
  .callback-modal__left { gap: 20px; }

  .callback-modal__methods { flex-wrap: wrap; }
  .callback-modal__call { white-space: normal; text-align: center; }

  .callback-modal__close {
    top: 10px;
    right: 10px;
    background: var(--color-surface);
    box-shadow: none;
  }

  .callback-modal__submit,
  .callback-modal__done,
  .callback-modal__cf7 input[type="submit"],
  .callback-modal__cf7 button[type="submit"] {
    align-self: stretch;
    width: 100%;
    font-weight: 300; /* текст кнопки потоньше (макет) */
  }

  /* Макет 333:4636: на мобайле вместо QR — кнопка «Позвонить» + соцсети */
  .callback-modal__right {
    background: transparent;
    padding: 0;
    gap: 16px;
  }

  .callback-modal__phone-row,
  .callback-modal__qr,
  .callback-modal__qr-hint { display: none; }

  .callback-modal__mcontact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .callback-modal__call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border: 1px solid var(--color-dark);
    border-radius: 12px;
    font-size: var(--text-body2-size);
    line-height: var(--text-body2-lh);
    color: var(--color-dark);
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
  }

  .callback-modal__call:hover {
    background: var(--color-dark);
    color: var(--color-white);
  }

  .callback-modal__write {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .callback-modal__write-label {
    font-size: var(--text-body3-size);
    line-height: var(--text-body3-lh);
    color: var(--color-dark);
  }

  .callback-modal__socials {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* Соцсети без фоновых кружков (макет) */
  .callback-modal__social {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .callback-modal__social img { width: 28px; height: 28px; }
}

/* ============================================================
   BOOK VISIT MODAL — мобильный попап «Записаться на экскурсию» (353:22777)
   ============================================================ */
.book-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  /* visibility дискретна: в обычном transition она переключалась бы на середине,
     и диалог ~125мс был бы «открыт», но невидим — фокус туда не переводился.
     Скрытие откладываем до конца затухания, показ мгновенный (см. .is-open). */
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.book-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s; /* visibility снимаем сразу, а не на середине перехода */
}

.book-modal__bg {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 24, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.book-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: 24px 16px;
  transform: translateY(16px) scale(0.98);
  transition: transform 0.28s ease;
}

.book-modal.is-open .book-modal__dialog { transform: none; }

.book-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.book-modal__close:hover { transform: scale(1.08); }

.book-modal__form-view,
.book-modal__success {
  display: flex;
  flex-direction: column;
  gap: 20px; /* чуть раздвинуть (макет) */
}

.book-modal__title {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
  color: var(--color-dark);
  padding-right: 28px;
}

.book-modal__subtitle {
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  font-weight: 300;
  color: var(--color-gray-desc);
  margin-top: -8px;
}

.book-modal__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.book-modal__input {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border: none; /* без рамок на полях (макет) */
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-regular);
  font-size: var(--text-body2-size);
  color: var(--color-dark);
}

.book-modal__input::placeholder { color: var(--color-gray-desc); }
.book-modal__input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--color-dark); }

.book-modal__submit,
.book-modal__route {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-regular);
  font-weight: 300; /* текст потоньше (макет) */
  font-size: 16px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.book-modal__submit { background: var(--color-orange); color: var(--color-white); }
.book-modal__route { background: var(--color-dark); color: var(--color-white); }

.book-modal__submit:hover,
.book-modal__route:hover { opacity: 0.92; }

.book-modal__legal {
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  font-weight: 300;
  color: var(--color-gray-desc);
}

.book-modal__legal-link { color: var(--color-gray-desc); text-decoration: underline; }

.book-modal__promo {
  height: 210px; /* блок немного выше (макет) */
  border-radius: 12px;
  background-color: var(--color-orange);
  background-size: cover;
  background-position: center;
  margin-top: 4px;
}

.book-modal__done {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-orange);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-regular);
  font-weight: 300;
  font-size: 16px;
  cursor: pointer;
}

/* Контакты в успехе книг-модалки (Правки img_31 / 571:24571) */
.book-modal__contacts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.book-modal__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid var(--color-dark);
  border-radius: 12px;
  font-size: var(--text-body2-size);
  color: var(--color-dark);
  transition: background 0.2s, color 0.2s;
}

.book-modal__call:hover {
  background: var(--color-dark);
  color: var(--color-white);
}

.book-modal__write {
  display: flex;
  align-items: center;
  gap: 12px;
}

.book-modal__write-label {
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  color: var(--color-dark);
}

.book-modal__socials {
  display: flex;
  align-items: center;
  gap: 10px;
}

.book-modal__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.book-modal__social img { width: 28px; height: 28px; display: block; }

/* ============================================================
   SWIPER FALLBACKS
   Keep correct layout even if Swiper JS/CSS fails to load.
   Rules apply ONLY while the slider is NOT initialized
   (Swiper adds .swiper-initialized once it runs).
   ============================================================ */

/* Gallery & Finish: show a single image, clip the rest */
.gallery__swiper {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.finish__swiper {
  min-width: 0;
  overflow: hidden;
}

.gallery__swiper:not(.swiper-initialized) .swiper-wrapper,
.finish__swiper:not(.swiper-initialized) .swiper-wrapper {
  display: block;
}

.gallery__swiper:not(.swiper-initialized) .swiper-slide,
.finish__swiper:not(.swiper-initialized) .swiper-slide {
  display: none;
  width: 100%;
}

.gallery__swiper:not(.swiper-initialized) .swiper-slide:first-child,
.finish__swiper:not(.swiper-initialized) .swiper-slide:first-child {
  display: block;
}

/* Neighbors: pure-CSS 4-col grid (no Swiper). Desktop. */
.neighbors__list {
  overflow: hidden;
}

.neighbors__list .swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.neighbors__list .swiper-slide {
  min-width: 0;
}

/* ============================================================
   RESPONSIVE — new sections
   ============================================================ */
@media (max-width: 1024px) {
  .feat-grid {
    columns: 2;
  }

  .footer__card {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* fix22 img_42: порядок как в мобильном макете (432:12289) — карточка с
     логотипом и заявкой, ниже контакты, ниже меню. Логотип и меню лежат в одной
     карточке .footer__card, поэтому на мобилке она «растворяется»
     (display: contents), а её части становятся самостоятельными белыми
     карточками — так контакты встают между ними.
     fix22 img_4: карточки тянутся во всю ширину вместе с кнопкой маршрута. */
  .footer__card {
    display: contents;
  }

  .footer__card-left,
  .footer__nav {
    flex: 1 1 100%;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-sizing: border-box;
  }

  .footer__card-left { order: -2; }
  .footer__nav { order: 0; }

  .footer__contacts {
    order: -1;
    flex: 1 1 100%;
    align-items: stretch;
  }

  .footer__contacts .btn,
  .footer__contacts .footer__route {
    align-self: stretch;
    justify-content: center;
  }

  .footer__nav {
    grid-template-columns: repeat(2, 1fr);
  }

  .map-section__transit {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .transit-card {
    flex: 0 0 78%;
  }

  .neighbors__list .swiper-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  /* Правки(мобайл): преимущества — горизонтальный блок (лента, как cards/соседи) */
  .feat-grid {
    columns: auto;
    column-gap: 0;
    display: flex;
    flex-direction: row;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0;
  }

  .feat-grid::-webkit-scrollbar { display: none; }

  /* fix22 img_2 (макет 322:6793): карточка 282 из 328 контента, фото квадратное —
     одной высоты у всех карточек независимо от длины подписи, подпись 18px под ним. */
  .feat-item {
    flex: 0 0 86%;
    height: auto;
    margin-bottom: 0;
    scroll-snap-align: start;
  }

  /* .feat-item .feat-item__img — специфичность как у десктопных высот
     .feat-item:nth-child(n) .feat-item__img, правило ниже по каскаду и перебивает их */
  .feat-grid .feat-item .feat-item__img {
    height: auto;
    aspect-ratio: 1 / 1;
    flex: none;
  }

  .feat-grid .feat-item__label {
    padding: 0 4px;
    font-size: var(--text-h4-size);
    line-height: var(--text-h4-lh);
    letter-spacing: var(--text-h4-ls);
  }

  /* Neighbors: horizontal scroll-snap carousel + dots.
     .neighbors__list IS the flex+scroll container; the inner
     .swiper-wrapper is collapsed with display:contents so the slides
     become direct flex children and their % resolves against the
     viewport-width list (mirrors the .cards carousel that works). */
  .neighbors__list {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .neighbors__list::-webkit-scrollbar { display: none; }

  .neighbors__list .swiper-wrapper {
    display: contents;
  }

  .neighbors__list .swiper-slide {
    flex: 0 0 78%;
    min-width: 0;
    scroll-snap-align: start;
  }

  .neighbors__nav { display: none; }

  /* Мобайл: CTA «Хотите познакомиться лично?» — стопкой, кнопка во всю ширину */
  .neighbors__bottom { justify-content: center; }
  .neighbors__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 8px;
    width: 100%;
  }
  .neighbors__cta .btn { width: 100%; }

  .neighbors__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
  }

  .neighbors__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border);
    transition: background-color 0.2s;
  }

  .neighbors__dot.is-active { background: var(--color-dark); }

  .gallery__body {
    flex-direction: column;
    gap: 16px;
  }

  /* фото на всю ширину; flex:none — иначе глобальное flex:1 1 0 схлопывает высоту в 0 */
  .gallery__swiper {
    flex: none;
    width: 100%;
  }

  .gallery__side {
    flex: 1 1 auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 0;
  }

  .gallery__side .gallery__title {
    flex-basis: 100%;
    margin-bottom: 8px;
  }

  /* Как в секции «Отделка»: табы переносятся слева, стрелки — справа в той же строке */
  .gallery__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex: 1 1 100%;
  }

  .gallery__tabs {
    flex-direction: row;
    flex-wrap: wrap;
    overflow: visible;
    gap: 4px;
  }

  .gallery__nav {
    margin-top: 0;
    flex-shrink: 0;
  }

  .gallery__slide-img {
    height: 280px;
  }

  .finish__slide-img {
    height: 280px;
  }

  /* Review modal: stack photo over text on mobile */
  .review-modal__text {
    grid-template-columns: 1fr;
  }

  .review-modal__photo-wrap {
    height: 240px;
  }

  .review-modal__body {
    padding: 24px;
  }

  /* Запись на экскурсию: без карточки-обёртки, стандартные отступы (макет) */
  .visit {
    grid-template-columns: 1fr;
    gap: 16px;
    background: transparent;
    padding: 0;
    min-height: 0;
    border-radius: 0;
  }

  /* На мобильной форма уезжает в попап (353:22777): в секции остаются
     заголовок, описание и кнопки (запись + маршрут). */
  .visit__form,
  .visit__right,
  .visit__legal { display: none; }

  .visit__open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
  }

  /* Кнопка «Построить маршрут» — тёмная (макет) */
  .visit__open--route {
    background: var(--color-dark);
    color: var(--color-white);
  }

  .visit__left {
    padding: 0;
    gap: 16px;
  }

  /* ===== Карта (макет 333:4393) — полная мобильная переделка =====
     Размещено ПОСЛЕ десктопных правил 07 MAP, чтобы перебить их по каскаду.
     Табы вынесены НАД картой; картинка шире экрана и скроллится вбок;
     стрелки вместо зума; кнопка «Записаться» скрыта. */
  .map-section__img-wrap {
    height: auto;
    overflow: visible;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .map-section__panel {
    position: static;
    inset: auto;
    order: -1;
    display: block;
    padding: 0;
    pointer-events: auto;
  }

  .map-section__tabs {
    max-width: none;
    gap: 8px;
  }

  /* На белом фоне табы — обводочный стиль (как TabButton в макете) */
  .map-tab {
    padding: 8px 12px;
    font-size: var(--text-body2-size);
    background: transparent;
    border-color: #BFC3CB;
    color: var(--color-gray-desc);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .map-tab:hover { background: transparent; }

  .map-tab.is-active {
    background: transparent;
    border-color: var(--color-dark);
    color: var(--color-dark);
  }

  .map-section__scroller {
    position: relative;
    inset: auto;
    order: 0;
    height: 320px;
    border-radius: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .map-section__scroller::-webkit-scrollbar { display: none; }

  .map-section__stage {
    position: relative;
    inset: auto;
    width: 760px;
    height: 100%;
    transform: none !important;
  }

  /* Слой тегов лежит рядом со сценой внутри горизонтального скроллера —
     на мобильной ему нужна та же ширина, иначе теги отвяжутся от карты. */
  .map-section__pins {
    inset: 0 auto 0 0;
    width: 760px;
  }

  .map-section__excursion,
  .map-section__zoom { display: none; }

  .map-section__scroll-nav {
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 142px;
    padding: 0 12px;
    pointer-events: none;
    z-index: 6;
  }

  .map-scroll-arrow {
    pointer-events: auto;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .map-scroll-arrow img { width: 16px; height: 16px; }

  .map-tag__label { font-size: 11px; }

  .map-tag__tip { width: 180px; }

  /* Плашки домов на мобильной оставляем короткими — только название дома,
     цену видно в подсказке по тапу. */
  .map-tag--house .map-tag__price { display: none; }

  .map-section__commute-fade,
  .map-section__commute-nav { display: none; }

  /* Commute (макет 333:4411): не слайдер — карточки идут в столбик, QR скрыт */
  .map-section__transit {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 16px;
    overflow: visible;
  }

  .transit-card {
    flex: none;
    width: 100%;
  }

  .transit-card--qr { display: none; }

  /* fix22 img_1 (макет 322:3327): выдача — серая плашка во всю ширину экрана,
     внутри отступы 24/16 и шаг 32 между карточками. */
  .apts__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    background: var(--color-surface);
    padding: 24px 16px;
    margin-inline: calc(-1 * var(--container-px));
  }

  /* Карточка: белая плашка-план + подпись под ней (макет 597:14243) */
  .apt-card {
    gap: 8px;
    border-radius: 0;
    overflow: visible;
  }

  .apt-card__img-wrap {
    height: auto;
    aspect-ratio: 1 / 1;      /* все фото одной высоты, план не режется */
    padding: 16px;
    background: var(--color-white);
    border-radius: 12px;
  }

  .apt-card__img {
    object-fit: contain;
  }

  .apt-card .apt-gallery--multi .apt-gallery__slide { inset: 16px; }

  .apt-card .apt-gallery__dots {
    bottom: 16px;
    left: 16px;
    right: 16px;
  }

  .apt-card__badges {
    top: 16px;
    left: 16px;
    right: 16px;
  }

  .apt-card__body {
    padding: 0 8px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
  }

  .apt-card__type {
    font-size: var(--text-h6-size);
    line-height: var(--text-h6-lh);
    white-space: normal;
  }

  .apt-card__prices {
    flex-wrap: wrap;
    gap: 4px 6px;
  }

  /* fix22 img_3 + img_13: на мобилке пропорции те же, что на десктопе —
     видна только «морда» транспорта, прозрачность 80% (см. .transit-card__img). */

  /* Иконки в цвет текста: у заголовка — тёмная, в подписях — серая (как в макете) */
  .transit-card__point {
    opacity: 1;
    filter: brightness(0);
  }

  .transit-card__ico {
    filter: brightness(0) saturate(100%) invert(64%) sepia(11%) saturate(380%) hue-rotate(183deg) brightness(89%) contrast(85%);
  }

  .footer__wrap {
    padding-inline: 20px;
  }

  .footer__card {
    padding: 28px 24px;
    grid-template-columns: 1fr;
  }

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

  .footer__bottom {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .apts__help {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .neighbors__cta {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Видео из ЖК Спектр — мобайл (макет 08 VIDEO GALLERY) */
  .finish__title {
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-lh);
    letter-spacing: var(--text-h3-ls);
  }

  .finish,
  .finish__content {
    gap: 32px;
  }

  .finish__controls {
    align-items: flex-end;
  }

  .finish__slide-img {
    height: 200px;
  }

  .finish__play {
    width: 84px;
    height: 84px;
  }

  .finish__cta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .finish__cta-text {
    font-size: var(--text-h4-size);
    line-height: var(--text-h4-lh);
    letter-spacing: var(--text-h4-ls);
  }

  .faq__list {
    padding: 0; /* мобайл: вопросы без бокового отступа (макет img_21) */
  }

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

  .faq__side {
    display: none;
  }
}

/* ============================================================
   КАТАЛОГ КВАРТИР (catalog.html / template-catalog.php)
   Макет: Spectr_Site (Copy) 493:9278 (desktop), 520:18083 (mobile)
   ============================================================ */

.page-catalog { background: var(--color-white); }

.catalog-main { padding-top: 128px; }

.cat-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
}

/* --- 00 Заголовок --- */
.cat-title {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  font-weight: 400;
  color: var(--color-dark);
}

/* --- 01 Фильтры --- */
.cat-filters { margin-top: 56px; }

.cat-filters__title {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: 400;
  color: var(--color-dark);
}

/* Правка Figma: на узком окне (≈1200px и меньше) ряд фильтров вылезал за край
   и страница ехала вбок — группы просто не помещались в строку. Переносим их
   на новую строку вместо горизонтального выезда. */
.cat-filters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  /* По макету КАТАЛОГ зазор между группами 16px (подписи «Стоимость:» и
     «Площадь:» встают на 347 и 651 при контейнере 80…1360). Вертикальный
     оставляем больше — он работает, когда группа переносится на строку ниже. */
  gap: 24px 16px;
  margin-top: 32px;
}

.cat-fgroup {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cat-fgroup__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-gray-desc);
}

.cat-fgroup__options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

/* Пилюля-фильтр */
.cat-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--color-surface);
  font-family: var(--font-regular);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--color-gray-desc);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.cat-pill:hover { color: var(--color-dark); }

.cat-pill.is-active {
  border-color: var(--color-orange);
  color: var(--color-dark);
}

.cat-pill__sub { color: var(--color-gray-desc); font-weight: 400; }

.cat-pill--lg { padding: 10px 16px; }

.cat-pill--ico img { display: block; }

/* Диапазон от/до */
.cat-range {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 142px;
  padding: 8px 16px 8px 12px;
  border-radius: 24px;
  background: var(--color-surface);
  cursor: text;
}

.cat-range__lbl,
.cat-range__unit {
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-gray-desc);
  flex: none;
}

.cat-range__input {
  /* Поле сжималось до 15px, и трёхзначная сумма («150») в него не влезала */
  min-width: 4ch;
  flex: 1 1 auto;
  border: none;
  background: transparent;
  font-family: var(--font-regular);
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-dark);
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Поле без рамки: без этого фокус с клавиатуры вообще не виден.
   Подсвечиваем контейнер, чтобы не ломать вёрстку строки «от — до». */
.cat-range:focus-within { box-shadow: inset 0 0 0 1.5px var(--color-dark); }

.cat-range__input::-webkit-outer-spin-button,
.cat-range__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Чипы-сценарии --- */
.cat-scenarios {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
}

.cat-scenarios__track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1 1 auto;
  min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 96px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 96px), transparent);
}

.cat-scenarios__track::-webkit-scrollbar { display: none; }

.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 41px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: transparent;
  font-family: var(--font-book);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--color-dark);
  cursor: pointer;
  white-space: nowrap;
  flex: none;
  transition: border-color 0.15s;
}

.cat-chip:hover { border-color: var(--color-gray-desc); }

.cat-chip.is-active {
  border-color: var(--color-orange);
  box-shadow: inset 0 0 0 0.5px var(--color-orange);
}

.cat-chip__photo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.cat-scenarios__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.cat-scenarios__arrow {
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
}

.cat-scenarios__arrow img { display: block; }

/* --- Кнопка «Дополнительные параметры» --- */
.cat-more { margin-top: 32px; }

.cat-more__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--color-dark);
  border-radius: 12px;
  background: transparent;
  font-family: var(--font-regular);
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
  color: var(--color-dark);
  cursor: pointer;
}

.cat-more__btn[aria-expanded="true"] .cat-more__chevron { transform: rotate(180deg); }

.cat-more__chevron { transition: transform 0.2s; }

.cat-more__badge {
  position: absolute;
  top: -11px;
  right: -11px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-orange);
  color: var(--color-white);
  font-size: 10px;
  line-height: 22px;
  text-align: center;
}

/* --- Дополнительные параметры (раскрытый блок) --- */
.cat-extra {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 32px;
}

.cat-extra__toprow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.cat-fgroup--inline {
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.cat-numsearch {
  width: 180px;
  padding: 8px 16px;
  border: none;
  border-radius: 999px;
  background: var(--color-surface);
  font-family: var(--font-regular);
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-dark);
  outline: none;
}

.cat-numsearch::placeholder { color: var(--color-gray-desc); }

/* outline снят вместе с рамкой — возвращаем видимый фокус тем же inset */
.cat-numsearch:focus { box-shadow: inset 0 0 0 1.5px var(--color-dark); }

.cat-extra__block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cat-extra__title {
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-dark);
}

.cat-extra__groups {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

/* --- Итог подбора --- */
.cat-summary { margin-top: 56px; }

.cat-summary__divider {
  border: none;
  border-top: 0.5px solid var(--color-divider);
  margin: 0 0 24px;
}

.cat-summary__found {
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-dark);
}

.cat-summary__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}

.cat-summary__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
}

.cat-summary__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-book);
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-dark);
  cursor: pointer;
}

.cat-summary__chip img { display: block; }

.cat-summary__reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: none;
  border-radius: 12px;
  background: var(--color-white);
  font-family: var(--font-regular);
  font-size: 12px;
  line-height: 1.25;
  color: var(--color-gray-desc);
  cursor: pointer;
  flex: none;
}

/* --- 02 Выдача --- */
.cat-results {
  margin-top: 56px;
  padding: 56px 0;
  background: var(--color-surface);
}

.cat-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Сортировка */
.cat-sort { position: relative; width: 225px; }

.cat-sort__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: 0.5px solid var(--color-dark);
  border-radius: 12px;
  background: var(--color-white);
  font-family: var(--font-regular);
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-dark);
  cursor: pointer;
}

.cat-sort__btn[aria-expanded="true"] .cat-sort__chevron { transform: rotate(180deg); }

.cat-sort__chevron { transition: transform 0.2s; flex: none; }

.cat-sort__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  width: max-content;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(26, 27, 31, 0.14);
  z-index: 50;
}

.cat-sort__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 13px 16px;
  border: none;
  background: transparent;
  font-family: var(--font-book);
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-gray-desc);
  cursor: pointer;
  text-align: left;
}

.cat-sort__opt::after {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--color-gray-200);
  background: transparent no-repeat center;
}

.cat-sort__opt.is-active { color: var(--color-dark); }

.cat-sort__opt.is-active::after {
  border-color: var(--color-orange);
  background-color: var(--color-orange);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L4.5 7.5L11 1' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.cat-sort__list li + li .cat-sort__opt { border-top: 0.5px solid var(--color-surface); }

/* Переключатель видов */
.cat-view {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
}

.cat-view__opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -1px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-family: var(--font-regular);
  font-size: 10px;
  line-height: 1.25;
  color: var(--color-gray-desc);
  cursor: pointer;
}

.cat-view__opt.is-active {
  border-color: var(--color-orange);
  background: var(--color-white);
  color: var(--color-dark);
}

/* --- Сетка карточек --- */
.cat-grid { margin-top: 32px; }

.cat-grid--cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Правка Figma: между строками карточек нужен воздух — по колонкам шаг
     остаётся 16, по строкам 32 (в макете ряды разделены заметно сильнее). */
  gap: 32px 16px;
}

.cat-grid--list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- Карточка квартиры (каталог) --- */
.cat-card {
  position: relative; /* контейнер stretched-link: вся карточка кликабельна (img_24) */
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-radius: 8px;
  background: var(--color-white);
}

/* Ссылка-заголовок растягивается на всю карточку — клик где угодно ведёт в карточку квартиры.
   Интерактивные зоны (слайдер-фото, теги с info-tip, кнопки, сердечко) поднимаем выше (z-index:2). */
.cat-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.cat-card__ctl,
.cat-card__actions,
.cat-card__tags,
.cat-card__micons,
.cat-card .apt-gallery--multi {
  position: relative;
  z-index: 2;
}

.cat-card__top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cat-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.cat-card__ctl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Сердечко «Сохранить» — теперь наверху карточки (img_17), иконкой без обводки */
.cat-card__fav {
  display: inline-flex;
  padding: 2px;
  border: none;
  background: transparent;
  color: var(--color-gray-desc);
  cursor: pointer;
  transition: color 0.15s;
}

.cat-card__fav:hover { color: var(--color-orange); }

.cat-card__fav.is-fav {
  color: var(--color-orange);
}

.cat-card__fav.is-fav svg path {
  fill: var(--color-orange);
  stroke: var(--color-orange);
}

.cat-card__type {
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-dark);
  text-decoration: none; /* тип-подпись теперь ссылка на страницу квартиры */
}

a.cat-card__type:hover { color: var(--color-orange); }

.cat-card__print {
  display: inline-flex;
  padding: 2px;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0.85;
}

.cat-card__print:hover { opacity: 1; }

.cat-card__prices {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 24px;
}

.cat-card__price {
  font-size: 16px;
  line-height: 1.2;
  color: var(--color-orange);
}

.cat-card__price-old {
  font-size: 12px;
  line-height: 1.2;
  color: var(--color-gray-desc);
  text-decoration: line-through;
}

.cat-card__perm2 {
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-gray-desc);
}

/* Теги карточки */
.cat-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--color-surface);
  font-family: var(--font-regular);
  font-size: 10px;
  line-height: 1.25;
  color: var(--color-dark);
  white-space: nowrap;
}

.cat-tag img { display: block; }

.cat-tag--green { background: var(--color-green); color: var(--color-white); }
.cat-tag--green img { filter: brightness(0) invert(1); }

.cat-tag--blue { background: var(--color-blue); color: var(--color-white); }
.cat-tag--blue img { filter: brightness(0) invert(1); }

.cat-tag--accent { background: #88FF90; color: var(--color-dark); }

.cat-tag--booked {
  height: 28px;
  background: var(--color-dark);
  color: var(--color-white);
}
.cat-tag--booked img { filter: brightness(0) invert(1); }

/* Фото/планировка */
.cat-card__media {
  position: relative;
  height: 260px;
  cursor: pointer;
}

.cat-card .apt-gallery__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 232px;
  object-fit: contain;
}

.cat-card__img--cover { object-fit: cover; border-radius: 8px; }

.cat-card__dots {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 13px;
}

.cat-card__dots .apt-gallery__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-divider);
}

.cat-card__dots .apt-gallery__dot.is-active { background: var(--color-gray-desc); }

.cat-card__tags {
  display: flex;
  flex-wrap: wrap;
  /* fix22 img_24: строки тегов стояли слишком плотно — расстояние между строками больше */
  gap: 8px 4px;
}

.cat-card__divider {
  border: none;
  border-top: 0.5px solid var(--color-divider);
  margin: 0;
}

/* Инфо-строки */
.cat-card__info {
  display: flex;
  flex-direction: column;
  gap: 10px; /* чуть больше расстояние между строками характеристик (img_33) */
}

.cat-card__info-line {
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-gray-desc);
}

.cat-card__info-line b {
  font-weight: 400;
  color: var(--color-dark);
}

.cat-card__info-line--row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Кнопки карточки */
.cat-card__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.cat-card__book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 136px;
  padding: 6px 12px; /* fix22 img_28: кнопки чуть меньше */
  border-radius: 12px;
  background: var(--color-orange);
  font-size: 12px;
  line-height: 1.25;
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.15s;
}

.cat-card__book:hover { background: #d95f3b; }

/* Забронированная: «Подробнее» приглушённая (серая) + info-tip (img_11,13,36) */
/* Приглушённая «Подробнее» у забронированной квартиры. Приглушена потому, что
   квартира занята, но ведёт на страницу квартиры (раньше была <span> — кнопка
   в никуда), поэтому курсор-указатель и отклик на hover нужны. */
.cat-card__book--muted {
  gap: 6px;
  background: var(--color-gray-200);
  color: var(--color-dark);
  cursor: pointer;
}

.cat-card__book--muted:hover { background: #d8dee6; }

.cat-card__book--muted .cat-i { display: inline-flex; z-index: 3; }

.cat-card__save,
.cat-card__similar,
.cat-card__notify {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px; /* fix22 img_28 */
  border: 1px solid var(--color-dark);
  border-radius: 12px;
  background: transparent;
  font-family: var(--font-regular);
  font-size: 12px;
  line-height: 1.25;
  color: var(--color-dark);
  cursor: pointer;
  text-decoration: none;
}

/* «Забронировать» (outline) в доступной карточке — та же ширина, что у «Подробнее» */
.cat-card__book-alt { width: 136px; }

.cat-card__save.is-fav svg path {
  fill: var(--color-orange);
  stroke: var(--color-orange);
}

.cat-card__actions--booked { justify-content: center; flex-wrap: wrap; }

/* --- Вид «Список» --- */
/* fix22 img_26: карточка ещё ниже — меньше фото, паддинги и зазор между строкой
   характеристик/кнопок и строкой тегов; содержимое подтянуто к центру. */
.cat-grid--list .cat-card {
  display: grid;
  /* fix22 img_25: колонка с названием тянется, поэтому сердечко уезжает к правому
     краю колонки — к разделителю, а не липнет к стоимости. */
  grid-template-columns: 220px minmax(220px, 1fr) minmax(0, 1fr) 186px;
  grid-template-areas:
    "media top info actions"
    "media tags tags actions";
  align-items: start;
  column-gap: 24px;
  row-gap: 6px;
  padding: 12px 32px 12px 12px;
}

.cat-grid--list .cat-card__top { grid-area: top; padding-right: 16px; }
.cat-grid--list .cat-card__media { grid-area: media; height: 144px; align-self: center; margin-right: 16px; }
.cat-grid--list .cat-card .apt-gallery__slide { height: 144px; }
.cat-grid--list .cat-card__dots { display: none; }
.cat-grid--list .cat-card__tags { grid-area: tags; align-self: end; }
.cat-grid--list .cat-card__divider { display: none; }
.cat-grid--list .cat-card__info {
  grid-area: info;
  border-left: 0.5px solid var(--color-divider);
  padding-left: 24px;
  min-height: 52px;
  gap: 8px; /* в списке компактнее, чем в сетке */
  justify-content: center;
  align-self: center;
}
.cat-grid--list .cat-card__actions {
  grid-area: actions;
  flex-direction: column;
  align-items: stretch;
  align-self: center;
  margin-top: 0;
  border-left: 0.5px solid var(--color-divider);
  padding-left: 24px;
  min-height: 52px;
  justify-content: center;
}
.cat-grid--list .cat-card__book,
.cat-grid--list .cat-card__book-alt,
.cat-grid--list .cat-card__similar,
.cat-grid--list .cat-card__notify { width: 100%; }
.cat-grid--list .cat-card__actions--booked { flex-direction: column; flex-wrap: nowrap; }

/* Пусто / показать больше */
.cat-empty {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-gray-desc);
}

.cat-loadmore { margin-top: 32px; text-align: center; }

.cat-loadmore__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid var(--color-dark);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-regular);
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-dark);
  cursor: pointer;
}

/* --- Нумерованная пагинация «01 02 03 … 99» (Правки img_19,20,22) --- */
.cat-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

.cat-pagination[hidden] { display: none; }

.cat-page {
  min-width: 56px;
  height: 52px;
  padding: 0 16px;
  border: none;
  border-radius: 12px;
  background: var(--color-dark);
  font-family: var(--font-regular);
  font-size: 20px;
  line-height: 1;
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.15s;
}

.cat-page:hover { background: #2c2d33; }
.cat-page.is-active { background: var(--color-orange); }

.cat-page-dots {
  color: var(--color-gray-desc);
  letter-spacing: 2px;
  font-size: 12px;
  user-select: none;
}

/* --- 03 CTA --- */
.cat-cta { margin-top: 56px; }

.cat-cta__row {
  display: flex;
  align-items: center;
  gap: 40px;
}

.cat-cta__title {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: 400;
  color: var(--color-dark);
}

.cat-cta__note {
  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--color-dark);
}

/* --- Акции на каталоге --- */
.cat-offers { margin-top: 56px; margin-bottom: 24px; }

.cat-offers .offers__head { justify-content: flex-start; }

.cat-offers .offers__title {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  color: var(--color-dark);
}

/* --- Подсказка «i» --- */
.cat-i {
  position: relative;
  display: inline-flex;
  width: 12px;
  height: 12px;
  flex: none;
  cursor: pointer;
}

.cat-i > img { display: block; }

/* position:fixed — тултип не должен обрезаться лентой чипов
   (.cat-scenarios__track, overflow:auto). Координаты ставит JS (placeTip). */
.cat-tip {
  position: fixed;
  width: 251px;
  padding: 20px;
  border-radius: 16px;
  background: var(--color-white);
  box-shadow: 0 8px 28px rgba(26, 27, 31, 0.14);
  display: none;
  z-index: 200;
  text-align: left;
  white-space: normal;
  cursor: default;
}

/* Показом управляет JS (класс .is-shown), т.к. на время показа тултип
   переносится в <body> и селекторы через .cat-i уже не совпадают. */
.cat-tip.is-shown { display: block; }

/* Размеры по макету: 14 + 12 (было 16 + 14 — «сейчас очень крупно»),
   разные начертания у заголовка и текста (Правки img_44). */
.cat-tip__title {
  display: block;
  font-family: var(--font-regular);
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-dark);
  margin-bottom: 6px;
}

.cat-tip__text {
  display: block;
  font-family: var(--font-book);
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-dark);
}

/* Длинные подсказки (дисклеймеры программ): не выше экрана, дальше — скролл */
.cat-tip {
  max-height: min(480px, calc(100vh - 32px));
  overflow-y: auto;
}

/* Уменьшенный вариант — подсказки ипотечных программ (просьба заказчика):
   мельче текст и горизонтальная плашка (шире и ниже узкой каталожной).
   На мобиле ширину перебивает центрированный попап (.cat-tip.is-shown). */
.cat-tip--sm {
  width: min(560px, calc(100vw - 32px));
  max-height: min(360px, calc(100vh - 32px));
}

.cat-tip--sm .cat-tip__title {
  font-size: 12px;
  margin-bottom: 4px;
}

.cat-tip--sm .cat-tip__text {
  font-size: 10px;
}

/* Каталог: свои межсекционные отступы (56 по макету) вместо лендинговых 104 */
.catalog-main .section + .section { margin-top: 56px; }

/* Основная строка фильтров: группы прижаты влево, свободное место справа —
   как в макете. Было justify-content: space-between: оно растягивало зазоры
   на всю ширину (замер на проде — 204px вместо 16), и Комнатность, Стоимость
   и Площадь разъезжались. */
.cat-filters__row { justify-content: flex-start; }
/* nowrap внутри группы оставляем (пилюли одной группы не разрывать), но при
   нехватке места группа целиком переносится — см. flex-wrap у ряда выше. */
.cat-filters__row .cat-fgroup__options { flex-wrap: nowrap; }

/* Кнопки прижаты к низу — карточки в ряду ровные */
.cat-card__actions { margin-top: auto; padding-top: 8px; }

/* Список: бронь-кнопки колонкой — [Подробнее][Выбрать похожую][Сообщить] */
.cat-grid--list .cat-card__actions--booked {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- Мобильная кнопка «Фильтры» (десктоп: скрыта) --- */
.cat-mbtn { display: none; }

/* ============================================================
   КАТАЛОГ: МОБАЙЛ (≤768) — макеты 520:18083, 593:9896
   ============================================================ */
@media (max-width: 768px) {

  .catalog-main { padding-top: 96px; }

  .cat-wrap { padding: 0 16px; }

  .cat-title { font-size: 28px; line-height: 1.15; }

  /* Десктопные фильтры скрыты — всё в попапе */
  .cat-filters { margin-top: 24px; }
  .cat-filters__title,
  .cat-filters__row,
  .cat-more,
  .cat-extra,
  .cat-scenarios__nav { display: none; }

  /* Большая кнопка «Фильтры» */
  .cat-mbtn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 999px;
    background: var(--color-orange);
    font-family: var(--font-regular);
    font-size: 14px;
    line-height: 1.2;
    color: var(--color-white);
    cursor: pointer;
  }

  /* После применения фильтров — чёрная с бейджем-счётчиком (593:9896) */
  .cat-mbtn.is-applied { background: var(--color-dark); border-radius: 12px; }

  .cat-mbtn__badge {
    position: absolute;
    top: -8px;
    right: 10px;
    min-width: 25px;
    height: 25px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-orange);
    color: var(--color-white);
    font-size: 12px;
    line-height: 25px;
    text-align: center;
  }

  /* Чипы-сценарии: горизонтальный скролл + точки */
  .cat-scenarios { margin-top: 16px; }
  .cat-scenarios__track {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .cat-chip { height: 47px; font-size: 14px; padding: 0 16px; }
  .cat-chip > img:first-child,
  .cat-chip > svg:first-child { width: 14px; height: 14px; }

  .cat-scenarios__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
  }
  .cat-scenarios__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-divider);
  }
  .cat-scenarios__dot.is-active { background: var(--color-gray-desc); }

  /* Итог подбора */
  .cat-summary { margin-top: 32px; }
  .cat-summary__divider { display: none; }
  .cat-summary__found { font-size: 16px; }
  .cat-summary__row { margin-top: 16px; flex-direction: column; }
  .cat-summary__reset { padding-left: 0; background: transparent; }

  /* Выдача */
  .cat-results { margin-top: 32px; padding: 24px 0 32px; }

  .cat-toolbar { justify-content: space-between; }
  .cat-sort { width: auto; min-width: 150px; }
  .cat-sort__btn { border-radius: 999px; padding: 10px 14px; }

  /* Переключатель видов: только иконки */
  .cat-view__opt { padding: 10px; font-size: 0; gap: 0; }
  .cat-view__opt svg { width: 14px; height: 14px; }

  /* Сетка: одна колонка */
  .cat-grid { margin-top: 24px; }
  .cat-grid--cards { grid-template-columns: 1fr; }

  /* Полная карточка (вид «Карточки») */
  .cat-card { border-radius: 16px; }
  .cat-card__type { font-size: 16px; }
  .cat-card__price { font-size: 20px; }
  .cat-card__media { height: 300px; }
  .cat-card .apt-gallery__slide { height: 272px; }
  .cat-card__book { flex: 1 1 auto; padding: 12px; }
  .cat-card__book-alt { width: auto; flex: 1 1 auto; }
  .cat-card__similar, .cat-card__notify { padding: 12px 16px; }

  /* Круглые мини-кнопки — видны только в компакт-списке */
  .cat-card__micons { display: none; }

  /* --- Компакт-список (вид «Список», 593:9896 + правки img_25) --- */
  .cat-grid--list .cat-card {
    grid-template-columns: minmax(0, 1fr) 108px;
    grid-template-areas:
      "top     micons"
      "badges  micons"
      "divider divider"
      "info    media";
    column-gap: 12px;
    row-gap: 8px;
    padding: 16px;
    align-items: start;
  }

  /* Разделитель между верхним и нижним блоком (img_25) */
  .cat-grid--list .cat-card__divider {
    display: block;
    grid-area: divider;
    align-self: center;
    margin: 4px 0;
  }

  .cat-grid--list .cat-card__top {
    grid-area: top;
    padding-right: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  /* Цена наверх, тип под ней (в компакте цена первая) */
  .cat-grid--list .cat-card__head { order: 2; }
  .cat-grid--list .cat-card__prices { order: 1; }
  .cat-grid--list .cat-card__perm2 { order: 3; }
  .cat-grid--list .cat-card__print { display: none; }
  .cat-grid--list .cat-card__type { font-size: 14px; }
  .cat-grid--list .cat-card__price { font-size: 20px; }

  .cat-grid--list .cat-card__micons {
    grid-area: micons;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
  .cat-card__micon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-dark);
    cursor: pointer;
  }
  /* Кнопка «Открыть квартиру» (↗) — оранжевая заливка (img_19) */
  .cat-card__micon--open {
    border-color: var(--color-orange);
    background: var(--color-orange);
    color: var(--color-white);
    text-decoration: none;
  }
  .cat-card__micon.is-fav { color: var(--color-orange); border-color: var(--color-orange); }

  .cat-grid--list .cat-card__media {
    grid-area: media;
    width: 108px;
    height: 96px;
    margin-right: 0;
    align-self: center; /* нижний блок выровнен по центру (img_25) */
  }
  .cat-grid--list .cat-card .apt-gallery__slide { height: 96px; }

  /* Компакт-список: сердечко — в колонке круглых кнопок, не в шапке */
  .cat-grid--list .cat-card__fav { display: none; }

  /* Бейдж «Бронь» между ценой и инфо — из ряда тегов показываем только его */
  .cat-grid--list .cat-card__tags {
    grid-area: badges;
    align-self: start;
    margin: 0;
  }
  .cat-grid--list .cat-card__tags .cat-tag:not(.cat-tag--booked) { display: none; }
  .cat-grid--list .cat-card__actions { display: none; }

  .cat-grid--list .cat-card__info {
    grid-area: info;
    border-left: none;
    padding-left: 0;
    min-height: 0;
    align-self: center; /* нижний блок выровнен по центру (img_25) */
    gap: 6px;
  }
  /* Текст нижнего блока — в колонку: Дом / Секция / Сдача каждая своей строкой (img_25) */
  .cat-grid--list .cat-card__info-line--row { flex-direction: column; gap: 6px; }

  /* «Показать больше» слева */
  .cat-loadmore { text-align: left; margin-top: 24px; }

  /* Белый промежуток между выдачей и футером (Правки img_22): на мобилке
     .cat-cta скрыт, поэтому серая выдача упиралась в серый футер через
     132px белого margin — шов. Убираем: блоки сходятся, фон непрерывный,
     воздух дают padding-bottom выдачи (32) + внутренний отступ футера. */
  .catalog-main + .footer { margin-top: 0; }

  /* Пагинация на мобилке — компактнее (img_19) */
  .cat-pagination { gap: 8px; margin-top: 24px; }
  .cat-page { min-width: 40px; height: 40px; padding: 0 10px; font-size: 14px; border-radius: 10px; }

  /* CTA и Акции на мобильном каталоге отсутствуют (макет 520:18083) */
  .cat-cta, .cat-offers { display: none; }

  /* --- Подсказка «i»: центрированный попап поверх затемнения (595:16769) ---
     Тултип на время показа живёт в <body>, поэтому целимся в .is-shown. */
  .cat-tip.is-shown {
    display: block;
    position: fixed;
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(343px, calc(100vw - 32px));
    z-index: 140;
  }
  body.cat-tip-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(26, 27, 31, 0.45);
    z-index: 130;
  }

  /* --- Мобильный попап фильтров --- */
  .cat-fpopup {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
    background: var(--color-white);
  }
  .cat-fpopup.is-open { display: flex; }

  .cat-fpopup__panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }

  .cat-fpopup__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 16px 8px;
    flex: none;
  }
  .cat-fpopup__title {
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-lh);
    letter-spacing: var(--text-h3-ls);
    color: var(--color-dark);
  }
  .cat-fpopup__close,
  .cat-fpopup__extra-close {
    display: inline-flex;
    padding: 6px;
    border: none;
    background: transparent;
    color: var(--color-dark);
    cursor: pointer;
  }

  .cat-fpopup__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .cat-fpopup__h {
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-lh);
    letter-spacing: var(--text-h3-ls);
    font-weight: 400;
    color: var(--color-dark);
    margin: 0;
  }

  /* Пилюли и поля в попапе крупнее */
  .cat-fpopup .cat-pill { padding: 12px 20px; font-size: 14px; }
  .cat-fpopup .cat-fgroup__label { font-size: 14px; }
  .cat-fpopup .cat-fgroup { gap: 12px; }
  .cat-fpopup .cat-fgroup__options { gap: 8px; }

  .cat-fpopup__body > .cat-fgroup__options { margin-top: -8px; }

  .cat-fgroup__options--stretch { flex-wrap: nowrap; }
  .cat-range--wide { width: auto; flex: 1 1 0; padding: 12px 16px; border-radius: 999px; }
  .cat-range--wide .cat-range__lbl,
  .cat-range--wide .cat-range__unit,
  .cat-range--wide .cat-range__input { font-size: 14px; }

  .cat-fpopup__more { width: 100%; justify-content: center; padding: 13px 16px; }
  .cat-fpopup__more .cat-more__badge {
    top: -10px;
    right: -6px;
    min-width: 25px;
    height: 25px;
    font-size: 12px;
    line-height: 25px;
  }

  .cat-fpopup__extra {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .cat-fpopup__extra[hidden] { display: none; }
  .cat-fpopup__extra-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 0.5px solid var(--color-divider);
  }
  .cat-fpopup__extra .cat-extra__block { gap: 16px; }
  .cat-fpopup__extra .cat-extra__title { font-size: 16px; }

  /* Поле поиска по номеру — компактнее, не на всю ширину (img_27) */
  .cat-numsearch--wide { width: 220px; max-width: 100%; align-self: flex-start; padding: 12px 16px; font-size: 14px; }

  .cat-fpopup__foot {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--color-white);
    box-shadow: 0 -8px 24px rgba(26, 27, 31, 0.06);
  }
  .cat-fpopup__apply {
    flex: 1 1 auto;
    padding: 14px 16px;
    border: none;
    border-radius: 999px;
    background: var(--color-orange);
    font-family: var(--font-regular);
    font-size: 14px;
    line-height: 1.2;
    color: var(--color-white);
    cursor: pointer;
  }
  .cat-fpopup__reset {
    flex: none;
    padding: 14px 20px;
    border: 1px solid var(--color-dark);
    border-radius: 999px;
    background: var(--color-white);
    font-family: var(--font-regular);
    font-size: 14px;
    line-height: 1.2;
    color: var(--color-dark);
    cursor: pointer;
  }
}

/* Каталог мобайл: доводка */
@media (max-width: 768px) {
  /* Попап фильтров и «i»-подсказки — выше cookie-баннера (z 300) */
  .cat-fpopup { z-index: 340; }
  .cat-tip.is-shown { z-index: 360; }
  body.cat-tip-open::after { z-index: 350; }

  /* Компакт-список: бейдж «Бронь» компактный слева (не на всю ширину) */
  .cat-grid--list .cat-card__tags { flex-direction: row; align-items: center; }
  .cat-grid--list .cat-card__tags .cat-tag--booked { flex: none; }

  /* Поля от/до в попапе: не выталкивать за край экрана */
  .cat-range--wide { min-width: 0; }
  .cat-range--wide .cat-range__input { width: 20px; }
}

/* Попап фильтров существует в DOM всегда; вне мобильного media — скрыт */
.cat-fpopup { display: none; }

/* Круглые мини-кнопки карточки создаются JS-ом для моб. компакт-списка — вне его скрыты */
.cat-card__micons { display: none; }

/* Соцсети карточки «Отдел продаж»: после рескина футера (432:12618) блок
   .footer__contacts живёт вне .footer__card — белый фильтр тёмного футера
   красил иконки в белое на белом. Показываем в родном цвете. */
.footer__contacts .footer__social img { filter: none; }

/* ============================================================
   СТРАНИЦА КВАРТИРЫ (ap-*) — макет 801:28974, десктоп 1440
   ============================================================ */

.ap-main { padding-top: 72px; } /* фикс-хедер */

/* --- 00 Шапка: крошки + заголовок --- */
.ap-head {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 56px 80px 0;
  width: 100%;
}

.ap-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-gray-desc);
}

.ap-crumbs__link {
  color: var(--color-gray-desc);
  text-decoration: none;
}

.ap-crumbs__link:hover { color: var(--color-dark); }
.ap-crumbs__sep { font-weight: 300; }
.ap-crumbs__sep--current,
.ap-crumbs__current { color: var(--color-blue); }

.ap-head__titles {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ap-title {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  font-weight: 400;
  color: var(--color-dark);
}

.ap-subtitle {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  color: var(--color-dark);
}

/* --- 01 Серая секция с колонками --- */
.ap-card {
  margin-top: 56px;
  background: var(--color-surface);
  padding: 56px 0;
}

.ap-card__grid {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 80px;
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.ap-left {
  flex: 1 1 735px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ap-right {
  flex: 0 0 512px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- Визуал: теги + план + свитчер --- */
.ap-visual {
  background: var(--color-white);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ap-tags {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.ap-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--color-surface);
  font-size: 10px;
  line-height: 1.25;
  color: var(--color-dark);
}

.ap-tag--blue { background: var(--color-blue); color: var(--color-white); }
.ap-tag--green { background: #A5FDC5; }
.ap-tag--dark { background: var(--color-dark); color: var(--color-white); }
.ap-tag--dark img { filter: brightness(0) invert(1); }

.ap-plan {
  position: relative; /* якорь для стрелок листания */
  width: 100%;
  height: 579px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Стрелки листания видов планировки (Правки img_9) */
.ap-plan__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  opacity: 0.85;
  transition: opacity 0.15s;
}

.ap-plan__arrow:hover { opacity: 1; }
.ap-plan__arrow--prev { left: 8px; }
.ap-plan__arrow--next { right: 8px; }

@media (max-width: 768px) {
  .ap-plan__arrow--prev { left: 0; }
  .ap-plan__arrow--next { right: 0; }
}

.ap-plan__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: none;
}

.ap-plan__img.is-active { display: block; }

/* Свитчер видов (общий для «Планировка/С мебелью…» и «Кратко/Подробно») */
.ap-switcher {
  display: flex;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.ap-switcher__opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-family: var(--font-regular);
  font-size: 10px;
  line-height: 1.25;
  color: var(--color-gray-desc);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.ap-switcher__opt img { opacity: 0.55; }

.ap-switcher__opt.is-active {
  background: var(--color-white);
  border-color: var(--color-orange);
  color: var(--color-dark);
}

.ap-switcher__opt.is-active img { opacity: 1; }

/* --- Характеристики --- */
.ap-info {
  background: var(--color-white);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.ap-table { width: 100%; }

/* Ряд: 8px паддинг; разделитель — псевдоэлемент с воздухом 8px сверху/снизу
   (Figma: Line в обёртке с padding 8 0). Итоговый ритм ~52px. */
.ap-table__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  position: relative;
}
.ap-table__row::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8.5px;
  height: 0.5px;
  background: var(--color-divider);
}
.ap-table__row + .ap-table__row { margin-top: 16px; }
.ap-table__row:last-child::after { display: none; }

.ap-table__name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-dark);
}

.ap-table__value {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-dark);
  text-align: right;
}

/* Режим «Кратко»: скрыть детальные строки */
.ap-info.is-brief .ap-table__row[data-detail] { display: none; }

/* --- Блок «Приезжайте и посмотрите» --- */
.ap-book {
  background: rgba(216, 220, 226, 0.25);
  border-radius: 16px;
}

.ap-book__top { padding: 32px 40px; }

.ap-book__form-col {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.ap-book__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ap-book__title {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: 400;
  color: var(--color-dark);
}

.ap-book__desc {
  max-width: 360px; /* перенос на 2 строки, как в макете */
  font-weight: 300;
  font-size: 16px;
  line-height: 1.45;
  color: var(--color-dark);
}

.ap-book__form {
  width: 456px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ap-book__input {
  width: 100%;
  padding: 16px 20px;
  background: var(--color-white);
  border: none;
  border-radius: 4px;
  font-family: var(--font-book);
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-dark);
}

.ap-book__input::placeholder { color: var(--color-gray-desc); }

.ap-book__bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ap-book__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ap-book__btns .btn--dark img { filter: none; }

.ap-book__legal {
  max-width: 484px;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-gray-desc);
}

.ap-book__legal-link {
  color: var(--color-gray-desc);
  font-weight: 400;
  text-decoration: none;
}

.ap-book__media { padding: 36px; padding-top: 0; }

.ap-book__img {
  position: relative;
  height: 439px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  overflow: hidden;
}

.ap-book__img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 12%, rgba(102, 102, 102, 0) 39%);
  pointer-events: none;
}

.ap-book__progress {
  position: relative;
  width: 100%;
  display: flex;
  gap: 2px;
}

.ap-book__seg {
  flex: 1;
  height: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.4);
}

.ap-book__seg.is-active { background: var(--color-white); }

/* --- Пример отделки: карточка с фото-лентой и полосками-сегментами --- */
.ap-finish {
  background: rgba(216, 220, 226, 0.25);
  border-radius: 16px;
  padding: 32px 40px;
}

.ap-finish__title {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: 400;
  color: var(--color-dark);
  margin-bottom: 24px;
}

.ap-finish__slider { position: relative; }

/* Лента на scroll-snap: свайп и трекпад нативные, JS только подсвечивает сегменты */
.ap-finish__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.ap-finish__track::-webkit-scrollbar { display: none; }

/* Курсор появляется только когда листать есть куда: класс ставит JS. */
.ap-finish__slider.is-clickable .ap-finish__img { cursor: pointer; }

.ap-finish__img {
  flex: 0 0 100%;
  width: 100%;
  height: 440px;
  object-fit: cover;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Сегменты: видимая полоска 2px (::after), сама кнопка выше — чтобы было куда попасть */
.ap-finish__bars {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  display: flex;
  gap: 8px;
}

.ap-finish__bar {
  flex: 1;
  height: 14px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.ap-finish__bar::after {
  content: '';
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.4);
}

.ap-finish__bar.is-active::after { background: var(--color-white); }

/* --- Правая колонка: sticky-панель цены --- */
.ap-buy {
  position: sticky;
  top: 88px;
  z-index: 3;
  background: var(--color-white);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.ap-buy__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ap-buy__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 16px; /* компактные ряды шапки, как в макете (лейблы фикс. высоты) */
}

.ap-buy__title {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
  font-weight: 400;
  color: var(--color-dark);
}

.ap-buy__print {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  opacity: 0.9;
}

.ap-buy__print:hover { opacity: 0.6; }

.ap-buy__prices {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  height: 24px;
}

.ap-buy__price {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  color: var(--color-orange);
}

.ap-buy__price-old {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  color: var(--color-gray-desc);
  text-decoration: line-through;
}

.ap-buy__discount {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 4px 8px;
  border-radius: 8px;
  background: #88FF90;
  font-size: 10px;
  line-height: 1.25;
  color: var(--color-dark);
}

.ap-buy__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-gray-desc);
  height: 16px;
}

.ap-buy__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ap-buy__btn { width: 100%; }

/* Ряд «Забронировать + сердце»: сердце — только мобайл (макет 850:20603) */
.ap-buy__row {
  display: flex;
  gap: 8px;
}

.ap-buy__row .ap-buy__btn { flex: 1; }

/* Кнопка «Сохранить» рядом с «Забронировать» — по макету она есть и с текстом
   (Правки img_10). Была скрыта на десктопе (display:none), видна только на мобилке. */
.ap-buy__fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  white-space: nowrap;
}

/* fix22 img_36: «Сохранено» — та же кнопка, что и «Сохранить», меняется только
   иконка (сердечко становится залитым), без оранжевой окраски. */
.ap-buy__fav.is-fav {
  border-color: var(--color-dark);
  color: var(--color-dark);
}

.ap-buy__fav.is-fav img { filter: none; }

/* На ховере кнопка заливается тёмным — иконку инвертируем, иначе она сливается */
.ap-buy__fav:hover img { filter: brightness(0) invert(1); }

/* В состоянии «Сохранено» правила выше держали тёмные иконку и текст, и на
   тёмной заливке ховера кнопка выглядела пустой. */
.ap-buy__fav.is-fav:hover {
  background: var(--color-dark);
  color: var(--color-white);
}

.ap-buy__fav.is-fav:hover img { filter: brightness(0) invert(1); }

/* Кнопка «Рассчитать ипотеку» — светло-серая заливка */
.btn--gray {
  background: var(--color-gray-200);
  color: var(--color-dark);
  border: 1.5px solid transparent;
}

.btn--gray:hover {
  opacity: 1;
  background: #d5dde5;
}

/* Outline-кнопки правой панели по макету 1.5px */
.ap-buy__actions .btn--outline { border-width: 1.5px; }

/* --- Панели правой колонки --- */
.ap-panel {
  background: var(--color-white);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ap-panel__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ap-panel__title {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
  font-weight: 400;
  color: var(--color-dark);
}

.ap-panel__sub {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-dark);
}

/* Условия покупки */
.ap-terms__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 237px;
}

.ap-terms__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-dark);
}

.ap-terms__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ap-terms__btns .btn--outline { border-width: 1px; }

/* Варианты на других этажах */
.ap-floors { gap: 32px; }

.ap-floors__table { width: 100%; }

.ap-floors__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  text-decoration: none;
  position: relative;
}

.ap-floors__row::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8.5px;
  height: 0.5px;
  background: var(--color-divider);
}

.ap-floors__row + .ap-floors__row { margin-top: 16px; }
.ap-floors__row:last-child::after { display: none; }

.ap-floors__name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-dark);
}

.ap-floors__right {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.ap-floors__price {
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-dark);
}

.ap-floors__row:hover .ap-floors__price { color: var(--color-orange); }

/* Похожие квартиры */
.ap-similar__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ap-similar__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ap-sim {
  background: var(--color-white);
  border: 0.5px solid var(--color-divider);
  border-radius: 8px;
  padding: 16px;
}

.ap-sim__info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ap-sim__head {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
}

.ap-sim__price-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ap-sim__prices {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.ap-sim__price {
  font-size: 16px;
  line-height: 1.2;
  color: var(--color-orange);
}

.ap-sim__price-old {
  font-size: 12px;
  line-height: 1.2;
  color: var(--color-gray-desc);
  text-decoration: line-through;
}

.ap-sim__type {
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-dark);
}

.ap-sim__perm2 {
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-gray-desc);
}

.ap-sim__btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ap-sim__round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 0;
  background: none;
}

/* fix22 img_38: состав кнопок — «открыть» (оранжевая), «позвонить» и «сохранить»
   с обводкой (макет 801:28974). Ссылку «Смотреть» под блоком убрали. */
.ap-sim__round--open { background: var(--color-orange); }
.ap-sim__round--open img { filter: brightness(0) invert(1); }
.ap-sim__round--open:hover { background: #d95d36; }

.ap-sim__round--phone { border-color: var(--color-dark); }
.ap-sim__round--phone:hover { background: var(--color-surface); }

.ap-sim__round--fav { border-color: var(--color-dark); }
.ap-sim__round--fav:hover { background: var(--color-surface); }

/* Без этого нажатие на сердечко не давало никакой видимой реакции */
.ap-sim__round--fav.is-fav {
  background: var(--color-dark);
  border-color: var(--color-dark);
}

.ap-sim__round--fav.is-fav img { filter: brightness(0) invert(1); }

.ap-sim__divider {
  border: none;
  border-top: 0.5px solid var(--color-divider);
  margin: 0;
}

.ap-sim__foot {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ap-sim__lines {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ap-sim__line {
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-gray-desc);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ap-sim__line b {
  font-weight: 400;
  color: var(--color-dark);
}

.ap-sim__plan {
  flex: none;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ap-sim__plan img {
  width: 100px;
  height: 84px;
  object-fit: contain;
}

.ap-similar__more {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.25;
  color: var(--color-dark);
  text-decoration: none;
  padding: 0 2px;
}

.ap-similar__more:hover { color: var(--color-orange); }

/* --- 02 CTA --- */
.ap-cta {
  max-width: var(--container-max);
  margin-inline: auto;
  width: 100%;
  padding: 56px 80px;
  display: flex;
  align-items: center;
  gap: 40px;
}

.ap-cta__title {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: 400;
  color: var(--color-dark);
}

.ap-cta__note {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-dark);
}

/* Футер на странице квартиры идёт сразу после CTA */
.page-apartment .footer { margin-top: 0; }

/* ============================================================
   ИПОТЕЧНЫЙ КАЛЬКУЛЯТОР (попап) — макеты 801:29235 / 801:29238
   ============================================================ */

.ap-calc {
  position: fixed;
  inset: 0;
  z-index: 420;
  overflow-y: auto;
  visibility: hidden;
}

.ap-calc.is-open { visibility: visible; }

.ap-calc__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

.ap-calc.is-open .ap-calc__overlay { animation: ap-fade-in 0.25s ease; }

.ap-calc__window {
  position: relative;
  outline: none; /* фокус переносится на окно при открытии */
  width: 1165px;
  max-width: calc(100% - 40px);
  margin: 130px auto 130px;
  background: #F7F9FB;
  border-radius: 20px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Анимация появления: финальное состояние = базовое (без transition),
   поэтому скрины и печать всегда в чистом виде */
.ap-calc.is-open .ap-calc__window { animation: ap-pop-in 0.3s ease; }

@keyframes ap-fade-in {
  from { opacity: 0; }
}

@keyframes ap-pop-in {
  from { opacity: 0; transform: translateY(24px); }
}

.ap-calc__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ap-calc__caption {
  font-size: 16px;
  line-height: 1.2;
  color: var(--color-border);
}

.ap-calc__close {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}

.ap-calc__close:hover { opacity: 0.7; }

.ap-calc__body {
  display: flex;
  align-items: flex-start;
  gap: 56px;
}

/* Левая колонка попапа */
.ap-calc__inputs {
  flex: 0 0 397px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.ap-calc__fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ap-calc__fields-title {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
  font-weight: 400;
  color: var(--color-dark);
}

.ap-calc__field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* Поле и селект — 296px; микротабы под ними занимают всю колонку (397) */
.ap-calc__field .ap-select,
.ap-calc__field .ap-calc__valuebox {
  width: 296px;
}

.ap-calc__label {
  padding-left: 2px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-gray-desc);
}

.ap-calc__field .ap-calc__label { margin-bottom: -8px; }

.ap-calc__valuebox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  background: var(--color-white);
  border: 1px solid #000;
  border-radius: 24px;
  cursor: text;
}

.ap-calc__field .ap-calc__valuebox--down { width: 223px; }
.ap-calc__field .ap-calc__valuebox--years { width: 262px; }

/* Инпут внутри бокса без своей рамки: фокус показываем на боксе,
   иначе с клавиатуры не видно, какое поле активно */
/* У бокса уже есть чёрная рамка 1px, поэтому inset был бы «чёрным по чёрному» —
   берём внешний контур с отступом. */
.ap-calc__valuebox:focus-within {
  outline: 2px solid var(--color-dark);
  outline-offset: 2px;
}

.ap-calc__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font-regular);
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-dark);
  outline: none;
}

.ap-calc__unit {
  flex: none;
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-gray-desc);
}

/* Микротабы (проценты взноса / срок) */
.ap-microtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ap-microtab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: none;
  border-radius: 999px;
  background: var(--color-gray-200);
  font-family: var(--font-regular);
  font-size: 10px;
  line-height: 1.25;
  color: var(--color-gray-desc);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.ap-microtab:hover { background: #d5dde5; }

.ap-microtab.is-active {
  background: var(--color-orange);
  color: var(--color-white);
}

.ap-calc__disclaimer {
  max-width: 345px;
  font-size: 10px;
  line-height: 1.25;
  color: var(--color-gray-desc);
}

/* Селект (кастомный дропдаун) — макеты 839:45562 / 839:45557 */
.ap-select { position: relative; }

.ap-select__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--color-white);
  border: 0.5px solid var(--color-dark);
  border-radius: 12px;
  font-family: var(--font-regular);
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-dark);
  cursor: pointer;
}

.ap-select__chevron { transition: transform 0.2s ease; }
.ap-select.is-open .ap-select__chevron { transform: rotate(180deg); }

.ap-select__list {
  position: absolute;
  top: 32px;
  left: 0;
  right: 0;
  z-index: 5;
  list-style: none;
  margin: 0;
  padding: 12px;
  background: var(--color-white);
  border: 0.5px solid var(--color-divider);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(26, 27, 31, 0.06);
}

.ap-select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 2px 10px;
  border-bottom: 0.5px solid var(--color-surface);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-gray-desc);
  cursor: pointer;
}

.ap-select__option:last-child {
  border-bottom: none;
  padding-bottom: 2px;
}

.ap-select__option::after {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 0.667px solid var(--color-divider);
  background: transparent no-repeat center / 16px 16px;
}

.ap-select__option.is-selected {
  font-weight: 400;
  color: var(--color-dark);
}

.ap-select__option.is-selected::after {
  border: none;
  background-image: url('assets/icons/ic-check-on.svg');
}

.ap-select__option:hover { color: var(--color-dark); }

/* Заявка на консультацию в попапе */
.ap-calc__help {
  background: var(--color-white);
  border: 1px solid var(--color-divider);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ap-calc__help-title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ap-calc__help-title img { flex: none; }

.ap-calc__help-title p {
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-dark);
}

.ap-calc__help-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ap-calc__help-input {
  width: 100%;
  padding: 16px 20px;
  background: var(--color-surface);
  border: none;
  border-radius: 4px;
  font-family: var(--font-book);
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-dark);
}

.ap-calc__help-input::placeholder { color: var(--color-gray-desc); }

.ap-calc__help-bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ap-calc__help-bottom .btn { align-self: flex-start; }

.ap-calc__help-legal {
  font-weight: 300;
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-gray-desc);
}

.ap-calc__help-legal a {
  color: var(--color-gray-desc);
  font-weight: 400;
  text-decoration: none;
}

/* Правая колонка попапа: карточки программ */
.ap-calc__results {
  flex: 1;
  min-width: 0;
  max-width: 616px; /* в макете колонка карточек фикс. 616 */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ap-calc__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ap-prog {
  display: flex;
  justify-content: space-between;
  padding: 24px;
  background: var(--color-white);
  border: 0.5px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.ap-prog.is-selected {
  border: 1.5px solid var(--color-orange);
  padding: 23px;
}

.ap-prog__summary {
  flex: 1;
  min-width: 0;
  padding-right: 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.ap-prog__name {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ap-prog__title {
  font-size: 16px;
  line-height: 1.2;
  color: var(--color-dark);
}

.ap-prog__desc {
  font-weight: 300;
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-dark);
}

.ap-prog__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ap-prog__row {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.ap-prog__row-label {
  flex: none;
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-dark);
}

.ap-prog__row-line {
  flex: 1;
  border-bottom: 0.5px dashed var(--color-divider);
  margin-bottom: 3px;
}

.ap-prog__row-value {
  flex: none;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-dark);
}

.ap-prog__more {
  align-self: flex-start;
  padding: 8px 12px;
  border: none;
  border-radius: 12px;
  background: var(--color-gray-200);
  font-family: var(--font-regular);
  font-size: 12px;
  line-height: 1.25;
  color: var(--color-dark);
  cursor: pointer;
}

.ap-prog__more:hover { background: #d5dde5; }

.ap-prog__out {
  flex: none;
  display: flex;
  align-items: stretch;
  gap: 24px;
}

.ap-prog__vline {
  width: 0.5px;
  background: var(--color-divider);
}

.ap-prog__calc {
  width: 187px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.ap-prog__price {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
  color: var(--color-orange);
}

.ap-prog__price-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ap-prog__old-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.ap-prog__price-old {
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-gray-desc);
  text-decoration: line-through;
}

.ap-prog__saving {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 4px 8px;
  border-radius: 8px;
  background: #88FF90;
  font-size: 10px;
  line-height: 1.25;
  color: var(--color-dark);
}

.ap-prog__payment {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ap-prog__payment-label {
  font-size: 10px;
  line-height: 1.25;
  color: var(--color-border);
}

.ap-prog__payment-value {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
  color: var(--color-dark);
}

.ap-prog__check {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 0.667px solid var(--color-divider);
  background: transparent no-repeat center / 16px 16px;
}

.ap-prog.is-selected .ap-prog__check {
  border: none;
  background-image: url('assets/icons/ic-check-on.svg');
}

.ap-calc__submit { width: 100%; }

/* Неподходящие программы */
.ap-calc__unfit {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px; /* больше воздуха после кнопки «Оставить заявку» (Правки img_18) */
}

.ap-calc__unfit-title {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
  font-weight: 400;
  color: var(--color-dark);
}

.ap-prog--unfit { cursor: default; }
.ap-prog--unfit .ap-prog__title,
.ap-prog--unfit .ap-prog__desc,
.ap-prog--unfit .ap-prog__row-label,
.ap-prog--unfit .ap-prog__row-value { color: var(--color-gray-desc); }

.ap-prog--unfit .ap-prog__more {
  background: var(--color-surface);
  color: #A6ABB4;
  cursor: default;
}

.ap-prog__warn-ico { flex: none; display: block; }

.ap-prog__warn {
  flex: none;
  width: 220px;
  background: #FFF0C2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  text-align: center;
}

.ap-prog__warn-text {
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-dark);
  max-width: 130px;
}

.ap-prog__warn-btn {
  padding: 8px 12px;
  border: none;
  border-radius: 12px;
  background: var(--color-white);
  font-family: var(--font-regular);
  font-size: 12px;
  line-height: 1.25;
  color: var(--color-dark);
  cursor: pointer;
}

.ap-prog__warn-btn:hover { background: var(--color-surface); }

/* fix22 img_35: неактивная кнопка-рекомендация (подобрать взнос под программу
   нельзя, но подсказка «что сделать» остаётся на виду) */
.ap-prog__warn-btn.is-disabled,
.ap-prog__warn-btn[disabled] {
  background: rgba(255, 255, 255, 0.5);
  color: var(--color-gray-desc);
  cursor: default;
}

.ap-prog__warn-btn[disabled]:hover { background: rgba(255, 255, 255, 0.5); }

/* Скролл-лок при открытом попапе */
body.ap-calc-open { overflow: hidden; }

/* Deep-link ?calc=1 (px-сверка): без анимации, скрин сразу в финальном состоянии */
.ap-calc--noanim .ap-calc__overlay,
.ap-calc--noanim .ap-calc__window { animation: none !important; }

/* ============================================================
   СТРАНИЦА КВАРТИРЫ — МОБАЙЛ (макет 850:20603, 360px)
   ============================================================ */
@media (max-width: 768px) {

  /* --- Шапка: крошки + заголовок --- */
  .ap-head { padding: 56px 16px 0; }

  .ap-crumbs {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .ap-head__titles { margin-top: 32px; }

  .ap-title {
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-lh);
    letter-spacing: var(--text-h3-ls);
  }

  .ap-subtitle {
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0;
  }

  /* --- Серая секция: одна колонка, порядок карточек по макету --- */
  .ap-card { padding: 16px 0 40px; }

  .ap-card__grid {
    padding-inline: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  /* Колонки распускаются — карточки выстраиваются в одну ленту */
  .ap-left,
  .ap-right { display: contents; }

  .ap-visual { order: 1; }
  .ap-buy    { order: 2; }
  .ap-terms  { order: 3; }
  .ap-info   { order: 4; }
  .ap-floors { order: 5; }
  .ap-finish { order: 6; }
  .ap-book   { order: 7; }

  /* Похожих квартир и CTA-блока в мобильном макете нет */
  .ap-similar,
  .ap-cta { display: none; }

  /* --- Визуал: план 236px, свитчер скроллится при нехватке ширины --- */
  .ap-plan { height: 236px; }

  /* Свитчер в макете шире контентной зоны (заходит в паддинг карточки, по центру) */
  .ap-visual .ap-switcher {
    max-width: calc(100% + 24px);
    margin-inline: -12px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ap-visual .ap-switcher::-webkit-scrollbar { display: none; }

  .ap-visual .ap-switcher__opt {
    flex: none;
    white-space: nowrap;
  }

  /* --- Компактные кнопки карточек (макет: паддинг 8/16, r12, текст 14/16) --- */
  .ap-buy__actions .btn,
  .ap-terms__btns .btn,
  .ap-book__btns .btn {
    width: 100%;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: var(--text-btn-m-size);
    line-height: var(--text-btn-m-lh);
  }

  /* --- Панель цены: обычная карточка (не sticky), цена 18px --- */
  .ap-buy { position: static; }

  .ap-buy__prices { height: auto; }

  .ap-buy__price {
    font-size: var(--text-h4-size);
    line-height: var(--text-h4-lh);
    letter-spacing: var(--text-h4-ls);
  }

  .ap-buy__price-old {
    font-size: 14px;
    line-height: 1.2;
  }

  .ap-buy__meta {
    height: auto;
    flex-wrap: wrap;
    gap: 9px;
  }

  .ap-buy__actions .ap-buy__fav {
    display: inline-flex;
    width: auto;
    flex: none;
    border-width: 1px;
  }

  .ap-buy__actions .ap-buy__row .ap-buy__btn {
    width: auto;
    flex: 1;
  }

  /* «Записаться на экскурсию» в панели цены — только десктоп */
  .ap-buy__btn--visit { display: none; }

  /* --- Характеристики: длинные значения переносятся под название --- */
  .ap-table__row {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* --- Пример отделки: без карточки (заголовок и фото прямо на сером), 328×200 --- */
  .ap-finish {
    background: transparent;
    border-radius: 0;
    padding: 0;
  }

  .ap-finish__title {
    font-size: var(--text-h4-size);
    line-height: var(--text-h4-lh);
    margin-bottom: 20px;
  }

  .ap-finish__img {
    height: auto;
    aspect-ratio: 328 / 200;
  }

  /* --- Экскурсия: full-bleed секция под серой обёрткой --- */
  .ap-book {
    margin: 16px -16px -40px; /* 24 (gap) + 16 = 40 до серого низа; по бокам и снизу — в край */
    border-radius: 0;
    background: var(--color-gray-200);
    padding-bottom: 48px;
  }

  .ap-book__top { padding: 32px 16px; }

  .ap-book__form-col { gap: 32px; }

  .ap-book__form { width: 100%; }

  .ap-book__btns { flex-direction: column; }

  .ap-book__media { padding: 0 16px; }

  /* fix22 img_41: пропорции фото как в макете (328×200 → тянется по ширине),
     и убираем белую полосу между блоком заявки и футером — секция и футер
     одного цвета, а сквозь отступ футера просвечивал белый body. */
  .ap-book__img {
    height: auto;
    aspect-ratio: 328 / 200;
  }

  /* ~, а не + : между main и футером в разметке стоит <script> */
  .ap-main ~ .footer { margin-top: 0; }

  /* --- Ипотечный калькулятор: мобильного макета нет — функциональный
     фолбэк, чтобы попап не разваливался на узких экранах --- */
  .ap-calc__window {
    max-width: calc(100% - 16px);
    margin: 16px auto;
    padding: 24px 16px;
  }

  .ap-calc__body {
    flex-direction: column;
    gap: 32px;
  }

  .ap-calc__inputs {
    flex: none;
    width: 100%;
  }

  .ap-calc__field .ap-select,
  .ap-calc__field .ap-calc__valuebox,
  .ap-calc__field .ap-calc__valuebox--down,
  .ap-calc__field .ap-calc__valuebox--years { width: 100%; }

  .ap-microtabs { flex-wrap: wrap; }

  .ap-calc__results { max-width: 100%; }
}

/* Карточки ипотечных программ в модалке калькулятора переводим в мобильную
   раскладку уже с 1024: в две колонки на этой ширине карточка ломается —
   слева заголовок и «Подробнее о программе» переносятся по словам, точечная
   линия у параметров сжимается в ничто, а правая половина под ценой пустует
   (замер: высота карточки 334px против 268px на 1280). Правила те же, что
   были в блоке 768px, просто вынесены под свою точку. */
@media (max-width: 1024px) {
  /* fix22 img_34: на мобилке карточка программы собрана иначе (макет 867:21696) —
     сверху цена и платёж, ниже, за разделителем, название с параметрами;
     галочка выбора уходит в правый верхний угол. */
  .ap-prog {
    position: relative;
    flex-direction: column;
    gap: 16px;
  }

  .ap-prog__out { order: -1; }

  .ap-prog__summary {
    border-top: 0.5px solid var(--color-border);
    padding-top: 16px;
  }

  .ap-prog__check {
    position: absolute;
    top: 16px;
    right: 16px;
  }

  .ap-prog__vline { display: none; }
}

/* ============================================================
   СТРАНИЦЫ ПРОГРАММ — Ипотека / Рассрочка
   Макет: 838:40188 (Ипотека), 839:41798 (Рассрочка), desktop 1440.
   Статик-референс: ipoteka.html / rassrochka.html
   ============================================================ */

.prg-page {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding-top: 128px; /* 72 хедер + 56 отступ секции */
  padding-bottom: 56px;
  background-color: var(--color-white);
}

/* По макету между CTA и футером те же 56px, что и между секциями,
   а не глобальные 132px отступа футера. */
.page-programs .footer { margin-top: 0; }

/* Общий контейнер секций страницы */
.prg-head,
.prg-section,
.prg-cta,
.mrt-terms,
.mrt-cond,
.mrt-calc-section {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

/* --- Хлебные крошки --- */
.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.breadcrumbs__link,
.breadcrumbs__current {
  padding: 0 2px;
  font-family: var(--font-regular);
  font-size: var(--text-body3s-size);
  line-height: var(--text-body3s-lh);
  color: var(--color-gray-desc);
  text-decoration: none;
}

a.breadcrumbs__link:hover { color: var(--color-dark); }

.breadcrumbs__sep {
  padding: 0 2px;
  font-family: var(--font-book);
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  color: var(--color-gray-desc);
}

.breadcrumbs__sep--current,
.breadcrumbs__current { color: var(--color-blue); }

/* --- Заголовок страницы --- */
.prg-head {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.prg-head__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.prg-head__title {
  font-family: var(--font-regular);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  font-weight: 400;
  color: var(--color-dark);
}

.prg-head__lead {
  font-family: var(--font-book);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  color: var(--color-dark);
}

/* --- Плитки-офферы --- */
.prg-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Плитка = сплошная заливка (или градиент) + фото поверх неё справа.
   В макете фото — отдельный слой заливки со своей матрицей кадрирования,
   поэтому размер/позиция приходят инлайном в --tile-size / --tile-pos. */
.prg-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 146px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--tile-fill, var(--color-surface));
}

.prg-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--tile-photo, none);
  background-size: var(--tile-size, cover);
  background-position: var(--tile-pos, center);
  background-repeat: no-repeat;
}

/* В макете у траншевой ипотеки фото отзеркалено по горизонтали. */
.prg-tile--mirror::before { transform: scaleX(-1); }

.prg-tile__text,
.prg-tile__btn { position: relative; }

.prg-tile__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 16px;
}

.prg-tile__title {
  font-family: var(--font-regular);
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-lh);
  font-weight: 400;
  color: var(--color-white);
}

.prg-tile__desc {
  font-family: var(--font-regular);
  font-size: var(--text-body3s-size);
  line-height: var(--text-body3s-lh);
  color: var(--color-white);
}

.prg-tile__btn {
  align-self: flex-start;
  border-width: 1px;
}

/* --- Секция со свитчером и группами --- */
.prg-section--programs {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* --- Свитчер групп --- */
.prg-switcher {
  display: inline-flex;
  align-self: flex-start;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
}

.prg-switcher__opt {
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-regular);
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-lh);
  color: var(--color-gray-desc);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

.prg-switcher__opt:hover { color: var(--color-dark); }

.prg-switcher__opt.is-active {
  background-color: var(--color-white);
  border-color: var(--color-orange);
  color: var(--color-dark);
}

/* --- Группа программ --- */
.prg-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-margin-top: 96px;
}

.prg-group__title {
  font-family: var(--font-regular);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
  font-weight: 400;
  color: var(--color-dark);
}

/* --- Строка-программа --- */
.prg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

/* Первая программа группы — в макете отдельный компонент с увеличенными
   вертикальными полями (ProgramSummaryBlock: 16px против 12px). */
.prg-row--lg {
  padding-top: 16px;
  padding-bottom: 16px;
}

.prg-row__info {
  display: flex;
  align-items: center;
  min-width: 0;
}

.prg-row__title {
  flex: 0 0 275px;
  width: 275px;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prg-row__name {
  font-family: var(--font-regular);
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-lh);
  font-weight: 400;
  color: var(--color-dark);
}

/* Подсказка «i» у названия программы (тот же .cat-i, что в каталоге) */
.prg-row__name .cat-i {
  margin-left: 8px;
  vertical-align: middle;
}

.prg-row__desc {
  /* fix22 img_31: описание и подписи над цифрами — body/regular, а не book */
  font-family: var(--font-regular);
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  color: var(--color-dark);
}

.prg-row__meta {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin: 0;
}

.prg-row__cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 118px; /* fix22 img_32: колонки чуть шире, цифры не липнут к разделителям */
}

.prg-row__label {
  font-family: var(--font-regular); /* fix22 img_31 */
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  color: var(--color-dark);
}

.prg-row__value {
  margin: 0;
  font-family: var(--font-regular);
  font-size: var(--text-body2s-size);
  line-height: 1.4;
  color: var(--color-dark);
}

.prg-row__divider {
  align-self: stretch;
  width: 1px;
  min-height: 38px;
  background-color: var(--color-divider);
  transform: scaleX(0.5);
}

.prg-row__action { flex: none; }

/* --- CTA «Остались вопросы?» --- */
.prg-cta {
  display: flex;
  align-items: center;
  gap: 40px;
}

.prg-cta__title {
  font-family: var(--font-regular);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: 400;
  color: var(--color-dark);
}

.prg-cta__btn { flex: none; }

.prg-cta__note {
  flex: 1;
  font-family: var(--font-book);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  color: var(--color-dark);
}

/* ============================================================
   ПРОГРАММЫ — мобильная адаптация (≤768).
   Страницы «Ипотека»/«Рассрочка» верстались под десктоп: строка программы
   уезжала за экран (горизонтальный скролл ~544px), плитки схлопывались в
   4 колонки по 78px, свитчер групп не помещался.
   ============================================================ */
@media (max-width: 768px) {
  .prg-tiles { grid-template-columns: 1fr; }

  .prg-switcher {
    align-self: stretch;
    flex-wrap: wrap;
  }

  .prg-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 16px;
  }

  .prg-row__info {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .prg-row__title {
    flex: none;
    width: auto;
    padding-right: 0;
  }

  .prg-row__meta {
    flex-wrap: wrap;
    gap: 12px 24px;
  }

  /* min-width из десктопной версии (fix22 img_32) на мобилке распирает строку */
  .prg-row__cell {
    min-width: 0;
    flex: 1 1 40%;
  }

  .prg-row__divider { display: none; }

  .prg-row__action { align-self: flex-start; }

  .prg-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* ============================================================
   СТРАНИЦА «АКЦИИ И СПЕЦИАЛЬНЫЕ ПРЕДЛОЖЕНИЯ»
   Макет: 857:21269 (desktop 1440), 888:26054 (mobile 360).
   Статик-референс: akcii.html
   Каркас страницы повторяет страницы программ (.prg-page), карточка —
   собственный компонент: карточка акций на главной (.offer-card) это
   плитка 300x300 в горизонтальном слайдере, её переопределять нельзя.
   ============================================================ */

.ofr-page {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding-top: 128px; /* 72 хедер + 56 отступ секции */
  padding-bottom: 56px;
  background-color: var(--color-white);
}

/* По макету между CTA и футером те же 56px, что и между секциями. */
.page-offers .footer { margin-top: 0; }

/* Общий контейнер секций страницы (.prg-cta приходит из общего партиала CTA) */
.ofr-head,
.ofr-section {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

/* --- Шапка страницы --- */
.ofr-head {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.ofr-head__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ofr-head__title {
  font-family: var(--font-regular);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  font-weight: 400;
  color: var(--color-dark);
}

.ofr-head__lead {
  font-family: var(--font-book);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  color: var(--color-dark);
}

/* --- Свитчер категорий (Switcher 482:14580) --- */
/* Визуально совпадает с .prg-switcher, но фильтрует карточки, а не скроллит. */
.ofr-section {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.ofr-switcher {
  display: inline-flex;
  align-self: flex-start;
  flex-wrap: wrap;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
}

.ofr-switcher__opt {
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font-regular);
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-lh);
  color: var(--color-gray-desc);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

.ofr-switcher__opt:hover { color: var(--color-dark); }

.ofr-switcher__opt.is-active {
  background-color: var(--color-white);
  border-color: var(--color-orange);
  color: var(--color-dark);
}

/* --- Сетка карточек --- */
/* В макете колонки заданы фиксированными (521px) и сетка не дотянута до
   правого края контейнера — растягиваем на всю ширину, как остальные секции. */
.ofr-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.ofr-empty {
  font-family: var(--font-book);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  color: var(--color-gray-desc);
}

.ofr-empty[hidden] { display: none; }

/* --- Карточка акции (Offer Card 888:27342) --- */
.ofr-card {
  height: 300px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--ofr-bg, var(--color-surface));
  background-image: var(--ofr-overlay, none), var(--ofr-photo, none);
  background-size: cover, var(--ofr-photo-size, cover);
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: normal, var(--ofr-blend, normal);
}

.ofr-card--wide { grid-column: span 2; }

.ofr-card[hidden] { display: none; }

.ofr-card__content {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 16px;
  padding: 24px 28px;
}

.ofr-card__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.ofr-card__titles {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ofr-card__title {
  font-family: var(--font-regular);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  font-weight: 400;
  color: var(--color-white);
}

.ofr-card__subtitle {
  font-family: var(--font-regular);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
  color: var(--color-white);
}

.ofr-card__note {
  font-family: var(--font-regular);
  font-size: var(--text-body3s-size);
  line-height: var(--text-body3s-lh);
  color: var(--color-white);
}

.ofr-card__aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  flex: none;
  gap: 16px;
}

/* Плашка срока действия */
.ofr-card__date {
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background-color: var(--color-mint);
  font-family: var(--font-book);
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  color: var(--color-dark);
  text-align: right;
  white-space: nowrap;
}

/* Кнопка «Подробнее»: обводка 1px по цвету текста карточки */
.ofr-card__btn {
  border: 1px solid var(--color-white);
  color: var(--color-white);
  background: transparent;
}

.ofr-card__btn:hover {
  opacity: 1;
  background-color: var(--color-white);
  color: var(--color-dark);
}

.ofr-card__btn:hover .ofr-card__btn-ico { filter: brightness(0); }

.ofr-card__btn-ico {
  width: 12px;
  height: 12px;
  display: block;
}

/* Карточка на светлой подложке — тёмный текст и тёмная обводка */
.ofr-card--dark .ofr-card__title,
.ofr-card--dark .ofr-card__subtitle,
.ofr-card--dark .ofr-card__note { color: var(--color-dark); }

.ofr-card--dark .ofr-card__btn {
  border-color: var(--color-dark);
  color: var(--color-dark);
}

.ofr-card--dark .ofr-card__btn:hover {
  background-color: var(--color-dark);
  color: var(--color-white);
}

.ofr-card--dark .ofr-card__btn:hover .ofr-card__btn-ico { filter: brightness(0) invert(1); }

/* ============================================================
   АКЦИИ — мобильная адаптация (≤768).
   По макету 888:26054: одна колонка, карточка ниже (200 против 300),
   уменьшенная типографика, у кнопки остаётся только иконка.
   ============================================================ */
@media (max-width: 768px) {
  .ofr-head__title {
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-lh);
    letter-spacing: var(--text-h3-ls);
  }

  .ofr-section { gap: 32px; }

  .ofr-switcher {
    align-self: stretch;
    justify-content: center;
  }

  .ofr-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .ofr-card--wide { grid-column: auto; }

  .ofr-card { height: 200px; }

  .ofr-card__content { padding: 16px; }

  .ofr-card__title {
    font-size: var(--text-h4-size);
    line-height: var(--text-h4-lh);
    letter-spacing: var(--text-h4-ls);
  }

  .ofr-card__subtitle {
    font-size: var(--text-h6-size);
    line-height: var(--text-h6-lh);
    letter-spacing: normal;
  }

  .ofr-card__note {
    font-size: var(--text-xs-size);
    line-height: var(--text-xs-lh);
  }

  .ofr-card__btn-label { display: none; }
}

/* ============================================================
   СТРАНИЦА «ЧАСТЫЕ ВОПРОСЫ»
   Макет: 882:33249 (desktop 1440), 882:33982 (mobile 360).
   Статик-референс: faq.html
   Обе контентные секции — как есть с лендинга (.section--faq и
   .section--visit), здесь только шапка страницы и вертикальный ритм:
   по макету между секциями 56px вместо глобальных --section-gap.
   ============================================================ */

.faq-page {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding-top: 128px; /* 72 хедер + 56 отступ секции */
  padding-bottom: 56px;
  background-color: var(--color-white);
}

.page-faq .footer { margin-top: 0; }

/* Секции лендинга лежат в потоке страницы — гасим их собственные отступы,
   ритм задаёт gap родителя. */
.faq-page .section + .section { margin-top: 0; }

/* Заголовок секции дублировал бы H1 страницы */
.page-faq .faq__title { display: none; }

/* Разделитель в макете идёт ПОД строкой вопроса, поэтому над первой его нет.
   Правим только на этой странице — .faq__item общий с лендингом. */
.page-faq .faq__item:first-child { border-top: none; }

/* Блок записи на экскурсию: на лендинге это белая плашка на всю ширину,
   в макетах внутренних страниц (Book Modal 882:34599 и 870:42753) — серая
   панель с полями внутри и заголовком H3 вместо H2. */
.page-faq .visit,
.page-construction .visit,
.page-inner .visit {
  background-color: rgba(216, 220, 226, 0.25);
  border-radius: var(--radius-lg);
  padding: 32px 40px;
  gap: 40px;
}

.page-faq .visit__left,
.page-construction .visit__left,
.page-inner .visit__left { padding: 0; }

/* Форма на внутренних страницах (макет 870:42753): поля 484px и БЕЛЫЕ — панель
   вокруг серая, поле цвета панели сливалось с фоном. Кнопки стоят в одну строку
   и шире полей, поэтому ограничение ширины снято с формы и перенесено на поля;
   перенос оставлен запасным вариантом для узких экранов. */
.page-faq .visit__form,
.page-construction .visit__form,
.page-inner .visit__form { max-width: none; }

.page-faq .visit__input,
.page-construction .visit__input,
.page-inner .visit__input {
  max-width: 484px;
  background: var(--color-white);
  border-color: var(--color-white);
}

.page-faq .visit__input:focus,
.page-construction .visit__input:focus,
.page-inner .visit__input:focus { border-color: var(--color-dark); }

.page-faq .visit__btns,
.page-construction .visit__btns,
.page-inner .visit__btns {
  flex-wrap: wrap;
  row-gap: 12px;
}

.page-faq .visit__title,
.page-construction .visit__title,
.page-inner .visit__title {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
}

.faq-head {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.faq-head__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-head__title {
  font-family: var(--font-regular);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  font-weight: 400;
  color: var(--color-dark);
}

.faq-head__lead {
  font-family: var(--font-book);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  color: var(--color-dark);
}

@media (max-width: 768px) {
  .faq-head__title {
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-lh);
    letter-spacing: var(--text-h3-ls);
  }
}

/* ============================================================
   СТРАНИЦА «КОНТАКТЫ»
   Макет: 882:24710 (desktop 1440), 882:32479 (mobile 360).
   Статик-референс: contacts.html
   Слева колонка реквизитов 210px, справа карта-скриншот с меткой
   отдела продаж и кнопкой перехода в Яндекс Карты.
   ============================================================ */

.cnt-page {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding-top: 128px; /* 72 хедер + 56 отступ секции */
  padding-bottom: 56px;
  background-color: var(--color-white);
}

.page-contacts .footer { margin-top: 0; }

.cnt-head,
.cnt-body {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

/* --- Шапка страницы --- */
.cnt-head {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.cnt-head__title {
  font-family: var(--font-regular);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  font-weight: 400;
  color: var(--color-dark);
}

/* --- Реквизиты + карта --- */
.cnt-body {
  display: flex;
  align-items: stretch;
  gap: 40px;
}

.cnt-info {
  flex: 0 0 210px;
  width: 210px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.cnt-info__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cnt-info__row {
  font-family: var(--font-regular);
  font-size: var(--text-body3s-size);
  line-height: var(--text-body3s-lh);
  color: var(--color-brand-black);
}

.cnt-info__phone {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cnt-info__tel {
  font-family: var(--font-regular);
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-lh);
  color: var(--color-brand-black);
  text-decoration: none;
  transition: color 0.2s;
}

.cnt-info__tel:hover { color: var(--color-orange); }

.cnt-info__link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.cnt-info__link:hover { color: var(--color-orange); }

.cnt-info__socials {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cnt-info__social img {
  width: 26px;
  height: 26px;
  display: block;
}

/* --- Карта --- */
.cnt-map {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cnt-map__img {
  display: block;
  width: 100%;
  height: 455px;
  object-fit: cover;
}

/* Живая карта поверх картинки-постера: пока Яндекс не ответил, виден скриншот. */
.cnt-map__canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.cnt-map.is-live .cnt-map__img,
.cnt-map.is-live .cnt-map__pin { visibility: hidden; }

.cnt-map.is-live .cnt-map__btn { z-index: 3; }

/* Промо-блок Яндекса («Как добраться / Доехать на такси / Создать свою карту»)
   стоит там же, где наша кнопка. Копирайт и «Условия использования» — отдельный
   элемент, он остаётся на месте, как требуют правила API. */
.cnt-map__canvas [class*="map-copyrights-promo"] { display: none !important; }

/* Метка отдела продаж: положение в % от картинки (по макету 44.6% / 55.4%) */
.cnt-map__pin {
  position: absolute;
  left: 44.6%;
  top: 55.4%;
  display: flex;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}

.cnt-map__pin-ico {
  width: 28px;
  height: 35px;
  display: block;
}

.cnt-map__pin-label {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-full);
  background-color: var(--color-orange);
  font-family: var(--font-regular);
  font-size: var(--text-body3s-size);
  line-height: var(--text-body3s-lh);
  color: var(--color-white);
  white-space: nowrap;
}

.cnt-map__btn {
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.1);
  font-family: var(--font-regular);
  font-size: var(--text-btn-m-size);
  line-height: var(--text-btn-m-lh);
  color: var(--color-dark);
  text-decoration: none;
  transition: box-shadow 0.2s;
}

.cnt-map__btn:hover { box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.18); }

.cnt-map__btn img {
  width: 22px;
  height: 22px;
  display: block;
}

/* ============================================================
   КОНТАКТЫ — мобильная адаптация (≤768).
   По макету 882:32479: реквизиты идут под заголовком, карта ниже
   (233px), кнопка карт выносится под неё на всю ширину.
   ============================================================ */
@media (max-width: 768px) {
  .cnt-head__title {
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-lh);
    letter-spacing: var(--text-h3-ls);
  }

  .cnt-head { gap: 16px; }

  .cnt-body {
    flex-direction: column;
    gap: 24px;
  }

  .cnt-info {
    flex: none;
    width: 100%;
  }

  .cnt-map__img { height: 234px; }

  .cnt-map__pin {
    left: 20%;
    top: 54%;
  }

  /* Кнопка на узкой карте перекрывала бы метку — кладём её под карту */
  .cnt-map {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
  }

  /* На мобильной карта и кнопка идут колонкой, поэтому холст занимает место
     картинки, а не всю плитку. */
  .cnt-map__canvas {
    position: relative;
    inset: auto;
    height: 260px;
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .cnt-map.is-live .cnt-map__img { display: none; visibility: visible; }

  .cnt-map__img { border-radius: var(--radius-md); }

  .cnt-map__btn {
    position: static;
    width: 100%;
  }
}

/* ============================================================
   СТРАНИЦА «ХОД СТРОИТЕЛЬСТВА»
   Макет: 870:41338 (desktop 1440), 889:28420 (mobile 360).
   Статик-референс: construction.html
   Слева выпадающий список месяцев (147px), справа сетка альбомов
   из двух колонок по 521px: плитка может занимать две строки
   (--tall) или две колонки (--wide). Внутри плитки — мини-слайдер.
   ============================================================ */

.cns-page {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding-top: 128px; /* 72 хедер + 56 отступ секции */
  padding-bottom: 56px;
  background-color: var(--color-white);
}

.page-construction .footer { margin-top: 0; }

/* Форма экскурсии приходит с лендинга — гасим её собственный отступ */
.cns-page .section + .section { margin-top: 0; }

.cns-head,
.cns-body {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

/* --- Шапка страницы --- */
.cns-head {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.cns-head__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cns-head__title {
  font-family: var(--font-regular);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  font-weight: 400;
  color: var(--color-dark);
}

.cns-head__lead {
  font-family: var(--font-book);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  color: var(--color-dark);
}

/* --- Месяцы + сетка --- */
.cns-body {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

/* Выпадающий список месяцев (Dropdown 645:18841) */
.cns-months {
  position: relative;
  flex: 0 0 147px;
  width: 147px;
}

.cns-months__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 32px;
  padding: 8px 12px;
  border: 0.5px solid var(--color-dark);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-family: var(--font-regular);
  font-size: var(--text-body3s-size);
  line-height: var(--text-body3s-lh);
  color: var(--color-dark);
  cursor: pointer;
}

.cns-months__toggle img { transition: transform 0.2s; }
.cns-months.is-open .cns-months__toggle img { transform: rotate(180deg); }

.cns-months__list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 20;
  width: 100%;
  margin: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  border: 0.5px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.1);
}

.cns-months__list[hidden] { display: none; }

/* Разделитель по макету идёт ПОД пунктом, у последнего его нет */
.cns-months__option {
  padding: 2px 2px 10px;
  border-bottom: 0.5px solid var(--color-surface);
  font-family: var(--font-book);
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  color: var(--color-gray-desc);
  cursor: pointer;
  transition: color 0.2s;
}

.cns-months__option:last-child {
  padding-bottom: 2px;
  border-bottom: none;
}

.cns-months__option:hover { color: var(--color-dark); }

.cns-months__option.is-selected {
  font-family: var(--font-regular);
  color: var(--color-dark);
}

/* --- Сетка альбомов --- */
.cns-grid { flex: 1; min-width: 0; }

.cns-grid__month {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.cns-grid__month[hidden] { display: none; }

/* --- Плитка-альбом --- */
.cns-album {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 331px;
  padding: 20px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-surface);
}

.cns-album--tall {
  grid-row: span 2;
  height: 694px;
}

.cns-album--wide { grid-column: span 2; }

.cns-album__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Затемнение сверху и снизу — чтобы читались счётчик и подпись */
.cns-album__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0) 30%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.24) 7%, rgba(0, 0, 0, 0) 30%);
}

.cns-album__top,
.cns-album__caption,
.cns-album__progress {
  position: relative;
  z-index: 1;
}

.cns-album__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Счётчик кадров (image-num 285:4683) */
.cns-album__num {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(2px);
  font-family: var(--font-regular);
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-lh);
  color: var(--color-dark);
}

.cns-album__num img { display: block; }

.cns-album__arrows {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cns-album__arrow {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 0;
}

.cns-album__arrow img { display: block; }
.cns-album__arrow:hover { opacity: 0.85; }

.cns-album__caption {
  padding: 16px 0;
  margin-top: auto;
  font-family: var(--font-book);
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  color: var(--color-white);
}

/* Полоса прогресса: сегмент на кадр (GalleryProgress 34:1950) */
.cns-album__progress {
  display: flex;
  align-items: center;
  gap: 2px;
}

.cns-album__seg {
  flex: 1;
  height: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.4);
  transition: background-color 0.2s;
}

.cns-album__seg.is-active { background: var(--color-white); }

/* ============================================================
   ХОД СТРОИТЕЛЬСТВА — мобильная адаптация (≤768).
   По макету 889:28420: список месяцев над сеткой, плитки в одну
   колонку одинаковой высоты.
   ============================================================ */
@media (max-width: 768px) {
  .cns-head__title {
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-lh);
    letter-spacing: var(--text-h3-ls);
  }

  .cns-body {
    flex-direction: column;
    gap: 40px;
  }

  .cns-months {
    flex: none;
    width: 147px;
  }

  .cns-grid {
    width: 100%;
    flex: none;
  }

  .cns-grid__month {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .cns-album,
  .cns-album--tall {
    height: 220px;
    grid-row: auto;
  }

  .cns-album--wide { grid-column: auto; }
}

/* ============================================================
   СТРАНИЦА АКЦИИ (детальная)
   Макет: 863:36481 (desktop 1440), 870:39040 (mobile 360).
   Статик-референс: akciya.html
   Блок квартир внизу — витрина: тулбар и карточки переиспользуют
   каталожные классы (.cat-toolbar / .cat-sort / .cat-view /
   .cat-grid), полный список открывается в /catalog/.
   ============================================================ */

.ofd-page {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding-top: 128px; /* 72 хедер + 56 отступ секции */
  padding-bottom: 56px;
  background-color: var(--color-white);
}

.page-offer-detail .footer { margin-top: 0; }

.ofd-head,
.ofd-blocks,
.ofd-section,
.ofd-legal,
.ofd-results {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

/* --- Шапка страницы --- */
.ofd-head {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.ofd-head__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1000px; /* по макету ширина заголовочного блока */
}

/* Заголовок и плашка срока в одну строку (макет 863:36481: зелёная пилюля
   справа от H1). На узких экранах плашка уходит под заголовок. */
.ofd-head__row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.ofd-head__date {
  flex: none;
  margin-top: 6px; /* оптическое выравнивание по первой строке заголовка 32px */
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background-color: var(--color-mint);
  font-family: var(--font-book);
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  color: var(--color-dark);
  white-space: nowrap;
}

.ofd-head__title {
  font-family: var(--font-regular);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  font-weight: 400;
  color: var(--color-dark);
}

.ofd-head__lead {
  font-family: var(--font-book);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  color: var(--color-dark);
}

/* --- Блоки условий (ProgramSummaryBlock) --- */
.ofd-blocks {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.ofd-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
  padding: 16px 24px;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.ofd-summary__title {
  padding-right: 10px;
  font-family: var(--font-regular);
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-lh);
  font-weight: 400;
  color: var(--color-dark);
}

.ofd-summary__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0;
}

.ofd-summary__cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ofd-summary__label {
  font-family: var(--font-book);
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  color: var(--color-dark);
}

.ofd-summary__value {
  margin: 0;
  font-family: var(--font-regular);
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-lh);
  color: var(--color-dark);
}

.ofd-summary__divider {
  width: 1px;
  min-height: 38px;
  background-color: var(--color-divider);
  transform: scaleX(0.5);
}

/* --- Коллаж --- */
.ofd-visual {
  display: grid;
  grid-template-columns: 333fr 677fr;
  gap: 16px;
  height: 601px;
}

.ofd-visual__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

.ofd-visual__img {
  width: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
  display: block;
  min-height: 0;
}

/* Пропорции плиток по макету (в сумме дают высоту коллажа) */
.ofd-visual__img--a { flex: 393 1 0; }
.ofd-visual__img--b { flex: 187 1 0; }
.ofd-visual__img--c { flex: 398 1 0; }

.ofd-visual__promo {
  flex: 188 1 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  border-radius: var(--radius-md);
  background-color: var(--color-orange);
  color: var(--color-white);
}

.ofd-visual__promo-title {
  font-family: var(--font-regular);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
  font-weight: 400;
}

.ofd-visual__promo-note {
  font-family: var(--font-book);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
}

/* --- Кому подходит программа --- */
.ofd-fit {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 802px;
  padding: 16px 24px;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.ofd-fit__title {
  font-family: var(--font-regular);
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-lh);
  font-weight: 400;
  color: var(--color-dark);
}

.ofd-fit__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ofd-fit__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-book);
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  color: var(--color-dark);
}

.ofd-fit__ico {
  flex: none;
  width: 16px;
  height: 16px;
  display: block;
  margin-top: 1px;
}

/* --- Юридический блок --- */
.ofd-legal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.ofd-legal__title {
  font-family: var(--font-regular);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: 400;
  color: var(--color-brand-black);
}

.ofd-legal__text {
  max-width: 1000px;
  font-family: var(--font-book);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  color: var(--color-brand-black);
}

.ofd-legal__back-ico {
  font-size: 16px;
  line-height: 1;
}

/* --- Витрина квартир --- */
.ofd-results__title {
  font-family: var(--font-regular);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: 400;
  color: var(--color-dark);
}

.ofd-search {
  width: 100%;
  padding: 56px 0;
  background-color: var(--color-surface);
}

.ofd-search__wrap {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.ofd-search__more { text-align: center; }

/* ============================================================
   СТРАНИЦА АКЦИИ — мобильная адаптация (≤768).
   Коллаж разворачивается в одну колонку, блоки условий тянутся
   на всю ширину.
   ============================================================ */
@media (max-width: 768px) {
  .ofd-head__title {
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-lh);
    letter-spacing: var(--text-h3-ls);
  }

  .ofd-summary {
    align-self: stretch;
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  .ofd-summary__list { gap: 12px 24px; }

  .ofd-summary__divider { display: none; }

  .ofd-visual {
    grid-template-columns: 1fr;
    height: auto;
  }

  .ofd-visual__img--a { flex: none; height: 220px; }
  .ofd-visual__img--b { flex: none; height: 160px; }
  .ofd-visual__img--c { flex: none; height: 260px; }

  .ofd-visual__promo { flex: none; }

  .ofd-legal { gap: 24px; }

  .ofd-results__title,
  .ofd-legal__title {
    font-size: var(--text-h4-size);
    line-height: var(--text-h4-lh);
  }

  .ofd-search { padding: 32px 0; }
}

/* ============================================================
   ВНУТРЕННИЕ СТРАНИЦЫ — общий каркас (пакет 2)
   Страницы «Отзывы», «Новости», «Галерея», «Расположение» и др.
   устроены одинаково: шапка (крошки + H1 + лид), дальше секции
   лендинга. Раньше каждая страница повторяла эти правила у себя
   (.prg-page, .ofr-page, .faq-page…) — здесь они один раз.
   Разметка шапки — template-parts/inner-head.php.
   ============================================================ */

.inner-page {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding-top: 128px; /* 72 хедер + 56 отступ секции */
  padding-bottom: 56px;
  background-color: var(--color-white);
}

.page-inner .footer { margin-top: 0; }

/* Секции лендинга лежат в потоке страницы — ритм задаёт gap родителя */
.inner-page .section + .section { margin-top: 0; }

.inner-head {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.inner-head__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.inner-head__title {
  font-family: var(--font-regular);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  font-weight: 400;
  color: var(--color-dark);
}

.inner-head__lead {
  font-family: var(--font-book);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  color: var(--color-dark);
}

/* Заголовок секции лендинга дублировал бы H1 страницы — в макетах внутренних
   страниц у секций своих заголовков нет. */
.page-inner .neighbors__title,
.page-inner .faq__title,
.page-inner .gallery__title,
.page-inner .features__title,
.page-inner .map-section__title,
.page-inner .map__title { display: none; }

@media (max-width: 768px) {
  /* В мобильном макете секции стоят через 48px, на десктопе — через 56px */
  .inner-page { gap: 48px; }

  .inner-head__title {
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-lh);
    letter-spacing: var(--text-h3-ls);
  }
}

/* --- Ленты карточек на внутренних страницах (Инфраструктура и др.) --- */
/* Сетка и карточка те же, что на главной (.feat-grid / .feat-item),
   отличается только заголовок: в макете H3, а не H2 как на лендинге. */
.feat-feed {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px) 12px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.feat-feed__title {
  max-width: 1000px;
  font-family: var(--font-regular);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: 400;
  color: var(--color-brand-black);
}

.feat-feed__lead {
  max-width: 1000px;
  margin-top: -24px; /* лид примыкает к заголовку, а не к сетке */
  font-family: var(--font-book);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  color: var(--color-dark);
}

@media (max-width: 768px) {
  .feat-feed { gap: 24px; }
  .feat-feed__lead { margin-top: -12px; }
}

/* --- Сводная плашка с меткой (ProgramSummaryBlock, макет 913:31821) --- */
/* Тот же компонент, что на странице акции (.ofd-summary), плюс оранжевая
   метка-булавка слева. Первая строка остаётся у метки, остальные уходят
   вправо и разделяются вертикальными линиями. */
.feat-feed--summary { gap: 16px; }

.ofd-summary--geo {
  align-self: flex-start; /* в макете плашка по содержимому, а не во всю ширину */
  gap: 24px;
}

.ofd-summary__geo {
  display: flex;
  align-items: center;
  gap: 2px;
}

.ofd-summary__pin {
  display: block;
  flex-shrink: 0;
}

.ofd-summary__brand {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background-color: var(--color-orange);
  font-family: var(--font-regular);
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  color: var(--color-white);
}

/* Разделитель стоит после каждой ячейки, включая последнюю — так в макете. */
.ofd-summary--geo .ofd-summary__list { gap: 32px; }

.ofd-summary--geo .ofd-summary__cell { padding-right: 10px; }

/* --- Карточки с описанием (Image Content Block, макет 913:31820) --- */
.icb-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 80px;
}

.icb {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.icb__gallery {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 16 / 9;
  padding: 20px;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Затемнение сверху и снизу — чтобы читались счётчик и подпись */
.icb__gallery::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.1) 15%, rgba(0, 0, 0, 0) 27%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.3) 9%, rgba(0, 0, 0, 0) 35%);
}

.icb__gallery > * {
  position: relative;
  z-index: 1;
}

.icb__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Счётчик кадров (image-num 285:4683) */
.icb__num {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  font-family: var(--font-regular);
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-lh);
  color: var(--color-dark);
}

.icb__num img { display: block; }

.icb__expand {
  display: block;
  filter: brightness(0) invert(1);
}

.icb__caption {
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding: 16px 0;
  margin: 0;
  font-family: var(--font-book);
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  color: var(--color-white);
}

.icb__progress {
  display: flex;
  align-items: center;
  gap: 2px;
}

.icb__prog {
  position: relative;
  flex: 1;
  height: 2px;
  padding: 0;
  border: 0;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

/* Зона нажатия шире самой полоски */
.icb__prog::after {
  content: '';
  position: absolute;
  inset: -8px 0;
}

.icb__prog.is-active { background: var(--color-white); }

.icb__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.icb__title {
  font-family: var(--font-regular);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: 400;
  color: var(--color-dark);
}

.icb__desc {
  font-family: var(--font-book);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  color: var(--color-dark);
}

@media (max-width: 768px) {
  .ofd-summary--geo {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .ofd-summary--geo .ofd-summary__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .ofd-summary--geo { align-self: stretch; }

  /* В мобильном макете метка шире подписи — 156px на булавку с пилюлей */
  .ofd-summary--geo .ofd-summary__geo { min-width: 156px; }

  .ofd-summary--geo .ofd-summary__brand {
    flex: 1;
    justify-content: center;
  }

  .icb-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* --- Широкая галерея (макет 920:32928) --- */
/* Кадр 16:9 во всю ширину контейнера: счётчик и стрелки сверху, подпись и
   полоски снизу. На мобильной подпись уходит из кадра под него. */
.wgal {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wgal__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 16 / 9;
  padding: 20px;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.wgal__frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.05) 15%, rgba(0, 0, 0, 0) 27%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.2) 9%, rgba(0, 0, 0, 0) 35%);
}

.wgal__frame > * {
  position: relative;
  z-index: 1;
}

.wgal__nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wgal__arrow {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.wgal__arrow img { display: block; }

.wgal__cap-out { display: none; }

@media (max-width: 768px) {
  .wgal__frame { padding: 20px 16px; }

  /* Подпись в макете переезжает из кадра под него */
  .wgal__caption { display: none; }

  .wgal__cap-out {
    display: block;
    font-family: var(--font-book);
    font-size: var(--text-body3-size);
    line-height: var(--text-body3-lh);
    color: var(--color-dark);
  }
}

/* --- Страница «Галерея» (макет 910:34941) --- */
/* Раскладка своя: табы сверху, кадр 16:9 во всю ширину, ниже плитки
   остальных категорий по две в ряд. Кадр и табы — те же компоненты, что у
   широкой галереи и секции галереи лендинга. */
.gal-page {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.gal-page__tabs {
  /* на лендинге табы стоят колонкой слева, здесь — строкой сверху */
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 0;
}

.gal-page__more {
  margin: -16px 0 0; /* примыкает к кадру, а не к сетке */
  font-family: var(--font-book);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  color: var(--color-dark);
}

.gal-page__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

/* Плитка соседней категории — тот же кадр, но ниже и в полширины */
.gal-page__tile {
  aspect-ratio: 624 / 331;
  border: 0;
  font: inherit;
  text-align: left;
}

.gal-page__grid:empty { display: none; }

@media (max-width: 768px) {
  .gal-page { gap: 24px; }

  .gal-page__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--container-px));
    padding-inline: var(--container-px);
  }

  .gal-page__tabs::-webkit-scrollbar { display: none; }

  .gal-page__tab,
  .gal-page__tabs .gallery__tab { flex: 0 0 auto; }

  .gal-page__more { margin-top: -8px; }

  .gal-page__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .gal-page__tile { aspect-ratio: 16 / 9; }
}

/* --- Страница «Документация» (макет 910:35132) --- */
.doc-note,
.doc-list {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

.doc-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: -16px; /* примыкает к заголовку страницы */
}

.doc-note__text {
  font-family: var(--font-book);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  color: var(--color-dark);
}

.doc-note__btn,
.doc-row__btn {
  flex-shrink: 0;
  gap: 4px;
  border-width: 1px; /* в макете обводка тоньше обычной кнопки */
}

.doc-note__btn img,
.doc-row__btn img { display: block; }

.doc-note__btn:hover img,
.doc-row__btn:hover img { filter: brightness(0) invert(1); }

/* Список файлов */
.doc-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 48px;
}

.doc-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
  max-width: 625px; /* ширина блока в макете */
}

.doc-row__main {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px; /* между названием и датой в макете 16, до кнопки — 32 */
}

.doc-row__name {
  flex: 1 1 360px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-book);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  color: var(--color-dark);
}

.doc-row__ico {
  flex-shrink: 0;
  display: block;
}

.doc-row__date {
  flex: 0 0 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.doc-row__date-label {
  font-family: var(--font-regular);
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-lh);
  color: var(--color-border);
}

.doc-row__date-value {
  font-family: var(--font-book);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  color: var(--color-dark);
}

/* Файл ещё не загружен — кнопка неактивна */
.doc-row__btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

@media (max-width: 768px) {
  .doc-note {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  .doc-row {
    align-items: flex-start;
    gap: 12px;
  }

  .doc-row__name { flex: 1 1 100%; }

  .doc-row__date { flex: 0 0 auto; }
}

/* --- Страница «Риэлторам» (макет 905:29514) --- */
/* Оболочка та же, что у формы экскурсии: светлая подложка, скругление 16,
   слева поля, справа фото. */
.agn {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

.agn__box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-radius: 16px;
  background: rgba(216, 220, 226, 0.25);
}

.agn__image {
  margin: 36px;
  border-radius: var(--radius-md);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.agn-form {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 32px 40px;
}

.agn-form__group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.agn-form__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.agn-form__title {
  font-family: var(--font-regular);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: 400;
  color: var(--color-dark);
}

.agn-form__desc {
  font-family: var(--font-book);
  font-size: var(--text-body1-size);
  line-height: var(--text-body1-lh);
  color: var(--color-dark);
}

.agn-form__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.agn-form__input {
  width: 100%;
  padding: 16px 20px;
  border: 0;
  border-radius: 4px;
  background: var(--color-white);
  font-family: var(--font-book);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  color: var(--color-dark);
}

.agn-form__input::placeholder { color: var(--color-gray-desc); }

.agn-form__input--area {
  min-height: 142px;
  resize: vertical;
}

/* Выпадающий список агентств */
.agn-select { position: relative; }

.agn-select__btn {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border: 0.5px solid var(--color-dark);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-family: var(--font-book);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  color: var(--color-dark);
  cursor: pointer;
  text-align: left;
}

.agn-select__chevron {
  flex-shrink: 0;
  display: block;
  transition: transform 0.2s;
}

.agn-select.is-open .agn-select__chevron { transform: rotate(180deg); }

.agn-select__list {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.1);
}

.agn-select__option {
  padding: 12px 16px;
  font-family: var(--font-book);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  color: var(--color-dark);
  cursor: pointer;
}

.agn-select__option + .agn-select__option { border-top: 0.5px solid var(--color-border); }

.agn-select__option:hover,
.agn-select__option.is-selected { background: var(--color-surface); }

.agn-form__bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.agn-form__submit { width: 100%; }

.agn-form__legal {
  font-family: var(--font-book);
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  color: var(--color-gray-desc);
}

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

  .agn-form {
    gap: 32px;
    padding: 24px 16px;
  }

  /* На мобильной фото уходит под форму и становится невысоким */
  .agn__image {
    order: 1;
    margin: 0 16px 24px;
    aspect-ratio: 328 / 200;
  }
}

/* --- Новости: лента и статья (макет 882:34688 / 898:38695) --- */
.news-list,
.news-cover,
.news-article {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

.news-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.news-list--empty { display: block; }

.news-list__empty {
  font-family: var(--font-book);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  color: var(--color-gray-desc);
}

.news-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: inherit;
  text-decoration: none;
}

.news-card__img {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  background-size: cover;
  background-position: center;
  transition: transform 0.3s;
}

.news-card:hover .news-card__img { transform: scale(1.02); }

.news-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.news-card__date {
  font-family: var(--font-regular);
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-lh);
  color: var(--color-gray-desc);
}

.news-card__title {
  font-family: var(--font-regular);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
  color: var(--color-dark);
}

.news-card__lead {
  font-family: var(--font-book);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  color: var(--color-dark);
}

/* --- Статья --- */
.news-cover__img {
  aspect-ratio: 1000 / 562;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  background-size: cover;
  background-position: center;
}

.news-article {
  display: flex;
  flex-direction: column;
  gap: 64px; /* воздух между блоками статьи (по макету 898:38695 было тесно) */
}

.news-article__block,
.news-article__figure {
  max-width: 1000px; /* ширина текстовой колонки в макете */
  margin: 0;
}

.news-article__block {
  display: flex;
  flex-direction: column;
  gap: 32px; /* заголовок ↔ текст: в макете ~40px визуально, 16 было впритык */
}

.news-article__title {
  font-family: var(--font-regular);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: 400;
  color: var(--color-dark);
}

.news-article__text {
  font-family: var(--font-book);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  color: var(--color-dark);
}

.news-article__text p + p { margin-top: 1em; }

/* Разметка из визуального редактора: списки, ссылки, выделения */
.news-article__text ul,
.news-article__text ol {
  margin: 1em 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.news-article__text a {
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s;
}

.news-article__text a:hover { color: var(--color-orange); }

.news-article__text strong { font-family: var(--font-regular); font-weight: 400; }

.news-article__figure {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.news-article__img {
  aspect-ratio: 1000 / 562;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  background-size: cover;
  background-position: center;
}

.news-article__caption {
  font-family: var(--font-book);
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  color: var(--color-gray-desc);
}

/* Серая плашка со списком (ProgramConditionsCard из макета) */
.news-note {
  max-width: 802px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 16px 24px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.news-note__title {
  font-family: var(--font-regular);
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-lh);
  font-weight: 400;
  color: var(--color-dark);
}

.news-note__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-note__item {
  position: relative;
  padding-left: 16px;
  font-family: var(--font-book);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  color: var(--color-dark);
}

.news-note__item::before {
  content: '—';
  position: absolute;
  left: 0;
}

.news-note__btn { align-self: flex-start; }

/* Дата новости над заголовком (макет 898:38695: справа по краю контента) */
.inner-head__meta {
  align-self: flex-end;
  font-family: var(--font-book);
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-dark);
  margin-bottom: -8px; /* дата прижата к заголовку теснее, чем gap колонки */
}

/* --- Мозаика галереи новости (макет 898:38695) ---
   Раскладка первых трёх фото: вертикальное на 2 ряда, горизонтальное,
   горизонтальное на 2 ряда; плитка программы падает в свободную ячейку
   под вертикальным фото. Фото сверх мозаики — рядами вниз автогридом. */
.news-mosaic {
  max-width: 1000px;
  display: grid;
  grid-template-columns: 1fr 2.05fr;
  grid-auto-rows: 190px;
  gap: 16px;
}

.news-mosaic__ph {
  border-radius: var(--radius-md);
  background-size: cover;
  background-position: center;
}

.news-mosaic--full .news-mosaic__ph:nth-child(1) { grid-row: span 2; }
.news-mosaic--full .news-mosaic__ph:nth-child(3) { grid-row: span 2; }

/* Компактная цветная плитка программы (в мозаике и отдельным блоком) */
.news-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 20px 24px;
  border-radius: var(--radius-md);
  background: var(--tile-fill, var(--color-orange));
  color: var(--color-white);
  text-decoration: none;
  transition: opacity 0.2s;
}

.news-tile:hover { opacity: 0.92; }

.news-tile__title {
  font-family: var(--font-regular);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
}

.news-tile__desc {
  font-family: var(--font-book);
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-lh);
  font-weight: 300;
}

.news-program { max-width: 1000px; }

.news-program .news-tile {
  max-width: 323px; /* размер плитки мозаики из макета */
  min-height: 190px;
}

@media (max-width: 768px) {
  .news-list {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .news-article { gap: 32px; }

  .news-cover__img,
  .news-article__img { aspect-ratio: 328 / 200; }

  /* Мозаика на мобилке: два столбца пониже, вертикальное фото так же на 2 ряда */
  .news-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 120px;
    gap: 8px;
  }

  .news-program .news-tile { max-width: 100%; }
}

/* ============================================================
   СТРАНИЦА «КОНЦЕПЦИЯ КОМПЛЕКСА» (макет Concept)
   ============================================================ */
.concept {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.concept__player {
  display: block;
  width: 100%;
  aspect-ratio: 1280 / 720;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--color-dark);
}

.concept__player--img {
  background-size: cover;
  background-position: center;
}

/* Автоплей-видео: клик — пауза; кнопка «плей» видна только на паузе */
.concept__video--auto {
  position: relative;
  cursor: pointer;
}

.concept__video-toggle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.concept__video-toggle img { margin-left: 3px; /* оптический центр треугольника */ }

.concept__video--auto.is-paused .concept__video-toggle { opacity: 1; }

.concept__section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.concept__title {
  font-family: var(--font-regular);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: 400;
  color: var(--color-dark);
}

.concept__title + .concept__text { margin-top: -8px; /* текст-лид секции ближе к заголовку */ }

.concept__text {
  max-width: 1000px;
  font-family: var(--font-book);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  color: var(--color-dark);
}

/* Карточки «фото + текст» — по две в ряд (макет: 600px + зазор 80) */
.concept__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 80px;
  margin-top: 16px;
}

.concept__card {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.concept__card-ph {
  aspect-ratio: 600 / 338;
  border-radius: var(--radius-md);
  background-size: cover;
  background-position: center;
}

/* Плашка фактов: тёмный бейдж + параметры в строку */
.concept__facts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px 64px;
  padding: 16px 24px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.concept__facts-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--color-dark);
  color: var(--color-white);
  font-size: 12px;
  line-height: 1.2;
}

.concept__facts-badge img { filter: brightness(0) invert(1); }

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

.concept__fact-label {
  font-family: var(--font-book);
  font-size: 12px;
  line-height: 1.2;
  color: var(--color-dark);
}

.concept__fact-value {
  font-family: var(--font-regular);
  font-size: var(--text-h5-size);
  line-height: 1.2;
  color: var(--color-dark);
}

/* Двухколонка «Сообщество»: слайдер слева, текст с кнопками справа */
.concept__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 16px;
  align-items: start;
}

.concept__split-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.concept__sub {
  font-family: var(--font-regular);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: 400;
  color: var(--color-dark);
}

.concept__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* --- Слайдер-галерея с подписями (.cgal) --- */
.cgal {
  position: relative;
  margin-top: 16px;
}

.concept__split .cgal { margin-top: 0; }

.cgal__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radius-md);
}

.cgal__track::-webkit-scrollbar { display: none; }

.cgal__slide {
  flex: 0 0 100%;
  margin: 0;
  aspect-ratio: 1280 / 720;
  background-size: cover;
  background-position: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Затемнение снизу — под подпись и полоски (как у фото экскурсии) */
.cgal::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.cgal__counter {
  position: absolute;
  top: 16px;
  left: 20px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-dark);
  font-size: 10px;
  line-height: 1.2;
}

.cgal__arrows {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 2;
  display: flex;
  gap: 8px;
}

.cgal__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-white);
  cursor: pointer;
  transition: opacity 0.2s;
}

.cgal__arrow:hover { opacity: 0.85; }

.cgal__caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 30px;
  z-index: 1;
  color: var(--color-white);
  font-family: var(--font-book);
  font-size: 12px;
  line-height: 1.3;
}

.cgal__caption.is-empty { display: none; }

/* Полоски-сегменты (как у сторис): линия 2px, кликабельная зона выше */
.cgal__bars {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 4px;
  z-index: 2;
  display: flex;
  gap: 6px;
}

.cgal__bar {
  flex: 1;
  height: 14px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.cgal__bar::after {
  content: '';
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.4);
}

.cgal__bar.is-active::after { background: var(--color-white); }

@media (max-width: 768px) {
  .concept { gap: 48px; }

  .concept__cards,
  .concept__split { grid-template-columns: 1fr; gap: 24px; }

  .concept__facts { gap: 16px 32px; }

  .cgal__caption { bottom: 26px; font-size: 11px; }
}

/* --- Блок «Новости компании» (макет 921:47790) --- */
.news-strip {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.news-strip__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.news-strip__title {
  font-family: var(--font-regular);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  font-weight: 400;
  color: var(--color-dark);
}

.news-strip__all {
  flex-shrink: 0;
  gap: 8px;
  border-width: 1px;
}

.news-strip__all img { display: block; }

.news-strip__all:hover img { filter: brightness(0) invert(1); }

.news-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.news-strip__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.news-strip__img {
  display: block;
  aspect-ratio: 405 / 254;
  border-radius: var(--radius-md);
  background-color: #B6D0FF; /* подложка карточки из макета */
  background-size: cover;
  background-position: center;
  transition: transform 0.3s;
}

.news-strip__card:hover .news-strip__img { transform: scale(1.02); }

.news-strip__name {
  font-family: var(--font-book);
  font-size: var(--text-body2-size);
  line-height: var(--text-body2-lh);
  color: var(--color-dark);
}

@media (max-width: 768px) {
  .news-strip { gap: 24px; }

  .news-strip__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Выдача блока «Подобрать квартиру» перезапрашивается при смене фильтра */
.apts__grid.is-loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.15s;
}

/* Видеоотзыв с внешнего сервиса (YouTube / VK / Rutube) */
.review-modal__embed {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  border-radius: inherit;
}

/* Отправленная форма фиксации клиента: данные остаются на месте, но править и
   отправлять повторно нельзя (правка Figma). */
.agn-form.is-sent .agn-form__input,
.agn-form.is-sent .agn-select__btn {
  color: var(--color-gray-desc);
  cursor: default;
}

.agn-form.is-sent .agn-select__chevron { opacity: 0.4; }

/* --- Цитаты жильцов на странице «Отзывы» (по типу Q&A, без категорий) --- */
/* У секций лендинга заголовки на внутренних страницах скрыты, но этот блок —
   свой, и заголовок в макете у него есть. */
.page-inner .section--neighbors-quotes .faq__title--own { display: block; }

/* Цитата без раскрывающегося текста: та же строка, но не кнопка. */
.faq__q--plain {
  cursor: default;
  margin: 0;
}

.faq__author {
  margin-top: 16px;
  color: var(--color-gray-desc);
}

/* Фото отзыва — кликабельное (правка Figma). */
.neighbor-card__photo-wrap { cursor: pointer; }

/* Отправленное уведомление (макет): кнопка с зелёной обводкой и галочкой. */
.agn-form__submit--sent,
.agn-form__submit--sent:disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 1.5px solid #3BA55D;
  color: #3BA55D;
  opacity: 1;
  cursor: default;
}

@media (max-width: 768px) {
  /* Мобильный макет: заголовок блока цитат — как остальные на внутренних
     страницах (H3), 32px там смотрелся крупнее макета. */
  .section--neighbors-quotes .faq__title--own {
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-lh);
    letter-spacing: var(--text-h3-ls);
  }
}

/* --- Открытая галерея: сверка с макетом (нода 353:22166) --- */
/* Размер окна оставлен больше макета — по отдельной правке заказчика
   («окно просмотра больше, качество не снижать»). Остальное по макету:
   радиус фото 12, отступы 20, сегменты через 2px, подпись 14px, и градиент
   снизу — без него сегменты и описание теряются на светлом кадре. */
.feat-modal__box { gap: 11px; }

.feat-modal__frame { border-radius: 12px; }

.feat-modal__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 26%, rgba(255, 255, 255, 0) 46%);
}

.feat-modal__badge { top: 20px; left: 20px; }
.feat-modal__nav { top: 20px; right: 20px; }

.feat-modal__progress {
  left: 20px;
  right: 20px;
  bottom: 20px;
  gap: 2px;
}

.feat-modal__caption {
  font-size: 14px;
  line-height: 1.2;
}

/* Тег дома — ссылка в каталог: у <a> сбрасываем оформление ссылки. */
a.map-tag__head { text-decoration: none; color: inherit; }

/* ============================================================
   MESSENGERS MODAL («Написать» в шапке → выбор мессенджера,
   макет 424:10902; каркас повторяет callback-modal)
   ============================================================ */
.msg-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  /* visibility дискретна: в обычном transition она переключалась бы на середине,
     и диалог ~125мс был бы «открыт», но невидим — фокус туда не переводился.
     Скрытие откладываем до конца затухания, показ мгновенный (см. .is-open). */
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.msg-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s; /* visibility снимаем сразу, а не на середине перехода */
}

.msg-modal__bg {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 24, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.msg-modal__dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px;
  width: 100%;
  max-width: 834px; /* карточка модалки в макете 834×528 */
  min-height: 528px; /* высота из макета: с двумя пилюлями контент ниже, добираем воздухом */
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: 28px 32px 28px 42px; /* макет: 28 сверху/снизу, 42 слева, 32 справа */
  transform: translateY(16px) scale(0.98);
  transition: transform 0.28s ease;
}

.msg-modal.is-open .msg-modal__dialog {
  transform: none;
}

/* Закрытие по макету (Stories/Close Modal): подпись «Закрыть» и белый круг
   с крестом над карточкой, выступая за её правый край. */
.msg-modal__close {
  position: absolute;
  top: -52px;   /* макет: центр круга на 37px выше верха карточки */
  right: -41px; /* макет: круг выступает за правый край на 41px */
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--color-white);
}

.msg-modal__close-label {
  font-size: 12px; /* макет: 12, белым по оверлею */
  line-height: 1;
}

.msg-modal__close-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;  /* макет: круг диаметром 30 */
  height: 30px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-dark);
  transition: transform 0.2s;
}

.msg-modal__close:hover .msg-modal__close-circle { transform: scale(1.08); }

.msg-modal__left {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.msg-modal__title {
  margin-top: 14px;
  font-size: 24px; /* макет: 24, крупнее токена h4 */
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-dark);
}

.msg-modal__subtitle {
  margin-top: 14px;
  font-size: 14px;
  line-height: 20px; /* макет: 14/20 */
  color: var(--color-dark);
}

/* Пилюли выбора мессенджера: активная — тёмная рамка, остальные серые */
/* Пилюли по центру колонки, вертикально — в середине свободного пространства
   между подзаголовком и юридической строкой (в макете зазоры равные). */
.msg-modal__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-block: auto;
  padding-block: 24px;
}

.msg-modal__pill {
  display: inline-flex;
  align-items: center;
  height: 36px;      /* макет: 36 */
  padding: 0 22px;   /* макет: 22 */
  border: 1.5px solid #bfc3cb; /* макет: #BFC3CB */
  border-radius: 16px; /* макет: 16, не полная пилюля */
  background: transparent;
  color: #8f949e;    /* макет: #8F949E */
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.msg-modal__pill:hover {
  border-color: var(--color-dark);
  color: var(--color-dark);
}

.msg-modal__pill.is-active {
  border-color: var(--color-dark);
  color: var(--color-dark);
}

.msg-modal__legal {
  margin-top: 0; /* вертикальную центровку пилюль делает их margin-block: auto */
  padding-top: 24px;
  font-size: var(--text-caption-size, 12px);
  line-height: 1.35;
  font-weight: 300;
  color: var(--color-gray-desc);
  max-width: 34ch;
}

.msg-modal__legal-link {
  color: inherit;
  text-decoration: underline;
}

/* Правая панель: QR + «Открыть на компьютере» + телефон (как в callback) */
.msg-modal__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-surface); /* макет: #F2F5F8 */
  border-radius: 0; /* макет: прямые углы */
  padding: 16px 24px;
  text-align: center;
}

.msg-modal__hint {
  max-width: 36ch; /* перенос в две строки, как в макете */
  font-size: 12px;
  line-height: 16px; /* макет: 12/16 */
  color: var(--color-dark);
}

.msg-modal__qr-label {
  margin-top: auto;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-dark);
}

.msg-modal__qr {
  width: 173px;  /* макет: 173 */
  height: 173px;
  margin: 24px 0;
  object-fit: contain;
}

.msg-modal__open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;        /* макет: 36 */
  padding: 0 14px;     /* макет: 14 */
  background: var(--color-white);
  border-radius: 12px; /* макет: 12 */
  color: var(--color-dark);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.2s;
}

.msg-modal__open:hover { transform: translateY(-1px); }

.msg-modal__open-mobile { display: none; }

.msg-modal__phone-row {
  align-self: center; /* макет: по центру панели */
  margin-top: auto;
  padding-top: 16px;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-dark); /* макет: подпись и номер тёмные */
}

.msg-modal__phone {
  color: var(--color-dark);
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .msg-modal { padding: 12px; }

  .msg-modal__dialog {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
    min-height: 0; /* на телефоне высота по контенту */
  }

  .msg-modal__close { top: 8px; right: 8px; }
  .msg-modal__close-label { display: none; }

  /* На телефоне QR и подсказка про камеру не нужны — сразу кнопка в приложение */
  .msg-modal__qr { display: none; }
  .msg-modal__hint { display: none; }
  .msg-modal__qr-label { margin-top: 0; }
  .msg-modal__open-desktop { display: none; }
  .msg-modal__open-mobile { display: inline; }

  .msg-modal__open {
    justify-content: center;
    width: 100%;
    padding: 14px 18px;
  }

  .msg-modal__right { padding: 16px; }
  .msg-modal__legal { padding-top: 16px; }
}

/* Постоянные блоки в конце ряда акций (макет 03 OFFERS): светлая карточка на
   фоне секции, без фото — заполняют ряд, когда акций мало. */
.offer-card--tail {
  background-color: var(--color-surface);
  background-image: none;
}

.offer-card--tail .offer-card__heading {
  color: var(--color-dark);
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-lh);
}

.offer-card--tail .offer-card__inner { justify-content: space-between; }

/* Вторая постоянная карточка в макете тёплая (светло-жёлтая). */
.offer-card--tail-warm { background-color: #FFF6DC; }

/* ============================================================
   СТРАНИЦА ИПОТЕЧНОЙ ПРОГРАММЫ (CPT mortgage)
   Макеты: Ipoteka (Program Page) 1440, Ipoteka_M 360.
   Все блоки макета собраны на светлых панелях #F2F5F8, поэтому общая
   заготовка .mrt-panel — она же у условий, колонок и калькулятора.
   ============================================================ */

.mrt-panel {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 24px;
}

/* --- Условия кредитования: показатели в строку + кнопка справа --- */
.mrt-terms__panel {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.mrt-terms__title {
  font-size: var(--text-body1-size);
  line-height: var(--text-body1-lh);
  font-weight: 400;
  color: var(--color-dark);
  flex: none;
}

.mrt-terms__list {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  flex: 1 1 auto;
}

.mrt-terms__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mrt-terms__label {
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  color: var(--color-gray-desc);
}

.mrt-terms__value {
  font-size: var(--text-body1-size);
  line-height: var(--text-body1-lh);
  color: var(--color-dark);
  white-space: nowrap;
}

.mrt-terms__btn { flex: none; }

/* --- Условия программы: колонки по три в ряд --- */
.mrt-cond {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mrt-cond__title {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--color-dark);
}

.mrt-cond__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}

.mrt-cond__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mrt-cond__head {
  font-size: var(--text-body1-size);
  line-height: var(--text-body1-lh);
  font-weight: 400;
  color: var(--color-dark);
}

.mrt-cond__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
}

/* Маркер-точка как в макете: свой, чтобы не зависеть от list-style-position */
.mrt-cond__item {
  position: relative;
  padding-left: 18px;
  font-size: var(--text-body3-size);
  line-height: 1.5;
  color: var(--color-dark);
}

.mrt-cond__item::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-orange);
}

.mrt-cond__file {
  align-self: flex-start;
  margin-top: auto;
}

/* Оранжевая плашка вопросов — последняя ячейка сетки */
.mrt-cond__ask {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: var(--color-orange);
}

.mrt-cond__ask-title {
  font-size: var(--text-body1-size);
  line-height: var(--text-body1-lh);
  font-weight: 400;
  color: var(--color-white);
}

.mrt-cond__ask-text {
  font-size: var(--text-body3-size);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

/* Белая кнопка на оранжевой плашке: модификатора btn--white в теме нет */
.mrt-cond__ask-btn {
  align-self: flex-start;
  margin-top: auto;
  background-color: var(--color-white);
  color: var(--color-dark);
}

.mrt-cond__ask-btn:hover { background-color: var(--color-surface); }

/* --- Калькулятор --- */
.mrt-calc-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mrt-calc-section__title {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--color-dark);
}

.mrt-calc {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  padding: 32px;
  align-items: start;
}

.mrt-calc__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mrt-calc__title {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  font-weight: 400;
  color: var(--color-dark);
}

.mrt-calc__sub {
  font-size: var(--text-body2-size);
  line-height: 1.4;
  color: var(--color-gray-desc);
}

.mrt-calc__note {
  font-size: 10px;
  line-height: 1.4;
  color: var(--color-gray-desc);
}

.mrt-calc__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.mrt-calc__label {
  font-size: var(--text-body3-size);
  line-height: var(--text-body3-lh);
  color: var(--color-gray-desc);
}

.mrt-calc__input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background-color: var(--color-white);
}

.mrt-calc__input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-regular);
  font-size: var(--text-body3-size);
  color: var(--color-dark);
  outline: none;
}

/* Поле лежит в обёртке и своей рамки не имеет — фокус рисуем на обёртке */
.mrt-calc__input-wrap:focus-within { box-shadow: inset 0 0 0 1.5px var(--color-dark); }

.mrt-calc__unit {
  flex: none;
  font-size: var(--text-body3-size);
  color: var(--color-gray-desc);
  white-space: nowrap;
}

.mrt-calc__select,
.mrt-calc__static {
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  border: none;
  font-family: var(--font-regular);
  font-size: var(--text-body3-size);
  color: var(--color-dark);
  outline: none;
}

/* Селект срока/программы: без этого фокус на нём невидим */
.mrt-calc__select:focus { box-shadow: inset 0 0 0 1.5px var(--color-dark); }

.mrt-calc__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.mrt-calc__pill {
  padding: 6px 10px;
  border: none;
  border-radius: 24px;
  background-color: var(--color-white);
  font-family: var(--font-regular);
  font-size: 10px;
  line-height: 1.2;
  color: var(--color-gray-desc);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mrt-calc__pill:hover { background-color: #e4eaf0; }

.mrt-calc__pill.is-active {
  background-color: var(--color-orange);
  color: var(--color-white);
}

/* Результат — правая колонка */
.mrt-calc__result {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mrt-calc__res-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mrt-calc__res-value {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  color: var(--color-dark);
}

.mrt-calc__res-value--accent { color: var(--color-orange); }

.mrt-calc__res-label {
  font-size: 10px;
  line-height: 1.3;
  color: var(--color-gray-desc);
}

.mrt-calc__banks,
.mrt-calc__legal {
  font-size: var(--text-body3-size);
  line-height: 1.4;
  color: var(--color-gray-desc);
}

/* Лимиты программы: это подсказка, а не ошибка ввода */
.mrt-calc__warn {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background-color: #fff4e8;
  font-size: var(--text-body3-size);
  line-height: 1.4;
  color: var(--color-dark);
}

.mrt-calc__submit {
  align-self: stretch;
  text-align: center;
}

/* --- Планшет: колонки складываются --- */
@media (max-width: 1024px) {
  .mrt-calc {
    grid-template-columns: 1fr 1fr;
    padding: 24px;
    gap: 24px;
  }

  /* Шапка калькулятора на всю ширину, ниже поля и результат */
  .mrt-calc__head { grid-column: 1 / -1; }

  .mrt-cond__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .mrt-panel { padding: 16px; }

  .mrt-terms__panel {
    flex-direction: column;
    align-items: stretch;
  }

  .mrt-terms__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .mrt-terms__btn {
    align-self: stretch;
    text-align: center;
  }

  .mrt-cond__grid { grid-template-columns: 1fr; }

  .mrt-calc {
    grid-template-columns: 1fr;
    padding: 16px;
  }
}

/* ============================================================
   ТЕКСТОВАЯ СТРАНИЦА — page.php
   Страницы, у которых нет своего шаблона: политика обработки
   персональных данных и подобные юридические тексты. Каркас общий
   с внутренними страницами (.inner-page), здесь только колонка
   текста: узкая ширина для чтения и ритм между абзацами.
   ============================================================ */

.text-page__body {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

.text-page__inner {
  max-width: 820px;
  font-family: var(--font-book);
  font-size: var(--text-body2-size);
  line-height: 1.6;
  color: var(--color-dark);
}

.text-page__inner > * + * { margin-top: 16px; }

.text-page__inner h2,
.text-page__inner h3,
.text-page__inner h4 {
  font-family: var(--font-regular);
  font-weight: 400;
  color: var(--color-dark);
}

.text-page__inner h2 {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  margin-top: 40px;
}

.text-page__inner h3,
.text-page__inner h4 {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  margin-top: 32px;
}

.text-page__inner ul,
.text-page__inner ol { padding-left: 22px; }

.text-page__inner li + li { margin-top: 8px; }

.text-page__inner a {
  color: var(--color-blue-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.text-page__inner a:hover { color: var(--color-orange); }

.text-page__inner strong { font-family: var(--font-regular); }

/* Таблицы в юридических текстах бывают шире экрана — пусть прокручиваются
   внутри своей колонки, а не растягивают страницу. */
.text-page__inner table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

.text-page__inner th,
.text-page__inner td {
  padding: 8px 12px;
  border: 1px solid var(--color-divider);
  text-align: left;
  vertical-align: top;
}

@media (max-width: 768px) {
  .text-page__inner {
    font-size: var(--text-body3-size);
    line-height: 1.6;
  }

  .text-page__inner h2 { margin-top: 32px; }
  .text-page__inner h3,
  .text-page__inner h4 { margin-top: 24px; }
}