/* ===========================================================================
   STROM · Страницы услуг — редизайн 2026.
   Услуга 01: «проект как инструмент». Страница открывается ЛИСТОМ ЧЕРТЕЖА —
   тёмное поле, живой план участка на canvas, основная надпись по низу, — дальше
   идёт светлый документ, и закрывается всё второй тёмной полосой. Тёмное сверху
   и снизу работает обложкой: лист вложен в папку.

   Подключается только на переверстанных записях рубрики «Услуги»
   (inc/strom-services.php) поверх home.css: оттуда токены и .sh-wrap / .sh-btn.

   ОТКУДА ВЗЯТА ГРАФИКА. Всё, что чертёж — план, узоры раскладки, разрез
   основания, размерная шкала цены — рисуется кодом (canvas + CSS-штриховки),
   не картинками: крисп на любом DPR, ноль запросов, и никакая генерация не
   выдаст правдоподобный чертёж с читаемыми цифрами. Фотография остаётся ровно
   там, где нужна фактура камня: блок результата и врезка с образцами.

   ЧЕМ ОТЛИЧАЕТСЯ ОТ ГЛАВНОЙ (та же дизайн-система, другая композиция):
     - у главной фото-плитки со скримом и подписью поверх кадра — здесь нет
       ни одной подписи поверх фото;
     - у главной и «Доставки» горизонтальная лента этапов без времени — здесь
       рельс с реальными длительностями на станциях;
     - секции идут четырьмя разными регистрами (тёмный лист / опись со сдвигом /
       чертёж во всю ширину / мозаика), а не одним ритмом «шапка + контент»;
     - радиус почти снят (--ss-r 2px): лист, а не интерфейс.

   Палитра — токены home.css плюс три своих для тёмного листа. Тема сайта одна
   (светлая), поэтому prefers-color-scheme здесь сознательно не используется:
   визуальный мир фиксирован, как и на главной.

   Правило проекта: в flex/grid только flex-start / flex-end — `start`/`end`
   не отрабатывают в Firefox.
   ======================================================================== */

.sh-home.ss-page{
  --ss-r:2px;
  --ss-rule:var(--line);
  --ss-rule-soft:var(--line-2);

  /* Тёмный лист. Не чёрный: зелёный уклон роднит его с --green и не даёт
     странице распасться на «светлый сайт + чужая тёмная плашка». */
  --ss-dark:#12201a;
  --ss-dark-2:#182a21;
  --ss-draw:#8fd6b4;               /* цвет линии чертежа */
  --ss-draw-soft:rgba(143,214,180,.42);
  --ss-on-dark:#eaf4ee;
  --ss-on-dark-2:rgba(234,244,238,.62);
  --ss-ochre:var(--gold);          /* одна акцентная выноска на страницу */
}

/* Тема даёт спискам li{margin-bottom:10px} — все блоки ниже держат ритм на
   padding и линейках, лишние 10px их расшатывают. Гасим один раз. */
.sh-home.ss-page ol,
.sh-home.ss-page ul{margin:0;padding:0;list-style:none;}
.sh-home.ss-page li{margin:0;}
.sh-home.ss-page figure{margin:0;}

/* Заголовки на тёмном. Тема печатает h1–h4 своим --wd-title-color (#242424)
   селектором на сам тег, поэтому наследование от секции не спасает: без этих
   правил заголовок на тёмном листе совпадает с фоном и его просто не видно. */
.sh-home.ss-page .ss-sheet h1,
.sh-home.ss-page .ss-cta h2,
.sh-home.ss-page .ss-cta h3{color:var(--ss-on-dark);}

.sh-home.ss-page .ss-section{padding:clamp(56px,6.2vw,92px) 0;}
.sh-home.ss-page .ss-h2{font-size:clamp(1.55rem,2.5vw,2.25rem);line-height:1.08;
  letter-spacing:-.026em;max-width:20ch;}

/* Общая мера подзаголовка-лида справа от H2. */
.sh-home.ss-page .ss-lead{color:var(--text);font-size:clamp(.95rem,1.1vw,1.05rem);
  line-height:1.55;max-width:46ch;}

/* ===== ЛИСТ ЧЕРТЕЖА (шапка) ==============================================
   Полоса во всю ширину окна, внутри — плита листа по контейнеру. Координатная
   рамка сверху и слева: та же система адресации, что на настоящем листе. */
/* Тёмная только сама плита листа, полоса под ней — тинт: лист лежит на столе, а
   не заливает секцию целиком. Верхний отступ обязателен — без него полоса
   прилипает к хлебным крошкам (padding-block у <main> снят классом sh-home-main).
   Маргин не проваливается сквозь .sh-home: у того overflow-x:hidden, то есть свой
   контекст форматирования. */
.sh-home.ss-page .ss-sheet{margin-top:clamp(18px,2.4vw,38px);background:var(--ground-2);
  padding:clamp(18px,2.2vw,30px) 0 clamp(26px,3vw,40px);}
/* Сетку листа рисует сам чертёж (canvas): CSS-градиент поверх давал вторую
   сетку в другой фазе — две решётки внахлёст читались как дефект. */
.sh-home.ss-page .ss-sheet__plate{position:relative;
  border:1px solid rgba(143,214,180,.22);border-radius:var(--ss-r);
  background:var(--ss-dark-2);}

/* Две колонки: текст и чертёж. Наложение текста на план выглядело плотнее, но
   выноски плана лезли под заголовок — сетка держит зазор при любой ширине. */
.sh-home.ss-page .ss-sheet__field{display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(24px,3.4vw,56px);align-items:center;
  min-height:clamp(360px,42vw,540px);padding:clamp(24px,3vw,44px);}
/* Чертёж со своей координатной рамкой: буквы по верху, цифры по левому краю,
   ровно по крупным линиям сетки внутри канвы (6×4). */
.sh-home.ss-page .ss-plan{position:relative;align-self:stretch;
  min-height:clamp(260px,30vw,430px);padding:20px 0 0 20px;pointer-events:none;}
.sh-home.ss-page .ss-plan__field{position:absolute;top:20px;left:20px;right:0;bottom:0;}
.sh-home.ss-page .ss-plan__canvas{position:absolute;inset:0;display:block;width:100%;height:100%;}
.sh-home.ss-page .ss-plan__coords{position:absolute;display:flex;
  font-family:var(--mono);font-size:.58rem;font-weight:500;letter-spacing:.14em;
  color:rgba(143,214,180,.38);}
.sh-home.ss-page .ss-plan__coords--x{top:0;left:20px;right:0;height:20px;align-items:flex-start;
  border-bottom:1px solid rgba(143,214,180,.16);}
.sh-home.ss-page .ss-plan__coords--x span{flex:1;text-align:center;}
.sh-home.ss-page .ss-plan__coords--y{top:20px;left:0;bottom:0;width:20px;
  flex-direction:column;border-right:1px solid rgba(143,214,180,.16);}
.sh-home.ss-page .ss-plan__coords--y span{flex:1;display:grid;place-items:center;}

.sh-home.ss-page .ss-sheet__copy{position:relative;z-index:1;}
.sh-home.ss-page .ss-h1{font-size:clamp(2rem,4.1vw,3.5rem);line-height:1.02;
  letter-spacing:-.032em;max-width:17ch;margin:0 0 clamp(16px,1.8vw,22px);}
.sh-home.ss-page .ss-sheet__lead{color:var(--ss-on-dark-2);font-size:clamp(1rem,1.25vw,1.16rem);
  line-height:1.55;max-width:48ch;}
.sh-home.ss-page .ss-sheet__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2.6vw,32px);}
/* На тёмном ghost-кнопка примитива нечитаема — подменяем окантовку и цвет. */
.sh-home.ss-page .ss-sheet .sh-btn--ghost{border-color:rgba(143,214,180,.34);color:var(--ss-on-dark);}
.sh-home.ss-page .ss-sheet .sh-btn--ghost:hover{border-color:var(--ss-draw);color:var(--ss-draw);}

/* Индекс услуги: номер листа, а не «eyebrow». */
.sh-home.ss-page .ss-index{display:flex;align-items:center;flex-wrap:wrap;gap:.55em;
  font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ss-draw);margin:0 0 clamp(16px,1.8vw,24px);}
