/* BLACK SANDS OASIS v2 — тёмная тема.
   Палитра снята с наработки на странице «БСО 2» в Figma (фрейм «бсо2», 6:651):
   фон #0b0c0b, поверхности #1e1e1e/#272727/#2a2c2a, стекло #ffffff@4–10%,
   акцент — линейный градиент #cb9c38 → #efd05e (9 применений: кнопки, активный
   таб), заголовки Prata 70–80px с line-height ≈ 1.0.
   Отличие от исходника по прямому указанию Босса: фон страницы не почти-чёрный,
   а ГРАФИТ — поэтому базовый тон поднят до #232624, а «глубокие» полосы
   (футер, тёмные панели) уведены ниже него, чтобы иерархия поверхностей
   сохранилась: deep < bg < surface < surface-2.
   Лист накладывается ПОВЕРХ ../css/styles.css и переопределяет только цвет
   и новые блоки — разметка и раскладка v1 не дублируются. */

/* ---------- Prata: заголовочный шрифт макета, самохост (не Google CDN) ---------- */
@font-face{font-family:'Prata';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/prata-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Prata';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/prata-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Prata';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/prata-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- токены ---------- */
:root{
  /* Фон страницы задан Боссом точным значением #131313 (сначала был графит
     #232624). Оттенок нейтральный, без зеленцы, поэтому вся шкала поверхностей
     пересобрана нейтральной — и она сошлась с исходным макетом «бсо2»:
     карточки там ровно #1e1e1e, приподнятое #272727. */
  --bg:#131313;          /* фон страницы */
  --bg-deep:#0b0b0b;     /* тёмные полосы, футер, панели «ниже» фона */
  --surface:#1e1e1e;     /* карточки */
  --surface-2:#272727;   /* приподнятое состояние / ховер */
  --gold-1:#cb9c38;
  --gold-2:#efd05e;
  --grad-gold:linear-gradient(90deg,var(--gold-1),var(--gold-2));
  --on-gold:#1a1c1b;     /* текст на золоте — тёмный, как в макете */

  /* переопределения базовых переменных v1 (см. ../css/styles.css) */
  --white:#ffffff;       /* остаётся «белым» там, где это ТЕКСТ на тёмном */
  --ink:#0d0d0d;         /* «тёмная панель» теперь глубже фона, а не темнее света */
  --ink-soft:#151515;
  --graphite:#ebe9e4;    /* был текст-на-светлом → стал светлый текст */
  --stone:var(--bg-deep);/* чередующиеся секции и футер */
  --line:rgba(255,255,255,.13);
  --line-strong:rgba(255,255,255,.26);
  --muted:rgba(255,255,255,.62);
  --clay:#d9ae45;        /* сплошной эквивалент золота — для иконок/линий/точек */
  --clay-soft:#efd05e;
  --clay-active:#b8892c;

  --shadow-card:0 24px 60px -24px rgba(0,0,0,.6);
}

/* ---------- базовые поверхности ---------- */
body{background:var(--bg); color:var(--graphite)}

/* шапка в «приклеенном» состоянии: была почти белая плашка */
.site-header.is-solid{background:rgba(24,26,25,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.site-header.is-solid .logo b{color:var(--white)}
.site-header.is-solid .burger span{background:var(--white)}
.site-header.is-solid .lang button.is-active{color:var(--white)}

/* активный пункт навигации — секция, которая сейчас в зоне видимости (v2.js) */
.nav a.is-active{color:var(--white)}
.nav a.is-active::after{right:0}

/* мобильное меню — было белое полотно */
.menu-overlay{background:var(--bg-deep)}
.menu-overlay a{color:var(--graphite)}
.menu-title{color:var(--muted)}
.menu-close{color:var(--graphite)}
/* переключатель языка в оверлее был тёмным (rgba(28,24,21,.45)) под белое
   меню v1 — на тёмном полотне v2 «RU / EN» пропадали полностью */
.menu-lang button{color:rgba(255,255,255,.55)}
.menu-lang button.is-active{color:var(--white)}
.menu-lang span{color:rgba(255,255,255,.3)}
body.menu-open .burger span{background:var(--white)}

/* нижняя мобильная плашка CTA */
.mob-cta{background:var(--bg-deep); border-top:1px solid var(--line)}

/* ---------- текст: все «тёмный по светлому» переводим в светлый ---------- */
.lead{color:rgba(255,255,255,.72)}
.min-foot p{color:rgba(255,255,255,.62)}
.priv-card p,
.step-card p,
.stat-card p,
.team-card p{color:rgba(255,255,255,.7)}
.footer-brand p,
.footer-col a,
.footer-bottom{color:rgba(255,255,255,.66)}
.stat-card h3{color:var(--clay)}
/* заголовок→подзаголовок в финальном CTA был 60px (styles.css:709, тот же
   отступ что и до статов/кнопки) — Босс попросил сблизить title+lead, они
   должны читаться как пара, а не как заголовок+произвольный контент */
.final-row{margin-top:24px}
.footer-brand .logo,
.footer-brand .logo b,
.footer-col h4{color:var(--white)}

/* ---------- карточки: в v1 прозрачные с обводкой, здесь — заполненные ---------- */
.feat-card,
.priv-card,
.step-card,
.stat-card,
.team-card,
.fin-card{background:var(--surface); border-color:var(--line); box-shadow:var(--shadow-card)}
/* Правка Босса 03.08: вместо иллюстративной стопки документов — реальный на
   вид скрин таблицы (мокап, не настоящие цифры юнитов), заблюренный — как
   в лендингах, где финмодель отдают только на консультации, а тут её только
   намекают показать. Ротация/вылет за край (styles.css:664, задуманы под
   PNG-стопку) сняты — таблице развёрнутой на 4° только мешал бы читаться
   даже сквозь блюр. Blur — на самом img (не box-shadow), scale(1.06)
   прячет мутную кромку по краю, где filter:blur цепляет прозрачные пиксели
   за границей кадра. */
/* Правка Босса: не сбоку — заблюренная таблица фоном ВСЕЙ карточки, текст
   поверх. .fin-card получает overflow:hidden (скругление режет края фото),
   position:relative уже есть в styles.css:645. Тёмный скрим — тот же приём,
   что у .pv-photo::after (v2.css выше): читаемость белого текста только
   rgba-слоем, без filter:brightness на самом фото. */
/* Карточка выше (min-height, было по контенту ~350px) — таблицу за блюром
   было не различить (правка Босса). Текст и кнопка — раздельные абсолютные
   блоки по нижним углам (было — всё вместе слева по центру), скрим теперь
   снизу вверх: верх карточки светлее — видно саму таблицу, низ темнее —
   держит контраст текста/кнопки. */
.fin-card{overflow:hidden; position:relative; min-height:520px; display:block; padding:0}
.fin-card-photo--sheet{position:absolute; inset:0; width:100%; height:100%;
  max-width:none; margin:0; transform:none; border-radius:0; box-shadow:none; z-index:0}
.fin-card-photo--sheet img{width:100%; height:100%; object-fit:cover; object-position:center top;
  filter:blur(4px) saturate(.85); transform:scale(1.06)}
.fin-card-photo--sheet::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(24,24,23,.08) 0%, rgba(24,24,23,.32) 55%, rgba(24,24,23,.92) 100%)}
/* .fin-card-text (styles.css:651-653) больше не в разметке — класс
   переименован в .fin-card-copy для абсолютного позиционирования, поэтому
   базовые цвет/кегль/отступ переносим сюда явно, а не полагаемся на v1-правило */
.fin-card-copy{position:absolute; left:60px; bottom:40px; z-index:1; max-width:440px}
.fin-card-copy h3{font-size:32px; color:var(--white); font-weight:500; margin:0}
.fin-card-copy p{font-size:16px; line-height:1.35; color:rgba(255,255,255,.65); margin-top:16px}
.fin-card-cta{position:absolute; right:60px; bottom:40px; z-index:1}
@media (max-width:860px){
  .fin-card{min-height:460px}
  .fin-card-photo--sheet::after{background:linear-gradient(180deg, rgba(24,24,23,.1) 0%, rgba(24,24,23,.4) 45%, rgba(24,24,23,.94) 85%)}
  .fin-card-copy{left:24px; right:24px; bottom:88px; max-width:none}
  .fin-card-cta{left:24px; right:24px; bottom:24px; width:auto; justify-content:center}
}
.min-tags .tag-pill,
.feat-filters .tag-pill{border-color:var(--line-strong); color:var(--muted)}

/* ---------- кнопки: основной CTA — золотой градиент с тёмным текстом ---------- */
.btn-clay,
.btn-white{background:var(--grad-gold); color:var(--on-gold); border-color:transparent}
.btn-clay:hover,
.btn-white:hover{background:linear-gradient(90deg,#d8a941,#f5db72); color:var(--on-gold); border-color:transparent}
.btn-clay:active,
.btn-white:active{background:linear-gradient(90deg,#b8892c,#d9b944); color:var(--on-gold); border-color:transparent}
.btn-white svg{color:var(--on-gold)}
/* `.menu-overlay .menu-cta{color:var(--white)}` в v1 специфичнее, чем .btn-clay,
   и перебивал тёмный текст — белым по золоту получалось 1.9:1 */
.menu-overlay .menu-cta{color:var(--on-gold)}
.btn-line{border-color:var(--line-strong); color:var(--graphite)}
.btn-line:active{background:rgba(255,255,255,.06)}

/* стрелки каруселей были на полупрозрачном БЕЛОМ — на графите это светлое пятно */
.carousel-arrow{background:rgba(255,255,255,.05); border-color:var(--line-strong); color:rgba(255,255,255,.55)}
.carousel-arrow:hover:not(:disabled){background:rgba(255,255,255,.1)}
.carousel-dots span{background:rgba(255,255,255,.22)}

/* ---------- планировки: активный таб — золотой, как в макете ---------- */
/* background не задан в v1 → у <button> остаётся системный buttonface (#f0f0f0).
   На светлой теме это читалось как бледная плашка, на графите — светлое пятно. */
.plans-tab{background:transparent; color:rgba(255,255,255,.72); border-color:var(--line)}
/* панели планировок стоят на «глубокой» секции (--stone), а их собственный фон
   был --ink — почти тот же тон, панель пропадала. Поднимаем до поверхности. */
.plans-viewer,
.plans-info{background:var(--surface)}
/* подчёркивание названия планировки осталось от старого акцента — в v1 оно
   зашито как rgba(156,79,32,.5), то есть терракота #9c4f20; переводим на золото */
/* подчёркивания заголовков зашиты в v1 старой терракотой rgba(156,79,32,…) —
   и у планировок, и у Stella Solaris; переводим оба на золото */
.plans-info h3,
.signature-meta h3{text-decoration-color:rgba(217,174,69,.75)}
/* правка Босса: кнопка «Приобрести» — фирменным золотым градиентом.
   Метрики кнопки не трогаем: пропорции фото-карточки виллы в соседней
   колонке от этого не должны поехать. */
.plans-info .btn-glass{background:var(--grad-gold); color:var(--on-gold); border-color:transparent}
.plans-info .btn-glass:hover{background:linear-gradient(90deg,#d8a941,#f5db72); color:var(--on-gold); border-color:transparent}
.plans-info .btn-glass:active{background:linear-gradient(90deg,#b8892c,#d9b944); color:var(--on-gold); border-color:transparent}
.plans-tab.is-active{background:var(--grad-gold); border-color:transparent; color:var(--on-gold)}
.plans-tab:not(.is-active):hover{border-color:var(--clay); color:var(--clay)}
/* планы (не используются в v2 — план ушёл в раскрывашку, см. ниже) —
   документы на белом листе, так и остаются листом */
.plans-viewer-slide--plan{background:#fff}
/* рендер-слайд — последний в галерее виллы — стоит на размытом фото самой
   виллы вместо белого листа (правка Босса 05.08). --topview-bg приходит
   инлайн из main.js (предпоследнее интерьерное фото того же типа виллы).
   ::before шире слайда (inset отрицательный) и растянут scale — размытие
   не должно показывать резкий край по границе. */
.plans-viewer-slide--topview{background:#0b0c0b; overflow:hidden}
.plans-viewer-slide--topview::before{
  content:''; position:absolute; inset:-24px;
  background:linear-gradient(rgba(11,12,11,.4),rgba(11,12,11,.4)), var(--topview-bg) center/cover;
  filter:blur(36px) saturate(1.15); transform:scale(1.1);
}

/* ---------- форма заявки ---------- */
.lead-panel{background:var(--surface)}
.lead-panel h3{color:var(--white)}
.lead-x{background:rgba(255,255,255,.08); color:var(--graphite)}
.lead-field input,
.lead-field select,
.lead-field textarea{background:rgba(255,255,255,.05); color:var(--graphite); border-color:var(--line-strong)}
.lead-field select option{background:var(--surface); color:var(--graphite)}

/* ---------- кастомный выпадающий список (правка Босса) ---------- */
/* Нативный select нельзя покрасить внутри — попап рисует ОС. Поэтому поверх
   него строится своя кнопка со стрелкой и свой список в наших цветах, а сам
   <select> остаётся в DOM источником правды: его читают formData и
   автоформат телефона в main.js (`ccSelect.selectedOptions[0].dataset.format`). */
.csel{position:relative}
.csel-native{position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; margin:0; padding:0; border:0}
.csel-btn{
  display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  padding:14px 16px; border:1px solid var(--line-strong); border-radius:var(--r-xs);
  background:rgba(255,255,255,.05); color:var(--graphite); font-size:15px; text-align:left;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.csel-btn:hover{border-color:var(--clay)}
.csel.is-open .csel-btn{border-color:var(--clay); background:rgba(255,255,255,.08)}
.csel-btn[data-placeholder="true"] .csel-val{color:var(--muted)}
.csel-chev{flex:0 0 auto; width:16px; height:16px; color:var(--clay); transition:transform .22s var(--ease)}
.csel.is-open .csel-chev{transform:rotate(180deg)}
/* min-width по кнопке, но панель может быть шире: колонка кода страны узкая,
   и «UA +380» в ней ломалось на две строки */
.csel-list{
  position:absolute; left:0; right:auto; min-width:100%; width:max-content; max-width:min(320px, 80vw);
  top:calc(100% + 8px); z-index:20; margin:0;
  max-height:240px; overflow-y:auto; padding:8px; list-style:none;
  background:var(--surface-2); border:1px solid var(--line-strong);
  border-radius:var(--r-sm); box-shadow:var(--shadow-card);
}
.csel-list[hidden]{display:none}
.csel-opt{
  padding:10px 12px; border-radius:var(--r-xs); font-size:15px;
  color:var(--graphite); cursor:pointer; transition:background .15s, color .15s;
}
.csel-opt:hover,
.csel-opt.is-active{background:rgba(255,255,255,.07)}
.csel-opt.is-sel{color:var(--clay)}
/* полоса прокрутки списка — в тон панели, а не системная светлая */
.csel-list{scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent}
.csel-list::-webkit-scrollbar{width:8px}
.csel-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22); border-radius:99px}
/* Чекбокс согласия и подпись не совпадали по базовой линии: бокс 18px, а
   строка текста при 12px и дефолтном line-height ≈14px, плюс ручной сдвиг
   margin-top:1px. Задаём строке ровно ту же высоту, что у бокса, — тогда
   flex-start совмещает их без подпорок. Заодно gap 9 → 12 (сетка 8px). */
.lead-consent{color:var(--muted); gap:12px; font-size:12px; line-height:18px}
.lead-consent input{margin:0}
.lead-consent span{line-height:18px}
.lead-consent input{background:rgba(255,255,255,.05); border-color:var(--line-strong)}
.lead-consent input:checked::after{border-color:var(--on-gold)}
.lead-consent input:checked{background:var(--clay); border-color:var(--clay)}

/* ---------- планировки: разворот-документ вместо карточки товара ----------
   Слева от заголовка убраны иконки — на трёх строках они работали
   украшением; значения набраны Prata, как цифры шагов, подписи ушли
   в капитель.
   03.08: фото — 3:4 вместо широкого кадра (растягивало портретные кадры).
   Было: план в отдельной раскрывашке рядом с фото — держала пустую рамку на
   всю высоту, даже когда никто не открыл. Босс справедливо указал: нелогично
   отдавать половину блока под то, что могут не открыть. Стало: план
   разворачивается ОВЕРЛЕЕМ поверх того же фото (реф идея «план1»/«план2»,
   295:331/332, канал 41fc2tir, но без отдельной колонки) — кнопка-чип
   стеклом в углу фото, лишнего места не ест вообще. */
.plans-panel{display:block; border-radius:0; box-shadow:none; overflow:visible}
/* Замерено getBoundingClientRect на реальном переходе по якорю (не на глаз):
   при 900px высоты экрана весь блок (табы+фото+CTA) занимал 995.7px — на
   95.7px больше экрана. Служебные отступы между табами/фото/CTA (было 40+40
   по .plans-tabs{margin:var(--sp-lg) 0} + 32 паддинг .plans-info) ужаты —
   это освобождает место под фото, а не отнимает у него.
   04.08 правка: первая версия ужатия (50vh, floor 440) на РЕАЛЬНОЙ высоте
   окна браузера (обычно <900px из-за панели адреса/вкладок) упиралась в
   floor и получалась даже НИЖЕ прежних 460px — визуально «не изменилось».
   Верхний паддинг секции тоже ужат — это освобождает ещё бюджет под фото. */
#plans{padding-top:72px}
#plans .plans-tabs{margin:24px 0 12px}
/* Было width:min(480px,55%) — Босс: «не мельчи», фото должно тянуться во всю
   ширину контента, как остальные full-bleed кадры на странице (.why-photo и
   т.п.). aspect-ratio:3/4 отсюда убран (при 100% ширины контейнера ~1360px
   давал бы ~1813px высоты) — держим комфортную высоту через clamp, кроп
   портретных фото — object-position, уже подобран по-кадрово в JS/HTML.
   Floor поднят на 560px — заведомо выше и старых 460, и регрессировавших
   440: на типичной высоте окна десктоп-браузера (700-900px, а не 900px
   голого экрана) именно floor определяет итоговую высоту, а не vh. CTA-
   строка может слегка уезжать за экран на низких окнах — это принятый
   компромисс, высота фото приоритетнее полного умещения (прямая правка
   Босса). На больших мониторах растёт через vh до потолка 680px. */
/* 04.08 правка: ещё выше — floor 560→620, потолок 680→760 (просьба Босса
   «ещё выше фотографию в блоке с типажом вилл»). */
.plans-viewer{position:relative; width:100%; height:clamp(620px,64vh,760px);
  border-radius:var(--r-lg); overflow:hidden; background:var(--bg-deep); box-shadow:var(--shadow-card)}

/* чип-кнопка стеклом поверх фото — тот же приём, что у .pp-tags/.nuanu-badge.
   Два состояния (иконка+текст) внутри одной кнопки — открыл план, кнопка
   превращается в «Назад к фото» со значком галереи, не просто разворот
   стрелки (правка Босса). */
.plans-toggle{position:absolute; top:20px; right:20px; z-index:4; max-width:calc(100% - 40px)}
.plans-toggle-btn{
  display:flex; align-items:center; padding:12px 18px; border-radius:var(--r-pill);
  background:rgba(11,12,11,.5); border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:var(--white); font-size:14px; white-space:nowrap;
  transition:background .2s var(--ease);
}
.plans-toggle-btn:hover{background:rgba(11,12,11,.7)}
.plans-toggle-state{display:flex; align-items:center; gap:10px}
.plans-toggle-state--open{display:none}
.plans-toggle-ic{flex:0 0 auto; width:18px; height:18px; color:var(--clay)}
/* Кнопка «Назад к фото» на светлой панели плана — тёмная, как фон страницы
   (var(--bg-deep)), не светлая под цвет самой панели (Босс: сливалась) */
.plans-viewer.is-open .plans-toggle-btn{background:var(--bg-deep); color:var(--white); border-color:var(--bg-deep)}
.plans-viewer.is-open .plans-toggle-ic{color:var(--clay)}
.plans-viewer.is-open .plans-toggle-state--closed{display:none}
.plans-viewer.is-open .plans-toggle-state--open{display:flex}
/* .plans-toggle-panel — СЕСТРА .plans-toggle (не внутри неё): inset:0 должен
   мерить от всего кадра .plans-viewer (position:relative), а не от маленькой
   кнопки — иначе оверлей схлопывается до размера чипа (был баг, экран
   показывал пустой кремовый прямоугольник вместо плана на весь кадр).
   Панель закрывает ВЕСЬ кадр фото, не рядом с ним — opacity/visibility, не
   max-height: это оверлей, а не аккордеон, который раздвигает макет. Панель
   — сама светлая «бумага» (у PNG-планов белый фон запечён в файл, Босс не
   обрезал) — фон панели = фон картинки, шва нет физически. */
/* Баг «кнопка назад в галерею без анимации»: transition стоял только на
   opacity, а visibility:hidden прилетал в тот же тик клика — элемент
   переставал рендериться раньше, чем успевал начаться fade, поэтому переход
   выглядел мгновенным переклюением. Чиним transition-delay на visibility:
   при закрытии она включается ПОСЛЕ фейда (задержка .3s), при открытии —
   сразу (задержка 0).
   05.08 правка Босса: размытое фото вернуло путаницу с рендер-слайдом в
   конце галереи (см. .plans-viewer-slide--topview) — панель плана обратно
   на белом, блюр-фото переехал туда. */
.plans-toggle-panel{position:absolute; inset:0; z-index:3;
  background:#fff;
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility 0s linear .3s}
.plans-viewer.is-open .plans-toggle-panel{opacity:1; visibility:visible;
  transition:opacity .3s var(--ease), visibility 0s linear 0s}
.plans-toggle-panel-in{padding:20px; padding-top:76px; display:flex; justify-content:center; align-items:flex-start; height:100%}
.plans-toggle-panel-in img{display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain}
/* двухэтажные типы — buildFloorsSVG вставляет <svg class="plan-floors-svg">
   вместо img (сама функция общая с v1, там она сидит в position:absolute
   боксе с фиксированной высотой — тут высота панели автоматическая, поэтому
   position:absolute+inset сбрасываем, размер держит aspect-ratio 1920:1277 —
   тот же, что у viewBox функции buildFloorsSVG */
.plans-toggle-panel-in svg.plan-floors-svg{position:static; inset:auto;
  width:100%; height:auto; max-width:100%; aspect-ratio:1920/1277}

.plans-info{
  /* flex-direction обязателен: в v1 у .plans-info стоит column, и без сброса
     строка характеристик оставалась колонкой (замер: высота 455px).
     padding-top 32→24 — часть экономии места под фото, см. .plans-viewer выше */
  display:flex; flex-direction:row; align-items:flex-end; flex-wrap:wrap; gap:40px;
  background:transparent; padding:24px 0 0; margin-top:0;
  border-top:1px solid var(--line);
}
/* название виллы оформлено как «Stella Solaris» (правка Босса): Prata,
   золото, подчёркивание с отбивкой. Толщина линии у обоих сделана тоньше —
   дефолтная для 32px слишком жирная и спорит с засечками Prata */
.plans-info h3{font-family:'Prata',Georgia,serif; font-weight:400; font-size:32px;
  margin:0 40px 0 0; color:var(--clay);
  text-decoration:underline; text-underline-offset:8px; text-decoration-thickness:1px}
.signature-meta h3{text-decoration-thickness:1px; text-underline-offset:8px}
.plans-stat{display:block; border-top:0; padding:0; gap:0}
.plans-stat-ic{display:none}
.plans-stat .k{font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.plans-stat .v{font-family:'Prata',Georgia,serif; font-size:32px; line-height:1.1;
  margin-top:8px; color:var(--white)}
/* в колоночной раскладке v1 кнопка растягивалась по ширине панели; в строке
   ей нужен явный размер по контенту, иначе уезжает на отдельную строку */
/* ширина как у кнопки в шапке (замер: 200px) — правка Босса */
.plans-info .btn-glass{margin-left:auto; align-self:center; flex:0 0 auto;
  width:200px; justify-content:center}
@media (max-width:860px){
  .plans-viewer{height:clamp(360px,55vh,520px)}
  .plans-info{gap:24px; padding-top:24px}
  .plans-info h3{font-size:24px; margin:0; flex:0 0 100%}
  .plans-stat .v{font-size:24px; margin-top:4px}
  .plans-info .btn-glass{margin-left:0; flex:0 0 100%}
}

/* ---------- расстояния до точек: микрокарточки (04.08, правка Босса) ----------
   Была спецификация (тонкая линия + Prata-значение, без карточек) — Босс
   попросил вернуть карточный вид: та же пара «иконка + значение + подпись»,
   что у .stat-card в остальных местах сайта, только компактнее — 4 в ряд. */
.stat-grid-4{grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
/* justify-content:flex-end — иконки убраны у всех карточек ряда (по просьбе
   Босса), текст сидит по нижнему краю одинаково во всех четырёх. */
.stat-grid-4 .stat-card{
  display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-sm); box-shadow:var(--shadow-card); padding:22px 20px;
}
.stat-grid-4 .stat-card h3{font-family:'Prata',Georgia,serif; font-weight:400;
  font-size:26px; line-height:1.1; color:var(--clay)}
.stat-grid-4 .stat-card p{margin-top:6px; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.55); line-height:1.4}

/* ---------- вариант B: «спецификация» вместо пилюль ---------- */
/* Пилюля обещает короткий ярлык. Атрибуты архитектуры в неё ещё влезали,
   а заметки слайдера и чипы Stella были предложениями на 10–12 слов — отсюда
   дешевизна. Здесь строка листа характеристик: номер, засечка, текст.
   Тот же язык, что у Prata-цифр в шагах, — страница читается как одна система. */
.spec-list{list-style:none; margin:var(--sp-lg) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0}
.spec-row{display:flex; align-items:baseline; gap:12px; padding:16px 24px 16px 0;
  border-top:1px solid var(--line); color:var(--graphite); font-size:20px; line-height:1.35}
.spec-num{font-family:'Prata',Georgia,serif; font-size:14px; color:var(--clay);
  font-variant-numeric:tabular-nums; flex:0 0 auto}

/* ---------- подписи в галерее проекта ---------- */
/* по правке Босса — не пины на кадре, а мелкий текст под ним с пониженной
   непрозрачностью: поясняет, что в кадре, и не спорит с фотографией */
.gal-slide{margin:0; display:flex; flex-direction:column}
/* строго одна строка (правка Босса): длинные описания живут в alt, здесь —
   короткий ярлык. nowrap страхует от переноса, если текст всё же удлинят */
.gal-cap{margin-top:12px; font-size:13px; line-height:1.4; color:rgba(255,255,255,.5);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ---------- «Частная территория», вариант 3 ---------- */
/* Та же геометрия, что у блока 3: крупный вертикальный кадр слева на всю
   высоту, три карточки справа. Строки одинаковой высоты — сетка задаёт
   ритм, а не содержимое. */
.pv-grid{display:grid; grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(3, clamp(140px,14vw,190px)); gap:32px; margin-top:var(--sp-lg)}
.pv-photo{grid-row:1 / span 3; position:relative; margin:0; border-radius:var(--r-lg);
  overflow:hidden; background:var(--surface); box-shadow:var(--shadow-card)}
.pv-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* читаемость подписи — только rgba-слоем, без filter на самом кадре */
.pv-photo::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(11,12,11,.86) 0%, rgba(11,12,11,.45) 26%, rgba(11,12,11,0) 58%)}
.pv-photo-text{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:32px}
/* 20ch рвал «Свой забор, сад и&nbsp;бассейн&nbsp;— у&nbsp;каждой виллы» на
   3 строки (правка Босса — ровно 2). nbsp склеивает «и бассейн —» и
   «у каждой» в неразрывные куски — реальные точки переноса только после
   «сад» и после «—». 28ch помещает «...и бассейн —» одной строкой (342px
   из 455 возможных до следующей неразрывной группы), «у каждой виллы» —
   второй; 24ch (промежуточный вариант) не подходил, там всё равно 3 строки
   (переносить некуда до самого «—»), проверено замером boxHeight. */
.pv-photo-text h3{margin:0; font-size:clamp(20px,2vw,28px); font-weight:500; line-height:1.15;
  color:var(--white); max-width:28ch; text-wrap:balance}
.pv-card{display:grid; align-content:center; padding:32px 40px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow-card)}
.pv-card h3{margin:8px 0 8px; font-size:20px}
.pv-card p{margin:0; font-size:15px; line-height:1.5; color:rgba(255,255,255,.7)}
@media (max-width:1024px){
  .pv-grid{grid-template-columns:1fr; grid-template-rows:none; grid-auto-rows:auto}
  .pv-photo{grid-row:auto; min-height:clamp(320px,50vw,440px)}
}
@media (max-width:860px){
  .pv-grid{gap:16px}
  .pv-card{padding:24px}
  .pv-photo-text{padding:22px}
}

/* ---------- ПРОТОТИП: плашки на карточках планировок ---------- */
/* Показываю то, что описывал словами: площадь и вместимость уходят ПОВЕРХ
   кадра, а статусы проекта собираются в одну строку над сеткой. Стекло
   тёмное и pointer-events:none — те же правила, что у остальных накладок. */
.pp-head{display:flex; align-items:baseline; justify-content:space-between; gap:32px; flex-wrap:wrap}
.pp-head h2{margin:0}
.pp-status{display:flex; flex-wrap:wrap; gap:8px}
.pp-badge{
  padding:8px 14px; border-radius:var(--r-pill); font-size:14px;
  background:var(--surface); border:1px solid var(--line-strong); color:var(--muted);
}
.pp-badge--on{color:var(--clay); border-color:rgba(217,174,69,.45)}
.pp-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:var(--sp-lg)}
.pp-card{position:relative; aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow-card)}
.pp-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.pp-card::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(11,12,11,.8) 0%, rgba(11,12,11,.35) 26%, rgba(11,12,11,0) 55%)}
.pp-tags{position:absolute; top:16px; left:16px; right:16px; z-index:2; display:flex; flex-wrap:wrap; gap:8px; pointer-events:none}
.pp-tags span{
  padding:7px 12px; border-radius:var(--r-pill); font-size:13px; color:rgba(255,255,255,.94);
  background:rgba(11,12,11,.42); border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.pp-name{position:absolute; left:20px; bottom:18px; z-index:2; font-size:24px; color:var(--white)}
@media (max-width:860px){
  .pp-grid{grid-template-columns:1fr; gap:16px}
  .pp-card{aspect-ratio:3/2}
  .pp-head{gap:16px}
}

/* ---------- «Как купить виллу», вариант со липким заголовком ---------- */
/* Референс — product-feed на burton.com: слева колонка, которая остаётся на
   месте, справа лента карточек. Блок стоит рядом со старой каруселью, она не
   удалена — сравниваем.

   Без этой строки sticky не работал бы вовсе: в v1 у body стоит
   overflow-x:hidden, а он делает body контейнером прокрутки, и потомок с
   position:sticky липнет уже не к вьюпорту. `clip` обрезает горизонтальный
   вылет так же, но контейнер прокрутки НЕ создаёт. */
body{overflow-x:clip}

/* Левая колонка задана в пикселях, а не долей. С долей (4fr = 432px) набор
   внутри заканчивался на 344 — заголовок переносится по text-wrap:balance,
   у лида max-width, кнопка ещё уже, — и 128px пустоты внутри колонки
   складывались с зазором 48 в визуальные 176. Дыру создавала незаполненная
   колонка, а не гэп. 352 = ближайшее кратное 8 к фактической ширине набора,
   так что объявленный зазор теперь равен видимому. */
.ss-grid{display:grid; grid-template-columns:352px minmax(0,1fr); gap:48px; align-items:start}
/* align-self:start обязателен: иначе элемент растягивается по высоте колонки
   и «липнуть» ему уже некуда. top — высота приклеенной шапки плюс воздух */
.ss-head{position:sticky; top:120px; align-self:start}
.ss-head h2{margin:0}
/* без max-width: колонка уже задана в пикселях, и ограничивать строку ещё
   раз значит снова недозаполнить колонку — ровно та дыра, которую чиним */
.ss-head .lead{margin-top:24px; max-width:none}
.ss-cta{margin-top:40px}

.ss-list{display:flex; flex-direction:column; gap:24px; margin:0; padding:0; list-style:none}
/* Под эту раскладку карточка перестроена горизонтально: крупная цифра слева,
   текст справа. Столбиком (цифра над заголовком) карточки выходили высокими
   и пустыми, а цифра терялась. Цифра — шрифтом заголовков (Prata), по правке
   Босса: она тут работает как акцент блока, а не как мелкая метка. */
/* min-height + центрирование по вертикали: при высоте «по контенту» карточки
   выходили 124px и выглядели зажатыми — цифра почти упиралась в края.
   176 = 22×8, содержимое центрируется, воздух сверху и снизу одинаковый. */
.ss-card{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:32px; align-items:center;
  min-height:176px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:40px 48px; box-shadow:var(--shadow-card);
}
.ss-card .num{
  font-family:'Prata',Georgia,serif; font-weight:400;
  font-size:clamp(40px,4.4vw,64px); line-height:.9; color:var(--clay);
  /* ширина под двузначное число — цифры выстраиваются в колонку по левому краю */
  min-width:2ch; font-variant-numeric:tabular-nums;
}
.ss-card-body{min-width:0}
.ss-card h3{margin:0 0 8px; font-size:24px}
.ss-card p{margin:0; font-size:16px; line-height:1.5; color:rgba(255,255,255,.7)}

@media (max-width:1024px){
  .ss-grid{grid-template-columns:1fr; gap:40px}
  /* на узком экране липкая колонка съедала бы пол-экрана — отключаем */
  .ss-head{position:static}
  .ss-head .lead{max-width:none}
}
@media (max-width:860px){
  /* на мобиле фиксированная высота только раздувала бы список */
  .ss-card{padding:24px; gap:20px; min-height:0}
  .ss-card .num{font-size:36px}
  .ss-card h3{font-size:18px}
  .ss-card p{font-size:14px}
  .ss-list{gap:16px}
  .ss-cta{margin-top:24px}
}

/* ---------- галерея проекта ---------- */
/* Высота полосы задана, ширина слайда считается от пропорций самого кадра
   (width:auto при height:100%) — портретные и горизонтальные рендеры стоят
   рядом, и ни один не режется. Трек вынесен из .container, чтобы уезжал за
   край экрана, как остальные карусели проекта.
   Левый паддинг — тот же --edge-расчёт, что у .feat-track (styles.css:349):
   на экранах шире --container flat 40px уезжает левее реального края текста/
   сетки, первый кадр «прилипает» к краю вьюпорта вместо общей левой границы
   контента (баг с фото Nuanu на скрине Босса от заказчика). */
.gal-track{
  display:flex; gap:20px; margin-top:var(--sp-lg);
  --edge: max(40px, calc((100% - var(--container)) / 2 + 40px));
  padding:0 40px; padding-left:var(--edge);
  overflow-x:auto; overflow-y:hidden; touch-action:pan-x; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.gal-track::-webkit-scrollbar{display:none}
/* высота задана картинке, а не слайду: под кадром теперь живёт подпись */
.gal-slide{flex:0 0 auto; scroll-snap-align:center}
.gal-slide img{
  /* Босс 20.08: фото + стрелки над заголовком должны помещаться на один экран.
     Высоту ограничиваем и долей вьюпорта (56vh) — на невысоких/планшетных
     экранах кадр не выпихивает подпись и точки за пределы вида. */
  height:clamp(300px, min(40vw, 56vh), 520px); border-radius:var(--r-lg);
  background:var(--surface); box-shadow:var(--shadow-card);
}
/* НЕ loading="lazy" внутри горизонтального трека офскрин — тот же баг, что
   чинили в min-gallery: слайд повисает пустым при листании */
.gal-slide img{width:auto; max-width:none; display:block; object-fit:cover}

/* ---------- запрет нативного drag на фото каруселей (баг заказчика: фото
   «мотает вверх-вниз» в карточках планировок) ---------- */
/* Ни в styles.css, ни здесь раньше не было -webkit-user-drag/user-select —
   браузер по умолчанию тащит <img> как файл при клике-протяге мышью/трекпадом
   в ЛЮБУЮ сторону (это HTML5 drag, не скролл трека). На тач-жестах не мешало,
   но на маке в Chrome мышью/трекпадом ровно так и выглядит «мотает вверх-вниз»
   вместо горизонтального скролла трека. Правим только для v2 (файл подключён
   только на v2-страницах), styles.css и v1 не трогаем. */
.plans-viewer-slide img,
.gal-slide img,
.min-gallery-slide img{
  -webkit-user-drag:none; user-drag:none; user-select:none; -webkit-user-select:none;
}

/* ---------- бейдж BLACK SANDS OASIS на мастер-плане Nuanu ---------- */
/* Правка Босса: сделать акцентнее — залить цветом фона страницы (графит),
   обводку убрать. Была полупрозрачная подложка rgba(58,53,47,.15) с белой
   рамкой — на пёстром рендере читалась как ещё одна подпись, а не как метка
   нашего объекта. Пин (точка + короткий указатель) добавляется через
   window.BSO_NUANU_BADGE_PIN в index.html — теми же примитивами, что у
   остальных названий. */
.nuanu-badge--bso{background:var(--surface); border:0}
/* указатель и точка бейджа — тёмные (#131313, правка Босса), в отличие от
   белых пинов остальных подписей: так метка нашего объекта отделяется от
   инфраструктурных. Линия чуть толще белых — тёмное на пёстром кадре тоньше
   читается */
.nuanu-pins-svg line.badge-pin{stroke:#131313; stroke-width:1.8}
.nuanu-pins-svg ellipse.badge-pin{fill:#131313}

/* ---------- куки-плашка ---------- */
/* background:var(--white) остался белым (переменная означает «белый текст на
   тёмном» и не переопределялась), а цвет текста уже светлый — получалось
   белое по белому, плашка читалась пустой. */
.cookie-note{background:var(--surface); border-color:var(--line-strong)}
.cookie-note p{color:var(--muted)}
/* z-index плашки (150) выше оверлея меню (90): пока куки не приняты, открытое
   мобильное меню перекрывалось ею ровно по переключателю RU/EN. Прячем плашку
   на время открытого меню — та же болячка есть и в v1. */
body.menu-open .cookie-note{opacity:0; visibility:hidden; pointer-events:none}

/* ---------- команда: на EN показываем только Степана ---------- */
/* Правка Босса — то же решение, что уже действует на unitdeveloper.com в блоке
   Founders. Язык берём из атрибута lang на <html>: его выставляет setLang(),
   поэтому переключение RU/EN работает без перезагрузки. Оставшаяся карточка
   центрируется и не растягивается на всю ширину блока. */
html[lang="en"] .team-card--anna{display:none}
html[lang="en"] .team-grid{grid-template-columns:minmax(0,min(560px,100%)); justify-content:center}
/* Оставшаяся в одиночестве карточка вертикальной колонкой смотрелась сиротливо
   (правка Босса). На десктопе разворачиваем её горизонтально: фото слева,
   текст справа — раскладка делается сеткой по четырём плоским детям карточки,
   разметку трогать не нужно. На мобиле остаётся вертикальной. */
/* Сама карточка команды в v1 стоит вне сетки 8px: паддинг 35, отступы
   заголовка 6/12, подпись 13px. Приводим компонент к шкале — по правилу
   переноса правок это касается обеих карточек и обоих языков, не только
   английской. */
.team-card{padding:40px}
.team-role{font-size:16px}
.team-card h3{font-size:24px; margin:8px 0 16px}
.team-card p{font-size:16px; line-height:1.5}

@media (min-width:861px){
  html[lang="en"] .team-grid{grid-template-columns:minmax(0,min(864px,100%))}
  /* :not(.team-card--anna) обязателен: без него `display:grid` имел ту же
     специфичность, что и `display:none` выше, стоял ниже по файлу и
     перебивал скрытие — Анна возвращалась на EN */
  html[lang="en"] .team-card:not(.team-card--anna){
    display:grid; grid-template-columns:320px minmax(0,1fr);
    grid-template-rows:auto auto auto; column-gap:40px; row-gap:0; padding:40px;
    /* без align-content строки растягивались по высоте фото и текст
       расползался — группируем его в один блок по центру */
    align-content:center;
  }
  html[lang="en"] .team-card:not(.team-card--anna) .team-photo{grid-column:1; grid-row:1 / 4; align-self:center; margin-bottom:0}
  /* карточка тут вдвое крупнее — и шкала на ступень выше. Отступы задаём
     не общим row-gap, а по близости: должность и имя — одна группа (8px),
     описание отделено (24px) */
  html[lang="en"] .team-card:not(.team-card--anna) .team-role{grid-column:2; grid-row:1; align-self:end; margin-bottom:8px}
  html[lang="en"] .team-card:not(.team-card--anna) h3{grid-column:2; grid-row:2; font-size:32px; margin:0 0 24px}
  html[lang="en"] .team-card:not(.team-card--anna) p{grid-column:2; grid-row:3; align-self:start; font-size:18px; line-height:1.5; margin:0}
}
@media (max-width:860px){
  /* 20px в v1 тоже вне сетки */
  .team-card{padding:24px}
  .team-card h3{font-size:18px; margin:8px 0 16px}
  .team-role{font-size:13px}
}

/* ---------- футер ---------- */
.footer-social a{border-color:var(--line); color:var(--graphite)}
.footer-social a:hover{background:var(--clay); border-color:var(--clay); color:var(--on-gold)}

/* ---------- вспомогательные подписи: Light → Regular ---------- */
/* Правка Босса: «вспомогательные тексты хельветики — regular начертанием для
   большей утончённости». В v1 кикеры, роли, лейблы статов и ссылки футера
   стояли на Light/300 — на светлом фоне это читалось изящно, а на тёмном
   тонкие штрихи размываются и выглядят замыленно, а не тонко. Regular/400
   на тёмном даёт более чистый рисунок буквы. Заголовки (500) не трогаем —
   это не вспомогательный текст. */
.kicker,
.plans-stat .k,
.team-role,
.footer-col a{font-weight:400}

/* Крупные подзаголовки под h2 — наоборот, на ступень легче. Они и так стояли
   на Regular/400 (проверено: computed 400, подгружен HelveticaNeue-Roman, не
   Medium), но светлый текст на почти чёрном оптически прибавляет в весе и
   читается как Medium. На 18–24px Light держит рисунок буквы и выглядит тем
   самым «regular», которого просил Босс; мелкие подписи выше остаются на 400 —
   там Light как раз замыливается. */
.lead,
.villas-intro p,
.signature-meta p,
/* описания в карточках — тоже 300 (правка Босса: «поставить всем»).
   Мелкие подписи-лейблы выше остаются на 400, там Light замыливается. */
.stat-card p,
.priv-card p,
.pv-card p,
.step-card p,
.ss-card p,
.team-card p,
.vcard-text p{font-weight:300}
/* .nuanu-caption того же размера и роли оставлен на 400 умышленно: он лежит
   НА фото, а дизайн-система запрещает менять вес текста на фото относительно
   макета — Light там начинает пропадать на светлых участках кадра. */

/* ---------- типографика: Prata на секционных заголовках ---------- */
/* В макете все h2 — Prata 70–80px при line-height 65–75, то есть ≈1.0.
   Hero-заголовок оставлен на Helvetica: в макете он тоже не Prata (Onest 100). */
h2{font-family:'Prata',Georgia,'Times New Roman',serif; font-weight:400; line-height:1.04; letter-spacing:-.005em}
.signature-meta h3,
.plans-info h3{font-family:'Prata',Georgia,serif; font-weight:400}

/* =========================================================================
   БЛОК 3 макета «бсо2»: «Виллы в комплексе будущего это:»
   Слева — Prata-заголовок, справа — два абзаца вводного текста.
   Ниже — сетка из 4 фото-карточек: ряд 1 = 6/6, ряд 2 = 5/7 (как в макете,
   там 745+745 и 580+905 при контенте 1520px). Текст лежит НА фото, читаемость
   держится только rgba-слоем градиента — без filter:brightness/saturate,
   иначе фото становится грязным.
   ========================================================================= */
/* «Современный минимализм и восточная чувственность» — на десктопе рвался на
   4 строки (max-width:761px от .block-head-split тесен для 64px Prata),
   правка Босса: ровно 2 строки. 920px — между шириной пары «Современный
   минимализм» (~891px) и тройки «...минимализм и» (~948px), так что перенос
   детерминирован и без text-wrap:balance, а не зависит от эвристики браузера. */
#architecture .block-head-split h2{max-width:920px}

/* 04.08: .spec-list (4 строки характеристик) слит со слайдером — подписи
   переехали на фото (.arch-slide-cap, как .vcard-text у блока 3). Место,
   которое раньше занимал список, теперь отдано фото: вместо узкого 2.4/1
   (567px при 1360px контейнере) — высота под управлением clamp, до 900px. */
/* .spec-list ушёл из разметки — вместе с ним ушла цепочка отступов
   `.spec-list + .min-gallery`, спускавшая «заголовок/лид → контент» 40.
   .min-gallery — теперь прямой сосед .block-head-split, отступ держим сам. */
#architecture .min-gallery{aspect-ratio:auto; height:clamp(560px,66vh,900px); margin-top:40px}
#architecture .min-gallery-slide{position:relative}
/* тот же приём читаемости, что у .vcard::after (:773) — только rgba-градиент,
   без filter:brightness/saturate (дизайн-система, фото иначе «грязнеет») */
.arch-slide-cap{position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:40px 40px 32px;
  background:linear-gradient(to top, rgba(11,12,11,.78) 0%, rgba(11,12,11,.4) 45%, rgba(11,12,11,0) 100%)}
.arch-slide-cap .spec-num{display:block; font-family:'Prata',Georgia,serif;
  font-size:14px; color:var(--clay); margin-bottom:8px}
.arch-slide-cap h3{margin:0; font-size:clamp(20px,2.2vw,28px); font-weight:500; color:var(--white)}

/* ---------- #invest: фото с чипами (реф Figma «ТУТСМОТРИ», 6:695,
   страница БСО2, канал pghzhfwu) ----------
   Было: 3 карточки статистики отдельно + фото ниже. В референсе — один
   крупный кадр, стеклянные чипы лежат прямо на фото. Заголовок блока на
   фото НЕ переносим (в отличие от референса) — h2/lead остаются обычным
   текстом секции. Чипы посажены к нижнему краю кадра, где на фото ровная
   гладь бассейна — там же, где чипы сидят на воде в самом референсе. */
.invest-photo{position:relative; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-card); aspect-ratio:16/10}
/* object-position 62% вниз — тот же приём, что на nuanu-masterplan.jpg
   (см. feedback в памяти): верхняя треть кадра — почти пустое закатное
   небо, застройка/берег/скалы держатся в нижних 2/3 */
.invest-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 62%; display:block}
.invest-photo::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(11,12,11,.7) 0%, rgba(11,12,11,.28) 38%, rgba(11,12,11,0) 65%)}
.invest-chips{position:absolute; z-index:2; left:32px; right:32px; bottom:32px;
  display:grid; grid-template-columns:1fr 1fr; gap:16px}
.invest-chip--wide{grid-column:1 / -1}
.invest-chip{background:rgba(19,19,19,.45); border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-sm); padding:26px 28px;
  backdrop-filter:blur(24px) saturate(1.1); -webkit-backdrop-filter:blur(24px) saturate(1.1)}
/* акцентнее (правка Босса 05.08): значение — Prata золотом, как остальные
   цифры-статы на сайте (.stat-card h3 и т.п.), крупнее прежнего 18px белого */
.invest-chip h3{margin:0; font-family:'Prata',Georgia,serif; font-weight:400;
  font-size:30px; line-height:1.15; color:var(--clay)}
.invest-chip p{margin:8px 0 0; font-size:14px; line-height:1.5; color:rgba(255,255,255,.85)}
@media (max-width:860px){
  .invest-photo{aspect-ratio:3/4}
  .invest-chips{left:16px; right:16px; bottom:16px; grid-template-columns:1fr; gap:10px}
  .invest-chip{padding:18px 20px}
  .invest-chip h3{font-size:23px}
  .invest-chip p{font-size:13px}
}

/* В v1 стоит `#architecture + .section{padding-top:20px}` — правка Босса, чтобы
   архитектура и шедшая за ней карусель преимуществ читались как ОДНА тема.
   В v2 следом идёт самостоятельный блок со своим крупным заголовком и вводным
   текстом — это отдельная тема, и урезанный отступ склеивал её с подписью
   предыдущей секции. Возвращаем общий ритм секций (100+100). */
.section.villas{padding-top:var(--sp-3xl)}

/* Колонки и зазор — ровно как у .villas-grid ниже (1fr/1fr, 32), иначе
   вводный текст начинался на 24px правее карточек: у шапки был зазор 80,
   у сетки 32, и левые края правых колонок не совпадали (правка Босса). */
.villas-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:32px; row-gap:var(--sp-lg); align-items:start}
.villas-head h2{margin:0; max-width:11ch}
.villas-intro{display:flex; flex-direction:column; gap:20px; padding-top:6px}
.villas-intro p{margin:0; font-size:clamp(15px,1.25vw,18px); line-height:1.5; color:rgba(255,255,255,.72)}

/* Сетка — по прототипу Босса (Figma 275:715 «block3_redesigned_prototype»):
   слева ОДНА высокая карточка «6-метровые потолки» на всю высоту блока (он
   просил сделать на них больший акцент), справа стопка из трёх. В прототипе
   контент 1517px: колонки 741 и 744, зазор 32, три правые карточки 313/318/314
   с зазорами 35 — то есть по замыслу это 1fr/1fr и три равные строки, просто
   набросок неровный. Приводим к сетке: равные колонки, зазор 32 везде,
   высота строки = (высота блока − 2 зазора)/3. */
.villas-grid{display:grid; grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(3, clamp(190px,19.6vw,282px)); gap:32px; margin-top:var(--sp-2xl)}
.vcard{position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow-card)}
.vcard--tall{grid-row:1 / span 3}
.vcard img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* читаемость текста держится ТОЛЬКО rgba-слоем: никаких filter:brightness/
   saturate на самом фото — оно от них становится грязным */
.vcard::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(11,12,11,.84) 0%, rgba(11,12,11,.5) 22%, rgba(11,12,11,.08) 48%, rgba(11,12,11,0) 100%)}
/* высокая карточка: текст сверху, значит и затемнение сверху. В прототипе
   заголовок лежит на тёмном потолке самого кадра — но это держится только
   на конкретном фото, поэтому подложку задаём явно */
