/* =========================================================================
   Секции сверху вниз.
   Все размеры шрифтов подчиняются модульной шкале (1.25 — Major Third),
   а отступы — пропорциональной шкале (--sp-1 … --sp-10) и правилу близости:
   межстрочный интервал внутри заголовка < отступ от метки до заголовка < отступ от заголовка до текста
   < отступ от текста до кнопки < отступ между карточками < отступ между блоками < отступ между секциями.
   ========================================================================= */

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: calc(var(--header-h) + var(--sp-5)); overflow: clip; }
.hero__top { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--sp-5); }
.hero__kind { color: var(--fg-2); white-space: nowrap; }
.hero__title { width: min(74vw, 1180px); margin: 0; font-size: inherit; }
@media (max-width: 1199px) { .hero__title { width: min(86vw, 960px); } }
.hero__logo { display: block; color: var(--fg); }
.hero__logo svg { width: 100%; height: auto; overflow: visible; }
.hero__stage { position: relative; z-index: 2; margin-top: -5.5vw; display: flex; flex-direction: column; }
.hero__building { position: relative; pointer-events: none; }
.hero__building img { width: 100%; height: auto; }
.hero__info {
  position: absolute; left: 50%; top: 14.5%; transform: translateX(-50%);
  display: grid; justify-items: center; gap: var(--sp-5);
  width: max-content; max-width: 68%; text-align: center;
}
.hero__slogan {
  font-size: var(--fs-xl);
  line-height: var(--lh-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.hero__meta { display: none; }
.hero__btns { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }
.hero__btns .btn { min-height: 48px; padding: var(--sp-2) var(--sp-5); font-size: var(--fs-sm); }
.hero__btns .btn .btn__bg { inset: 0 7px; }
.hero__scroll {
  position: absolute; z-index: 3; left: var(--gutter); top: calc(var(--header-h) + 31vw);
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--fg);
}
.hero__scroll-line { position: relative; width: 2px; height: 46px; background: rgba(255, 248, 239, 0.25); overflow: hidden; transform: skewX(var(--skew)); }
.hero__scroll-line::after { content: ''; position: absolute; inset: 0; background: var(--p-sand); transform: translateY(-100%); animation: scroll-line 2.2s var(--ease-io) infinite; }
@keyframes scroll-line { 0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(100%); } }
html.js:not(.is-ready) .hero [data-hero-fade],
html.js:not(.is-ready) .hero__building,
html.js:not(.is-ready) .hero__logo,
html.js:not(.is-ready) .weekflat { visibility: hidden; }

/* Строка над логотипом: на всю ширину заголовка/контейнера, без зажатия .hero__kind в 4 строки */
.hero__line { width: min(88vw, 1280px); display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
@media (max-width: 1199px) { .hero__line { width: min(86vw, 960px); } }
.hero__facts { display: none; }
@media (min-width: 1200px) {
  .hero__line { justify-content: space-between; align-items: center; flex-wrap: nowrap; gap: var(--sp-4); }
  .hero__facts { display: flex; align-items: center; gap: var(--sp-4); color: var(--fg); }
  .hero__facts li { display: flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
  .hero__facts li::before { content: ''; width: 7px; height: 12px; background: var(--teal); clip-path: polygon(100% 0, 50.6% 100%, 0 100%, 49.4% 0); flex: 0 0 auto; }
}

/* «Квартира недели» — бирюзовая карточка */
.weekflat {
  position: absolute; z-index: 3; right: var(--gutter); bottom: max(24px, calc(100% - 100svh + 24px));
  width: 340px; padding: var(--sp-5); display: grid; gap: var(--sp-3);
  background: var(--teal); color: var(--fg);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 46px, 100% 100%, 14px 100%, 0 calc(100% - 46px));
}
.weekflat__label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-xs); }
.weekflat__label span:last-child { opacity: 0.85; }
.weekflat__body { display: grid; grid-template-columns: 104px 1fr; gap: var(--sp-4); align-items: center; }
.weekflat__plan { display: block; width: 104px; height: 104px; background: var(--paper); overflow: hidden; transition: transform 0.5s var(--ease); }
.weekflat__plan:hover { transform: scale(1.04); }
.weekflat__plan img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transform: scale(1.18); }
.weekflat__rooms { font-size: var(--fs-xs); opacity: 0.9; }
.weekflat__area { font-size: var(--fs-xl); line-height: var(--lh-display); font-weight: 500; }
.weekflat__area span { font-size: var(--fs-base); }
.weekflat__old { font-size: var(--fs-xs); text-decoration: line-through; opacity: 0.75; margin-top: var(--sp-1); }
.weekflat__price { font-size: var(--fs-md); font-weight: 600; }
.weekflat__benefit { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; }
.weekflat__benefit .slash { color: var(--p-night); }

@media (max-width: 1199px) {
  .hero__stage { margin-top: var(--sp-5); }
  .hero__info { position: static; transform: none; order: -1; max-width: none; width: auto; margin: 0 auto var(--sp-6); padding: 0 var(--gutter); }
  .hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-1) var(--sp-4); font-size: var(--fs-sm); color: var(--fg-2); }
  .hero__btns .btn { min-height: 52px; }
  .hero__scroll { display: none; }
  .weekflat { position: relative; right: auto; bottom: auto; width: auto; max-width: 520px; margin: var(--sp-5) var(--gutter) 0; }
  .hero { padding-bottom: var(--sp-2); }
}
@media (max-width: 767px) {
  .hero__title { width: 88vw; }
  .hero__building { width: 175%; margin-left: -22%; }
  .hero__btns { display: grid; width: 100%; max-width: 360px; gap: var(--sp-2); }
  .hero__btns .btn { width: 100%; }
}

/* ---------- 01 / О проекте ----------
   Карточки показателей (.about__facts):
   - Число (.fact__value) приведено к модульной ступени --fs-2xl (31–39px), а единицы (.fact__unit) — к --fs-base (16px).
   - Каждая связка «число + единица измерения» обёрнута в .fact__pair (white-space: nowrap),
     поэтому «м²» или «г.» никогда не отрываются на новую строку и все 4 карточки стоят ровно в одну линию.
   - По правилу близости: отступ от верхнего разделителя до слэша (--sp-5 = 24px) > от слэша до цифры (--sp-3 = 12px) > от цифры до подписи (--sp-2 = 8px). */