.sh-home.ss-page .ss-index__total{color:rgba(143,214,180,.5);}
.sh-home.ss-page .ss-index__kicker{color:var(--ss-on-dark-2);padding-left:.8em;
  border-left:1px solid rgba(143,214,180,.24);}

/* Основная надпись: прибита к низу листа, ячейки в одну строку, как в ГОСТ. */
.sh-home.ss-page .ss-title-block{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  margin:0;border-top:1px solid rgba(143,214,180,.22);}
.sh-home.ss-page .ss-title-block__cell{padding:14px clamp(14px,1.6vw,22px);
  border-left:1px solid rgba(143,214,180,.14);}
.sh-home.ss-page .ss-title-block__cell:first-child{border-left:0;}
.sh-home.ss-page .ss-title-block dt{font-family:var(--mono);font-size:.6rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:rgba(143,214,180,.55);margin-bottom:6px;}
.sh-home.ss-page .ss-title-block dd{margin:0;color:var(--ss-on-dark);font-weight:600;
  font-size:.95rem;line-height:1.3;}

/* ===== ОПИСЬ КОМПЛЕКТА ===================================================
   Асимметрия: узкий липкий тезис слева, опись листов справа. */
.sh-home.ss-page .ss-spec__grid{display:grid;grid-template-columns:minmax(0,.66fr) minmax(0,1fr);
  gap:clamp(30px,5vw,96px);align-items:flex-start;}
.sh-home.ss-page .ss-spec__aside{position:sticky;top:104px;}
.sh-home.ss-page .ss-spec__lead{margin-top:18px;color:var(--text);font-size:1rem;
  line-height:1.6;max-width:38ch;}
.sh-home.ss-page .ss-spec__total{margin-top:20px;padding-top:16px;border-top:1px solid var(--ss-rule);
  font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--green-dark);}

.sh-home.ss-page .ss-spec__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(16px,2vw,30px);align-items:baseline;
  padding:clamp(16px,1.9vw,22px) 0;border-bottom:1px solid var(--ss-rule-soft);}
.sh-home.ss-page .ss-spec__row:first-child{border-top:1px solid var(--ss-rule);}
.sh-home.ss-page .ss-spec__code{font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.1em;color:var(--green);}
.sh-home.ss-page .ss-spec__body b{display:block;font-weight:600;font-size:clamp(1rem,1.2vw,1.1rem);
  line-height:1.3;color:var(--ink);}
.sh-home.ss-page .ss-spec__body span{display:block;margin-top:6px;color:var(--text);
  font-size:.92rem;line-height:1.5;}
.sh-home.ss-page .ss-spec__kind{font-family:var(--mono);font-size:.6rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text);white-space:nowrap;}

/* ===== РАЗРЕЗ ОСНОВАНИЯ ==================================================
   Слои рисуются штриховками, высоты меняются по data-mode — переключение зоны
   нагрузки читается как морфинг пирога, а не как подмена картинки. */
.sh-home.ss-page .ss-bed-section{background:var(--ground-2);}
.sh-home.ss-page .ss-bed__head{display:flex;justify-content:space-between;align-items:flex-end;
  flex-wrap:wrap;gap:24px;padding-bottom:clamp(22px,2.6vw,32px);margin-bottom:clamp(26px,3vw,40px);
  border-bottom:1px solid var(--ss-rule);}

.sh-home.ss-page .ss-bed__tabs{display:inline-flex;border:1px solid var(--ss-rule);
  border-radius:var(--ss-r);background:var(--ground);overflow:hidden;}
.sh-home.ss-page .ss-bed__tab{padding:11px 18px;font-family:var(--mono);font-size:.66rem;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text);
  border-left:1px solid var(--ss-rule-soft);transition:background .2s var(--ease),color .2s var(--ease);}
.sh-home.ss-page .ss-bed__tab:first-child{border-left:0;}
.sh-home.ss-page .ss-bed__tab:hover{color:var(--green);}
.sh-home.ss-page .ss-bed__tab.is-on{background:var(--green);color:#fff;}

.sh-home.ss-page .ss-bed__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  gap:clamp(28px,4vw,64px);align-items:flex-start;}

.sh-home.ss-page .ss-bed__cut{border:1px solid var(--ss-rule);border-radius:var(--ss-r);
  background:var(--ground);overflow:hidden;}
.sh-home.ss-page .ss-bed__layer{position:relative;display:flex;align-items:center;
  border-top:1px solid var(--ss-rule-soft);
  transition:height .45s var(--ease);}
.sh-home.ss-page .ss-bed__layer:first-child{border-top:0;}
.sh-home.ss-page .ss-bed__hatch{position:absolute;inset:0;}
/* Подпись слоя лежит НА штриховке, поэтому получает собственную подложку с
   растворением вправо: без неё дырчатая штриховка щебня и пунктир геотекстиля
   перечёркивали текст. */
.sh-home.ss-page .ss-bed__label{position:relative;z-index:1;
  padding:3px clamp(30px,3vw,44px) 3px clamp(14px,1.6vw,22px);
  background:linear-gradient(90deg,rgba(255,255,255,.94) 0,rgba(255,255,255,.9) 62%,rgba(255,255,255,0) 100%);}
.sh-home.ss-page .ss-bed__label b{display:block;font-weight:600;font-size:.95rem;color:var(--ink);}
.sh-home.ss-page .ss-bed__label i{display:block;margin-top:3px;font-style:normal;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text);}

/* Штриховки слоёв — материал читается фактурой, а не подписью.
   Высоты: пешеходная зона слева, зона переезда — в правиле [data-mode=auto]. */
