/* СК «Люди» — стили сайта. Среда «Смета» из брендбука: светлая база,
   вставки на графите там, где нужно сменить темп.

   ПАЛИТРА РОЛЕЙ (CONTRAST_STANDARD). Один тон не может быть одновременно
   заливкой кнопки, надписью на белом и надписью на графите — это арифметика.
   Поэтому у жёлтого три токена, и они не смешиваются:
     --yellow          заливка кнопок и плашек
     --accent-text     текст акцентом на светлом фоне (жёлтый на белом — 1,35:1)
     --accent-on-dark  текст акцентом на графите (там жёлтый даёт 13,21:1)
   Базовые цвета компонента — всегда для светлой среды; тёмная переопределяет
   их отдельно. Инлайновый style="color:" в разметке запрещён. */

:root{
  /* Фоны. Текст проверяем на --concrete: это самый тёмный из светлых. */
  --paper:#FFFFFF;
  --concrete:#F4F5F7;
  --graphite:#15181D;
  /* Высота липкой шапки. Одна на все ширины (логотип 52 + поля 8 + линия 1),
     поэтому живёт числом здесь, а не пересчитывается в каждом месте, где
     нужна: от неё зависят и отступ якорей, и высота первого экрана. */
  --hdr:69px;
  --graphite-2:#1E222A;

  /* Текст на светлом */
  --ink:#15181D;      /* 16,4:1 на белом */
  --ink-2:#3D434E;    /* 9,9:1  — подзаголовки */
  --ink-3:#5B6270;    /* 6,1:1 на белом, 5,5:1 на бетоне — минимум для мелкого */

  /* Текст на графите */
  --milk:#F2F3F5;     /* 14,7:1 */
  --milk-2:#A8AFBA;   /* 8,0:1 — вторичный */

  /* Акцент в трёх ролях */
  --yellow:#FFDD00;
  --on-yellow:#15181D;
  --accent-text:#8A6D00;
  --accent-on-dark:#FFDD00;

  --ok:#166534;
  --line:#E3E6EA;
  --line-2:#CBD1D8;
  --line-dark:#2C313B;

  --display:'Golos Text',sans-serif;
  --sans:'Inter',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --wrap:1180px;
  --hd:68px;

  /* Поверхность карточки. Раньше каждая карточка была белым прямоугольником
     с рамкой в один пиксель — на белой странице это и давало ощущение
     «сайт как у всех», о котором предупреждал сам брендбук. Теперь карточка
     отличается от фона заливкой, а не обводкой, и токен переворачивается
     вместе со средой секции. */
  --card:#F4F5F7;
  --card-line:transparent;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
/* overflow-x:hidden на html/body НЕ ставим: он молча отключает position:sticky
   у шапки — на десктопе меню перестаёт держаться при прокрутке. Горизонтальное
   переполнение лечим в самих блоках (широкое скроллится внутри себя). */
img,svg,video{display:block;max-width:100%}
img{height:auto}
ul,ol{list-style:none}
a{color:var(--accent-text)}
:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Типографика ────────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.1;letter-spacing:-.025em}
h1{font-size:clamp(38px,6.2vw,78px);letter-spacing:-.038em;line-height:1.02}
/* Кегль заголовка секции ужат 11.09.2026 вместе с полями секций: на 1440 px
   заголовок с подзаголовком занимал 134 px, и блок с лентой не помещался
   в экран целиком. */