.vcard--tall::after{background:linear-gradient(to bottom, rgba(11,12,11,.8) 0%, rgba(11,12,11,.44) 24%, rgba(11,12,11,.06) 50%, rgba(11,12,11,0) 100%)}
.vcard-text{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:28px}
.vcard--tall .vcard-text{bottom:auto; top:0; padding:36px 32px 32px}
/* Правка Босса: 36/18 закрывали кадр — текст спущен к шкале карточек сайта
   (там h3 20px), но остаётся на ступень крупнее, потому что и карточки крупнее.
   Вес 500, а не Bold как в прототипе: это наш шаг шкалы для заголовков карточек. */
.vcard-text h3{margin:0 0 8px; font-size:clamp(18px,1.75vw,25px); font-weight:500; line-height:1.16;
  color:var(--white); max-width:34ch; text-wrap:balance}
/* max-width подобран так, чтобы подпись укладывалась в две строки, а не в три:
   лишняя строка — это ещё ~22px закрытого кадра на каждой карточке */
.vcard-text p{margin:0; font-size:clamp(13px,1.05vw,15px); line-height:1.45; color:rgba(255,255,255,.8); max-width:70ch}

/* =========================================================================
   FAQ «Ответы на вопросы» — узкая центральная колонка (в макете 1060 из 1920),
   раскрытый вопрос = белая пилюля с тёмным текстом, закрытые = поверхность.
   ========================================================================= */
