/* ==========================================================================
   ЛЕНДИНГ ЗАСТРОЙЩИКА

   Оформление общее с витриной аренды и взято с сайта забега
   `yarstart.s-trest1.ru` — решение руководства. Всё, что делает обе
   витрины одинаковыми (палитра, шрифты, шкала кегля, кнопки), живёт
   в `base.css`; здесь только блоки этой витрины.

   ЧТО ЭТО ЗАМЕНИЛО. До 31.08.2026 здесь был набор «Classical» — книжная
   типографика на почти белом, Cormorant Garamond со старостильными
   цифрами. Руководству не понравились ни завитки, ни то, что размеры
   заголовков и текста слишком близки друг к другу: страница читалась
   ровным полотном без опорных точек. Теперь шрифты без засечек,
   а между текстом и заголовком в шкале намеренный разрыв.

   ИМЕНА КЛАССОВ СНОВА СОХРАНЕНЫ — как и при прошлой смене оформления:
   так все страницы переодеваются разом, без правки шаблонов.
   ========================================================================== */

/* Версия в адресе обязательна: статика отдаётся с кэшем на год,
   и без неё правка base.css не доходит до вернувшихся посетителей. */
@import url('/static/base.css?v=2');

:root{
  /* СОВМЕСТИМОСТЬ СО СТАРЫМИ ИМЕНАМИ. Компоненты ниже ссылаются
     на нейтральную и акцентную шкалы прежнего набора; переписывать
     восемь сотен строк ради переименования незачем — ступени просто
     показывают на новую палитру. Светлые индексы остаются светлыми:
     на тёмном фоне ими набран текст, а не фон. */
  --н-100:#ffffff; --н-200:#dfe8f2; --н-300:#b9cade; --н-400:#8fa8c0;
  --н-500:#6b849e; --н-600:#4a6484; --н-700:#2a5182; --н-800:#12304f;
  --н-900:#071a2f;

  --з-100:#eef4ff; --з-200:#cfdff6; --з-300:#a9c4ea; --з-400:#8fb0e0;
  --з-500:#7298cf; --з-600:#5b7fb4; --з-700:#46648f; --з-800:#34496a;
  --з-900:#22314a;
}

/* Секция на самом тёмном тоне — на тёмной странице это уже не «тёмная
   секция», а провал ещё глубже; оставлена ради шаблонов, которые её
   просят. */
.секция.мягкая{border-top:1px solid var(--линия);border-bottom:1px solid var(--линия)}
.секция.тёмная{background:#04101d;color:var(--н-300)}
.секция.тёмная h1,.секция.тёмная h2,.секция.тёмная h3,.секция.тёмная h4{color:var(--текст)}
.секция.тёмная a{color:var(--акцент-текст)}

.пропустить{
  position:absolute;left:-9999px;top:0;background:var(--акцент);color:var(--фон);
  padding:12px 20px;z-index:100;font-weight:700
}
.пропустить:focus{left:0}

.паспорт-список dd{font-variant-numeric:lining-nums tabular-nums}
.текст-колонка{max-width:62ch}
.крупно{font-size:1.25em}

hr,.линейка{height:1px;border:0;margin:var(--ш4) 0;background:var(--линия)}

/* ФОТОГРАФИИ БЕЗ ТОНИРОВКИ. Сепия была частью книжного набора: она
   мирила разномастные снимки друг с другом на бумажном фоне. На тёмном
   она их просто гасит, а дома и людей надо показывать как есть. */
.plate,.вклейка{
  border:1px solid var(--линия);border-radius:var(--р-сред);
  background:var(--поверхность);overflow:hidden
}

/* — штамп статуса: контур, не плашка — */
.штамп{
  display:inline-block;padding:5px 12px;font-family:var(--тело);
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--акцент-текст);color:var(--акцент-текст);
  border-radius:var(--р-круг);white-space:nowrap
}
.штамп.бронь{border-color:var(--н-500);color:var(--н-400)}
.штамп.продана{border-color:var(--н-600);color:var(--н-500)}
.штамп.в-строке{display:inline-block;margin-bottom:var(--ш2)}

/* — несколько домов крупно: во всю ширину, а не в три колонки — */
.сетка-домов.крупно-домов{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:var(--ш6)}
.сетка-домов.крупно-домов .дом-фото{aspect-ratio:16/10}
#показать-дома .счёт{margin-left:8px}

/* ==========================================================================
   ШАПКА И ПОДВАЛ
   ========================================================================== */
.шапка{
  background:var(--фон);border-bottom:1px solid var(--линия);
  position:sticky;top:0;z-index:40;
  /* Полупрозрачность с размытием: под шапкой проезжают фотографии,
     и глухая плашка резала бы их пополам. */
  background:color-mix(in srgb,var(--фон) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(9px);
}
.шапка-в{display:flex;align-items:center;gap:26px;min-height:72px}
/* Название — В ОДНУ СТРОКУ и не сжимается (решение 28.10.2026):
   «Строительный / трест» в две строки читался как сбой вёрстки. */
.лого{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--текст);
  flex-shrink:0;white-space:nowrap}
/* Название набирается ТЕКСТОВЫМ шрифтом: Unbounded в 20 px здесь
   не помещается рядом с меню и номером — та же беда, что была
   у телефона. */
.лого span{font-family:var(--тело);font-weight:800;font-size:19px;
  line-height:1.05;letter-spacing:-.01em}
.лого small{
  display:block;font-family:var(--тело);font-weight:400;font-size:11.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--текст-тихо);margin-top:3px
}
.лого img{filter:invert(12%) sepia(8%) saturate(430%) hue-rotate(3deg)}
/* МЕНЮ ДЕРЖИТСЯ В ОДНУ СТРОКУ. С добавлением «Квартир» пунктов стало
   пять, и на средних экранах последний срывался на вторую строку —
   шапка вырастала вдвое, а под логотипом появлялась пустота.

   `nowrap` на самой полосе, а не на ссылках: перенос внутри «Ипотека
   и оплата» выглядит ещё хуже, чем перенос между пунктами. Промежуток
   и кегль сжимаются вместе с экраном (`clamp`), а не ступенькой
   в медиазапросе, — ступенька всё равно попадает мимо той ширины,
   на которой ломается именно этот набор слов. */
.меню{display:flex;flex-wrap:nowrap;margin-left:auto;
  gap:clamp(12px,1.7vw,22px);min-width:0}
.меню a{
  color:var(--текст);text-decoration:none;position:relative;
  font-size:clamp(14px,1.15vw,15.5px);white-space:nowrap;padding-bottom:3px;
}
/* Подчёркивание выезжает из центра — тонкая деталь, но именно она
   отличает «сделано» от «сверстано». */
.меню a::after{
  content:"";position:absolute;left:50%;right:50%;bottom:0;height:1px;
  background:var(--акцент);transition:left var(--плавно),right var(--плавно)
}
.меню a:hover::after,.меню a[aria-current="page"]::after{left:0;right:0}
.шапка-тел{display:flex;align-items:center;gap:var(--ш3);flex-shrink:0}
/* МЕНЮ — ВСЕГДА ВТОРОЙ СТРОКОЙ (28.10.2026). Содержимое шапки ограничено
   шириной полосы (1180 px) при любом окне, а лого, сайты группы, пять
   пунктов меню, номер и кнопка в одну строку требуют около 1490 px.
   Порог по ширине экрана поэтому не спасал: на окне шире порога меню
   сжималось (`min-width:0`), и ссылки с `nowrap` ложились поверх номера
   телефона — так было и на 900–1024 px до сайтов группы. Замерять надо
   ширину детей при `max-content`, а не пересечение рамок: ссылки
   вылезают за рамку меню, и рамки при наложении не пересекаются. */
.шапка-в{flex-wrap:wrap;row-gap:0}
.меню{order:3;width:100%;margin-left:0;padding:0 0 12px;overflow-x:auto}
.шапка-тел{margin-left:auto}
/* ТЕЛЕФОН НАБИРАЕТСЯ ТЕКСТОВЫМ ШРИФТОМ, А НЕ ЗАГОЛОВОЧНЫМ.
   Unbounded — дисплейная гарнитура: у неё очень широкие знаки, и
   «+7 485 260 79 80» в ней не умещался в строку — номер разваливался
   на две, а шапка вырастала вдвое. `nowrap` на всякий случай: номер
   не тот текст, который можно переносить где придётся. */
