/* VR Krtsanisi · сборка build/v3 · тёмная основа, 27.10.2026.
   Мир: «Лаунж с большим экраном» - вечер в лобби отеля: нейтральный графит трёх уровней света
   (стена #111, комната #171717, стол #1C1C1C; тёплый оттенок снят по слову Даниила 27.10),
   каждое фото - освещённое окно в тёмной стене, формы - стойка внутри сцены.
   Латунь (шампань #C2A878) - акцент бренда как у Whitewill: главные кнопки, активная строка меню,
   бегунок ленты, телефон в подвале, статус «строится». Одна гарнитура Jost: заголовки 400, цифры 300 от 60 px.
   Правила Даниила зашиты: углы прямые, рамка 8 px, факты во всю ширину без переносов, затемнение только под текстом,
   плотный трекинг, кнопки 72 px. Файл самостоятельный: variables.css и components.css дизайн-системы не использует. */

/* ---------- 0. Токены ---------- */
:root {
  /* три уровня света нейтрального графита: чёрный, тёмно-серый, серый (Даниил 27.10: без тёплого оттенка) */
  --wall: #111111;
  --room: #181818;
  --table: #202020;
  --field: #1A1A1A;
  --scene: #0A0A0A;
  /* текст и линии: два тона текста, один тон линий */
  --text: #F2F2F2;
  --text-2: rgba(242, 242, 242, .68);
  --line: rgba(255, 255, 255, .14);
  --line-2: rgba(255, 255, 255, .28);
  /* латунь - один акцент, единственный тёплый цвет */
  --brass: #C2A878;
  --brass-2: #D4BE92;
  --ink: #111111;
  --error: #E8766A;
  /* статусы корпусов */
  /* шрифт */
  --f: 'Jost', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  /* размеры */
  --edge: 8px;
  --inset: 24px;
  --header-h: 64px;
  --btn-h: 72px;
  --field-h: 72px;
  --sec: 56px;
  --fs-body: 18px;
  --fs-h1: clamp(34px, 3.75vw, 54px);
  --fs-h2: clamp(32px, 3.4vw, 48px);
  --fs-h2-s: clamp(26px, 2.25vw, 32px);
  --fs-num: clamp(44px, 4.5vw, 64px);
  --ease: cubic-bezier(.22, .8, .3, 1);
  --t: .3s;
}
@media (max-width: 760px) {
  :root { --inset: 16px; --header-h: 56px; --btn-h: 60px; --field-h: 56px; --sec: 48px; --fs-body: 17px; }
}

/* ---------- 1. База и поверхности браузера ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: rgba(255, 255, 255, .28) #111111; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--wall); color: var(--text); font-family: var(--f); font-weight: 400; font-size: var(--fs-body); line-height: 1.5; -webkit-font-smoothing: antialiased; caret-color: var(--brass); }
.page { background: var(--wall); color: var(--text); overflow-x: clip; color-scheme: dark; }
.page::-webkit-scrollbar, body::-webkit-scrollbar { width: 10px; }
.page::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .24); }
a { color: inherit; text-decoration: none; }
.link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: rgba(255, 255, 255, .45); transition: text-decoration-color var(--t) ease, color var(--t) ease; }
.link:hover { text-decoration-color: var(--brass); color: var(--brass-2); }
img, video, svg { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, figure, figcaption { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, output { font: inherit; color: inherit; }
b { font-weight: 500; }
::selection { background: var(--brass); color: var(--ink); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--header-h) + 8px); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.nw { white-space: nowrap; }

/* ---------- 2. Шапка ---------- */
.hdr { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--edge) 0 var(--inset); background: var(--wall); border-bottom: 1px solid var(--line); }
.hdr__logo img { height: 22px; width: auto; }
.nav { display: flex; gap: 28px; font-size: 14px; font-weight: 500; letter-spacing: .01em; color: var(--text-2); }
.nav a { position: relative; padding: 6px 0; white-space: nowrap; transition: color var(--t) ease; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--brass); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav a:hover, .nav a:focus-visible, .nav a.is-on { color: var(--text); }
.nav a:hover::after, .nav a:focus-visible::after, .nav a.is-on::after { transform: scaleX(1); transform-origin: left; }
.hdr__right { display: flex; align-items: center; gap: 24px; }
.hdr__tel { font-size: 14px; font-weight: 500; letter-spacing: .01em; white-space: nowrap; }
.hdr__ico { display: none; }
.ico-btn { width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; color: var(--text); }
.ico-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Меню на телефоне */
.menu { position: fixed; inset: 0; z-index: 60; background: var(--wall); padding: calc(var(--header-h) + 24px) max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.menu__close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 6px); right: max(8px, env(safe-area-inset-right, 0px)); }
.menu a { font-size: 26px; font-weight: 400; padding: 12px 0; border-bottom: 1px solid var(--line); }
.menu__contacts { margin-top: auto; padding-top: 24px; display: grid; gap: 10px; font-size: 17px; }
.menu__contacts .btn { width: 100%; }

/* ---------- 3. Кнопки и поля ---------- */
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; height: var(--btn-h); min-width: 0; padding: 0 28px 0 32px; background: var(--brass); color: var(--ink); font-size: 17px; font-weight: 500; letter-spacing: .01em; line-height: 1.2; border: 0; cursor: pointer; text-align: left; transition: background var(--t) ease, color var(--t) ease, box-shadow var(--t) ease; }
.btn:hover, .btn:focus-visible { background: var(--brass-2); }
.btn__arrow { width: 24px; height: 12px; flex: none; position: relative; transition: transform .4s var(--ease); }
.btn__arrow::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; }
.btn__arrow::after { content: ""; position: absolute; right: 0; top: 50%; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateY(-50%) rotate(45deg); }
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: translateX(8px); }
.btn--ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--brass); color: var(--ink); box-shadow: inset 0 0 0 1px var(--brass); }
.btn--sm { height: 44px; padding: 0 20px; font-size: 14px; gap: 16px; }
.btn--sm .btn__arrow { width: 18px; }
.btn--field { height: var(--field-h); padding: 0 24px 0 26px; gap: 22px; }
.btns { display: flex; flex-wrap: wrap; gap: var(--edge); }
.field { height: var(--field-h); width: 100%; min-width: 0; border: 1px solid var(--line-2); padding: 0 20px; background: var(--field); color: var(--text); font-size: 17px; letter-spacing: .01em; font-variant-numeric: tabular-nums; -webkit-appearance: none; appearance: none; border-radius: 0; transition: border-color var(--t) ease; }
.field::placeholder { color: var(--text-2); }
.field:hover { border-color: var(--text-2); }
.field:focus { outline: none; border-color: var(--brass); }

/* ---------- 4. Сцена: видео или фото в рамке 8 px ---------- */
.frame { padding: 0 var(--edge); }
.scene { position: relative; overflow: hidden; background: var(--scene); color: var(--text); }
.scene--hero { height: min(70vh, 680px); min-height: 520px; padding: var(--inset) var(--inset) 40px; }
.scene > img, .scene > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
/* затемнение только под текстом: большое пятно под заголовком и лидом слева внизу, малое под подписью справа; правая и верхняя части кадра живые */
.scene__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  radial-gradient(125% 105% at 10% 112%, rgba(0, 0, 0, .84) 0%, rgba(0, 0, 0, .6) 36%, rgba(0, 0, 0, .25) 66%, rgba(0, 0, 0, 0) 86%),
  radial-gradient(40% 60% at 98% 106%, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .58) 42%, rgba(0, 0, 0, 0) 80%); }
.scene__text { position: absolute; left: var(--inset); right: var(--inset); bottom: 40px; z-index: 2; color: #fff; }
.scene--hero .scene__cap { position: absolute; right: 0; bottom: 0; }
.h1 { font-weight: 400; font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -.012em; max-width: 22em; text-wrap: balance; }
.lead { margin-top: 16px; font-size: var(--fs-body); line-height: 1.5; max-width: 30em; color: rgba(255, 255, 255, .92); }
.scene__cap { font-size: 14px; line-height: 1.5; text-align: right; white-space: nowrap; color: rgba(255, 255, 255, .9); }

/* ---------- 5. Полоса фактов: во всю ширину, сразу под сценой ---------- */
.facts { padding: var(--edge) 0 0; }
.facts ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts li { padding: 34px 24px 32px 16px; min-width: 0; }
.facts li + li { border-left: 1px solid var(--line); padding-left: 24px; }
.facts b { display: block; font-weight: 300; font-size: var(--fs-num); line-height: 1; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; color: var(--text); }
.facts b small { font-size: clamp(16px, 1.9vw, 28px); font-weight: 400; letter-spacing: 0; margin-right: .18em; }
.facts span { display: block; margin-top: 14px; font-size: 15px; line-height: 1.45; color: var(--text-2); max-width: 22em; }
@media (max-width: 1200px) { .facts b { font-weight: 400; } }

/* ---------- 6. Стойка: форма внутри сцены (поле + латунная кнопка) ---------- */
.desk { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 24px 48px; align-items: start; padding: 40px calc(var(--inset) - var(--edge)) 48px; border-bottom: 1px solid var(--line); }
.desk__trust { margin-top: 16px; font-size: var(--fs-body); color: var(--text); max-width: 30em; }
.desk__text { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--text-2); max-width: 32em; }
.desk--table { margin-top: 40px; border-top: 1px solid var(--line); padding: 40px calc(var(--inset) - var(--edge)) 48px; }
.desk--inline { grid-template-columns: 1fr; gap: 20px; padding: 36px 0 0; margin-top: 40px; border-top: 1px solid var(--line); border-bottom: 0; }
.desk--inline .h2--s { max-width: 20em; }
.form { display: grid; gap: 12px; align-content: start; }
.form__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--edge); }
.fine { font-size: 13px; line-height: 1.45; color: var(--text-2); }
.fine a { text-decoration: underline; text-underline-offset: .2em; }
.form__err { display: none; font-size: 14px; color: var(--error); }
.form.is-error .form__err { display: block; }
.form.is-error .field { border-color: var(--error); }
.form__thanks { display: none; border-top: 1px solid var(--text); padding-top: 18px; font-size: 17px; line-height: 1.5; color: var(--text); }
.form__thanks a { text-decoration: underline; text-underline-offset: .2em; }
.form.is-done .form__row, .form.is-done .fine, .form.is-done .form__err { display: none; }
.form.is-done .form__thanks { display: block; }

/* ---------- 7. Секции: три уровня света ---------- */
.sec { padding: var(--sec) var(--inset) var(--sec); }
.room { background: var(--room); }
.table { background: var(--table); }
.sec--cont { padding-top: 48px; }
.bleed { margin-left: calc(var(--edge) - var(--inset)); margin-right: calc(var(--edge) - var(--inset)); }
.sec__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 48px; align-items: end; padding-bottom: 32px; }
.h2 { font-weight: 400; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.012em; text-wrap: balance; max-width: 16em; color: var(--text); }
.sec__head--start { align-items: start; }
.sec--photo-end { padding-bottom: 16px; }
.sec--strip-end { padding-bottom: 32px; }
.h2--s { font-size: var(--fs-h2-s); line-height: 1.15; max-width: 18em; }
.sec__sub { margin-top: 14px; font-size: var(--fs-body); color: var(--text-2); max-width: 34em; }
.sec__note { margin-top: 12px; font-size: 14px; color: var(--text-2); max-width: 40em; }
.sec__intro { justify-self: end; max-width: 30em; font-size: var(--fs-body); line-height: 1.5; color: var(--text-2); }
.h3 { font-size: 20px; font-weight: 400; line-height: 1.3; color: var(--text); }
.prose { max-width: 60ch; color: var(--text-2); }
.prose p + p { margin-top: 16px; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 48px; }
.cols > * { min-width: 0; }
.cols p { max-width: 34em; color: var(--text-2); }
.cols .h3 { margin-bottom: 10px; }