.about__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--sp-6);
  row-gap: var(--sp-7);
}
.fact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.fact__bar {
  display: block;
  width: 12px;
  height: 28px;
  background: var(--c);
  clip-path: polygon(100% 0, 50.6% 100%, 0 100%, 49.4% 0);
  margin-bottom: var(--sp-3);
}
.fact__value {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 6px;
  font-size: var(--fs-2xl);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.025em;
  white-space: nowrap;
  margin-bottom: var(--sp-2);
}
.fact__pair {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}
.fact__unit {
  font-size: var(--fs-base);
  line-height: 1.2;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--fg-2);
  white-space: nowrap;
}
.fact__text {
  color: var(--fg-2);
  font-size: var(--fs-sm);
  line-height: 1.42;
}
/* «Почему семьи выбирают» — один блок вместо ряда карточек + отдельного фото + подписи.
   Фото книзу растворяется маской (а не заливкой цветом фона — иначе под ним пропали бы фоновые линии),
   тело блока заезжает на растворённую часть отрицательным отступом. Отступ задан в % ширины,
   поэтому перекрытие всегда пропорционально высоте фото; если текст выше перекрытия, он просто
   продолжается на фоне — шва не видно. */
.why { position: relative; margin-top: var(--sp-9); }
.why__media {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 44%, rgba(0, 0, 0, 0.6) 66%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 44%, rgba(0, 0, 0, 0.6) 66%, transparent 96%);
}
.why__media::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgb(40 40 40 / 0) 36%, rgb(40 40 40 / 0.5) 58%, rgb(40 40 40 / 0.85) 82%);
}
.why__img { position: absolute; left: 0; right: 0; top: -6%; height: 112%; }
.why__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.why__body { position: relative; z-index: 2; margin-top: -24%; padding: 0 var(--sp-7); }
.why__head { text-shadow: 0 2px 22px rgb(0 0 0 / 0.5); }
.why__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-6); }
/* Преимущество: тонкая линия с цветным акцентом → заголовок → текст. Без плашек, номеров и срезанных углов. */
.why__item { position: relative; padding-top: var(--sp-4); border-top: 1px solid rgb(255 248 239 / 0.24); }
/* Заголовки в 2 и 3 строки: подсетка выравнивает начало текстов по одной линии во всём ряду */
@supports (grid-template-rows: subgrid) {
  .why__item { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--sp-2); align-content: start; }
  .why__item .why__title { margin-bottom: 0; }
}
.why__item::before {
  content: ''; position: absolute; left: 0; top: -1px; width: 40px; height: 2px;
  background: var(--c); transition: width 0.6s var(--ease);
}
.why__item:hover::before { width: 100%; }
.why__title { font-size: var(--fs-base); line-height: var(--lh-snug); font-weight: 600; margin-bottom: var(--sp-2); text-shadow: 0 1px 14px rgb(0 0 0 / 0.45); }
.why__text { font-size: var(--fs-sm); line-height: 1.5; color: rgb(255 248 239 / 0.76); text-shadow: 0 1px 12px rgb(0 0 0 / 0.45); }

@media (max-width: 1279px) {
  .why__body { margin-top: -18%; padding: 0 var(--sp-6); }
  .why__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--sp-7); }
}
@media (max-width: 1199px) {
  .about__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .why__media { aspect-ratio: 4 / 3; }
  .why__body { margin-top: -22%; padding: 0; }
  .why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .about__facts { grid-template-columns: 1fr; row-gap: var(--sp-5); }
  .why { margin-top: var(--sp-8); }
  .why__media { aspect-ratio: 1 / 1; }
  .why__img img { object-position: 30% 40%; }
  .why__body { margin-top: -28%; }
  .why__list { grid-template-columns: 1fr; row-gap: var(--sp-5); }
}

/* ---------- 02 / Архитектура ---------- */
.arch .shead { margin-bottom: var(--sp-7); }
.arch__stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-6); align-items: center; }
.arch__steps { grid-column: 1 / span 5; display: grid; gap: var(--sp-6); }
.arch__step { display: grid; grid-template-columns: 48px 1fr; opacity: 0.32; transition: opacity 0.6s var(--ease); }
.arch__step.is-active { opacity: 1; }
.arch__num { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; color: var(--p-sand); padding-top: var(--sp-1); }
.arch__title { margin-bottom: var(--sp-3); }
.arch__text { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--fg-2); max-width: 32em; }
.arch__progress { display: block; height: 2px; margin-top: var(--sp-5); background: var(--line); overflow: hidden; }
.arch__progress i { display: block; height: 100%; background: var(--fg); transform: scaleX(0); transform-origin: left; }
.arch__palette { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-4); }
.swatch { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: 500; color: var(--fg); }
.swatch__chip { width: 14px; height: 22px; background: var(--c); clip-path: polygon(100% 0, 50.6% 100%, 0 100%, 49.4% 0); box-shadow: inset 0 0 0 1px rgba(255, 248, 239, 0.2); transition: transform 0.4s var(--ease); }
.swatch:hover .swatch__chip, .swatch:focus-visible .swatch__chip { transform: scale(1.35); }
.arch__visual { grid-column: 7 / -1; }
.arch__frame { position: relative; height: min(74vh, 760px); overflow: hidden; background: var(--bg-2); }
.arch__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arch__pattern { position: absolute; inset: 0; width: 100%; height: 100%; }
.arch__pattern rect { transition: opacity 0.4s; }
@media (max-width: 1023px) {
  .arch__steps, .arch__visual { grid-column: 1 / -1; }
  .arch__step { opacity: 1; }
  .arch__progress { display: none; }
  .arch__visual { margin-top: var(--sp-7); }
  .arch__frame { height: auto; aspect-ratio: 4 / 5; }
}

