/* =========================================================
   ЖК Ribat — стили сайта
   Шрифт: Manrope (замена платным Gilroy/Gotham Pro),
   масштабы типографики и отступов взяты из дизайна Figma
   (макет 1920px = 100% масштаба, дальше плавно уменьшаются)
   ========================================================= */

:root{
  --black:#212529;
  --accent:#E36414;
  --accent-dark:#B44F10;
  --white:#FFFFFF;
  --bg:#F8F9FA;
  --gray:#9C9C9C;
  --gray-2:#35363A;
  --gray-3:#727679;
  --blue-text:#32374C;
  --border:#D3D3D3;

  --fw-light:300;
  --fw-regular:400;
  --fw-medium:500;

  /* типографика: clamp(мин, вязкая vw-часть, макс=точное значение из Figma при 1920px) */
  --fs-h1: clamp(2.5rem, 4.17vw, 5rem);        /* 40 - 80px */
  --fs-h2: clamp(1.625rem, 2.604vw, 3.125rem); /* 26 - 50px */
  --fs-h3: clamp(1rem, 1.0417vw, 1.25rem);     /* 16 - 20px */
  --fs-h4: clamp(1.375rem, 1.8229vw, 2.1875rem); /* 22 - 35px */
  --fs-text: clamp(0.9375rem, 0.9375vw, 1.125rem); /* 15 - 18px */
  --fs-text-sm: clamp(0.875rem, 0.8333vw, 1rem);   /* 14 - 16px */
  --fs-menu: clamp(0.75rem, 0.729vw, 0.875rem);    /* 12 - 14px */
  --fs-button: clamp(0.9375rem, 0.9375vw, 1.125rem);

  --space-section: clamp(48px, 6.25vw, 120px);
  --space-lg: clamp(24px, 3.125vw, 60px);
  --space-md: clamp(16px, 2.08vw, 40px);
  --space-sm: clamp(10px, 1.04vw, 20px);

  --radius-lg: 40px;
  --radius-xl: 79px;
  --radius-pill: 999px;

  --container-max: 1920px;
  --container-pad: clamp(20px, 6.25vw, 120px);

  /* Хедер теперь position:fixed и не занимает места в потоке (нужно, чтобы фото
     героя могло уходить под него, см. .hero). Это расстояние — сколько места
     нужно оставить сверху, чтобы текстовая колонка героя не пряталась под хедером. */
  --header-clearance: clamp(96px, 8.5vw, 150px);
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--black);
  font-family:'Manrope', system-ui, -apple-system, sans-serif;
  font-weight:var(--fw-regular);
  font-size:var(--fs-text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input{ font-family:inherit; }
ul{ margin:0; padding:0; list-style:none; }
sup{ font-size:0.6em; }

.wrap{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--container-pad);
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--accent); color:#fff; padding:12px 20px; border-radius:8px;
}
.skip-link:focus{ left:20px; top:20px; }

h1,h2,h3,p{ margin:0; }

.h1{
  font-family:'Manrope', sans-serif;
  font-weight:var(--fw-light);
  font-size:var(--fs-h1);
  line-height:1.21;
  text-transform:uppercase;
  letter-spacing:-0.01em;
}
.h2{
  font-weight:var(--fw-light);
  font-size:var(--fs-h2);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:-0.01em;
}
.text{ font-size:var(--fs-text); line-height:1.6; }
.text-sm{ font-size:var(--fs-text-sm); line-height:1.6; }
.eyebrow{ font-size:var(--fs-text); line-height:1.4; font-weight:var(--fw-regular); }

.on-dark{ color:var(--white); }
.on-dark-70{ color:rgba(255,255,255,0.72); }
.on-accent{ color:var(--white); }
.eyebrow--on-accent{ color:rgba(255,255,255,0.85); }

.dot{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  background:var(--accent); flex:none;
}

/* =========================================================
   Кнопки / пилюли
   ========================================================= */
.pill-btn{
  display:inline-flex; align-items:center; justify-content:space-between; gap:14px;
  border-radius:var(--radius-pill);
  padding:10px 10px 10px 24px;
  font-size:var(--fs-button);
  font-weight:var(--fw-regular);
  white-space:nowrap;
  transition:opacity .2s ease, transform .2s ease;
}
.pill-btn:hover{ opacity:.88; }
.pill-btn img{ width:clamp(24px,2vw,30px); height:clamp(24px,2vw,30px); flex:none; }
.pill-btn--light{ background:rgba(255,255,255,0.85); color:var(--black); }
.pill-btn--accent{ background:var(--accent); color:var(--white); }

/* Исходный файл arrow-right.svg по факту указывает ВНИЗ — поэтому направления
   ниже заданы явно поворотом от этой базовой ориентации. */
.round-arrow-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(60px,6.25vw,120px); height:clamp(60px,6.25vw,120px);
  flex:none; border:0; background:none; padding:0;
}
.round-arrow-btn img{ width:100%; height:100%; transform:rotate(-90deg); } /* вниз -> вправо */
.round-arrow-btn--sm{ width:60px; height:60px; }
.round-arrow-btn--flip img{ transform:rotate(90deg); } /* вниз -> влево, для кнопок "назад" */
.round-arrow-btn--down img{ transform:none; } /* оставляем вниз как есть — герой */
.round-arrow-btn:disabled{ opacity:.35; cursor:default; }

.pill-btn img,
.lead-form__submit img{ transform:rotate(-90deg); } /* вниз -> вправо */
#back-to-top img{ transform:rotate(180deg); } /* вниз -> вверх */
/* в светлой пилюле тулбара герой-фото делаем кружок-иконку темнее (ближе креференсу) */
.pill-btn--light img{ filter:grayscale(1) brightness(.5); }

/* =========================================================
   Длинная стрелка — декоративный элемент рядом с заголовками
   (в присланных ассетах Figma отдельного файла для неё нет,
   поэтому она собрана на чистом CSS: линия + уголок-наконечник)
   ========================================================= */
.long-arrow{
  display:inline-block;
  vertical-align:middle;
  width:clamp(56px,8.32vw,160px);
  height:2px;
  background:currentColor;
  position:relative;
  margin-inline:clamp(14px,1.6vw,28px);
  transform:translateY(-0.3em);
  flex:none;
}
.long-arrow::after{
  content:"";
  position:absolute; top:50%; right:0;
  width:11px; height:11px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}
/* короче обычной — специально для "О застройщике", как в макете (иначе не влезает на строку) */
.long-arrow--sm{ width:clamp(48px,6.77vw,130px); }
.heading-row{ display:flex; align-items:center; flex-wrap:wrap; gap:clamp(12px,1.6vw,28px); }

.outline-box{
  border:1px solid var(--black);
  border-radius:var(--radius-xl);
  padding:clamp(16px,1.8vw,30px) clamp(24px,2.6vw,40px);
  display:flex; flex-direction:column; justify-content:center; gap:2px;
  min-height:120px;
}
.outline-box__title{ font-size:var(--fs-h2); font-weight:var(--fw-light); text-transform:uppercase; line-height:1; }
.outline-box__subtitle{ font-size:var(--fs-text); }

.badge-pill{
  background:var(--accent); color:var(--white);
  border-radius:var(--radius-xl);
  padding:clamp(14px,1.8vw,24px) clamp(20px,2.6vw,30px);
  font-size:var(--fs-h1); font-weight:var(--fw-light); text-transform:uppercase; line-height:1;
  display:inline-flex; align-items:center;
}

.chip{
  display:inline-flex; align-items:center; gap:10px;
  font-size:var(--fs-text);
}
.chip img{ width:clamp(30px,2.2vw,43px); height:clamp(30px,2.2vw,43px); flex:none; }

/* =========================================================
   Header — ДВЕ отдельные пилюли (не одна общая полоса):
   1) .site-header__nav-pill     — сплошная белая, логотип + меню
   2) .site-header__contact-pill — тёмная полупрозрачная, телефон + кнопки
   Хедер зафиксирован (position:fixed) и НЕ занимает место в потоке — обе
   пилюли остаются на месте при скролле. Контент страницы (см. .hero ниже)
   получает свой отступ сверху = --header-clearance, чтобы начинаться сразу
   под хедером, а не под ним.
   ========================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:clamp(12px,1.5vw,28px) var(--container-pad) 0;
}
.site-header__inner{
  position:relative;
  max-width:calc(var(--container-max) - 2 * var(--container-pad));
  margin-inline:auto;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:clamp(8px,0.9vw,28px);
  flex-wrap:wrap;
}

.site-header__nav-pill{
  position:relative; flex:none;
  display:flex; align-items:center;
  gap:clamp(8px,1vw,28px);
  background:rgba(255,255,255,0.9);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border-radius:var(--radius-pill);
  padding:10px clamp(14px,1.5vw,40px);
  box-shadow:0 8px 30px rgba(33,37,41,0.06);
}
.site-header__mark{ width:26px; height:auto; flex:none; }

.site-nav{ display:flex; align-items:center; gap:clamp(6px,0.8vw,20px); flex-wrap:wrap; }
.site-nav__link{
  font-size:var(--fs-menu); font-weight:var(--fw-medium); color:var(--black);
  line-height:1;
  white-space:nowrap;
}
.site-nav__link.is-active, .site-nav__link:hover{ color:var(--accent); }

/* Тёмная полупрозрачная пилюля — фото героя теперь ниже хедера (не за ним), поэтому
   под пилюлей всегда светлый фон страницы; тёмный фон + белый текст даёт стабильный
   контраст независимо от того, что происходит при скролле. */
.site-header__contact-pill{
  flex:none;
  display:flex; align-items:center; flex-wrap:wrap;
  gap:clamp(8px,0.8vw,22px);
  background:rgba(33,37,41,0.85);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border-radius:var(--radius-pill);
  padding:8px 8px 8px clamp(12px,1vw,24px);
}
.site-header__phone{ color:#fff; font-size:var(--fs-text); font-weight:var(--fw-regular); white-space:nowrap; }
.site-header__actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Хедер зафиксирован (position:fixed) и лежит поверх контента, поэтому переход по
   ссылке меню на #location/#apartments/#gallery/#progress/#developer/#contacts должен
   учитывать его высоту — иначе заголовок секции окажется наполовину под хедером.
   #hero сюда не входит намеренно: его собственный padding-top уже равен
   --header-clearance, так что доп. отступ при переходе по ссылке не нужен. */
#location, #apartments, #gallery, #progress, #developer, #contacts{
  scroll-margin-top: var(--header-clearance);
}
/* Кнопки внутри стеклянной пилюли — чуть компактнее дефолтных .pill-btn,
   чтобы обе пилюли уверенно помещались в одну строку на ширинах вроде 1440px. */
.site-header__actions .pill-btn{ padding:9px 9px 9px 20px; gap:10px; }
.site-header__actions .pill-btn img{ width:24px; height:24px; }

.site-header__burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:6px; flex:none; }
.site-header__burger-label{ display:none; } /* показывается только в брейкпоинтах ниже 1360px, см. соответствующий @media */
.site-header__burger-bars{ display:flex; flex-direction:column; gap:5px; }

/* Панель #nav-overlay должна быть скрыта БЕЗ УСЛОВИЙ по умолчанию — этот
   правило раньше лежало только внутри @media(max-width:1360px) ниже, из-за
   чего на широких экранах (>=1361px, включая замороженный десктоп) у div
   не было вообще никакого display-правила и он падал на браузерный дефолт
   display:block, "протекая" нестилизованной строкой ссылок в самый верх
   страницы поверх/под хедером. Открытие (.is-open) по-прежнему включается
   только внутри медиа-запроса — бургер, который на него переключает, и
   сам виден только на тех же ширинах, так что поведение не меняется. */
.nav-overlay{ display:none; }
.site-header__burger-bars span{ width:22px; height:2px; background:var(--black); display:block; transition:transform .2s ease, opacity .2s ease; }
.site-header__burger[aria-expanded="true"] .site-header__burger-bars span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.site-header__burger[aria-expanded="true"] .site-header__burger-bars span:nth-child(2){ opacity:0; }
.site-header__burger[aria-expanded="true"] .site-header__burger-bars span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =========================================================
   Hero
   ========================================================= */
/* Хедер зафиксирован (position:fixed) и не занимает места в потоке, поэтому весь
   .hero получает отступ сверху = --header-clearance — и фото героя, и текстовая
   колонка теперь ровно под навбаром, а не за ним. */
.hero{ padding-top:var(--header-clearance); }
.hero__grid{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(24px,3vw,56px);
  align-items:start;
}
.hero__col{ display:flex; flex-direction:column; gap:clamp(20px,2.6vw,48px); }
.hero__badges{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(16px,1.8vw,32px); }

.hero__title{ max-width:900px; }

