/* Сайт МАККО — среда «Тёмный цех», утверждена заказчиком 26.08.2026.
   Значения взяты из финального брендбука /brand/ один в один: палитра ролями,
   сетка, отступы, радиусы, длительности. Менять их здесь нельзя — сначала
   меняется брендбук, иначе документ и сайт разъезжаются.

   Палитра ролей (contrast-standard): у каждого тона одна роль. Латунь — только
   действие: кнопка, ссылка, активный пункт. Заливкой блока и фоном текста
   она не бывает никогда. У блока со своим фоном цвет текста объявляется рядом. */
:root{
  --bg:#171612;          /* Ночь — фон страницы */
  --surface:#201E19;     /* Блок — карточки и панели */
  --surface-2:#1C1A16;   /* зебра таблиц и вложенные плитки */
  --text:#F2EFE9;        /* Свет — основной текст */
  --muted:#A29C90;       /* Дым — подписи и пояснения */
  --accent:#C2A06A;      /* Латунь — кнопка и акцент */
  --accent-text:#171612; /* текст на латуни */
  --accent-hi:#D2B47F;   /* латунь при наведении */
  --accent-lo:#A98A57;   /* латунь нажатая */
  --line:#332F27;        /* Кромка — границы */
  --line-2:#4A4437;      /* граница поля ввода */
  --ok:#8FC79B;
  --no:#E6968B;

  --maxw:1120px;
  --gut:20px;
  --hdr-h:73px;          /* высота шапки: первый экран считает от неё */
  --section-y:40px;  /* мобильный ритм разделов; расширяется медиа-запросами ниже (min-width, mobile-first) */
  --r-s:9px; --r-m:10px; --r-c:14px; --r-l:20px;
  --t-fast:120ms; --t-mid:220ms; --t-slow:320ms;
}
/* Ритм разделов растёт с шириной экрана (mobile-first, только min-width):
   на телефоне блоки стояли с полем 88-190px сверху/снизу каждый — на странице
   проекта из 8 коротких секций это давало ~1,5 экрана пустоты. 04.09.2026. */
@media(min-width:620px){ :root{ --section-y:56px } }
@media(min-width:1000px){ :root{ --section-y:76px } }

*,*::before,*::after{box-sizing:border-box}
/* Плавность прокрутки живёт в скрипте (ссылки-якоря в assets/layout.php), а не
   свойством на html. Глобальный scroll-behavior:smooth делает плавным ЛЮБОЕ
   программное перемещение: последовательные window.scrollTo прерывают друг друга
   и страница останавливается на полпути. Из-за этого блоки «08 · Сравнение» и
   «09 · Стоимость» на главной оставались непрокрученными и не получали класс .on,
   а приёмка ловила «страница открывается пустой» через раз. 30.08.2026. */
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 17px/1.65 'Inter',system-ui,-apple-system,sans-serif;
  /* clip, а не hidden: hidden на body назначает скролл-контейнер и молча ломает
     position:sticky у шапки — линтер ловит это отдельным правилом */
  overflow-x:clip; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
svg{display:block}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-hi)}
h1,h2,h3,h4{font-family:'Golos Text',system-ui,sans-serif; font-weight:700;
  letter-spacing:-.01em; margin:0 0 .55em; color:var(--text)}
h1{font-size:clamp(31px,6.2vw,60px); line-height:1.05}
h2{font-size:clamp(26px,4.4vw,42px); line-height:1.12}
h3{font-size:clamp(19px,2.5vw,24px); line-height:1.25}
h4{font-size:clamp(17px,2vw,19px); line-height:1.3}
p{margin:0 0 1em}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}

.skip{position:absolute; left:-9999px; top:0; background:var(--accent);
  color:var(--accent-text); padding:12px 18px; border-radius:0 0 var(--r-m) 0; z-index:99}
.skip:focus{left:0}

.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut)}
section{padding-top:var(--section-y); padding-bottom:var(--section-y)}
.kicker{display:block; font:500 13px/1 'JetBrains Mono',monospace; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); margin-bottom:16px}
.lede{font-size:clamp(17px,2.2vw,20px); color:var(--muted); max-width:64ch}
.center{text-align:center}

/* ── кнопки: состояния из брендбука ───────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:15px 26px; border-radius:var(--r-m);
  font:600 16px/1 'Inter',system-ui,sans-serif; border:1px solid transparent;
  cursor:pointer; transition:background var(--t-fast) ease-out, border-color var(--t-fast) ease-out}
.btn-1{background:var(--accent); color:var(--accent-text)}
.btn-1:hover{background:var(--accent-hi); color:var(--accent-text)}
.btn-1:active{background:var(--accent-lo)}
.btn-1[disabled]{background:#2C2922; color:#9C9484; cursor:not-allowed}
.btn-2{background:transparent; color:var(--text); border-color:#5A5348}
.btn-2:hover{border-color:var(--accent); color:var(--text)}
.btns{display:flex; flex-wrap:wrap; gap:12px}

/* ── шапка ────────────────────────────────────────────────────────────── */
.hdr{position:sticky; top:0; z-index:40; background:rgba(23,22,18,.94);
  backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--line)}
.hdr-in{max-width:var(--maxw); margin:0 auto; padding:14px var(--gut);
  display:flex; align-items:center; gap:16px}
.hdr-logo{order:1; display:inline-flex; align-items:center; gap:11px}
/* В шапке знак и слово стоят в строку. Вертикальный лок-ап здесь не годится:
   при ширине 112 px он занимает 142 px по высоте и распирает шапку. */
.hdr-mark{width:32px; height:auto; flex:none}
.hdr-word{width:104px; height:auto}
@media(min-width:1000px){ .hdr-mark{width:36px} .hdr-word{width:116px} }
.hdr-side{margin-left:auto; order:2; display:flex; align-items:center; gap:10px}
/* На телефоне в строку помещаются логотип, мессенджер и бургер — и всё.
   Текстовый номер до 1000 px скрыт: он стоит первым пунктом в открытом меню
   и крупно в подвале, а в шапке он выдавливал бургер за край экрана. */
.hdr-tel{display:none; color:var(--text); font:600 16px/1 'Inter',sans-serif; white-space:nowrap}
@media(min-width:1000px){ .hdr-tel{display:inline-block} }
.hdr-tel:hover{color:var(--accent)}
.hdr-tg{color:var(--accent); display:inline-flex; min-width:44px; min-height:44px;
  align-items:center; justify-content:center}