.sh-home.ss-page .ss-bed__layer--tile{height:74px;}
.sh-home.ss-page .ss-bed__layer--tile .ss-bed__hatch{
  background:repeating-linear-gradient(90deg,#e6ece8 0 46px,rgba(35,38,36,.16) 46px 47px),#eef3ef;}
.sh-home.ss-page .ss-bed__layer--sand{height:34px;}
.sh-home.ss-page .ss-bed__layer--sand .ss-bed__hatch{
  background:radial-gradient(circle at 3px 3px,rgba(35,38,36,.2) .9px,transparent 1px) 0 0/7px 7px,#f6f3ea;}
.sh-home.ss-page .ss-bed__layer--base{height:104px;}
.sh-home.ss-page .ss-bed__layer--base .ss-bed__hatch{
  background:
    radial-gradient(circle at 6px 7px,rgba(35,38,36,.26) 2.6px,transparent 3px) 0 0/17px 15px,
    radial-gradient(circle at 13px 3px,rgba(35,38,36,.18) 2px,transparent 2.4px) 0 0/17px 15px,
    #edeeea;}
.sh-home.ss-page .ss-bed__layer--geo{height:14px;}
.sh-home.ss-page .ss-bed__layer--geo .ss-bed__hatch{
  background:repeating-linear-gradient(90deg,rgba(14,126,80,.5) 0 7px,transparent 7px 13px),#eaf1ec;}
.sh-home.ss-page .ss-bed__layer--geo .ss-bed__label b{font-size:.78rem;}
.sh-home.ss-page .ss-bed__layer--geo .ss-bed__label i{display:none;}
.sh-home.ss-page .ss-bed__layer--soil{height:64px;}
.sh-home.ss-page .ss-bed__layer--soil .ss-bed__hatch{
  background:repeating-linear-gradient(45deg,rgba(35,38,36,.14) 0 1px,transparent 1px 9px),#e8e6e1;}

/* Зона переезда: плитка толще, основание усиленное, подстилающий слой тоньше. */
.sh-home.ss-page .ss-bed[data-mode="auto"] .ss-bed__layer--tile{height:96px;}
.sh-home.ss-page .ss-bed[data-mode="auto"] .ss-bed__layer--sand{height:26px;}
.sh-home.ss-page .ss-bed[data-mode="auto"] .ss-bed__layer--base{height:168px;}

/* Пояснение справа: видна только строка активной зоны. */
.sh-home.ss-page .ss-bed__mode{display:none;}
.sh-home.ss-page .ss-bed[data-mode="walk"] .ss-bed__mode[data-for="walk"],
.sh-home.ss-page .ss-bed[data-mode="auto"] .ss-bed__mode[data-for="auto"]{display:block;}
.sh-home.ss-page .ss-bed__mode b{display:block;font-weight:600;font-size:clamp(1.05rem,1.4vw,1.3rem);
  line-height:1.25;color:var(--ink);letter-spacing:-.015em;}
.sh-home.ss-page .ss-bed__mode p{margin-top:12px;color:var(--text);font-size:.98rem;line-height:1.6;}
.sh-home.ss-page .ss-bed__note{margin-top:22px;padding-top:18px;border-top:1px solid var(--ss-rule);
  color:var(--green-dark);font-size:.9rem;line-height:1.55;}
/* Без JS переключателя нет — показываем обе колонки-пояснения. */
.sh-home.ss-page:not(.sh-js) .ss-bed__mode{display:block;margin-bottom:20px;}

/* ===== СХЕМЫ УКЛАДКИ ===================================================== */
.sh-home.ss-page .ss-pats__head,
.sh-home.ss-page .ss-flow__head,
.sh-home.ss-page .ss-price__head,
.sh-home.ss-page .ss-shots__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(20px,3vw,54px);align-items:flex-end;margin-bottom:clamp(28px,3.4vw,44px);}
.sh-home.ss-page .ss-pats__lead,
.sh-home.ss-page .ss-price__lead,
.sh-home.ss-page .ss-shots__lead{color:var(--text);font-size:clamp(.95rem,1.1vw,1.05rem);
  line-height:1.55;max-width:46ch;}

.sh-home.ss-page .ss-pats__strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(12px,1.6vw,22px);}
.sh-home.ss-page .ss-pat__frame{position:relative;aspect-ratio:1;border:1px solid var(--ss-rule);
  border-radius:var(--ss-r);overflow:hidden;background:#c3d1c8;}
.sh-home.ss-page .ss-pat__canvas{display:block;width:100%;height:100%;}
.sh-home.ss-page .ss-pat__name{display:block;margin-top:12px;font-weight:600;font-size:.94rem;color:var(--ink);}
.sh-home.ss-page .ss-pat__size{display:block;margin-top:3px;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.08em;color:var(--text);}
.sh-home.ss-page .ss-pats__note{margin-top:clamp(24px,3vw,34px);color:var(--text);
  font-size:.92rem;line-height:1.55;max-width:64ch;}

/* ===== РЕЛЬС ЭТАПОВ ======================================================
   Станции на одной линии, длительность — чипом на станции. Линия рисуется
   фоном контейнера, поэтому не рвётся между колонками. */
.sh-home.ss-page .ss-flow__sum{text-align:right;}
.sh-home.ss-page .ss-flow__sum b{display:block;font-family:var(--mono);font-weight:500;
  font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.01em;color:var(--green-dark);}
.sh-home.ss-page .ss-flow__sum span{display:block;margin-top:4px;font-size:.86rem;
  line-height:1.45;color:var(--text);}

.sh-home.ss-page .ss-flow__rail{position:relative;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);padding-top:34px;}
.sh-home.ss-page .ss-flow__rail::before{content:"";position:absolute;left:0;right:0;top:6px;
  height:1px;background:var(--ss-rule);}
.sh-home.ss-page .ss-flow__stop{position:relative;padding-right:8px;}
.sh-home.ss-page .ss-flow__mark{position:absolute;top:-34px;left:0;width:11px;height:11px;
  border-radius:50%;background:var(--ground);border:1.5px solid var(--ss-rule);}
.sh-home.ss-page .ss-flow__stop.has-days .ss-flow__mark{border-color:var(--green);background:var(--green);}
.sh-home.ss-page .ss-flow__no{display:block;font-family:var(--mono);font-size:.62rem;font-weight:500;
  letter-spacing:.12em;color:var(--text);margin-bottom:8px;}
.sh-home.ss-page .ss-flow__stop b{display:block;font-weight:600;font-size:1.02rem;line-height:1.25;
  color:var(--ink);}
.sh-home.ss-page .ss-flow__days{display:inline-block;margin-top:9px;padding:4px 9px;
  border-radius:var(--ss-r);background:var(--green-soft);color:var(--green-dark);
  font-family:var(--mono);font-size:.64rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;}
.sh-home.ss-page .ss-flow__note{display:block;margin-top:9px;color:var(--text);font-size:.87rem;line-height:1.45;}

/* ===== РАЗДЕЛИТЕЛЬ: ЛИНИЯ ОБРЫВА ==========================================
   Своих вертикальных отступов почти нет: воздух дают паддинги соседних секций,
   иначе между блоками образуется провал в 200px. */
.sh-home.ss-page .ss-rule{color:var(--line);}
.sh-home.ss-page .ss-rule__inner{display:flex;align-items:center;gap:14px;}
.sh-home.ss-page .ss-rule__line{flex:1;height:1px;background:currentColor;}
/* Излом контрастнее линий: на полосе в 1370px символ иначе не читается, а сами
   линии должны остаться волосяными. */
.sh-home.ss-page .ss-rule__break{flex:none;display:block;color:rgba(35,38,36,.34);}

/* ===== ЦЕНА КАК РАЗМЕРНАЯ ЛИНИЯ ========================================== */
.sh-home.ss-page .ss-scale{position:relative;padding:clamp(26px,3vw,40px) 0 clamp(52px,5vw,72px);}
.sh-home.ss-page .ss-scale__axis{position:absolute;left:0;right:0;bottom:clamp(38px,4vw,54px);
  height:1px;background:var(--ink);}
.sh-home.ss-page .ss-scale__axis::after{content:"";position:absolute;right:-1px;top:-4px;
  border:4.5px solid transparent;border-left-color:var(--ink);}
.sh-home.ss-page .ss-scale__marks{position:relative;height:clamp(120px,13vw,168px);}
.sh-home.ss-page .ss-scale__mark{position:absolute;left:var(--at);bottom:0;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;width:max-content;}
.sh-home.ss-page .ss-scale__tick{order:3;width:1px;height:clamp(18px,2vw,26px);background:var(--ink);}
.sh-home.ss-page .ss-scale__sum{order:1;font-family:var(--mono);font-weight:500;
  font-size:clamp(1.05rem,1.7vw,1.5rem);letter-spacing:-.01em;color:var(--ink);
  font-variant-numeric:tabular-nums;}
.sh-home.ss-page .ss-scale__area{order:2;font-family:var(--mono);font-size:.64rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--green);}
.sh-home.ss-page .ss-scale__mark.is-open .ss-scale__sum{font-size:clamp(.9rem,1.1vw,1.05rem);
  color:var(--ss-ochre);}
.sh-home.ss-page .ss-scale__mark.is-open .ss-scale__area{color:var(--text);}
.sh-home.ss-page .ss-scale__mark.is-open .ss-scale__tick{background:var(--ss-ochre);}
.sh-home.ss-page .ss-scale__unit{position:absolute;right:0;bottom:clamp(14px,1.6vw,22px);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text);}
.sh-home.ss-page .ss-price__note{color:var(--text);font-size:.92rem;line-height:1.55;max-width:64ch;}

/* ===== ВВОДНЫЕ =========================================================== */
.sh-home.ss-page .ss-input{background:var(--ground-2);}
.sh-home.ss-page .ss-input__head{max-width:60ch;margin-bottom:clamp(28px,3.4vw,44px);}
.sh-home.ss-page .ss-input__lead{margin-top:16px;color:var(--text);font-size:1rem;line-height:1.6;max-width:52ch;}
.sh-home.ss-page .ss-input__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--ss-rule);border:1px solid var(--ss-rule);border-radius:var(--ss-r);overflow:hidden;}
.sh-home.ss-page .ss-input__item{background:var(--ground);padding:clamp(18px,2.1vw,26px);}
.sh-home.ss-page .ss-input__kind{display:block;font-family:var(--mono);font-size:.6rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:14px;}
.sh-home.ss-page .ss-input__item b{display:block;font-weight:600;font-size:1rem;color:var(--ink);}
.sh-home.ss-page .ss-input__item p{margin-top:8px;color:var(--text);font-size:.9rem;line-height:1.5;}

/* ===== ПОЛОСА РЕЗУЛЬТАТА =================================================
   Три равных кадра 3:2 в один ряд — низкая полоса-фотофиксация в конце
   документа, а не галерея-герой.

   Была мозаика «крупный 4:5 + два боковых»: ведущий кадр вырастал до ~850×1060
   и по весу спорил с чертежами, хотя фотография здесь второстепенна, а правая
   колонка не сходилась с левой по низу из-за подписей — блок читался кривым.
   Равные клетки выравнивают и кадры, и подписи по определению. */