/* ---------- 03 / Квартиры (светлая панель) ---------- */
.flats__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-7); }
.flats__main { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-6); align-items: center; }
.flats__plan { grid-column: 1 / span 7; position: relative; }
.flats__plan-img { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--paper); }
.flats__plan-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.flats__badge { position: absolute; left: 0; top: 0; font-size: clamp(72px, 8vw, 140px); line-height: 0.8; font-weight: 500; color: transparent; -webkit-text-stroke: 1.5px var(--line-ink-2); pointer-events: none; z-index: 2; }
.flats__info { grid-column: 8 / -1; display: grid; gap: var(--sp-5); align-content: center; }
.flats__rooms { font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--ink-2); }
.flats__area { display: flex; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-4xl); line-height: 0.92; font-weight: 400; letter-spacing: -0.03em; }
.flats__unit { font-size: var(--fs-lg); letter-spacing: 0; font-weight: 500; }
.flats__rows { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.flats__rows > div { padding: var(--sp-3) 0; border-top: 1px solid var(--line-ink); }
.flats__rows dt { font-size: var(--fs-xs); color: var(--ink-2); }
.flats__rows dd { margin: var(--sp-1) 0 0; font-size: var(--fs-md); font-weight: 600; }
.flats__from { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-xl); font-weight: 600; line-height: 1.1; }
.flats__from > span:first-child { font-size: 0.55em; font-weight: 500; color: var(--ink-2); }
.flats__mort { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--ink-2); }
.flats__btns { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.flats__list { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(170px, 14.5vw, 214px); gap: var(--sp-3); overflow-x: auto; margin-top: var(--sp-7); padding-bottom: var(--sp-3); scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--line-ink-2) transparent; cursor: grab; }
.flats__list:active { cursor: grabbing; }
.fcard { display: grid; gap: var(--sp-2); padding: var(--sp-3); text-align: left; background: var(--paper-2); scroll-snap-align: start; transition: box-shadow 0.3s, translate 0.4s var(--ease); }
.fcard:hover { translate: 0 -4px; }
.fcard.is-active { box-shadow: inset 0 0 0 2px var(--ink); }
.fcard[hidden] { display: none; }
.fcard__img { display: block; aspect-ratio: 1; background: var(--paper); overflow: hidden; }
.fcard__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transform: scale(1.15); pointer-events: none; }
.fcard__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); padding: 0 var(--sp-1); }
.fcard__rooms { font-size: var(--fs-xs); font-weight: 700; }
.fcard__area { font-size: var(--fs-base); line-height: 1.2; font-weight: 600; }
.fcard__price { padding: 0 var(--sp-1); font-size: var(--fs-xs); color: var(--ink-2); }

.flats__floorbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.flats__hint { font-size: var(--fs-sm); color: var(--ink-2); max-width: 34em; }
.flats__floorimg { position: relative; background: var(--paper); }
.flats__floorimg img { width: 100%; height: auto; mix-blend-mode: multiply; }
.flats__poly { position: absolute; inset: 0; width: 100%; height: 100%; }
.flats__poly polygon { fill: var(--c); fill-opacity: 0.1; stroke: var(--c); stroke-width: 0; cursor: pointer; transition: fill-opacity 0.3s, stroke-width 0.3s; outline: none; }
.flats__poly polygon:hover, .flats__poly polygon:focus-visible { fill-opacity: 0.42; stroke-width: 9; }
.flats__tip { position: absolute; left: 0; top: 0; z-index: 3; display: grid; gap: 2px; padding: var(--sp-2) var(--sp-4); background: var(--ink); color: var(--fg); font-size: var(--fs-sm); pointer-events: none; white-space: nowrap; }
.flats__tip b { font-weight: 600; }
.flats__tip[hidden] { display: none; }
@media (max-width: 1023px) {
  .flats__plan, .flats__info { grid-column: 1 / -1; }
  .flats__info { margin-top: var(--sp-6); }
  .flats__floorimg { overflow-x: auto; }
  .flats__floorimg img, .flats__poly { min-width: 760px; }
}
@media (max-width: 767px) {
  .flats__bar .tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: var(--sp-1); }
  .flats__rows { grid-template-columns: 1fr 1fr; }
}