.шапка-тел .тел{
  color:var(--текст);font-family:var(--тело);font-weight:700;font-size:17px;
  text-decoration:none;white-space:nowrap
}
/* Кнопка в шапке — компактнее общей: 18/30 из base.css растит шапку
   до восьмидесяти пикселей. */
.шапка-тел .кнопка{padding:11px 20px;font-size:15px;white-space:nowrap}

.подвал{background:var(--н-900);color:var(--н-400);padding:var(--ш8) 0 var(--ш6);font-size:15px}
.подвал h2{color:#fff;font-family:var(--тело);font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:var(--ш3);font-weight:400}
.подвал a{color:var(--н-200);text-decoration:none}
.подвал a:hover{color:var(--з-300)}
.подвал ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.подвал-сетка{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--ш8)}
.подвал-низ{margin-top:var(--ш6);padding-top:var(--ш4);
  border-top:1px solid var(--линия);font-size:13px;color:var(--текст-совсем-тихо)}

/* ==========================================================================
   ПЛЕЙСХОЛДЕР — место под данные, которых ещё нет.

   ВИДНО, ЧТО ЭТО ЗАГЛУШКА, И ЭТО НАРОЧНО. Блок показывает, где будет
   содержимое, но не притворяется им: выдуманный текст на макете
   руководство приняло бы за готовое, а потом обнаружило бы, что таких
   данных в системе нет вовсе.
   ========================================================================== */
.заглушка{
  border:1px dashed var(--з-400);border-radius:var(--р-сред);
  background:repeating-linear-gradient(-45deg,
    transparent 0 9px,color-mix(in srgb,var(--акцент) 5%,transparent) 9px 18px);
  padding:var(--ш4);display:flex;flex-direction:column;gap:6px;
  align-items:center;justify-content:center;text-align:center;min-height:120px;
}
.заглушка b{font-family:var(--загл);font-weight:600;font-size:17px;color:var(--акцент-текст)}
.заглушка span{font-size:14px;color:var(--текст-тихо);max-width:46ch}
.заглушка::before{
  content:"место под данные";font-family:var(--тело);font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--з-600)
}
/* ЧИСТОВОЙ ВИД — на своём домене (класс у <body>, см. dev_base).
   Служебные места скрыты целиком, у оставшихся сообщений посетителю
   («расчёт появится вместе с ценой», «ничего не нашлось») снята надпись
   «место под данные»: она обращена к нам, а не к покупателю. */
.чистовой .служебное{display:none!important}
.чистовой .заглушка::before{content:none}

/* ==========================================================================
   КАРТОЧКИ ДОМОВ
   ========================================================================== */
.сетка-домов{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--ш6)}
.дом{display:flex;flex-direction:column;gap:var(--ш2);background:transparent}
.дом-фото{display:block;position:relative;aspect-ratio:3/2;overflow:hidden;
  border:6px solid var(--поверхность);outline:1px solid var(--линия)}
.дом-фото img{width:100%;height:100%;object-fit:cover;
  filter:sepia(.22) saturate(.82) contrast(1.05);
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1),filter var(--плавно)}
.дом:hover .дом-фото img{transform:scale(1.045);filter:sepia(.1) saturate(.95) contrast(1.03)}
.дом-текст{display:flex;flex-direction:column;gap:8px;padding:var(--ш2) 0 0}
.дом-текст h3{margin:0;font-size:19px}
.дом-текст h3 a{color:var(--текст);text-decoration:none}
.дом-текст h3 a:hover{color:var(--акцент-текст)}
.паспорт{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0}
.паспорт li{font-size:13px;padding:3px 9px;border:1px solid var(--линия);
  color:var(--текст-тихо);border-radius:var(--р-мал)}
.дом-кнопки{display:flex;gap:var(--ш2);margin-top:var(--ш1)}

/* ==========================================================================
   СТРАНИЦА ДОМА
   ========================================================================== */
.крошки{font-size:13.5px;padding:var(--ш3) 0;color:var(--текст-тихо);
  border-bottom:1px solid var(--линия)}
.крошки a{color:inherit;text-decoration:none}
.крошки a:hover{color:var(--акцент-текст)}
.крошки span{margin:0 7px;color:var(--текст-совсем-тихо)}

.дом-верх{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--ш8);
  align-items:start;margin-top:var(--ш6)}
.дом-снимки img{width:100%}
.галерея{display:flex;gap:10px;margin-top:10px;overflow-x:auto;padding-bottom:4px}
.кадр{flex:0 0 118px;padding:0;border:2px solid transparent;background:none;
  cursor:pointer;line-height:0;transition:border-color .2s ease,opacity .2s ease;opacity:.72}
.кадр img{width:100%;aspect-ratio:3/2;object-fit:cover;
  filter:sepia(.22) saturate(.82) contrast(1.05)}
.кадр:hover{opacity:1}
.кадр.выбран{border-color:var(--акцент);opacity:1}

.паспорт-блок{border:1px solid var(--линия);padding:var(--ш6);background:transparent}
.паспорт-блок h2{font-family:var(--тело);font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--текст-тихо);margin-bottom:var(--ш4);font-weight:400}
/* Строки паспорта разделяются линейками, а не фоном: цвет здесь работает
   штрихом. */
.паспорт-список{margin:0;display:flex;flex-direction:column;font-size:15.5px}
.паспорт-список>div{display:flex;justify-content:space-between;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--линия)}
.паспорт-список>div:last-child{border-bottom:0}
.паспорт-список dt{color:var(--текст-тихо);margin:0}
.паспорт-список dd{margin:0;font-weight:600;text-align:right}
/* Прежняя двухколоночная раскладка через grid — остаётся рабочей,
   если шаблон ещё не переведён на строки. */
dl.паспорт-список{display:grid;grid-template-columns:auto 1fr;gap:9px 16px}
dl.паспорт-список dt{font-size:15px}
.паспорт-блок .кнопка{display:flex;margin-top:var(--ш2)}

/* — полоса показателей: четыре ячейки в линейках — */
.показатели{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:1px solid var(--линия);margin-top:var(--ш6)}
.показатель{padding:16px;border-bottom:1px solid var(--линия);border-left:1px solid var(--линия)}
.показатель:first-child{border-left:0;padding-left:0}
.показатель .метка{margin-bottom:4px}
.показатель b{display:block;font-family:var(--загл);font-weight:600;font-size:24px;
  font-variant-numeric:tabular-nums}

/* — перечень с золотым штрихом слева — */
.перечень{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--ш3)}
.перечень div{border-left:2px solid var(--акцент);padding:8px 0 8px 13px;font-size:15px}

.подробности{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--ш8)}
.подробность h3{font-size:17px;padding-bottom:8px;margin-bottom:var(--ш3);
  border-bottom:1px solid var(--акцент)}
.подробность ul{margin:0;padding-left:18px}
.подробность li{margin-bottom:8px;font-size:15.5px;color:var(--текст-тихо)}

/* ==========================================================================
   ШАХМАТКА — этажи сверху вниз, как на разрезе дома
   ========================================================================== */
.шахматка{display:flex;flex-direction:column;gap:6px}
.этаж{display:flex;align-items:center;gap:10px}
.этаж-номер{flex:0 0 44px;font-size:12.5px;color:var(--текст-совсем-тихо);
  text-align:right;font-variant-numeric:tabular-nums}