.sh-home.ss-page .ss-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,26px);align-items:flex-start;}
.sh-home.ss-page .ss-strip .sh-ph{aspect-ratio:3/2;}
.sh-home.ss-page .ss-strip .sh-ph--img{border-radius:var(--ss-r);}
.sh-home.ss-page .ss-strip figcaption{margin-top:11px;font-family:var(--mono);font-size:.64rem;
  font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text);line-height:1.5;}

/* ===== ВРЕЗКА ============================================================ */
.sh-home.ss-page .ss-note-section{padding:0 0 clamp(56px,6.2vw,92px);}
.sh-home.ss-page .ss-note{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.56fr);
  gap:clamp(22px,3vw,52px);align-items:center;padding:clamp(24px,2.8vw,38px);
  border:1px solid var(--ss-rule);border-radius:var(--ss-r);background:var(--ground-2);}
.sh-home.ss-page .ss-note .sh-eyebrow{margin-bottom:12px;}
.sh-home.ss-page .ss-note__title{font-size:clamp(1.2rem,1.8vw,1.55rem);line-height:1.14;
  letter-spacing:-.02em;max-width:22ch;}
.sh-home.ss-page .ss-note__text{margin:12px 0 18px;color:var(--text);font-size:.98rem;
  line-height:1.6;max-width:54ch;}
.sh-home.ss-page .ss-note__frame .sh-ph{aspect-ratio:4/3;border-radius:var(--ss-r);}

/* ===== ЗАКРЫВАЮЩАЯ ПОЛОСА (вторая обложка) =============================== */
.sh-home.ss-page .ss-cta{position:relative;overflow:hidden;
  background:var(--ss-dark);color:var(--ss-on-dark);
  padding:clamp(48px,5.6vw,80px) 0 clamp(26px,3vw,38px);}
/* Контент над декорацией: на узких экранах лента услуг заезжает на угол. */
.sh-home.ss-page .ss-cta .sh-wrap{position:relative;z-index:1;}

/* Правый нижний угол: точки разбивочной сетки, уходящие за край листа.
   Две решётки точек, мелкая 13px и крупная 52px — ровно то же отношение 1:4, что
   у мелких и крупных линий сетки на чертеже в шапке (drawPlan: колонка делится на
   четыре). То есть угол договаривает систему координат листа, а не украшает полосу
   абстрактным паттерном. Крупные узлы ложатся поверх мелких, потому что узел
   крупной сетки — это и узел мелкой.

   Маска растворяет точки к центру полосы, чтобы они не спорили с текстом.
   Псевдоэлемент — угловая засечка того же рода, что уголки кадров .sh-ph. */