/* ---------- 04 / Двор (Благоустройство) ---------- */
.yard__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-6); row-gap: var(--sp-7); align-items: center; }
.yplan { grid-column: 1 / span 7; position: relative; }
.yplan__svg { width: 100%; height: auto; overflow: visible; }
.yplan__site { fill: none; stroke: rgba(255, 248, 239, 0.22); stroke-width: 1.5; stroke-dasharray: 6 8; }
.yplan__street { stroke: rgba(255, 248, 239, 0.12); stroke-width: 10; }
.yplan__bld { fill: rgba(255, 248, 239, 0.07); stroke: rgba(255, 248, 239, 0.42); stroke-width: 1.5; }
.yplan__div { stroke: rgba(255, 248, 239, 0.22); stroke-width: 1; }
.yplan__zone { opacity: 0.3; transition: opacity 0.5s var(--ease); }
.yplan__zone.is-active { opacity: 1; }
.yplan__tree { fill: none; stroke: rgba(255, 248, 239, 0.32); stroke-width: 1.5; }
.yplan__caption { fill: var(--fg-3); font-size: 11px; letter-spacing: 0.16em; font-weight: 600; font-family: var(--font); }
.ymark { position: absolute; z-index: 2; width: 46px; height: 32px; margin: -16px 0 0 -23px; display: grid; place-items: center; isolation: isolate; font-size: var(--fs-xs); font-weight: 700; color: var(--fg); transition: color 0.3s; }
.ymark::before { content: ''; position: absolute; inset: 0 5px; z-index: -1; transform: skewX(var(--skew)); background: var(--bg); box-shadow: inset 0 0 0 1.5px rgba(255, 248, 239, 0.6); transition: background-color 0.3s, box-shadow 0.3s; }
.ymark::after { content: ''; position: absolute; inset: 0 5px; z-index: -2; transform: skewX(var(--skew)); box-shadow: inset 0 0 0 1.5px var(--fg); opacity: 0; }
.ymark:hover::before { box-shadow: inset 0 0 0 1.5px var(--fg); }
.ymark.is-active { color: var(--ink); }
.ymark.is-active::before { background: var(--paper); box-shadow: none; }
.ymark.is-active::after { animation: mark-pulse 2s var(--ease) infinite; }
@keyframes mark-pulse { 0% { opacity: 0.9; transform: skewX(var(--skew)) scale(1); } 100% { opacity: 0; transform: skewX(var(--skew)) scale(1.9, 2.1); } }
.ycard { grid-column: 9 / -1; }
.ycard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
/* По правилу близости: номер 01/02 прижат к заголовку (--sp-2 = 8px), заголовок отделён от описания (--sp-3 = 12px), стрелки — на --sp-5 (24px) */
.ycard__body { padding-top: var(--sp-5); }
.ycard__num { font-size: var(--fs-xs); line-height: 1.2; letter-spacing: 0.12em; color: var(--fg-3); font-weight: 600; margin-bottom: var(--sp-2); }
.ycard__num span { color: var(--fg); }
.ycard__title { margin-bottom: var(--sp-3); }
.ycard__text { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--fg-2); min-height: 4.5em; }
.ycard__nav { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.yard__features { margin-top: var(--sp-8); }
.chip--lg { height: 50px; padding: 0 var(--sp-5); font-size: var(--fs-base); }
.chip--lg .i { width: 22px; height: 22px; color: var(--teal); }
@media (max-width: 1023px) {
  .yplan, .ycard { grid-column: 1 / -1; }
  .ycard { max-width: 560px; }
}

/* ---------- 05 / Локация ----------
   Кастомная интерактивная карта на растровой подложке 3196×1831 по образцу референса «Формула».
   - В покое на точках интереса видны аккуратные скошенные значки категорий (без нагромождения текстовых плашек).
   - По наведению мыши или клику плавно раскрывается карточка с временем в пути, названием и описанием,
     а от ЖК «На Бейвеля» к точке рисуется пунктирный маршрут.
   - Отметка самого ЖК «На Бейвеля» (ул. Бейвеля, 51 стр.) стоит на здании (905, 868),
     всегда видна, а её постоянный бейдж расположен слева от пина над свободным двором и никогда не перекрывает другие точки. */
.loc { overflow-anchor: none; }
.lmap {
  --mk: clamp(32px, 2.5vw, 42px); /* размер фишки тега */
  --in: 0px;
  position: relative; z-index: 1;
  margin-top: var(--sp-6);
  background: #E9E9E4;
  clip-path: inset(0 100vw); /* до первого layout() в JS — не «мигает» на всю ширину */
}
.lmap__viewport { position: relative; aspect-ratio: 3196 / 1831; overflow: hidden; }
.lmap__world { position: absolute; inset: 0; transform-origin: 50% 45%; }
.lmap__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; user-select: none; pointer-events: none; }
.lmap__wave {
  position: absolute; z-index: 1; width: 0; height: 0;
  transform: translate(-50%, -50%) skewX(var(--skew));
  box-shadow: inset 0 0 0 2px var(--teal), 0 0 0 1px rgb(41 42 40 / 0.14);
  background: rgb(67 140 133 / 0.08);
  opacity: 0; pointer-events: none;
}
.lmap__route { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.lmap__route.is-live { opacity: 1; }

/* Теги точек интереса */
.lpt { position: absolute; z-index: 3; width: 0; height: 0; -webkit-tap-highlight-color: transparent; transition: opacity 0.3s; }
.lpt.is-dim { opacity: 0.22; pointer-events: none; }
.lpt:hover, .lpt.is-open { z-index: 10; }
.lpt__pin { position: absolute; left: calc(var(--mk) / -2); top: calc(var(--mk) / -2); width: var(--mk); height: var(--mk); display: grid; place-items: center; cursor: pointer; }
.lpt__pin:focus-visible { outline: none; }
.lpt__pin:focus-visible .lpt__chip { outline: 2px solid var(--bg); outline-offset: 3px; }
.lpt__chip {
  position: absolute; inset: 0 6px;
  transform: skewX(var(--skew));
  background: var(--c, var(--teal));
  box-shadow: 0 0 0 2px rgb(255 248 239 / 0.92), 0 6px 16px rgb(41 42 40 / 0.3);
  transition: transform 0.3s var(--ease), background-color 0.3s, box-shadow 0.3s;
}
.lpt__chip .i { position: absolute; inset: 0; margin: auto; width: 54%; height: 54%; color: #FFF8EF; transition: transform 0.35s var(--ease); }
.lpt__pin:hover .lpt__chip, .lpt.is-open .lpt__chip {
  transform: skewX(var(--skew)) scale(1.16);
  background: var(--bg);
  box-shadow: 0 0 0 2.5px var(--c, var(--teal)), 0 10px 24px rgb(41 42 40 / 0.42);
}
.lpt__pin:hover .lpt__chip .i, .lpt.is-open .lpt__chip .i {
  color: var(--c, var(--teal));
  transform: scale(1.08);
}
.lpt__ring { position: absolute; inset: 0 6px; transform: skewX(var(--skew)); box-shadow: 0 0 0 2px var(--c, var(--teal)); opacity: 0; pointer-events: none; }
.lpt.is-open .lpt__ring { animation: tag-pulse 2.2s var(--ease) infinite; }
@keyframes tag-pulse { 0% { opacity: 0.9; transform: skewX(var(--skew)) scale(1); } 100% { opacity: 0; transform: skewX(var(--skew)) scale(1.85); } }

/* Карточка точки интереса: раскрывается при наведении или клике */
.lpt__card {
  position: absolute; z-index: 9;
  left: calc(var(--mk) / 2 + 10px); top: calc(var(--mk) / -2);
  width: min(268px, 74vw); padding: 14px 16px 16px;
  background: var(--bg); color: var(--fg);
  border-top: 3px solid var(--c, var(--teal));
  box-shadow: 0 18px 44px rgb(25 26 24 / 0.42);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 34px, 100% 100%, 10px 100%, 0 calc(100% - 34px));
  opacity: 0; transform: translateX(-8px) scale(0.97); pointer-events: none;
  transition: opacity 0.28s var(--ease), transform 0.35s var(--ease);
}
.lpt__card::before {
  content: ''; position: absolute; right: 100%; top: 0; width: 14px; height: var(--mk);
}
.lpt.is-open .lpt__card { opacity: 1; transform: none; pointer-events: auto; }
.lpt--up .lpt__card { top: auto; bottom: calc(var(--mk) / -2); }
.lpt--up .lpt__card::before { top: auto; bottom: 0; }
.lpt--left .lpt__card { left: auto; right: calc(var(--mk) / 2 + 10px); transform: translateX(8px) scale(0.97); }
.lpt--left .lpt__card::before { right: auto; left: 100%; }
.lpt--left.is-open .lpt__card { transform: none; }

/* Иерархия внутри карточки точки по правилу близости:
   шапка (категория + минуты) -> 6px -> название объекта -> 6px -> описание */
.lpt__meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
  margin-bottom: 6px; padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 248, 239, 0.14);
}
.lpt__cat {
  font-size: 11px; line-height: 1.2; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  color: var(--c, var(--p-sand));
}
.lpt__value { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.lpt__num { font-size: var(--fs-lg); line-height: 1; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); font-variant-numeric: tabular-nums; }
.lpt__unit { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
.lpt__title {
  font-size: var(--fs-sm); line-height: var(--lh-tight); font-weight: 600;
  color: var(--fg); margin-bottom: 6px;
  overflow-wrap: break-word; /* карточка обрезана clip-path: длинное название не должно уходить за край */
}
.lpt__text { font-size: var(--fs-xs); line-height: 1.4; color: var(--fg-2); overflow-wrap: break-word; }

/* Постоянный маркер ЖК «На Бейвеля» (ул. Бейвеля, 51 стр.):
   пин стоит на доме (905, 868), а статичный бейдж вынесен влево от пина (над свободным двором),
   поэтому он всегда на виду и никогда не перекрывает соседние точки. */
.lpt--home {
  z-index: 5;
  --mk: clamp(42px, 3.1vw, 50px);
  pointer-events: none;
}
.lpt__chip--home {
  position: absolute;
  left: calc(var(--mk) / -2); top: calc(var(--mk) / -2);
  width: var(--mk); height: var(--mk);
  inset: auto;
  padding: 0 5px;
  background-clip: content-box;
  transform: skewX(var(--skew));
  background-color: var(--p-burgundy);
  box-shadow: 0 0 0 2.5px #FFF8EF, 0 0 0 4.5px var(--teal), 0 12px 28px rgb(25 26 24 / 0.48);
}
.lpt__sign { position: absolute; inset: 0; margin: auto; width: 36%; height: 58%; fill: #FFF8EF; }
.lpt__pulse {
  position: absolute;
  left: calc(var(--mk) / -2); top: calc(var(--mk) / -2);
  width: var(--mk); height: var(--mk);
  inset: auto;
  transform: skewX(var(--skew));
  box-shadow: 0 0 0 2.5px var(--teal);
  opacity: 0; pointer-events: none;
}
.lpt--home.is-live .lpt__pulse { animation: tag-pulse 2.8s var(--ease) infinite; }
.lpt--home.is-live .lpt__pulse + .lpt__pulse { animation-delay: 1.4s; }
.lpt__card--static {
  position: absolute;
  left: auto;
  right: calc(var(--mk) / 2 + 12px);
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  max-width: 220px;
  padding: 10px 14px 11px;
  background: var(--bg);
  color: var(--fg);
  border-top: 3px solid var(--teal);
  border-right: 3px solid var(--p-burgundy);
  box-shadow: 0 12px 30px rgb(25 26 24 / 0.38);
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 24px);
  opacity: 1;
  pointer-events: auto;
}
.lpt__hbadge {
  display: block;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 3px;
}
.lpt__htitle {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.2;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 2px;
}
.lpt__htext {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  color: var(--fg-2);
}

/* Подсказка в левом верхнем углу карты (как на референсе «Формула») */
.lmap__hint {
  position: absolute; z-index: 6;
  left: 20px; top: 16px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 13px;
  background: rgb(34 34 34 / 0.86); color: var(--fg);
  font-size: var(--fs-xs); line-height: 1.3; font-weight: 500;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  pointer-events: none;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.lmap__hint i {
  flex: none; width: 8px; height: 12px;
  background: var(--teal);
  clip-path: polygon(100% 0, 50.6% 100%, 0 100%, 49.4% 0);
}
.lmap__hint.is-gone { opacity: 0; transform: translateY(-6px); }
.lmap__pan { display: none; }

/* Интерактивная легенда-фильтр категорий */
.lmap__legend {
  position: absolute; z-index: 6; right: 20px; left: auto; bottom: 16px;
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px 8px; font-size: var(--fs-xs); color: #2E2E2B;
  background: rgb(255 248 239 / 0.94);
  box-shadow: 0 8px 24px rgb(25 26 24 / 0.16);
}
.lmap__legend li { display: flex; }
.lmap__legend button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px; cursor: pointer; user-select: none;
  font-weight: 500; text-align: left; transition: background-color 0.2s, color 0.2s;
}
.lmap__legend button:hover { background: rgba(46, 46, 43, 0.08); }
.lmap__legend button:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.lmap__legend button.is-active { background: var(--bg); color: var(--fg); font-weight: 600; }
.lmap__legend i { width: 9px; height: 15px; clip-path: polygon(100% 0, 50.6% 100%, 0 100%, 49.4% 0); }
.lmap__all-dot { background: linear-gradient(135deg, #C96B84 0%, #438C85 50%, #A64E1E 100%); }

/* До 1280 px легенда поверх карты закрывала нижние значки (Stretch House, выезд к ТРК) —
   там она стоит полосой под картой, как на телефоне */
@media (max-width: 1279px) {
  .lmap { padding-bottom: var(--sp-3); }
  .lmap__legend { position: static; margin: var(--sp-3) var(--gutter) 0; }
}

@media (max-width: 1023px) {
  /* На узком экране карта в полную высоту листается по горизонтали */
  .lmap { clip-path: none !important; }
  .lmap__viewport { aspect-ratio: auto; height: clamp(440px, 68svh, 640px); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
  .lmap__viewport::-webkit-scrollbar { display: none; }
  .lmap__world { position: relative; inset: auto; height: 100%; width: calc(clamp(440px, 68svh, 640px) * 3196 / 1831); }
  .lmap__hint { left: var(--gutter) !important; top: 12px; }
  .lmap__pan { display: inline; }
  .lpt__card { width: min(256px, 78vw); }
}

/* ---------- 06 / Качество (светлая панель) ---------- */
.quality__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-6); row-gap: var(--sp-7); align-items: start; }
/* Левая колонка тянется на всю высоту строки, фото прижато к низу —
   выровнено по низу аккордеона во второй колонке */
.quality__side { grid-column: 1 / span 5; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; position: sticky; top: calc(var(--header-h-compact) + var(--sp-5)); }
.quality__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.quality__media img { width: 100%; height: 100%; object-fit: cover; }
.acc { grid-column: 7 / -1; border-bottom: 1px solid var(--line-ink); }
.acc__item { border-top: 1px solid var(--line-ink); }
.acc__head { width: 100%; display: grid; grid-template-columns: 48px 1fr 44px; align-items: center; padding: var(--sp-5) 0; text-align: left; }
.acc__num { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; color: var(--ink-3); transition: color 0.3s; }
.acc__title { font-size: var(--fs-lg); line-height: var(--lh-tight); font-weight: 500; letter-spacing: -0.01em; transition: transform 0.5s var(--ease); }
.acc__head:hover .acc__title { transform: translateX(6px); }
.acc__icon { position: relative; width: 44px; height: 44px; display: grid; place-items: center; isolation: isolate; }
.acc__icon::before { content: ''; position: absolute; inset: 0 6px; z-index: -1; transform: skewX(var(--skew)); box-shadow: inset 0 0 0 1.5px var(--line-ink-2); transition: background-color 0.35s, box-shadow 0.35s; }
.acc__icon .i { width: 20px; height: 20px; transition: transform 0.5s var(--ease); }
.acc__item.is-open .acc__icon::before { background: var(--teal); box-shadow: none; }
.acc__item.is-open .acc__icon { color: var(--fg); }
.acc__item.is-open .acc__icon .i { transform: rotate(45deg); }
.acc__item.is-open .acc__num { color: var(--teal); }
.acc__body { overflow: hidden; }
/* Открытый пункт: текст ближе к своему заголовку за счёт уменьшения нижнего padding шапки
   (плавно, через transition), а не отрицательного margin — иначе overflow:hidden у .acc__body
   срезает верх первой строки текста. Снизу отступ --sp-5 (24px) до следующего пункта.
   min-height у абзаца = 4 строки (высота самого длинного текста), чтобы при переключении
   пунктов высота аккордеона не менялась и блок ниже не дёргался. */
.acc__head { transition: padding 0.6s var(--ease); }
.acc__item.is-open .acc__head { padding-bottom: calc(var(--sp-5) - var(--sp-2)); }
.acc__inner { padding: 0 48px var(--sp-5) 48px; display: grid; gap: var(--sp-4); }
.acc__inner p { color: var(--ink-2); font-size: var(--fs-base); line-height: var(--lh-body); max-width: 36em; min-height: calc(4 * var(--fs-base) * var(--lh-body)); }
.acc__media { display: none; aspect-ratio: 16 / 10; overflow: hidden; }
.acc__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) {
  .quality__side, .acc { grid-column: 1 / -1; }
  .quality__side { position: static; }
  .quality__media { display: none; }
  .acc__media { display: block; }
  .acc__inner { padding: 0 0 var(--sp-5); }
  /* На узких экранах переносы другие — фиксированную высоту текста не резервируем */
  .acc__inner p { min-height: 0; }
}

/* ---------- 07 / Ипотека и условия покупки ----------
   Исправления по скриншоту 2 и правилу близости:
   1. Карточка результата (.buy__result) занимает 5 колонок (8..-1), а калькулятор — 7 колонок (1..7) без пустой дыры в 8-й колонке.
   2. Заголовок «ЕЖЕМЕСЯЧНЫЙ ПЛАТЁЖ» (.buy__rtitle) привязан к сумме платежа (.buy__pay) малым отступом --sp-2 (8px),
      а таблица параметров (.buy__rows) отделена от суммы отступом --sp-5 (24px).
   3. Сумма (.buy__pay) и валюта (.buy__cur «₽/мес.») имеют white-space: nowrap и размер по модульной шкале (--fs-3xl и --fs-md),
      поэтому «₽/мес.» никогда не рвётся на «₽/» и «мес.».
   4. Кнопка «Подобрать программу и рассчитать» имеет комфортные поля внутри скошенной плашки без наезда текста на края. */
.buy__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--sp-6);
  row-gap: var(--sp-7);
  align-items: start;
}
.buy__calc {
  grid-column: 1 / span 7;
  display: grid;
  gap: var(--sp-5);
  align-content: start;
}
/* Кнопки программ ближе к заголовку: под шапкой секции отступ меньше (--sp-4),
   а освободившееся место уходит в середину колонки — между программами и инфографикой,
   поэтому слайдеры остаются на месте. Иерархия: 12px внутри группы кнопок < 16px под заголовком
   < 20–24px между слайдерами < большой разрыв в середине колонки. */