.nav-t{display:none}
.burger{order:3; width:44px; height:44px; display:inline-flex; flex-direction:column;
  justify-content:center; gap:5px; cursor:pointer}
.burger span{display:block; height:2px; background:var(--text); border-radius:2px;
  transition:transform var(--t-mid) ease-out, opacity var(--t-mid) ease-out}
.nav{display:none; position:absolute; left:0; right:0; top:100%;
  background:var(--bg); border-bottom:1px solid var(--line); padding:8px var(--gut) 22px}
.nav-t:checked ~ .nav{display:block}
.nav-i{border-bottom:1px solid var(--line)}
.nav-a{display:block; padding:15px 0; color:var(--text); font:600 17px/1.3 'Inter',sans-serif}
.nav-a.on{color:var(--accent)}
.nav-d{padding:0 0 14px 14px; display:flex; flex-direction:column; gap:11px}
.nav-d a{color:var(--muted); font-size:15.5px; line-height:1.35}
.nav-d a:hover{color:var(--text)}
.nav-phone-m{color:var(--accent)}

@media(min-width:1000px){
  .burger{display:none}
  .nav{display:flex; position:static; background:none; border:0; padding:0;
    align-items:center; gap:26px; margin-left:22px; order:1}
  .nav-i{position:relative; border:0}
  .nav-a{padding:10px 0; font-size:16px; white-space:nowrap}
  .nav-d{position:absolute; top:100%; left:-18px; min-width:310px; padding:14px 18px;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-c);
    opacity:0; visibility:hidden; transform:translateY(8px);
    transition:opacity var(--t-mid) ease-out, transform var(--t-mid) ease-out, visibility var(--t-mid)}
  .nav-i:hover .nav-d, .nav-i:focus-within .nav-d{opacity:1; visibility:visible; transform:none}
  .nav-phone-m{display:none}
}

/* ── первый экран ─────────────────────────────────────────────────────
   Раскладка построена от трёх величин, а не «на глаз».

   1. СЕТКА. Текст стоит на той же контентной сетке, что логотип в шапке
      (--maxw + --gut). До этой правки .hero-in из-за margin:0 auto внутри
      колоночного флекса схлопывался по содержимому: на окне 1512 px он был
      512 px шириной и вставал по центру ОКНА — заголовок начинался на 520 px
      против 216 px у логотипа. Отсюда и «пустая зона слева», и заголовок
      в четыре строки: он ломался по 472 px, а не по своей max-width.

   2. ЗОНА ЭКРАНА. Первый экран равен окну: min-height = 100svh минус шапка.
      Раньше .hero имел min-height, но содержимое было выше него, и на
      ноутбуке 1280×720 главная кнопка уходила ЗА сгиб (низ кнопок 742 px
      при высоте окна 720 px). svh, а не vh — иначе адресная строка телефона
      режет экран.

   3. КЕГЛЬ ОТ ВЫСОТЫ ОКНА. Заголовок ограничен и по ширине, и по высоте:
      min(6.2vw, 6.6svh). На 982 px высоты это 60 px, на 780 — 51, на 720 — 47.
      Иначе на низком ноутбуке заголовок съедает экран целиком.

   Кадр. На десктопе широкий кадр лежит фоном во всю ширину, дом справа,
   текст — в левой трети, по тёмному лесу. На телефоне вертикальный кадр
   стоит ОТДЕЛЬНОЙ полосой СВЕРХУ и растворяется в фоне: текст поверх него
   поставить нельзя — нижнюю треть вертикального кадра занимает яркий снег,
   и чтобы вытянуть на нём 4.5:1, потребовалась бы маска ~0.6, которая
   этот снег и убивает. Полоса кадра забирает ВСЮ свободную высоту экрана
   (grid-строка 1fr), поэтому композиция сама подстраивается под телефон
   любой высоты, а не задаётся фиксированной цифрой. */
.hero{position:relative; padding:0; border-bottom:1px solid var(--line);
  overflow:hidden; isolation:isolate}
/* Сцена — то, что обязано поместиться в окно: кадр и текст. Полоса фактов
   лежит ПОД сценой и на телефоне выглядывает из-под сгиба на 48 px: это и есть
   сигнал «ниже есть ещё». Держать факты внутри той же сетки нельзя — на телефоне
   они 517 px высотой и съедали бы весь бюджет первого экрана. */
.hero-stage{display:grid; grid-template-rows:1fr auto;
  min-height:calc(100svh - var(--hdr-h) - 48px)}
/* Полоса кадра: занимает 1fr, то есть весь остаток экрана после текста.
   min-height, чтобы на коротком телефоне она не схлопнулась в ноль. */
.hero-ph{display:block; position:relative; min-height:140px; overflow:hidden}
/* 50% 58% — кадр обрезан по дому: от кромки кровли до низа консольного вылета,
   оба этажа со светящимися окнами в кадре, нижний снег уходит за край. */
/* img абсолютом, а не в потоке: иначе собственные пропорции файла (1100×1971)
   задают строке min-content 770 px на ширине 430, и полоса кадра перестаёт
   сжиматься под высоту окна. */
.hero-ph img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 58%}
/* Кадр не обрывается кромкой, а растворяется в фоне: без этого фотография
   читается отдельным куском, а не частью одной композиции. */