.этаж-ряд{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.клетка{
  flex:1 1 88px;min-width:88px;padding:10px 6px;font:inherit;font-size:12.5px;
  font-variant-numeric:tabular-nums;text-align:center;cursor:default;
  /* Голая клетка — это ПРОДАННАЯ. Рамка здесь стояла `--н-300`
     (#b9cade), то есть ярче, чем у свободной, и проданное выпирало
     сильнее того, что можно купить. Линия фона отодвигает её назад,
     куда ей и место. */
  border:1px solid var(--линия);background:transparent;color:var(--текст-совсем-тихо);
  border-radius:var(--р-мал);text-decoration:none;display:block;
  transition:transform .18s ease,background .2s ease,border-color .2s ease,color .2s ease;
}
/* ТРИ СОСТОЯНИЯ ОБЯЗАНЫ РАЗЛИЧАТЬСЯ С ОДНОГО ВЗГЛЯДА.
   Здесь стояли `--з-100` (#eef4ff) у свободной и `--н-200` (#dfe8f2)
   у брони — два почти белых оттенка подряд, и шахматка читалась как
   «светлые и тёмные», то есть бронь сливалась со свободным. А это
   ровно то различие, ради которого на шахматку и смотрят: свободное
   можно купить сейчас, бронь — нельзя.

   Бронь развели ЦВЕТОМ И ШТРИХОМ сразу. Цвет — янтарный
   `--внимание`: он и по смыслу «придержано», и на тёмно-синей
   странице ни с чем не путается. Штрих пунктиром — чтобы состояние
   читалось и там, где цвет не доходит: чёрно-белая печать, дальтонизм,
   выцветший экран телефона на солнце. Одного цвета для смысла мало. */
.клетка.свободна{border-color:var(--з-700);background:var(--з-100);color:var(--з-800);cursor:pointer}
.клетка.свободна:hover{transform:translateY(-2px);background:var(--з-200);
  box-shadow:var(--тень-мал)}
.клетка.бронь{
  border-color:color-mix(in srgb,var(--внимание) 55%,var(--линия));
  border-style:dashed;
  background:color-mix(in srgb,var(--внимание) 16%,var(--поверхность));
  color:var(--внимание);
}
.клетка.выбрана{border-color:var(--акцент);background:var(--акцент);color:#fff}
.легенда{display:flex;gap:20px;flex-wrap:wrap;margin-top:var(--ш4);
  font-size:13px;color:var(--текст-тихо)}
.легенда span{display:flex;align-items:center;gap:7px}
.легенда i{width:12px;height:12px;display:inline-block;border:1px solid var(--н-300)}
.легенда i.свободна{border-color:var(--з-700);background:var(--з-100)}
/* Образец в легенде повторяет клетку целиком, включая пунктир:
   иначе он говорит не о том, что человек видит в шахматке. */
.легенда i.бронь{border-color:color-mix(in srgb,var(--внимание) 55%,var(--линия));
  border-style:dashed;
  background:color-mix(in srgb,var(--внимание) 16%,var(--поверхность))}
.легенда i.выбрана{border-color:var(--акцент);background:var(--акцент)}

/* ==========================================================================
   КВАРТИРЫ
   ========================================================================== */
.сетка-квартир{display:grid;gap:var(--ш6);margin-top:var(--ш6);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.кв-карточка{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border:1px solid var(--линия);background:transparent;border-radius:var(--р-сред);
  overflow:hidden;transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease
}
.кв-карточка:hover{border-color:var(--акцент);transform:translateY(-3px);box-shadow:var(--тень-сред)}
/* ПЛАНИРОВКА — НА БЕЛОМ, А НЕ НА ЦВЕТЕ ТЕМЫ. Планы приходят из
   каталога картинками с прозрачным фоном и ТОНКИМИ ТЁМНЫМИ ЛИНИЯМИ:
   на тёмно-синей подложке стены сливаются с фоном, и разобрать
   планировку нельзя — а ради неё карточку и открывают. Часть планов
   идёт с уже запечённым белым фоном, отчего в сетке половина карточек
   выглядела светлыми, половина тёмными: белое здесь заодно
   выравнивает и это. */
.кв-план{width:100%;height:190px;object-fit:contain;background:#fff;padding:10px;
  transition:transform var(--плавно)}
.кв-карточка:hover .кв-план{transform:scale(1.04)}
.кв-план-нет{display:flex;align-items:center;justify-content:center;min-height:190px;
  background:var(--поверхность);color:var(--текст-совсем-тихо);font-size:14px}
.кв-тело{padding:var(--ш3);display:flex;flex-direction:column;gap:5px}
.кв-верх{display:flex;align-items:center;justify-content:space-between;gap:8px}
.кв-комнаты{font-family:var(--загл);font-weight:600;font-size:17px}
.кв-площадь{color:var(--текст-тихо);font-size:15px;font-variant-numeric:tabular-nums}
.кв-цена{font-family:var(--загл);font-weight:600;font-size:20px;
  font-variant-numeric:tabular-nums}
.кв-цена.крупно{font-size:36px;font-weight:400;line-height:1.05}

.кв-страница{display:grid;gap:var(--ш8);grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);
  margin-top:var(--ш6);align-items:start}
.кв-план-крупно{border:1px solid var(--линия);background:#fff;
  padding:var(--ш4);display:flex;align-items:center;justify-content:center;min-height:420px}
.кв-план-крупно img{max-height:520px;object-fit:contain;background:#fff}
.кв-сводка{border:1px solid var(--линия);padding:var(--ш6);
  position:sticky;top:96px;display:flex;flex-direction:column;gap:var(--ш2)}
.кв-метр{font-size:14px;color:var(--текст-тихо);font-variant-numeric:tabular-nums;margin:0}

/* КЛАДОВКА. Раскладка зеркальна квартире — сводка слева, текст справа:
   планировки у кладовки нет ни одной, и левая колонка под картинку
   осталась бы пустой рамкой на пол-экрана. */
.кладовка-страница{display:grid;gap:var(--ш8);
  grid-template-columns:minmax(300px,1fr) minmax(0,1.45fr);
  margin-top:var(--ш6);align-items:start}
.кладовка-текст h2{margin:0 0 var(--ш3)}
.кладовка-текст p{max-width:60ch}
/* Занятая строка приглушена, но читается: заполненность — довод,
   и прятать проданные значило бы показывать дом пустее, чем он есть. */
.кладовки-таблица tr.занята{opacity:.55}
.кладовки-таблица tr.занята a{pointer-events:none;color:inherit;text-decoration:none}

/* ==========================================================================
   КАЛЬКУЛЯТОР ИПОТЕКИ
   ========================================================================== */
.калькулятор{border:1px solid var(--линия);padding:var(--ш6)}
.калк-ввод{display:flex;flex-direction:column;gap:var(--ш1);margin-bottom:var(--ш4)}
.калк-ввод .подпись-поля{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.калк-ввод b{font-size:16px;font-variant-numeric:tabular-nums;font-weight:600}
.калк-ввод input{text-align:right;font-variant-numeric:lining-nums tabular-nums}
/* Стрелки-крутилки убираем: шаг у них 50 000 ₽, и попасть в свою сумму
   нажатиями нельзя — они только мешают попасть курсором в поле. */
.калк-ввод input::-webkit-outer-spin-button,
.калк-ввод input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.калк-ввод input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=range]{width:100%;accent-color:var(--акцент);margin:0}
.калк-итог{display:flex;flex-direction:column;gap:var(--ш1)}
.итог-главный{font-family:var(--загл);font-weight:400;font-size:38px;line-height:1.05;
  font-variant-numeric:tabular-nums}
.итог-подпись{font-size:14px;color:var(--текст-тихо);font-variant-numeric:tabular-nums}
/* Подпись НАД числом, а не рядом с ним: на полной странице ипотеки она
   лежит внутри крупного блока и без этого вставала бы с ним в строку
   тем же 38-м кеглем по высоте строки. */
.итог-главный .итог-подпись{display:block;font-family:var(--тело)}
.итог-строка{display:flex;justify-content:space-between;gap:12px;font-size:15px;
  padding:7px 0;border-bottom:1px solid var(--линия)}
.итог-строка:last-child{border-bottom:0}
.итог-строка span{color:var(--текст-тихо)}
.итог-строка b{font-weight:400;font-variant-numeric:tabular-nums}
.итог-предупреждение{font-size:12.5px;color:var(--текст-совсем-тихо);margin:var(--ш3) 0 0}

/* Сегментированный переключатель программ */
.выбор-программ{display:inline-flex;flex-wrap:wrap;border:1px solid var(--линия);
  border-radius:var(--р-сред);overflow:hidden}
.выбор-программ label{display:inline-flex;align-items:center;padding:7px 13px;
  font-size:14.5px;cursor:pointer;transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.выбор-программ label+label{border-left:1px solid var(--линия)}
.выбор-программ input{position:absolute;opacity:0;width:0;height:0}
.выбор-программ label:has(input:checked){color:var(--акцент-текст);
  box-shadow:inset 0 0 0 1px var(--акцент)}
.выбор-программ label:not(:has(input:checked)):hover{
  background:color-mix(in srgb,var(--текст) 7%,transparent)}
.выбор-программ label:has(input:focus-visible){outline:2px solid var(--акцент);outline-offset:-2px}

/* ==========================================================================
   ТАБЛИЦЫ
   ========================================================================== */
.обёртка-таблицы{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px}
th{font-family:var(--тело);font-weight:400;text-align:left;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--текст-тихо);
  padding:10px 12px;border-bottom:1px solid var(--линия)}
td{padding:11px 12px;border-bottom:1px solid var(--линия)}
tbody tr{transition:background .18s ease}
tbody tr:hover{background:color-mix(in srgb,var(--текст) 4%,transparent)}
td.лучшее{color:var(--акцент-текст);font-weight:600}
th.убрана,td.убрана{color:var(--текст-совсем-тихо)}
th.переключаемая{cursor:pointer;user-select:none}
th.переключаемая:hover{color:var(--акцент-текст)}

/* ==========================================================================
   ФОРМА ОБРАЩЕНИЯ
   ========================================================================== */
.заявка{border:1px solid var(--линия);padding:var(--ш8)}
.форма-сетка{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--ш4)}
.поле{display:flex;flex-direction:column;gap:5px}
.поле label,.подпись-поля{font-size:13.5px;color:var(--текст-тихо)}
/* 16 px У ПОЛЕЙ ВВОДА — НЕ ТОЛЬКО РАДИ ЧИТАЕМОСТИ. Safari на iPhone
   приближает страницу, когда фокус встаёт в поле мельче 16 px, и после
   этого вёрстка «уезжает» вбок: человек вводит взнос и оказывается
   на съехавшей странице. */
.поле input,.поле select,.поле textarea,
.калк-ввод input{
  width:100%;min-height:46px;padding:10px 12px;font:inherit;font-size:16px;
  color:var(--текст);background:transparent;caret-color:var(--акцент);
  border:1px solid var(--линия);border-radius:var(--р-сред);
  transition:border-color .2s ease
}
.поле input:hover,.поле select:hover,.поле textarea:hover,
.калк-ввод input:hover{border-color:var(--линия-ярче)}
.поле input:focus-visible,.поле textarea:focus-visible,
.калк-ввод input:focus-visible{border-color:var(--акцент);outline-offset:0}
.поле textarea{min-height:92px;resize:vertical}
.поле-галочка{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--текст-тихо)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ответ{margin-top:var(--ш3);font-size:15px}
.ответ.хорошо{color:var(--з-800)}
.ответ.плохо{color:#8a2f2f}

/* ==========================================================================
   ПРОЧИЕ БЛОКИ ЛЕНДИНГА
   ========================================================================== */
.цифры-полоса{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:1px solid var(--линия)}
.цифры{padding:var(--ш4);border-bottom:1px solid var(--линия);
  border-left:1px solid var(--линия)}
.цифры:first-child{border-left:0;padding-left:0}
.цифры .число,.цифры b{display:block;font-family:var(--загл);font-weight:400;font-size:38px;
  line-height:1;font-variant-numeric:tabular-nums}
.цифры .слово,.цифры span{display:block;font-size:14px;color:var(--текст-тихо);margin-top:6px}

.сетка-людей{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--ш6)}
.человек{display:flex;flex-direction:column;gap:9px}
/* ФИО И ДОЛЖНОСТЬ — ДВЕ СТРОКИ. Правила у подписи не было, `<b>` и
   `<span>` шли в строку, и выходило «Тихун Сергей НиколаевичГенеральный
   директор» — слитно, без пробела. */
.человек figcaption{display:flex;flex-direction:column;gap:2px;line-height:1.35}
.человек figcaption span{font-size:15px;color:var(--текст-тихо)}
/* «Кто отвечает за стройку» вплотную под словом директора читалось
   продолжением его подписи — это новый раздел, ему нужен воздух. */
.слово ~ .подзаголовок{margin-top:var(--ш8)}
/* ОБЩАЯ ФОТОГРАФИЯ КОМАНДЫ — БЕЗ ТОНИРОВКИ И БЕЗ КВАДРАТА.

   Рамка стояла на `<figure>`, а не на снимке: `object-fit` там не
   работает вовсе, а `aspect-ratio:1` держал квадрат, тогда как сама
   фотография 3:2. Паспарту получалось не по картинке — сверху и снизу
   оставались полосы фона.

   Сепия убрана по решению: архивный тон идёт зданиям, а людей он
   старит и делает снимок несвежим — на фотографии живая команда,
   а не историческая справка. */
.команда-фото{margin:0 0 var(--ш4)}
.команда-фото img{width:100%;height:auto;
  border:6px solid var(--поверхность);outline:1px solid var(--линия)}
.команда-фото figcaption{margin-top:var(--ш2);font-size:14px;
  color:var(--текст-совсем-тихо);font-style:normal}
.подпись-автора{font-family:var(--загл);font-weight:600;font-size:16px}

/* ТЕКСТ ДЛЯ ЧТЕНИЯ: «Кто мы» и «Архитектурные решения» (27.10.2026).
   Абзацы здесь длинные, и в общем наборе (17 px, полоса 62 знака под
   заголовком во всю ширину) они читались обрывками: строка кончалась
   на трети экрана, правая половина пустовала, а края строк скакали.
   Кегль на ступень крупнее, межстрочный свободнее, `text-wrap:pretty`
   не оставляет на последней строке одно слово. Переносов по слогам нет
   намеренно: в русском они без словаря встают неверно. */
.чтение{font-size:18px;line-height:1.7;max-width:64ch;text-wrap:pretty;hyphens:manual}
.чтение p{margin:0 0 var(--ш4)}
.чтение p:last-child{margin-bottom:0}

/* Заголовок слева, текст справа — колонки начинаются по одной линии. */
.две-колонки{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--ш6) var(--ш8);align-items:start}
.заголовок-колонки{margin:0;font-size:clamp(26px,2.6vw,34px);line-height:1.15}

.слово{display:block}
.слово-текст{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:var(--ш6) var(--ш8);align-items:start}
.слово-сбоку{border-left:1px solid var(--линия);padding-left:var(--ш6)}
.слово-сбоку .подпись-автора{margin:0 0 var(--ш4);line-height:1.4}
.слово-сбоку .подпись-автора span{display:block;margin-top:var(--ш1);
  font-family:var(--тело);font-weight:400;font-size:15px;color:var(--текст-тихо)}
.слово-сбоку .ценности{display:block;margin:0;padding:0;list-style:none}
.слово-сбоку .ценности li{padding:var(--ш2) 0;border-top:1px solid var(--линия);font-size:16px}
@media (max-width:860px){
  .две-колонки,.слово-текст{grid-template-columns:1fr}
  .слово-сбоку{border-left:0;padding-left:0}
  .чтение{font-size:17px}
}

/* ПОЛИТИКА — длинный юридический текст: заголовки разделов скромнее
   общих h2 (44 px на каждый из десяти пунктов читались бы плакатом). */
.документ-квартир h1{font-size:var(--к-h2);margin:var(--ш2) 0 var(--ш6)}
.документ-квартир h2{font-size:22px;margin:var(--ш6) 0 var(--ш3)}
.документ-квартир ul{padding-left:var(--ш4)}
.документ-квартир li{margin-bottom:var(--ш2)}

/* ВАРИАНТЫ ОПЛАТЫ НА СТРАНИЦЕ ДОМА — выжимка «Ипотеки и оплаты». */
.оплата-кратко{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:var(--ш6) var(--ш8);align-items:start}
.оплата-способы{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--ш4)}
.оплата-способы li{border:1px solid var(--линия);border-radius:var(--р-сред);
  padding:var(--ш4)}
