/* postroennyy-dom.css — страница построенного дома (new_design).
   Собран скриптом css/build-css.sh из компонентов прототипа 16.07.2026.
   Не править вручную: правки вносятся в _bridge.css или в компоненты. */

/* ───────── _bridge.css ───────── */
/* ============================================================================
 * _bridge.css — «мост» между прототипом страницы построенного дома и боевой темой
 * Собирается в postroennyy-dom.css ПЕРВЫМ блоком (см. build-css.sh).
 * ============================================================================
 *
 * Зачем нужен. Прототип рисовался на дизайн-стенде, где были свои tokens.css,
 * base.css и компоненты. На боевом от них есть только часть: бандл темы
 * new_design/css/styles.css. Ещё часть токенов лежит в stroyka-onlayn.css, но
 * тот подключён ТОЛЬКО на странице раздела — на карточке дома его нет.
 * Всё недостающее объявляем здесь, иначе невалидный var() роняет целиком
 * декларацию, а не одно свойство (грабля 2.4 карты деплоя раздела).
 *
 * Сверка сделана 06.08.2026 по живым файлам:
 *   curl new_design/css/styles.css  → есть: --bg-color, --brand-main-*,
 *        --brand-second-*, --brand-third-*, --grey-low, --white-*, --yellow-base
 *   нет нигде на карточке: --chamfer*, --font-sans, --font-mono, --surface-base
 */

:root {
  /* Значения 1:1 с боевым stroyka-onlayn.css (раздел «Стройка онлайн»),
     чтобы карточка и раздел не разъезжались по скосам и шрифтам. */
  --chamfer-sm: 0.6rem;
  --chamfer-md: 0.8rem;
  --chamfer-lg: 2.2rem;
  --chamfer: var(--chamfer-lg);
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Roboto Mono", "RobotoMono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Из tokens.css прототипа: базовый внутренний отступ поверхностей. */
  --surface-base: 24px;
}

