/* ===================================================================
   «Соловьёв. Ремонт» — стили сайта. Редакция 1 (27.09.2026).

   СРЕДА. Утверждённое направление 2 «Орех и графит» (Вадим, 26.09.2026).
   Графит держит первый экран, объекты и фото; длинные тексты, сметы, этапы,
   FAQ и SEO-текст — на светлых секциях (его просьба 26.09). Правила — BRAND_SBORKA.md.

   ПАЛИТРА РОЛЕЙ (CONTRAST_STANDARD). Акцент в трёх ролях:
     --accent          #D2A06A  заливка кнопки и линии на графите (графит на нём 7,3 : 1)
     --accent-on-dark  #D2A06A  ссылки и цифры на графите (7,3 : 1)
     --accent-text     #8A5A2B  ссылки и акцент в светлых секциях (5,2 : 1)
   Орех текстом на молочном запрещён (2,1 : 1). У блока со своим фоном цвет
   текста объявляется вместе с фоном. @media только min-width.
   =================================================================== */

:root{
  --bg:#1B1C1E; --bg-deep:#161719; --bg-raised:#232528;
  --ink:#F2F1EE; --ink-2:#D6D5D1; --ink-3:#A9ADB4;
  --line:#2E3034; --line-strong:#52565D;
  --accent:#D2A06A; --accent-hover:#DDB183; --on-accent:#1B1C1E; --accent-on-dark:#D2A06A;
  --light-bg:#F2F1EE; --light-card:#FAF8F4; --light-ink:#1B1C1E; --light-ink-2:#4B4E54;
  --light-line:#DDD9D1; --accent-text:#8A5A2B;
  --ok-on-dark:#7FC98A; --err-on-dark:#F0A08A; --err-on-light:#A33A22;

  --head:'Unbounded','Manrope',sans-serif;
  --body:'Manrope',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --mono:'Space Mono',ui-monospace,Menlo,monospace;

  --wrap:1200px; --gut:20px; --section-y:64px;
  --r:12px; --r-img:16px; --pill:999px;
  --hdr:68px;
}
@media (min-width:641px){ :root{ --gut:32px } }
@media (min-width:1041px){ :root{ --section-y:96px; --r-img:20px; --hdr:76px } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--hdr) + 12px)}
body{margin:0; background:var(--bg,#1B1C1E); color:var(--ink,#F2F1EE);
     font:400 17px/1.6 var(--body); -webkit-font-smoothing:antialiased; overflow-x:clip}
img,svg{max-width:100%; display:block}
a{color:var(--accent-on-dark,#D2A06A); text-underline-offset:3px}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut)}
h1,h2,h3{margin:0; font-family:var(--head); font-weight:500; letter-spacing:-.01em; line-height:1.16}
h1{font-size:clamp(28px,5.6vw,52px)}
h2{font-size:clamp(24px,3.6vw,38px)}
h3{font-size:clamp(18px,2vw,21px); line-height:1.25}
p{margin:0 0 14px; max-width:68ch}
p:last-child{margin-bottom:0}
.hidden{display:none!important}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ── Секции: тёмная по умолчанию, светлая — для длинного текста ── */
.sec{padding-top:var(--section-y,64px); padding-bottom:var(--section-y,64px); background:var(--bg,#1B1C1E); color:var(--ink,#F2F1EE)}
.sec.deep{background:var(--bg-deep,#161719); color:var(--ink,#F2F1EE)}
.sec.light{background:var(--light-bg,#F2F1EE); color:var(--light-ink,#1B1C1E)}
.sec.light a{color:var(--accent-text,#8A5A2B)}
.sec + .sec:not(.light):not(.deep){border-top:1px solid var(--line,#2E3034)}
.sec-head{display:grid; gap:12px; margin-bottom:32px; max-width:760px}
.sec-head p{color:var(--ink-2,#D6D5D1); font-size:18px}
.sec.light .sec-head p{color:var(--light-ink-2,#4B4E54)}
.kicker{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:14px; line-height:1.4;
        letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3,#A9ADB4)}
.kicker::before{content:""; width:22px; height:3px; border-radius:2px; background:var(--accent,#D2A06A); flex:0 0 22px}
.sec.light .kicker{color:var(--light-ink-2,#4B4E54)}
.sec.light .kicker::before{background:var(--accent-text,#8A5A2B)}
.muted{color:var(--ink-3,#A9ADB4)}
.sec.light .muted{color:var(--light-ink-2,#4B4E54)}

/* ── Кнопки ── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 26px;
     border-radius:var(--pill); border:1px solid transparent; font:700 16px/1.2 var(--body); text-decoration:none;
     cursor:pointer; transition:background .2s ease, border-color .2s ease, color .2s ease}
.btn-p{background:var(--accent,#D2A06A); color:var(--on-accent,#1B1C1E)}
.btn-p:hover{background:var(--accent-hover,#DDB183); color:var(--on-accent,#1B1C1E)}
.btn-s{background:transparent; color:var(--ink,#F2F1EE); border-color:var(--line-strong,#52565D)}
.btn-s:hover{border-color:var(--accent,#D2A06A); color:var(--ink,#F2F1EE)}
.sec.light .btn-s{color:var(--light-ink,#1B1C1E); border-color:#9A968E}
.sec.light .btn-s:hover{border-color:var(--accent-text,#8A5A2B)}
.btn-wide{width:100%}
.btns{display:flex; flex-wrap:wrap; gap:12px}

/* ── Шапка ── */
.hdr{position:sticky; top:0; z-index:40; background:rgba(22,23,25,.94); color:var(--ink,#F2F1EE);
     border-bottom:1px solid var(--line,#2E3034); backdrop-filter:blur(8px)}
.hdr-in{display:flex; align-items:center; gap:18px; min-height:var(--hdr)}
.lockup{display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink,#F2F1EE); min-width:0}
.lockup .word{font-family:var(--head); font-weight:500; font-size:17px; line-height:1.1; white-space:nowrap}
.lockup .word small{display:block; font-family:var(--body); font-weight:500; font-size:13px; color:var(--ink-3,#A9ADB4); margin-top:3px}
.nav{display:none; gap:26px; margin-left:auto}
.nav a{color:var(--ink,#F2F1EE); text-decoration:none; font-weight:600; font-size:15px; padding:10px 0}
.nav a:hover{color:var(--accent-on-dark,#D2A06A)}
.hdr-phone{display:none; color:var(--ink,#F2F1EE); text-decoration:none; font-weight:700; white-space:nowrap}
.hdr .btn{display:none; min-height:44px; padding:0 20px; font-size:15px}
.burger{margin-left:auto; width:44px; height:44px; border:1px solid var(--line-strong,#52565D); border-radius:12px;
        background:transparent; color:var(--ink,#F2F1EE); cursor:pointer; display:grid; place-items:center}
.burger span,.burger span::before,.burger span::after{display:block; width:18px; height:2px; background:currentColor; border-radius:2px; position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0}
.burger span::before{top:-6px} .burger span::after{top:6px}
@media (min-width:1041px){
  .nav{display:flex}
  .hdr-phone{display:inline-flex}
  .hdr .btn{display:inline-flex}
  .burger{display:none}
}
.mmenu{position:fixed; inset:0; z-index:60; background:var(--bg-deep,#161719); color:var(--ink,#F2F1EE);
       display:none; flex-direction:column; overflow:auto}
.mmenu.open{display:flex}
.mmenu-top{display:flex; align-items:center; justify-content:space-between; min-height:var(--hdr)}
.mmenu-close{width:44px; height:44px; border-radius:12px; border:1px solid var(--line-strong,#52565D); background:transparent;
             color:var(--ink,#F2F1EE); font-size:18px; cursor:pointer}
.mmenu nav{display:grid; padding-top:12px; padding-bottom:12px}
.mmenu nav a{color:var(--ink,#F2F1EE); text-decoration:none; font-family:var(--head); font-weight:500; font-size:22px;
             padding:14px 0; border-bottom:1px solid var(--line,#2E3034)}
.mmenu-foot{display:grid; gap:14px; padding-top:18px; padding-bottom:28px}
.mmenu-foot .phone{color:var(--ink,#F2F1EE); font-weight:700; font-size:20px; text-decoration:none}

/* ── Первый экран ── */
.hero{position:relative; display:flex; min-height:min(calc(100svh - var(--hdr)), 820px); background:var(--bg-deep,#161719); color:#F2F1EE; overflow:hidden}
.hero picture,.hero .hero-img{position:absolute; inset:0; width:100%; height:100%}
.hero .hero-img{object-fit:cover}
.hero-sh{position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(22,23,25,.35) 0%,rgba(22,23,25,.55) 45%,rgba(22,23,25,.94) 100%)}
@media (min-width:1041px){
  .hero-sh{background:linear-gradient(90deg,rgba(22,23,25,.92) 0%,rgba(22,23,25,.72) 42%,rgba(22,23,25,.18) 75%,rgba(22,23,25,.05) 100%)}
}
.hero-in{position:relative; width:100%; display:flex; flex-direction:column; justify-content:flex-end; gap:22px;
         padding-top:40px; padding-bottom:36px}
@media (min-width:1041px){ .hero-in{justify-content:center; padding-top:56px; padding-bottom:56px} }
.hero .kicker{color:#D6D5D1}
.hero h1{color:#F2F1EE; max-width:15ch}
.hero .lead{color:#D6D5D1; font-size:clamp(17px,1.6vw,19px); max-width:46ch; margin:0}
.hero .btns{margin-top:4px}
.hero .btn-s{color:#F2F1EE; border-color:rgba(242,241,238,.5); background:rgba(22,23,25,.35)}
.facts{display:grid; grid-template-columns:1fr; gap:10px; margin-top:6px; max-width:760px}
@media (min-width:560px){ .facts{grid-template-columns:repeat(3,1fr); gap:14px} }
.fact{border-left:2px solid var(--accent,#D2A06A); padding:2px 0 2px 12px}
.fact b{display:block; font-family:var(--head); font-weight:500; font-size:clamp(18px,2vw,22px); color:#F2F1EE; white-space:nowrap}
.fact span{font-size:14px; color:#D6D5D1}
.hero-cap{position:absolute; right:var(--gut); bottom:12px; font-family:var(--mono); font-size:13px; color:#D6D5D1; display:none}
@media (min-width:1041px){ .hero-cap{display:block} }

/* ── Две ветки ── */
.vetki{display:grid; gap:16px}
@media (min-width:900px){ .vetki{grid-template-columns:1fr 1fr} }
.vetka{display:flex; flex-direction:column; gap:14px; padding:26px 22px; border-radius:var(--r); border:1px solid var(--line-strong,#52565D);
       background:var(--bg-raised,#232528); color:var(--ink,#F2F1EE)}
.vetka .price{font-family:var(--head); font-weight:500; font-size:clamp(24px,3vw,32px); color:var(--accent-on-dark,#D2A06A)}
.vetka .price small{font-family:var(--body); font-size:15px; font-weight:500; color:var(--ink-3,#A9ADB4)}
.vetka p{color:var(--ink-2,#D6D5D1); margin:0}
.vetka ul{margin:0; padding:0; list-style:none; display:grid; gap:8px}
.vetka li{position:relative; padding-left:18px; color:var(--ink-2,#D6D5D1)}
.vetka li::before{content:""; position:absolute; left:0; top:.8em; width:8px; height:2px; background:var(--accent,#D2A06A)}
.vetka .btns{margin-top:auto; padding-top:6px}

/* ── Схема ── */
.shema{margin:0; display:grid; gap:14px}
.shema svg{width:100%; height:auto; max-width:1100px}
.shema figcaption{color:var(--light-ink-2,#4B4E54); font-size:15px; max-width:70ch}
.shema-wide{display:none} .shema-tall{display:block; max-width:520px} .shema svg.shema-one{max-width:520px}
@media (min-width:760px){ .shema-wide{display:block} .shema-tall{display:none} }

/* ── Витрина разделов ── */
.vitrina{display:grid; gap:12px}
@media (min-width:640px){ .vitrina{grid-template-columns:1fr 1fr} }
@media (min-width:1041px){ .vitrina{grid-template-columns:repeat(3,1fr)} }
.vk{display:flex; flex-direction:column; gap:8px; padding:20px; border-radius:var(--r); border:1px solid var(--line-strong,#52565D);
    background:var(--bg-raised,#232528); color:var(--ink,#F2F1EE); text-decoration:none; transition:border-color .2s ease, transform .2s ease}
.vk:hover{border-color:var(--accent,#D2A06A); transform:translateY(-2px)}
.vk b{font-family:var(--head); font-weight:500; font-size:18px; line-height:1.25; color:var(--ink,#F2F1EE)}
.vk span{font-size:15px; color:var(--ink-3,#A9ADB4)}
.vk i{font-style:normal; margin-top:auto; font-weight:700; font-size:15px; color:var(--accent-on-dark,#D2A06A)}

/* ── Объекты ── */
.obj-grid{display:grid; gap:16px}
@media (min-width:760px){ .obj-grid{grid-template-columns:1fr 1fr} }
@media (min-width:1041px){ .obj-grid{grid-template-columns:repeat(3,1fr)} }
.obj{display:flex; flex-direction:column; border-radius:var(--r-img); overflow:hidden; border:1px solid var(--line-strong,#52565D);
     background:var(--bg-raised,#232528); color:var(--ink,#F2F1EE); text-decoration:none; transition:border-color .2s ease}
.obj:hover{border-color:var(--accent,#D2A06A)}
.obj .ph{aspect-ratio:4/3; overflow:hidden; background:var(--bg-deep,#161719)}
.obj .ph img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.obj:hover .ph img{transform:scale(1.03)}
.obj .b{padding:16px 18px 18px; display:grid; gap:6px}
.obj .t{font-family:var(--head); font-weight:500; font-size:18px; color:var(--ink,#F2F1EE)}
.obj .m{font-family:var(--mono); font-size:14px; color:var(--accent-on-dark,#D2A06A)}
.obj .d{font-size:15px; color:var(--ink-2,#D6D5D1)}
.obj-more{margin-top:22px}

/* ── Кейс ── */
.keys{display:grid; gap:0; border-radius:var(--r-img); overflow:hidden; border:1px solid var(--line-strong,#52565D); background:var(--bg-raised,#232528); color:var(--ink,#F2F1EE)}
@media (min-width:900px){ .keys{grid-template-columns:1.1fr 1fr} }
.keys .ph{min-height:260px; position:relative}
.keys .ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.keys .b{padding:24px 22px; display:grid; gap:16px; align-content:start}
.keys dl{margin:0; display:grid; gap:14px}
.keys dt{font-family:var(--mono); font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-on-dark,#D2A06A)}
.keys dd{margin:4px 0 0; color:var(--ink-2,#D6D5D1)}

/* ── Отзывы ── */
.otz{display:grid; gap:16px}
@media (min-width:900px){ .otz{grid-template-columns:1.2fr 1fr} }
.otz-empty{padding:24px 22px; border-radius:var(--r); border:1px dashed var(--line-strong,#52565D); background:var(--bg-raised,#232528); color:var(--ink-2,#D6D5D1)}
.otz-empty b{color:var(--ink,#F2F1EE)}

/* ── Этапы (светлая секция) ── */
.etapy{margin:0; padding:0; list-style:none; display:grid; gap:12px; counter-reset:et}
@media (min-width:760px){ .etapy{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1041px){ .etapy{grid-template-columns:repeat(3,1fr)} }
.etapy li{counter-increment:et; padding:20px 20px 18px; border-radius:var(--r); background:var(--light-card,#FAF8F4);
          border:1px solid var(--light-line,#DDD9D1); color:var(--light-ink-2,#4B4E54); display:grid; gap:6px; align-content:start}
.etapy li::before{content:counter(et, decimal-leading-zero); font-family:var(--mono); font-size:14px; color:var(--accent-text,#8A5A2B)}
.etapy b{font-family:var(--head); font-weight:500; font-size:18px; color:var(--light-ink,#1B1C1E)}

/* ── Опоры ── */
.opory{display:grid; gap:12px}
@media (min-width:760px){ .opory{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1041px){ .opory{grid-template-columns:repeat(4,1fr)} }
.opora{padding:20px; border-top:2px solid var(--accent,#D2A06A); background:var(--bg-raised,#232528); color:var(--ink-2,#D6D5D1); border-radius:0 0 var(--r) var(--r)}
.opora b{display:block; font-family:var(--head); font-weight:500; font-size:18px; line-height:1.25; color:var(--ink,#F2F1EE); margin-bottom:8px}

/* ── FAQ (светлая) ── */
.faq{display:grid; gap:10px; max-width:900px}
.faq details{border-radius:var(--r); background:var(--light-card,#FAF8F4); border:1px solid var(--light-line,#DDD9D1); color:var(--light-ink,#1B1C1E)}
.faq summary{cursor:pointer; list-style:none; padding:18px 52px 18px 20px; position:relative; font-weight:700; font-size:17px; color:var(--light-ink,#1B1C1E)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:22px; color:var(--accent-text,#8A5A2B)}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 20px 18px; color:var(--light-ink-2,#4B4E54)}

/* ── SEO-текст (светлая) ── */
.seo-text{max-width:820px; color:var(--light-ink-2,#4B4E54)}
.seo-text h2{color:var(--light-ink,#1B1C1E); margin-bottom:16px}
.seo-text h3{color:var(--light-ink,#1B1C1E); margin:26px 0 10px}

/* ── Форма ── */
.formwrap{display:grid; gap:28px}
@media (min-width:1041px){ .formwrap{grid-template-columns:1.3fr 1fr; gap:56px} }
.form-fields{display:grid; gap:14px}
.f-row{display:grid; gap:14px}
@media (min-width:640px){ .f-row{grid-template-columns:1fr 1fr} }
.field{display:grid; gap:6px}
.field label{font-weight:600; font-size:15px; color:var(--ink-2,#D6D5D1)}
.field input,.field textarea{width:100%; min-height:52px; padding:14px 16px; border-radius:12px; border:1px solid var(--line-strong,#52565D);
  background:var(--bg-raised,#232528); color:var(--ink,#F2F1EE); font:400 17px/1.4 var(--body)}
.field textarea{min-height:120px; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#8C9098}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent,#D2A06A); outline-offset:1px}
.field .msg{display:none; font-size:14px; color:var(--err-on-dark,#F0A08A)}
.field.err input{border-color:var(--err-on-dark,#F0A08A)}
.field.err .msg{display:block}
.field.ok input{border-color:var(--ok-on-dark,#7FC98A)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.agree{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink-2,#D6D5D1); cursor:pointer}
.agree input{width:22px; height:22px; margin:1px 0 0; accent-color:#D2A06A; flex:0 0 22px}
.agree.err span{color:var(--err-on-dark,#F0A08A)}
.form-note{font-size:14px; color:var(--ink-3,#A9ADB4); margin:0}
.form-msg{display:none; padding:14px 16px; border-radius:12px; border:1px solid var(--err-on-dark,#F0A08A); color:var(--ink,#F2F1EE); margin-bottom:14px}
.form-msg.show{display:block}
.form-done{display:none; padding:24px 22px; border-radius:var(--r); border:1px solid var(--ok-on-dark,#7FC98A); background:var(--bg-raised,#232528); color:var(--ink,#F2F1EE)}
.form-done.show{display:block}
.form-done .big{font-family:var(--head); font-size:24px; margin-bottom:8px}
.form-side{display:grid; gap:12px; align-content:start; padding:22px; border-radius:var(--r); border:1px solid var(--line-strong,#52565D); background:var(--bg-raised,#232528); color:var(--ink-2,#D6D5D1)}
.form-side b{color:var(--ink,#F2F1EE)}
.form-side .phone{font-family:var(--head); font-size:22px; color:var(--ink,#F2F1EE); text-decoration:none}
.btn.is-loading{opacity:.7}

/* ── Подвал ── */
.ftr{background:var(--bg-deep,#161719); color:var(--ink-3,#A9ADB4); border-top:1px solid var(--line,#2E3034); padding:56px 0 110px; font-size:15px}
@media (min-width:1041px){ .ftr{padding-bottom:40px} }
.foot-top{display:grid; gap:32px}
@media (min-width:760px){ .foot-top{grid-template-columns:1fr 1fr} }
@media (min-width:1041px){ .foot-top{grid-template-columns:1.4fr repeat(4,1fr)} }
.foot-brand{display:grid; gap:14px; align-content:start}
.foot-brand p{margin:0; color:var(--ink-3,#A9ADB4)}
.foot-phone{color:var(--ink,#F2F1EE); font-family:var(--head); font-size:20px; text-decoration:none}
.foot-contact{display:grid; gap:8px}
.foot-contact a{color:var(--ink-2,#D6D5D1)}
.foot-col{display:grid; gap:8px; align-content:start}
.fh{margin:0 0 4px; font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink,#F2F1EE)}
.foot-col a{color:var(--ink-3,#A9ADB4); text-decoration:none; padding:3px 0}
.foot-col a:hover{color:var(--accent-on-dark,#D2A06A)}
.foot-geo{margin-top:36px; padding-top:24px; border-top:1px solid var(--line,#2E3034); display:grid; gap:10px}
.foot-chips{display:flex; flex-wrap:wrap; gap:8px}
.foot-chips a{padding:8px 14px; border-radius:var(--pill); border:1px solid var(--line-strong,#52565D); color:var(--ink-2,#D6D5D1); text-decoration:none; font-size:14px}
.foot-chips a:hover{border-color:var(--accent,#D2A06A)}
.foot-bottom{margin-top:28px; padding-top:20px; border-top:1px solid var(--line,#2E3034); display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between}
.foot-links{display:flex; flex-wrap:wrap; gap:8px 20px}
.foot-links a{color:var(--ink-3,#A9ADB4)}
.foot-note{margin-top:16px; font-size:13px; color:#8C9098; max-width:none}

/* ── Мобильная панель и плавающая кнопка ── */
.mcta{position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; gap:10px; padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
      background:rgba(22,23,25,.96); border-top:1px solid var(--line,#2E3034); transform:translateY(110%); transition:transform .25s ease}
.mcta.show{transform:none}
.mcta .btn{flex:1 1 auto; min-height:48px}
.mcta .tel{flex:0 0 48px; height:48px; border-radius:var(--pill); border:1px solid var(--line-strong,#52565D); display:grid; place-items:center; color:var(--ink,#F2F1EE)}
@media (min-width:1041px){ .mcta{display:none} }

/* ── Крошки и заглушки ── */
.crumbs{padding-top:18px; font-size:14px; color:var(--ink-3,#A9ADB4); display:flex; flex-wrap:wrap; gap:8px}
.crumbs a{color:var(--ink-3,#A9ADB4)}
.stub h1{margin:10px 0 14px; max-width:22ch}
.stub .lead{color:var(--ink-2,#D6D5D1); font-size:18px; max-width:60ch}
.stub-note{margin:28px 0; padding:20px 22px; border-radius:var(--r); background:var(--light-bg,#F2F1EE); color:var(--light-ink-2,#4B4E54); max-width:760px}
.stub-note b{color:var(--light-ink,#1B1C1E); display:block; margin-bottom:6px}
.stub-note a{color:var(--accent-text,#8A5A2B)}
.stub-links ul{margin:14px 0 28px; padding:0; list-style:none; display:grid; gap:8px}
@media (min-width:760px){ .stub-links ul{grid-template-columns:1fr 1fr} }
.stub-links a{color:var(--ink,#F2F1EE); text-decoration:none; display:block; padding:12px 16px; border-radius:12px; border:1px solid var(--line-strong,#52565D)}
.stub-links a:hover{border-color:var(--accent,#D2A06A)}

/* ── Появление: только CSS, контент виден без JS ── */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .hero-in{animation:vsplyt .7s ease-out both}
}
@keyframes vsplyt{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }
.seo-sec{border-top:1px solid var(--light-line,#DDD9D1)}

/* Плавающая кнопка целевого действия (десктоп): после 600 px прокрутки, прячется у формы */
.cta-float{position:fixed; right:24px; bottom:24px; z-index:45; box-shadow:0 10px 30px rgba(0,0,0,.35);
           opacity:0; pointer-events:none; transform:translateY(12px); transition:opacity .25s ease, transform .25s ease; display:none}
@media (min-width:1041px){ .cta-float{display:inline-flex} }
.cta-float.show{opacity:1; pointer-events:auto; transform:none}

/* Витрина на телефоне — только названия: девять карточек с описанием уводят форму на три экрана вниз */
@media (max-width:639px){ .vk span{display:none} .vk{padding:16px 18px} }

/* ===== Внутренние страницы (page-standard): статья на светлом, первый экран на графите ===== */
.ph-hero{background:var(--bg-deep,#161719); color:var(--ink,#F2F1EE); padding-bottom:40px}
.ph-grid{display:grid; gap:28px; padding-top:18px}
@media (min-width:1041px){ .ph-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; align-items:start; padding-top:28px} }
.ph-hero h1{color:var(--ink,#F2F1EE); font-size:clamp(28px,4.6vw,46px); margin:12px 0 14px; max-width:20ch}
.ph-hero .lead{color:var(--ink-2,#D6D5D1); font-size:clamp(17px,1.5vw,19px); max-width:56ch}
.ph-status{font-family:var(--mono); font-size:13px; color:var(--ink-3,#A9ADB4); margin:0 0 16px}
.ph-media{border-radius:var(--r-img); overflow:hidden; aspect-ratio:4/5; background:var(--bg-raised,#232528); position:relative}
.ph-media img{width:100%; height:100%; object-fit:cover}
.ph-media figcaption{position:absolute; left:12px; bottom:12px; font-family:var(--mono); font-size:13px; color:#D6D5D1; background:rgba(22,23,25,.78); padding:4px 10px; border-radius:999px}
@media (max-width:1040px){ .ph-media{aspect-ratio:4/3} }
.fcard{display:grid; grid-template-columns:1fr; gap:0; margin-top:22px; border:1px solid var(--line-strong,#52565D); border-radius:var(--r); overflow:hidden; background:var(--bg-raised,#232528)}
@media (min-width:560px){ .fcard{grid-template-columns:1fr 1fr} }
.fcard div{padding:12px 16px; border-bottom:1px solid var(--line,#2E3034); display:grid; gap:2px}
.fcard dt{font-size:14px; color:var(--ink-3,#A9ADB4)}
.fcard dd{margin:0; font-family:var(--head); font-weight:500; font-size:17px; color:var(--ink,#F2F1EE)}

.art{max-width:780px}
.art h2{color:var(--light-ink,#1B1C1E); font-size:clamp(23px,3vw,32px); margin:52px 0 16px}
.art h2:first-child{margin-top:0}
.art h3{color:var(--light-ink,#1B1C1E); margin:28px 0 10px}
.art p,.art li{color:var(--light-ink-2,#4B4E54); font-size:18px; line-height:1.65}
.art ul,.art ol{padding-left:22px; margin:0 0 16px}
.art li{margin-bottom:6px}
.art b{color:var(--light-ink,#1B1C1E)}
.art-grid{display:grid; gap:40px}
@media (min-width:1041px){ .art-grid{grid-template-columns:minmax(0,780px) minmax(0,300px); justify-content:space-between} }
.toc{align-self:start; padding:18px 20px; border-radius:var(--r); background:var(--light-card,#FAF8F4); border:1px solid var(--light-line,#DDD9D1); color:var(--light-ink,#1B1C1E)}
@media (min-width:1041px){ .toc{position:sticky; top:calc(var(--hdr) + 20px); order:2} }
.toc b{display:block; font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--light-ink-2,#4B4E54); margin-bottom:8px}
.toc ol{margin:0; padding-left:20px; display:grid; gap:6px}
.toc a{color:var(--light-ink,#1B1C1E); text-decoration:none; font-size:15px}
.toc a:hover{color:var(--accent-text,#8A5A2B)}
.art figure{margin:24px 0}
.art figure img{border-radius:var(--r-img)}
.art figcaption{font-size:15px; color:var(--light-ink-2,#4B4E54); margin-top:8px}
.art .ph2{display:grid; gap:12px}
@media (min-width:640px){ .art .ph2{grid-template-columns:1fr 1fr} }
.art .ph2 img{width:100%; aspect-ratio:3/4; object-fit:cover}
.note{padding:18px 20px; border-radius:var(--r); border-left:4px solid var(--accent-text,#8A5A2B); background:var(--light-card,#FAF8F4); margin:20px 0}
.note p{margin:0; font-size:17px}
.tbl-wrap{overflow-x:auto; margin:18px 0}
.tbl{width:100%; border-collapse:collapse; min-width:520px; font-size:16px; background:var(--light-card,#FAF8F4); color:var(--light-ink,#1B1C1E)}
.tbl th,.tbl td{padding:12px 14px; border-bottom:1px solid var(--light-line,#DDD9D1); text-align:left; vertical-align:top}
.tbl th{font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--light-ink-2,#4B4E54)}
.cta-in{margin:36px 0; padding:24px 22px; border-radius:var(--r); background:var(--bg,#1B1C1E); color:var(--ink,#F2F1EE); display:grid; gap:12px}
.cta-in p{color:var(--ink-2,#D6D5D1)!important; margin:0}
.cta-in b{color:var(--ink,#F2F1EE)!important; font-family:var(--head); font-weight:500; font-size:21px}
.cta-in a.btn{color:var(--on-accent,#1B1C1E); justify-self:start}
.related{display:grid; gap:10px}
@media (min-width:640px){ .related{grid-template-columns:1fr 1fr} }
@media (min-width:1041px){ .related{grid-template-columns:repeat(3,1fr)} }
.checked{font-size:15px; color:var(--light-ink-2,#4B4E54); margin-top:28px}
.vk-light{background:var(--light-card,#FAF8F4); border-color:var(--light-line,#DDD9D1); color:var(--light-ink,#1B1C1E)}
.vk-light b{color:var(--light-ink,#1B1C1E)}
.vk-light span{color:var(--light-ink-2,#4B4E54)}
.vk-light:hover{border-color:var(--accent-text,#8A5A2B)}
@media (max-width:639px){ .vk-light span{display:block} }
.art .faq{margin-top:8px}
.art-grid > *{min-width:0}
.art figure.one{max-width:420px}
.art figure.one img{width:100%; aspect-ratio:3/4; object-fit:cover}
.otz-row{display:grid; gap:16px}
@media (min-width:900px){ .otz-row{grid-template-columns:1.3fr 1fr} }
.checked a{overflow-wrap:anywhere}
.art .ph2 img,.art figure.one img{height:auto}
.toc ol{gap:0}
.toc a{display:block; padding:10px 0; min-height:44px}
.tbl thead th{background:#EAE6DE; color:var(--light-ink,#1B1C1E); border-bottom:2px solid #CFC9BE}
.tbl tbody tr + tr td{border-top:1px solid var(--light-line,#DDD9D1)}
.tbl{border:1px solid var(--light-line,#DDD9D1); border-radius:10px; overflow:hidden; border-collapse:separate; border-spacing:0}
.ph-media{margin:0}
/* Объекты: фото тремя в ряд, подписи «проект / как стало» (02.10.2026) */
.art .ph3{display:grid; gap:10px; grid-template-columns:1fr 1fr}
@media (min-width:640px){ .art .ph3{grid-template-columns:repeat(3,1fr)} }
.art .ph3 figure,.art .ph2 figure{margin:0}
.art .ph3 img{width:100%; height:auto; aspect-ratio:3/4; object-fit:cover}
.art .ph3 figcaption{font-size:14px}
.art .ph2 + .ph2,.art .ph3 + .ph3{margin-top:12px}
.art .ph2,.art .ph3{margin:24px 0}
.art .ph2.hz img,.art .ph3.hz img{aspect-ratio:4/3}
/* Служебные страницы: шаги внутри статьи и карточка контактов (08.10.2026) */
.art ol.etapy{padding-left:0; margin:18px 0 20px}
@media (min-width:760px){ .art .etapy{grid-template-columns:repeat(2,1fr)} }
.art .etapy li{margin:0; font-size:17px}
.kcard{display:grid; gap:0; border:1px solid var(--line-strong,#52565D); border-radius:var(--r); overflow:hidden; background:var(--bg-raised,#232528); color:var(--ink,#F2F1EE)}
.kcard > div{padding:18px 20px; border-bottom:1px solid var(--line,#2E3034); display:grid; gap:4px}
.kcard > div:last-child{border-bottom:0}
.kcard dt{font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3,#A9ADB4)}
.kcard dd{margin:0; font-family:var(--head); font-weight:500; font-size:clamp(18px,1.8vw,21px); color:var(--ink,#F2F1EE); overflow-wrap:anywhere}
.kcard dd a{color:var(--accent-on-dark,#D2A06A); text-decoration:none; display:inline-block; padding:6px 0; min-height:44px}
.kcard dd a:hover{text-decoration:underline}
.kcard dd small{display:block; font-family:var(--body,inherit); font-weight:400; font-size:15px; color:var(--ink-2,#D6D5D1)}
.ph-hero .kcard{margin-top:22px}

/* Схема вместо фото в шапке гео-страниц. */
.ph-media svg{width:100%; height:100%; display:block}
.art figure.one.wide{max-width:720px}
.art figure.one.wide img{aspect-ratio:auto}