.faq-wrap{max-width:1060px; margin:0 auto}
.faq-wrap h2{margin:0 0 var(--sp-lg)}
.faq-list{display:flex; flex-direction:column; gap:14px}
.faq-item{border-radius:var(--r-lg); overflow:hidden}
.faq-q{display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%;
  padding:20px 26px; text-align:left; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); color:var(--graphite); font-size:clamp(15px,1.25vw,18px); font-weight:400;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease)}
.faq-q:hover{background:var(--surface-2)}
.faq-chev{flex:0 0 auto; width:20px; height:20px; transition:transform .28s var(--ease)}
.faq-item.is-open .faq-q{background:var(--white); color:var(--ink); border-color:transparent}
.faq-item.is-open .faq-chev{transform:rotate(180deg)}
/* раскрытие без max-height-магии: grid 0fr→1fr корректно анимирует любую высоту */
.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{margin:0; padding:18px 26px 6px; font-size:clamp(14px,1.1vw,17px); line-height:1.55; color:rgba(255,255,255,.66)}

/* чипы под Stella Solaris: .45 давало 4.46:1 на тёмной подложке — чуть ниже AA */

/* ---------- юридические страницы (consent.html, legal-info.html) ---------- */
/* В v1 их стили жили инлайном в самих файлах и были светлыми (rgba(58,58,58,.8)).
   Здесь они собраны в теме — заодно чинится главное: копии в /v2/ подключали
   `css/styles.css`, которого на этом уровне нет, и открывались вообще без
   оформления. */