.sh-home.ss-page .ss-cta__mark{position:absolute;right:0;bottom:0;z-index:0;
  width:clamp(190px,30vw,420px);aspect-ratio:1;pointer-events:none;
  background-image:
    radial-gradient(circle at 1.5px 1.5px,rgba(143,214,180,.5) 1.5px,transparent 2.1px),
    radial-gradient(circle at 1px 1px,rgba(143,214,180,.22) 1px,transparent 1.6px);
  background-size:52px 52px,13px 13px;
  -webkit-mask-image:radial-gradient(125% 125% at 100% 100%,#000 0 34%,rgba(0,0,0,.35) 62%,transparent 84%);
  mask-image:radial-gradient(125% 125% at 100% 100%,#000 0 34%,rgba(0,0,0,.35) 62%,transparent 84%);}
.sh-home.ss-page .ss-cta__mark::after{content:"";position:absolute;right:18px;bottom:18px;
  width:clamp(38px,5vw,64px);aspect-ratio:1;
  border-right:1px solid rgba(143,214,180,.5);border-bottom:1px solid rgba(143,214,180,.5);}

/* Бесконечный скан по диагонали: узкая полоса подсветки идёт по сетке, будто
   выносят точки разметки. Единственная бесконечная анимация на странице (заливка
   чертежа в шапке — одноразовая), период 9 с и амплитуда мизерная: на этой полосе
   лежат обе основные кнопки, и декор не должен тянуть внимание на себя.

   Двигается МАСКА, а сами точки стоят на месте. Если анимировать
   background-position, точки поплывут и разойдутся с крупными узлами; при
   translate у слоя подсветки её точки перестанут совпадать с точками под ней на
   любом сдвиге, не кратном 13px. Маска этой проблемы не создаёт вовсе.

   Анимируется псевдоэлемент-лист без потомков, поэтому перерисовка ограничена его
   боксом (максимум 420×420) и не задевает раскладку. Маска родителя действует и на
   него: подсветка так же растворяется к центру полосы. */
.sh-home.ss-page .ss-cta__mark::before{content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 1.5px 1.5px,rgba(205,242,223,.95) 1.7px,transparent 2.3px),
    radial-gradient(circle at 1px 1px,rgba(205,242,223,.5) 1.1px,transparent 1.7px);
  background-size:52px 52px,13px 13px;
  /* Размер маски 210%, а не 280%: при большем полоса часть цикла уезжает за поле
     и со стороны это читается редким мигáнием, а не непрерывным сканом. Здесь она
     идёт по полю всё время. Период 11 с — движение на грани заметности. */
  -webkit-mask-image:linear-gradient(135deg,transparent 32%,#000 45%,#000 55%,transparent 68%);
  mask-image:linear-gradient(135deg,transparent 32%,#000 45%,#000 55%,transparent 68%);
  -webkit-mask-size:210% 210%;mask-size:210% 210%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:ss-scan 11s linear infinite;}

@keyframes ss-scan{
  from{-webkit-mask-position:0% 0%;mask-position:0% 0%;}
  to{-webkit-mask-position:100% 100%;mask-position:100% 100%;}
}

@media (prefers-reduced-motion:reduce){
  /* Статичное поле точек остаётся, подсветка снимается совсем. */
  .sh-home.ss-page .ss-cta__mark::before{display:none;}
}
.sh-home.ss-page .ss-cta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(22px,3vw,54px);align-items:center;padding-bottom:clamp(28px,3.4vw,44px);
  margin-bottom:clamp(22px,2.6vw,32px);border-bottom:1px solid rgba(143,214,180,.2);}
.sh-home.ss-page .ss-cta__title{font-size:clamp(1.45rem,2.5vw,2.2rem);line-height:1.08;
  letter-spacing:-.026em;max-width:24ch;}
.sh-home.ss-page .ss-cta__text{margin-top:12px;color:var(--ss-on-dark-2);font-size:1rem;
  line-height:1.5;max-width:46ch;}
.sh-home.ss-page .ss-cta__actions{display:flex;flex-wrap:wrap;gap:12px;}
.sh-home.ss-page .ss-cta .sh-btn--white{background:var(--ss-on-dark);color:var(--ss-dark);}

.sh-home.ss-page .ss-nav{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,2.4vw,34px);align-items:baseline;}
.sh-home.ss-page .ss-nav__label{font-family:var(--mono);font-size:.62rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(143,214,180,.5);}
.sh-home.ss-page .ss-nav ul{display:flex;flex-wrap:wrap;gap:8px clamp(16px,2vw,30px);}
.sh-home.ss-page .ss-nav__item a,
.sh-home.ss-page .ss-nav__item span{display:inline-flex;align-items:baseline;gap:.6em;
  font-size:.94rem;color:var(--ss-on-dark-2);transition:color .25s var(--ease);}
.sh-home.ss-page .ss-nav__item i{font-family:var(--mono);font-style:normal;font-size:.64rem;
  font-weight:500;letter-spacing:.1em;color:rgba(143,214,180,.42);}
.sh-home.ss-page .ss-nav__item a:hover{color:var(--ss-on-dark);}
.sh-home.ss-page .ss-nav__item a:hover i{color:var(--ss-draw);}
.sh-home.ss-page .ss-nav__item.is-current span{color:var(--ss-on-dark);font-weight:600;}
.sh-home.ss-page .ss-nav__item.is-current i{color:var(--ss-draw);}

/* ===== ПЛЕЙСХОЛДЕР КАДРА (пока фото не сгенерированы) ==================== */
.sh-home.ss-page .ss-ph{border-radius:var(--ss-r);}
.sh-home.ss-page .ss-ph__how{margin-top:12px;font-family:var(--mono);font-size:.58rem;
  line-height:1.6;letter-spacing:.04em;color:rgba(10,87,56,.72);}
.sh-home.ss-page .ss-ph__how code{background:rgba(14,126,80,.09);padding:1px 5px;border-radius:3px;}

/* ===== АДАПТИВ ============================================================ */
@media (max-width:1080px){
  .sh-home.ss-page .ss-spec__grid{grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,34px);}
  .sh-home.ss-page .ss-spec__aside{position:static;}
  .sh-home.ss-page .ss-bed__body{grid-template-columns:minmax(0,1fr);}
  .sh-home.ss-page .ss-flow__rail{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:34px;}
  .sh-home.ss-page .ss-pats__strip{grid-template-columns:repeat(3,minmax(0,1fr));}
  .sh-home.ss-page .ss-input__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sh-home.ss-page .ss-cta__box{grid-template-columns:minmax(0,1fr);}
}

@media (max-width:900px){
  /* Чертёж уходит под текст полосой: рядом ему уже не хватает ширины. */
  .sh-home.ss-page .ss-sheet__field{grid-template-columns:minmax(0,1fr);min-height:0;
    padding:clamp(20px,3vw,30px);}
  .sh-home.ss-page .ss-plan{min-height:0;height:clamp(240px,46vw,340px);order:2;}
  .sh-home.ss-page .ss-title-block{grid-auto-flow:row;grid-auto-columns:auto;}
  .sh-home.ss-page .ss-title-block__cell{border-left:0;border-top:1px solid rgba(143,214,180,.14);}
  .sh-home.ss-page .ss-title-block__cell:first-child{border-top:0;}
  .sh-home.ss-page .ss-pats__head,
  .sh-home.ss-page .ss-flow__head,
  .sh-home.ss-page .ss-price__head,
  .sh-home.ss-page .ss-shots__head{grid-template-columns:minmax(0,1fr);align-items:flex-start;}
  .sh-home.ss-page .ss-flow__sum{text-align:left;}
  .sh-home.ss-page .ss-note{grid-template-columns:minmax(0,1fr);}
  .sh-home.ss-page .ss-note__frame{max-width:420px;}
}

@media (max-width:640px){
  .sh-home.ss-page .ss-sheet__actions .sh-btn,
  .sh-home.ss-page .ss-cta__actions .sh-btn{width:100%;}
  .sh-home.ss-page .ss-spec__row{grid-template-columns:auto minmax(0,1fr);}
  .sh-home.ss-page .ss-spec__kind{display:none;}
  .sh-home.ss-page .ss-bed__tabs{width:100%;}
  .sh-home.ss-page .ss-bed__tab{flex:1;padding:11px 8px;}
  .sh-home.ss-page .ss-flow__rail{grid-template-columns:minmax(0,1fr);row-gap:26px;padding-top:0;}
  .sh-home.ss-page .ss-flow__rail::before{left:5px;right:auto;top:0;bottom:0;width:1px;height:auto;}
  .sh-home.ss-page .ss-flow__stop{padding-left:28px;}
  .sh-home.ss-page .ss-flow__mark{top:4px;left:0;}
  .sh-home.ss-page .ss-pats__strip{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* Три кадра в ряд на телефоне дают 100px по высоте — разворачиваем в столбец. */
  .sh-home.ss-page .ss-strip{grid-template-columns:minmax(0,1fr);}
  .sh-home.ss-page .ss-input__grid{grid-template-columns:minmax(0,1fr);}
  /* Размерная шкала на узком экране нечитаема (подписи наезжают) — разворачиваем
     её в вертикальный список пар «площадь → цена», ось убираем. */
  .sh-home.ss-page .ss-scale{padding:0;}
  .sh-home.ss-page .ss-scale__axis,
  .sh-home.ss-page .ss-scale__unit,
  .sh-home.ss-page .ss-scale__tick{display:none;}
  .sh-home.ss-page .ss-scale__marks{height:auto;}
  .sh-home.ss-page .ss-scale__mark{position:static;transform:none;width:auto;
    flex-direction:row;justify-content:space-between;align-items:baseline;text-align:left;
    padding:14px 0;border-bottom:1px solid var(--ss-rule-soft);}
  .sh-home.ss-page .ss-scale__area{order:1;}
  .sh-home.ss-page .ss-scale__sum{order:2;}
  .sh-home.ss-page .ss-nav{grid-template-columns:minmax(0,1fr);}
  .sh-home.ss-page .ss-nav ul{flex-direction:column;gap:10px;}
}

/* ===========================================================================
   УСЛУГА 03 · МОНТАЖ И ШЕФ-МОНТАЖ

   Концепция «монтажный контур»: две траектории ответственности (работает наша
   бригада / работает бригада заказчика) сходятся в общей точке контроля. Язык
   страницы взят не из чертёжного листа услуги 01, а из самой площадки: стыки,
   монтажная ось, последовательность допуска и один сигнальный охристый маркер.

   Секции намеренно разные: открытый асимметричный hero → единая разрезанная
   плита форматов → ступенчатый маршрут → фотография с наложенным белым листом →
   расчётная формула → тёмная контрольная точка → светлый CTA. Равной сетки
   «карточка + карточка» как главного приёма здесь нет.
   ======================================================================== */

.sh-home.ss-page.sm-page{
  --sm-dark:#14211b;
  --sm-dark-2:#1b2b23;
  --sm-signal:#c98a2b;
  --sm-metal:#dce5df;
  --sm-line:rgba(35,38,36,.17);
  --ss-r:4px;
}

.sh-home.sm-page [id]{scroll-margin-top:110px;}
.sh-home.sm-page .sm-head{display:grid;grid-template-columns:minmax(220px,.66fr) minmax(0,1.34fr);
  gap:clamp(28px,5vw,82px);align-items:flex-start;margin-bottom:clamp(38px,5vw,70px);}
.sh-home.sm-page .sm-head .sh-eyebrow{margin-bottom:0;}
.sh-home.sm-page .sm-head .sh-h-section{max-width:18ch;}
.sh-home.sm-page .sm-head .sh-lead{margin-top:18px;}

/* ===== ПЕРВЫЙ ЭКРАН ======================================================= */
.sh-home.sm-page .sm-hero{position:relative;margin-top:clamp(16px,2vw,30px);
  padding:clamp(26px,3vw,44px) 0 clamp(44px,5vw,76px);background:
  linear-gradient(90deg,var(--ground) 0 66%,var(--ground-2) 66% 100%);}
.sh-home.sm-page .sm-hero::before{content:"";position:absolute;left:0;top:0;width:clamp(82px,10vw,150px);
  height:4px;background:var(--green);}
.sh-home.sm-page .sm-hero__grid{display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.72fr);
  grid-template-areas:"copy visual" "choice choice";gap:clamp(28px,4.5vw,76px);align-items:center;}
.sh-home.sm-page .sm-hero__copy{grid-area:copy;padding:clamp(22px,3vw,44px) 0;}
.sh-home.sm-page .sm-hero__topline{display:flex;justify-content:space-between;align-items:center;
  gap:20px;margin-bottom:clamp(26px,4vw,54px);}
.sh-home.sm-page .sm-hero__topline .sh-eyebrow{margin:0;}
.sh-home.sm-page .sm-hero__position{font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text);white-space:nowrap;}
.sh-home.sm-page .sm-hero__title{font-size:clamp(3rem,6vw,5.9rem);line-height:.92;
  letter-spacing:-.052em;max-width:10.5ch;color:var(--ink);}
.sh-home.sm-page .sm-hero__title::first-line{color:var(--green-dark);}
.sh-home.sm-page .sm-hero__lead{margin-top:clamp(22px,2.8vw,34px);max-width:53ch;
  font-size:clamp(1.04rem,1.35vw,1.25rem);line-height:1.55;color:var(--text);}
.sh-home.sm-page .sm-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.2vw,40px);}

.sh-home.sm-page .sm-hero__visual{grid-area:visual;position:relative;align-self:stretch;max-width:560px;
  justify-self:flex-end;width:100%;}
