/* === RESPONSIVE.CSS === */
/* assets/css/responsive.css */
/* НАЗНАЧЕНИЕ: Адаптация под планшет и телефон */
/* СВЯЗИ: подключается последним, поэтому переопределяет layout и sections */
/* РАЗМЕР: ~430 строк */
/*
   Порядок правил: от широкого экрана к узкому.
   Точки перелома выбраны по контенту, а не по моделям устройств:
   1180 - перестает помещаться меню рядом с кнопкой
   1024 - две колонки текст+фото становятся тесными
    860 - переход на одну колонку и мобильную шапку
    800 - первый экран и полоса цифр складываются
    720 - кнопка шапки перестает помещаться рядом с маркой
    600 - крупные сетки складываются полностью
    380 - самые узкие телефоны
*/

/* ==========================================================
   ДО 1180 - навигация уезжает в меню
   ========================================================== */

@media (max-width: 1180px) {
  .nav { display: none; }
  .burger { display: flex; }

  /* Место навигации занимает регион: центральная ячейка не должна
     пустеть, иначе марка и бургер расходятся по краям шапки,
     а между ними остается полоса воздуха шириной в пол-экрана. */
  .head-place { display: block; }

  .site-head .wrap {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    height: 74px;
  }

  .site-head.stuck .wrap { height: 64px; }
}

/* ==========================================================
   ДО 1024
   ========================================================== */

@media (max-width: 1024px) {
  .band-head {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s5);
    align-items: start;
  }

  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how-row    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .infra      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bal-args   { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }

  /* Семь типов квартир: в три колонки карточка сжимается до 280px,
     а в ней и площадь, и перечень помещений, и цена. Уходим в две. */
  .units { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Шкала готовности: в узкой колонке она становится короче заголовка
     и перестает читаться как измерение. Разворачиваем в одну колонку. */
  .ready-inner { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }

  /* Колонки сложились в одну, и выравнивать кадр больше не с чем.
     Пропорция здесь горизонтальная, а не родная вертикальная: кадр
     теперь во всю ширину страницы, и в 3:4 он вырастает до полутора
     тысяч пикселей, показывая одно мощение - здание уходит за верхний
     край. Точка съемки смещена вверх по той же причине. */
  .proj-main {
    grid-column: 1 / 13;
    position: static;
    min-height: 0;
  }

  .proj-main > .shot {
    position: static;
    aspect-ratio: 16 / 10;
  }

  .proj-main > .shot img { object-position: 50% 34%; }

  .proj-side { grid-column: 1 / 13; }
  .proj-side { margin-top: var(--s6); }

  .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }


/* ==========================================================
   ДО 860 - одна колонка, мобильная шапка
   ========================================================== */