.buy .shead { margin-bottom: var(--sp-4); }
.buy__prog-group + .range { margin-top: calc(var(--sp-7) - var(--sp-4)); }
.buy__prog-group {
  display: grid;
  gap: var(--sp-3);
}
.buy__note {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
  max-width: 44em;
}
/* Линии слайдеров короче колонки: правый край (и значения над ним) не упирается в бирюзовую плашку */
.range { display: grid; gap: var(--sp-2); padding-right: var(--sp-8); transition: opacity 0.3s; }
.range.is-off { opacity: 0.32; }
.range__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); }
.range__head label { font-size: var(--fs-base); color: var(--fg-2); }
.range__head output { font-size: var(--fs-lg); line-height: 1.1; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.range__ctl { position: relative; height: 28px; }
.range__track { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--line-2); }
.range__fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: var(--teal); }
.range input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.range input::-webkit-slider-runnable-track { height: 28px; background: transparent; }
.range input::-moz-range-track { height: 28px; background: transparent; }
.range input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 28px; border: 0; background: var(--paper); clip-path: polygon(46% 0, 100% 0, 54% 100%, 0 100%); transition: background-color 0.2s; }
.range input::-moz-range-thumb { width: 20px; height: 28px; border: 0; border-radius: 0; background: var(--paper); clip-path: polygon(46% 0, 100% 0, 54% 100%, 0 100%); }
.range input:hover::-webkit-slider-thumb, .range input:focus-visible::-webkit-slider-thumb { background: var(--p-sand); }
.range input:focus-visible { outline: none; }
.range input:focus-visible + * , .range__ctl:focus-within .range__track { background: var(--line-2); }
.range__minmax { display: flex; justify-content: space-between; font-size: var(--fs-xs); line-height: 1.2; color: var(--fg-3); margin-top: -2px; }