.hero__row{ display:flex; align-items:center; flex-wrap:wrap; gap:clamp(6px,0.8vw,16px); }
.hero__row .long-arrow{ width:clamp(110px,16.63vw,319px); margin-inline:0 clamp(14px,1.6vw,28px); }

.pill-text{
  display:inline-block;
  background:var(--white);
  border-radius:var(--radius-xl);
  padding:clamp(14px,1.6vw,22px) clamp(20px,2.4vw,34px);
  font-size:var(--fs-text); line-height:1.5;
  text-transform:uppercase;
  max-width:420px;
  box-shadow:0 8px 30px rgba(33,37,41,0.05);
}

.hero__promo{ display:flex; align-items:center; gap:clamp(10px,1.2vw,20px); flex-wrap:wrap; }

.hero__photo{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio: 826/849; background:var(--black); }
.hero__photo-img{ width:100%; height:100%; object-fit:cover; }

.hero__features{
  position:absolute; left:clamp(16px,2.5vw,40px); bottom:clamp(16px,2.5vw,40px); right:clamp(16px,2.5vw,40px); z-index:2;
  background:rgba(33,37,41,0.45); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-radius:var(--radius-xl);
  padding:clamp(14px,1.4vw,24px) clamp(20px,2.2vw,40px);
  display:flex; flex-direction:column; gap:clamp(8px,1vw,16px);
  max-width:520px;
}
.hero__feature{ display:flex; align-items:center; gap:16px; color:#fff; font-size:var(--fs-text); text-transform:uppercase; }

/* =========================================================
   О комплексе
   ========================================================= */
.complex{ padding-block:var(--space-section); }
.complex__grid{ display:grid; grid-template-columns: 1fr 1fr; gap:var(--space-lg); align-items:start; }
.complex__col{ display:flex; flex-direction:column; gap:var(--space-md); }
.complex__accent{ width:min(280px,80%); border-radius:var(--radius-xl); object-fit:cover; aspect-ratio:287/120; }

.stat-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(20px,3vw,50px);
  border:1px solid var(--black); border-radius:var(--radius-pill);
  padding:clamp(16px,2vw,30px) clamp(24px,3vw,50px);
}
.stat{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.stat__num{ font-size:var(--fs-h1); font-weight:var(--fw-light); color:var(--accent); line-height:1; }
.stat__label{ font-size:var(--fs-text); font-weight:var(--fw-regular); }

.complex__desc{ max-width:56ch; }

/* =========================================================
   CTA-баннеры (Записаться на просмотр / Консультация)
   ========================================================= */
.cta-band{ padding-block:clamp(20px,2.5vw,40px); }
.cta-band__label{
  font-size:var(--fs-text); line-height:1.35; font-weight:var(--fw-regular);
  text-transform:uppercase;
  max-width:220px;
  margin-bottom:var(--space-md);
  color:var(--black);
}
.cta-band__label.on-dark{ color:rgba(255,255,255,0.85); }
.cta-card{
  border-radius:var(--radius-lg);
  display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,80px);
  align-items:center; justify-content:space-between;
  padding:clamp(28px,4vw,60px);
}
.cta-card--accent{ background:var(--accent); }
.cta-card--light{ background:var(--bg); flex-direction:column; align-items:stretch; }
.cta-card__text{ display:flex; flex-direction:column; gap:clamp(10px,1.2vw,20px); max-width:520px; }

.lead-form{ display:flex; flex-direction:column; gap:var(--space-sm); width:100%; max-width:355px; }
.lead-form__note{ font-size:var(--fs-text); color:var(--white); }
.lead-form--on-accent .lead-form__note{ color:var(--white); }
.cta-card--light .lead-form__note{ color:var(--black); }
.lead-form__fields{ display:flex; flex-direction:column; gap:15px; }
.lead-form__input{
  height:55px; border-radius:var(--radius-pill);
  padding:0 22px; font-size:var(--fs-text);
  border:1px solid rgba(255,255,255,0.65);
  background:transparent; color:var(--white);
}
.lead-form__input::placeholder{ color:rgba(255,255,255,0.8); }
.cta-card--light .lead-form__input{ border-color:var(--border); color:var(--black); }
.cta-card--light .lead-form__input::placeholder{ color:var(--gray-3); }

.lead-form__submit{
  height:55px; border-radius:var(--radius-pill); border:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 10px 0 24px; font-size:var(--fs-button); font-weight:var(--fw-regular);
}
.lead-form__submit img{ width:40px; height:40px; }
.lead-form__submit--light{ background:var(--white); color:var(--black); }
.lead-form__submit--accent{ background:var(--accent); color:var(--white); }
.lead-form__submit:hover{ opacity:.9; }

.lead-form.is-sent-flash .lead-form__submit{ background:#2f9e44; color:#fff; }

/* 1200-1740 и 1740-1920 (десктоп): по умолчанию .cta-band__label и .cta-card —
   блочные соседи внутри .wrap, поэтому подпись садится отдельной строкой НАД
   карточкой на всю ширину контейнера. По Фигме (фрейм "Головна_1200-1740",
   узлы 52:257/52:260 "Записаться на просмотр" и 52:707/52:709 "Консультация")
   подпись и карточка стоят В ОДНУ СТРОКУ на одной высоте (одинаковый y):
   подпись занимает фиксированную колонку 220px (= её собственный max-width,
   т.е. текст не "обтекает" карточку своей фактической шириной — ширина
   резервируется полностью, как в макете), затем зазор ~73px (на ширине
   фрейма 1740 карточка в Фигме стартует ровно в x=593 = 300+220+73), затем
   карточка занимает остаток ширины (НЕ от левого края контейнера). Правка
   только для .cta-band (эти 2 CTA-секции) — футер (.site-footer__cta)
   использует свой контейнер, не .wrap/.cta-band, поэтому не затрагивается.
   min-width:1200px намеренно без верхней границы, чтобы одинаково покрыть
   1200-1740 и 1740-1920 — на 768-1199 и ≤767 это правило не действует.

   ВНУТРИ самой карточки — тоже по Фигме, а не "как получится" из базового
   flex-wrap. У обеих карточек в макете (координаты узлов 52:271/52:272/
   52:273/52:261 для "Записаться" и 52:720/52:721/52:722/52:731 для
   "Получить консультацию") заголовок и note заканчиваются на ОДНОЙ И ТОЙ
   ЖЕ правой границе (напр. у "Записаться": "на просмотр" x=659+385=1044,
   note x=705+339=1044) — то есть они делят одну левую колонку, а поля
   формы стоят отдельной правой колонкой (x=1103, уже после note). Это
   ТОЧНО тот же приём "заголовок+note слева / поля справа", что уже сделан
   для 768-1199 чуть ниже — переносим его и сюда через display:contents +
   явную раскладку по сетке 2x2, вместо старой попытки удержать note
   внутри .lead-form (справа) и бороться с переносами через flex. */
@media (min-width:1200px){
  .cta-band .wrap{
    display:flex;
    align-items:flex-start;
    gap:clamp(40px,4.2vw,76px);
  }
  /* Колонка подписи: 220px — это её ширина ИМЕННО на 1740 (см. разбор
     выше), но сам текст ("строительной" — самое длинное из 3 слов, по
     18px) реально помещается уже в ~142px. Отдавать 220px везде до самого
     низа диапазона было слишком щедро именно там, где карточке отчаянно
     не хватает места — поэтому ширина колонки сама сужается к 1200px
     (~156px, с запасом) и линейно доходит до тех же 220px к 1740, откуда
     её и не превышает (max клампа). */
  .cta-band .cta-band__label{
    flex:0 0 clamp(150px, 13vw, 220px);
    margin-bottom:0;
  }
  .cta-band .cta-card{
    flex:1 1 auto;
    min-width:0;
    display:grid;
    /* Левая колонка — minmax(0,1fr) сжимал её независимо от контента, и на
       1200px "на просмотр"/"консультацию" переносились по словам ещё до
       того, как реально не хватало места. minmax(min-content,1fr) не
       спасает: min-content для инлайн-контента разрешает перенос по
       ЛЮБОМУ пробелу (у него нет понятия "не переносить эту конкретную
       строку"), поэтому трек всё равно ужимался до ширины одного слова.
       Явно измерил (Playwright) натуральную ширину худшей по длине
       второй строки — "консультацию" при 47px (1200) и 53.75px (1740,
       то есть по формуле --fs-h1 для этого диапазона) — и завожу её как
       нижнюю границу трека (линейная интерполяция между двумя точками,
       + ~8px запас): 368→376px на 1200, 417→425px на 1740.

       Правая колонка (поля формы) — minmax(...,300px) — до 1230px
       упирается в свой нижний предел одновременно с тем, как левая
       колонка тоже прижата к своему минимуму, и сумма обеих колонок с
       зазором на 1200px оказывается на несколько px больше, чем реально
       есть места в карточке — из-за этого поля/кнопка "Оставить заявку"
       вылезали за правый край оранжевого/тёмного блока (замерено: до
       3.3px на 1200px, сходит к 0 к 1230px). Собственный минимальный
       контент кнопки "Оставить заявку" (текст+иконка) — всего ~185px,
       так что нижний предел 240px даёт большой запас чисто под макет, а
       не под контент — опускаю его до 232px (8px), это гарантированно
       убирает вылезание с запасом и не отражается на макете при 1740
       (где колонка и так намного шире своего минимума). */
    grid-template-columns:minmax(clamp(376px, 267px + 9.07vw, 425px), 1fr) minmax(232px,300px);
    column-gap:clamp(24px,3vw,60px);
    row-gap:12px;
    align-items:start;
  }
  .cta-band .cta-card__text{ display:contents; }
  .cta-band .cta-card__text h2{ grid-column:1; grid-row:1; }
  .cta-band .lead-form{ display:contents; }
  .cta-band .lead-form__note{ grid-column:1; grid-row:2; }
  .cta-band .lead-form__fields{ grid-column:2; grid-row:1; }
  .cta-band .lead-form__submit{ grid-column:2; grid-row:2; align-self:start; }
}

/* =========================================================
   Расположение
   ========================================================= */
.location{ padding-block:var(--space-section) var(--space-lg); }
.location__map{ position:relative; border-radius:var(--radius-lg); overflow:hidden; margin-inline:var(--container-pad); }
/* <picture> оборачивает <img>, чтобы разные диапазоны могли подставлять
   разный файл карты (см. 3 <source>/<img> в разметке) — сама подстановка
   картинки под ширину экрана к CSS не относится, но display:contents
   здесь обязателен: без него <picture> становится обычным inline-боксом
   и "экранирует" вложенный <img> от всех правил ниже, которые нацелены
   на .location__map img и (на 360-767) требуют, чтобы именно <img> был
   ПРЯМЫМ grid-элементом .location__map (grid-column/grid-row работают
   только у прямых детей грид-контейнера). display:contents убирает бокс
   <picture> из дерева раскладки, и <img> ведёт себя так, как будто лежит
   в .location__map напрямую — все селекторы и grid-правила продолжают
   работать без изменений. */
.location__map picture{ display:contents; }
.location__map img{ width:100%; height:auto; display:block; }
/* заголовок "Расположение" лежит поверх карты, примерно на 37% высоты сверху — как в макете.
   Отдельной стрелки-декора рядом с текстом в макете нет — стрелка нарисована прямо на
   изображении карты, поэтому здесь остаётся только текст (без .long-arrow). */
.location__title{
  position:absolute; right:6%; top:37%;
  margin:0;
}
/* Стрелка-декор рядом с заголовком нужна ТОЛЬКО на 360-767 (см. ниже) —
   на десктопе/1200-1740 заголовок лежит поверх карты без неё, как раньше.
   Без этого правила .long-arrow (см. выше) сделал бы её видимой по
   умолчанию на всех ширинах. */
.location__arrow{ display:none; }

/* =========================================================
   Тёмная зона: Благоустройство + Материалы + CTA
   ========================================================= */
.dark-zone{ background:var(--black); }

.amenities{ padding-block:var(--space-section) 0; }
/* .amenity-row теперь grid с ТРЕМЯ детьми (медиа/текст/акцент — акцент
   раньше лежал последним ребёнком внутри .amenity-row__text, но так его
   было невозможно визуально переставить независимо от текста на 360-767,
   где по Figma порядок совсем другой: заголовок+текст, потом большое
   фото, и только потом акцент, см. @media ниже). Медиа и текст — каждый
   в своей колонке (1 и 2, или наоборот в --reverse), акцент явно кладём
   В ТУ ЖЕ колонку и строку, что текст (или медиа в --reverse) — тем же
   приёмом "наложения" в grid, каким раньше служила вложенность во flex. */
.amenity-row{
  display:grid; grid-template-columns:1.1fr 1fr; grid-template-rows:auto;
  gap:var(--space-lg);
  align-items:center;
  padding-block:var(--space-md);
}
.amenity-row__media{ grid-column:1; grid-row:1; }
.amenity-row__text{ grid-column:2; grid-row:1; }
.amenity-row--reverse{ grid-template-columns:1fr 1.1fr; }
.amenity-row--reverse .amenity-row__media{ grid-column:2; }
.amenity-row--reverse .amenity-row__text{ grid-column:1; }
.amenity-row__media img{ width:100%; aspect-ratio:825/448; object-fit:cover; border-radius:var(--radius-lg); }
.amenity-row__text{ display:flex; flex-direction:column; gap:var(--space-sm); max-width:720px; }
.amenity-row__accent{
  grid-row:1; align-self:end;
  width:clamp(150px,14.95vw,287px);
  aspect-ratio:287/120;
  object-fit:cover;
  border-radius:var(--radius-pill);
  box-shadow:0 14px 30px rgba(0,0,0,.35);
}
/* В обычных (не--reverse) рядах текстовая колонка справа (2) — акцентное
   фото туда же, прижато к правому краю колонки. В --reverse рядах текст
   слева (1) — акцент в ту же колонку, прижат к левому краю. */
.amenity-row:not(.amenity-row--reverse) .amenity-row__accent{ grid-column:2; justify-self:end; }
.amenity-row--reverse .amenity-row__accent{ grid-column:1; justify-self:start; }

.materials{ padding-block:var(--space-section); }
.materials .h1{ margin-bottom:var(--space-lg); }
.material-row{
  background:var(--bg); border-radius:var(--radius-xl);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-md);
  padding:clamp(8px,1vw,14px) clamp(20px,3vw,50px);
  margin-bottom:var(--space-sm);
}
.material-row__title{
  font-size:var(--fs-h2); font-weight:var(--fw-light); text-transform:uppercase; color:var(--black);
  flex:1 1 260px; line-height:1.1;
}
.material-row__body{ display:flex; align-items:center; gap:var(--space-md); flex:2 1 420px; flex-wrap:wrap; }
.material-row__swatch{ width:clamp(220px,27vw,460px); height:clamp(130px,13.5vw,205px); object-fit:cover; border-radius:var(--radius-xl); flex:none; }
.material-row__body .text{ flex:1 1 200px; color:var(--black); }