/* ---------- 8. Строки с линиями; свет только на активном ---------- */
.rows { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; padding: 20px 12px; margin: 0 -12px; border-bottom: 1px solid var(--line); align-items: baseline; transition: background var(--t) ease, opacity var(--t) ease; }
.row__name { font-size: var(--fs-body); color: var(--text); }
.row__text { font-size: 16px; line-height: 1.5; color: var(--text-2); }
.row__text b { color: var(--text); font-weight: 400; }
.rows--live:hover .row { opacity: .5; }
.rows--live .row:hover, .rows--live .row.is-on { opacity: 1; background: rgba(255, 255, 255, .045); }
.row.is-on { background: rgba(255, 255, 255, .045); }
.row[data-zones] { cursor: default; }
.points { border-top: 1px solid var(--line); }
.points li { border-bottom: 1px solid var(--line); padding: 18px 0; font-size: 17px; line-height: 1.5; color: var(--text-2); max-width: 44em; }
.points b { color: var(--text); font-weight: 500; }
.note-line { margin-top: 20px; font-size: 15px; line-height: 1.5; color: var(--text-2); max-width: 52em; }
.note-line b { color: var(--text); font-weight: 400; margin-right: .4em; }

/* ---------- 9. Фигура: окно в стене ---------- */
.fig { position: relative; min-width: 0; display: flex; flex-direction: column; }
.fig img { width: 100%; height: auto; background: var(--scene); transition: filter .5s var(--ease); }
.fig:hover img { filter: brightness(1.06); }
.fig__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.fig__cap b { font-weight: 400; color: var(--text); }
.fig__cap span { text-align: right; }
.fig--wide { margin-top: var(--edge); }
.fig--wide img { aspect-ratio: 21 / 9; object-fit: cover; }
.fig--after { margin-top: 48px; }

/* Мозаика: большое окно и два справа, не мельче 472 × 350 */
.mosaic { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--edge); margin-top: 48px; align-items: stretch; }
.mosaic .fig:first-child { grid-row: 1 / 3; }
.mosaic .fig:first-child img { flex: 1 1 auto; min-height: 0; height: 100%; object-fit: cover; }
.mosaic .fig:not(:first-child) img { aspect-ratio: 4 / 3; object-fit: cover; }
.pair2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--edge); margin-top: 56px; }
.pair2 .fig img { aspect-ratio: 16 / 9; object-fit: cover; }

/* ---------- 10. Видео жителей: экран во всю ширину ---------- */
.video-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 48px; align-items: end; }
.video-cols .h2 { max-width: 12em; }
.video-cols .prose { justify-self: end; max-width: 34em; }
.video { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--scene); color: var(--text); overflow: hidden; margin-top: 40px; }
.video > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; transition: filter .5s var(--ease); }
.video:hover > img { filter: brightness(1.06); }
.video__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 104px; height: 104px; background: var(--brass); color: var(--ink); border: 0; display: grid; place-items: center; cursor: pointer; transition: background var(--t) ease, transform .4s var(--ease); }
.video__play svg { width: 34px; height: 34px; fill: currentColor; margin-left: 5px; }
.video:hover .video__play, .video__play:focus-visible { background: var(--brass-2); transform: translate(-50%, -50%) scale(1.05); }

/* ---------- 11. Мастер-план со статусами ---------- */

/* Под планом и под таблицами: кнопка слева, пояснение справа */

/* ---------- 12. Лента фото ---------- */
.strip-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; padding-bottom: 32px; }
.strip-nav { display: flex; gap: var(--edge); flex: none; }
.strip-nav button { width: 56px; height: 56px; border: 1px solid var(--line-2); background: transparent; color: var(--text); cursor: pointer; display: grid; place-items: center; transition: background var(--t) ease, color var(--t) ease, border-color var(--t) ease; }
.strip-nav button:hover, .strip-nav button:focus-visible { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.strip-nav .btn__arrow { width: 22px; }
.strip-nav .prev .btn__arrow { transform: rotate(180deg); }
.strip-wrap { margin: 0 calc(-1 * var(--inset)); }
.strip { display: flex; gap: var(--edge); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--edge); overscroll-behavior-x: contain; }
.strip::-webkit-scrollbar { display: none; }
.strip .fig { flex: 0 0 min(1100px, 82vw); scroll-snap-align: start; }
.strip .fig img { aspect-ratio: 3 / 2; object-fit: cover; }
.strip:hover .fig img { filter: brightness(.86); }
.strip .fig:hover img { filter: brightness(1.04); }
.strip-bar { position: relative; height: 1px; background: var(--line); margin: 24px var(--edge) 0; }
.strip-bar i { position: absolute; left: 0; top: -1px; height: 3px; width: 20%; background: var(--brass); transition: transform .15s linear, width .15s linear; }

/* ---------- 13. Полоса призыва ---------- */
.cta { display: flex; justify-content: space-between; align-items: center; gap: 24px 32px; flex-wrap: wrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 0; margin-top: 40px; font-size: var(--fs-body); }

/* ---------- 14. Локация: таблица и ответ на возражение ---------- */
.case { margin-top: 40px; font-size: 24px; font-weight: 400; line-height: 1.4; max-width: 26em; letter-spacing: -.005em; color: var(--text); }
.case small { display: block; margin-top: 14px; font-size: 14px; font-weight: 400; color: var(--text-2); }

/* ---------- 15. Почему VIA: тезисы, кейс, форма у лица ---------- */

/* ---------- 16. Главное предложение: калькулятор с засечками ---------- */
.calc { display: grid; gap: 24px; }
.calc__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 15px; color: var(--text-2); }
.calc__row output { font-size: 24px; font-weight: 400; color: var(--text); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.calc input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: -4px 0 0; background: transparent; cursor: pointer; }
.calc input[type=range]:focus-visible { outline-offset: 6px; }
.calc input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--line-2); }
.calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8.5px; background: var(--brass); border: 0; border-radius: 0; }
.calc input[type=range]::-moz-range-track { height: 1px; background: var(--line-2); }
.calc input[type=range]::-moz-range-thumb { width: 18px; height: 18px; background: var(--brass); border: 0; border-radius: 0; }
.ticks { display: flex; justify-content: space-between; height: 6px; margin: -4px 9px 0; pointer-events: none; }
.ticks i { display: block; width: 1px; height: 6px; background: var(--line-2); }
.calc__res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border-top: 1px solid var(--line); padding-top: 24px; }
.calc__res b { display: block; font-weight: 400; font-size: clamp(28px, 2.6vw, 38px); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; color: var(--text); }
.calc__res span { display: block; margin-top: 8px; font-size: 14px; color: var(--text-2); }