.hero-ph::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:44%;
  background:linear-gradient(180deg,rgba(23,22,18,0) 0%,rgba(23,22,18,.42) 42%,
             rgba(23,22,18,.86) 76%,#171612 100%)}
.hero-in{position:relative; width:100%; max-width:var(--maxw); margin:0 auto;
  padding:clamp(24px,3.4svh,40px) var(--gut) clamp(26px,4svh,44px)}
.hero-txt{max-width:660px}
.hero h1{font-size:clamp(31px,min(6.2vw,6.6svh),60px); margin-bottom:.34em;
  max-width:min(100%,660px); text-wrap:balance; text-shadow:0 2px 24px rgba(23,22,18,.55)}
/* 620 px при 20 px кегле — это ~46 знаков в строке. Мера 45–75 знаков
   (Брингхерст): на 540 px выходило 40 знаков, строка рвалась слишком часто. */
.hero .lede{font-size:clamp(17px,min(2.2vw,2.2svh),20px);
  max-width:min(100%,620px); margin-bottom:clamp(20px,3svh,30px); color:#D6D1C7}
.hero .btns{margin-bottom:0}
/* Подсказка прокрутки: волосяная линия по правому краю контентной сетки,
   упирается в полосу фактов. Только десктоп и только на высоком окне —
   на низком эти 46 px нужнее кнопке. Анимацию глушит общее правило
   prefers-reduced-motion, линия при этом остаётся. */
.hero-scroll{display:none}

/* ── низкий телефон (≤700 px высоты): кадр тоньше, кнопки в строку ───── */
@media(max-width:899px) and (max-height:700px){
  /* Всё в этом ярусе тянется от высоты и ширины окна, а не задано числом:
     иначе на 320×568 кнопка уходила за сгиб (низ 645 при высоте окна 568). */
  .hero-ph{min-height:clamp(92px,17svh,150px)}
  .hero-in{padding-top:16px; padding-bottom:20px}
  .hero h1{font-size:clamp(27px,8.6vw,31px); margin-bottom:.3em}
  .hero .lede{font-size:clamp(15px,4.4vw,16px); margin-bottom:16px}
  /* Подпись кнопки в одну строку: на 360×640 «Что входит в дом под ключ»
     ломалось надвое и кнопка вырастала до 78 px, съедая высоту у кадра.
     Перенос строки внутри кнопки запрещаем, сами кнопки переносить разрешаем —
     на 320 px они сами встанут в столбик. Высота 46 px > минимума тач-цели 44. */
  .hero .btn{white-space:nowrap; min-height:46px; padding:13px 15px; font-size:14.5px}
}

@media(min-width:900px){
  /* Кадр уходит фоном во всю ширину, полоса-строка исчезает: сетка сама
     становится «текст 1fr · факты auto». */
  .hero{display:grid; grid-template-rows:1fr auto;
    min-height:min(calc(100svh - var(--hdr-h)),960px)}
  .hero-stage{min-height:0; display:grid; align-content:end}
  .hero-ph{position:absolute; inset:0; z-index:-2; min-height:0}
  /* 64% 46%: дом уходит в правую треть, тёмный лес остаётся под текстом,
     светящиеся окна и линия кровли не срезаются ни при 1512×947 (кадрирование
     идёт по горизонтали), ни при 1920×919 (по вертикали). */
  .hero-ph img{object-position:64% 46%}
  .hero-ph::after{display:none}
  /* Маска в два слоя. Горизонтальный держит текстовую колонку (она занимает
     14–58 % ширины окна), вертикальный сажает низ на полосу фактов и не даёт
     светлому снегу подойти к кнопкам. Числа контраста — в отчёте, замер по
     реальным пикселям скриншота, а не по расчёту «на глаз». */
  .hero::after{content:''; position:absolute; inset:0; z-index:-1; background:
    linear-gradient(90deg,rgba(23,22,18,.95) 0%,rgba(23,22,18,.90) 28%,
      rgba(23,22,18,.72) 50%,rgba(23,22,18,.30) 68%,rgba(23,22,18,0) 82%),
    linear-gradient(180deg,rgba(23,22,18,.70) 0%,rgba(23,22,18,.20) 24%,
      rgba(23,22,18,.44) 56%,rgba(23,22,18,.86) 84%,#171612 100%)}
  /* align-self:end — текст прижат к низу своей строки: канон архитектурного
     первого экрана, кадр дышит сверху, чтение идёт сверху вниз в текст и кнопку. */
  .hero-in{align-self:end;
    padding:clamp(96px,14svh,170px) var(--gut) clamp(44px,7svh,84px)}
  /* колонка чтения не шире 700 px: за этой границей начинается дом на кадре */
  .hero-txt{max-width:700px}
}
@media(min-width:900px) and (min-height:760px){
  /* Бегунок сделан двумя фоновыми слоями и сдвигом background-position, а НЕ
     дочерним элементом под overflow:hidden: во втором варианте scrollHeight
     элемента больше clientHeight, и сводный гейт справедливо читает это
     как обрезанный контент. Фон за границы блока не вылезает сам. */
  .hero-scroll{display:block; position:absolute; right:var(--gut); bottom:0;
    width:1px; height:46px; background-repeat:no-repeat;
    background-image:linear-gradient(180deg,rgba(194,160,106,0),var(--accent),rgba(194,160,106,0)),
                     linear-gradient(rgba(242,239,233,.22),rgba(242,239,233,.22));
    background-size:1px 22px,1px 100%; background-position:0 -22px,0 0;
    animation:hero-scroll 2.6s cubic-bezier(.4,0,.2,1) infinite}
  @keyframes hero-scroll{
    0%{background-position:0 -22px,0 0} 70%,100%{background-position:0 46px,0 0}}
}

.hero-facts{position:relative; display:grid; gap:1px; background:var(--line);
  border-top:1px solid var(--line)}
.hero-fact{background:var(--bg); padding:22px var(--gut)}
.hero-fact b{display:block; font:700 clamp(17px,2.2vw,20px)/1.25 'Golos Text',sans-serif;
  margin-bottom:7px}
.hero-fact span{color:var(--muted); font-size:15px; line-height:1.5}
@media(min-width:900px){
  .hero-facts{grid-template-columns:repeat(4,1fr)}
  .hero-fact{padding:26px 24px}
}
/* Низкий ноутбук: полосу фактов ужимаем, чтобы кнопка осталась над сгибом. */
@media(min-width:900px) and (max-height:800px){
  .hero-fact{padding:18px 20px}
  .hero-fact b{font-size:17px; margin-bottom:5px}
  .hero-fact span{font-size:14px; line-height:1.45}
}

/* ── кадр серии внутри блока ──────────────────────────────────────────── */
.shot{margin:0; border-radius:var(--r-c); overflow:hidden; border:1px solid var(--line)}
.shot img{width:100%; height:auto}
.shot figcaption{color:var(--muted); font-size:14.5px; padding:14px 2px 0}
/* полоса во всю ширину экрана: минимум два таких кадра на странице */
.shot-full{margin:0; position:relative; height:clamp(300px,52vw,560px); overflow:hidden}
.shot-full img{width:100%; height:100%; object-fit:cover}
.shot-full .cap{position:absolute; left:0; right:0; bottom:0; padding:22px var(--gut);
  color:var(--text); font-size:15.5px;
  background:linear-gradient(180deg,rgba(23,22,18,0),rgba(23,22,18,.88))}
.shot-full .cap b{font-family:'Golos Text',sans-serif; display:block; margin-bottom:4px}

/* ── карточки и витрины ───────────────────────────────────────────────── */
.grid{display:grid; gap:16px}
@media(min-width:620px){ .g2{grid-template-columns:repeat(2,1fr)} }
@media(min-width:900px){ .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} }
.card{background:var(--surface); color:var(--text); border:1px solid var(--line);
  border-radius:var(--r-c); padding:22px; display:flex; flex-direction:column;
  transition:border-color var(--t-fast) ease-out}
a.card:hover{border-color:var(--accent); color:var(--text)}
.card h3{margin-bottom:.45em}
.card p{color:var(--muted); font-size:15.5px; margin:0 0 14px}
.card .more{margin-top:auto; color:var(--accent); font:600 14.5px/1 'JetBrains Mono',monospace}
.card .q{font:500 13px/1.4 'JetBrains Mono',monospace; color:var(--muted); opacity:.8}
@media(min-width:900px){ .card{padding:26px} }

/* ── объекты: плитки встык, подпись поверх кадра ──────────────────────── */
.tiles{display:grid; gap:6px}
@media(min-width:620px){ .tiles{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .tiles{grid-template-columns:repeat(3,1fr)} }
.tile{position:relative; display:block; min-height:250px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-c); overflow:hidden; color:var(--text)}
.tile:hover{color:var(--text); border-color:var(--accent)}
/* Контур занимает верхние две трети плитки: когда он шёл на всю высоту,
   линии дома проходили прямо за заголовком и подпись читалась грязно.
   Заменяется фотографией заказчика, как только она появится. */
.tile-art{position:absolute; left:0; right:0; top:0; height:66%; opacity:.42}
.tile-art svg{width:100%; height:100%}
.tile-txt{position:relative; padding:20px; display:flex; flex-direction:column;
  justify-content:flex-end; min-height:250px;
  background:linear-gradient(180deg,rgba(23,22,18,0) 24%,rgba(23,22,18,.86) 58%,#171612 82%)}
.tile-txt h3{margin:0 0 6px; font-size:20px}
.tile-txt p{margin:0 0 10px; color:var(--muted); font-size:14.5px}
.tile-facts{display:flex; flex-wrap:wrap; gap:6px}
.tag{display:inline-block; padding:5px 11px; border-radius:999px; font-size:13px;
  background:var(--surface); border:1px solid var(--line-2); color:#C6C0B4}
.tile.soon{opacity:.72}
.tile.soon .tile-txt{background:none; justify-content:center}
.tile.soon h3{color:var(--muted)}

/* ── схема ────────────────────────────────────────────────────────────── */
.figure{margin:0}
.figure svg{width:100%; height:auto; max-width:760px; margin:0 auto}
.figure figcaption{color:var(--muted); font-size:15px; margin-top:16px; max-width:66ch}

/* ── полоса во всю ширину ─────────────────────────────────────────────── */
.band{background:var(--surface-2); border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}

/* ── этапы и списки ───────────────────────────────────────────────────── */
.steps{counter-reset:s; list-style:none; margin:0; padding:0; display:grid; gap:2px}
.steps li{counter-increment:s; position:relative; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-c); padding:20px 20px 20px 62px}
.steps li::before{content:counter(s,decimal-leading-zero); position:absolute; left:20px; top:20px;
  font:600 14px/1 'JetBrains Mono',monospace; color:var(--accent)}
.steps b{display:block; margin-bottom:6px; font-family:'Golos Text',sans-serif; font-size:17.5px}
.steps span{color:var(--muted); font-size:15.5px; line-height:1.55}
@media(min-width:900px){ .steps{grid-template-columns:repeat(2,1fr); gap:12px} }

.geo-list{display:grid; gap:2px; margin-top:26px}
.geo-i{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-c);
  padding:18px 20px}
.geo-i b{font-family:'Golos Text',sans-serif; font-size:17px}
.geo-i span{display:block; color:var(--muted); font-size:15px; margin-top:5px}
@media(min-width:760px){ .geo-list{grid-template-columns:repeat(2,1fr); gap:10px} }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq{display:grid; gap:10px}
.faq details{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-c)}
.faq summary{cursor:pointer; list-style:none; padding:20px 54px 20px 22px; position:relative;
  font:600 17px/1.4 'Golos Text',sans-serif; color:var(--text); min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:''; position:absolute; right:22px; top:26px; width:11px; height:11px;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(45deg); transition:transform var(--t-mid) ease-out}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a{padding:0 22px 22px; color:var(--muted); font-size:16px}
.faq .a p:last-child{margin-bottom:0}

/* ── SEO-текст ────────────────────────────────────────────────────────── */
.seotext{color:var(--muted); font-size:16px; max-width:74ch}
.seotext h2{color:var(--text)}
.seotext a{color:var(--accent)}

/* ── блок расчёта и контактов ─────────────────────────────────────────── */
.cta{background:var(--surface); border:1px solid var(--accent); border-radius:var(--r-l);
  padding:28px 22px}
.cta h2{margin-bottom:.4em}
.cta p{color:var(--muted); max-width:60ch}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; align-items:center}
.cta-tel{font:700 clamp(21px,3.4vw,27px)/1 'Golos Text',sans-serif; color:var(--text)}
.cta-tel:hover{color:var(--accent)}
@media(min-width:760px){ .cta{padding:44px 40px} }

/* ── подвал ───────────────────────────────────────────────────────────── */
/* Подвал: та же ночная сборка щита, что и на главной (crane-winter.webp) —
   тёмная вуаль поверх, чтобы текст читался, но кадр узнавался. 04.09.2026. */
.ftr{position:relative; overflow:hidden; border-top:1px solid var(--line);
  padding:56px 0 64px; background:var(--surface-2)}
.ftr-bg{position:absolute; inset:0; z-index:0}
.ftr-bg img{width:100%; height:100%; object-fit:cover; object-position:center 38%}
.ftr-bg::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(23,22,18,.90) 0%, rgba(23,22,18,.85) 35%, rgba(23,22,18,.97) 100%)}
.ftr-in{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:0 var(--gut)}
.ftr-top{display:grid; gap:22px; margin-bottom:40px; padding-bottom:36px; border-bottom:1px solid var(--line)}
@media(min-width:760px){ .ftr-top{grid-template-columns:1.3fr 1fr; align-items:center} }
.ftr-brand{display:flex; align-items:center; gap:11px}
.ftr-tag{color:var(--muted); font-size:15px; max-width:46ch; margin:14px 0 0}
.ftr-act{display:grid; gap:10px}
.ftr-act .btn{width:100%; text-align:center}
@media(min-width:520px){ .ftr-act{grid-template-columns:auto auto; justify-content:start} .ftr-act .btn{width:auto} }
@media(min-width:760px){ .ftr-act{justify-content:end} }
.ftr-map{display:grid; gap:26px}
@media(min-width:760px){ .ftr-map{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1000px){ .ftr-map{grid-template-columns:repeat(5,1fr)} }
.ftr-col{display:flex; flex-direction:column; gap:9px}
.ftr-h{font:600 15.5px/1.3 'Golos Text',sans-serif; margin-bottom:3px}
.ftr-h a{color:var(--text)}
.ftr-h a:hover{color:var(--accent)}
.ftr-col a{color:var(--muted); font-size:14.5px; line-height:1.4}
.ftr-col a:hover{color:var(--text)}
.ftr-req{margin-top:40px; padding-top:26px; border-top:1px solid var(--line)}
.ftr-contacts{display:flex; flex-wrap:wrap; gap:12px 26px; margin-bottom:18px; align-items:center}
.ftr-tel{font:700 20px/1 'Golos Text',sans-serif; color:var(--text)}
.ftr-tel:hover{color:var(--accent)}
.ftr-contacts a{color:var(--accent)}
.ftr-legal{color:var(--muted); font-size:14px; line-height:1.6; margin:0 0 10px}
.ftr-legal a{color:var(--muted); text-decoration:underline; text-underline-offset:3px}
.ftr-legal a:hover{color:var(--text)}

/* ── заглушка ненаполненной страницы ──────────────────────────────────── */
.stub-note{background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:0 var(--r-c) var(--r-c) 0;
  padding:18px 20px; color:var(--muted); font-size:15.5px; margin:26px 0}
/* Крошки. Ссылка в них — такая же цель для пальца, как любая другая:
   высота 44 px обязательна, иначе page_ui_lint краснеет на телефоне. */
.crumbs{font-size:14px; color:var(--muted); margin-bottom:14px}
.crumbs a{display:inline-block; min-height:44px; line-height:44px;
  color:var(--muted); text-decoration:underline; text-underline-offset:3px}
.crumbs a:hover{color:var(--text)}

/* ── появление блоков ─────────────────────────────────────────────────── */
.rv{opacity:0; transform:translateY(18px);
  transition:opacity var(--t-slow) cubic-bezier(.2,.7,.3,1), transform var(--t-slow) cubic-bezier(.2,.7,.3,1)}
.rv.on{opacity:1; transform:none}
/* Блок, мимо которого прокрутка уже прошла, показываем мгновенно: плавное
   появление задним числом читается как дефект, а не как анимация. */
.rv.snap{transition:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  .rv{opacity:1; transform:none}
}

/* ── Аргументы против монолита (редакция 3, вводная заказчика 27.08) ─────
   Карточка несёт три уровня: крупное число, что оно значит, и откуда взято.
   Строка источника обязательна — по FACTS.md у каждой цифры либо норматив,
   либо подпись «по опыту МАККО». Цвета объявлены вместе с фоном карточки. */
.args{display:grid; gap:2px; margin-top:34px}
.arg{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-c);
  padding:24px 22px; color:var(--text)}
