/* ============================================================================
   UNIT SPACE CITY — v2. Общий CSS для index.html и страниц юнитов (units/*).
   Шапка, меню и переключатель языка работают как на БСО (is-solid после 40px, RU / EN через data-lang + window.setLang,
   бургер → оверлей с inert).
   Дизайн-система: шкала 8px, единый ритм --sy, hover только цветом, второй план
   текста — opacity (.dim), reveal деградирует без JS.
   ========================================================================== */
/* Helvetica Neue файлами (лицензия компании): у всех одинаково, не фолбэк на Arial */
@font-face{font-family:"USC Helvetica Neue";src:url("fonts/helvetica-neue-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"USC Helvetica Neue";src:url("fonts/helvetica-neue-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"USC Helvetica Neue";src:url("fonts/helvetica-neue-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* --vh: в px из site.js, иначе панель Telegram при скролле дёргает высоту хиро и меню */
:root{--vh:1vh}
@supports (height:1svh){ :root{--vh:1svh} }
:root{
  --paper:#F4F4F4; --ink:#3a3a3a; --ink-2:rgba(58,58,58,.75); --line:#e6e6e6; --line-2:#D2D2CE;
  --white:#FFFFFF; --blue:#0433FF; --blue-press:#0327c9; --blue-050:#eef1ff; --err:#c3262e; --wash:#ECECEA;
  --dim:.75;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:56px; --s7:80px;
  --sy:80px; --gap-s:40px; --gap-m:48px; --gap-l:56px; --gap-xl:80px;
  --gut:40px;
  --col:1180px;
  --r:10px; --r-s:8px;
  --hdr:64px;
  /* шесть ступеней текста, значения по ширинам ниже. Других кеглей на сайте нет */
  --fs-display:60px; --fs-title:44px; --fs-h3:32px; --fs-sub:20px; --fs-body:16px; --fs-cap:14px; --fs-map:14px;
  --lh-ui:1.2; --lh-display:1; --lh-title:1.05; --lh-h3:1.15; --lh-sub:1.3; --lh-body:1.5; --lh-cap:1.4;
  --ls-display:-.03em; --ls-title:-.03em; --ls-h3:-.02em; --ls-sub:-.01em; --ls-body:0; --ls-cap:0;
  --font:"USC Helvetica Neue","Helvetica Neue","Helvetica Neue LT","Helvetica","Arial Nova",Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (max-width:1000px){ :root{--fs-display:48px;--fs-title:36px;--fs-h3:28px;--sy:56px;--gut:32px;--fs-map:12px;--gap-s:32px;--gap-m:40px;--gap-l:40px;--gap-xl:56px} }
@media (max-width:760px){ :root{--fs-display:40px;--fs-title:28px;--fs-h3:24px;--fs-sub:18px;--lh-body:1.4;--lh-sub:1.25;--sy:40px;--gut:24px;--gap-s:24px;--gap-m:32px;--gap-l:32px;--gap-xl:32px} }
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:var(--fs-body);
  font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:var(--lh-body);letter-spacing:var(--ls-body)}
body.menu-open,body.lightbox-open{overflow:hidden}
h1,h2,h3,h4,p,figure{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
a,button,label,summary{-webkit-tap-highlight-color:transparent}
ul,ol{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
/* блик-скелет, пока фото не в кеше — снимается в site.js по load/error */
img.is-loading{background:linear-gradient(100deg, var(--wash) 38%, #fff 50%, var(--wash) 62%) var(--wash);background-size:220% 100%;background-repeat:no-repeat;background-position:170% 0;animation:img-shine 1.5s ease-in-out infinite}
@keyframes img-shine{ to{ background-position:-40% 0 } }
@media (prefers-reduced-motion: reduce){ img.is-loading{ animation:none } }
/* <picture> — блочная и во всю высоту контейнера, иначе img height:100% не срабатывает и фото ложится с полями */
picture{display:block;width:100%;height:100%}
table{border-collapse:collapse}
::selection{background:var(--blue);color:#fff}

.container{max-width:var(--col);margin:0 auto;padding-inline:var(--gut)}
main [id]{scroll-margin-top:calc(var(--hdr) + var(--s4))}
.sect{padding-block:var(--sy)}
.sect--alt{background:var(--white)}
/* две секции одного фона подряд: иначе отступы складываются вдвое */
.sect.sect--alt + .sect.sect--alt{padding-top:0}
.dim{opacity:var(--dim)}

/* typography */
.t-h2{font-weight:500;font-size:var(--fs-title);max-width:24ch;line-height:var(--lh-title);letter-spacing:var(--ls-title)}
.t-h3{font-weight:500;font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
/* подзаголовок ≤2 строк, в идеале 1: при 52ch многие вставали в 3 строки */
.t-lead{font-size:var(--fs-sub);max-width:80ch;line-height:var(--lh-sub);letter-spacing:var(--ls-sub)}
.t-small{font-size:var(--fs-cap);line-height:var(--lh-cap);letter-spacing:var(--ls-cap)}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

.sect-head{display:grid;gap:var(--s2);margin-bottom:var(--gap-m)}
.sub-head{margin-block:var(--gap-l) var(--s3)}

/* «подпись | контент» — единая двухколоночная сетка для прозы (about, комплексы,
   локация) и таблицы: левая колонка 1/3, правая 2/3, без линий */
.row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s2) var(--s5);align-items:start}
.rows{display:grid;gap:var(--gap-s)}
.row p{max-width:60ch}
@media (max-width:760px){ .row{grid-template-columns:1fr;gap:var(--s1)} }

/* buttons */
.btn{--h:56px;display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);min-height:var(--h);padding-inline:var(--s3);padding-block:8px;
  border-radius:var(--r);font-size:var(--fs-body);font-weight:500;letter-spacing:0;line-height:var(--lh-ui);text-align:center;border:1.5px solid transparent;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.btn svg{width:16px;height:16px;flex:none}
.btn-primary{background:var(--blue);color:#fff}
.btn-outline{border-color:currentColor}
/* тёмная кнопка «Смотреть виллу» (свой цвет, не синий): Oxford Blue — тёмный из семейства фирменного синего */
/* вторичная кнопка в карточках: без полутоновых заливок —
   белый фон, сплошная синяя обводка и синий текст в полную силу */
.gal-more,.cat-more{
  background:#fff;border-color:var(--blue);color:var(--blue)}
.btn-sm{--h:40px;padding-inline:var(--s2);font-size:var(--fs-cap)}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* иконки — Rune Icons outline, inline-спрайт, наследуют цвет текста */
.ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none}
.btn .ic{width:16px;height:16px}
.lbl{display:inline-flex;align-items:center;gap:var(--s1)}
.lbl .ic{width:16px;height:16px;opacity:.8}
.card > b.lbl,.kv-grid b.lbl{display:flex}
.crumb .ic{width:14px;height:14px}

/* header (логика БСО) 
   прозрачная над хиро, белый текст; после 40px скролла — is-solid: фон+блюр+линия,
   текст тёмный, геометрия не двигается. На внутренних страницах — сразу is-solid. */
.site-header{position:fixed;inset:0 0 auto 0;z-index:80;height:var(--hdr);display:flex;align-items:center;color:#fff;
  border-bottom:1px solid transparent;transition:background .3s,border-color .3s,color .3s}
.site-header.is-solid{background:rgba(244,244,244,.92);background:color-mix(in srgb, var(--paper) 92%, transparent);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border-color:var(--line);color:var(--ink)}
.site-header .container{display:flex;align-items:center;gap:var(--s5);width:100%}
.wordmark{font-size:var(--fs-sub);font-weight:400;white-space:nowrap;line-height:var(--lh-sub);letter-spacing:var(--ls-sub)}
.wordmark i{color:var(--blue);font-style:normal}
.site-header:not(.is-solid) .wordmark i{color:#fff}
.site-nav{display:flex;gap:var(--s3);font-size:var(--fs-cap);font-weight:500}
.site-nav a{opacity:var(--dim);transition:opacity .2s}
.site-nav a.is-active{opacity:1;color:var(--blue)}
/* WhatsApp в шапке: круг в цвет текста шапки, на наведении синий */
.hd-wa{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:50%;color:inherit;
  border:1px solid color-mix(in srgb, currentColor 40%, transparent);transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.hd-wa svg{width:18px;height:18px}
@media (max-width:480px){ .site-header .hd-wa{display:none} }
.header-right{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
/* подпись кнопки в шапке не должна переноситься на две строки (ломает высоту хедера) */
.header-right .btn{white-space:nowrap}
/* дропдауны языка/валюты в шапке (инлайн-кнопки в ряд не тянут 4 значения — свели к 2 селектам) */
.header-selectors{display:flex;align-items:center;gap:4px;font-size:var(--fs-cap);font-weight:500}
.hd-sel{position:relative}
.hd-sel__btn{display:flex;align-items:center;gap:4px;height:32px;padding:0 8px;background:none;border:0;border-radius:var(--r-s);cursor:pointer;color:inherit;opacity:var(--dim);transition:opacity .2s}
.hd-sel.is-open .hd-sel__btn{opacity:1}
.hd-sel__chev{width:14px;height:14px;flex:none;transition:transform .2s var(--ease)}
.hd-sel.is-open .hd-sel__chev{transform:rotate(180deg)}
.hd-sel__pop{position:absolute;right:0;top:calc(100% + 4px);z-index:10;margin:0;padding:4px;list-style:none;min-width:72px;
  background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-s);box-shadow:0 8px 24px rgba(0,0,0,.08);color:var(--ink)}
.hd-sel__pop[hidden]{display:none}
.hd-sel__pop li{padding:8px 12px;border-radius:var(--r-s);cursor:pointer;font-size:var(--fs-body)}
.hd-sel__pop li[aria-selected="true"]{background:var(--blue);color:#fff}
/* бокс 40px, полоски 22px: сдвигаем бокс на (40-22)/2 вправо, чтобы ВИДИМЫЙ край полосок стоял ровно на --gut,
   как вордмарк слева (иначе бургер прилипает к краю) */
.burger{display:none;width:40px;height:40px;margin-right:-8px;border:0;background:none;cursor:pointer;flex-direction:column;
  justify-content:center;align-items:center;gap:4px;position:relative;z-index:101;color:inherit}
.burger span{display:block;width:22px;height:2px;background:currentColor;transition:transform .25s var(--ease),opacity .2s}
body.menu-open .burger{color:var(--ink)}
body.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* 1001-1142px: длинное RU-меню + селекторы + кнопка не влезали, кнопку срезало краем экрана.
   Меню уходит в бургер уже с 1200, кнопка-CTA остаётся видимой до мобильного брейкпоинта */
@media (max-width:1200px){ .site-nav{display:none} .burger{display:flex} }
@media (max-width:1000px){ .site-header .header-right .btn{display:none} }
/* ≤480: вордмарк (nowrap) + язык + бургер не влезали в 390 − 2·gut → header-right выталкивало за правое поле.
   Ужимаем зазоры и язык до 40px-целей, чтобы всё сидело внутри сетки */
@media (max-width:480px){
  .site-header .container{gap:var(--s2)}
  .header-right{gap:var(--s1)}
  .site-header .hd-sel__btn{min-width:40px;min-height:40px}
}

/* мобильное меню — полноэкранный оверлей (паттерн БСО/unit-wp) */
.menu-overlay{position:fixed;inset:0;z-index:90;background:var(--white);color:var(--ink);display:flex;flex-direction:column;
  padding:0 var(--gut) var(--gut);transform:translateY(-100%);visibility:hidden;transition:transform .5s var(--ease),visibility 0s .5s}
body.menu-open .menu-overlay{transform:none;visibility:visible;transition:transform .5s var(--ease),visibility 0s}
.menu-head{flex:none;height:var(--hdr);display:flex;align-items:center;justify-content:space-between}
/* меню целиком в один экран на любой высоте телефона: размер пунктов и зазоры от высоты экрана */
.menu-list{display:grid;gap:clamp(8px,calc(var(--vh)*1.8),16px);margin-top:clamp(16px,calc(var(--vh)*3),32px);font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:500;letter-spacing:-.02em}
.menu-foot{flex:none;margin-top:auto;padding-top:clamp(16px,calc(var(--vh)*3),32px);display:grid;gap:clamp(16px,calc(var(--vh)*2.4),24px)}
.menu-overlay{overflow-y:auto}
.menu-foot .header-selectors{font-size:var(--fs-body)}
.menu-foot .btn{width:100%}
.menu-cta{display:flex;gap:var(--s1)}
.menu-cta .btn-primary{flex:1 1 auto}
.menu-foot .menu-wa{flex:none;width:56px;padding:0;color:var(--ink)}
.menu-wa svg{width:22px;height:22px}

/* ================================================================
   HERO: медиа на весь экран; заголовок 2 строки внизу слева;
   медиа-карточка (у нас карта) внизу справа с подписью и круглой стрелкой;
   под фото — полоса мини-статов капсом на всю ширину. Без кнопок/абзацев.
   ================================================================ */
.hero{position:relative;min-height:100vh;min-height:calc(var(--vh)*100);display:flex;flex-direction:column;justify-content:flex-end;color:#fff;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(10,11,13,.35) 0%, rgba(10,11,13,.15) 22%, rgba(10,11,13,.55) 55%, rgba(10,11,13,.86) 100%)}
.hero__content{width:100%;padding-top:calc(var(--hdr) + var(--s5));padding-bottom:var(--gap-s);
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4)}
.hero__content > div:first-child{flex:1 1 auto;min-width:0}
.hero__title{font-weight:500;font-size:var(--fs-display);max-width:23ch;text-wrap:balance;text-transform:uppercase;line-height:var(--lh-display);letter-spacing:var(--ls-display)}
.hero__sub{margin-top:var(--s2);font-size:var(--fs-sub);max-width:60ch;opacity:.82;line-height:var(--lh-sub);letter-spacing:var(--ls-sub)}
/* плашка над заголовком: белый фон, тёмный текст, шрифт не крупнее подзаголовка; прямоугольник со скруглением, не пилюля */
.hero__badge{display:flex;align-items:center;width:max-content;height:32px;padding:0 12px;margin-bottom:var(--s3);border-radius:var(--r-s);background:#e4e4e4;color:var(--ink);font-size:var(--fs-body);font-weight:500;line-height:var(--lh-ui)}
/* кнопки хиро: отделены от подзаголовка бо́льшим шагом, чем подзаголовок от заголовка */
.hero__ctas{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.btn-glass{border-color:rgba(255,255,255,.7);color:#fff}
@media (max-width:820px){ .hero__ctas{margin-top:var(--s4)} }
@media (max-width:480px){ .hero__ctas .btn{flex:1 1 100%} }
@media (max-width:820px){
  .hero__content{flex-direction:column;align-items:stretch;gap:var(--s3)}
  /* заголовок чуть крупнее (3 строки держим), подзаголовок мельче */
  .hero__title{font-size:min(var(--fs-display),calc((100vw - 48px) / 8.6));letter-spacing:-.03em}
  .hero__sub{margin-top:var(--s2);font-size:var(--fs-body);max-width:36ch;line-height:var(--lh-body);letter-spacing:var(--ls-body)}
  .hero__badge{height:28px;font-size:var(--fs-cap);margin-bottom:var(--s2)}
}

/* cookie */
/* обособленная карточка внизу справа, не полоса на всю ширину */
.consent-bar{position:fixed;right:var(--gut);bottom:var(--gut);left:auto;z-index:60;display:grid;gap:var(--s2);
  width:min(360px, calc(100vw - 2 * var(--gut)));padding:var(--s3);border-radius:var(--r);
  background:var(--white);box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(24px);opacity:0;
  transition:transform .5s var(--ease),opacity .5s var(--ease)}
.consent-bar.in{transform:translateY(0);opacity:1}
.consent-bar p{font-size:var(--fs-cap);line-height:var(--lh-cap);letter-spacing:var(--ls-cap)}
.consent-bar a{text-decoration:underline}
.consent-bar .btn{width:100%;justify-content:center}
@media (prefers-reduced-motion: reduce){ .consent-bar{transition:none} }

/* карточка — бренд-элемент: заливка, r10, без рамок/теней */
.card{background:var(--white);border-radius:var(--r);padding:var(--s3);display:grid;gap:var(--s1);align-content:start}
.sect--alt .card{background:var(--paper)}
.card > b,.card > h3{font-size:var(--fs-sub);font-weight:500;line-height:var(--lh-sub);letter-spacing:var(--ls-sub)}
.card > p{font-size:var(--fs-body);opacity:var(--dim);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
/* фото в карточке — внутри паддинга, с полем от края, скругление r-s */
.card__ph{height:clamp(160px,16vw,240px);margin:0 0 var(--s2);border-radius:var(--r-s);overflow:hidden;background:var(--wash)}
.card__ph img{width:100%;height:100%;object-fit:cover;display:block}
.card--dark{background:var(--ink);color:#fff}
.sect--alt .card--dark{background:var(--ink)}
/* фото на весь фон карточки, текст поверх снизу  */
.card--photobg{position:relative;padding:0;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(280px,26vw,360px)}
.card--photobg .card__ph{position:absolute;inset:0;margin:0;border-radius:0;height:100%;background:none}
.card--photobg .card__ph picture{display:block;width:100%;height:100%}
.card--photobg .card__ph img{width:100%;height:100%;object-fit:cover}
.card--photobg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 15%,rgba(10,11,13,.55) 45%,rgba(10,11,13,.88) 100%);pointer-events:none}
.card--photobg > b{position:relative;z-index:1;padding:0 var(--s3)}
.card--photobg > p{position:relative;z-index:1;margin:0;padding:8px var(--s3) var(--s3);opacity:1;color:rgba(255,255,255,.88)}
.card-grid{display:grid;gap:var(--s2)}
.card-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card-grid--3{grid-template-columns:repeat(3,1fr)}
.card-grid--4{grid-template-columns:repeat(4,1fr)}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
@media (max-width:820px){ .card-grid--3,.card-grid--4,.bento{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .card-grid--2,.card-grid--3,.card-grid--4,.bento,.bento-2{grid-template-columns:1fr} }
/* акцентная карточка-блок — синяя заливка, чтобы бросалась в глаза (концепция комплекса) */
/* .sect--alt .card{background:paper} специфичнее одного класса — .card--accent проигрывал и синий
   фон не применялся (карточка была серой, текст еле читался) */
.sect--alt .card.card--accent,.card--accent{background:var(--blue);color:#fff;padding:var(--gap-l)}
.card--accent h3{color:#fff}
.card--accent p{opacity:.88}
/* числа в заголовках — синим (кроме
   текста поверх фото: там остаётся белый) */
.accent{color:var(--blue)}
.stat-card{background:var(--white);border-radius:var(--r);padding:var(--s3);min-height:clamp(168px,17vw,232px);display:flex;flex-direction:column}
.sect--alt .stat-card{background:var(--paper)}
@media (max-width:520px){ .stat-card{min-height:0} }

/* full-bleed photo band (баннер, вне ритма --sy) */
.photo-band{position:relative;height:clamp(420px,60vw,760px);overflow:hidden;margin:0;background:var(--wash)}
.photo-band img{width:100%;height:100%;object-fit:cover}
/* полоса — слайдер с кроссфейдом и подписью на кадр (как хиро, только мельче): заголовок cap 500, подзаголовок cap dim */
.photo-band__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease)}
.photo-band__slide.is-in{opacity:1}
.photo-band__slide::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(180deg,transparent,rgba(10,11,13,.55))}
.photo-band figcaption{position:absolute;z-index:1;left:max(var(--gut),calc((100% - var(--col)) / 2 + var(--gut)));right:var(--gut);bottom:calc(clamp(24px,3vw,40px) + var(--s3));color:#fff;display:grid;gap:4px;max-width:44ch}
.photo-band figcaption b{font-size:var(--fs-sub);font-weight:500;line-height:var(--lh-sub);letter-spacing:var(--ls-sub)}
.photo-band figcaption span{font-size:var(--fs-cap);opacity:.82;line-height:var(--lh-cap);letter-spacing:var(--ls-cap)}
.photo-band .dots{left:max(var(--gut),calc((100% - var(--col)) / 2 + var(--gut)));bottom:clamp(24px,3vw,40px);transform:none}
.photo-band .ugal__arrow{z-index:2}
.photo-band .ugal__arrow--prev{left:var(--s3)}
.photo-band .ugal__arrow--next{right:var(--s3)}
/* мобилка: подпись поднята над точками, стрелки ближе к краю */
@media (max-width:760px){
  .photo-band{height:clamp(360px,90vw,520px)}
  .photo-band figcaption{right:var(--gut);bottom:calc(var(--s3) + var(--s3))}
  .photo-band .dots{bottom:var(--s3)}
  .photo-band .ugal__arrow--prev{left:var(--s2)}
  .photo-band .ugal__arrow--next{right:var(--s2)}
}
@media (prefers-reduced-motion:reduce){ .photo-band__slide{transition:none} }

/* complexes: слайдер на всю ширину, переключение кнопками U1/U2/U3 
   слайды лежат в одной grid-ячейке; активный — на месте, соседи уезжают за край экрана */
.complex-nav{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:var(--hdr);z-index:20}
.complexes{position:relative}
.complex-nav .container{display:flex;gap:var(--s1);align-items:stretch;position:relative;padding-block:var(--s2)}
/* сегментированный переключатель на всех брейкпоинтах (активная кнопка — синяя
   заливка). Раньше на десктопе был текстовый таб с ink-подчёркиванием — убрано в пользу
   единого паттерна с мобилкой, заливка cvetom читается сразу, анимировать нечего. */
.complex-nav button{background:var(--white);border:0;cursor:pointer;padding:12px var(--s3);border-radius:var(--r-s);font-size:var(--fs-sub);font-weight:500;letter-spacing:-.02em;opacity:1;color:inherit;transition:background .18s var(--ease),color .18s var(--ease)}
.complex-nav button b{color:var(--blue);font-weight:500}
.complex-nav button[aria-selected="true"]{background:var(--blue);color:#fff}
.complex-nav button[aria-selected="true"] b{color:#fff}
.complex-nav .ink{display:none}
/* шайн на неактивных U2/U3 до первого переключения — тот же, что у загрузки фото (img-shine), только синий;
   рябь кольцами вышла слишком сильной */
.complex-nav button{position:relative;overflow:hidden}
.complex-nav:not(.is-touched) button[aria-selected="false"]::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 40%,rgba(4,51,255,.08) 50%,transparent 60%);background-size:220% 100%;background-repeat:no-repeat;background-position:170% 0;
  animation:cx-shine 5s ease-in-out infinite}
/* по очереди, не одновременно: проход 1.8 с = 36% от цикла 5 с; второй таб стартует, когда первый закончил; дальше пауза */
.complex-nav:not(.is-touched) button[aria-selected="false"] ~ button[aria-selected="false"]::before{animation-delay:1.8s}
@keyframes cx-shine{0%{background-position:170% 0}36%,100%{background-position:-40% 0}}
@media (prefers-reduced-motion:reduce){ .complex-nav button::before{animation:none!important} }
@media (max-width:640px){
  .complex-nav .container{gap:8px;padding-block:var(--s1)}
  .complex-nav button{flex:1 1 0;padding:12px 4px;text-align:center;font-size:var(--fs-cap);min-height:44px}
  .complex-nav button span{display:none}
}
.complex{grid-area:1/1;padding-block:var(--s2) var(--sy);transition:transform .6s var(--ease),opacity .6s var(--ease)}
.complex[data-state="prev"]{transform:translateX(-100%);opacity:0;pointer-events:none}
.complex[data-state="next"]{transform:translateX(100%);opacity:0;pointer-events:none}
.complex[data-state="active"]{transform:none;opacity:1}
.complex:not([data-state="active"]){visibility:hidden;transition:transform .6s var(--ease),opacity .6s var(--ease),visibility 0s .6s}
.complex__title{font-weight:500;font-size:var(--fs-title);line-height:var(--lh-title);letter-spacing:var(--ls-title)}
.complex .stat-card{min-height:clamp(160px,13vw,200px)}

@media (max-width:820px){
  .complex .stat-card{min-height:0;padding:var(--s2)}
  
}
/* статус комплекса прямо в табе */
.cx-st{display:inline-flex;align-items:center;height:24px;padding:0 var(--s1);margin-left:var(--s1);border-radius:var(--r-s);vertical-align:3px;
  font-size:var(--fs-cap);font-weight:500;letter-spacing:0;background:var(--blue-050);color:var(--blue)}
.cx-st--build{background:var(--wash);color:#5E5E64}
.complex-nav button[aria-selected="true"] .cx-st{background:rgba(255,255,255,.2);color:#fff}
@media (max-width:640px){
  .complex-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 4px}
  .cx-st{margin-left:0;height:24px}
}
/* коллаж комплекса — бенто как на БСО: 4 колонки × 2 ряда фиксированной высоты, крупные тайлы = span ячеек,
   на всю ширину контейнера; на мобиле — горизонтальная лента со snap */
.complex__gallery{margin-top:var(--gap-l);display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(200px,20vw,296px);gap:var(--s2)}
.complex__gallery figure{overflow:hidden;border-radius:var(--r);background:var(--wash);margin:0}
.complex__gallery img{width:100%;height:100%;object-fit:cover;display:block}
/* «Показать ещё» — доп. фото коллажа скрыты на десктопе до клика, докладываются в ту же сетку;
   на мобиле лента и так одна (см. ниже), скрывать нечего (убрали отдельную «Галерею проекта») */
@media (min-width:801px){ .complex__gallery .tile-more{display:none} .complex__gallery.is-expanded .tile-more{display:block} }
@media (max-width:800px){
  /* scroll-padding = gut: без него snap прижимал кадры к краю экрана, а не к общей левой границе;
     кадр крупнее — на ширину контента, следующий выглядывает на 32px */
  .complex__gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);gap:var(--s1);margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
  .complex__gallery::-webkit-scrollbar{display:none}
  .complex__gallery figure{flex:0 0 calc(100% - 2 * var(--gut) - 32px);aspect-ratio:1/1;scroll-snap-align:start;grid-column:auto;grid-row:auto}
  /* на мобиле лента и так одна, со всеми фото — кнопке «Показать ещё» нечего показывать */
  .gal-more{display:none}
}
@media (prefers-reduced-motion:reduce){ .complex,.complex-track{transition:none} }

/* о компании — паттерны unitdeveloper.com */
/* карточки компаний были слишком раздутые — горизонтальная лента вместо
   grid 4×1: карточки мельче, свайп читается по «выглядывающей» следующей карточке
   (тот же паттерн, что и мобильная лента .complex__gallery) */
.co-strip{display:flex;gap:var(--s2);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding-bottom:4px}
.co-strip::-webkit-scrollbar{display:none}
.co-strip .co-card{flex:0 0 clamp(200px,24vw,260px);scroll-snap-align:start}
/* UNIT.DEVELOPER — материнская компания: синяя карточка-группа, внутри четыре дочерние.
   Внутри группы: с 1100 — 4 в ряд (колонка ≥161px под UNIT.FURNITURE), 761–1099 — 2×2, уже — свайп-лента. minmax(0,1fr) + subgrid:
   колонки равные, заголовок/подпись/текст/фото на одних линиях */
.co-group{background:var(--blue);color:#fff;border-radius:var(--r);padding:var(--s4);display:grid;gap:var(--s4)}
/* текст под заголовком, а не колонкой справа: там он висел сам по себе */
.co-group__head{display:grid;gap:var(--s1);justify-items:start}
.co-group__title{font-size:var(--fs-h3);font-weight:400;line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
.co-group__sub{font-size:var(--fs-body);font-weight:400;line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.co-group__head p{margin:var(--s1) 0 0;max-width:68ch;text-wrap:balance;font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.co-group__head,.co-group__head p,.co-group__head i{color:#fff}
.co-group .co-strip .card{background:var(--white);color:var(--ink)}
@media (min-width:761px){
  .co-group .co-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,auto auto 1fr auto);overflow:visible;padding-bottom:0}
  .co-group .co-strip .co-card{flex:none;grid-row:span 4;grid-template-rows:subgrid}
}
@media (min-width:1100px){
  .co-group .co-strip{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto 1fr auto}
}
@media (max-width:760px){
  .co-group{padding:var(--s2);gap:var(--s3)}
  .co-group .co-strip{margin-inline:calc(-1 * var(--s2));padding-inline:var(--s2);scroll-padding-inline:var(--s2)}
  .co-group .co-strip .co-card{flex:0 0 calc(78% - var(--s1))}
}
.co-card > b i{color:var(--blue);font-style:normal}
.co-card__sub{font-size:var(--fs-body);margin-top:-4px;line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.co-card{grid-template-rows:auto auto 1fr auto;padding:var(--s2)}
.co-card__photo{margin:0;padding-top:var(--s2);align-self:end}
.co-card__photo picture{display:block;border-radius:var(--r-s);overflow:hidden;aspect-ratio:4/3;background:var(--wash)}
.co-card__photo img{width:100%;height:100%;object-fit:cover}
.team-card__photo picture{display:block;width:100%;height:100%}
.team-card__photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.tr-card{grid-template-columns:120px minmax(0,1fr);gap:var(--s2) var(--s3);align-items:start}
.tr-card__photo{margin:0;width:120px;aspect-ratio:1;border-radius:var(--r-s);overflow:hidden;background:var(--white)}
.tr-card__photo picture{display:block;width:100%;height:100%}
.tr-card__photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.tr-card__photo--flags{display:grid;place-items:center;color:var(--blue);font-size:var(--fs-title);font-weight:500;line-height:var(--lh-title);letter-spacing:var(--ls-title)}
/* Dome Foundation / Permata Bank — своих лого-файлов нет, текстовый воркмарк вместо фото */
/* реальные лого Dome Foundation / Permata Bank (взяты с unitdeveloper.com), не текст-плейсхолдер */
.tr-card__photo--logo{display:grid;place-items:center;background:var(--white)}
.tr-card__photo--logo .dome-svg{width:76%;height:auto}
.tr-card__photo--logo .permata-img{width:52%;height:auto;display:block}
/* Obsidian Wellness Living — своего лого-файла нет, текстовый воркмарк (как Dome/Permata) */
.obsidian-logo{display:grid;justify-items:center;gap:4px;text-align:center;font-weight:500;font-size:12px;letter-spacing:.02em;line-height:1.15;color:var(--ink)}
.obsidian-logo small{font-size:7px;font-weight:400;letter-spacing:.12em;opacity:var(--dim)}
.tr-card__body{display:grid;gap:var(--s1);min-width:0}
.tr-card .ul{white-space:normal}
.tr-card__body > b{font-size:var(--fs-sub);font-weight:500;line-height:var(--lh-sub);letter-spacing:var(--ls-sub)}
.tr-card__role{font-size:var(--fs-body);margin-top:-4px;line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.tr-card__body > p{font-size:var(--fs-body);opacity:var(--dim);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
@media (max-width:520px){ .tr-card{grid-template-columns:1fr} }
/* узкие карточки рядом: тексту остаётся меньше 100px, ставим по одной в ряд */
@media (max-width:760px){ .tr-grid{grid-template-columns:minmax(0,1fr)} }

/* форматы — карточка формата: фото с чипом метража, имя + цена, строки с лидерами, планировка + ссылка */
.fmt-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.fmt-grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){ .fmt-grid--3{grid-template-columns:1fr 1fr} }
.fmt-card{gap:var(--s2);color:inherit}
.fmt-card__media{display:block;position:relative;aspect-ratio:16/10;border-radius:var(--r-s);overflow:hidden;background:var(--wash)}
.fmt-card__media picture{display:block;width:100%;height:100%}
.fmt-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);-webkit-user-drag:none}
/* мини-галерея: обложка в потоке, остальные кадры поверх с кроссфейдом; стрелки и точки — как в барабане юнита */
.fmt-card__gal{position:relative}
.fmt-card__gal .fmt-card__media{touch-action:pan-y}
.fmt-card__media picture + picture{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease)}
.fmt-card__media picture.is-in{opacity:1}
.fmt-card__gal .ugal__arrow{z-index:2}
@media (prefers-reduced-motion:reduce){ .fmt-card__media picture + picture{transition:none} }
/* больше воздуха между head/rows/foot, внутри карточки было тесно */
.fmt-card__body{display:grid;gap:var(--s3)}
.fmt-card__head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s2)}
.fmt-card__head > div{display:grid;gap:4px}
.fmt-card__name{font-size:var(--fs-h3);font-weight:500;line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
.fmt-card__rows{font-size:var(--fs-body);display:grid;gap:var(--s1);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.fmt-card__rows > div > span{opacity:var(--dim)}
.fmt-card .fmt-card__rows > div > b{text-align:right;max-width:60%;white-space:normal}
/* низ карточки, и на десктопе тоже: чип планировки — обычная 40px-пилюля, а не 120×80 бокс; чип цены переехал
   сюда из шапки карточки; ниже — 2 явные кнопки: «Подробнее» (переход на страницу юнита) и «Заявка»
   (карточка сама больше не ссылка целиком, фото — отдельная ссылка на детали) */
.fmt-card__foot{display:flex;align-items:baseline;gap:var(--s2);margin-top:var(--s1)}
.fmt-card .product-card__price,.avail-card__price{font-size:var(--fs-h3);font-weight:500;color:var(--blue);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
.fmt-card__actions{display:grid;grid-template-columns:1fr;gap:var(--s1)}
.fmt-card__actions .btn{justify-content:center}
@media (max-width:820px){ .fmt-grid{grid-template-columns:1fr} }
/* узко: строки остаются «подпись … значение» с лидером до конца, значение переносится справа */
@media (max-width:520px){ .fmt-card .fmt-card__rows{font-size:var(--fs-cap);line-height:var(--lh-cap);letter-spacing:var(--ls-cap)} .fmt-card .fmt-card__rows > div > b{max-width:58%} }
.product-card{display:grid;gap:var(--s1);align-content:start;color:inherit}
/* карточка каталога в том же виде, что карточка формата: панель .card, фото с полем, 16:10, r-s, имя и цена 20px, синяя кнопка */
.product-card.card{gap:var(--s2)}
/* метраж — чип-пилюля на фото, слева сверху; в подписи остаётся только название */
.product-card__area{position:absolute;left:var(--s2);top:var(--s2);z-index:1;display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--r-s);background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--ink);font-size:var(--fs-cap);font-weight:500;font-variant-numeric:tabular-nums}
/* «Доступно: N вилл» — чип справа сверху, вид как у метража */
.product-card__area--n{left:auto;right:var(--s2)}
/* узкий кадр (3 карточки на ~1100): чипы сходились впритык — второй уходит под метраж */
.fmt-card__media{container-type:inline-size}
@container (max-width:304px){ .product-card__area--n{right:auto;left:var(--s2);top:calc(var(--s2) + 36px)} }
.product-card__meta{font-size:var(--fs-cap);line-height:var(--lh-cap);letter-spacing:var(--ls-cap)}
/* цена — текст, а не синий чип: чип читался как кнопка */
.product-card__price{flex:none;display:inline-flex;align-items:baseline;color:var(--ink);font-size:var(--fs-body);font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums;line-height:var(--lh-body);letter-spacing:var(--ls-body)}
/* узкая карточка (3 в ряд на 900–1199): название и цена в одну строку не влезали, «1+1 спальня» переносилось
   и ряды разъезжались. Порог по ширине самой карточки — весь ряд перестраивается разом */
@media (min-width:901px){
  .product-card{container-type:inline-size}
}
/* мобилка: 2 в ряд (одна — слишком крупно); цена уходит под имя строкой */
@media (max-width:520px){
  .product-card__area{left:var(--s1);top:var(--s1);height:26px;padding:0 12px;font-size:var(--fs-cap)}
  .product-card__area--n{left:auto;right:var(--s1)}
  .product-card.card{padding:var(--s1);gap:var(--s1)}
}
.chip,.cat-ft{height:40px;padding:0 var(--s2);display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r);background:var(--white);font-size:var(--fs-cap);cursor:pointer;transition:border-color .16s,color .16s,background .16s}
.chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.calc{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);background:var(--white);border-radius:var(--r);padding:var(--gap-s)}
.sect--alt .calc{background:var(--paper)}
.calc__inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);align-content:start}
/* подпись в соседней колонке может уйти на 2 строки: поля прижимаем к низу, чтобы стояли на одном уровне */
.calc .field{display:grid;gap:var(--s1);align-content:end}
.calc label{font-size:var(--fs-cap);line-height:var(--lh-cap);letter-spacing:var(--ls-cap)}
/* цена виллы на странице юнита — фиксирована, менять нельзя */
/* кнопка «выбрать тип виллы» — подставляет цену конкретного формата в калькулятор */
.calc__picker{grid-column:1/-1;position:relative}
.calc__picker-panel{position:absolute;top:calc(100% + var(--s1));left:0;right:0;z-index:5;display:grid;gap:var(--s1);padding:var(--s1);background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-s);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.calc__picker-panel[hidden]{display:none}
#calcPickerBtn b{font-weight:500}
#calcPickerBtn{justify-content:space-between;text-align:left}
.calc__pick-t{min-width:0}
.calc__chev{flex:none}
.calc__pick-c{font-style:normal}
/* мобила: подпись мелко сверху, выбранный формат под ней — длинное «Вилла 3+1 с бассейном» не рвёт строку посередине */
@media (max-width:760px){ #calcPickerBtn{width:100%;--h:56px;padding-block:8px} .calc__pick-t{display:flex;flex-direction:column;gap:4px} .calc__pick-t > span{font-size:var(--fs-cap);font-weight:400;opacity:var(--dim);line-height:var(--lh-cap);letter-spacing:var(--ls-cap)} .calc__pick-c{display:none} #calcPickerBtn b{font-size:var(--fs-body)} }
.calc__chev{transition:transform .2s var(--ease)}
#calcPickerBtn[aria-expanded="true"] .calc__chev{transform:rotate(180deg)}
.calc__pick-card{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);width:100%;padding:var(--s2);border:0;border-radius:var(--r-s);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .16s var(--ease)}
.calc__pick-card.is-active{background:var(--blue);color:#fff}
.calc__pick-card b{font-weight:500}
.calc__pick-card span{font-size:var(--fs-cap);opacity:var(--dim);line-height:var(--lh-cap);letter-spacing:var(--ls-cap)}
.calc__out{display:grid;align-content:center;gap:var(--s2)}
/* строки правой колонки выравниваются по нижнему краю строк полей слева.
   На unit-странице нет .calc__picker — на 1 строку полей меньше, чем на главной. */
@media (min-width:801px){
  .calc:has(.calc__picker){grid-template-rows:auto auto auto}
  .calc:not(:has(.calc__picker)){grid-template-rows:auto auto}
  .calc__inputs{grid-row:1/-1;grid-template-rows:subgrid}
  .calc__out{grid-template-rows:subgrid;align-content:stretch}
  .calc:has(.calc__picker) .calc__out{grid-row:2/4}
  .calc:not(:has(.calc__picker)) .calc__out{grid-row:1/3}
  .calc__roi,.calc__rows{align-self:end}
}
.calc__roi{display:flex;align-items:baseline;gap:var(--s2)}
.calc__roi b{font-weight:500;color:var(--blue);font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
.calc__roi span{font-size:var(--fs-cap);line-height:var(--lh-cap);letter-spacing:var(--ls-cap)}
/* гросс-доход и доход после комиссии — крупнее, в своих карточках внутри общей карточки калькулятора */
.calc__rows{display:grid;gap:var(--s1);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.calc__rows b{font-weight:500;font-variant-numeric:tabular-nums;color:var(--blue)}
.calc__note{grid-column:1/-1;margin-top:0}
@media (max-width:800px){ .calc{grid-template-columns:minmax(0,1fr)} }
@media (max-width:460px){ .calc__inputs{grid-template-columns:1fr} }

/* location */
.location-map{border-radius:var(--r);overflow:hidden;background:var(--white)}
.sect--alt .location-map{background:var(--paper)}
.row > .card{align-self:stretch}
.ph{background:var(--wash);border-radius:var(--r)}
.ph--map{aspect-ratio:16/10}
.ph--plan{aspect-ratio:4/3;max-width:520px}
.location-map figcaption{padding:var(--s1) var(--s2);font-size:var(--fs-cap);line-height:var(--lh-cap);letter-spacing:var(--ls-cap)}
/* карта — живой embed, серый под бренд; карточка инфраструктуры: фото слева, чипы справа */
.location-map__img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
/* на десктопе (2 колонки бенто) карта растягивается вровень с левой карточкой, а не по своему aspect-ratio — иначе не дотягивает до низа */
@media (min-width:761px){ .location-map{height:100%} .location-map__img{height:100%;aspect-ratio:auto} }
/* живая карта OpenFreeMap поверх SVG (чистая, без кнопок, подсказок и лишних точек); SVG остаётся запасным и для alt */
.location-map__box{position:relative;aspect-ratio:16/10;background:var(--wash)}
.location-map__box .location-map__img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.location-map__box .location-map__live{position:absolute;inset:0;opacity:0;transition:opacity .4s}
.location-map__box.is-live .location-map__live{opacity:1}
.location-map__live .maplibregl-ctrl-attrib{font-size:11px;background:rgba(255,255,255,.8)}
.map-pin{display:flex;align-items:center;gap:var(--s1);pointer-events:none}
.map-pin__dot{width:20px;height:20px;border-radius:50%;background:var(--blue);border:3px solid var(--white);box-shadow:0 1px 4px rgba(0,0,0,.25);flex:none}
.map-pin__lbl{background:var(--white);color:var(--ink);font-size:var(--fs-cap);line-height:var(--lh-ui);padding:var(--s1) 12px;border-radius:var(--r-s);box-shadow:0 1px 4px rgba(0,0,0,.12);white-space:nowrap}
/* второстепенные точки (Nuanu, пляж, Tanah Lot, Canggu): белый чип и тёмная точка, тише основного пина */
.map-poi{display:flex;align-items:center;gap:8px;pointer-events:none}
.map-poi--l{flex-direction:row-reverse}
.map-poi__dot{width:10px;height:10px;border-radius:50%;background:var(--ink);border:2px solid var(--white);flex:none}
.map-poi__lbl{background:var(--white);color:var(--ink);font-size:var(--fs-cap);line-height:var(--lh-ui);padding:var(--s1);border-radius:var(--r-s);box-shadow:0 1px 3px rgba(0,0,0,.1);white-space:nowrap}
@media (max-width:760px){ .location-map__box{aspect-ratio:4/5} }
@media (max-width:520px){ .map-poi__lbl{font-size:var(--fs-map);padding:4px 8px} .map-pin__lbl{font-size:var(--fs-map)} }
.has-pop .map-pin__lbl,.has-pop .map-poi__lbl{pointer-events:auto;cursor:pointer}
.map-pop{position:absolute;top:0;left:0;width:280px;padding-bottom:var(--s1);background:var(--white);color:var(--ink);border-radius:var(--r-s);box-shadow:0 8px 24px rgba(0,0,0,.18);pointer-events:auto;cursor:default;visibility:hidden;clip-path:inset(var(--ct,0) var(--cr,0) var(--cb,0) var(--cl,0) round var(--r-s));transition:clip-path .26s cubic-bezier(.4,0,.2,1),visibility 0s linear .26s}
.is-open > .map-pop{visibility:visible;clip-path:inset(0 0 0 0 round var(--r-s));transition:clip-path .42s cubic-bezier(.2,.8,.2,1)}
.map-pop__gal{opacity:0;transition:opacity .2s linear}
.is-open > .map-pop .map-pop__gal{opacity:1;transition:opacity .3s linear .08s}
.map-pop__t{font-size:var(--fs-cap);line-height:var(--lh-ui);white-space:nowrap}
.map-pop--r .map-pop__t{text-align:right}
.map-pop{will-change:clip-path}
.map-pop--up{display:flex;flex-direction:column-reverse;padding:var(--s1) 0 0}
.map-pop__gal{position:relative;margin:0 var(--s1);aspect-ratio:4/3;border-radius:var(--r-s);overflow:hidden;background:var(--wash)}
.map-pop__gal picture{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease)}
.map-pop__gal picture.is-in{opacity:1}
.map-pop__gal img{width:100%;height:100%;object-fit:cover;display:block}
.map-pop__gal .ugal__arrow{z-index:2}
.map-pop__gal .ugal__arrow--prev{left:var(--s1)}
.map-pop__gal .ugal__arrow--next{right:var(--s1)}
@media (max-width:520px){ .map-pop{width:224px} .map-pop__t{font-size:var(--fs-map)} }
@media (prefers-reduced-motion:reduce){ .map-pop,.is-open > .map-pop,.map-pop__gal,.is-open > .map-pop .map-pop__gal,.map-pop__gal picture{transition:none} }
.nw{white-space:nowrap}
@keyframes plan-nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

/* team: имя и роль над фото */
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2)}
/* карточка основателя: фото слева фиксированной ширины, имя/роль и био справа — сетка без пустых колонок
   (RU — две карточки в ряд, EN — одна на всю ширину через .team-card--wide) */
.team-card{grid-template-columns:200px 1fr;grid-template-rows:auto 1fr;grid-template-areas:"photo head" "photo bio";gap:var(--s2) var(--s3)}
.team-card > div:first-child{grid-area:head}
.team-card__name{font-size:var(--fs-sub);font-weight:500;line-height:var(--lh-sub);letter-spacing:var(--ls-sub)}
.team-card__role{font-size:var(--fs-cap);margin-top:4px;opacity:var(--dim);line-height:var(--lh-cap);letter-spacing:var(--ls-cap)}
.team-card__photo{grid-area:photo;aspect-ratio:4/5;border-radius:var(--r-s);overflow:hidden;background:var(--wash);display:grid;place-items:center;color:var(--blue);font-weight:500;font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
.team-card__bio{grid-area:bio;align-self:start;font-size:var(--fs-body);max-width:52ch;line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.team-card--wide{grid-column:1/-1;grid-template-columns:240px 1fr}
.team-card--wide .team-card__name{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
.team-card--wide .team-card__role{font-size:var(--fs-body);margin-top:var(--s1);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.team-card--wide .team-card__bio{font-size:var(--fs-sub);line-height:var(--lh-sub);letter-spacing:var(--ls-sub)}
@media (max-width:900px){ .team-grid{grid-template-columns:1fr} }
@media (max-width:520px){ .team-card,.team-card--wide{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"head" "photo" "bio"} }
/* FAQ как на БСО: кнопка-карточка на всю ширину, ответ раскрывается под ней (grid 0fr→1fr) */
.faq-list{display:grid;gap:var(--s1)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);width:100%;padding:var(--s3);text-align:left;border:1px solid var(--line);border-radius:var(--r);background:var(--white);color:var(--ink);
  font-size:var(--fs-sub);font-weight:500;cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease);line-height:var(--lh-sub);letter-spacing:var(--ls-sub)}
.sect--alt .faq-q{background:var(--paper);border-color:transparent}
.faq-item.is-open .faq-q{border-color:var(--blue)}
.faq-chev{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .28s var(--ease)}
.faq-item.is-open .faq-chev{transform:rotate(180deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
.faq-item.is-open .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden}
.faq-a p{padding:var(--s2) var(--s3) var(--s1);font-size:var(--fs-body);max-width:70ch;line-height:var(--lh-body);letter-spacing:var(--ls-body)}
@media (prefers-reduced-motion:reduce){ .faq-a,.faq-chev{transition:none} }

/* ================================================================
   FINAL: текст слева, форма-карточка на синей панели справа
   ================================================================ */
.final-cta__split{display:grid;grid-template-columns:5fr 7fr;gap:var(--gap-xl);align-items:start}
/* текст стоит вровень с заголовком формы, а не по центру высокой панели:
   сдвиг = паддинг синей панели + паддинг белой карточки */
.final-cta__split > :first-child{padding-top:calc(var(--gap-l) + var(--s4))}
.final-cta__split .t-lead{margin-top:var(--s2)}
.final-cta__contacts{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s3)}
.lead-panel{background:var(--blue);border-radius:var(--r);padding:var(--gap-l)}
.lead-form{background:var(--white);color:var(--ink);border-radius:var(--r);padding:var(--s4);display:grid;gap:var(--s2)}
.lead-form .t-h3{margin-bottom:var(--s1)}
.lead-form .field{display:grid;gap:var(--s1)}
.lead-form label{font-size:var(--fs-cap);line-height:var(--lh-cap);letter-spacing:var(--ls-cap)}
.lead-form input,.lead-form select{height:48px;border:1px solid var(--line-2);border-radius:var(--r-s);padding:0 var(--s2);background:var(--paper);font-size:var(--fs-body)}
.lead-form input:focus,.lead-form select:focus{outline:none;border-color:var(--blue)}
.lead-form .btn{width:100%;justify-content:center}
/* ошибки полей (форма, калькулятор): красная рамка + строка под полем */
.field__err{font-size:var(--fs-cap);color:var(--err);line-height:var(--lh-cap);letter-spacing:var(--ls-cap)}
.lead-form input[aria-invalid="true"]{border-color:var(--err)}
.lead-form input[aria-invalid="true"]:focus{border-color:var(--err);box-shadow:0 0 0 1px var(--err)}
.lead-form__note,.lead-form__consent{font-size:var(--fs-cap);opacity:var(--dim);line-height:var(--lh-cap);letter-spacing:var(--ls-cap)}
.lead-form__consent{margin-top:calc(-1 * var(--s1))}
.lead-form__consent a{text-decoration:underline;text-underline-offset:3px}
/* кастомный выпадающий список: нативный <select> остаётся в DOM (значение, i18n на <option>),
   поверх — кнопка + listbox; клавиатура: Enter/Space/стрелки открывают, стрелки ходят, Enter выбирает, Esc закрывает */
.csel{position:relative}
.csel-native{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;margin:0;padding:0;border:0}
.csel-btn{width:100%;height:48px;display:flex;align-items:center;justify-content:space-between;gap:var(--s1);padding:0 var(--s2);
  border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--paper);color:var(--ink);font:inherit;font-size:var(--fs-body);text-align:left;cursor:pointer;
  transition:border-color .18s var(--ease)}
.csel-btn:focus-visible,.csel.is-open .csel-btn{outline:none;border-color:var(--blue)}
.csel-btn svg{width:16px;height:16px;flex:none;transition:transform .22s var(--ease)}
.csel.is-open .csel-btn svg{transform:rotate(180deg)}
/* попап: поиск (только у кода страны) + список + тонкий индикатор прокрутки (паттерн БСО .csel-sb) */
.csel-pop{position:absolute;left:0;min-width:100%;width:max-content;max-width:min(360px,calc(100vw - 2 * var(--gut)));top:calc(100% + 4px);z-index:5;margin:0;padding:4px;
  display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-s);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.csel-pop[hidden]{display:none}
/* поиск — той же высоты, что инпуты формы (48px), а не мелкий */
.csel-search,.lead-form__phone .csel-search{flex:none;margin:0 0 8px;height:48px;width:100%;padding:0 16px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--paper);font:inherit;font-size:16px}
.csel-search:focus{outline:none;border-color:var(--blue)}
.csel-list{margin:0;padding:0 8px 0 0;list-style:none;white-space:nowrap;max-height:260px;overflow:auto;scrollbar-width:none}
.csel-list::-webkit-scrollbar{display:none}
.csel-opt{padding:8px 12px;border-radius:var(--r-s);font-size:var(--fs-body);line-height:var(--lh-body);cursor:pointer}
.csel-opt[hidden]{display:none}
.csel-opt.is-active{background:var(--wash)}
.csel-opt.is-sel{color:var(--blue)}
.csel-sb{position:absolute;right:4px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--line);opacity:0;transition:opacity .2s var(--ease);pointer-events:none}
.csel-pop:has(.csel-search) .csel-sb{top:64px}
.csel-sb.on{opacity:1}
.csel-sb-thumb{position:absolute;left:0;right:0;top:0;min-height:20px;border-radius:3px;background:var(--blue)}
/* телефон: код страны (кнопка csel, узкая) + номер; на всех вьюпортах 16px — без iOS-зума */
.lead-form__phone{display:flex;gap:var(--s1)}
.lead-form__phone .csel{flex:0 0 118px}
.lead-form__phone .csel-btn{padding:0 12px}
.lead-form__phone input{flex:1;min-width:0}
.lead-form input,.csel-btn,.csel-opt{font-size:var(--fs-body)}
/* minmax(0,…) + min-width:0: иначе min-content инпутов/кнопок раздувал колонку → документ на мобиле был шире экрана
   на ~60px, шапка и крестик меню «уезжали»  */
.final-cta__split > *,.lead-form .field,.lead-form__phone .csel{min-width:0}
.lead-form input{width:100%;min-width:0}
@media (max-width:760px){ .final-cta__split{grid-template-columns:minmax(0,1fr)} .final-cta__split > :first-child{padding-top:0} }

/* footer */
.site-footer{background:var(--paper);border-top:1px solid var(--line)}
.site-footer .container{padding-block:var(--gap-xl);display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s4)}
.site-footer .brand p{margin-top:var(--s2);font-size:var(--fs-body);max-width:34ch;opacity:var(--dim);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.site-footer h3{font-size:var(--fs-sub);font-weight:500;margin:0 0 var(--s2);line-height:var(--lh-sub);letter-spacing:var(--ls-sub)}
.site-footer ul{display:grid;gap:var(--s1);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.site-footer ul a{opacity:.75}
.site-footer .disclaimer{grid-column:1/-1;padding-top:var(--s3);font-size:var(--fs-cap);max-width:70ch;opacity:var(--dim);line-height:var(--lh-cap);letter-spacing:var(--ls-cap)}
/* кругляши соцсетей под описанием бренда — как в футере БСО (44px, рамка, ховер синим) */
.footer-social{display:flex;gap:var(--s1);margin-top:var(--s3)}
.footer-social a{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.footer-social svg{width:18px;height:18px}
/* нижняя строка — как на БСО: подпись команды, живые часы + погода на Бали (WITA, Open-Meteo),
   копирайт и политика; разделитель — «/» как в переключателе языка, не точка */
.site-footer .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--s2) var(--s4);flex-wrap:wrap;
  padding-block:0 var(--s3);font-size:var(--fs-cap);opacity:var(--dim);line-height:var(--lh-cap);letter-spacing:var(--ls-cap)}
/* линия — по ширине контента (на самом .container она вылезла бы в поля) */
.footer-bottom::before{content:"";flex:0 0 100%;height:1px;background:var(--line);margin-bottom:var(--s1)}
.footer-bottom a{text-decoration:underline;text-underline-offset:3px}
.footer-bottom__sep{display:inline-block;margin:0 var(--s1);opacity:.5}
.bali-clock{font-variant-numeric:tabular-nums}
.bali-clock b{font-weight:500}
@media (max-width:760px){ .site-footer .container{grid-template-columns:1fr 1fr} .site-footer .footer-bottom{display:grid;grid-template-columns:1fr;gap:var(--s1)} }

/* ================================================================
   UNIT PAGE (units/*.html): шапка сразу is-solid; хлебная крошка; заголовок +
   цена; галерея; факты kv; описание; форма
   ================================================================ */
main.page{padding-top:calc(var(--hdr) + var(--s5))}
.crumb{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--fs-cap);opacity:var(--dim);line-height:var(--lh-cap);letter-spacing:var(--ls-cap)}
/* юридическая страница (privacy.html): одна колонка 64ch, ритм h3 → текст */
.legal{padding-bottom:var(--sy)}
.legal > *{max-width:64ch}
.legal .t-h2{margin-top:var(--s3);max-width:none}
.legal .t-lead{margin-top:var(--s2)}
.legal .t-h3{margin-top:var(--s5);margin-bottom:var(--s2)}
.legal p,.legal li{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.legal ul{display:grid;gap:var(--s1);padding-left:1.2em;list-style:disc}
.legal p + p{margin-top:var(--s2)}
.legal .t-small{margin-top:var(--s4)}
.legal p a{text-decoration:underline;text-underline-offset:3px}
.unit-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s2) var(--s4);margin-top:var(--s3)}
.unit-head h1{font-weight:500;font-size:var(--fs-title);line-height:var(--lh-title);letter-spacing:var(--ls-title)}
.unit-head h1 b{color:var(--blue);font-weight:500}
.unit-head .t-lead{margin-top:var(--s1)}
/* цена — не кнопка: рядом с синим CTA одинаково синяя пилюля путала, что кликабельно */
.unit-price{display:inline-flex;align-items:center;height:48px;padding:0 var(--s3);border-radius:var(--r);background:var(--wash);color:var(--ink);font-size:var(--fs-sub);font-weight:500;white-space:nowrap;line-height:var(--lh-sub);letter-spacing:var(--ls-sub)}
/* кнопка заявки рядом с ценой на странице юнита: в ряд, одной высоты с ценой */
.unit-head__price{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--s2)}
.unit-head__request{--h:48px;white-space:nowrap}
/* мобила: цена и кнопка — под фото-слайдером, в один ряд; цена синим, как в карточках форматов */
@media (max-width:760px){
  .unit-top{display:flex;flex-direction:column}
  .unit-top > .unit-head{display:contents}
  .unit-top > .unit-head > div:first-child{order:1;margin-top:var(--s3)}
  .unit-top > .ugal{order:2}
  .unit-top .unit-head__price{order:3;margin-top:var(--s2);flex-wrap:nowrap;justify-content:space-between}
  .unit-top .unit-price{height:auto;padding:0;background:none;color:var(--blue);font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
  .unit-top .unit-head__request{padding-inline:var(--s2)}
  /* 360: «от $170 000» + «Получить презентацию» не влезали в строку (+11px вбок) — кнопка компактнее */
  @media (max-width:380px){ .unit-top .unit-head__request{padding-inline:12px;font-size:var(--fs-cap);line-height:var(--lh-cap);letter-spacing:var(--ls-cap)} }
}
/* галерея юнита — барабан: слева вертикальная лента превью (активное по центру, 100%,
   остальные 50%), справа большой кадр с кроссфейдом; колесо/свайп/стрелки/клик */
.ugal{margin-top:var(--gap-s);display:grid;grid-template-columns:120px 1fr;gap:var(--s2);height:clamp(400px,50vw,640px)}
.ugal__drum{position:relative;overflow:hidden;border-radius:var(--r);outline:none;touch-action:none;user-select:none;cursor:grab}
.ugal__drum:active{cursor:grabbing}
.ugal__drum:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ugal__drum::before,.ugal__drum::after{content:"";position:absolute;left:0;right:0;height:56px;z-index:1;pointer-events:none}
.ugal__drum::before{top:0;background:linear-gradient(var(--paper),transparent)}
.ugal__drum::after{bottom:0;background:linear-gradient(transparent,var(--paper))}
.ugal__track{position:absolute;left:0;right:0;top:50%;display:grid;gap:var(--s1);transform:translateY(-50%);will-change:transform}
.ugal__track.is-anim{transition:transform .45s var(--ease)}
.ugal__thumb{display:block;width:100%;aspect-ratio:4/3;border:0;padding:0;border-radius:var(--r-s);overflow:hidden;background:var(--wash);opacity:.5;cursor:pointer;transition:opacity .3s}
.ugal__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ugal__thumb.is-active{opacity:1;box-shadow:inset 0 0 0 2px var(--blue)}
.ugal__stage{position:relative;border-radius:var(--r);overflow:hidden;background:var(--wash)}
.ugal__stage picture{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease)}
.ugal__stage picture.is-in{opacity:1}
.ugal__stage img{width:100%;height:100%;object-fit:cover}
/* стрелки барабана юнита — без подложки, тонкий шеврон (в отличие от лайтбокса) */
.ugal__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1;width:32px;height:32px;border:0;background:none;padding:0;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.85;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.ugal__arrow--prev{left:var(--s2)}
.ugal__arrow--next{right:var(--s2)}
/* «Наличие» на странице формата: вкладки U1/U2/U3, одна карточка на комплекс + метраж */
.avail__tabs{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s3)}
.avail__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin-top:var(--s3);align-items:start}
.avail-card{display:grid;gap:var(--s2);align-content:start}
.avail-card .avail-card__price{margin-top:var(--s1)}
.avail-card__more{margin-top:var(--s1)}
.avail-card .fmt-card__rows > div > b{text-align:right;max-width:60%;white-space:normal}
.avail-card .btn{width:100%;justify-content:center}
@media (max-width:1000px){ .avail__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .avail__grid{grid-template-columns:1fr} }
.avail__none{grid-column:1/-1;margin:0;max-width:60ch}
/* телефон: вкладки в одну строку — только U1/U2/U3, название комплекса есть в карточке */
@media (max-width:520px){ .avail__tabs .chip span{display:none} .avail__tabs .chip{min-width:64px;justify-content:center} }
.lead-form__pick{margin:0;font-size:var(--fs-cap);line-height:var(--lh-cap);letter-spacing:var(--ls-cap)}
.lead-form__pick b{font-weight:500}
/* прогресс-точки вместо счётчика «1/3» (как на БСО) — размеры 1:1 с БСО */
.dots{position:absolute;z-index:2;left:50%;bottom:var(--s2);transform:translateX(-50%);display:flex;gap:4px;pointer-events:none}
.dots span{width:5px;height:5px;border-radius:3px;background:rgba(255,255,255,.5);box-shadow:0 1px 2px rgba(0,0,0,.3);transition:background .25s,width .25s}
.dots span.on{width:16px;background:#fff}
@media (prefers-reduced-motion:reduce){ .dots span{transition:none} }
@media (max-width:760px){
  /* кадр и превью чуть меньше; пилюля навигации → полупрозрачные стрелки по бокам + счётчик слева сверху */
  .ugal{grid-template-columns:1fr;grid-template-rows:auto 72px;height:auto;gap:var(--s1)}
  .ugal__stage{aspect-ratio:3/2;order:-1}
  .ugal__drum{height:72px}
  .ugal__drum::before,.ugal__drum::after{top:0;bottom:0;height:auto;width:40px}
  .ugal__drum::before{left:0;right:auto;background:linear-gradient(90deg,var(--paper),transparent)}
  .ugal__drum::after{right:0;left:auto;background:linear-gradient(270deg,var(--paper),transparent)}
  .ugal__track{top:0;bottom:0;left:50%;right:auto;display:flex;transform:translateX(-50%)}
  .ugal__thumb{width:96px;flex:none;height:100%;aspect-ratio:auto}
}

/* строки «подпись … значение» с точечным лидером (факты юнита) */
.leaders{display:grid;gap:var(--s1);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.leaders > div,.calc__rows > div{display:flex;align-items:baseline;gap:var(--s1)}
.leaders > div::after,.calc__rows > div::after{content:"";flex:1;order:2;border-bottom:2px dotted currentColor;opacity:.25;margin-bottom:.35em;min-width:var(--s3)}
.leaders > div > :first-child,.calc__rows > div > :first-child{order:1}
.leaders > div > b,.calc__rows > div > b{order:3;font-weight:500;white-space:nowrap}
/* длинные значения («строится, сдача осенью 2026») переносятся, а не растягивают страницу */
.leaders > div > b{white-space:normal;text-align:right;max-width:60%}
/* перенесённое значение JS ужимает до ширины самой длинной строки — точки тянутся до текста (site.js) */

/* ≤760: мобильная типографическая шкала (подзаголовки слишком крупные) 
   h2 30 → h3 22 → lead/sub 18 (было 20 — вплотную к h3 24) → body 16 → cap 14; ритм секций 48, заголовок→контент 24 */
@media (max-width:760px){
  /* межстрочное на мобиле плотнее на ~12%: body 1.55→1.4, карточки 1.45→1.3, подзаголовки 1.4→1.25 */
  
  /* подзаголовки на мобиле 16px (; было 18) */
  .t-lead,.complex__intro{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
  .t-small,.consent-bar p,.lead-form__note,.lead-form__consent,.photo-band figcaption span,.stat-card__label,.product-card__meta,.team-card__role,.field__err{line-height:var(--lh-cap)}
  .sect-head{gap:var(--s2);margin-bottom:var(--s3)}
  .sub-head{margin-block:var(--s5) var(--s2)}
  .card{padding:var(--s2)}
  .card--photobg{padding:0}
  .stat-card{padding:var(--s2)}
  .complex__gallery{margin-top:var(--s4)}
  .calc{padding:var(--s2)}
  .calc__roi b{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
  .faq-q{padding:var(--s2)}
  .faq-a p{padding:var(--s1) var(--s2) var(--s1)}
  .lead-panel{padding:var(--s2)}
  .lead-form{padding:var(--s2)}
  .site-footer .container{padding-block:var(--s5)}
}

/* 1600px+ */
@media (min-width:1600px){
  :root{ --col:1680px; --gut:64px; --fs-display:72px; --fs-title:52px; --fs-h3:36px; --fs-sub:24px; --fs-body:18px; --fs-cap:16px; }
  
  .chip{height:44px}
}

/* reveal — только при <html class="js"> */
.js .rv{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .js .rv{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} }
/* подсказка «скопировано» для mailto */
.copied{position:fixed;left:50%;bottom:var(--s4);transform:translate(-50%,8px);z-index:200;padding:8px 16px;border-radius:var(--r-s);background:var(--ink);color:#fff;font-size:var(--fs-cap);opacity:0;transition:opacity .25s,transform .25s;line-height:var(--lh-cap);letter-spacing:var(--ls-cap)}
.copied.in{opacity:1;transform:translate(-50%,0)}
/* seo-technical / тач: цели ≥44px на устройствах без hover — табы комплексов, кнопки галерей, ссылки футера, язык */
@media (hover:none){
  .complex-nav button{min-width:44px;min-height:44px}
  .site-footer ul a{display:inline-block;padding-block:8px}
  .footer-bottom a{display:inline-block;padding-block:8px}
  .hd-sel__btn{min-width:44px;min-height:44px}
  /* мелкие кнопки добиваем невидимой зоной нажатия, вид не меняется */
  .chip{height:44px}
  .btn-sm{--h:44px}
  .ugal__arrow::after{content:"";position:absolute;inset:-6px}
  .burger,.site-header .hd-sel__btn,.site-footer ul a,.footer-bottom a{position:relative}
  .burger::after,.site-header .hd-sel__btn::after{content:"";position:absolute;inset:-2px}
  .site-footer ul a::after,.footer-bottom a::after{content:"";position:absolute;inset:-4px 0}
}

/* липкая кнопка заявки на мобилке и планшете: в шапке ≤1000px кнопки нет, до формы ~16 000px скролла.
   Видна после хиро; прячется у формы, у футера, при меню и баннере cookie */
.m-cta{display:none}
@media (max-width:1000px){
  .m-cta{display:flex;position:fixed;left:var(--gut);right:var(--gut);bottom:calc(var(--s2) + env(safe-area-inset-bottom,0px));z-index:55;
    transform:translateY(calc(100% + var(--s4)));visibility:hidden;transition:transform .3s var(--ease),visibility 0s .3s}
  .m-cta.in{transform:none;visibility:visible;transition:transform .3s var(--ease),visibility 0s}
  body.menu-open .m-cta{visibility:hidden}
}
@media (prefers-reduced-motion:reduce){ .m-cta,.m-cta.in{transition:none} }

/* лайтбокс «галерея проекта»: клик по фото в коллаже/ленте комплекса */
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(10,11,13,.94);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s var(--ease)}
.lightbox[hidden]{display:none}
.lightbox.in{opacity:1}
.lightbox__stage{width:min(1100px,86vw);height:min(760px,80vh);display:flex;align-items:center;justify-content:center;touch-action:none;cursor:pointer}
.lightbox__stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:var(--r-s);pointer-events:none}
.lightbox__close{position:absolute;top:var(--s3);right:var(--s3);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s}
/* стрелки лайтбокса — с подложкой-пилюлей, в отличие от барабана юнита */
.lightbox__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s}
.lightbox__arrow--prev{left:var(--s3)}
.lightbox__arrow--next{right:var(--s3)}
.lightbox__count{position:absolute;left:var(--s3);bottom:var(--s3);color:rgba(255,255,255,.7);font-size:var(--fs-cap);line-height:var(--lh-cap);letter-spacing:var(--ls-cap)}
.lightbox__count b{color:#fff;font-weight:500}
@media (max-width:640px){
  .lightbox__stage{width:92vw;height:70vh}
  .lightbox__close{top:var(--s2);right:var(--s2)}
  .lightbox__arrow--prev{left:var(--s2)}
  .lightbox__arrow--next{right:var(--s2)}
  .lightbox__arrow{width:38px;height:38px}
}
@media (prefers-reduced-motion:reduce){ .lightbox{transition:none} }

/* hover-эффекты — только там, где есть настоящий hover (на тач-устройствах
   :hover «залипает» после тапа и выглядит как случайно нажатая кнопка) */
@media (hover:hover){
  .btn-primary:hover{background:var(--blue-press)}
  .btn-glass:hover{background:#fff;border-color:#fff;color:var(--ink)}
  .hd-wa:hover{background:var(--blue);border-color:var(--blue);color:#fff}
  .btn-outline:hover{color:var(--blue)}
  .gal-more:hover,.cat-more:hover{background:var(--blue);color:#fff}
  .site-nav a:hover{opacity:1}
  .hd-sel__btn:hover{opacity:1}
  .menu-list a:hover{color:var(--blue)}
  .fmt-card:hover .fmt-card__media img{transform:scale(1.02)}
  .fmt-card:hover .fmt-card__name{color:var(--blue)}
  .chip:hover{border-color:var(--ink-2)}
  .calc__pick-card:hover{background:var(--blue-050);color:var(--blue)}
  .faq-q:hover{border-color:var(--ink-2)}
  .lead-form__consent a:hover{color:var(--blue)}
  .csel-btn:hover{outline:none;border-color:var(--blue)}
  .csel-opt:hover{background:var(--wash)}
  .site-footer ul a:hover{opacity:1;color:var(--blue)}
  .footer-social a:hover{background:var(--blue);border-color:var(--blue);color:#fff}
  .footer-bottom a:hover{color:var(--blue)}
  .crumb:hover{opacity:1;color:var(--blue)}
  .legal p a:hover{color:var(--blue)}
  .ugal__thumb:hover{opacity:.8}
  .lightbox__close:hover{background:rgba(255,255,255,.22)}
  .lightbox__arrow:hover{background:rgba(255,255,255,.22)}
  .ugal__arrow:hover{opacity:1}
}

/* Связки UNIT.: «UNIT.» medium, хвост названия regular — но UNIT. никогда не легче окружения:
   где текст вокруг жирнее medium (чип/заголовок 600+), вся связка наследует вес окружения.
   Вордмарк в шапке/меню/футере — сам логотип-связка: UNIT. 500 + SPACE CITY 400 */
i.u5,i.ul{font-style:normal}
.u5{font-weight:500}
.ul{font-weight:400}
.co-card > b i.ul{color:inherit}
/* ловушка для ботов в форме заявки — людям не видна */
.lead-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.lead-form--done p{margin-top:var(--s2)}
/* подсказка «адрес скопирован» (текстовые контакты в футере «некликабельны» — mailto без почтовой программы молчит) */
.toast{position:fixed;left:50%;bottom:var(--s4);z-index:70;transform:translate(-50%,8px);opacity:0;pointer-events:none;background:var(--ink);color:#fff;padding:12px var(--s2);border-radius:var(--r-s);font-size:var(--fs-cap);box-shadow:0 4px 16px rgba(0,0,0,.2);transition:opacity .2s,transform .2s;max-width:calc(100% - 2 * var(--gut));line-height:var(--lh-cap);letter-spacing:var(--ls-cap)}
.toast.in{opacity:1;transform:translate(-50%,0)}
@media (max-width:1000px){ .toast{bottom:calc(56px + var(--s4))} }

/* 02 — О проекте: заголовок на всю ширину, под ним подзаголовок и текст; ниже бенто.
   Фото-карточки широкие, текст в нижней левой части, чтобы снимок было видно. Текстовые плашки: заголовок сверху, текст снизу */
.ab-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"t t" "s x";gap:var(--s2) var(--s5);align-items:start;margin-bottom:var(--s5)}
.ab-title{grid-area:t;text-transform:uppercase;letter-spacing:-.01em;max-width:none}
.ab-sub{grid-area:s}
.ab-text{grid-area:x;font-size:var(--fs-body);max-width:60ch;line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.ab-bento{display:grid;gap:var(--s2);grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:clamp(280px,21vw,400px) auto 1fr;
  grid-template-areas:"a a b b" "d d c c" "e e c c"}
.ab-a{grid-area:a}.ab-b{grid-area:b}.ab-c{grid-area:c}.ab-d{grid-area:d}.ab-e{grid-area:e}
.ab-card{position:relative;overflow:hidden;min-width:0;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3);border-radius:var(--r);background:var(--white)}
.ab-card h3{font-size:var(--fs-sub);font-weight:500;line-height:var(--lh-sub);letter-spacing:var(--ls-sub)}
.ab-card p{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.ab-card--photo{justify-content:flex-end;color:#fff;background:var(--ink)}
.ab-card--photo picture{position:absolute;inset:0}
.ab-card--photo img{width:100%;height:100%;object-fit:cover;display:block}

.ab-card--photo > div{position:relative;z-index:1;display:grid;gap:var(--s1);max-width:52ch}
.ab-card--blue{background:var(--blue);color:#fff}
.ab-list{list-style:none;margin:0;padding:0;display:grid}
.ab-list li{padding-block:var(--s1);border-top:1px solid var(--line);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.ab-list li:last-child{padding-bottom:0}
.ab-card--list .ab-list{grid-template-columns:1fr 1fr;column-gap:var(--s3)}
.ab-card--list .ab-list li:nth-last-child(2){padding-bottom:0}
.ab-card--blue .ab-list li{border-color:rgba(255,255,255,.28)}
@media (min-width:1201px){ .ab-c .ab-list li{font-size:var(--fs-sub);padding-block:var(--s2);line-height:var(--lh-sub);letter-spacing:var(--ls-sub)} }
/* планшет и телефон: фото сверху, текст под ним на тёмном — на снимке текст не лежит */
@media (max-width:1200px){
  .ab-head{grid-template-columns:1fr;grid-template-areas:"t" "s" "x"}
  .ab-bento{min-height:0;grid-template-columns:1fr 1fr;grid-template-rows:none;grid-template-areas:"a b" "d d" "e c"}
  .ab-card--photo{padding:0;justify-content:flex-start}
  .ab-card--photo picture{position:relative;inset:auto;display:block;flex:none;height:auto;aspect-ratio:4/3;overflow:hidden}
  .ab-card--photo img{position:absolute;inset:0}
  
  .ab-card--photo > div{padding:var(--s3)}
}
@media (max-width:640px){
  .ab-bento{grid-template-columns:1fr;grid-template-areas:"a" "b" "d" "e" "c"}
  .ab-card--list .ab-list{grid-template-columns:1fr}
  .ab-card--list .ab-list li:nth-last-child(2){padding-bottom:var(--s1)}
  .ab-card:not(.ab-card--photo){padding:var(--s2)}
  .ab-card--photo > div{padding:var(--s2)}
}

/* табы комплексов: панель начинается сразу под ними, U и статус уже есть на табе */
.complex-nav{border-bottom:0}
@media (max-width:760px){ .complex{padding-top:var(--s2)} }

/* блок 2: шапка стопкой, одна шкала шрифтов во всех карточках, списки без полосок */
.ab-head{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "s" "x";gap:0;margin-bottom:var(--s5)}
.ab-title{margin-bottom:var(--s2)}
.ab-sub{margin-bottom:var(--s2)}
.ab-text{color:var(--ink-2);max-width:62ch}
.ab-card{gap:var(--s2)}
@media (min-width:761px){ .ab-card:not(.ab-card--photo){padding:var(--s4)} }
@media (min-width:761px) and (max-width:1200px){ .ab-card--photo > div{padding:var(--s4)} }
@media (min-width:1201px){ .ab-card--photo{padding:var(--s4)} }
.ab-card--photo > div{align-content:start;gap:var(--s1);max-width:56ch}
.ab-card:not(.ab-card--photo):not(.ab-card--blue) p{color:var(--ink-2)}
.ab-list{gap:var(--s2)}
.ab-list li,.ab-list li:last-child,.ab-card--list .ab-list li:nth-last-child(2){padding:0;border:0}
.ab-card--list .ab-list{column-gap:var(--s4);row-gap:var(--s2)}
.ab-card--blue .ab-list{gap:var(--s4)}
.ab-card--blue .ab-list li{color:rgba(255,255,255,.88)}
@media (min-width:1201px){
  .ab-c .ab-list li{font-size:var(--fs-body);padding:0;line-height:var(--lh-body);letter-spacing:var(--ls-body)}
  /* заголовки на обоих фото на одной высоте: под текст всегда место на 4 строки */
  .ab-card--photo > div{min-height:calc(var(--fs-sub) * 1.35 + 8px + 4 * 16px * 1.45)}
}
@media (max-width:760px){
  .ab-head{margin-bottom:var(--s3)}
  .ab-card--list .ab-list{row-gap:12px}
  .ab-card--blue .ab-list{gap:var(--s2)}
}

/* блок 2: цифры проекта под шапкой */
.ab-head{margin-bottom:var(--s5)}
/* инфраструктура комплекса плитками */
.ab-card--list .ab-list.ab-tiles{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;flex:1;gap:var(--s1)}
.ab-card--list .ab-tiles li:nth-child(n){display:flex;align-items:center;min-height:56px;padding:12px var(--s2);border-radius:var(--r-s);background:var(--paper);color:var(--ink)}
/* Nuanu: каждое место отдельной плашкой, три группы */
.ab-cloud{display:flex;flex-direction:column;gap:var(--s3)}
.ab-cloud ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s1)}
.ab-cloud li{padding:8px 12px;border-radius:var(--r-s);background:rgba(255,255,255,.14);color:#fff;font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
/* блок 3 начинается своим заголовком, а не впритык к бенто */
.complexes{padding-top:var(--sy)}
.cx-head{padding-bottom:var(--s3)}
.cx-head .t-h2{max-width:none}
@media (max-width:760px){
  .ab-head{margin-bottom:var(--s3)}
  .ab-card--list .ab-list.ab-tiles{grid-template-columns:1fr;grid-auto-rows:auto}
  .ab-card--list .ab-tiles li:nth-child(n){min-height:48px}
  .ab-cloud{gap:var(--s2)}
  .cx-head{padding-bottom:var(--s1)}
}

/* блок 2 на десктопе как в референсе: колонки со сдвигом, текст по содержимому, фото добирают высоту */
.ab-col{display:contents}
@media (min-width:1201px){
  .ab-bento{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-template-areas:none;align-items:stretch}
  .ab-col{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
  .ab-col > .ab-card{flex:none}
  .ab-col > .ab-card--photo{flex:1 1 auto;min-height:clamp(320px,24vw,460px)}
  .ab-col > .ab-card--blue{flex:1 1 auto}
  .ab-card--photo > div{min-height:0}
  .ab-card--list .ab-list.ab-tiles{grid-template-columns:1fr;grid-auto-rows:auto;flex:none}
}

/* Nuanu: одна сетка плашек с одинаковым шагом, у каждой иконка */
.ab-cloud{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--s1)}
.ab-cloud li{display:flex;align-items:center;gap:var(--s1);padding:8px 12px}
.ab-ic{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* плашки Nuanu компактнее, чтобы колонка не тянула фото соседей */
.ab-cloud li{padding:8px 12px;gap:8px;font-size:var(--fs-cap);line-height:var(--lh-cap);letter-spacing:var(--ls-cap)}
.ab-ic{width:16px;height:16px}
/* начало блока 3: заголовок секции, табы, панель с воздухом; название комплекса на ступень меньше */
.cx-head{padding-bottom:var(--s3)}
.complex{padding-top:var(--s5)}
.complex__title{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
@media (max-width:760px){
  .cx-head{padding-bottom:var(--s2)}
  .complex{padding-top:var(--s3)}
}
/* у h2 межстрочный воздух съедает часть отступа, добираем до 40 */
.cx-head{padding-bottom:var(--s4)}
@media (max-width:760px){ .cx-head{padding-bottom:var(--s3)} }

/* иконки в плитках инфраструктуры */
.ab-card--list .ab-tiles li:nth-child(n){gap:12px}
.ab-tiles .ab-ic{width:20px;height:20px;color:var(--blue)}
/* широкие экраны: плашки Nuanu крупнее, фото не задают высоту колонок */
@media (min-width:1600px){
  .ab-col > .ab-card--photo{min-height:320px}
  .ab-cloud li{padding:8px 12px;gap:8px;font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
  .ab-cloud .ab-ic{width:18px;height:18px}
}

/* комплексы на белом: табы и карточки серые */
.complexes.sect--alt .complex-nav{background:var(--white)}
.complexes.sect--alt .complex-nav button:not([aria-selected="true"]){background:var(--paper)}
/* прилипли под шапкой: серая полоса вместе с шапкой, кнопки белые */
.complex-nav{transition:background .2s var(--ease)}
.complexes.sect--alt .complex-nav.is-stuck{background:var(--paper)}
.complexes.sect--alt .complex-nav.is-stuck button:not([aria-selected="true"]){background:var(--white)}

/* бенто блока 2 целиком в экран под шапкой */
@media (min-width:1201px){
  .ab-bento{height:clamp(600px, calc(var(--vh)*100 - var(--hdr) - 48px), 920px)}
  .ab-col > .ab-card--photo{flex:1 1 0;min-height:min-content}
  .ab-col > .ab-card--blue{flex:1 1 auto}
  .ab-card--list .ab-tiles li:nth-child(n){min-height:40px;padding:8px var(--s2)}
  .ab-card--list .ab-list.ab-tiles{gap:8px}
}
@media (min-width:1201px) and (max-width:1599px){ .ab-card--photo{padding:var(--s3)} }

/* Nuanu одна в колонке: заголовок сверху, плашки прижаты к низу, свободное место между ними */
@media (min-width:1201px){
  .ab-col > .ab-card--blue{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s4)}
  .ab-card--blue h3{font-size:var(--fs-h3);max-width:16ch;line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
}


/* абзац про экосистему под бенто, на десктопе в 2 строки */
.ab-sub{margin-bottom:0}
.ab-after{margin-top:var(--s5);max-width:900px}
@media (max-width:760px){ .ab-after{margin-top:var(--s3)} }
/* планшет: фото парой квадратами (вертикальное фото иначе режется вдвое), инфраструктура и Nuanu на всю ширину */
@media (min-width:641px) and (max-width:1200px){
  .ab-bento{grid-template-areas:"a b" "d d" "e e" "c c"}
  .ab-card--photo picture{aspect-ratio:1/1}
  .ab-card--list .ab-list.ab-tiles{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
}
@media (min-width:861px) and (max-width:1200px){ .ab-card--list .ab-list.ab-tiles{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* телефон: фото и текст чередуются */
@media (max-width:640px){
  .ab-bento{grid-template-areas:"a" "d" "b" "e" "c"}
  .ab-a picture{aspect-ratio:1/1}
}
/* плашки Nuanu тянутся до края ряда, без пустых хвостов справа */
.ab-cloud li{flex:1 1 auto}
/* планшет и телефон: под фото белая плашка с тёмным текстом, как у остальных карточек */
@media (max-width:1200px){
  .ab-card--photo{background:var(--white);color:var(--ink)}
  .ab-card--photo p{color:var(--ink-2)}
}

/* Telegram: полоса над шапкой при оттягивании страницы того же цвета, что шапка */
.site-header::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:100vh;background:inherit;pointer-events:none}
.complex__gallery,.co-strip,.strip__track{-webkit-overflow-scrolling:touch}

/* полоса под мобильной лентой фото комплекса, ползунок = видимая часть */
.gal-bar{display:none}
@media (max-width:800px){
  .gal-bar{display:block;position:relative;height:4px;margin-top:var(--s2);border-radius:2px;background:var(--line);overflow:hidden;opacity:.5}
  .gal-bar i{position:absolute;left:0;top:0;bottom:0;width:20%;border-radius:inherit;background:var(--ink)}
}

/* мобила, блок 2: один ритм во всех карточках — поля 16, заголовок → текст 12 */
@media (max-width:760px){
  .ab-card{gap:12px}
  .ab-card:not(.ab-card--photo){padding:var(--s2)}
  .ab-card--photo{gap:0}
  .ab-card--photo > div{padding:var(--s2);gap:12px;min-height:0}
  .ab-card--list .ab-list.ab-tiles{gap:var(--s1)}
  .ab-card--list .ab-tiles li:nth-child(n){min-height:48px;padding:12px var(--s2);gap:12px}
  .ab-cloud{gap:var(--s1)}
  .ab-cloud li{padding:8px 12px;gap:8px}
}

/* мобила, блок 3: полное название в табах; шрифты сведены к 30 / 22 / 16 / 14 */
@media (max-width:760px){
  .complex-nav button{gap:4px;padding:8px 4px;line-height:var(--lh-ui)}
  .complex-nav button span{display:block;font-size:var(--fs-cap);font-weight:500;letter-spacing:-.01em;white-space:nowrap}
  .complex-nav .cx-st{height:auto;padding:0;background:none;font-weight:400;line-height:var(--lh-ui)}
  .complex-nav .cx-st--build{color:var(--ink-2)}
  .complex-nav button[aria-selected="true"] .cx-st{background:none;color:rgba(255,255,255,.8)}
}

/* ===== v3: правки по доку «архитектура» ===== */
/* заголовки капсом */
.t-h2,.t-h3,main h3,main h4,.site-footer h2,.site-footer h3,.fmt-card__name,.complex__title,.team-card__name{text-transform:uppercase}
.t-h2{letter-spacing:-.01em}
/* плашка хиро: прозрачная, прямые углы */
.hero__badge{background:#e4e4e4;color:var(--ink);border:0;border-radius:0}
/* абзац блока 2: вторая фраза с новой строки */
.ab-l{display:block;font-style:normal}
/* короткий вариант текста для телефона */
.d-only,.m-only{font-style:normal}
.m-only{display:none}
@media (max-width:760px){ .d-only{display:none} .m-only{display:inline} }
/* табы комплексов одной ширины */
@media (min-width:761px){ .complex-nav button{flex:1 1 0;justify-content:center;text-align:center} }
/* форматы: цена и кнопка на одной линии во всех карточках */
.fmt-card{grid-template-rows:auto 1fr}
.fmt-card__body{display:flex;flex-direction:column}
.fmt-card__foot{margin-top:auto}
/* доходность: абзац под лидом и карточка УК */
.sect-text{font-size:var(--fs-body);max-width:68ch;color:var(--ink-2);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
/* дочерние компании: фото сверху, текст снизу */
.co-card{grid-template-rows:auto auto auto 1fr}
.co-card__photo{order:-1;padding:0 0 var(--s1);align-self:start}
@media (min-width:761px){ .co-group .co-strip{grid-template-rows:repeat(2,auto auto auto 1fr)} }
@media (min-width:1100px){ .co-group .co-strip{grid-template-rows:auto auto auto 1fr} }
/* цитата основателя */
.quote{margin:var(--gap-l) 0 0;background:var(--ink);color:#fff;border-radius:var(--r);padding:var(--gap-xl)}
.quote blockquote{margin:0}
.quote p{font-size:var(--fs-h3);font-weight:500;text-transform:uppercase;max-width:44ch;line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
.quote figcaption{margin-top:var(--s4);display:grid;gap:4px}
.quote figcaption b{font-size:var(--fs-sub);font-weight:500;line-height:var(--lh-sub);letter-spacing:var(--ls-sub)}
.quote figcaption span{font-size:var(--fs-body);color:rgba(255,255,255,.7);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.quote figcaption i{color:inherit}
/* ценности U/N/I/T */
.values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
.value-card{padding:var(--s3);gap:var(--s1)}
.value-card__l{font-size:var(--fs-display);font-weight:500;color:var(--blue);margin-bottom:var(--s2);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
.value-card h4{font-size:var(--fs-sub);font-weight:500;line-height:var(--lh-sub);letter-spacing:var(--ls-sub)}
.value-card p{font-size:var(--fs-body);color:var(--ink-2);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
@media (max-width:1100px){ .values{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .values{grid-template-columns:1fr} .value-card{padding:var(--s2)} }
/* футер: контакты на тёмном фоне */
.site-footer{background:var(--ink);color:#fff;border-top:0}
.site-footer .container{display:block}
.site-footer .t-h2{color:#fff;margin-bottom:var(--s5)}
.foot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.site-footer h3{color:rgba(255,255,255,.6);font-size:var(--fs-body);font-weight:400;line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.site-footer .foot-grid p{font-size:var(--fs-sub);max-width:32ch;line-height:var(--lh-sub);letter-spacing:var(--ls-sub)}
.site-footer .foot-grid p i,.site-footer .footer-bottom i{color:inherit}
.site-footer ul{font-size:var(--fs-sub);line-height:var(--lh-sub);letter-spacing:var(--ls-sub)}
.site-footer ul a{opacity:1}
.footer-social{margin-top:0}
.footer-social a{border-color:rgba(255,255,255,.3);color:#fff}
.site-footer .disclaimer{padding-top:var(--s5);max-width:80ch;color:rgba(255,255,255,.6);opacity:1}
.site-footer .footer-bottom{color:rgba(255,255,255,.6)}
.footer-bottom::before{background:rgba(255,255,255,.15)}
.footer-bottom a{color:inherit}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr;gap:var(--s3)} .site-footer .t-h2{margin-bottom:var(--s3)} }
/* курсив запрещён: точка вордмарка в <i> тоже прямая */
i,em{font-style:normal}
.site-footer .footer-bottom{display:flex}
.t-h2{max-width:32ch}
.sect-head .t-lead{max-width:76ch}

#location .sect-head .t-lead{max-width:none}

/* ===== система: одни правила для всех секций ===== */
/* ритм секций и межстрочное: один набор на весь сайт */
/* шапка секции: заголовок по ширине контейнера, ровные строки, до контента 48 (телефон 24) */
.t-h2{max-width:none;text-wrap:balance}
.t-lead,.card p,.sect-text{text-wrap:pretty}
.sect-head,.ab-head{margin-bottom:48px}
.cx-head{padding-bottom:48px}
@media (max-width:760px){ .sect-head,.ab-head{margin-bottom:var(--s3)} .cx-head{padding-bottom:var(--s3)} }
/* отступы внутри: карточка 24, большой блок 32, панель 56; на телефоне 16 / 16 / 24 */
.card,.stat-card,.stat-grid--6 .stat-card,.co-card,.value-card{padding:var(--s3)}
.ab-card:not(.ab-card--photo),.ym-card__txt,.calc,.co-group,.lead-form{padding:var(--s4)}
.lead-panel,.quote{padding:var(--s6)}
@media (max-width:760px){
  .card,.stat-card,.stat-grid--6 .stat-card,.co-card,.value-card,.ab-card:not(.ab-card--photo),.ym-card__txt,.calc,.co-group,.lead-form{padding:var(--s2)}
  .lead-panel,.quote{padding:var(--s3)}
}
.value-card__l{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
/* заголовки карточек тоже капсом */
.card > b,.kv-chip b,.ym-card__t,.co-group__title,.photo-band figcaption b{text-transform:uppercase}
/* плашка «От застройщика» со скруглением, как все плашки */
.hero__badge{border-radius:var(--r-s)}

/* блок 2: у Nuanu плашки сразу под заголовком */
@media (min-width:1201px){ .ab-col > .ab-card--blue{justify-content:flex-start} }
/* блок 2, планшет и телефон: от фото до заголовка как в остальных карточках */
@media (min-width:761px) and (max-width:1200px){ .ab-card--photo > div{padding:var(--s3) var(--s4) var(--s4)} }
@media (max-width:760px){ .ab-card--photo > div{padding-top:var(--s2)} }

/* ценности: перевод названия второй строкой, обычным регистром */
.value-card__tr{display:block;margin-top:4px;text-transform:none;font-weight:400;font-size:var(--fs-body);color:var(--ink-2);line-height:var(--lh-body);letter-spacing:var(--ls-body)}

/* футер: меню сайта первой колонкой */
.foot-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1200px){ .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.site-footer .foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1)}
.site-footer .foot-grid ul a{color:#fff;text-decoration:none}
.site-footer .foot-grid ul a:hover{color:rgba(255,255,255,.7)}
@media (max-width:1000px){ .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr} }

/* страница формата: описание шире, на 1920 в 2–3 строки */
[data-unit-field="desc"]{max-width:110ch}
.quote p{max-width:none}
.tr-card__body > b,.co-card > b{text-transform:uppercase}
/* подписи колонок футера обычным регистром: мелкий серый капс не используем */
.site-footer h3{text-transform:none}
@media (max-width:1200px){ .ab-card--photo{gap:0} }
.faq-item,.faq-q,.faq-a{min-width:0;overflow-wrap:break-word}
.co-card{min-width:0}
/* отступы одной системой: заголовок карточки → текст 12, разные блоки в секции 40/24, подсекции 56/40 */
.card:not(.product-card):not(.stat-card):not(.fmt-card):not(.avail-card):not(.team-card):not(.tr-card),.nu-card,.value-card,.tr-card__body,.ab-card--photo > div{gap:12px}
.complex__gallery{margin-top:var(--gap-s)}
.quote{margin-top:var(--gap-l)}
.dots{gap:4px}
.crumb{display:flex;width:fit-content;margin-bottom:var(--s3)}
.site-footer .brand .wordmark{display:block;width:fit-content}
.co-card__sub,.tr-card__role{margin-top:-8px}
.value-card__l{margin-bottom:12px}
.ab-card:not(.ab-card--blue):not(.ab-card--photo){gap:12px}

/* цитата: кавычки вектором в правом нижнем углу, уходят за край */
.quote{position:relative;overflow:hidden}
.quote::after{content:"";position:absolute;right:var(--s6);bottom:-22px;width:190px;height:180px;background:url(quote.svg) no-repeat center/contain;pointer-events:none}
.quote blockquote,.quote figcaption{position:relative;z-index:1}
@media (max-width:760px){ .quote::after{right:var(--s3);bottom:-11px;width:96px;height:91px} }

/* карта: пока грузится живая, ровный фон её цвета, без старой картинки */
.location-map__box{background:#ECECEA}
.js .location-map__box:not(.is-fallback) .location-map__img{visibility:hidden}

/* мобила: стопка однотипных карточек становится лентой со свайпом, как фото комплекса: следующая карточка выглядывает на 32px */
.m-bar{display:none}
@media (max-width:760px){
  .m-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);gap:var(--s2);margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
  .m-strip::-webkit-scrollbar{display:none}
  .m-strip > *{flex:0 0 calc(100% - 32px);min-width:0;scroll-snap-align:start}
  .m-bar{display:block;position:relative;height:4px;margin-top:var(--s2);border-radius:2px;background:var(--line);overflow:hidden;opacity:.5}
  .m-bar i{position:absolute;left:0;top:0;bottom:0;width:20%;border-radius:inherit;background:var(--ink)}
  /* в ленте горизонтальный свайп листает карточки, фото внутри карточки — стрелками и точками */
  .m-strip .fmt-card__gal .fmt-card__media{touch-action:auto}
}
/* на тач-экранах стрелки и крошка мелкие для пальца: невидимая зона 44px */
@media (hover:none){
  .ugal__arrow::before{content:"";position:absolute;inset:-6px}
  .crumb{position:relative}
  .crumb::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
}
@media (max-width:520px){ .site-footer .foot-grid > div:first-child ul{grid-template-columns:1fr 1fr;column-gap:var(--s3)} }
/* футер форматов и политики: бренд первой колонкой, на широком на две, иконки отдельно от слогана */
.site-footer .foot-grid > .brand p{font-size:var(--fs-body);max-width:34ch;line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.site-footer .foot-grid > .brand .footer-social{margin-top:var(--s3)}
@media (min-width:1201px){ .site-footer .foot-grid > .brand{grid-column:span 2} }
@media (max-width:520px){ .site-footer .foot-grid > .brand{margin-bottom:var(--s2)} .site-footer .foot-grid > .brand ~ div ul{grid-template-columns:1fr 1fr;column-gap:var(--s3)} }
@media (max-width:520px){ .site-footer .foot-grid > .brand ~ div li:last-child:nth-child(odd){grid-column:1/-1} }
/* в EN строка «at apartment-level» не рвётся, шрифт по ширине экрана, иначе она вылезает за край */
@media (max-width:820px){ html:not([lang=ru]) .hero__title{font-size:min(var(--fs-display),calc((100vw - 48px) / 10.6))} }
/* длинные слова, которые нельзя рвать, на узких экранах: шрифт по ширине */
@media (max-width:520px){ .legal h1.t-h2{font-size:min(var(--fs-title),calc((100vw - 48px) / 12.8))} }
@media (max-width:380px){
  html:not([lang=ru]) [data-i18n="co.q"]{font-size:var(--fs-sub)}
}

/* вариант доходности: УК вертикально слева, калькулятор справа */
#calcPickerBtn b{font-weight:500}
#calcPickerBtn{justify-content:space-between;text-align:left}
#calcPickerBtn[aria-expanded="true"] .calc__chev{transform:rotate(180deg)}
@media (max-width:760px){ #calcPickerBtn{width:100%;--h:56px;padding-block:8px} #calcPickerBtn b{font-size:var(--fs-body)} }
.yb-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s2);align-items:stretch}
/* калькулятор в колонке: поля, итог, сноска друг под другом, сноска прижата вниз */
.yb-grid .calc{margin:0;grid-template-columns:1fr;grid-template-rows:auto 1fr auto auto;align-content:stretch;gap:var(--s4);padding:var(--s4)}
.yb-grid .calc .calc__inputs{grid-row:auto;grid-template-rows:none}
.yb-grid .calc .calc__out{grid-row:auto;grid-template-rows:none;align-content:start;padding-top:var(--s3);border-top:1px solid var(--line-2)}
.yb-grid .calc .calc__out{align-self:center}
.yb-grid .calc__cta{align-self:end}
.yb-grid .calc__note{margin-top:calc(var(--s2) - var(--s4))}
@media (max-width:760px){ .yb-grid .calc__cta .btn{width:100%} .yb-grid .calc__note{margin-top:calc(var(--s2) - var(--s3))} }
@media (max-width:1100px){ .yb-grid .calc{padding:var(--s3)} }
@media (max-width:800px){ .yb-grid{grid-template-columns:1fr} }
@media (max-width:760px){ .yb-grid .calc{padding:var(--s2);gap:var(--s3)} }
/* синий калькулятор рядом с карточкой УК: белые поля, итог белым */
.yb-grid .calc{background:var(--blue);color:#fff}
.yb-grid .calc label,.yb-grid .calc .dim{opacity:.78}
.yb-grid #calcPickerBtn{color:#fff;border-color:rgba(255,255,255,.6);background:transparent}
.yb-grid .calc .calc__out{border-top-color:rgba(255,255,255,.3)}
.yb-grid .calc__roi b,.yb-grid .calc__rows b{color:#fff}
.yb-grid .calc__rows > div::after{opacity:.4}
.yb-grid .calc__cta .btn{background:#fff;color:var(--blue)}
@media (hover:hover){ .yb-grid #calcPickerBtn:hover{color:#fff;background:rgba(255,255,255,.1)} .yb-grid .calc__cta .btn:hover{background:var(--blue-050)} }
.yb-grid .fmt-card__foot{flex-wrap:wrap;column-gap:var(--s2);row-gap:4px}
/* на широких итог крупнее: калькулятор по высоте равен карточке, пустоты меньше */
@media (min-width:1101px){ .yb-grid .calc__rows{font-size:var(--fs-sub);line-height:var(--lh-sub);letter-spacing:var(--ls-sub)} }
@media (min-width:1600px){ .yb-grid .calc{gap:var(--s5)} }
/* вёрстка текстов: без одиноких слов в последней строке, заголовки ровными строками, подзаголовки не уже: правило «не больше 2 строк» важнее */
main p,main li,main dd,.faq-a p,.fmt-card__rows b{text-wrap:pretty}
main h2,main h3,main h4,.t-lead,.complex__intro,.hero__sub,.photo-band figcaption,.co-card__sub{text-wrap:balance}
.faq-a p{max-width:66ch}
/* основной текст под заголовком тёмный, серый только для второстепенного */
.sect-text,.ab-text{color:var(--ink)}
/* заголовок формы: шире колонка, чтобы не 5 строк */
@media (min-width:1101px){ .final-cta__split{grid-template-columns:minmax(0,6fr) minmax(0,6fr)} }
/* цитата на мобиле: мельче и свободнее, иначе 14 строк капсом */
@media (max-width:760px){ .quote p{font-size:var(--fs-sub);line-height:var(--lh-sub);letter-spacing:var(--ls-sub)} }
/* итог калькулятора — белая карточка внутри синего, без линии-разделителя */
.yb-grid .calc .calc__out{border-top:0;padding:var(--s3);background:#fff;color:var(--ink);border-radius:var(--r-s)}
.yb-grid .calc .calc__out .dim{opacity:var(--dim)}
.yb-grid .calc__roi b,.yb-grid .calc__rows b{color:var(--blue)}
.yb-grid .calc__rows > div::after{opacity:.25}
@media (max-width:760px){ .yb-grid .calc .calc__out{padding:var(--s2)} }
/* плавающая кнопка: тень, чтобы не сливалась с синими блоками под ней */
@media (max-width:1000px){ .m-cta{box-shadow:0 10px 28px rgba(10,11,13,.32),0 2px 8px rgba(10,11,13,.22)} }

/* отступы по близости: шапка формы отделена от полей сильнее, чем поля друг от друга (24 против 16);
   в ряду карточек компаний название прижато к подписи, лишняя высота строки уходит над названием */
.lead-form__consent + .field{margin-top:var(--s1)}
@media (min-width:761px){ .co-group .co-strip .co-card > b{align-self:end} }

/* блок 2 в адаптивах: фото вписано в карточку с тем же отступом, что и текст */
@media (max-width:1200px){
  .ab-card--photo{padding:var(--s3);gap:var(--s2);background:var(--white);color:var(--ink)}
  .ab-card--photo picture{border-radius:var(--r-s);overflow:hidden}
  .ab-card--photo > div{padding:0;min-height:0}
  .ab-card--photo p{color:var(--ink-2)}
}
@media (max-width:760px){ .ab-card--photo{padding:var(--s2)} }

/* новые варианты блоков */
.cxb-f:focus-visible,#complexes .complex-nav button:focus-visible,.cxb figure:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* комплексы: на десктопе коллаж слева, текст справа, в адаптивах коллаж всегда под текстом */
#complexes{padding-bottom:var(--sy)}
/* у табов свой отступ сверху: вместе выходит 48 (моб 24), как от шапки до контента в других секциях */
#complexes .cx-head{padding-bottom:var(--s4)}
.cxb-panels{padding-top:var(--s2)}
.cxb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s5);align-items:stretch}
.cxb[hidden]{display:none}
.cxb__left{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.cxb__pics{flex:1 1 auto;min-height:320px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:var(--s1)}
.cxb__pics figure{position:relative;margin:0;min-height:0;border-radius:var(--r);overflow:hidden;background:var(--wash)}
.cxb__pics figure:first-child{grid-row:1 / 3}
.cxb__pics img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
/* у U3 один широкий кадр и два вертикальных */
#cx-u3 .cxb__pics figure:first-child{grid-row:1;grid-column:1 / 3}
.cxb__toggle{align-self:flex-start;background:#fff;border-color:var(--blue);color:var(--blue)}
@media (hover:hover){ .cxb__toggle:hover{background:var(--blue);color:#fff} }
.cxb__body{display:flex;flex-direction:column;min-width:0}
.cxb .complex__title{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
.cxb__intro{margin-top:var(--s2);font-size:var(--fs-sub);line-height:var(--lh-sub);letter-spacing:var(--ls-sub)}
.cxb__stats{margin-top:var(--s3);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s1)}
.cxb__stats > div{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s1);min-width:0;padding:var(--s2);border-radius:var(--r-s);background:var(--paper)}
.cxb__stats span{font-size:var(--fs-body);line-height:var(--lh-cap)}
.cxb__stats b{font-size:var(--fs-h3);font-weight:500;line-height:var(--lh-h3);letter-spacing:var(--ls-h3);color:var(--blue)}
.cxb__stats .stat-card__word{margin-right:4px;font-size:var(--fs-cap);font-style:normal;letter-spacing:0}
.cxb__uk{margin-top:var(--s1);padding:var(--s2);border-radius:var(--r-s);background:var(--paper);font-size:var(--fs-body);line-height:var(--lh-cap)}
.cxb__fh{margin-top:var(--s4);font-size:var(--fs-sub);font-weight:500;line-height:var(--lh-sub);letter-spacing:var(--ls-sub)}
.cxb__fmts{margin-top:var(--s2);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1)}
.cxb-f{display:flex;flex-direction:column;gap:4px;min-width:0;padding:var(--s2);border:1px solid var(--line);border-radius:var(--r-s);color:inherit;text-decoration:none;transition:border-color .2s}
.cxb-f:hover{border-color:var(--blue)}
.cxb-f:last-child:nth-child(odd){grid-column:1 / -1}
/* три формата в один ряд: иначе последний тянется на всю ширину с пустотой справа */
.cxb__fmts:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.cxb__fmts:has(> :nth-child(3):last-child) .cxb-f:last-child{grid-column:auto}
.cxb-f b{font-size:var(--fs-sub);font-weight:500;line-height:var(--lh-sub);letter-spacing:var(--ls-sub)}
.cxb-f span{font-size:var(--fs-body);line-height:var(--lh-cap);color:var(--ink-2)}
.cxb__rest{display:none;grid-column:1 / -1;min-width:0}
.cxb__rest.is-open{display:block;margin-top:var(--s2)}
.cxb__rest .complex__gallery{margin-top:0;gap:var(--s1)}
@media (min-width:801px){ .cxb-dup{display:none} }
@media (max-width:1200px){
  .cxb{grid-template-columns:minmax(0,1fr)}
  .cxb__body{order:1}
  .cxb__left{order:2;margin-top:var(--s4)}
  .cxb__rest{order:3}
  .cxb__pics{flex:none;min-height:0;aspect-ratio:2/1}
  #cx-u3 .cxb__pics{aspect-ratio:3/1;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}
  #cx-u3 .cxb__pics figure:first-child{grid-column:auto}
}
@media (max-width:800px){
  .cxb__left{display:none}
  .cxb__rest{display:block;margin-top:var(--s4)}
  .cxb__rest.is-open{margin-top:var(--s4)}
}
@media (max-width:760px){
  #complexes .cx-head{padding-bottom:var(--s2)}
  .cxb__intro{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:0}
}
/* три плитки в ряд на телефоне рвут подписи: кладём строками */
@media (max-width:480px){
  .cxb__stats{grid-template-columns:minmax(0,1fr)}
  .cxb__stats > div{flex-direction:row;align-items:center}
}

/* форматы */
.plb-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);margin-bottom:var(--s2)}
.plb-grid > *{min-width:0}
#plans .sect-head .t-lead{max-width:none}
#plans .plb{display:flex;flex-direction:column;gap:0;padding:var(--s2)}
.plb__pic{flex:none;display:block;aspect-ratio:4/3;margin-bottom:var(--s2);border-radius:var(--r-s);overflow:hidden;background:var(--wash)}
.plb__pic picture{display:block;height:100%}
.plb__pic img{display:block;width:100%;height:100%;object-fit:cover}
.plb .fmt-card__name{font-size:var(--fs-sub);line-height:var(--lh-sub);letter-spacing:var(--ls-sub)}
.plb__meta{display:flex;justify-content:space-between;gap:var(--s1);margin-top:4px;margin-bottom:var(--s2);font-size:var(--fs-cap);line-height:var(--lh-cap);color:var(--ink-2)}
.plb .product-card__price{margin-top:auto;font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:500;letter-spacing:var(--ls-h3);color:var(--blue)}
.plb .btn{margin-top:var(--s2);justify-content:center;padding-inline:var(--s1)}
#plans .t-small{opacity:1;color:var(--ink-2)}
@media (max-width:1000px){ .plb-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* в четыре узкие колонки подпись кнопки иначе переносится */
@media (min-width:1001px) and (max-width:1150px){ .plb .btn{font-size:var(--fs-cap)} }
@media (max-width:760px){
  .plb-grid{display:flex;grid-template-columns:none}
  #plans .t-small{margin-top:var(--s3)}
}

/* локация: строки карточек общие, фото и заголовки всегда на одной линии */
.lx-hero{position:relative;margin:0;height:clamp(280px,22vw,360px);border-radius:var(--r);overflow:hidden;background:var(--wash)}
.lx-hero picture{display:block;height:100%}
.lx-hero img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.lx-hero figcaption{position:absolute;left:var(--s2);bottom:var(--s2);display:grid;gap:4px;padding:var(--s2);border-radius:var(--r-s);background:var(--white)}
.lx-hero b{font-size:var(--fs-h3);font-weight:500;line-height:var(--lh-h3);letter-spacing:var(--ls-h3);color:var(--blue)}
.lx-hero span{font-size:var(--fs-body);line-height:var(--lh-cap)}
.lx-half{margin-top:var(--s2);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);column-gap:var(--s2)}
.lx-half > *{min-width:0}
.lx-card{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:var(--s2);padding:var(--s2);border-radius:var(--r);background:var(--paper)}
.lx-card > *{min-width:0}
.lx-card h3{font-size:var(--fs-sub);font-weight:500;line-height:var(--lh-sub);letter-spacing:var(--ls-sub)}
.lx-map,.lx-pic{aspect-ratio:2/1;width:100%;border-radius:var(--r-s);overflow:hidden}
.lx-map{display:block;height:auto;object-fit:cover}
.lx-pic picture{display:block;height:100%}
.lx-pic{position:relative}
.lx-pic img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.lx-dist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s1)}
.lx-dist > div{display:grid;gap:4px;align-content:start;min-width:0;padding:var(--s2);border-radius:var(--r-s);background:var(--white)}
.lx-dist span{font-size:var(--fs-cap);line-height:var(--lh-cap)}
.lx-dist b{font-size:var(--fs-h3);font-weight:500;line-height:var(--lh-h3);letter-spacing:var(--ls-h3);color:var(--blue)}
.lx-dist small{font-size:var(--fs-cap);font-weight:400;letter-spacing:0}
.lx-squares{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1)}
.lx-squares li{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1);min-width:0;padding:var(--s2);border-radius:var(--r-s);background:var(--white);font-size:var(--fs-body);font-weight:500;line-height:var(--lh-cap)}
.lx-squares .ab-ic{flex:none;width:24px;height:24px;color:var(--blue);fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
/* карточки на всю ширину: фото рядом с текстом, иначе растягивается на пол-экрана */
@media (max-width:1200px){
  .lx-half{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:var(--s2)}
  .lx-card{grid-row:auto;grid-template-rows:none}
}
@media (min-width:761px) and (max-width:1200px){
  .lx-card{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto 1fr;align-content:start;column-gap:var(--s2)}
  .lx-map,.lx-pic{grid-row:1 / 3;aspect-ratio:auto;height:100%;min-height:200px}
  .lx-dist{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .lx-map,.lx-pic{aspect-ratio:auto;height:clamp(200px,40vw,280px)}
  .lx-dist{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* плашка закрывала пляж: кладём её под фото */
  .lx-hero{height:auto;display:grid;gap:var(--s1);background:none;border-radius:0;overflow:visible}
  .lx-hero picture{height:240px;border-radius:var(--r);overflow:hidden}
  .lx-hero figcaption{position:static;background:var(--paper)}
}
/* длинные слова в плитках Nuanu на телефоне */
@media (max-width:480px){ .lx-squares li{padding:12px;font-size:var(--fs-cap)} }
/* на самых узких телефонах длинные подписи не помещаются в две колонки */
@media (max-width:340px){ .lx-dist,.lx-squares{grid-template-columns:minmax(0,1fr)} }
/* жирного начертания на сайте нет, акцент весом 500 */
b,strong{font-weight:500}

/* цифра доходности стала по шкале: левая карточка не должна быть выше калькулятора */
@media (min-width:801px){
  .yb-grid .fmt-card{display:flex;flex-direction:column}
  .yb-grid .fmt-card__media{flex:1 1 0;min-height:200px;aspect-ratio:auto}
  .yb-grid .fmt-card__media img{height:100%}
  .yb-grid .fmt-card__gal,.yb-grid .fmt-card__media picture{height:100%}
}
/* лента на телефоне: одна высота, панорамы шире, чтобы кадр не резался меньше 60% */
@media (max-width:800px){
  .complex__gallery{--th:min(calc(100vw - 4 * var(--gut) - 32px),360px)}
  .complex__gallery figure{flex:0 0 var(--th);height:var(--th);aspect-ratio:auto}
  .complex__gallery figure[data-ar="1.779"]{flex-basis:calc(var(--th) * 1.1)}
  .complex__gallery figure[data-ar^="2."]{flex-basis:calc(var(--th) * 1.34)}
}
/* форма: без синей панели, карточка на сером, поля белые */
.lead-panel{padding:0;background:none;border-radius:0}
.lead-form{padding:48px var(--s5);background:var(--paper)}
.lead-form input,.lead-form select,.lead-form .csel-btn{background:var(--white)}
@media (min-width:761px){ .final-cta__split > :first-child{padding-top:48px} }
@media (max-width:760px){ .lead-form{padding:var(--s4) var(--s3)} }
/* лестница внутри карточки: поле всегда больше любого отступа внутри */
#plans .plb,.lx-card{padding:var(--s3)}
@media (max-width:760px){
  #plans .plb,.lx-card{padding:var(--s2)}
  .lx-card{row-gap:12px}
  .plb__pic{margin-bottom:12px}
  .plb__meta{margin-bottom:12px}
  .plb .btn{margin-top:12px}
}
/* цифра сверху, подпись под ней: цифры стоят на одной линии, а разная длина подписей не оставляет дыры внутри плитки */
main .stat-card.stat-card{min-height:0;flex-direction:column-reverse;justify-content:flex-end;gap:var(--s1)}
.lx-dist > div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:4px}
@media (min-width:481px){ .cxb__stats > div{flex-direction:column-reverse;justify-content:flex-end} }
@media (max-width:480px){ .cxb__stats > div{justify-content:space-between} }
.value-card__l{margin-bottom:var(--s1)}
.fmt-card__body{gap:var(--s2)}
.avail-card .avail-card__price{margin-top:0}
.co-group{gap:var(--s3)}
.ab-col > .ab-card--blue{gap:var(--s3)}
@media (max-width:760px){
  .value-card__l{margin-bottom:4px}
  .fmt-card__body,.avail-card{gap:12px}
  .co-group{gap:12px}
  .ab-card--photo{gap:12px}
  .tr-card,.team-card{row-gap:12px}
  .plb .fmt-card__name{margin:0}
}
.avail-card__more{margin-top:0}
.yb-grid .calc{gap:var(--s3)}
.yb-grid .calc__note{margin-top:calc(var(--s2) - var(--s3))}
@media (max-width:1100px){ .yb-grid .calc{gap:var(--s2)} .yb-grid .calc__note{margin-top:0} }
@media (max-width:760px){
  .calc,.yb-grid .calc{gap:12px}
  .yb-grid .calc__note{margin-top:0}
  .value-card__l{margin-bottom:0}
  .co-group__head{gap:4px}
  .co-group__head p{margin-top:4px}
  .ab-col > .ab-card--blue,.ab-card--blue{gap:12px}
  .avail-card__more{margin-top:0}
  .card.fmt-card{row-gap:12px}
  #plans .plb > .plb__pic{margin-bottom:12px}
  #plans .plb > h3{margin-top:0}
}
/* четыре узкие колонки форматов: поле меньше, иначе подпись кнопки переносится */
@media (min-width:1001px) and (max-width:1150px){
  #plans .plb{padding:var(--s2)}
  .plb__pic,.plb__meta{margin-bottom:12px}
  .plb .btn{margin-top:12px}
}
.complex{min-width:0}
/* вторичный текст уже 50%: второе приглушение делает его нечитаемым */
.value-card p{opacity:1}

/* калькулятор: показывает значения, вводить нечего */
.calc__val{display:block;font-size:var(--fs-sub);font-weight:500;line-height:var(--lh-sub);letter-spacing:var(--ls-sub);overflow-wrap:anywhere}

/* адрес под заголовком карты */
.lx-head{display:grid;gap:4px}
.lx-addr{font-size:var(--fs-cap);line-height:var(--lh-cap);letter-spacing:var(--ls-cap);color:var(--ink-2)}
@media (max-width:760px){ .lx-map{height:320px} }

/* плашка cookie: у формы уходит, на телефоне низкая полоса и первый экран поднят над ней */
.consent-bar.is-away{transform:translateY(24px);opacity:0;pointer-events:none}
@media (max-width:760px){
  .consent-bar{left:var(--s2);right:var(--s2);bottom:var(--s2);width:auto;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:12px var(--s2)}
  .consent-bar .btn{width:auto}
  .hero__content{transition:padding-bottom .5s var(--ease)}
  body.consent-open .hero__content{padding-bottom:calc(var(--gap-s) + var(--consent-h,0px) + var(--s2))}
}

/* русское меню длиннее: на этих ширинах шапка должна остаться в сетке */
@media (min-width:1201px) and (max-width:1599px){ .site-header .container{gap:var(--s3)} .site-nav{gap:var(--s2)} }

/* низкий телефон: плашка cookie не должна закрывать кнопки первого экрана */
/* не @media по высоте: в Telegram она меняется вместе с панелью; класс vh-700 ставит site.js вместе с --vh */
@media (max-width:760px){ html.vh-700 body.consent-open .hero__content{padding-top:calc(var(--hdr) + var(--s2))} }

/* чипы карты: подпись комплекса над точкой на узкой карте, Чангу на краю */
.map-pin--top{flex-direction:column-reverse;gap:4px}
.map-pin--top .map-pin__lbl{white-space:nowrap}
.map-poi--edge{position:absolute;bottom:var(--s1);right:40px;z-index:2}
.map-poi--edge .map-poi__dot{display:none}
.map-poi--edge .map-poi__lbl::after{content:" →"}

/* планшет: карта и фото на всю ширину карточки, иначе подписи на карте не помещаются */
@media (min-width:761px) and (max-width:1000px){
  .lx-card{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .lx-map,.lx-pic{grid-row:auto;aspect-ratio:2/1;height:auto;min-height:0}
  .lx-dist{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* самые узкие телефоны: плашка ниже, чтобы кнопки первого экрана остались открыты */
@media (max-width:380px){ .consent-bar{gap:12px;padding:var(--s1) 12px} }
@media (max-width:380px){ .consent-bar{bottom:var(--s1)} }

/* маркеры внешней карты */
.location-map__live .maplibregl-canvas{outline:none}
.maplibregl-marker.has-pop{cursor:pointer}
.maplibregl-marker.is-open{z-index:5}

/* планшет: отступ внутри калькулятора не больше поля карточки */
@media (max-width:1200px){ .yb-grid .calc{gap:var(--s2)} }

/* карта уже: подписи ниже, иначе соседние слипаются */
@media (max-width:1100px){ .lx-map .map-poi__lbl,.lx-map .map-pin__lbl{font-size:var(--fs-map);padding:4px 8px} }

/* блок 2: синяя карточка у инфраструктуры UNIT, Nuanu белая и последней */
.ab-card--blue h3{max-width:none}
.ab-card--blue .ab-cloud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;flex:1;gap:var(--s1)}
.ab-card--blue .ab-cloud li{min-width:0;font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.ab-card--blue .ab-cloud .ab-ic{width:20px;height:20px}
@media (min-width:641px) and (max-width:860px){
  .ab-card--blue .ab-cloud{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ab-c .ab-list.ab-tiles li:last-child{grid-column:1/-1}
}
@media (min-width:861px) and (max-width:1200px){
  .ab-card--blue .ab-cloud{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:861px){
  .ab-card--list.ab-c .ab-list.ab-tiles{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:1fr;flex:1}
  .ab-c .ab-list.ab-tiles li:nth-child(-n+3){grid-column:span 2}
  .ab-c .ab-list.ab-tiles li:nth-child(n+4){grid-column:span 3}
}

/* блок 2, фото на десктопе: затемнение только под текстом, выше снимок чистый */
@media (min-width:1201px){
  .ab-card--photo > div::before{content:"";position:absolute;z-index:-1;inset:-64px -100vw -48px -48px;pointer-events:none;background:linear-gradient(0deg,rgba(10,11,13,.64) 0,rgba(10,11,13,.58) calc(100% - 64px),rgba(10,11,13,0) 100%)}
}

/* блок 2: плитки UNIT, текст не упирается в край */
.ab-card--blue .ab-cloud li{padding:8px;gap:8px}
.ab-card--blue .ab-cloud li > span{min-width:0}
@media (max-width:400px){ .ab-card--blue .ab-cloud li{flex-direction:column;align-items:flex-start;justify-content:center} }

/* блок 2: Nuanu после UNIT, отдельной полосой: фото и пункты */
.ab-c{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2)}
.ab-c__pic{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;border-radius:var(--r-s)}
.ab-c__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ab-bento .ab-card.ab-c{gap:var(--s3)}
.ab-c__body{display:flex;flex-direction:column;gap:12px;min-width:0}
@media (min-width:1024px){
  .ab-bento .ab-card.ab-c{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s4)}
  .ab-c__pic{aspect-ratio:auto;min-height:200px}
}
@media (min-width:1201px){
  .ab-bento{height:auto;grid-template-rows:minmax(clamp(600px,calc(var(--vh)*100 - var(--hdr) - 48px),920px),auto) auto}
  .ab-bento > .ab-c{grid-area:auto;grid-column:1/-1}
}
@media (max-width:640px){ .ab-bento{grid-template-areas:"a" "d" "e" "b" "c"} }

@media (min-width:641px) and (max-width:1023px){ .ab-c__pic{aspect-ratio:2/1} }

/* планшет: в колонке 5/12 крупный заголовок капсом не помещается (длинные слова на EN и других языках), текст над формой */
@media (min-width:761px) and (max-width:1000px){ .final-cta__split{grid-template-columns:minmax(0,1fr)} .final-cta__split > :first-child{padding-top:0} }