.buy__result {
  grid-column: 8 / -1;
  align-self: stretch;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-7);
  background: var(--teal);
  color: var(--fg);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 72px, 100% 100%, 22px 100%, 0 calc(100% - 72px));
}
/* Кнопка и дисклеймер прижаты к низу плашки: пустое пространство растёт между таблицей параметров и кнопкой */
.buy__result .btn { margin-top: auto; }
.buy__rhead {
  display: grid;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.buy__rtitle {
  font-size: var(--fs-xs);
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.buy__pay {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-3xl);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.buy__cur {
  font-size: var(--fs-md);
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
}
.buy__rows {
  margin: 0 0 var(--sp-6);
  border-bottom: 1px solid rgba(255, 248, 239, 0.24);
}
.buy__rows > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-top: 1px solid rgba(255, 248, 239, 0.28);
  font-size: var(--fs-base);
  line-height: 1.35;
}
.buy__rows dt { opacity: 0.88; }
.buy__rows dd { margin: 0; font-weight: 600; text-align: right; white-space: nowrap; }
.buy__rnote {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  line-height: 1.45;
  opacity: 0.88;
}
.buy__stripes { position: absolute; left: 0; top: 0; display: flex; width: 46%; height: 7px; }
.buy__stripes i { flex: 1; background: var(--c); }

/* Акцентные карточки способов покупки / преимуществ / инфраструктуры (.way)
   По правилу близости:
   - Межстрочный интервал внутри заголовка .way__title (lh 1.22 ≈ 4px просвета)
     строго меньше расстояния от заголовка до текста (--sp-3 = 12px),
     которое меньше внутреннего padding карточки (--sp-5 = 24px). */
.buy__ways {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-8);
}
.way {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--sp-5);
  background: var(--bg-2);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 40px, 100% 100%, 0 100%);
  transition: background-color 0.3s;
}
.way:hover { background: var(--bg-3); }
.way__icon { display: block; margin-bottom: var(--sp-4); }
.way__icon .i { width: 36px; height: 36px; }
.way__title {
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  font-weight: 600;
  margin-bottom: var(--sp-3);
}
.way__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
@media (max-width: 1023px) {
  .buy__calc, .buy__result { grid-column: 1 / -1; }
  .buy__ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* На мобильном плашка под калькулятором — линии снова на всю ширину */
  .range { padding-right: 0; }
}
@media (max-width: 767px) {
  .buy__programs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--sp-1); }
  .buy__ways { grid-template-columns: 1fr; }
}