@media (max-width: 860px) {

  /* Сокращаем вертикальные отступы секций на мобильном:
     --band по умолчанию 76px сверху+снизу = 152px "воздуха" между блоками */
  .band       { padding-block: clamp(44px, 7vw, 76px); }
  .band-tight { padding-block: clamp(32px, 5.5vw, 56px); }

  /* -- Секции -- */
  .opp-grid,
  .loc-grid,
  .bal-hero,
  .form-grid,
  .invest-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s7);
  }

  /* Крупный кадр региона тоже перестает с чем-либо выравниваться -
     колонка одна. Пропорция возвращается по той же причине, что
     и у кадра проекта на 1024. */
  .bal-hero > .reveal:first-child {
    position: static;
    min-height: 0;
  }

  .bal-hero > .reveal:first-child > .shot {
    position: static;
    aspect-ratio: 3 / 4;
  }

  .bal-hero > .reveal:first-child > .shot img { object-position: 50% 50%; }

  /* -- Стартовый пул --
     Кадр уходит вперед текста: он показывает, за что просят цену,
     а карточка без него читается как объявление, набранное словами. */
  .offer-box {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s6);
    padding: var(--s5);
  }

  .offer-media { order: -1; }
  .offer-media .shot { aspect-ratio: 16 / 10; }

  .offer-copy h2 { max-width: none; font-size: clamp(23px, 5.6vw, 30px); }

  .offer-actions .btn,
  .offer-actions .btn-line {
    flex: 1 1 100%;
    justify-content: center;
    white-space: nowrap;
  }

  /* Числа инвестора идут в строку с подписью, как на широком экране,
     но подпись сужается: в столбик пара "подпись - число" теряет связь. */
  .invest-facts dt { max-width: 14ch; }
  .invest-cta { width: 100%; justify-content: center; }

  /* -- Шкала входа --
     Три числа в ряд на телефоне сходятся до 90 пикселей: "+100%"
     переносится по символам и разъезжается на две строки. Складываем
     подпись и число парами в строку. */
  .escale-box { padding: var(--s5) var(--s4); }

  .escale-figs {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
  }

  /* Подпись слева, число справа: столбиком три пары занимают экран
     целиком, а сравнивать их между собой не нужно - это не ряд
     однородных величин, а одно предложение из трех частей. */
  .escale-figs > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s4);
  }

  /* Ограничение в ширину подписи, а не в символы. 14ch считаются по
     ширине нуля и не учитывают межбуквенный интервал в .18em - при нем
     "ESTIMATED GAIN" переставало помещаться и уезжало на вторую строку,
     из-за чего три пары в блоке вставали на разной высоте и переставали
     читаться как один ряд. Интервал здесь же ужат: заглавные с широкой
     разрядкой на 390px стоят слишком дорого. */
  .escale-figs dt {
    max-width: 20ch;
    letter-spacing: .1em;
  }

  .escale-figs dd { margin-top: 0; }
  .escale-figs .figure { font-size: clamp(24px, 7vw, 34px); white-space: nowrap; }

  /* Деления показывают только края и текущее: семь дат в ряд
     на 390 пикселях наезжают друг на друга, а выбранная дата
     и так стоит крупно в подписи над ползунком. */
  .escale-ticks li:not(.is-edge):not(.is-on) { display: none; }

  .escale-foot {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s5);
  }

  .escale-foot .btn { justify-self: stretch; width: 100%; }

  /* Фото в блоке возможности на телефоне не должно занимать
     весь экран - ограничиваем высоту. */
  .opp-media .shot { aspect-ratio: 4 / 3; }
  .loc-media { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* В коротком блоке колонки сложились - кадру возвращается пропорция,
     тянуться ему больше не за чем. */
  .band-tight .loc-media {
    position: static;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .band-tight .loc-media > .shot {
    position: static;
    aspect-ratio: 16 / 10;
  }

  /* -- Схема территории --
     Кадр во всю ширину, легенда под ним. В две колонки кадр ужимался
     до размера, на котором семь точек слипаются в одно пятно, а подписи
     легенды ломались по одному слову в строку. */
  .plot-body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s5);
  }

  /* Точки мельче: кадр стал уже, а расстояние между ними в кадре
     то же самое - на прежнем размере они перекрывают друг друга. */
  .plot-pin { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
  .plot-num { width: 22px; height: 22px; font-size: 11px; }

  .plot-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .plot-legend li { padding-right: var(--s2); }

  .units,
  .plans,
  .posts,
  .art-more { grid-template-columns: minmax(0, 1fr); }

  /* Колонка одна - разворачивать пентхаус горизонтально больше некуда,
     карточка возвращается к общему виду с кадром сверху. */
  .units > .unit-card:last-child:nth-child(odd) { flex-direction: column; }

  .units > .unit-card:last-child:nth-child(odd) > .shot {
    flex: none;
    aspect-ratio: 4 / 3;
    min-height: 0;
  }

  /* Лента визуализаций едет и здесь - см. sections.css. На телефоне
     у нее свои ширина кадра и скорость: кадры уже, копия набора короче,
     и при общей длительности лента шла бы заметно медленнее. */
  .proj-strip { margin-top: var(--s5); }

  .proj-track { animation-duration: 30s; }

  .proj-track > .shot {
    flex: 0 0 clamp(230px, 62vw, 300px);
    margin-right: var(--s4);
  }

  /* Кадры уже, копия ленты короче - при прежней длительности лента
     ползла бы заметно медленнее, чем на большом экране. */
  .int-track { animation-duration: 18s; }

  .bal-args { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }

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

  /* -- Отзывы листаются пальцем -- */
  .rev-grid {
    display: flex;
    gap: var(--s4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad);
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    padding-bottom: var(--s4);
    scrollbar-width: none;
  }

  .rev-grid::-webkit-scrollbar { display: none; }

  .rev-card {
    flex: 0 0 84%;
    scroll-snap-align: start;
  }

  .swipe-hint { display: block; }

  /* -- Кнопки --
     Поля по 48px заданы для кнопки, которая стоит в ряду с соседями и
     должна набрать ширину. Растянутая на всю колонку кнопка ширину уже
     имеет, а поля отъедают ее у подписи: "Получить условия инвестирования"
     ломалось на две строки при свободном месте по краям. */
  .btn { padding-inline: var(--s5); }

  /* -- Единицы измерения при цифрах --
     Единица задана долей от кегля соседней цифры (.32-.42em). На телефоне
     цифра уменьшается, и доля от нее дает 9-11px - ровно на той части,
     которая объясняет, что число означает цену метра, а не сумму.
     Переводим единицы на общую шкалу: они перестают зависеть от того,
     насколько ужалась цифра рядом. Отступ задаем в px по той же причине -
     в em он считался бы уже от нового, меньшего кегля. */
  .metric .figure small,
  .escale-figs .figure small {
    font-size: var(--t-meta);
    margin-left: 5px;
  }

  /* -- Поля ввода --
     Ровно 16px, а не меньше: Safari на iOS сам увеличивает страницу
     при фокусе на поле с более мелким текстом, и посетитель остается
     на приближенной странице, из которой обратно не выйти жестом. */
  .field input,
  .field textarea { font-size: 16px; }

  /* -- Зоны нажатия --
     Ссылка со стрелкой на десктопе живет строкой текста, пальцем в нее
     попасть трудно. Даем ей высоту нажатия, не трогая кегль. */
  .link { min-height: 44px; }

  /* Вопрос и знак "плюс" разводил отступ в 24px - на узком экране он
     съедал место у самого текста вопроса, ради которого строка и нужна. */
  .faq-item summary { gap: var(--s4); }

  /* -- Липкая кнопка -- */
  .sticky-cta { display: block; }

  /* Подвал липкой кнопки не должен перекрывать конец страницы */
  body.has-sticky .site-foot { padding-bottom: 96px; }

  /* -- Подвал --
     Ссылки в колонках шли строками по 24px с зазором 12px: попасть
     пальцем в нужную, не задев соседнюю, было делом удачи. Высоту
     нажатия держит сама ссылка, поэтому внешний зазор больше не нужен. */
  .foot-col a,
  .foot-col span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 6px;
  }

  /* Зазор нужен и здесь: у ссылки в две строки высота уже больше 44px,
     и на одной высоте нажатия соседние заголовки статей склеивались
     в сплошной текст. Собственные поля ссылки эту границу не рисуют. */
  .foot-col li + li { margin-top: var(--s2); }

  /* Нижние ссылки лечились тем же правилом, что и колонки, но живут
     в другом контейнере и под него не попадали: высота у них оставалась
     24px - вдвое меньше границы, на которой в ссылку попадают пальцем.
     Ставим тот же порог и здесь, и разводим их между собой: три ссылки
     подряд без зазора склеиваются в одну строку текста. */
  .foot-legal {
    flex-wrap: wrap;
    gap: 0 var(--s5);
  }

  .foot-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .foot-bottom { flex-direction: column; gap: var(--s3); }

  /* Юридический текст в подвале - тот самый, где сказано, что проценты
     на шкале не гарантия. Он и так последний на странице; набирать его
     ещё и мельче остального - значит прятать. */
  .foot-disclaimer { font-size: 13px; line-height: 1.6; }

  /* -- Шапка внутренних страниц (investors.php, location.php) --
     Без правил h1 наследует 30px — нормально, но лид и заметка
     занимают столько места, что здание почти не видно. */
  .inv-head {
    min-height: min(68svh, 520px);
    padding-bottom: var(--s7);
  }

  .inv-head h1 {
    font-size: clamp(24px, 5.8vw, 34px);
    max-width: none;
    margin-block: var(--s3) 0;
  }

  .inv-head .lede {
    font-size: 14px;
    line-height: 1.5;
    margin-top: var(--s4);
    max-width: none;
  }

  .inv-head .note {
    font-size: 13.5px;
    line-height: 1.45;
    margin-top: var(--s3);
    max-width: none;
  }

  /* Затемнение уплотнено в средней зоне, где стоят крошки и заголовок.
     Прежние 0.2 на 60% высоты давали приличный СРЕДНИЙ контраст - 5.3:1
     у крошек, - но средний здесь ничего не значит: под текстом проходят
     окна и светлая штукатурка здания, и на них те же крошки давали
     2.16:1, а заголовок 2.83:1. Читают по худшему месту, а не по
     среднему, поэтому мерить надо самые светлые участки. */
  .inv-head-media::after {
    background:
      linear-gradient(to bottom, rgba(10,9,6,.48) 0%, rgba(10,9,6,0) 20%),
      linear-gradient(to top, rgba(10,9,6,.9) 0%, rgba(10,9,6,.72) 30%, rgba(10,9,6,.46) 58%, rgba(10,9,6,.12) 100%);
  }

  /* Тень под самими буквами - тот же приём, что на первом экране.
     Плотнее гасить весь кадр нельзя: здание ради него и снято, а тень
     работает по контуру букв и не трогает остальное. */
  .crumbs,
  .inv-head h1,
  .inv-head .lede,
  .inv-head .note {
    text-shadow: 0 1px 3px rgba(10, 9, 6, .8), 0 2px 16px rgba(10, 9, 6, .6);
  }

  /* Крошкам тень плотнее остальных. Они стоят выше всех, где градиент
     уже почти сошёл на нет, и набраны мельче всех - а мелкому тексту
     нужно 4.5:1, не 3:1. С общей тенью выходило 4.07, с этой 5.2. */
  .crumbs {
    text-shadow: 0 1px 2px rgba(10, 9, 6, .95), 0 1px 10px rgba(10, 9, 6, .9);
  }

  /* Фото: показываем верхнюю часть здания */
  .inv-head-media img { object-position: 50% 20%; }

  /* -- Статья -- */
  .art-head { padding-top: 118px; }
  .prose p,
  .prose li { font-size: 16.5px; }
  .prose blockquote { font-size: 19px; padding-left: var(--s5); }
}