.arg-n{display:block; font:700 clamp(30px,5.4vw,40px)/1.05 'Golos Text',system-ui,sans-serif;
  color:var(--accent); letter-spacing:-.02em}
/* Единица измерения при числе. Кегль задан абсолютно, а не долей от .arg-n:
   доля от clamp() на телефоне схлопывалась до 12,6 px и падал page_ui_lint. */
.arg-n small{font-size:clamp(15px,2.6vw,17px); font-weight:600; letter-spacing:0;
  margin-left:.28em; color:var(--muted); vertical-align:.34em}
.arg b{display:block; margin:12px 0 7px; font-family:'Golos Text',system-ui,sans-serif;
  font-size:17.5px; font-weight:700; color:var(--text)}
.arg p{margin:0; color:var(--muted); font-size:15.5px; line-height:1.55}
.arg cite{display:block; margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  font:400 13.5px/1.5 'JetBrains Mono',monospace; font-style:normal; color:var(--muted)}
@media(min-width:760px){ .args{grid-template-columns:repeat(2,1fr); gap:10px} }
@media(min-width:1000px){ .args{grid-template-columns:repeat(4,1fr)} }

/* ── Компоненты money-посадок (первая очередь, редакция 3) ───────────────
   Якорная навигация по суб-интентам кластера: требование commercial-first,
   не меньше четырёх блоков. */