/* ---------- 08 / Ход строительства ---------- */
.prog__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-6); row-gap: var(--sp-7); align-items: start; }
.prog__stages { grid-column: 1 / span 5; display: grid; gap: var(--sp-6); }
.stage__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.stage__name { font-size: var(--fs-md); line-height: var(--lh-snug); font-weight: 500; }
.stage__val { font-size: var(--fs-xl); line-height: 1; font-weight: 400; letter-spacing: -0.02em; }
.stage__bar { position: relative; height: 14px; background: var(--bg-2); overflow: hidden; clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.stage__fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); transform-origin: left center; background: var(--teal); }
.stage__sub { margin-top: var(--sp-2); font-size: var(--fs-sm); line-height: 1.4; }
.prog__cam { margin-top: var(--sp-2); }
.prog__slider { grid-column: 7 / -1; min-width: 0; }
.prog__track { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; }
.prog__track::-webkit-scrollbar { display: none; }
.prog__track.is-drag { scroll-snap-type: none; cursor: grabbing; }
.pcard { scroll-snap-align: start; }
.pcard__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
/* Подпись к фото: дата (.pcard__month) прижата к описанию (--sp-1 = 6px), а вся подпись отделена от фото на --sp-4 (16px) */
.pcard figcaption { display: grid; gap: 6px; margin-top: var(--sp-4); }
.pcard__month { font-size: var(--fs-xs); line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--p-sand); }
.pcard__text { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--fg-2); }
.prog__nav { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-5); }
.prog__count { margin-right: auto; font-size: var(--fs-sm); color: var(--fg-3); font-weight: 600; letter-spacing: 0.08em; }
.prog__count span { color: var(--fg); }
@media (max-width: 1023px) {
  .prog__stages, .prog__slider { grid-column: 1 / -1; }
}

/* ---------- 09 / Застройщик (светлая панель) ---------- */
.dev .shead { margin-bottom: var(--sp-7); }
.dev__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-6); row-gap: var(--sp-7); align-items: start; }
.dev__about { grid-column: 1 / span 4; display: grid; gap: var(--sp-4); }
/* Заголовок .dev__name имеет плотный интерлиньяж (--lh-tight = 1.15), чтобы расстояние между строками внутри заголовка (~3.5px) было вчетверо меньше отступа до описания (--sp-4 = 16px) */
.dev__name { font-size: var(--fs-lg); line-height: var(--lh-tight); font-weight: 600; }
.dev__text { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--ink-2); }
.dev__facts { grid-column: 5 / span 4; display: grid; gap: var(--sp-6); }
.dev__facts li { display: grid; grid-template-columns: 18px 1fr; column-gap: var(--sp-3); row-gap: 6px; align-items: baseline; }
.dev__bar { grid-row: span 2; align-self: stretch; width: 12px; min-height: 52px; background: var(--c); clip-path: polygon(100% 0, 50.6% 100%, 0 100%, 49.4% 0); }
.dev__num { font-size: var(--fs-2xl); line-height: 1; font-weight: 400; letter-spacing: -0.025em; white-space: nowrap; }
.dev__unit { font-size: var(--fs-md); font-weight: 500; letter-spacing: 0; }
.dev__ftext { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.35; }
.dev__docs { grid-column: 9 / -1; border-bottom: 1px solid var(--line-ink); }
.doc { display: grid; grid-template-columns: 24px 1fr auto 20px; align-items: center; gap: var(--sp-3); padding: var(--sp-4) 0; border-top: 1px solid var(--line-ink); font-size: var(--fs-base); font-weight: 500; transition: color 0.3s; }
.doc .i { width: 22px; height: 22px; }
.doc > .i:last-child { width: 20px; height: 20px; color: var(--teal); transition: transform 0.4s var(--ease); }
.doc:hover { color: var(--teal); }
.doc:hover > .i:last-child { transform: translateY(3px); }
.doc__meta { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }
@media (max-width: 1023px) {
  .dev__about { grid-column: 1 / -1; }
  .dev__facts { grid-column: 1 / span 6; }
  .dev__docs { grid-column: 7 / -1; }
}
@media (max-width: 767px) {
  .dev__facts, .dev__docs { grid-column: 1 / -1; }
}