/* ==========================================================
   ДО 800 - первый экран сжимается, но композиция остается

   Текст держится слева, кадр открыт справа - как на широком экране.
   Складывать их в столбик нельзя: под текстом кадр приходится
   обрезать до полосы, и вид с высоты пропадает, а вместе с ним
   и закат, который на этом снимке стоит в правом верхнем углу.
   Место освобождает шкала, а не перестановка блоков.
   ========================================================== */

@media (max-width: 800px) {

  /* Высота от содержимого: заголовок, цена и две кнопки на телефоне
     занимают больше экрана, чем есть, и при 100svh нижняя кнопка
     уезжала за границу. Нижняя граница нужна, чтобы кадр не сплющило
     до полосы, когда текста мало. */
  /* Верхний отступ отсчитан так, чтобы заголовок пришелся на левую
     часть кадра - на лес, а не под него. Ниже текст уходит на фон
     страницы, и переход прячет растворение кадра книзу. */
  .hero {
    align-items: flex-start;
    min-height: auto;
    padding-top: clamp(120px, 25vw, 168px);
    padding-bottom: clamp(32px, 6vw, 56px);
  }

  /* Кадр показан целиком, в собственной пропорции, и ничем не обрезан.
     Через cover обойтись не вышло: снимок широкий, и в узком экране
     любая его обрезка отрезает либо левый торец корпуса, либо солнце.
     Вписанный по ширине, он отдает и то, и другое.

     Начинается от самого верха страницы: шапка лежит на кадре, а не
     на черной полосе над ним. Раньше кадр сдвигался вниз на высоту
     шапки, чтобы солнце из-под нее вышло, но полоса фона над снимком
     обходилась дороже - она обрывала первый экран, не начав его. */
  .hero-media {
    inset: 0 0 auto 0;
    height: auto;
  }

  .hero-media picture { display: block; }

  .hero-media img {
    height: auto;
    aspect-ratio: 1445 / 1078;
    object-position: center;
  }

  /* Затемнения левой части нет и здесь - кадр показан как есть.
     Остались два слоя, и оба технические. Сверху короткая мягкая тень
     под шапку: марка лежит на кронах. Гасить сильнее нельзя - под
     шапкой же стоит солнце, плотная полоса превратила бы закат
     в серое пятно. Снизу растворение в фоне страницы: кадр кончается
     там, где идет лид, и без него по экрану проходила бы
     горизонтальная граница. */
  .hero-media::after {
    background:
      linear-gradient(to bottom, rgba(10, 9, 6, .58) 0%, rgba(10, 9, 6, .3) 10%, rgba(10, 9, 6, .12) 22%, rgba(10, 9, 6, 0) 34%),
      linear-gradient(to bottom, rgba(10, 9, 6, 0) 48%, rgba(10, 9, 6, .82) 84%, rgba(10, 9, 6, 1) 100%);
  }

  /* -- Шкала первого экрана --
     Кегль опущен ощутимо ниже общей мобильной шкалы. Это плата за
     композицию: колонка шириной в две трети экрана на обычном кегле
     держала бы по два слова в строке. Ступени между заголовком,
     лидом и ценой сохранены - иерархия не схлопывается. */
  /* Ширину ограничивают сами блоки, а не общая обертка: под общим
     потолком кнопки наследовали ту же долю экрана, и подпись главной
     ломалась на две строки. */
  .hero-copy { max-width: none; }

  /* Раньше здесь стояли 62% на весь текст - доля подбиралась так, чтобы
     справа оставалось видно здание. Расплатой был кегль: в 215 пикселей
     лид влезал только десятым размером, а английская строка с надбавкой
     не влезала вовсе и выходила за экран.
     Здание стоит в верхней части кадра, и ограничение нужно только
     заголовку - он один поднимается на его уровень. Всё, что ниже,
     идёт по тёмному лесу и может занимать полную ширину. */
  .hero-copy .kicker,
  .hero-copy h1 { max-width: 76%; }

  .hero-copy .lede,
  .hero-copy .note,
  .hero-price { max-width: 100%; }

  /* Тень под текстом, а не затемнение под всем кадром.
     Текст поднялся туда, где лес подсвечен закатом: яркость фона там
     доходит до 146, и золотая метка давала на ней 2:1. Гасить ради
     этого весь снимок - терять то, ради чего его и ставили; тень
     работает только под самими буквами и уплотняет фон ровно
     по их контуру.

     Мягкая и без смещения: жесткая тень на светлом фоне читается
     обводкой, а не подложкой. */
  .hero-copy .kicker,
  .hero-copy h1,
  .hero-copy .lede,
  .hero-copy .note,
  .hero-price-label,
  .hero-price-value {
    text-shadow: 0 1px 3px rgba(10, 9, 6, .7), 0 2px 16px rgba(10, 9, 6, .55);
  }

  /* Кегль поднят по всему первому экрану.
     Было 11.5px у лида и 10.5px у подписей - это ниже границы, на
     которой текст читают, а не разбирают. Такой кегль был ценой за
     колонку в 62% ширины: в неё иначе не помещалось. Колонка теперь
     шире (см. блок выше), и платить этим больше не нужно. */
  .hero-copy .kicker { font-size: 10px; letter-spacing: .16em; }

  .hero-copy h1 { font-size: clamp(23px, 6.4vw, 29px); }

  .hero-copy .lede {
    font-size: 14.5px;
    line-height: 1.5;
  }

  .hero-copy .note {
    font-size: 13.5px;
    line-height: 1.5;
  }

  .hero-price { margin-top: var(--s4); }
  .hero-price-label { font-size: 12px; }

  /* Строка с надбавкой переносится, а не ужимается до нечитаемого.
     "+100% on top of what you invest" - 273 пикселя на любом кегле,
     который стоит показывать; в одну строку она не поместится никогда,
     и попытка её втиснуть раньше выдавливала текст за край экрана.
     Пусть переносится: это единственное число первого экрана,
     и обрезать его нельзя. */
  .hero-price-value {
    display: block;
    font-size: clamp(20px, 5.4vw, 25px);
    line-height: 1.25;
  }

  .hero-rule { width: 36px; margin-top: var(--s3); }

  /* Отбивки между блоками сжаты. Дело не в экономии места самой по
     себе: высота секции задает пропорцию, в которой cover показывает
     кадр, и каждые лишние сто пикселей текста отрезают от снимка
     по краям. Короткий текстовый блок - это и есть общий план. */
  .hero-copy h1 { margin-block: var(--s3) 0; }
  .hero-copy .lede { margin-top: var(--s4); }
  .hero-copy .note { margin-top: var(--s2); }

  /* Кнопкам отдана вся ширина полосы, а не колонки текста: в 68% подпись
     главной ломалась на две строки и добавляла секции высоты - ровно то,
     что отрезает кадр по краям. */
  .hero-actions { max-width: min(100%, 286px); }

  /* Кнопки идут в столбик по ширине текстовой колонки, а не экрана:
     растянутая на всю ширину кнопка легла бы поверх здания и разрезала
     кадр пополам. Высота и поля уменьшены следом за шкалой, но не ниже
     44px - это нижняя граница попадания пальцем. */
  .hero-actions {
    margin-top: var(--s5);
    gap: var(--s3);
  }

  .hero-actions .btn,
  .hero-actions .btn-line {
    flex: 1 1 100%;
    justify-content: center;
    min-height: 46px;
    font-size: 13.5px;
  }

  .hero-actions .btn:not(.btn-line) {
    padding-right: calc(var(--s4) + 24px);
    padding-left: var(--s4);
  }

  .hero-actions .btn:not(.btn-line) svg { right: var(--s3); }
  .hero-actions .btn:not(.btn-line)::after {
    right: calc(var(--s3) + 24px);
    top: 11px;
    bottom: 11px;
  }

  /* -- Полоса отличий: пять в ряд на любой ширине --
     Полоса читается как один перечень: пять отличий, увиденные разом.
     Разложенная на два ряда, она распадается на две группы, между
     которыми посетитель начинает искать смысл, - а его там нет.
     Ряд держится за счет сжатой типографики, см. блок до 600. */
  .hero-feature { padding: var(--s5) var(--s3); }
  .hero-feature svg { width: 22px; height: 22px; margin-bottom: var(--s3); }
  .hero-feature h3 { font-size: 13.5px; }
  .hero-feature p { font-size: 12.5px; }

  /* -- О проекте: кадр и текст остаются рядом --
     Разворот "снимок слева, разбор справа" - это и есть содержание
     блока: терраса показывает то, о чем говорит текст. Поставленные
     друг под другом, они превращаются в две несвязанные карточки.
     Место освобождает шкала, а не перестановка. */
  .about-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    gap: var(--s4);
    align-items: stretch;
  }

  /* Кадр тянется на всю высоту разворота, а не стоит в своей пропорции
     посреди колонки. В пропорции он выходил заметно ниже текста рядом,
     и разворот читался как текст с картинкой сбоку, а не как пара
     равных половин. Обрезка при этом идет по бокам - терраса и закат
     стоят в середине кадра и остаются в нем целиком. */
  .about-media,
  .about-media .shot {
    height: 100%;
    aspect-ratio: auto;
  }

  /* Кегль поднят вслед за первым экраном. Прежние 11px у лида и 10px
     у заметки подбирались под колонку, зажатую кадром слева; блок стоит
     сразу за первым экраном, и разнобой был заметен - текст на второй
     секции оказывался мельче, чем на первой. */
  .about-copy .kicker {
    margin-bottom: var(--s2);
    font-size: 9.5px;
    letter-spacing: .16em;
  }

  .about-copy h2 {
    max-width: none;
    font-size: clamp(17px, 4.4vw, 22px);
    line-height: 1.2;
  }

  .about-copy .lede {
    max-width: none;
    margin-top: var(--s3);
    font-size: 13.5px;
    line-height: 1.5;
  }

  .about-copy .note {
    margin-top: var(--s2);
    font-size: 12px;
    line-height: 1.5;
  }

  /* -- Метрики: две пары вместо ряда из четырёх --
     Ряд из четырёх на 390px давал колонку в 86px, и подпись под цифрой
     приходилось набирать восемью пикселями. Восемь пикселей не читают -
     их разглядывают, а сводка, которую надо разглядывать, не сводка.

     Две пары дают по 165px. Подписи возвращаются к размеру, на котором
     их видно, а цифры перестают жаться к границе колонки.

     Подписи у метрик английской версии длиннее русских ("Estimated gain
     on the earliest entry" против "Старт продаж"), так что ряд из
     четырёх здесь не выжил бы и на прежнем кегле. */
  .hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-block: var(--s5);
  }

  .hero-metrics .metric { padding-inline: var(--s3); }

  /* Число с единицей идёт одной строкой и не переносится: "+100 %",
     разорванное на "+100" и "%", читается как два разных значения,
     а единица под числом отрывается от него и повисает над подписью. */
  .hero-metrics .figure {
    font-size: clamp(20px, 5.6vw, 26px);
    letter-spacing: -.015em;
    white-space: nowrap;
  }

  .hero-metrics .figure small {
    display: inline;
    margin-left: 3px;
    font-size: 11px;
  }

  .hero-metrics .metric-label {
    margin-top: var(--s2);
    font-size: 11.5px;
    letter-spacing: .04em;
    line-height: 1.35;
  }
}

