/* МЕМБРО — концепция № 1 «Чёрный цех», утверждена заказчиком 19.08.2026.

   Палитра ролей: один тон не может быть и заливкой кнопки, и текстом на светлом,
   и текстом на графите. Поэтому лайм разведён на три токена, и цвет объявляется
   вместе с фоном, а не наследуется. Правки цвета — только здесь.

   Лайм = действие: кнопка, кикер, стрелка, «весь раздел». Ссылки в тексте лаймом
   не красятся — если акцент стоит везде, он не работает нигде. */

:root{
  color-scheme: dark;

  --ink:#0F1114;             /* фон страницы */
  --block:#191C21;           /* карточки и блоки */
  --line:#272B32;            /* границы на тёмном */
  --text:#F2F4F6;            /* основной текст на тёмном */
  --muted:#9AA1AB;           /* подписи на тёмном, 7.0:1 */
  --fg-soft:#6E757F;         /* декоративные стрелки */

  --accent:#9CBF2D;          /* заливка кнопок */
  --accent-text:#14161A;     /* текст НА лайме, 8.5:1 — белый тут даёт 2.1 */
  --accent-on-dark:#9CBF2D;  /* лайм как текст на графите, 8.9:1 */

  --paper:#F1F3F5;           /* светлая секция */
  --paper-text:#14161A;
  --paper-muted:#5C636E;     /* 4.9:1 на светлом */
  --paper-line:#DEE2E6;
  --accent-on-paper:#5C7314; /* лайм-текст на светлом, 5.4:1 */

  --h:'Manrope', system-ui, sans-serif;
  --b:'Inter', system-ui, sans-serif;
  --m:'JetBrains Mono', ui-monospace, monospace;

  --pad:20px;                /* поле экрана, MOBILE_STANDARD */
  --max:1180px;
  --hd:64px;                 /* высота шапки: от неё считаются якоря и меню */
}
@media (min-width:641px){ :root{--pad:32px} }
@media (min-width:1081px){ :root{--hd:76px} }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--text);
  font:400 17px/1.6 var(--b);
  overflow-x:clip;           /* не hidden: hidden прячет уехавший за край блок */
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}

