/* Михалыч Групп — стиль «Корпус инструмента»: сигнальный оранжевый #C4440B / #FF8A4C, чёрный «прорезиненный» #101315, белый.
   Фаска корпуса (срез левого верхнего и правого нижнего угла), наклонная жирная капитель Inter 900,
   насечка и рёбра, индикатор заряда, табличка техданных. Правила — docs/brand/brendbuk.md.
   Один файл без сборки. Анимации — только при классе html.js и без «меньше движения». */

@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin-rub.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+20BD,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* сигнальный оранжевый (с 07.11.2026 вместо бирюзы; контраст — brendbuk.md, 2.2):
     --acc — кнопки и плашки с БЕЛЫМ текстом (5,0 : 1), полосы и кромки на светлом; --acc-deep — их наведение (6,4);
     --acc-hi — акцент на чёрном (8,0 : 1 на --black, 7,1 на --rubber) и заливка под ЧЁРНЫМ мелким текстом (8,0);
     --acc-lt — мелкий текст и ссылки на --plate (7,4); --acc-ink — текст и ссылки на светлом (8,4 / 7,7 / 7,2);
     --acc-wash — светлая подложка (tip, выбранный пункт) */
  --acc:#C4440B; --acc-deep:#A93A08; --acc-hi:#FF8A4C; --acc-lt:#FFA470; --acc-ink:#8A3005; --acc-wash:#FFF1EA;
  /* «резина» */
  --black:#101315; --rubber:#1A1F22; --plate:#252B2F; --edge:#353D42;
  /* светлое */
  --white:#FFFFFF; --paper:#F3F6F6; --alt:#E9EEEF; --steel:#DDE3E4;
  /* граница поля ввода на белом и на --paper: 3,6 : 1 и 3,3 : 1 (WCAG 1.4.11 — не меньше 3 : 1) */
  --field:#7D898E;
  /* текст. Мелкий текст (меньше 18 px) — не ниже 7 : 1: на светлом --ink / --body / --muted / --acc-ink,
     на тёмном — белый / --menu / --smoke / --acc-hi (на --plate — --acc-lt) (brendbuk.md, 4.1 «Читаемость») */
  --ink:#101315; --body:#3B474C; --muted:#465055; --hint:#4F5B60; --menu:#D5DCDE; --smoke:#B3BDC1; --hint-d:#A0AAAD;
  /* статусы (текстом — 7 : 1 и на белом, и на своей *-wash) */
  --signal:#E5372B; --warn-ink:#991D14; --warn-wash:#FDECEC; --ok:#0E5A2B; --bad:#991B1B; --ok-wash:#EAF6EE; --bad-wash:#FDEEEE;
  /* читаемость: размеры, трекинг капители, цифры */
  --fs-body:17px;        /* основной текст (на телефоне 16,5) */
  --fs-text:16px;        /* связный текст в карточках, FAQ, пояснения */
  --fs-small:14.5px;     /* подписи, служебный текст — не меньше 14 px */
  --fs-cap:13px;         /* капитель-метки — не меньше 13 px */
  --ls-cap:.06em;        /* трекинг капители — не больше .08em */
  --fw-cap:700;
  --fs-btn:16px; --ls-btn:.03em;
  --num:tabular-nums lining-nums;
  --line:rgba(16,19,21,.1); --line-d:rgba(255,255,255,.09);
  /* текстуры: насечка рукоятки и продольные рёбра */
  --grip:repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 2px,transparent 2px 9px),repeating-linear-gradient(-45deg,rgba(0,0,0,.55) 0 2px,transparent 2px 9px);
  --ribs:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 3px,transparent 3px 11px);
  /* фаски */
  --c-xs:6px; --c-s:8px; --c-m:14px; --c-l:24px; --c-xl:44px;
  --ease:cubic-bezier(.2,.9,.25,1);
  /* старые имена — алиасы: p-*.css и калькуляторы сразу получают новые цвета */
  --dark:var(--black); --dark-mid:var(--plate);
  --volt:var(--acc-hi); --volt-b:var(--acc-hi); --volt-d:var(--acc-ink); --volt-pale:var(--acc-wash);
  --bg:var(--paper); --r:0px;
}
@media (max-width:760px){ :root{--c-l:16px;--c-xl:28px;--fs-body:16.5px} }

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip;max-width:100%}
body{margin:0;font:var(--fs-body)/1.65 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-feature-settings:"cv11","ss01";color:var(--body);background:var(--paper);-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--ink);line-height:1.2;font-weight:800;letter-spacing:-.01em;margin:0}
p{margin:0}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
.skip{position:absolute;left:-999px;top:8px;z-index:300;background:var(--acc-hi);color:var(--black);padding:10px 16px;font-weight:800}
.skip:focus{left:8px}