.sh-home.sm-page .sm-hero__frame{position:relative;width:100%;aspect-ratio:1122/1402;}
.sh-home.sm-page .sm-hero__frame>.sh-ph,
.sh-home.sm-page .sm-hero__frame>.sh-ph--img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto!important;
  border-radius:0;}
.sh-home.sm-page .sm-hero__frame .sh-ph__img{width:100%;height:100%;object-fit:cover;}
.sh-home.sm-page .sm-hero__bracket{position:absolute;left:-18px;top:9%;bottom:9%;width:18px;
  border-left:2px solid var(--sm-signal);}
.sh-home.sm-page .sm-hero__bracket::before,
.sh-home.sm-page .sm-hero__bracket::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--sm-signal);}
.sh-home.sm-page .sm-hero__bracket::before{top:0;}
.sh-home.sm-page .sm-hero__bracket::after{bottom:0;}
.sh-home.sm-page .sm-hero__visual figcaption{position:absolute;right:14px;bottom:14px;z-index:2;
  padding:8px 11px;background:rgba(20,33,27,.9);color:#fff;font-family:var(--mono);
  font-size:.58rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;}

.sh-home.sm-page .sm-hero__choice{grid-area:choice;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:clamp(2px,1vw,12px);border-top:1px solid var(--sm-line);border-bottom:1px solid var(--sm-line);}
.sh-home.sm-page .sm-hero__choice a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(14px,2vw,28px);align-items:center;padding:clamp(18px,2.2vw,28px) clamp(12px,2vw,28px);
  transition:background .3s var(--ease),color .3s var(--ease);}
.sh-home.sm-page .sm-hero__choice a+a{border-left:1px solid var(--sm-line);}
.sh-home.sm-page .sm-hero__choice a:hover{background:var(--green);color:#fff;}
.sh-home.sm-page .sm-hero__choice i{font-family:var(--mono);font-style:normal;font-size:.66rem;color:var(--green);}
.sh-home.sm-page .sm-hero__choice a:hover i{color:rgba(255,255,255,.65);}
.sh-home.sm-page .sm-hero__choice b{display:block;font-size:1.05rem;line-height:1.2;}
.sh-home.sm-page .sm-hero__choice span{color:var(--text);font-size:.88rem;line-height:1.35;}
.sh-home.sm-page .sm-hero__choice a:hover span{color:rgba(255,255,255,.75);}
.sh-home.sm-page .sm-hero__choice em{font-style:normal;font-size:1.4rem;transition:transform .3s var(--ease);}
.sh-home.sm-page .sm-hero__choice a:hover em{transform:translate(3px,3px);}

.sh-home.sm-page .sm-hero__route{position:absolute;z-index:3;right:5px;top:18%;bottom:18%;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;pointer-events:none;}
.sh-home.sm-page .sm-hero__route span{font-family:var(--mono);font-size:.52rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(35,38,36,.42);writing-mode:vertical-rl;background:var(--ground-2);padding:6px 0;}
.sh-home.sm-page .sm-hero__route i{flex:1;width:1px;background:var(--sm-line);position:relative;}
.sh-home.sm-page .sm-hero__route i::after{content:"";position:absolute;left:-3px;bottom:0;width:7px;height:7px;
  border-radius:50%;background:var(--green);}

/* ===== ДВА ФОРМАТА: ОДНА РАЗРЕЗАННАЯ ПЛИТА =============================== */
.sh-home.sm-page .sm-formats{background:var(--ground-2);}
.sh-home.sm-page .sm-formats__plate{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border:1px solid var(--sm-line);background:var(--ground);}
.sh-home.sm-page .sm-formats__joint{position:absolute;z-index:3;left:50%;top:50%;width:58px;height:58px;
  transform:translate(-50%,-50%);border-radius:50%;background:var(--sm-dark);color:#fff;
  display:grid;place-items:center;box-shadow:0 0 0 10px var(--ground-2);}
.sh-home.sm-page .sm-formats__joint::before,
.sh-home.sm-page .sm-formats__joint::after{content:"";position:absolute;background:rgba(255,255,255,.32);}
.sh-home.sm-page .sm-formats__joint::before{width:22px;height:1px;}
.sh-home.sm-page .sm-formats__joint::after{width:1px;height:22px;}
.sh-home.sm-page .sm-formats__joint i{font-family:var(--mono);font-size:.54rem;font-style:normal;
  letter-spacing:.08em;text-transform:uppercase;background:var(--sm-dark);padding:3px;z-index:1;}
.sh-home.sm-page .sm-format{padding:clamp(28px,4vw,58px);min-width:0;}
.sh-home.sm-page .sm-format--shef{background:#e4efe8;border-left:1px solid var(--sm-line);}
.sh-home.sm-page .sm-format__head{display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding-bottom:18px;border-bottom:1px solid var(--sm-line);}
.sh-home.sm-page .sm-format__no{font-family:var(--mono);font-size:.72rem;color:var(--green);}
.sh-home.sm-page .sm-format__head p{font-family:var(--mono);font-size:.62rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text);text-align:right;}
.sh-home.sm-page .sm-format h3{margin-top:clamp(34px,4vw,58px);font-size:clamp(2.4rem,4.7vw,4.7rem);
  line-height:.95;letter-spacing:-.045em;color:var(--ink);}
.sh-home.sm-page .sm-format__text{margin-top:22px;max-width:51ch;color:var(--text);font-size:1rem;line-height:1.62;}
.sh-home.sm-page .sm-format dl{margin:clamp(30px,4vw,54px) 0 0;}
.sh-home.sm-page .sm-format dl>div{display:grid;grid-template-columns:minmax(90px,.42fr) minmax(0,1fr);
  gap:18px;padding:14px 0;border-top:1px solid var(--sm-line);}
.sh-home.sm-page .sm-format dt{font-family:var(--mono);font-size:.59rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text);}
.sh-home.sm-page .sm-format dd{margin:0;font-size:.92rem;font-weight:600;color:var(--ink);}

/* ===== ДЕВЯТЬ ТОЧЕК: СТУПЕНЧАТЫЙ МАРШРУТ ================================ */
.sh-home.sm-page .sm-route{background:var(--ground);}
.sh-home.sm-page .sm-route__head>p{align-self:flex-end;}
.sh-home.sm-page .sm-route__rail{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--sm-line);}
.sh-home.sm-page .sm-route__rail::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--green) 0 33%,
  var(--sm-signal) 33% 66%,var(--green-dark) 66%);transition:transform 1.1s var(--ease);}
.sh-home.sm-page .sm-route__rail.sh-in::before{transform:scaleX(1);}
.sh-home.sm-page .sm-phase{position:relative;padding:clamp(28px,3.2vw,46px) clamp(18px,2.5vw,36px) 0;}
.sh-home.sm-page .sm-phase+.sm-phase{border-left:1px solid var(--sm-line);}
.sh-home.sm-page .sm-phase:nth-child(2){margin-top:54px;}
.sh-home.sm-page .sm-phase:nth-child(3){margin-top:108px;}
.sh-home.sm-page .sm-phase>header{min-height:120px;}
.sh-home.sm-page .sm-phase>header span{font-family:var(--mono);font-size:.65rem;letter-spacing:.13em;
  color:var(--green);}
.sh-home.sm-page .sm-phase>header h3{margin-top:12px;max-width:12ch;font-size:clamp(1.45rem,2.4vw,2.15rem);
  line-height:1.05;color:var(--ink);}
.sh-home.sm-page .sm-phase ol{border-bottom:1px solid var(--sm-line);}
.sh-home.sm-page .sm-phase li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;
  padding:18px 0;border-top:1px solid var(--sm-line);}
.sh-home.sm-page .sm-phase li i{font-family:var(--mono);font-style:normal;font-size:.62rem;color:var(--text);padding-top:2px;}
.sh-home.sm-page .sm-phase li b{display:block;font-size:.98rem;line-height:1.3;color:var(--ink);}
.sh-home.sm-page .sm-phase li p{margin-top:6px;font-size:.86rem;line-height:1.5;color:var(--text);}

/* ===== ШЕФ-МОНТАЖ: ФОТО + ВКЛЕЕННЫЙ ЛИСТ ================================ */
.sh-home.sm-page .sm-shef{background:var(--ground-2);overflow:hidden;}
.sh-home.sm-page .sm-shef__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);
  align-items:center;}