.оплата-способы b{display:block;font-family:var(--загл);font-size:17px;
  margin-bottom:var(--ш2)}
.оплата-способы span{color:var(--текст-тихо);font-size:16px;line-height:1.5}
.оплата-сбоку{display:grid;gap:var(--ш4)}
.оплата-семейная{padding:var(--ш4);background:var(--н-900);
  border:1px solid var(--линия);border-radius:var(--р-сред)}
.оплата-семейная dl{margin:var(--ш2) 0 0;display:grid;gap:var(--ш3)}
.оплата-семейная dt{font-size:13px;color:var(--текст-тихо)}
.оплата-семейная dd{margin:0;font-family:var(--загл);font-size:20px;font-weight:600;color:#fff}
.оплата-сбоку .договор{margin:0}
@media (max-width:860px){.оплата-кратко{grid-template-columns:1fr}}

.ценности,.сетка-оплаты{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--ш6)}
.способ,.плюс{border:1px solid var(--линия);padding:var(--ш4);border-radius:var(--р-сред)}
/* ЗАГОЛОВОК КАРТОЧКИ — И `h2`, И `h3`. Правило было написано только
   для `h3`, а «Возможности оплаты» размечены `h2`: заголовок получал
   общий размер (до 44 px) заголовочной гарнитурой, и «Наличными или
   картой» не помещалось в карточку шириной 240 px — текст вылезал
   и наезжал на соседнюю. Селектор мимо разметки не падает и ошибок
   не даёт: страница отдаётся, просто набор не тот.
   `overflow-wrap` — страховка на будущее: длинное слово вроде
   «рассрочка» в узкой колонке обязано переноситься, а не выходить
   за рамку. */