@media (max-width: 992px) {
  :root { --surface-base: 16px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Стрелки галереи.
   В теме .nav-btn оформлен ТОЛЬКО под корнями слайдеров
   (.home-advantages … .slider-navigation .nav-btn, .houses-section .title-row …),
   в нашей секции он пустой — грабля 2.2. Повторяем вид темы 1:1
   (замер боевого бандла 06.08: 4.8rem, тот же clip-path, тот же фон).
   ───────────────────────────────────────────────────────────────────────── */
.built-gallery .built-gallery__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  font-size: 2rem;
  line-height: 2rem;
  clip-path: polygon(0.8rem 0%, 100% 0, 100% 0, 100% calc(100% - 0.8rem), calc(100% - 0.8rem) 100%, 0 100%, 0 100%, 0% 0.8rem);
  background-color: var(--brand-second-mid);
  color: var(--brand-main-base);
  border: 0;
  cursor: pointer;
  transition: background-color 0.3s;
}

.built-gallery .built-gallery__nav:hover {
  background-color: var(--yellow-base);
}

/* Кнопка «назад» на боевом зеркалится целиком: `.nav-btn.prev-btn
   { transform: scale(-1, 1) }` (замер бандла 07.08, секции home-advantages
   и houses-section). Из-за этого её скос оказывается в правом верхнем и
   левом нижнем углах — рядом кнопки выглядят симметричной парой. Разворот
   иконки отдельным rotate(180deg) при этом не нужен: зеркало уже развернуло
   стрелку, второй разворот вернул бы её остриём вправо. */
.built-gallery .built-gallery__nav--prev {
  transform: scale(-1, 1);
}

/* ─────────────────────────────────────────────────────────────────────────
   Воздух между хлебными крошками и заголовком (правка владельца 07.08).
   В прототипе было 2.4rem; на живых заголовках в три строки крошки
   «прилипали» к H1. Правило специфичнее компонентного (.built-page
   + класс), иначе built-house.css перебьёт его как более поздний.
   ───────────────────────────────────────────────────────────────────────── */
.built-page .built-page__title { margin-top: 4.8rem; }

@media (max-width: 992px) {
  .built-page .built-page__title { margin-top: 3.2rem; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Длинный заголовок карточки (правка владельца 07.08).
   H1 берётся из pagetitle и содержит и объект, и весь адрес: «Барнхаус 8×14 м
   по проекту Норвик в Московской области, м.о. Чехов, д. Красные Орлы,
   СНТ „Орлиные холмы“» — 104 символа, на телефоне это шесть строк на пол-экрана.

   Замер 96 карточек: медиана 60 символов, длиннее 70 — 11 карточек.
   Гео из H1 не убираем совсем: карточки ловят поиск как раз названиями
   посёлков (Метрика: «грин форест премиум», «оболдино 1 днп», «векшино 3»).
   Решение владельца 07.08: под заголовком остаётся одно звено адреса —
   посёлок, набранный подписью, как вторая строка в карточках товаров темы
   (.product-item .item-title span). Полный адрес живёт в панели
   характеристик строкой «Где построен», её шапку мы не трогаем.
   ───────────────────────────────────────────────────────────────────────── */
.built-page .built-page__title-geo {
  display: block;
  max-width: 100%;
  margin-top: 1.2rem;
  /* Наборный шрифт, а не моноширинный заголовочный: подзаголовок должен
     читаться подписью, а не продолжением H1. Внутри одного H1 это допустимо —
     тема так же оформляет вторую строку в карточках товаров
     (.product-item .item-title span). */
  font-family: var(--font-sans);
  font-size: 2.2rem;
  line-height: 135%;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--brand-main-mid);
  /* Адрес — сплошная строка без пробелов после сокращений («м.о.», «СНТ»),
     на узком экране одно звено может не влезть в строку. Разрешаем разрыв,
     иначе строка уедет за край контейнера. */
  overflow-wrap: break-word;
}

/* Заголовки, которые и после отделения гео остаются длинными (или у которых
   адрес в pagetitle записан иначе и отделить его нельзя — таких две трети),
   рисуются мельче. Класс вешает js/postroennyy-dom.js по длине текста. */
.built-page .built-page__title--long { font-size: 5rem; }

@media (max-width: 992px) {
  .built-page .built-page__title-geo { font-size: 1.8rem; margin-top: 1rem; }
  .built-page .built-page__title--long { font-size: 3.4rem; }
}

@media (max-width: 575px) {
  .built-page .built-page__title-geo { font-size: 1.6rem; }
  .built-page .built-page__title--long { font-size: 2.4rem; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Главный CTA блока цены («Рассчитать такой же дом»).
   Прототип рисовался с .primary-btn дизайн-стенда: у него внутри блока
   высота 60 px и боковые отступы 3.2rem. Боевой .primary-btn эти размеры
   задаёт под своими корнями (шапка, каталог, слайдеры), а в нашей секции
   не срабатывает — замер 06.08 на одинаковой разметке: эталон h=60 pad=0 32px,
   тот же CSS на боевой теме h=18 pad=0. Кнопка сжималась в полоску.

   ⚠ Правило намеренно узкое — только .built-price__cta. Прежняя версия
   ловила всё `.built-page .primary-btn` и накрыла вторую кнопку страницы
   («Все записи трансляций»): замер 07.08 против netlify-эталона дал
   h=60 / display:block / fs=16 против эталонных h=32 / flex / fs=14.
   ───────────────────────────────────────────────────────────────────────── */
.built-page .built-price__cta {
  min-height: 6rem;
  padding: 0 3.2rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   Кнопка «Все записи трансляций» в блоке «Таймлапс» = .consult-btn.
   Имя класса боевое (паттерн «Нужна помощь?» со страницы маткапитала),
   но в бандле темы он объявлен ТОЛЬКО под цепочкой
   `.use-section__content .tabs-list … .link-block .consult-btn`
   (проверено curl 07.08) — в нашей секции остаётся без оформления.
   Поэтому вид повторяем здесь 1:1 по link-block.css прототипа.
   margin-top НЕ задаём: он приходит из built-house.css
   (базово 0.8rem, в варианте «Рамка» 2.4rem) и здесь бы его перебил.
   ───────────────────────────────────────────────────────────────────────── */
.built-page .built-stream__cta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 1.2rem;
  font-family: var(--font-sans);
  font-size: 1.4rem;
  line-height: 112%;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--brand-main-base);
  text-decoration: none;
  background-color: transparent;
  border: 0;
  padding: 0;
  min-height: 0;
  clip-path: none;
}

.built-page .built-stream__cta .btn-txt {
  text-wrap: nowrap;
  overflow: hidden;
}

.built-page .built-stream__cta .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 3.2rem;
  width: 3.2rem;
  height: 3.2rem;
  font-size: 1.6rem;
  line-height: 1.6rem;
  color: var(--brand-main-base);
  background-color: var(--brand-second-mid);
  overflow: hidden;
  transition: background-color 0.3s;
}

.built-page .built-stream__cta .icon-btn_arrow::before { display: block; }

.built-page .built-stream__cta:hover .icon { background-color: var(--yellow-base); }

.built-page .built-stream__cta:hover .icon-btn_arrow::before {
  animation: 0.3s forwards MoveRightInitial,
             0.5s 0.3s forwards MoveRightEnd;
}

@media (max-width: 575px) {
  .built-page .built-stream__cta { font-size: 1.2rem; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Описание работ.
   В прототипе это был размеченный вручную список: лид .built-works__lead,
   строки .built-works__list с моно-номером в бежевом квадрате, абзац со
   сроками и итоговая стоимость с хайрлайном. На боевом текст приходит из
   поля content — произвольный HTML из админки, классов в нём нет:

       <p><strong>лид</strong></p>
       <p><strong>Были выполнены следующие работы:</strong></p>
       <ul><li>…</li></ul>
       <p>Строительство длилось <strong>…</strong></p>
       <p><strong>Стоимость дома: … р.</strong></p>

   Поэтому вид прототипа выдаётся по позиции узла, а не по классу: редактор
   пишет как привык, а страница выглядит как утверждённый макет. Значения
   1:1 с .built-works--numbered (замер 07.08 против demo/compare.html).
   ───────────────────────────────────────────────────────────────────────── */
.built-works__body {
  font-family: var(--font-sans);
  font-size: 1.7rem;
  line-height: 150%;
  letter-spacing: -0.02em;
  color: var(--brand-main-mid);
}

.built-works__body > *:first-child { margin-top: 0; }
.built-works__body > *:last-child { margin-bottom: 0; }

.built-works__body p { margin: 0 0 1.6rem; }

/* Пустые абзацы-распорки (<p>&nbsp;</p>) — привычный приём редактора в
   админке; вместо двойного отступа схлопываем их. */
.built-works__body p:empty { display: none; }

/* Выделение — только вес, без затемнения цвета: правило прототипа
   (bold тёмным поверх жирного начертания читается «слишком чёрным»). */
.built-works__body strong,
.built-works__body b { font-weight: 600; }

/* Первый абзац = лид блока. */
.built-works__body > p:first-child {
  margin-bottom: 2rem;
  font-size: 2rem;
  line-height: 140%;
  color: var(--brand-main-base);
}

/* В админке лид почти везде набран одним <strong> целиком (6 карточек из 8,
   замер 07.08), а в макете он обычного веса — жирным выделены только
   габариты и название проекта. Вес снимаем показом, текст не трогаем
   (решение владельца 07.08). Откат — удалить это правило. */
.built-works__body > p:first-child strong,
.built-works__body > p:first-child b { font-weight: 400; }

/* Ввод к списку («Были выполнены следующие работы:») — подзаголовком,
   а не таким же лидом. */
.built-works__body > p:first-child + p { margin-bottom: 2rem; }

/* ---- Список работ = вид «Нумерованный» прототипа ---- */
.built-works__body > ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: built-works;
}

.built-works__body > ul > li {
  display: flex;
  align-items: flex-start;
  gap: 2.4rem;
  margin: 0;
  padding: 1.6rem 0;
  border-bottom: 0.1rem solid var(--brand-main-low);
}

.built-works__body > ul > li:first-child { padding-top: 0; }
.built-works__body > ul > li:last-child { border-bottom: none; }

.built-works__body > ul > li::before {
  counter-increment: built-works;
  content: counter(built-works, decimal);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin-top: 0.2rem;
  padding: 0.4rem 0.9rem;
  background-color: var(--brand-third-base);
  border: 0.1rem solid var(--brand-main-low);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--brand-main-base);
}

/* Вложенные подпункты редактор набирает вторым уровнем — им номера не
   нужны, ритм как у .sub-line прототипа. */
.built-works__body > ul ul,
.built-works__body > ul ol {
  margin: 0.4rem 0 0;
  padding-left: 1.8rem;
  list-style: none;
}

.built-works__body > ul ul > li,
.built-works__body > ul ol > li {
  padding: 0;
  border: 0;
  text-indent: -1.8rem;
}

.built-works__body > ul ul > li::before,
.built-works__body > ul ol > li::before {
  content: "– ";
  counter-increment: none;
}

.built-works__body > ul ul > li + li,
.built-works__body > ul ol > li + li { margin-top: 0.3rem; }

/* Нумерованный список верхнего уровня (если редактор набрал <ol>) —
   тем же видом, что <ul>: собственные номера браузера прячем. */
.built-works__body > ol {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: built-works;
}

.built-works__body > ol > li {
  display: flex;
  align-items: flex-start;
  gap: 2.4rem;
  margin: 0;
  padding: 1.6rem 0;
  border-bottom: 0.1rem solid var(--brand-main-low);
}

.built-works__body > ol > li:first-child { padding-top: 0; }
.built-works__body > ol > li:last-child { border-bottom: none; }

.built-works__body > ol > li::before {
  counter-increment: built-works;
  content: counter(built-works, decimal);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin-top: 0.2rem;
  padding: 0.4rem 0.9rem;
  background-color: var(--brand-third-base);
  border: 0.1rem solid var(--brand-main-low);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--brand-main-base);
}

/* ---- Хвост после списка: сроки и итоговая стоимость ---- */
.built-works__body > ul ~ p,
.built-works__body > ol ~ p {
  margin: 2.8rem 0 0;
  font-size: 1.7rem;
  line-height: 145%;
}

/* Последняя строка описания — «Стоимость дома: … р.». В прототипе это была
   отдельная плашка .built-works__cost; здесь та же роль у абзаца: хайрлайн
   сверху и кегль итога. Отдельной плашки в шаблоне нет намеренно (иначе
   цена показывалась бы на экране трижды — решение 06.08). */
.built-works__body > ul ~ p:last-child,
.built-works__body > ol ~ p:last-child {
  margin-top: 2.4rem;
  padding-top: 2rem;
  border-top: 0.1rem solid var(--brand-main-low);
  font-size: 2rem;
  line-height: 130%;
  color: var(--brand-main-base);
}

.built-works__body a {
  color: var(--brand-main-base);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

@media (max-width: 575px) {
  .built-works__body > p:first-child { font-size: 1.8rem; }
  .built-works__body > ul > li,
  .built-works__body > ol > li { gap: 1.6rem; }
  .built-works__body > ul ~ p:last-child,
  .built-works__body > ol ~ p:last-child { font-size: 1.8rem; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Панель характеристик БЕЗ строки адреса (правка владельца 07.08).
   Адрес вернулся в заголовок целиком, и в панели его больше нет. Чтобы
   панель не начиналась «голой» сеткой (прошлая попытка так и сломалась),
   ряды разделены горизонтальной линией. Вертикальные линии между колонками
   пробовали — отклонено владельцем, «ухудшают всё».

   Ритм: единый шаг 4rem — от верхнего края плашки до первого ряда, между
   рядами и от последнего ряда до шва с блоком цены. Линия стоит РОВНО
   посередине зазора (top: -2rem при row-gap 4rem), поэтому ряды читаются
   одинаковыми полосами. Первая версия ставила отступы паддингом ячеек:
   первый ряд оказывался ниже своего места, второй — прижат к линии.

   Линию рисует псевдоэлемент первой ячейки ряда во всю ширину сетки,
   а не рамка ячеек: характеристик у карточек от четырёх до шести, и в
   неполном ряду рамка обрывалась на середине панели.
   ───────────────────────────────────────────────────────────────────────── */
.built-page .built-layout--merge .built-specs--no-loc {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
/* ─────────────────────────────────────────────────────────────────────────
   МОДУЛЬНАЯ СЕТКА СТРАНИЦЫ — 12 колонок, зазор 24px (--surface-base).
   Ширина колонки не забита числом, а считается от контента, поэтому раскладка
   держится на любой ширине окна. Первый экран — 6/6 (галерея и характеристики
   пополам), нижние секции — 8/4 (широкая часть и узкая колонка).
   Раскладку выбирал владелец на demo/setka.html 07.08.
   ───────────────────────────────────────────────────────────────────────── */
.built-page .built-works__grid,
.built-page .built-stream__layout {
  grid-template-columns:
    calc((100% - 11 * var(--surface-base)) / 12 * 8 + 7 * var(--surface-base))
    calc((100% - 11 * var(--surface-base)) / 12 * 4 + 3 * var(--surface-base));
  column-gap: var(--surface-base);
}
@media (max-width: 992px) {
  .built-page .built-works__grid,
  .built-page .built-stream__layout {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }
}

/* Запись таймлапса из раздела «Стройка онлайн» играет наш <video> в том же
   окне, где раньше был только iframe провайдера (правило .built-stream__embed
   iframe в built-house.css). Кадр вписываем целиком: ролики раздела 16:9
   (замер файла объекта 08.08 — 1280×720), но пропорция задана и у окна,
   поэтому contain страхует от обрезки, если зальют вертикальный. */
.built-page .built-stream__embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: contain;
  background-color: var(--brand-main-base);
}

/* Кадр карточки проекта не режется. У темы высота блока картинки жёсткая —
   24.8rem, и в колонке 450 px исходник 287×178 обрезался сверху и снизу
   примерно на 31 px (замечание владельца 07.08). Пропорция 16:10 почти совпадает
   с исходной 287:178 = 1.612, поэтому кадр виден целиком.
   ⚠ При интеграции в MODX запросить картинку крупнее: на 450 px колонки
   исходник 287 px по ширине будет мылить. */
.built-page .built-works__project .image-block {
  height: auto;
  aspect-ratio: 16 / 10;
  flex-basis: auto;
}

/* Галерея дотягивается до границы своей колонки. В прототипе у неё стоял
   margin-right: 1rem («поле справа внутри колонки»), из-за чего левый блок был
   на 10 px уже правого при объявленных ровных половинах, а зазор читался как 34
   при заданных 24 (замер 07.08, замечание владельца о сетке). */
.built-page .built-hero--half > .built-gallery,
.built-page .built-hero--split > .built-gallery {
  margin-right: 0;
}
.built-page .built-hero--mirror > .built-gallery {
  margin-left: 0;
}

/* Сетку прижимаем к внутреннему полю плашки: свой margin-top у неё равен шагу
   ряда, и вместе с padding плашки он давал сверху двойной отступ (замер 07.08:
   80 px на десктопе и 56 px на 375 при шаге 40 и 28). Класс .built-specs--rules
   добавлен, чтобы перевесить правило built-house.css той же специфичности
   (.built-layout--merge .built-specs:not(.built-specs--loc-out) .built-specs__grid),
   которое в бандле стоит ниже моста. */
.built-page .built-layout--merge .built-specs--no-loc.built-specs--rules .built-specs__grid {
  margin-top: 0;
}

/* Зазор рядов — ДВА шага, а не один: линия стоит посередине, и по 4rem остаётся
   от неё до текста сверху и снизу. Так воздух вокруг линии между рядами равен
   воздуху вокруг шва с блоком цены (замер 07.08: от шва до строки «36 дней»
   40,2 px, под ней 40,1). При одинарном зазоре линия отстояла от текста на 20 px
   и панель читалась плотнее нижней строки — замечание владельца. */
/* Колоночная геометрия — РОВНО как у строки срок/дата/цена (`.built-price__rows`:
   три колонки, зазор 3.2rem, ячейки без горизонтальных отступов). Иначе иконки
   характеристик и иконки цены стоят на разных вертикалях: при нулевом зазоре и
   отступах 2.4rem внутри ячеек средняя колонка уезжала вправо на 13 px, правая —
   на 2,5 (замер 08.08, замечание владельца). Воздух между колонками даёт зазор
   сетки, а не padding ячеек. */
.built-page .built-specs--rules.built-specs--icons-grid .built-specs__grid {
  column-gap: 3.2rem;
  row-gap: 8rem;
}


.built-page .built-specs--rules .built-spec {
  position: relative;
  padding: 0;
}

/* Линия между рядами — по центру зазора (половина row-gap = 4rem), во всю ширину
   сетки. Тон — как у шва с блоком цены (--built-line-strong): бледный
   --brand-main-low на светлой плашке терялся, сглаживание съедало его почти
   целиком (замер 07.08).
   ТОЛЩИНА ЗАДАЁТСЯ РАМКОЙ, НЕ ВЫСОТОЙ. Шов у блока цены нарисован
   `border-top: 0.1rem`, и при пересчёте в пиксели устройства такая рамка ложится
   в один физический пиксель, а заливка той же высоты — в два. При одинаковом
   цвете линии рядов выглядели заметно жирнее шва (замечание владельца 07.08). */
.built-page .built-hero--half .built-specs--rules .built-spec:nth-child(3n+1):not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: -4rem;
  /* три колонки плюс два зазора между ними — иначе линия обрывается,
     не дойдя до правого края сетки */
  width: calc(300% + 6.4rem);
  height: 0;
  border-top: 0.1rem solid var(--built-line-strong);
}

@media (max-width: 575px) {
  /* На телефоне колонок две: шаг мельче, линия шириной в две колонки. */
  .built-page .built-layout--merge .built-specs--no-loc {
    padding-top: 2.8rem;
    padding-bottom: 2.8rem;
  }
  /* Селектор с .built-layout--merge — не украшение: в built-house.css мобильное
     правило слитого блока (.built-layout--merge:has(.built-price--with-date)
     .built-specs--icons-grid .built-specs__grid) весит столько же, сколько мост,
     и стоит в бандле НИЖЕ — поэтому оно перебивало нулевой column-gap и шаг
     2.8rem своими 2rem/3rem. Замер 07.08 на 375 px: линия выходила короче ряда
     на 20 px (200% считались без колоночного зазора) и стояла на 1 px ниже
     середины зазора (top -1.4rem при фактическом row-gap 3rem). */
  /* Колонки — как у строки срок/цена на телефоне: две по 142,5 с зазором 2rem,
     ячейки без отступов. Иначе иконки характеристик и цены стоят на разных
     вертикалях (та же причина, что на десктопе). Отступы ячеек обнуляются явно:
     десктопные правила считают колонки тройками и на телефоне не отменяются —
     на ячейке «Спален» сходились оба обнуления сразу и она уезжала влево на
     16 px (замечание владельца 08.08). */
  .built-page .built-layout--merge .built-specs--rules.built-specs--icons-grid .built-specs__grid {
    column-gap: 2rem;
    row-gap: 5.6rem;
  }
  .built-page .built-specs--rules .built-spec,
  .built-page .built-hero--half .built-specs--rules .built-spec:nth-child(odd),
  .built-page .built-hero--half .built-specs--rules .built-spec:nth-child(even) {
    padding-left: 0;
    padding-right: 0;
  }
  .built-page .built-hero--half .built-specs--rules .built-spec:nth-child(3n+1):not(:first-child)::before {
    content: none;
  }
  .built-page .built-hero--half .built-specs--rules .built-spec:nth-child(odd):not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: -2.8rem;
    /* две колонки плюс зазор между ними */
    width: calc(200% + 2rem);
    height: 0;
    border-top: 0.1rem solid var(--built-line-strong);
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Верхний отступ страницы: снимаем ВТОРОЙ, но не у той секции, что красит фон.
   Замер боевого 08.08 (Playwright, 1440): зазор от шапки до крошек был 154 px
   против 34 px у /stroyka-onlayn/. Отступ под фиксированную шапку задан дважды:
   тема даёт его первой секции страницы — `main > section:nth-of-type(1)
   { padding: 12rem }` в styles.css, — а компонент добавляет столько же
   на .built-intro.

   Снимаем его у ВНЕШНЕЙ секции: подложку первого экрана рисует .built-intro,
   и если отступ убрать у неё, цветной фон начнётся только от крошек, а под
   шапкой останется светлая полоса (скрин владельца 08.08 — так и вышло
   с первой попытки). Тему не трогаем: на её правиле держится верх всех
   остальных разделов сайта. Двойной класс в селекторе — чтобы перевесить
   `:nth-of-type(1)` не порядком подключения, а весом.
   ───────────────────────────────────────────────────────────────────────── */
main > section.built-page.built-page { padding-top: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   Модалка «Рассчитать такой же дом» (#calc_modal). Обёртка взята от модалки
   маткапитала, и вместе с оформлением приезжают две её мерки, подогнанные
   под ЕЁ тексты. Обе перебиваем по id — тему не трогаем, она обслуживает
   маткапитал и ипотеку.

   1. Подпись кнопки. Тема задаёт `.modal-style.capital-modal .submit-btn
      .btn-txt { width: 24rem }` под «Получить консультацию». Замер боевого
      08.08: коробка 240 px, текст «Отправить заявку» 167 px, выравнивание
      по левому краю — 73 px пустоты, на которые и отъезжает стрелка.

   2. Заголовок. У `.modal-title` есть `padding-right: 4rem` под крестик:
      доступно 512 px, а заголовок при кегле 40 px требует 524 — не хватает
      12 px, и слово уезжает на вторую строку. Снижаем кегль на две десятых
      рема: 498 px против доступных 512. На телефоне перенос оставляем —
      там строка не поместится ни при каком кегле.
   ───────────────────────────────────────────────────────────────────────── */
#calc_modal .submit-btn .btn-txt { width: auto; }

@media (min-width: 993px) {
  #calc_modal .modal-title {
    font-size: 3.8rem;
    white-space: nowrap;
  }
}

/* ───────── frame.css ───────── */
@charset "UTF-8";
/* =========================================================
   frame.css — corner brackets + skewed underline
   Utilities used by dozens of blocks across the system.
   ========================================================= */

/* ---- CORNER BRACKETS ----
   .frame-corners gives an element four 0.8x0.8rem brackets
   drawn via :before/:after on the parent + child elements.
   CSS variables let you tweak size/thickness/color. */

.frame-corners {
  position: relative;
  --corner-size: 0.8rem;
  --corner-thickness: 0.2rem;
  --corner-color: var(--brand-main-base);
}

.frame-corners::before,
.frame-corners::after,
.frame-corners > .frame-corner-bl,
.frame-corners > .frame-corner-br {
  content: "";
  display: block;
  width: var(--corner-size);
  height: var(--corner-size);
  position: absolute;
  pointer-events: none;
}

/* top-left */
.frame-corners::before {
  top: 0;
  left: 0;
  border-top: var(--corner-thickness) solid var(--corner-color);
  border-left: var(--corner-thickness) solid var(--corner-color);
}
/* top-right */
.frame-corners::after {
  top: 0;
  right: 0;
  border-top: var(--corner-thickness) solid var(--corner-color);
  border-right: var(--corner-thickness) solid var(--corner-color);
}
/* bottom-left — added via child element */
.frame-corners > .frame-corner-bl {
  bottom: 0;
  left: 0;
  border-bottom: var(--corner-thickness) solid var(--corner-color);
  border-left: var(--corner-thickness) solid var(--corner-color);
}
/* bottom-right */
.frame-corners > .frame-corner-br {
  bottom: 0;
  right: 0;
  border-bottom: var(--corner-thickness) solid var(--corner-color);
  border-right: var(--corner-thickness) solid var(--corner-color);
}

/* Variant via background-image only (no child elements needed)
   (used when you cannot add a child) */
.frame-corners--auto {
  background-image:
    linear-gradient(to right, var(--corner-color, var(--brand-main-base)) var(--corner-size, 0.8rem), transparent var(--corner-size)),
    linear-gradient(to bottom, var(--corner-color, var(--brand-main-base)) var(--corner-size, 0.8rem), transparent var(--corner-size)),
    linear-gradient(to left, var(--corner-color, var(--brand-main-base)) var(--corner-size, 0.8rem), transparent var(--corner-size)),
    linear-gradient(to bottom, var(--corner-color, var(--brand-main-base)) var(--corner-size, 0.8rem), transparent var(--corner-size)),
    linear-gradient(to right, var(--corner-color, var(--brand-main-base)) var(--corner-size, 0.8rem), transparent var(--corner-size)),
    linear-gradient(to top, var(--corner-color, var(--brand-main-base)) var(--corner-size, 0.8rem), transparent var(--corner-size)),
    linear-gradient(to left, var(--corner-color, var(--brand-main-base)) var(--corner-size, 0.8rem), transparent var(--corner-size)),
    linear-gradient(to top, var(--corner-color, var(--brand-main-base)) var(--corner-size, 0.8rem), transparent var(--corner-size));
  background-size:
    var(--corner-size, 0.8rem) var(--corner-thickness, 0.2rem),
    var(--corner-thickness, 0.2rem) var(--corner-size, 0.8rem),
    var(--corner-size, 0.8rem) var(--corner-thickness, 0.2rem),
    var(--corner-thickness, 0.2rem) var(--corner-size, 0.8rem),
    var(--corner-size, 0.8rem) var(--corner-thickness, 0.2rem),
    var(--corner-thickness, 0.2rem) var(--corner-size, 0.8rem),
    var(--corner-size, 0.8rem) var(--corner-thickness, 0.2rem),
    var(--corner-thickness, 0.2rem) var(--corner-size, 0.8rem);
  background-position:
    top left, top left,
    top right, top right,
    bottom left, bottom left,
    bottom right, bottom right;
  background-repeat: no-repeat;
  position: relative;
}

/* ---- SKEWED UNDERLINE ----
   Decorative slanted parallelogram drawn under big numbers.
   Drawn via :after pseudo on .skewed-underline. */
.skewed-underline {
  position: relative;
  display: inline-block;
  padding-left: 0.8rem;
}
.skewed-underline::after {
  content: "";
  display: block;
  width: 100%;
  height: 1.3rem;
  border-top: 0.1rem solid var(--grey-low);
  border-left: 0.1rem solid var(--grey-low);
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0.4rem;
  transform: skewX(-34deg);
  pointer-events: none;
}
@media (max-width: 575px) {
  .skewed-underline::after { max-width: calc(100% - 0.8rem); }
}

/* Mirrored variant (used by filter-title) */
.skewed-underline--mirror::after {
  border-top: 0.1rem solid var(--grey-low);
  border-right: 0.1rem solid var(--grey-low);
  border-left: none;
  transform: skewX(34deg);
}

/* Yellow accent */
.skewed-underline--accent::after {
  border-color: var(--yellow-base);
  border-width: 0.2rem;
}

/* ───────── player.css ───────── */
@charset "UTF-8";
/* =========================================================
   player.css — video player UI (poster, controls, timeline)
   ----
   Rebuilt on tokens from the Figma "Player UI" frame. Four parts:

     .player-timecode   — mono duration / "current / total" chip
     .player-control    — round play / pause button (default + hover)
     .player-timeline   — thin progress track + yellow fill
     .video-player      — poster (gradient + corner ticks) with a
                          centred control and a bottom timeline,
                          optionally followed by a .video-caption

   The play/pause glyph is an inline <svg fill="currentColor"> so the
   button colours come from tokens (no external icon files):

     <button class="player-control" aria-label="Play">
       <svg class="player-control__play" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
     </button>

   Use .player-control--pause to show the two-bar glyph instead.
   ========================================================= */

/* ---- Timecode chip ---- */
.player-timecode {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.6rem;
  background-color: rgba(0, 0, 0, 0.55);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 100%;
  letter-spacing: -0.02em;
  color: var(--white-base);
  white-space: nowrap;
}

/* ---- Play / pause control ---- */
.player-control {
  --size: 8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size);
  height: var(--size);
  flex: 0 0 auto;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background-color: var(--brand-second-mid);
  color: var(--brand-main-base);
  transition: background-color 0.25s, color 0.25s;
}
.player-control:hover,
.player-control:focus-visible {
  background-color: var(--brand-main-base);
  color: var(--brand-second-mid);
  outline: none;
}
.player-control svg {
  width: 40%;
  height: 40%;
  display: block;
  fill: currentColor;
}
/* Pause glyph hidden by default; play glyph hidden on --pause.
   Scoped with .player-control to beat `.player-control svg { display:block }`. */
.player-control .player-control__pause { display: none; }
.player-control--pause .player-control__play { display: none; }
.player-control--pause .player-control__pause { display: block; }

/* Compact size for inline use (e.g. on a poster). */
.player-control--sm { width: 5.6rem; height: 5.6rem; }

/* ---- Timeline ---- */
.player-timeline {
  display: block;
  width: 100%;
  height: 0.4rem;
  background-color: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.player-timeline__fill {
  display: block;
  height: 100%;
  width: var(--progress, 0%);
  background-color: var(--yellow-base);
}
/* On a light surface, darken the track. */
.player-timeline--light { background-color: var(--brand-main-low); }

/* ---- Video player poster ---- */
.video-player {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.video-poster {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1.8;
  padding: 1.6rem;
  background: linear-gradient(90deg, #555d63 0%, #373d42 100%);
  overflow: hidden;
}

/* If a real poster image is dropped in, it fills the gradient frame. */
.video-poster > .video-poster__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* 4 corner ticks (brand motif) */
.video-poster::before,
.video-poster::after,
.video-poster > .corner-bl,
.video-poster > .corner-br {
  content: "";
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  z-index: 2;
  pointer-events: none;
}
.video-poster::before {
  top: 0; left: 0;
  border-top: 0.1rem solid var(--white-base);
  border-left: 0.1rem solid var(--white-base);
}
.video-poster::after {
  top: 0; right: 0;
  border-top: 0.1rem solid var(--white-base);
  border-right: 0.1rem solid var(--white-base);
}
.video-poster > .corner-bl {
  bottom: 0; left: 0;
  border-bottom: 0.1rem solid var(--white-base);
  border-left: 0.1rem solid var(--white-base);
}
.video-poster > .corner-br {
  bottom: 0; right: 0;
  border-bottom: 0.1rem solid var(--white-base);
  border-right: 0.1rem solid var(--white-base);
}

.video-poster .player-control { position: relative; z-index: 2; }

/* Bottom timeline overlay: duration chip right-aligned + progress */
.video-poster__timeline {
  position: absolute;
  left: 1.6rem;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.8rem;
}
.video-poster__timeline .player-timeline { width: 100%; }

/* ---- Caption under a poster ---- */
.video-caption {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.6rem 0 0.8rem;
}
.video-caption__title {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 110%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--brand-main-base);
}
.video-caption__text {
  margin: 0;
  font-size: 1.4rem;
  line-height: 135%;
  letter-spacing: -0.01em;
  color: var(--brand-main-mid);
}

/* ───────── built-house.css ───────── */
@charset "UTF-8";
/* =========================================================
   built-house.css — страница ПОСТРОЕННОГО ДОМА (карточка объекта)
   ---------------------------------------------------------
   ⚠ ПРОВЕНАНС: НОВОЕ (наши имена). Индивидуальной страницы
   построенного дома нет в боевых дампах uploads/ — есть только
   листинг. Поэтому имена классов здесь — DS-абстракции для нового
   дизайна, помечены как «Новое». При хэндоффе сверить с реальной
   разметкой /postroennyie-doma/<...>.html, если она появится в дампе.

   Переиспользует существующие компоненты: breadcrumbs, button
   (.btn-arrow / .primary-btn), product-card (.product-item),
   frame (.frame-corners), chamfer, tag.

   Состоит из блоков:
     .built-page            — обёртка страницы (верхний ритм 13/11/9rem)
     .built-gallery         — галерея фото (3 раскладки: --thumbs / --mosaic / --slider)
     .built-layout          — характеристики + цена (--aside / --below)
     .built-specs           — характеристики (--tiles / --table)
     .built-works           — текстовый блок «Выполнены следующие работы»
     .built-project         — «Дом построен по проекту» (карточка product-item)
     .built-lightbox        — полноэкранный просмотр фото
   ========================================================= */

/* ─────────────────────────────────────────────
   Обёртка страницы — верхний ритм под фикс-шапкой
   (тот же 13/11/9rem, что у faq-hub / faq-page).
   ───────────────────────────────────────────── */
.built-page {
  position: relative;
  overflow: clip;
  /* — Компонентные токены (выведены из брендовых, без «магических» литералов) —
     Тёплые off-white поверхности между фоном страницы (--bg-color) и белым. */
  --built-surface: color-mix(in srgb, var(--white-base) 28%, var(--bg-color));      /* плашки характеристик/цены (≈ #f3f0ed) */
  --built-surface-soft: color-mix(in srgb, var(--white-base) 36%, var(--bg-color)); /* плашка блока «работы» (≈ #f5f2ed) */
  /* Разделитель «сильнее» базового hairline (--brand-main-low = 0.1 brand-main). */
  --built-line-strong: color-mix(in srgb, var(--brand-main-base) 18%, transparent);
}

/* Первый экран — тёмная плашка во всю ширину (крошки + заголовок +
   галерея/характеристики), как .capital-main и другие первые экраны
   библиотеки. Верхний отступ — как на боевом сайте (12/10rem,
   main > section:nth-of-type(1)), чистит фикс-шапку. */
.built-intro {
  position: relative;
  background-color: var(--brand-third-base);
  padding: 12rem 0 4rem;
  overflow: clip;
}
@media (max-width: 992px) { .built-intro { padding-top: 10rem; } }
@media (max-width: 575px) { .built-intro { padding-top: 10rem; } }
/* Опция Tweaks: светлый фон первого экрана — тот же фон, что у секции
   «Выполнены следующие работы» (фон страницы --bg-color #eeebe5), на тон
   светлее дефолтной тёплой плашки --brand-third-base #e6e1db. */
.built-intro--light { background-color: var(--bg-color); }
/* Контент над орнаментом. */
.built-intro > .container { position: relative; z-index: 1; }

/* Пиксельный орнамент бренда — правый верхний угол (канон. размещение). */
.built-page__ornament {
  position: absolute;
  top: -9rem;
  right: -3rem;
  width: 42rem;
  height: 42rem;
  background: url("/assets/template/new_design/images/svg/main_bg.svg") center / cover no-repeat;
  pointer-events: none;
  opacity: 0.45;
  z-index: 0;
}
@media (max-width: 992px) {
  .built-page__ornament { width: 26rem; height: 26rem; top: -7rem; right: -2rem; }
}

/* Заголовок страницы = канонический H1-токен .page-title (8rem / 94% / 700,
   на узких 4.6 / 3rem). Здесь задаём только раскладку (отступ + ширина). */
.built-page__title {
  margin: 2.4rem 0 0;
  /* Заголовок-баннер во всю ширину контейнера, чуть мельче геройского токена. */
  max-width: none;
  font-size: 6.4rem;
}
@media (max-width: 992px) { .built-page__title { margin-top: 2rem; max-width: 100%; font-size: 4.2rem; } }
@media (max-width: 575px) { .built-page__title { font-size: 3rem; } }

/* =========================================================
   HERO — раскладка «галерея ↔ характеристики»
   (top-level переключатель: --split / --stacked / --mirror)
   ========================================================= */
.built-hero {
  margin-top: 6rem;
}
@media (max-width: 992px) { .built-hero { margin-top: 4.4rem; } }

/* Блок цены первого экрана — фон страницы (--bg-color), как у блока «Выполнены
   следующие работы». От фона плашку отделяет только тонкая рамка. Текст тёмный. */
.built-hero .built-price { background-color: var(--bg-color); }

/* split (дефолт): галерея слева, характеристики+цена справа — компактно,
   как на старом дизайне. mirror — то же зеркально (галерея справа). */
.built-hero--split,
.built-hero--mirror,
.built-hero--half {
  display: grid;
  gap: 1.2rem var(--surface-base);
  align-items: start;
}
/* Правая колонка (характеристики + цена) поджата по ширине, галерея забирает
   остаток. В зеркальной раскладке — наоборот (галерея справа, тоже широкая). */
.built-hero--split { grid-template-columns: minmax(0, 1fr) minmax(0, 44rem); }
.built-hero--mirror { grid-template-columns: minmax(0, 44rem) minmax(0, 1fr); }
/* half: галерея занимает ровно половину экрана (50/50), а не большую часть. */
.built-hero--half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.built-hero--split > .built-gallery,
.built-hero--mirror > .built-gallery,
.built-hero--half > .built-gallery,
.built-hero--split > .built-layout,
.built-hero--mirror > .built-layout,
.built-hero--half > .built-layout { margin-top: 0; }
/* Галерея на 10px уже — поле справа внутри её колонки; правый блок не сдвигается
   (он в собственной фиксированной колонке грида). */
.built-hero--split > .built-gallery { margin-right: 1rem; }
.built-hero--half > .built-gallery { margin-right: 1rem; }
.built-hero--mirror > .built-gallery { margin-left: 1rem; }

.built-hero--mirror > .built-gallery { order: 2; }

/* В узкой правой колонке мозаика галереи → 3 столбца. */
.built-hero--split .built-gallery__mosaic,
.built-hero--half .built-gallery__mosaic,
.built-hero--mirror .built-gallery__mosaic { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 992px) {
  .built-hero--split,
  .built-hero--mirror,
  .built-hero--half { grid-template-columns: minmax(0, 1fr); row-gap: 3.2rem; }
  .built-hero--mirror > .built-gallery { order: 0; }
  .built-hero--split .built-gallery__mosaic,
  .built-hero--half .built-gallery__mosaic,
  .built-hero--mirror .built-gallery__mosaic { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   ГАЛЕРЕЯ
   ========================================================= */
.built-gallery {
  margin-top: 4rem;
}
@media (max-width: 992px) { .built-gallery { margin-top: 3.2rem; } }

/* ---- Сцена (крупное фото; стрелки-пара поверх фото, правый низ) ---- */
.built-gallery__stage {
  position: relative;
}

.built-gallery__main {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--brand-second-low);
  /* Без канта: уголки-рамка (.frame-corners) сами обрамляют фото и теперь стоят
     ВРОВЕНЬ с краями. Раньше кант 0.1rem + overflow:hidden прятал уголки на ~1px
     внутрь (жалоба «скобки на пиксель внутри картинки»). Референс — .photo-figure. */
  cursor: zoom-in;
}
/* «Уголки»-рамка по углам фото — как в блоге/статье (.photo-figure.frame-corners):
   тёмные (--brand-main-base), небольшие (1.4rem), вровень с краями, все 4 угла. */
.built-gallery__main.frame-corners {
  --corner-size: 1.4rem;
  --corner-thickness: 0.2rem;
  --corner-color: var(--brand-main-base);
}
.built-gallery__main.frame-corners::before,
.built-gallery__main.frame-corners::after,
.built-gallery__main.frame-corners > .frame-corner-bl,
.built-gallery__main.frame-corners > .frame-corner-br { z-index: 2; }
.built-gallery__main img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Счётчик кадров — плашка поверх фото, ПРАВЫЙ НИЖНИЙ угол сцены, тёмная
   подложка с белым текстом. */
.built-gallery__counter {
  position: absolute;
  top: auto;
  bottom: 1.2rem;
  left: auto;
  right: 1.2rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white-base);
  background-color: var(--brand-main-base);
  border: none;
  padding: 0.6rem 0.9rem;
}

/* Стрелки-пара ПОД лентой миниатюр (справа) — фото остаётся чистым.
   Кнопки = системный .nav-btn (скос-чамфер, бежевая заливка, ховер → жёлтый).
   Видны в раскладках «миниатюры» и «слайдер». */
.built-gallery__controls {
  display: none;
  justify-content: flex-end;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.2rem;
}
/* Кнопка «Смотреть таймлапс стройки» — слева в ряду управления, ведёт к
   блоку записи трансляции ниже. Тихая (сэнд + скос TL/BR, как .nav-btn),
   БЕЗ жёлтого: на первом экране главный CTA — сэнд .primary-btn. */
.built-gallery__stream-link {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  height: 4.4rem;
  padding: 0 1.8rem;
  background-color: var(--brand-second-mid);
  color: var(--brand-main-base);
  font-family: var(--font-mono);
  font-size: 1.3rem;
  line-height: 100%;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  --chamfer: var(--chamfer-md);
  clip-path: polygon(
    var(--chamfer) 0, 100% 0,
    100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%,
    0 100%, 0 var(--chamfer)
  );
  transition: background-color 0.25s, color 0.25s;
}
.built-gallery__stream-link svg {
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  fill: currentColor;
}
.built-gallery__stream-link:hover {
  background-color: var(--brand-main-base);
  color: var(--brand-second-mid);
}


@media (max-width: 575px) {
  /* Ряд управления на телефоне: ссылка «Смотреть таймлапс» и пара стрелок
     prev/next — на ОДНОМ уровне (одна строка). Ссылка слева, забирает
     остаток ширины и переносится в несколько строк; стрелки держатся
     вместе справа, по центру относительно (много­строчной) ссылки. */
  .built-gallery__controls {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
  }
  .built-gallery__stream-link {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 0;
    align-items: flex-start;
    justify-content: flex-start;
    white-space: normal;
    text-align: left;
    line-height: 130%;
    font-size: 1.2rem;
    height: auto;
    padding: 0.4rem 0;
  }
  .built-gallery__stream-link svg { margin-top: 0.2rem; }
  .built-gallery__stream-link span { white-space: normal; }
  .built-gallery__nav { flex: 0 0 auto; }
}

/* ═══ Вид кнопки ВШИТ: «Надпись + квадрат» (владелец 2026-07-16) ═══
   Приём .backcall-link (шапка, «Скобки» трансляций): Inter-надпись (по
   брендбуку кнопки — Inter, как .primary-btn; прежний моно смущал
   владельца) + сэнд-квадрат 3.2rem с глифом ▶; по ховеру квадрат
   вспыхивает жёлтым, под надписью проявляется подчёркивание. Жёлтый —
   ТОЛЬКО по ховеру (на первом экране главный CTA — сэнд).
   Отклонены и УДАЛЕНЫ 2026-07-16 (НЕ воссоздавать): «Ссылка» (--text,
   был дефолт), «Контур» (--outline), «Сэнд-кнопка Inter» (--btn),
   «Графитовая плашка» (--dark). */
.built-gallery__stream-link--puck {
  font-family: var(--font-sans);
  font-size: 1.4rem;
  letter-spacing: 0;
  background-color: transparent;
  clip-path: none;
  height: auto;
  padding: 0.2rem 0;
  gap: 1.2rem;
}
.built-gallery__stream-link--puck svg { width: 3.2rem; height: 3.2rem; padding: 0.95rem; box-sizing: border-box; background-color: var(--brand-second-mid); transition: background-color 0.3s; }
.built-gallery__stream-link--puck span { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em; transition: text-decoration-color 0.25s; }
.built-gallery__stream-link--puck:hover { background-color: transparent; color: var(--brand-main-base); }
.built-gallery__stream-link--puck:hover svg { background-color: var(--yellow-base); }
.built-gallery__stream-link--puck:hover span { text-decoration-color: currentColor; }
@media (max-width: 575px) {
  .built-gallery__stream-link--puck { align-items: center; padding: 0.2rem 0; font-size: 1.2rem; }
  .built-gallery__stream-link--puck svg { margin-top: 0; }
}

/* =========================================================
   Вариант · «Рельс» — стрелки в ОДНОМ ряду с миниатюрами
   (лента упирается в стрелки справа), счётчик — поверх фото.
   Включается классом .built-gallery--rail (Tweaks).
   ========================================================= */
.built-gallery--rail {
  position: relative;            /* якорь для счётчика поверх фото */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 2.8rem;
}
.built-gallery--rail .built-gallery__stage { grid-column: 1 / -1; grid-row: 1; }
/* Лента — левая колонка второго ряда, упирается в стрелки. */
.built-gallery--rail .built-gallery__thumbs { grid-column: 1; grid-row: 2; }
/* Стрелки — правая колонка того же ряда, выровнены по верхней границе ленты. */
.built-gallery--rail .built-gallery__controls {
  grid-column: 2;
  grid-row: 2;
  margin-top: 1.2rem;
  align-items: flex-start;
}
/* Счётчик уходит из ряда и ложится поверх фото (левый верх). */
.built-gallery--rail .built-gallery__counter {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  margin: 0;
}
@media (max-width: 575px) {
  /* На узких экранах — назад к двум ярусам (тесный ряд недопустим). */
  .built-gallery--rail { display: block; }
  .built-gallery--rail .built-gallery__counter { position: static; }
  .built-gallery--rail .built-gallery__controls { justify-content: flex-end; }
  .built-gallery--rail .built-gallery__controls .built-gallery__counter { margin-right: auto; }
}

/* ---- Лента миниатюр ---- */
.built-gallery__thumbs {
  margin-top: 1.2rem;
  display: grid;
  grid-auto-flow: column;
  /* Фиксированная (крупная) ширина → 22 миниатюры не ужимаются в строку,
     а лента прокручивается по горизонтали. */
  grid-auto-columns: 12rem;
  gap: 1.2rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  padding-bottom: 0.8rem;
}
.built-gallery__thumb { scroll-snap-align: start; }
.built-gallery__thumb {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 3 / 2;
  min-width: 0;
  padding: 0;
  border: 0.1rem solid var(--brand-main-low);
  background: var(--brand-second-low);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.3s, opacity 0.3s;
  opacity: 0.7;
}
.built-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.built-gallery__thumb:hover { opacity: 1; border-color: var(--brand-main-mid); }
.built-gallery__thumb.is-active {
  opacity: 1;
  border-color: var(--brand-main-base);
  border-width: 0.2rem;
}
/* Жёлтая засечка снизу у активной миниатюры. */
.built-gallery__thumb.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0.4rem;
  background-color: var(--yellow-base);
}

/* ---- Точки (слайдер) ---- */
.built-gallery__dots {
  display: none;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.6rem;
}
.built-gallery__dot {
  width: 0.8rem;
  height: 0.8rem;
  padding: 0;
  border: none;
  background-color: var(--brand-main-low);
  cursor: pointer;
  transition: background-color 0.3s, width 0.3s;
}
.built-gallery__dot.is-active {
  width: 2.4rem;
  background-color: var(--yellow-base);
}

/* ---- Мозаика ---- */
.built-gallery__mosaic {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 1.2rem;
}
.built-gallery__mosaic .built-gallery__cell {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 0.1rem solid var(--brand-main-low);
  background: var(--brand-second-low);
  cursor: zoom-in;
}
.built-gallery__mosaic .built-gallery__cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.built-gallery__mosaic .built-gallery__cell:hover img { transform: scale(1.04); }
/* Первая ячейка крупная (2×2). */
.built-gallery__mosaic .built-gallery__cell:first-child {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}
/* Счётчик «ещё N фото» на последней видимой ячейке. */
.built-gallery__cell-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 2.4rem;
  letter-spacing: -0.02em;
  color: var(--white-base);
  background-color: color-mix(in srgb, var(--brand-main-base) 55%, transparent);
}

/* ---- Раскладки галереи ---- */
/* thumbs (дефолт): сцена СО СТРЕЛКАМИ + лента миниатюр (как на боевом сайте).
   Точки не нужны — роль пагинации играют миниатюры. */
.built-gallery--thumbs .built-gallery__thumbs { display: grid; }
.built-gallery--thumbs .built-gallery__dots,
.built-gallery--thumbs .built-gallery__mosaic { display: none; }
.built-gallery--thumbs .built-gallery__controls { display: flex; }

/* slider: сцена со стрелками + точки, без ленты/мозаики. */
.built-gallery--slider .built-gallery__controls { display: flex; }
.built-gallery--slider .built-gallery__dots { display: flex; }
.built-gallery--slider .built-gallery__thumbs,
.built-gallery--slider .built-gallery__mosaic { display: none; }

/* mosaic: сетка плиток, без сцены/ленты/точек. */
.built-gallery--mosaic .built-gallery__mosaic { display: grid; }
.built-gallery--mosaic .built-gallery__stage,
.built-gallery--mosaic .built-gallery__thumbs,
.built-gallery--mosaic .built-gallery__dots { display: none; }

@media (max-width: 992px) {
  .built-gallery__main { aspect-ratio: 3 / 2; }
  .built-gallery__mosaic { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575px) {
  .built-gallery__thumbs { grid-auto-columns: 28%; }
  .built-gallery__mosaic { grid-template-columns: repeat(2, 1fr); }
  .built-gallery__mosaic .built-gallery__cell:first-child { grid-column: span 2; grid-row: span 1; }
}

/* =========================================================
   ХАРАКТЕРИСТИКИ + ЦЕНА
   ========================================================= */
.built-layout {
  margin-top: 4.8rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Воздух между характеристиками и блоком «срок/стоимость + кнопка». */
  gap: 3.2rem;
  align-items: start;
}
@media (max-width: 992px) { .built-layout { margin-top: 4rem; } }
@media (max-width: 575px) { .built-layout { gap: 2.4rem; } }

/* aside: характеристики слева (1fr), цена-карточка справа на направляющей. */
.built-layout--aside {
  grid-template-columns: minmax(0, 1fr) minmax(0, 42rem);
}
/* below: характеристики во всю ширину, цена — полоса под ними. */
.built-layout--below {
  grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 992px) {
  .built-layout--aside { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Характеристики ---- */
.built-specs {
  border: 0.1rem solid var(--brand-main-low);
  /* Непрозрачный фон (тон = white-mid, скомпонованный поверх brand-third),
     чтобы пиксельный орнамент не просвечивал сквозь верх плашки. */
  background-color: var(--built-surface);
  padding: 3.2rem;
}
@media (max-width: 575px) { .built-specs { padding: 2.4rem 2rem; } }

/* Фирменный «обрубленный» угол — ТОЛЬКО слева вверху (top-left), но только
   у варианта «локация вне плашки» (кант переезжает на .built-specs__grid).
   У самой плашки .built-specs (локация внутри) угол прямой — на пробу убран
   по запросу (обычный прямоугольник, без среза и без доп. верхнего паддинга
   под него). */
.built-specs--loc-out .built-specs__grid {
  clip-path: polygon(
    var(--chamfer-lg) 0,
    100% 0,
    100% 100%,
    0 100%,
    0 var(--chamfer-lg)
  );
}
.built-specs--loc-out.built-specs--icons-grid .built-specs__grid { padding-top: 4rem; }

/* Опция Tweaks: ЛОКАЦИЯ ВНЕ ПЛАШКИ. Контейнер теряет фон/кант/паддинг, а
   «плашечный» вид (фон + кант + паддинг) переезжает на сетку характеристик.
   Блок «где построен» остаётся выше — прямо на фоне секции, без подложки. */
.built-specs--loc-out {
  background-color: transparent;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2.8rem;
}
.built-specs--loc-out .built-specs__loc {
  padding-bottom: 0;
  border-bottom: none;
}
.built-specs--loc-out .built-specs__grid {
  margin: 0;
  border: 0.1rem solid var(--brand-main-low);
  background-color: var(--built-surface);
  padding: 0.8rem 3.2rem;
}
@media (max-width: 575px) {
  .built-specs--loc-out .built-specs__grid { padding: 0.4rem 2rem; }
}

/* Локация — типографикой (без иконки-пина): моно-капс микро-лейбл (как все
   подписи бренда) + адрес в Inter. Полностью по типо-шкале, без своих SVG. */
.built-specs__loc {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.2rem;
  padding-bottom: 2.4rem;
  /* Разделитель локации = тот же «сильный» line, что и у блока цены
     (срок/стоимость/дата) — единое отделение по плашке, не бледный hairline. */
  border-bottom: 0.1rem solid var(--built-line-strong);
}
.built-specs__loc-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-main-mid);
}
.built-specs__loc-icon svg {
  display: block;
  width: 2rem;
  height: 2rem;
  stroke: currentColor;
  transform: scale(1.19);
  transform-origin: center;
}
/* Иконка локации — 2 стиля через Tweaks: контур (Tabler, по умолчанию) и
   ПИКСЕЛЬНАЯ (в стиле лупы из строки поиска хаба /voprosy/ — те же 2px-блоки,
   ступенчатый контур, заливка currentColor). Пиксельную не масштабируем
   (она заполняет 24-сетку как глифы), контурную оставляем со scale(1.19). */
.built-specs__loc-icon .built-specs__loc-svg--pixel {
  display: none;
  stroke: none;
  transform: none;
}
.built-specs__loc-icon .built-specs__loc-svg--pixel path { fill: currentColor; }
.built-specs--loc-pixel .built-specs__loc-icon .built-specs__loc-svg--line { display: none; }
.built-specs--loc-pixel .built-specs__loc-icon .built-specs__loc-svg--pixel { display: block; }
.built-specs__loc-text {
  display: flex;
  flex-direction: column;
  /* Тот же «воздух» подпись→значение, что и в блоке цены (срок/стоимость). */
  gap: 1.2rem;
}
.built-specs__loc-label {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  line-height: 100%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-main-mid);
}
.built-specs__loc-value {
  font-family: var(--font-sans);
  font-size: 1.8rem;
  line-height: 120%;
  letter-spacing: -0.02em;
  color: var(--brand-main-base);
}

/* =========================================================
   Локация — отделение от блоков ниже.
   Зафиксировано: «Линия» (hairline-разделитель, база .built-specs__loc).
   Прочие варианты (шапки / две плашки) убраны.
   ========================================================= */

/* Характеристики — ТАБЛИЦА (единственная раскладка; «плитки» убраны).
   2 варианта через Tweaks: с иконками (база) и без (.built-specs--no-icons). */
.built-specs__grid {
  margin: 2.4rem 0 0;
  padding: 0;
  list-style: none;
  display: block;
}

.built-spec {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 1.2rem;
  padding: 1.6rem 0;
  border-bottom: 0.1rem solid var(--brand-main-low);
}
.built-spec:last-child { border-bottom: none; }

/* Иконки: шрифтовые fontello-глифы (icon-floor/square/size/house) +
   inline-SVG (санузел/срок — Tabler bath / calendar-week). */
.built-spec__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-main-mid);
  font-size: 2rem;
  line-height: 1;
}
.built-spec__icon::before { line-height: 1; }
/* inline-SVG рендерится 1:1 со шрифтовыми глифами (тот же размер и цвет). */
.built-spec__icon svg {
  display: block;
  width: 2rem;
  height: 2rem;
  stroke: currentColor;
  /* Глифы шрифта заполняют ~99.5% кегля, а Tabler-SVG — ~83.5% своей 24-сетки.
     Масштабируем рисунок до размера глифов (бокс не трогаем → раскладка стабильна). */
  transform: scale(1.19);
  transform-origin: center;
}
.built-spec__label {
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: 1.8rem;
  line-height: 120%;
  letter-spacing: -0.02em;
  color: var(--brand-main-base);
}
.built-spec__value {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 2rem;
  line-height: 100%;
  font-weight: 500;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-align: right;
  color: var(--brand-main-base);
}
@media (max-width: 575px) { .built-spec__value { font-size: 1.8rem; } }

/* Вариант «без иконок» — прячем иконку, подпись встаёт к левому краю. */
.built-specs--no-icons .built-spec__icon { display: none; }
/* Иконку локации тумблер тоже скрывает (консистентно со строками таблицы). */
.built-specs--no-icons .built-specs__loc-icon { display: none; }
/* Опция Tweaks: скрыть только иконку-пин локации (независимо от иконок строк).
   Flex-gap схлопывается сам — текст «где построен» встаёт к левому краю. */
.built-specs--loc-noicon .built-specs__loc-icon { display: none; }

/* Вариант Tweaks: ИКОНКА + АДРЕС без подписи. Контурная иконка локации идёт
   сразу перед адресом. Микро-лейбл «Где построен» не удаляем, а превращаем
   в подсказку над иконкой (всплывает при наведении). Иконка — по верхней
   границе текста. Иконку показываем принудительно, всегда контурную. */
.built-specs--loc-inline .built-specs__loc {
  position: relative;
  align-items: flex-start;
}
.built-specs--loc-inline .built-specs__loc-icon {
  display: inline-flex !important;
  margin-top: 0.1rem;
}
.built-specs--loc-inline .built-specs__loc-icon .built-specs__loc-svg--line { display: block; }
.built-specs--loc-inline .built-specs__loc-icon .built-specs__loc-svg--pixel { display: none; }
/* Подпись → подсказка над иконкой (тот же стиль, что у сетки иконок;
   левый край плашки = правый край иконки-пина 2rem). */
.built-specs--loc-inline .built-specs__loc-label {
  display: block;
  position: absolute;
  left: 2rem;
  bottom: calc(100% + 0.8rem);
  z-index: 6;
  white-space: nowrap;
  padding: 0.7rem 1rem;
  background-color: var(--brand-main-base);
  color: var(--white-base);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 100%;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.built-specs--loc-inline .built-specs__loc-label::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 1.4rem;
  border: 0.5rem solid transparent;
  border-top-color: var(--brand-main-base);
}
.built-specs--loc-inline .built-specs__loc-icon:hover ~ .built-specs__loc-text .built-specs__loc-label,
.built-specs--loc-inline .built-specs__loc-icon:focus-visible ~ .built-specs__loc-text .built-specs__loc-label,
.built-specs--loc-inline .built-specs__loc.is-tip .built-specs__loc-label {
  opacity: 1;
  visibility: visible;
}
/* Тап-цель локации (иконка+адрес): по нажатию раскрыть подпись «Где построен». */
.built-specs--loc-inline .built-specs__loc { cursor: pointer; }

/* Вариант «шрифты наоборот» (без иконок + инверсия типографики):
   подпись-заголовок → Roboto Mono (как лейблы бренда), значение → Inter. */
.built-specs--swap .built-spec__label {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: -0.04em;
  /* Метка-заголовок строки. По токену мелких капс-заголовков системы
     (point-item «ваши выгоды», equipment): Inter 600 + КАПС + тёмный цвет —
     контраст держат вес и капс, как в ипотеке/комплектациях. */
  font-weight: 600;
  color: var(--brand-main-base);
}
.built-specs--swap .built-spec__value {
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: -0.02em;
  /* Значение — описание → Inter regular 400 + приглушённый тон (как body/caption). */
  font-weight: 400;
  color: var(--brand-main-mid);
}

/* Вариант «СЕТКА ИКОНОК» (как на старом дизайне карточки проекта на сайте):
   иконка + значение в несколько колонок, подпись прячется и всплывает
   подсказкой при наведении. Включается Tweaks-классом .built-specs--icons-grid
   (взаимоисключим с --no-icons/--swap — их JS снимает). */
.built-specs--icons-grid .built-specs__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 3.2rem;
  row-gap: 3.6rem;
  margin-top: 2.4rem;
}
/* Когда сетка иконок лежит в плашке (локация вынесена) — даём симметричный
   внутренний воздух, иначе верх/низ прижаты к канту, а row-gap большой. */
.built-specs--loc-out.built-specs--icons-grid .built-specs__grid {
  padding: 2.8rem 3.2rem;
}
/* В раскладке «галерея на пол-экрана» правая колонка шире — логичнее 3 в ряд. */
.built-hero--half .built-specs--icons-grid .built-specs__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 575px) {
  .built-specs--icons-grid .built-specs__grid,
  .built-hero--half .built-specs--icons-grid .built-specs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 3rem;
  }
  .built-specs--loc-out.built-specs--icons-grid .built-specs__grid {
    padding: 2.4rem 2rem;
  }
}
.built-specs--icons-grid .built-spec {
  position: relative;
  padding: 0;
  border-bottom: none;
  gap: 1.2rem;
  /* Тап-цель: на тач подпись раскрывается по нажатию (класс .is-tip вешает
     page-local JS) — курсор-указатель даёт аффорданс и на десктопе. */
  cursor: pointer;
}
/* Иконки в этом варианте — показываем (база их рисует, --no-icons снят). */
.built-specs--icons-grid .built-spec__icon { display: inline-flex; }
/* Подпись становится всплывающей подсказкой над строкой.
   Левый край плашки = ПРАВЫЙ край иконки (2rem) — единое правило
   для всех подсказок страницы (финальная правка владельца 2026-07-09;
   промежуточные «от края ячейки» и «от центра иконки» отклонены). */