/* Ряд 2 ("Сохранение тепла") — единственный, где в HTML сначала текст,
   потом картинка (у соседних рядов 1 и 3 — наоборот). Пока всё влезает
   в 1 строку, порядок в DOM не важен визуально (flex расставляет по
   ширине). Но начиная с 1200-1740 этот блок переносится в 2 строки
   (см. @media ниже) — тогда порядок в DOM определяет и порядок сверху
   вниз, и без явного .order текст оказывался НАД картинкой, тогда как
   у рядов 1/3 картинка сверху. Фикс — только для 1200-1740, см. ниже. */

/* =========================================================
   Квартиры (планировки)
   ========================================================= */
.apartments{ padding-block:var(--space-section); }
.apartments__head{ margin-bottom:var(--space-lg); }
.apartments__foot{ display:grid; grid-template-columns: clamp(260px,20.7vw,398px) 1fr; gap:30px; align-items:center; }
.apartments__aside{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-lg); }
.apartments__note{ max-width:32ch; }

/* 3 карточки планировок должны ВСЕГДА стоять в один ряд (как в макете), а не съезжать
   по 2+1. Раньше ширина карточки была задана независимым clamp() с потолком 398px —
   на части ширин экрана сумма 3 карточек + отступов не влезала в 1fr-колонку и третья
   карточка переносилась вниз. Теперь карточки — flex:1 1 0, то есть всегда делят
   доступную ширину колонки поровну и гарантированно остаются в одну строку. */
.plan-track{
  display:flex; gap:30px; flex-wrap:wrap;
}
.plan-card{
  color:inherit; cursor:pointer;
  flex:1 1 0; min-width:180px;
  background:var(--white); border-radius:var(--radius-lg);
  padding:clamp(16px,2vw,30px); display:flex; flex-direction:column; align-items:center; gap:10px;
  box-shadow:0 10px 40px rgba(33,37,41,0.06);
}
/* Три планировки — разного "натурального" соотношения сторон (1-ком и
   2-ком: 716x670, шире; 3-ком: 578x670, уже/выше), а карточки одинаковой
   ширины (flex:1 1 0) — при простом width:100%;height:auto каждая картинка
   тянулась под СВОЙ формат, из-за чего низ (метка "N-ком, X м²") у каждой
   карточки оказывался на своей высоте (у 3-ком — заметно ниже, картинка
   выше). В Фигме (фрейм "Головна_1200-1740", карточки 52:741/52:746/52:751)
   у всех трёх карточек рамка под фото — ОДИНАКОВЫЕ 210x224 (соотношение
   210/224), а сама планировка вписана в неё БЕЗ обрезки (у площадей рядом
   с краями есть свои стены/подписи — cover обрезал бы часть плана).
   aspect-ratio задаёт одинаковую для всех трёх карточек "зону" под фото
   (масштabируется вместе с шириной карточки на любом брейкпоинте), а
   object-fit:contain вписывает каждую планировку целиком по центру этой
   зоны — 3-ком (уже эталонной рамки) даёт небольшие поля по бокам, 1-ком/
   2-ком (шире рамки) — небольшие поля сверху/снизу; в любом случае низ
   зоны и, соответственно, метка под фото — теперь на одном уровне у всех
   трёх карточек. Правка общая (без медиа-запроса) — иначе на десктопе и в
   мобильной карусели баг остаётся ровно тем же (плитки одной ширины были
   везде). */
.plan-card img{ width:100%; aspect-ratio:210/224; object-fit:contain; }
.plan-card__meta{ display:flex; align-items:center; gap:20px; white-space:nowrap; }
.plan-card__rooms{ font-size:var(--fs-text); font-weight:var(--fw-medium); color:var(--gray); }
.plan-card__area{ font-size:var(--fs-h4); font-weight:var(--fw-medium); color:var(--blue-text); text-transform:uppercase; }

.carousel-controls{ display:flex; align-items:center; gap:20px; }
.carousel-controls__count{ display:flex; align-items:baseline; gap:6px; font-size:var(--fs-h4); font-weight:var(--fw-medium); color:var(--black); }
.carousel-controls__count b{ font-weight:var(--fw-medium); }
.carousel-controls__count-total{ font-size:var(--fs-text); font-weight:var(--fw-regular); }
.carousel-controls__arrows{ display:flex; gap:15px; }

/* =========================================================
   Галерея
   ========================================================= */
.gallery{ padding-block:var(--space-section); }
.gallery__head{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-md); margin-bottom:var(--space-md); }
.gallery__track{
  display:flex; gap:30px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding-inline:var(--container-pad);
}
.gallery__track::-webkit-scrollbar{ display:none; }
.gallery__item{ scroll-snap-align:start; flex:0 0 clamp(320px,52vw,1000px); border-radius:var(--radius-lg); overflow:hidden; }
.gallery__item img{ width:100%; aspect-ratio:1000/520; object-fit:cover; }

/* =========================================================
   Ход строительства
   ========================================================= */
.progress{ padding-block:var(--space-section); }
.progress__head{ margin-bottom:var(--space-lg); }
.progress__grid{ display:grid; grid-template-columns:3.15fr 1fr; gap:var(--space-lg); align-items:start; }
/* .progress__media раньше содержал один статичный <img> — теперь это
   такая же карусель, как .gallery__track (та же JS в script.js, ищущая
   [data-carousel]/[data-carousel-item]), только .progress__item занимает
   ВСЮ ширину трека (flex:0 0 100%), т.к. по задумке в блоке "Ход
   строительства" видно ровно 1 фото за раз, а не несколько частично
   обрезанных карточек подряд, как в галерее. */
.progress__track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
}
.progress__track::-webkit-scrollbar{ display:none; }
.progress__item{ scroll-snap-align:start; flex:0 0 100%; min-width:0; }
.progress__media img{ width:100%; min-height:260px; aspect-ratio:1253/500; object-fit:cover; border-radius:var(--radius-lg); }
.progress__text{ display:flex; flex-direction:column; justify-content:flex-start; gap:var(--space-sm); }
.date-tag{ font-size:var(--fs-h2); font-weight:var(--fw-light); }
/* Описание раньше было в 1 короткое предложение (max-width:26ch хорошо
   смотрелся как узкая подпись рядом с широким фото); теперь текст на
   порядок длиннее, поэтому колонку больше не тянем по высоте фото
   (align-items:start выше вместо stretch — иначе длинный текст растягивал
   и саму картинку, ломая её aspect-ratio) и снимаем узкий предел ширины —
   реальную ширину строки всё равно задаёт колонка грида (1fr). */
.progress__note{ max-width:none; }

/* =========================================================
   О застройщике / Проекты
   ========================================================= */
.developer{ padding-block:var(--space-section); }
.developer__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-lg); align-items:start; margin-bottom:var(--space-section); }
.developer__text{ display:flex; flex-direction:column; gap:var(--space-md); }
.developer__media img{ width:100%; aspect-ratio:826/403; object-fit:cover; border-radius:var(--radius-lg); }