/* ==========================================================
   ДО 720 - кнопка шапки перестает помещаться рядом с маркой
   ========================================================== */

@media (max-width: 720px) {
  /* Кнопка наезжала бы на надпись SWISS LUXURY. Рядом с маркой
     остается только бургер: тот же призыв есть и в меню,
     и в липкой кнопке внизу экрана. */
  .head-cta { display: none; }
}

/* ==========================================================
   ДО 600 - всё в одну колонку
   ========================================================== */

@media (max-width: 600px) {
  .band       { padding-block: clamp(36px, 9vw, 56px); }
  .band-tight { padding-block: clamp(28px, 7vw, 44px); }

  /* band-head в одну колонку имеет лишний gap — текст и подзаголовок
     близко, но gap остаётся как для двух колонок */
  .band-head { gap: var(--s4); }

  /* Отступ proj-side на мобильном был задан как var(--s6)=32px,
     после сжатия band это выглядит непропорционально */
  .proj-side { margin-top: var(--s4); }

  /* loc-bridge: кнопка под текстом вплотную, не через большой gap */
  .loc-bridge-inner { gap: var(--s5); }

  /* -- Страница локации: текстовый блок территории --
     loc-sub по умолчанию 24px (min clamp) — на телефоне после h1
     в шапке он выглядит почти одинаково крупно, иерархия теряется.
     lede и note берём на шаг меньше общего мобильного масштаба. */
  .loc-sub { font-size: clamp(19px, 5vw, 24px); margin-bottom: var(--s3); }
  .loc-copy .lede { font-size: 15px; line-height: 1.55; margin-top: var(--s4); }
  .loc-copy .note { font-size: 14px; line-height: 1.65; margin-top: var(--s3); }

  .trust-grid,
  .how-row,
  .infra,
  .docs,
  .loc-media,
  .interests,
  .field-row,
  .proj-facts { grid-template-columns: minmax(0, 1fr); }

  /* Регион уходит из шапки: рядом с маркой и ее подписью он перестает
     помещаться, а сказан он и в первых строках первого экрана. */
  .head-place { display: none; }

  .site-head .wrap { grid-template-columns: minmax(0, 1fr) auto; }
  .head-right { grid-column: 2; }

  /* -- Полоса отличий: две колонки вместо пяти --
     Ряд из пяти держался на 390px только за счёт кегля в 10 пикселей
     и выброшенной поясняющей строки: в колонку 69px больше ничего
     не входило. Пять ярлыков, которые нужно разбирать по буквам, -
     это не "пять отличий, увиденные разом", а пять нечитаемых слов.

     Две колонки дают 165px на пункт. В них возвращается пояснение,
     ради которого пункт и написан, и кегль поднимается до обычного.
     Пятый пункт занимает строку целиком - иначе рядом с ним осталась
     бы дыра в половину экрана. */
  .hero-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: none;
  }

  .hero-feature {
    padding: var(--s5) var(--s4);
    text-align: left;
    border-left: none;
    border-bottom: 1px solid var(--rule-void2);
  }

  /* Вертикальная черта осталась бы висеть между колонками без опоры:
     разделяет теперь горизонтальная линия под каждым пунктом, а левая
     колонка отделена от правой отступом. */
  .hero-feature:nth-child(odd) { padding-left: 0; }
  .hero-feature:nth-child(even) {
    padding-right: 0;
    border-left: 1px solid var(--rule-void2);
    padding-left: var(--s5);
  }

  .hero-feature:last-child {
    grid-column: 1 / -1;
    padding-left: 0;
    padding-right: 0;
    border-left: none;
    border-bottom: none;
  }

  .hero-feature svg {
    width: 22px;
    height: 22px;
    margin: 0 0 var(--s3);
  }

  .hero-feature h3 {
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0;
    text-wrap: balance;
  }

  /* Пояснение вернулось. В колонке 69px оно распадалось на столбик
     из слогов и мешало читать сам ярлык - в 165px оно встаёт
     нормальными строками. */
  .hero-feature p {
    display: block;
    margin-top: var(--s2);
    font-size: 13.5px;
    line-height: 1.45;
  }

  /* Поле несет собственный нижний отступ, а пара полей, развернувшись
     в столбик, добавляет к нему еще и свой gap: внутри пары выходило
     48px против 24px между парами - близость читалась наоборот, поля
     одной строки казались дальше друг от друга, чем соседние строки.
     Оставляем один отступ и вешаем его на пару. */
  .field-row { gap: 0; margin-bottom: var(--s5); }
  .field-row .field:last-child { margin-bottom: 0; }

  /* Две карточки времени в пути рядом на телефоне ломают "~ 14 минут"
     переносом внутри цифры - разводим их в столбик. */
  .times { grid-template-columns: minmax(0, 1fr); }

  /* Список фактов о локации - та же беда, что и у спецификаций
     апартамента: значение прижато вправо и запрещено переносить,
     поэтому "Граница с лесным массивом" выдавливало строку за край.
     Значение переезжает под признак и получает право переноса. */
  .loc-list div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .loc-list dd {
    text-align: left;
    white-space: normal;
  }

  /* Легенда схемы в одну колонку: на 600px две колонки дают строку
     в одно слово, а подпись у точки - это фраза, а не ярлык. */
  .plot-legend { grid-template-columns: minmax(0, 1fr); }

  /* Пятнадцать пунктов в один столбец превращают состав экопарка
     в свиток на три экрана - за ним теряется, что это короткий
     перечень. В две колонки он читается как один блок. */
  .amenities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s5) var(--s4);
  }

  .foot-top { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .foot-col h4 { margin-bottom: var(--s4); }

  .trust-item,
  .how-step { padding-top: var(--s5); }

  .rev-card { flex: 0 0 88%; }

  /* Пара "признак - значение" перестает помещаться в строку: рядом
     стоят "Помещения" и "Спальня, гостиная-кухня, гардеробная, санузел",
     и обе половины разваливаются на три строки каждая, наезжая друг
     на друга смыслом. Ставим значение под признаком - строка снова
     читается за один взгляд. */
  .unit-specs div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding-block: var(--s3);
  }

  .unit-specs dd { text-align: left; }

  .final-actions .btn,
  .final-actions .btn-line { flex: 1 1 100%; justify-content: center; }

  .drawer { justify-content: flex-start; padding-top: 96px; }

  /* -- Просмотр фотографии --
     Кадр здесь занимает почти всю ширину экрана, и две кнопки по краям
     ложились поверх него, закрывая четверть снимка - ровно то, ради чего
     окно и открывали. Собираем управление в один ряд внизу: листать
     пальцем все равно удобнее свайпом, а кнопки остаются подсказкой,
     что снимков несколько. */
  .lb-nav {
    top: auto;
    bottom: 22px;
    margin-top: 0;
    width: 44px;
    height: 44px;
  }

  .lb-prev { left: calc(50% - 96px); }
  .lb-next { right: calc(50% - 96px); }

  .lb-count { bottom: 32px; }

  /* Кадру оставляем место под этот ряд, иначе он ложится на снимок. */
  .lightbox img { max-height: 76vh; }

  /* Сдвиг при наведении бессмыслен на тач-экране и только смещает
     кнопку из-под пальца. */
  .lb-prev:hover,
  .lb-next:hover { transform: none; }
}