/* ---------- 17. Процесс, сервис, вопросы ---------- */
.steps { counter-reset: s; border-top: 1px solid var(--line); }
.steps li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: baseline; border-bottom: 1px solid var(--line); padding: 18px 0; font-size: 17px; line-height: 1.5; color: var(--text-2); }
.steps li::before { counter-increment: s; content: counter(s, decimal-leading-zero); font-weight: 400; font-size: 32px; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums lining-nums; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 56px 22px 0; font-size: 20px; line-height: 1.35; position: relative; color: var(--text); transition: color var(--t) ease; }
.faq summary:hover { color: var(--brass-2); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px; border-right: 1px solid var(--text); border-bottom: 1px solid var(--text); transform: translateY(-70%) rotate(45deg); transition: transform var(--t) ease; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__a { padding: 0 0 26px; font-size: 17px; line-height: 1.55; color: var(--text-2); max-width: 40em; }

/* ---------- 18. Финальная сцена и подвал ---------- */
.frame--final { padding-top: 0; }
.scene--final { min-height: 600px; aspect-ratio: 16 / 7; }
.scene--final .scene__shade { background: linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .58) 40%, rgba(0, 0, 0, .12) 72%, rgba(0, 0, 0, 0) 90%); }
.scene--final .scene__text { display: block; max-width: 640px; top: 50%; bottom: auto; left: 48px; transform: translateY(-50%); }
.scene--final .h2 { color: #fff; }
.scene--final .lead { margin-top: 16px; max-width: 34em; }
.scene--final .form { margin-top: 28px; }
.scene--final .field { background: rgba(17, 17, 17, .72); border-color: rgba(255, 255, 255, .4); }
.scene--final .fine { color: rgba(255, 255, 255, .8); }
.scene--final .fine a { color: #fff; }
.scene--final .form__thanks { color: #fff; border-color: #fff; }
.footer { padding: 48px var(--inset) 40px; margin-top: 48px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 32px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.footer__logo img { height: 22px; width: auto; }
.footer p + p { margin-top: 12px; }
.footer .nav { flex-direction: column; gap: 6px; font-size: 15px; font-weight: 400; color: var(--text-2); }
.footer .nav a::after { display: none; }
.footer__contacts { display: grid; gap: 6px; align-content: start; }
.footer__tel { font-size: 28px; font-weight: 400; line-height: 1.2; letter-spacing: .01em; color: var(--brass); margin-bottom: 8px; }
.footer a:hover { color: var(--text); }
.footer__tel:hover { color: var(--brass-2); }
.footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 32px; border-top: 1px solid var(--line); padding-top: 18px; font-size: 14px; }

/* ---------- 19. Липкая полоса на телефоне ---------- */
.sbar { display: none; }

/* ---------- 20. Движение: одно появление при загрузке (первый экран); всё остальное видно сразу ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(14px); animation: rv .9s var(--ease) forwards; }
  .rv.d1 { animation-delay: .15s; } .rv.d2 { animation-delay: .3s; } .rv.d3 { animation-delay: .45s; } .rv.d4 { animation-delay: .6s; }
  @keyframes rv { to { opacity: 1; transform: none; } }
}

/* ---------- 21. Адаптив ---------- */
@media (max-width: 1240px) { .hdr__tel { display: none; } .nav { gap: 22px; } }
@media (max-width: 1000px) {
  .hdr .nav { display: none; }
  .hdr__ico { display: flex; align-items: center; gap: 4px; }
  .hdr__right .btn--sm { display: none; }
  .sec__head, .cols, .video-cols, .desk { grid-template-columns: 1fr; }
  .sec__intro, .video-cols .prose { justify-self: start; }
  .footer { grid-template-columns: 1fr 1fr; }
  .scene--final .scene__text { left: var(--inset); }
}
@media (max-width: 760px) {
  .hdr { padding: 0 var(--edge) 0 var(--inset); }
  .scene--hero { height: auto; min-height: 0; aspect-ratio: 3 / 4; padding-bottom: 24px; }
  .scene > img, .scene > video { object-position: 50% 50%; }
  .scene--hero .scene__shade { background: linear-gradient(0deg, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .36) 44%, rgba(0, 0, 0, 0) 66%); }
  .scene__text { bottom: 24px; }
  .h1 { font-size: clamp(26px, 7vw, 32px); max-width: none; }
  .h1 br { display: none; }
  .lead { margin-top: 12px; font-size: 16px; }
  .scene__cap { display: none; }
  .facts li { padding: 22px 12px 22px 8px; }
  .facts b { font-size: clamp(28px, 8.7vw, 36px); }
  .facts b small { font-size: 14px; }
  .facts ul { grid-template-columns: 1fr 1fr; }
  .facts li + li { padding-left: 16px; }
  .facts li:nth-child(3) { border-left: 0; padding-left: 8px; }
  .facts li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .facts span { font-size: 14px; }
  .desk { padding: 32px calc(var(--inset) - var(--edge)) 36px; gap: 20px; }
  .desk--table { padding: 32px calc(var(--inset) - var(--edge)) 36px; }
  .form__row { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btns { flex-direction: column; }
  .sec__head { gap: 16px; padding-bottom: 28px; }
  .h2 { max-width: none; }
  .row { grid-template-columns: 1fr; gap: 4px; padding: 14px 10px; margin: 0 -10px; }
  .mosaic, .pair2 { grid-template-columns: 1fr; }
  .mosaic .fig:first-child { grid-row: auto; }
  .mosaic .fig img, .mosaic .fig:first-child img, .trio .fig img, .wide .fig img { height: auto; aspect-ratio: 3 / 2; }
  .strip-head { flex-direction: column; align-items: stretch; }
  .strip-nav { align-self: flex-end; }
  .strip .fig { flex-basis: 84vw; }
  .strip-nav button { width: 48px; height: 48px; }
  .video__play { width: 76px; height: 76px; }
  .video__play svg { width: 26px; height: 26px; }
  .fig--wide img { aspect-ratio: 3 / 2; }
  .case { font-size: 21px; }
  .calc__res { grid-template-columns: 1fr; gap: 20px; }
  .steps li { grid-template-columns: 48px minmax(0, 1fr); }
  .steps li::before { font-size: 26px; }
  .faq summary { font-size: 18px; padding-right: 40px; }
  .scene--final { min-height: 0; aspect-ratio: auto; background: var(--room); }
  .scene--final > img { position: relative; height: auto; aspect-ratio: 4 / 3; }
  .scene--final .scene__shade { display: none; }
  .scene--final .scene__text { position: static; transform: none; max-width: none; padding: 32px var(--inset) 40px; }
  .footer { grid-template-columns: 1fr; padding-top: 40px; }
  /* текст не ближе 16 px к краю: подписи и строки внутри блоков на рамке 8 px получают свои 8 px */
  .bleed .fig__cap, .strip .fig__cap { padding-left: 8px; padding-right: 8px; }
  .page { padding-bottom: 92px; }
  .sbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; gap: 8px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: rgba(17, 17, 17, .94); border-top: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .35s var(--ease); }
  .sbar.is-hidden { transform: translateY(110%); }
  .sbar a { flex: 1; text-align: center; padding: 16px 10px; font-size: 16px; font-weight: 500; }
  .sbar .s1 { background: var(--brass); color: var(--ink); }
  .sbar .s2 { box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn__arrow, .nav a, .nav a::after, .row, .video__play, .video > img, .fig img, .strip-nav button, .field, .sbar, .faq summary, .faq summary::after, .link { transition: none; }
}

/* ================= АЛЬТЕРНАТИВНАЯ ВЕРСИЯ (27.10.2026, вечер) - правки Даниила по сборке 3 ================= */
/* бело-золотой акцент вместо латуни: «премиальный, почти белый» */
:root { --brass: #E6DBBF; --brass-2: #F4EEDD; --fs-h1: clamp(44px, 6.2vw, 90px); --fs-h2: clamp(36px, 4.2vw, 60px); --fs-h2-s: clamp(26px, 2.4vw, 34px); }
/* короткие заголовки: одно-два слова, крупно и плотно */
.h1 { letter-spacing: -.022em; line-height: 1; max-width: none; }
.h2 { letter-spacing: -.02em; }
.sec__note { font-size: 15px; max-width: 44em; }
/* кнопки: стрелка наискосок вверх, заливка наискосок при наведении */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: color .25s ease .18s, box-shadow var(--t) ease; }
.btn > * { position: relative; z-index: 1; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--brass-2); clip-path: polygon(0 100%, 0 100%, 0 100%); transition: clip-path .55s var(--ease); }
.btn:hover::before, .btn:focus-visible::before { clip-path: polygon(0 100%, 320% 100%, 0 -220%); }
.btn:hover, .btn:focus-visible { background: var(--brass); }
.btn--ghost::before { background: var(--brass); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--brass); }
.btn__arrow { transform: rotate(-45deg); transform-origin: 62% 50%; }
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: rotate(-45deg) translateX(4px); }
.strip-nav .btn__arrow, .strip-nav .prev .btn__arrow { transform: none; }
.strip-nav .prev .btn__arrow { transform: rotate(180deg); }
/* лента: кадры уже, чтобы голова и фото умещались вместе; тянется мышкой */
.strip .fig { flex: 0 0 min(880px, 68vw); }
.strip { cursor: grab; user-select: none; }
.strip.is-drag { cursor: grabbing; scroll-snap-type: none; }
.strip.is-drag .fig img { pointer-events: none; }
/* инфраструктура: сетка 3 колонки ровными ячейками вместо двух длинных таблиц */
/* портреты малые, рядом с текстом */
/* мастер-план: схема как есть, без обводок и номеров; при наведении на строку или год корпуса загораются мягким светом, схема чуть гаснет */
/* факты оплаты в структуре Stats Info (21st.dev, Tailark): без линий, цифра над подписью */
/* шаги как таймлайн с лучом прогресса (21st.dev, Aceternity Timeline) */
/* форма финала одним объектом (21st.dev, Tailark CTA with mail form) */
.form--frame .form__row { gap: 4px; padding: 4px; border: 1px solid rgba(255, 255, 255, .42); background: rgba(17, 17, 17, .72); transition: border-color var(--t) ease; }
.form--frame .field { border: 0; background: transparent; height: 64px; }
.form--frame .btn--field { height: 64px; }
.form--frame:focus-within .form__row { border-color: var(--brass); }
@media (max-width: 760px) {
  .h1 { font-size: clamp(38px, 12vw, 48px); }
  .strip .fig { flex-basis: 84vw; }
  .form--frame .form__row { grid-template-columns: 1fr; }
}