.projects__head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:var(--space-md); margin-bottom:var(--space-lg); }
.projects__desc{ max-width:46ch; }
.projects__viewport{ position:relative; }
.projects__track{
  display:flex; gap:30px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px;
}
.projects__track::-webkit-scrollbar{ display:none; }
.project-card{ scroll-snap-align:start; flex:0 0 clamp(200px,18vw,330px); display:flex; flex-direction:column; gap:var(--space-sm); }
.project-card:last-child{ opacity:0.4; }
.project-card__title{
  background:var(--accent); color:var(--white); text-align:center; text-transform:uppercase;
  border-radius:var(--radius-pill); padding:14px 20px; font-size:var(--fs-text); font-weight:var(--fw-medium);
}
.project-card img{ width:100%; aspect-ratio:398/363; object-fit:cover; border-radius:var(--radius-lg); }
.project-card__desc{ font-size:var(--fs-text); color:#000814; }
/* стрелки лежат прямо на фото карточек, по вертикальному центру изображения */
.projects .carousel-controls{
  position:absolute; left:0; right:0;
  top:clamp(58px,6vw,94px); bottom:clamp(58px,6.4vw,100px);
  display:flex; align-items:center; justify-content:space-between;
  gap:0; pointer-events:none;
}
.projects .carousel-controls .round-arrow-btn{ pointer-events:auto; box-shadow:0 10px 26px rgba(0,0,0,.25); }
.projects .carousel-controls__arrows{ display:contents; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ background:var(--black); color:var(--white); padding-top:var(--space-section); }
.site-footer__grid{
  display:grid; grid-template-columns: 1.74fr 1fr 5.56fr; gap:var(--space-lg);
  padding-bottom:var(--space-lg);
}
.site-footer__col{ display:flex; flex-direction:column; gap:var(--space-md); }
.site-footer__phone{ font-size:var(--fs-h4); font-weight:var(--fw-medium); }
/* Компьютерные брейкпоинты (1200+): телефон в футере всегда в одну строку.
   Раньше колонка с контактами была уже самого номера, и он переносился
   ("… 32 -" / "65"). Колонка (auto-min у fr-трека) теперь растёт до ширины
   номера, а карточка справа отдаёт ей это место. */
@media (min-width:1200px){
  .site-footer__phone{ white-space:nowrap; }
}
.site-footer__address{ display:flex; align-items:center; gap:10px; font-size:var(--fs-text); text-transform:uppercase; max-width:280px; }
.icon-on-dark{ filter:brightness(0) invert(1); }
.site-footer__social{ display:flex; gap:20px; }
.social-btn{
  width:60px; height:60px; border-radius:50%; background:var(--accent);
  display:flex; align-items:center; justify-content:center;
}
.social-btn:hover{ opacity:.85; }

.site-footer__nav{ display:flex; flex-direction:column; gap:12px; font-size:var(--fs-h3); font-weight:var(--fw-medium); }
.site-footer__nav a:hover{ color:var(--accent); }

.site-footer__cta .cta-card{
  background:var(--bg); flex-direction:row; flex-wrap:nowrap; align-items:center;
  padding:clamp(20px,3.1vw,60px); gap:var(--space-lg);
}
.site-footer__cta .cta-card__text{ gap:6px; }
.site-footer__cta .cta-card__text .h2{ color:var(--black); font-size:var(--fs-h2); }
.site-footer__cta .cta-card__text .text{ color:var(--black); }
.site-footer__cta .lead-form{ gap:12px; }
.site-footer__cta .lead-form__fields{ gap:10px; }
.site-footer__cta .lead-form__input{ height:48px; }
.site-footer__cta .lead-form__submit{ height:48px; }

.site-footer__bottom{
  border-top:1px solid rgba(255,255,255,0.15);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
  padding-block:var(--space-md);
  font-size:var(--fs-text);
}
.site-footer__legal{ display:flex; align-items:center; gap:16px; }
.site-footer__powered{ opacity:.85; }
.site-footer__top img{ width:24px; height:24px; }

/* ================================================================
   БРЕЙКПОИНТЫ 1200-1740 / 768-1199 / 360-767
   ------------------------------------------------------------------
   Источник: отдельный Figma-файл "Ribat 2.0 (breakpoints)" —
   НЕ тот файл, из которого собран десктоп 1740-1920 (тот выше этой
   секции и полностью не меняется, зафиксирован по требованию клиента).
   У каждого диапазона своя типографика/отступы из Figma, а не просто
   продолжение fluid-формул десктопа — местами значения намеренно
   "падают" прямо на границе 1740px. Правила ниже идут от широкого
   диапазона к узкому, поэтому на самых узких экранах особенности
   всех вложенных блоков складываются (обычное каскадное поведение
   max-width медиазапросов).
   ================================================================ */

/* ---------- ТОКЕНЫ: 1200 - 1740px ---------- */
@media (max-width: 1740px){
  :root{
    --fs-h1: clamp(47px, 32px + 1.25vw, 54px);
    --fs-h2: clamp(32px, 26px + 0.52vw, 35px);
    --fs-h4: clamp(22px, 17px + 0.42vw, 24px);
    --fs-text: 18px;
    --fs-text-sm: 16px;
    --fs-button: 14px;
    --fs-menu: 10px;

    /* Боковое поле контейнера (.wrap, хедер, футер, карта, карусели — всё
       берёт его из этой одной переменной, поэтому края везде совпадают).
       Было clamp(148px, 28.12vw - 189px, 300px): на 1200px оставалось по
       148px с каждой стороны, т.е. контент занимал всего 904px и блоки
       получались сжатыми. Теперь на 1200px поле — 60px (контент 1080px),
       а к 1740px оно плавно доходит до 250px (контент 1240px). Прямая через
       две точки: (1200; 60) и (1740; 250). */
    --container-pad: clamp(60px, 35.185vw - 362.22px, 250px);
    --radius-lg: 25px;
  }
}

/* ---------- 1200 - 1740px: ОБЕ пилюли всегда в 1 строку ----------
   Предыдущая версия этого правила прятала контакт-пилюлю (display:none)
   на этом диапазоне — это было ОШИБКОЙ: клиент явно подтвердил, что
   нав-пилюля и контакт-пилюля (телефон+кнопки) должны вести себя так
   же, как на десктопе — обе всегда видны, в одну строку. Раньше они
   переносились на 2 строки просто потому, что унаследованные от
   десктопа зазоры/паддинги были рассчитаны на десктопную ширину
   .site-header__inner, а не на более узкую (1200-1740). Здесь их
   уменьшаем, чтобы обе пилюли гарантированно помещались в 1 ряд на
   всём диапазоне, а не прячем контент. */
@media (max-width:1740px) and (min-width:1200px){
  /* align-items:stretch — обе пилюли одной высоты (левая раньше была ниже
     правой). Левая пилюля растягивается (flex:1) до контакт-пилюли — между
     ними остаётся только обычный зазор .site-header__inner, а ссылки внутри
     равномерно распределяются (space-between). Размер шрифта --nav-fs
     подобран так, чтобы ссылки целиком помещались с небольшим запасом на
     всём диапазоне (запас и уходит в разрежение зазоров между ссылками);
     логотип, паддинги и минимальные зазоры заданы в em и растут вместе
     со шрифтом. */
  .site-header__inner{ gap:clamp(8px,1vw,16px); flex-wrap:nowrap; align-items:stretch; }
  .site-header__nav-pill{ --nav-fs:calc(4.14px + 0.574vw); font-size:var(--nav-fs); flex:1 1 auto; min-width:0; padding:10px 1.2em; gap:.7em; }
  .site-header__nav-pill .site-nav__link{ font-size:1em; }
  .site-header__nav-pill .site-header__mark{ width:2.6em; }
  .site-nav{ gap:.6em; flex:1 1 auto; justify-content:space-between; }
  .site-header__contact-pill{ padding:8px 8px 8px clamp(10px,0.8vw,16px); gap:clamp(6px,0.6vw,12px); }
  .site-header__actions{ gap:6px; }
  .site-header__actions .pill-btn{ padding:9px 9px 9px 14px; gap:6px; }
  .site-header__phone{ font-size:15px; }
}

/* ---------- ТОКЕНЫ: 768 - 1199px ---------- */
@media (max-width: 1199px){
  :root{
    --fs-h1: clamp(41px, 31px + 1.32vw, 47px);
    --fs-h2: clamp(30px, 25px + 0.58vw, 32px);
    --fs-h4: 20px;
    --fs-text: 18px;
    --fs-text-sm: 16px;
    --fs-button: 14px;

    --container-pad: clamp(30px, 27.41vw - 181px, 148px);
    --radius-lg: 25px;
  }
}

/* ---------- ТОКЕНЫ: 360 - 767px ---------- */
@media (max-width: 767px){
  :root{
    --fs-h1: clamp(27px, 14px + 3.57vw, 41px);
    --fs-h2: clamp(20px, 11px + 2.38vw, 30px);
    --fs-h4: 20px;
    --fs-text: clamp(13px, 8.6px + 1.23vw, 18px);
    --fs-text-sm: clamp(14px, 12.2px + 0.49vw, 16px);
    --fs-button: clamp(12px, 10.2px + 0.49vw, 14px);

    --container-pad: clamp(20px, 2.38vw + 11px, 30px);
    --radius-lg: 30px;
    --space-section: 60px;
  }
}

/* ================================================================
   ХЕДЕР
   ================================================================ */
/* Бургер-режим нав-пилюли — порог 1199px, т.е. активен только на
   768-1199 и 360-767 (на самой узкой ширине его перекрывает своя
   единая .site-header__mobile-pill, см. ниже). На 1200-1740 нав-пилюля
   всегда показывает полный список ссылок в 1 строку без бургера —
   в этом Figma-фрейме бургера в хедере нет вообще (см. блок с
   .site-header__contact-pill{display:none} выше). Раньше порог был
   1360px (замерен для десктопной ширины пилюль), из-за чего часть
   диапазона 1200-1740 (1200-1360) тоже уходила в бургер-режим —
   не совпадало с Figma и создавало лишний повод для переноса пилюль.
   Контакт-пилюля (телефон+кнопки) на 768-1199 остаётся видимой всегда —
   по явному требованию клиента "навбар всегда с тобой" (это НЕ относится
   к 1200-1740, где контакт-пилюли в хедере нет вообще, см. выше). */
@media (max-width: 1199px){
  .site-header__burger{
    display:flex; flex-direction:row; align-items:center; gap:10px;
    border:1px solid var(--black); border-radius:var(--radius-pill);
    background:none; padding:9px 18px 9px 16px;
    /* .site-nav (ниже) — position:fixed с z-index:90 и родительский .site-header__nav-pill
       намеренно НЕ получает свой z-index (иначе .site-nav оказался бы заперт в его
       стекинг-контексте и не мог бы перекрывать остальной контент страницы) — поэтому
       кнопка-триггер поднимается СВОИМ z-index, иначе открытая панель перекрывает её
       и второй клик (закрыть) не проходит. */
    position:relative; z-index:91;
  }
  .site-header__burger-label{ display:inline-block; font-size:var(--fs-button); font-weight:var(--fw-regular); color:var(--black); line-height:1; white-space:nowrap; }

  /* Инлайновая версия ссылок внутри пилюли скрывается — на этих ширинах
     используется отдельная #nav-overlay панель (см. ниже) вместо неё. */
  .site-nav{ display:none; }

  /* Полноэкранная панель меню — крупные центрированные пункты (богаче
     старого компактного дропдауна), поверх контента, но под пилюлями
     хедера — обе остаются видны и нажимаемы, пока меню открыто, как и
     просил клиент ("навбар всегда с тобой"). */
  .nav-overlay{
    display:none; position:fixed; inset:0;
    align-items:center; justify-content:center;
    background:var(--bg);
    z-index:90;
    padding:var(--header-clearance) 24px 40px;
  }
  .nav-overlay.is-open{ display:flex; }
  .nav-overlay__list{
    display:flex; flex-direction:column; align-items:center;
    gap:clamp(24px,4vw,50px);
  }
  .nav-overlay .site-nav__link{
    padding:0; width:auto; text-align:center;
    font-size:clamp(1.125rem,2.2vw,1.375rem); font-weight:var(--fw-medium);
    letter-spacing:0.02em;
  }
  /* Контакт-пилюля (телефон+кнопки) — сиблинг нав-пилюли, свободно может
     получить свой z-index без риска запереть что-либо внутри чужого
     стекинг-контекста, поэтому поднимаем её целиком, чтобы оставалась
     кликабельной поверх открытой #nav-overlay. */
  .site-header__contact-pill{ position:relative; z-index:91; }
}
body.nav-open{ overflow:hidden; }

/* Консолидированная пилюля 360-767px: логотип + телефон + кнопка "Меню"
   (таблетка поменьше). CTA-кнопки на этой ширине живут под фото героя
   (см. .hero__mobile-cta) — по требованию клиента "слегка отходим от
   Figma" именно в 768-1199 (там кнопки остаются в хедере), а на самой
   узкой ширине следуем макету буквально. */
.site-header__mobile-pill{ display:none; }
@media (max-width: 767px){
  .site-header__nav-pill, .site-header__contact-pill{ display:none; }
  .site-header__mobile-pill{
    display:flex; align-items:center; justify-content:space-between;
    width:100%;
    gap:10px;
    background:rgba(255,255,255,0.9);
    -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
    border-radius:var(--radius-pill);
    padding:8px 8px 8px 15px;
    box-shadow:0 8px 30px rgba(33,37,41,0.06);
    /* тот же приём, что у .site-header__contact-pill выше — остаётся кликабельной
       поверх открытой полноэкранной .site-nav (z-index:90). */
    position:relative; z-index:91;
  }
  .site-header__phone--mobile{ font-size:11px; font-weight:var(--fw-regular); color:var(--black); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .site-header__burger--mobile{
    border:0; background:var(--bg); padding:8px 14px 8px 12px; flex:none;
  }
  .site-header__burger--mobile .site-header__burger-label{ font-size:11px; }
  .site-header__burger--mobile .site-header__burger-bars{ transform:scale(0.85); }
}

/* ================================================================
   HERO
   ================================================================ */
/* 1200-1740: раньше бейдж и чип-адрес стояли В ОДНУ строку (чип забирал
   остаток ширины через flex:1 1 auto). "ЖК NOVA RIBAT" заметно длиннее
   прежнего "ЖК RIBAT", и на более узких ширинах этого диапазона бейдж
   (flex:none, не сжимается) стал съедать почти всю ширину .hero__badges —
   чипу оставалось несколько пикселей, и его текст ломался по буквам
   вместо аккуратного переноса по словам. Вместо того чтобы и дальше
   ужимать чип до нечитаемого состояния, кладём его ПОД бейдж отдельной
   строкой (.hero__badges становится колонкой) — у обоих теперь есть вся
   ширина .hero__col, бейдж не сжимается, а чип-адрес переносится по
   словам как обычный текст, без графических артефактов. У бейджа
   дополнительно max-width:100% как страховка: если на самой узкой ширине
   диапазона (1200px) однострочный текст всё же не поместится, он сам
   аккуратно перенесётся на 2 строки внутри пилюли, а не вылезет за
   пределы колонки.
   Добавленная строка чипа увеличивает высоту .hero__col — компенсируем
   это, забрав немного высоты у зазоров МЕЖДУ строками колонки (бейджи /
   заголовок / строка "стрелка+текст" / блок "ипотека"), чтобы колонка
   суммарно осталась примерно той же высоты, что и раньше (низ по-прежнему
   подравнивается к низу фото через align-items:stretch + margin-top:auto
   на .hero__promo, см. ниже). */
@media (max-width:1740px) and (min-width:1200px){
  .hero__grid{ gap:clamp(20px, -2px + 1.85vw, 30px); align-items:stretch; }
  .hero__col{ gap:clamp(12px, 1.6vw, 28px); }

  /* Низ левой колонки (стрелка + пилюля "рассрочка от застройщика")
     должен заканчиваться вровень с низом фото — как в Figma (в этом
     фрейме оба элемента заканчиваются на одной высоте, y=704). Раньше
     .hero__grid имел align-items:start, поэтому колонка была ровно
     такой высоты, сколько занимал её контент — заметно МЕНЬШЕ высоты
     фото (у фото aspect-ratio, оно растёт с шириной колонки быстрее,
     чем высота текстового контента) — и низ колонки оказывался заметно
     выше низа фото. align-items:stretch выше растягивает .hero__col на
     высоту строки грида (= высоте фото, т.к. оно и так самый высокий
     элемент — для него это no-op), а margin-top:auto на последнем
     ребёнке (.hero__promo) отправляет именно его к низу появившегося
     свободного места — без изменения зазоров МЕЖДУ остальными
     элементами колонки (бейджи/заголовок/строка с пилюлей-текстом). */
  .hero__promo{ margin-top:auto; }

  /* Фото героя не должно выходить за правый край контейнера. Раньше его
     размер задавал только aspect-ratio, а .hero__grid здесь растягивает
     ячейки по высоте (align-items:stretch, см. выше) — и когда левая
     колонка становилась выше фото (с ~1320px и до 1740px), фото тянулось
     вверх вместе с ней, а ширину пересчитывало обратно по aspect-ratio —
     в итоге оно становилось шире своей колонки и вылезало за правый край
     контейнера (на 1740px — на 58px). Теперь соотношение 826:849 задаёт
     только МИНИМАЛЬНУЮ высоту (через ::before с padding-top в процентах
     от ширины), а ширина всегда равна колонке грида; если колонка выше —
     фото растёт по высоте, а object-fit:cover чуть подрезает края. */
  .hero__photo{ aspect-ratio:auto; }
  .hero__photo::before{ content:""; display:block; padding-top:calc(849 / 826 * 100%); }
  .hero__photo-img{ position:absolute; inset:0; }

  /* Бейдж "ЖК NOVA RIBAT" — компактный горизонтальный паддинг (вместо
     базового) сохраняем и здесь: даже стоя один в своей строке, на самой
     узкой ширине диапазона (1200px) лишние пиксели паддинга приближали
     бы его к max-width:100% и увеличивали риск переноса в 2 строки без
     необходимости. Чип теперь просто блочный элемент своей строки —
     ширина не подгоняется под соседа (соседа больше нет), text-wrap идёт
     по словам сам, без искусственного max-width, который на разных
     ширинах диапазона всё равно пришлось бы каждый раз пересчитывать. */
  .hero__badges{
    flex-direction:column; align-items:flex-start; flex-wrap:nowrap;
    gap:clamp(10px, 1.1vw, 16px);
  }
  .hero__badges .badge-pill{ flex:none; max-width:100%; padding:clamp(14px,1.8vw,24px) clamp(10px,1.3vw,16px); }
  .hero__badges .chip{ flex:none; max-width:min(100%, 440px); }

  .hero__row{ flex-wrap:nowrap; gap:clamp(6px, 0.8vw, 14px); }
  .hero__row .long-arrow{ flex:none; width:clamp(90px, 8.33vw, 185px); margin-inline:0 clamp(10px,1vw,14px); }
  .pill-text{ flex:1 1 auto; min-width:0; max-width:325px; }

  /* Заголовок героя ("Простор внутри / и красота снаружи") использует
     общий токен --fs-h1 (54px на 1740px) — на 1740 вторая строка ровно
     влезает в ширину .hero__col (550px), но .hero__col сужается быстрее,
     чем --fs-h1 (у него общая для всей страницы формула, не завязанная
     именно на ширину этой колонки) — поэтому уже на 1500px вторая строка
     переставала помещаться и переносилась сама, добавляя героям лишнюю
     3-ю строку и раздувая высоту колонки. Только у заголовка героя (не
     трогая сам --fs-h1 — он общий токен для заголовков всех секций)
     сужаем шрифт быстрее, вслед за .hero__col. */
  .hero__title{ font-size:clamp(43px, 18px + 2.05vw, 54px); }
}

/* 1741-1920 (десктоп, заморожен): узкий, точечный фикс под более длинный
   бренд "ЖК NOVA RIBAT" (было "ЖК RIBAT"). Без этого правила бейдж здесь
   наследует общий --fs-h1 (тот же токен, что и заголовки), который на
   этой границе скачком вырастает с 54px (на 1740px, конец предыдущего
   диапазона) до ~72.6px (на 1741px) — разрыв есть и без изменения текста,
   но с более длинным брендом расширившийся бейдж перестаёт помещаться в
   один ряд с чипом-адресом и чип переносится под бейдж отдельной строкой.
   Фикс продолжает ТОТ ЖЕ темп роста, что уже задан для бейджа в блоке
   1200-1740 (47px→54px), просто дальше до 1920px — сам --fs-h1 не трогаем
   (общий токен для заголовков всей страницы), меняем только локальный
   font-size бейджа в контексте .hero__badges, как и в блоке выше. Чип
   получает тот же приём, что и в 1200-1740 (гибкая ширина + перенос
   текста на 2 строки при нехватке места) вместо неограниченной ширины. */
@media (min-width:1741px){
  /* Низ левой колонки героя вровень с низом фото (как уже сделано на
     1200-1740): колонка растягивается на высоту строки грида, а свободное
     место делится ПОРОВНУ между блоками (бейджи / заголовок / стрелка с
     текстом / ипотека) через space-between — зазоры между ними чуть
     больше, а верх и низ колонки совпадают с верхом и низом фото.
     Фото при этом не должно раздуваться вширь от растяжения по высоте
     (aspect-ratio + stretch пересчитывали ширину), поэтому соотношение
     826:849 задано только как минимальная высота через ::before. */
  .hero__grid{ align-items:stretch; }
  .hero__col{ justify-content:space-between; }
  .hero__photo{ aspect-ratio:auto; }
  .hero__photo::before{ content:""; display:block; padding-top:calc(849 / 826 * 100%); }
  .hero__photo-img{ position:absolute; inset:0; }

  .hero__badges{ flex-wrap:nowrap; }
  .hero__badges .badge-pill{ flex:none; font-size:clamp(54px, -4px + 3.333vw, 60px); }
  .hero__badges .chip{ flex:1 1 auto; min-width:0; max-width:280px; }
}

/* Хедер на 1741+: левая пилюля — та же логика, что на 1200-1740 (тянется до
   контакт-пилюли, той же высоты, ссылки распределены по ширине). Шрифт —
   15px на 1741px (на 1740px там 14.1px; контейнер при этом скачком
   расширяется с 1240px до ~1520px, так что чуть более крупный шрифт
   уместен) и до 17px на 1920px; выше не растёт, т.к. контейнер дальше
   не расширяется. */
@media (min-width:1741px){
  .site-header__inner{ flex-wrap:nowrap; align-items:stretch; }
  .site-header__nav-pill{
    --nav-fs:clamp(15px, calc(15px + (100vw - 1741px) * 0.01117), 17px);
    font-size:var(--nav-fs); flex:1 1 auto; min-width:0; padding:10px 1.2em; gap:.7em;
  }
  .site-header__nav-pill .site-nav__link{ font-size:1em; }
  .site-header__nav-pill .site-header__mark{ width:2.6em; }
  .site-nav{ gap:.6em; flex:1 1 auto; justify-content:space-between; }
}

@media (max-width: 1199px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__photo{ order:-1; }
}

/* 768-1199: колонка героя (.hero__col) здесь показывается ПОЛНОСТЬЮ (это
   не 360-767, где она целиком скрыта), просто под фото вместо "рядом" —
   но т.к. .hero__col — обычная flex-колонка, все её строки по умолчанию
   прижимались к левому краю, и получалось скудно. По Figma для этого
   диапазона строки чередуются: бейдж+чип — по разным краям (space-between),
   стрелка+пилюля-текст — прижаты к правому краю (сама пилюля-текст
   остаётся как есть, просто вся строка уезжает вправо), блок "рассрочка"
   остаётся у левого края (как и было, без изменений). */
@media (max-width:1199px) and (min-width:768px){
  .hero__badges{ flex-wrap:nowrap; justify-content:space-between; }
  .hero__badges .badge-pill{ flex:none; }
  .hero__badges .chip{ flex:0 1 auto; min-width:0; }

  .hero__row{ flex-wrap:nowrap; justify-content:flex-end; }
  .pill-text{ flex:0 1 auto; min-width:0; }
}

.hero__mobile-overlay{ display:none; }
.hero__feature--mobile-only{ display:none; }
.hero__mobile-cta{ display:none; }

@media (max-width: 767px){
  /* Полная десктопная колонка героя (бейджи/заголовок/пилюля-текст/
     рассрочка) скрывается — на этой ширине Figma даёт совсем другой,
     более компактный набор элементов поверх и под фото. */
  .hero__badges, .hero__title, .hero__row, .hero__promo{ display:none; }
  .hero__col{ gap:0; }
  .hero__grid{ gap:20px; }

  .hero__photo{ aspect-ratio:340/460; }
  .hero__mobile-overlay{
    display:flex; flex-wrap:wrap; align-items:center; gap:5px;
    position:absolute; left:10px; top:10px; right:10px; z-index:2;
  }
  .hero__mobile-overlay .badge-pill{ padding:12px 16px; font-size:clamp(1.125rem,5vw,1.5rem); }
  .hero__mobile-overlay .chip{ background:var(--white); border-radius:var(--radius-pill); padding:8px 14px; font-size:12px; max-width:180px; }
  .hero__mobile-overlay .chip img{ width:20px; height:20px; }

  .hero__features{ left:10px; right:10px; bottom:10px; padding:20px 24px; }
  .hero__feature--mobile-only{ display:flex; }

  .hero__mobile-cta{ display:flex; flex-direction:column; gap:10px; }
  .hero__mobile-cta .pill-btn{ justify-content:center; width:100%; }
}

.pill-btn--outline{ background:transparent; color:var(--black); border:1px solid var(--black); }
.pill-btn--outline img{ filter:grayscale(1) brightness(.3); }

/* ================================================================
   О КОМПЛЕКСЕ
   ================================================================ */
/* 1200-1740: .complex__grid здесь остаётся базовой сеткой 1fr 1fr (не
   переопределялась ни разу) — таблетка .stat-row живёт в правой колонке
   шириной ровно в половину контейнера. Так было и до ребренда, но цифры
   тогда были короче; текущие "320/Квартир" и т.п. с базовыми
   зазором/паддингом (те же clamp(20px,3vw,50px) и clamp(...,3vw,...),
   что и в остальных диапазонах) уже не помещаются в 1 строку почти по
   всей ширине 1200-1740 — "5 Этажей" переносится на 2-ю строку, и таблетка
   визуально сжимается в узкий овал. Замерено плотным перебором (каждые
   10px, реальные ширины .stat через getBoundingClientRect): перенос идёт
   с 1200 до ~1370px включительно, с 1380px уже помещается само по себе.
   Числа/подписи и раскладка "число над подписью" не трогаем — как и в
   768-1199 ниже, ужимаем только зазор и внутренний паддинг таблетки, и
   только настолько, чтобы гарантированно закрыть дефицит с запасом.
   Формула — линейная интерполяция от заниженного значения на 1200px к
   базовому к ~1400px — но обёрнута в min() с САМИМ базовым clamp(): это
   не косметика, а обязательная защита от переисправления. Без min()
   первая версия правки (без него) на части диапазона 1400-1600px давала
   ЗАЗОР БОЛЬШЕ базового (интерполяция не обязана идти строго под базовой
   кривой всюду) — и это НОВОЕ увеличение само по себе провоцировало
   перенос там, где раньше (с базовыми значениями) всё помещалось
   (поймано плотным перебором после первой попытки). min() гарантирует,
   что результат физически не может превысить базовое значение ни при
   какой ширине — то есть выше ~1400px правило гарантированно не меняет
   то, что уже работало, независимо от точности подбора коэффициентов. */
@media (max-width:1740px) and (min-width:1200px){
  .stat-row{
    gap: min(clamp(20px,3vw,50px), clamp(24px, -49px + 6.5vw, 50px));
    padding: clamp(16px, 2vw, 30px) min(clamp(24px,3vw,50px), clamp(24px, -42px + 6vw, 50px));
  }
}
@media (max-width: 1199px){
  .complex__grid{ grid-template-columns:1fr; }
  .complex__col:first-child{ gap:var(--space-sm); }
  .complex__accent{ width:min(261px,70%); }
}
/* 768-1199: по Figma порядок здесь "заголовок → статистика → описание →
   фото" (фото — ПОСЛЕ абзаца текста, прижато к правому краю), а не
   "заголовок → фото" (текущая разметка держит .complex__accent в одной
   колонке с заголовком, см. .complex__col выше). Чтобы не переносить
   картинку в HTML (риск для замороженного десктопа и для 360-767, где
   тот же .complex__col используется как есть и текущее положение фото
   там намеренно не трогаем — не входит в эту правку), "распрямляем"
   обе .complex__col через display:contents: их дети становятся прямыми
   элементами грида .complex__grid (который на этой ширине уже в 1
   колонку, см. правило выше) и переставляются через order — без
   изменений в разметке. */
/* 768-1199: заголовок "О комплексе"+стрелка и таблетка со статистикой
   должны стоять в ОДНУ строку рядом (заголовок слева, таблетка справа,
   растягиваясь до правого края) — а не друг под другом, как было раньше.
   .stat при этом остаётся как на всех остальных диапазонах (число НАД
   подписью, flex-direction:column, см. базовое правило .stat выше) —
   внутреннее наполнение таблетки не менялось и меняться не должно.
   Ставим .h1 и .stat-row явно в 1-ю строку грида, каждый в свою колонку
   (первая — по содержимому, вторая — остаток ширины), а описание и фото
   — отдельными строками ниже, во всю ширину, как и было. */
@media (max-width:1199px) and (min-width:768px){
  .complex__col{ display:contents; }
  .complex__grid{
    grid-template-columns:max-content 1fr;
    align-items:center;
    row-gap:var(--space-md);
  }
  .complex__grid .h1{ grid-column:1; grid-row:1; }
  .complex__grid .stat-row{ grid-column:2; grid-row:1; }
  .complex__grid .complex__desc{ grid-column:1 / -1; grid-row:2; margin-bottom:0; }
  .complex__grid .complex__accent{
    grid-column:1 / -1; grid-row:3; justify-self:end; margin-top:var(--space-sm);
    width:min(261px,36%);
  }

  /* Таблетка теперь делит строку с заголовком — ширины у неё заметно
     меньше, чем раньше (когда она одна занимала всю строку целиком), и
     с базовыми зазором/паддингом 4 показателя перестают помещаться в 1
     строку и переносятся. Числа и подписи не трогаем (их размер и
     расположение "число над подписью" — правильные, как и везде на
     сайте) — ужимаем только зазор между показателями и внутренний
     паддинг таблетки, этого с запасом хватает на всём диапазоне
     (проверено плотным перебором). */
  .stat-row{
    gap:clamp(8px, 1.2vw, 18px);
    padding:clamp(12px, 1.4vw, 22px) clamp(14px, 2vw, 26px);
  }
}
@media (max-width: 767px){
  /* Аккцентное фото рядом с заголовком (heading, затем accent) — точный порядок
     "заголовок → статистика → описание → фото" из Figma потребовал бы выносить
     .complex__accent из его текущей колонки отдельным DOM-элементом (риск для
     замороженного десктопа, где .complex__col уже используется как есть),
     поэтому фото остаётся у заголовка — читается так же хорошо. */
  .complex__accent{ width:min(220px,60%); margin-top:8px; }
  .stat-row{ gap:16px; padding:16px 20px; justify-content:space-between; }
}

/* ================================================================
   CTA-баннеры (Записаться на просмотр / Консультация)
   ================================================================ */
/* 768-1199: карточка "Получить консультацию" (после материалов) ловила
   flex-wrap у .cta-card (базовое правило ниже) и переносила .lead-form
   на отдельную строку под заголовком — раздувая карточку по высоте и
   оставляя пустое место сбоку. У соседней "Записаться на просмотр" тот
   же .cta-card не переносится ТОЛЬКО потому, что там короче текст
   заголовка ("Записаться/на просмотр" уже, чем "Получить/консультацию" —
   слово "консультацию" длиннее). Правильный фикс — не подгонять под
   конкретный текст, а сделать перенос принципиально невозможным на этом
   диапазоне (запрещаем wrap и разрешаем обоим детям сжиматься ниже
   базового max-width, как уже сделано в двух других рабочих карточках
   этой же ширины — .cta-card--light в футере и т.п.). */
@media (max-width:1199px) and (min-width:768px){
  .cta-card{ flex-wrap:nowrap; }
  .cta-card__text{ flex:1 1 auto; min-width:0; }
  .lead-form{ flex:1 1 260px; min-width:0; }
}
/* 768-1199, только .cta-band (не футер и не модалка "Консультация" — их
   .lead-form не содержит .lead-form__note, поэтому их эта правка не
   затрагивает в принципе): .lead-form__note ("Заполните форму и мы
   перезвоним вам.") — первый ребёнок <form class="lead-form">, то есть
   структурно всегда принадлежал "правой" колонке (та же .lead-form, что
   и поля/кнопка). При flex-запрете переноса (правило выше) это стало
   заметно — note визуально уезжает к полям формы, хотя должен читаться
   вместе с левым заголовком. Разбираем .cta-card__text и .lead-form как
   display:contents (тот же приём, что и в .material-row__body/.complex__col
   выше) и расставляем 4 элемента явной CSS-сеткой 2x2: заголовок и note —
   левая колонка (шапка/подпись), поля и кнopka — правая. DOM не трогаем —
   .lead-form остаётся общим для всех карточек и модалки. */
@media (max-width:1199px) and (min-width:768px){
  .cta-band .cta-card{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(220px,260px);
    column-gap:clamp(24px,4vw,60px);
    row-gap:12px;
    align-items:start;
  }
  .cta-band .cta-card__text{ display:contents; }
  .cta-band .cta-card__text h2{ grid-column:1; grid-row:1; }
  .cta-band .lead-form{ display:contents; }
  .cta-band .lead-form__note{ grid-column:1; grid-row:2; }
  .cta-band .lead-form__fields{ grid-column:2; grid-row:1; }
  .cta-band .lead-form__submit{ grid-column:2; grid-row:2; align-self:start; }
}
@media (max-width: 767px){
  .cta-band__label{ display:none; }
  .cta-card{ flex-direction:column; align-items:center; text-align:center; gap:20px; padding:30px; }
  .cta-card__text{ align-items:center; text-align:center; max-width:none; }
  .lead-form{ max-width:280px; align-items:center; }

  /* align-items:center выше (нужен, чтобы .lead-form не растягивался
     шире max-width:280px) попутно ломает "растягивание на всю ширину"
     и для полей/кнопки внутри — без него они брали ширину только от
     .lead-form (у которого есть явный width:100%), а с align-items:center
     сами перестали наследовать эту ширину и садились на свой служебный
     минимум (браузерная ширина инпута ~170-190px), из-за чего кнопка
     "Оставить заявку" сжималась настолько, что стрелка наезжала на
     текст. Сами карточки (.cta-card/.site-footer__cta) не трогаем —
     только поля и кнопку внутри уже существующей ширины формы. Правило
     общее для всех .lead-form на странице (все 3 карточки + модалка
     "Консультация" используют один и тот же класс). */
  .lead-form__fields{ width:100%; }
  .lead-form__input, .lead-form__submit{ width:100%; }
}

/* ================================================================
   РАСПОЛОЖЕНИЕ
   ================================================================ */
/* right:6% (базовое значение, общее с десктопом) на этом диапазоне почти
   наезжает на нарисованную на самой картинке стрелку — карта та же,
   что на десктопе, но шрифт заголовка (--fs-h1 в этом диапазоне) сужается
   медленнее, чем ширина .location__map, поэтому лишнего места справа
   становится меньше и заголовок "наезжает" на кончик стрелки на нижней
   границе диапазона (сильнее всего на 1200px). Просто отодвигаем дальше
   от правого края. */
@media (max-width:1740px) and (min-width:1200px){
  .location__title{ right:11%; font-size:clamp(30px, 10px + 1.7vw, 44px); }
}

@media (max-width: 767px){
  /* На этой ширине состав другой, чем на десктопе/1200-1740: заголовок
     не лежит поверх карты — маленькая стрелка-иконка и "Расположение"
     стоят СВЕРХУ, отдельной строкой, а сама карта — ниже, растянутая
     почти во весь экран (без боковых отступов, крупнее и "ближе", чем
     раньше, когда её сжимал margin-inline:var(--container-pad)) и
     обрезанная по высоте (та же картинка, что на остальных диапазонах,
     но у неё широкие горизонтальные пропорции — при показе "как есть"
     на узком экране она получалась совсем невысокой и "терялась").
     Стрелка и заголовок теперь лежат в общей обёртке .location__heading
     (нужна и для 768-1199 ниже, см. там) — здесь она сама становится
     grid-элементом 1-й строки, а стрелка+заголовок внутри неё — обычный
     flex-ряд (сама .location__map остаётся grid-контейнером на 2 строки:
     1-я — стрелка+заголовок, 2-я — картинка на всю ширину). */
  .location{ padding-block:var(--space-section) 0; }
  .location__map{
    display:grid; grid-template-columns:1fr; grid-template-rows:auto auto;
    row-gap:16px;
    margin-inline:0; border-radius:0;
    /* паддинг контейнера — держит стрелку+заголовок (1-я строка) на том же
       отступе, что и остальной контент секций; картинка (2-я строка) этот
       паддинг сама себе компенсирует ниже, чтобы остаться "во весь экран". */
    padding-inline:var(--container-pad);
  }
  .location__heading{ grid-column:1; grid-row:1; display:flex; align-items:center; gap:14px; }
  .location__arrow{ display:inline-block; width:40px; margin-inline:0; }
  .location__title{ position:static; margin:0; }
  .location__map img{
    grid-column:1; grid-row:2;
    margin-inline:calc(-1 * var(--container-pad));
    width:calc(100% + 2 * var(--container-pad));
    max-width:none;
    aspect-ratio:340/250; object-fit:cover; border-radius:var(--radius-lg);
  }
}

/* 768-1199: как на десктопе/1200-1740, заголовок лежит ПОВЕРХ карты (а не
   отдельной строкой сверху, как на 360-767 выше) — но в этом диапазоне
   рядом с "Расположение" ещё и стрелка-иконка (на десктопе/1200-1740 её
   нет: там стрелка нарисована прямо на фотографии карты, см. комментарий
   у .location__arrow{display:none} в начале файла). Обе новые картинки
   карты (мобильная и здесь, планшетная) — уже БЕЗ нарисованной стрелки,
   поэтому её рисуем сами через .long-arrow, как и на 360-767. */
@media (max-width:1199px) and (min-width:768px){
  .location__heading{
    position:absolute; top:39%; right:6%;
    display:flex; align-items:center;
  }
  .location__arrow{ display:inline-block; width:clamp(50px,6.5vw,80px); }
  .location__title{ position:static; margin:0; }
}

/* ================================================================
   Тёмная зона: Благоустройство + Материалы
   ================================================================ */
/* На 1200-1740 .material-row__body (картинка+текст) переносится в 2 строки
   у ВСЕХ 3 рядов, т.к. картинка+текст+зазор не помещаются в отведённую
   ширину — это ожидаемо и само по себе не баг (пользователь его не
   отмечал). У рядов 1 и 3 в HTML картинка идёт первой, поэтому при переносе
   она и оказывается сверху. У ряда 2 в HTML порядок обратный (сначала
   текст) — из-за этого при переносе текст оказывался НАД картинкой,
   не как у соседей. Явно переставляем порядок только для ряда 2. */
@media (max-width:1740px) and (min-width:1200px){
  .material-row:nth-of-type(2) .material-row__body .text{ order:2; }
  .material-row:nth-of-type(2) .material-row__body .material-row__swatch{ order:1; }
}

/* 1200-1740: маленькое акцентное фото (.amenity-row__accent) наезжало на
   абзац текста в рядах с длинным описанием (например "Зелёные насаждения" —
   4-5 строк). Причина: .amenity-row__text наследовал align-items:center
   от .amenity-row (общее базовое правило, см. выше, десктоп его не трогаем)
   — при вертикальном центрировании внутри строки, чья высота задана
   большим фото (.amenity-row__media), НИЗ текстового блока подбирается
   тем ближе к низу строки (где лежит акцент, align-self:end), чем длиннее
   сам абзац, — у коротких описаний (напр. "Благоустройство") запас снизу
   большой, у длинных ("Зелёные насаждения") запас почти нулевой, отсюда
   и наезд именно на этом ряду. Сверено с координатами Figma для этого
   диапазона — там текст лежит у ВЕРХА своей строки (примерно постоянный
   отступ сверху независимо от числа строк абзаца), а не по центру, что
   само по себе и оставляет нужный зазор до акцента при любой длине
   текста. Меняем именно здесь (не в базовом правиле выше) — десктоп и
   768-1199 используют то же самое центрирование и не должны измениться. */
@media (max-width:1740px) and (min-width:1200px){
  .amenity-row__text{ align-self:start; }

  /* align-self:start выше устраняет наезд почти везде, кроме 2-го ряда
     ("Зелёные насаждения") — у него самое длинное описание, и даже
     начинаясь от верха строки, текст (align-self:start) + акцент
     (align-self:end) в сумме выше не помещаются в высоту строки,
     которую задаёт большое фото (эта высота — единственное, от чего
     зависят позиции и текста, и акцента, раз оба лежат в одной ячейке
     грида). Пробовал сдвигать акцент margin-bottom — это сдвигает его
     ВВЕРХ, к тексту, а не вниз (align-self:end и так уже прижимает
     акцент к самому низу ячейки — дальше вниз ему двигаться некуда),
     то есть только ухудшает наезд. Правильный фикс — сделать саму
     ячейку (высоту строки) выше именно в этом ряду: добавляем
     невидимый padding-bottom обёртке большого фото — оно остаётся
     тем же по размеру (высота карт­инки задаётся aspect-ratio, а не
     высотой обёртки), просто у строки появляется запас снизу, который
     достаётся тексту и акценту. Величина посчитана по фактическим
     обмерам (Playwright): дефицит (текст+акцент минус высота фото)
     составлял 53px на 1200px и 7px на 1740px — линейная clamp-формула
     между этими двумя точками с запасом перекрывает промежуточные
     ширины (там дефицит меньше линии, т.е. остаётся дополнительный
     запас, не только не хватает). */
  /* ПЕРЕСЧЁТ после расширения контейнера (поле на 1200px теперь 60px, а не
     148px): колонки стали шире, текст переносится на меньшее число строк,
     и дефицит высоты, из-за которого вводился этот padding (53px на 1200px),
     исчез — на 1200-1300px текст и акцент теперь помещаются без запаса,
     дефицит появляется только выше ~1350px и растёт до 7px на 1740px
     (замер Playwright каждые 50px; он нужен только у рядов с самым длинным
     текстом — 2-го "Зелёные насаждения" и 5-го "Зона барбекю"). Запас
     оставляет ~10px зазора между текстом и акцентом на всех ширинах. */
  .amenity-row__media{ padding-bottom:6px; }
  .amenity-row:nth-of-type(2) .amenity-row__media,
  .amenity-row:nth-of-type(5) .amenity-row__media{ padding-bottom:clamp(13px, 5.4vw - 77px, 30px); }
}

/* 1200-1740: фото+текст ("тело" ряда) должны начинаться с ОДНОЙ и той же
   горизонтальной позиции во всех 3 рядах материалов — как в Figma
   (там x одинаковый у рядов 1/2/3 независимо от длины заголовка). Раньше
   .material-row был flex с .material-row__title{flex:1 1 260px} —
   у flex-элемента с flex-grow>0 минимальная ширина по умолчанию равна
   min-content, поэтому самый длинный заголовок ("МЕТАЛЛОПЛАСТИКОВЫЕ
   5-КАМЕРНЫЕ ОКНА") раздвигал СВОЮ колонку шире, чем у соседних более
   коротких заголовков — тело сдвигалось вправо только в этом ряду,
   а у двух других оставалось левее. Грид с фиксированной 1-й колонкой
   гарантирует одинаковую ширину колонки заголовка (и, следовательно,
   одинаковый старт тела) вне зависимости от длины текста.

   Ширина колонки заголовка подобрана ПО САМОМУ ШИРОКОМУ заголовку (ряд 3,
   слово "МЕТАЛЛОПЛАСТИКОВЫЕ" в одну строку — оно и так уже стоит отдельной
   строкой через <br> в разметке, переносить/разбивать по слогам его
   нельзя). Более короткие заголовки рядов 1-2 просто оставляют больше
   свободного места справа внутри своей (той же по ширине) колонки — это
   и есть требуемое поведение: колонка одна и та же у всех 3 рядов, а
   фото+текст (тело) сдвинуты вправо ровно настолько, чтобы влезало самое
   широкое слово. Значение — clamp, подобранный по фактическому обмеру
   (Playwright) ширины слова "Металлопластиковые" на этом диапазоне
   (382px на 1200px ширины экрана - 416px на 1740px, т.к. сам заголовок
   использует --fs-h2, который тоже fluid) плюс запас ~10-16px. Раньше
   здесь стоял overflow-wrap:break-word/hyphens:auto как аварийный перенос
   слова по слогам при нехватке места — это и ломало слово на 2 строки;
   теперь колонка изначально достаточно широкая, и перенос слова внутри
   строки больше не нужен и не должен происходить. */
@media (max-width:1740px) and (min-width:1200px){
  .material-row{
    display:grid; grid-template-columns:clamp(398px, 320px + 6.3vw, 434px) 1fr;
    align-items:center; column-gap:var(--space-md);
  }
  .material-row__title{ flex:none; }
  /* Фото и текст всегда в одну строку (nowrap), а фото — 54% ширины тела.
     Раньше фото было 27vw (до 460px) с flex-wrap:wrap: после расширения
     контейнера на ~1200-1470px они стояли рядом, а выше ~1470px фото
     росло быстрее колонки, текст падал под него и справа оставалась
     пустота — резкий скачок раскладки посреди диапазона. */
  .material-row__body{ flex:none; flex-wrap:nowrap; }
  .material-row__swatch{ width:54%; }
}

@media (max-width: 1199px){
  .amenity-row{ grid-template-columns:0.6fr 1fr; }
  .amenity-row--reverse{ grid-template-columns:1fr 0.6fr; }
  .amenity-row__text{ max-width:430px; }
}
/* 768-1199: тот же наезд акцента на текст, что уже был исправлен на
   1200-1740, но с другой первопричиной. На 1200-1740 самым высоким
   элементом строки почти всегда было большое фото — там не хватало
   роста именно ЕМУ (через padding-bottom). Здесь же (обмеры Playwright)
   колонка текста ЗАУЖЕНА (max-width:430px, см. выше) сильнее, чем на
   1200-1740, из-за чего текст чаще переносится на больше строк и часто
   оказывается ВЫШЕ фото — т.е. именно текст, а не фото, чаще всего задаёт
   высоту строки. padding-bottom на фото в этом случае ничего не даёт
   (строка всё равно не выше текста). Растим сам текстовый блок: запас
   снизу = высота акцента (у него clamp-формула ширины + aspect-ratio
   287/120, посчитано по факту) + 16px зазора — тогда высота строки
   (по большему из текста-с-запасом/фото) всегда достаточна, чтобы
   прижатый к низу строки акцент (align-self:end, см. выше) не заезжал
   на видимый текст, независимо от того, что в моменте выше — текст или
   фото. align-self:start на тексте — как и на 1200-1740, чтобы текст
   не центрировался по высоте строки, а прижимался к верху (иначе выше
   уже сам факт центрирования короткого текста в высокой строке съедал
   бы часть этого запаса). */
@media (max-width:1199px) and (min-width:768px){
  .amenity-row__text{ align-self:start; padding-bottom:clamp(79px, 16px + 6.25vw, 91px); }
}
@media (max-width: 767px){
  /* По Figma порядок здесь ОДИНАКОВЫЙ для всех 6 рядов (не зависит от
     --reverse): сначала заголовок+текст, потом большое фото, и только
     потом акцентное фото — этим 360-767 отличается от более широких
     диапазонов, где акцент всегда лежит поверх текстовой колонки.
     У медиа и акцента при этом чередуется горизонтальное выравнивание
     по рядам (шахматный порядок) — приятно совпадает с тем, что чётные/
     нечётные ряды и так помечены классом --reverse, поэтому используем
     его же как признак чередования, не считая ряды отдельно. */
  .amenity-row, .amenity-row--reverse{
    display:flex; flex-direction:column; gap:20px; padding-block:var(--space-sm);
  }
  .amenity-row__text{ order:1; max-width:none; gap:16px; }
  .amenity-row__media{ order:2; width:76%; }
  .amenity-row__accent{ order:3; justify-self:auto; }

  /* Внутри ряда большое и акцентное фото — на ПРОТИВОПОЛОЖНЫХ краях
     (не на одном), и эта пара сторон переворачивается через ряд:
     нечётные ряды (1,3,5 — обычные .amenity-row): фото слева, акцент справа.
     Чётные ряды (2,4,6 — .amenity-row--reverse): фото справа, акцент слева. */
  .amenity-row:not(.amenity-row--reverse) .amenity-row__media{ align-self:flex-start; }
  .amenity-row:not(.amenity-row--reverse) .amenity-row__accent{ align-self:flex-end; }
  .amenity-row--reverse .amenity-row__media{ align-self:flex-end; }
  .amenity-row--reverse .amenity-row__accent{ align-self:flex-start; }

  /* flex:1.../flex:2... в базовых правилах ниже расчитаны на ГОРИЗОНТАЛЬНУЮ раскладку
     (там flex-basis работает по ширине); при переключении на flex-direction:column
     тот же flex-basis трактуется как высота и раздувает блоки — поэтому обнуляем
     flex на заголовке/теле/тексте, иначе title/text получают лишние ~200-260px высоты. */
  .material-row{ flex-direction:column; align-items:flex-start; justify-content:flex-start; padding:20px 15px 20px 30px; gap:15px; }
  .material-row__title{ flex:none; }
  .material-row__body{ display:flex; flex-direction:column; flex:none; gap:15px; width:100%; }
  .material-row__body .text{ flex:none; order:1; }
  .material-row__swatch{ order:2; width:100%; height:auto; aspect-ratio:250/148; }
}

/* 768-1199: по Figma расклад тут проще, чем то, что раньше было
   реализовано (фото и текст "вразнобой") — заголовок и абзац стоят
   ОДНОЙ колонкой слева (друг под другом, как в HTML и есть), фото —
   справа, во всю высоту этой колонки. Текущая разметка группирует
   фото+абзац вместе в .material-row__body — чтобы получить нужную
   раскладку без переноса узлов в HTML, "распрямляем" .material-row__body
   через display:contents (см. тот же приём у .complex__col выше) и
   расставляем 3 реальных элемента (заголовок/абзац/фото) явно по сетке
   2×2: колонка 1 — заголовок сверху, абзац снизу; колонка 2 — фото,
   растянутое на обе строки. */
@media (max-width:1199px) and (min-width:768px){
  .material-row{
    display:grid;
    grid-template-columns:1fr minmax(200px,250px);
    grid-template-rows:auto auto;
    align-items:start;
    column-gap:var(--space-md); row-gap:10px;
    padding:28px clamp(20px,3vw,40px);
  }
  .material-row__title{ grid-column:1; grid-row:1; }
  .material-row__body{ display:contents; }
  .material-row .text{ grid-column:1; grid-row:2; }
  .material-row__swatch{
    grid-column:2; grid-row:1 / 3;
    width:100%; height:100%; align-self:stretch;
  }
}

/* ================================================================
   КВАРТИРЫ (ПЛАНИРОВКИ)
   ================================================================ */
@media (max-width: 1199px){
  .apartments__foot{ grid-template-columns:1fr; gap:var(--space-lg); }
  .apartments__aside{ flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; }
  .plan-track{ gap:15px; }
}
@media (max-width: 767px){
  .apartments__aside{ flex-direction:column; align-items:stretch; }
  .apartments__aside .pill-btn{ justify-content:center; }
  .plan-track{
    flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    margin-inline:calc(-1 * var(--container-pad)); padding-inline:var(--container-pad);
  }
  .plan-track::-webkit-scrollbar{ display:none; }
  .plan-card{ flex:0 0 240px; min-width:0; scroll-snap-align:start; }
}

/* ================================================================
   Галерея — остаётся каруселью на 768-1199/360-767, меняются только
   зазор и размер карточки (см. также правило для 360-767 ниже).
   ================================================================ */
@media (max-width: 1199px){
  .gallery__track{ gap:15px; }
  .gallery__item{ flex:0 0 clamp(400px,77vw,750px); }
}

/* Ход строительства: базовое правило выше (3.15fr/1fr, фото рядом с
   текстом) осталось только для замороженного десктопа ≥1741 — оно
   рассчитано на короткое 1-строчное описание. Нынешний абзац на порядок
   длиннее: в узкой 1fr-колонке он растягивал .progress__text на
   несколько экранов высоты, а само фото 3.15fr смотрелось непропорционально
   мелким рядом с таким высоким текстом. На всём диапазоне 1200-1740 (а не
   только 768-1199, как было раньше) переходим на тот же паттерн, что и на
   360-767: фото на всю ширину колонки, текст отдельной строкой над/под
   ним — длинный абзац читается на полную ширину куда естественнее, чем
   зажатый в узкую боковую колонку. */
@media (max-width: 1740px){
  .progress__grid{ grid-template-columns:1fr; }
  .progress__media{ order:2; }
  .progress__text{ order:1; }
  .progress__media img{ min-height:auto; }
}

/* 768-1199: раньше .progress__text здесь дополнительно раздвигался на 2
   колонки — дата+абзац слева (ýже 360px), счётчик+стрелки справа, прижаты
   вниз. Это было оправдано под короткий 1-строчный абзац (сузить текст,
   чтобы стрелки поместились рядом на той же высоте). Нынешний длинный
   абзац в колонке ýже 360px растягивался на много строк и уже не
   помещался вровень со стрелками без переноса. Убираем эту 2-колоночную
   сетку целиком — .progress__text возвращается к своему базовому
   поведению (обычная flex-колонка на всю ширину): дата → абзац →
   счётчик+стрелки, каждый своей строкой во всю ширину, без искусственного
   сужения абзаца. Это НЕ забытое правило — сознательно ничего не
   переопределяем для этого диапазона. */
@media (max-width: 767px){
  .gallery__track{ gap:10px; }
  .gallery__item{ flex-basis:78vw; }
  .date-tag{ text-align:right; }
}

/* ================================================================
   О ЗАСТРОЙЩИКЕ / ПРОЕКТЫ
   ================================================================ */
/* <picture> — как и у карты (см. .location__map picture выше) — на
   768-1740 подставляет ОТДЕЛЬНУЮ квадратную фотографию каски (та же
   тема, другой кадр), на замороженном десктопе (≥1741) и на 360-767
   остаётся прежний горизонтальный кадр без изменений. Раньше квадратная
   версия включалась только на 768-1199 — на 1200-1740 рядом с текстом
   стояла горизонтальная фотография (826:403), и с текущим (заметно более
   длинным, чем раньше) абзацем текста она перестала совпадать с ним по
   высоте. Квадратный кадр (704:676, заметно выше при той же ширине)
   сочетается с длинным абзацем куда естественнее — тот же приём, что уже
   работал на 768-1199, теперь распространяем и на 1200-1740.
   display:contents на <picture> по той же причине, что и у карты: чтобы
   вложенный <img> продолжал восприниматься правилами ниже как прямой
   потомок .developer__media. */
.developer__media picture{ display:contents; }
@media (max-width:1740px) and (min-width:768px){
  /* Раньше высота фото определялась только его aspect-ratio, а
     .developer__text стоял рядом на своей естественной высоте
     (align-items:start) — с текущим длинным абзацем то фото оказывалось
     заметно выше текста (широкие 1200-1740 колонки), то наоборот текст
     заметно выше фото (узкие 768-1199 колонки), и верх/низ не совпадали
     ни в одну, ни в другую сторону.
     Вместо того чтобы вручную подбирать зазор под конкретную длину
     текста на конкретной ширине (хрупко — абзац переносится по строкам
     ступенчато, а не плавно, а колонка с фото — плавно) — растягиваем
     ОБЕ колонки грида на высоту строки (align-items:stretch — она равна
     высоте более высокой из двух колонок, тот же приём, что и у
     .hero__col выше по файлу) и даём фото height:100% вместо чистого
     aspect-ratio. Теперь именно фото (через object-fit:cover, без
     искажений — обрезаются только края) всегда дотягивается до
     фактической высоты текстового блока, а не наоборот: заголовок
     остаётся у верха (обычный поток), низ фото всегда на уровне низа
     абзаца, на любой ширине диапазона и при любом количестве строк.
     aspect-ratio остаётся как запасной ориентир на случай, если высота
     строки грида по каким-то причинам не определится.
     Обратный случай (фото по aspect-ratio естественно выше короткого
     текста — так происходит на более широких 1200-1740 колонках) тоже
     нужно закрыть: высота строки грида берётся от БОЛЕЕ высокого из двух
     детей — если это фото, .developer__text стретчится контейнером до
     той же высоты, но его контент (заголовок+абзац) сам по себе короче и
     повиснет наверху, если не подвинуть его вниз. justify-content:
     space-between делает это — заголовок у верха, абзац прижимается к
     низу выросшего контейнера, вровень с фото. */
  .developer__grid{ align-items:stretch; }
  .developer__text{ justify-content:space-between; }
  .developer__media img{ aspect-ratio:704/676; object-fit:cover; height:100%; }
}

/* 768-1199: .projects__head по базовому правилу — flex-wrap:wrap с
   justify-content:space-between; при узкой ширине суммарная ширина
   заголовка и описания (макс. 46ch) превышала строку и .projects__desc
   переносился под заголовок. По Figma они должны стоять в 1 строку
   (заголовок слева крупным, описание справа мельче — эти размеры уже
   заданы классами .projects__title/.projects__desc, здесь только
   раскладка) — запрещаем перенос и сужаем описание до ширины,
   гарантированно помещающейся рядом с заголовком на этом диапазоне. */
@media (max-width:1199px) and (min-width:768px){
  .projects__head{ flex-wrap:nowrap; align-items:center; }
  .projects__title{ flex:1 1 auto; min-width:0; }
  .projects__desc{ flex:0 1 340px; min-width:0; max-width:340px; }
}
@media (max-width: 767px){
  .developer__grid{ grid-template-columns:1fr; }
  .projects__head{ flex-direction:column; }

  /* Карусель проектов превращается в обычный вертикальный список —
     без горизонтального скролла и без стрелок. */
  .projects__track{ flex-direction:column; overflow-x:visible; gap:20px; }
  .project-card{ flex:none; width:100%; }
  .project-card:last-child{ opacity:1; }
  .projects .carousel-controls{ display:none; }
}

/* ================================================================
   Footer
   ================================================================ */
/* 1200-1740: третья колонка (карточка "Получить консультацию") сама
   упиралась в свой min-content и на ~1740px выходила за правый край
   контейнера на 5px (на 1200px — до сужения полей — на 120px). minmax(0,…)
   позволяет колонке занять ровно оставшееся место, как и у хедера. */
@media (max-width:1740px) and (min-width:1200px){
  .site-footer__grid{ grid-template-columns:1.74fr 1fr minmax(0,5.56fr); }
}
@media (max-width: 1199px){
  .site-footer__grid{ grid-template-columns:1fr 1fr; }
  .site-footer__cta{ grid-column:1 / -1; order:-1; }
}
@media (max-width: 767px){
  .site-footer__grid{ grid-template-columns:1fr; }
  .site-footer__cta{ grid-column:auto; }
  .site-footer__col{ align-items:center; text-align:center; }
  .site-footer__address{ flex-direction:column; text-align:center; }
  .site-footer__social{ justify-content:center; }
  .site-footer__nav{
    display:block; column-count:2; column-gap:60px;
    text-align:left;
  }
  .site-footer__nav a{ display:block; padding-block:6px; }
  .site-footer__bottom{ flex-direction:column; text-align:center; }
  .site-footer__legal{ flex-direction:column; }

  /* .site-footer__cta .cta-card (выше, вне медиа-запросов) задаёт
     flex-direction:row с двумя классами в селекторе — это перевешивало
     обычное правило ".cta-card{flex-direction:column}" из блока "CTA-
     баннеры" выше (у него всего 1 класс, меньше specificity), поэтому
     карточка в подвале оставалась горизонтальной и на телефоне не
     помещалась в экран — поля формы и кнопка обрезались за правым краем.
     Здесь тот же селектор (2 класса), но ниже по файлу — переопределяет
     верно. Приводим к той же вертикальной раскладке, что у остальных
     2 карточек "Получить консультацию"/"Записаться на просмотр". */
  .site-footer__cta .cta-card{
    flex-direction:column; flex-wrap:wrap; align-items:center; text-align:center;
    gap:20px; padding:30px;
  }
  .site-footer__cta .cta-card__text{ align-items:center; text-align:center; max-width:none; }
  .site-footer__cta .lead-form{ max-width:280px; align-items:center; }
}

/* ================================================================
   Модальное окно "Консультация" — новый паттерн (нет на десктопе,
   1740-1920 остаётся с обычной scroll-to-anchor ссылкой на #viewing).
   Ниже 1740px кнопки с [data-consult-trigger] открывают эту модалку
   вместо перехода по ссылке (см. script.js). Форма внутри переиспользует
   обычную .lead-form/.lead-form--on-accent разметку и её JS-обработчик.
   ================================================================ */
.consult-modal{
  position:fixed; inset:0; z-index:200;
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.consult-modal.is-open{ display:flex; }
.consult-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(33,37,41,0.6);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.consult-modal__card{
  position:relative; z-index:1;
  width:100%; max-width:963px;
  background:var(--accent);
  border-radius:25px;
  padding:60px;
  display:flex; flex-direction:column; align-items:center;
  gap:40px;
  max-height:90vh; overflow-y:auto;
}
.consult-modal__title{ color:var(--white); text-align:center; margin:0; }
.consult-modal__close{
  position:absolute; top:21px; right:21px;
  width:50px; height:50px; border-radius:50%;
  border:1px solid var(--white); background:none;
  display:flex; align-items:center; justify-content:center;
  padding:0; flex:none;
}
.consult-modal__close img{ width:20px; height:20px; filter:brightness(0) invert(1); }
.consult-modal__form{ width:100%; max-width:400px; gap:60px; }
.consult-modal__form .lead-form__fields{ gap:15px; }
.consult-modal__form .lead-form__input{ height:55px; }
.consult-modal__form .lead-form__submit{ height:55px; }

body.modal-open{ overflow:hidden; }

@media (max-width:1199px){
  .consult-modal__card{ max-width:720px; padding:50px 40px; gap:35px; }
  .consult-modal__close{ width:40px; height:40px; top:13px; right:13px; }
  .consult-modal__close img{ width:16px; height:16px; }
}
@media (max-width:767px){
  .consult-modal__card{ max-width:340px; padding:70px 30px 30px; gap:30px; }
  .consult-modal__form{ max-width:280px; gap:30px; }
  .consult-modal__form .lead-form__fields{ gap:10px; }
  .consult-modal__form .lead-form__input{ height:50px; }
  .consult-modal__form .lead-form__submit{ height:50px; }
  .consult-modal__close{ width:36px; height:36px; top:12px; right:12px; }
  .consult-modal__close img{ width:15px; height:15px; }
}

/* ================================================================
   Служебные страницы — «Спасибо за заявку» и 404
   ------------------------------------------------------------------
   Отдельные Figma-фреймы ("Thank you page" / "404"), нарисованные
   только для одной (широкой) ширины — своей сетки брейкпоинтов у них
   нет. Хедер/оверлей-меню/модалка переиспользуются как есть (уже
   полностью адаптивны), а контент здесь — один плавный clamp() на
   весь диапазон 360-1920px вместо 3-уровневой системы токенов выше.
   ================================================================ */
.status-page{
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:var(--header-clearance) var(--container-pad) var(--space-section);
  gap:var(--space-lg);
}
.status-page__code{
  font-family:'Manrope', sans-serif;
  font-weight:var(--fw-light);
  font-size:clamp(140px, 105px + 9.74vw, 292px);
  line-height:1;
  letter-spacing:-0.01em;
}
.status-page__code .is-accent{ color:var(--accent); }
.status-page__code .is-dark{ color:var(--black); }
.status-page__title{ max-width:900px; }
.status-page__text{ font-size:20px; line-height:1.5; max-width:46ch; color:var(--black); }
.status-page__actions{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }

@media (max-width:767px){
  .status-page{ gap:var(--space-md); }
  .status-page__text{ font-size:16px; }
}

/* ================================================================
   Политика конфиденциальности (privacy.html) и ссылка на неё в футере
   ================================================================ */
.site-footer__legal a{ transition:color .2s ease; }
.site-footer__legal a:hover{ color:var(--accent); }

.legal-page{ padding:var(--header-clearance) 0 var(--space-section); }
.legal-page__inner{ display:flex; flex-direction:column; gap:var(--space-md); }
.legal-page__inner > *{ max-width:900px; }
.legal-page__title{ max-width:none; }
.legal-page__updated{ font-size:var(--fs-text-sm); color:var(--gray-3); }
.legal-page section{ display:flex; flex-direction:column; gap:12px; }
.legal-page h2{ font-size:var(--fs-h4); font-weight:var(--fw-medium); line-height:1.25; }
.legal-page ul{ display:flex; flex-direction:column; gap:6px; }
.legal-page li{ position:relative; padding-left:26px; }
.legal-page li::before{
  content:""; position:absolute; left:4px; top:.7em;
  width:8px; height:8px; border-radius:50%; background:var(--accent);
}
.legal-page a:not(.pill-btn){ color:var(--accent); transition:opacity .2s ease; }
.legal-page a:not(.pill-btn):hover{ opacity:.8; }
.legal-page__actions{ margin-top:var(--space-sm); }

/* Виджет thefloors: его плавающая кнопка "Выбрать квартиру" (#widget-btn,
   красная, справа внизу) скрыта — открываем виджет своими кнопками (см.
   script.js). display:none с !important перебивает inline-стили, которыми
   сам виджет переключает кнопку, и убирает её мигание при загрузке. Из DOM
   элемент намеренно не удаляем: виджет обращается к нему по id. */
#widget-btn{ display:none !important; }