/* ---------- 10 / Контакты (бирюзовая панель) ---------- */
.cta-wrap { padding-top: var(--inset); }
.cta { overflow: hidden; }
.cta__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-6); row-gap: var(--sp-7); align-items: center; }
.cta__left { grid-column: 1 / span 6; }
.cta .shead { grid-template-columns: 1fr; row-gap: var(--sp-4); margin-bottom: var(--sp-6); }
.cta .shead__main, .cta .shead__side, .cta .shead .stitle, .cta .shead .stext { grid-column: 1 / -1; padding-top: 0; }
.cta__contacts { display: grid; gap: var(--sp-3); }
.cta__contacts li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-base); line-height: 1.4; }
.cta__contacts .i { width: 20px; height: 20px; flex: 0 0 auto; }
.cta__phone { font-size: var(--fs-xl); line-height: var(--lh-tight); font-weight: 500; letter-spacing: -0.01em; margin-bottom: var(--sp-1); }
.cta__form { grid-column: 8 / -1; }
@media (max-width: 1023px) {
  .cta__left, .cta__form { grid-column: 1 / -1; }
}

/* ---------- Подвал ---------- */
.footer { position: relative; z-index: 1; padding: var(--sp-9) 0 var(--sp-6); }
.footer__logo { color: var(--fg); margin-bottom: var(--sp-8); }
.footer__logo svg { width: 100%; height: auto; overflow: visible; }
.footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-6); row-gap: var(--sp-7); padding-bottom: var(--sp-7); border-bottom: 1px solid var(--line); }
.footer__nav { grid-column: 1 / span 4; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.footer__nav ul { display: grid; gap: var(--sp-3); align-content: start; font-size: var(--fs-base); }
.footer__nav a { color: var(--fg-2); transition: color 0.25s; }
.footer__nav a:hover { color: var(--fg); }
.footer__contacts { grid-column: 5 / span 5; display: grid; gap: var(--sp-2); align-content: start; color: var(--fg-2); font-size: var(--fs-base); }
.footer__phone { color: var(--fg); font-size: var(--fs-lg); line-height: var(--lh-tight); font-weight: 500; margin-bottom: var(--sp-2); }
.footer__side { grid-column: 10 / -1; display: grid; gap: var(--sp-5); justify-items: start; align-content: start; }
.footer__bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-5); padding-top: var(--sp-5); font-size: var(--fs-xs); line-height: 1.45; color: var(--fg-3); }
.footer__legal { max-width: 60em; }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; }
.footer__links a:hover { color: var(--fg); }
.footer__up { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--fg); font-weight: 600; }
.footer__up .i { width: 16px; height: 16px; transition: transform 0.4s var(--ease); }
.footer__up:hover .i { transform: translateY(-3px); }
/* 1024–1279 px: в узкой правой колонке кнопка «Записаться на консультацию» вылезала за край экрана,
   а юридический текст сжимался в столбик — кнопка и соцсети уходят строкой вниз, текст на всю ширину */
@media (max-width: 1279px) {
  .footer__nav { grid-column: 1 / span 5; }
  .footer__contacts { grid-column: 6 / -1; }
  .footer__side { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); }
  .footer__bottom { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) {
  .footer__nav { grid-column: 1 / -1; }
  .footer__contacts { grid-column: 1 / span 7; }
  .footer__side { grid-column: 8 / -1; }
  .footer__bottom { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .footer__contacts, .footer__side { grid-column: 1 / -1; }
}

/* ---------- Дополнительные блоки ЖК «На Бейвеля» по правилу близости ---------- */
.about__rhead, .yard__adv-head, .loc__infra-head {
  display: inline-flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6);
  text-transform: uppercase; letter-spacing: -0.01em;
}

/* Баннер «Планировки сейчас разрабатываются» (Секция 03) */
.flats__banner {
  position: relative; background: var(--paper-2); padding: var(--sp-7);
  border: 1px solid var(--line-ink); overflow: hidden;
}
.flats__banner-stripes {
  position: absolute; left: 0; top: 0; right: 0; height: 7px; display: flex;
}
.flats__banner-stripes i { flex: 1; background: var(--c); }
.flats__banner-in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-6); row-gap: var(--sp-6); align-items: center;
}
/* По правилу близости: статус-бейдж ближе к заголовку (--sp-3 = 12px), заголовок к тексту (--sp-4 = 16px), а кнопка CTA отделена сильнее (--sp-6 = 28px) */
.flats__banner-main {
  grid-column: 1 / span 7;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.flats__status { margin-bottom: var(--sp-3); }
.flats__status .chip { --chip-bg: var(--paper); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-xs); }
.flats__btitle {
  font-size: var(--fs-2xl);
  line-height: var(--lh-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--sp-4);
}
.flats__btext {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
  max-width: 38em;
  margin-bottom: var(--sp-6);
}
.flats__mix {
  grid-column: 8 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--paper);
}
.flats__mix-item {
  display: grid;
  grid-template-columns: 12px 1fr;
  column-gap: var(--sp-3);
  row-gap: var(--sp-1);
  align-items: baseline;
}
.flats__mix-bar {
  grid-row: span 2;
  align-self: stretch;
  width: 10px;
  min-height: 44px;
  background: var(--c);
  clip-path: polygon(100% 0, 50.6% 100%, 0 100%, 49.4% 0);
}
.flats__mix-num { font-size: var(--fs-xl); line-height: 1; font-weight: 500; color: var(--ink); }
.flats__mix-label { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.3; }
@media (max-width: 1023px) {
  .flats__banner-main, .flats__mix { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .flats__mix { grid-template-columns: 1fr; }
  /* «РАЗРАБАТЫВАЮТСЯ» одним словом не помещалось в баннер на телефоне — уменьшены поля и кегль */
  .flats__banner { padding: var(--sp-6) var(--sp-5); }
  .flats__btitle { font-size: clamp(1.375rem, 6.6vw, 1.953rem); overflow-wrap: break-word; }
  .flats__mix { padding: var(--sp-5); }
}

/* Акцентные карточки преимуществ в блоке Двор и Инфраструктура в блоке Локация */
.yard__adv-wrap, .loc__infra-wrap { margin-top: var(--sp-8); }
.yard__ways, .loc__infra { margin-top: 0; }
.ycard__media img { width: 100%; height: 100%; object-fit: cover; }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; }