.способ h2,.способ h3,.плюс h2,.плюс h3{
  font-size:18px;margin-bottom:var(--ш2);
  overflow-wrap:anywhere;hyphens:auto}

.карусель{display:flex;gap:var(--ш4);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:var(--ш2)}
.новость{flex:0 0 320px;scroll-snap-align:start;border:1px solid var(--линия);
  display:flex;flex-direction:column;border-radius:var(--р-сред);overflow:hidden}
.новость-фото{aspect-ratio:3/2;object-fit:cover;width:100%;
  filter:sepia(.22) saturate(.82) contrast(1.05)}
.новость-текст{padding:var(--ш4);display:flex;flex-direction:column;gap:8px;flex:1}
.новость-верх{display:flex;gap:10px;align-items:baseline;font-size:13px;color:var(--текст-тихо)}
.новость-ссылка{margin-top:auto}
.стрелки{display:flex;gap:8px}
.стрелка{width:38px;height:38px;border:1px solid var(--линия);background:transparent;
  cursor:pointer;color:var(--текст);border-radius:var(--р-сред);
  transition:border-color .2s ease,background .2s ease}
.стрелка:hover{border-color:var(--акцент);background:color-mix(in srgb,var(--акцент) 10%,transparent)}

.шапка-раздела{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--ш6);margin-bottom:var(--ш6);flex-wrap:wrap}
.под-сеткой{margin-top:var(--ш6)}
.контакты-список{list-style:none;padding:0;margin:0;display:flex;
  flex-direction:column;gap:9px}

/* ==========================================================================
   АНИМАЦИИ

   ПРИНЦИП: движение объясняет структуру, а не украшает. Появление
   при прокрутке показывает, что блок — единица; ступенька в сетке
   показывает, что карточки читаются по порядку. Ничего не крутится
   и не мигает: книжная система, а не витрина.

   ВСЁ ВЫКЛЮЧАЕТСЯ ОДНОЙ МЕДИА-ЗАПРОСОЙ снизу — для тех, кому движение
   мешает физически, это не украшение, а условие пользоваться сайтом.
   ========================================================================== */

/* Появление при прокрутке. Класс `.появится` ставит разметка, `.видно`
   добавляет наблюдатель в dev.js; без JS блок остаётся видимым —
   страница обязана работать и так. */
.появится{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--задержка,0s)}
.появится.видно{opacity:1;transform:none}

/* Первый экран — без наблюдателя, сразу при загрузке, лесенкой.
   Заголовок, подзаголовок и кнопки приходят по очереди: так глаз
   успевает прочесть, а не получает всё разом. */
@keyframes всплыть{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.вход>*{animation:всплыть .8s cubic-bezier(.22,.61,.36,1) backwards}
.вход>*:nth-child(1){animation-delay:.05s}
.вход>*:nth-child(2){animation-delay:.14s}
.вход>*:nth-child(3){animation-delay:.23s}
.вход>*:nth-child(4){animation-delay:.32s}
.вход>*:nth-child(5){animation-delay:.41s}

/* Линейка-разделитель прочерчивается слева направо, когда до неё
   доходит прокрутка: структуру здесь держат линейки, и их появление —
   часть того же приёма. */
.линейка.появится{opacity:1;transform:none;transform-origin:left;
  transform:scaleX(0);transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.линейка.появится.видно{transform:scaleX(1)}

/* Цена и крупные числа набегают, а не подставляются: цифра, которая
   доехала до значения, читается как посчитанная. Считает dev.js. */
.набег{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important
  }
  .появится{opacity:1;transform:none}
  .линейка.появится{transform:none}
}

/* ==========================================================================
   ПЕРВЫЙ ЭКРАН

   ФОТОГРАФИЯ ПОД ТЕКСТОМ, А НЕ ПОД НИМ СЛОЕМ. Прежний экран был
   тёмно-синей вуалью поверх снимка: белый заголовок на небе читался
   только благодаря плотной заливке, и ровно эта заливка делала сайт
   неотличимым от любого другого застройщика.

   Здесь порядок книжный: набор на бумаге, под ним фронтиспис
   в паспарту с подписью. Снимок остаётся фотографией СДАННОГО дома —
   рендер показывает обещание, а покупателю нужно то, что уже стоит.
   ========================================================================== */
.первый{padding:var(--ш8) 0 0;border-bottom:1px solid var(--линия)}
.первый h1{max-width:19ch;margin-bottom:var(--ш3)}
.первый>.полоса>p{font-size:19px;color:var(--текст-тихо);max-width:58ch;
  margin-bottom:var(--ш6)}
.первый .кнопки{margin-bottom:var(--ш8)}

/* Паспарту у фронтисписа шире обычного: это единственный снимок
   на экране, и запас поля вокруг него — то, что отличает вклейку
   от баннера. */
.первый-снимок{margin:0}
.первый-снимок img{
  /* 3:2 ВМЕСТО 21:9. Прежний кадр выбрасывал почти половину высоты,
     и дом на снимке превращался в полосу кирпича: понять, что это дом,
     было нельзя. Здесь снимок обрезается ровно настолько, чтобы лечь
     в разворот, а не переписывает композицию. */
  display:block;width:100%;aspect-ratio:3/2;object-fit:cover;
  /* Паспарту у САМОГО СНИМКА, а не у `<figure>`: `.plate` красит сепией
     всё внутри, и подпись под фотографией ушла бы в тот же тон. */
  filter:sepia(.22) saturate(.82) contrast(1.05);
  border:6px solid var(--поверхность);outline:1px solid var(--линия);
}
.первый-снимок figcaption{margin-top:var(--ш2);font-size:14px;
  color:var(--текст-совсем-тихо);font-style:normal}

/* — КАРУСЕЛЬ ПЕРВОГО ЭКРАНА —
   Слайд во всю ширину: в отличие от новостей, где карточек видно
   несколько сразу и это правильно (свежее рядом), здесь показывается
   ОДИН кадр. Первый экран — не список, а высказывание; два слайда
   в поле зрения спорят друг с другом.

   Текст лежит ПОВЕРХ снимка, как на прежнем сайте, — но не на голой
   фотографии: под ним растяжка от края, иначе белые буквы теряются
   на светлом небе. Ровно та беда, из-за которой прежний первый экран
   держался на тёмной вуали во весь кадр. */
.герой{position:relative}
/* ПОЛОСА ПРОКРУТКИ ЗДЕСЬ ПРЯЧЕТСЯ, в отличие от ленты новостей.
   Там она полезна — показывает, что карточек больше, чем видно.
   Здесь слайд один во всю ширину, и полоса под ним читается как
   элемент вёрстки, а не как подсказка. Листание остаётся: колесо,
   свайп и клавиатура работают от `overflow`, а не от видимости
   полосы; для мыши есть стрелки. */
.герой-лента{scroll-snap-type:x mandatory;gap:0;padding-bottom:0;
  scrollbar-width:none;-ms-overflow-style:none}
.герой-лента::-webkit-scrollbar{display:none}
.герой-слайд{
  /* Привязка `start`, как у ленты новостей: слайд во всю ширину,
     и «начало» с «серединой» для него совпадают, а один способ
     на две карусели меньше расходится. */
  position:relative;flex:0 0 100%;scroll-snap-align:start;
  border-radius:var(--р-сред);overflow:hidden;
  border:6px solid var(--поверхность);outline:1px solid var(--линия);
  /* ПРОПОРЦИЯ РОВНО ПО БАННЕРУ (1680×801), а не 16/7. Разница
     невелика — 2.10 против 2.29, — но `object-fit:cover` срезал бы
     ею восемь процентов кадра, а у готового макета по краям стоят
     заголовок слева и фраза о компании справа: обрезка съедала бы
     слова. Нижняя граница нужна, чтобы текст не сплющило, когда
     ширины мало. */
  aspect-ratio:1680/801;min-height:280px;display:flex;align-items:flex-end;
}
/* Слайд-ссылка: подчёркивания и цвета ссылки здесь не нужны — кликает
   картинка целиком. Курсор и лёгкое приближение при наведении говорят,
   что нажать можно, не добавляя чужого элемента поверх макета. */
a.герой-слайд{display:flex;text-decoration:none;color:inherit}
a.герой-слайд .герой-фото{transition:transform .5s ease}
a.герой-слайд:hover .герой-фото{transform:scale(1.02)}
@media (prefers-reduced-motion:reduce){
  a.герой-слайд:hover .герой-фото{transform:none}
}
/* СЕПИИ ЗДЕСЬ БОЛЬШЕ НЕТ. Она сводила разные фотографии домов
   к общему тёплому тону, и для снимков это было верно. Слайд теперь
   несёт готовый баннер с фирменными цветами и синим логотипом —
   тонировать его значит показывать не то, что нарисовал дизайнер. */
.герой-фото{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.герой-текст{
  position:relative;padding:var(--ш6) var(--ш5);width:100%;
  background:linear-gradient(to top,
    color-mix(in srgb,var(--фон) 92%,transparent) 0%,
    color-mix(in srgb,var(--фон) 70%,transparent) 55%,
    transparent 100%);
}
.герой-текст{padding-bottom:calc(var(--ш5) + 34px)}
.герой-текст h2{margin:0 0 8px;font-size:var(--к-h2)}
.герой-текст p{margin:0 0 var(--ш3);max-width:46ch;color:var(--текст)}
/* ПОДПИСИ В УГЛАХ. Слева телефон, справа фраза о компании — так
   на прежнем сайте. Лежат в одной строке с прижатием к краям:
   два отдельно позиционированных блока разъезжались бы по-разному
   при переносе текста. */
.герой-углы{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--ш4);
  padding:var(--ш5);font-size:15px;pointer-events:none;
}
.герой-углы span:last-child{text-align:right;max-width:32ch}

/* СТРЕЛКИ ПО БОКАМ, а не в углу: слайд один во всю ширину, и кнопку
   «дальше» ищут у правого края кадра. Полупрозрачная подложка нужна
   потому, что под стрелкой оказывается то небо, то кирпич. */
.герой-стрелки{position:static}
.герой-стрелки .стрелка{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:999px;
  background:color-mix(in srgb,var(--фон) 78%,transparent);
  backdrop-filter:blur(4px)}
.герой-стрелки .стрелка.слева{left:calc(var(--ш4) + 6px)}
.герой-стрелки .стрелка.справа{right:calc(var(--ш4) + 6px)}
.герой-стрелки .стрелка:hover{transform:translateY(-50%) scale(1.06)}
/* Выключенная стрелка не исчезает, а гаснет: пропадающая кнопка
   сдвигает взгляд, а на краю карусели это происходит постоянно. */
.герой-стрелки .стрелка:disabled{opacity:.35;cursor:default}

/* — заголовок района со счётчиком домов —
   Счётчик контуром, а не плашкой: заливка здесь спорила бы
   с единственным акцентом страницы. */
.район{margin:var(--ш8) 0 var(--ш4);font-family:var(--тело);font-size:12px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--текст-тихо);
  font-weight:400;display:flex;align-items:center;gap:10px}