.built-specs--icons-grid .built-spec__label {
  position: absolute;
  left: 2rem;
  bottom: calc(100% + 0.8rem);
  z-index: 6;
  white-space: nowrap;
  padding: 0.7rem 1rem;
  background-color: var(--brand-main-base);
  color: var(--white-base);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 100%;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
/* Хвостик-треугольник подсказки. */
.built-specs--icons-grid .built-spec__label::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 1.4rem;
  border: 0.5rem solid transparent;
  border-top-color: var(--brand-main-base);
}
.built-specs--icons-grid .built-spec:hover .built-spec__label,
.built-specs--icons-grid .built-spec:focus-within .built-spec__label,
.built-specs--icons-grid .built-spec.is-tip .built-spec__label {
  opacity: 1;
  visibility: visible;
}
/* Значение — у иконки, без выноса вправо. Шрифт — Inter (описательный),
   а не Roboto Mono: слова вроде «Полуторный» в моно читаются как заголовок. */
.built-specs--icons-grid .built-spec__value {
  margin-left: 0;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 1.8rem;
  line-height: 120%;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--brand-main-base);
}

/* ---- Карточка/полоса цены ---- */
.built-price {
  border: 0.1rem solid var(--brand-main-low);
  background-color: var(--brand-second-base);
  padding: 3.2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  height: 100%;
}
@media (max-width: 575px) { .built-price { padding: 2.4rem 2rem; } }