.legal-page{padding:calc(var(--sp-3xl) + 60px) 0 var(--sp-3xl)}
.legal-head{display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:var(--sp-lg)}
.legal-page h1{font-family:'Prata',Georgia,serif; font-size:clamp(30px,4vw,48px); font-weight:400;
  line-height:1.06; letter-spacing:-.005em; margin:0 0 var(--sp-lg)}
/* подзаголовки юрстраницы — Helvetica, а не Prata: у Prata только вес 400,
   на 500 браузер синтезировал бы псевдожир */
.legal-page h2{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:22px; font-weight:500; line-height:1.2; margin:var(--sp-xl) 0 var(--sp-sm); color:var(--white)}
.legal-page p{font-size:16px; line-height:1.6; color:rgba(255,255,255,.72); max-width:72ch; margin:0 0 var(--sp-sm)}
.legal-page ul{max-width:72ch; margin:0 0 var(--sp-sm); padding-left:20px}
.legal-page li{font-size:16px; line-height:1.6; color:rgba(255,255,255,.72); margin-bottom:6px}
.legal-page a.back{color:var(--clay); font-size:14px}
.legal-page a.back:hover{color:var(--clay-soft)}
.legal-page p a{color:var(--clay); border-bottom:1px solid rgba(217,174,69,.4)}
.legal-page .legal-note{margin-top:var(--sp-lg); font-size:14px; color:rgba(255,255,255,.5)}
.legal-head .lang button{color:rgba(255,255,255,.55); font-size:14px}
.legal-head .lang button.is-active{color:var(--white)}
.legal-head .lang span{color:rgba(255,255,255,.3)}
@media (max-width:860px){
  .legal-page{padding:96px 0 48px}
  .legal-head{flex-wrap:wrap; gap:12px}
}