.район::after{content:"";flex:1;height:1px;background:var(--линия)}
.район .счёт{order:-0;font-family:var(--загл);font-size:14px;letter-spacing:0;
  color:var(--акцент-текст);border:1px solid var(--линия-ярче);
  padding:1px 8px;font-variant-numeric:tabular-nums}

/* — акция среди новостей: штрих золотом сверху — */
.новость.акция{border-top:2px solid var(--акцент)}

/* — срок сдачи в карточке дома — */
.паспорт li.срок,.срок{color:var(--акцент-текст)}
.дом-кнопки .дом-вторая{color:var(--текст-тихо);font-weight:400}
.дом-шапка h1{margin-bottom:var(--ш2)}

/* — семейная ипотека: единственная тёмная плашка на сайте —
   Она и должна выбиваться: это условие, ради которого страницу
   открывают, а вокруг сплошная бумага. */
.семейная{margin-top:var(--ш8);padding:var(--ш6);background:var(--н-900);
  color:var(--н-200)}
.семейная h2{color:#fff;font-size:24px;margin-bottom:var(--ш4)}
.семейная dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--ш4);margin:0}
.семейная dt{font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--н-500);margin-bottom:5px}
.семейная dd{margin:0;font-family:var(--загл);font-size:22px;font-weight:600;
  color:var(--з-300);font-variant-numeric:tabular-nums}

/* — перечень условий договора — */
.договор{margin:0 0 var(--ш4);padding-left:var(--ш4);list-style:none}
.договор li{position:relative;margin-bottom:var(--ш2);font-size:16px}
.договор li::before{content:"";position:absolute;left:calc(var(--ш4) * -1);
  top:.62em;width:9px;height:1px;background:var(--акцент)}

.подсказка{color:var(--текст-совсем-тихо);font-weight:400}
.заявка .подсказка{color:var(--текст-совсем-тихо)}

/* ==========================================================================
   КАРТА ДОМА

   До нажатия — заставка в рамке: человек видит, что здесь карта, и сам
   решает грузить. После — айфрейм Яндекса на её месте.
   ========================================================================== */
.карта{border:1px solid var(--линия);background:var(--поверхность);
  min-height:340px;display:flex}
.карта-заставка{
  flex:1;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:var(--ш2);padding:var(--ш6);
  /* Косая штриховка — та же, что у заглушек: место под содержимое,
     которого пока нет на экране. */
  background-image:repeating-linear-gradient(45deg,
    transparent 0 9px, color-mix(in srgb,var(--акцент) 8%,transparent) 9px 10px);
}
.карта-заставка b{font-family:var(--загл);font-weight:600;font-size:22px}
.карта-заставка p{margin:0;max-width:46ch}
/* Leaflet требует у контейнера ЯВНУЮ высоту: с одной min-height карта
   собирается в полосу нулевой высоты — без ошибки и без подложки. */
.карта-загружена{display:block;padding:0;min-height:0;height:440px;
  background:var(--поверхность)}