.built-price__label {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  line-height: 100%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-main-mid);
}
.built-price__value {
  font-family: var(--font-mono);
  font-size: 2.4rem;
  line-height: 100%;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--brand-main-base);
  white-space: nowrap;
}

.built-price__note {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  line-height: 135%;
  letter-spacing: -0.02em;
  color: var(--brand-main-mid);
  margin: 0.4rem 0 0;
}
.built-price__cta {
  margin-top: 2rem;
}
/* Вариант CTA «Скос + стрелка» (.primary-btn) в карточке — на всю ширину блока.
   align-self:stretch (а не width:100%), чтобы боковые margin'ы не давали overflow. */
.built-price__cta.primary-btn { width: auto; min-width: 0; align-self: stretch; }

/* below: цена становится горизонтальной полосой. */
.built-layout--below .built-price {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem 3.2rem;
}
.built-layout--below .built-price__label {
  order: 1;
  width: 100%;
}
.built-layout--below .built-price__value { order: 2; }
.built-layout--below .built-price__note { order: 3; flex: 1 1 24rem; margin: 0; }
.built-layout--below .built-price__cta { order: 4; margin-top: 0; width: auto; margin-left: auto; }
@media (max-width: 575px) {
  .built-layout--below .built-price__cta { margin-left: 0; }
}