/* ==========================================================
   ДО 380 - узкие телефоны
   ========================================================== */

@media (max-width: 380px) {
  .brand { font-size: 17px; }
  .brand-mark { width: 39px; height: 36px; }

  /* На 360px заголовку тесно и в 76% - отдаём ему ещё немного.
     Остальному тексту первого экрана ширина уже не ограничена
     (см. блок до 800), и переопределять здесь нечего. */
  .hero-copy .kicker,
  .hero-copy h1 { max-width: 84%; }

  /* Полоса отличий и здесь идёт в две колонки: на 360px это 152px
     на пункт - достаточно и для ярлыка, и для пояснения.
     Прежние переопределения кегля убраны: они возвращали 9.5px,
     ради которого всё и переделывалось. */

  /* Метрики: на 360px пара занимает по 165px, кегль держится. */
  .hero-metrics .metric { padding-inline: var(--s2); }

  .int-track > .shot { flex-basis: 180px; }
}

/* ==========================================================
   ГОРИЗОНТАЛЬНЫЙ ТЕЛЕФОН
   Экран низкий: верхний отступ первого экрана и высота кадра
   считаются от вида, и на 400px в высоту от них не остается места
   ни заголовку, ни кнопкам.
   ========================================================== */

@media (max-height: 560px) and (orientation: landscape) {
  .hero { padding-top: 96px; padding-bottom: var(--s6); }
  .drawer { justify-content: flex-start; overflow-y: auto; padding-top: 88px; }
  .drawer a { font-size: 24px; }
}

/* ==========================================================
   КРУПНЫЕ ЭКРАНЫ
   ========================================================== */

@media (min-width: 1600px) {
  /* Контейнер уперся в свои 1280px, а кадр продолжает растягиваться:
     доля в 62% отсчитывается уже от остановившегося контейнера и
     отстает от растущей затемненной зоны. Оставляем работать только
     потолок в знаках строки. */
  .hero-copy .kicker,
  .hero-copy h1,
  .hero-copy .lede,
  .hero-copy .note,
  .hero-price { max-width: 58ch; }
}

/* ==========================================================
   ТОЧНОСТЬ УКАЗАТЕЛЯ
   На тач-экранах наведение не работает, а залипший ховер
   выглядит как ошибка. Отключаем эффекты наведения.
   ========================================================== */

@media (hover: none) {
  .zoomable:hover img { transform: none; }
  .unit-card:hover { transform: none; box-shadow: none; }
  .post-card:hover h3 { color: inherit; }
  .nav a:hover::after { width: 0; }
}