/* ============================================================================
   ДЕСКТОП: та же система, что и на мобиле
   ----------------------------------------------------------------------------
   Прогнал тот же аудит на 1440 — там было хуже, чем на мобиле до правок:
   отступ «заголовок → контент» гулял пятью ступенями (16/24/40/60/64), а
   кеглей на странице жило 19 (11,12,13,14,15,16,18,19,20,22,24,25,28,30,32,
   36,63,64,137). Жёлоб 40 и ритм секций 100/100 были в порядке.
   ========================================================================= */
/* тот же баг со специфичностью, что чинили на мобиле: `#architecture + .section`
   из v1 (селектор с ID) перебивал `.section.villas` — у блока «Виллы» было
   padding-top 20px вместо 100 и на десктопе тоже */
#villas.section{padding-top:var(--sp-3xl)}

/* «заголовок → лид» 24, «заголовок/лид → контент» 40 — две ступени вместо пяти */
.lead{margin-top:24px}
.signature-photo,
.team-grid,
.villas-grid,
.pv-grid,
.nuanu-photo,
.stat-grid,
.invest-photo,
.plans-tabs,
.gal-track{margin-top:40px}
.faq-wrap h2{margin-bottom:40px}

/* шкала кеглей 12/14/16/18/20/24/32/40/64 — выпадающие правим поимённо */
.gal-cap{font-size:14px}                       /* было 13 */
.lang button, .lang span{font-size:14px}       /* было 13/12 */
.csel-btn, .csel-opt, .csel-val{font-size:16px}/* было 15 */
.stat-grid .stat-card p,
.villas-intro p,
.signature-meta p{font-size:16px}              /* было 15 */
.menu-overlay a{font-size:20px}                /* было 19 */
.logo, .logo b{font-size:20px}                 /* было 22 */
.vcard-text h3{font-size:24px}                 /* верх clamp давал 25 */
/* верните было: проход по шкале кеглей срезал название формата ("Studio" и
   т.д.) до 24px, сравняв с мелкими лейблами — но по замыслу (:232) оно должно
   визуально стоять вровень с соседней цифрой площади (тоже 32px, тоже Prata),
   а не проигрывать ей. 32 УЖЕ есть в шкале (тот же шаг, что у .plans-stat .v) */