/* =========================================================
   Стоимость и срок — ЕДИНЫЙ вариант: отдельная карточка
   .built-price = срок + цена + note + CTA. Срок и стоимость
   убраны из таблицы характеристик и живут только в карточке.
   ========================================================= */
/* Блоки «Срок строительства» и «Стоимость дома» — две параллельные строки
   (подпись слева / значение справа), под парой — разделитель перед note. */
.built-price__term,
.built-price__cost,
.built-price__date {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  width: 100%;
}
.built-price__cost {
  padding-bottom: 1.8rem;
  margin-bottom: 0.4rem;
  border-bottom: 0.1rem solid var(--brand-main-low);
}
.built-price__term-label {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  line-height: 100%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-main-mid);
}
.built-price__term-value {
  font-family: var(--font-mono);
  font-size: 2.4rem;
  line-height: 100%;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--brand-main-base);
  white-space: nowrap;
}

/* Обёртка пары строк (нужна для раскладок-плиток). */
.built-price__rows {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 100%;
}

/* =========================================================
   Карточка «Срок + цена» — варианты отображения (Tweaks)
   База (.built-price без модификатора) = «Строки» (светлая).
   Модификаторы переключаются панелью Tweaks по #built-price.
   ========================================================= */

/* — Вариант · Цена крупно — тёплый песочный фон отделяет от кремовых плашек,
   срок строкой сверху, стоимость — крупный «герой». */