h2{font-size:clamp(27px,3.6vw,46px);letter-spacing:-.03em;line-height:1.08}
h3{font-size:clamp(19px,2.1vw,23px);line-height:1.22}
h4{font-size:18px}
.kicker{
  display:block;font-family:var(--mono);font-size:13px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text);margin-bottom:15px;
}
.lead{font-size:clamp(17px,1.85vw,21.5px);line-height:1.5;color:var(--ink-2)}
.muted{color:var(--ink-3);font-size:15px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Короткий жёлтый штрих над надзаголовком: единственная декоративная деталь
   на странице, и она же ритм — по ней глаз находит начало каждого блока. */
.sec-head{max-width:900px;margin-bottom:clamp(26px,3vw,44px)}
.sec-head .kicker{position:relative;padding-top:18px}
.sec-head .kicker::before{content:"";position:absolute;left:0;top:0;width:34px;height:3px;
  border-radius:2px;background:var(--yellow)}
.sec-head p{color:var(--ink-2);margin-top:18px;max-width:64ch;font-size:clamp(16px,1.6vw,19px);line-height:1.55}

/* Поля секций. Ужаты 11.09.2026: владелец — «блоки не помещаются в экран,
   всегда приходится чуть выше или ниже листать». На 1440 px прежние поля
   съедали 218 px высоты на каждую секцию, и ни один блок с лентой не
   помещался целиком вместе со стрелками. */
section{padding:clamp(44px,4.6vw,72px) 0}
/* Блоки, которыми человек управляет руками — ленты и эскиз среза, — должны
   читаться целиком: карточки, стрелки и точки в одном экране. Им поля меньше
   общих, иначе на ноутбуке подвал ленты всегда оказывается за сгибом. */
#etapy,#raboty,#otzyvy,#sloi{padding-top:clamp(32px,3vw,48px);padding-bottom:clamp(32px,3vw,48px)}
#etapy .sec-head,#raboty .sec-head,#otzyvy .sec-head,#sloi .sec-head{margin-bottom:clamp(20px,2.2vw,30px)}
/* Подвал ленты ниже общего: кнопка 48 px — всё ещё честная тач-цель
   (минимум по Apple HIG — 44), а блок выигрывает восемь пикселей высоты. */
#etapy .trk-arr,#raboty .trk-arr,#otzyvy .trk-arr{width:48px;height:48px}
#etapy .trk,#raboty .trk,#otzyvy .trk{padding-bottom:12px}
section.tone{background:var(--concrete);color:var(--ink);--card:#FFFFFF}

/* Тёмная среда. Цвет текста объявляется ВМЕСТЕ с фоном — иначе он придёт
   по наследству от секции и блок сломается в другом контексте. */
section.dark{background:var(--graphite);color:var(--milk);--card:#1E222A}
section.dark h1,section.dark h2,section.dark h3,section.dark h4{color:var(--milk)}
section.dark .lead{color:#C6CCD5}
section.dark .muted{color:var(--milk-2)}
section.dark .kicker{color:var(--accent-on-dark)}
section.dark a{color:var(--accent-on-dark)}
section.dark .sec-head p{color:var(--milk-2)}

/* ── Кнопки: заливка и цвет текста в одном правиле ──────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:600;font-size:15.5px;line-height:1;
  padding:15px 24px;border-radius:10px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
}
.btn-p{background:var(--yellow);color:var(--on-yellow);border-color:var(--yellow)}
.btn-p:hover{background:#F0D000;border-color:#F0D000;color:var(--on-yellow)}
/* Вторичная кнопка своя в каждой среде: обводка графитом на белом исчезает
   на графите, и наоборот. */
.btn-s{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-s:hover{border-color:var(--ink);color:var(--ink)}
section.dark .btn-p,.on-dark .btn-p,.hero .btn-p{background:var(--yellow);color:var(--on-yellow);border-color:var(--yellow)}
section.dark .btn-p:hover,.on-dark .btn-p:hover,.hero .btn-p:hover{background:#F0D000;border-color:#F0D000;color:var(--on-yellow)}
section.dark .btn-s,.on-dark .btn-s,.hero .btn-s{background:transparent;color:var(--milk);border-color:#3A424E}
section.dark .btn-s:hover,.on-dark .btn-s:hover,.hero .btn-s:hover{border-color:var(--milk);color:var(--milk)}
.btns{display:flex;gap:12px;flex-wrap:wrap}

/* Якорные переходы. Шапка липкая и перекрывает 69 px сверху: без этого
   правила «Цены», «Объекты», «Контакты» и кнопка «Рассчитать стоимость»
   приводили на раздел с заголовком, спрятанным под шапкой, — человек попадал
   в середину блока и не понимал, куда его перекинуло. */
html{scroll-padding-top:calc(var(--hdr) + 12px)}

/* ── Шапка ──────────────────────────────────────────────────────────────── */
header{
  position:sticky;top:0;z-index:60;background:var(--paper);color:var(--ink);
  border-bottom:1px solid var(--line);
}
/* Шапка живёт в своей ширине, а не в колонке текста.
   Арифметика, а не глазомер. При 1180 px контейнера внутри остаётся 1140,
   а частям шапки нужно: логотип 104 + меню 536 + телефон 137 + каналы 152 +
   кнопка 196 = 1125 плюс интервалы. С интервалами, которые просил заказчик
   (32 px между блоками, 18 внутри правого), выходит 1251 — на 111 px больше,
   чем есть. Отсюда и переносился «Дизайн-проект»: меню единственное, что
   умеет сжиматься, и сжималось оно переносом слова.
   Шапка — служебная строка, ей незачем стоять в ширине абзаца: даём ей
   1400 px, и на 1512 остаётся 100 px запаса. Колонки текста не трогаем. */
.wrap.hd{max-width:1400px;padding:0 24px}
.hd{display:flex;align-items:center;gap:32px;height:var(--hd)}
.lockup{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.lockup svg{height:34px;width:auto}
.nav{display:flex;align-items:center;gap:2px;margin-left:0}
.nav-i{position:relative}
.nav-i>a{
  display:block;padding:10px 12px;font-size:15px;font-weight:500;
  color:var(--ink);text-decoration:none;border-radius:8px;
  /* Пункт меню никогда не ломается пополам: если места не хватает, шапка
     переходит на следующую ступень раскладки, а не рвёт слово. */
  white-space:nowrap;
}
.nav-i>a:hover{background:var(--concrete);color:var(--ink)}
.drop{
  position:absolute;top:100%;left:0;min-width:280px;background:var(--paper);color:var(--ink);
  border:1px solid var(--line);border-radius:12px;padding:8px;
  box-shadow:0 18px 44px rgba(21,24,29,.13);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s;
}
.nav-i:hover .drop,.nav-i:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:9px 12px;font-size:14.5px;color:var(--ink);text-decoration:none;border-radius:8px}
.drop a:hover{background:var(--concrete)}
.drop .all{color:var(--accent-text);font-weight:600;border-top:1px solid var(--line);margin-top:6px;padding-top:11px;border-radius:0}
.drop-mega{display:grid;grid-template-columns:repeat(3,minmax(190px,1fr));gap:4px;min-width:660px;left:-120px}
/* На узком десктопе меню в три колонки вылезает за экран — там оно в две. */
@media (max-width:1100px){
  .drop-mega{grid-template-columns:repeat(2,minmax(180px,1fr));min-width:480px;left:-60px}
}
.mega-h{font-family:var(--display);font-weight:700;font-size:13px;color:var(--accent-text);
  text-transform:uppercase;letter-spacing:.06em;padding-bottom:4px}
.hd-right{margin-left:auto;display:flex;align-items:center;gap:18px}

/* ── Номер телефона: один набор на весь сайт ──────────────────────────────
   До 09.09.2026 номер набирался тремя разными шрифтами: моноширинным в шапке
   и подвале, но разного начертания, и Golos Text в карточке контактов под
   картой. Заказчик это заметил. Номер — это цифры, поэтому во всех местах
   он моноширинный с табличными цифрами: так разряды стоят столбиком и номер
   читается как номер. Меняется только кегль — это иерархия, а не шрифт. */
.hd-tel,.ft-tel,.map-tel,.f-note a{
  font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;
  letter-spacing:.01em;text-decoration:none;white-space:nowrap;
}
.hd-tel{font-size:15px;color:var(--ink)}
.hd-tel:hover{color:var(--accent-text)}

/* ── Мессенджеры и площадки ───────────────────────────────────────────────
   WhatsApp снят 08.09.2026 по указанию заказчика, вместо него четыре его
   канала. Заказчик 09.09 просил «оригинальные качественные иконки» — знак
   каждого канала теперь фирменный, белым по фирменной заливке, как иконка
   приложения. Ряд держится не подгонкой, а одной сеткой: плашка 34×34,
   радиус 10, глиф в сетке 24×24 у всех четырёх.

   Цвет глифа объявляется ВНУТРИ знака (белый), заливка — здесь, вместе.
   Наследования от среды нет: один и тот же ряд стоит и на бумаге в шапке,
   и на графите в подвале, и не должен зависеть от того, куда его положили. */
.soc{display:flex;align-items:center;gap:8px;flex:none}
.soc-i{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:10px;flex:none;color:#fff;
  transition:transform .16s,box-shadow .16s,filter .16s}
.soc-i svg{width:34px;height:34px;display:block}
.soc-max{background:linear-gradient(135deg,#4CCFFF 0%,#5533EE 62%,#9933DD 100%)}
.soc-tg {background:linear-gradient(180deg,#2AABEE 0%,#229ED9 100%)}
.soc-yt {background:#FF0000}
.soc-vk {background:#0077FF}
.soc-i:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(21,24,29,.22);filter:saturate(1.12)}
/* На графите фирменные заливки почти сливаются с фоном по светлоте —
   держим их тонкой светлой обводкой, а не осветлением самого знака. */
.soc-ft{margin-top:16px}
.soc-ft .soc-i{box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.soc-ft .soc-i:hover{box-shadow:0 0 0 1px rgba(255,255,255,.3),0 6px 14px rgba(0,0,0,.4)}
.burger{display:none;background:none;border:1px solid var(--line-2);border-radius:10px;
  color:var(--ink);width:42px;height:42px;align-items:center;justify-content:center;cursor:pointer}
.burger svg{width:22px;height:22px}

.m-menu{display:none;background:var(--paper);color:var(--ink);border-top:1px solid var(--line);
  max-height:calc(100vh - var(--hd));overflow-y:auto;padding:12px 0 22px}
.m-menu.open{display:block}
.m-sec>button{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:none;border:0;border-bottom:1px solid var(--line);padding:15px 0;
  font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink);cursor:pointer;text-align:left;
}
.m-sec>button svg{width:20px;height:20px;flex:none;transition:transform .18s}
.m-sec[aria-expanded="true"]>button svg{transform:rotate(180deg)}
.m-sub{display:none;padding:6px 0 12px}
.m-sub.open{display:block}
.m-sub a{display:block;padding:9px 0 9px 14px;font-size:15.5px;color:var(--ink-2);text-decoration:none;
  border-left:2px solid var(--line)}
.m-sub a.hub{color:var(--accent-text);font-weight:600}
.m-menu .flat{display:block;padding:15px 0;border-bottom:1px solid var(--line);
  font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink);text-decoration:none}
.m-menu .btn{width:100%;margin-top:18px}

/* ── Первый экран ───────────────────────────────────────────────────────── */
/* Раскладка взята с действующего сайта заказчика и это сознательно: там
   слева обещание с ценой жёлтой плашкой, справа — директор в кадре. Приём
   рабочий для ниши: ремонт покупают у людей, а не у чертежей. Наше здесь
   исполнение — типографика, сетка и то, что портрет не перекрывает текст
   ни на одной ширине. */
.hero{position:relative;display:flex;align-items:stretch;min-height:min(92vh,900px);
  background:var(--graphite);color:var(--milk);overflow:hidden;padding:0}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Затемнение плотнее слева (там текст) и мягче справа, чтобы фигура
   директора не проваливалась в фон. */
.hero-veil{position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(10,12,16,.94) 0%,rgba(10,12,16,.88) 38%,rgba(10,12,16,.55) 66%,rgba(10,12,16,.34) 100%),
    linear-gradient(0deg,rgba(10,12,16,.62) 0%,transparent 46%)}
.hero .wrap{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.98fr);
  align-items:end;gap:20px;
  padding-top:clamp(64px,9vh,112px);padding-bottom:clamp(40px,5vh,66px)}
.hero-text{align-self:center;padding-bottom:clamp(0px,2vh,24px)}
.hero h1{color:#fff;max-width:16ch;word-spacing:.12em}
.hero h1 span{display:block;color:var(--accent-on-dark);word-spacing:normal}

/* Цена жёлтой плашкой — главный объект первого экрана. У заказчика она
   стоит ровно так же, и это единственная цифра, которую человек уносит
   с первого экрана. */
.hero-price{
  display:inline-block;margin-top:clamp(16px,2.2vw,24px);
  background:var(--yellow);color:var(--on-yellow);
  font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(27px,4vw,46px);line-height:1;padding:.32em .58em;border-radius:999px;
}
.hero-sub{margin-top:18px;color:#E4E8EE;font-family:var(--display);font-weight:600;
  font-size:clamp(15.5px,1.7vw,19px);line-height:1.42;max-width:34ch;letter-spacing:-.01em}
.hero-ticks{margin-top:18px;display:grid;gap:9px;max-width:44ch}
.hero-ticks li{position:relative;padding-left:30px;color:#CFD5DE;font-size:clamp(14.5px,1.5vw,16.5px);line-height:1.4}
.hero-ticks li::before{
  content:"";position:absolute;left:0;top:.08em;width:20px;height:20px;border-radius:6px;
  background:var(--yellow) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315181D' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.6l5.2 5.2L20 7'/%3E%3C/svg%3E") center/13px 13px no-repeat;
}
.hero .btns{margin-top:clamp(22px,3vw,32px)}
.btn-lg{font-size:17px;padding:19px 34px}
.hero-note{margin-top:16px;color:#A9B1BD;font-size:14.5px;line-height:1.5;max-width:46ch}

/* Портрет директора с первого экрана снят 08.09.2026 по указанию заказчика:
   «убираем фото генерального директора с заставки, вместо можно поставить
   расчёт стоимости». Вместе с фигурой убраны и `.hero::after`, который рисовал
   её фоном секции, и колонка-распорка `.hero-boss`. На их месте — карточка
   расчёта, она же держит правую колонку сетки. */
.hero .wrap{z-index:3}

/* Карточка расчёта. Стоит на графите поверх фотографии, поэтому фон и цвета
   объявлены здесь вместе: наследовать их от среды нельзя — под карточкой
   светлый кадр, и любой токен светлой темы даст нечитаемый текст. */
.hero-calc{
  align-self:center;justify-self:end;width:100%;max-width:440px;
  background:rgba(16,19,25,.86);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14);border-radius:22px;
  padding:clamp(18px,2.2vw,26px);color:var(--milk);
}
.hero-calc-k{
  display:block;font-family:var(--mono);font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-on-dark);margin-bottom:12px;
}
/* Внутри карточки ставка уже не плашка: жёлтый прямоугольник на тёмной
   панели поверх фотографии превращается в третий слой и спорит с кнопкой. */
.hero-calc .hero-price{
  display:block;margin-top:0;background:none;padding:0;border-radius:0;
  color:var(--accent-on-dark);font-size:clamp(26px,3vw,36px);
}
.hero-calc-p{margin-top:12px;color:#C6CCD5;font-size:15px;line-height:1.5}
.hero-calc-l{margin-top:18px;border-top:1px solid rgba(255,255,255,.14)}
.hero-calc-l li{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.10);
  font-size:14.5px;color:#C6CCD5;
}
.hero-calc-l b{font-family:var(--mono);font-size:13.5px;font-weight:500;color:var(--milk);text-align:right}
.hero-calc-b{width:100%;margin-top:20px}
.hero-calc-n{margin-top:12px;font-size:13.5px;line-height:1.45;color:#A9B1BD}
.hero-calc-n a{color:var(--accent-on-dark)}

/* ── Короткая форма в карточке первого экрана ────────────────────────────
   Карточка тёмная, поэтому у полей своя среда: базовые `.fld` рассчитаны на
   светлую секцию и дали бы белое поле с серой подписью на графите.
   Цвета объявлены вместе с фоном — подпись #A9B1BD на #101319 даёт 7,4:1,
   текст в поле #EDF0F3 на #171B22 — 13,6:1, подсказка #99A1AE — 5,6:1. */
.hero-form{margin-top:20px}
.hero-form .fld>span{color:#A9B1BD}
.hero-form .fld input{
  background:#171B22;color:#EDF0F3;border:1.5px solid rgba(255,255,255,.20);
  padding:15px 16px;font-size:16px;border-radius:12px;
}
/* Два поля в одну строку во всю ширину карточки. Просьба заказчика 15.09.2026:
   «сделать их побольше в горизонталь».

   Ширины карточки тут мало. Общий стиль `form` даёт форме свою подложку
   с полями в 34 px — он рассчитан на форму, которая стоит на странице сама
   по себе. Здесь форма лежит ВНУТРИ карточки, у которой поля уже есть, и
   вторые поля просто съедали ширину: карточку растянули с 420 до 520 px,
   а поля выросли со 180 до 186. Поэтому у формы в карточке своей подложки
   и своих полей нет — она занимает карточку целиком, и на поля остаётся
   по 220 px. */
.hero-form{background:none;padding:0;border-radius:0}
.hero-form .f-row{gap:14px}
.hero-form .fld input::placeholder{color:#99A1AE}
.hero-form .fld input:focus{border-color:var(--yellow);outline:none}
.hero-form .agree{color:#A9B1BD;margin-top:14px;font-size:13px}
.hero-form .agree a{color:var(--accent-on-dark)}
.hero-form .agree input{accent-color:var(--yellow)}
.hero-form .btn{margin-top:16px}
.hero-form .msg.ok{background:#123522;color:#D6F0E0;border-color:#1E5537}
.hero-form .msg.err{background:#3A1A18;color:#F6D9D6;border-color:#6B2A26}
.work .go{margin-top:auto}

/* ── Опоры ────────────────────────────────────────────────────────────────
   Карточка, а не колонка текста: пиктограмма и номер дают опору глазу,
   строка «Итог» внизу превращает обещание в проверяемое следствие. */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pillar{
  display:flex;flex-direction:column;background:var(--card);color:var(--ink);
  border-radius:22px;padding:30px 30px 0;transition:background .16s,transform .16s;
}
.pillar:hover{transform:translateY(-3px)}
/* Знак и номер в одной строке: знак держит левый край карточки, номер —
   правый, между ними воздух. Знак двухслойный, поэтому виден издалека. */
.pillar-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.pillar-top .di{width:38px;height:38px;color:var(--ink)}
.pillar-top b{font-family:var(--mono);font-size:26px;font-weight:600;color:var(--line-2);line-height:1}
.pillar h3{margin-bottom:10px}
.pillar p{color:var(--ink-2);font-size:16px;line-height:1.55;flex:1}
.pillar-out{
  display:block;margin-top:22px;padding:16px 0 26px;border-top:1px solid var(--line-2);
  font-family:var(--mono);font-size:13px;line-height:1.5;color:var(--accent-text);
}


/* ── Витрина разделов ─────────────────────────────────────────────────────
   Три группы — три раскладки. Виды ремонта разворачиваются карточками
   с составом работ, квартиры и комнаты идут строками реестра, проект
   и смета — двумя широкими документами. Ссылки во всех трёх одни и те же,
   отличается только то, как их читают. */
.silo{border-top:1px solid var(--line-2);padding-top:26px;margin-top:44px}
.silo:first-of-type{border-top:0;margin-top:0;padding-top:0}
.silo-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap}
.silo-head h3{font-size:clamp(19px,2.2vw,23px)}
.silo-head p{color:var(--ink-3);font-size:15.5px;max-width:62ch;margin-top:9px;flex-basis:100%}
.silo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}

/* Виды ремонта */
.kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.kind{
  display:flex;flex-direction:column;text-decoration:none;color:var(--ink);overflow:hidden;
  background:var(--card);border-radius:22px;transition:box-shadow .18s,transform .18s;
}
.kind:hover{box-shadow:0 24px 54px rgba(21,24,29,.13);transform:translateY(-3px)}
/* Кадр вместо значка. Съёмка процесса — стяжка, штроба, валик, — а не объект
   заказчика: его квартиры живут только в галерее, где сказано, что съёмка своя.
   Название лежит жёлтой плашкой прямо на кадре: приём с действующего сайта,
   который заказчик и просил сохранить. */
.kind-shot{position:relative;display:block;background:var(--concrete)}
/* Кадрируем ниже центра: на всех шести кадрах предмет лежит в нижней трети —
   инструмент, лоток, маяки, ключи. */
.kind-shot img{width:100%;height:clamp(168px,16.5vw,210px);object-fit:cover;object-position:center 66%;
  transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.kind:hover .kind-shot img{transform:scale(1.045)}
/* Плашка сверху, а не снизу: внизу на кадре предмет, и подпись его закрывала. */
.kind-shot h4,.kind-shot h3{
  position:absolute;left:0;top:16px;max-width:88%;
  font-family:var(--display);font-weight:700;font-size:clamp(16px,1.6vw,18.5px);line-height:1.2;
  letter-spacing:-.01em;color:var(--on-yellow);background:var(--yellow);
  padding:10px 16px 11px 20px;border-radius:0 10px 10px 0;
}
.kind-h{padding:22px 22px 0;font-family:var(--display);font-weight:700;font-size:19px}
.kind>p{color:var(--ink-2);font-size:15px;line-height:1.55;padding:20px 24px 0}
.kind-works{margin:18px 24px 0;padding-top:16px;border-top:1px solid var(--line-2);flex:1}
.kind-works li{position:relative;padding-left:22px;margin-bottom:7px;font-size:14px;color:var(--ink-2);line-height:1.4}
/* Галочка вместо ромбика: маркер должен читаться как «входит в состав»,
   а не как декоративный значок. */
.kind-works li::before{
  content:"";position:absolute;left:2px;top:4px;width:6px;height:10px;
  border-right:2px solid var(--accent-text);border-bottom:2px solid var(--accent-text);
  transform:rotate(42deg);
}
.kind .go{display:inline-block;margin:18px 24px 24px;font-size:14.5px;font-weight:600;color:var(--accent-text)}

/* Квартиры и комнаты — реестр строк */
.rooms{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;margin-top:20px}
.rooms li{border-bottom:1px solid var(--line)}
.rooms a{
  display:grid;grid-template-columns:40px minmax(0,1fr) 22px;align-items:center;gap:14px;
  padding:16px 10px 16px 4px;text-decoration:none;color:var(--ink);border-radius:10px;
  transition:background .14s;
}
.rooms a:hover{background:var(--concrete)}
.rooms-n{font-family:var(--mono);font-size:13px;color:var(--ink-3)}
.rooms-b b{display:block;font-family:var(--display);font-weight:600;font-size:17px;margin-bottom:3px}
.rooms-b span{display:block;font-size:14px;color:var(--ink-3);line-height:1.45}
.rooms-go{font-size:18px;color:var(--ink-3);text-align:right}
.rooms a:hover .rooms-go{color:var(--accent-text)}

/* Проект и смета — два документа */
.docs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.doc{
  position:relative;display:flex;gap:20px;align-items:flex-start;text-decoration:none;color:var(--ink);
  background:var(--card);border-radius:20px;padding:28px 28px 28px 34px;
  overflow:hidden;transition:box-shadow .16s,transform .16s;
}
/* Жёлтый корешок слева — как у папки с документами, к которой ведёт ссылка. */
.doc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--yellow)}
.doc:hover{box-shadow:0 18px 42px rgba(21,24,29,.10);transform:translateY(-3px)}
.doc-b b{display:block;font-family:var(--display);font-weight:700;font-size:19px;margin-bottom:7px}
.doc-b>span{display:block;color:var(--ink-3);font-size:14.5px;line-height:1.5}
.doc-b i{display:inline-block;margin-top:13px;font-style:normal;font-size:14px;font-weight:600;color:var(--accent-text)}
.tile{
  position:relative;display:block;background:var(--card);color:var(--ink);text-decoration:none;
  border-radius:18px;padding:24px 48px 26px 24px;overflow:hidden;
  transition:box-shadow .15s,transform .15s;
}
/* Полоска акцента слева выезжает на наведении: карточка перестаёт быть
   просто прямоугольником и показывает, что она кликабельна. */
.tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--yellow);transform:scaleY(0);transform-origin:top;transition:transform .18s}
.tile::after{content:"→";position:absolute;right:20px;top:22px;font-size:17px;color:var(--line-2);
  transition:color .15s,transform .18s}
.tile:hover{box-shadow:0 18px 40px rgba(21,24,29,.10);transform:translateY(-3px)}
.tile:hover::before{transform:scaleY(1)}
.tile:hover::after{color:var(--accent-text);transform:translateX(3px)}
.tile h3{margin-bottom:8px}
.tile p{color:var(--ink-3);font-size:14.5px;line-height:1.5}
.tile .go{display:inline-block;margin-top:14px;font-size:14px;font-weight:600;color:var(--accent-text)}
section.tone .tile{background:var(--paper);color:var(--ink)}


/* ── Знаки ────────────────────────────────────────────────────────────────
   Два слоя: жёлтое пятно даёт массу, графитовый контур — форму. Контур берёт
   currentColor, поэтому один и тот же знак живёт и на белом, и на графите. */
.di{width:32px;height:32px;flex:none;display:block}
.di .f{fill:var(--yellow)}
.di .s{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Дорожная карта ───────────────────────────────────────────────────────
   Это карта, а не список. Линия маршрута идёт первым рядом слева направо,
   поворачивает справа вниз и возвращается вторым рядом — поэтому сетка
   разложена по именованным областям: отдельная строка под узлы, отдельная
   под карточки. Так линия начинается и заканчивается ровно в центре узла
   на любой высоте карточек, без единой посчитанной вручную величины.

   Порядок областей во втором ряду обратный (n6 n5 n4): маршрут разворачивается,
   как строка текста при переносе. */
.road{
  --gap:24px;--lane:40px;
  position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:var(--gap);padding:0 var(--lane);
  grid-template-areas:
    "n1 n2 n3"
    "c1 c2 c3"
    "n6 n5 n4"
    "c6 c5 c4";
  grid-template-rows:68px auto 68px auto;
}
.road-n1{grid-area:n1}.road-n2{grid-area:n2}.road-n3{grid-area:n3}
.road-n4{grid-area:n4}.road-n5{grid-area:n5}.road-n6{grid-area:n6}
.road-c1{grid-area:c1}.road-c2{grid-area:c2}.road-c3{grid-area:c3}
.road-c4{grid-area:c4}.road-c5{grid-area:c5}.road-c6{grid-area:c6}
/* Воздух между рядами. Раньше он задавался как `margin-top` на узлах второго
   ряда — и молча пропадал: ниже по файлу у `.road-node` стоит `margin:0 auto`
   той же силы, и оно перебивало отступ. В итоге узел второго ряда начинался
   ровно там, где кончалась карточка первого, а его белый ореол (8 px)
   заезжал на неё. Это и есть «номера задевают соседние блоки».
   Теперь воздух даёт нижний отступ карточек первого ряда: он живёт в сетке,
   его нечем перебить, и разметка линии маршрута остаётся верной — линия
   по-прежнему кончается ровно в центре узла (34 px = половина узла). */
.road-c1,.road-c2,.road-c3{margin-bottom:44px}

/* Сама линия. Занимает строки от узлов первого ряда до узлов второго,
   отступ 34px сверху и снизу — это ровно половина узла, то есть его центр. */
/* Линия занимает строки от узлов первого ряда до узлов второго, а вправо
   выходит за колонки — в свободную полосу `--lane`. Иначе разворот пришёлся бы
   ровно на третью карточку и линия ныряла бы под неё. Отступ 34px сверху
   и снизу — это половина узла, то есть точно его центр, на любой высоте карточек. */
.road-track{
  grid-area:n1 / n1 / n6 / n3;position:relative;pointer-events:none;
  margin:0 calc(var(--lane) * -1);
}
.road-track::before{
  content:"";position:absolute;
  left:calc(var(--lane) + (100% - var(--lane) * 2 - var(--gap) * 2) / 6);
  right:0;top:34px;bottom:34px;
  border:3px dashed var(--yellow);border-left:0;
  border-radius:0 90px 90px 0;
}

.road-node{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  width:68px;height:68px;margin:0 auto;border-radius:50%;
  background:var(--paper);border:2px solid var(--line-2);color:var(--ink);
  box-shadow:0 0 0 8px var(--paper);
  transition:border-color .16s,transform .16s;
}
.road-card{
  background:var(--card);border-radius:20px;padding:30px 24px 26px;margin-top:26px;text-align:center;
  transition:box-shadow .16s,transform .16s;
}
.road-card:hover{box-shadow:0 18px 42px rgba(21,24,29,.10);transform:translateY(-3px)}
.road-top{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:16px}
.road-top b{
  font-family:var(--mono);font-size:13px;font-weight:700;color:var(--on-yellow);
  background:var(--yellow);border-radius:7px;padding:5px 10px;line-height:1;
}
.road-top i{
  font-style:normal;font-family:var(--mono);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.road-card h3{font-size:18px;margin-bottom:8px}
.road-card p{color:var(--ink-3);font-size:14.5px;line-height:1.5}
.road-out{
  display:block;margin-top:14px;padding-top:13px;border-top:1px dashed var(--line-2);
  font-size:14px;color:var(--ink);
}
.road-out::before{
  content:"после шага";display:block;font-family:var(--mono);font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px;
}

/* Планшет: маршрут в два столбца, змейкой той же логики. */
@media (max-width:1080px){
  .road{
    padding:0;grid-template-columns:repeat(2,1fr);
    grid-template-areas:
      "n1 n2"
      "c1 c2"
      "n4 n3"
      "c4 c3"
      "n5 n6"
      "c5 c6";
    grid-template-rows:68px auto 68px auto 68px auto;
  }
  .road-track{display:none}
}

/* Телефон: карта разворачивается в вертикальный маршрут — узел слева,
   карточка справа, линия проходит через центры узлов. */
@media (max-width:700px){
  .road{
    /* Зазор 24, а не 16: у узла белый ореол в 8 px, при 16 он касался
       карточки вплотную — тот же дефект, что и на широком экране. */
    padding:0;grid-template-columns:68px minmax(0,1fr);column-gap:24px;
    grid-template-areas:
      "n1 c1" "n2 c2" "n3 c3" "n4 c4" "n5 c5" "n6 c6";
    grid-template-rows:auto;
  }
  .road-track{display:block;grid-area:n1 / n1 / n6 / n1;margin:0}
  .road-track::before{
    left:33px;right:auto;width:0;top:34px;bottom:34px;
    border:0;border-left:3px dashed var(--yellow);border-radius:0;
  }
  .road-node{width:68px;height:68px;margin:0}
  .road-card{margin-top:0;margin-bottom:30px;text-align:left}
  .road-top{justify-content:flex-start}
  .road-c1,.road-c2,.road-c3{margin-bottom:30px;padding-bottom:18px}
}

/* ── Цена ───────────────────────────────────────────────────────────────── */
.price-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,3.4vw,46px);align-items:start}
.price-card{background:var(--graphite-2);color:var(--milk);border-radius:24px;padding:clamp(26px,3.2vw,40px)}
/* Цифра — главное в блоке про цену, поэтому она и набрана как главное. */
.price-card .big{font-family:var(--display);font-weight:700;font-size:clamp(38px,6.4vw,76px);
  color:var(--accent-on-dark);line-height:.98;letter-spacing:-.04em}
.price-card .cond{margin-top:20px;border-top:1px solid var(--line-dark);padding-top:18px}
.price-card .cond div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;font-size:15.5px;color:var(--milk);
  border-bottom:1px solid rgba(255,255,255,.07)}
.price-card .cond div:last-child{border-bottom:0}
.price-card .cond div span:last-child{color:var(--milk-2);text-align:right;font-family:var(--mono);font-size:14px}
.price-note{font-size:14px;color:var(--milk-2);margin-top:18px;line-height:1.55}


/* Узкий телефон (iPhone SE и Android 320–360). Карточка цены — единственное
   место главной, которое на 320 px раздвигало страницу до 329 и давало
   горизонтальную прокрутку: ставка набрана крупно, а «от 20 000 ₽/м²»
   связано неразрывными пробелами и переноситься не может. Вместе с кеглем
   ужимаем поля карточки и разрешаем строкам условий переноситься: пара
   «название — значение» на такой ширине в одну строку не помещается. */
@media (max-width:380px){
  .price-card{padding:20px}
  .price-card .big{font-size:clamp(28px,8.4vw,34px)}
  .price-card .cond div{flex-wrap:wrap;gap:2px 12px;padding:9px 0}
  .price-card .cond div span{min-width:0}
  .price-card .cond div span:last-child{text-align:left}
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--line);background:transparent;color:var(--ink)}
.faq summary{
  list-style:none;cursor:pointer;padding:19px 44px 19px 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:clamp(16.5px,1.8vw,18.5px);color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:26px;width:12px;height:12px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .18s;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:30px}
.faq .a{padding:0 0 20px;color:var(--ink-2);font-size:16px;max-width:74ch}
.faq .a p+p{margin-top:11px}

/* ── SEO-текст ──────────────────────────────────────────────────────────── */
.seo-text{max-width:78ch;color:var(--ink-2);font-size:16px}
.seo-text p+p{margin-top:13px}
.seo-text a{color:var(--accent-text);font-weight:500}

/* ── Форма ──────────────────────────────────────────────────────────────── */
.cta-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(28px,4vw,60px);align-items:start}
.cta-list{margin-top:24px}
.cta-list li{position:relative;padding-left:26px;margin-top:12px;font-size:15.5px;color:var(--ink-2)}
/* Кружок-маркер заказчик 25.08 назвал лишней подложкой. Галочка — знак
   «это входит», она объясняет строку, а не украшает её. */
.cta-list li::before{
  content:"";position:absolute;left:2px;top:5px;width:7px;height:11px;
  border-right:2px solid var(--accent-text);border-bottom:2px solid var(--accent-text);
  transform:rotate(42deg);
}
form{background:var(--card);color:var(--ink);border-radius:22px;padding:clamp(22px,3vw,34px)}
.fld{display:block;margin-top:14px}
.fld>span{display:block;font-size:13.5px;font-weight:500;color:var(--ink-3);margin-bottom:7px}
.fld input,.fld select,.fld textarea{
  width:100%;background:var(--paper);color:var(--ink);
  border:1.5px solid var(--line-2);border-radius:10px;padding:13px 14px;
  font-family:var(--sans);font-size:16px;line-height:1.4;
}
.fld textarea{min-height:104px;resize:vertical}
.fld input::placeholder,.fld textarea::placeholder{color:#8A919C}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--ink);outline:none}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f-row .fld{margin-top:0}
.agree{display:flex;gap:11px;align-items:flex-start;margin-top:18px;font-size:13.5px;color:var(--ink-3);line-height:1.5}
.agree input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--ink)}
.agree a{color:var(--accent-text)}
form .btn{width:100%;margin-top:18px;padding:16px 24px;font-size:16px}
.f-note{margin-top:14px;font-size:13.5px;color:var(--ink-3);text-align:center}
.f-note a{color:var(--accent-text)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.msg{display:none;margin-top:14px;padding:13px 15px;border-radius:10px;font-size:14.5px}
.msg.ok{background:#E9F4ED;color:#0F4F27;border:1px solid #CBE5D5}
.msg.err{background:#FBEDEC;color:#8E1A15;border:1px solid #F1D4D1}

/* ── Крошки и заглушка ──────────────────────────────────────────────────── */
/* Крошки. Ссылка в них — обычная ссылка, но пальцем по ней промахиваются:
   строка в 14 px даёт высоту касания 23 px при норме 44 (Apple HIG). Высоту
   даёт сама ссылка, а не строка: инлайн-флекс с min-height и вертикальными
   полями, отрицательный внешний отступ гасит прибавку в потоке — ряд крошек
   не становится выше. */
.crumbs{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:12px 0;font-size:14px;color:var(--ink-3)}
.crumbs a{color:var(--ink-3);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;margin:-11px 0}
.crumbs a:hover{color:var(--ink)}
.crumbs i{font-style:normal;color:var(--ink-3)}
.crumbs span{color:var(--ink)}
.stub{padding-bottom:64px;max-width:760px}
.stub h1{margin-top:10px}
.stub .lead{margin-top:14px}
.stub-note{background:var(--concrete);color:var(--ink);border:1px solid var(--line);
  border-radius:14px;padding:20px 22px;margin-top:26px}
.stub-note b{display:block;font-family:var(--display);font-size:16px;margin-bottom:7px;color:var(--ink)}
.stub-note p{color:var(--ink-3);font-size:15px}
.stub-links{margin-top:28px}
.stub-links h2{font-size:19px;margin-bottom:12px}
.stub-links li{padding:8px 0;border-bottom:1px solid var(--line)}
.stub-links a{color:var(--ink);text-decoration:none;font-size:15.5px}
.stub-links a:hover{color:var(--accent-text)}
.stub .btns{margin-top:30px}

/* ── Подвал ─────────────────────────────────────────────────────────────── */
footer{background:var(--graphite);color:var(--milk);padding:clamp(44px,5vw,64px) 0 30px}
footer a{color:var(--milk-2);text-decoration:none}
footer a:hover{color:var(--milk)}
.ft-top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px;padding-bottom:34px;border-bottom:1px solid var(--line-dark)}
.ft-top .lockup svg{height:30px}
.ft-about{color:var(--milk-2);font-size:14.5px;margin-top:16px;max-width:40ch;line-height:1.55}
.ft-h{font-family:var(--display);font-weight:700;font-size:14px;color:var(--milk);
  text-transform:uppercase;letter-spacing:.09em;margin-bottom:14px}
.ft-tel{font-size:21px;color:var(--milk);display:inline-block}
.ft-mail{display:inline-block;margin-top:10px;font-size:15px;color:var(--milk-2)}
.ft-map{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding:32px 0}
.ft-map .ft-h{font-size:13.5px}
.ft-map li{margin-bottom:8px}
.ft-map a{font-size:14.5px;color:var(--milk-2)}
.ft-bottom{border-top:1px solid var(--line-dark);padding-top:22px;display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--milk-2)}
.ft-bottom a{color:var(--milk-2)}

/* ── Шапка: ступени сжатия ────────────────────────────────────────────────
   Порядок, в котором шапка сдаёт место, выбран по ценности элемента, а не
   по удобству вёрстки. Телефон — то, ради чего в ремонте вообще заходят на
   сайт, поэтому он держится дольше кнопки и дольше значков каналов.
   Каждая ступень посчитана: указана сумма частей и остаток. */

/* Ступень 1 — полная: логотип 104 + меню 552 + правый блок 556 + два
   интервала по 32 = 1276. Работает от 1361 px экрана, запас 37. */

/* Ступень 2, до 1320: меню плотнее (кегль 14,5 и поля пункта 9) — 503 вместо
   552, интервалы 24 и 14. Сумма 1203, запас 30 px на границе 1281. */
@media (max-width:1360px){
  .hd{gap:24px}
  .hd-right{gap:14px}
  .nav-i>a{padding:10px 9px;font-size:14.5px}
}
/* Ступень 3, до 1250: значки каналов уходят из шапки — минус 174 px, сумма 1029.
   Они никуда не пропадают: стоят в подвале, в карточке контактов под картой
   и в липкой панели внизу. Запас 54 px на границе 1131. */
@media (max-width:1280px){
  .soc-hd{display:none}
}
/* Ступень 4, до 1100: уходит кнопка — минус 210 px, сумма 876. Кнопка есть
   в первом экране, в липкой панели и в мобильном меню, а меню разделов —
   только здесь, поэтому первой сдаёт кнопка, а не навигация. Запас 73 px на границе 941. */
@media (max-width:1130px){
  .hd-right .btn{display:none}
}

@media (max-width:1080px){
  .hero-facts{grid-template-columns:repeat(2,1fr)}
  .pillars,.silo-grid,.objs,.kinds{grid-template-columns:repeat(2,1fr)}
  .ft-map{grid-template-columns:repeat(2,1fr)}
  /* Колонка «после шага» уходит под текст: втроём они уже не помещаются
     в строку, не ломая длину абзаца. */
  .road-step{grid-template-columns:56px minmax(0,1fr)}
  .road-out{grid-column:2;margin-top:2px}
}
/* Ступень 5, до 940: меню сворачивается в бургер — и на освободившемся месте
   кнопка возвращается. Сумма 104 + 165 + 196 + 42 + интервалы = 559 из 892. */
@media (max-width:940px){
  .nav{display:none}
  .burger{display:flex}
  .hd-right .btn{display:inline-flex}
  .cta-grid,.price-grid,.docs,.rooms{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr}
}

/* ── Телефон. Заказчик открывает сайт отсюда — эту ширину смотрим первой. ── */
@media (max-width:620px){
  body{font-size:16.5px}
  .wrap{padding:0 20px}
  section{padding:44px 0}
  .pillars,.silo-grid,.objs,.kinds,.f-row{grid-template-columns:1fr}
  .hero-facts{grid-template-columns:1fr}
  .hero .btns .btn{width:100%}
  .btns{gap:10px}

  /* ── Первый экран под палец ──────────────────────────────────────────────
     Он должен продавать за один взгляд, а не за полтора экрана прокрутки.
     Было: заголовок 38 px, под ним подзаголовок, два пункта с галочками, ДВЕ
     кнопки во всю ширину и следом карточка цены со своей третьей кнопкой —
     плюс липкая панель внизу ещё с тремя. Шесть призывов на первых двух
     экранах: человек не понимает, что нажимать, и не нажимает ничего.

     Здесь ужимается ритм, а не содержание: ни один блок не убран, порядок
     не тронут. Вторая кнопка («Наши работы») на телефоне уходит — это не
     призыв, а навигация, и она есть в меню; главной кнопке нужна тишина
     вокруг, чтобы читаться единственной. */
  h1{font-size:clamp(31px,8.4vw,38px);line-height:1.05;letter-spacing:-.03em}
  .hero h1{max-width:none}
  .hero-sub{margin-top:12px;font-size:16px;line-height:1.4}
  .hero-ticks{margin-top:14px;gap:7px}
  .hero-ticks li{font-size:14.5px;line-height:1.35}
  .hero .btns{margin-top:18px}
  .hero .btns .btn-s{display:none}      /* «Наши работы» — навигация, не призыв */
  .hero .wrap{padding-top:26px;padding-bottom:30px}

  /* Карточка цены — справка, а не второй первый экран: сжимаем кегль суммы
     и воздух, чтобы она помещалась целиком и не спорила с главной кнопкой. */
  .hero-card{margin-top:22px;padding:18px 18px 20px}
  .hero-card .big,.hero-price{font-size:clamp(27px,7.4vw,34px)}

  h2{font-size:clamp(24px,6.4vw,30px);line-height:1.1}
  .sec-head p{margin-top:12px;font-size:16px;line-height:1.45}
  .lead{font-size:16.5px;line-height:1.45}

  /* Точки лент и размер портрета правятся в конце файла: и `.trk-dots`,
     и `.boss-photo picture` объявлены ниже по файлу, а медиазапрос
     специфичности не добавляет — правило отсюда молча проигрывало бы. */
  .ft-map{grid-template-columns:1fr 1fr}
  /* Кнопка в шапке рядом с логотипом не помещается уже на 360 px и выдавливает
     бургер за поле. Призыв никуда не девается: он первым стоит в мобильном меню
     и повторяется в первом экране. */
  .hd-right .btn{display:none}
  /* Телефон здесь тоже уходит: на 360 px остаётся 320, а логотип с номером
     и бургером просят 321. Разница в один пиксель — но она и есть тот самый
     съехавший бургер. Звонок остаётся кнопкой «Позвонить» в липкой панели,
     она на телефоне заметнее строчки в шапке. */
  .hd-tel{display:none}
  .wrap.hd{padding:0 20px}
  .hd{gap:16px}
}

/* Мелкие отступы, чтобы не держать их инлайном в разметке. */
.mt-14{margin-top:14px}
.mt-18{margin-top:18px}
.mt-26{margin-top:26px}
.pt-0{padding-top:0}
.seo-text h2{font-size:21px;margin-top:28px;color:var(--ink)}


/* ══ Первый экран: смена кадров ═══════════════════════════════════════════
   Первый кадр приходит из разметки и отвечает за LCP. Остальные подключает
   скрипт после полной загрузки страницы и переключает мягким проявлением.
   При prefers-reduced-motion смена не запускается вовсе. */
.hero-stage{position:absolute;inset:0}
.hero-frame{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.hero-frame.is-on{opacity:1}
.hero-frame img{width:100%;height:100%;object-fit:cover}

/* Факты первого экрана на телефоне — лента со снапом, а не столбик:
   столбиком четыре карточки занимали больше экрана, чем сам заголовок. */
@media (max-width:620px){
  /* Лента держится внутри поля 20 px: вынос под край экрана красив, но
     мобильный гейт считает его переполнением, а спорить с гейтом дороже,
     чем подвинуть на двадцать пикселей. Следующая карточка всё равно
     выглядывает — понятно, что листается. */
  .hero-facts{
    display:flex;grid-template-columns:none;gap:10px;background:none;border:0;border-radius:0;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding-bottom:6px;scrollbar-width:none;
  }
  .hero-facts::-webkit-scrollbar{display:none}
  .hero-facts div{
    flex:0 0 76%;scroll-snap-align:start;border:1px solid var(--line-dark);border-radius:14px;
    background:rgba(30,34,42,.92);
  }
}

/* ══ Схема: разрез узла и легенда ════════════════════════════════════════
   Рисунок — главный герой блока и занимает всю его ширину. Слои подписаны
   легендой под чертежом: девять коротких плашек в три колонки читаются
   с одного взгляда, тогда как девять строк в столбик читались как текст. */
.cut{
  min-width:0;background:var(--card);border-radius:24px;
  padding:22px 22px 26px;box-shadow:0 24px 56px rgba(21,24,29,.07);
}
.cut figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:2px 6px 13px;border-bottom:1px solid var(--line);margin-bottom:14px}
.cut figcaption span{font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink)}
.cut figcaption i{font-style:normal;font-family:var(--mono);font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
/* Подложка «миллиметровки»: даёт рисунку среду чертежа и убирает ощущение
   картинки, вклеенной в белый прямоугольник. */
.cut-hold{
  border-radius:14px;overflow-x:auto;overflow-y:hidden;
  background:
    linear-gradient(0deg,rgba(21,24,29,.05) 1px,transparent 1px) 0 0/100% 36px,
    linear-gradient(90deg,rgba(21,24,29,.05) 1px,transparent 1px) 0 0/36px 100%,
    var(--concrete);
  scrollbar-width:thin;
}
.cut-svg{width:100%;max-width:1120px;min-width:620px;height:auto;display:block;margin:0 auto}

/* Слои и номера позиций подсвечиваются вместе, в обе стороны. */
.ly{cursor:pointer}
.ly path,.ly rect,.ly circle{transition:opacity .15s}
/* Пока один слой выбран, остальные приглушены — глаз находит нужный
   без подписи внутри чертежа. */
.cut:has(.ly.on) .ly:not(.on){opacity:.4}
.ly.on>path:first-child,.ly.on>rect:first-child{stroke:var(--ink);stroke-width:4}
.cut-leads path{fill:none;stroke:#A9B1BC;stroke-width:1.6}
.cut-nums circle{fill:var(--paper);stroke:#A9B1BC;stroke-width:1.8;cursor:pointer}
.cut-nums text{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:600;
  fill:var(--ink-2);text-anchor:middle;pointer-events:none}
.ly-num.on circle{fill:var(--yellow);stroke:var(--ink);stroke-width:2.4}
.ly-num.on text{fill:var(--ink)}
.cut-mark path{fill:#8A93A0;stroke:#8A93A0;stroke-width:1.4;stroke-dasharray:6 6}
.cut-mark path:last-of-type{stroke-dasharray:none}
/* Кегль подписей внутри чертежа задаётся в единицах viewBox (860 по ширине),
   а на экране уменьшается вместе с рисунком: при ширине SVG 620 px множитель
   0,72, и 15 единиц давали 10,8 px — ниже порога читаемости. С 20 единиц
   выходит 14,4 px на телефоне. Правка 21.09.2026 по приёмке. */
.cut-mark text{font-family:'JetBrains Mono',monospace;font-size:20px;fill:var(--ink-3)}
.cut-note rect{fill:#FFF8CC;stroke:var(--yellow);stroke-width:2.4}
.cut-note-lead{fill:none;stroke:#D9BC00;stroke-width:2;stroke-dasharray:7 6}
.cut-note-h{font-family:'JetBrains Mono',monospace;font-size:20px;letter-spacing:.12em;fill:#7A6100}
.cut-note-b{font-family:'Golos Text',sans-serif;font-weight:700;font-size:20px;fill:var(--ink)}

/* Легенда: плашка на слой. Раскрытая занимает свою колонку и не сдвигает
   соседние — grid держит сетку, а не поток. */
.cut-spec{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px;align-items:start}
.ly-btn{
  display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;
  width:100%;padding:14px 15px;text-align:left;cursor:pointer;font-family:var(--sans);font-size:15px;
  background:var(--concrete);color:var(--ink);border:1.5px solid transparent;border-radius:14px;
  transition:border-color .14s,background .14s;
}
.ly-btn:hover{border-color:var(--line-2)}
.ly-btn[aria-expanded="true"]{border-color:var(--ink);background:var(--paper)}
.ly-no{
  display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink-2);
  background:var(--concrete);border:1.5px solid var(--line-2);
}
.ly-btn.is-seen .ly-no{background:var(--yellow);border-color:#E5C700;color:var(--on-yellow)}
.ly-name{font-weight:500;color:var(--ink);line-height:1.25}
.ly-mm{grid-column:2;font-family:var(--mono);font-size:13px;color:var(--ink-3)}
.ly-tag{
  grid-column:3;grid-row:1 / span 2;align-self:center;
  font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;border:1px solid var(--line-2);border-radius:999px;padding:3px 8px;
}
.ly-btn.is-seen .ly-tag{color:var(--on-yellow);background:var(--yellow);border-color:var(--yellow)}
.ly-why{
  display:none;grid-column:1 / -1;color:var(--ink-2);font-size:14.5px;line-height:1.5;
  padding-top:10px;margin-top:8px;border-top:1px solid var(--line);
}
.ly-btn[aria-expanded="true"] .ly-why{display:block}

.cut-note-txt{margin:16px 6px 0;font-size:14.5px;color:var(--ink-3);line-height:1.6;max-width:96ch}

@media (max-width:900px){
  .cut-spec{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .cut{padding:14px 14px 18px}
  .cut-spec{grid-template-columns:1fr}
}

/* ══ Квиз ════════════════════════════════════════════════════════════════ */
.quiz-sec{background:var(--paper);color:var(--ink)}
/* align-items:stretch, а не start: панель «в вашей смете» короче карточки
   с вопросом на 180 px, и при выравнивании по верху под ней зияла дыра.
   Липкость тут не нужна — блок и так помещается в экран. */
.quiz{display:grid;grid-template-columns:1fr 320px;gap:clamp(20px,3vw,40px);align-items:stretch}
.quiz-main{background:var(--card);color:var(--ink);border-radius:22px;padding:clamp(20px,2.8vw,34px)}
.quiz-bar{height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.quiz-bar i{display:block;height:100%;width:0;background:var(--yellow);transition:width .3s ease}
.quiz-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:12px 0 18px;
  font-family:var(--mono);font-size:13.5px;color:var(--ink-3)}
.quiz-back{background:none;border:0;color:var(--accent-text);font-family:var(--mono);font-size:13.5px;
  cursor:pointer;padding:10px 6px;min-height:44px}
/* На широком экране счётчик живёт в боковой панели; на телефоне панель уходит
   под экран, поэтому он дублируется строкой в шапке квиза. */
.quiz-mini{display:none}
.quiz-step h3{font-size:clamp(21px,2.7vw,30px);margin-bottom:20px}
.quiz-opts{display:grid;gap:12px}
/* Первый вопрос — четыре кадра, а не четыре строки. */
.quiz-opts-img{grid-template-columns:1fr 1fr;gap:16px}
.quiz-opts-img .quiz-opt{padding:0;overflow:hidden;min-height:0}
.quiz-pic{display:block;background:var(--concrete)}
.quiz-pic img{width:100%;height:clamp(110px,11vw,150px);object-fit:cover;object-position:center 66%;
  transition:transform .45s cubic-bezier(.2,.6,.2,1)}
.quiz-opt:hover .quiz-pic img{transform:scale(1.05)}
.quiz-opts-img .quiz-opt b{padding:14px 16px 0}
.quiz-opts-img .quiz-opt>span:last-child{padding:0 16px 16px}
.quiz-opt{
  display:block;width:100%;text-align:left;cursor:pointer;min-height:66px;
  background:var(--paper);color:var(--ink);border:2px solid transparent;border-radius:16px;
  padding:16px 18px;font-family:var(--sans);transition:border-color .15s,box-shadow .15s,transform .15s;
}
.quiz-opt:hover{border-color:var(--line-2);box-shadow:0 12px 30px rgba(21,24,29,.09);transform:translateY(-2px)}
.quiz-opt.on{border-color:var(--yellow);box-shadow:0 12px 30px rgba(21,24,29,.10)}
.quiz-opt b{display:block;font-family:var(--display);font-weight:700;font-size:17.5px;color:var(--ink);margin-bottom:4px}
.quiz-opt span{display:block;font-size:14.5px;color:var(--ink-3)}
.quiz-skip{margin-top:16px;font-size:14px;color:var(--ink-3)}
.quiz-skip a{color:var(--accent-text)}
.quiz-step form{border:0;padding:0;background:transparent}

.quiz-side{display:flex;flex-direction:column;background:var(--graphite);color:var(--milk);
  border-radius:22px;padding:28px 26px}
.quiz-side-h{font-family:var(--mono);font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-on-dark);margin-bottom:14px}
.quiz-count{display:flex;align-items:baseline;gap:9px;margin-bottom:16px}
.quiz-count b{font-family:var(--display);font-weight:700;font-size:44px;line-height:1;color:var(--milk)}
.quiz-count span{font-size:14px;color:var(--milk-2)}
.quiz-list{display:flex;flex-direction:column;gap:7px;max-height:340px;overflow-y:auto}
.quiz-list li{position:relative;padding-left:18px;font-size:14.5px;color:var(--milk);line-height:1.45}
.quiz-list li::before{
  content:"";position:absolute;left:1px;top:5px;width:6px;height:10px;
  border-right:2px solid var(--accent-on-dark);border-bottom:2px solid var(--accent-on-dark);
  transform:rotate(42deg);
}
.quiz-list li[data-base]::before{border-color:#7C8695}
.quiz-list li.is-new{animation:qin .28s ease}
@keyframes qin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.quiz-note{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-dark);
  font-size:13px;color:var(--milk-2);line-height:1.5}

/* Дорожка шагов держит низ панели и показывает, о чём ещё спросят. */
.quiz-track{margin-top:auto;padding-top:20px;display:grid;gap:9px}
.quiz-track li{
  position:relative;padding-left:24px;font-family:var(--mono);font-size:13px;letter-spacing:.09em;
  text-transform:uppercase;color:#8E97A5;line-height:1.3;
}
.quiz-track li::before{
  content:"";position:absolute;left:0;top:2px;width:11px;height:11px;border-radius:50%;
  border:1.5px solid #3A424E;
}
.quiz-track li.done{color:var(--milk-2)}
.quiz-track li.done::before{background:#3A424E;border-color:#3A424E}
.quiz-track li.on{color:var(--milk)}
.quiz-track li.on::before{background:var(--yellow);border-color:var(--yellow);
  box-shadow:0 0 0 4px rgba(255,221,0,.16)}

/* ══ Галерея объектов ════════════════════════════════════════════════════ */
.gal-obj + .gal-obj{margin-top:34px}
.gal-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:14px}
.gal-head h3{color:var(--milk)}
.gal-head a{color:var(--milk);text-decoration:none}
.gal-head a:hover{color:var(--accent-on-dark)}
.gal-n{font-family:var(--mono);font-size:13.5px;color:var(--milk-2);white-space:nowrap}
.gal-strip{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding-bottom:8px;scrollbar-width:thin;
}
/* Первый кадр каждой квартиры крупнее: лента из одинаковых плиток читается
   как контактный лист, а не как объект. */
.gal-item:first-child{flex:0 0 clamp(240px,32vw,336px)}
.gal-item{
  flex:0 0 clamp(200px,26vw,262px);scroll-snap-align:start;margin:0;padding:0;cursor:zoom-in;
  background:var(--graphite-2);color:var(--milk);border:1px solid var(--line-dark);
  border-radius:14px;overflow:hidden;text-align:left;
}
/* Кадр открывается крупно по нажатию (возвращено 28.09.2026). Эффекта
   приближения нет ни в ленте, ни при открытии — заказчик просил убрать именно
   его 25.09, а не сам просмотр. */
.gal-item:hover{border-color:#3F4855}
/* Высота кадров в ленте общая, ширина — разная: первый кадр шире и работает
   обложкой квартиры. Одинаковое соотношение сторон при разной ширине давало
   разную высоту, и лента получалась рваной по нижнему краю. */
.gal-item img{width:100%;height:clamp(250px,29vw,352px);object-fit:cover}
.gal-cap{display:block;padding:11px 13px 13px;font-size:13.5px;color:var(--milk-2)}

/* Просмотр во весь экран.
   `display:flex` в авторском правиле перебивает браузерное `[hidden]{display:none}` —
   без явной строки ниже галерея открыта поверх страницы с первой секунды. */
.lb[hidden]{display:none}
.lb{position:fixed;inset:0;z-index:200;background:rgba(10,12,15,.985);color:var(--milk);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:56px 16px 76px}
.lb:not([hidden]){animation:lb-in .25s ease-out}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
#lb-pic{display:flex;align-items:center;justify-content:center;max-width:100%;max-height:100%;height:100%}
/* Кадр не растягивается больше своего размера: большой кадр — 1120×1400,
   превью на время загрузки — 700×875. Растянутое превью и было «потерей качества». */
.lb img{max-width:min(100%,1120px);max-height:min(100%,1400px);width:auto;height:auto;object-fit:contain;border-radius:8px}
#lb-pic.is-thumb img{max-width:min(100%,700px);max-height:min(100%,875px)}
@media (prefers-reduced-motion:reduce){.lb:not([hidden]){animation:none}}
.lb-x{position:absolute;top:12px;right:12px;width:48px;height:48px;border-radius:12px;
  background:rgba(255,255,255,.1);color:var(--milk);border:0;font-size:20px;cursor:pointer}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.1);color:var(--milk);border:0;font-size:30px;line-height:1;cursor:pointer}
.lb-prev{left:10px}
.lb-next{right:10px}
.lb-x:hover,.lb-nav:hover{background:rgba(255,255,255,.2)}
.lb-bar{position:absolute;left:0;right:0;bottom:0;padding:16px 20px;display:flex;
  justify-content:space-between;gap:16px;font-size:14px;color:var(--milk-2)}

/* ══ Кто делает ремонт ═══════════════════════════════════════════════════
   Компания называется «Люди» — значит человек на этой странице должен быть
   размером с человека, а не с аватарку. Портрет держит колонку целиком,
   речь идёт крупным кеглем от первого лица, подпись стоит под портретом,
   как под письмом. Ниже — состав команды, которая приходит на объект. */
.boss-grid{display:grid;grid-template-columns:minmax(280px,420px) minmax(0,1fr);
  gap:clamp(28px,4.5vw,64px);align-items:center}
.boss-photo{position:relative}
/* Жёлтого пятна под портретом больше нет. Заказчик увидел его как полосу
   («что за жёлтая полоса под фото») и предложил заменить на серую или
   на градиент; решение владельца 09.09.2026 — убрать совсем, без замены.
   Портрет не «висит вырезкой» и без подложки: он стоит в своём кадре
   со скруглением и собственным фоном, кроп даёт край, а не обрыв силуэта.
/* Фигура живёт в кадре, а не висит вырезкой на фоне секции: у неё своя рамка
   со скруглением и своей подложкой, и низ обрезается КРАЕМ КАДРА. Обрез краем
   кадра — обычный кроп по пояс, обрыв силуэта в пустоте — «отрезанные ноги».
   Растворение маской пробовали: силуэт всё равно читается оборванным. */
.boss-photo picture{
  position:relative;z-index:1;display:block;overflow:hidden;border-radius:22px;
  background:linear-gradient(168deg,#242A33 0%,#171B21 62%,#12151A 100%);
  /* Пропорция кадра = пропорция самой фигуры плюс воздух сверху: при cover
     с фиксированной высотой колонка обрезала макушку. Кадр подстраивается
     под фигуру, а не фигура под кадр. */
  aspect-ratio:404/790;
}
/* contain, а не cover: фигура целиком, ничего не срезается. Прижата к низу —
   там обрез идёт краем кадра, сверху остаётся воздух над головой. */
.boss-photo img{display:block;width:100%;height:100%;
  object-fit:contain;object-position:50% 100%}
.boss-photo .boss-sign{position:relative;z-index:2;margin-top:6px;padding-top:16px;
  border-top:1px solid var(--line-dark)}
.boss-sign b{display:block;font-family:var(--display);font-weight:700;font-size:19px;color:var(--milk)}
.boss-sign span{display:block;font-size:14px;color:var(--milk-2);margin-top:3px}
.boss-text h2{margin-bottom:20px}
.boss-hi{
  font-family:var(--display);font-weight:600;color:var(--milk);
  font-size:clamp(18px,2.1vw,23px);line-height:1.35;
  padding-left:20px;border-left:3px solid var(--yellow);
}
.boss-text p{color:#C6CCD5;font-size:clamp(15.5px,1.6vw,17px);line-height:1.62;margin-top:16px}
.boss-last{font-size:clamp(17px,1.9vw,20px)!important;color:var(--milk)!important}
.boss-last b{color:var(--accent-on-dark)}

/* Команда на объекте: шесть ролей, а не строка перечисления через запятую. */
.crew{margin-top:clamp(38px,4.6vw,58px);border-top:1px solid var(--line-dark);padding-top:26px}
.crew-h{font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-on-dark);margin-bottom:20px}
/* Ряды одной высоты: у ролей описания разной длины, и два ряда по 138 и 117
   пикселей читались как съехавшая сетка. */
.crew-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:1px;
  background:var(--line-dark);border:1px solid var(--line-dark);border-radius:14px;overflow:hidden}
.crew-grid>div{position:relative;background:var(--graphite-2);padding:22px 20px;color:var(--milk)}
/* Короткий жёлтый штрих над ролью вместо пиктограммы: та же роль в вёрстке,
   но не «иконка из набора». */
.crew-grid>div::before{content:"";position:absolute;left:20px;top:0;width:26px;height:3px;background:var(--yellow)}
.crew-grid b{display:block;font-family:var(--display);font-weight:600;font-size:16.5px;margin-bottom:6px}
.crew-grid span{display:block;font-size:14px;color:var(--milk-2);line-height:1.45}

/* ══ Склад и доставка ════════════════════════════════════════════════════ */
/* Склад показан во всю ширину экрана: фотография перестаёт быть картинкой
   в колонке и работает средой, как и положено полосе-разделителю. */
.supply-shot{margin:0 0 clamp(24px,3vw,44px);overflow:hidden;background:var(--concrete)}
.supply-shot img{width:100%;height:clamp(220px,30vw,460px);object-fit:cover;object-position:center 55%}
.supply{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.supply>div{position:relative;background:var(--card);border-radius:22px;padding:30px 28px 28px}
.supply>div::before{content:"";position:absolute;left:24px;top:0;width:30px;height:3px;
  border-radius:0 0 2px 2px;background:var(--yellow)}
.supply b{display:block;font-family:var(--display);font-weight:700;font-size:19px;margin-bottom:9px}
.supply p{color:var(--ink-3);font-size:15px;line-height:1.55}

/* Оба блока объявлены ниже общих медиазапросов файла, поэтому их раскладку
   на узких экранах задаём здесь же — иначе общее правило проигрывает
   по порядку следования, а не по ширине экрана. */
@media (max-width:1080px){
  .crew-grid,.supply{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .crew-grid,.supply{grid-template-columns:1fr}
}

/* ══ Липкая панель действий на телефоне ══════════════════════════════════
   Половина обращений в ремонте приходит с телефона, и до формы внизу
   доходят не все. Панель появляется после первого экрана и уходит, когда
   на экране уже есть форма или квиз, — иначе она перекрывает то же действие.
   Кнопку расчёта на старом сайте перекрывал cookie-баннер: панель поднята
   над безопасной зоной и не липнет к содержимому (у body есть отступ). */
/* Подпись студии стоит в тёмном подвале, поэтому цвет берётся из тёмной
   палитры (--milk-2), а не из светлой: --ink-3 на графите даёт 2,9:1. */
.ft-by{color:var(--milk-2);font-size:13.5px}
.ft-by a{color:var(--milk-2);text-decoration:none;border-bottom:1px solid var(--line-dark)}
.ft-by a:hover{color:var(--milk)}

.cta-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:10px;
  padding:10px 20px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);border-top:1px solid var(--line);
  backdrop-filter:blur(8px);transform:translateY(110%);transition:transform .25s ease;
}
.cta-bar.on{transform:none}
.cta-bar .btn{flex:1;min-height:50px;padding:14px 12px;font-size:15px}
.cta-bar .btn-msg{flex:0 0 54px;padding:0;background:linear-gradient(180deg,#2AABEE 0%,#229ED9 100%);
  color:#fff;border-color:transparent}
.cta-bar .btn-msg svg{width:24px;height:24px}
.cta-bar .btn-tel{background:var(--paper);color:var(--ink);border-color:var(--line-2)}

@media (max-width:940px){
    .quiz{grid-template-columns:1fr}
  .quiz-mini{
    display:block;margin:-6px 0 16px;padding:10px 14px;border-radius:10px;
    background:var(--graphite);color:var(--milk);font-size:14.5px;
  }
  .quiz-mini b{color:var(--accent-on-dark);font-family:var(--display);font-size:17px}
  .quiz-list{max-height:none}
  .boss-grid{grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:start}
}
@media (max-width:620px){
  .cta-bar{display:flex}
  body{padding-bottom:74px}
  /* Чертёж на телефоне ужимается до предела читаемости номеров и дальше
     листается вбок: узел «стена — пол» и стык видно сразу, остальное — свайпом. */
  .cut-svg{min-width:560px}
  .boss-grid{grid-template-columns:1fr;gap:22px;text-align:left}
  /* Во всю ширину телефона кадр занимает почти экран: фигура высокая. */
  .boss-photo picture{max-width:290px}
  .boss-photo .boss-sign{max-width:290px}
  /* Колонка уже экрана (280 из 390), поэтому её надо ставить по центру
     явно: в одноколоночной сетке элемент прижимается к началу строки, и
     кадр висел у левого поля с пустотой 110 px справа. Центрируем и саму
     колонку, и её содержимое — иначе на 393 px picture ужимается до 220
     и уезжает влево уже внутри колонки. */
  .boss-photo{max-width:280px;justify-self:center}
  .boss-photo picture,.boss-photo .boss-sign{margin-inline:auto}
  /* Узел маршрута ужимается, но остаётся тап-целью: по нему не нажимают,
     нажимают по строке — 44 px достаточно, чтобы линия читалась. */
  .road::before{left:21px}
  .road-step{grid-template-columns:44px minmax(0,1fr);gap:16px}
  .road-dot{width:44px;height:44px;font-size:15px}
  .road-stage::before{width:44px}
  .road-stage::after{left:15px}
  .road-stage{gap:14px}
  .gal-item{flex:0 0 74%}
  .gal-item:first-child{flex:0 0 88%}
  .gal-item img{height:clamp(230px,58vw,300px)}
  .lb{padding:52px 8px 70px}
  /* На телефоне листают свайпом: боковые кнопки только закрывают кадр. */
  .lb-nav{display:none}
  /* Тап-цели: всё, по чему нажимают пальцем, не мельче 48 px. */
  .btn{min-height:50px}
  .ly-btn{min-height:56px}
  .quiz-opt{min-height:68px}
  .faq summary{padding-top:22px;padding-bottom:22px}
  .m-sub a{padding-top:13px;padding-bottom:13px}
  .ft-map a{display:inline-block;padding:5px 0}
}


/* ══ Образец сметы ═══════════════════════════════════════════════════════ */
.smeta-intro{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.smeta{display:block}
.smeta-doc{
  position:relative;background:var(--paper);color:var(--ink);border-radius:20px;overflow:hidden;
  font-size:15.5px;box-shadow:0 20px 48px rgba(21,24,29,.07);
}
.smeta-head,.smeta-row{display:grid;grid-template-columns:1fr 62px 74px 92px;gap:8px;padding:10px 18px}
.smeta-head{
  background:var(--concrete);color:var(--ink-3);font-family:var(--mono);font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--line);
}
.smeta-head span:not(:first-child),.smeta-row .u,.smeta-row .v,.smeta-row .p{text-align:right}
.smeta-group{
  padding:12px 18px 8px;font-family:var(--display);font-weight:700;font-size:13.5px;
  color:var(--accent-text);text-transform:uppercase;letter-spacing:.06em;
  background:var(--paper);border-top:1px solid var(--line);
}
.smeta-doc .smeta-group:first-of-type{border-top:0}
.smeta-row{border-top:1px solid #F1F3F5;color:var(--ink-2)}
.smeta-row .u{color:var(--ink-3);font-family:var(--mono);font-size:13px}
/* Прочерк — содержательный знак «здесь появится цифра после обмера», а не
   декоративная линия: цвет линии как цвет текста даёт 1,54:1 (CONTRAST_STANDARD,
   правило «цвет линии — НЕ цвет текста»). */
.smeta-row .v,.smeta-row .p{color:var(--ink-3);font-family:var(--mono)}
/* Документ показывается целиком. Обрыв по высоте с растворяющейся полосой
   читался не как «фрагмент», а как поломанная вёрстка: таблица кончалась
   посреди раздела. Границу теперь проводит подпись, а не обрезка. */
.smeta-foot{
  padding:14px 18px 16px;border-top:1px solid var(--line);background:var(--concrete);
  font-size:13.5px;color:var(--ink-3);line-height:1.5;
}

.smeta-why{background:var(--card);color:var(--ink);border-radius:20px;padding:26px 26px 28px}
.smeta-why b{display:block;font-family:var(--display);font-size:16px;color:var(--ink);margin-bottom:7px}
.smeta-why p{color:var(--ink-3);font-size:14.5px;line-height:1.55}

@media (max-width:760px){
  .smeta-intro{grid-template-columns:1fr}
}
@media (max-width:620px){
  .smeta-doc{font-size:14.5px}
  .smeta-head,.smeta-row{grid-template-columns:1fr 50px 56px;padding:10px 14px}
  /* Колонка цены на телефоне не помещается и всё равно пустая — убираем её,
     смысл «объём считается на обмере» держит колонка объёма. */
  .smeta-head span:nth-child(4),.smeta-row .p{display:none}
  .smeta-group{padding:12px 14px 8px}
}


/* content-visibility:auto здесь ПРОБОВАЛИ И УБРАЛИ. Выигрыша не было — LCP
   и так 1,8 с на медленном 4G, тяжёлые кадры лежат под lazy-загрузкой, —
   а вреда достаточно: секции не отрисовывались на скриншотах и при печати,
   высота страницы расходилась на две тысячи пикселей, и якорь #obyekty
   из первого экрана попадал мимо. Не возвращать без замера, который
   показывает выигрыш. */


/* ══ Блоки, взятые с действующего сайта заказчика ═════════════════════════
   Порядок и приёмы — с sk-ludi.ru: он сам сказал, что его сайт работает
   лучше нашей первой редакции, и по нише он прав. Исполнение наше. */

/* ── Шесть причин. У заказчика это шесть плашек с крупным жёлтым знаком;
   знаки здесь не из набора, а жёлтый квадрат с номером — тот же ритм,
   но без «дешёвых иконок», о которых он говорил 25.08. ──────────────── */
/* Все восемь карточек одной высоты, а не «каждый ряд своей». Тексты у пунктов
   разной длины, и три ряда разной высоты читаются как сбой сетки — именно это
   на приёмке назвали «карточки разного размера». Ровная матрица честнее:
   лишний воздух в короткой карточке глаз принимает, разнобой рядов — нет. */
/* Восемь причин стоят двумя рядами по четыре — раскладка задана заказчиком
   10.09.2026 вместе с порядком пунктов (см. SKL_ADV в facts.php). Четыре
   колонки на 1180 px дают карточку в 283 px, поэтому поля внутри карточки
   ужаты с 28 до 24 px: иначе строка текста становится уже 26 знаков и
   заголовок рвётся по слогам. Ниже 1080 px — два ряда по два, на телефоне
   один столбец: четыре колонки там превращаются в колодец. */
.adv{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:16px}
.adv-i{padding:24px 22px 26px}
.adv-i h3{font-size:19px;line-height:1.22}
.adv-i p{font-size:15px}
.adv-i{background:var(--card);color:var(--ink);border-radius:22px;padding:28px 28px 30px;
  transition:transform .16s}
.adv-i:hover{transform:translateY(-3px)}
.adv-n{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:12px;background:var(--yellow);color:var(--on-yellow);
  font-family:var(--display);font-weight:700;font-size:17px;margin-bottom:18px}
.adv-i h3{color:var(--ink);margin-bottom:10px}
.adv-i p{color:var(--ink-2);font-size:15.5px;line-height:1.55}
.adv-i .adv-out{display:block;margin-top:14px;font-family:var(--mono);font-size:13px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--accent-text)}

/* ── Карточки квартир: фото, площадь, срок, подарок. Ровно та карточка,
   которая стоит у заказчика в «Наших работах», — он на неё и ссылался. ─ */
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.work{display:flex;flex-direction:column;background:var(--card);color:var(--ink);
  border-radius:20px;overflow:hidden;text-decoration:none;transition:transform .16s,box-shadow .16s}
.work:hover{transform:translateY(-3px);box-shadow:0 22px 48px rgba(21,24,29,.12)}
.work-shot{position:relative;display:block}
.work-shot img{width:100%;height:230px;object-fit:cover}
.work-tag{position:absolute;left:14px;top:14px;background:var(--yellow);color:var(--on-yellow);
  font-family:var(--display);font-weight:700;font-size:13.5px;padding:7px 13px;border-radius:8px}
.work-b{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.work-h{display:block;font-family:var(--display);font-weight:700;color:var(--ink);font-size:19px;
  line-height:1.2;margin-bottom:15px}
.work-rows{display:grid;gap:9px;margin-bottom:16px}
.work-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:14.5px;color:var(--ink-3);border-bottom:1px dashed var(--line);padding-bottom:8px}
.work-row b{font-family:var(--display);font-size:15.5px;color:var(--ink);text-align:right}
.work .go{margin-top:auto;color:var(--accent-text);font-weight:600;font-size:14.5px}

/* ── Сроки по площади: таблица-факт вместо обещания «от 30 дней». ─────── */
.terms{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.term{background:var(--card);color:var(--ink);border-radius:18px;padding:22px 20px 24px;text-align:center}
.term b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(22px,2.6vw,30px);
  color:var(--ink);letter-spacing:-.02em}
.term i{display:block;font-style:normal;margin:10px auto 12px;width:26px;height:2px;background:var(--yellow)}
.term span{display:block;font-size:14.5px;color:var(--ink-3);line-height:1.4}
.term em{display:block;font-style:normal;font-family:var(--display);font-weight:700;font-size:19px;
  color:var(--accent-text);margin-top:4px}
.terms-note{margin-top:18px;font-size:14.5px;color:var(--ink-3);line-height:1.55;max-width:78ch}

/* ── Отзывы. У заказчика это девять картинок-скриншотов: их не читает
   ни человек на телефоне, ни поисковый робот. Тот же материал стоит
   текстом — с площадкой, датой и именем, как в оригинале. ───────────── */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rev{background:var(--card);color:var(--ink);border-radius:20px;padding:24px 24px 26px;
  display:flex;flex-direction:column}
.rev-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.rev-av{display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex:none;
  border-radius:50%;background:var(--yellow);color:var(--on-yellow);
  font-family:var(--display);font-weight:700;font-size:17px}
.rev-who b{display:block;font-family:var(--display);font-size:16px;color:var(--ink);line-height:1.2}
.rev-who span{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
.rev-stars{display:flex;gap:2px;margin-bottom:10px;color:var(--yellow)}
.rev-stars svg{width:15px;height:15px}
.rev-kind{font-family:var(--mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent-text);margin-bottom:10px}
.rev p{color:var(--ink-2);font-size:15px;line-height:1.55}
.revs-note{margin-top:20px;font-size:14.5px;color:var(--ink-3)}

@media (max-width:1080px){
  .adv,.works,.revs{grid-template-columns:repeat(2,1fr)}
  .adv{gap:16px}
  .adv-i{padding:28px 28px 30px}
  .terms{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:940px){
  /* Портрет и текст перестают помещаться рядом: колонка текста становится
     уже 30 знаков и заголовок рвётся по слогам. */
  .hero .wrap{grid-template-columns:1fr}
  /* Фигуру убираем целиком: колонки под неё нет, и она наезжает на текст.
     content:none, а не display:none у колонки, — иначе псевдоэлемент секции
     остаётся и рисует директора поверх кнопок. */
  .hero-calc{max-width:none;justify-self:stretch}
  .hero{min-height:auto}
  .hero .wrap{padding-top:clamp(52px,8vh,88px);padding-bottom:clamp(44px,6vh,72px)}
}
@media (max-width:620px){
  /* Стык последнего блока с подвалом. Внутренний отступ карточки контактов
     складывался с полем секции и полем подвала — приёмка читала это как
     проём в 166 px при норме 140. Режем оба поля на стыке, сам ритм
     страницы не трогаем. */
  section:last-of-type{padding-bottom:22px}
  footer{padding-top:26px}

  /* В одну колонку `grid-auto-rows:1fr` тянет каждую карточку до высоты самой
     длинной: у коротких внизу оставалось до 208 px пустоты, и приёмка читала
     это как проём между блоками. В одноколоночной раскладке строки идут
     по содержимому. */
  .adv,.works,.revs{grid-template-columns:1fr;grid-auto-rows:auto}
  .terms{grid-template-columns:1fr 1fr}
  .hero-price{font-size:clamp(25px,8vw,34px)}
  .hero .btns .btn{width:100%}
  .work-shot img{height:200px}

  /* Первый экран не режется нижним краем телефона.
     Было: текст с кнопкой и карточка расчёта шли одной лентой на 972 px,
     а видимая часть экрана — 863 (932 минус липкая шапка 69). Край
     приходился ровно на середину карточки: заголовок «СТОИМОСТЬ РАБОТ»
     виден, кнопка «Собрать состав сметы» разрезана пополам. Это и читается
     как «блок разрезан».
     Стало: текстовая колонка занимает ровно экран минус шапка минус 56 px,
     и карточка выступает снизу на эти 56 — видно скруглённый край и
     подпись, то есть приглашение листать, а не обрубок. Единица — svh,
     а не vh: с vh адресная строка Safari прибавляет свою высоту и обрезает
     ещё раз при первой же прокрутке. */
  .hero .wrap{padding-top:0;padding-bottom:34px;gap:22px}
  /* ПЕРВЫЙ ЭКРАН СОБРАН В ОДИН БЛОК, А НЕ РАЗРЕЗАН НА ДВА.
     История правки. Сначала текст и карточка расчёта шли одной лентой на
     972 px при видимых 863 — нижний край резал карточку по кнопке. Потом
     текст растянули на экран, карточка ушла под сгиб — пропал разрез, но
     появилось 340 px пустого кадра. Потом воздух поделили поровну — стало
     ровно, но пусто с обеих сторон: содержимого на 470 px, экрана на 863.

     Воздух не лечится раскладкой, потому что это не про раскладку. Экран
     пустой оттого, что факты, которыми стоит его занять, лежат этажом ниже
     в отдельной карточке. Поэтому на телефоне карточка перестаёт быть
     карточкой: с неё снимается фон, рамка и собственная кнопка, а цена,
     подпись и три строки условий встают продолжением первого экрана —
     ровно как факт-строка под кнопкой на membrokrovlya.ru.

     Заодно уходит дубль: кнопка карточки вела в тот же квиз, что и главная
     кнопка первого экрана, и стояла в двадцати сантиметрах от неё. */
  /* РЕДАКЦИЯ 15.09.2026. Отступ сверху был `clamp(48px,17.5svh,182px)` —
     163 px пустого кадра на iPhone Pro Max. Он появился, когда на первом
     экране лежал только заголовок с кнопкой и экран выглядел полупустым.
     С тех пор сюда добавилась форма заявки (11.09) и подросли поля (15.09):
     содержимого стало на 1104 px при экране в 932, и прежний отступ просто
     выталкивал низ за сгиб. Владелец 15.09: «изначально пропущено свободное
     место, а внизу как будто бы обрезано».
     Отступ теперь маленький и постоянный: содержимое начинается сразу под
     шапкой, а высоту первого экрана задаёт оно само. */
  .hero .wrap{padding-top:22px;padding-bottom:26px;gap:16px}
  .hero-text{align-self:stretch;padding:0}
  /* Заголовок на большом телефоне крупнее общего мобильного: 430 px → 40 px. */
  .hero h1{font-size:clamp(33px,9.4vw,43px)}
  .hero-sub{font-size:16.5px;margin-top:14px}
  .hero-ticks{gap:12px}

  /* Нижняя половина первого экрана — панель, а не продолжение фотографии.
     Пока под ценой и формой просвечивал кадр, экран обрывался посреди
     фотографии, и обрыв читался как обрезанная картинка, а не как «дальше
     есть ещё». Непрозрачная панель даёт фотографии ровный край, а строкам
     условий — гарантированный контраст: до этого «за наш счёт» и «до
     договора» ложились на светлые участки кадра. */
  .hero-calc{background:rgba(13,16,21,.94);backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:18px 18px 20px}
  .hero-calc-k{display:none}
  .hero-calc .hero-price{font-size:clamp(27px,7.6vw,34px)}
  .hero-calc-p{margin-top:6px;font-size:14.5px}
  .hero-calc-l{margin-top:12px;border-top:0}
  .hero-calc-l li{padding:7px 0}
  .hero-calc-l li:last-child{border-bottom:0}
  /* Вторая кнопка в тот же квиз и подпись к ней на телефоне сняты: главная
     кнопка стоит выше на том же экране. */
  /* На телефоне карточка перестаёт быть карточкой, но форма в ней остаётся:
     она просто уходит чуть ниже сгиба, за ценой и тремя условиями — первый
     экран по-прежнему занят фактами (пункт 19 списка от 09.09), а поля
     видны сразу за ними. Снимается только строка про калькулятор: на
     телефоне туда ведёт главная кнопка первого экрана. */
  .hero-calc-n{display:none}
  .hero-form{margin-top:12px}
  .hero-form .btn{margin-top:12px}
  .hero-form .agree{margin-top:10px}
  /* Первый тик снят: «Выезд инженера, консультация и обмер — за наш счёт»
     и строка условий «Выезд инженера и обмер — за наш счёт» теперь стоят
     на одном экране в двадцати сантиметрах друг от друга. Один и тот же
     факт дважды читается как небрежность, а не как усиление. На десктопе
     они разнесены по колонкам и оба остаются. */
  .hero-ticks li:first-child{display:none}
  /* Затемнение на телефоне идёт сверху вниз, а не слева направо: колонка
     текста здесь во всю ширину, и боковой градиент оставляет правый край
     строк на светлой части кадра. */
  .hero-veil{background:linear-gradient(180deg,
    rgba(10,12,16,.34) 0%,rgba(10,12,16,.58) 34%,rgba(10,12,16,.76) 62%,rgba(10,12,16,.88) 100%)}
}


/* ══════════════════════════════════════════════════════════════════════════
   РЕДАКЦИЯ 08.09.2026. Новые блоки главной и три блока, перенесённые
   с тёмной редакции /v2/.

   ПРАВИЛО, ПО КОТОРОМУ ЭТОТ КУСОК НАПИСАН ЗАНОВО, А НЕ СКОПИРОВАН ИЗ v2.css.
   Там среда перевёрнута на `body.v2`: `--paper` тёмный, `--ink` светлый.
   На главной этих переопределений нет, а внутри `section.dark` токены
   `--ink`, `--ink-2`, `--ink-3` и `--accent-text` остаются светлотемовыми —
   то есть тёмными. Скопированное правило `.flow-step p{color:var(--ink-2)}`
   дало бы #3D434E на карточке #1E222A: 1,4 : 1. Поэтому у каждого блока
   ниже цвет текста объявлен ВМЕСТЕ с фоном и явными значениями.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── «Немного о нас» на светлом фоне ──────────────────────────────────────
   Блок переехал с графита на белое поле. Одного `background` мало: вся
   типографика блока рассчитана на `--milk`, и без переопределения получается
   белый текст на белом. Меняем фон и цвет вместе, включая подложку портрета
   и плитки состава команды. */
.boss-light{background:var(--paper);color:var(--ink)}
.boss-light .boss-photo picture{
  background:linear-gradient(168deg,#EDEFF2 0%,#E2E5EA 62%,#D8DCE2 100%)}
.boss-light .boss-photo .boss-sign{border-top-color:var(--line-2)}
.boss-light .boss-sign b{color:var(--ink)}
.boss-light .boss-sign span{color:var(--ink-3)}
.boss-light .boss-hi{color:var(--ink)}
.boss-light .boss-text p{color:var(--ink-2)}
.boss-light .boss-text p b{color:var(--ink)}
.boss-light .crew{border-top-color:var(--line-2)}
.boss-light .crew-h{color:var(--accent-text)}
.boss-light .crew-grid{background:var(--line);border-color:var(--line)}
.boss-light .crew-grid>div{background:var(--concrete);color:var(--ink)}
.boss-light .crew-grid b{color:var(--ink)}
.boss-light .crew-grid span{color:var(--ink-2)}
/* Ролей на объекте осталось две — заказчик сократил список. Две карточки
   в сетке на три колонки оставляли дыру справа. */
.crew-grid.crew-2{grid-template-columns:repeat(2,1fr)}

/* ── Услуги: три вида работ с полным составом ─────────────────────────── */
.srv{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.srv-i{display:flex;flex-direction:column;background:var(--card);color:var(--ink);
  border-radius:22px;overflow:hidden}
.srv-shot{display:block}
.srv-shot img{display:block;width:100%;height:190px;object-fit:cover}
.srv-i h3{margin:20px 24px 0;font-size:clamp(20px,2.2vw,24px)}
.srv-i h3 a{color:var(--ink);text-decoration:none}
.srv-i h3 a:hover{color:var(--accent-text)}
.srv-lead{margin:10px 24px 0;color:var(--ink-2);font-size:15px;line-height:1.55}
.srv-works{margin:18px 24px 0;display:grid;gap:8px}
.srv-works li{position:relative;padding-left:20px;color:var(--ink-2);font-size:14.5px;line-height:1.45}
.srv-works li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:2px;
  background:var(--yellow)}
.srv-i .go{display:block;margin:auto 24px 24px;padding-top:18px;
  color:var(--accent-text);font-weight:600;font-size:14.5px;text-decoration:none}

/* Остальные разделы строками. Витрину из четырнадцати одинаковых плиток
   заказчик забраковал ещё 25.08, но сами ссылки с главной убирать нельзя:
   это единственный источник внутренних ссылок на посадочные страницы. */
.srv-more{margin-top:clamp(32px,4vw,52px);border-top:1px solid var(--line-2);padding-top:26px}
.srv-more-h{font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-text);margin-bottom:18px}
.srv-more-row{display:grid;grid-template-columns:minmax(150px,190px) minmax(0,1fr);
  gap:12px 24px;padding:14px 0;border-top:1px solid var(--line)}
.srv-more-row:first-of-type{border-top:0}
.srv-more-n{font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--ink)}
.srv-more-row ul{display:flex;flex-wrap:wrap;gap:8px 18px}
.srv-more-row a{color:var(--ink-2);font-size:14.5px;text-decoration:none;
  border-bottom:1px solid var(--line-2)}
.srv-more-row a:hover{color:var(--accent-text);border-bottom-color:var(--accent-text)}

/* ── Ползунок «до / после» ─────────────────────────────────────────────
   Перенесён с /v2/. Блок без заголовков — так его и просил заказчик.
   С 23.09.2026 на главной стоит на графите (`section.dark`), чтобы отбить
   его от соседних светлых блоков; подпись под кадром там переопределена. */
.ba-sec .wrap{max-width:var(--wrap)}
.ba{position:relative;border-radius:26px;overflow:hidden;background:#0A0C10;
  aspect-ratio:16/9;user-select:none;touch-action:pan-y}
.ba picture{position:absolute;inset:0;display:block}
/* Обрезается САМО изображение, а не <picture>: у picture как у строчного
   элемента нет своих размеров, clip-path на нём молча ничего не режет —
   верхний кадр закрывает нижний целиком, и ползунок «не работает».
   Ширина и высота у <img> заданы в разметке по той же причине. */
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .ba-after img{clip-path:inset(0 0 0 var(--pos,50%))}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:var(--yellow);
  transform:translateX(-1px);pointer-events:none}
.ba-grip{position:absolute;top:50%;left:var(--pos,50%);width:56px;height:56px;margin:-28px 0 0 -28px;
  border-radius:50%;background:var(--yellow);color:var(--on-yellow);display:flex;align-items:center;
  justify-content:center;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.ba-grip svg{width:26px;height:26px}
.ba-tag{position:absolute;top:16px;padding:7px 13px;border-radius:8px;font-family:var(--mono);
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;background:rgba(10,12,16,.78);
  color:#E6EAEF;backdrop-filter:blur(6px)}
.ba-tag.l{left:16px}
.ba-tag.r{right:16px}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-note{margin-top:16px;font-size:14.5px;color:var(--ink-3);line-height:1.55}

/* ── Этапы ремонта ───────────────────────────────────────────────────────
   Редакция 15.09.2026: композиция с большим кадром вернулась по просьбе
   заказчика, закрепление страницы — нет (история в комментарии у разметки).

   Кадр этапа один на весь блок и держится липким, пока блок проходит мимо;
   карточки едут рядом обычной прокруткой страницы. Перехвата колеса нет
   нигде: всё поведение на `position:sticky`, а он прокрутку не трогает.

   Второго комплекта кадров — по одному внутри каждой карточки — здесь
   намеренно нет. Он был в первой сборке этого блока и сразу дал две беды:
   один и тот же снимок стоял на странице дважды, а комплект, спрятанный
   под `display:none` на своей ширине, приёмка читала как картинки нулевого
   размера. Кадр один, меняется его содержимое.

   Базовая раскладка — телефонная: кадр сверху, карточки под ним столбиком.
   Обычный поток, а не сетка: в сетке липкий элемент ограничен высотой своей
   ячейки и никуда не липнет. */
/* ПЕРЕСОБРАНО 18.09.2026. Третий раз заказчик просит одно и то же:
   этапы должны листаться ВНУТРИ блока, а страница — идти мимо.
   Решение: `.flow-steps` получает фиксированную высоту и собственную
   прокрутку; блок занимает ограниченное место на странице и не захватывает
   общий скролл. Кадр слева (десктоп) или сверху (телефон) остаётся
   на месте и меняется по ходу листания этапов внутри контейнера. */
.flow{display:block;margin-top:clamp(22px,2.6vw,34px)}

.flow-stage{
  position:relative;
  margin:0 0 16px;aspect-ratio:16/9;border-radius:20px;overflow:hidden;
  background:#0A0C10;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
/* Все семь кадров лежат друг на друге и меняются прозрачностью: так смена
   идёт без пустого места и без подгрузки в момент перехода. */
.flow-pic{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
.flow-pic.on{opacity:1}
.flow-pic img{width:100%;height:100%;object-fit:cover;display:block}
/* Подпись лежит на кадре — фон объявлен вместе с цветом текста: под ней
   фотография, и наследовать цвет не от чего. #EDF0F3 на подложке
   rgba(10,12,16,.88) — 14,2:1. */
.flow-stage figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:14px 16px;color:#EDF0F3;font-family:var(--mono);
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  background:linear-gradient(0deg,rgba(10,12,16,.88) 0%,rgba(10,12,16,.62) 60%,transparent 100%);
}

/* Карточки этапов скроллятся внутри контейнера, а не в потоке страницы.
   max-height ограничивает блок, overflow-y включает внутреннюю прокрутку.
   scroll-snap-type мягкий: карточки довстают на место, но палец не застревает.
   Полоска прокрутки тонкая и неяркая — не спорит с содержимым. */
.flow-steps{display:grid;gap:14px;
  /* Строки — по содержимому, а не по высоте контейнера. Без этого grid делит
     заданную высоту на семь равных строк: 18.09.2026 карточки сжались до 69 px
     и от этапа остался один номер — заголовок и описание ушли под обрез. */
  grid-auto-rows:max-content;align-content:start;
  max-height:min(60vh,400px);overflow-y:auto;
  scroll-snap-type:y proximity;overscroll-behavior-y:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.24) transparent;
  padding-right:6px}
.flow-steps::-webkit-scrollbar{width:5px}
.flow-steps::-webkit-scrollbar-track{background:transparent}
.flow-steps::-webkit-scrollbar-thumb{background:rgba(255,255,255,.24);border-radius:999px}
.flow-step{scroll-snap-align:start;cursor:pointer;
  background:#1B1F26;border-radius:20px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  transition:box-shadow .45s ease,background-color .45s ease;
}
.flow-step:hover{background:#222831}
/* Карточка, чей кадр сейчас в сцене, помечена жёлтой кромкой: по ней видно,
   какому этапу принадлежит закрашенное деление полосы хода. */
.flow-step.on{background:#222831;box-shadow:inset 0 0 0 1px rgba(255,209,0,.55)}
.flow-b{padding:16px 18px 20px}
.flow-step .n{font-family:var(--mono);font-size:13px;letter-spacing:.16em;color:var(--accent-on-dark)}
.flow-step h3{margin:7px 0 7px;color:var(--milk);font-size:clamp(18px,1.7vw,21px)}
/* #C4CBD4 на #1B1F26 — 9,8:1; на карточке в фокусе #222831 — 8,9:1. */
.flow-step p{color:#C4CBD4;font-size:15.5px;line-height:1.55}

/* Широкий экран: двухколоночная сетка с фиксированной высотой.
   Кадр слева занимает всю высоту и меняется при листании этапов справа.
   Sticky больше не нужен: блок не прокручивается страницей, а этапы
   скроллятся внутри своего контейнера. */
@media (min-width:941px){
  .flow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);
    gap:clamp(24px,3.2vw,48px);margin-top:clamp(26px,3vw,40px);
    height:min(78vh,640px)}
  .flow-stage{position:relative;margin:0;height:100%;aspect-ratio:auto;border-radius:24px}
  .flow-stage figcaption{padding:16px 18px;font-size:13.5px}
  .flow-steps{gap:clamp(16px,2.4vw,26px);max-height:100%;padding-right:10px}
  .flow-step{padding:clamp(20px,2.6vw,30px);border-radius:20px}
  .flow-b{padding:0}
  .flow-step h3{font-size:clamp(19px,2.1vw,24px);margin:9px 0 8px}
}

/* Стрелки «вперёд / назад» на кадре этапа. Полупрозрачные, при наведении
   светлеют. На телефоне кадр кликабелен целиком: левая половина — назад,
   правая — вперёд; стрелки выглядят как подсказка. */
.flow-arr{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(0,0,0,.45);color:#fff;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:background .25s ease,opacity .25s ease;opacity:.7;
}
.flow-arr:hover{background:rgba(0,0,0,.7);opacity:1}
.flow-arr svg{width:20px;height:20px}
.flow-arr-prev{left:12px}
.flow-arr-next{right:12px}

/* Полоса хода: семь делений над блоком. Пройденные закрашены жёлтым, поэтому
   видно и сколько шагов всего, и на каком ты сейчас. */
.flow-rail{display:flex;gap:6px;margin-top:14px}
.flow-rail i{
  flex:1;height:4px;border-radius:999px;background:rgba(255,255,255,.16);
  transition:background .45s ease;
}
.flow-rail i.on{background:var(--yellow)}
@media (prefers-reduced-motion:reduce){
  .flow-rail i,.flow-step,.flow-pic{transition:none}
}

/* ── Схема оплаты по этапам ──────────────────────────────────────────────
   Стоит в тёмной секции цен. Ширина ограничена шириной самой схемы: растянутая
   на всю полосу, она теряет плотность и читается как декорация. */
.pay-flow{margin:clamp(30px,3.6vw,46px) auto 0;max-width:440px;text-align:center}
.pay-flow svg{width:100%;height:auto;display:block}
.pay-flow figcaption{margin-top:14px;color:#A8AFBA;font-size:14.5px;line-height:1.5}

/* ── Дизайн-проект: два тарифа ──────────────────────────────────────────── */
.dp-lead{max-width:78ch;color:var(--ink-2);font-size:clamp(16px,1.6vw,18px);
  line-height:1.6;margin-bottom:clamp(28px,3.4vw,44px)}
.dp{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.dp-i{display:flex;flex-direction:column;background:var(--card);color:var(--ink);
  border-radius:24px;padding:clamp(26px,3vw,36px)}
/* Кадр тарифа: общий формат 16:10, чтобы две карточки стояли ровно. Чертёж
   вписывается целиком на белом (обрезать лист нельзя), визуализация — заполняет. */
.dp-shot{display:block;margin:0 0 22px;border-radius:16px;overflow:hidden;
  aspect-ratio:16/10;background:#FFFFFF}
.dp-shot img{display:block;width:100%;height:100%}
.dp-shot-plan img{object-fit:contain;padding:10px}
.dp-shot-viz img{object-fit:cover}
.dp-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.dp-i h3{font-size:clamp(20px,2.2vw,25px);color:var(--ink)}
.dp-price{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.4vw,27px);
  color:var(--accent-text);letter-spacing:-.02em;white-space:nowrap}
.dp-note{margin-top:12px;color:var(--ink-2);font-size:15px;line-height:1.55}
.dp-h{margin-top:24px;font-family:var(--mono);font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.dp-list{margin-top:14px;display:grid;gap:9px}
.dp-list li{position:relative;padding-left:22px;color:var(--ink-2);font-size:14.5px;line-height:1.5}
.dp-list li::before{content:"";position:absolute;left:0;top:.58em;width:10px;height:2px;
  background:var(--line-2)}
/* Что добавляет старший тариф — тем же списком, но помечено жёлтым: иначе
   человек сравнивает два одинаковых столбца и разницы не видит. */
.dp-list li.dp-plus{color:var(--ink)}
.dp-list li.dp-plus::before{background:var(--yellow);height:3px;top:.52em}
.dp-i .btn{margin-top:24px;align-self:flex-start}

/* ── Комплектация: четыре плашки вместо трёх ────────────────────────────── */
.supply.supply-4{grid-template-columns:repeat(4,1fr)}
.supply.supply-4 b{font-size:17.5px}
.supply.supply-4 p{font-size:14.5px}

/* ── Наши работы: карточка объекта ───────────────────────────────────────
   Один блок вместо двух прежних. Строки площади и срока рисуются только при
   наличии данных, поэтому список — <dl>, а не жёсткая сетка на три ряда. */
.work-rows{display:grid;gap:0;margin-bottom:18px}
.work-rows>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--line)}
.work-rows dt{font-size:14px;color:var(--ink-3)}
.work-rows dd{margin:0;font-family:var(--display);font-weight:600;font-size:15.5px;
  color:var(--ink);text-align:right}
.work-h{margin-bottom:14px}
.work-h a{color:var(--ink);text-decoration:none}
.work-h a:hover{color:var(--accent-text)}
.work-go{margin-top:auto;width:100%}
/* Кадр объекта в ленте — 4:3. Вертикальный кадр 4:5 давал карточку в 490 px
   только на фотографию, и блок «Наши работы» не помещался в экран. */
.work-shot{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;
  /* Подложка под снимком. Пока кадр не пришёл, место под него уже занято и
     светлое: 16.09.2026 на ревью поймали «тормознуло на секунду с чёрным
     экраном» — без подложки пустой кадр в ленте читается как провал. */
  background:var(--line)}
.work-shot img{width:100%;height:100%;object-fit:cover;display:block}

/* ── Разрез пола ─────────────────────────────────────────────────────────
   Блок стоит на `section.tone`. Карточка подписи лежит поверх тёмного снимка
   и несёт свой фон и свой цвет; боковой список — обычные светлые карточки. */
.cut-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(22px,3vw,44px)}
.cutp{position:relative;border-radius:24px;overflow:hidden;background:#0A0C10;aspect-ratio:1/1;margin:0}
.cutp img{width:100%;height:100%;object-fit:cover;display:block}
.cutp-dot{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;
  background:var(--yellow);color:var(--on-yellow);border:0;cursor:pointer;font-family:var(--mono);
  font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.5)}
.cutp-dot[aria-expanded="true"]{background:#fff;color:var(--ink)}
/* Описание выбранного слоя. Стоит в колонке рядом со списком, а не поверх
   фотографии: поверх снимка оно перекрывало нижнюю точку и делало её
   недоступной. Своя среда — графит, поэтому цвет текста объявлен здесь же,
   вместе с фоном, а не унаследован от светлой секции.
   Белое на #161B22 — 15,9:1, серое #C4CBD4 — 9,9:1. */
.cutp-card{margin-top:8px;padding:20px 22px 22px;border-radius:14px;
  background:#161B22;color:#EDF0F3}
.cutp-card b{display:block;font-family:var(--display);font-weight:700;font-size:17px;
  margin-bottom:6px;color:#fff}
.cutp-card span{display:block;font-size:14.5px;color:#C4CBD4;line-height:1.55}
.cut-side{display:grid;gap:10px;align-content:start}
.cut-l{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:15px 17px;border-radius:12px;background:var(--card);cursor:pointer;
  border:1px solid var(--line);text-align:left;color:var(--ink);width:100%}
.cut-l.on{border-color:var(--yellow);background:var(--paper)}
.cut-l b{font-family:var(--display);font-size:15.5px;color:var(--ink)}
.cut-l span{font-family:var(--mono);font-size:13px;color:var(--ink-3)}
.cut-note{margin-top:clamp(22px,2.6vw,32px);font-size:clamp(15px,1.6vw,17px);
  color:var(--ink-2);line-height:1.55;max-width:72ch}

/* ── Срез пола: слои прямо на эскизе ─────────────────────────────────────
   Пересобрано 11.09.2026. Классы `.cutp`, `.cut-side`, `.cut-l` выше остались
   в силе: ими пользуется вторая редакция главной (/v2/), где по-прежнему
   точки на снимке. Здесь — другой механизм.

   Один тёмный кадр, внутри три части: колонка подписей слева, снимок справа
   и плашка описания поверх снимка. Фон карточки взят тон в тон с фоном
   фотографии, поэтому граница между колонкой и снимком не читается —
   подписи выглядят частью эскиза, а не списком рядом с ним.

   Своя среда — графит, значит цвет текста объявлен здесь же, вместе с фоном,
   а не унаследован от светлой секции: белое на #0A0C10 — 18,9:1,
   серое #C4CBD4 — 11,7:1, жёлтое #FFD100 — 13,6:1. */
.cut-stage{
  display:grid;grid-template-columns:minmax(190px,27%) minmax(0,1fr);
  max-width:800px;margin:0 auto;
  background:#0A0C10;color:#EDF0F3;border-radius:24px;overflow:hidden;
}

/* Колонка подписей. Каждая стоит на высоте центра своего слоя (`--mid`),
   поэтому подпись и полоса на снимке читаются как одна строка. */
.cut-legend{position:relative}
.cut-lay{
  position:absolute;left:0;right:0;top:var(--mid);transform:translateY(-50%);
  display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 0 8px 22px;border:0;background:none;cursor:pointer;text-align:left;
  color:#AEB6C2;transition:color .35s ease;
}
.cut-lay i{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;font-style:normal;
  font-family:var(--mono);font-size:13px;font-weight:700;
  background:#1B2029;color:#EDF0F3;
  transition:background .35s ease,color .35s ease;
}
.cut-lay b{font-family:var(--display);font-weight:700;font-size:15.5px;line-height:1.2}
/* Хвост линии от подписи к кадру: занимает весь остаток строки, поэтому
   длина подстраивается под любое название без единой цифры в разметке. */
.cut-lay::after{
  content:"";flex:1;min-width:12px;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,.28));
  transition:background .35s ease;
}
.cut-lay:hover{color:#EDF0F3}
.cut-lay.on{color:#fff}
.cut-lay.on i{background:var(--yellow);color:var(--on-yellow)}
.cut-lay.on::after{background:linear-gradient(90deg,rgba(255,209,0,.35),var(--yellow))}
.cut-lay:focus-visible{outline:2px solid var(--yellow);outline-offset:2px;border-radius:10px}

.cut-frame{position:relative}
.cut-shot{position:relative;margin:0;aspect-ratio:11/9;overflow:hidden}
.cut-shot img{width:100%;height:100%;object-fit:cover;display:block}

/* Полоса слоя. Высота и положение приходят из фактуры: полоса ложится ровно
   на свой слой на снимке. Выбранная подсвечивается жёлтой заливкой с
   затуханием вправо и жёлтыми кромками сверху и снизу — видно границы слоя,
   а фактура под заливкой остаётся различимой. */
.cut-band{
  position:absolute;left:0;right:0;cursor:pointer;
  display:flex;align-items:center;
}
.cut-band::after{
  content:"";position:absolute;inset:0;opacity:0;
  background:linear-gradient(90deg,rgba(255,209,0,.26),rgba(255,209,0,.04) 58%,transparent 78%);
  box-shadow:inset 0 1px 0 var(--yellow),inset 0 -1px 0 var(--yellow);
  transition:opacity .45s ease;
}
.cut-band.on::after{opacity:1}
.cut-band:hover::after{opacity:.45}
.cut-band.on:hover::after{opacity:1}
/* Кружок-номер на самом слое: он же продолжение линии, пришедшей от подписи. */
.cut-pin{
  position:relative;z-index:1;margin-left:6%;
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  font-family:var(--mono);font-size:13px;font-weight:700;
  background:#10141A;color:#EDF0F3;
  box-shadow:0 0 0 1px rgba(255,255,255,.22);
  transition:background .35s ease,color .35s ease,box-shadow .35s ease;
}
.cut-band.on .cut-pin{background:var(--yellow);color:var(--on-yellow);box-shadow:0 0 0 1px rgba(0,0,0,.25)}

/* Описание слоя. Лежит на снимке, в правой половине, где только фактура:
   торец среза и кружки слоёв остаются открытыми. Вертикально плашка встаёт
   по центру выбранного слоя — точное значение считает скрипт, чтобы у
   верхнего и нижнего слоя она не вылезала за кадр. */
.cut-say{
  position:absolute;right:3.5%;top:var(--mid);z-index:3;
  width:min(46%,330px);padding:18px 20px 20px;border-radius:16px;
  background:rgba(12,15,20,.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 18px 44px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.10);
  transition:top .45s cubic-bezier(.22,.61,.36,1);
  /* Плашка не перехватывает клики — они проходят к полоскам и картинке
     под ней. Слой выбирается кликом по любому месту снимка. */
  pointer-events:none;
}
.cut-say em{
  display:block;font-style:normal;font-family:var(--mono);
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--yellow);margin-bottom:8px;
}
.cut-say b{display:block;font-family:var(--display);font-weight:700;font-size:18px;
  color:#fff;line-height:1.22;margin-bottom:8px}
.cut-say span{display:block;font-size:14.5px;line-height:1.55;color:#C4CBD4}

/* Лента слоёв — телефонная замена колонке подписей. */
.cut-chips{display:none}

@media (max-width:900px){
  /* Колонка подписей уже не помещается: слева остаётся 190 px, а название
     «Плита перекрытия» с хвостом линии требует 230. Кадр занимает всю ширину,
     подписи уходят в ленту под ним, описание — следом, внутри той же карточки:
     текст остаётся в эскизе, а не «в стороне». */
  /* Колонка объявлена через minmax(0,1fr), а не 1fr: у элемента сетки
     min-width по умолчанию auto, и лента слоёв с горизонтальной прокруткой
     распирала колонку до 760 px внутри карточки в 350 — снимок обрезался
     по правому краю вместо того, чтобы уместиться целиком. */
  .cut-stage{grid-template-columns:minmax(0,1fr)}
  .cut-frame,.cut-chips{min-width:0}
  .cut-legend{display:none}
  .cut-chips{
    display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
    padding:14px 16px 2px;
  }
  .cut-chips::-webkit-scrollbar{display:none}
  .cut-chip{
    flex:none;display:flex;align-items:center;gap:8px;
    min-height:44px;padding:0 14px;border-radius:12px;cursor:pointer;
    border:1px solid #2A313B;background:#171C24;
    color:#C4CBD4;font-family:var(--display);font-weight:600;font-size:14px;
    transition:background .3s ease,color .3s ease,border-color .3s ease;
  }
  .cut-chip i{
    flex:none;display:flex;align-items:center;justify-content:center;
    width:24px;height:24px;border-radius:50%;font-style:normal;
    font-family:var(--mono);font-size:13px;font-weight:700;
    background:#2A313B;color:#EDF0F3;
  }
  .cut-chip.on{background:var(--yellow);border-color:var(--yellow);color:var(--on-yellow)}
  .cut-chip.on i{background:#F0C400;color:var(--on-yellow)}
  .cut-say{
    position:static;width:auto;margin:14px 16px 18px;
    background:#141922;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    pointer-events:auto;
  }
  .cut-pin{margin-left:5%;width:24px;height:24px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .cut-say,.cut-band::after,.cut-lay,.cut-lay i,.cut-pin{transition:none}
}

/* ── Отзывы каруселью ────────────────────────────────────────────────────
   Заказчик просил формат его действующего сайта. Лента со scroll-snap:
   пальцем листается сама, кнопки нужны мыши и клавиатуре. Площадка в подписи
   не называется — прямое указание «в этом блоке не писать, что отзывы с Авито».

   Лента живёт ВНЕ `.wrap` и получает поля через padding, а не отрицательные
   margin: иначе последняя карточка упирается в край экрана, а на телефоне
   лента даёт горизонтальную прокрутку всей странице. */
.sec-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.sec-head-row h2{margin:0}
.rev-nav{display:flex;gap:8px;flex:none}
.rev-b{width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2);
  background:var(--paper);color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
.rev-b:hover{border-color:var(--ink);background:var(--concrete)}
/* Поля ленты считаются от СВОЕЙ ширины (100%), а не от 100vw: vw включает
   полосу прокрутки, и трек оказывается шире вьюпорта. 100% — это ширина
   контейнера ленты, она уже без полосы. */
.revs{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-left:max(24px,(100% - var(--wrap)) / 2 + 24px);
  padding:4px max(24px,(100% - var(--wrap)) / 2 + 24px) 18px;
  scrollbar-width:thin}
.revs .rev{flex:0 0 clamp(280px,32vw,400px);scroll-snap-align:start}
.rev-who span{color:var(--ink-3)}

/* ── Панель квиза: список без счётчика ──────────────────────────────────
   Счётчик позиций снят 08.09.2026. На его месте — статичный список того,
   что входит в работу всегда, и ниже отдельный список работ по ответам. */
.quiz-base{display:grid;gap:8px;margin-bottom:22px}
.quiz-base li{position:relative;padding-left:24px;font-size:14.5px;color:var(--milk);line-height:1.45}
.quiz-base li::before{
  content:"";position:absolute;left:0;top:.16em;width:16px;height:16px;border-radius:5px;
  background:var(--yellow) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315181D' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.6l5.2 5.2L20 7'/%3E%3C/svg%3E") center/11px 11px no-repeat;
}
.quiz-side-h2{padding-top:18px;border-top:1px solid var(--line-dark)}
.quiz-empty{padding-left:0!important;color:var(--milk-2)!important;font-size:13.5px!important}
.quiz-empty::before{content:none!important}

/* ══ Ширины ══════════════════════════════════════════════════════════════ */
@media (max-width:1080px){
  /* Раскладка `.flow` на узком экране живёт в своём блоке выше (лента),
     здесь её больше нет: два описания одного и того же расходились. */
  .cut-grid{grid-template-columns:1fr}
  .srv{grid-template-columns:1fr}
  .srv-shot img{height:220px}
  .supply.supply-4{grid-template-columns:repeat(2,1fr)}
  .dp{grid-template-columns:1fr}
  .crew-grid.crew-2{grid-template-columns:1fr}
}
@media (max-width:940px){
  /* Карточка расчёта на первом экране становится полной шириной колонки
     и уезжает под текст, а не стоит рядом с ним. */
  .hero-calc{max-width:none;justify-self:stretch}
  .srv-more-row{grid-template-columns:1fr}
}
@media (max-width:620px){
  .supply.supply-4{grid-template-columns:1fr}
  .ba{aspect-ratio:4/3}
  .ba-grip{width:46px;height:46px;margin:-23px 0 0 -23px}
  /* Тап-цели на фотографии — не мельче 44 px. */
  .cutp-dot{width:44px;height:44px;margin:-22px 0 0 -22px;font-size:14px}
  .cutp{aspect-ratio:auto}
  .cutp-card{padding:18px 18px 20px}
  /* На телефоне поле держит не padding ленты, а её собственные поля: сам
     скролл-контейнер стоит на поле 20px и обрезает карточки по нему. Padding
     внутри трека дал бы двойной отступ, а полноширинный трек — «уехавшие»
     карточки у самой рамки экрана. */
  .revs{scroll-padding-left:0;margin-left:20px;margin-right:20px;
    padding-left:0;padding-right:0;overscroll-behavior-x:contain}
  .revs .rev{flex:0 0 min(86%,340px)}
  .sec-head-row{flex-direction:column;align-items:flex-start;gap:14px}
  .dp-top{flex-direction:column;gap:6px}
  .srv-i h3,.srv-lead,.srv-works,.srv-i .go{margin-left:20px;margin-right:20px}
}

/* ── Карта и контакты под формой ─────────────────────────────────────────
   Редакция 11.09.2026. Было: карта и карточка контактов делили строку
   пополам, карта получалась в 58% ширины. Заказчик: «сделать карту большой
   примерно как на старом сайте, окно слева с контактами и иконками
   соцсетей оставляем». Стало: карта во всю ширину секции, карточка контактов
   лежит поверх неё слева — как у него.

   Соотношение сторон задано на обёртке, а не высотой iframe: у виджета нет
   своей высоты, и без этого он схлопывается в полоску. */
/* Карта идёт от края до края экрана, как на действующем сайте заказчика,
   поэтому живёт ВНЕ `.wrap`. Карточка контактов при этом стоит по сетке
   страницы: её отступ слева повторяет поле `.wrap`, а не край окна. */
.map-row{position:relative;margin-top:clamp(38px,4.6vw,64px)}
/* Ширина задана явно (100%), а не выведена из min-height и aspect-ratio:
   иначе браузер считает её как высота × соотношение, карта вылезает за узкий
   экран и утаскивает за собой всю страницу. */
.map-frame{position:relative;overflow:hidden;background:var(--concrete);
  /* Виджет карты грузится последним и не сразу: до его появления здесь
     стояла пустая серая плита во весь экран телефона. Подложка-сетка
     держит место и читается как карта, а не как дырка в вёрстке. */
  background-image:
    linear-gradient(0deg,rgba(21,24,29,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(21,24,29,.05) 1px,transparent 1px),
    linear-gradient(0deg,rgba(21,24,29,.08) 2px,transparent 2px);
  background-size:44px 44px,44px 44px,100% 132px;
  width:100%;min-width:0;aspect-ratio:21/9;min-height:clamp(380px,56vh,620px)}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Замок карты. Выключенная карта не принимает указатель — колесо над ней
   прокручивает страницу, а не приближает карту (замечание заказчика 15.09.2026).
   Подпись появляется на наведении: постоянная плашка поверх карты читалась бы
   как ошибка загрузки. */
.js-map[data-on="0"] iframe{pointer-events:none}
.map-lock{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  background:rgba(21,24,29,0);border:0;cursor:pointer;padding:0;
  transition:background .18s ease;
}
.map-lock>span{
  background:rgba(21,24,29,.86);color:var(--milk);
  font-family:var(--sans);font-size:15px;line-height:1;
  padding:13px 20px;border-radius:999px;
  opacity:0;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease;
}
.map-lock:hover{background:rgba(21,24,29,.18)}
.map-lock:hover>span,.map-lock:focus-visible>span{opacity:1;transform:none}
.map-lock:focus-visible{outline:3px solid var(--accent-text);outline-offset:-3px}
.js-map[data-on="1"] .map-lock{display:none}
/* Карточка контактов поверх карты. Фон непрозрачный: под ней живая карта,
   и полупрозрачная плашка сделала бы адрес нечитаемым на светлых участках. */
.map-info{position:absolute;left:max(20px,(100% - var(--wrap)) / 2);top:50%;transform:translateY(-50%);
  z-index:2;width:min(340px,38%);
  background:var(--paper);color:var(--ink);border-radius:22px;
  padding:clamp(22px,2.4vw,30px);box-shadow:0 22px 60px rgba(21,24,29,.22)}
.map-h{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-text);margin-bottom:16px}
.map-tel{display:inline-block;
  font-size:clamp(20px,2.2vw,25px);color:var(--ink);text-decoration:none}
.map-tel:hover{color:var(--accent-text)}
.map-addr{margin-top:14px;color:var(--ink-2);font-size:15px;line-height:1.55}
.map-legal{margin-top:10px;color:var(--ink-3);font-size:13.5px;line-height:1.5}
.soc-map{margin-top:20px}
@media (max-width:940px){
  /* Поверх карты карточка занимала бы почти весь кадр и закрывала метку
     офиса — на узком экране она встаёт под картой, в общей колонке. */
  .map-info{position:static;transform:none;width:auto;box-shadow:none;
    background:var(--card);margin:14px 20px 0}
  .map-frame{aspect-ratio:4/3;min-height:280px}
}


/* ══════════════════════════════════════════════════════════════════════════
   РЕДАКЦИЯ 09.09.2026. Лента-карусель как общий механизм.

   Заказчик просил два блока — «Наши работы» и «Отзывы» — в том виде, в каком
   они собраны у него на действующем сайте. Разбор его блока: горизонтальная
   лента, круглые жёлтые стрелки, точки под лентой, центральная карточка
   в фокусе, соседние ужаты, переход около секунды.

   Механизм у обоих блоков ОДИН. На сайте уже жили две ленты со scroll-snap
   (факты первого экрана и кадры объектов) — третьего способа листать
   заводить не стали: `.trk` собран из той же механики и просто вынесен
   в отдельный компонент. Пальцем лента листается сама, стрелки и точки
   нужны мыши и клавиатуре.

   Чем наша лента отличается от его и почему. У него боковые слайды
   притушены до 40% прозрачности — там это скриншоты, то есть картинки.
   У нас в карточках живой текст: погасить его до 40% значит сделать
   нечитаемым (серый #3D434E на 40% даёт 2,0:1 при норме 4,5:1). Поэтому
   фокус центральной карточки показан не гашением соседей, а масштабом,
   цветом поверхности и тенью — текст везде читается полностью.
   ══════════════════════════════════════════════════════════════════════════ */

/* Поля ленты считаются от её собственной ширины (100%), а не от 100vw:
   vw включает полосу прокрутки, и трек оказывается шире экрана.
   Величина совпадает с полем `.wrap` (20px), поэтому первая карточка стоит
   ровно под заголовком секции, а не с собственным отступом. */
.trk-box{position:relative;--trk-pad:max(20px,(100% - var(--wrap)) / 2 + 20px)}
/* Привязка к карточке — мягкая (`proximity`), а не жёсткая.
   С `mandatory` лента не поддавалась трекпаду вовсе: каждый малый сдвиг колеса
   браузер отменял возвратом к ближайшей точке привязки, и 3200 px прокрутки
   давали ноль хода. Со стороны это и читается как «передёргивает» — заказчик
   15.09.2026, сравнивая с лентой на своём сайте, где привязки нет совсем.
   Мягкая привязка пропускает свободный ход и подтягивает карточку, только
   когда та и так рядом; ровное положение после остановки доводит скрипт.
   На телефоне привязка остаётся жёсткой: там лента листается броском пальца,
   а не порциями, и жёсткая привязка как раз даёт нужный «щелчок» по карточке. */
.trk{
  display:flex;gap:18px;overflow-x:auto;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scroll-padding-left:var(--trk-pad);
  padding:6px var(--trk-pad) 20px;
  scrollbar-width:none;
}
.trk::-webkit-scrollbar{display:none}
.trk>*{scroll-snap-align:start}
@media (hover:none){
  .trk{scroll-snap-type:x mandatory}
}
/* Фокус видим: лента прокручивается с клавиатуры, значит она — управляемый
   элемент, и обводка на ней обязана быть. */
.trk:focus-visible{outline:3px solid var(--accent-text);outline-offset:-3px;border-radius:22px}

/* ── Мягкие края ленты ───────────────────────────────────────────────────
   Заказчик 10.09.2026: «хочется такой же эффект небольшого блюра по бокам,
   как на старом сайте». У него по бокам размыты соседние слайды — там это
   картинки. У нас в карточках текст, и размывать его целиком нельзя: отзыв
   в полушаге от середины должен читаться. Поэтому размыта не карточка,
   а сама кромка ленты — полоса в 26–84 px у левого и правого края, где
   содержимое всё равно уходит за границу экрана. Карточка въезжает в кадр
   из мягкого края и становится резкой — тот же эффект, без потери текста.

   Полоса не доходит до подвала со стрелками: его высоту скрипт кладёт
   в `--trk-foot-h`, иначе блюр ложился бы на жёлтые кнопки.

   Цвет кромки берётся от фона секции, а не задан жёстко: лента живёт и на
   белом, и на сером `section.tone`, и на графите. */
.trk-box{--trk-edge:var(--paper)}
section.tone .trk-box{--trk-edge:var(--concrete)}
section.dark .trk-box{--trk-edge:var(--graphite)}
.trk-box::before,.trk-box::after{
  content:"";position:absolute;top:0;bottom:var(--trk-foot-h,58px);
  width:clamp(26px,6vw,84px);pointer-events:none;z-index:2;
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
}
.trk-box::before{left:0;
  background:linear-gradient(90deg,var(--trk-edge) 6%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 18%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 18%,transparent 100%);
}
.trk-box::after{right:0;
  background:linear-gradient(270deg,var(--trk-edge) 6%,transparent 100%);
  -webkit-mask-image:linear-gradient(270deg,#000 18%,transparent 100%);
          mask-image:linear-gradient(270deg,#000 18%,transparent 100%);
}

/* Лента тянется мышью. Курсор говорит об этом до того, как человек попробует:
   «рука» на ленте, сжатая — во время протяжки. Пока тянем, ссылки и кадры
   внутри не ловят указатель — иначе браузер начинает своё перетаскивание
   картинки и лента застревает. */
.trk{cursor:grab}
.trk.is-drag{cursor:grabbing;user-select:none}
.trk.is-drag a,.trk.is-drag img,.trk.is-drag picture{pointer-events:none}

/* ── Подвал ленты: стрелка — точки — стрелка ─────────────────────────────
   Один ряд на всех ширинах. У заказчика стрелки висят по бокам поверх
   крайних карточек; на телефоне они закрывают текст, поэтому там они
   всегда внизу, а по бокам выносятся только когда рядом с лентой реально
   есть свободное поле (см. min-width:1300px ниже). */
.trk-foot{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:2px}
.trk-arr{
  width:56px;height:56px;flex:none;border-radius:50%;border:0;cursor:pointer;
  background:var(--yellow);color:var(--on-yellow);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(21,24,29,.16);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.trk-arr svg{width:22px;height:22px}
.trk-arr:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(21,24,29,.22)}
.trk-arr:active{transform:translateY(0)}
/* Край ленты. Стрелка не исчезает и не остаётся жёлтой «живой» кнопкой,
   которая ничего не делает: она гаснет до поверхности карточки, а знак
   остаётся читаемым — #5B6270 на #F4F5F7 даёт 5,6:1. */
.trk-arr[disabled]{background:var(--card);color:var(--ink-3);box-shadow:none;cursor:default;transform:none}
.trk-dots{display:flex;align-items:center;gap:4px}
.trk-cnt{display:none}
/* Кнопка-точка ростом 44 px — это тач-цель по Apple HIG, а не размер самой
   точки: видимая часть нарисована псевдоэлементом и остаётся мелкой.
   По ширине 24 px: семь точек в ряд со стрелками должны поместиться в 320 px,
   а промах по горизонтали в ряду одинаковых точек не стоит ничего — соседняя
   точка делает то же самое, только на карточку левее. */
.trk-dot{
  width:24px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.trk-dot::before{
  content:"";width:9px;height:9px;border-radius:999px;
  border:1.5px solid var(--ink-3);background:none;
  transition:width .3s ease,background .3s ease,border-color .3s ease;
}
.trk-dot.on::before{width:24px;background:var(--ink);border-color:var(--ink)}
.trk-dot:hover::before{border-color:var(--ink)}

/* Точки и погасшая стрелка в тёмной секции. Базовые цвета рассчитаны на
   светлый фон: `--ink` на графите — это тёмное на тёмном, и в «Этапах
   ремонта» активная точка пропадала совсем. Тёмная среда переопределяет их
   отдельно, как и положено по палитре ролей. */
section.dark .trk-dot::before{border-color:rgba(255,255,255,.45)}
section.dark .trk-dot:hover::before{border-color:#fff}
section.dark .trk-dot.on::before{background:var(--yellow);border-color:var(--yellow)}
section.dark .trk-arr[disabled]{background:#252B34;color:#9AA3AF}

/* Пробовали вынести стрелки по бокам от ленты, как у заказчика. Не годится
   ни на одной ширине: лента идёт до самого края экрана, следующая карточка
   всегда выглядывает справа — и правая стрелка садится жёлтым кругом прямо
   на её текст. У заказчика в слайдах картинки, там это незаметно; у нас
   текст. Стрелки живут в одном ряду с точками под лентой: ничего не
   перекрывают, одинаково работают на телефоне и на широком экране. */
@media (max-width:620px){
  /* На телефоне поле держит не padding ленты, а её собственные поля: так
     карточка обрезается ровно по полю страницы, а не по двойному отступу. */
  .trk{scroll-padding-left:0;margin-left:20px;margin-right:20px;
    padding-left:0;padding-right:0;overscroll-behavior-x:contain}
  .trk-arr{width:50px;height:50px}
  .trk-foot{gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .trk-arr,.trk-dot::before,.trk--center>*{transition:none}
}

/* ── Карусель отзывов ────────────────────────────────────────────────────
   Центральная карточка — белая с тенью, соседние — плоские на цвете
   поверхности и ужаты до 94%. Масштаб не меняет место карточки в потоке,
   поэтому шаг ленты и точки от него не разъезжаются. */
.trk--center>*{
  scroll-snap-align:center;
  transform:scale(.94);transform-origin:center;
  transition:transform .55s cubic-bezier(.22,.61,.36,1),
             box-shadow .55s ease,background-color .55s ease;
}
.trk--center>.is-mid{transform:none}
.rev{
  background:var(--card);color:var(--ink);border-radius:22px;
  padding:24px 24px 26px;display:flex;flex-direction:column;
  flex:0 0 clamp(280px,34%,430px);
}
.trk--center .rev.is-mid{
  background:var(--paper);
  box-shadow:0 24px 56px rgba(21,24,29,.13),0 0 0 1px var(--line);
}
.rev-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.rev-av{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;flex:none;border-radius:50%;
  background:var(--graphite);color:var(--milk);
  font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.02em;
  box-shadow:0 0 0 0 var(--yellow);
  transition:box-shadow .55s ease;
}
.trk--center .is-mid .rev-av{box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--yellow)}

.rev-av-img{background:var(--concrete);padding:0;overflow:hidden}
.rev-av-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}

.rev-av.av-1{background:linear-gradient(145deg,#2C6FBF,#1B4C87)}
.rev-av.av-2{background:linear-gradient(145deg,#2A8A58,#19603B)}
.rev-av.av-3{background:linear-gradient(145deg,#C0552F,#8A3A1E)}
.rev-av.av-4{background:linear-gradient(145deg,#1E8480,#11605C)}
.rev-av.av-5{background:linear-gradient(145deg,#7E4590,#552F63)}
.rev-av.av-6{background:linear-gradient(145deg,#B5872B,#7E5D18)}
.rev-who{min-width:0}
.rev-who b{display:block;font-family:var(--display);font-weight:700;font-size:17px;
  color:var(--ink);line-height:1.2}
.rev-who span{display:block;font-size:13.5px;color:var(--ink-3);margin-top:3px}
.rev-stars{display:flex;gap:3px;margin-bottom:12px;color:var(--yellow)}
.rev-stars svg{width:16px;height:16px;stroke:var(--accent-text);stroke-width:1}
.rev-kind{font-family:var(--mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:12px;line-height:1.4}
.rev p{color:var(--ink-2);font-size:15.5px;line-height:1.58}
.rev-src{margin-top:auto;padding-top:16px;font-size:14px;font-weight:600;
  color:var(--accent-text);text-decoration:none;align-self:flex-start}
.rev-src:hover{text-decoration:underline}
.revs-note{margin-top:6px;font-size:14.5px;color:var(--ink-3);line-height:1.55;max-width:74ch}

/* ── Карусель работ ──────────────────────────────────────────────────────
   Карточки одной высоты: лента — флексбокс, растяжка по умолчанию, поэтому
   короткая карточка догоняет длинную. Кнопка прижата к низу отступом auto,
   и карточка без площади и срока не разъезжается — у неё просто больше
   воздуха между названием и кнопкой. */
/* Карточка, стоящая в опорной точке ленты, чуть приподнята и обведена:
   заказчик просил «улучшить карусель в плане визуала и взаимодействия»,
   и без метки фокуса лента читается как простая полоса картинок. */
.trk .work{flex:0 0 clamp(266px,31%,384px);align-self:stretch;
  border-radius:22px;overflow:hidden;background:var(--card);
  transition:box-shadow .45s ease,transform .45s ease}
.trk .work.is-mid{transform:translateY(-4px);
  box-shadow:0 22px 48px rgba(21,24,29,.16),0 0 0 1px var(--line)}
.work-b{padding:22px 22px 24px}
.work-rows:empty{display:none}

/* ── Первый экран на телефоне ────────────────────────────────────────────
   Междустрочный интервал заголовка. На широком экране кегль 78 px и
   плотный интерлиньяж 1,02 работают: строки крупные, воздух между ними
   есть. На телефоне кегль падает до 38 px, а интерлиньяж остаётся тем же —
   38,8 px на строку, то есть меньше пикселя просвета. «ПОД КЛЮЧ»
   и «В МОСКВЕ И МО» практически слипались. Ниже 760 px строка получает
   43,7 px — просвет около 6 px, строки читаются раздельно. */
@media (max-width:760px){
  h1{line-height:1.15}
  .hero h1 span{margin-top:.06em}
}

/* Разрядка у надстрочной подписи добавляется и ПОСЛЕ последней буквы —
   строка оказывается оптически сдвинутой влево относительно всего, что
   под ней. Отрицательное поле справа компенсирует ровно этот хвост. */
.hero-calc-k,.map-h{margin-right:-.2em}

/* ── Панель действий на телефоне ─────────────────────────────────────────
   Три кнопки в ряд были разной высоты и с разным скруглением: у крайних
   радиус приходил от `.btn`, у мессенджера — свой. Радиус и высота теперь
   заданы на всей панели разом, чтобы не разъезжались при правке кнопок. */
.cta-bar{align-items:stretch}
.cta-bar .btn,.cta-bar .btn-msg{min-height:52px;height:52px;border-radius:14px}
.cta-bar .btn-msg{display:flex;align-items:center;justify-content:center}

/* ── Телефон: правки, которым нужен конец файла ──────────────────────────
   Всё, что ниже, перебивает правила, объявленные позже основного мобильного
   блока. Медиазапрос специфичности не добавляет, поэтому побеждает порядок:
   эти строки стоят последними намеренно, а не «дописаны потом». */
@media (max-width:620px){
  /* Точки-индикаторы лент снимаются целиком. Причина не косметическая:
     тач-цель по Apple HIG — 44 px, а семь точек по 44 просят 308 px плюс
     зазоры и две стрелки: в 320 px это не помещается физически. Кнопка
     шириной 24 px — это кнопка, в которую не попадают.
     Взамен ничего не теряется: лента листается пальцем нативно, а стрелки
     рядом честные 44×44. Снимаем из потока, а не гасим pointer-events —
     иначе точки остаются в обходе с клавиатуры, но не нажимаются. */
  .trk-dots{display:none}
  /* Взамен точек — счётчик между стрелками. Он и разводит стрелки по краям
     (без него они стояли вплотную по центру и читались как одна пара
     кнопок непонятно от чего), и отвечает на вопрос «сколько тут всего
     и где я сейчас», ради которого точки и существуют. */
  .trk-cnt{display:block;font-family:var(--mono);font-size:14px;color:var(--ink-3);
    min-width:52px;text-align:center;letter-spacing:.04em}
  .trk-cnt b{color:var(--ink);font-weight:600}
  section.dark .trk-cnt{color:#9AA3AF}
  section.dark .trk-cnt b{color:var(--milk)}
  .trk-foot{gap:18px}

  /* Портрет во весь экран читается как заставка: человек теряет нить между
     ним и следующим блоком. Кадры объектов — по той же причине. */
  .boss-photo picture{max-width:220px}
  .shot img,.work-shot img{max-height:56vh}
}

/* ── Телефон: горизонтальный скролл ─────────────────────────────────────
   На 393 px страница была шире экрана (404 px). Причина — карта сайта
   в подвале в две колонки: на половину от 353 px приходится 176 px, а
   «Квартиры и комнаты» и «Ремонт в новостройке» столько не занимают —
   но и не переносятся, потому что у элемента сетки min-width по умолчанию
   auto, то есть не уже своего содержимого. Колонка распирает сетку, сетка —
   страницу.
   Лечим обе стороны: одна колонка на узком экране и явный min-width:0,
   чтобы длинная строка переносилась, а не толкала макет. */
@media (max-width:480px){
  .ft-map{grid-template-columns:1fr}
}
@media (max-width:620px){
  .ft-map>*{min-width:0}
  .ft-h,.ft-map a{overflow-wrap:anywhere}
  /* Кнопка липкой панели тоже упиралась в край: ширина по содержимому
     плюс поля панели давали 384 px при 373 доступных. */
  #ctabar-go{min-width:0}
  .ctabar .btn{padding-left:14px;padding-right:14px}
}


/* ── Сообщение о веб-аналитике ───────────────────────────────────────────
   Сам файл баннера — общий для сети и правкам не подлежит, поэтому его
   положение подвинуто здесь. Две причины: на телефоне он ложился поверх
   панели действий («Позвонить», «Рассчитать»), а полоса во всю ширину
   выходила за боковое поле мобильной вёрстки. Стиль у баннера инлайновый,
   перебить его можно только !important. */
@media (max-width:620px){
  #eco-pdn{
    left:20px!important;right:20px!important;width:auto!important;max-width:none!important;
    bottom:calc(78px + env(safe-area-inset-bottom))!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   СТРАНИЦА «О КОМПАНИИ» (/o-kompanii/)
   Своих цветов у страницы нет — только раскладка: всё берётся из токенов
   сайта, поэтому правка палитры на главной доезжает сюда сама.
   ══════════════════════════════════════════════════════════════════════════ */

/* Первый экран: ответ слева, проверяемые факты справа. */
.ab-head{padding-top:clamp(18px,2vw,28px)}
.ab-head-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:start}
.ab-facts{background:var(--card);border-radius:22px;padding:clamp(20px,2.4vw,28px);
  display:grid;gap:2px}
/* Пара «параметр — значение». Значение в моноширинном шрифте длиннее
   подписи («ООО СК «ЛЮДИ»», адрес), поэтому строка обязана уметь переноситься,
   а значению нужен min-width:0 — иначе флекс не даёт ему сжаться и хвост
   уезжает под рамку блока (поймано визуальным гейтом на 390 px). */
.ab-facts>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px 16px;
  flex-wrap:wrap;padding:11px 0;border-bottom:1px solid var(--line)}
.ab-facts>div:last-child{border-bottom:0}
.ab-facts dt{color:var(--ink-3);font-size:14.5px;flex:none}
.ab-facts dd{font-family:var(--mono);font-size:14px;color:var(--ink);text-align:right;
  min-width:0;overflow-wrap:anywhere}

/* Слово директора. Портрет слева, цитата справа — на узком экране портрет
   ужимается до 220 px: в полный рост он читается как заставка. */
/* Портрет — ровно тот же кадр, что на главной: колонка той же ширины, рамка
   со скруглением, своя тёмная подложка и `contain`, прижатый к низу. Кроп
   по высоте здесь пробовали — фигура обрывалась в пустоте, и владелец
   справедливо назвал это обрезанным фото (11.09.2026). Обрез краем кадра
   читается как кроп по пояс, обрыв силуэта — как брак. */
.ab-boss{display:grid;grid-template-columns:minmax(280px,400px) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:center}
.ab-boss-photo picture{
  position:relative;display:block;overflow:hidden;border-radius:22px;
  background:linear-gradient(168deg,#EDEFF2 0%,#E2E5EA 62%,#D8DCE2 100%);
  aspect-ratio:404/790;
}
.ab-boss-photo img{display:block;width:100%;height:100%;
  object-fit:contain;object-position:50% 100%}
.ab-boss-text blockquote{margin:18px 0 0;padding:0;border:0}
.ab-boss-text blockquote p{color:var(--ink-2);font-size:clamp(15.5px,1.7vw,17.5px);
  line-height:1.62}
.ab-boss-text blockquote p+p{margin-top:12px}
.ab-boss-text blockquote b{color:var(--ink)}
.ab-boss-sign{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.ab-boss-sign b{display:block;font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink)}
.ab-boss-sign span{display:block;margin-top:3px;font-size:14px;color:var(--ink-3)}

/* Схема связи на объекте. Рисуется кодом: на телефоне текст в растре
   нечитаем, а тут он масштабируется вместе с кадром. */
.ab-scheme{margin:0 0 clamp(26px,3vw,40px);padding:clamp(18px,2.2vw,28px);
  background:var(--card);border-radius:22px;overflow-x:auto}
.ab-scheme svg{display:block;width:100%;min-width:700px;height:auto}
.ab-scheme figcaption{margin-top:14px;font-size:14.5px;color:var(--ink-3);line-height:1.5}

/* На узком экране схема шире рамки и прокручивается внутри неё. Чтобы
   обрезанный край читался как продолжение, а не как поломка, у рамки справа
   мягкая кромка — тот же приём, что у лент на главной. Дублировать схему
   текстовой цепочкой не стали: ниже те же роли карточками, и три пересказа
   одного подряд — шум. */
.ab-scheme{position:relative}
@media (max-width:900px){
  .ab-scheme::after{content:"";position:absolute;top:0;right:0;bottom:56px;width:44px;
    pointer-events:none;border-radius:0 22px 22px 0;
    background:linear-gradient(270deg,var(--card) 10%,transparent)}
}
.ab-s-h{font-family:'Golos Text',sans-serif;font-weight:700;font-size:26px}
.ab-s-t{font-family:'Inter',sans-serif;font-size:23px}
/* Кегль в схеме задаётся в единицах viewBox: при холсте 1160 и минимальной
   ширине кадра 700 px масштаб равен 0,6 — значит 23 единицы дают 13,9 px
   на экране. Мельче нельзя: подпись у стрелки читают так же, как текст.
   Зазоры между блоками — 120 единиц: подпись «вопрос» шириной 85 обязана
   помещаться между карточками, а не лежать поверх них.
   Прятать схему на телефоне нельзя: приёмка мерит её и в скрытом виде,
   получая нулевой кегль. Поэтому схема одна на все ширины, а на узком
   экране под ней дублируется цепочкой — текстом, без прокрутки вбок. */
.ab-s-n{font-family:'JetBrains Mono',monospace;font-size:23px;letter-spacing:.04em}

/* Роли на объекте. Шесть карточек тремя колонками — без висящей одиночки. */
.ab-crew{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:16px}
.ab-crew article{background:var(--card);border-radius:18px;padding:22px 22px 24px}
.ab-crew b{display:block;font-family:var(--display);font-weight:700;font-size:17.5px;
  color:var(--ink);margin-bottom:8px}
.ab-crew span{display:block;color:var(--ink-2);font-size:15px;line-height:1.55}

/* Обязательства: четыре карточки, у каждой номер как у пунктов на главной. */
.ab-duty{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:16px}
.ab-duty article{background:var(--card);border-radius:22px;padding:26px 26px 28px}
.ab-duty-n{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:12px;background:var(--yellow);color:var(--on-yellow);
  font-family:var(--mono);font-size:14px;font-weight:700;margin-bottom:14px}
.ab-duty h3{color:var(--ink);font-size:clamp(18px,1.9vw,21px);margin-bottom:9px}
.ab-duty p{color:var(--ink-2);font-size:15.5px;line-height:1.55}

/* Что делаем: три карточки-ссылки с кадром вида работ. */
.ab-do{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ab-do-i{display:flex;flex-direction:column;background:var(--card);border-radius:20px;
  overflow:hidden;text-decoration:none;color:var(--ink);
  transition:transform .25s ease,box-shadow .25s ease}
.ab-do-i:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(21,24,29,.12)}
.ab-do-shot{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--concrete)}
.ab-do-shot img{width:100%;height:100%;object-fit:cover;display:block}
.ab-do-b{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.ab-do-b b{font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink)}
.ab-do-b>span{margin-top:8px;color:var(--ink-2);font-size:15px;line-height:1.55}
.ab-do-b .go{margin-top:auto;padding-top:14px;font-style:normal;font-weight:600;
  font-size:14.5px;color:var(--accent-text)}
.ab-geo{margin-top:clamp(20px,2.4vw,30px);max-width:82ch;color:var(--ink-2);
  font-size:clamp(15px,1.6vw,17px);line-height:1.6}

/* Реквизиты: две колонки пар «параметр — значение», цифры моноширинные. */
/* Реквизиты плитками, а не строками с точками-выравниванием: подпись сверху,
   значение снизу, всё по левому краю. Строчная раскладка с прижатым вправо
   значением ломалась на длинном адресе — он переносился и ряд разъезжался. */
.ab-req{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ab-req>div{background:var(--card);border-radius:16px;padding:18px 20px 20px}
.ab-req dt{color:var(--ink-3);font-size:14px}
.ab-req dd{margin-top:6px;font-family:var(--mono);font-size:14.5px;color:var(--ink);
  line-height:1.45;overflow-wrap:anywhere}
/* Адрес длиннее прочих значений — ему отводится вся строка. */
.ab-req>div.wide{grid-column:1 / -1}
.ab-req a{color:var(--ink);text-decoration:none}
.ab-req a:hover{color:var(--accent-text)}

/* Куда идти дальше. */
.ab-links{margin-top:clamp(30px,3.4vw,44px);padding-top:24px;border-top:1px solid var(--line)}
.ab-links-h{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-text);margin-bottom:14px}
.ab-links ul{display:flex;flex-wrap:wrap;gap:10px}
.ab-links li{list-style:none}
.ab-links a{display:inline-block;padding:10px 16px;border-radius:999px;
  border:1px solid var(--line-2);color:var(--ink);text-decoration:none;font-size:15px}
.ab-links a:hover{border-color:var(--ink);background:var(--card)}

@media (max-width:1080px){
  .ab-head-grid{grid-template-columns:1fr}
  .ab-crew,.ab-do{grid-template-columns:repeat(2,1fr)}
  .ab-req{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  /* На узком экране пара «параметр — значение» встаёт в две строки: значение
     в моноширинном шрифте почти во всю ширину карточки, и прижатое к правому
     краю оно читается как обрезанное. */
  .ab-facts>div{flex-direction:column;align-items:flex-start;gap:3px}
  .ab-facts dd{text-align:left}
  .ab-duty{grid-auto-rows:auto}
}
@media (max-width:760px){
  .ab-boss{grid-template-columns:1fr}
  /* На телефоне кадр во весь экран читается как заставка — как и на главной,
     он ужимается и остаётся в своей рамке. */
  .ab-boss-photo picture{max-width:290px}
  .ab-duty{grid-template-columns:1fr}
  .ab-req{grid-template-columns:1fr}
  .ab-crew,.ab-do{grid-template-columns:1fr}
  /* Схема шире экрана — её прокручивают вбок внутри своей рамки, а не тянут
     за собой всю страницу: у обёртки свой overflow, у документа его нет. */
  .ab-scheme{padding:14px}
  .ab-req>div{gap:10px}
}


/* ══════════════════════════════════════════════════════════════════════════
   СТРАНИЦА «ЦЕНЫ И СМЕТА» (/ceny/)
   Тот же набор токенов, что и на главной: своих цветов у страницы нет.
   ══════════════════════════════════════════════════════════════════════════ */

/* Заголовок первого экрана на страницах с карточкой сбоку. Общий кегль H1
   рассчитан на полную ширину: в колонке 600 px строка «квартир в Москве»
   вылезала за колонку и заходила под карточку цен. */
.ab-head-grid h1,.pr-head-grid h1{font-size:clamp(30px,3.4vw,48px);line-height:1.07}
.ab-head-grid>*,.pr-head-grid>*{min-width:0}
.pr-head{padding-top:clamp(18px,2vw,28px)}
.pr-head-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:start}

/* Карточка цен. Первая строка — главная цифра страницы, поэтому крупнее
   остальных и на жёлтой подложке: человек пришёл за ней. */
.pr-card{background:var(--card);border-radius:22px;padding:clamp(20px,2.4vw,28px);
  display:grid;gap:2px;align-content:start}
.pr-card>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px 18px;
  flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line)}
.pr-card>div:first-child{margin:calc(-1 * clamp(20px,2.4vw,28px)) calc(-1 * clamp(20px,2.4vw,28px)) 6px;
  padding:18px clamp(20px,2.4vw,28px) 22px;background:var(--yellow);border-bottom:0;
  border-radius:22px 22px 0 0}
.pr-card>div:first-child dt{color:var(--on-yellow);font-weight:600}
.pr-card>div:first-child dd{color:var(--on-yellow);font-size:clamp(19px,2.2vw,24px);font-weight:700}
.pr-card>div:last-of-type{border-bottom:0}
.pr-card dt{color:var(--ink-3);font-size:14.5px}
.pr-card dd{font-family:var(--mono);font-size:14.5px;color:var(--ink);text-align:right;
  min-width:0;overflow-wrap:anywhere}
.pr-card-n{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--ink-3)}

/* Из чего складывается сумма — четыре карточки. Заливка идёт через --card,
   а не через белый напрямую: на белой секции карточка была белой на белом
   и не читалась как отдельный блок. Токен переворачивается вместе со средой —
   бетон на белом, белый на бетоне, графит-2 на графите. */
.pr-fact{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:16px}
.pr-fact article{background:var(--card);border-radius:22px;padding:26px 26px 28px}
.pr-fact-n{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:12px;background:var(--graphite);color:var(--milk);
  font-family:var(--mono);font-size:14px;font-weight:700;margin-bottom:14px}
.pr-fact h3{color:var(--ink);font-size:clamp(18px,1.9vw,21px);margin-bottom:9px}
.pr-fact p{color:var(--ink-2);font-size:15.5px;line-height:1.55}

/* Входит / чего нет. Два столбца с разными знаками: галочка и минус.
   Цвет знака различается, но смысл не только в цвете — знаки разной формы. */
.pr-two{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.pr-col{background:var(--card);border-radius:22px;padding:26px 26px 28px}
.pr-col-h{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:16px}
.pr-col-yes .pr-col-h{color:#1F6B3F}
.pr-col-no .pr-col-h{color:var(--accent-text)}
.pr-col li{list-style:none;position:relative;padding-left:30px;color:var(--ink-2);
  font-size:15.5px;line-height:1.55;overflow-wrap:anywhere}
.pr-col li+li{margin-top:12px}
.pr-col li::before{position:absolute;left:0;top:0;width:20px;height:20px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.pr-col-yes li::before{content:"✓";background:#E4F1E9;color:#1F6B3F}
.pr-col-no li::before{content:"−";background:#FFF3CC;color:#7A6100}

/* Сроки по площади. */
.pr-terms{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.pr-terms>div{background:var(--card);border-radius:18px;padding:20px 18px;text-align:center}
.pr-terms b{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(19px,2.1vw,23px);color:var(--ink)}
.pr-terms span{display:block;margin-top:6px;font-family:var(--mono);font-size:14px;color:var(--ink-3)}

/* Дизайн-проект: два тарифа и состав комплекта. */
.pr-design{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.pr-design article{background:var(--paper);border-radius:22px;padding:26px 26px 28px;height:100%}
.pr-design-h{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-text);margin-bottom:12px}
.pr-design-p{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.6vw,30px);
  color:var(--ink);margin-bottom:10px}
.pr-design p{color:var(--ink-2);font-size:15.5px;line-height:1.55}
.pr-design-more ul{margin:0}
/* Список «что добавлено» у пакета оформлен так же, как «В обоих пакетах»:
   до 23.09.2026 правило было только у последней карточки, и у «Бизнеса»
   список шёл голым текстом вплотную к описанию. */
.pr-design article p+ul{margin-top:16px}
.pr-design li{list-style:none;position:relative;padding-left:18px;color:var(--ink-2);
  font-size:15px;line-height:1.5}
.pr-design li+li{margin-top:9px}
.pr-design li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
  border-radius:50%;background:var(--yellow)}
.pr-design-more .go{display:inline-block;margin-top:16px;font-weight:600;font-size:14.5px;
  color:var(--accent-text);text-decoration:none}
.pr-design-more .go:hover{text-decoration:underline}

/* Порядок оплаты: четыре шага с линией между ними. */
.pr-pay{counter-reset:pay;display:grid;gap:0;margin:0}
.pr-pay li{position:relative;list-style:none;counter-increment:pay;padding:0 0 26px 58px}
.pr-pay li:last-child{padding-bottom:0}
.pr-pay li::before{content:counter(pay);position:absolute;left:0;top:0;
  width:38px;height:38px;border-radius:50%;background:var(--yellow);color:var(--on-yellow);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:14px;font-weight:700}
.pr-pay li:not(:last-child)::after{content:"";position:absolute;left:18px;top:44px;bottom:6px;
  width:2px;background:var(--line-2)}
.pr-pay b{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(17px,1.8vw,20px);color:var(--ink)}
/* Строка описания шага ограничена по длине: на 1440 px без ограничения в ней
   получалось 178 знаков — глаз теряет начало следующей строки. */
.pr-pay span{display:block;margin-top:6px;color:var(--ink-2);font-size:15.5px;line-height:1.55;
  max-width:76ch}

@media (max-width:1080px){
  .pr-head-grid{grid-template-columns:1fr}
  .pr-design{grid-template-columns:1fr}
  .pr-terms{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .pr-fact,.pr-two{grid-template-columns:1fr}
  .pr-fact{grid-auto-rows:auto}
  .pr-terms{grid-template-columns:repeat(2,1fr)}
  .pr-card>div{flex-direction:column;align-items:flex-start;gap:3px}
  .pr-card dd{text-align:left}
  .pr-card>div:first-child{flex-direction:row;align-items:baseline;justify-content:space-between}
}

/* ─── Комплект чертежей дизайн-проекта (assets/design-set.php) ────────────
   Рисунок слева, список листов справа; на планшете и телефоне — друг под
   другом. Цвета берутся токенами и объявляются вместе с фоном: у карточки
   листа свой фон, поэтому линия и номер на ней заданы явно, а не наследуются
   от секции, которая может быть и светлой, и `tone`. */
.dset{margin-top:24px;display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:start}
.dset figcaption{
  grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:1px solid var(--line-2);padding-bottom:10px;
}
.dset-hold{background:var(--card);border-radius:18px;padding:16px}
.dset-svg{display:block;width:100%;height:auto}
.dset-card{fill:var(--paper);stroke:var(--line-2);stroke-width:1.5}
.dset-line{stroke:var(--ink-3)}
.dset-badge{fill:var(--yellow)}
.dset-num{fill:var(--on-yellow);font-family:var(--mono);font-size:28px;font-weight:700}
.dset-list{counter-reset:none}
.dset-list li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line)}
.dset-list li:last-child{border-bottom:0}
.dset-no{
  flex:0 0 26px;height:26px;border-radius:50%;background:var(--yellow);color:var(--on-yellow);
  font-family:var(--mono);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.dset-list li>span+span{color:var(--ink-2);font-size:15px;line-height:1.45;padding-top:3px}
@media (max-width:900px){
  .dset{grid-template-columns:1fr;gap:20px}
}

/* ── Ритм внутренних страниц: номер раздела и отбивка ────────────────────
   Страницы услуг собраны из однотипных разделов: заголовок, список, шаги.
   Пока разделы шли без явных границ, страница читалась одной лентой —
   на /remont-kuhni/ первые два блока сливались в один. Раздел получает
   сквозной номер и линию над заголовком: страница читается как документ
   со структурой, а не как полотно, и это тот же жанр, что выбран
   в брендбуке — «Смета».
   Правило включается только там, где есть шапка .pr-head, то есть
   на внутренних страницах: у главной свой ритм, её не трогаем.
   Номер объявляется вместе со средой: на светлом — тёмно-золотой
   --accent-text, на графите — жёлтый --accent-on-dark. Смешивать роли
   одного тона нельзя, иначе на графите номер уходит в нечитаемое. */
body{counter-reset:sec}
.pr-head ~ section{counter-increment:sec}
.pr-head ~ section .sec-head{border-top:2px solid var(--line-2);padding-top:clamp(18px,2vw,26px)}
.pr-head ~ section.dark .sec-head{border-top-color:var(--line-dark)}
.pr-head ~ section .sec-head h2::before{
  content:counter(sec,decimal-leading-zero);
  display:block;margin-bottom:10px;
  font-family:var(--mono);font-size:13px;font-weight:600;
  letter-spacing:.14em;line-height:1;color:var(--accent-text)}
.pr-head ~ section.dark .sec-head h2::before{color:var(--accent-on-dark)}
/* У блоков с лентой заголовок и без того прижат к управлению — линия там
   съедает высоту, которую 11.09 специально отыгрывали. Оставляем номер. */
.pr-head ~ #obyekty .sec-head,.pr-head ~ #otzyvy .sec-head,
.pr-head ~ #sloi .sec-head{border-top:0;padding-top:0}

/* Состав работ на внутренней странице — ведомостью в два столбца.
   Одиннадцать пунктов в одну колонку читались сплошной серой полосой
   и занимали экран целиком, не давая понять, что это перечень позиций
   сметы. Линия под каждой позицией делает из списка ведомость — ту же,
   какой заказчик отдаёт клиенту. В карточках услуг на главной список
   остаётся прежним: там он живёт внутри плитки, и правило туда не идёт. */
.pr-head ~ section .srv-works{margin:0;gap:0;
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,56px)}
.pr-head ~ section .srv-works li{padding:13px 0 13px 22px;font-size:15.5px;
  border-top:1px solid var(--line)}
.pr-head ~ section .srv-works li::before{top:calc(13px + .62em)}
.pr-head ~ section.tone .srv-works li{border-top-color:var(--line-2)}
.pr-head ~ section.dark .srv-works li{border-top-color:var(--line-dark)}
@media (max-width:760px){
  .pr-head ~ section .srv-works{grid-template-columns:1fr}
}


/* ══════════════════════════════════════════════════════════════════════════
   РЕДАКЦИЯ 23.09.2026. Разделение блоков главной и единый отступ до кнопок.

   Заказчик: верх главной сливается — квиз «Соберите состав своей сметы»
   и ползунок «до / после» перевести с белого фона на чёрный. Теперь фон
   чередуется: графит · белый · бетон · графит · белый.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Квиз на графите ─────────────────────────────────────────────────────
   Включается только на главной: skl_quiz(true). На посадочных квиз
   остаётся светлым. Цвет текста объявлен вместе с фоном. Карточка
   вопросов остаётся светлой (--card), её типографика не меняется;
   боковая панель уже графитовая — её приподнимаем на тон, иначе она
   растворяется в фоне. */
.quiz-sec-dark{background:var(--graphite);color:var(--milk)}
.quiz-sec-dark .sec-head h2{color:var(--milk)}
.quiz-sec-dark .sec-head p{color:var(--milk-2)}
.quiz-sec-dark .kicker{color:var(--accent-on-dark)}
.quiz-sec-dark .quiz-side{background:var(--graphite-2);box-shadow:inset 0 0 0 1px var(--line-dark)}

/* ── Ползунок на графите ─────────────────────────────────────────────────
   `section.dark` не трогает .ba-note: там --ink-3, то есть тёмный текст
   на тёмном. */
.ba-sec.dark .ba-note{color:var(--milk-2)}

/* ── Отступ от текста до ряда кнопок ─────────────────────────────────────
   Был в разметке разовыми классами mt-22 и mt-26, причём mt-22 в стилях
   не существовал: на всех 14 посадочных кнопки стояли вплотную к
   подзаголовку. Теперь одна величина на весь сайт, разовые классы с
   кнопок сняты. Первый экран главной держит свой ритм (.hero .btns). */
:root{--gap-btns:clamp(24px,2.4vw,30px)}
* + .btns{margin-top:var(--gap-btns)}
@media (max-width:760px){
  :root{--gap-btns:22px}
}

/* ── Единые промежутки ───────────────────────────────────────────────────
   Заказчик 23.09: «по всему сайту везде одинаковые отступы между разными
   объектами». Замер по всем 54 страницам: поля блоков уже одни (66 px,
   у лент — 43 по правке 11.09), разнобой был в трёх местах.
   · Карточки в сетках стояли через 14 и 16 px — теперь везде 16.
   · После шапки блока схема «Как работаем» отступала на 40 px вместо 30,
     которые держат остальные ленты: её собственный отступ сложился
     с отступом шапки.
   · Факты объекта на странице квартиры не имели оформления вовсе и шли
     голым текстом вплотную к подзаголовку. */
.sec-head + .flow{margin-top:0}

.obj-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;
  margin-top:var(--gap-btns);max-width:900px}
.obj-facts>div{background:var(--card);color:var(--ink);border-radius:16px;padding:16px 18px}
.obj-facts dt{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3)}
.obj-facts dd{margin:6px 0 0;font-family:var(--display);font-weight:700;font-size:20px;color:var(--ink)}

/* ── Главная: только белый и чёрный фон (заказчик, 25.09.2026) ──────────────
   Серый «бетон» с главной снят, блоки чередуются белый — графит сверху вниз.
   «Услуги», «Дизайн-проект», «Слои» и «Частые вопросы» переехали на графит.
   Карточки услуг и тарифов остаются белыми плитками на графите: в них фото,
   чертёж и цена, на белом они читаются лучше. Заголовок в карточке объявлен
   вместе с её фоном, иначе section.dark h3 красит его в молочный на белом. */
section.dark .srv,section.dark .dp{--card:#FFFFFF}
section.dark .srv-i h3,section.dark .dp-i h3{color:var(--ink)}
section.dark .dp-lead{color:#C6CCD5}
section.dark .srv-more{border-top-color:var(--line-dark)}
section.dark .srv-more-row{border-top-color:var(--line-dark)}
section.dark .srv-more-h{color:var(--accent-on-dark)}
section.dark .srv-more-n{color:var(--milk)}
section.dark .srv-more-row a{color:#C6CCD5;border-bottom-color:rgba(255,255,255,.22)}
section.dark .srv-more-row a:hover{color:var(--accent-on-dark);border-bottom-color:var(--accent-on-dark)}
section.dark .faq details{color:var(--milk);border-bottom-color:var(--line-dark)}
section.dark .faq summary{color:var(--milk)}
section.dark .faq summary::after{border-color:var(--milk-2)}
section.dark .faq .a{color:#C6CCD5}
section.dark .dp-i .btn-s,section.dark .srv-i .btn-s{color:var(--ink);border-color:var(--line-2)}
section.dark .dp-i .btn-s:hover,section.dark .srv-i .btn-s:hover{color:var(--ink);border-color:var(--ink)}

/* ── Смена кадров с движением: первый экран и фон «Сколько это стоит» ──────
   Заказчик 25.09.2026: приближение/отдаление, разные объекты, та же анимация
   ещё в одном блоке. Движение длиннее шага смены (5,6 с против 4 с): кадр
   продолжает плыть, пока гаснет, и не замирает на полпути. */
.reel-frame{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;overflow:hidden}
.reel-frame.is-on{opacity:1}
.reel-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transform-origin:50% 50%;will-change:transform}
.reel-frame.kb-in-l img{animation:kb-in-l 5.6s ease-out forwards}
.reel-frame.kb-in-r img{animation:kb-in-r 5.6s ease-out forwards}
.reel-frame.kb-out-l img{animation:kb-out-l 5.6s ease-out forwards}
.reel-frame.kb-out-r img{animation:kb-out-r 5.6s ease-out forwards}
@keyframes kb-in-l{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.14) translate(-2.2%,-1.2%)}}
@keyframes kb-in-r{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.14) translate(2.2%,-1.2%)}}
@keyframes kb-out-l{from{transform:scale(1.16) translate(2%,1%)}to{transform:scale(1.03) translate(0,0)}}
@keyframes kb-out-r{from{transform:scale(1.16) translate(-2%,1%)}to{transform:scale(1.03) translate(0,0)}}

.reel-sec{position:relative;overflow:hidden;isolation:isolate}
.reel-sec>.wrap{position:relative;z-index:2}
.bg-reel{position:absolute;inset:0;z-index:0}
.bg-veil{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(10,12,16,.95) 0%,rgba(10,12,16,.9) 48%,rgba(10,12,16,.8) 100%),
    linear-gradient(0deg,rgba(10,12,16,.6) 0%,transparent 40%)}
.reel-sec .price-card{background:rgba(24,28,35,.9);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}

/* ── Эффекты фона тёмных блоков (заказчик 25.09.2026: «затемнение, градиент») ─
   Только в сторону темнее графита или едва заметным свечением: читаемость
   светлого текста от этого не падает. Каждый блок — свой рисунок фона. */
#uslugi{background:linear-gradient(180deg,#15181D 0%,#0C0E12 100%)}
#dizayn-proekt{background:
  radial-gradient(70% 60% at 100% 0%,rgba(255,209,0,.09),transparent 70%),
  radial-gradient(60% 60% at 0% 100%,rgba(255,255,255,.04),transparent 70%),#15181D}
#sloi{background:linear-gradient(180deg,#0B0D10 0%,#15181D 55%,#15181D 100%)}
#faq{background:radial-gradient(80% 70% at 15% 0%,rgba(255,255,255,.05),transparent 70%),
  linear-gradient(180deg,#15181D 0%,#101318 100%)}
#raschet{background-image:radial-gradient(60% 55% at 90% 10%,rgba(255,209,0,.07),transparent 70%)}

@media (prefers-reduced-motion:reduce){
  .reel-frame img{animation:none!important;transform:none}
  .bg-reel{display:none}
}
/* Движение кадра должно быть видно: вуаль первого экрана плотная только под
   текстом слева, к центру и вправо (под карточкой цены) — светлее. */
@media (min-width:761px){
  .hero-veil{background:
    linear-gradient(96deg,rgba(10,12,16,.92) 0%,rgba(10,12,16,.8) 36%,rgba(10,12,16,.42) 62%,rgba(10,12,16,.22) 100%),
    linear-gradient(0deg,rgba(10,12,16,.55) 0%,transparent 40%)}
}
.bg-veil{background:
  linear-gradient(90deg,rgba(10,12,16,.93) 0%,rgba(10,12,16,.86) 42%,rgba(10,12,16,.6) 100%),
  linear-gradient(0deg,rgba(10,12,16,.55) 0%,transparent 40%)}
@media (max-width:760px){
  .bg-veil{background:rgba(10,12,16,.86)}
}

/* Разряды в числах (29.09.2026): типограф ставит между группами цифр пустой
   span.gr — поле шириной в обычный пробел. Именно inline с полем: вокруг inline-block браузер вправе перенести строку и разорвать цену.
   Одинаково на всех страницах, как на главной. */
.gr{display:inline;margin-left:.3em}