.anchors{display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 0; padding:0; list-style:none}
.anchors a{display:inline-block; padding:9px 15px; min-height:44px; line-height:26px;
  background:var(--surface); border:1px solid var(--line); border-radius:99px;
  color:var(--text); font-size:15px; transition:border-color var(--t-fast),color var(--t-fast)}
.anchors a:hover{border-color:var(--accent); color:var(--accent)}

/* Таблица сравнения. На телефоне разбирается в карточки: подпись столбца
   приходит из data-l, иначе строка без шапки нечитаема. */
.cmp{width:100%; border-collapse:collapse; margin-top:26px; font-size:16px}
.cmp th,.cmp td{text-align:left; padding:14px 16px; border-bottom:1px solid var(--line);
  vertical-align:top; color:var(--text)}
.cmp thead th{background:var(--surface-2); font:600 14px/1.4 'JetBrains Mono',monospace;
  color:var(--muted); text-transform:uppercase; letter-spacing:.04em;
  border-bottom:2px solid var(--line-2)}
.cmp tbody tr:nth-child(even){background:var(--surface-2)}
.cmp td:first-child{font-weight:600}
.cmp .win{color:var(--accent)}
@media(max-width:759px){
  .cmp,.cmp tbody,.cmp tr,.cmp td{display:block; width:100%}
  .cmp thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .cmp tbody tr{background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-c); padding:6px 4px; margin-bottom:10px}
  .cmp tbody tr:nth-child(even){background:var(--surface)}
  .cmp td{border-bottom:none; padding:9px 16px}
  .cmp td::before{content:attr(data-l); display:block; margin-bottom:4px;
    font:600 13px/1.4 'JetBrains Mono',monospace; color:var(--muted);
    text-transform:uppercase; letter-spacing:.04em}
  .cmp td:first-child{font-size:17.5px}
  .cmp td:first-child::before{content:none}
}