/* ================= ПАКЕТ ПРАВОК 1 по третьему отзыву (27.10.2026, ночь) ================= */
/* круглая кнопка play слева от поля формы 1 (слово Даниила «круглая» - единственное скругление на странице) */
.play-btn { width: var(--field-h); height: var(--field-h); border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--text); display: grid; place-items: center; cursor: pointer; padding: 0; flex: none; transition: background var(--t) ease, color var(--t) ease, border-color var(--t) ease; }
.play-btn svg { width: 44px; height: 44px; fill: currentColor; margin-left: 4px; }
.play-btn:hover, .play-btn:focus-visible { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.form__row--play { grid-template-columns: auto minmax(0, 1fr) auto; }
/* «Территория»: подзаголовок про реальные фото стоит над мозаикой; строка сервиса и «все фото» - полосой с линиями */
.photos-head { margin-top: 40px; font-size: var(--fs-body); line-height: 1.5; color: var(--text); max-width: 40em; }
.photos-head + .mosaic { margin-top: 16px; }
.cta--photos { margin-top: 24px; }
.fig[data-gallery] { cursor: zoom-in; }
.fig[data-gallery]:hover img { filter: brightness(1.06); }
/* ручные переносы по смыслу (.br-d) - только на широком экране, ниже 1400 px текст переносится сам */
@media (max-width: 1399px) { .br-d { display: none; } }
/* попапы: форма, видео, все фото */
html.is-locked { overflow: hidden; }
.dlg { border: 0; padding: 0; margin: auto; background: var(--room); color: var(--text); max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); }
.dlg::backdrop { background: rgba(8, 8, 8, .76); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.dlg__close { position: absolute; top: 8px; right: 8px; z-index: 2; }
.dlg--form { width: 560px; padding: 48px 40px 40px; border: 1px solid var(--line-2); overflow: auto; }
.dlg--form .h2--s { max-width: none; padding-right: 40px; }
.dlg--form .desk__trust { margin-top: 14px; }
.dlg--form .desk__text { margin-top: 12px; max-width: none; }
.dlg--form .form { margin-top: 24px; }
.dlg--form .form__row { grid-template-columns: 1fr; }
.dlg--form .btn { width: 100%; }
.dlg--video { width: 1200px; background: var(--scene); padding: 56px 0 0; }
.dlg__video { aspect-ratio: 16 / 9; background: var(--scene); }
.dlg__video video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.dlg__note { padding: 14px 16px 16px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.dlg--gallery { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; background: rgba(10, 10, 10, .97); padding: 64px 24px 24px; }
.dlg--gallery[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; }
.gal { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; min-height: 0; }
.gal img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.gal__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.gal__cap b { font-weight: 400; color: var(--text); }
.gal__nav { display: flex; align-items: center; justify-content: center; gap: 24px; }
.gal__nav button { width: 56px; height: 56px; border: 1px solid var(--line-2); background: transparent; color: var(--text); cursor: pointer; display: grid; place-items: center; transition: background var(--t) ease, color var(--t) ease, border-color var(--t) ease; }
.gal__nav button:hover, .gal__nav button:focus-visible { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.gal__nav .btn__arrow { width: 22px; transform: none; }
.gal__nav .prev .btn__arrow { transform: rotate(180deg); }
.gal__count { font-size: 15px; color: var(--text-2); min-width: 72px; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .dlg[open] { animation: dlg-in .35s var(--ease); }
  .dlg[open]::backdrop { animation: bd-in .35s ease; }
  @keyframes dlg-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes bd-in { from { opacity: 0; } to { opacity: 1; } }
}
@media (max-width: 760px) {
  .form__row--play { grid-template-columns: var(--field-h) minmax(0, 1fr); }
  .form__row--play .btn--field { grid-column: 1 / -1; }
  .play-btn svg { width: 32px; height: 32px; margin-left: 3px; }
  .dlg--form { padding: 44px 20px 24px; }
  .dlg--video { padding-top: 52px; }
  .dlg--gallery { padding: 56px 8px 16px; }
  .gal__cap { padding: 0 8px; flex-direction: column; gap: 2px; }
  .gal__nav button { width: 48px; height: 48px; }
}

/* ================= ПАКЕТ 3 (28.10.2026, ночь): выбранные варианты блоков, пролёт плана, переносы по смыслу ================= */
/* переносы: абзацы без одиноких последних слов, заголовки и короткие блоки ровной формы; предлоги, тире и числа склеены в разметке */
p, li, summary, figcaption, .row__text { text-wrap: pretty; }
.h3, .sec__sub, .case { text-wrap: balance; }
.lead { max-width: 34em; }
/* инфраструктура v1: ряд фото работающего, сетка 3 × 3 крупным текстом, широкий рендер и сетка 3 × 2 для будущего */
.band { padding-top: 48px; }
.band + .band { margin-top: 16px; }
.band__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; border-top: 1px solid var(--line); padding-top: 20px; }
.band__head .h3 { font-size: 24px; }
.band__head span { font-size: 15px; color: var(--text-2); white-space: nowrap; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--edge); margin-top: 28px; }
.trio .fig img { aspect-ratio: 4 / 3; object-fit: cover; }
.items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin-top: 32px; border-top: 0; }
.items .row { display: block; margin: 0; padding: 20px 0 24px; border-top: 1px solid var(--line); border-bottom: 0; min-height: 124px; }
.items .row__name { display: block; font-size: 20px; line-height: 1.3; }
.items .row__text { display: block; margin-top: 8px; font-size: 16px; }
.items--six .row { min-height: 0; }
.wide { margin-top: 28px; }
.wide .fig img { aspect-ratio: 21 / 9; object-fit: cover; }
.band .sec__note { margin-top: 20px; }
.band + .cta { margin-top: 48px; }
/* локация v2: пара кадров, слева вводный и таблица расстояний цифрами, справа высокая карта */
.pair2--loc { margin-top: 0; }
.loc2 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 48px; margin-top: 48px; align-items: start; }
.dist { border-top: 1px solid var(--line); }
.dist__group { padding: 18px 0 10px; border-bottom: 1px solid var(--line); }
.dist__title { font-size: 15px; color: var(--text-2); margin-bottom: 6px; }
.dist__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 7px 0; font-size: 18px; color: var(--text); }
.dist__row span:last-child { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; font-weight: 300; font-size: 22px; }
.map { position: relative; background: var(--scene); overflow: hidden; }
.map-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: invert(.92) hue-rotate(180deg) saturate(.55) brightness(.88) contrast(.95); transition: filter .5s var(--ease); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--table); }
.map-cap { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 12px; font-size: 14px; color: var(--text-2); }
.map-cap b { font-weight: 400; color: var(--text); }
/* квартиры 2 × 2: имя, описание, кнопка под текстом */
.btn--row { height: 56px; padding: 0 20px 0 24px; font-size: 16px; gap: 18px; white-space: nowrap; }
.btn--row .btn__arrow { width: 20px; }
.flat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; border-bottom: 1px solid var(--line); }
.flat { border-top: 1px solid var(--line); padding: 28px 0 36px; display: flex; flex-direction: column; min-width: 0; }
.flat h3 { font-size: 26px; font-weight: 400; line-height: 1.2; }
.flat p { margin-top: 12px; font-size: 17px; line-height: 1.5; color: var(--text-2); max-width: 36em; }
.flat p b { color: var(--text); font-weight: 400; }
.flat .btn { align-self: flex-start; margin-top: 22px; }
/* оплата v4: сравнение двух цифр через линию, три условия, абзацы, кнопка с пометкой */
.vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 8px; }
.vs > div { padding: 36px 32px 32px 0; min-width: 0; }
.vs > div + div { border-left: 1px solid var(--line); padding-left: 40px; }
.vs em { display: block; font-style: normal; font-size: 16px; color: var(--text-2); }
.vs b { display: block; margin-top: 14px; font-weight: 300; font-size: var(--fs-num); line-height: 1; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; color: var(--text); }
.vs b small { font-size: 22px; font-weight: 400; margin-right: .18em; }
.vs span { display: block; margin-top: 14px; font-size: 17px; line-height: 1.45; color: var(--text-2); max-width: 24em; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.three > div { padding: 24px 24px 22px 0; min-width: 0; }
.three > div + div { border-left: 1px solid var(--line); padding-left: 24px; }
.three b { display: block; font-weight: 300; font-size: 40px; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; color: var(--text); }
.three span { display: block; margin-top: 10px; font-size: 15px; color: var(--text-2); }
.act { display: flex; align-items: center; gap: 32px; margin-top: 40px; flex-wrap: wrap; }
.act .btn { min-width: 400px; }
.act p { font-size: 15px; line-height: 1.5; color: var(--text-2); max-width: 26em; }
@media (max-width: 1200px) { .vs b, .three b { font-weight: 400; } }
/* о нашей команде v2: заголовок и вводный слева, два круглых портрета справа; тезисы полосой через линии; кейс и форма рядом */
.thesis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.thesis > div { padding: 28px 24px 32px 0; min-width: 0; }
.thesis > div + div { border-left: 1px solid var(--line); padding-left: 24px; }
.thesis b { display: block; font-size: 20px; font-weight: 400; line-height: 1.3; color: var(--text); text-wrap: balance; }
.thesis p { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--text-2); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 64px; align-items: start; margin-top: 56px; }
.two .case { margin-top: 0; max-width: 22em; }
.two .desk--inline { margin-top: 0; padding-top: 0; border-top: 0; }
/* строящиеся корпуса v4: два окна, проза слева и цифры столбиком справа, калькулятор тремя колонками */
.pair2--offer { margin-top: 8px; }
.two--offer { gap: 40px 48px; margin-top: 48px; }
.two--offer .prose { max-width: none; }
.calc--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 48px; margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); }
.calc--wide .calc__res, .calc--wide .fine { grid-column: 1 / -1; }
.calc--wide .calc__res { padding-top: 28px; }
/* покупка v5: две поверхности «До сделки» и «После сделки» на столе, сервис во второй */
.halves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--edge); margin: 8px calc(var(--edge) - var(--inset)) 0; }
.half { background: var(--room); padding: 36px 40px 44px; min-width: 0; }
.half .h3 { font-size: 24px; margin-bottom: 20px; }
.half .steps li { grid-template-columns: 56px minmax(0, 1fr); padding: 18px 0; }
.half .steps li::before { font-size: 28px; }
.after__intro { margin-top: 28px; font-size: 16px; line-height: 1.5; color: var(--text-2); }
.half .h3--sub { font-size: 20px; margin: 28px 0 8px; }
.half .points li { padding: 14px 0; font-size: 17px; max-width: none; }
/* вопросы: две колонки по четыре */
.faq--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; align-items: start; }
/* что построено: пролёт над схемой при появлении */
@media (max-width: 1000px) {
  .loc2, .head3, .two, .halves, .faq--two, .calc--wide { grid-template-columns: 1fr; }
  .items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .thesis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .thesis > div { border-left: 0; padding-left: 0; }
  .thesis > div:nth-child(2n) { border-left: 1px solid var(--line); padding-left: 24px; }
  .thesis > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .act .btn { min-width: 0; }
}
@media (max-width: 760px) {
  .trio, .flat-grid, .vs, .thesis, .items, .three { grid-template-columns: 1fr; }
  .trio .fig img, .wide .fig img { aspect-ratio: 3 / 2; }
  .three > div, .three > div + div { border-left: 0; border-top: 1px solid var(--line); padding: 14px 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; gap: 16px; }
  .three > div:first-child { border-top: 0; }
  .three span { margin-top: 0; }
  .band__head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .band__head span { white-space: normal; }
  .items { grid-template-columns: 1fr; gap: 0; }
  .items .row { min-height: 0; padding: 14px 0 16px; }
  .loc2 { gap: 32px; margin-top: 40px; }
  .btn--row { white-space: normal; height: auto; min-height: 56px; padding: 14px 20px 14px 24px; }
  .vs > div { padding: 24px 0 22px; }
  .vs > div + div { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .three b { font-size: 32px; }
  .three span { font-size: 14px; }
  .act { gap: 16px; }
  .thesis > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .thesis > div:nth-child(2n) { border-left: 0; padding-left: 0; }
  .thesis > div { padding: 20px 0 24px; }
  .two { margin-top: 40px; gap: 32px; }
  .calc--wide { margin-top: 40px; padding-top: 32px; gap: 24px; }
  .halves { margin: 8px 0 0; }
  .half { padding: 24px 16px 28px; }
}

/* ---- правки по ревью impeccable-finish-reviewer (28.10.2026, ночь) ---- */
/* подпись первого экрана крупнее (затемнение под ней усилено в .scene__shade) */
.scene__cap { font-size: 15px; }
/* вводные абзацы секций: один левый край во всех блоках - бокс всегда 30em, не ужимается под ручные переносы */
.sec__head .sec__intro { width: 100%; max-width: 30em; }
/* «от» у крупных цифр - один размер и отступ везде */
.facts b small, .vs b small { font-size: clamp(16px, 1.9vw, 28px); margin-right: .22em; }
/* локация: карта тянется до низа таблицы */
.loc2 { align-items: stretch; }
.loc2__right { display: flex; flex-direction: column; min-width: 0; }
/* кнопки на узком экране: длинная надпись в две строки без сжатия, кнопка растёт */
@media (max-width: 480px) {
  .btn { height: auto; min-height: var(--btn-h); padding: 14px 20px 14px 22px; gap: 16px; font-size: 16px; }
  .btn--field { min-height: var(--field-h); }
  .btn--row { min-height: 56px; }
}

/* ================= ПАКЕТ 4 (28.10.2026, ночь): пятый отзыв Даниила ================= */
/* цвета зон со схемы Даниила (смешаны с рендером) - только для ключей легенды */
:root { --zone-done: #7F9C6F; --zone-b1: #B6A15E; --zone-b2: #9D5E58; }
/* единая сетка 12 колонок: две половины (линия 50%), три трети, четыре четверти; межколонник 48 px */
.sec__head { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; }
.sec__head .sec__intro { justify-self: start; width: auto; max-width: none; }
.video-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; }
.video-cols .prose { justify-self: start; max-width: 36em; }
.two { gap: 32px 48px; }
.vs > div { padding-right: 24px; }
.vs > div + div { padding-left: 24px; }
.three { column-gap: 48px; }
.three > div, .three > div + div { position: relative; border-left: 0; padding-left: 0; padding-right: 0; }
.three > div + div::before { content: ""; position: absolute; left: -24px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.items { gap: 0 48px; }
.calc--wide .calc__res { column-gap: 48px; }
.act { display: grid; grid-template-columns: calc((100% - 96px) / 3) minmax(0, 1fr); column-gap: 48px; align-items: center; }
.act .btn { min-width: 0; width: 100%; }
.footer { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 48px; }
@media (min-width: 761px) {
  .facts ul { column-gap: 48px; padding: 0 calc(var(--inset) - var(--edge)); }
  .facts li, .facts li + li { position: relative; padding: 34px 0 32px; border-left: 0; }
  .facts li + li::before { content: ""; position: absolute; left: -24px; top: 0; bottom: 0; width: 1px; background: var(--line); }
}
/* «Что построено»: схема с зонами - половина ширины, рядом статусы */
.built { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; align-items: start; }
.built__plan { cursor: zoom-in; }
.built__plan img { aspect-ratio: 1404 / 804; object-fit: cover; }
.built__side { display: grid; gap: 28px; align-content: start; }
.zones { border-top: 1px solid var(--line); }
.zone { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
.zone__keys { grid-row: 1 / 3; display: flex; gap: 4px; padding-top: 6px; }
.k { display: block; width: 16px; height: 16px; }
.k--done { background: var(--zone-done); }
.k--b1 { background: var(--zone-b1); }
.k--b2 { background: var(--zone-b2); }
.zone b { font-weight: 400; font-size: var(--fs-body); line-height: 1.35; color: var(--text); }
.zone p { margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--text-2); }
.built__side .btn { justify-self: start; }
.built__note { font-size: 15px; line-height: 1.5; color: var(--text-2); max-width: 38em; }
.built__note b { display: block; color: var(--text); font-weight: 500; }
/* локация: текст и ответ рядом; таблица в трети, карта в двух третях - одной высоты */
.loc-text { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; margin-top: 48px; align-items: start; }
.loc2__intro { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--text-2); }
.case--loc { margin: 0; font-size: 22px; max-width: none; }
.loc2 { display: grid; grid-template-columns: calc((100% - 96px) / 3) minmax(0, 1fr); column-gap: 48px; row-gap: 32px; margin-top: 40px; align-items: stretch; }
.dist__group { padding: 12px 0 8px; }
.dist__title { margin-bottom: 2px; font-size: 14px; }
.dist__row { padding: 5px 0; font-size: 17px; }
.dist__row span:last-child { font-size: 20px; }
.loc2__right { display: flex; flex-direction: column; min-width: 0; }
.map { position: relative; flex: 1 1 auto; min-height: 420px; overflow: hidden; background: var(--scene); }
.map-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% 56%; filter: invert(.92) hue-rotate(180deg) saturate(.55) brightness(.88) contrast(.95); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .6s var(--ease); filter: invert(.92) hue-rotate(180deg) saturate(.55) brightness(.9) contrast(.95); }
.map.is-live iframe { opacity: 1; }
.map__attr { position: absolute; right: 8px; bottom: 6px; font-size: 11px; color: rgba(242, 242, 242, .6); }
.map.is-live .map__attr { display: none; }
.map-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 12px; font-size: 14px; color: var(--text-2); }
.map-cap b { font-weight: 400; color: var(--text); }
/* команда: малые круглые портреты; три тезиса в трети; кейс с графиком */
.thesis { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; }
.thesis > div, .thesis > div + div { position: relative; border-left: 0; padding: 28px 0 32px; }
.thesis > div + div::before { content: ""; position: absolute; left: -24px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.case-box { display: grid; gap: 28px; align-content: start; }
.case-box .case--s { margin: 0; font-size: 20px; line-height: 1.45; max-width: 30em; }
.cchart { padding-top: 0; }
.cchart__title { margin-bottom: 12px; font-size: 14px; color: var(--text-2); }
.cchart__row { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; column-gap: 16px; padding: 7px 0; }
.cchart__label { font-size: 15px; color: var(--text-2); }
.cchart__track { position: relative; height: 22px; }
.cchart__bar { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * (100% - 176px)); background: rgba(255, 255, 255, .24); transform-origin: left center; }
.cchart__row--on .cchart__bar { background: var(--brass); }
.cchart__val { position: absolute; top: 50%; left: calc(var(--v) * (100% - 176px) + 14px); transform: translateY(-50%); white-space: nowrap; font-weight: 400; font-size: 20px; line-height: 1; color: var(--text); font-variant-numeric: lining-nums; }
.cchart__val small { font-size: 14px; margin-right: .2em; }
.cchart__val em { font-style: normal; font-size: 16px; color: var(--text-2); margin-left: .45em; }
@media (prefers-reduced-motion: no-preference) {
  .cchart .cchart__bar { transform: scaleX(0); transition: transform 1.1s var(--ease); }
  .cchart .cchart__row--on .cchart__bar { transition-delay: .2s; }
  .cchart .cchart__val { opacity: 0; transition: opacity .5s ease .85s; }
  .cchart .cchart__row--on .cchart__val { transition-delay: 1.05s; }
  .cchart.is-in .cchart__bar { transform: none; }
  .cchart.is-in .cchart__val { opacity: 1; }
}
/* строящиеся корпуса: проза слева, довод крупно справа */
.two--offer { margin-top: 48px; align-items: start; }
.two--offer .prose { max-width: none; }
.two--offer .case--offer { margin: 0; font-size: 22px; max-width: none; }
/* экран промо: кнопка-кадр во всю ширину рамки */
button.video { width: calc(100% + 2 * (var(--inset) - var(--edge))); padding: 0; border: 0; cursor: pointer; text-align: left; font: inherit; }
/* покупка: справа после заголовка сразу сервис */
.half .after__intro { margin-top: 0; }
.fig--evening img { object-position: 50% 62%; }
/* кнопки вместо ссылок: полоса на телефоне */
.sbar button { flex: 1; text-align: center; padding: 16px 10px; font: inherit; font-size: 16px; font-weight: 500; border: 0; cursor: pointer; }
/* переносы: короткие блоки ровной формы, длинные - без висячих последних слов */
p, li, summary, figcaption, .row__text, .zone b { text-wrap: balance; }
.facts span { text-wrap: balance; }
.desk__text { max-width: 38em; }
@media (max-width: 1000px) {
  .built, .loc-text, .loc2, .act { grid-template-columns: 1fr; }
  .map { min-height: 0; aspect-ratio: 4 / 3; flex: none; }
  .thesis { grid-template-columns: 1fr; }
  .thesis > div + div::before { display: none; }
  .thesis > div + div, .thesis > div:nth-child(2n), .thesis > div:nth-child(n + 3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .three > div + div::before { display: none; }
  .three > div, .three > div + div { padding: 14px 0; }
  .loc-text { margin-top: 40px; }
  .case--loc, .case--offer { font-size: 20px; }
  .cchart__row { grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; }
  .cchart__bar { width: calc(var(--v) * (100% - 128px)); }
  .cchart__val { left: calc(var(--v) * (100% - 128px) + 10px); font-size: 17px; }
  .cchart__val em { display: none; }
  .footer { grid-template-columns: 1fr; }
}
/* ---- пакет 4: телефон и планшет - сетка шапок в одну колонку (правила выше задают 6/6 для компьютера) ---- */
@media (max-width: 1000px) {
  .sec__head, .video-cols, .head3 { grid-template-columns: 1fr; }
}
/* метка комплекса: точка в центре снимка, подпись справа; на живой карте Google своя метка */
.map-img { object-position: 50% 50%; }
/* ---- правки по ревью пакета 4 ---- */
/* переносы: абзацы и пункты - без выравнивания длины строк (ручные переносы и склейки держат смысл), короткие подписи - ровной формой */
p, li, .row__text, .zone b { text-wrap: pretty; }
figcaption, .fig__cap, .facts span, .sec__note, .sec__sub, .h2, .h3, .thesis b, summary, .zone b, .case, .cchart__title { text-wrap: balance; }
.scene__cap { white-space: nowrap; text-wrap: nowrap; }
.map-cap a { white-space: nowrap; }
/* текст первого экрана и финала - на линии первой колонки */
.scene--hero .scene__text { left: calc(var(--inset) - var(--edge)); right: calc(var(--inset) - var(--edge)); }
.scene--final .scene__text { left: calc(var(--inset) - var(--edge)); }
/* локация: карта занимает ровно высоту таблицы, подпись - строкой ниже */
.loc2__right { display: contents; }
.loc2 .map { grid-column: 2; grid-row: 1; }
.loc2 .map-cap { grid-column: 2; grid-row: 2; padding-top: 0; margin-top: -20px; }
@media (max-width: 1000px) {
  .loc2 .map, .loc2 .map-cap { grid-column: auto; grid-row: auto; }
  .loc2 .map-cap { margin-top: -20px; }
}
@media (max-width: 760px) {
  .scene--final .scene__text { padding-left: calc(var(--inset) - var(--edge)); padding-right: calc(var(--inset) - var(--edge)); }
  .vs > div, .vs > div + div { padding-left: 0; padding-right: 0; }
  .half .steps li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; }
}
/* выравнивание строк: абзацы без ручных переносов браузер выравнивает сам, с ручными - строки по смыслу задаёт разметка */
.lead, .cols p, .head3 .sec__intro, .faq__a, .case { text-wrap: balance; }
.video-cols .prose p, .flat p, .thesis p, .half .points li, .half .steps li > span { text-wrap: balance; }
.flat p { max-width: none; }
/* мелочи по документеру пакета 4 */
.cchart__bar { background: var(--line-2); }
.map__attr { font-size: 13px; color: rgba(242, 242, 242, .5); }
.footer__tag { margin-top: 16px; }
/* плеер промо целиком в окне при любой высоте экрана: ширина ограничена высотой (16:9 + полоса закрытия 56 px) */
.dlg--video { width: min(1200px, calc(100vw - 32px), calc((100dvh - 88px) * 16 / 9)); overflow: hidden; }
@media (max-width: 760px) { .dlg--video { width: min(calc(100vw - 32px), calc((100dvh - 84px) * 16 / 9)); } }
/* первый экран на телефоне: запасной кадр под вертикальной петлёй выставлен как её первый план */
@media (max-width: 760px) { .scene--hero > img { object-position: 44% 50%; } }