.карта .leaflet-container,.карта.leaflet-container{font-family:var(--тело)}
.карта .leaflet-tooltip{font-size:13px;line-height:1.35;color:#0f172a}
/* Дом — крупнее и поверх остальных: ради него открыли страницу.
   Цвет приходит с сервера (`--цвет`), как у меток окружения. */
.карта-дом-обёртка{background:none;border:0}
.карта-дом{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:var(--цвет,#dc2626);color:#fff;border:3px solid #fff;
  font-size:17px;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.35);
}
/* Карта и строка под ней — один блок: появляются вместе. */
.карта-блок{display:block}
/* Кнопка в Яндекс не главная, поэтому светлая: главное на странице
   по-прежнему «Подобрать квартиру». */
.карта-яндекс{font-size:15px}
/* Под картой: ссылка в Яндекс — туда уходят за маршрутом и панорамами —
   и обязательная подпись источника подложки. */
.карта-низ{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:var(--ш2);margin-top:var(--ш2)}
.карта-источник{color:var(--текст-совсем-тихо)}
.карта-источник a{color:var(--текст-тихо)}

/* ХОД СТРОИТЕЛЬСТВА — ЛЕНТА ПО МЕСЯЦАМ.

   Свежий кадр первым и крупнее остальных: человек открывает этот блок,
   чтобы увидеть, как сейчас, а прошлые месяцы нужны для сравнения
   и стоят мельче. Пропорция 4:3 задана рамкой, чтобы лента не прыгала
   при загрузке: снимки с площадки приходят разной высоты. */
.стройка{
  display:grid;gap:var(--ш3);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.стройка-кадр{margin:0}
.стройка-кадр:first-child{grid-column:span 2;grid-row:span 2}
.стройка-кадр img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border:1px solid var(--линия);background:var(--поверхность);
}
.стройка-кадр figcaption{
  margin-top:8px;font-size:13px;color:var(--текст-тихо);
  font-family:var(--цифры);
}
.стройка-источник{margin-top:var(--ш3);color:var(--текст-совсем-тихо)}
.стройка-источник a{color:var(--текст-тихо)}

@media (max-width:760px){
  /* На телефоне первый кадр во всю ширину, остальные по два в ряд:
     растянутый на две колонки из двух он съедал бы весь экран. */
  .стройка{grid-template-columns:1fr 1fr}
  .стройка-кадр:first-child{grid-column:span 2;grid-row:auto}
}

/* МЕСТА ОБЩЕГО ПОЛЬЗОВАНИЯ — РЯДЫ БЕЗ ОБРЕЗКИ.

   И основа, и прирост кадра пропорциональны его сторонам (`--доля` —
   ширина/высота из разметки), поэтому все кадры ряда растягиваются
   в одно и то же число раз и выходят одной высоты: вертикальный
   коридор встаёт рядом с горизонтальными целиком. Потолок по ширине
   держит высоту ряда в 560 px — иначе кадр, оставшийся в ряду один,
   растянулся бы на всю полосу, а вертикальный ушёл бы на два экрана. */
.зоны-текст{max-width:68ch;margin-bottom:var(--ш6);color:var(--текст-тихо)}
.зоны-текст p{margin:0 0 var(--ш3)}
.зоны{display:flex;flex-wrap:wrap;gap:var(--ш3)}
.зоны-кадр{
  margin:0;min-width:0;
  flex-grow:calc(var(--доля));flex-shrink:1;
  flex-basis:calc(var(--доля) * 300px);max-width:calc(var(--доля) * 560px);
}
.зоны-кадр img{
  width:100%;border:1px solid var(--линия);background:var(--поверхность);
}
.зоны-кадр figcaption{margin-top:8px;font-size:13px;color:var(--текст-тихо)}

@media (max-width:760px){
  .зоны-кадр{flex-basis:100%}
}

/* ЧТО РЯДОМ — СПИСКАМИ ПОД КАРТОЙ. Раскладка берётся у «подробностей»
   (та же сетка колонок), здесь только расстояние: оно прижато вправо
   и набирается цифровым шрифтом, чтобы столбец читался колонкой,
   а не тонул в строке названия. */
.окружение{margin-top:var(--ш4)}
.окружение li{display:flex;gap:var(--ш2);align-items:baseline;
  justify-content:space-between}
.окр-название{color:var(--текст)}
/* Кружок у заголовка группы — легенда карты: цвет тот же, что у меток
   этой группы, и приходит с сервера, а не вписан сюда. */
.окр-цвет{display:inline-block;width:11px;height:11px;border-radius:50%;
  background:var(--цвет);margin-right:8px;vertical-align:1px;
  box-shadow:0 0 0 2px rgba(255,255,255,.15)}
/* Строка, у которой есть точка на карте, нажимается и показывает её. */
.окр-на-карте{cursor:pointer;border-radius:4px;transition:background .15s}
.окр-на-карте:hover,.окр-на-карте:focus-visible{
  background:color-mix(in srgb,var(--акцент) 14%,transparent);outline:none}
.окр-метры{
  flex:none;color:var(--текст-тихо);font-size:14px;white-space:nowrap;
  font-family:var(--цифры);
  font-variant-numeric:lining-nums tabular-nums;
}
/* Источник и дата снимка. Лицензия OSM требует назвать происхождение
   данных, поэтому строка обязательная, а не украшение. */
.окр-источник{margin-top:var(--ш3);color:var(--текст-совсем-тихо)}

/* ==========================================================================
   ПОДБОР КВАРТИР

   ГЛАВНОЕ СВЕРХУ, ОСТАЛЬНОЕ ПОД КНОПКОЙ. Комнатность и цена отсекают
   большую часть выдачи и нужны всем; площадь, этаж, дом и срок нужны
   тем, кто уже сузил поиск. Боковая панель со всеми условиями сразу
   отнимала треть ширины у того, ради чего страница существует.
   ========================================================================== */
.панель-подбора{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--ш2);
  margin:var(--ш6) 0 var(--ш4);padding-bottom:var(--ш4);
  border-bottom:1px solid var(--линия)
}

/* — комнатность: ряд кнопок — */
.выбор-комнат{display:flex;flex-wrap:wrap;gap:6px}
.выбор-комнат label{display:inline-flex;align-items:center;gap:5px;
  padding:10px 15px;font-size:15px;cursor:pointer;white-space:nowrap;
  border:1px solid var(--линия);border-radius:var(--р-сред);
  transition:border-color .2s ease,background .2s ease,color .2s ease}
.выбор-комнат input{position:absolute;opacity:0;width:0;height:0}
.выбор-комнат label:has(input:checked){border-color:var(--акцент);
  color:var(--акцент-текст);background:color-mix(in srgb,var(--акцент) 9%,transparent)}
.выбор-комнат label:has(input:focus-visible){outline:2px solid var(--акцент);
  outline-offset:2px}
/* Счётчик: сколько квартир останется, если нажать именно этот вариант.
   Считается на лету — см. dev.js. */
.выбор-комнат i,.галочка i{font-style:normal;font-size:12.5px;
  color:var(--текст-совсем-тихо);font-variant-numeric:lining-nums tabular-nums}

/* — пара «от … до» одной рамкой: это одно условие, а не два поля — */
.поле-диапазон{display:flex;align-items:center;
  border:1px solid var(--линия);border-radius:var(--р-сред);overflow:hidden}
.поле-диапазон input{width:100%;min-width:0;min-height:44px;padding:9px 12px;
  font:inherit;font-size:15px;color:var(--текст);background:transparent;border:0;
  font-variant-numeric:lining-nums tabular-nums}
.поле-диапазон input:focus-visible{outline:none;
  background:color-mix(in srgb,var(--акцент) 7%,transparent)}
.поле-диапазон span{width:1px;align-self:stretch;background:var(--линия);flex:0 0 1px}
.поле-диапазон:focus-within{border-color:var(--акцент)}
/* Крутилки не нужны: шаг у цены 100 000 ₽, попасть ими в свою сумму
   нельзя, а курсору они мешают. */
.поле-диапазон input::-webkit-outer-spin-button,
.поле-диапазон input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.поле-диапазон input[type=number]{-moz-appearance:textfield;appearance:textfield}
.панель-подбора .поле-диапазон{flex:1 1 260px;max-width:340px}

.кнопка-фильтра{
  display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:10px 18px;
  font-family:var(--загл);font-weight:600;font-size:15.5px;cursor:pointer;
  color:var(--текст);background:transparent;
  border:1px solid var(--линия-ярче);border-radius:var(--р-сред);
  transition:border-color .2s ease,background .2s ease}
.кнопка-фильтра:hover{background:color-mix(in srgb,var(--текст) 6%,transparent)}
/* Счётчик у кнопки — сколько подробных условий сейчас включено.
   Без него человек, закрыв окно, не помнит, отбирает он что-то или нет. */
.кнопка-фильтра i{font-style:normal;font-family:var(--тело);font-size:12.5px;
  min-width:20px;height:20px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:999px;background:var(--акцент);color:#fff;
  font-variant-numeric:lining-nums tabular-nums}

.панель-подбора .сортировка{margin-left:auto}
.сортировка{display:flex;align-items:center;gap:10px}
.сортировка .подпись-поля{white-space:nowrap}
.сортировка select{min-height:46px;padding:10px 12px;font:inherit;font-size:15px;
  color:var(--текст);background:transparent;border:1px solid var(--линия);
  border-radius:var(--р-сред)}

/* — окно подробного фильтра — */
.окно-фильтра{position:fixed;inset:0;z-index:60;display:flex;
  align-items:flex-end;justify-content:center}