/* Врезка-оговорка: то, что мы обязаны сказать против себя. */
.note{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r-c); padding:22px 24px; margin-top:30px; color:var(--text)}
.note p{margin:0 0 12px; color:var(--muted); font-size:16px; line-height:1.6}
.note p:last-child{margin-bottom:0}
.note b{color:var(--text)}

/* ── Схема, а не фотография ──────────────────────────────────────────────
   .shot-full сделан под кадр: фиксированная высота, object-fit:cover
   и подпись поверх нижней кромки. Для чертежа это не годится — подпись
   ложится на размерные линии и съедает их. У схемы своя пропорция
   и подпись ПОД ней. */
.scheme{margin:0}
/* Ширина рисунка ограничена: схема с viewBox 640–780, растянутая на всю колонку
   в 1120 px, увеличивает подписи вместе с собой — на десктопе кегль в схеме
   становился 44 px при 17 px основного текста, и рисунок кричал громче страницы.
   На телефоне ограничение не срабатывает: там колонка и так уже. */
.scheme svg{display:block; width:100%; max-width:620px; margin:0 auto;
  height:auto; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-c)}
.scheme .cap{display:block; margin-top:14px; color:var(--muted);
  font-size:15.5px; line-height:1.55}
.scheme .cap b{display:block; margin-bottom:4px; color:var(--text);
  font-family:'Golos Text',system-ui,sans-serif}

/* ── Витрина выгод в три колонки ─────────────────────────────────────────
   .args собран под четыре карточки-аргумента. Вариантам B и C нужен ряд
   из шести выгод: при repeat(4,1fr) последняя строка остаётся полупустой
   (4 + 2), при repeat(3,1fr) сетка сходится ровно (3 + 3). */
@media(min-width:1000px){ .args.a3{grid-template-columns:repeat(3,1fr)} }
/* Крупная величина карточки бывает и словом, а не числом: «сразу», «дерево».
   Слово в том же кегле, что число, читается как ярлык — это нормально,
   но переносов внутри него быть не должно. */
 /* white-space, а не text-wrap: второй поддержан не везде, и «25–60 тыс ₽/м²»
   на телефоне всё равно ломалось между числом и единицей. Число с единицей —
   одна величина, разорванная пополам она читается как две разные. */
.arg-n{white-space:nowrap}

/* ── Переключатель вариантов главной ─────────────────────────────────────
   Живёт только на время выбора концепции: три варианта показываются рядом,
   и из любого видна дорога к остальным. Снимается вместе с /varianty/.

   Фиксирован снизу по центру. Под него в поток кладётся распорка .vsw-sp:
   без неё панель накрывает последнюю строку подвала, и её не прочитать
   ни на телефоне, ни на десктопе. */
.vsw-sp{height:84px}
.vsw{position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:60;
  display:flex; align-items:center; gap:6px; max-width:calc(100vw - 24px);
  padding:8px 10px; border-radius:999px; background:rgba(32,30,25,.96);
  border:1px solid var(--line-2); color:var(--text);
  box-shadow:0 10px 30px rgba(0,0,0,.45); backdrop-filter:blur(8px)}
.vsw-t{font:500 12px/1 'JetBrains Mono',monospace; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); padding:0 6px 0 4px}
.vsw-a{display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; border-radius:999px; color:var(--text);
  font:700 16px/1 'Golos Text',system-ui,sans-serif;
  border:1px solid var(--line-2); background:var(--surface-2);
  transition:border-color var(--t-fast) ease-out, background var(--t-fast) ease-out}
.vsw-a:hover{border-color:var(--accent); color:var(--text)}
.vsw-a.on{background:var(--accent); color:var(--accent-text); border-color:var(--accent)}
.vsw-a.on:hover{background:var(--accent-hi); color:var(--accent-text)}
.vsw-all{display:none; min-height:44px; line-height:44px; padding:0 12px 0 8px;
  color:var(--accent); font-size:14.5px; white-space:nowrap}
.vsw-all:hover{color:var(--accent-hi)}
@media(min-width:520px){ .vsw-all{display:inline-block} }

/* Карточка варианта на странице выбора: буква крупно, идея текстом. */
.vcard{display:flex; flex-direction:column; background:var(--surface); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r-c); padding:24px 22px;
  transition:border-color var(--t-fast) ease-out}
a.vcard:hover{border-color:var(--accent); color:var(--text)}
.vcard-l{display:block; font:700 40px/1 'Golos Text',system-ui,sans-serif;
  color:var(--accent); letter-spacing:-.02em; margin-bottom:12px}
.vcard h3{margin:0 0 .5em}
.vcard p{color:var(--muted); font-size:15.5px; margin:0 0 16px}
.vcard .more{margin-top:auto; color:var(--accent);
  font:600 14.5px/1 'JetBrains Mono',monospace}
/* Заголовок карточки варианта — не раздел страницы, а подпись: уровня <h*>
   ему не положено, иначе в цепочке заголовков появляется прыжок H1 → H3. */
.vcard-h{font-family:'Golos Text',system-ui,sans-serif; font-weight:700;
  font-size:clamp(19px,2.5vw,24px); line-height:1.25; margin:0 0 .5em; color:var(--text)}

/* ── Каталог проектов /proekty/ ───────────────────────────────────────────
   Портфолио из реальных материалов заказчика: карточка с фотообложкой, бейдж
   статуса поверх кадра, фильтры-таблетки, галерея с лайтбоксом. Цвета текста
   объявлены вместе с фоном своего блока — латунь только действием. */
.nowrap{white-space:nowrap}

.pj-filters{display:flex; flex-wrap:wrap; gap:16px 26px; margin:30px 0 4px}
.pj-fgroup{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.pj-flabel{font:500 12px/1 'JetBrains Mono',monospace; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-right:4px}
.pj-fbtn{min-height:44px; padding:10px 15px; border-radius:999px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); color:var(--text);
  font:600 14.5px/1 'Inter',system-ui,sans-serif;
  transition:border-color var(--t-fast) ease-out, background var(--t-fast) ease-out}