/* ---------- фаска корпуса: одна форма на всё ---------- */
.ch,.btn,.card,.lead,.note-dark,.callout,.tbl-wrap,.toc,.art-short,.send,.disclaimer,.consent-doc,.cta-inline,
.field input,.field textarea,.calc select,.calc input,.calc-tab,.calc-out,.chip,.tags li,.svc-links a,.tools-row a,.city-chips a,
.pill,.hero-badges li,.badge-dark,.route,.work,.shot,.photo,.about-photo,.svc-ic,.why-ic,.geo-ic,.contact-ic,.route-ic,
.note-ic,.steps-n,.burger,.spec,.consent-bar,.lb-close,.nav-max,.rel-k,.price-home,.svc-price,.duo,.hero-volt,.route-urgent{
  --c:var(--c-s);
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.sk{display:inline-block;transform:skewX(-10deg);transform-origin:0 100%}
/* номер телефона (me_phone() в inc/config.php): прямо, без капса и разрядки; табличные — только цифры,
   дефисы и скобки обычной ширины (tabular-nums у Inter расширяет и их — номер распадался на куски) */
.tel{white-space:nowrap;letter-spacing:0;text-transform:none;font-style:normal}
.tel-d{font-variant-numeric:var(--num)}
/* многострочные наклонные заголовки скашиваются по словам (me_sk() в inc/svg.php): левый край строк ровный */
.skw{display:inline-block;max-width:100%;overflow-wrap:anywhere;transform:skewX(-10deg);transform-origin:0 100%}

/* фокус: обводку срезает clip-path, поэтому у фасочных элементов — внутреннее кольцо */
:focus-visible{outline:3px solid var(--acc-ink);outline-offset:2px}
.nav :focus-visible,.foot :focus-visible,.phero :focus-visible,.hero :focus-visible,.cta :focus-visible,.cta-band :focus-visible,
.routes :focus-visible,.stats :focus-visible,.sh-wrap :focus-visible,.dock :focus-visible,.vz :focus-visible,.consent-bar :focus-visible,
.lightbox :focus-visible,.note-dark :focus-visible,.cta-inline :focus-visible,.toc :focus-visible,.art-short :focus-visible{outline-color:var(--acc-hi)}
.btn:focus-visible{outline:0;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px var(--black)}
a.card:focus-visible,.svc-links a:focus-visible,.tools-row a:focus-visible,.city-chips a:focus-visible,
.route:focus-visible,.calc-tab:focus-visible,.nav-max:focus-visible,.burger:focus-visible,
.lb-close:focus-visible{outline:0;box-shadow:inset 0 0 0 3px var(--acc-ink),inset 0 0 0 5px #fff}
.faq summary:focus-visible{outline:3px solid var(--acc-ink);outline-offset:-3px}
.sec-acc :focus-visible{outline-color:var(--black)}
.sec-acc .city-chips a:focus-visible{box-shadow:inset 0 0 0 3px var(--acc-hi)}

.wrap{max-width:1280px;margin:0 auto;padding:0 40px;position:relative}
.wrap-mid{max-width:1100px}
.wrap-narrow{max-width:820px}
@media (max-width:760px){ .wrap{padding:0 16px} }
.center{text-align:center;margin-top:40px}
.muted{color:var(--muted);font-size:15px}
/* насечка рукоятки поверх чёрного раздела */
.grid-bg{position:absolute;inset:0;pointer-events:none;background:var(--grip);opacity:.8}

/* кикер — оранжевая лента со срезом 45° */
.kicker{display:inline-flex;align-items:center;min-height:26px;padding:4px 30px 4px 12px;margin-bottom:18px;background:var(--acc-hi);color:var(--black);
  font-size:var(--fs-cap);font-weight:800;line-height:1.3;letter-spacing:var(--ls-cap);text-transform:uppercase;clip-path:polygon(0 0,100% 0,calc(100% - 20px) 100%,0 100%)}
/* номер раздела в кикере: «03 — Что делаю» */
.kicker-n{font-weight:900;font-variant-numeric:tabular-nums}
.kicker-n::after{content:"—";margin:0 8px;font-weight:800}

/* индикатор заряда: четыре наклонных деления и «плюсовой» выступ */
.bat{position:relative;display:inline-flex;align-items:stretch;gap:2px;height:14px;padding:2px;margin:0 10px 0 2px;vertical-align:-1px;color:var(--acc-hi);box-shadow:inset 0 0 0 1.5px currentColor}
.bat::after{content:"";position:absolute;right:-4px;top:4px;width:3px;height:6px;background:currentColor}
.bat i{width:5px;background:rgba(127,140,145,.35);transform:skewX(-10deg)}
.bat i.on{background:currentColor}
.js .bat i.on{animation:bat-on .3s var(--ease) both}
.js .bat i.on:nth-child(2){animation-delay:.3s}.js .bat i.on:nth-child(3){animation-delay:.6s}.js .bat i.on:nth-child(4){animation-delay:.9s}
@keyframes bat-on{from{opacity:.12}to{opacity:1}}
/* в блоке с появлением деления загораются, когда блок показался на экране */
.js .reveal:not(.vis) .bat i.on{animation:none;opacity:.12}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px 28px;border:0;border-radius:0;
  font-size:var(--fs-btn);font-weight:800;line-height:1.15;letter-spacing:var(--ls-btn);text-transform:uppercase;text-align:center;text-decoration:none;cursor:pointer;
  transition:background-color .2s,color .2s,box-shadow .2s,transform .12s;-webkit-tap-highlight-color:transparent}
.btn>span{display:inline-block;transform:skewX(-10deg)}
/* номер (и почта) в кнопке — прямо и на ступень крупнее подписи: 17 px в обычной кнопке, 18 px в крупной */
.btn>.tel,.btn-tel>span{transform:none}
.btn .tel{font-size:1.0625em;font-weight:800}
.btn svg,.btn img{flex-shrink:0}
.btn img{border-radius:5px}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:progress}
/* главная: оранжевая с белым текстом (5,0 : 1), наведение темнее (6,4 : 1) */
.btn-volt,.btn-acc{--fill:var(--acc);background:var(--acc);color:#fff}
.btn-volt:hover,.btn-acc:hover{--fill:var(--acc-deep);background:var(--acc-deep)}
/* контурная на чёрном */
.btn-ghost{--bd:rgba(255,255,255,.55);background-color:transparent;color:#fff;box-shadow:inset 0 0 0 2px var(--bd)}
.btn-ghost:hover{color:var(--acc-hi);--bd:var(--acc-hi)}
/* чёрная на светлом */
.btn-dark,.btn-black{background:var(--black);color:#fff}
.btn-dark svg,.btn-black svg{color:var(--acc-hi)}
.btn-dark:hover,.btn-black:hover{background:var(--plate)}
/* тёмно-оранжевая для светлого фона: белый на --acc-ink 8,4 : 1 */
.btn-ink{background:var(--acc-ink);color:#fff}
.btn-ink:hover{background:var(--black)}
/* контурная по цвету текста (на светлом — чёрная) */
.btn-line,.btn-line-d{--bd:currentColor;background-color:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.btn-line-d{color:var(--black)}
.btn-line:hover,.btn-line-d:hover{background:var(--black);color:#fff;box-shadow:inset 0 0 0 2px var(--black)}
.btn-lg{min-height:62px;padding:12px 32px;font-size:17px;--c:11px}
.btn-sm{min-height:44px;padding:8px 18px;font-size:var(--fs-btn)}
.btn-block{width:100%}
/* свечение по форме фаски — только у главной кнопки звонка (первый экран и нижняя панель).
   clip-path срезал бы тень, поэтому срез здесь нарисован фоном. */
.btn-glow,.btn-glow:hover{clip-path:none;
  background:linear-gradient(135deg,transparent var(--c),var(--fill) 0) top left/51% 51% no-repeat,
             linear-gradient(var(--fill),var(--fill)) top right/51% 51% no-repeat,
             linear-gradient(315deg,transparent var(--c),var(--fill) 0) bottom right/51% 51% no-repeat,
             linear-gradient(var(--fill),var(--fill)) bottom left/51% 51% no-repeat;
  filter:drop-shadow(0 8px 22px rgba(196,68,11,.45))}
.btn-glow:focus-visible{box-shadow:none;outline:3px solid #fff;outline-offset:3px}
.more{display:inline-flex;align-items:center;gap:6px;min-height:24px;font-size:15px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--acc-ink);text-decoration:none}
@media (max-width:760px){ .btn{min-height:50px;padding:10px 22px} .btn-sm{min-height:44px;padding:8px 16px} }

/* ---------- шапка ---------- */
/* Фон и размытие шапки — на ::before: backdrop-filter на самой шапке сделал бы её
   опорным блоком для position:fixed, и выпадающее меню на телефоне обрезалось бы её высотой. */
.nav{position:sticky;top:0;z-index:100;border-bottom:2px solid var(--acc);transition:border-color .3s}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(16,19,21,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:opacity .3s}
.nav-home{position:fixed;left:0;right:0;border-color:transparent}
.nav-home::before{opacity:0}
.nav-home[data-scrolled]{border-color:var(--acc)}
.nav-home[data-scrolled]::before{opacity:1}
.nav-in{max-width:1320px;margin:0 auto;padding:0 20px;height:72px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0;padding:6px 0}
.brand .logo-h{display:block;width:auto;height:32px}
.menu{display:flex;align-items:stretch;align-self:stretch;gap:0;margin-left:auto}
.menu>a.nav-a,.dd-btn{display:flex;align-items:center;gap:6px;color:var(--menu);text-decoration:none;background:none;border:0;cursor:pointer;
  font:inherit;font-size:14.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:0 10px;transition:color .2s,box-shadow .2s}
.menu>a.nav-a:hover,.dd-btn:hover,.dd-btn[aria-expanded="true"]{color:var(--acc-hi)}
.menu>a.nav-a.cur,.dd-btn.cur{color:#fff;box-shadow:inset 0 -3px 0 var(--acc)}
.menu-contacts{display:none}
.nav-phone{flex-shrink:0;white-space:nowrap;padding:8px 16px}
.nav-max{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;--c:var(--c-xs);padding:6px 12px 6px 6px;background:var(--plate);color:#fff;text-decoration:none;
  font-size:14px;font-weight:800;letter-spacing:.04em;transition:background-color .2s}
.nav-max:hover{background:var(--edge)}
.nav-max img{border-radius:6px;display:block}
.burger{display:none;width:48px;height:48px;--c:var(--c-xs);border:0;background:var(--plate);cursor:pointer;position:relative;flex-shrink:0}
.burger i,.burger i::before,.burger i::after{position:absolute;left:13px;right:13px;height:2px;background:#fff;transition:transform .25s,opacity .25s}
.burger i{top:23px}
.burger i::before,.burger i::after{content:"";left:0;right:0}
.burger i::before{top:-7px}
.burger i::after{top:7px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i::after{transform:translateY(-7px) rotate(-45deg)}

/* выпадающие списки */
.dd{position:relative;display:flex;align-items:stretch}
.dd-btn svg{transition:transform .2s}
.dd-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.dd-panel{position:absolute;top:100%;left:0;min-width:280px;--c:var(--c-l);clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  background:var(--plate);box-shadow:inset 0 3px 0 var(--acc-hi);padding:14px 10px 18px;display:grid;gap:1px;
  visibility:hidden;opacity:0;transform:translateY(6px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;z-index:120}
.dd-cols{grid-template-columns:1fr 1fr;min-width:560px}
.dd-panel a{display:block;color:var(--menu);text-decoration:none;font-size:15px;font-weight:500;line-height:1.35;padding:9px 14px;transition:color .15s,box-shadow .15s,background-color .15s}
.dd-panel a:hover,.dd-panel a[aria-current]{color:#fff;background:rgba(255,255,255,.04);box-shadow:inset 3px 0 0 var(--acc-hi)}
.dd-h{display:none}
.dd:hover .dd-panel,.dd:focus-within .dd-panel,.dd-btn[aria-expanded="true"]+.dd-panel{visibility:visible;opacity:1;transform:none}

@media (max-width:1180px){
  .burger{display:block}
  .menu{position:fixed;top:74px;left:0;right:0;bottom:0;flex-direction:column;align-items:stretch;align-self:auto;gap:0;margin:0;padding:8px 20px 0;
    background:var(--grip),var(--black);overflow-y:auto;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s}
  .menu.open{visibility:visible;opacity:1;transform:none}
  /* закрытое меню не должно ловить нажатия ни само, ни своими ссылками */
  .menu:not(.open){pointer-events:none}
  .menu.open{pointer-events:auto}
  .menu>a.nav-a,.dd-btn{font-size:17px;padding:16px 4px;border-bottom:1px solid var(--line-d)}
  .menu>a.nav-a.cur,.dd-btn.cur{box-shadow:inset 3px 0 0 var(--acc-hi);padding-left:14px}
  .dd{display:block;border-bottom:1px solid var(--line-d)}
  /* разделы — аккордеоном: заголовок-кнопка с шевроном, список раскрывается по нажатию */
  .dd-btn{width:100%;justify-content:space-between;text-align:left;border-bottom:0;min-height:56px}
  .dd-btn svg{width:16px;height:16px;color:var(--acc-hi)}
  .dd-panel,.dd:hover .dd-panel,.dd:focus-within .dd-panel{position:static;display:none;visibility:inherit;opacity:1;transform:none;background:none;box-shadow:none;clip-path:none;padding:0 0 14px;min-width:0}
  .dd-btn[aria-expanded="true"]+.dd-panel{display:grid}
  .dd-cols{grid-template-columns:1fr 1fr}
  .dd-panel a{font-size:15.5px;padding:10px 4px}
  .dd-panel a:hover,.dd-panel a[aria-current]{padding-left:12px}
  .menu-contacts{position:sticky;bottom:0;display:grid;gap:10px;margin:auto -20px 0;padding:18px 20px calc(18px + env(safe-area-inset-bottom));background:var(--black);border-top:2px solid var(--acc)}
  .menu-contacts p{color:var(--menu);font-size:15px;text-align:center}
  .nav-phone{margin-left:auto}
  html.menu-open{overflow:hidden}
}
/* 1181–1299 px: меню в строку с номером 17 px не помещается — убираем иконку трубки и подпись «MAX», сужаем пункты */
@media (min-width:1181px) and (max-width:1299px){
  .nav-in{gap:10px} .menu>a.nav-a,.dd-btn{padding:0 8px;font-size:14px}
  .nav-phone{padding:8px 14px} .nav-phone svg{display:none} .nav-max{padding:6px} .nav-max span{display:none}
}
/* до 600 px номер в шапке остаётся цифрами (раньше — одна иконка): место берём у подписи «MAX» и иконки трубки */
@media (max-width:600px){ .nav-in{padding:0 16px;gap:10px} .nav-phone{padding:8px 12px} .nav-phone svg{display:none} .nav-phone .tel{font-size:15px}
  .nav-max{padding:6px} .nav-max span{display:none} }
/* до 520 px шапка с номером не помещается (iPhone Plus / Pro Max — 428–430 px): номер — в нижней панели крупно */
/* до 360 px (старые маленькие телефоны) не помещается и кнопка MAX — она есть в нижней панели */
@media (max-width:360px){ .nav-max{display:none!important} .nav .brand .logo-h{height:26px} .burger{margin-left:auto} }
@media (max-width:520px){
  .brand .logo-h{height:28px}
  .nav-phone{display:none}
  .nav-max{margin-left:auto;padding:6px}
  .nav-max span{display:none}
  .dd-cols{grid-template-columns:1fr}
}

/* ---------- первый экран главной ---------- */
/* Фон — фото с объекта; фоновое видео (когда будет) — на всю ширину поверх него (docs/hero-video.md).
   Фото p51 вертикальное и не шире 1440 px: на всю ширину экрана от 1025 px его не растягиваем — оно стоит
   правой панелью (до 1040 px) и левым краем растворяется в чёрном. На планшете — во весь экран, на телефоне —
   светлой полосой под шапкой, ниже под текстом притушено.
   Текст слева на тёмном градиенте: под мелким текстом затемнение не меньше 90 %, контраст не ниже 4,5 : 1
   даже на светлом участке кадра; справа фото открыто. Бирюзовая наклонная полоса — узкая боковая панель корпуса. */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;background:var(--black);overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--black)}
.hero-media picture{display:contents}
.hero-poster,.hero-bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 22%}
.hero-bg{display:none;opacity:0;transition:opacity .9s ease}
.hero.vid-on .hero-bg{opacity:1}
@media (min-width:940px){ .hero-bg{display:block} }
@media (min-width:1025px){
  .hero-poster{left:auto;right:0;width:clamp(560px,56vw,1040px);object-position:50% 30%;transform-origin:70% 40%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(0deg,var(--black) 0,rgba(16,19,21,.85) 9%,rgba(16,19,21,0) 30%),
  linear-gradient(180deg,rgba(16,19,21,.85) 0,rgba(16,19,21,.6) 74px,rgba(16,19,21,0) 180px),
  linear-gradient(90deg,rgba(16,19,21,.97) 0,rgba(16,19,21,.94) 44%,rgba(16,19,21,.9) 57%,rgba(16,19,21,.62) 67%,rgba(16,19,21,.24) 80%,rgba(16,19,21,.06) 100%)}
/* 761–1024 px: фото и видео во всю ширину, текст тоже почти во всю — затемнение ≥ .9 под всей колонкой мелкого текста
   (до 82 %; «Оставить заявку» до 1199 px переносится под номер, см. .hero-req) */
@media (min-width:761px) and (max-width:1024px){
  .hero::before{background:linear-gradient(0deg,var(--black) 0,rgba(16,19,21,.9) 9%,rgba(16,19,21,0) 30%),
    linear-gradient(180deg,rgba(16,19,21,.85) 0,rgba(16,19,21,.6) 74px,rgba(16,19,21,0) 180px),
    linear-gradient(90deg,rgba(16,19,21,.95) 0,rgba(16,19,21,.92) 60%,rgba(16,19,21,.9) 82%,rgba(16,19,21,.6) 93%,rgba(16,19,21,.35) 100%)}
}
/* наклонной полосы справа нет (07.11.2026): видео и фото первого экрана открыты целиком */
.hero-in{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;padding-top:clamp(112px,12vw,150px);padding-bottom:calc(88px + 96px);width:100%;z-index:2}
.hero-text{max-width:780px}
.pill{display:inline-flex;align-items:center;gap:10px;--c:var(--c-xs);background:var(--rubber);padding:8px 14px;margin-bottom:28px;
  font-size:14px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--menu)}
.pill i{width:9px;height:9px;background:var(--acc-hi);flex-shrink:0}
/* «Электрика» на 9 букв: кегль такой, чтобы слово не переносилось внутри колонки 780 px (на 1440 — 109 px) */
.hero h1{font-size:clamp(50px,7.6vw,112px);font-weight:900;color:#fff;letter-spacing:-.015em;line-height:.9;text-transform:uppercase;margin-bottom:26px}
.hero h1 .h1-l2{display:block;color:var(--acc-hi);font-size:clamp(26px,3.5vw,50px);letter-spacing:0;line-height:1.02;margin-top:14px}
.hero-sub{font-size:clamp(18px,1.5vw,20px);font-weight:450;line-height:1.55;color:var(--menu);max-width:560px;margin-bottom:32px}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}
/* номер текстом под кнопками — его видно и тем, кто звонит с другого телефона */
.hero-call{display:flex;flex-wrap:wrap;align-items:center;gap:2px 20px;margin-bottom:30px}
/* номер — прямо, 26 px на телефоне и до 32 px на компьютере; табличные только цифры (.tel-d) */
.hero-num{display:inline-flex;align-items:center;min-height:44px;color:#fff;text-decoration:none;font-size:clamp(26px,2.3vw,32px);font-weight:800;letter-spacing:0;line-height:1.1}
.hero-num:hover{color:var(--acc-hi)}
.hero-hours{color:var(--menu);font-size:16px;font-weight:500}
.hero-req{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--acc-hi);font-size:15px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
.hero-req:hover{color:#fff}
/* до 1199 px «Оставить заявку» — отдельной строкой под номером: справа от часов она уходила на светлый участок кадра */
@media (max-width:1199px){ .hero-call::after{content:"";flex-basis:100%;order:1} .hero-call>.hero-req{order:2} }
.hero-badges{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hero-badges li{display:flex;align-items:center;gap:8px;--c:var(--c-xs);background:var(--rubber);padding:10px 14px;color:var(--menu);font-size:15px;font-weight:600;line-height:1.4}
.hero-badges svg{color:var(--acc-hi)}
/* шильдик сети (на портрете мастера) */
.hero-volt{--c:var(--c-xs);position:absolute;top:28px;right:26px;z-index:1;padding:7px 12px;background:var(--black);color:var(--acc-hi);
  font-size:14px;font-weight:900;letter-spacing:.04em;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px var(--edge)}
/* подпись из двух ячеек: оранжевая (имя) + чёрная (уточнение) */
.duo{--c:var(--c-xs);display:inline-flex;align-items:stretch;margin:0;font-size:14px;line-height:1.3}
.duo b{display:flex;align-items:center;padding:9px 14px;background:var(--acc-hi);color:var(--black);font-weight:800;letter-spacing:var(--ls-cap);text-transform:uppercase}
.duo span{display:flex;align-items:center;padding:9px 14px;background:var(--black);color:#fff;font-weight:600}
/* подпись к фону: что за объект — только у настоящего фото, под видео скрыта */
.hero-tag{position:absolute;z-index:2;right:40px;bottom:calc(96px + 30px);transition:opacity .4s ease,visibility .4s}
.hero.vid-on .hero-tag{opacity:0;visibility:hidden}
/* пауза фонового движения: без фаски, чтобы обводку фокуса не срезал clip-path */
.hero-pause{position:absolute;z-index:3;right:40px;top:100px;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 12px;
  border:1px solid var(--edge);background:rgba(16,19,21,.8);color:var(--menu);font-size:13px;font-weight:700;letter-spacing:var(--ls-cap);text-transform:uppercase;cursor:pointer}
.hero-pause:hover{color:#fff;border-color:var(--acc-hi)}
.hero.bg-paused .hero-pause{color:#fff;border-color:var(--acc-hi);background:rgba(16,19,21,.9)}
.hero-pause:focus-visible{outline:3px solid var(--acc-hi);outline-offset:2px}
.hero-pause-i{position:relative;width:12px;height:12px;flex-shrink:0}
.hero-pause-i::before,.hero-pause-i::after{content:"";position:absolute;top:0;bottom:0;width:4px;background:var(--acc-hi)}
.hero-pause-i::before{left:1px}
.hero-pause-i::after{right:1px}
.hero.bg-paused .hero-pause-i::after{display:none}
.hero.bg-paused .hero-pause-i::before{left:2px;width:0;background:none;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--acc-hi)}
@media (max-width:1024px){
  .hero-tag{display:none}
  .hero-pause{right:40px}
}
@media (max-width:760px){
  /* на телефоне текст во всю ширину: под шапкой — открытая полоса кадра (металлорукав по потолку),
     от плашки «ИП · Договор» и ниже фото притушено до 86–90 %, под мелким текстом контраст не ниже 4,5 : 1 */
  .hero::before{background:linear-gradient(180deg,rgba(16,19,21,.72) 0,rgba(16,19,21,.5) 74px,rgba(16,19,21,.02) 100px,rgba(16,19,21,.1) 172px,
    rgba(16,19,21,.8) 214px,rgba(16,19,21,.88) 262px,rgba(16,19,21,.9) 70%,var(--black) 100%)}
  .hero-poster{object-position:50% 4%}
  .hero-in{padding-top:204px;padding-bottom:calc(64px + 40px)}
  .pill{margin-bottom:22px}
  .hero h1{margin-bottom:20px}
  .hero-sub{margin-bottom:24px}
  /* пауза — в открытой полосе под шапкой: внизу её закрыла бы нижняя панель «Позвонить / MAX» */
  .hero-pause{right:16px;top:86px;min-height:44px;padding:0 12px 0 10px}
}
@media (max-width:520px){ .hero-btns .btn{flex:1 1 100%} .hero-call{gap:0 14px} .hero h1{font-size:min(52px,13.6vw)}
  /* чипы — по два в ряд: столбиком они уходили под нижнюю панель */
  .hero-badges{display:grid;grid-template-columns:1fr 1fr} .hero-badges li{padding:10px 12px;font-size:14.5px} }
@keyframes fade-up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
/* медленное приближение фото, пока нет видео: 26 с туда и обратно, только без «меньше движения»; пауза — кнопкой.
   Не больше 4 %: кадр и так не шире 1440 px, сильнее — фото «поплывёт» */
@keyframes hero-kb{from{transform:scale(1)}to{transform:scale(1.04) translate3d(-.6%,.4%,0)}}
@media (prefers-reduced-motion:no-preference){
  .js .hero-poster{animation:hero-kb 26s ease-in-out infinite alternate;will-change:transform}
  .js .hero.bg-paused .hero-poster{animation-play-state:paused}
  .js .hero.vid-on .hero-poster{animation:none}
}
/* заголовок, кнопки звонка и номер видны сразу (человеку с аварией ждать нельзя, и LCP не откладывается):
   у них только короткий сдвиг без прозрачности; плавно проявляются лишь второстепенные плашки */
@keyframes nudge-up{from{transform:translateY(10px)}to{transform:none}}
.js .h-e2,.js .h-e4{animation:nudge-up .45s var(--ease) both}
.js .h-e1{animation:fade-up .5s var(--ease) both}
.js .h-e3{animation:fade-up .5s var(--ease) .06s both}
.js .h-e5{animation:fade-up .5s var(--ease) .12s both}

/* ---------- шапка внутренних страниц ---------- */
.phero{position:relative;background:var(--grip),var(--black);overflow:hidden;padding:64px 0 56px}
/* кромка корпуса справа: узкая наклонная фаска у края экрана, за содержимым — поперёк фото и таблички не идёт */
.phero::after{content:"";position:absolute;top:0;bottom:0;right:0;width:18px;z-index:0;background:var(--acc);clip-path:polygon(10px 0,100% 0,100% 100%,0 100%)}
.phero-in{z-index:2;display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center}
.phero-main{max-width:920px;min-width:0}
.phero-pass .phero-in{grid-template-columns:minmax(0,1fr) 380px}
/* шапка с крупным фото справа (me_page_hero, 'side') */
.phero-side .phero-in{grid-template-columns:minmax(0,1fr) clamp(340px,32vw,440px);gap:clamp(32px,5vw,72px)}
.phero h1{color:#fff;font-size:clamp(28px,3.6vw,48px);font-weight:800;line-height:1.12;letter-spacing:-.01em;margin-bottom:16px;overflow-wrap:break-word}
.phero h1.h1-caps{font-size:clamp(26px,4.6vw,64px);font-weight:900;line-height:1;text-transform:uppercase}
/* с фото справа колонка заголовка уже — капс на ступень мельче, чтобы шёл в две строки */
@media (min-width:1025px){ .phero-side h1.h1-caps{font-size:clamp(30px,3.6vw,52px)} }
.phero-sub{color:var(--menu);font-size:clamp(18px,1.5vw,20px);font-weight:450;line-height:1.55;max-width:680px}
.phero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.phero-404{min-height:62vh;display:flex;align-items:center}
.phero-404 .phero-in{display:block;width:100%}
.phero .grid-bg{display:none}
.phero-404 .hero-btns{margin:30px 0 0}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;font-size:15px;color:var(--menu);margin-bottom:18px}
.crumbs a{display:inline-flex;align-items:center;min-height:36px;color:var(--menu);text-decoration:underline;text-decoration-color:rgba(213,220,222,.35);text-underline-offset:3px}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs>span[aria-hidden]{color:var(--acc-hi)}
.crumbs [aria-current]{color:#fff}
@media (max-width:1180px){ .phero::after{top:auto;left:0;right:0;width:auto;height:4px;clip-path:none} }
@media (max-width:1024px){ .phero-pass .phero-in,.phero-side .phero-in{grid-template-columns:1fr} .phero-pass .spec{max-width:560px} }
@media (max-width:760px){
  .phero{padding:40px 0 42px}
  .phero-btns .btn{flex:1 1 220px}
}

/* ---------- табличка технических данных («Паспорт мастера», цифры, результаты) ---------- */
.spec{--c:var(--c-l);position:relative;background:var(--grip),var(--black);color:var(--menu);box-shadow:inset 0 0 0 1px var(--edge)}
.spec-h{display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 18px 6px 26px;background:var(--ribs),var(--acc-hi);color:var(--black);
  font-size:var(--fs-cap);font-weight:800;letter-spacing:var(--ls-cap);text-transform:uppercase}
.spec-h .logo-mark{box-sizing:content-box;padding:3px 4px;background:var(--black);width:auto;height:18px}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;margin:0}
.spec-grid>div{padding:14px 18px 16px;border-top:1px solid var(--edge);min-width:0}
.spec-grid>div:nth-child(odd){border-right:1px solid var(--edge)}
.spec-grid dt{font-size:var(--fs-cap);font-weight:var(--fw-cap);letter-spacing:var(--ls-cap);text-transform:uppercase;color:var(--menu);margin-bottom:6px}
.spec-grid dd{margin:0}
.spec-grid dd:not(.spec-n){display:flex;align-items:center;gap:8px;color:var(--acc-hi);font-size:clamp(24px,2.4vw,30px);font-weight:900;line-height:1;letter-spacing:-.01em;font-variant-numeric:var(--num)}
.spec-grid dd.spec-name{color:#fff;font-size:18px;font-weight:800;letter-spacing:0;line-height:1.2;transform:none}
.spec-grid dd .bat{height:16px}
.spec-n{font-size:15px;line-height:1.4;color:var(--menu);margin-top:6px!important}
.spec-n .nw{white-space:nowrap}
.spec-foot{padding:12px 18px 14px 34px;border-top:1px solid var(--edge);font-size:14.5px;line-height:1.45;color:var(--menu)}
.spec-screw{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--edge)}
.spec-screw::after{content:"";position:absolute;left:1px;right:1px;top:3.5px;height:1px;background:var(--black);transform:rotate(-35deg)}
.spec-screw:nth-of-type(1){left:12px;bottom:16px}
.spec-screw:nth-of-type(2){right:10px;top:50px}

/* ---------- разделы ---------- */
.sec{padding:clamp(64px,7.8vw,112px) 0;position:relative}
.sec-tight{padding-top:clamp(36px,4vw,56px)}
.sec-alt{background:var(--alt)}
.sec-line{border-top:1px solid var(--line)}
.sec-dark{background:var(--grip),var(--black);overflow:hidden}
.has-tools{position:relative;overflow:clip}
.sec-head{text-align:center;margin-bottom:52px}
.sec-head h2{font-size:clamp(28px,4.4vw,60px);font-weight:900;line-height:.98;letter-spacing:-.01em;text-transform:uppercase;overflow-wrap:break-word}
/* заголовок раздела без me_sk() (сверстан вручную) — наклон целиком */
.sec-head h2:not(:has(.skw)){transform:skewX(-10deg);transform-origin:50% 100%}
.sec-head p{margin:18px auto 0;font-size:18px;color:var(--body);max-width:620px}
.sec-head-dark h2{color:#fff}
.sec-head-dark p{color:var(--menu)}
.h2-plain{font-size:clamp(22px,2.8vw,34px);font-weight:900;line-height:1.05;text-transform:uppercase;transform:skewX(-10deg);transform-origin:0 100%;margin:56px 0 22px;overflow-wrap:break-word}
@media (max-width:760px){ .sec-head{margin-bottom:32px} .sec-head p{font-size:16.5px} .h2-plain{margin-top:44px} }

/* ---------- карточки ---------- */
.card{--c:var(--c-m);--bd:var(--line);background-color:#fff;box-shadow:inset 0 0 0 1px var(--line);transition:transform .25s var(--ease),background-color .25s,box-shadow .25s}
a.card{text-decoration:none}
a.card:hover{transform:translateY(-4px);--bd:var(--acc-ink);box-shadow:inset 0 0 0 2px var(--acc-ink)}
/* карточка-«накладка»: при наведении — чёрная, иконка оранжевая */
a.svc:hover,a.rel:hover,a.geo-card:hover{background:var(--black);box-shadow:none}
a.svc:hover h3,a.rel:hover b,a.geo-card:hover b{color:#fff}
a.svc:hover p,a.rel:hover .rel-d,a.geo-card:hover>span:not(.geo-ic),a.geo-card:hover small{color:var(--menu)}
a.svc:hover .more,a.rel:hover .more{color:var(--acc-hi)}
a.svc:hover .svc-ic,a.geo-card:hover .geo-ic{background:var(--acc-hi);color:var(--black)}

/* ---------- цифры (главная) — табличка технических данных ---------- */
.stats{position:relative;background:var(--grip),var(--black);padding:0 0 clamp(64px,7vw,96px)}
.spec-h-r{margin-left:auto;font-size:var(--fs-cap);letter-spacing:var(--ls-cap)}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr);margin:0}
.stat{padding:22px 22px 24px;border-top:1px solid var(--edge);border-right:1px solid var(--edge);min-width:0}
.stat:last-child{border-right:0}
.stat dt{font-size:var(--fs-cap);font-weight:var(--fw-cap);letter-spacing:var(--ls-cap);text-transform:uppercase;color:var(--menu);margin-bottom:12px}
.stat-v{margin:0;display:flex;align-items:center;gap:12px;color:var(--acc-hi);font-size:clamp(38px,4.6vw,64px);font-weight:900;line-height:.95;letter-spacing:-.02em;
  font-variant-numeric:var(--num);white-space:nowrap}
.stat-v .bat{height:18px}
.stat-v .bat i{width:6px}
.stat-n{margin:12px 0 0;font-size:15.5px;line-height:1.45;color:var(--menu)}
@media (max-width:760px){
  .stats-in{grid-template-columns:1fr 1fr}
  .stat{padding:18px 16px 20px}
  .stat:nth-child(2){border-right:0}
  .stat-n{font-size:14.5px}
  .spec-h-r{display:none}
}

/* ---------- услуги ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
@media (min-width:1025px){ .svc-grid{grid-template-columns:repeat(3,1fr)} }
.svc{display:flex;flex-direction:column;padding:26px 24px 24px}
.svc-ic{--c:var(--c-xs);width:56px;height:56px;flex-shrink:0;background:var(--black);color:var(--acc-hi);display:flex;align-items:center;justify-content:center;margin-bottom:18px;transition:background-color .25s,color .25s}
.svc h3{font-size:18px;margin-bottom:8px}
.svc p{font-size:var(--fs-text);color:var(--body);line-height:1.6;margin-bottom:14px;flex:1}
/* мини-ценник: чёрная плашка, цена оранжевым — только строка me_prices() */
.svc-price{--c:var(--c-xs);align-self:flex-start;display:inline-flex;align-items:baseline;gap:10px;max-width:100%;margin:0 0 14px;padding:7px 12px 7px 14px;background:var(--black);transition:background-color .25s}
.svc-price b{display:inline-block;color:var(--acc-hi);font-size:18px;font-weight:800;white-space:nowrap;font-variant-numeric:var(--num)}
.svc-price small{color:var(--menu);font-size:14px;font-weight:500;line-height:1.35;min-width:0}
a.svc:hover .svc-price{background:var(--plate)}
@media (max-width:760px){
  .svc-grid{gap:10px}
  .svc{display:grid;grid-template-columns:52px 1fr;column-gap:14px;padding:16px}
  .svc .svc-ic{grid-row:1/span 4;width:52px;height:52px;margin:0}
  .svc-price{margin-bottom:8px;padding:5px 10px 5px 12px}
  .svc-price b{font-size:17px}
  .svc h3{font-size:16.5px;margin-bottom:4px}
  .svc p{font-size:15.5px;margin-bottom:6px}
}
.svc-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;padding:clamp(32px,4vw,56px) 0;border-bottom:1px solid var(--line)}
.svc-row:last-of-type{border-bottom:0}
.svc-row-rev .svc-row-text{order:2}
.svc-row h2{font-size:clamp(22px,2.6vw,32px);margin-bottom:12px}
.svc-row p{font-size:var(--fs-body);margin-bottom:16px}
.ticks{list-style:none;padding:0;margin:0 0 18px;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.ticks li{display:flex;align-items:flex-start;gap:10px;min-width:0;font-size:var(--fs-text);line-height:1.5;overflow-wrap:break-word}
.ticks svg{flex-shrink:0;color:var(--acc-ink);background:var(--acc-wash);padding:3px;width:20px;height:20px;margin-top:1px}
.photo{--c:var(--c-l);margin:0;position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--alt)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo-wide{aspect-ratio:16/10}
/* подпись на фото: под текстом подложка ≥ .88 (светлый кадр не «съедает» белый текст) */
.photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 14px;font-size:15px;font-weight:600;line-height:1.4;color:#fff;
  background:linear-gradient(rgba(16,19,21,0),rgba(16,19,21,.88) 40%,rgba(16,19,21,.94))}
@media (max-width:768px){ .svc-row{grid-template-columns:1fr} .svc-row-rev .svc-row-text{order:0} }
.svc-row-top{display:flex;align-items:center;gap:16px;margin:0 0 18px}
.svc-row-top .svc-ic{margin:0}
.svc-row-n{font-size:clamp(36px,4vw,54px);font-weight:900;line-height:1;letter-spacing:-.02em;color:var(--steel);font-variant-numeric:var(--num)}
.svc-row .svc-price{margin:0 0 18px}
/* фото «как товар»: чёрная рамка-накладка и вторая фаска внутри; в чётных рядах — на оранжевом */
.photo-pro{--c:var(--c-l);padding:8px;background:var(--black)}
.photo-pro img{--k:calc(var(--c-l) - 4px);clip-path:polygon(var(--k) 0,100% 0,100% calc(100% - var(--k)),calc(100% - var(--k)) 100%,0 100%,0 var(--k))}
.photo-pro figcaption{left:8px;right:8px;bottom:8px}
.svc-row-rev .photo-pro{background:var(--acc)}
/* карточка услуги с фото-миниатюрой сверху (главная, /uslugi/): кадр -640, 3 : 2, по низу — кромка --acc 4 px;
   иконка в чёрной плашке наезжает на край кадра. На телефоне кадр тоже сверху (сбоку узкой колонкой
   широкие кадры вроде «до и после» обрезались до неузнаваемости) */
.svc-ph{position:relative;padding:0}
.svc-thumb{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--rubber);border-bottom:4px solid var(--acc)}
.svc-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.svc-thumb-0{display:flex;align-items:center;justify-content:center;background:var(--grip),var(--black);color:rgba(255,138,76,.5)}
a.svc-ph:hover .svc-thumb img{transform:scale(1.045)}
.svc-ph>.svc-ic{position:relative;z-index:1;margin:-30px 0 14px 24px}
.svc-body{display:flex;flex-direction:column;flex:1;min-width:0;padding:0 24px 24px}
.svc-ph h2{font-size:clamp(21px,1.9vw,24px);margin-bottom:10px}
.svc-dir .svc-body>p{font-size:var(--fs-text);flex:0 0 auto}
.svc-dir .ticks{margin-bottom:18px}
.svc-dir .svc-price{margin:auto 0 18px}
.svc-num{--c:var(--c-xs);position:absolute;top:14px;right:14px;z-index:1;padding:5px 10px;background:var(--black);color:var(--acc-hi);
  font-size:15px;font-weight:900;line-height:1.2;font-variant-numeric:var(--num);clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.svc-cat{margin-top:8px}
@media (min-width:1181px){ .svc-cat{grid-template-columns:repeat(4,1fr)} .svc-cat .svc-body{padding:0 20px 20px} .svc-cat>.svc-ph>.svc-ic{margin-left:20px} }
@media (max-width:760px){
  .svc-ph{display:flex;flex-direction:column;padding:0}
  .svc-ph>.svc-ic{width:52px;height:52px;margin:-28px 0 12px 16px}
  .svc-ph .svc-body{padding:0 16px 18px}
}
/* «Другие услуги» на /uslugi/ на телефоне — по две в ряд: кадр, иконка, название, цена, ссылка (тизер — на компьютере) */
@media (max-width:560px){
  .svc-cat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-cat>.svc-ph>.svc-ic{width:40px;height:40px;margin:-22px 0 8px 10px}
  .svc-cat>.svc-ph>.svc-ic svg{width:20px;height:20px}
  .svc-cat .svc-body{padding:0 10px 12px}
  .svc-cat h3{font-size:15.5px;line-height:1.25;flex:1}
  .svc-cat .svc-body>p{display:none}
  .svc-cat .svc-price{flex-direction:column;align-items:flex-start;gap:1px;padding:6px 10px;margin-top:10px}
  .svc-cat .svc-price b{font-size:16px}
  .svc-cat .more{font-size:14px}
}
.step-k{display:flex;align-items:center;gap:12px;margin:0 0 4px}
.step-k .kicker{margin:0}
.step-k .bat{color:var(--acc-ink);height:16px}
.step-k .bat i{width:6px}
.about-side{min-width:0}
.about-side .duo{position:relative;z-index:1;max-width:calc(100% - 18px);margin:-26px 0 0 18px}

/* ---------- работы: плитка-корпус с оранжевой кромкой ---------- */
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.work,.shot{--c:var(--c-l);--k:calc(var(--c-l) + 12px);position:relative;display:block;overflow:hidden;aspect-ratio:4/3;text-decoration:none;
  /* оранжевый — только в срезанных углах («кромка»), середина — «резина»: пока снимок грузится, плитка тёмная, а не кислотная */
  background:linear-gradient(135deg,var(--acc) calc(var(--k) * .7072 + 1px),transparent 0) top left/50% 50% no-repeat,
             linear-gradient(315deg,var(--acc) calc(var(--k) * .7072 + 1px),transparent 0) bottom right/50% 50% no-repeat,var(--rubber)}
.work img,.shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);
  clip-path:polygon(var(--k) 0,100% 0,100% calc(100% - var(--k)),calc(100% - var(--k)) 100%,0 100%,0 var(--k))}
/* кольцо фокуса — поверх снимка (внутренняя тень самой плитки закрыта картинкой) */
.work::after,.shot::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none}
.work:focus-visible,.shot:focus-visible{outline:0}
.work:focus-visible::after,.shot:focus-visible::after{box-shadow:inset 0 0 0 3px var(--acc-hi),inset 0 0 0 6px var(--black)}
.work:hover img,.shot:hover img{transform:scale(1.045)}
.work-cap{position:absolute;left:0;right:0;bottom:0;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--k)),calc(100% - var(--k)) 100%,0 100%);padding:36px 20px 16px;background:linear-gradient(rgba(16,19,21,0),rgba(16,19,21,.86) 24%,rgba(16,19,21,.94));text-align:left}
.work-cap b{display:block;color:#fff;font-size:15px;font-weight:800;line-height:1.3}
.work-cap small{display:block;color:var(--menu);font-size:14px;line-height:1.45;margin-top:3px}
.work-cap em{font-style:normal;color:var(--acc-hi);font-weight:var(--fw-cap);text-transform:uppercase;letter-spacing:var(--ls-cap);font-size:var(--fs-cap)}
@media (max-width:980px){ .works-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .works-grid{grid-template-columns:1fr;gap:10px} }
/* мозаика на главной: крупная плитка 2 × 2, остальные — по одной ячейке */
.works-grid.works-mosaic{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(180px,17vw,236px)}
.works-mosaic .work{aspect-ratio:auto}
.work-big{grid-column:span 2;grid-row:span 2}
.work-k{display:block;margin-bottom:5px;font-size:var(--fs-cap);font-weight:var(--fw-cap);letter-spacing:var(--ls-cap);text-transform:uppercase;color:var(--acc-hi)}
.work-big .work-cap{padding:90px 30px 26px}
.work-big .work-cap b{font-size:clamp(20px,2.2vw,30px);font-weight:900;line-height:1.05;text-transform:uppercase;margin:2px 0 6px}
.work-big .work-cap small{font-size:15px;max-width:460px}
@media (max-width:1180px){ .works-mosaic .work:not(.work-big) small{display:none} }
@media (max-width:980px){ .works-grid.works-mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:210px} }
@media (max-width:600px){
  .works-grid.works-mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:10px}
  .works-mosaic .work-cap{padding:30px 12px 10px}
  .works-mosaic .work-cap b{font-size:15px;line-height:1.25}
  .works-mosaic .work-k{font-size:13px;letter-spacing:.04em;margin-bottom:2px}
  .work-big .work-cap{padding:60px 16px 14px}
  .work-big .work-cap b{font-size:19px}
  .work-big .work-cap small{display:none}
}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.chip{--c:var(--c-xs);display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 16px;border:0;background:var(--black);color:#fff;
  font-size:15px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s}
.chip:hover{background:var(--plate)}
.chip.on{background:var(--acc-hi);color:var(--black)}
.chip small{font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:20px;padding:0 6px;background:var(--rubber);color:var(--acc-hi);font-variant-numeric:var(--num)}
.chip.on small{background:var(--black);color:var(--acc-hi)}
.chip:focus-visible{outline:0;box-shadow:inset 0 0 0 3px var(--acc-hi)}
/* рубрики статей: ссылки к разделам */
.stati-nav{justify-content:flex-start;margin:0 0 8px}
.stati-nav a small{color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
.stati-nav a:hover small{color:var(--menu)}
.h2-plain[id]{scroll-margin-top:96px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-auto-flow:dense;gap:16px}
.shot{border:0;padding:0;cursor:zoom-in;width:100%}
.shot.wide{grid-column:span 2;aspect-ratio:2.72/1}
@media (max-width:640px){ .shot.wide{grid-column:span 1;aspect-ratio:4/3} .gallery{gap:10px} }
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(16,19,21,.96);display:flex;align-items:center;justify-content:center;padding:24px}
.lightbox figure{margin:0;max-width:1000px;width:100%;text-align:center}
.lightbox img{width:auto;max-width:100%;margin:0 auto;max-height:78vh;object-fit:contain}
.lightbox figcaption{margin-top:14px;color:var(--menu);font-size:15.5px}
.lightbox figcaption b{--c:var(--c-xs);display:inline-block;padding:7px 14px;background:var(--acc-hi);color:var(--black);font-size:14px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.lightbox figcaption span{display:block;margin-top:8px}
.lightbox img{--c:var(--c-l);clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.lb-close{--c:var(--c-xs);position:absolute;top:18px;right:18px;width:48px;height:48px;background:var(--plate);border:0;color:#fff;font-size:18px;cursor:pointer}
.lb-close:hover{background:var(--acc-hi);color:var(--black)}

/* ---------- почему я ---------- */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.why{padding:26px 24px;display:flex;gap:18px}
.why-ic{--c:var(--c-xs);width:52px;height:52px;flex-shrink:0;background:var(--black);color:var(--acc-hi);display:flex;align-items:center;justify-content:center}
.why h3{font-size:17px;margin-bottom:6px}
.why p{font-size:var(--fs-text);color:var(--body);line-height:1.6}
@media (max-width:420px){ .why-grid{grid-template-columns:1fr} }
/* главная: фото у щита на оранжевой рамке + шесть карточек */
.why-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,48px);align-items:start}
.why-side{position:relative}
.why-photo{width:100%}
.why-side .duo{position:relative;z-index:1;margin:-30px 0 0 24px}
.why-split .why-grid{grid-template-columns:1fr 1fr}
.why-split .why{flex-direction:column;gap:14px;padding:22px 22px 24px}
@media (min-width:1025px){ .why-side{position:sticky;top:100px} }
@media (max-width:1024px){ .why-split{grid-template-columns:1fr} .why-side{max-width:560px} .why-photo{aspect-ratio:4/3} }
@media (max-width:640px){ .why-split .why-grid{grid-template-columns:1fr} .why-split .why{flex-direction:row;padding:18px} .why-side .duo{margin-left:12px} }

/* ---------- призыв с формой ---------- */
.cta{position:relative;background:var(--black);padding:clamp(72px,8vw,112px) 0}
.cta-in{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:clamp(32px,6vw,80px);align-items:center;z-index:2}
.cta h2{color:#fff;font-size:clamp(40px,6vw,84px);font-weight:900;letter-spacing:-.01em;line-height:.95;text-transform:uppercase;margin-bottom:22px}
.cta-text p{color:var(--menu);font-size:17px;margin-bottom:28px;max-width:460px}
.cta-text p.cta-btns{max-width:none}
.cta-btns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px!important}
.cta-hours{display:flex;align-items:center;color:var(--menu);font-size:15.5px;margin:0!important}
@media (max-width:520px){ .cta-btns .btn{flex:1 1 100%} }
@media (max-width:900px){ .cta-in{grid-template-columns:1fr} }
.cta-band{position:relative;background:var(--grip),var(--black);padding:clamp(44px,5vw,64px) 0}
.cta-band-in{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.cta-band h2{color:#fff;font-size:clamp(28px,3.4vw,44px);font-weight:900;line-height:1;text-transform:uppercase;margin-bottom:12px;transform:skewX(-10deg);transform-origin:0 100%}
.cta-band p{color:var(--menu);max-width:540px}
.cta-band-btns{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:760px){ .cta-band-btns{width:100%} .cta-band-btns .btn{flex:1 1 100%} }

/* ---------- форма ---------- */
.lead{--c:var(--c-l);--bd:var(--line);background-color:#fff;padding:clamp(22px,3vw,34px);box-shadow:inset 0 0 0 1px var(--line),inset 0 4px 0 var(--acc)}
.lead-dark{--bd:transparent;background-color:var(--plate);box-shadow:inset 0 4px 0 var(--acc-hi)}
.lead-title{font-size:21px;font-weight:900;text-transform:uppercase;line-height:1.1;margin-bottom:8px;transform:skewX(-10deg);transform-origin:0 100%}
.lead-hint{font-size:15.5px;color:var(--body);margin-bottom:20px}
.lead-hint a:not(.btn){color:var(--acc-ink);font-weight:700}
.lead-dark .lead-title{color:#fff}
.lead-dark .lead-hint{color:var(--menu)}
.lead-dark .lead-hint a:not(.btn){color:var(--acc-lt)}
.lead-form{display:grid;gap:16px}
.field label{display:block;font-size:14px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--body);margin-bottom:7px}
.field label span{color:var(--acc-ink)}
.field input,.field textarea{--c:var(--c-xs);--bd:var(--field);width:100%;padding:14px 15px;border:0;border-radius:0;background-color:#fff;box-shadow:inset 0 0 0 var(--bw) var(--bd);
  font:inherit;font-size:17px;color:var(--ink);transition:box-shadow .2s,background-color .2s}
.field input::placeholder,.field textarea::placeholder{color:var(--hint);opacity:1}
.field textarea{resize:vertical;min-height:92px}
.field input:focus,.field textarea:focus{outline:0;--bd:var(--acc-ink);background-color:#FFF8F4}
.lead-dark .field label{color:var(--menu)}
.lead-dark .field label span{color:var(--acc-lt)}
.lead-dark .field input,.lead-dark .field textarea{--bd:#5D6B71;background-color:var(--rubber);color:#fff}
.lead-dark .field input::placeholder,.lead-dark .field textarea::placeholder{color:var(--hint-d)}
.lead-dark .field input:focus,.lead-dark .field textarea:focus{--bd:var(--acc-hi);--bw:2px;background-color:var(--rubber)}
.field.bad input,.field.bad textarea{--bd:var(--bad);}
.lead-dark .field.bad input,.lead-dark .field.bad textarea{--bd:var(--signal);--bw:2px}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--body);cursor:pointer}
.consent input{appearance:none;-webkit-appearance:none;margin:0;width:24px;height:24px;flex-shrink:0;border:2px solid var(--ink);border-radius:0;background:#fff;cursor:pointer}
.consent input:checked{background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='square'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/16px no-repeat;border-color:var(--acc)}
.consent input:focus-visible{outline:3px solid var(--acc-ink);outline-offset:2px}
.consent a:not(.btn){color:var(--acc-ink)}
.lead-dark .consent{color:var(--menu)}
.lead-dark .consent input{border-color:var(--smoke);background-color:var(--rubber)}
.lead-dark .consent input:checked{background:var(--acc-hi) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101315' stroke-width='3.4' stroke-linecap='square'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/16px no-repeat;border-color:var(--acc-hi)}
.lead-dark .consent input:focus-visible{outline-color:var(--acc-hi)}
.lead-dark .consent a:not(.btn){color:var(--acc-lt)}
.consent.bad span{color:var(--bad)}
.consent.bad input{border-color:var(--bad)}
.lead-dark .consent.bad span{color:#FFA48C}
.lead-dark .consent.bad input{border-color:var(--signal)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.lead-status{font-size:15px;min-height:1px}
.lead-status.err{color:var(--bad);font-weight:600}
.lead-dark .lead-status.err{color:#FFA48C}
.lead-done{text-align:center;padding:16px 14px;background:var(--acc-wash)}
.lead-done p{margin-bottom:10px;font-size:15px;color:var(--body)}
.lead-done-t{display:flex;align-items:center;justify-content:center;gap:8px;font-size:22px;font-weight:900;color:var(--ink)!important;text-transform:uppercase}
.lead-done-t svg{color:var(--acc-ink)}
.lead-dark .lead-done{background:var(--rubber)}
.lead-dark .lead-done p{color:var(--menu)}
.lead-dark .lead-done-t{color:#fff!important}
.lead-dark .lead-done-t svg{color:var(--acc-hi)}
.lead-done a:not(.btn){color:var(--acc-ink);font-weight:800}
.lead-dark .lead-done a:not(.btn){color:var(--acc-hi)}

/* ---------- цены ---------- */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-bottom:32px}
/* /ceny/: по две колонки, нечётный последний прайс — во всю ширину и сам в две колонки */
@media (min-width:901px){
  .price-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .price-grid-2>.price:last-child:nth-child(odd){grid-column:1/-1}
  .price-grid-2>.price:last-child:nth-child(odd) dl{display:grid;grid-template-columns:1fr 1fr;column-gap:48px}
}
.price{--c:var(--c-l);padding:26px 28px 22px}
.price h2{font-size:14px;font-weight:900;letter-spacing:var(--ls-cap);text-transform:uppercase;color:var(--ink);padding-bottom:12px;margin-bottom:6px;border-bottom:3px solid var(--black)}
.price dl{margin:0}
.price dl div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:11px 0;border-bottom:1px solid var(--steel)}
.price dl div:last-child{border-bottom:0}
.price dt{font-size:15.5px;flex:1;display:flex;align-items:baseline;gap:10px;min-width:0}
/* точечная выноска до цены */
.price dt::after{content:"";flex:1;min-width:14px;border-bottom:2px dotted var(--steel);transform:translateY(-4px)}
.price dd{margin:0;font-size:16px;font-weight:800;color:var(--ink);white-space:nowrap;font-variant-numeric:var(--num)}
@media (max-width:760px){ .price{padding:20px 18px 16px} .price dt::after{display:none} .price dd{white-space:normal;text-align:right;max-width:46%} }
.price-note{font-size:var(--fs-small);color:var(--body);margin-top:14px;padding-top:12px;border-top:1px solid var(--steel)}
.price-note a:not(.btn){color:var(--acc-ink);font-weight:700}
.note-dark{--c:var(--c-m);position:relative;display:flex;gap:16px;align-items:flex-start;background:var(--black);box-shadow:inset 4px 0 0 var(--acc-hi);padding:22px 26px 22px 28px;margin-bottom:24px}
.note-dark::before{content:"";position:absolute;inset:0;background:var(--grip);opacity:.5;pointer-events:none}
.note-dark>*{position:relative}
.note-dark b{display:block;color:#fff;font-size:16px;font-weight:800;margin-bottom:4px}
.note-dark p{color:var(--menu);font-size:var(--fs-text)}
.note-dark a:not(.btn){color:var(--acc-hi)}
.note-big{padding:30px 32px}
.note-big p{margin-bottom:18px}
.note-ic{--c:var(--c-xs);width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--acc-hi);color:var(--black)}
.disclaimer{--c:var(--c-xs);font-size:var(--fs-small);color:var(--body);padding:14px 18px;background:var(--alt)}
.faq{display:grid;gap:10px}
.faq details{padding:0}
.faq summary{cursor:pointer;font-weight:700;color:var(--ink);font-size:16px;line-height:1.4;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 22px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--black);color:var(--acc-hi);font-size:20px;font-weight:700;line-height:1}
.faq details[open]{box-shadow:inset 0 0 0 1px var(--line),inset 4px 0 0 var(--acc)}
.faq details[open] summary::after{content:"–";background:var(--acc-hi);color:var(--black)}
.faq p{padding:0 22px 20px;margin:0;font-size:16.5px}

/* ---------- о мастере, отзывы, контакты ---------- */
.about{display:grid;grid-template-columns:420px 1fr;gap:clamp(32px,5vw,64px);align-items:center;z-index:2}
.about-photo{--c:var(--c-xl);margin:0;aspect-ratio:4/5;padding:10px;background:var(--acc)}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;--k:calc(var(--c-xl) - 6px);
  clip-path:polygon(var(--k) 0,100% 0,100% calc(100% - var(--k)),calc(100% - var(--k)) 100%,0 100%,0 var(--k))}
.about h2{color:#fff;font-size:clamp(28px,3.6vw,44px);font-weight:900;text-transform:uppercase;line-height:1;margin-bottom:18px;transform:skewX(-10deg);transform-origin:0 100%}
.about p{color:var(--menu);margin-bottom:12px}
.badge-dark{--c:var(--c-xs);display:flex;gap:14px;margin-top:24px;padding:18px 20px;background:var(--rubber);color:var(--acc-hi)}
.badge-dark b{display:block;color:#fff;margin-bottom:3px}
.badge-dark span{color:var(--menu);font-size:15px}
@media (max-width:860px){ .about{grid-template-columns:1fr} .about-photo{max-width:420px} }
.rev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin:24px 0}
.rev{margin:0;padding:24px}
.rev-stars{color:var(--acc-ink);display:flex;gap:2px;margin-bottom:12px}
.rev-stars svg{fill:currentColor}
.rev blockquote{margin:0 0 14px;font-size:var(--fs-text)}
.rev figcaption b{display:block;color:var(--ink)}
.rev figcaption span{font-size:14px;color:var(--muted)}
/* крупный портрет мастера (/o-mastere/ — в шапке, /kontakty/ — рядом с контактами):
   чёрная рамка, фаска XL, внутри вторая фаска; подпись из двух ячеек наезжает на нижний левый угол */
.mphoto{position:relative;margin:0;padding-bottom:22px;max-width:460px}
.mphoto-frame{--c:var(--c-xl);position:relative;aspect-ratio:4/5;padding:10px;background:var(--black);box-shadow:inset 0 0 0 1px var(--edge);
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
/* в чёрной шапке чёрная рамка сливается с фоном (видна только линия --edge) — там рамка оранжевая */
.phero .mphoto-frame{background:var(--acc);box-shadow:none}
.mphoto-frame img{width:100%;height:100%;object-fit:cover;--k:calc(var(--c-xl) - 6px);
  clip-path:polygon(var(--k) 0,100% 0,100% calc(100% - var(--k)),calc(100% - var(--k)) 100%,0 100%,0 var(--k))}
.mphoto .duo{position:absolute;left:-22px;bottom:0;z-index:2;max-width:calc(100% + 10px)}
.mphoto .duo b{letter-spacing:var(--ls-cap);white-space:nowrap}
@media (max-width:1024px){ .mphoto .duo{left:12px;max-width:calc(100% - 24px)} }
/* фото работ в шапке посадочной (tpl-landing.php): та же рамка, подпись «С объекта» + что на кадре.
   Подпись бывает длинной — в две-три строки, поэтому «С объекта» не переносится, а текст переносится */
.lphoto .duo{align-items:stretch}
.lphoto .duo span{display:block;padding:9px 14px;line-height:1.35}
.lphoto .duo b{white-space:nowrap;flex-shrink:0}
@media (max-width:1024px){ .phero-side .lphoto{margin-top:4px;max-width:560px} }
/* планшет: во всю колонку кадр 4 : 5 был ~700 px высотой и уводил текст и цены за экран — здесь 4 : 3, не выше 420 px */
@media (min-width:601px) and (max-width:1024px){ .lphoto .mphoto-frame{aspect-ratio:4/3;max-height:420px} }
/* на телефоне — под заголовком и кнопками, умеренной высоты; рамка оранжевая (чёрная сливается с шапкой),
   подпись — под кадром, а не поверх него */
@media (max-width:600px){
  .lphoto{padding-bottom:0}
  .lphoto .mphoto-frame{aspect-ratio:auto;height:260px;padding:8px;background:var(--acc);box-shadow:none}
  .lphoto .duo{position:relative;left:0;bottom:auto;max-width:100%;margin:-2px 0 0 0;display:flex;flex-direction:column}
  .lphoto .duo b{align-self:flex-start;padding:6px 12px}
  .lphoto .duo span{padding:8px 12px 10px}
}
/* «Ваш мастер» на /kontakty/: под контактами и формой — крупный портрет и рядом «Паспорт мастера».
   На телефоне портрет компактный (кадр 5 : 4), чтобы не занимал весь экран */
.km{display:grid;grid-template-columns:clamp(300px,34vw,440px) minmax(0,560px);gap:clamp(28px,5vw,72px);align-items:center}
.km-k{margin-bottom:16px}
@media (max-width:900px){ .km{grid-template-columns:1fr;align-items:start} .km .mphoto{max-width:420px} }
@media (max-width:600px){ .km .mphoto-frame{aspect-ratio:5/4} }
.contacts{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:clamp(28px,5vw,56px);align-items:start}
.contacts-list{display:grid;gap:10px}
.contacts-list .h2-plain{margin-top:0}
.contact{display:flex;gap:16px;align-items:center;padding:18px 20px;text-decoration:none}
.contact small{display:block;font-size:var(--fs-cap);font-weight:var(--fw-cap);letter-spacing:.05em;text-transform:uppercase;color:var(--body)}
.contact b{display:block;color:var(--ink);font-size:18px;word-break:break-word}
.contact b .tel{display:inline-block;margin:2px 0;font-size:clamp(18px,5.8vw,26px);font-weight:800;line-height:1.15}
/* телефон: номер на 375 px — 23 px, на 320 — 18,5 px (иначе не влезает в одну строку) */
@media (max-width:480px){ .contact b .tel{font-size:clamp(18px,calc(8.2vw - 7.7px),26px)} }
/* узкий экран: почта одной строкой, без переноса «yandex.» / «ru» */
@media (max-width:340px){ .contact[href^="mailto:"] b{font-size:16px} }
.contact em{display:block;font-style:normal;font-size:15px;color:var(--body)}
.contact-ic{--c:var(--c-xs);width:48px;height:48px;flex-shrink:0;background:var(--black);color:var(--acc-hi);display:flex;align-items:center;justify-content:center}
.contact-ic-max{background:transparent;clip-path:none}
.contact-ic-max img{border-radius:12px;width:48px;height:48px}
.contact-ic-txt{font-weight:900;font-size:20px}
@media (max-width:900px){ .contacts{grid-template-columns:minmax(0,1fr)} }
.req{padding:10px 26px 24px}
.req dl{margin:0 0 18px}
.req dl div{display:grid;grid-template-columns:220px 1fr;gap:14px;padding:13px 0;border-bottom:1px solid var(--steel)}
.req dt{color:var(--muted);font-size:15px}
.req dd{margin:0;color:var(--ink);font-weight:600;font-size:16px;word-break:break-word;font-variant-numeric:var(--num)}
@media (max-width:600px){ .req{padding:6px 18px 20px} .req dl div{grid-template-columns:1fr;gap:2px} }

/* ---------- посадочные услуг ---------- */
.land{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(28px,4vw,56px);align-items:start}
.land-main{min-width:0}
.land-main h2{margin-top:48px}
.land-main h2:first-of-type{margin-top:36px}
.land-side{display:grid;gap:16px;min-width:0}
.land-side .price{padding:22px 24px 18px}
.land-side .lead-title{font-size:19px}
.ticks-2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px 22px}
.steps{list-style:none;padding:0!important;margin:0 0 22px;display:grid;gap:0;counter-reset:none}
.steps li{display:flex;gap:18px;align-items:flex-start;margin:0;padding:16px 0;border-bottom:1px solid var(--steel)}
.steps li:first-child{padding-top:4px}
.steps li:last-child{border-bottom:0}
.steps-n{--c:var(--c-xs);flex-shrink:0;width:40px;height:40px;background:var(--black);color:var(--acc-hi);font-weight:900;font-size:15px;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.steps b{display:block;color:var(--ink);font-size:17px;font-weight:800;margin-bottom:3px}
.steps p{margin:0!important;font-size:var(--fs-text)}
.land-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
.land-photos .photo{aspect-ratio:3/4;--c:var(--c-m)}
.land-photos figcaption{font-size:14px;padding:34px 12px 10px}
.land-photos-2{grid-template-columns:repeat(2,minmax(0,280px))}
.land-photos-1{grid-template-columns:minmax(0,320px)}
/* два кадра из photos сразу после вступления: «как товар» — чёрная и оранжевая рамки.
   Ряд одной высоты: ширина кадра пропорциональна его --r (tpl-landing.php: вертикальный — 1 : 1,
   горизонтальный — свои пропорции, до 1,6), поэтому широкий кадр («до и после», схема) не обрезается */
.land-shots{display:flex;gap:14px;margin:30px 0 6px}
.land-shots .photo{--r:1;flex:var(--r) 1 0;min-width:0;aspect-ratio:var(--r)}
.land-shots-1 .photo{flex:0 1 calc(420px * var(--r))}
.land-shots .photo:nth-child(2){background:var(--acc)}
.land-shots figcaption{font-size:15px}
.land-more{padding:22px 22px 14px;display:grid;gap:0}
.land-more .foot-h{color:var(--ink);margin-bottom:6px}
.land-more a{display:flex;align-items:center;gap:10px;padding:10px 0;color:var(--body);text-decoration:none;font-weight:600;font-size:15.5px;border-bottom:1px solid var(--steel);transition:color .15s,padding .15s}
.land-more a:last-child{border-bottom:0}
.land-more a:hover{color:var(--acc-ink);padding-left:4px}
.land-more svg{color:var(--acc-ink);flex-shrink:0}
.land .note-dark{margin:12px 0 0}
/* «Паспорт мастера» посадочной: на компьютере — в боковой колонке, до 1024 px — копия после вступления (tpl-landing.php) */
.spec-mob{display:none}
@media (max-width:1024px){ .land{grid-template-columns:minmax(0,1fr)} .spec-mob{display:block;max-width:560px;margin:28px 0 0} .land-side .spec-side{display:none} }
@media (max-width:560px){
  .land-photos{grid-template-columns:1fr 1fr}
  .land-photos-1{grid-template-columns:minmax(0,1fr)}
  .land-photos-3 .photo:nth-child(3){grid-column:1/-1;aspect-ratio:16/10}
  .land-photos-1 .photo{aspect-ratio:4/3}
  /* узкие кадры на телефоне: подпись под снимком на чёрной плашке (brendbuk.md, 4.1, п. 4) */
  .land-shots{gap:10px;margin-top:22px;align-items:stretch;flex-wrap:wrap}
  /* широкий кадр (схема, «до и после») — отдельной строкой: вдвоём в ряд он сжимается до ~165 px и не читается */
  .land-shots .photo-wide{flex:1 1 100%}
  .land-shots-1 .photo{flex:1 1 0}
  .land-shots .photo{aspect-ratio:auto;display:flex;flex-direction:column}
  .land-shots .photo img{aspect-ratio:var(--r);height:auto}
  .land-shots-1 .photo img{aspect-ratio:4/3}
  .land-shots figcaption{position:static;flex:1;margin-top:8px;padding:8px 10px;font-size:14px;background:var(--black)}
}
.svc-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin-top:32px}
.svc-links span{font-size:var(--fs-cap);font-weight:var(--fw-cap);letter-spacing:var(--ls-cap);text-transform:uppercase;color:var(--body);margin-right:4px}
.svc-links a,.tools-row a,.city-chips a{--c:var(--c-xs);--bd:var(--line);display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 14px;background-color:#fff;box-shadow:inset 0 0 0 1px var(--line);
  color:var(--ink);font-size:15px;font-weight:600;text-decoration:none;transition:background-color .2s,color .2s,box-shadow .2s}
.svc-links a:hover,.tools-row a:hover,.city-chips a:hover{background:var(--black);color:#fff;box-shadow:none}
.svc-links svg,.tools-row svg,.city-chips svg{color:var(--acc-ink);flex-shrink:0}
.svc-links a:hover svg,.tools-row a:hover svg,.city-chips a:hover svg{color:var(--acc-ink)}
@media (max-width:760px){
  /* 27 ссылок по одной в строке занимали 1200 px — на телефоне три ряда с прокруткой вбок
     (обрезанный справа чип подсказывает, что лента листается) */
  .svc-links{position:relative;display:grid;grid-template-rows:repeat(3,auto);grid-auto-flow:column;grid-auto-columns:max-content;justify-content:start;gap:6px;
    margin-right:-16px;padding:26px 16px 8px 0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin}
  .svc-links span{position:absolute;top:0;left:0;margin:0}
  .svc-links a{min-height:44px;padding:6px 12px;font-size:14.5px;line-height:1.25;gap:6px;scroll-snap-align:start}
  .svc-links a svg{width:14px;height:14px}
}
.row-links{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
/* главная: три ценника-плашки + прайс */
.price-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;align-items:start}
.ptags{display:grid;gap:16px}
.ptag{--c:var(--c-l);position:relative;display:grid;gap:4px;padding:20px 26px 22px 44px;background:var(--black);color:#fff;
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%)}
/* «пробитое отверстие» ценника */
.ptag::before{content:"";position:absolute;left:16px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--alt);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.ptag-k{font-size:var(--fs-cap);font-weight:var(--fw-cap);letter-spacing:var(--ls-cap);text-transform:uppercase;color:var(--menu)}
.ptag-name{font-size:16px;font-weight:800;line-height:1.3;color:#fff}
.ptag-v{display:flex;align-items:baseline;gap:8px;margin-top:6px;color:var(--acc-hi);font-size:clamp(30px,3vw,42px);font-weight:900;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:var(--num)}
/* «от» перед ценой — заметно: без него «500 ₽» читается как точная цена */
.ptag-v small{font-size:20px;font-weight:800;letter-spacing:0;color:#fff}
.ptag-main{background:var(--ribs),var(--acc-hi)}
.ptag-main .ptag-k,.ptag-main .ptag-name,.ptag-main .ptag-v,.ptag-main .ptag-v small{color:var(--black)}
.price-th{display:flex;justify-content:space-between;padding:4px 0 10px;border-bottom:3px solid var(--black);font-size:var(--fs-cap);font-weight:800;letter-spacing:var(--ls-cap);text-transform:uppercase;color:var(--ink)}
.price-home-btn{margin-top:18px}
.price-split .price-home dl{grid-template-columns:1fr}
.price-split .price-home dl div:nth-last-child(2){border-bottom:1px solid var(--steel)}
@media (max-width:900px){ .price-split{grid-template-columns:1fr} .ptags{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} }
@media (max-width:760px){ .ptag{padding:16px 20px 18px 40px} .ptags{gap:10px} }
.price-home{--c:var(--c-l);padding:16px 32px 22px}
.price-home dl{display:grid;grid-template-columns:1fr 1fr;column-gap:48px}
.price-home dl div:nth-last-child(2){border-bottom:0}
@media (max-width:700px){ .price-home{padding:10px 18px 12px} .price-home dl{grid-template-columns:1fr} .price-home dl div:nth-last-child(2){border-bottom:1px solid var(--steel)} }

/* ---------- текстовые страницы ---------- */
.doc h2{font-size:clamp(23px,2.4vw,28px);font-weight:800;line-height:1.2;margin:44px 0 14px}
.doc h3{font-size:clamp(17px,1.8vw,20px);font-weight:800;line-height:1.25;margin:28px 0 10px}
.doc p{margin-bottom:14px}
.doc ul,.doc ol{margin:0 0 16px;padding-left:22px}
.doc li{margin-bottom:7px}
.doc li::marker{color:var(--acc-ink);font-weight:800}
.doc a:not(.btn):not(.card):not(.more){color:var(--acc-ink);text-underline-offset:2px}
.doc a:not(.btn):not(.card):not(.more):hover{color:var(--ink)}
.doc .toc a:not(.btn):not(.card):not(.more){color:var(--menu)}
.doc .toc a:not(.btn):not(.card):not(.more):hover{color:#fff}
.doc .ticks{padding-left:0}
.doc .note-dark p,.doc .send .ticks li{margin-bottom:0}
@media (min-width:761px){ .doc{font-size:17px} }
.lead-p{font-size:clamp(18px,1.7vw,20px);line-height:1.55;color:var(--ink)}
.consent-doc{--c:var(--c-m);background:var(--alt);padding:22px 24px;font-size:15px}
.task-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.task{padding:20px 22px;box-shadow:inset 0 0 0 1px var(--line),inset 0 3px 0 var(--acc)}
.task h3{font-size:16.5px!important;margin:0 0 8px!important}
.task p{font-size:var(--fs-text);margin:0!important}
.tags{list-style:none;padding:0!important;display:flex;flex-wrap:wrap;gap:8px}
.tags li{--c:var(--c-xs);--bd:var(--line);margin:0!important;padding:7px 14px;background-color:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:15px;font-weight:600;color:var(--ink)}

/* ---------- подвал ---------- */
/* сверху — оранжевая полоса с рёбрами, как боковая панель корпуса */
.foot{background:var(--ribs) top/100% 12px no-repeat,linear-gradient(var(--acc),var(--acc)) top/100% 12px no-repeat,var(--black);color:var(--smoke);padding:68px 0 0;font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr;gap:32px}
.foot .brand .logo-h{height:40px;width:auto}
.foot-tag{margin-top:12px;color:var(--menu);font-size:15.5px}
/* номер в подвале — крупно, первым под знаком */
.foot-tel{display:inline-flex;align-items:center;min-height:44px;margin-top:14px;color:#fff;text-decoration:none;font-size:clamp(23px,2vw,26px);font-weight:800;line-height:1.1}
.foot-tel:hover{color:var(--acc-hi)}
.foot-hours{display:block}
.foot-h2{margin-top:22px}
.foot-legal{margin-top:16px;font-size:14px;line-height:1.65;color:var(--smoke)}
.foot-h{color:var(--acc-hi);font-weight:800;margin-bottom:10px;font-size:var(--fs-cap);letter-spacing:.08em;text-transform:uppercase}
.foot-col{display:flex;flex-direction:column;gap:2px;align-items:flex-start;min-width:0}
.foot-col a:not(.btn),.foot-link{display:inline-flex;align-items:center;min-height:34px;color:var(--menu);text-decoration:none;background:none;border:0;padding:4px 0;cursor:pointer;text-align:left;font-size:16px;line-height:1.35;overflow-wrap:anywhere}
.foot-col a:not(.btn):hover,.foot-link:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--acc-hi)}
.foot-note{font-size:14.5px;color:var(--smoke)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:20px;padding-bottom:24px;border-top:1px solid var(--edge);font-size:14px;color:var(--smoke)}
@media (max-width:1100px){ .foot-grid{grid-template-columns:1fr 1fr 1fr} .foot-brand{grid-column:1/-1} }
@media (max-width:700px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr} .foot .brand .logo-h{height:36px} }
@media (max-width:760px){ .foot-col a:not(.btn),.foot-link{min-height:40px} }

/* нижняя панель на телефоне: позвонить и MAX — всегда под пальцем */
.dock{display:none}
@media (max-width:760px){
  .dock{display:grid;grid-template-columns:1.6fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:90;padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    background:var(--black);border-top:2px solid var(--acc)}
  .dock{grid-template-columns:minmax(0,2.3fr) minmax(0,1fr)}
  .dock .btn{min-height:56px;padding:6px 12px;font-size:var(--fs-btn)}
  .dock-max{background:var(--plate)}
  /* «Позвонить» и номер цифрами: номер виден на любой странице, не прокручивая. Слово — наклонной капителью, номер — прямо */
  .dock-call{gap:10px;padding:6px 10px}
  .dock-call>.dock-t{display:flex;flex-direction:column;align-items:flex-start;gap:1px;transform:none;line-height:1.1;text-align:left}
  .dock-k{display:block;font-size:var(--fs-btn);letter-spacing:var(--ls-btn);transform:skewX(-10deg)}
  .dock-t .tel{font-size:clamp(15px,4.6vw,18px);font-weight:800}
  .foot{padding-bottom:80px}
}

/* баннер согласия на статистику */
.consent-bar{--c:var(--c-m);position:fixed;left:16px;right:16px;bottom:16px;z-index:150;max-width:660px;margin:0 auto;background:var(--plate);color:var(--menu);
  box-shadow:inset 0 3px 0 var(--acc-hi);padding:20px 22px 18px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:15px}
.consent-bar p{flex:1;min-width:220px}
.consent-bar a:not(.btn){color:var(--acc-lt)}
.consent-bar div{display:flex;gap:8px;flex-wrap:wrap}
.consent-bar .btn-line{color:#fff}
.consent-bar .btn-line:hover{background-color:transparent;color:var(--acc-lt);--bd:var(--acc-lt);box-shadow:inset 0 0 0 2px var(--acc-lt)}
@media (max-width:760px){ .consent-bar{bottom:88px} }

/* визитка */
.vz{min-height:100svh;display:flex;align-items:center;justify-content:center;background:var(--grip),var(--black);padding:32px 16px}
.vz-card{width:100%;max-width:400px;text-align:center;display:grid;gap:10px;justify-items:center;color:#fff}
.vz-card .logo-v{width:auto;height:132px;margin-bottom:10px}
.vz-sub{color:var(--menu);font-size:16px;margin-bottom:12px}
.vz-card .btn-line{color:var(--acc-hi)}
.vz-card .btn-line:hover{background-color:transparent;color:var(--acc-hi);box-shadow:inset 0 0 0 2px var(--acc-hi)}
.vz-mail{text-transform:none;letter-spacing:0}
.vz-mail>span{transform:none}
.vz-site{display:inline-flex;align-items:center;min-height:44px;color:var(--menu);font-size:15px;margin-top:6px}
.vz-site:hover{color:#fff}
.vz-legal{color:var(--smoke);font-size:14px}

/* ---------- появление при прокрутке ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.vis{opacity:1;transform:none}
/* у наклонных заголовков появление не должно снимать наклон */
.js .h2-plain.reveal{transform:translateY(22px) skewX(-10deg)}
.js .h2-plain.reveal.vis{transform:skewX(-10deg)}
.js a.card.reveal.vis:hover,.js .route.reveal.vis:hover{transform:translateY(-4px)}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* ---------- инструменты по краям (контуры, не текст) ---------- */
.tool{position:absolute;pointer-events:none;z-index:0;color:rgba(138,48,5,.14);will-change:transform,opacity}
.tool svg{width:100%;height:auto;display:block}
.js .tool{opacity:0}
.has-tools>.wrap{z-index:1}
@media (max-width:960px){ .tool{display:none} }

/* ---------- щит (inc/shield.php; движение — site.js, блок «Щит», механика та же) ---------- */
.sh-wrap{position:relative;background:var(--black);padding:clamp(72px,8vw,112px) 24px;overflow:clip}
.sh-wrap .grid-bg{opacity:.9}
.sh-flow{position:relative;max-width:1150px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(56px,9vw,110px)}
.sh-block{display:grid;grid-template-columns:minmax(260px,5fr) 7fr;gap:clamp(28px,5vw,64px);align-items:center}
.sh-block.sh-rev{grid-template-columns:7fr minmax(260px,5fr)}
.sh-rev .sh-text{order:2}
.sh-num{display:inline-flex;align-items:center;min-height:26px;padding:3px 26px 3px 10px;font-size:var(--fs-cap);font-weight:800;letter-spacing:var(--ls-cap);text-transform:uppercase;
  background:var(--acc-hi);color:var(--black);margin-bottom:14px;clip-path:polygon(0 0,100% 0,calc(100% - 18px) 100%,0 100%)}
.sh-text h3{font-size:clamp(22px,2.6vw,32px);font-weight:900;text-transform:uppercase;line-height:1.05;color:#fff;margin-bottom:14px}
.sh-text p{font-size:16.5px;color:var(--menu);line-height:1.65}
.sh-step{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.sh-step .sh-num{margin-bottom:0}
.sh-step .bat{height:16px}
.sh-step .bat i{width:6px}
/* подложка щита — оранжевая панель с рёбрами и фаской XL */
.sh-slide{position:relative;padding:clamp(18px,3vw,34px);will-change:transform,opacity}
.sh-slide::before{content:"";position:absolute;inset:0;z-index:0;background:var(--ribs),var(--acc);--c:var(--c-xl);
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
/* корпус щита: без clip-path — дверца при открытии выходит за его край */
.sh-panel{position:relative;perspective:1500px;width:100%;max-width:560px;margin:0 auto;border-radius:3px;background:linear-gradient(180deg,#E9EEEF,#CFD7D9);
  box-shadow:0 0 0 6px var(--black),0 22px 44px rgba(16,19,21,.45),inset 0 1px 0 rgba(255,255,255,.6);padding:clamp(12px,2.2vw,20px)}
.sh-gland{position:absolute;top:-20px;width:24px;height:14px;border-radius:3px 3px 0 0;background:repeating-linear-gradient(180deg,#252B2F 0 3px,#353D42 3px 6px)}
.sh-screw{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#E9EEEF,#8A9497 70%,#5D6B71);box-shadow:inset 0 -1px 2px rgba(0,0,0,.35)}
.sh-screw::after{content:"";position:absolute;left:15%;right:15%;top:45%;height:1.5px;background:rgba(16,19,21,.55);transform:rotate(35deg)}
.sh-inner{position:relative;border-radius:2px;background:#F3F6F6;box-shadow:inset 0 0 0 1px rgba(16,19,21,.12),inset 0 2px 12px rgba(16,19,21,.12);
  padding:clamp(16px,2.6vw,24px) clamp(10px,2vw,18px);display:flex;flex-direction:column;gap:clamp(14px,2.6vw,22px)}
.sh-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
.sh-wires path{fill:none;stroke-width:3.5;stroke-linecap:round}
.sh-rowwrap{position:relative}
.sh-rail{position:absolute;left:2%;right:2%;top:50%;height:12px;transform:translateY(-50%);background:repeating-linear-gradient(90deg,#A9B4B8 0 6px,#C2CBCE 6px 12px);
  border-top:1px solid #8A9497;border-bottom:1px solid #8A9497}
.sh-bus{position:absolute;z-index:2;left:3%;right:30%;top:-6px;height:11px;border-radius:2px;box-shadow:0 2px 5px rgba(0,0,0,.25);
  background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(184,115,51,.95) 10px 14px),linear-gradient(180deg,#1A1F22,#353D42)}
.sh-row{position:relative;z-index:1;display:flex;gap:clamp(4px,.9vw,8px)}
.sh-mod{height:clamp(86px,15vw,114px);background:linear-gradient(180deg,#FFFFFF,#E9EEEF);border-radius:2px;box-shadow:inset 0 0 0 1px rgba(16,19,21,.16),0 3px 10px rgba(16,19,21,.16);
  display:flex;flex-direction:column;min-width:0}
.sh-term{height:15%;flex-shrink:0;background:linear-gradient(180deg,#C2CBCE,#DDE3E4);display:flex;align-items:center;justify-content:space-evenly}
.sh-term.sh-bot{background:linear-gradient(0deg,#C2CBCE,#DDE3E4)}
.sh-term i{width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#E9EEEF,#8A9497 75%);box-shadow:inset 0 0 0 1px rgba(16,19,21,.3)}
.sh-face{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;padding-top:7%}
.sh-led{position:absolute;top:5%;right:8%;width:5px;height:5px;border-radius:50%;background:#C2CBCE;transition:background .25s,box-shadow .25s}
.sh-mod.on .sh-led{background:var(--acc-hi);box-shadow:0 0 7px rgba(255,138,76,.95)}
.sh-lever{width:34%;max-width:24px;height:46%;background:var(--black);border-radius:2px;position:relative;overflow:hidden;box-shadow:inset 0 1px 4px rgba(0,0,0,.5)}
.sh-grip{position:absolute;left:10%;right:10%;top:0;height:52%;border-radius:1px;background:linear-gradient(180deg,var(--acc-hi),var(--acc));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 3px rgba(0,0,0,.4);transform:translateY(85%);transition:transform .3s cubic-bezier(.45,1.6,.4,1),filter .3s;filter:saturate(.25) brightness(.8)}
.sh-mod.on .sh-grip{transform:none;filter:none}
.sh-k-main .sh-lever{max-width:32px;width:44%}
.sh-flag{position:absolute;top:8%;left:10%;width:14%;height:9%;border-radius:1px;background:var(--bad);transition:background .25s}
.sh-mod.on .sh-flag{background:var(--acc)}
.sh-test{position:absolute;top:10%;right:14%;width:14px;height:14px;border-radius:2px;background:#F3F6F6;box-shadow:inset 0 0 0 1px rgba(16,19,21,.3);font-size:8px;font-weight:800;color:var(--ink);display:flex;align-items:center;justify-content:center}
.sh-disp{min-width:58%;height:38%;background:var(--black);border-radius:2px;display:flex;align-items:center;justify-content:center;gap:3px;box-shadow:inset 0 1px 6px rgba(0,0,0,.6)}
.sh-disp span{font-size:clamp(10px,1.7vw,14px);font-weight:800;color:var(--acc-hi);letter-spacing:.06em;font-variant-numeric:tabular-nums;text-shadow:0 0 6px rgba(255,138,76,.55)}
.sh-disp em{font-style:normal;font-size:8px;color:rgba(255,138,76,.7)}
.sh-meta{margin-top:auto;padding:0 3px 5%;display:flex;flex-direction:column;align-items:center;gap:1px;max-width:100%;line-height:1.2}
.sh-meta b{font-size:clamp(6.5px,1.05vw,9px);font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sh-meta span{font-size:clamp(6px,.95vw,8px);font-weight:700;color:var(--muted)}
/* дверца — чёрная «резина» с насечкой и знаком */
.sh-door{position:absolute;inset:-8px;border-radius:3px;background:var(--grip),linear-gradient(165deg,#252B2F,#101315 60%);box-shadow:inset 0 0 0 1px var(--edge),-14px 20px 44px rgba(0,0,0,.45);
  transform-origin:left center;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:6% 8%;z-index:5}
.sh-window{position:absolute;top:6%;left:7%;right:7%;height:46%;border-radius:2px;background:rgba(255,138,76,.07);box-shadow:inset 0 0 0 1px var(--edge),inset 0 2px 14px rgba(0,0,0,.4);overflow:hidden}
.sh-window::after{content:"";position:absolute;top:-40%;left:10%;width:26%;height:180%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);transform:rotate(18deg)}
.sh-louvers{position:absolute;left:9%;bottom:9%;width:26%;height:11%;background:repeating-linear-gradient(180deg,rgba(255,255,255,.12) 0 2px,transparent 2px 6px)}
.sh-lcd{position:absolute;top:56%;right:8%;background:var(--rubber);color:var(--acc-hi);font-size:clamp(10px,1.6vw,13px);font-weight:800;letter-spacing:.08em;padding:4px 10px;box-shadow:inset 0 0 0 1px var(--edge),0 0 14px rgba(255,138,76,.3)}
.sh-doorlogo{display:flex;flex-direction:column;align-items:center;gap:4px;line-height:1.25}
.sh-bolt{display:block;margin-bottom:4px}
.sh-bolt .logo-v{display:block;width:auto;height:clamp(64px,10vw,96px)}
.sh-doorsub{font-size:clamp(8px,1.3vw,10px);color:var(--smoke);letter-spacing:.06em;text-transform:uppercase}
.sh-handle{position:absolute;right:3.2%;top:46%;width:6px;height:14%;border-radius:2px;background:linear-gradient(90deg,#5D6B71,#353D42);box-shadow:inset 0 1px 1px rgba(255,255,255,.2)}
.sh-lock{position:absolute;right:3.6%;top:64%;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8A9497,#353D42 75%)}
.sh-lock::after{content:"";position:absolute;left:46%;top:25%;bottom:25%;width:2px;background:var(--black)}
@media (max-width:860px){
  .sh-block,.sh-block.sh-rev{grid-template-columns:1fr;gap:26px}
  .sh-rev .sh-text{order:0}
  .sh-text{text-align:center}
  .sh-step{justify-content:center}
  .sh-text p{max-width:480px;margin:0 auto}
  .sh-mod{height:clamp(74px,19vw,96px)}
}
/* на телефоне щит уменьшен, подписи модулей вышли бы 6–8 px — их не прочитать: оставляем пиктограммы
   (рычажки, индикаторы, табло реле), номиналы линий — в тексте шага */
@media (max-width:760px){
  .sh-meta{visibility:hidden}
  .sh-test,.sh-disp em{font-size:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important;animation:none!important}
  .js .reveal,.js .tool{opacity:1;transform:none;transition:none}
  .js .h-e1,.js .h-e2,.js .h-e3,.js .h-e4,.js .h-e5{animation:none}
  a.card:hover,.route:hover,.btn:active,.js a.card.reveal.vis:hover,.js .route.reveal.vis:hover{transform:none}
  .work:hover img,.shot:hover img{transform:none}
}

/* ---------- статьи и блоки текста (inc/blocks.php) ---------- */
.art-meta{font-size:var(--fs-small);color:var(--body);margin-bottom:20px}
/* длина строки текста статьи — до ~70 знаков (на 1440 колонка 764 px давала 80+) */
.art>p,.art>ul,.art>ol{max-width:68ch}
.art-meta svg{display:inline-block;vertical-align:-2px;margin-right:6px;color:var(--acc-ink)}
/* оглавление — чёрная плашка с оранжевыми номерами */
.toc{--c:var(--c-m);background:var(--black);padding:20px 24px 16px;margin:10px 0 30px}
.toc .foot-h{color:var(--acc-hi);margin-bottom:10px}
.toc ol{margin:0;padding-left:24px;columns:2;column-gap:32px}
.toc li{margin:0 0 8px;break-inside:avoid;color:var(--menu)}
.toc li::marker{color:var(--acc-hi);font-weight:900}
.toc a{color:var(--menu);text-decoration:none;font-size:16px}
.toc a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--acc-hi)}
@media (max-width:640px){ .toc ol{columns:1} }
.doc h2[id]{scroll-margin-top:96px}
.callout{--c:var(--c-m);padding:18px 22px 18px 26px;margin:20px 0}
.callout b{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:800;margin-bottom:5px}
.callout svg{flex-shrink:0}
.callout p{margin:0!important;font-size:16.5px;color:var(--body)}
.callout-warn{background:var(--warn-wash);box-shadow:inset 4px 0 0 var(--signal)}
.callout-warn b{color:var(--warn-ink)}
.callout-warn svg{color:var(--warn-ink)}
.callout-tip{background:var(--acc-wash);box-shadow:inset 4px 0 0 var(--acc)}
.callout-tip svg{color:var(--acc-ink)}
.photo-in{margin:22px 0;aspect-ratio:16/10}
.tbl-wrap{--c:var(--c-m);overflow-x:auto;margin:18px 0;box-shadow:inset 0 0 0 1px var(--line)}
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-text);min-width:480px;font-variant-numeric:var(--num)}
.tbl th{background:var(--black);color:#fff;text-align:left;font-weight:800;padding:12px 14px;font-size:var(--fs-cap);letter-spacing:.05em;text-transform:uppercase}
.tbl td{padding:11px 14px;border-top:1px solid var(--steel);vertical-align:top}
.tbl-note{font-size:var(--fs-small);color:var(--body);margin-top:-6px}
/* подсказка «таблицу можно прокрутить»: тень у правого края, пока есть что листать (фон local/scroll) */
.tbl-wrap{background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) 0 0/40px 100% no-repeat local,
  linear-gradient(270deg,#fff 30%,rgba(255,255,255,0)) 100% 0/40px 100% no-repeat local,
  linear-gradient(90deg,rgba(16,19,21,.14),rgba(16,19,21,0)) 0 0/14px 100% no-repeat scroll,
  linear-gradient(270deg,rgba(16,19,21,.14),rgba(16,19,21,0)) 100% 0/14px 100% no-repeat scroll,#fff}
.tbl td{background:transparent}
.tbl tr:nth-child(even) td{background:rgba(16,19,21,.035)}
/* на телефоне таблица из блоков текста — карточками: строка = блок, ячейка = «подпись: значение» */
@media (max-width:760px){
  .tbl-wrap:has(.tbl-cards){overflow:visible;background:none;box-shadow:none;clip-path:none}
  .tbl-cards{min-width:0;display:block;font-size:var(--fs-text)}
  .tbl-cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tbl-cards tbody{display:grid;gap:10px}
  .tbl-cards tr{--c:var(--c-s);display:block;background:#fff;box-shadow:inset 0 0 0 1px var(--line),inset 4px 0 0 var(--acc);padding:12px 16px 12px 18px;
    clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
  .tbl-cards td,.tbl-cards tr:nth-child(even) td{display:block;padding:6px 0;border:0;background:none}
  .tbl-cards td+td{border-top:1px solid var(--steel)}
  .tbl-cards td:first-child{color:var(--ink);font-weight:800}
  .tbl-cards td[data-label]:not([data-label=""])::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:var(--fs-cap);font-weight:var(--fw-cap);letter-spacing:.05em;text-transform:uppercase;color:var(--body)}
}
.cta-inline{--c:var(--c-m);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:var(--ribs),var(--black);padding:22px 24px;margin:28px 0}
.cta-inline p{margin:0!important;font-weight:700;color:#fff;flex:1;min-width:220px}
.cta-inline div{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:560px){ .cta-inline div{width:100%} .cta-inline .btn{flex:1 1 100%} }
.art-disc{font-size:var(--fs-small);color:var(--body);border-top:1px solid var(--steel);padding-top:16px;margin-top:32px}
.help{padding:24px;box-shadow:inset 0 0 0 1px var(--line),inset 0 4px 0 var(--acc)}
.help-t{font-size:19px;font-weight:900;text-transform:uppercase;line-height:1.1;color:var(--ink);margin-bottom:8px;transform:skewX(-10deg);transform-origin:0 100%}
.help p{font-size:var(--fs-text);margin-bottom:16px}
.help .btn{margin-bottom:8px}
.help-n{text-align:center;color:var(--body);font-size:14.5px;margin:4px 0 0!important}
.h2-top{margin-top:0}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
/* на главной шесть статей — два полных ряда по три */
@media (min-width:961px){ #stati .rel-grid{grid-template-columns:repeat(3,1fr)} }
.rel{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:22px 24px}
.rel-k{--c:var(--c-xs);display:inline-block;padding:4px 10px;background:var(--acc-wash);font-size:var(--fs-cap);font-weight:var(--fw-cap);letter-spacing:var(--ls-cap);text-transform:uppercase;color:var(--acc-ink)}
.rel b{color:var(--ink);font-size:18px;line-height:1.3}
.rel-d{font-size:var(--fs-text);color:var(--body);flex:1}
.svc-mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-bottom:8px}
.svc-mini a{--c:var(--c-s);display:flex;align-items:center;gap:12px;padding:14px 16px;text-decoration:none;color:var(--ink)!important;font-weight:700;font-size:15.5px}
.svc-mini svg{color:var(--acc-ink);flex-shrink:0}
.geo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.geo-card{display:flex;flex-direction:column;gap:6px;padding:22px 24px}
.geo-ic{--c:var(--c-xs);width:44px;height:44px;background:var(--black);color:var(--acc-hi);display:flex;align-items:center;justify-content:center;margin-bottom:6px;transition:background-color .25s,color .25s}
.geo-card b{color:var(--ink);font-size:19px;font-weight:900;text-transform:uppercase;letter-spacing:.01em}
.geo-card>span:not(.geo-ic){font-size:15.5px;color:var(--body)}
.geo-card small{font-size:14px;color:var(--muted)}

/* ---------- калькулятор ---------- */
.calc-tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.calc-tab{--c:var(--c-xs);min-height:44px;padding:10px 18px;border:0;background:var(--black);font-weight:800;font-size:15px;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;color:#fff}
.calc-tab:hover{background:var(--plate)}
.calc-tab.on{background:var(--acc-hi);color:var(--black)}
.calc{padding:26px;margin-bottom:28px}
.calc-lead{margin-bottom:16px}
.calc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.calc select,.calc input{--c:var(--c-xs);--bd:var(--field);width:100%;padding:12px 13px;border:0;border-radius:0;background-color:#fff;box-shadow:inset 0 0 0 var(--bw) var(--bd);font:inherit;font-size:16px;color:var(--ink)}
.calc select:focus,.calc input:focus{outline:0;--bd:var(--acc-ink);background-color:#FFF8F4}
.calc-row label{text-transform:none;letter-spacing:0;font-size:15px;font-weight:700;color:var(--body)}
.calc-in{display:flex;align-items:center;gap:8px}
.calc-in input{max-width:110px}
.calc-in span{color:var(--muted);font-size:15px}
/* результат — как табличка техданных */
.calc-out{--c:var(--c-m);display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0 12px;background:var(--grip),var(--black);box-shadow:inset 0 4px 0 var(--acc-hi);padding:20px 18px 16px}
.calc-out-1{grid-template-columns:1fr}
.calc-out small{display:block;color:var(--menu);font-size:var(--fs-cap);font-weight:var(--fw-cap);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.calc-out b{display:block;color:var(--acc-hi);font-size:clamp(20px,2.4vw,26px);font-weight:900;letter-spacing:-.01em;font-variant-numeric:var(--num)}
/* цифры результата — прямо, в том числе разбитые по словам (.skw из скрипта) */
.calc-out b .skw{transform:none}
.calc-msg{font-size:15px;color:var(--ink);min-height:1px;margin-bottom:8px}
.calc-note{font-size:var(--fs-small);color:var(--body)}
@media (max-width:640px){ .calc{padding:18px} .calc-out{grid-template-columns:1fr 1fr} .calc-out-1{grid-template-columns:1fr} }
@media (max-width:560px){ .calc-tabs{display:grid;grid-template-columns:1fr 1fr} .calc-tab{padding:10px 8px;line-height:1.25} }
/* «Коротко» — табличка с оранжевой шапкой */
.art-short{--c:var(--c-m);background:var(--black);margin:0 0 24px;padding:0}
.art-short-h{background:var(--ribs),var(--acc-hi);color:var(--black);font-size:var(--fs-cap);font-weight:800;letter-spacing:var(--ls-cap);text-transform:uppercase;padding:9px 22px 9px 24px;margin:0!important}
.art-short p:not(.art-short-h){color:#fff;margin:0;padding:16px 24px 20px;font-size:17px;line-height:1.6}
.send{--c:var(--c-m);background:var(--alt);padding:22px 24px}
.send .ticks{margin-bottom:16px}
.send p{display:flex;flex-wrap:wrap;gap:10px;margin:0!important}
.send .btn-line{color:var(--ink)}
.about-list{display:grid;gap:10px}
.about-list a{display:block;padding:16px 20px;text-decoration:none}
.about-list b{display:block;color:var(--ink);margin-bottom:2px}
.about-list span{font-size:15.5px;color:var(--body)}

/* ---------- главная: маршруты, ряды ссылок, города ---------- */
.routes{position:relative;z-index:3;background:var(--grip),var(--black);padding:0 0 clamp(40px,5vw,64px);margin-top:-1px}
/* маршруты наезжают на низ первого экрана */
.routes-in{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:-96px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}
.route{--c:var(--c-l);position:relative;display:flex;flex-direction:column;gap:8px;padding:24px 24px 22px;background:#fff;text-decoration:none;transition:transform .25s var(--ease),background-color .25s}
.route:hover{transform:translateY(-6px)}
.route-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.route-ic{--c:var(--c-xs);width:48px;height:48px;flex-shrink:0;background:var(--black);color:var(--acc-hi);display:flex;align-items:center;justify-content:center}
.route-n{font-size:14px;font-weight:800;letter-spacing:.02em;color:var(--body);font-variant-numeric:var(--num)}
.route b{color:var(--ink);font-size:17px;font-weight:900;text-transform:uppercase;letter-spacing:.01em;line-height:1.2}
.route-d{color:var(--body);font-size:var(--fs-text);line-height:1.5;flex:1}
.route em{font-style:normal;color:var(--acc-ink);font-weight:800;font-size:14.5px;letter-spacing:.04em;text-transform:uppercase;margin-top:8px}
.route-hot{background:var(--ribs),var(--acc-hi)}
.route-hot .route-d,.route-hot em{color:var(--black)}
.route:not(.route-hot):hover{background:var(--paper)}
/* «Срочно»: красная точка с белым ободком и белая подпись на чёрной плашке — от оранжевого отличается и цветом, и формой */
.route-urgent{--c:var(--c-xs);display:inline-flex;align-items:center;gap:8px;padding:5px 10px;background:var(--black);color:#fff;font-size:var(--fs-cap);font-weight:800;letter-spacing:var(--ls-cap);text-transform:uppercase}
.route-urgent i{width:10px;height:10px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 2px #fff}
@media (max-width:980px){ .routes-in{grid-template-columns:1fr 1fr} }
@media (max-width:760px){ .routes-in{margin-top:-40px} }
@media (max-width:520px){
  .routes-in{grid-template-columns:1fr;gap:10px}
  /* на телефоне иконка уходит колонкой влево — карточка вдвое ниже */
  .route{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:4px;padding:16px 16px 14px}
  .route-top{display:contents}
  .route-ic{grid-row:1/span 3;width:44px;height:44px}
  .route-n,.route-urgent{position:absolute;top:14px;right:16px}
  .route b{padding-right:34px}
  .route-hot b{padding-right:96px}
  .route em{margin-top:4px}
}
.tools-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:28px}
.city-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
/* раздел целиком оранжевый («Где работаю»): --acc-hi, чёрный текст (8,0 : 1), чёрные чипы с оранжевой меткой */
.sec-acc{background:var(--ribs),var(--acc-hi)}
.sec-acc .kicker{background:var(--black);color:var(--acc-hi)}
.sec-acc .sec-head h2,.sec-acc .sec-head p{color:var(--black)}
.sec-acc .city-chips{gap:10px}
.sec-acc .city-chips a{min-height:50px;padding:10px 18px;background:var(--black);color:#fff;box-shadow:none;font-size:15px;font-weight:700}
.sec-acc .city-chips svg{color:var(--acc-hi)}
.sec-acc .city-chips a:hover{background:var(--plate);color:#fff}
.sec-acc .city-chips a:hover svg{color:var(--acc-hi)}

.calc-more{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-bottom:22px}
.calc-more a{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;text-decoration:none}
.calc-more svg{color:var(--acc-ink);flex-shrink:0;margin-top:2px}
.calc-more b{display:block;color:var(--ink);font-size:15.5px}
.calc-more small{color:var(--muted);font-size:14px}

/* ---------- контур по фаске ----------
   Рамка из внутренней тени срезается clip-path на фасках, и угол остаётся «открытым».
   Диагональ рамки дорисована фоном в двух срезанных углах — тем же цветом (--bd) и толщиной (--bw). */
.card,.lead,.field input,.field textarea,.calc select,.calc input,.btn-ghost,.btn-line,.btn-line-d,.svc-links a,.tools-row a,.city-chips a,.tags li{
  --bw:1px;
  background-image:linear-gradient(135deg,transparent calc(var(--c) * .7071 - .5px),var(--bd,transparent) 0 calc(var(--c) * .7071 + var(--bw)),transparent 0),
                   linear-gradient(315deg,transparent calc(var(--c) * .7071 - .5px),var(--bd,transparent) 0 calc(var(--c) * .7071 + var(--bw)),transparent 0);
  background-size:50% 50%;background-position:0 0,100% 100%;background-repeat:no-repeat}
.btn-ghost,.btn-line,.btn-line-d{--bw:2px}
a.card:hover,.field input:focus,.field textarea:focus,.calc select:focus,.calc input:focus,.field.bad input,.field.bad textarea{--bw:2px}

/* ---- Светлая шапка ----
   Основной логотип — светлый вариант (оранжевая «М», чёрные буквы) на белой шапке.
   На главной, пока шапка прозрачная над тёмным первым экраном, — тёмный вариант (белые буквы).
   Выпадающие панели и мобильное меню остаются тёмными: ссылки в них светлые. */
.nav::before{background:rgba(255,255,255,.97)}
.brand .lg-l,.brand .lg-d{display:block}
.brand .lg-d{display:none}
.nav-home:not([data-scrolled]) .brand .lg-l{display:none}
.nav-home:not([data-scrolled]) .brand .lg-d{display:block}
.nav-max{background:var(--alt);color:var(--ink)}
.nav-max:hover{background:var(--steel)}
.burger{background:var(--alt)}
.burger i,.burger i::before,.burger i::after{background:var(--ink)}
.burger[aria-expanded="true"] i{background:transparent}
.nav-home:not([data-scrolled]) .nav-max{background:var(--plate);color:#fff}
.nav-home:not([data-scrolled]) .nav-max:hover{background:var(--edge)}
.nav-home:not([data-scrolled]) .burger{background:var(--plate)}
.nav-home:not([data-scrolled]) .burger i,.nav-home:not([data-scrolled]) .burger i::before,.nav-home:not([data-scrolled]) .burger i::after{background:#fff}
.nav-home:not([data-scrolled]) .burger[aria-expanded="true"] i{background:transparent}
@media (min-width:1181px){
  .nav .menu>a.nav-a,.nav .dd-btn{color:var(--ink)}
  .nav .menu>a.nav-a:hover,.nav .dd-btn:hover,.nav .dd-btn[aria-expanded="true"]{color:var(--acc-ink)}
  .nav .menu>a.nav-a.cur,.nav .dd-btn.cur{color:var(--ink)}
  .nav-home:not([data-scrolled]) .menu>a.nav-a,.nav-home:not([data-scrolled]) .dd-btn{color:var(--menu)}
  .nav-home:not([data-scrolled]) .menu>a.nav-a:hover,.nav-home:not([data-scrolled]) .dd-btn:hover,.nav-home:not([data-scrolled]) .dd-btn[aria-expanded="true"]{color:var(--acc-hi)}
  .nav-home:not([data-scrolled]) .menu>a.nav-a.cur,.nav-home:not([data-scrolled]) .dd-btn.cur{color:#fff}
}
/* фокус на белой шапке — тёмный оранжевый; над тёмным первым экраном главной — светлая */
.nav .brand:focus-visible,.nav .nav-phone:focus-visible{outline-color:var(--acc-ink)}
.nav-home:not([data-scrolled]) .brand:focus-visible,.nav-home:not([data-scrolled]) .nav-phone:focus-visible{outline-color:var(--acc-hi)}
@media (min-width:1181px){
  .nav .menu>a.nav-a:focus-visible,.nav .dd-btn:focus-visible{outline-color:var(--acc-ink)}
  .nav-home:not([data-scrolled]) .menu>a.nav-a:focus-visible,.nav-home:not([data-scrolled]) .dd-btn:focus-visible{outline-color:var(--acc-hi)}
}