.sh-home.sm-page .sm-shef__visual{position:relative;min-width:0;}
.sh-home.sm-page .sm-shef__visual>.sh-ph,
.sh-home.sm-page .sm-shef__visual>.sh-ph--img{width:100%;aspect-ratio:3/2;border-radius:0;}
.sh-home.sm-page .sm-shef__visual .sh-ph__img{width:100%;height:100%;object-fit:cover;}
.sh-home.sm-page .sm-shef__label{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:.6rem;
  font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--green-dark);}
.sh-home.sm-page .sm-shef__copy{position:relative;z-index:2;margin-left:clamp(-86px,-6vw,-42px);
  padding:clamp(30px,4vw,58px);background:var(--ground);box-shadow:0 26px 70px rgba(19,44,31,.11);}
.sh-home.sm-page .sm-shef__copy .sh-h-section{max-width:14ch;}
.sh-home.sm-page .sm-shef__copy .sh-lead{margin-top:20px;font-size:1rem;}
.sh-home.sm-page .sm-shef__steps{margin-top:clamp(28px,3.6vw,46px);}
.sh-home.sm-page .sm-shef__steps li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:16px;
  padding:17px 0;border-top:1px solid var(--sm-line);}
.sh-home.sm-page .sm-shef__steps i{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--green);
  border-radius:50%;font-family:var(--mono);font-style:normal;font-size:.58rem;color:var(--green);}
.sh-home.sm-page .sm-shef__steps b{display:block;font-size:1rem;color:var(--ink);}
.sh-home.sm-page .sm-shef__steps p{margin-top:5px;color:var(--text);font-size:.87rem;line-height:1.5;}

/* ===== РАСЧЁТНАЯ ФОРМУЛА ================================================ */
.sh-home.sm-page .sm-est{background:var(--ground);}
.sh-home.sm-page .sm-est__head>p{align-self:flex-end;}
.sh-home.sm-page .sm-est__formula{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,3vw,48px);
  align-items:stretch;padding:clamp(28px,3vw,44px) 0;border-top:1px solid var(--sm-line);
  border-bottom:1px solid var(--sm-line);}
.sh-home.sm-page .sm-est__formula ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));}
.sh-home.sm-page .sm-est__formula li{position:relative;padding:12px clamp(15px,1.5vw,24px);min-width:0;}
.sh-home.sm-page .sm-est__formula li+li{border-left:1px solid var(--sm-line);}
.sh-home.sm-page .sm-est__factor{display:block;}
.sh-home.sm-page .sm-est__factor i{display:block;font-family:var(--mono);font-style:normal;
  font-size:.6rem;letter-spacing:.1em;color:var(--green);margin-bottom:32px;}
.sh-home.sm-page .sm-est__factor b{display:block;font-size:clamp(1.2rem,2vw,1.75rem);
  line-height:1.05;letter-spacing:-.025em;color:var(--ink);}
.sh-home.sm-page .sm-est__formula li p{margin-top:12px;color:var(--text);font-size:.82rem;line-height:1.48;}
.sh-home.sm-page .sm-est__formula li em{position:absolute;right:-13px;top:48%;z-index:2;
  display:grid;place-items:center;width:26px;height:26px;background:var(--ground);font-style:normal;
  font-family:var(--mono);font-size:1.1rem;color:var(--sm-signal);}
.sh-home.sm-page .sm-est__sum{display:flex;align-items:center;gap:14px;align-self:center;}
.sh-home.sm-page .sm-est__sum>span{font-family:var(--mono);font-size:1.7rem;color:var(--sm-signal);}
.sh-home.sm-page .sm-est__sum b{display:grid;place-items:center;width:150px;aspect-ratio:1;border-radius:50%;
  background:var(--green);color:#fff;text-align:center;text-transform:uppercase;font-family:var(--mono);
  font-size:.72rem;line-height:1.45;letter-spacing:.1em;}
.sh-home.sm-page .sm-est__note{margin-top:20px;padding-left:24px;border-left:3px solid var(--sm-signal);
  color:var(--text);font-size:.9rem;line-height:1.55;max-width:72ch;}

/* ===== КОНТРОЛЬНАЯ ТОЧКА ================================================= */
.sh-home.sm-page .sm-results{position:relative;overflow:hidden;background:var(--sm-dark);color:#edf5f0;}
.sh-home.sm-page .sm-results h2,
.sh-home.sm-page .sm-results h3{color:#edf5f0;}
.sh-home.sm-page .sm-results .sh-eyebrow{color:#8fd6b4;}
.sh-home.sm-page .sm-results__head{display:grid;grid-template-columns:minmax(180px,.65fr) minmax(0,1.35fr);
  gap:clamp(28px,5vw,82px);align-items:flex-start;margin-bottom:clamp(42px,5vw,70px);}
.sh-home.sm-page .sm-results__head .sh-h-section{max-width:12ch;}
.sh-home.sm-page .sm-results__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid rgba(143,214,180,.28);}
.sh-home.sm-page .sm-results__grid>section{padding:clamp(28px,3.8vw,52px) clamp(18px,3vw,44px) 0 0;}
.sh-home.sm-page .sm-results__grid>section+section{padding-left:clamp(18px,3vw,44px);
  border-left:1px solid rgba(143,214,180,.22);}
.sh-home.sm-page .sm-results__grid header{display:flex;align-items:center;gap:18px;margin-bottom:28px;}
.sh-home.sm-page .sm-results__grid header span{display:grid;place-items:center;width:42px;height:42px;
  border:1px solid rgba(143,214,180,.46);border-radius:50%;font-family:var(--mono);font-size:.62rem;color:#8fd6b4;}
.sh-home.sm-page .sm-results__grid h3{font-size:clamp(1.25rem,2vw,1.8rem);}
.sh-home.sm-page .sm-results__grid li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;
  padding:17px 0;border-top:1px solid rgba(143,214,180,.16);color:rgba(237,245,240,.75);
  font-size:.94rem;line-height:1.55;}
.sh-home.sm-page .sm-results__grid li .ss-check__icon{color:#8fd6b4;margin-top:2px;}
.sh-home.sm-page .sm-results__link{display:inline-flex;align-items:center;gap:14px;margin-top:clamp(28px,3.5vw,46px);
  padding-bottom:7px;border-bottom:1px solid rgba(143,214,180,.42);font-family:var(--mono);
  font-size:.65rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:#8fd6b4;}
.sh-home.sm-page .sm-results__link span{font-size:1rem;transition:transform .25s var(--ease);}
.sh-home.sm-page .sm-results__link:hover span{transform:translate(3px,-3px);}
.sh-home.sm-page .sm-results__cross{position:absolute;right:clamp(20px,5vw,80px);top:clamp(26px,4vw,60px);
  width:clamp(70px,10vw,150px);aspect-ratio:1;opacity:.14;}
.sh-home.sm-page .sm-results__cross::before,
.sh-home.sm-page .sm-results__cross::after{content:"";position:absolute;left:50%;top:50%;background:#8fd6b4;
  transform:translate(-50%,-50%);}
.sh-home.sm-page .sm-results__cross::before{width:100%;height:1px;}
.sh-home.sm-page .sm-results__cross::after{width:1px;height:100%;}

/* ===== CTA И ПОЛНЫЙ ЦИКЛ ================================================= */
.sh-home.sm-page .sm-cta{position:relative;background:var(--ground-2);padding:clamp(58px,7vw,96px) 0 34px;}
.sh-home.sm-page .sm-cta__box{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);
  gap:clamp(28px,5vw,80px);align-items:center;padding:clamp(30px,5vw,70px);background:var(--ground);
  border-top:4px solid var(--green);overflow:hidden;}
.sh-home.sm-page .sm-cta__copy{position:relative;z-index:1;}
.sh-home.sm-page .sm-cta__copy .sh-eyebrow{margin-bottom:18px;}
.sh-home.sm-page .sm-cta__copy h2{max-width:18ch;font-size:clamp(2rem,4vw,3.7rem);line-height:.98;
  letter-spacing:-.038em;color:var(--ink);}
.sh-home.sm-page .sm-cta__copy p{margin-top:20px;max-width:50ch;color:var(--text);font-size:1rem;line-height:1.6;}
.sh-home.sm-page .sm-cta__side{position:relative;z-index:1;}
.sh-home.sm-page .sm-cta__actions{display:flex;flex-wrap:wrap;gap:12px;}
.sh-home.sm-page .sm-cta__kmd{display:flex;justify-content:space-between;align-items:center;gap:20px;
  margin-top:24px;padding-top:18px;border-top:1px solid var(--sm-line);font-family:var(--mono);
  font-size:.65rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--green-dark);}
.sh-home.sm-page .sm-cta__kmd span{font-size:1.1rem;transition:transform .25s var(--ease);}
.sh-home.sm-page .sm-cta__kmd:hover span{transform:translate(3px,-3px);}
.sh-home.sm-page .sm-cta__arrow{position:absolute;right:1%;bottom:-24%;font-family:var(--sans);
  font-size:clamp(12rem,24vw,25rem);line-height:1;color:rgba(14,126,80,.055);pointer-events:none;}

.sh-home.sm-page .sm-nav{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,42px);
  align-items:baseline;margin-top:30px;padding-top:24px;border-top:1px solid var(--sm-line);}
.sh-home.sm-page .sm-nav__label{font-family:var(--mono);font-size:.6rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--text);}
.sh-home.sm-page .sm-nav ul{display:flex;flex-wrap:wrap;gap:9px clamp(16px,2.2vw,34px);}
.sh-home.sm-page .sm-nav a,
.sh-home.sm-page .sm-nav li>span{display:inline-flex;align-items:baseline;gap:.6em;font-size:.9rem;color:var(--text);}
.sh-home.sm-page .sm-nav i{font-family:var(--mono);font-style:normal;font-size:.58rem;color:rgba(14,126,80,.55);}
.sh-home.sm-page .sm-nav a{transition:color .25s var(--ease);}
.sh-home.sm-page .sm-nav a:hover,
.sh-home.sm-page .sm-nav .is-current>span{color:var(--ink);}
.sh-home.sm-page .sm-nav .is-current i{color:var(--green);}