.pj-fbtn:hover{border-color:var(--accent)}
.pj-fbtn.on{background:var(--accent); color:var(--accent-text); border-color:var(--accent)}

.pj-grid{display:grid; gap:16px; margin-top:26px}
@media(min-width:620px){ .pj-grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .pj-grid{grid-template-columns:repeat(3,1fr)} }
.pj-card{display:flex; flex-direction:column; background:var(--surface); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r-c); overflow:hidden;
  transition:border-color var(--t-fast) ease-out}
a.pj-card:hover{border-color:var(--accent); color:var(--text)}
.pj-cover{position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--surface-2)}
.pj-cover img{width:100%; height:100%; object-fit:cover}
.pj-badge{position:absolute; left:12px; bottom:12px; padding:6px 12px; border-radius:999px;
  font:600 13px/1 'Inter',system-ui,sans-serif; letter-spacing:.01em}
.pj-badge--real{background:var(--ok); color:#122019}
.pj-badge--render{background:rgba(23,22,18,.86); color:#E9E4DA; border:1px solid var(--line-2)}
.pj-badge--base{background:var(--accent); color:var(--accent-text)}
.pj-badge--build{background:#6E6250; color:#F4F0E8}   /* стройка: фон и текст объявлены парой */
.pj-body{display:flex; flex-direction:column; flex:1; padding:18px 18px 20px}
.pj-body h2{margin:0 0 8px; font-size:23px; line-height:1.25; letter-spacing:0}
.pj-meta{font:500 13.5px/1.4 'JetBrains Mono',monospace; color:var(--muted); margin-bottom:11px}
.pj-lead{color:var(--muted); font-size:15px; line-height:1.5; margin:0 0 14px}
.pj-price{margin-top:auto; color:var(--text); font-weight:600; font-size:15.5px}
.pj-empty{display:none; color:var(--muted); font-size:16px; margin-top:26px}

/* ── ТТХ-плитки на странице проекта ───────────────────────────────────── */
.pj-specs{display:grid; gap:2px; margin-top:8px}
@media(min-width:620px){ .pj-specs{grid-template-columns:repeat(2,1fr); gap:10px} }
@media(min-width:1000px){ .pj-specs{grid-template-columns:repeat(4,1fr)} }
.pj-spec{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-c);
  padding:20px; color:var(--text)}
.pj-spec b{display:block; font:700 clamp(22px,3vw,28px)/1.05 'Golos Text',system-ui,sans-serif;
  color:var(--text); letter-spacing:-.01em}
.pj-spec span{display:block; color:var(--muted); font-size:14px; margin-top:7px}
.pj-terrace{color:var(--muted); font-size:16px; line-height:1.6; margin-top:20px; max-width:64ch}
.pj-terrace b{color:var(--text)}
.pj-feats{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}

/* ── Цена на странице проекта ─────────────────────────────────────────── */
.pj-prices{display:grid; gap:12px; margin-top:8px}
@media(min-width:620px){ .pj-prices{grid-template-columns:repeat(2,1fr)} }
.pj-pricec{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-c);
  padding:22px 24px; color:var(--text)}
.pj-pricec span{display:block; font:500 13px/1 'JetBrains Mono',monospace; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.pj-pricec b{display:block; font:700 clamp(24px,3.6vw,32px)/1 'Golos Text',system-ui,sans-serif;
  color:var(--accent); letter-spacing:-.01em}
.pj-pricec em{display:block; margin-top:10px; font-style:normal; color:var(--muted); font-size:14.5px}

/* ── Описание проекта ─────────────────────────────────────────────────── */
.pj-prose{max-width:70ch; color:var(--text)}
.pj-prose p{color:var(--text); font-size:17px; line-height:1.65; margin:0 0 1em}
.pj-prose p:last-child{margin-bottom:0}

/* ── Галерея и лайтбокс ───────────────────────────────────────────────── */
.pj-gallery{display:grid; gap:8px; margin-top:30px; grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){ .pj-gallery{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1000px){ .pj-gallery{grid-template-columns:repeat(4,1fr)} }
.pj-gi{display:block; position:relative; aspect-ratio:1/1; overflow:hidden; padding:0;
  border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface-2);
  cursor:pointer; transition:border-color var(--t-fast) ease-out}
.pj-gi:hover{border-color:var(--accent)}
.pj-gi img{width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-slow) cubic-bezier(.2,.7,.3,1)}
.pj-gi:hover img{transform:scale(1.05)}

.pj-lb{position:fixed; inset:0; z-index:80; display:none; align-items:center;
  justify-content:center; padding:clamp(12px,3vw,40px);
  background:rgba(12,11,9,.94); backdrop-filter:blur(4px)}
.pj-lb.on{display:flex}
.pj-lb img{max-width:100%; max-height:90vh; width:auto; height:auto; border-radius:var(--r-m)}
.pj-lb-close,.pj-lb-nav{position:absolute; display:inline-flex; align-items:center;
  justify-content:center; min-width:48px; min-height:48px; border-radius:999px;
  background:rgba(32,30,25,.9); border:1px solid var(--line-2); color:var(--text);
  font:400 26px/1 'Inter',system-ui,sans-serif; cursor:pointer;
  transition:border-color var(--t-fast) ease-out, background var(--t-fast) ease-out}
.pj-lb-close:hover,.pj-lb-nav:hover{border-color:var(--accent); background:var(--surface)}
.pj-lb-close{top:14px; right:14px; font-size:30px}
.pj-lb-nav{top:50%; transform:translateY(-50%); font-size:34px}
.pj-lb-prev{left:14px}
.pj-lb-next{right:14px}

/* ── Планировки, видео со стройки и состав проекта ────────────────────────
   Чертёж — не кадр объекта: он живёт отдельным блоком, на белой подложке и
   целиком, а не обрезанным в квадрат галереи. Раньше планировки лежали в
   фотогалерее и подписывались как фотографии. 07.09.2026. */
/* auto-fit, а не фиксированные две колонки: у большинства объектов чертёж один,
   и в половине ширины экспликация становится нечитаемой. */
.pj-plans{display:grid; gap:14px; margin-top:26px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 460px), 1fr))}
.pj-plan{margin:0}
.pj-plan .pj-gi{aspect-ratio:auto; background:#FFFFFF; border-radius:var(--r-c);
  border:1px solid var(--line); padding:10px; width:100%; cursor:zoom-in}