#built-price.built-price--hero {
  background-color: var(--brand-second-mid);
  border-color: color-mix(in srgb, var(--brand-main-base) 15%, transparent);
}
.built-price--hero .built-price__term {
  padding-bottom: 1.4rem;
  margin-bottom: 0.6rem;
  border-bottom: 0.1rem solid var(--brand-main-low);
}
.built-price--hero .built-price__cost {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.built-price--hero .built-price__value {
  font-size: 4.6rem;
  letter-spacing: -0.04em;
}
@media (max-width: 1200px) { .built-price--hero .built-price__value { font-size: 3.8rem; } }
@media (max-width: 575px) { .built-price--hero .built-price__value { font-size: 3.4rem; } }

/* — Вариант · Шапка — светлая полоса-шапка во всю ширину карточки:
   срок | стоимость двумя колонками сверху (разделяются линиями), ниже — note + CTA. */
#built-price.built-price--header {
  background-color: var(--built-surface);
  border-color: var(--brand-main-low);
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.built-price--header .built-price__rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background-color: var(--built-surface);
  border-bottom: 0.1rem solid var(--built-line-strong);
}
.built-price--header .built-price__term,
.built-price--header .built-price__cost,
.built-price--header .built-price__date {
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 3.2rem;
  margin: 0;
  border: none;
}
.built-price--header .built-price__term { border-right: 0.1rem solid var(--built-line-strong); }
/* Опция Tweaks: 3-й пункт «Дата постройки» (опционально). Скрыт по умолчанию;
   при включении строки становятся тремя колонками, между «стоимостью» и
   «датой» — такой же вертикальный разделитель. Значения чуть мельче, чтобы
   три колонки помещались. */
.built-price__date { display: none; }
.built-price--with-date .built-price__date { display: flex; }
.built-price--header.built-price--with-date .built-price__rows { grid-template-columns: 1fr 1fr 1fr; }
.built-price--header.built-price--with-date .built-price__cost { border-right: 0.1rem solid var(--built-line-strong); }
.built-price--header.built-price--with-date.built-price--no-lines .built-price__cost { border-right: none; }
.built-price--with-date .built-price__term-value,
.built-price--with-date .built-price__value { font-size: 2rem; }
@media (max-width: 575px) {
  .built-price--header.built-price--with-date .built-price__rows { grid-template-columns: 1fr; }
  /* Срок / стоимость / дата идут друг под другом БЕЗ внутренних разделителей —
     дату отдельной линией не отделяем (правка владельца 2026-07-09). Единственный
     разделитель — шов после характеристик (::after у .built-price__rows в merge). */
  .built-price--header.built-price--with-date .built-price__cost {
    border-right: none;
    border-bottom: none;
  }
}
/* Опция Tweaks: версия без внутренних разделителей (вертикального и горизонтального). */
.built-price--header.built-price--no-lines .built-price__rows { border-bottom: none; }
.built-price--header.built-price--no-lines .built-price__term { border-right: none; border-bottom: none; }
.built-price--header .built-price__note { margin: 3.2rem 3.2rem 0; }
.built-price--header .built-price__cta { margin: 2rem 3.2rem 3.2rem; }

/* Опция Tweaks: CTA вынесена ИЗ плашки — белый прямоугольник остаётся только
   под парой «срок | стоимость», а кнопка (и note) стоят ниже, на фоне блока. */
#built-price.built-price--header.built-price--cta-out {
  background-color: transparent;
  border: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  /* Воздух между плашкой «срок/стоимость», подписью и кнопкой. */
  gap: 3.2rem;
}
/* Строки срок/стоимость становятся самостоятельной плашкой → полный кант. */
#built-price.built-price--header.built-price--cta-out .built-price__rows {
  border: 0.1rem solid var(--brand-main-low);
}
.built-price--header.built-price--cta-out .built-price__note { margin: 0; }
.built-price--header.built-price--cta-out .built-price__cta { margin: 0; }

/* Опция Tweaks: пара «срок | стоимость» БЕЗ плашки — на пустом фоне секции.
   Снимаем фон/кант с .built-price__rows и убираем внутренние паддинги ячеек,
   чтобы значения встали по левому краю колонки (как остальной контент). */
#built-price.built-price--header.built-price--rows-bare .built-price__rows {
  background-color: transparent;
  border: none;
}
.built-price--header.built-price--rows-bare .built-price__term,
.built-price--header.built-price--rows-bare .built-price__cost,
.built-price--header.built-price--rows-bare .built-price__date {
  padding: 0;
}
.built-price--header.built-price--rows-bare .built-price__cost { padding-left: 3.2rem; }

/* Опция Tweaks: «Срок + цена в плашке» — пара срок/стоимость прирастает снизу
   к плашке характеристик единым блоком, отделяясь только тонкой линией
   (как разделитель локации). Рассчитано на локацию вне плашки (locOut). */
.built-layout--merge { gap: 0; }
/* Плашка характеристик теряет нижний кант — визуально продолжается строками цены. */
.built-layout--merge .built-specs--loc-out .built-specs__grid {
  border-bottom: none;
}
/* В СЛИТОЙ плашке (merge) разделитель локации «Где построен» идёт ПО ШИРИНЕ
   КОНТЕНТА — инсет по внутреннему паддингу плашки (как разделители строк
   характеристик), а не заподлицо с её краями. Базовый .built-specs__loc уже
   без горизонтальных полей, поэтому в merge ничего не растягиваем. */
.built-layout--merge .built-specs:not(.built-specs--loc-out) .built-specs__loc {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  /* Больше воздуха между блоками плашки (локация → характеристики → срок/цена). */
  padding-bottom: 4rem;
}
@media (max-width: 575px) {
  .built-layout--merge .built-specs:not(.built-specs--loc-out) .built-specs__loc { padding-bottom: 2.8rem; }
}
/* Шов между характеристиками и строками срок/цена — тоже ПО ШИРИНЕ КОНТЕНТА,
   как разделитель локации: убираем сплошные канты обеих плашек на стыке
   (низ плашки характеристик + верх плашки цены) — они сливаются в единый
   контур, — и рисуем инсет-линию на ::after строк цены. */
.built-layout--merge .built-specs:not(.built-specs--loc-out) { border-bottom: none; padding-bottom: 4rem; }
/* Сетка характеристик — одинаковый воздух сверху и снизу от линий: верхний
   зазор (от разделителя локации) равен нижнему (паддинг низа плашки
   до шва срок/цена). На десктопе 4rem, на мобиле 2.8rem. */
.built-layout--merge .built-specs:not(.built-specs--loc-out) .built-specs__grid { margin-top: 4rem; }
@media (max-width: 575px) {
  .built-layout--merge .built-specs:not(.built-specs--loc-out) { padding-bottom: 2.8rem; }
  .built-layout--merge .built-specs:not(.built-specs--loc-out) .built-specs__grid { margin-top: 2.8rem; }
}
.built-layout--merge #built-price .built-price__rows::after {
  content: "";
  position: absolute;
  top: 0;
  left: 3.2rem;
  right: 3.2rem;
  border-top: 0.1rem solid var(--built-line-strong);
  pointer-events: none;
}
@media (max-width: 575px) {
  .built-layout--merge #built-price .built-price__rows::after { left: 2rem; right: 2rem; }
}
/* Строки срок/цена: тот же фон и кант, что у плашки; сверху — разделитель-линия.
   !important перекрывает rows-bare/cta-out независимо от их состояния. */
.built-layout--merge #built-price .built-price__rows {
  position: relative;
  z-index: 0;
  background-color: transparent !important;
  border: none !important;
  margin: 0 !important;
}
/* Поверхность + кант + фирменный скос (BR) рисуем на ::before, чтобы clip-path
   НЕ обрезал всплывающие подсказки иконок (они уходят выше плашки). */
.built-layout--merge #built-price .built-price__rows::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--built-surface);
  border: 0.1rem solid var(--brand-main-low);
  border-top: 0;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--chamfer-lg)),
    calc(100% - var(--chamfer-lg)) 100%,
    0 100%
  );
  pointer-events: none;
}
/* Возвращаем внутренние паддинги ячеек (rows-bare их обнулял) и выравниваем
   КОЛОНКИ цены ПОД колонки сетки иконок: тот же инсет контейнера (3.2rem) и тот
   же межколоночный зазор (3.2rem), а горизонтальный паддинг ячеек обнуляем —
   иначе колонки иконок и колонки срок/цена/дата стоят на разных вертикалях. */
.built-layout--merge #built-price .built-price__rows {
  padding: 0 3.2rem !important;
  column-gap: 3.2rem;
}
.built-layout--merge #built-price .built-price__term,
.built-layout--merge #built-price .built-price__cost,
.built-layout--merge #built-price .built-price__date {
  padding: 4rem 0 !important;
}
@media (max-width: 575px) {
  .built-layout--merge #built-price .built-price__term,
  .built-layout--merge #built-price .built-price__cost,
  .built-layout--merge #built-price .built-price__date {
    padding: 2.8rem 0 !important;
  }
}
/* Число колонок сетки иконок в слитом блоке СЛЕДУЕТ за числом колонок
   срок/цена/дата (а не за шириной галереи): без даты — 2 колонки (как
   срок|стоимость), с датой — 3. Так вертикали иконок и блоков цены совпадают
   при любой ширине галереи. */