.wrap{max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
section{padding:64px 0; border-top:1px solid var(--line)}
section[id]{scroll-margin-top:calc(var(--hd) + 16px)}
.hero{border-top:0}
@media (min-width:941px){ section{padding:96px 0} }

/* ---------- типографика: три ступени, разница ≥1.4× ---------- */
h1,h2{font-family:var(--h); font-weight:700; line-height:1.12; letter-spacing:-.02em; margin:0}
h1{font-size:clamp(31px,7.6vw,54px)}
h2{font-size:clamp(28px,6.2vw,40px)}
h3{font-family:var(--h); font-weight:600; font-size:18px; line-height:1.3; margin:0}
p{margin:0 0 14px}
.lead{color:var(--muted); font-size:clamp(16px,3.9vw,19px); max-width:68ch}
.kick{font:500 13px/1 var(--m); letter-spacing:.13em; text-transform:uppercase;
      color:var(--accent-on-dark); margin:0 0 14px}
.sec-head{margin-bottom:32px}
.sec-head p{margin-top:12px; margin-bottom:0}
@media (min-width:941px){ .sec-head{margin-bottom:40px} }

/* ---------- шапка ---------- */
.hd{position:sticky; top:0; z-index:60; background:rgba(15,17,20,.94);
    border-bottom:1px solid var(--line); backdrop-filter:blur(10px)}
.hd-in{display:flex; align-items:center; gap:10px; min-height:var(--hd)}
.hd .lg{display:flex; align-items:center; min-height:44px; flex:0 0 auto}
.hd .lg img{height:22px; width:auto; display:block}
.hd-tel{display:none}
.hd .hd-cta{display:none}
.hd-call{display:grid; place-items:center; width:44px; height:44px; flex:0 0 auto;
         margin-left:auto; border:1px solid var(--line); border-radius:10px; color:var(--text)}
.hd-call svg{width:20px; height:20px}
.burger{width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center;
        background:none; border:1px solid var(--line); border-radius:10px; color:var(--text); cursor:pointer}
.burger svg{width:20px; height:20px}
.nav{display:none}

/* мобильное меню: разделы раскрываются, а не уводят сразу на хаб */
.m-nav{display:none; border-top:1px solid var(--line);
       max-height:calc(100dvh - var(--hd)); overflow-y:auto; overscroll-behavior:contain;
       padding-bottom:24px}
.m-nav.on{display:block}
.m-grp{border-bottom:1px solid var(--line)}
.m-grp summary{list-style:none; display:flex; align-items:center; justify-content:space-between;
               min-height:56px; font-family:var(--h); font-weight:600; font-size:18px; cursor:pointer}
.m-grp summary::-webkit-details-marker{display:none}
.m-grp summary::after{content:'+'; font:400 24px/1 var(--b); color:var(--accent-on-dark)}
.m-grp[open] summary::after{content:'–'}
.m-grp a{display:flex; align-items:center; min-height:48px; color:var(--muted); font-size:16px}
.m-grp a.m-hub{color:var(--text); font-weight:500}
.m-grp a[aria-current]{color:var(--accent-on-dark)}
.m-nav .m-cta{margin-top:20px; width:100%}
.m-nav .m-tel{display:flex; align-items:center; justify-content:center; min-height:48px;
              margin-top:8px; color:var(--text); font-weight:500}

@media (min-width:641px){
  .hd-in{gap:14px}
  .hd-call{display:none}
  .hd-tel{display:inline-flex; align-items:center; min-height:44px; margin-left:auto;
          font:500 15px/1 var(--b); color:var(--text); white-space:nowrap}
  .hd .hd-cta{display:inline-flex; min-height:44px; padding:0 16px; font-size:14px}
}
@media (min-width:1081px){
  .burger{display:none}
  .m-nav{display:none !important}
  .nav{display:flex; align-items:center; gap:2px; margin-left:24px}
  .nav-i{position:relative}
  .nav-i > a{display:flex; align-items:center; min-height:44px; padding:0 10px; border-radius:8px;
             font-size:14.5px; color:#CFD4DA; white-space:nowrap}
  .nav-i:hover > a,.nav-i:focus-within > a{color:var(--text); background:rgba(242,244,246,.07)}
  .drop{position:absolute; top:100%; left:0; min-width:290px; background:var(--block);
        border:1px solid var(--line); border-radius:14px; padding:10px;
        opacity:0; visibility:hidden; transform:translateY(6px); transition:.16s;
        box-shadow:0 18px 40px rgba(0,0,0,.45)}
  .nav-i:hover .drop,.nav-i:focus-within .drop{opacity:1; visibility:visible; transform:none}
  .nav-wide{position:static}
  .nav-wide .drop-wide{left:0; right:auto; display:grid;
                       grid-template-columns:repeat(3,minmax(220px,1fr)); gap:4px 18px; padding:16px}
  .drop a{display:block; padding:9px 12px; border-radius:8px; font-size:14.5px; color:var(--muted); line-height:1.35}
  .drop a:hover{background:rgba(242,244,246,.08); color:var(--text)}
  .drop a[aria-current]{color:var(--accent-on-dark)}
  .drop-h{font-family:var(--h); font-weight:600; font-size:14.5px; color:var(--text);
          border-bottom:1px solid var(--line); border-radius:0; margin-bottom:6px; padding-bottom:9px}
  .hd-tel{margin-left:auto}
}

/* ---------- первый экран ---------- */
.hero{position:relative; padding:0; min-height:min(90svh,780px); display:flex; align-items:flex-end; overflow:hidden}
.hero picture,.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,17,20,.60) 0%, rgba(15,17,20,.30) 32%, rgba(15,17,20,.90) 82%, var(--ink) 100%)}
.hero-in{position:relative; z-index:2; width:100%; padding-top:104px; padding-bottom:40px}
.hero h1{max-width:14ch}
.hero .lead{color:#D7DBE0; max-width:46ch; margin-top:18px}
@media (min-width:941px){ .hero-in{padding-top:150px; padding-bottom:56px} }

.btn{display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 24px;
     border-radius:10px; font:600 16px/1 var(--b); border:1px solid transparent; cursor:pointer; text-align:center}
.btn-1{background:var(--accent); color:var(--accent-text)}
.btn-1:hover{background:#ACD139}
.btn-2{background:rgba(15,17,20,.55); color:var(--text); border-color:#4A5058}
.btn-2:hover{border-color:var(--text)}
.btns{display:grid; gap:12px; margin-top:26px}
.btns .btn{width:100%}
@media (min-width:560px){ .btns{display:flex; flex-wrap:wrap} .btns .btn{width:auto} }

/* факты первого экрана: значение и подпись, а не строка через точку */
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:32px 0 0;
       border-top:1px solid rgba(242,244,246,.18); padding-top:18px}
.facts div{min-width:0}
.facts b{display:block; font:700 clamp(17px,4.4vw,24px)/1.15 var(--h); color:var(--text)}
.facts b.fit{font-size:clamp(15px,3.9vw,24px); letter-spacing:-.02em}
.facts span{display:block; margin-top:6px; font:400 13px/1.35 var(--b); color:#C3C9D0}

/* якорный ряд по интентам */
.anchors{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.anchors a{display:inline-flex; align-items:center; min-height:44px; padding:0 16px;
           border:1px solid var(--line); border-radius:999px; font-size:14.5px; color:var(--text)}
.anchors a:hover{border-color:var(--accent)}

/* ---------- фоновая фотография секции ----------
   Ставится в двух местах на странице: под «объектами» и под заявкой. Вуаль
   объявляется вместе с фоном — текст поверх фото не наследует цвет ниоткуда. */
.bg-sec{position:relative; overflow:hidden}
.bg-sec > .wrap{position:relative; z-index:2}
.bg{position:absolute; inset:0; z-index:0}
.bg img{width:100%; height:100%; object-fit:cover}
.bg::after{content:''; position:absolute; inset:0}
.bg-dark::after{background:linear-gradient(180deg, rgba(15,17,20,.86) 0%, rgba(15,17,20,.74) 45%, rgba(15,17,20,.92) 100%)}
.bg-light::after{background:linear-gradient(180deg, rgba(241,243,245,.94) 0%, rgba(241,243,245,.90) 40%, rgba(241,243,245,.96) 100%)}
/* подвал: кадр светлый (макро сварного шва), поэтому вуаль плотнее — из него
   остаётся только диагональ шва, а текст лежит на ровном тёмном поле */
.bg-foot::after{background:linear-gradient(180deg, rgba(11,13,16,.93) 0%, rgba(11,13,16,.88) 30%, rgba(11,13,16,.96) 100%)}

/* ---------- опоры ---------- */
.pill{display:grid; gap:16px; grid-template-columns:1fr}
.pill>div{background:var(--block); border:1px solid var(--line); border-radius:16px; padding:20px}
.pill .no{font:500 13px/1 var(--m); color:var(--accent-on-dark); letter-spacing:.1em; margin:0 0 12px}
.pill .pill-t{font-family:var(--h); font-weight:700; font-size:clamp(20px,4.4vw,26px);
              line-height:1.2; margin:0 0 10px; color:var(--text)}
.pill p{color:var(--muted); margin:0; font-size:15.5px}
@media (min-width:700px){ .pill{grid-template-columns:repeat(2,1fr); gap:20px} }
@media (min-width:1080px){ .pill{grid-template-columns:repeat(4,1fr); gap:24px} }

/* ---------- схема ---------- */
.pie{display:grid; gap:20px}
.pie figure{margin:0; background:var(--block); border:1px solid var(--line); border-radius:16px; padding:12px}
.pie svg{width:100%; height:auto; max-width:640px; margin:0 auto; display:block}
.pie figcaption{color:var(--muted); font-size:14px; margin-top:12px; line-height:1.5; padding:0 4px 4px}
@media (min-width:700px){ .pie figure{padding:20px} }
@media (min-width:941px){ .pie{grid-template-columns:1.05fr .95fr; gap:24px; align-items:start} }

.layers{list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:16px; overflow:hidden}
.layers li{padding:16px 18px; background:var(--block); border-bottom:1px solid var(--line)}
.layers li:last-child{border-bottom:0}
.layers li.on{background:#1F2519}
.layers b{display:block; font-family:var(--h); font-weight:600; font-size:18px; margin-bottom:4px}
.layers span{color:var(--muted); font-size:15px; line-height:1.5}

/* ---------- витрина разделов: карточки одного каркаса ---------- */
.silos{display:grid; gap:16px}
@media (min-width:700px){ .silos{grid-template-columns:repeat(2,1fr); gap:20px} }
@media (min-width:1080px){ .silos{grid-template-columns:repeat(3,1fr); gap:24px} }
.silo{background:var(--block); border:1px solid var(--line); border-radius:16px; padding:24px;
      display:flex; flex-direction:column}
.silo .no{font:500 13px/1 var(--m); color:var(--accent-on-dark); letter-spacing:.1em; margin:0 0 12px}
.silo h3{font-size:clamp(20px,4.4vw,26px); font-weight:700; line-height:1.2; margin-bottom:8px}
.silo > p{color:var(--muted); font-size:15.5px; margin:0}
.silo-list{list-style:none; margin:16px 0 0; padding:0; border-top:1px solid var(--line)}
.silo-list a{display:flex; align-items:center; justify-content:space-between; gap:12px;
             min-height:52px; color:var(--text); font-size:16px; border-bottom:1px solid var(--line)}
.silo-list li:last-child a{border-bottom:0}
.silo-list a::after{content:'→'; color:var(--fg-soft)}
.silo-list a:hover,.silo-list a:hover::after{color:var(--accent-on-dark)}
.silo-all{display:inline-flex; align-items:center; min-height:44px; margin-top:auto;
          padding-top:12px; color:var(--accent-on-dark); font-size:15px; font-weight:500}

/* ---------- карточки ---------- */
.cards{display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width:700px){ .cards{grid-template-columns:repeat(2,1fr); gap:20px} }
@media (min-width:1080px){ .cards{grid-template-columns:repeat(3,1fr); gap:24px} }
.cards.two{grid-template-columns:1fr}
@media (min-width:700px){ .cards.two{grid-template-columns:repeat(2,1fr)} }
.card{background:var(--block); border:1px solid var(--line); border-radius:16px; padding:24px; display:block; color:var(--text)}
.card:hover{border-color:var(--accent)}
.card svg{width:100%; max-width:300px; height:auto; display:block; border-radius:10px}
.card h3{margin-bottom:8px}
.card p{color:var(--muted); font-size:15px; margin:0}

/* ---------- светлая секция ---------- */
.paper{background:var(--paper); color:var(--paper-text); border-top-color:var(--paper-line)}
.paper + .paper{border-top:0; padding-top:0}
.paper + .paper .sec-head{border-top:1px solid var(--paper-line); padding-top:56px}
.paper h1,.paper h2,.paper h3{color:var(--paper-text)}
.paper .lead,.paper p{color:var(--paper-muted)}
.paper .kick{color:var(--accent-on-paper)}
.paper .card{background:#fff; border-color:var(--paper-line); color:var(--paper-text)}
.paper .card p{color:var(--paper-muted)}

/* ---------- из чего складывается смета ---------- */
.factors{display:grid; gap:14px; grid-template-columns:1fr; list-style:none; margin:0; padding:0}
@media (min-width:700px){ .factors{grid-template-columns:repeat(2,1fr); gap:16px} }
@media (min-width:1080px){ .factors{grid-template-columns:repeat(4,1fr)} }
.factors li{background:#fff; border:1px solid var(--paper-line); border-radius:14px; padding:18px}
.factors b{display:block; font-family:var(--h); font-size:17px; margin-bottom:6px; color:var(--paper-text)}
.factors span{color:var(--paper-muted); font-size:15px; line-height:1.5}
.price-note{margin-top:24px; padding:20px; background:#fff; border:1px solid var(--paper-line);
            border-left:3px solid var(--accent-on-paper); border-radius:14px;
            color:var(--paper-muted); font-size:15.5px; max-width:72ch}

/* ---------- экспресс-расчёт на главной ----------
   Светлая секция, поэтому цвета объявляются заново: наследовать тёмные токены
   тут нельзя. Считает тот же модуль, что и полная страница расчёта. */
.mini{display:grid; gap:0; background:#fff; border:1px solid var(--paper-line); border-radius:18px;
      overflow:hidden; margin-bottom:32px}
@media (min-width:941px){ .mini{grid-template-columns:1.1fr .9fr} }
.mini-q{padding:24px}
.mini-h{font-family:var(--h); font-weight:600; font-size:16px; color:var(--paper-text); margin:0 0 12px}
.mini-h label{color:inherit}
.mini-h2{margin-top:22px}
.mini-q .area input{background:#fff; border-color:#CDD3DA; color:var(--paper-text)}
.mini-q .area .unit{color:var(--paper-muted)}
.mini-q .chips button{border-color:#CDD3DA; color:var(--paper-text)}
.mini-q .chips button:hover{border-color:var(--accent-on-paper)}
.mini-q .opts{grid-template-columns:1fr}
.mini-q .opts label{border-color:#CDD3DA; color:var(--paper-muted); background:#fff}
.mini-q .opts label:hover{border-color:#AEB6BF; color:var(--paper-text)}
.mini-q .opts input:checked + span{color:var(--paper-text)}
.mini-q .opts label:has(input:checked){border-color:var(--accent-on-paper); background:#F4F7EC}

.mini-r{padding:24px; background:var(--ink); color:var(--text)}
.mini-r p.cap{font:500 13px/1 var(--m); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 10px}
.mini-r p.big{font:700 clamp(24px,5.4vw,32px)/1.1 var(--h); color:var(--accent-on-dark); margin:0}
.mini-r p.per{color:var(--muted); font-size:14.5px; margin:8px 0 18px}
.mini-r ul.calc-list{padding-top:16px; border-top:1px solid var(--line)}
.mini-act{display:grid; gap:10px; margin-top:20px}
@media (min-width:560px){ .mini-act{grid-template-columns:1fr 1fr} }
.mini-r p.mini-note{color:#C3C9D0; font-size:13.5px; line-height:1.5; margin:16px 0 0}
.mini-sep{margin-bottom:16px}

/* ---------- этапы ---------- */
.steps{display:grid; gap:16px; counter-reset:s; list-style:none; margin:0; padding:0}
@media (min-width:700px){ .steps{grid-template-columns:repeat(2,1fr); gap:20px} }
@media (min-width:1080px){ .steps{grid-template-columns:repeat(3,1fr); gap:24px} }
.steps li{background:#fff; border:1px solid var(--paper-line); border-radius:16px; padding:22px}
.steps li::before{counter-increment:s; content:counter(s,decimal-leading-zero); display:block;
  font:500 18px/1 var(--m); color:var(--accent-on-paper); margin-bottom:12px}
.steps b{display:block; font-family:var(--h); font-size:18px; margin-bottom:6px}
.steps span{color:var(--paper-muted); font-size:15px; line-height:1.55}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:20px 40px 20px 0; position:relative;
             font-family:var(--h); font-weight:600; font-size:18px; line-height:1.35; max-width:78ch}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; position:absolute; right:4px; top:18px; font:400 24px/1 var(--b); color:var(--accent-on-dark)}
.faq details[open] summary::after{content:'–'}
.faq .a{color:var(--muted); padding:0 0 20px; font-size:16px; max-width:78ch}
.faq .a p:last-child{margin-bottom:0}

/* ---------- калькулятор ----------
   Слева вопросы, справа результат. На десктопе панель результата липкая: человек
   меняет площадь и сразу видит, что изменилось, без прокрутки вверх-вниз. */
.calc{display:grid; gap:20px}
@media (min-width:941px){ .calc{grid-template-columns:1.15fr .85fr; gap:28px; align-items:start} }
.calc-q{display:grid; gap:16px; margin:0}
.q{border:1px solid var(--line); border-radius:16px; background:var(--block); padding:20px}
.q-h{font-family:var(--h); font-weight:600; font-size:17px; line-height:1.3; color:var(--text); margin:0 0 14px}
.opts{display:grid; gap:8px}
@media (min-width:560px){ .opts{grid-template-columns:repeat(2,1fr)} }
.opts label{display:flex; align-items:center; gap:10px; min-height:52px; padding:8px 14px;
            border:1px solid var(--line); border-radius:10px; cursor:pointer; font-size:15.5px; color:var(--muted)}
.opts input{position:absolute; opacity:0; width:1px; height:1px}
.opts label:hover{border-color:#3D444E; color:var(--text)}
.opts input:checked + span{color:var(--text); font-weight:500}
.opts label:has(input:checked){border-color:var(--accent); background:#1F2519}
.opts input:focus-visible + span{outline:2px solid var(--accent); outline-offset:3px}
.opts-check label{min-height:52px}
.area{display:flex; align-items:center; gap:12px}
.area input{width:100%; max-width:220px; min-height:56px; padding:14px; border-radius:10px; border:1px solid #333942;
            background:#0F1114; color:var(--text); font:600 22px/1 var(--h); margin:0}
.area .unit{color:var(--muted); font-size:16px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.chips button{min-height:44px; padding:0 16px; border-radius:999px; border:1px solid var(--line);
              background:none; color:var(--text); font:400 14.5px/1 var(--b); cursor:pointer}
.chips button:hover{border-color:var(--accent)}

.calc-r{background:var(--block); border:1px solid var(--line); border-radius:16px; padding:22px}
@media (min-width:941px){ .calc-r{position:sticky; top:calc(var(--hd) + 16px)} }
.calc-r .cap{font:500 13px/1 var(--m); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 10px}
.calc-sum{padding-bottom:18px; border-bottom:1px solid var(--line)}
.calc-sum .big{font:700 clamp(26px,6vw,34px)/1.1 var(--h); color:var(--accent-on-dark); margin:0}
.calc-sum .per{color:var(--muted); font-size:14.5px; margin:8px 0 0}
.calc-block{padding:18px 0; border-bottom:1px solid var(--line)}
.calc-list{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.calc-list li{display:flex; align-items:baseline; justify-content:space-between; gap:14px; font-size:15px; color:var(--muted)}
.calc-list b{color:var(--text); font-weight:600; white-space:nowrap; font-family:var(--m); font-size:14px}
.calc-list li:only-child, .calc-block:last-of-type .calc-list li{display:block}
/* на узком экране длинная подпись переносится, и значение повисает у первой
   строки — поэтому ниже 480 строка складывается в две: подпись, под ней число */
@media (max-width:480px){
  .calc-list li{display:grid; gap:2px}
  .calc-list b{justify-self:start}
}
.calc-note{margin:16px 0 18px; padding:14px; border-radius:10px; background:#22201A;
           border:1px solid #4A431F; color:#E6DFC8; font-size:13.5px; line-height:1.5}
.calc-r .btn{width:100%}
.calc-disclaimer{margin:24px 0 0; padding:16px 18px; border-radius:12px; background:#22201A;
                 border:1px solid #4A431F; color:#E6DFC8; font-size:14px; line-height:1.55; max-width:72ch}

/* ---------- заявка ---------- */
.lead-grid{display:grid; gap:20px}
@media (min-width:941px){ .lead-grid{grid-template-columns:.85fr 1.15fr; gap:32px; align-items:start} }
.contacts{background:var(--block); border:1px solid var(--line); border-radius:16px; padding:24px}
.contacts div + div{margin-top:6px; padding-top:12px; border-top:1px solid var(--line)}
.contacts a{display:inline-flex; align-items:center; min-height:44px; color:var(--text); font-size:17px; font-weight:500}
.contacts a:hover{color:var(--accent-on-dark)}
.contacts .cap{display:block; color:var(--muted); font-size:13px; font-family:var(--m);
               letter-spacing:.1em; text-transform:uppercase}
.contacts .note{margin:18px 0 0; color:var(--muted); font-size:14.5px; line-height:1.5}

.form{background:var(--block); border:1px solid var(--line); border-radius:16px; padding:22px; max-width:560px}
.form label{display:block; font-size:14px; color:var(--muted); margin:0 0 6px}
.form input,.form textarea,.form select{width:100%; min-height:52px; padding:14px; border-radius:10px;
  border:1px solid #333942; background:#0F1114; color:var(--text); font:400 16px/1.4 var(--b); margin-bottom:14px}
.form textarea{min-height:104px; resize:vertical}
.form ::placeholder{color:#7C838D; opacity:1}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--accent); outline-offset:1px}
@media (min-width:560px){
  .form .row2{display:grid; grid-template-columns:1fr 1fr; column-gap:14px}
  .form .row2 > *{min-width:0}
}
.file{margin-bottom:14px}
.file input{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden}
.file label{display:flex; align-items:center; gap:10px; min-height:52px; padding:14px; margin:0;
  border:1px dashed #3D444E; border-radius:10px; color:var(--text); font-size:15px; cursor:pointer}
.file label:hover{border-color:var(--accent)}
.file input:focus-visible + label{outline:2px solid var(--accent); outline-offset:1px}
.file svg{width:20px; height:20px; flex:0 0 auto; color:var(--accent-on-dark)}
.agree{display:flex; gap:12px; align-items:flex-start; padding:6px 0 10px;
       font-size:13.5px; color:var(--muted); line-height:1.5}
.agree input{width:24px; min-height:24px; height:24px; margin:1px 0 0; flex:0 0 auto}
.agree a{color:var(--text); border-bottom:1px solid rgba(156,191,45,.55)}
.form .btn{width:100%}
.form-note{color:var(--muted); font-size:13.5px; margin:12px 0 0}
.ok,.err{border-radius:10px; padding:14px; margin-bottom:14px; font-size:15px}
.ok{background:#1F2519; border:1px solid var(--accent); color:var(--text)}
.err{background:#2A1A1A; border:1px solid #C0563F; color:#F2D9D3}

/* ---------- SEO-текст: ссылки подчёркиванием, а не заливкой цветом ---------- */
.seo-txt{color:var(--muted); font-size:15.5px}
.seo-txt h1{margin-bottom:8px}
.seo-txt h2{font-size:clamp(22px,4.8vw,28px); color:var(--text); margin-bottom:14px}
.seo-txt p{max-width:72ch}
.seo-txt a,.faq .a a{color:var(--text); border-bottom:1px solid rgba(156,191,45,.5)}
.seo-txt a:hover,.faq .a a:hover{border-bottom-color:var(--accent)}
.paper .seo-txt a{color:var(--paper-text); border-bottom:1px solid rgba(92,115,20,.55)}

/* ---------- крошки и утилиты ---------- */
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:0 14px; font:400 13px/1.4 var(--m); color:var(--muted)}
.crumbs a{display:inline-flex; align-items:center; min-height:44px; color:var(--muted)}
.crumbs a:hover{color:var(--text)}
.mt-s{margin-top:18px}
.mt-m{margin-top:16px}

/* ---------- подвал ---------- */
.ft{background:#0B0D10; border-top:1px solid var(--line); padding:48px 0 28px}
.ft-top{display:grid; gap:20px; margin-bottom:36px}
.ft-lg img{height:22px; width:auto}
.ft-top p{color:var(--muted); font-size:15px; margin:14px 0 0; max-width:44ch}
.ft-act{display:grid; gap:10px}
.ft-act .btn{width:100%}
@media (min-width:700px){
  .ft-top{grid-template-columns:1.4fr 1fr; align-items:center}
  .ft-act{grid-template-columns:auto auto; justify-content:end}
  .ft-act .btn{width:auto}
}
.ft-map{display:grid; gap:26px 28px; grid-template-columns:1fr}
.ft-h{font-family:var(--h); font-weight:600; font-size:15px; color:var(--text); margin:0 0 10px}
.ft-map a{display:block; padding:6px 0; color:var(--muted); font-size:14.5px}
.ft-h + .ft-h,.ft-h2{margin-top:22px}
.ft-map a:hover{color:var(--text)}
.ft-bot{border-top:1px solid var(--line); margin-top:32px; padding-top:20px;
        display:grid; gap:10px; color:#8A9199; font-size:13px}
.ft-bot a{color:#A6ADB5; white-space:nowrap}
@media (min-width:700px){ .ft-map{grid-template-columns:repeat(3,1fr)} }
@media (min-width:941px){ .ft-map{grid-template-columns:repeat(4,1fr)} .ft-bot{grid-template-columns:1fr auto} }

/* ---------- появление блоков ----------
   Контент прячется ТОЛЬКО когда скрипт жив: без .js страница обязана читаться. */
@media (prefers-reduced-motion:no-preference){
  html.js .rv{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease}
  html.js .rv.in{opacity:1; transform:none}
}

/* ---------- страница услуги (money-посадка) ----------
   Первый экран без фотографии: кадр работает на главной, а на четырнадцати
   страницах услуг подряд он превращается в шум и тянет вес. Здесь важнее,
   чтобы сразу читались крошки, ответ на запрос, факты и якоря. */
.pg-head{border-top:0; padding:24px 0 56px}
.pg-head h1{max-width:18ch}
.pg-head .lead{margin-bottom:0}
@media (min-width:941px){ .pg-head{padding:32px 0 72px} }

/* Строка прайса: работа слева, цена справа. Цена не переносится и не разрывается
   на «от 950» / «₽/м²» — сумма это один смысловой отрезок (price_wrap_lint). */
.price-rows li{display:flex; align-items:baseline; justify-content:space-between; gap:16px}
.price-rows b{margin-bottom:0}
.price-rows .nowrap{white-space:nowrap; font-family:var(--m); font-size:15px;
                    color:var(--paper-text); font-weight:600}

/* Состав работ и документы: тот же каркас, что у слоёв пирога, но на светлом. */
.paper .layers{border-color:var(--paper-line)}
.paper .layers li{background:#fff; border-bottom-color:var(--paper-line)}
.paper .layers b{color:var(--paper-text)}
.paper .layers span{color:var(--paper-muted)}

/* Ссылка внутри текста отличается подчёркиванием, а не цветом: лайм закреплён
   за действием. Цвет объявляется вместе с фоном, наследование тут не годится. */
.price-note a,.faq .a a,.layers span a{text-decoration:underline; text-underline-offset:3px;
                                       text-decoration-thickness:1px}
.paper .price-note a,.paper .layers span a{color:var(--paper-text)}
.faq .a a,.layers span a{color:var(--text)}

/* ---------- показатели команды на светлой секции ----------
   Тот же приём, что в первом экране, но для .paper: цвета объявляются вместе
   с фоном, а не наследуются — иначе тёмные токены первого экрана дают белое
   по белому (CONTRAST_STANDARD). */
.paper .facts-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:8px;
            background:var(--paper-line); border:1px solid var(--paper-line); border-radius:14px; overflow:hidden}
.paper .facts-grid > div{background:#fff; padding:22px 20px; min-width:0}
.paper .facts-grid b{display:block; font:700 clamp(24px,4vw,34px)/1.05 var(--h); color:var(--paper-text);
              letter-spacing:-.02em; white-space:nowrap}
.paper .facts-grid span{display:block; margin-top:8px; font:400 14px/1.4 var(--b); color:var(--paper-muted)}
@media (max-width:860px){ .paper .facts-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:420px){ .paper .facts-grid b{font-size:22px} }

/* ---------- квиз подбора решения ----------
   Заменил калькулятор 22.08: заказчик снял его как невыполнимый («смета из 100+
   позиций»), взамен согласовал квиз из нескольких вопросов с контактами в конце.
   Цвета объявлены вместе с фоном: секция светлая, токены — paper-*. */
.quiz{max-width:760px; margin-top:8px}
.quiz-bar{height:4px; background:var(--line); border-radius:999px; overflow:hidden}
.quiz-bar span{display:block; height:100%; background:var(--accent); transition:width .25s ease}
.quiz-num{margin-top:12px; font:500 13px/1 var(--b); color:var(--muted); letter-spacing:.04em}
.quiz-step{border:0; margin:0; padding:22px 0 0}
.quiz-step legend{padding:0; font:700 clamp(20px,4.4vw,27px)/1.2 var(--h); color:var(--text)}
.quiz-opts{display:grid; gap:12px; margin-top:20px}
@media (min-width:720px){ .quiz-opts{grid-template-columns:1fr 1fr} }
.quiz-opt{display:flex; align-items:center; min-height:60px; width:100%; padding:14px 18px; text-align:left;
          background:var(--block); color:var(--text); border:1px solid var(--line); border-radius:14px;
          font:500 16px/1.35 var(--b); cursor:pointer; transition:border-color .15s, background .15s}
.quiz-opt:hover{border-color:var(--accent); background:var(--block-2, var(--block))}
.quiz-back{margin-top:18px; background:none; border:0; padding:8px 0; color:var(--muted);
           font:500 14px/1 var(--b); cursor:pointer}
.quiz-back:hover{color:var(--text)}
.quiz-final .note{margin-top:10px; color:var(--muted); font-size:15px; line-height:1.5}
.quiz-final form{margin-top:20px}
.quiz-final .agree{display:flex; gap:10px; align-items:flex-start; margin:16px 0; font-size:14.5px; color:var(--muted)}
.quiz-final .agree input{margin-top:3px; flex-shrink:0}
.quiz-final .agree a{color:var(--text); text-decoration:underline}
#quiz-msg{margin-bottom:14px; padding:12px 16px; border-radius:12px; font-size:15px}
#quiz-msg.ok{background:#16351C; color:#CFE9D4; border:1px solid #2C5C36}
#quiz-msg.err{background:#3A1D1B; color:#F3D0CC; border:1px solid #6B322C}