/*
Theme Name: RIO Затворы
Theme URI: https://riozatvor.ru/
Author: Wolf Corporation
Description: Тема для сайта производителя щитовых и гидротехнических затворов RIO. Без Bootstrap и jQuery, нативные Grid и Flexbox, vanilla JS.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: riozatvor
*/

/* ===== 1. ПЕРЕМЕННЫЕ ===== */
:root{--brand:#0d4a6b;--brand-dark:#0a3a54;--brand-deep:#072e44;--accent:#f47b20;--accent-dark:#d9650f;--ink:#12212b;--body:#3d4b56;--muted:#6b7a86;--line:#dde5ea;--bg:#fff;--bg-soft:#f4f7f9;--bg-deep:#0b1f2c;--ok:#2e9e5b;--radius:10px;--radius-lg:16px;--shadow:0 2px 8px rgba(13,74,107,.07);--shadow-lg:0 12px 32px rgba(13,74,107,.13);--wrap:1340px;--ease:cubic-bezier(.4,0,.2,1);}

/* ===== 2. СБРОС И БАЗА ===== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:16px;line-height:1.65;color:var(--body);background:var(--bg);-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;display:block;}
svg{display:block;}
a{color:var(--brand);text-decoration:none;transition:color .18s var(--ease);}
a:hover{color:var(--accent);}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:0;padding:0;}
table{border-collapse:collapse;width:100%;}
ul,ol{padding-left:1.25em;}
figure{margin:0;}

/* ===== 3. ТИПОГРАФИКА ===== */
h1,h2,h3,h4,h5,h6{margin:0 0 .6em;color:var(--ink);font-weight:700;line-height:1.22;letter-spacing:-.02em;}
h1{font-size:clamp(28px,4.2vw,44px);}
h2{font-size:clamp(24px,3.2vw,34px);}
h3{font-size:clamp(19px,2.2vw,23px);}
h4{font-size:18px;}
p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}
.lead{font-size:clamp(17px,2vw,20px);line-height:1.6;color:var(--body);}
small,.small{font-size:14px;}
strong,b{font-weight:650;color:var(--ink);}
hr{border:0;border-top:1px solid var(--line);margin:40px 0;}

/* ===== 4. СЕТКА ===== */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px;}
.section{padding:clamp(48px,7vw,88px) 0;}
.section--soft{background:var(--bg-soft);}
.section--deep{background:var(--bg-deep);color:#c9d6de;}
.section--deep h2,.section--deep h3{color:#fff;}
.grid{display:grid;gap:24px;}
/* auto-fill вместо auto-fit: одна карточка сохраняет нормальную ширину,
   а не растягивается на всю сетку. Пустые дорожки не схлопываются — это и нужно. */
.grid--pair{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(min(100%,285px),1fr));}
.grid-4{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);align-items:center;}
@media(max-width:820px){.grid--pair{grid-template-columns:1fr;}}
@media(max-width:860px){.split{grid-template-columns:1fr;}}

/* ===== 5. ЗАГОЛОВКИ СЕКЦИЙ ===== */
.sec-head{max-width:760px;margin:0 0 clamp(28px,4vw,44px);}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center;}
.sec-head p{color:var(--muted);font-size:17px;margin:0;}
.eyebrow{display:inline-block;font-size:13px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;}
.section--deep .sec-head p{color:#9fb4c2;}

/* ===== 6. КНОПКИ ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 28px;border-radius:var(--radius);font-weight:600;font-size:15px;line-height:1.2;text-align:center;border:2px solid transparent;transition:all .2s var(--ease);white-space:nowrap;max-width:100%;}
@media(max-width:820px){.btn{white-space:normal;}}
.btn--primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn--primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(244,123,32,.32);}
.btn--brand{background:var(--brand);color:#fff;border-color:var(--brand);}
.btn--brand:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(13,74,107,.28);}
.btn--ghost{background:transparent;color:var(--brand);border-color:var(--line);}
.btn--ghost:hover{border-color:var(--brand);color:var(--brand);background:var(--bg-soft);transform:translateY(-2px);}
.btn--light{background:#fff;color:var(--brand);border-color:#fff;}
.btn--light:hover{background:transparent;color:#fff;border-color:#fff;transform:translateY(-2px);}
.btn--lg{padding:17px 36px;font-size:16px;}
.btn--block{width:100%;}

/* ===== 7. ШАПКА ===== */
.hdr{position:relative;z-index:90;background:#fff;border-bottom:1px solid var(--line);}
.hdr__top{background:var(--brand-deep);color:#a8c0cf;font-size:13.5px;}
.hdr__top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:42px;flex-wrap:wrap;}
.hdr__top a{color:#cfe0ea;}
.hdr__top a:hover{color:#fff;}
.hdr__adv{display:flex;gap:26px;list-style:none;margin:0;padding:0;}
.hdr__adv li{display:flex;align-items:center;gap:7px;}
.hdr__adv svg{width:15px;height:15px;flex:0 0 15px;color:var(--accent);}
.hdr__info{display:flex;align-items:center;gap:22px;}
.hdr__info>span,.hdr__info>a{display:flex;align-items:center;gap:7px;}
.hdr__info svg{width:15px;height:15px;flex:0 0 15px;opacity:.7;}
.hdr__bar>.wrap{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px);padding:14px 20px;}
.hdr__logo{flex:0 0 auto;}
.hdr__actions{flex:0 0 auto;}
.hdr__actions{margin-left:auto;display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);}
.hdr__cat{display:flex;align-items:center;gap:7px;font-weight:600;color:#ffd0a8;white-space:nowrap;}
.hdr__cat:hover{color:#fff;}
.hdr__cat svg{flex:0 0 15px;color:var(--accent);}
.hdr__phone{display:flex;flex-direction:column;line-height:1.25;white-space:nowrap;}
.hdr__phone a{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.01em;}
.hdr__phone a:hover{color:var(--accent);}
.hdr__phone span{font-size:12.5px;color:var(--muted);}
.hdr__btn{padding:12px 20px;font-size:14.5px;}
.hdr__burger{display:none;width:46px;height:46px;align-items:center;justify-content:center;border-radius:9px;border:1px solid var(--line);flex:0 0 46px;}
.hdr__burger span{display:block;width:20px;height:2px;background:var(--ink);position:relative;transition:.2s var(--ease);}
.hdr__burger span::before,.hdr__burger span::after{content:'';position:absolute;left:0;width:20px;height:2px;background:var(--ink);transition:.2s var(--ease);}
.hdr__burger span::before{top:-6px;}
.hdr__burger span::after{top:6px;}
.hdr__burger[aria-expanded="true"] span{background:transparent;}
.hdr__burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg);}
.hdr__burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg);}

/* ===== 8. ЛОГОТИП ===== */
.logo{display:flex;align-items:center;gap:11px;}
.logo__mark{flex:0 0 auto;}
.logo__txt{display:flex;flex-direction:column;gap:3px;}
/* Строчная «Д» в «Единство» уходит ниже базовой линии. При line-height меньше 1.15
   её хвост наезжал на подпись — отсюда собственный интерлиньяж у каждой строки. */
.logo__name{font-size:23px;font-weight:800;line-height:1.18;color:var(--brand);letter-spacing:-.03em;}
.logo__sub{font-size:10.5px;font-weight:600;line-height:1.2;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);}

/* ===== 9. НАВИГАЦИЯ ===== */
.nav{display:flex;align-items:center;flex:1 1 auto;min-width:0;}
.nav__head,.nav__cta{display:none;}
.nav__list{display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:0;gap:1px;}
.nav__list>li{position:relative;}
.nav__list>li>a{display:flex;align-items:center;gap:6px;padding:11px 12px;font-size:14.5px;font-weight:600;color:var(--ink);border-radius:8px;transition:all .18s var(--ease);white-space:nowrap;}
.nav__list>li>a:hover{color:var(--brand);background:var(--bg-soft);}
.nav__list>li.current-menu-item>a,.nav__list>li.current-menu-parent>a,.nav__list>li.current-menu-ancestor>a{color:var(--brand);background:rgba(13,74,107,.07);}
.nav__list>li.menu-item-has-children>a::after{content:'';display:inline-block;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.5;transition:transform .2s var(--ease);}
.nav__list>li.menu-item-has-children:hover>a::after{transform:translateY(1px) rotate(225deg);}
.nav__list>li.menu-item-has-children::after{content:'';position:absolute;top:100%;left:0;right:0;height:10px;}
.sub-menu{position:absolute;top:calc(100% + 6px);left:-6px;min-width:290px;max-height:min(70vh,560px);overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);list-style:none;margin:0;padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;z-index:60;}
.nav__list>li:hover>.sub-menu,.nav__list>li:focus-within>.sub-menu,.nav__list>li.is-open>.sub-menu{opacity:1;visibility:visible;transform:translateY(0);}
.sub-menu li{position:relative;}
.sub-menu a{display:block;padding:9px 13px;font-size:14.5px;line-height:1.35;border-radius:8px;color:var(--body);}
.sub-menu a:hover{background:var(--bg-soft);color:var(--brand);}
.sub-menu .current-menu-item>a{background:rgba(13,74,107,.07);color:var(--brand);font-weight:600;}
.sub-menu .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;min-width:0;padding:0 0 0 12px;margin:2px 0 6px;border-left:2px solid var(--line);max-height:none;}
.sub-menu .sub-menu a{font-size:13.5px;padding:6px 11px;color:var(--muted);}

/* ===== 10. ХЛЕБНЫЕ КРОШКИ ===== */
.crumbs{padding:14px 0;font-size:13.5px;color:var(--muted);border-bottom:1px solid var(--line);}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;}
.crumbs li:not(:last-child)::after{content:'/';margin-left:8px;opacity:.45;}
.crumbs a{color:var(--muted);}
.crumbs a:hover{color:var(--brand);}

/* ===== 11. ГЛАВНЫЙ ЭКРАН ===== */
.hero{position:relative;isolation:isolate;background:var(--brand-deep);color:#dce8ef;overflow:hidden;}
.hero__bg{position:absolute;inset:0;z-index:-2;}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%;}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(7,46,68,.96) 0%,rgba(7,46,68,.88) 38%,rgba(9,58,84,.62) 68%,rgba(9,58,84,.42) 100%);}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 88% 18%,rgba(244,123,32,.22),transparent 52%);pointer-events:none;}
.hero__inner{position:relative;z-index:1;padding:clamp(56px,8vw,104px) 0 clamp(34px,4vw,52px);}
.hero__body{max-width:660px;}
.hero .eyebrow{color:#ffb877;}
.hero h1{color:#fff;margin-bottom:20px;text-shadow:0 2px 24px rgba(0,0,0,.32);}
.hero__lead{font-size:clamp(16.5px,2vw,19.5px);line-height:1.6;color:#cfe0ea;margin-bottom:30px;text-shadow:0 1px 14px rgba(0,0,0,.3);}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;}
.hero__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:2px;margin-top:clamp(38px,5vw,60px);background:rgba(255,255,255,.14);border-radius:var(--radius-lg);overflow:hidden;}
.hero__fact{background:rgba(7,32,48,.72);backdrop-filter:blur(6px);padding:20px 22px;}
.hero__fact b{display:block;font-size:clamp(22px,2.6vw,29px);font-weight:800;color:#fff;line-height:1.12;letter-spacing:-.02em;margin-bottom:4px;}
.hero__fact span{font-size:13.5px;line-height:1.4;color:#a9c2d2;display:block;}
@media(max-width:640px){.hero__bg img{object-position:center 38%;}.hero__cta .btn{width:100%;}.hero__fact{padding:16px 18px;}}

/* ===== 12. КАРТОЧКИ КАТЕГОРИЙ ===== */
.cat-card,.prod-card,.mnt{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:all .24s var(--ease);height:100%;}
.cat-card:hover{border-color:var(--brand);box-shadow:var(--shadow-lg);transform:translateY(-4px);}
.cat-card__img{aspect-ratio:4/3;background:var(--bg-soft);overflow:hidden;}
.cat-card__img img,.mfg-shot__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.cat-card:hover .cat-card__img img{transform:scale(1.05);}
.cat-card__body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1;}
.cat-card__body h3{font-size:18px;margin-bottom:8px;}
.cat-card__body h3 a{color:var(--ink);}
.cat-card:hover .cat-card__body h3 a{color:var(--brand);}
.cat-card__body p{font-size:14.5px;color:var(--muted);margin-bottom:14px;}
.cat-card__more{margin-top:auto;font-size:14.5px;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:7px;}
.cat-card__more::after{content:'→';transition:transform .2s var(--ease);}
.cat-card:hover .cat-card__more::after{transform:translateX(4px);}
.cat-card{position:relative;}
.cat-card__body h3 a::after,.prod-card__body h3 a::after{content:'';position:absolute;inset:0;border-radius:var(--radius-lg);}

/* ===== 13. КАРТОЧКА ТОВАРА В СПИСКЕ ===== */
.prod-card:hover{border-color:var(--brand);box-shadow:var(--shadow-lg);transform:translateY(-4px);}
.prod-card__img{aspect-ratio:1/1;background:var(--bg-soft);padding:16px;display:flex;align-items:center;justify-content:center;}
.prod-card__img img{max-height:100%;width:auto;object-fit:contain;}
.prod-card__body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1;}
.prod-card__art{font-size:12.5px;color:var(--muted);margin-bottom:6px;letter-spacing:.02em;}
.prod-card__body h3{font-size:16.5px;line-height:1.3;margin-bottom:10px;}
.prod-card__body h3 a{color:var(--ink);}
.prod-card:hover h3 a{color:var(--brand);}
.prod-card__meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;}
.prod-card__price{font-size:15px;font-weight:700;color:var(--ink);}
.prod-card__price small{display:block;font-size:12px;font-weight:400;color:var(--muted);}

/* ===== 14. СТРАНИЦА ТОВАРА ===== */
/* Галерее ровно столько ширины, сколько есть у исходника (450 px + поля), лишнее
   отдано характеристикам: иначе картинку пришлось бы растягивать с потерей резкости. */
.prod{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,52px);align-items:start;}
@media(max-width:900px){.prod{grid-template-columns:1fr;}}
/* Рендеры товаров квадратные (450×450), поэтому и рамка квадратная: в прежнем
   боксе 4:3 картинка упиралась в высоту и по бокам оставались пустые поля. */