.built-layout--merge .built-specs--icons-grid .built-specs__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.built-layout--merge:has(.built-price--with-date) .built-specs--icons-grid .built-specs__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* На телефоне 3 колонки не влезают (иконка+значение наезжают друг на друга) —
   форсим 2 тезиса в ряд независимо от числа колонок цены (правка владельца
   2026-07-09). Десктоп/планшет остаются 3-колоночными (выровнены со срок|цена|дата). */
@media (max-width: 575px) {
  .built-layout--merge:has(.built-price--with-date) .built-specs--icons-grid .built-specs__grid,
  .built-layout--merge .built-specs--icons-grid .built-specs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 3rem;
  }
}

/* ---- Опция Tweaks: ИКОНКИ в блоке срок/цена/дата ----
   Контурная иконка (часы/деньги/календарь) + значение в строку, подпись
   всплывает подсказкой при наведении — как «сетка иконок» характеристик.
   Иконки по умолчанию скрыты, включаются классом .built-price--icons. */
.built-price__icon { display: none; }
.built-price--icons .built-price__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--brand-main-mid);
}
.built-price--icons .built-price__icon svg {
  display: block;
  width: 2.2rem;
  height: 2.2rem;
}
/* Ячейки — иконка + значение в строку (вместо колонки подпись/значение). */
.built-price--icons.built-price--header .built-price__term,
.built-price--icons.built-price--header .built-price__cost,
.built-price--icons.built-price--header .built-price__date {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 1.2rem;
  position: relative;
  /* Тап-цель: подпись (срок/стоимость/дата) раскрывается по нажатию на тач. */
  cursor: pointer;
}
/* Подпись → всплывающая подсказка над СТРОКОЙ иконка+значение (не над ячейкой:
   у ячейки паддинг 3.2rem, и якорь bottom:100% уносил подсказку на ~4rem выше
   строки — баг, пойман владельцем 2026-07-09). Контент ячейки центрирован
   (align-items:center, паддинг симметричный) → якорим от вертикального центра:
   50% + полвысоты строки (~1.3rem) + зазор 0.8rem, как у «сетки иконок». */
.built-price--icons .built-price__term-label,
.built-price--icons .built-price__label {
  position: absolute;
  /* Горизонталь — от ПРАВОГО края иконки (паддинг ячейки 3.2rem + svg 2.2rem);
     в merge-раскладке паддинга нет — оверрайд ниже (left: 2.2rem). */
  left: 5.4rem;
  bottom: calc(50% + 2.1rem);
  z-index: 6;
  white-space: nowrap;
  padding: 0.7rem 1rem;
  background-color: var(--brand-main-base);
  color: var(--white-base);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 100%;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
/* В merge-раскладке горизонтальные отступы несёт .built-price__rows, иконка
   стоит у левого края ячейки → левый край плашки = ПРАВЫЙ край иконки
   (svg 2.2rem), едино с подсказками характеристик выше. */
.built-layout--merge #built-price .built-price__term-label,
.built-layout--merge #built-price .built-price__label { left: 2.2rem; }

.built-price--icons .built-price__term-label::after,
.built-price--icons .built-price__label::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 1.4rem;
  border: 0.5rem solid transparent;
  border-top-color: var(--brand-main-base);
}
.built-price--icons .built-price__term:hover .built-price__term-label,
.built-price--icons .built-price__cost:hover .built-price__label,
.built-price--icons .built-price__date:hover .built-price__term-label,
.built-price--icons .built-price__term:focus-within .built-price__term-label,
.built-price--icons .built-price__cost:focus-within .built-price__label,
.built-price--icons .built-price__date:focus-within .built-price__term-label,
.built-price--icons .built-price__term.is-tip .built-price__term-label,
.built-price--icons .built-price__cost.is-tip .built-price__label,
.built-price--icons .built-price__date.is-tip .built-price__term-label {
  opacity: 1;
  visibility: visible;
}
/* Шрифт значений — как в «сетке иконок» характеристик: Inter 1.8rem/400,
   описательный (а не моно-цифры). */
.built-price--icons .built-price__term-value,
.built-price--icons .built-price__value {
  font-family: var(--font-sans);
  font-size: 1.8rem;
  line-height: 120%;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--brand-main-base);
}

/* ---- Опция Tweaks: шрифт всплывающих подсказок-плашек ----
   .built-layout--tips-sans (вешается на #built-layout) переводит ВСЕ подсказки
   первого экрана (сетка иконок характеристик, локация, срок/цена/дата) с моно
   на обычный Inter; КАПС сохраняем (просьба владельца 2026-07-09). Скоуплено
   на тултип-режимы, чтобы не задеть видимые подписи в режиме «Список». */
.built-layout--tips-sans .built-specs--icons-grid .built-spec__label,
.built-layout--tips-sans .built-specs--loc-inline .built-specs__loc-label,
.built-layout--tips-sans .built-price--icons .built-price__term-label,
.built-layout--tips-sans .built-price--icons .built-price__label {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
@media (max-width: 575px) {
  /* Цена на мобиле — в ДВА столбца (как характеристики выше): срок | стоимость,
     дата — во втором ряду (правка владельца 2026-07-09; заменяет прежнюю стопку
     в 1 колонку). Вертикальный ритм даёт row-gap, а не паддинг ячеек (выровнено
     с сеткой характеристик: column-gap 2rem / row-gap 3rem). */
  .built-layout--merge #built-price .built-price__rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 3rem;
    padding: 2.8rem 2rem !important;
  }
  .built-layout--merge #built-price .built-price__term,
  .built-layout--merge #built-price .built-price__cost,
  .built-layout--merge #built-price .built-price__date {
    padding: 0 !important;
  }
}
@media (max-width: 575px) {
  .built-price--header.built-price--rows-bare .built-price__cost { padding-left: 2.4rem; }
}
@media (max-width: 575px) {
  .built-price--header .built-price__term,
  .built-price--header .built-price__cost { padding: 2.4rem; }
  .built-price--header .built-price__note { margin: 2.4rem 2.4rem 0; }
  .built-price--header .built-price__cta { margin: 1.6rem 2.4rem 2.4rem; }
}
@media (max-width: 575px) {
  .built-price--header .built-price__rows { grid-template-columns: 1fr; }
  .built-price--header .built-price__term {
    border-right: none;
    border-bottom: 0.1rem solid var(--built-line-strong);
  }
}

/* =========================================================
   «ВЫПОЛНЕНЫ СЛЕДУЮЩИЕ РАБОТЫ» + застиканная карточка проекта
   ---------------------------------------------------------
   Слева — текст работ (3 вида списка: --ticks / --numbered /
   --columns, переключаются Tweaks). Справа — карточка «Дом
   построен по проекту» на брендовой направляющей, sticky при
   скролле. Маркеры списка только НЕЙТРАЛЬНЫЕ (глиф-галочка /
   моно-номер / тире), без жёлтого: акцент по бренду живёт
   единственный раз — на CTA-квадрате.
   ========================================================= */
.built-works {
  margin-top: 8rem;
  padding-bottom: 2rem;
}
@media (max-width: 992px) { .built-works { margin-top: 6rem; } }

.built-works__title {
  /* По ширине текстовой колонки ниже: контейнер минус карточка (41.4rem) и gap. */
  max-width: calc(100% - 47.4rem);
  margin: 0 0 3.2rem;
}
@media (max-width: 1200px) { .built-works__title { max-width: calc(100% - 45.4rem); } }
@media (max-width: 992px) { .built-works__title { max-width: 100%; margin-bottom: 2.4rem; } }

/* Сетка: работы (1fr) + карточка проекта на направляющей (sticky). */
.built-works__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 41.4rem);
  gap: 1.2rem 6rem;
  align-items: start;
}
@media (max-width: 1200px) { .built-works__grid { gap: 1.2rem 4rem; } }
@media (max-width: 992px) {
  .built-works__grid { grid-template-columns: minmax(0, 1fr); gap: 4rem; }
}

.built-works__main { min-width: 0; }

/* ---- Светлая плашка под блоком работ (опция Tweaks) ----
   Бренд: тёплый off-white или белый, ОСТРЫЕ углы, hairline-кант
   вместо тени. Паддинг появляется только в режиме плашки. */
.built-works__main--surface {
  padding: 4rem;
  border: 0.1rem solid var(--brand-main-low);
  background-color: var(--built-surface-soft); /* выведен из --bg-color → к белому (на тон светлее фона) */
}
@media (max-width: 575px) {
  .built-works__main--surface { padding: 2.8rem 2rem; }
}

.built-works__lead {
  margin: 0 0 3.2rem;
  font-family: var(--font-sans);
  font-size: 2rem;
  line-height: 140%;
  letter-spacing: -0.02em;
  color: var(--brand-main-base);
}
.built-works__lead b { font-weight: 600; }

/* ---- Список работ: общая база ---- */
.built-works__list { margin: 0; padding: 0; list-style: none; }
.built-works__list li {
  font-family: var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--brand-main-mid);
}
.built-works__txt { display: block; min-width: 0; }
/* Выделение в строках — только вес, без затемнения цвета: иначе bold ложится
   тёмным цветом ПОВЕРХ жирного начертания и читается «слишком чёрным».
   Цвет наследуется от текста строки (--brand-main-mid). */
.built-works__list li b { font-weight: 600; }
.built-works__list li .sub {
  display: block;
  margin-top: 0.4rem;
  color: var(--brand-main-mid);
}
/* Каждый подпункт — отдельная строка с тире (как на боевом сайте),
   перенос внутри строки прижат к тексту, а не «слипается» с соседними. */
.built-works__list li .sub .sub-line {
  display: block;
  padding-left: 1.8rem;
  text-indent: -1.8rem;
}
.built-works__list li .sub .sub-line + .sub-line { margin-top: 0.3rem; }

/* ---- Вид 1 · Чек-лист: глиф-галочка + хайрлайн-строки ---- */
.built-works--ticks .built-works__list { display: flex; flex-direction: column; }
.built-works--ticks .built-works__list li {
  display: flex;
  align-items: flex-start;
  gap: 1.6rem;
  padding: 1.6rem 0;
  font-size: 1.7rem;
  line-height: 145%;
  border-bottom: 0.1rem solid var(--brand-main-low);
}
.built-works--ticks .built-works__list li:first-child { padding-top: 0; }
.built-works--ticks .built-works__list li:last-child { border-bottom: none; }
.built-works--ticks .built-works__mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  margin-top: 0.3rem;
  font-family: "fontello";
  font-size: 1.4rem;
  line-height: 1;
  color: var(--brand-main-mid);
}
.built-works--ticks .built-works__mark::before { content: "\e806"; }

/* ---- Вид 2 · Нумерованный: моно-номер в бежевом квадрате ---- */
.built-works--numbered .built-works__list {
  display: flex;
  flex-direction: column;
  counter-reset: built-works;
}
.built-works--numbered .built-works__list li {
  display: flex;
  align-items: flex-start;
  gap: 2.4rem;
  padding: 1.6rem 0;
  font-size: 1.7rem;
  line-height: 150%;
  border-bottom: 0.1rem solid var(--brand-main-low);
}
.built-works--numbered .built-works__list li:first-child { padding-top: 0; }
.built-works--numbered .built-works__list li:last-child { border-bottom: none; }
.built-works--numbered .built-works__mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin-top: 0.2rem;
  padding: 0.4rem 0.9rem;
  background-color: var(--brand-third-base);
  border: 0.1rem solid var(--brand-main-low);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--brand-main-base);
}
.built-works--numbered .built-works__mark::before {
  counter-increment: built-works;
  content: counter(built-works, decimal);
}

/* ---- Вид 3 · Колонки: компактно, две колонки, нейтральное тире ---- */
.built-works--columns .built-works__list { columns: 2; column-gap: 4rem; }
.built-works--columns .built-works__list li {
  break-inside: avoid;
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.2rem 0;
  font-size: 1.6rem;
  line-height: 140%;
  border-bottom: 0.1rem solid var(--brand-main-low);
}
.built-works--columns .built-works__mark {
  flex: 0 0 auto;
  width: 1.2rem;
  height: 0.2rem;
  margin-top: 1rem;
  background-color: var(--brand-main-mid);
}
@media (max-width: 992px) { .built-works--columns .built-works__list { columns: 1; } }

/* ---- Срок + итоговая стоимость (под списком, в левой колонке) ---- */
.built-works__dates {
  margin: 2.8rem 0 0;
  font-family: var(--font-sans);
  font-size: 1.7rem;
  line-height: 145%;
  letter-spacing: -0.02em;
  color: var(--brand-main-mid);
}
.built-works__dates b { font-weight: 600; }

/* Итоговая стоимость — строка с хайрлайн-разделителем: бренд = границы. */
.built-works__cost {
  margin-top: 2.4rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.6rem;
  padding-top: 2rem;
  border-top: 0.1rem solid var(--brand-main-low);
}
.built-works__cost-label {
  font-family: var(--font-sans);
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: var(--brand-main-mid);
}
.built-works__cost-value {
  font-family: var(--font-mono);
  font-size: 2.8rem;
  line-height: 100%;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--brand-main-base);
}
@media (max-width: 575px) { .built-works__cost-value { font-size: 2.2rem; } }