/* ================= ПАКЕТ 5 (28.10.2026): шестой отзыв Даниила ================= */
/* подписи под фото на рамке 8 px - на линии текста (24 px), как строки под ними */
.bleed .fig__cap, .strip .fig__cap { padding-left: calc(var(--inset) - var(--edge)); padding-right: calc(var(--inset) - var(--edge)); }
/* команда: шесть человек полосой, глаза на одной линии */
.team { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 48px; margin: 0 0 48px; padding: 0; list-style: none; }
.team li { display: grid; justify-items: start; align-content: start; min-width: 0; }
.team img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; background: var(--scene); }
.team b { margin-top: 14px; font-weight: 400; font-size: 17px; line-height: 1.3; color: var(--text); }
.team span { margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--text-2); text-wrap: balance; }
/* «Спасибо»: заголовок, текст, кнопка; после отправки в окне больше ничего нет */
.form__thanks { border-top: 0; padding-top: 0; }
.thanks__h { font-size: var(--fs-h2-s); line-height: 1.15; letter-spacing: -.01em; color: var(--text); text-wrap: balance; }
.form__thanks .thanks__h + p { margin-top: 14px; font-size: 17px; line-height: 1.55; color: var(--text-2); max-width: 34em; }
.form__thanks .btn { margin-top: 24px; }
.form__thanks:focus { outline: none; }
.dlg.is-sent .dlg__body > :not(form) { display: none; }
.desk.is-sent { grid-template-columns: minmax(0, 1fr); }
.desk.is-sent > :not(form):not(:has(form)) { display: none; }
.scene__text.is-sent > .h2, .scene__text.is-sent > .lead { display: none; }
.scene--final .form__thanks .thanks__h { color: #fff; }
.scene--final .form__thanks .thanks__h + p { color: rgba(255, 255, 255, .86); }
/* попап формы: поле имени над телефоном */
.dlg--form .form__row { gap: var(--edge); }
/* галерея - см. пакет 6 */
.dlg--gallery .dlg__close { z-index: 2; }
/* луч в шагах покупки */
.half .steps { position: relative; }
.half .steps::after { content: ""; position: absolute; left: -20px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.steps__beam { position: absolute; left: -20px; top: 0; width: 1px; height: 0; z-index: 1; background: var(--brass); transition: height .25s linear; }
.half .steps li::before { transition: color .35s ease; }
.half .steps li.is-past::before { color: var(--brass); }
@media (max-width: 1000px) {
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
}
@media (max-width: 760px) {
  .team { gap: 24px 16px; }
  .team img { width: 72px; height: 72px; }
  .team b { font-size: 15px; margin-top: 10px; }
  .team span { font-size: 13px; }
  .half .steps::after, .steps__beam { left: -10px; }
  .dlg--gallery { padding: 52px 8px 12px; }
}
/* карта Тбилиси: своя чёрно-белая подложка, точки районов и пульсирующая точка комплекса */
.map .map-img { filter: none; object-position: 50% 50%; }
.map__pins { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; z-index: 1; }
.pin { position: absolute; left: 0; top: 0; }
.pin i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #F2F2F2; box-shadow: 0 0 0 3px rgba(16, 16, 16, .8); }
.pin span { position: absolute; left: 12px; top: -10px; white-space: nowrap; font-size: 13px; line-height: 20px; color: rgba(242, 242, 242, .9); text-shadow: 0 0 8px #101010, 0 0 3px #101010; }
.pin--l span { left: auto; right: 12px; }
.pin--main i { left: -8px; top: -8px; width: 16px; height: 16px; background: var(--brass); box-shadow: 0 0 0 1px rgba(10, 10, 10, .7); }
.pin--main b { position: absolute; left: 18px; top: -15px; white-space: nowrap; padding: 5px 10px; background: rgba(17, 17, 17, .9); font-weight: 500; font-size: 14px; line-height: 20px; color: var(--text); }
.pin--main i::before, .pin--main i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--brass); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .pin--main i::before, .pin--main i::after { animation: pin-ripple 2.8s cubic-bezier(.2, .6, .35, 1) infinite; }
  .pin--main i::after { animation-delay: 1.4s; }
  @keyframes pin-ripple { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(4.2); opacity: 0; } }
}
@media (max-width: 760px) {
  .pin span { font-size: 12px; }
  .pin--main b { font-size: 13px; padding: 4px 8px; }
}
@media (max-width: 760px) { .pin--minor span { display: none; } }
/* в окнах ручные переносы страницы не действуют: колонка уже, строки складывает браузер */
.dlg .br-d { display: none; }