.окно-фильтра-фон{position:absolute;inset:0;
  background:color-mix(in srgb,#2d2b2b 45%,transparent)}
.окно-фильтра-в{position:relative;width:min(1100px,100%);max-height:88vh;
  display:flex;flex-direction:column;background:var(--фон);
  border:1px solid var(--линия);border-bottom:0;
  border-radius:var(--р-бол) var(--р-бол) 0 0;box-shadow:var(--тень-бол)}
.окно-фильтра-шапка{display:flex;align-items:center;justify-content:space-between;
  gap:var(--ш4);padding:var(--ш4) var(--ш6);border-bottom:1px solid var(--линия)}
.окно-фильтра-шапка h2{margin:0;font-size:24px}
.закрыть{background:none;border:0;padding:6px;font:inherit;font-size:20px;
  line-height:1;cursor:pointer;color:var(--текст-тихо)}
.закрыть:hover{color:var(--текст)}
.окно-фильтра-тело{display:grid;gap:var(--ш6);padding:var(--ш6);overflow-y:auto;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.фильтр-колонка{display:flex;flex-direction:column;gap:var(--ш1);min-width:0}
.фильтр-колонка .подпись-поля{display:block;margin-bottom:var(--ш1)}
.фильтр-колонка .поле-диапазон{margin-bottom:var(--ш3)}
.окно-фильтра-низ{display:flex;gap:var(--ш2);padding:var(--ш4) var(--ш6);
  border-top:1px solid var(--линия);background:var(--поверхность)}
.окно-фильтра-низ .кнопка.во-всю{flex:1}

.галочка{display:flex;gap:9px;align-items:baseline;font-size:14.5px;
  padding:6px 0;cursor:pointer}
.галочка input{margin:0;flex:0 0 auto;accent-color:var(--акцент)}
.список-галочек{display:flex;flex-direction:column;max-height:260px;overflow-y:auto}
/* Вариант, под которым при текущих условиях ноль квартир, гаснет,
   но не исчезает: пропадающие из панели строки читаются как сбой,
   а по погасшей видно, что вариант есть и почему он сейчас пуст. */
.галочка.пусто,.выбор-комнат label.пусто{opacity:.4;cursor:default}
.выбор-комнат label.пусто{border-style:dashed}

.подбор-шапка{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--ш4);flex-wrap:wrap;margin-bottom:var(--ш4)}
.найдено{margin:0;font-family:var(--загл);font-size:20px}
.тихая-кнопка{background:none;border:0;padding:0;font:inherit;font-size:14px;
  color:var(--акцент-текст);cursor:pointer;text-decoration:underline;
  text-underline-offset:3px}
.тихая-кнопка:hover{color:var(--з-800)}

/* Забронированная карточка приглушена, но кликается: бронь снимается,
   и прятать такие квартиры совсем — терять сделки. */
.кв-бронь{opacity:.62}
.кв-бронь:hover{opacity:1}
.штамп.бронь{border-color:var(--текст-совсем-тихо);color:var(--текст-тихо)}

@media (max-width:760px){
  .панель-подбора{gap:10px}
  .панель-подбора .поле-диапазон{max-width:none;flex-basis:100%}
  .панель-подбора .сортировка{margin-left:0;flex-basis:100%}
  .панель-подбора .сортировка select{flex:1}
  .кнопка-фильтра{flex:1}
  /* На телефоне окно занимает экран целиком: половина экрана под
     фильтром и половина под затемнением — это ни то ни другое. */
  .окно-фильтра-в{max-height:100%;height:100%;border-radius:0;border:0}
  .окно-фильтра-тело{padding:var(--ш4)}
  .окно-фильтра-шапка,.окно-фильтра-низ{padding:var(--ш3) var(--ш4)}
  .список-галочек{max-height:none}

  /* ПРОПОРЦИЯ ПЕРЕКЛЮЧАЕТСЯ ВМЕСТЕ С КАРТИНКОЙ. Тот же порог 760 px
     стоит в `<source media>` разметки: ниже него приходит вертикальный
     баннер 825×1080, и оставить под ним широкую рамку значит обрезать
     его сверху и снизу — то есть ровно по заголовку и по телефону.
     Два числа обязаны совпадать, поэтому и порог один. */
  .герой-слайд{aspect-ratio:825/1080;min-height:0;border-width:4px}
  /* Подписи в углах на вертикальном кадре лежат поверх дома, а не
     поверх неба, — им нужен запас снизу. */
  .герой-углы{padding:var(--ш4);font-size:13px}

  /* ЗАГОЛОВОК ПЕРВОГО ЭКРАНА ТЯНУЛ СТРАНИЦУ ВБОК. У `--к-h1` нижняя
     граница 40 px, а слово «НЕДВИЖИМОСТЬ» в Unbounded при таком кегле
     занимает 395 px против 335 доступных: перенести его негде,
     и документ уезжал на 40 px вправо на каждом телефоне. Ловится
     только замером `scrollWidth > clientWidth` — глазами видно лишь
     то, что страницу можно немного сдвинуть пальцем.
     Правило узкое, ровно на этот экран: общую шкалу кегля из
     `base.css` оно не трогает. */
  .первый h1{font-size:clamp(29px,8vw,40px)}
}

/* ==========================================================================
   ЧИСЛА

   ПОСЛЕДНИМ БЛОКОМ, И ЭТО ВАЖНО. Правила здесь имеют ту же вескость,
   что и те, которые они перекрывают (`.цифры b` против `.цифры b`),
   поэтому решает порядок в файле: стоя выше, они молча проигрывали —
   шрифт не менялся, а разобраться по разметке было нельзя.

   Перечислены поимённо, а не заданы глобально: в заголовке
   «п. Парижская Коммуна, д. 12» цифры идут внутри фразы, и менять там
   шрифт значит получить разнобой в строке. Здесь же число стоит само
   по себе — это показание, а не текст.
   ========================================================================== */
.итог-главный,.итог-подпись,.итог-строка b,.калк-ввод b,
.цифры b,.цифры .число,.показатель b,.кв-цена,.кв-цена.крупно,.кв-метр,
.кв-площадь,.семейная dd,.район .счёт,.клетка,.этаж-номер,
.паспорт-список dd,.набег,.кв-комнаты{
  font-family:var(--цифры);
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum","tnum";
}
/* Крупные показания — заголовочным весом и с подтянутым межбуквенным:
   цена это опорная точка страницы, и набирать её тем же кеглем, что
   подпись под ней, значит спрятать то, ради чего страницу открыли. */
.итог-главный,.кв-цена.крупно,.цифры b,.цифры .число,.показатель b{
  font-weight:400;letter-spacing:-.01em
}

/* ==========================================================================
   АДАПТИВ
   ========================================================================== */
@media (max-width:1000px){
  .дом-верх,.кв-страница,.кладовка-страница{grid-template-columns:1fr}
  .кв-сводка{position:static}
}
@media (max-width:760px){
  .полоса{padding:0 20px}
  .секция{padding:var(--ш6) 0}
  .шапка{position:static}
  .шапка-в{flex-wrap:wrap;gap:14px;padding-top:14px;padding-bottom:14px}
  /* Название в одну строку и на телефоне: мельче кегль и разрядка
     подписи, иначе на 375 px логотип шире экрана. */
  .лого span{font-size:17px}
  .лого small{font-size:11.5px;letter-spacing:.06em}
  /* Номер и кнопка — во всю ширину строки, кнопка компактнее: с полями
     по краям экрана вдвоём они не помещались в 375 px на семь пикселей. */
  .шапка-тел{width:100%;justify-content:space-between;gap:12px}
  .шапка-тел .кнопка{padding:10px 14px;font-size:14px}
  .меню{margin-left:0;order:3;width:100%;gap:16px;flex-wrap:wrap}
  .меню a{font-size:15px}
  .шапка-тел{margin-left:auto}
  /* Сайты группы на телефоне — своей строкой под логотипом: рядом
     с ним места нет, а линия слева от перенесённой строки висит в пустоте. */
  .группа{width:100%;border-left:0;padding-left:0;order:1}
  .шапка-тел{order:2}
  .показатели,.цифры-полоса{grid-template-columns:1fr 1fr}
  /* На телефоне не режем вовсе: полоса в 3:2 на узком экране снова
     превращает дом в фрагмент стены. */
  .первый-снимок img{aspect-ratio:4/3}
  .карта-загружена{height:340px}
  .карта{min-height:260px}
  .показатель:nth-child(odd){border-left:0;padding-left:0}
  .этаж-номер{flex-basis:32px}
  .клетка{flex-basis:68px;min-width:68px;font-size:11.5px}
}
/* Самые узкие телефоны (320–360 px): название в одну строку держится
   только на меньшем кегле. */
@media (max-width:360px){
  .лого span{font-size:15px}
  .лого small{font-size:11.5px;letter-spacing:0}
  .шапка-тел{gap:8px}
  .шапка-тел .тел{font-size:14px}
  .шапка-тел .кнопка{padding:9px 10px;font-size:13px}
}