.stat-card h3{font-size:32px}                  /* было 30 */
.signature-meta h3,
.fin-card-text h3{font-size:32px}              /* было 36 */
.ss-card .num{font-size:64px}                  /* clamp давал дробные 63.36 */
.vcard-text p, .pv-card p{font-size:16px}      /* было 15 */
.pv-photo-text h3{font-size:24px}              /* верх clamp давал 28 */
.lead-form-sub, .cookie-note p, .cookie-note-row a{font-size:14px}  /* было 13 */
/* финальный CTA — баннер во всю ширину с фото, а не контентная секция:
   по дизайн-системе он не обязан подчиняться ритму секций, отступ 60 у него
   свой и оправданный. Оставляю намеренно. */

/* ============================================================================
   МОБИЛЬНАЯ СИСТЕМА: отступы и шкала кеглей
   ----------------------------------------------------------------------------
   Аудит показал ровно то, на что указал Босс: жёлоб 20px (вне сетки 8),
   отступ «заголовок → контент» гулял 16/24/40 от блока к блоку, и на странице
   жило 17 разных кеглей (7,10,11,12,13,14,15,16,18,19,20,22,24,30,32,36,64).
   Для сравнения замерил burton.com: жёлоб 16, восемь кеглей (9,12,14,16,18,
   20,24,32), веса 400/500/700 с закреплёнными ролями. И главное — у них у
   секций padding:0, вертикальный ритм живёт на обёртке через именованные
   модификаторы, поэтому «40 вместо 24» просто неоткуда взять.

   Здесь то же по смыслу, но в наших терминах: одна лестница отступов и одна
   шкала кеглей, заданные в одном месте, а не по месту в каждом блоке.
   ========================================================================= */