/* ================= ПАКЕТ 6 (28.10.2026): седьмой отзыв Даниила ================= */
/* форма: имя необязательное - красным загорается только телефон, подсказка - строкой под формой */
.form.is-error .field:not([type="tel"]) { border-color: var(--line-2); }

/* лид первого экрана: три строки по смыслу от 1400 px (переносы в разметке), шире прежних 34em */
@media (min-width: 1400px) { .scene--hero .lead { max-width: 48em; } }

/* идея 2: цифры фактов набегают; место под цифру занято заранее, единица не прыгает */
.facts b .tick { display: inline-block; margin: 0; max-width: none; font: inherit; line-height: inherit; color: inherit; text-align: right; text-wrap: nowrap; }

/* идея 3: подчёркивание от руки бело-золотой линией под тремя акцентами */
.hl { position: relative; white-space: nowrap; }
.hl__line { position: absolute; left: -2%; bottom: -.32em; width: 104%; height: .5em; overflow: visible; pointer-events: none; }
.hl__line path { fill: none; stroke: var(--brass); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hl--wait .hl__line path { stroke-dashoffset: 1; }
.hl--on .hl__line path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease) .25s; }

/* команда: слева заголовок и вводный, справа шесть портретов в ряд от линии 50% (продолжение пары основателей версии 7) */
.sec__head--team { align-items: start; padding-bottom: 40px; }
.sec__head--team .sec__intro { margin-top: 24px; max-width: 31em; }
.sec__head--team .team { display: flex; justify-content: space-between; gap: 0; margin: 0; padding-top: 6px; }
.sec__head--team .team li { width: auto; min-width: 88px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sec__head--team .team img { flex: none; }
.sec__head--team .team b { margin-top: 12px; font-size: 14px; line-height: 1.3; }
.sec__head--team .team span { margin-top: 4px; font-size: 13px; line-height: 1.35; }
@media (max-width: 1399px) {
  .sec__head--team { grid-template-columns: minmax(0, 1fr); }
  .sec__head--team .team { justify-content: flex-start; gap: 36px; padding-top: 8px; }
}
@media (max-width: 1000px) { .sec__head--team .team { gap: 28px; } }
@media (max-width: 760px) {
  .sec__head--team .team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 12px; }
  .sec__head--team .team li { width: auto; }
  .sec__head--team .team b, .sec__head--team .team span { width: auto; margin-left: 0; margin-right: 0; }
}

/* галерея: фон снова тёмный, без размытой копии кадра; фото как можно крупнее - стрелки по бокам, счётчик слева сверху, подпись под кадром */
.dlg--gallery { overflow: hidden; background: rgba(10, 10, 10, .97); padding: 16px 104px 12px; }
.dlg--gallery[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.dlg--gallery .gal { display: block; width: min(100%, calc((100dvh - 64px) * var(--ar, 1.5))); }
.dlg--gallery .gal img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar, 1.5); object-fit: contain; filter: none; }
.dlg--gallery .gal__cap { margin-top: 12px; }
.dlg--gallery .gal__nav { position: absolute; inset: 0; display: block; pointer-events: none; }
.dlg--gallery .gal__nav button { position: absolute; top: 50%; margin-top: -28px; pointer-events: auto; }
.dlg--gallery .gal__nav .prev { left: 24px; }
.dlg--gallery .gal__nav .next { right: 24px; }
.dlg--gallery .gal__count { position: absolute; left: 24px; top: 20px; min-width: 0; text-align: left; }
@media (max-width: 760px) {
  .dlg--gallery { padding: 52px 8px 12px; }
  .dlg--gallery .gal { width: 100%; }
  .dlg--gallery .gal__nav { position: static; display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 12px; pointer-events: auto; }
  .dlg--gallery .gal__nav button { position: static; margin: 0; }
  .dlg--gallery .gal__count { position: static; min-width: 72px; text-align: center; }
}

/* идея 4: волны от кнопок play; кнопка на кадре ролика - круглая, как в примере; кадр при наведении чуть приближается */
.video__play { width: 88px; height: 88px; border-radius: 50%; }
.video__play svg { width: 30px; height: 30px; margin-left: 5px; }
.video__play::before, .video__play::after, .play-btn::before, .play-btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--brass); opacity: 0; pointer-events: none; }
.play-btn { position: relative; }
.play-btn::before, .play-btn::after { inset: -1px; }
.form__row--play .field { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .video > img { transition: transform 1.2s var(--ease), filter .6s ease; }
  .video:hover > img { transform: scale(1.04); }
  .video.is-live .video__play::before, .video.is-live .video__play::after { animation: ring 2.8s cubic-bezier(.2, .6, .35, 1) infinite; }
  .play-btn.is-live::before, .play-btn.is-live::after { animation: ring-s 2.8s cubic-bezier(.2, .6, .35, 1) infinite; }
  .video.is-live .video__play::after, .play-btn.is-live::after { animation-delay: 1.4s; }
  @keyframes ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.4); opacity: 0; } }
  @keyframes ring-s { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
}
@media (max-width: 760px) { .video__play { width: 72px; height: 72px; } .video__play svg { width: 26px; height: 26px; } }

/* идея 6: лента по кругу - без прилипания кадров, прокрутка без сглаживания (сглаживают только стрелки) */
.strip.is-auto { scroll-snap-type: none; scroll-behavior: auto; }

/* идея 8: лучи от комплекса к центру и время в пути */
.map__beams { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.map__beams path { fill: none; stroke: var(--brass); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pin__t { margin-left: 4px; font-size: 13px; color: var(--brass); }
.map.beams-wait .map__beams path { stroke-dashoffset: 1; }
.map.beams-wait .pin__t { opacity: 0; }
.map.beams-on .map__beams path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease); }
.map.beams-on .map__beams .b2 { transition-delay: .9s; }
.map.beams-on .pin__t { opacity: 1; transition: opacity .6s ease 1.2s; }
.map.beams-on .pin__t.t2 { transition-delay: 2.1s; }

/* идея 10: цена метра полосами в одной шкале на обе половины, как график кейса */
.vs__bar { position: relative; height: 22px; margin-top: 20px; }
.vs__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 100%); background: rgba(255, 255, 255, .24); transform-origin: left; }
.vs__bar--on i { background: var(--brass); }
.vs.is-wait .vs__bar i { transform: scaleX(0); }
.vs.is-in .vs__bar i { transform: none; transition: transform 1.1s var(--ease); }
.vs.is-in .vs__bar--on i { transition-delay: .2s; }

/* идея 12: ответ выезжает по высоте, плюс поворачивается в крестик */
.faq__w { overflow: hidden; }
.faq summary::after { right: 6px; width: 14px; height: 14px; border: 0; background: linear-gradient(currentColor, currentColor) center / 14px 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 14px no-repeat; transform: translateY(-50%); }
.faq details[open]:not(.is-closing) summary::after { transform: translateY(-50%) rotate(45deg); }
@media (prefers-reduced-motion: no-preference) { .faq summary::after { transition: transform .45s var(--ease); } }

/* «Что построено»: схема Даниила - корпуса закрашены по статусу, легенда поверх картинки, как на его образце (седьмой отзыв);
   цвета ключей сняты с образца, ключи - круглые точки */