.gal__main{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-soft);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:clamp(14px,1.8vw,22px);}
.gal__main img{width:100%;height:100%;object-fit:contain;}
.gal__thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.gal__thumb{width:78px;height:78px;border:2px solid var(--line);border-radius:9px;overflow:hidden;background:var(--bg-soft);padding:5px;transition:border-color .2s var(--ease);}
.gal__thumb:hover,.gal__thumb[aria-current="true"]{border-color:var(--accent);}
.gal__thumb img{width:100%;height:100%;object-fit:contain;}
.specs{list-style:none;margin:0 0 24px;padding:0;border-top:1px solid var(--line);}
.specs li{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;}
.specs dt,.specs .k{color:var(--muted);}
.specs .v{font-weight:600;color:var(--ink);text-align:right;}
.prod__price{background:var(--bg-soft);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius);padding:20px 22px;margin-bottom:22px;}
.prod__price b{display:block;font-size:26px;font-weight:800;color:var(--ink);line-height:1.2;letter-spacing:-.02em;}
.prod__price span{font-size:14px;color:var(--muted);}
.prod__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px;}

/* ===== 15. ТАБЛИЦЫ ===== */
.tbl-wrap{overflow-x:auto;margin:0 0 26px;border:1px solid var(--line);border-radius:var(--radius);}
.tbl{font-size:14.5px;}
.tbl th{background:var(--bg-soft);color:var(--ink);font-weight:650;text-align:left;padding:13px 16px;border-bottom:2px solid var(--line);white-space:nowrap;}
.tbl td{padding:12px 16px;border-bottom:1px solid var(--line);}
.tbl tr:last-child td{border-bottom:0;}
.tbl tbody tr:hover{background:var(--bg-soft);}
.section--deep .tbl-wrap{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.15);}.section--deep .tbl th{background:rgba(255,255,255,.07);color:#fff;border-bottom-color:rgba(255,255,255,.2);}.section--deep .tbl td{border-bottom-color:rgba(255,255,255,.1);}.section--deep .tbl tbody tr:hover{background:rgba(255,255,255,.05);}

/* ===== 16. ПРЕИМУЩЕСТВА ===== */
.feat{display:flex;gap:16px;align-items:flex-start;}
.feat__ico{flex:0 0 46px;width:46px;height:46px;border-radius:11px;background:rgba(13,74,107,.08);color:var(--brand);display:flex;align-items:center;justify-content:center;}
.feat__ico svg{width:22px;height:22px;}
.section--deep .feat__ico{background:rgba(255,255,255,.1);color:var(--accent);}
.feat h3{font-size:17px;margin-bottom:6px;}
.feat p{font-size:14.5px;color:var(--muted);margin:0;}
.section--deep .feat p{color:#9fb4c2;}

/* ===== 17. ЭТАПЫ РАБОТЫ ===== */
.steps{counter-reset:s;display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.step{position:relative;padding:26px 22px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);counter-increment:s;transition:all .24s var(--ease);}
.step:hover{border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-3px);}
.step::before{content:counter(s);position:absolute;top:-15px;left:22px;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(244,123,32,.3);}
.step h3{font-size:16.5px;margin:8px 0 7px;}
.step p{font-size:14.5px;color:var(--muted);margin:0;}

/* ===== 18. FAQ ===== */
.faq{border-top:1px solid var(--line);}
.faq__item{border-bottom:1px solid var(--line);}
.faq__q{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;width:100%;padding:19px 0;text-align:left;font-size:17px;font-weight:640;color:var(--ink);line-height:1.4;}
.faq__q:hover{color:var(--brand);}
.faq__q::after{content:'';flex:0 0 11px;width:11px;height:11px;margin-top:7px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .25s var(--ease);}
.faq__q[aria-expanded="true"]::after{transform:rotate(-135deg);}
.faq__a{max-height:0;overflow:hidden;transition:max-height .32s var(--ease);}
.faq__a>div{padding:0 0 20px;color:var(--body);font-size:15.5px;max-width:840px;}
.faq__item>h3{margin:0;font-size:inherit;font-weight:inherit;letter-spacing:0;}

/* ===== 19. ФОРМЫ ===== */
.form{display:grid;gap:14px;}
.form__row{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.field label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:6px;}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;font-size:15px;transition:border-color .18s var(--ease),box-shadow .18s var(--ease);}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(13,74,107,.11);}
.field textarea{min-height:110px;resize:vertical;}
.field--err input,.field--err select,.field--err textarea{border-color:#d64545;}
.field__err{display:none;font-size:13px;color:#d64545;margin-top:5px;}
.field--err .field__err{display:block;}
.form__note{font-size:12.5px;color:var(--muted);line-height:1.5;}
.form__msg{padding:14px 18px;border-radius:var(--radius);font-size:15px;display:none;}
.form__msg--ok{display:block;background:rgba(46,158,91,.1);border:1px solid rgba(46,158,91,.3);color:#1e7040;}
.form__msg--err{display:block;background:rgba(214,69,69,.08);border:1px solid rgba(214,69,69,.28);color:#a83232;}
.form-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(22px,3vw,34px);box-shadow:var(--shadow);}

/* ===== 20. CTA-ПОЛОСА ===== */
.cta{background:linear-gradient(120deg,var(--brand) 0%,var(--brand-deep) 100%);color:#fff;border-radius:var(--radius-lg);padding:clamp(30px,4.5vw,52px);display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;}
@media(max-width:760px){.cta{grid-template-columns:1fr;}}
.cta h2{color:#fff;margin-bottom:8px;}
.cta p{color:#bcd2e0;margin:0;}
.cta p a{color:#fff;text-decoration:underline;text-underline-offset:3px;}.cta p a:hover{color:var(--accent);}

/* ===== 21. ДОКУМЕНТЫ ===== */
.docs{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));list-style:none;margin:0;padding:0;}
.doc{display:flex;align-items:center;gap:13px;padding:15px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);transition:all .2s var(--ease);}
.doc:hover{border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-2px);}
.doc__ico{flex:0 0 34px;width:34px;height:34px;border-radius:8px;background:rgba(244,123,32,.12);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;}
.doc b{display:block;font-size:15px;color:var(--ink);font-weight:600;}
.doc span{font-size:12.5px;color:var(--muted);}

/* ===== 22. ПОДВАЛ ===== */
.ftr{background:var(--bg-deep);color:#95a9b7;font-size:14.5px;padding-top:clamp(40px,5vw,60px);}
.ftr a{color:#b9cbd6;}
.ftr a:hover{color:var(--accent);}
.ftr__cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,40px);padding-bottom:40px;}
@media(max-width:900px){.ftr__cols{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.ftr__cols{grid-template-columns:1fr;}}
.ftr h4{color:#fff;font-size:15px;margin-bottom:16px;letter-spacing:.01em;}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.ftr .logo__name{color:#fff;}
.ftr .logo__sub{color:#7d94a3;}
.ftr__phone{display:block;font-size:21px;font-weight:700;color:#fff;margin-bottom:4px;}
.ftr__phone:hover{color:var(--accent);}
.ftr__bottom{border-top:1px solid rgba(255,255,255,.09);padding:22px 0;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:#6f8797;}

/* ===== 23. КОНТЕНТ СТРАНИЦ ===== */
.prose{max-width:840px;}
.prose>*:first-child{margin-top:0;}
.prose h2{margin-top:1.7em;}
.prose h3{margin-top:1.4em;}
.prose ul,.prose ol{margin:0 0 1.2em;}
.prose li{margin-bottom:.45em;}
.prose img{border-radius:var(--radius);margin:1.5em 0;}
.prose blockquote{margin:1.5em 0;padding:16px 22px;border-left:3px solid var(--accent);background:var(--bg-soft);border-radius:0 var(--radius) var(--radius) 0;}
.prose blockquote p:last-child{margin-bottom:0;}

/* ===== 24. САЙДБАР КАТАЛОГА ===== */
.layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:clamp(24px,3.5vw,44px);align-items:start;}
@media(max-width:940px){.layout{grid-template-columns:1fr;}}
.side{position:sticky;top:24px;}
.side__box{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;margin-bottom:20px;}
.side__box h3{font-size:16px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line);}
.side__box h2{font-size:16px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line);letter-spacing:-.01em;}
/* Колонка 270 px: «Заполнить опросный лист» с общими отступами кнопки ломался на две строки. */
.side__box .btn{font-size:14.5px;padding-left:16px;padding-right:16px;}
.side__list{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.side__list a{display:block;padding:9px 12px;border-radius:8px;font-size:14.5px;color:var(--body);}
.side__list a:hover{background:var(--bg-soft);color:var(--brand);}
.side__list .is-active>a{background:rgba(13,74,107,.07);color:var(--brand);font-weight:600;}

/* ===== 25. СЛУЖЕБНОЕ ===== */
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;padding:12px 20px;background:var(--brand);color:#fff;border-radius:0 0 var(--radius) 0;}
.skip-link:focus{left:0;color:#fff;}
.sr-only,.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.mt-0{margin-top:0;}.mb-0{margin-bottom:0;}.mt-16{margin-top:16px;}.mt-24{margin-top:24px;}.mt-32{margin-top:32px;}
.ph{display:block;width:100%;height:100%;}.ph svg{width:100%;height:100%;}
[id]{scroll-margin-top:96px;}
.text-center{text-align:center;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ===== 26. МОБИЛЬНАЯ ВЕРСИЯ ===== */
@media(max-width:1180px){
  .nav__list>li>a{padding:11px 10px;font-size:14px;}
}
@media(max-width:1024px){
  .hdr__burger{display:flex;}
  .hdr__adv li:nth-child(n+3){display:none;}
  .nav{position:fixed;inset:0 0 0 auto;width:min(370px,88vw);background:#fff;box-shadow:-8px 0 34px rgba(0,0,0,.18);transform:translateX(100%);transition:transform .28s var(--ease);overflow-y:auto;overscroll-behavior:contain;z-index:120;display:block;padding:0;}
  .nav.is-open{transform:translateX(0);}
  .nav__head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line);font-weight:700;color:var(--ink);position:sticky;top:0;background:#fff;z-index:2;}
  .nav__close{font-size:30px;line-height:1;color:var(--muted);width:40px;height:40px;}
  .nav__close:hover{color:var(--ink);}
  .nav__list{flex-direction:column;gap:0;padding:8px 12px;}
  .nav__list>li{border-bottom:1px solid var(--line);}
  .nav__list>li:last-child{border-bottom:0;}
  .nav__list>li>a{padding:14px 10px;border-radius:0;justify-content:space-between;font-size:15.5px;white-space:normal;}
  .nav__list>li>a:hover{background:transparent;}
  .nav__list>li.menu-item-has-children>a::after{width:8px;height:8px;opacity:.6;}
  .nav__list>li.is-open>a::after{transform:translateY(2px) rotate(225deg);}
  .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;min-width:0;max-height:0;overflow:hidden;padding:0 0 0 12px;transition:max-height .3s var(--ease),padding .3s var(--ease);}
  .nav__list>li.is-open>.sub-menu{max-height:2200px;padding:0 0 10px 12px;}
  .nav__cta{display:grid;gap:10px;padding:16px 20px 28px;border-top:1px solid var(--line);margin-top:8px;}
  .nav-overlay{position:fixed;inset:0;background:rgba(11,31,44,.55);opacity:0;visibility:hidden;transition:.25s var(--ease);z-index:110;}
  .nav-overlay.is-on{opacity:1;visibility:visible;}
  body.nav-lock{overflow:hidden;}
}
@media(max-width:860px){
  .hdr__top .wrap{min-height:0;padding-top:8px;padding-bottom:8px;}
  .hdr__adv{display:none;}
  .hdr__cat{display:none;}
  .hdr__info{gap:16px;font-size:13px;}
  .hdr__btn{display:none;}
  .layout{grid-template-columns:1fr;}
  .side{position:static;}
}
@media(max-width:640px){
  .hdr__phone span{display:none;}
  .hdr__cat{display:none;}
  .hdr__phone a{font-size:17px;}
  .btn{padding:13px 22px;}
  .hero__cta .btn{width:100%;}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}

/* ===== 27. ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ ===== */
/* Прячем только когда JS точно работает: класс js ставит инлайн-скрипт в шапке.
   Без JS и при отключённой анимации контент виден сразу — иначе страница пустая. */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease);}
html.js .reveal.is-in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;}}

/* ===== 28. КАРКАС: ШАПКА, ПОДВАЛ, ПОИСК ===== */
.hdr__info{display:flex;align-items:center;gap:clamp(12px,2vw,24px);flex-wrap:wrap;}
.hdr__info>*{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.hdr__info svg{width:15px;height:15px;flex:0 0 15px;opacity:.7;}
.logo img{max-height:52px;width:auto;}
.nav__cta{display:none;}
.gal__main img{transition:opacity .25s var(--ease);}
:target{scroll-margin-top:120px;}
.ftr .logo{margin-bottom:18px;}
.ftr .logo__mark{--brand:#e4eef4;}
.ftr__list li{display:flex;align-items:flex-start;gap:10px;}
.ftr__list svg{width:16px;height:16px;flex:0 0 16px;margin-top:3px;color:var(--accent);}
.ftr .ftr__soc{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.ftr__soc a{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border:1px solid rgba(255,255,255,.14);border-radius:999px;font-size:13px;transition:border-color .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease);}
.ftr__soc a:hover{border-color:var(--accent);background:rgba(244,123,32,.12);color:#fff;}
.ftr__bottom ul{display:flex;flex-wrap:wrap;gap:6px 22px;}
.search-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;}

@media(max-width:980px){.nav>.wrap{padding:0;}.nav .hdr__burger{position:absolute;top:14px;right:14px;}.nav__cta{display:grid;gap:10px;margin-top:24px;}}
@media(max-width:480px){.search-form{grid-template-columns:1fr;}}

/* ===== 29. КАТАЛОГ: КАРТОЧКИ, ДЕРЕВО ТИПОВ, ТАБЛИЦА, ПАГИНАЦИЯ ===== */
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
@media(max-width:560px){.btn-row .btn{width:100%;}}
.prod-card{position:relative;}
.prod-card__body h3+p{font-size:14.5px;color:var(--muted);margin-bottom:14px;}
.prod-card__meta svg{flex:0 0 auto;color:var(--muted);transition:transform .22s var(--ease),color .22s var(--ease);}
.prod-card:hover .prod-card__meta svg{color:var(--accent);transform:translateX(4px);}
.tbl-wrap{background:#fff;}
.tbl th[scope="row"]{background:transparent;font-weight:600;white-space:normal;min-width:210px;border-bottom:1px solid var(--line);}
.tbl tr:last-child th[scope="row"]{border-bottom:0;}
.side__list a{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.side__list a span{flex:0 0 auto;font-size:12px;color:var(--muted);}
.side__list ul{list-style:none;display:grid;gap:2px;margin:2px 0 6px;padding:0 0 0 12px;border-left:1px solid var(--line);}
.side__list ul a{font-size:13.5px;padding:7px 10px;}
@media(max-width:940px){.side{position:static;order:2;}}
.pagination{margin-top:clamp(28px,4vw,40px);}
.pagination .nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 13px;border:1px solid var(--line);border-radius:var(--radius);font-size:15px;font-weight:600;color:var(--body);transition:border-color .18s var(--ease),background-color .18s var(--ease),color .18s var(--ease);}
.pagination .page-numbers:hover{border-color:var(--brand);background:var(--bg-soft);color:var(--brand);}
.pagination .page-numbers.current{background:var(--brand);border-color:var(--brand);color:#fff;}
.pagination .page-numbers.dots{min-width:24px;padding:0;border-color:transparent;}

/* ===== 30. СТРАНИЦЫ И ФОРМЫ: ГРУППЫ ПОЛЕЙ, СПИСКИ-ГАЛОЧКИ, КАРТА ===== */
.form__group{margin:0;padding:0;border:0;min-width:0;}
.form__group+.form__group{margin-top:14px;padding-top:24px;border-top:1px solid var(--line);}
.form__group>legend{margin:0 0 2px;padding:0;font-size:17px;font-weight:700;line-height:1.3;color:var(--ink);}
.form__group>*+*{margin-top:14px;}
.field__hint{display:block;margin-top:6px;font-size:12.5px;line-height:1.45;color:var(--muted);}
.checks{display:grid;gap:11px;margin:0;padding:0;list-style:none;}
.checks li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.5;}
.checks svg{flex:0 0 18px;width:18px;height:18px;margin-top:3px;color:var(--ok);}
.text-center .btn-row{justify-content:center;}
html:not(.js) .faq__a{max-height:none;}
.sec-head p+p{margin-top:12px;}
.sec-head form{margin-top:18px;}
.cta p+p{margin-top:10px;}
.map{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-soft);}
.map iframe{display:block;width:100%;min-height:380px;border:0;}

/* ===== 31. КАРКАС: ПРАВКИ РЕВЬЮ (шапка, подвал, мелкие экраны) ===== */
.hdr{transition:box-shadow .22s var(--ease);}
.hdr.is-stuck{box-shadow:0 8px 26px rgba(11,31,44,.11);}
.ftr h2{color:#fff;font-size:15px;line-height:1.35;margin-bottom:16px;letter-spacing:.01em;}
.ftr__cols>div:last-child{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);padding:24px 22px;}
.ftr__cols>div:last-child .ftr__phone{font-size:23px;letter-spacing:-.01em;}
@media(max-width:900px){.ftr__cols>div:last-child{padding:22px 20px;}}
@media(max-width:980px){.nav{visibility:hidden;transition:transform .28s var(--ease),visibility .28s var(--ease);}.nav.is-open{visibility:visible;}}
@media(max-width:480px){.hdr__top{font-size:12.5px;}.hdr__bar>.wrap{gap:10px;padding:12px 16px;}.hdr__actions{gap:10px;}.hdr .logo__sub{display:none;}.hdr .logo__name{font-size:21px;}.hdr__phone a{font-size:16.5px;white-space:nowrap;}.hdr__info span:first-child{display:none;}}

/* ===== 32. КАРТОЧКА ТОВАРА И ОБЪЕКТА: СТРОКА ДОВЕРИЯ, ФОТО-КАДР, ОГЛАВЛЕНИЕ ===== */
.prod-trust{margin-top:clamp(30px,4vw,46px);padding-top:clamp(24px,3vw,34px);border-top:1px solid var(--line);}
a.eyebrow:hover{color:var(--accent-dark);text-decoration:underline;text-underline-offset:4px;}
.gal__main--photo{padding:0;}
.gal__main--photo img{width:100%;height:100%;max-height:none;object-fit:cover;}
.prod__price .obj-params{display:block;font-size:16.5px;font-weight:600;line-height:1.55;letter-spacing:0;margin-top:4px;}
.side__toc{counter-reset:toc;max-height:min(56vh,440px);overflow:auto;}
/* На телефоне боковая колонка встаёт над текстом, и оглавление из восьми пунктов
   занимало целый экран до начала чтения. Прокручиваем его внутри блока. */
@media(max-width:940px){.side__toc{max-height:236px;}}
.side__toc li{counter-increment:toc;}
.side__toc a{justify-content:flex-start;gap:9px;align-items:baseline;}
.side__toc a::before{content:counter(toc);flex:0 0 auto;font-size:12px;font-weight:700;color:var(--accent);}
.split>div>.steps{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
@media(max-width:560px){.prod-trust{gap:18px;}.gal__thumb{width:64px;height:64px;}}

/* ===== 33. КАТАЛОГ: КОЛОНКА ТИПОВ СЛЕВА ПРИ КОНТЕНТЕ ПЕРВЫМ В РАЗМЕТКЕ ===== */
/* Явная ячейка для .side: в разметке колонка идёт после каталога (H1 — первый заголовок документа), а на экране остаётся слева. */
/* В двухколоночной раскладке ширина строки уже ограничена боковой колонкой,
   поэтому общий лимит .prose в 840 px тут только добавляет пустоту справа. */
.layout .prose{max-width:900px;}
.layout>.side{grid-column:1;grid-row:1;}
@media(max-width:940px){.layout>.side{grid-column:auto;grid-row:auto;}}

/* ===== 34. СТРАНИЦЫ И ФОРМЫ: ПРАВКИ РЕВЬЮ (контакты карточками, длинные кнопки, ответ формы) ===== */
.btn--block{white-space:normal;}
.feat--card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(18px,2.2vw,24px);box-shadow:var(--shadow);transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease);}
.feat--card:hover{border-color:var(--brand);box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.feat--card .feat__ico{background:rgba(244,123,32,.12);color:var(--accent);}
.feat--card p+p{margin-top:7px;}
.feat__val{display:block;font-size:18.5px;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--ink);margin-bottom:6px;overflow-wrap:anywhere;}
.feat__val a{color:var(--ink);}
.feat__val a:hover{color:var(--accent);}
/* Ответ сервера остаётся в дереве доступности всегда: скрытую display:none область диктор не читает. */
.form__msg{display:block;}
.form__msg:empty{padding:0;border:0;}

/* ===== 35. ОПРОСНЫЙ ЛИСТ: ДВА ПУТИ, СХЕМА РАЗМЕРОВ, НУМЕРОВАННАЯ ФОРМА ===== */
/* Два способа заполнить лист — ровно две колонки, чтобы карточки были равнозначными и не растягивались поодиночке. */
.qz-ways{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(2,minmax(0,1fr));}
.qz-way{display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--brand);border-radius:var(--radius-lg);padding:clamp(22px,2.8vw,32px);box-shadow:var(--shadow);transition:box-shadow .22s var(--ease),transform .22s var(--ease);}
.qz-way:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.qz-way--pdf{border-top-color:var(--accent);}
.qz-way__ico{flex:0 0 auto;width:54px;height:54px;border-radius:15px;background:rgba(13,74,107,.08);color:var(--brand);display:flex;align-items:center;justify-content:center;}
.qz-way--pdf .qz-way__ico{background:rgba(244,123,32,.12);color:var(--accent);}
.qz-way h2{font-size:clamp(20px,2.3vw,25px);margin:0;}
.qz-way p{margin:0;font-size:15px;color:var(--muted);}
.qz-way__meta{display:grid;gap:9px;margin:0;padding:0;list-style:none;font-size:13.5px;line-height:1.45;color:var(--muted);}
.qz-way__meta li{display:flex;align-items:flex-start;gap:9px;}
.qz-way__meta svg{flex:0 0 15px;width:15px;height:15px;margin-top:4px;color:var(--ok);}
.qz-way .btn{margin-top:auto;}
/* Строка контактов под карточками: почта, телефон, режим работы. Отбивка сверху — иначе строка читается как обрывок текста под карточками, а не как отдельный блок. */
.qz-line{display:flex;flex-wrap:wrap;align-items:center;gap:12px 30px;margin-top:clamp(22px,2.8vw,32px);padding-top:clamp(18px,2.2vw,24px);border-top:1px solid var(--line);font-size:15.5px;font-weight:600;color:var(--ink);}
.qz-line>a,.qz-line>span{display:inline-flex;align-items:center;gap:9px;}
.qz-line>span{font-weight:400;color:var(--muted);}
.qz-line svg{flex:0 0 18px;color:var(--accent);}
/* Расшифровка обозначений со схемы: буква в плашке плюс пояснение. */
.qz-keys{display:grid;gap:clamp(14px,1.8vw,20px);margin:clamp(20px,2.5vw,28px) 0 0;padding:0;list-style:none;}
.qz-keys>li{display:flex;align-items:flex-start;gap:15px;}
/* Плашка заливается фирменным синим, как номер шага в форме: оранжевый по светло-оранжевому давал контраст около 2,6:1 — мелкий текст на такой подложке не читается. */
.qz-keys>li>b{flex:0 0 52px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--brand);color:#fff;box-shadow:0 3px 9px rgba(13,74,107,.22);font-size:16px;font-weight:800;letter-spacing:-.01em;}
.qz-keys h3{font-size:16.5px;line-height:1.3;margin:0 0 4px;}
.qz-keys p{margin:0;font-size:14.5px;color:var(--muted);}
/* Карточка с чертежом. */
.qz-fig,.pr-scale{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(16px,2.2vw,26px);box-shadow:var(--shadow);}
.qz-fig figcaption,.pr-scale figcaption,.geo__cap{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;line-height:1.55;color:var(--muted);}
/* Инлайновый чертёж затвора: цвета фирменные, размеры тянутся вместе с колонкой. Миллиметровка под схемой — чтобы блок читался как лист чертежа, а не как белый прямоугольник с картинкой. */
.qz-dwg{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius);background-color:#fbfcfe;background-image:linear-gradient(rgba(13,74,107,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(13,74,107,.055) 1px,transparent 1px);background-size:24px 24px;}
.qz-dwg__wall{fill:#eef4f7;stroke:#c4d5df;stroke-width:2;}
.qz-dwg__water{fill:var(--brand);opacity:.1;}
.qz-dwg__wave{fill:none;stroke:var(--brand);stroke-width:2.5;stroke-linecap:round;opacity:.45;}
.qz-dwg__level{stroke:var(--brand);stroke-width:2;stroke-dasharray:10 7;opacity:.6;}
.qz-dwg__ground{stroke:var(--ink);stroke-width:3;stroke-linecap:round;}
.qz-dwg__hatch line{stroke:#a9bdc9;stroke-width:2;stroke-linecap:round;}
.qz-dwg__gate{fill:var(--brand);fill-opacity:.22;stroke:var(--brand);stroke-width:3;}
.qz-dwg__rib line{stroke:var(--brand);stroke-width:2;opacity:.45;}
.qz-dwg__frame rect{fill:var(--accent);}
.qz-dwg__sill{stroke:var(--ink);stroke-width:5;stroke-linecap:round;}
.qz-dwg__mech{fill:none;stroke:var(--brand);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;}
.qz-dwg__hub{fill:var(--brand);}
.qz-dwg__dim line{stroke:var(--accent);stroke-width:2;}
.qz-dwg__ext line{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:5 5;opacity:.55;}
.qz-dwg__arrow{fill:var(--accent);}
.qz-dwg__key{fill:var(--ink);font-size:23px;font-weight:800;}
.qz-dwg__label{fill:var(--muted);font-size:15px;}
.qz-dwg__label--acc{fill:var(--accent-dark);font-weight:600;}
/* Форма опросного листа: номер шага в плашке перед заголовком группы. */
.form--quiz{counter-reset:qz;}
.form--quiz .form__group{counter-increment:qz;}
.form--quiz .form__group>legend{display:flex;align-items:center;gap:11px;width:100%;}
.form--quiz .form__group>legend::before{content:counter(qz);flex:0 0 30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:var(--brand);color:#fff;font-size:14.5px;font-weight:700;}
/* Разделитель между блоками вешаем на legend, а не на fieldset: браузер рисует legend поверх верхней рамки, и padding самого fieldset отрывает подпись от заголовка. */
.form--quiz .form__group+.form__group{margin-top:0;padding-top:0;border-top:0;}
.form--quiz .form__group+.form__group>legend{margin-top:16px;padding-top:26px;border-top:1px solid var(--line);}
.form--quiz .form__group>legend+.field__hint{margin:9px 0 0;padding-left:41px;}
/* Звёздочка обязательного поля — одним цветом во всех формах сайта. */
.field label span[aria-hidden="true"],.field__req{color:var(--accent);}
/* Форма слева, колонка «зачем это нужно» справа — на узком экране колонка уходит вниз. */
.layout--quiz{grid-template-columns:minmax(0,1fr) 330px;}
.layout--quiz>.side{grid-column:2;grid-row:1;}
.side__box .grid{gap:20px;}
.feat h4{font-size:16.5px;line-height:1.35;margin:0 0 5px;color:var(--ink);}
.checks--brand svg{color:var(--accent);}
@media(max-width:1080px){.layout--quiz{grid-template-columns:minmax(0,1fr) 300px;}}
@media(max-width:940px){.layout--quiz{grid-template-columns:1fr;}.layout--quiz>.side{grid-column:auto;grid-row:auto;}}
@media(max-width:820px){.qz-ways{grid-template-columns:1fr;}}
/* На узком экране отступ под номером блока съедает половину строки — подпись выравниваем по левому краю полей. */
@media(max-width:560px){.qz-dwg__label{display:none;}.qz-keys>li>b{flex:0 0 46px;height:40px;font-size:15px;}.form--quiz .form__group>legend+.field__hint{padding-left:0;}}

/* ===== 36. МОДАЛЬНОЕ ОКНО «ЗАКАЗАТЬ ЗВОНОК» ===== */
/* Нативный <dialog>: затемнение рисует ::backdrop, фокус запирает сам браузер. Сам диалог прозрачный и растянут — клик мимо .modal__box считается кликом по фону. */
.modal{width:min(460px,calc(100vw - 24px));max-width:none;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:0;border:0;background:transparent;color:var(--body);overflow:auto;overscroll-behavior:contain;}
.modal::backdrop{background:rgba(7,32,48,.66);}
.modal[open]{animation:rio-modal .24s var(--ease);}
@keyframes rio-modal{from{opacity:0;transform:translateY(14px) scale(.985);}to{opacity:1;transform:none;}}
.modal__box{position:relative;background:#fff;border-radius:var(--radius-lg);padding:clamp(22px,3.4vw,32px);box-shadow:0 26px 70px rgba(7,32,48,.38);}
.modal__close{position:absolute;top:10px;right:10px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:9px;font-size:27px;line-height:1;color:var(--muted);transition:background-color .18s var(--ease),color .18s var(--ease);}
.modal__close:hover{background:var(--bg-soft);color:var(--ink);}
.modal__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px;padding-right:36px;}
.modal__ico{flex:0 0 46px;width:46px;height:46px;border-radius:12px;background:rgba(244,123,32,.12);color:var(--accent);display:flex;align-items:center;justify-content:center;}
.modal__head h2{font-size:22px;margin-bottom:7px;}
.modal__head p{font-size:14px;line-height:1.55;color:var(--muted);margin:0;}
.modal__alt{display:flex;align-items:flex-start;gap:9px;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.5;color:var(--muted);}
.modal__alt svg{flex:0 0 16px;width:16px;height:16px;margin-top:2px;color:var(--accent);}
.modal__alt a{font-weight:700;color:var(--ink);}
.modal__alt a:hover{color:var(--accent);}
body.rio-lock{overflow:hidden;}
/* Ссылка под телефоном: перебиваем .hdr__phone a — там крупный жирный номер. */
.hdr__phone .hdr__cb{align-self:flex-start;margin-top:1px;font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--brand);border-bottom:1px dashed rgba(13,74,107,.4);}
.hdr__phone .hdr__cb:hover{color:var(--accent);border-bottom-color:currentColor;}
/* На телефоне ссылку убираем вместе с подписью под номером: заказ звонка есть в шторке меню и в нижней панели .mcta, а в строке шапки лишний текст ломает раскладку. */
@media(max-width:640px){.hdr__phone .hdr__cb{display:none;}}
/* Узкие экраны: логотип, номер и бургер в одну строку помещаются только на уменьшенных кеглях — иначе .hdr__phone с nowrap выталкивает строку за экран. */
@media(max-width:400px){.hdr__bar>.wrap{gap:8px;padding:12px 14px;}.hdr .logo__name{font-size:18px;}.hdr .logo__mark{width:38px;height:38px;}.hdr__phone a{font-size:15px;}.hdr__burger{width:42px;height:42px;flex:0 0 42px;}}
.nav__note{display:block;margin-top:2px;font-size:12.5px;color:var(--muted);text-align:center;}
/* Кнопка в подвале: .ftr a красит ссылки в серо-голубой, кнопке нужен белый текст. */
.ftr__cols .btn{margin:2px 0 20px;color:#fff;}
.ftr__cols .btn:hover{color:#fff;}
.ftr__cols .btn svg{flex:0 0 17px;color:#fff;}

/* ===== 37. БЛОК ДОВЕРИЯ ===== */
/* Шесть фактов: производство, ТУ, срок, чертёж, шефмонтаж, поставка. Ширина дорожки 320 px при зазоре 14 px — в .wrap помещается ровно три колонки, получается 3+3 без рваного хвоста. */
/* Два варианта намеренно разной плотности: --full это воздушные карточки в три уровня типографики, --compact — сплошная полоса-таблица с волосяными разделителями. */
.trust{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));}
.trust__item{display:flex;align-items:flex-start;gap:13px;}
.trust__body{min-width:0;}
.trust__ico,.mfg-park__ico{flex:0 0 42px;width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(13,74,107,.08);color:var(--brand);}
.trust__ico svg{width:20px;height:20px;}
.trust__k{display:block;margin-bottom:5px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);}
.trust__t{display:block;font-size:15px;font-weight:700;line-height:1.35;letter-spacing:-.01em;color:var(--ink);overflow-wrap:break-word;}
.trust__d{display:block;margin-top:7px;font-size:14px;line-height:1.6;color:var(--muted);}

/* Развёрнутый вариант: карточка с цветной подложкой под иконкой и акцентной чертой, которая на наведении прочерчивает верх карточки. */
.trust--full .trust__item{position:relative;overflow:hidden;padding:clamp(20px,2.2vw,26px);background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease);}
.trust--full .trust__item::before,.mfg-step::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),rgba(244,123,32,0));transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease);}
.trust--full .trust__item:hover{border-color:var(--brand);box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.trust--full .trust__item:hover::before{transform:scaleX(1);}
.trust--full .trust__ico{flex:0 0 46px;width:46px;height:46px;border-radius:12px;background:linear-gradient(150deg,var(--brand),var(--brand-deep));color:#fff;box-shadow:0 6px 16px rgba(13,74,107,.22);}
.trust--full .trust__ico svg{width:21px;height:21px;}
.trust--full .trust__t{font-size:16.5px;}

/* Главный факт — тёмная карточка: одно цветное пятно ломает ровную стену белых прямоугольников и уводит взгляд на номер ТУ. */
.trust--full .trust__item--key{background:linear-gradient(155deg,var(--brand-dark),var(--bg-deep));border-color:transparent;box-shadow:0 14px 34px rgba(7,32,48,.26);}
.trust--full .trust__item--key .trust__ico{background:var(--accent);color:#0b1f2c;box-shadow:0 6px 18px rgba(244,123,32,.34);}
.trust--full .trust__item--key .trust__k{color:#ffb877;}
.trust--full .trust__item--key .trust__t{color:#fff;}
.trust--full .trust__item--key .trust__d{color:#b7cad6;}
.trust--full .trust__item--key:hover{border-color:transparent;box-shadow:0 18px 42px rgba(7,32,48,.34);}

/* Плотный вариант: не шесть отдельных плиток, а один блок-таблица — так полоса под каталогом читается как строка спецификации, а не как серая россыпь. */
/* Ровно три колонки: зазора нет, и auto-fill насчитал бы четыре — тогда правила границ по nth-child перестали бы совпадать с рядами. */
/* Полоса лежит на белой секции, поэтому подложка мягкая, а не белая: белый блок на белом фоне не читался бы вовсе. Акцентная линия сверху — как корешок у спецификации. */

/* Тёмная секция: белые карточки на ней недопустимы, подложки становятся стеклянными. */
.section--deep .trust--full .trust__item{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);box-shadow:none;}
.section--deep .trust--full .trust__item--key{background:linear-gradient(155deg,rgba(244,123,32,.16),rgba(255,255,255,.04));border-color:rgba(244,123,32,.4);}
.section--deep .trust__ico{background:rgba(255,255,255,.1);color:var(--accent);box-shadow:none;}
.section--deep .trust__t{color:#fff;}
.section--deep .trust__d{color:#9fb4c2;}
.trust-band{margin-top:clamp(30px,4vw,46px);padding-top:clamp(24px,3vw,34px);border-top:1px solid var(--line);}

/* ===== 38. ОТЗЫВЫ ЗАКАЗЧИКОВ ===== */
/* Два отзыва — дорожка вдвое шире обычной карточки. Один отзыв — своя колонка по ширине .sec-head: в rev-wide он занял бы левую половину, а правая осталась бы пустой. */
.rev-wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));}
.rev-one{grid-template-columns:minmax(0,1fr);max-width:760px;}
.rev{position:relative;display:flex;flex-direction:column;height:100%;margin:0;padding:26px 24px 22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease);}
.rev::before{content:'«';position:absolute;top:6px;right:20px;font-family:Georgia,'Times New Roman',serif;font-size:64px;line-height:1;color:var(--accent);opacity:.16;pointer-events:none;}
.rev:hover{border-color:var(--brand);box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.rev__text{position:relative;margin:0 0 20px;font-size:15.5px;line-height:1.62;color:var(--body);}
.rev__text p{margin:0 0 .8em;}
.rev__text p:last-child{margin-bottom:0;}
.rev__who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line);}
.rev__ava{flex:0 0 42px;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--brand);color:#fff;font-size:14px;font-weight:700;letter-spacing:.02em;}
.rev__body{min-width:0;}
.rev__name{display:block;font-size:15px;font-weight:700;line-height:1.3;color:var(--ink);}
.rev__org{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--muted);}
.rev__date{flex:0 0 auto;margin-left:auto;align-self:flex-start;font-size:12.5px;color:var(--muted);white-space:nowrap;}
.section--deep .rev{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);box-shadow:none;}
.section--deep .rev:hover{background:rgba(255,255,255,.07);border-color:rgba(244,123,32,.45);}
.section--deep .rev__text{color:#dbe6ed;}
.section--deep .rev__who{border-top-color:rgba(255,255,255,.13);}
.section--deep .rev__name{color:#fff;}
.section--deep .rev__org,.section--deep .rev__date{color:#9fb4c2;}
.section--deep .rev__ava{background:var(--accent);color:#0b1f2c;}
@media(max-width:560px){.rev{padding:22px 20px 18px;}.rev__who{flex-wrap:wrap;}.rev__date{margin-left:54px;}}

/* ===== 39. ПАНЕЛЬ БЫСТРОЙ СВЯЗИ НА ТЕЛЕФОНЕ ===== */
/* Появляется ниже первого экрана и прячется у подвала — класс is-on ставит скрипт темы. На десктопе панели нет вовсе. */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:100;display:none;gap:10px;padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.97);border-top:2px solid var(--accent);box-shadow:0 -6px 22px rgba(11,31,44,.13);transform:translateY(120%);visibility:hidden;transition:transform .26s var(--ease),visibility .26s var(--ease);}
.mcta.is-on{transform:none;visibility:visible;}
.mcta .btn{flex:1 1 0;min-width:0;padding:13px 10px;font-size:14.5px;gap:7px;white-space:normal;}
.mcta .btn svg{flex:0 0 17px;}
.mcta .btn:hover{transform:none;}
@media(max-width:860px){.mcta{display:flex;}}
@media(max-width:360px){.mcta .btn{font-size:13.5px;padding:12px 8px;}}

/* ===== 40. КОЛОНКА КАТАЛОГА: ДЕРЕВО ТИПОВ, ПИЛЮЛИ ПОДБОРА, БЛОК РАСЧЁТА, ФАЙЛЫ ===== */
/* Колонка липкая и не выше экрана: остаток прокручивается внутри неё. overscroll-behavior здесь не ставим — с ним колесо над колонкой переставало листать страницу после того, как колонка домотана до низа. */
.side--cat{display:grid;gap:16px;align-content:start;max-height:calc(100vh - 32px);overflow-y:auto;padding-right:3px;scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
.side--cat::-webkit-scrollbar{width:6px;}
.side--cat::-webkit-scrollbar-track{background:transparent;}
.side--cat::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px;}
/* Карточки колонки живут на белом фоне страницы: без тени они читаются как рамки-прямоугольники, а не как карточки — остальные блоки темы (.feat--card, .doc, .rev) тень имеют. */
.side--cat .side__box{margin-bottom:0;box-shadow:var(--shadow);}
/* Шапка складного блока: иконка, заголовок, подпись со счётчиком и стрелка. Лёгкая заливка отделяет её от списка — иначе весь блок читается одним белым полем. */
.side__box--fold{padding:0;overflow:hidden;}
.side__head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:12px;padding:13px 15px;cursor:pointer;list-style:none;background:linear-gradient(180deg,#fafcfd,#fff);border-bottom:1px solid var(--line);transition:background-color .18s var(--ease);}
.side__head::-webkit-details-marker{display:none;}
.side__head:hover{background:var(--bg-soft);}
.side__head:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.side__box--fold:not([open])>.side__head{border-bottom-color:transparent;}
.side__head-ico{grid-column:1;grid-row:1/3;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:rgba(13,74,107,.08);color:var(--brand);transition:transform .22s var(--ease);}
/* Три одинаково-синих плитки подряд читались как один серый ряд: у подбора и файлов плитка оранжевая — блоки различаются с одного взгляда. */
.side__head-ico--acc{background:rgba(244,123,32,.12);color:var(--accent);}
.side__head:hover .side__head-ico{transform:scale(1.06);}
.side__box .side__head-t{grid-column:2;grid-row:1;margin:0;padding:0;border:0;font-size:15px;line-height:1.28;letter-spacing:-.015em;color:var(--ink);}
.side__head-n{grid-column:2;grid-row:2;font-size:12.5px;line-height:1.35;color:var(--muted);}
.side__head::after{grid-column:3;grid-row:1/3;content:'';width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-3px) rotate(45deg);transition:transform .22s var(--ease);}
.side__box--fold[open]>.side__head::after{transform:translateY(2px) rotate(225deg);}
.side__fold-in{padding:15px;}
/* Дерево типов: пункты во всю ширину блока — активная заливка и полоса доходят до края. Плотность подобрана так, чтобы блок расчёта начинался выше сгиба на ноутбуке. */
.side__tree{gap:1px;padding:6px 0;}
.side__tree a{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 15px 8px 17px;border-radius:0;font-size:14.5px;line-height:1.32;color:var(--body);transition:background-color .16s var(--ease),color .16s var(--ease);}
.side__tree a:hover{background:var(--bg-soft);color:var(--brand);}
.side__tree>li>a{font-weight:600;color:var(--ink);}
/* Название типа и счётчик перебивают общее правило `.side__list a span`, иначе имя ужалось бы до 12px. */
.side__tree .side__it-t{flex:1 1 auto;min-width:0;font-size:inherit;color:inherit;overflow-wrap:anywhere;}
/* Полоса слева растёт из нуля при наведении и остаётся у активного пункта — список перестаёт быть рядом одинаковых строк. */
.side__tree a::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);transition:width .16s var(--ease);}
.side__tree a:hover::before{width:3px;}
.side__tree .is-active>a{background:linear-gradient(90deg,rgba(244,123,32,.13),rgba(244,123,32,.02) 70%,transparent);color:var(--brand);font-weight:700;}
.side__tree .is-active>a::before{width:3px;}
.side__all{margin-bottom:5px;padding-bottom:5px;border-bottom:1px solid var(--line);}
.side__tree .side__all>a{font-size:15px;font-weight:700;color:var(--ink);}
.side__tree .side__all.is-active>a{color:var(--brand);}
/* Вложенные типы: мельче, с отступом и направляющей линией. */
.side__tree ul{position:relative;list-style:none;display:grid;gap:1px;margin:1px 0 5px;padding:0;border-left:0;}
.side__tree ul::before{content:'';position:absolute;left:23px;top:1px;bottom:5px;width:1px;background:var(--line);}
.side__tree ul a{padding-left:34px;font-size:13.5px;font-weight:500;color:var(--muted);}
.side__tree ul a:hover{color:var(--brand);}
/* Счётчик моделей — приглушённая пилюля справа от пункта. */
/* Цифра берёт --body, а не --muted: серый по светло-серой пилюле в 11,5 px даёт 4,1:1 — ниже порога для мелкого текста. */
.side__c{flex:0 0 auto;min-width:26px;padding:2px 7px;border-radius:999px;background:var(--bg-soft);font-size:11.5px;font-weight:700;line-height:1.5;color:var(--body);text-align:center;}
/* Перебиваем `.side__list a span` из секции 29 — иначе размер и цвет пилюли брались оттуда. */
.side__list a .side__c{font-size:11.5px;font-weight:700;color:var(--body);}
.side__tree a:hover .side__c{background:#fff;color:var(--brand);}
/* Заливка брендовым, а не оранжевым: белое по оранжевому даёт 2,7:1 — для цифры 11,5 px этого мало. */
.side__tree .is-active>a .side__c,.side__list .is-active>a .side__c{background:var(--brand);color:#fff;}
/* Хвост длинного списка типов: подложка отделяет кнопку от пунктов — иначе она читается как ещё один тип. */
.side__more{border-top:1px solid var(--line);}
.side__more-btn{display:flex;align-items:center;gap:8px;padding:12px 15px;cursor:pointer;list-style:none;background:linear-gradient(180deg,rgba(13,74,107,.045),rgba(13,74,107,.02));font-size:13.5px;font-weight:650;line-height:1.3;color:var(--brand);transition:background-color .16s var(--ease),color .16s var(--ease);}
.side__more-btn::-webkit-details-marker{display:none;}
.side__more-btn:hover{background:rgba(244,123,32,.1);color:var(--accent-dark);}
.side__more-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.side__more-btn .side__c{margin-left:auto;}
.side__more-btn::after{content:'';flex:0 0 8px;width:8px;height:8px;margin-left:2px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .22s var(--ease);}
.side__more[open]>.side__more-btn::after{transform:translateY(2px) rotate(225deg);margin-left:auto;}
.side__more[open] .side__more-on,.side__more:not([open]) .side__more-off{display:none;}
.side__more[open]>.side__more-btn .side__c{display:none;}
.side__more>.side__tree{padding-top:2px;}
/* Подбор по параметру: компактные пилюли вместо ещё одного списка. */
.side__pills{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0;}
.side__pill{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px;font-weight:600;line-height:1.3;color:var(--body);transition:border-color .18s var(--ease),background-color .18s var(--ease),color .18s var(--ease);}
.side__pill:hover{border-color:var(--brand);background:var(--bg-soft);color:var(--brand);}
.side__pill .side__c{min-width:0;padding:0;background:none;font-size:11.5px;color:var(--body);}
.side__pill.is-on{background:var(--brand);border-color:var(--brand);color:#fff;}
.side__pill.is-on:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff;}
.side__pill.is-on .side__c{color:#a9c8dd;}
/* Блок расчёта — самый заметный в колонке: тёмная заливка, иконка, телефон крупно. Оранжевая полоса сверху цепляет глаз в потоке белых карточек. */
.side__box--calc{position:relative;isolation:isolate;overflow:hidden;padding:20px 18px 18px;border-color:transparent;border-top:3px solid var(--accent);background:linear-gradient(155deg,var(--brand) 0%,var(--brand-deep) 100%);color:#a9c4d6;box-shadow:0 14px 34px rgba(7,32,48,.22);}
.side--cat .side__box--calc{box-shadow:0 14px 34px rgba(7,32,48,.22);}
.side__box--calc::after{content:'';position:absolute;z-index:-1;top:-58px;right:-58px;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,rgba(244,123,32,.42),transparent 70%);pointer-events:none;}
.side__calc-ico{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:12px;border-radius:13px;background:rgba(255,255,255,.13);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:var(--accent);}
.side__box--calc h2{margin:0 0 7px;padding:0;border:0;font-size:20px;line-height:1.22;letter-spacing:-.02em;color:#fff;}
.side__box--calc p{margin:0 0 14px;font-size:13.5px;line-height:1.55;color:#a9c4d6;}
/* Узкая колонка: боковые отступы кнопок режем, иначе «Заполнить опросный лист» переносится на вторую строку и карточка вырастает. */
.side__box--calc .btn{padding-left:14px;padding-right:14px;}
.side__box--calc .btn--primary{box-shadow:0 8px 18px rgba(244,123,32,.26);}
.side__box--calc .btn+.btn{margin-top:9px;}
/* Вторая кнопка на тёмном фоне: у базового .btn--ghost рамка под светлую подложку. */
.side__box--calc .btn--ghost{background:transparent;border-color:rgba(255,255,255,.26);color:#fff;}
.side__box--calc .btn--ghost:hover{background:rgba(244,123,32,.14);border-color:var(--accent);color:#fff;}
.side__box--calc .btn--ghost svg{color:var(--accent);}
.side__tel{display:flex;align-items:center;gap:9px;margin-top:15px;font-size:19px;font-weight:700;line-height:1.2;letter-spacing:-.01em;color:#fff;}
.side__tel:hover{color:var(--accent);}
.side__tel svg{flex:0 0 18px;color:var(--accent);}
.side__note{display:block;margin-top:6px;font-size:12px;line-height:1.45;color:#89a8bd;}
.side__mail,.tu__mail{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:13.5px;color:#cfe0ea;overflow-wrap:anywhere;}
.side__mail:hover{color:var(--accent);}
.side__mail svg{flex:0 0 15px;opacity:.75;}
.side__soc{display:flex;flex-wrap:wrap;gap:6px;margin:15px 0 0;padding:15px 0 0;list-style:none;border-top:1px solid rgba(255,255,255,.13);}
.side__soc a{display:inline-flex;padding:6px 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px;font-size:12.5px;font-weight:600;color:#cfe0ea;transition:border-color .18s var(--ease),background-color .18s var(--ease),color .18s var(--ease);}
.side__soc a:hover{border-color:var(--accent);background:rgba(244,123,32,.14);color:#fff;}
/* Файлы: карточки .doc в узкой колонке — плотнее по отступам и с расширением файла в значке. Подложка серая: белая карточка внутри белого блока не читалась бы. */
.side__files{display:grid;gap:8px;margin:0;padding:0;list-style:none;}
.side__files .doc{align-items:center;gap:10px;padding:11px 12px;background:var(--bg-soft);}
.side__files .doc:hover{background:#fff;}
/* `strong,b` красит в --ink, поэтому на наведении название файла само не меняет цвет. */
.side__files .doc:hover b{color:var(--brand);}
.side__files .doc__ico{flex:0 0 36px;width:36px;height:36px;font-size:10.5px;font-weight:700;color:var(--accent);background:rgba(244,123,32,.12);}
.side__files .side__file{display:grid;min-width:0;font-size:inherit;color:inherit;}
.side__files .doc b{margin-bottom:2px;font-size:14px;line-height:1.3;overflow-wrap:anywhere;}
.side__files .doc small{font-size:11.5px;line-height:1.35;color:var(--muted);}
/* На узком экране колонка складывается в аккордеон и перестаёт быть липкой. */
@media(max-width:940px){.side--cat{gap:12px;max-height:none;overflow:visible;padding-right:0;}.side--cat .side__head{padding:14px 16px;}.side__box--calc{padding:20px 18px 18px;}}

/* ===== 40. ГАЛОЧКА СОГЛАСИЯ ПОД ФОРМОЙ ===== */
.poly{display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:start;margin:0 0 16px;}
.poly input[type=checkbox]{width:18px;height:18px;margin:2px 0 0;accent-color:var(--brand);flex:0 0 18px;cursor:pointer;}
.poly label{font-size:12.5px;line-height:1.5;color:var(--muted);cursor:pointer;}
.poly a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;}
.poly a:hover{color:var(--accent);}
.poly .field__err{grid-column:2;}
.poly.field--err label{color:#a83232;}
.poly.field--err input[type=checkbox]{outline:2px solid #d64545;outline-offset:2px;}

/* ===== 41. ПОИСК ПО САЙТУ ===== */
.hdr__search{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:9px;border:1px solid var(--line);color:var(--brand);flex:0 0 42px;transition:all .18s var(--ease);}
.hdr__search:hover{border-color:var(--brand);background:var(--bg-soft);}
.hdr__search[aria-expanded="true"]{background:var(--brand);border-color:var(--brand);color:#fff;}
.hdr__searchbox{border-top:1px solid var(--line);background:var(--bg-soft);padding:18px 0;}
.hdr__searchbox .wrap{display:flex;align-items:center;gap:14px;}
.hdr__searchclose{font-size:28px;line-height:1;color:var(--muted);width:42px;height:42px;flex:0 0 42px;border-radius:9px;}
.hdr__searchclose:hover{color:var(--ink);background:#fff;}
.srch{display:flex;gap:10px;width:100%;}
.srch input[type=search]{flex:1 1 auto;min-width:0;padding:13px 16px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;font-size:15.5px;}
.srch input[type=search]:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(13,74,107,.11);}
.srch button{flex:0 0 auto;}
.srch-box{max-width:640px;margin:0 0 clamp(28px,4vw,44px);}
.srch-group{font-size:clamp(19px,2.2vw,23px);margin:clamp(30px,4vw,46px) 0 20px;}
.srch-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
.srch-item{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px;transition:all .2s var(--ease);}
.srch-item:hover{border-color:var(--brand);box-shadow:var(--shadow);}
.srch-item__img{flex:0 0 84px;width:84px;height:84px;border-radius:10px;overflow:hidden;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;padding:6px;}
.srch-item__img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
.srch-item__body{flex:1 1 auto;min-width:0;}
.srch-item__type{display:inline-block;font-size:11.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;}
.srch-item h3{font-size:17.5px;margin:0 0 6px;}
.srch-item h3 a{color:var(--ink);}
.srch-item:hover h3 a{color:var(--brand);}
.srch-item p{font-size:14.5px;color:var(--muted);margin:0;}
.srch-empty{background:var(--bg-soft);border-radius:var(--radius-lg);padding:clamp(22px,3vw,32px);max-width:760px;}
.srch-empty ul{margin:0 0 1.1em;padding-left:1.2em;}
.srch-empty li{margin-bottom:.5em;}
@media(max-width:640px){.hdr__search{display:none;}.srch-item{flex-direction:column;gap:12px;}.srch-item__img{flex:0 0 auto;width:100%;height:150px;}}

/* ===== 42. ИКОНКИ ===== */
.ico{flex:0 0 auto;display:block;}
.feat__ico .ico,.doc__ico .ico{width:22px;height:22px;}

/* ===== 48. ПРАЙС-ЛИСТ: ФАКТОРЫ ЦЕНЫ, СХЕМА РОСТА СТОИМОСТИ, СОСТАВ ПОСТАВКИ ===== */
/* Пять факторов бенто-сеткой: три карточки в первом ряду и две широкие во втором. Шестиколоночная основа даёт ровные ряды без висящей одиночной карточки в хвосте. */
.pr-facts{counter-reset:pf;display:grid;gap:clamp(16px,2vw,22px);grid-template-columns:repeat(6,minmax(0,1fr));}
.pr-fact{counter-increment:pf;position:relative;grid-column:span 2;display:flex;flex-direction:column;gap:10px;overflow:hidden;background:#fff;border:1px solid var(--line);border-top:3px solid var(--brand);border-radius:var(--radius-lg);padding:clamp(20px,2.6vw,30px);box-shadow:var(--shadow);transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease);}
.pr-fact:nth-child(4),.pr-fact:nth-child(5){grid-column:span 3;}
.pr-fact:hover{border-color:var(--brand);box-shadow:var(--shadow-lg);transform:translateY(-3px);}
/* Номер фактора призраком в углу: порядок читается, но с заголовком не спорит. Позиционированное содержимое карточки поднимаем над ним, иначе цифра ляжет поверх текста. */
.pr-fact::before{content:counter(pf,decimal-leading-zero);position:absolute;top:4px;right:14px;font-size:60px;font-weight:800;line-height:1;letter-spacing:-.04em;color:rgba(13,74,107,.07);pointer-events:none;}
.pr-fact>*{position:relative;}
.pr-fact__ico,.tcard__ico{flex:0 0 auto;width:52px;height:52px;border-radius:14px;background:rgba(13,74,107,.08);color:var(--brand);display:flex;align-items:center;justify-content:center;}
.pr-fact__ico svg{width:24px;height:24px;}
.pr-fact h3{margin:0;font-size:clamp(19px,2.2vw,24px);line-height:1.2;}
/* Крупная акцентная подпись — то, чем фактор меряется: размеры окна, марки стали, типы привода. */
.pr-fact__key{display:block;font-size:clamp(16px,1.7vw,19px);font-weight:800;line-height:1.3;letter-spacing:-.01em;color:var(--accent);overflow-wrap:anywhere;}
.pr-fact p{margin:0;font-size:15px;color:var(--muted);}
.pr-fact__ch{margin-top:auto;padding-top:13px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.5;}
.pr-fact__ch b{color:var(--ink);}
/* Основной фактор — размер окна: оранжевая линия сверху и оранжевая плашка иконки выделяют карточку в ряду. */
.pr-fact--main{border-top-color:var(--accent);}
.pr-fact--main .pr-fact__ico{background:rgba(244,123,32,.12);color:var(--accent);}
/* Схема-инфографика лежит в карточке-листе чертежа: миллиметровка под графикой — как на схеме опросного листа. */
.pr-scale__scroll{overflow-x:auto;overscroll-behavior-x:contain;}
/* Подсказка про горизонтальную прокрутку — только на экранах, где схема действительно шире вьюпорта. */
.pr-scale__hint{display:none;align-items:center;gap:8px;margin:0 0 12px;font-size:13px;color:var(--muted);}
.pr-scale__hint svg{flex:0 0 16px;color:var(--accent);}
/* Ниже минимальной ширины подписи внутри SVG становятся нечитаемыми, поэтому схема прокручивается, а не сжимается. */
.pr-dwg{display:block;width:100%;min-width:680px;height:auto;border:1px solid var(--line);border-radius:var(--radius);background-color:#fbfcfe;background-image:linear-gradient(rgba(13,74,107,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(13,74,107,.055) 1px,transparent 1px);background-size:24px 24px;}
.pr-dwg__ground{stroke:var(--ink);stroke-width:3;stroke-linecap:round;}
.pr-dwg__hatch line{stroke:#a9bdc9;stroke-width:2;stroke-linecap:round;}
.pr-dwg__water{fill:var(--brand);opacity:.13;}
.pr-dwg__wave{fill:none;stroke:var(--brand);stroke-width:2.5;stroke-linecap:round;opacity:.55;}
.pr-dwg__ripple{fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;opacity:.3;}
.pr-dwg__frame rect{fill:var(--accent);}
/* Толщину контура щита и штока задаём атрибутом у каждого силуэта: рост этих величин и есть рост металлоёмкости. */
.pr-dwg__gate{fill:var(--brand);fill-opacity:.22;stroke:var(--brand);}
.pr-dwg__rib line{stroke:var(--brand);stroke-width:2;opacity:.45;}
.pr-dwg__mech{fill:none;stroke:var(--brand);stroke-linecap:round;stroke-linejoin:round;}
.pr-dwg__sill{stroke:var(--ink);stroke-width:5;stroke-linecap:round;}
.pr-dwg__dim line{stroke:var(--accent);stroke-width:1.8;stroke-dasharray:6 5;}
.pr-dwg__arrow{fill:var(--accent);}
.pr-dwg__lead{stroke:var(--muted);stroke-width:1.2;}
.pr-dwg__cap{fill:var(--ink);font-size:19px;font-weight:800;letter-spacing:-.01em;}
.pr-dwg__sub{fill:var(--muted);font-size:15.5px;}
.pr-dwg__val{fill:var(--accent-dark);font-size:17px;font-weight:800;}
.pr-dwg__note{fill:var(--muted);font-size:13.5px;}
.pr-dwg__axis{fill:var(--ink);font-size:16.5px;font-weight:700;}
.pr-dwg__wedge{fill:var(--accent);fill-opacity:.16;stroke:var(--accent);stroke-width:1.5;stroke-opacity:.5;}
/* Расшифровка трёх состояний со схемы: на телефоне читают её, а не мелкие подписи внутри рисунка. */
.pr-legend{display:grid;gap:clamp(16px,2vw,22px);grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(20px,2.6vw,28px);}
.pr-legend__i{padding-top:14px;border-top:3px solid rgba(13,74,107,.3);}
.pr-legend__i:nth-child(2){border-top-color:var(--brand);}
.pr-legend__i:nth-child(3){border-top-color:var(--accent);}
.pr-legend b{display:block;margin-bottom:6px;font-size:16.5px;line-height:1.3;color:var(--ink);}
.pr-legend p{margin:0;font-size:14.5px;color:var(--muted);}
/* Состав поставки: слева широкая колонка «входит», справа узкая «считаем отдельно» — на мягкой подложке, чтобы не читалась как отказ. */
.pr-incl{display:grid;gap:clamp(18px,2.4vw,26px);grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start;}
.pr-incl__box{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(20px,2.6vw,30px);box-shadow:var(--shadow);}
.pr-incl__box h3{display:flex;align-items:center;gap:10px;margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:18px;}
.pr-incl__box h3 svg{flex:0 0 20px;color:var(--ok);}
.pr-incl__box--extra{background:var(--bg-soft);box-shadow:none;}
.pr-incl__box--extra h3 svg{color:var(--accent);}
/* Плюс вместо галочки: это не отказ, а позиции сверх базовой поставки. */
.checks--plus svg{color:var(--accent);}
@media(max-width:1120px){.pr-facts{grid-template-columns:repeat(2,minmax(0,1fr));}.pr-fact,.pr-fact:nth-child(4),.pr-fact:nth-child(5){grid-column:span 1;}.pr-fact:nth-child(5){grid-column:span 2;}}
@media(max-width:860px){.pr-legend{grid-template-columns:1fr;}.pr-incl{grid-template-columns:1fr;}}
@media(max-width:760px){.pr-scale__hint{display:flex;}}
/* Схема прокручивается в фиксированном масштабе: мелкие выноски на телефоне не прочитать, их убираем — смысл несут подписи под силуэтами и расшифровка ниже. */
@media(max-width:700px){.pr-dwg__note,.pr-dwg__dim{display:none;}}
@media(max-width:640px){.pr-facts{grid-template-columns:1fr;}.pr-fact:nth-child(5){grid-column:span 1;}.pr-fact::before{font-size:48px;}}

/* ===== 45. ТЕХНИЧЕСКИЕ СТРАНИЦЫ: ТЁМНЫЙ ПЕРВЫЙ ЭКРАН, КАРТОЧКА С РАЗБОРОМ, ПЛИТКИ НА ТЁМНОЙ СЕКЦИИ ===== */
/* Общая обвязка страниц «Доставка и оплата» и «Сертификаты и документы». Первый экран без фотографии: снимков под эти темы нет, а заголовок на белом фоне превращал страницу в текстовое полотно. Фон рисуют градиент, чертёжная сетка и оранжевое пятно. */
/* Полоса фактов: зазор в 2 px даёт волосяные линии между плитками — тот же приём, что на главном экране сайта. */
/* Карточка с разбором: иконка, заголовок, вводный абзац, список «что входит» и выделенная сноска. Сноска прижата к низу — в ряду карточек акцентные полосы выстраиваются на одной линии. */
.tcard{position:relative;display:flex;flex-direction:column;gap:13px;height:100%;padding:clamp(20px,2.4vw,28px);background:#fff;border:1px solid var(--line);border-top:3px solid var(--brand);border-radius:var(--radius-lg);box-shadow:var(--shadow);transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease);}
.tcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.tcard--acc{border-top-color:var(--accent);}
.tcard__ico svg{width:24px;height:24px;}
.tcard--acc .tcard__ico{background:rgba(244,123,32,.12);color:var(--accent);}
.tcard h3{margin:0;font-size:19px;line-height:1.28;}
.tcard>p{margin:0;font-size:15px;line-height:1.6;color:var(--muted);}
.tcard__k{display:block;margin-bottom:-4px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);}
.tcard .checks{gap:8px;}
/* Сноску перебиваем селектором из двух классов: правило .tcard>p специфичнее одиночного класса и иначе перекрасило бы её в серый. */
.tcard .tcard__note{margin-top:auto;padding:13px 16px;background:var(--bg-soft);border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;font-size:13.5px;line-height:1.55;color:var(--body);}
.tcard .tcard__note b{display:block;margin-bottom:3px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);}
/* Номер карточки в комплекте документов — кружок на верхней кромке, как у этапов работы. */
.tcard__n{position:absolute;top:-15px;right:20px;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-size:15px;font-weight:700;box-shadow:0 4px 10px rgba(244,123,32,.3);}
/* Плитки на тёмной секции: белая карточка на ней стала бы стеклянной, поэтому подложка полупрозрачная. */
.tiles{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));}
.tile{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2.2vw,26px);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);transition:background-color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);}
.tile:hover{background:rgba(255,255,255,.08);border-color:rgba(244,123,32,.45);transform:translateY(-3px);}
.tile__ico{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:13px;background:rgba(244,123,32,.16);color:var(--accent);}
.tile__ico svg{width:23px;height:23px;}
.tile h3{margin:0;font-size:17px;line-height:1.3;color:#fff;}
.tile p{margin:0;font-size:14.5px;line-height:1.6;color:#9fb4c2;}

/* ===== 46. ДОСТАВКА: СХЕМА ПЛЕЧ ДОСТАВКИ, СТРОКА РЕКВИЗИТОВ ===== */
/* Схема нарисована руками и показывает не географию, а цепочку плеч: сколько раз груз меняет машину по дороге к объекту. Поэтому три строки различаются по существу — два звена, четыре звена и погрузка у ворот цеха. */
.geo{margin:0;padding:clamp(14px,2vw,22px);background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);}
/* Спрайт с фигурами. Не display:none — иначе часть браузеров перестаёт находить цели для <use>. */
.geo__defs{position:absolute;width:0;height:0;overflow:hidden;}
.geo__list{display:grid;gap:clamp(12px,1.6vw,16px);margin:0;padding:0;list-style:none;}
.geo__row{padding:clamp(13px,1.7vw,18px);background:#fbfcfe;border:1px solid var(--line);border-radius:var(--radius);background-image:radial-gradient(rgba(13,74,107,.07) 1px,transparent 1px);background-size:22px 22px;}
/* Ширину рисунка ограничиваем: иначе на широкой колонке фигуры раздуваются, а на узкой обводка становится волосяной. */
.geo__chain{display:block;width:100%;max-width:330px;height:auto;margin-bottom:12px;}
.geo__g{color:var(--brand);}
.geo__g--acc{color:var(--accent);}
.geo__leg{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;}
.geo__leg--opt{stroke-dasharray:7 7;}
.geo__arw{fill:var(--accent);}
.geo__row b{display:block;font-size:16.5px;line-height:1.3;color:var(--ink);}
.geo__way{display:block;margin:4px 0 7px;font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--accent);}
.geo__row>span:last-child{display:block;font-size:13.5px;line-height:1.55;color:var(--muted);}
/* .grid-3 и .tiles набраны на auto-fill: он создаёт колонки под всю ширину, и три карточки в ряду из четырёх оставляли справа 330 пустых пикселей. auto-fit схлопывает лишние колонки, карточки растягиваются на всю строку. На сетках, где карточек больше числа колонок, поведение не меняется. */
.grid--fit{grid-template-columns:repeat(auto-fit,minmax(min(100%,285px),1fr));}
.tiles--fit{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));}
/* Пять карточек документов: три колонки, последняя карточка занимает два места — иначе она висит одна во втором ряду. */
@media(min-width:1000px){.grid--doc5{grid-template-columns:repeat(3,minmax(0,1fr));}.grid--doc5>:last-child{grid-column:span 2;}}
/* Реквизиты под карточками оплаты: одна строка-полоса, а не таблица — данных немного. */
.pay-req{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 26px;margin-top:clamp(22px,2.8vw,32px);padding:16px 20px;background:var(--bg-soft);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;font-size:14px;line-height:1.5;color:var(--muted);}
.pay-req__k{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);}
.pay-req b{color:var(--ink);}

/* ===== 47. СЕРТИФИКАТЫ: ПАНЕЛЬ ТЕХНИЧЕСКИХ УСЛОВИЙ, КАРТОЧКИ ФАЙЛОВ ===== */
/* Номер ТУ — главный факт страницы: в спецификации к договору заказчик ссылается именно на него, поэтому номер вынесен на тёмную панель и набран крупно. */
.tu{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:center;padding:clamp(26px,4vw,48px);background:linear-gradient(150deg,var(--brand-dark),var(--bg-deep));border-radius:var(--radius-lg);color:#b7cad6;box-shadow:0 18px 42px rgba(7,32,48,.26);}
.tu::after{content:'';position:absolute;z-index:-1;top:-110px;right:-70px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(244,123,32,.34),transparent 70%);pointer-events:none;}
.tu .eyebrow{color:#ffb877;}
.tu h2{margin-bottom:16px;font-size:clamp(21px,2.6vw,28px);color:#fff;}
.tu__main{position:relative;z-index:1;min-width:0;}
.tu__num{display:block;margin:0 0 18px;font-size:clamp(22px,3.4vw,38px);font-weight:800;line-height:1.14;letter-spacing:-.02em;color:#fff;overflow-wrap:anywhere;}
.tu p{margin:0 0 12px;font-size:15.5px;line-height:1.65;color:#b7cad6;}
.tu p:last-child{margin-bottom:0;}
.tu__side{padding:clamp(18px,2.4vw,24px);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:var(--radius);}
.tu__side h3{margin:0 0 14px;font-size:16px;color:#fff;}
.tu__side .checks{margin-bottom:18px;color:#cddbe4;}
.tu__side .checks svg{color:var(--accent);}
.tu__mail:hover{color:var(--accent);}
.tu__mail svg{flex:0 0 16px;opacity:.75;}
@media(max-width:860px){.tu{grid-template-columns:minmax(0,1fr);}}
/* Файлы для скачивания: та же карточка .doc, но с описанием в две строки — файлов всего два, мелкая строка выглядела бы потерянной. */
.doc--big{align-items:flex-start;gap:16px;padding:20px 22px;}
.doc--big .doc__ico{flex:0 0 44px;width:44px;height:44px;border-radius:11px;font-size:12.5px;}
.doc__body{display:grid;gap:5px;min-width:0;}
.doc--big .doc__body b{font-size:16.5px;line-height:1.3;}
.doc--big .doc__body>span{font-size:13.5px;line-height:1.55;color:var(--muted);}
.doc--big .doc__body>.doc__note{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);}

/* ===== 49. ПРОИЗВОДСТВО: ЦИКЛ ИЗГОТОВЛЕНИЯ, ГАЛЕРЕЯ ЦЕХА, БЛОК ТУ ===== */
/* Префикс mfg- (manufacturing), а не pr-: pr- уже занял прайс-лист в секции 43, а prod- — карточка товара. */
/* Шесть этапов крупными карточками: мелким списком «расчёт — чертёж — раскрой» читается как оглавление, а не как производство. Дорожка 320 px — в .wrap встают три колонки, получается 3+3 без рваного хвоста. */
.mfg-cycle{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));counter-reset:mfg;}
.mfg-step{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:12px;padding:clamp(24px,3vw,32px);background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);counter-increment:mfg;transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease);}
.mfg-step:hover{border-color:var(--brand);box-shadow:var(--shadow-lg);transform:translateY(-4px);}
/* Номер этапа — крупная подложка в углу, а не значок: он задаёт порядок чтения и не спорит с иконкой участка. */
.mfg-step::after{content:counter(mfg,decimal-leading-zero);position:absolute;z-index:-1;top:-18px;right:6px;font-size:clamp(76px,9vw,104px);font-weight:800;line-height:1;letter-spacing:-.05em;color:rgba(13,74,107,.06);pointer-events:none;}
/* Акцентная черта прочерчивает верх карточки при наведении — тот же приём, что у карточек блока доверия. */
.mfg-step:hover::before{transform:scaleX(1);}
.mfg-step__ico{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:15px;background:linear-gradient(150deg,var(--brand),var(--brand-deep));color:#fff;box-shadow:0 8px 18px rgba(13,74,107,.22);}
.mfg-step h3{margin:0;font-size:clamp(19px,2.1vw,22px);letter-spacing:-.02em;}
.mfg-step p{margin:0;font-size:14.5px;color:var(--muted);}
/* Нижняя строка карточки — чем этап заканчивается. Селектор в два класса: иначе кегль и цвет перебивает правило `.mfg-step p`. */
.mfg-step .mfg-step__meta{display:flex;align-items:flex-start;gap:9px;margin-top:auto;padding-top:14px;border-top:1px dashed var(--line);font-size:13px;line-height:1.45;font-weight:600;color:var(--brand);}
.mfg-step__meta svg,.mfg-krep__note svg{flex:0 0 15px;width:15px;height:15px;margin-top:2px;color:var(--accent);}
/* Галерея цеха: кадр с подписью из медиатеки. Соотношение 4/3, как у карточек каталога, — ряд остаётся ровным при разных исходниках. */
/* auto-fit, а не auto-fill: при двух снимках auto-fill оставлял справа две пустые колонки. Узкую галерею дополнительно поджимаем и центрируем — иначе два фото растягиваются во всю ширину. */
.mfg-gal{display:grid;gap:clamp(14px,1.8vw,20px);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));}
.mfg-gal--few{max-width:940px;margin-left:auto;margin-right:auto;}
.mfg-shot{display:flex;flex-direction:column;margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease);}
.mfg-shot:hover{border-color:var(--brand);box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.mfg-shot__img{aspect-ratio:4/3;background:var(--bg-soft);overflow:hidden;}
.mfg-shot:hover .mfg-shot__img img{transform:scale(1.05);}
.mfg-shot figcaption{padding:14px 18px 16px;font-size:13.5px;line-height:1.5;color:var(--muted);}
/* Документы: тёмная карточка на светлой секции. Номер ТУ — самая крупная строка блока, ради него блок и существует. */
.mfg-doc{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(22px,3.4vw,44px);align-items:center;padding:clamp(26px,4vw,46px);border-radius:var(--radius-lg);background:linear-gradient(150deg,var(--brand) 0%,var(--brand-deep) 100%);color:#bcd2e0;box-shadow:0 18px 44px rgba(7,32,48,.24);}
.mfg-doc::after{content:'';position:absolute;z-index:-1;top:-110px;right:-90px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(244,123,32,.34),transparent 68%);pointer-events:none;}
.mfg-doc__ico{display:flex;align-items:center;justify-content:center;width:62px;height:62px;margin-bottom:18px;border-radius:18px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:var(--accent);}
.mfg-doc .eyebrow{color:#ffb877;}
.mfg-doc h2{margin-bottom:14px;color:#fff;}
.mfg-doc__tu{display:block;margin-bottom:16px;font-size:clamp(19px,2.5vw,27px);font-weight:800;line-height:1.2;letter-spacing:-.02em;color:#fff;overflow-wrap:anywhere;}
.mfg-doc p{margin:0;font-size:15px;line-height:1.6;color:#bcd2e0;}
/* Правая колонка — стеклянная панель на той же подложке: белая карточка на градиенте выглядела бы вставкой из другого макета. */
.mfg-doc__panel{padding:clamp(20px,2.6vw,28px);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);}
.mfg-doc__panel h3{margin-bottom:14px;font-size:17.5px;color:#fff;}
.mfg-doc__panel .checks{margin-bottom:20px;}
.mfg-doc__panel .checks li{color:#cfe0ea;}
.mfg-doc__panel .checks svg{color:var(--accent);}
@media(max-width:860px){.mfg-doc{grid-template-columns:1fr;}}

/* ===== 50. О КОМПАНИИ: ПЕРВЫЙ ЭКРАН, ОТРАСЛИ ЗАКАЗЧИКОВ, ПЕРЕХОДЫ В РАЗДЕЛЫ ===== */
/* Первый экран без фотографии: фон держат мягкий градиент и чертёжная сетка, вес набирает типографика. Фотофон тут не к месту — страница про юрлицо, а не про цех. */
/* Полоса фактов — четыре ячейки в одной рамке: так она читается как строка спецификации, а не как четыре разрозненные плитки. */
.co-marks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:1px;margin:clamp(34px,4.5vw,58px) 0 0;padding:0;list-style:none;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;}
.co-mark{padding:clamp(18px,2.2vw,24px);background:#fff;}
.co-mark b{display:block;margin-bottom:5px;font-size:clamp(21px,2.6vw,28px);font-weight:800;line-height:1.14;letter-spacing:-.025em;color:var(--ink);}
.co-mark span{display:block;font-size:13.5px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere;}
/* Отрасли заказчиков: плитка с иконкой и мягким пятном в углу — при наведении пятно растёт и оживляет ряд одинаковых карточек. */
.co-ind{display:grid;gap:clamp(14px,1.8vw,20px);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));margin:0;padding:0;list-style:none;}
.co-ind__i{position:relative;isolation:isolate;overflow:hidden;padding:clamp(22px,2.6vw,28px);background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease);}
.co-ind__i::after{content:'';position:absolute;z-index:-1;right:-46px;bottom:-46px;width:150px;height:150px;border-radius:50%;background:rgba(13,74,107,.055);transition:transform .3s var(--ease);}
.co-ind__i:hover{border-color:var(--brand);box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.co-ind__i:hover::after{transform:scale(1.3);}
.co-ind__ico{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:15px;border-radius:14px;background:linear-gradient(150deg,var(--brand),var(--brand-deep));color:#fff;box-shadow:0 8px 18px rgba(13,74,107,.22);}
.co-ind h3{margin:0 0 7px;font-size:17.5px;line-height:1.3;}
.co-ind p{margin:0;font-size:14.5px;color:var(--muted);}
/* Переходы в разделы: карточка-ссылка кликабельна целиком, стрелка уезжает вправо при наведении. */
.co-links{display:grid;gap:clamp(12px,1.6vw,18px);grid-template-columns:repeat(auto-fill,minmax(min(100%,265px),1fr));margin:0;padding:0;list-style:none;}
/* Пункт списка — сам flex-контейнер: так карточка-ссылка растягивается на всю высоту ряда, а не по своему тексту. */
.co-links li{display:flex;}
.co-link{display:flex;flex-direction:column;gap:11px;height:100%;padding:clamp(20px,2.4vw,26px);background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-lg);transition:border-color .22s var(--ease),background-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease);}
.co-link:hover{background:#fff;border-color:var(--brand);box-shadow:var(--shadow-lg);transform:translateY(-3px);}
/* Плашка иконки и строка перехода — селекторы в два класса: одиночный класс проигрывает правилу `.co-link span` и иконка ушла бы в серый. */
.co-link .co-link__ico{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:#fff;color:var(--accent);box-shadow:0 2px 8px rgba(13,74,107,.12);}
.co-link b{font-size:17px;line-height:1.3;letter-spacing:-.01em;color:var(--ink);}
.co-link span{font-size:14px;line-height:1.55;color:var(--muted);}
.co-link .co-link__go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font-size:14px;font-weight:650;color:var(--accent);}
.co-link__go svg{flex:0 0 17px;transition:transform .22s var(--ease);}
.co-link:hover .co-link__go svg{transform:translateX(4px);}
@media(max-width:560px){.co-mark{padding:16px 18px;}}

/* ===== 43. ПРОСМОТРЩИК КАРТИНОК ===== */
.is-zoomable{cursor:zoom-in;}
.zoom-hint{position:relative;display:block;}
.zoom-hint::after{content:"";position:absolute;right:12px;bottom:12px;width:36px;height:36px;border-radius:50%;background:rgba(15,32,44,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") center/20px no-repeat;opacity:0;transform:translateY(4px);transition:opacity .2s var(--ease),transform .2s var(--ease);pointer-events:none;}
.zoom-hint:hover::after,.zoom-hint:focus-within::after{opacity:1;transform:none;}
@media(hover:none){.zoom-hint::after{opacity:.82;transform:none;}}
.lbox{width:min(96vw,1400px);max-width:96vw;max-height:94vh;padding:0;border:0;background:transparent;overflow:visible;}
.lbox::backdrop{background:rgba(7,32,48,.92);}
.lbox__fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;}
.lbox__fig img{max-width:96vw;max-height:82vh;width:auto;height:auto;object-fit:contain;border-radius:var(--radius);background:#fff;}
.lbox__cap{color:#c9d6de;font-size:14.5px;text-align:center;max-width:820px;line-height:1.5;}
.lbox__close{position:fixed;top:18px;right:22px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;padding:0;transition:background .18s var(--ease);}
.lbox__close:hover{background:rgba(255,255,255,.24);}
.lbox__nav{position:fixed;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;padding:0;transition:background .18s var(--ease);}
.lbox__nav:hover{background:rgba(255,255,255,.24);}
.lbox__nav--prev{left:20px;}
.lbox__nav--next{right:20px;}
.lbox__nav[hidden]{display:none;}
.lbox__close svg,.lbox__nav svg{display:block;}
@media(max-width:640px){.lbox__nav{width:44px;height:44px;font-size:28px;}.lbox__nav--prev{left:8px;}.lbox__nav--next{right:8px;}.lbox__close{top:10px;right:10px;}}

/* ===== 44. КАРТОЧКА ЯНДЕКС.БИЗНЕСА ===== */
.ybiz{display:flex;align-items:center;gap:14px;padding:14px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);transition:all .2s var(--ease);max-width:420px;}
.ybiz:hover{border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-2px);}
p+.ybiz,ul+.ybiz{margin-top:22px;}
.ybiz__logo{flex:0 0 26px;}
.ybiz__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;}
.ybiz__title{font-size:14.5px;font-weight:650;color:var(--ink);line-height:1.3;}
.ybiz__note{font-size:13px;color:var(--muted);}
.ybiz__rate{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted);}
.ybiz__stars{display:flex;gap:1px;}
.ybiz__stars svg{fill:var(--line);}
.ybiz__stars svg.is-on{fill:#fbb03b;}
.ybiz__rate b{color:var(--ink);font-size:14.5px;}
.ybiz__cnt{color:var(--muted);}
.ybiz__go{flex:0 0 auto;color:var(--muted);transition:transform .2s var(--ease),color .2s var(--ease);}
.ybiz:hover .ybiz__go{color:var(--accent);transform:translateX(3px);}
/* В подвале карточка идёт сразу за строкой режима работы — без отступа они слипались. */
.ftr .ybiz{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);margin-top:20px;padding:13px 15px;gap:11px;}
.ftr .ybiz__title{color:#fff;font-size:13.5px;}
/* В колонке подвала шириной ~250 px подпись разворачивается в две строки
   и карточка становится четырёхстрочной — оставляем название и стрелку. */
.ftr .ybiz__note{display:none;}
.ftr .ybiz:hover{border-color:rgba(255,255,255,.3);}

/* ===== 45. СХЕМА ПУТИ ЗАКАЗА НА СТРАНИЦЕ О КОМПАНИИ ===== */
.co-scheme{margin:clamp(30px,4vw,48px) 0 0;padding:clamp(20px,3vw,32px);background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);}
/* Ширину рисунка держим: у viewBox 620 единиц, и во всю ширину .wrap схема растягивалась вдвое — подписи и обводки уезжали в другой оптический вес, чем весь остальной сайт. */
.co-flow{list-style:none;margin:0 auto;padding:0;max-width:860px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;}
.co-flow__i{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:8px;}
.co-flow__i::before{content:"";position:absolute;top:36px;left:calc(-50% + 34px);right:calc(50% + 34px);border-top:2px dashed var(--line);}
.co-flow__i:first-child::before{display:none;}
.co-flow__ico{width:58px;height:58px;border-radius:50%;background:#fff;border:2px solid var(--brand);color:var(--brand);display:flex;align-items:center;justify-content:center;position:relative;z-index:1;}
.co-flow__n{position:absolute;top:0;left:calc(50% + 16px);width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:2;}
.co-flow__t{margin-top:12px;font-size:14.5px;font-weight:600;line-height:1.35;color:var(--ink);}
.co-flow__i--key .co-flow__ico{border-color:var(--accent);color:var(--accent);}
.co-flow__i--key .co-flow__n{background:var(--accent);}
.co-flow__mark{margin-top:10px;padding:7px 13px;background:var(--accent);color:#fff;font-size:13px;font-weight:600;line-height:1.35;border-radius:var(--radius);position:relative;}
.co-flow__mark::before{content:"";position:absolute;top:-6px;left:50%;width:0;height:0;margin-left:-6px;border:6px solid transparent;border-top:0;border-bottom-color:var(--accent);}
@media(max-width:860px){.co-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px;}.co-flow__i::before{display:none;}}
@media(max-width:420px){.co-flow{grid-template-columns:1fr;}}
.co-scheme figcaption{margin-top:16px;font-size:14px;line-height:1.55;color:var(--muted);text-align:center;max-width:640px;margin-left:auto;margin-right:auto;}
@media(max-width:640px){.co-scheme{padding:16px;}}

/* ===== 46. СХЕМА КОМПЛЕКТА ДОКУМЕНТОВ ===== */

/* ===== 47. УЧАСТКИ ЦЕХА НА СТРАНИЦЕ ПРОИЗВОДСТВА ===== */
.mfg-park__t{margin:clamp(34px,4vw,52px) 0 20px;font-size:clamp(19px,2.2vw,23px);}
.mfg-park{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:14px;list-style:none;margin:0;padding:0;}
.mfg-park__i{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);transition:all .2s var(--ease);}
.mfg-park__i:hover{border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-2px);}
.mfg-park__i b{display:block;font-size:16px;color:var(--ink);margin-bottom:5px;line-height:1.3;}
.mfg-park__i span span{display:block;font-size:14.5px;line-height:1.5;color:var(--muted);}

/* --- Диапазоны производства: плитки вместо таблицы --- */
/* Таблица подбора уже стоит на главной. Здесь те же числа, но плитками: цифра крупная, пояснение мелкое — блок читается взглядом и не выглядит копией главной. */
.mfg-cap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1px;margin:0;padding:0;list-style:none;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.13);border-radius:var(--radius-lg);overflow:hidden;}
.mfg-cap__i{display:flex;flex-direction:column;gap:7px;padding:clamp(18px,2.2vw,24px);background:var(--bg-deep);transition:background-color .22s var(--ease);}
.mfg-cap__i:hover{background:rgba(255,255,255,.05);}
.mfg-cap__k{font-size:12px;font-weight:700;line-height:1.3;letter-spacing:.07em;text-transform:uppercase;color:#ffb877;}
.mfg-cap__v{font-size:clamp(18px,2.1vw,23px);font-weight:800;line-height:1.2;letter-spacing:-.02em;color:#fff;overflow-wrap:anywhere;}
.mfg-cap__d{margin-top:auto;padding-top:6px;font-size:13.5px;line-height:1.5;color:#9fb4c2;}
.section--deep .mfg-cap__note{margin-top:clamp(20px,2.4vw,28px);font-size:14.5px;line-height:1.6;color:#9fb4c2;}

/* --- Схемы крепления рамы --- */
/* Рисунок и текст рядом: на схеме видно, чем способы отличаются геометрически, в тексте — когда какой берут. Ниже 720px карточка складывается в столбец. */
.mfg-krep{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(16px,2vw,22px);margin:0;padding:0;list-style:none;}
.mfg-krep__i{display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease);}
.mfg-krep__i:hover{border-color:var(--brand);box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.mfg-krep__fig{padding:clamp(16px,2vw,22px);background:var(--bg-soft);border-bottom:1px solid var(--line);color:var(--brand);}
.mfg-krep__fig svg{display:block;width:100%;height:auto;max-width:340px;margin:0 auto;}
.mfg-krep__body{display:flex;flex-direction:column;gap:9px;flex:1;padding:clamp(18px,2.2vw,24px);}
.mfg-krep__body h3{margin:0;font-size:clamp(17px,1.9vw,19.5px);line-height:1.3;letter-spacing:-.015em;}
.mfg-krep__body p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted);}
.mfg-krep .mfg-krep__note{display:flex;align-items:flex-start;gap:9px;margin-top:auto;padding-top:13px;border-top:1px dashed var(--line);font-size:13px;line-height:1.45;font-weight:600;color:var(--brand);}
@media(max-width:420px){.mfg-krep__fig{padding:12px;}.mfg-cap__i{padding:16px 18px;}}

/* ===== 48. СТРАНИЦА МОНТАЖА: СХЕМЫ КРЕПЛЕНИЯ ===== */
.btn-row{display:flex;flex-wrap:wrap;gap:14px;}

.mnt:hover{border-color:var(--brand);box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.mnt__pic{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:18px;display:flex;align-items:center;justify-content:center;min-height:214px;}
.mnt__img{width:100%;height:auto;display:block;max-width:450px;margin:0 auto;mix-blend-mode:multiply;}
.mnt__body{padding:22px 24px 26px;position:relative;flex:1 1 auto;}
.mnt__num{position:absolute;top:-19px;left:24px;width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 14px rgba(244,123,32,.32);}
.mnt__body h3{margin:12px 0 10px;font-size:18px;line-height:1.3;}
.mnt__body p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0 0 12px;}
.mnt__when{display:flex;align-items:flex-start;gap:8px;color:var(--brand)!important;font-weight:600;}
.mnt__when svg{flex:0 0 16px;margin-top:2px;color:var(--ok);}
.mnt__legend{text-align:center;max-width:640px;margin:clamp(24px,3vw,34px) auto 0;font-size:14px;color:var(--muted);}
.step__ico{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:11px;background:rgba(13,74,107,.08);color:var(--brand);margin:6px 0 12px;}
.mnt-check{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.mnt-check li{display:flex;align-items:flex-start;gap:12px;padding:14px 18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);font-size:15px;line-height:1.5;}
.mnt-check svg{flex:0 0 18px;margin-top:2px;color:var(--accent);}
@media(max-width:640px){.mnt__legend{font-size:13px;}}

/* ===== 49. МЕЛОЧИ ЧИТАЕМОСТИ ===== */
a[href^="tel:"]{white-space:nowrap;}
.faq__a a[href^="tel:"],.prose a[href^="tel:"]{font-weight:600;}
.side__box ul+a[href^="tel:"],.side__box ul+p{margin-top:14px;display:inline-block;}