@media (max-width:860px){
  /* --- лестница отступов --- */
  .container{padding:0 16px}          /* жёлоб: 20 (вне сетки) → 16, как у Burton */
  .section{padding:48px 0}            /* единственная ступень ритма секций */
  /* v1 просаживает верхний отступ у соседа #architecture селектором с ID,
     и он перебивал .section.villas по специфичности — блок липнул к
     предыдущему (замер: padding-top 12px вместо 48). Бьём тем же оружием. */
  #villas.section{padding-top:48px}

  /* заголовок → лид: 16 (лид — продолжение заголовка, одна группа)
     заголовок/лид → контент: 24 (следующая группа) */
  .lead{margin-top:16px}
  .signature-photo,
  .team-grid,
  .villas-grid,
  .pv-grid,
  .nuanu-photo,
  .stat-grid,
  .invest-photo,
  .priv-grid,
  .plans-tabs{margin-top:24px}
  .faq-wrap h2{margin-bottom:24px}
  .gal-track{margin-top:24px}
  #architecture .min-gallery{margin-top:24px; height:clamp(380px,58vh,560px)}
  .arch-slide-cap{padding:20px}
  .arch-slide-cap h3{font-size:20px}

  /* --- шкала кеглей: 12 / 14 / 16 / 20 / 24 / 32 --- */
  .lead{font-size:14px}                                   /* было 12 */
  /* микрокарточки в 2 колонки — компактнее, чем в 1 ряд на 390px */
  .stat-grid-4{grid-template-columns:1fr 1fr; gap:10px}
  .stat-grid-4 .stat-card{padding:16px 14px}
  .stat-grid-4 .stat-card h3{font-size:20px}
  .stat-grid-4 .stat-card p{margin-top:4px; font-size:10px}
  .team-role{font-size:12px}                              /* было 13 */
  .pv-card p{font-size:14px}                              /* было 15 */
  .gal-cap{font-size:12px}                                /* было 13 */
  /* 4 колонки на 390px давали перенос в 3 строки ("Floor-to-ceiling windows")
     и вклад в горизонтальный overflow страницы — тот же паттерн, что уже
     применён к .villas-grid/.pv-grid выше */
  .spec-list{grid-template-columns:1fr}
  .spec-row{font-size:14px}
  .vcard-text p{font-size:14px}                           /* нижняя граница clamp была 13 */
  .faq-q{font-size:16px}                                  /* нижняя граница clamp была 15 */

  /* остальные выпадающие из шкалы — поимённо, по факту замера страницы */
  .csel-btn, .csel-opt, .csel-val{font-size:16px}         /* было 15 */
  .footer-col a, .footer-brand p, .placeholder-link{font-size:14px}  /* было 13/11 */
  .footer-col h4{font-size:16px}                          /* было 15 */
  .menu-overlay a{font-size:20px}                         /* было 19 */
  .logo b, .logo{font-size:20px}                          /* было 22 */
  .lang button, .lang span{font-size:12px}                /* было 13 */
  .plans-stat .k{font-size:12px}                          /* было 13 */
  .stat-card h3{font-size:24px}                           /* было 30 */
  .lead-form-sub{font-size:12px}                          /* было 13 */
  .cookie-note-row .btn, .cookie-note-row a, .mob-cta .btn{font-size:14px}  /* было 13 */
  .plans-info .btn-glass{font-size:16px}                  /* было 15 */
  .ss-card .num{font-size:32px}                           /* было 36 */
  .villas-intro p, .signature-meta p, .stat-grid .stat-card p{font-size:14px}  /* было 15 */
  .final-stats .stat p{font-size:12px}                    /* было 11 */
  /* v2-only (Босс просил не трогать v1): было заголовок→лид/лид→статы/статы→
     кнопка везде одинаковые 24px (row-gap грида одним числом на все пары
     строк) — читалось как одна мешанина без групп. Разведено: заголовок→лид
     16 (одна группа), лид→статы 24 (группа→контент), статы→кнопка 40
     (кнопка — отдельное действие, разнесена заметно дальше) */
  .final-row{row-gap:0; margin-top:16px}
  .final-cta{margin-top:40px}
  .final-stats{margin-top:24px}
  .footer-bottom, .footer-bottom a, .footer-bottom span{font-size:12px}  /* было 13 */

  /* СОЗНАТЕЛЬНОЕ исключение: подписи и бейдж на мастер-плане (7–10px).
     Это аннотации поверх карты, они живут в своей системе координат и
     привязаны к кадру; на общей текстовой шкале им делать нечего.
     Всё равно требуют пересборки, когда придёт мастер-план в высоком
     разрешении, — тогда и пересчитаю. */
  /* пин бейджа BSO на мобиле: 1.8 (десктопное значение, styles.css v2.css:458)
     на маленьком кадре читался как толстая чёрная палка с еле заметной точкой
     на конце — обычные пины тоньше (.8, styles.css:870) и то на белом фоне,
     не тёмном. Тоньше линии и крупнее точка — читается как аккуратный пин,
     не как царапина. */
  .nuanu-pins-svg line.badge-pin{stroke-width:.9}
  .nuanu-pins-svg ellipse.badge-pin{rx:.7; ry:1.4}
}

/* ---------- планшет / мобайл ---------- */
@media (max-width:1024px){
  .villas-head{grid-template-columns:1fr; gap:24px}
  .villas-head h2{max-width:none}
  /* две колонки в один столбец: высокая карточка перестаёт растягиваться
     на три строки и получает свою пропорцию */
  .villas-grid{grid-template-columns:1fr; grid-template-rows:none; grid-auto-rows:minmax(260px,auto)}
  .vcard--tall{grid-row:auto; min-height:clamp(380px,54vw,520px)}
}
@media (max-width:860px){
  /* та же история, что с .menu-lang: под белую «приклеенную» шапку v1 цвет был
     тёмный, на тёмной шапке v2 RU/EN исчезали */
  .site-header.is-solid .lang button{color:rgba(255,255,255,.55)}
  .site-header.is-solid .lang button.is-active{color:var(--white)}
  .site-header.is-solid .lang span{color:rgba(255,255,255,.3)}

  .section.villas{padding-top:48px}   /* тот же ритм, что у остальных секций на мобиле */
  /* кадр выше — двум карточкам-подписям нужно место, иначе они съедают фото */
  .gal-track{gap:12px; padding:0 20px}

  .villas-grid{gap:16px; margin-top:var(--sp-xl); grid-auto-rows:minmax(300px,auto)}
  .vcard-text{padding:20px}
  .vcard--tall .vcard-text{padding:24px 20px 20px}
  .faq-q{padding:16px 18px; gap:14px}
  .faq-a p{padding:14px 18px 4px}
  .faq-list{gap:10px}
}