/* В вертикальном hero промпт длинный: даём ему меру и мелкий кегль, но не режем.
   Падинг только у .ss-ph-плейсхолдера: реальный .sh-ph--img обязан заполнить слот
   целиком, иначе после подстановки фото вокруг него оставалась случайная рамка. */
.sh-home.sm-page .sm-hero__frame>.ss-ph{padding:clamp(28px,4vw,52px) clamp(18px,2.4vw,34px);}
.sh-home.sm-page .sm-hero__frame .sh-ph__prompt,
.sh-home.sm-page .sm-shef__visual .sh-ph__prompt{font-size:clamp(.72rem,.86vw,.88rem);line-height:1.42;}
.sh-home.sm-page .sm-hero__frame .ss-ph__how,
.sh-home.sm-page .sm-shef__visual .ss-ph__how{font-size:.5rem;}

@media (max-width:1180px){
  .sh-home.sm-page .sm-hero__grid{grid-template-columns:minmax(0,1fr) minmax(330px,.72fr);gap:40px;}
  .sh-home.sm-page .sm-hero__route{display:none;}
  .sh-home.sm-page .sm-route__rail{grid-template-columns:minmax(0,1fr);border-top:0;}
  .sh-home.sm-page .sm-route__rail::before{top:0;bottom:0;right:auto;width:3px;height:auto;
    transform:scaleY(0);transform-origin:top;background:linear-gradient(180deg,var(--green) 0 33%,
    var(--sm-signal) 33% 66%,var(--green-dark) 66%);}
  .sh-home.sm-page .sm-route__rail.sh-in::before{transform:scaleY(1);}
  .sh-home.sm-page .sm-phase{margin:0!important;padding:28px 20px 28px 34px;border-left:1px solid var(--sm-line)!important;}
  .sh-home.sm-page .sm-phase+.sm-phase{border-top:1px solid var(--sm-line);}
  .sh-home.sm-page .sm-phase>header{min-height:0;margin-bottom:24px;}
  .sh-home.sm-page .sm-est__formula{grid-template-columns:minmax(0,1fr);}
  .sh-home.sm-page .sm-est__sum{justify-content:flex-end;}
}

@media (max-width:900px){
  .sh-home.sm-page .sm-head,
  .sh-home.sm-page .sm-results__head{grid-template-columns:minmax(0,1fr);gap:18px;}
  .sh-home.sm-page .sm-hero{background:linear-gradient(180deg,var(--ground) 0 59%,var(--ground-2) 59% 100%);}
  .sh-home.sm-page .sm-hero__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "visual" "choice";}
  .sh-home.sm-page .sm-hero__copy{padding-bottom:0;}
  .sh-home.sm-page .sm-hero__visual{justify-self:flex-start;max-width:650px;}
  .sh-home.sm-page .sm-hero__frame{min-height:0;height:auto;aspect-ratio:4/5;}
  .sh-home.sm-page .sm-formats__plate{grid-template-columns:minmax(0,1fr);}
  .sh-home.sm-page .sm-format--shef{border-left:0;border-top:1px solid var(--sm-line);}
  .sh-home.sm-page .sm-formats__joint{top:50%;left:auto;right:22px;transform:translateY(-50%);
    box-shadow:0 0 0 8px var(--ground-2);}
  .sh-home.sm-page .sm-shef__grid{grid-template-columns:minmax(0,1fr);gap:28px;}
  .sh-home.sm-page .sm-shef__copy{margin-left:0;}
  .sh-home.sm-page .sm-est__formula ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;}
  .sh-home.sm-page .sm-est__formula li{border-top:1px solid var(--sm-line);}
  .sh-home.sm-page .sm-est__formula li+li{border-left:0;}
  .sh-home.sm-page .sm-est__formula li:nth-child(even){border-left:1px solid var(--sm-line);}
  .sh-home.sm-page .sm-est__formula li em{display:none;}
  .sh-home.sm-page .sm-results__grid{grid-template-columns:minmax(0,1fr);}
  .sh-home.sm-page .sm-results__grid>section{padding-right:0;}
  .sh-home.sm-page .sm-results__grid>section+section{padding-left:0;border-left:0;
    border-top:1px solid rgba(143,214,180,.22);margin-top:34px;}
  .sh-home.sm-page .sm-cta__box{grid-template-columns:minmax(0,1fr);}
}

@media (max-width:640px){
  .sh-home.sm-page .sm-hero__topline{align-items:flex-start;flex-direction:column;margin-bottom:28px;}
  .sh-home.sm-page .sm-hero__title{font-size:clamp(2.7rem,14vw,4.2rem);max-width:11ch;}
  .sh-home.sm-page .sm-hero__actions .sh-btn,
  .sh-home.sm-page .sm-cta__actions .sh-btn{width:100%;}
  .sh-home.sm-page .sm-hero__choice{grid-template-columns:minmax(0,1fr);}
  .sh-home.sm-page .sm-hero__choice a+a{border-left:0;border-top:1px solid var(--sm-line);}
  .sh-home.sm-page .sm-format{padding:28px 20px;}
  .sh-home.sm-page .sm-format__head{align-items:flex-start;flex-direction:column;}
  .sh-home.sm-page .sm-format__head p{text-align:left;}
  .sh-home.sm-page .sm-format dl>div{grid-template-columns:minmax(0,1fr);gap:5px;}
  .sh-home.sm-page .sm-formats__joint{display:none;}
  .sh-home.sm-page .sm-shef__copy{padding:28px 20px;}
  .sh-home.sm-page .sm-shef__steps li{grid-template-columns:38px minmax(0,1fr);gap:11px;}
  .sh-home.sm-page .sm-est__formula ol{grid-template-columns:minmax(0,1fr);}
  .sh-home.sm-page .sm-est__formula li:nth-child(even){border-left:0;}
  .sh-home.sm-page .sm-est__factor i{margin-bottom:14px;}
  .sh-home.sm-page .sm-est__sum{justify-content:flex-start;}
  .sh-home.sm-page .sm-est__sum b{width:124px;}
  .sh-home.sm-page .sm-cta__box{padding:28px 20px;}
  .sh-home.sm-page .sm-nav{grid-template-columns:minmax(0,1fr);}
  .sh-home.sm-page .sm-nav ul{flex-direction:column;gap:10px;}
}

@media (prefers-reduced-motion:reduce){
  .sh-home.sm-page .sm-route__rail::before{transform:none;transition:none;}
}