:root { --zone-done: #78D69F; --zone-b1: #F8C75F; --zone-b2: #F6766C; }
.built__plan img { aspect-ratio: 1657 / 949; }
.plan { position: relative; }
.k { border-radius: 50%; }
.plan__key { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 26px; margin: 0; padding: 12px 20px 13px; list-style: none; background: rgba(14, 14, 14, .78); border: 1px solid rgba(255, 255, 255, .16); white-space: nowrap; font-size: 15px; line-height: 1.2; color: #F2F2F2; pointer-events: none; }
.plan__key li { display: flex; align-items: center; gap: 10px; text-wrap: nowrap; }
.plan__key .k { width: 14px; height: 14px; flex: none; }
@media (max-width: 760px) {
  .plan__key { position: static; transform: none; flex-wrap: wrap; gap: 8px 20px; padding: 12px 8px 0; background: none; border: 0; font-size: 14px; color: var(--text-2); white-space: normal; }
}

/* карта на телефоне: в центре тесно - второстепенные точки и подпись Ботанического сада прячутся (он есть в таблице), время в пути - второй строкой под названием */
@media (max-width: 760px) {
  .pin--minor { display: none; }
  .pin--sm-hide span { display: none; }
  .pin__t { display: block; margin-left: 0; }
  .pin--l .pin__t { text-align: right; }
}

/* по ревью пакета 6 */
/* команда: ячейка по ширине подписи, строки подписей без переноса; ряд от линии 50%, не шире 724 px - продолжение пары основателей, а не растяжка */
.sec__head--team .team { max-width: 724px; }
.sec__head--team .team b, .sec__head--team .team span { white-space: nowrap; }
.team img { box-shadow: 0 0 0 1px var(--line); }
@media (max-width: 1399px) { .sec__head--team .team { max-width: none; } }
@media (max-width: 760px) { .sec__head--team .team li { min-width: 0; } }
/* карта: время в пути второй строкой под названием на всех ширинах - подпись короче и не налезает на соседнюю точку */
.pin__t { display: block; margin-left: 0; }
.pin--l .pin__t { text-align: right; }
/* лента без скрипта прилипает кадрами с учётом рамки 8 px */
.strip { scroll-padding-inline: var(--edge); }
/* кнопка на кадре ролика: треугольник не меньше 60% круга (правило Даниила для кнопки play) */
.video__play svg { width: 52px; height: 52px; margin-left: 6px; }
@media (max-width: 760px) { .video__play svg { width: 42px; height: 42px; margin-left: 5px; } }

/* восьмой отзыв (28.10): без пульсации у круглой play в форме; заливка кнопок медленнее и мягче - «слишком быстро летит» */
.play-btn::before, .play-btn::after { content: none; }
@media (prefers-reduced-motion: no-preference) {
  /* треугольник заливки растёт ровно до правого верхнего угла, а не далеко за кнопку: видимая часть идёт всё время, с плавным разгоном и торможением */
  .btn::before { transition: clip-path .85s cubic-bezier(.45, .05, .25, 1); }
  .btn:hover::before, .btn:focus-visible::before { clip-path: polygon(0 100%, 205% 100%, 0 -105%); }
  .btn { transition: color .35s ease .3s, box-shadow var(--t) ease; }
  .btn__arrow { transition: transform .7s cubic-bezier(.45, .05, .25, 1); }
}

/* стрелка кнопок ↗ - одной векторной фигурой (Даниил 28.10: «стрелочки поломались»): прежняя из двух повёрнутых
   кусочков давала уголок, выступающий за кончик древка, и древко толще уголка. Форма та же: древко наискосок и уголок 8,5 px */
.btn .btn__arrow { width: 18px; height: 18px; transform: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cpath d='M1 17 17 1M8.5 1H17v8.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cpath d='M1 17 17 1M8.5 1H17v8.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.btn .btn__arrow::before, .btn .btn__arrow::after { content: none; }
.btn--sm .btn__arrow { width: 14px; height: 14px; }
.btn--row .btn__arrow { width: 16px; height: 16px; }
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: translate(3px, -3px); }

/* по документеру (28.10): стрелки ленты и галереи - той же векторной фигурой, что на кнопках (горизонтальные, «назад» повёрнута) */
.strip-nav .btn__arrow, .gal__nav .btn__arrow { width: 22px; height: 12px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cpath d='M0 6h20.5M15 .8l5.6 5.2-5.6 5.2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cpath d='M0 6h20.5M15 .8l5.6 5.2-5.6 5.2'/%3E%3C/svg%3E") center / contain no-repeat; }
.strip-nav .btn__arrow::before, .strip-nav .btn__arrow::after, .gal__nav .btn__arrow::before, .gal__nav .btn__arrow::after { content: none; }
/* треугольник на кнопке ролика - от 60% круга */
.video__play svg { width: 54px; height: 54px; }
@media (max-width: 760px) { .video__play svg { width: 44px; height: 44px; } }
/* пульс точки комплекса только пока карта на экране */
.map:not(.is-live) .pin--main i::before, .map:not(.is-live) .pin--main i::after { animation: none; }
/* видео в попапе заполняет кадр 16:9 на цвете сцены */
.dlg__video video { display: block; width: 100%; height: 100%; background: var(--scene); }

/* ================= ПАКЕТ 7 (01.11.2026): девятый отзыв Даниила ================= */
:root { --out: cubic-bezier(.16, 1, .3, 1); }

/* «Территория» v1 «Три кадра - три довода» - перенесено из design-system/probes/blocks/territory2/v1.html без изменений:
   вводный в правой половине шапки, три высоких реальных кадра на рамке 8 px, довод - под своим кадром на линии текста */
.t1-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--edge); margin-top: 16px; }
.t1-fig { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.t1-fig img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--scene); display: block; transition: filter .5s var(--ease); }
.t1-fig:hover img { filter: brightness(1.06); }
.t1-fig .fig__cap { padding-left: calc(var(--inset) - var(--edge)); padding-right: calc(var(--inset) - var(--edge)); }
.t1-arg { margin-top: 18px; padding: 18px calc(var(--inset) - var(--edge)) 0; border-top: 1px solid var(--line); font-size: 18px; line-height: 1.5; color: var(--text-2); text-wrap: balance; max-width: 26em; box-sizing: content-box; }
.t1-arg em { font-style: normal; color: var(--text); }
.t1-fig:nth-child(1) img { object-position: 64% 50%; }
.t1-fig:nth-child(2) img { object-position: 50% 50%; }
.t1-fig:nth-child(3) img { object-position: 60% 50%; }
.t1-fig[data-gallery] { cursor: zoom-in; }
#about .sec__head + .photos-head { margin-top: 8px; }
#about .sec__head .sec__intro { text-wrap: balance; }
@media (max-width: 1000px) {
  .t1-trio { grid-template-columns: 1fr; gap: 32px; }
  .t1-fig img { aspect-ratio: 3 / 2; }
  .t1-arg { max-width: 34em; }
}
@media (max-width: 760px) { .t1-arg { font-size: 17px; margin-top: 14px; padding-top: 14px; } }

/* появление текста первого экрана - вариант 1 «буквы поднимаются из-под линии» (design-system/probes/ideas2, .v1):
   буквы названия выходят снизу из-под маски строки, следом по очереди поднимаются три строки лида (от 1400 px - три строки
   по смыслу); ниже 1400 px строки складывает браузер, и лид мягко проявляется целиком. Без скрипта (нет класса .ta)
   и при reduced motion текст стоит сразу. Размытия нет */
.h1--rise { white-space: nowrap; }
.h1--rise .ch { white-space: pre; }
.lead--rise .ln, .lead--rise .ln > span { display: inline; }
@media (min-width: 1400px) {
  .lead--rise .ln { display: block; white-space: nowrap; }
  .lead--rise .ln > span { display: block; }
}
@media (prefers-reduced-motion: no-preference) {
  .ta .h1--rise { overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
  .ta .h1--rise .ch { display: inline-block; animation: rise .78s var(--out) both; animation-delay: calc(.15s + var(--i) * 34ms); }
  @media (min-width: 1400px) {
    .ta .lead--rise .ln { overflow: hidden; }
    .ta .lead--rise .ln > span { animation: rise .8s var(--out) both; animation-delay: calc(.59s + var(--j) * 95ms); }
  }
  @media (max-width: 1399px) { .ta .lead--rise { animation: lead-in .9s ease .55s both; } }
  @keyframes rise { from { transform: translateY(118%); } to { transform: none; } }
  @keyframes lead-in { from { opacity: 0; } to { opacity: 1; } }
  /* полоса фактов - сразу за названием (.25 с), а не последней; стойка формы - как была */
  .rv.d-facts { animation-delay: .25s; }
}

/* цифры фактов: все четыре набегают (и цена входа - тысячами); под конечную цифру место занято невидимой копией (::before) -
   ширина не зависит от шрифта и момента загрузки. Селекторы сильнее .facts span (правило цепляет любые вложенные span) */
.facts b .tick { display: inline-grid; text-align: right; }
.facts b .tick > span, .facts b .tick::before { grid-area: 1 / 1; display: block; margin: 0; max-width: none; font: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; text-align: inherit; white-space: nowrap; text-wrap: nowrap; }
.facts b .tick[data-final]::before { content: attr(data-final); visibility: hidden; }
.facts b .tick--k { text-align: left; }

/* появление пунктов - вариант 7 «линия, потом текст» (ideas2, .v7) для сеток инфраструктуры: над пунктом слева направо пробегает
   бело-золотая линия и гаснет до обычной, следом проявляется текст; фото проявляются по очереди. Класс .i7 ставит скрипт */
.items .row { position: relative; }
.i7.items .row { border-top-color: transparent; }
.i7.items .row::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line); transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  .i7.armed .row::before { transform: scaleX(0); }
  .i7.armed .row > *, .i7.armed > .fig { opacity: 0; }
  .i7.play > .fig { animation: fadein .7s ease both; animation-delay: calc(var(--i) * 90ms); }
  .i7.play .row::before { animation: draw .95s var(--out) both; animation-delay: calc(var(--i) * 70ms); }
  .i7.play .row > * { animation: fadein .55s ease both; animation-delay: calc(var(--i) * 70ms + 330ms); }
  @keyframes draw { 0% { transform: scaleX(0); background: var(--brass); } 55% { transform: scaleX(1); background: var(--brass); } 100% { transform: scaleX(1); background: rgba(255, 255, 255, .14); } }
  @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
}

/* стойки форм (К-017): одна строка - что человек получит и когда; размер основного текста */
.desk__text { margin-top: 14px; font-size: var(--fs-body); line-height: 1.5; }
.footer__hours { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: var(--text-2); }

/* квартиры: планировки-примеры полосой четвертей на рамке 8 px (светлые листы на столе), подпись на линии текста;
   три типа квартир тремя третями, кнопки на одной линии внизу */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--edge); }
.plans .fig img { aspect-ratio: 1; object-fit: contain; background: #F2F2F2; }
.plans-note { margin-top: 16px; }
.flat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; }
.flat-grid--3 .flat p { margin-bottom: 24px; }
.flat-grid--3 .flat .btn { margin-top: auto; }
.flat-grid--3 .btn--row { white-space: normal; height: auto; min-height: 56px; padding-top: 12px; padding-bottom: 12px; text-wrap: balance; }
@media (max-width: 1000px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flat-grid--3 { grid-template-columns: 1fr; }
}

/* калькулятор: заголовок над ползунками во всю ширину */
.calc__title { grid-column: 1 / -1; font-size: 24px; line-height: 1.3; }

/* лента: кадры прилипают (и при автошаге), курсор - «взять», а не лупа: клик без сдвига всё так же открывает галерею */
.strip.is-auto { scroll-snap-type: x mandatory; }
.strip.is-settle, .strip.is-auto.is-drag, .strip.is-auto.is-settle { scroll-snap-type: none; }
.strip .fig[data-gallery] { cursor: grab; }
.strip.is-drag, .strip.is-drag .fig[data-gallery] { cursor: grabbing; }

/* вертикальный ритм между экранами (девятый отзыв: «отступы везде ли идеально рассчитаны по визуалу?»): один шаг -
   112 px на компьютере и 96 на телефоне от последнего элемента экрана до первого элемента следующего, и при смене фона
   (56 + 56 по разные стороны края), и на одном фоне. Особые отступы сняты: продолжение на том же столе (48), фото в конце (16),
   лента (32), финал без зазора (0), подвал (48). Верх экрана считается по заглавной букве заголовка или вводного
   (обрезка межстрочного воздуха над буквой), низ - по фото, линии, кнопке или базовой линии текста. Проверка - qa/landing/rhythm-audit.mjs */