/* ---------- мягкий zoom фото на ховере (v2-специфичные карточки) ----------
   Тот же приём, что в styles.css: контейнер уже clip'ает через overflow:hidden
   (:597, :304), увеличенный кадр не вылезает за скруглённые углы. */
.vcard img,
.pv-photo img{transition:transform .5s var(--ease)}
.vcard:hover img,
.pv-photo:hover img{transform:scale(1.045)}

/* ---------- UNIT. как группа компаний — 4 карточки, как .priv-card + иконка ----------
   Правка Босса: секция «выбивалась» — текстовая простыня без единого
   визуального якоря на фото-driven странице. Иконка (.card-ic — тот же
   сайтовый класс, что у .priv-card/.stat-card) даёт зацепку для глаза;
   поясняющий абзац под сеткой убран — дублировал то, что уже сказано в
   4 карточках, читался отдельным непонятным довеском. */
/* 04.08: унификация с остальными карточками сайта (.stat-card/.pv-card) —
   были прозрачные, только с обводкой («в воздухе», против дизайн-системы,
   см. БОСС-ТРЕБОВАНИЯ.md «карточки обязательно с тенью/подложкой»). Теперь
   тот же background/border/shadow/радиус, что у .pv-card. */
/* 05.08 правка Босса: блок «выбивался» из общего ряда — заголовки карточек
   были на Prata золотом, как у СТАТИСТИКИ (.stat-card/.invest-chip), а не
   как у обычных icon+title+text карточек (.priv-card/.step-card/.team-card),
   к которым эта карточка ближе по смыслу (иконка+название компании+abзац,
   не число). Убран Prata/золото — обычный сан-сериф h3, как везде;
   padding/отступ h3→p приведены к .priv-card (32px, margin-bottom 24px —
   было 28/16, теснее, чем у соседей). */
.unitgrp-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:var(--sp-lg)}
.unitgrp-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:var(--shadow-card); padding:32px}
.unitgrp-card h3{font-size:20px; margin-bottom:24px}
.unitgrp-card p{font-size:15px; line-height:1.4; color:rgba(255,255,255,.65)}
@media (max-width:1024px){
  .unitgrp-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .unitgrp-grid{grid-template-columns:1fr; gap:16px}
  .unitgrp-card{padding:20px}
  .unitgrp-card h3{font-size:18px; margin-bottom:14px}
  .unitgrp-card p{font-size:14px}
}

/* ---------- Лightbox — полноэкранный просмотр фото галереи и слайдера
   типов вилл (правка Босса 04.08). Один инстанс на страницу, список кадров
   собирается в v2.js из текущих <img> контейнера-источника в момент клика —
   так учитывается активный язык/тип виллы, не нужен отдельный источник
   правды. Клик-зоны стрелок — тот же приём, что у .min-gallery-arrow
   (половина экрана кликабельна), закрытие — крестик/Esc/клик по фону. ---------- */
body.lb-lock{overflow:hidden}
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(10,10,9,.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .25s var(--ease);
}
.lightbox.is-open{opacity:1; visibility:visible}
.lightbox-stage{position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:80px 100px}
.lightbox-stage img{max-width:100%; max-height:100%; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox-close{
  position:absolute; top:24px; right:24px; z-index:2; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  color:var(--white); cursor:pointer; transition:background .2s;
}
.lightbox-close:hover{background:rgba(255,255,255,.18)}
.lightbox-close svg{width:18px; height:18px}
.lightbox-arrow{
  position:absolute; top:0; bottom:0; width:35%; z-index:1;
  display:flex; align-items:center; background:none; border:0; padding:0; margin:0;
  cursor:pointer; color:rgba(255,255,255,.6);
  transition:color .2s;
}
.lightbox-arrow.prev{left:0; justify-content:flex-start; padding-left:32px}
.lightbox-arrow.next{right:0; justify-content:flex-end; padding-right:32px}
.lightbox-arrow svg{width:32px; height:32px; filter:drop-shadow(0 1px 4px rgba(0,0,0,.6))}
.lightbox-arrow:hover:not(:disabled){color:var(--white)}
.lightbox-arrow:disabled{opacity:0; pointer-events:none}
.lightbox-count{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:2;
  font-size:13px; letter-spacing:.04em; color:rgba(255,255,255,.55);
}
@media (max-width:768px){
  .lightbox-stage{padding:56px 16px}
  .lightbox-arrow{width:30%}
  .lightbox-arrow.prev{padding-left:12px}
  .lightbox-arrow.next{padding-right:12px}
  .lightbox-close{top:16px; right:16px}
}


/* ==========================================================================
   ПРАВКИ БОССА 17.08
   ========================================================================== */

/* ---------- 1. Чипы Stella Solaris — прямо на фото, только десктоп ---------- */
/* Босс 20.08: чипы с фото убраны совсем. На кадре Stella Solaris теперь два
   оверлея — плашка-заголовок в левом верхнем углу (.sig-badge) и описание
   стеклянной строкой у нижнего края (.sig-meta), перенесённое из блока,
   что раньше стоял ПОД фото. Оба видны на всех ширинах: это одна короткая
   строка на фразу, кадр не перекрывают. */
.signature-photo{position:relative}
.sig-chips{display:none}                     /* легаси-узел на случай кеша — не показываем */

/* скрим сверху (под заголовок) и снизу (под описание) — чтобы текст читался */
.signature-photo::before{content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(to bottom, rgba(11,12,11,.55) 0%, rgba(11,12,11,0) 26%),
    linear-gradient(to top,    rgba(11,12,11,.78) 0%, rgba(11,12,11,.28) 30%, rgba(11,12,11,0) 58%)}

.sig-badge{position:absolute; z-index:2; top:24px; left:24px;
  background:rgba(19,19,19,.42); border:1px solid rgba(217,174,69,.32);
  border-radius:var(--r-sm); padding:12px 20px;
  backdrop-filter:blur(20px) saturate(1.1); -webkit-backdrop-filter:blur(20px) saturate(1.1)}
.sig-badge h3{margin:0; font-family:'Prata',Georgia,serif; font-size:28px; line-height:1;
  color:var(--clay); letter-spacing:.01em}

.sig-meta{position:absolute; z-index:2; left:24px; right:24px; bottom:24px;
  display:flex; flex-wrap:wrap; gap:8px 40px}
.sig-meta p{margin:0; font-size:16px; line-height:1.45; color:rgba(255,255,255,.9);
  max-width:44ch; text-shadow:0 1px 12px rgba(0,0,0,.5)}

@media (max-width:860px){
  /* широкий кадр 620/327 на телефоне становится плоской полосой — текст снизу
     не влезает; поднимаем высоту, чтобы описание читалось поверх фото */
  .signature-photo{aspect-ratio:3/2}
  .sig-badge{top:16px; left:16px; padding:9px 15px}
  .sig-badge h3{font-size:21px}
  .sig-meta{left:16px; right:16px; bottom:16px; gap:6px}
  .sig-meta p{font-size:13px; line-height:1.4; max-width:none}
}

/* ---------- 2. Галерея: слайдер не читался как слайдер ---------- */
/* Жалоба с ноутбука: «не видно слайдера, не получается слайдить». Причины
   две. Первая — трек это нативный overflow-x со СПРЯТАННЫМ скроллбаром
   (scrollbar-width:none), то есть на десктопе с мышью не за что взяться:
   пальцем свайпнуть нельзя, полосы нет, а стрелки живут в шапке секции,
   в 600px над кадрами. Вторая — сами стрелки почти сливались с фоном
   (.05 подложка, .55 иконка). Лечим: тащим мышью прямо за кадры (JS),
   даём круглые стрелки на самих кадрах и поднимаем контраст. */
/* .gal-shell и боковые .gal-edge удалены 20.08 (см. js/v2.js): узлов больше
   нет, оставляем только курсор-протяг на самом треке. */
@media (hover:hover){
  .gal-track{cursor:grab}
  .gal-track.is-drag{cursor:grabbing; scroll-snap-type:none; user-select:none}
  .gal-track.is-drag img{pointer-events:none}
}
/* стрелки в шапке секции: были почти невидимы на графите */
.gallery .carousel-arrow{background:rgba(255,255,255,.09); color:rgba(255,255,255,.8)}
.gallery .carousel-arrow:hover:not(:disabled){background:rgba(255,255,255,.16); color:var(--white)}
/* точки под галереей теперь кликабельны (JS) — показываем это курсором */
#galDots span{cursor:pointer}

/* ---------- 3. Фото блока «Почему Бали и Нуану» ---------- */
/* Кадр реальный (Танах Лот), а не рендер комплекса: 16:10 в исходнике —
   ровно пропорция .invest-photo, кадрирования на десктопе нет. На мобиле
   блок становится 3/4, и прежний object-position:50% 62% уводил картинку
   в камни; держим храм и линию заката. */
.invest-photo img{object-position:50% 42%}
@media (max-width:860px){ .invest-photo img{object-position:58% 38%} }

/* Плавное появление фото планировок при переключении таба (Босс 20.08 — фото
   «долго грузят»). Основной фикс — пережатие ассетов (−56%) и фоновый прелоад
   в main.js; здесь косметика: кадр не «моргает» пустым→готовым, а мягко
   проявляется. animation both фиксирует конечную видимость — даже если фото
   ещё тянется, слайд в итоге всегда виден (без риска «невидимого» изображения). */
.plans-viewer-slide .plan-photo-img{animation:bsoPlanFade .4s ease both}
@keyframes bsoPlanFade{from{opacity:0} to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .plans-viewer-slide .plan-photo-img{animation:none}
}