/* ---- Карточка «Дом построен по проекту» — sticky-aside справа ----
   Колонка тянется на всю высоту строки, карточка липнет к верху.
   (Была ещё белая фоновая фигура бренда .built-works__ornament внизу
   колонки — УДАЛЕНА 2026-07-09 по решению владельца, не воссоздавать.) */
.built-works__aside {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.built-works__aside-top {
  position: sticky;
  top: 10rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
@media (max-width: 992px) {
  .built-works__aside { align-self: start; display: block; }
  .built-works__aside-top { position: static; top: auto; gap: 1.6rem; }
}
/* Подпись над карточкой — как подзаголовки карточек комплектаций
   на главной (.equipment-item .item-title): Inter 2rem / 600 / капс /
   −0.04em, на ≤992 — 1.8rem (правка владельца 2026-07-09). */
.built-works__aside-label {
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--brand-main-base);
}
@media (max-width: 992px) { .built-works__aside-label { font-size: 1.8rem; } }
.built-works__project { width: 100%; }
@media (max-width: 992px) { .built-works__project { max-width: 41.4rem; } }
@media (max-width: 575px) { .built-works__project { max-width: 100%; } }

/* =========================================================
   ЗАПИСЬ ОНЛАЙН-ТРАНСЛЯЦИИ СТРОЙКИ (built-stream) — НОВОЕ
   ---------------------------------------------------------
   ⚠ ПРОВЕНАНС: НОВОЕ (наши имена; на боевом dbrus.ru пока нет).
   Видео = готовый компонент player.css (постер + play + тайм-код).
   Фасад: по клику постер заменяется на <iframe> онлайн-камеры
   (embed-токен может «умирать» — постер остаётся при любом раскладе).
   ========================================================= */
.built-stream {
  margin-top: 8rem;
  padding-bottom: 10rem;
}
@media (max-width: 992px) { .built-stream { margin-top: 6rem; padding-bottom: 7rem; } }
@media (max-width: 575px) { .built-stream { padding-bottom: 5rem; } }

.built-stream__title {
  /* 120rem (было 92): заголовок «Таймлапс: как был построен…» ложился в 3 этажа —
     владелец 2026-07-16: «сделать пошире, чтобы две строчки влезло». */
  max-width: 120rem;
  margin: 0 0 3.2rem;
}
@media (max-width: 992px) { .built-stream__title { max-width: 100%; margin-bottom: 2.4rem; } }

.built-stream__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 44rem);
  gap: 1.2rem 6rem;
  align-items: start;
}
@media (max-width: 1200px) { .built-stream__layout { gap: 1.2rem 4rem; } }
@media (max-width: 992px) {
  .built-stream__layout { grid-template-columns: minmax(0, 1fr); gap: 2.8rem; }
}

/* Плеер: уголки и play даёт player.css. Соотношение под таймлапс с
   фикс-камеры — 16:9; лёгкое затемнение фото, чтобы play/тайм-код читались. */
.built-stream__player { width: 100%; }
.built-stream__player .video-poster { aspect-ratio: 16 / 9; cursor: pointer; }
.built-stream__player .video-poster__img { filter: brightness(0.82); }

/* Подгруженный <iframe> онлайн-камеры — занимает кадр целиком (16:9). */
.built-stream__embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--brand-main-base);
  overflow: hidden;
}
.built-stream__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Инфо-колонка: моно-надзаголовок + описание + ссылка на все эфиры. */
.built-stream__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
}
/* Надзаголовок — тот же стиль, что у подписи «Дом построен по проекту» =
   подзаголовки карточек комплектаций на главной (.equipment-item .item-title):
   Inter 2rem / 600 / капс / −0.04em (правка владельца 2026-07-09). */
.built-stream__eyebrow {
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--brand-main-base);
}
@media (max-width: 992px) { .built-stream__eyebrow { font-size: 1.8rem; } }
.built-stream__text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.8rem;
  line-height: 145%;
  letter-spacing: -0.02em;
  color: var(--brand-main-base);
}
@media (max-width: 575px) { .built-stream__text { font-size: 1.7rem; } }

/* Ссылка «все записи» = .consult-btn (БОЕВОЕ имя, link-block.css — паттерн
   «Нужна помощь?» со страницы маткапитала): капс-подпись + квадрат стрелки
   3.2rem на персике, жёлтый только на ховере. Отступ сверху сохраняем прежний
   (перебиваем margin-top 2.4rem консалт-кнопки: gap 1.6rem + 0.8rem = как было). */
.built-stream__cta { margin-top: 0.8rem; }

/* ---------------------------------------------------------
   ВИД БЛОКА — варианты (Tweaks «Таймлапс стройки → Вид блока») — НОВОЕ
   Дефолт «Строка» = базовые стили выше. Модификаторы на секции:
     .built-stream--meta    — «мета-слева»: узкая мета-колонка 30rem слева
                              (паттерн video-reviews), крупный плеер справа
     .built-stream--plate   — «плашка»: секция на тёплой поверхности
                              (--built-surface-soft, как built-works__main)
     .built-stream--corners — «рамка»: инфоколонка в рамке-уголках
                              (frame-corners вешает tweaks-JS; паттерн
                              link-block / certificate-link)
   ⚠ Отклонено владельцем 2026-07-09 — НЕ воссоздавать:
     «Тёмная плашка» (на тёмном фоне не делаем), «Кинокадр» (постер во
     всю ширину неудобен при просмотре видео), «Хроника» (вехи по дням
     требуют данных под каждый проект).
   --------------------------------------------------------- */

/* Уголки-спаны в инфоколонке (для варианта «Рамка») всегда вне
   flex-потока — иначе пустые спаны добавляют лишние gap-зазоры. */
.built-stream__info > .frame-corner-bl,
.built-stream__info > .frame-corner-br { position: absolute; }

/* ═══ Вариант «Мета-слева» (паттерн video-reviews) ═══ */
.built-stream--meta .built-stream__layout {
  grid-template-columns: 30rem minmax(0, 1fr);
  column-gap: 3rem;
}
.built-stream--meta .built-stream__info { order: 1; }
.built-stream--meta .built-stream__player { order: 2; }
/* Текст в узкой колонке — как лид мета-колонки видеообзоров. */
.built-stream--meta .built-stream__text {
  font-size: 1.6rem;
  line-height: 135%;
  letter-spacing: -0.01em;
  color: var(--brand-main-mid);
}
@media (max-width: 992px) {
  .built-stream--meta .built-stream__layout { grid-template-columns: minmax(0, 1fr); }
  .built-stream--meta .built-stream__player { order: 1; }
  .built-stream--meta .built-stream__info { order: 2; }
}

/* ═══ Вариант «Плашка» (тёплая поверхность, как блок «работы») ═══ */
.built-stream--plate {
  background-color: var(--built-surface-soft);
  padding: 5.6rem 6.4rem 6.4rem;
}
@media (max-width: 992px) { .built-stream--plate { padding: 4rem 3.2rem 4.8rem; } }
@media (max-width: 575px) { .built-stream--plate { padding: 3.2rem 2rem 4rem; } }
/* Ступенька-выноска над инфоколонкой — фирменная серая skew-линия
   −32° (как в stages / certificate-info). */
.built-stream--plate .built-stream__info { position: relative; padding-top: 2.4rem; }
.built-stream--plate .built-stream__info::before {
  content: "";
  position: absolute;
  top: 0;
  left: -0.5rem;
  width: calc(100% + 1.2rem);
  height: 1.3rem;
  border-top: 0.1rem solid var(--grey-low);
  border-left: 0.1rem solid var(--grey-low);
  transform: skewX(-32deg);
  pointer-events: none;
}

/* ═══ Вариант «Рамка» (инфоколонка в рамке-уголках) ═══
   Класс .frame-corners на .built-stream__info вешает tweaks-JS.
   Уголки — 1:1 с «Нужна помощь?» на Главной (link-block.css):
   0.8rem × 0.8rem, толщина 0.1rem, фирменный тёмный. (Промежуточная
   правка «жирнее 0.2rem» откачена 2026-07-09: владелец — «как на Главной».)
   Вертикальный ритм — 1:1 с link-block: заголовок → 6.5rem → текст →
   2.4rem → консалт-кнопка. */
.built-stream--corners .built-stream__info {
  --corner-size: 0.8rem;
  --corner-thickness: 0.1rem;
  --corner-color: var(--brand-main-base);
  gap: 0;
  padding: 2.4rem;
}
.built-stream--corners .built-stream__text { margin-top: 6.5rem; }
.built-stream--corners .built-stream__cta { margin-top: 2.4rem; }
/* Ховер: уголки «дышат» — плечи растут 0.8→1.6rem при ТОЙ ЖЕ толщине линии
   0.1rem (приём 1:1 со «Скобок» на странице онлайн-трансляций, lc-quality;
   владелец 2026-07-16). Транзишен — на width/height самих уголков. */
.built-stream--corners .built-stream__info::before,
.built-stream--corners .built-stream__info::after,
.built-stream--corners .built-stream__info > .frame-corner-bl,
.built-stream--corners .built-stream__info > .frame-corner-br { transition: width 0.3s ease, height 0.3s ease; }
.built-stream--corners .built-stream__info:hover { --corner-size: 1.6rem; }
@media (max-width: 575px) {
  .built-stream--corners .built-stream__text { margin-top: 4rem; }
}

/* =========================================================
   ЛАЙТБОКС
   ========================================================= */
.built-lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--brand-main-base) 92%, transparent);
  padding: 6rem 8rem;
}
.built-lightbox.is-open { display: flex; }
.built-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 0.1rem solid var(--white-low);
}
.built-lightbox__close,
.built-lightbox__nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white-base);
  color: var(--brand-main-base);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}
.built-lightbox__close {
  top: 2rem;
  right: 2rem;
  width: 4.8rem;
  height: 4.8rem;
  --chamfer: var(--chamfer-md);
  clip-path: polygon(
    var(--chamfer) 0, 100% 0,
    100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%,
    0 100%, 0 var(--chamfer)
  );
}
.built-lightbox__close::before {
  content: "\e801";
  font-family: "fontello";
  font-size: 1.8rem;
  line-height: 1;
}
/* Ховер — НЕ жёлтый: тот же тон, что у крестика блока куки
   (.cookie-settings__close:hover → --brand-second-base). */
.built-lightbox__close:hover { background-color: var(--brand-second-base); }

.built-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 5.6rem;
  height: 5.6rem;
  /* Полупрозрачные, пока не активны — меньше перекрывают фото (жалоба
     владельца 2026-07-09). На hover/focus — сплошные (жёлтый). */
  opacity: 0.5;
  transition: background-color 0.3s, opacity 0.3s;
  --chamfer: var(--chamfer-md);
  clip-path: polygon(
    var(--chamfer) 0, 100% 0,
    100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%,
    0 100%, 0 var(--chamfer)
  );
}
.built-lightbox__nav::before {
  content: "\e807";
  font-family: "fontello";
  font-size: 2rem;
  line-height: 1;
}
.built-lightbox__nav:hover,
.built-lightbox__nav:focus-visible { background-color: var(--yellow-base); opacity: 1; }
.built-lightbox__nav--prev { left: 2rem; transform: translateY(-50%) scale(-1, 1); }
.built-lightbox__nav--next { right: 2rem; }
.built-lightbox__counter {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: var(--white-base);
}
@media (max-width: 575px) {
  .built-lightbox { padding: 5rem 1.2rem; }
  .built-lightbox__nav { width: 4.4rem; height: 4.4rem; }
  .built-lightbox__nav--prev { left: 0.8rem; }
  .built-lightbox__nav--next { right: 0.8rem; }
  /* Крестик — мельче и прижат к правому краю фото (паддинг оверлея 1.2rem),
     а не висит крупным над чёрным полем (правка владельца). */
  .built-lightbox__close { width: 3.6rem; height: 3.6rem; top: 1.2rem; right: 1.2rem; }
  .built-lightbox__close::before { font-size: 1.5rem; }
}

/* =========================================================
   МОБИЛЬНЫЙ РАЗМЕР ПУНКТОВ первого экрана (правка владельца 2026-07-09)
   ---------------------------------------------------------
   Значения характеристик/цены/локации держали 1.8rem на ВСЕХ ширинах —
   мимо токен-шкалы. Приводим к токенам: на мобиле (≤992) значение-описание
   1.8 → 1.6rem (как .body-text--lg @992), иконки пропорционально мельче.
   Десктоп/планшет-широкий не трогаем (значения там 1.8rem как утверждено).
   ========================================================= */
@media (max-width: 992px) {
  .built-specs--icons-grid .built-spec__value,
  .built-price--icons .built-price__term-value,
  .built-price--icons .built-price__value,
  .built-specs__loc-value { font-size: 1.6rem; }
  /* Иконки мельче (сохраняя ~1.1 к тексту, как на десктопе). */
  .built-specs--icons-grid .built-spec__icon { font-size: 1.8rem; }
  .built-specs--icons-grid .built-spec__icon svg { width: 1.8rem; height: 1.8rem; }
  .built-specs__loc-icon svg { width: 1.8rem; height: 1.8rem; }
  .built-price--icons .built-price__icon svg { width: 2rem; height: 2rem; }
}