.sec, .sec--cont, .sec--photo-end, .sec--strip-end { padding-top: var(--sec); padding-bottom: var(--sec); }
.frame--final { padding-top: var(--sec); }
.footer { margin-top: var(--sec); padding-top: var(--sec); }
@supports (text-box: trim-start cap alphabetic) {
  .sec__head .h2, .strip-head .h2, .video-cols .h2, .sec__head > .sec__intro, .video-cols .prose > p:first-child { text-box: trim-start cap alphabetic; }
}
@media (max-width: 760px) {
  .two .desk--inline { padding-bottom: 0; }
}
/* низ экрана, который кончается текстом, - по базовой линии последней строки; у стойки первой формы до края экрана - тот же шаг */
@supports (text-box: trim-end cap alphabetic) {
  .sec > .fig--after .fig__cap > *, .built__note, .map-cap > *, .case-box .case small, .act > p, .two .desk--inline .fine { text-box: trim-end cap alphabetic; }
}
#form-1 { padding-bottom: var(--sec); }
/* локация: подпись карты на прежнем месте (12 px под картой), но без растяжки второй строки сетки - низ экрана по её базовой линии */
@media (min-width: 1001px) { .loc2 { row-gap: 0; } .loc2 .map-cap { margin-top: 12px; align-self: start; } }
/* форма 1 на ширинах 761-1360 px: поле номера сжималось и обрезало подсказку - кнопка уходит под поле во всю ширину, как на телефоне */
@media (min-width: 761px) and (max-width: 1360px) {
  .form__row--play { grid-template-columns: var(--field-h) minmax(0, 1fr); }
  .form__row--play .btn--field { grid-column: 1 / -1; }
}
/* однострочники стоек (К-017) при переносе - две ровные строки, без короткого хвоста */
.desk__text { text-wrap: balance; }
/* по ревью пакета 7 */
/* «Территория»: вводный - тремя короткими строками, как на одобренной пробе v1 и на 1512 тоже (без ограничения на 1512 растягивался в две длинные) */
#about .sec__head .sec__intro { max-width: 30em; }
/* строка удобств «Территории»: на телефоне три смысловые части ровными строками (части склеены в разметке) */
.cta--photos > span { text-wrap: balance; }
/* квартиры тремя третями: кнопки на ширину колонки - низ полосы ровный */
.flat-grid--3 .flat .btn { align-self: stretch; }

/* рывки прокрутки (Даниил 01.11 после версии 16: «дырг-дрыг, как будто что-то притормаживает»). Замер: законченные анимации
   появления держали отдельные слои отрисовки (18 на первом экране, ещё ~30 у пунктов инфраструктуры) и тянули за собой
   соседние - около 95 слоёв вместо десятка. Снимаем анимации после окончания (вид тот же), наведение не срабатывает во время прокрутки */
.ta-done .h1--rise .ch, .ta-done .lead--rise .ln > span, .ta-done .lead--rise { animation: none; }
.ta-done .rv { animation: none; opacity: 1; transform: none; }
/* наведение отключается на время прокрутки только у фото, ролика, ленты и строк (не у всей страницы: пересчёт стилей втрое дешевле) */
@media (hover: hover) { html.is-scrolling :is(.fig, .t1-fig, .video, .strip, .rows--live) { pointer-events: none; } }

/* ================= ПАКЕТ 8 (01.11.2026): отчёт независимого критика ================= */
/* постер первого экрана - <picture> (на телефоне свой, WebP) под видео; видео проявляется, когда пошло (грузится после страницы) */
.scene > picture { position: absolute; inset: 0; display: block; }
.scene > picture > img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.scene--hero .vid { opacity: 0; transition: opacity .35s ease; }
.scene--hero .vid.is-on { opacity: 1; }
.scene--hero.vid-on > picture { visibility: hidden; transition: visibility 0s .4s; }   /* ролик пошёл - постер под ним прячется, по краю ничего не выглядывает */
@media (max-width: 760px) { .scene--hero > picture > img { object-position: 44% 50%; } }

/* планшеты 761-1000 px (iPad, узкие окна): подпись места - под лидом, а не поверх него; факты - две колонки по две
   (четыре четверти при цифрах 44 px слипались: «от $173 000» наезжало на «20%») */
@media (min-width: 761px) and (max-width: 1000px) {
  .scene--hero .scene__cap { position: static; margin-top: 14px; text-align: left; }
  .facts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts li:nth-child(3)::before { display: none; }
  .facts li:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* телефон: лид первого экрана 17 px (правило PRODUCT.md - текст на телефоне не мельче 17), подписи карты 13 px */
@media (max-width: 760px) {
  .scene--hero .lead { font-size: 17px; }
  .pin span { font-size: 13px; }
}

/* пальцы (сенсорные экраны): зона нажатия от 44 px у мелких ссылок и у бегунков калькулятора */
@media (pointer: coarse) {
  .map-cap a { display: inline-block; padding: 14px 0; margin: -14px 0; }
  .footer .nav { gap: 0; }
  .footer .nav a, .footer__contacts a, .footer__legal a { display: inline-block; padding: 11px 0; }
  .footer__legal { gap: 0 32px; }
  .calc input[type=range] { height: 44px; margin: -14px 0 -10px; }
  .calc input[type=range]::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -13.5px; }
  .calc input[type=range]::-moz-range-thumb { width: 28px; height: 28px; }
  .ticks { margin: 0 14px; }
}

/* телефон боком (низкий экран): первый экран по высоте окна, заголовок и лид видны без прокрутки */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 600px) {
  .scene--hero { height: calc(100dvh - var(--header-h)); min-height: 0; aspect-ratio: auto; padding-bottom: 20px; }
  .scene--hero .scene__text { bottom: 20px; }
  .scene--hero .h1 { font-size: clamp(34px, 5vw, 48px); }
  .scene--hero .lead { margin-top: 8px; font-size: 16px; line-height: 1.45; max-width: 46em; }
}

/* ================= ОДИННАДЦАТЫЙ ОТЗЫВ (01.11.2026): сенсорные экраны без «залипшего» наведения ================= */
/* На телефоне касание = наведение, и это состояние остаётся после пальца: пункты инфраструктуры гасли, заливка кнопки застревала
   треугольником. Всё, что на компьютере показывает наведение, на сенсорном экране видно сразу; нажатие - простое, без заливки наискосок */
@media (hover: none) {
  .rows--live:hover .row { opacity: 1; }
  .rows--live .row:hover { background: none; }
  .strip:hover .fig img, .strip .fig:hover img, .fig:hover img, .fig[data-gallery]:hover img, .t1-fig:hover img, .video:hover > img { filter: none; transform: none; }
  .video:hover .video__play { background: var(--brass); transform: translate(-50%, -50%); }
  .btn::before { content: none; }
  .btn, .btn__arrow { transition: none; }
  .btn:hover { background: var(--brass); color: var(--ink); }
  .btn:hover .btn__arrow { transform: none; }
  .btn--ghost:hover { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
  .btn:active { background: var(--brass-2); }
  .btn--ghost:active { background: var(--brass); color: var(--ink); box-shadow: inset 0 0 0 1px var(--brass); }
  .play-btn:hover, .strip-nav button:hover, .gal__nav button:hover { background: transparent; border-color: var(--line-2); color: var(--text); }
  .play-btn:active, .strip-nav button:active, .gal__nav button:active { background: var(--brass); border-color: var(--brass); color: var(--ink); }
  .faq summary:hover { color: inherit; }
  .field:hover { border-color: var(--line-2); }
}

/* ================= ПЕРВЫЙ ЭКРАН ТЕЛЕФОНА (01.11.2026, версия 23): вариант 1 по выбору Даниила ================= */
/* Одиннадцатый отзыв: заголовок и описание отделить от видео. Выбран вариант 1 из проб design-system/probes/hero-m:
   заголовок и подпись места сверху на стене, под ними горизонтальное видео 16:9 в рамке, под видео описание. Та же разметка:
   сцена становится сеткой, обёртки текста - display: contents, каждому элементу своя строка и колонка 1 (без колонки элемент
   уезжал бы в невидимую вторую). Телефон боком (844×390) и планшеты - как раньше, с текстом на кадре */
@media (max-width: 760px) {
  .scene--hero { display: grid; grid-template-columns: 100%; height: auto; min-height: 0; aspect-ratio: auto; padding: 0; background: var(--wall); --m-ar: 16 / 9; }
  .scene--hero .scene__text, .scene--hero .scene__text > div { display: contents; }
  .scene--hero > picture, .scene--hero > .vid { position: relative; inset: auto; grid-column: 1; grid-row: 3; width: 100%; height: auto; background: var(--scene); }
  .scene--hero > picture > img, .scene--hero > .vid { display: block; width: 100%; height: auto; aspect-ratio: var(--m-ar); object-fit: cover; object-position: 50% 50%; }
  .scene--hero .scene__shade { display: none; }
  .scene--hero .h1, .scene--hero .lead, .scene--hero .scene__cap { grid-column: 1; }
  .scene--hero .h1 { grid-row: 1; margin: 0; padding: 24px 8px 0; color: var(--text); }
  .scene--hero .scene__cap { grid-row: 2; display: block; position: static; white-space: normal; text-align: left; font-size: 15px; line-height: 1.5; padding: 10px 8px 20px; color: var(--text-2); }
  .scene--hero .lead { grid-row: 4; margin: 0; padding: 20px 8px 20px; font-size: 17px; color: var(--text); }
  /* кнопка на первом экране телефона (ответ Даниила 01.11 на вопрос критика: «да, только на телефоне») - открывает попап формы 1 */
  .scene--hero .hero-cta { display: block; grid-row: 5; grid-column: 1; margin: 0; padding: 0 8px 24px; }
  .scene--hero .hero-cta .btn { width: 100%; }
}
.hero-cta { display: none; }

/* ================= ДВЕНАДЦАТЫЙ ОТЗЫВ (01.11.2026): лента на компьютере ================= */
/* картинки ленты и галереи не перетаскиваются браузером как файлы: перетаскивание - наше (лента едет, галерея листается) */
.strip img, .gal img { -webkit-user-drag: none; user-drag: none; }
/* галерея: пока следующий кадр грузится дольше 150 мс, прежний приглушается; кадр, подпись и счётчик меняются вместе */
.gal img { transition: opacity .25s ease; }
.dlg--gallery.is-loading .gal img { opacity: .35; }

/* ================= ТРЕК B (01.11.2026): ловушка для спама и состояние отправки ================= */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.form button[type=submit]:disabled { opacity: .7; cursor: default; }
.form__err a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(242, 242, 242, .45); text-underline-offset: .16em; }

/* ================= ПРЕЛОАДЕР (01.11.2026): вариант 1 «Логотип и линия» по выбору Даниила ================= */
/* Слой на весь экран поверх всего: логотип VIA и линия прогресса бело-золотым; уходит вверх за .9 с, следом стартует появление
   первого экрана. Показ один раз за визит (sessionStorage), при «уменьшении движения» и без скрипта - нет */
.pre { position: fixed; inset: 0; z-index: 90; background: var(--wall); display: grid; place-items: center; }
.pre__c { display: flex; flex-direction: column; align-items: center; transform: translateY(-4vh); }
.pre__logo { width: clamp(72px, 9vw, 124px); height: auto; opacity: 0; animation: pre-in .8s ease .1s both; }
.pre__bar { width: clamp(96px, 12vw, 160px); height: 1px; margin-top: 22px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.pre__bar i { display: block; height: 100%; width: 0; background: var(--brass); transition: width .18s linear; }
.pre.is-out { animation: pre-lift .9s cubic-bezier(.7, 0, .2, 1) both; }
.pre.is-off, html.pre-skip .pre { display: none; }
html.pre-wait .rv { animation-play-state: paused; }   /* появление первого экрана ждёт, пока уйдёт прелоадер */
@keyframes pre-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pre-lift { to { transform: translateY(-101%); } }
@media (prefers-reduced-motion: reduce) { .pre { display: none; } }