.pj-plan .pj-gi img{width:100%; height:auto; object-fit:contain; display:block}
.pj-plan figcaption{margin-top:9px; color:var(--muted); font-size:15px}

/* Ролики сняты вертикально, с телефона: в две колонки они занимают по экрану
   каждый. Три колонки на десктопе и потолок высоты держат блок в размере. */
.pj-videos{display:grid; gap:16px; margin-top:26px; grid-template-columns:1fr}
@media(min-width:560px){ .pj-videos{grid-template-columns:repeat(2,1fr)} }
@media(min-width:900px){ .pj-videos{grid-template-columns:repeat(3,1fr)} }
.pj-video{margin:0}
.pj-video video{width:100%; height:auto; max-height:60vh; display:block; background:#000;
  border-radius:var(--r-c); border:1px solid var(--line)}
.pj-video figcaption{margin-top:9px; color:var(--muted); font-size:15px}
.pj-vd{color:var(--muted); opacity:.75; white-space:nowrap}

.pj-pack{display:grid; gap:10px; margin-top:24px; grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){ .pj-pack{grid-template-columns:repeat(4,1fr)} }
.pj-pack-i{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-c); padding:14px 16px}
.pj-pack-i b{display:block; font-size:19px; color:var(--text); line-height:1.2}
.pj-pack-i span{display:block; margin-top:5px; color:var(--muted); font-size:14px; line-height:1.4}

/* ── Плавающая кнопка целевого действия ───────────────────────────────────
   Формы на сайте нет (решение заказчика 24.08.2026), поэтому кнопка ведёт
   к блоку разговора внизу страницы: телефон, Telegram, почта. Появляется
   после 600 px прокрутки и уходит, когда сам блок виден. Поднимается над
   баннером ПДн: его высота приходит из скрипта в --pdn, потому что баннер
   рисуется отложенно и закрывается пользователем в любой момент.
   Тач-цель 48 px — палец на телефоне не попадает в меньшую. */
.cta-float{position:fixed; right:18px; bottom:calc(18px + var(--pdn,0px)); z-index:900;
  display:inline-flex; align-items:center; gap:9px; height:48px; padding:0 20px;
  border-radius:999px; background:var(--accent); color:var(--accent-text);
  font:600 15px/1 'Inter',system-ui,sans-serif; text-decoration:none;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity var(--t-mid) ease, transform var(--t-mid) ease, visibility var(--t-mid)}
.cta-float.on{opacity:1; visibility:visible; transform:none}
.cta-float:hover{background:var(--accent-hi); color:var(--accent-text)}
.cta-float:active{background:var(--accent-lo)}
.cta-float:focus-visible{outline:2px solid var(--text); outline-offset:3px}
.cta-float svg{flex:none}
@media(max-width:520px){
  /* Подпись остаётся: круглая кнопка со значком читается как чат поддержки,
     а это другое обещание. Ужимаем поля, не смысл. */
  .cta-float{right:12px; bottom:calc(12px + var(--pdn,0px)); height:46px; padding:0 16px; font-size:14.5px}
}
@media(prefers-reduced-motion:reduce){ .cta-float{transition:none} }

/* Подпись студии в подвале — мельче реквизитов и приглушённее, но не ниже
   порога читаемости: 13 px — нижняя граница по contrast-standard. */
.ftr-legal a.ftr-dev{margin-left:8px; font-size:13px; color:var(--muted);
  text-decoration:none; white-space:nowrap}
.ftr-legal a.ftr-dev:hover{color:var(--text)}

/* Приглашение приехать — сквозная замена формы заявки: формы на сайте нет
   по решению заказчика, и роль «следующего шага» несёт встреча на производстве
   и на объекте. Держится абзацем внутри блока контактов, не отдельным блоком:
   отдельный блок на девяти страницах читался бы как повтор. */
.cta-visit{margin:14px 0 0; color:var(--muted); font-size:16px; line-height:1.6}


/* ── Статья блога ──────────────────────────────────────────────────────── */
/* Тело материала отличается от .seotext: там приглушённый справочный текст
   внизу страницы, здесь — основное чтение. Цвет полный, кегль крупнее,
   мера строки 68ch: на 1440 без ограничения строка уезжает за 110 знаков. */
.art-body{max-width:68ch; color:var(--text); font-size:17px; line-height:1.72}
.art-body h2{margin:44px 0 14px}
.art-body h3{margin:32px 0 10px; font-size:20px}
.art-body p{margin:0 0 16px}
.art-body ul,.art-body ol{margin:0 0 18px; padding-left:22px}
.art-body li{margin-bottom:9px}
.art-body a{color:var(--accent)}
.art-body strong,.art-body b{color:var(--text)}
/* Таблица сравнения: на узком экране уезжает в горизонтальную прокрутку
   внутри своей обёртки, страница при этом не едет вбок. */
.art-tbl{overflow-x:auto; margin:0 0 22px}
.art-tbl table{border-collapse:collapse; width:100%; min-width:520px; font-size:16px}
.art-tbl th,.art-tbl td{border:1px solid var(--line); padding:11px 13px; text-align:left;
  vertical-align:top; color:var(--text)}
.art-tbl th{background:var(--surface-2); font-weight:600}
.art-tbl tr:nth-child(even) td{background:var(--surface-2)}
/* Блок «Главное» — самый цитируемый чанк статьи, поэтому он визуально
   отделён и стоит сразу после лида. */
.art-tldr{background:var(--surface); border:1px solid var(--accent); border-radius:var(--r-c);
  padding:22px 24px; margin:26px 0 8px}
.art-tldr b{display:block; margin-bottom:12px; color:var(--text)}
.art-tldr ul{margin:0; padding-left:20px}
.art-tldr li{color:var(--text); margin-bottom:9px; line-height:1.6}
.art-date{color:var(--muted); font-size:15px; margin-top:10px}
/* Обложка карточки в ленте блога: та же сетка, что у карточек проектов. */
.bl-cover{aspect-ratio:16/10; background:var(--surface-2); display:block}
.bl-cover svg{width:100%; height:100%; display:block}