/* =========================================================
   СТОЛЯР: токены и стили сайта
   Палитра «Чертёж и медь» (content/palitra-predlozhenie.md), фирменный шрифт Unbounded.
   Каждый цвет только через переменную. Медь только на главном действии.
   ========================================================= */

:root{
  --ink:           #1C1D1F;  /* графит: текст, тёмные плашки */
  --blueprint:     #16334B;  /* цианотипная синь: единственный тёмный блок */
  --blueprint-2:   #1F4362;
  --paper:         #F6F4EF;  /* основной фон */
  --paper-dim:     #EDEAE3;  /* вторичный фон, карточки */
  --line:          #D9D4C9;
  --line-dark:     #3A3D42;
  --gray:          #5C6066;  /* второстепенный текст, 5,75:1 на бумаге */
  --gray-light:    #A7AAAE;  /* подписи на тёмной сини, 5,6:1 */
  --steel:         #2E6188;  /* ссылки, иконки, 6,0:1 на бумаге */
  --steel-light:   #8FB8CE;  /* на тёмной сини, 6,2:1 */
  --copper:        #A8502A;  /* главное действие, текст бумаги на меди 4,97:1 */
  --copper-dim:    #8A4020;
  --copper-light:  #D98A5B;  /* медь на тёмном, 4,81:1 на сини */
  --ok:            #3F7A68;  /* патина */
  --err:           #A33A3A;
  --ok-dark:       #2C5A4B;  /* текст на плашке «готово» */
  --ok-bg:         #EAF3EF;
  --err-dark:      #7F2B2B;  /* текст на плашке ошибки */
  --err-bg:        #FBEFEF;
  --warn-bg:       #F3EAC6;  /* пометка «заполнить» в документах */
  --copper-hover:  #E5A079;  /* медь на тёмном при наведении */

  --f-display: "Manrope", "Inter", system-ui, sans-serif;
  --f-text:    "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --f-mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --fs-1: clamp(2.35rem, 1.2rem + 4.6vw, 4.5rem);
  --fs-2: clamp(1.75rem, 1.2rem + 2.2vw, 2.9rem);
  --fs-3: clamp(1.2rem, 1.05rem + .7vw, 1.5rem);
  --fs-body: 1.0625rem;
  --fs-small: .9rem;

  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --radius: 3px;
  --ease: cubic-bezier(.32,.72,0,1);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--paper); color:var(--ink); font:var(--fs-body)/1.6 var(--f-text); -webkit-font-smoothing:antialiased; }
img,svg{ max-width:100%; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; letter-spacing:-.02em; line-height:1.1; margin:0; text-wrap:balance; }
h1{ font-size:var(--fs-1); letter-spacing:-.03em; }
h2{ font-size:var(--fs-2); }
h3{ font-size:var(--fs-3); }
p{ margin:0 0 1em; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--copper); outline-offset:3px; border-radius:2px; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.visually-hidden:focus{ position:fixed; left:1rem; top:1rem; width:auto; height:auto; clip:auto; background:var(--paper); padding:.7rem 1rem; z-index:200; outline:2px solid var(--copper); }
[hidden]{ display:none !important; }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section); }
.section--dim{ background:var(--paper-dim); }
.section--dark{ background:var(--blueprint); color:var(--paper); }
.eyebrow{ font:600 .78rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--steel); margin:0 0 1rem; }
.section--dark .eyebrow{ color:var(--steel-light); }
.lede{ color:var(--gray); font-size:1.15rem; max-width:62ch; }
.section--dark .lede{ color:var(--gray-light); }
.section-head{ max-width:760px; margin-bottom:clamp(2rem,4vw,3.5rem); }
.section-head p:last-child{ margin-bottom:0; }

/* кнопки */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:48px; padding:.8rem 1.5rem; border:1.5px solid transparent; border-radius:var(--radius); font:600 .98rem/1.2 var(--f-text); text-decoration:none; cursor:pointer; transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.btn-primary{ background:var(--copper); color:var(--paper); }
.btn-primary:hover{ background:var(--copper-dim); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }
.section--dark .btn-primary{ background:var(--copper-light); color:var(--ink); }
.section--dark .btn-primary:hover{ background:var(--copper-hover); }
.section--dark .btn-ghost{ color:var(--paper); border-color:rgba(246,244,239,.4); }
.section--dark .btn-ghost:hover{ background:var(--paper); color:var(--ink); }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.6; cursor:progress; }
.cta-row{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* шапка */
.site-header{ position:sticky; top:0; z-index:100; background:rgba(246,244,239,.97); border-bottom:1px solid var(--line); }
.site-header .container{ display:flex; align-items:center; gap:1.5rem; min-height:68px; }
.logo{ display:flex; align-items:center; gap:.7rem; text-decoration:none; font:800 1.05rem/1 var(--f-display); letter-spacing:.06em; min-height:44px; }
.logo-mark{ width:30px; height:30px; flex:none; }
.logo small{ display:block; font:500 .75rem/1.2 var(--f-text); letter-spacing:0; color:var(--gray); margin-top:.2rem; }
.main-nav{ display:none; margin-left:auto; }
.main-nav ul{ display:flex; gap:.4rem; }
.main-nav a{ display:inline-flex; align-items:center; min-height:44px; padding:0 .8rem; text-decoration:none; font-size:.92rem; color:var(--ink); border-radius:var(--radius); }
.main-nav a:hover{ background:var(--paper-dim); }
.header-actions{ display:flex; align-items:center; gap:1rem; margin-left:auto; }
.header-phone{ display:inline-flex; align-items:center; min-height:44px; font-weight:700; text-decoration:none; white-space:nowrap; }
.nav-toggle{ width:48px; height:48px; border:1.5px solid var(--ink); background:transparent; border-radius:var(--radius); display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer; }
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{ content:""; display:block; width:20px; height:2px; background:var(--ink); }
.mobile-nav{ position:fixed; inset:68px 0 0 0; z-index:99; background:var(--paper); padding:1.5rem var(--gutter) 6rem; overflow-y:auto; visibility:hidden; opacity:0; transform:translateY(-8px); transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; }
.mobile-nav.is-open{ visibility:visible; opacity:1; transform:none; }
.mobile-nav ul{ display:flex; flex-direction:column; }
.mobile-nav li a{ display:flex; align-items:center; min-height:56px; border-bottom:1px solid var(--line); font:700 1.25rem var(--f-display); text-decoration:none; }
.mobile-nav .cta-row{ margin-top:1.5rem; flex-direction:column; }
@media (min-width:1280px){
  .main-nav{ display:block; }
  .nav-toggle, .mobile-nav{ display:none !important; }
  .header-actions{ margin-left:0; }
}
@media (max-width:1279px){ .header-actions .btn{ display:none; } .logo small{ display:none; } }

/* первый экран */
.hero{ padding-block:clamp(2.5rem,6vw,5.5rem) clamp(3rem,6vw,6rem); position:relative; overflow:hidden; }
.hero-grid{ display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:minmax(0,1fr); align-items:center; }
@media (min-width:980px){ .hero-grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); } }
.hero h1 em{ font-style:normal; color:var(--copper); }
.hero .lede{ margin-top:1.4rem; }
.hero .cta-row{ margin-top:2rem; }
.guarantees{ margin-top:2.2rem; display:grid; gap:.9rem 1.5rem; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line); padding-top:1.5rem; }
@media (min-width:640px){ .guarantees{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.guarantee{ font-size:.88rem; line-height:1.4; color:var(--gray); }
.guarantee b{ display:block; color:var(--ink); font:700 .95rem/1.25 var(--f-display); margin-bottom:.25rem; }
.hero-figure{ margin:0; }
.hero-figure svg{ width:100%; height:auto; display:block; }
.hero-figure figcaption{ margin-top:.8rem; font:.78rem/1.4 var(--f-mono); color:var(--gray); letter-spacing:.02em; }
.dr-line{ stroke:var(--ink); stroke-width:2; fill:none; stroke-linejoin:round; }
.dr-thin{ stroke:var(--gray); stroke-width:1; fill:none; }
.dr-dash{ stroke:var(--gray); stroke-width:1; stroke-dasharray:3 4; fill:none; }
.dr-fill{ fill:var(--paper-dim); }
.dr-dot{ fill:var(--copper); }
.dr-num{ font:700 11px var(--f-mono); fill:var(--paper); text-anchor:middle; }

/* вступление: почему трудно проверить */
.facts{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); grid-template-columns:minmax(0,1fr); }
@media (min-width:860px){ .facts{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.fact{ background:var(--paper); padding:clamp(1.4rem,3vw,2.2rem); }
.fact h3{ margin-bottom:.7rem; }
.fact p{ color:var(--gray); margin:0; font-size:.98rem; }
.fact .n{ font:500 .8rem var(--f-mono); color:var(--steel); display:block; margin-bottom:1rem; }
.bridge{ margin-top:clamp(1.8rem,3vw,2.5rem); font:700 var(--fs-3)/1.3 var(--f-display); max-width:30ch; letter-spacing:-.01em; }
.bridge em{ font-style:normal; color:var(--copper); }

/* разрез кровельного пирога */
.layers{ display:grid; gap:clamp(1.8rem,4vw,3.5rem); grid-template-columns:minmax(0,1fr); }
@media (min-width:980px){ .layers{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start; } .layers-fig{ position:sticky; top:96px; } }
.layers-fig svg{ width:100%; height:auto; display:block; }
.band{ cursor:pointer; outline:none; }
.band .b-shape{ stroke:rgba(246,244,239,.55); stroke-width:1.2; transition:stroke .2s var(--ease), fill .2s var(--ease); }
.band .b-num{ fill:var(--blueprint); font:700 12px var(--f-mono); text-anchor:middle; }
.band .b-dot{ fill:var(--steel-light); transition:fill .2s var(--ease); }
.band .b-label{ fill:var(--paper); font:600 14px var(--f-text); }
.band:hover .b-shape, .band:focus-visible .b-shape{ stroke:var(--copper-light); }
.band.is-active .b-shape{ stroke:var(--copper-light); stroke-width:2.5; }
.band.is-active .b-dot{ fill:var(--copper-light); }
.layer-tabs{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.layer-tabs button{ min-width:44px; min-height:44px; padding:0 .8rem; border:1.5px solid rgba(246,244,239,.55); background:transparent; color:var(--paper); border-radius:var(--radius); font:600 .95rem var(--f-mono); cursor:pointer; }
.layer-tabs button[aria-selected="true"]{ background:var(--copper-light); color:var(--ink); border-color:var(--copper-light); }
.layer-panel h3{ font-size:var(--fs-2); margin-bottom:1.2rem; }
.layer-panel dl{ margin:0; display:grid; gap:1.2rem; }
.layer-panel dt{ font:600 .78rem var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--steel-light); margin-bottom:.35rem; }
.layer-panel dd{ margin:0; color:var(--paper); max-width:56ch; }
.layer-panel dd.risk{ color:var(--gray-light); }
.layers-note{ margin-top:2rem; font-size:.92rem; color:var(--gray-light); max-width:60ch; }

/* как мы работаем */
.steps{ display:grid; gap:0; counter-reset:step; max-width:900px; }
.step{ position:relative; display:grid; grid-template-columns:3rem minmax(0,1fr); gap:0 1.2rem; padding-bottom:2.2rem; }
.step::before{ content:""; position:absolute; left:1.5rem; top:3rem; bottom:0; width:1px; background:var(--line); }
.step:last-child::before{ display:none; }
.step-n{ width:3rem; height:3rem; border:1.5px solid var(--ink); border-radius:50%; display:flex; align-items:center; justify-content:center; font:700 1rem var(--f-mono); background:var(--paper); }
.step h3{ font-size:1.2rem; margin:.5rem 0 .4rem; }
.step p{ color:var(--gray); margin:0 0 .6rem; max-width:60ch; }
.tags{ display:flex; flex-wrap:wrap; gap:.4rem; }
.tag{ font:600 .78rem/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; padding:.4rem .6rem; border:1px solid var(--line); border-radius:2px; color:var(--steel); background:var(--paper); }
.tag--pay{ color:var(--copper); border-color:var(--copper); }
.roles{ margin-top:clamp(2rem,4vw,3.5rem); display:grid; gap:1px; background:var(--line); border:1px solid var(--line); grid-template-columns:minmax(0,1fr); }
@media (min-width:860px){ .roles{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.role{ background:var(--paper); padding:1.6rem; }
.role h3{ font-size:1.1rem; margin-bottom:.8rem; }
.role li{ position:relative; padding-left:1.1rem; margin-bottom:.45rem; color:var(--gray); font-size:.95rem; }
.role li::before{ content:""; position:absolute; left:0; top:.65em; width:6px; height:1.5px; background:var(--steel); }
.honest{ margin-top:2rem; padding:1.2rem 1.4rem; border-left:3px solid var(--copper); background:var(--paper-dim); max-width:760px; }
.honest p{ margin:0; }

/* калькулятор */
.calc{ display:grid; gap:clamp(1.5rem,3vw,3rem); grid-template-columns:minmax(0,1fr); }
@media (min-width:980px){ .calc{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); } }
.calc-card{ background:var(--paper); border:1px solid var(--line); padding:clamp(1.4rem,3vw,2.2rem); }
.calc-card h3{ font-size:1.1rem; margin-bottom:1rem; }
.seg{ display:grid; gap:.5rem; margin-bottom:1.5rem; }
.seg label{ display:flex; align-items:center; gap:.7rem; min-height:48px; padding:.5rem .9rem; border:1.5px solid var(--line); border-radius:var(--radius); cursor:pointer; font-size:.98rem; background:var(--paper); }
.seg input{ accent-color:var(--copper); width:20px; height:20px; flex:none; }
.seg label:has(input:checked){ border-color:var(--ink); background:var(--paper-dim); }
.field{ display:flex; flex-direction:column; gap:.4rem; min-width:0; }
.field label, .field .label{ font-size:.86rem; color:var(--gray); font-weight:500; }
.field input[type=text], .field input[type=tel], .field input[type=number], .field select, .field textarea{ width:100%; min-height:48px; padding:.7rem .9rem; background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius); }
.field textarea{ min-height:96px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--ink); outline:none; box-shadow:0 0 0 3px rgba(168,80,42,.25); }
.result{ background:var(--ink); color:var(--paper); padding:clamp(1.4rem,3vw,2.2rem); }
.result .k{ font:600 .78rem var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--gray-light); margin:0 0 .5rem; }
.result .big{ font:800 clamp(1.9rem,1.2rem + 3vw,3rem)/1.05 var(--f-mono); letter-spacing:-.02em; margin:0 0 .3rem; }
.result .per{ color:var(--gray-light); margin:0 0 1.4rem; font-size:.95rem; }
.result table{ width:100%; border-collapse:collapse; font-size:.9rem; margin-bottom:1.2rem; }
.result td{ padding:.5rem 0; border-top:1px solid var(--line-dark); vertical-align:top; }
.result td:last-child{ text-align:right; font-family:var(--f-mono); white-space:nowrap; padding-left:1rem; }
.result .fine{ font-size:.84rem; color:var(--gray-light); margin:0 0 1.2rem; }
.result .btn-primary{ background:var(--copper-light); color:var(--ink); }
.result .btn-primary:hover{ background:var(--copper-hover); }
.result-empty{ color:var(--gray-light); }

/* проверка сметы */
.checker{ display:grid; gap:clamp(1.5rem,3vw,3rem); grid-template-columns:minmax(0,1fr); }
@media (min-width:980px){ .checker{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:start; } }
.check-list{ display:grid; gap:.5rem; grid-template-columns:minmax(0,1fr); }
@media (min-width:640px){ .check-list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.check-list label{ display:flex; align-items:flex-start; gap:.7rem; min-height:48px; padding:.7rem .9rem; border:1.5px solid var(--line); border-radius:var(--radius); cursor:pointer; background:var(--paper); font-size:.95rem; line-height:1.35; }
.check-list input{ accent-color:var(--copper); width:20px; height:20px; flex:none; margin-top:.1rem; }
.check-list label:has(input:checked){ border-color:var(--ink); background:var(--paper-dim); }
.verdict{ border:1px solid var(--line); background:var(--paper); padding:clamp(1.4rem,3vw,2rem); position:sticky; top:96px; }
.verdict h3{ margin-bottom:.8rem; }
.verdict .count{ font:800 2.4rem/1 var(--f-mono); margin:0 0 .4rem; }
.verdict ul{ margin:.8rem 0 1.2rem; }
.verdict li{ padding:.55rem 0 .55rem 1.2rem; position:relative; border-top:1px solid var(--line); font-size:.95rem; }
.verdict li::before{ content:"×"; position:absolute; left:0; color:var(--copper); font-weight:700; }
.verdict .fine{ color:var(--gray); font-size:.86rem; }

/* услуги */
.services{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); grid-template-columns:minmax(0,1fr); }
@media (min-width:700px){ .services{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1040px){ .services{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.service{ background:var(--paper); padding:clamp(1.4rem,3vw,2rem); }
.service .code{ font:500 .8rem var(--f-mono); color:var(--steel); margin-bottom:1rem; display:block; }
.service h3{ font-size:1.15rem; margin-bottom:.6rem; }
.service p{ color:var(--gray); margin:0; font-size:.95rem; }
.service--none{ background:var(--paper-dim); }
.service--none h3{ color:var(--gray); }

/* возражения */
.objections{ display:grid; gap:clamp(1rem,2vw,1.5rem); grid-template-columns:minmax(0,1fr); }
@media (min-width:760px){ .objections{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.objection{ border:1px solid var(--line); padding:clamp(1.4rem,3vw,2rem); background:var(--paper); }
.objection q{ display:block; font:700 1.15rem/1.3 var(--f-display); margin-bottom:.8rem; quotes:"«" "»"; }
.objection p{ margin:0; color:var(--gray); }
.objection b{ color:var(--ink); }

/* реальные объекты: появляются, когда заполнен site/data/objects.json */
.objects{ display:grid; gap:1.5rem; grid-template-columns:minmax(0,1fr); }
@media (min-width:760px){ .objects{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1040px){ .objects{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.object{ background:var(--paper); border:1px solid var(--line); }
.object img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--paper-dim); }
.object-body{ padding:1.2rem 1.4rem 1.5rem; }
.object-body h3{ font-size:1.1rem; margin-bottom:.5rem; }
.object-body p{ color:var(--gray); font-size:.93rem; margin-bottom:.8rem; }
.object-meta{ display:flex; flex-wrap:wrap; gap:.3rem 1rem; font:.8rem var(--f-mono); color:var(--steel); }

/* вопросы */
.faq{ max-width:860px; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:64px; padding:1rem 0; font:700 1.05rem/1.3 var(--f-display); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font:400 1.8rem/1 var(--f-text); color:var(--steel); flex:none; transition:transform .2s var(--ease); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .a{ padding:0 0 1.4rem; color:var(--gray); max-width:68ch; }
.faq .a p:last-child{ margin:0; }

/* форма */
.form-wrap{ display:grid; gap:clamp(2rem,4vw,4rem); grid-template-columns:minmax(0,1fr); }
.form-wrap > *{ min-width:0; }
@media (min-width:980px){ .form-wrap{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); } }
.form-side .lede{ margin-top:1rem; }
.channels{ display:grid; gap:.3rem; margin-top:2rem; }
.channel{ display:flex; align-items:center; gap:.8rem; min-height:44px; }
.channel svg{ width:20px; height:20px; color:var(--steel); flex:none; }
.channel a{ font-weight:600; }
.lead-form{ background:var(--paper); border:1px solid var(--line); padding:clamp(1.4rem,4vw,2.4rem); }
.intent{ display:grid; gap:.5rem; grid-template-columns:minmax(0,1fr); margin-bottom:1.6rem; }
@media (min-width:640px){ .intent{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.intent label{ display:flex; flex-direction:column; gap:.2rem; padding:.9rem 1rem; min-height:72px; border:1.5px solid var(--line); border-radius:var(--radius); cursor:pointer; background:var(--paper); }
.intent label b{ font:700 .98rem var(--f-display); }
.intent label span{ font-size:.82rem; color:var(--gray); line-height:1.3; }
.intent input{ position:absolute; opacity:0; width:1px; height:1px; }
.intent label:has(input:checked){ border-color:var(--copper); background:var(--paper-dim); box-shadow:inset 0 0 0 1px var(--copper); }
.intent label:has(input:focus-visible){ outline:2px solid var(--copper); outline-offset:3px; }
.form-grid{ display:grid; gap:1.1rem; grid-template-columns:minmax(0,1fr); }
@media (min-width:640px){ .form-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.field.full{ grid-column:1 / -1; }
.upload{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.4rem; padding:1.4rem 1rem; border:1.5px dashed var(--gray); border-radius:var(--radius); cursor:pointer; color:var(--gray); font-size:.93rem; }
.upload:hover, .upload.is-drag{ border-color:var(--copper); background:var(--paper-dim); }
.upload svg{ width:28px; height:28px; color:var(--steel); }
.upload input{ position:absolute; opacity:0; width:1px; height:1px; }
.file-list{ margin-top:.6rem; font-size:.88rem; color:var(--gray); }
.file-list li{ padding:.2rem 0; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.consent{ display:flex; gap:.7rem; align-items:flex-start; font-size:.88rem; line-height:1.45; color:var(--gray); }
.consent input{ margin-top:.15rem; width:22px; height:22px; flex:none; accent-color:var(--copper); }
.consent a{ color:var(--steel); text-decoration:underline; text-underline-offset:3px; }
.field-error{ margin:.4rem 0 0; font-size:.86rem; color:var(--err); }
.form-error{ margin-top:1rem; padding:.9rem 1.1rem; border:1px solid var(--err); color:var(--err-dark); background:var(--err-bg); font-size:.95rem; }
.form-success{ margin-top:1rem; padding:.9rem 1.1rem; border:1px solid var(--ok); color:var(--ok-dark); background:var(--ok-bg); font-size:.95rem; }

/* подвал */
.site-footer{ background:var(--ink); color:var(--paper); padding-block:clamp(3rem,6vw,5rem) 6.5rem; }
.footer-grid{ display:grid; gap:2.5rem; grid-template-columns:minmax(0,1fr); }
@media (min-width:860px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.site-footer .logo{ color:var(--paper); }
.site-footer p{ color:var(--gray-light); max-width:38ch; font-size:.94rem; margin-top:1rem; }
.site-footer h4{ font:600 .78rem var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--gray-light); margin-bottom:.8rem; }
.site-footer li a{ display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.site-footer li a:hover{ text-decoration:underline; }
.footer-bottom{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line-dark); display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; font-size:.84rem; color:var(--gray-light); }
.footer-bottom a{ color:var(--paper); }
.reqs{ flex-basis:100%; margin:.4rem 0 0; }

/* нижняя панель на телефоне */
.sticky-bar{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:flex; background:var(--ink); padding-bottom:env(safe-area-inset-bottom,0); }
.sticky-bar a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; min-height:56px; padding:.5rem .2rem; color:var(--paper); font:600 .75rem var(--f-text); text-decoration:none; border-right:1px solid var(--line-dark); }
.sticky-bar a:last-child{ border-right:0; }
.sticky-bar a svg{ width:20px; height:20px; }
.sticky-bar a.is-main{ background:var(--copper); }
@media (min-width:980px){ .sticky-bar{ display:none; } .site-footer{ padding-bottom:3rem; } }

/* страницы документов */
.doc{ max-width:780px; margin:0 auto; padding:clamp(2.5rem,6vw,5rem) var(--gutter); }
.doc h1{ font-size:clamp(1.9rem,1.2rem + 3vw,2.9rem); margin-bottom:.6rem; }
.doc .meta{ color:var(--gray); margin-bottom:2.2rem; }
.doc h2{ font-size:1.25rem; margin:2.2rem 0 .7rem; }
.doc p, .doc li{ color:var(--ink); max-width:68ch; }
.doc ul{ list-style:disc; padding-left:1.3rem; margin-bottom:1em; }
.doc li{ margin-bottom:.35rem; }
.doc a{ color:var(--steel); }
.doc .todo{ background:var(--warn-bg); padding:.1rem .35rem; }
.doc-back{ display:inline-flex; align-items:center; min-height:44px; margin-bottom:1rem; text-decoration:none; color:var(--steel); font-weight:600; }

/* появление при прокрутке: только если скрипт запущен, текст виден и без него */
.js .reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .js .reveal{ opacity:1; transform:none; }
}
.intent label{ position:relative; }
.main-nav a, .header-actions .btn{ white-space:nowrap; }
@media (min-width:1280px) and (max-width:1700px){ .main-nav a{ padding:0 .5rem; font-size:.86rem; } .logo small{ display:none; } .site-header .container{ gap:1rem; } .header-actions{ gap:.6rem; } }
.logo{ flex:none; white-space:nowrap; }
.hint{ margin:.5rem 0 0; font-size:.86rem; color:var(--gray); }
.channel a, .site-footer a[data-contact]{ display:inline-flex; align-items:center; min-height:44px; }

/* правки после просмотра страницы глазами */
.section-head .lede, h2 + .lede, h2 + p{ margin-top:1rem; }
.section-head h2 + .lede{ margin-top:1.1rem; }
#f-photos{ position:absolute; opacity:0; width:1px; height:1px; overflow:hidden; }
.field:has(#f-photos:focus-visible) .upload{ outline:2px solid var(--copper); outline-offset:2px; }
.consent a, .site-footer .reqs a{ display:inline; padding-block:.5rem; }
.result .big{ font-size:clamp(1.6rem,1rem + 2.2vw,2.4rem); }
.role li::before{ height:2px; }
.eyebrow{ line-height:1.4; }
.consent span{ flex:1; min-width:0; }


/* =========================================================
   ДИЗАЙН «ЧЕРТЁЖ И МЕДЬ» (26.10.2026): синька с сеткой, медный узел,
   фирменный шрифт Unbounded, чертёж разреза, образец акта.
   Идея: сайт выглядит как чертёж, на котором каждый слой подписан.
   ========================================================= */
:root{
  --f-display: "Unbounded", "Inter", system-ui, sans-serif;
  --fs-1: clamp(2.15rem, 1rem + 4.3vw, 4.2rem);
  --fs-2: clamp(1.45rem, 1rem + 1.8vw, 2.3rem);
  --fs-3: clamp(1.02rem, .96rem + .45vw, 1.25rem);
  --glass: rgba(16,40,60,.9);
  --grid-line: rgba(246,244,239,.055);
}
body{ counter-reset:sec; }
h1,h2,h3,h4{ font-weight:700; letter-spacing:-.015em; line-height:1.14; }
h3{ font-weight:600; letter-spacing:-.01em; }
.section .eyebrow::before{ counter-increment:sec; content:counter(sec,decimal-leading-zero) " / "; color:var(--copper); }
.section--dark .eyebrow::before{ color:var(--copper-light); }
.eyebrow{ letter-spacing:.16em; }
.progress{ position:fixed; left:0; top:0; height:3px; width:100%; background:var(--copper-light); transform:scaleX(0); transform-origin:0 50%; z-index:300; pointer-events:none; }

/* шапка: тёмное стекло */
.site-header{ background:var(--glass); -webkit-backdrop-filter:saturate(1.5) blur(14px); backdrop-filter:saturate(1.5) blur(14px); border-bottom:1px solid rgba(246,244,239,.1); color:var(--paper); }
.logo{ color:var(--paper); gap:.8rem; }
.logo-mark{ width:38px; height:38px; }
.lm-lines{ fill:none; stroke:currentColor; stroke-linejoin:miter; stroke-linecap:square; }
.lm-dot{ fill:var(--copper-light); }
.logo-text{ display:flex; flex-direction:column; }
.logo-word{ font:700 1.08rem/1 var(--f-display); letter-spacing:.12em; }
.logo small{ font:500 .75rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--steel-light); margin-top:.45rem; }
.main-nav a{ color:rgba(246,244,239,.82); transition:background .2s var(--ease), color .2s var(--ease); }
.main-nav a:hover{ background:rgba(246,244,239,.09); color:#fff; }
.header-phone{ color:var(--paper); font-family:var(--f-display); font-weight:600; font-size:.92rem; letter-spacing:-.01em; }
.header-actions .btn-ghost{ color:var(--paper); border-color:rgba(246,244,239,.5); }
.header-actions .btn-ghost:hover{ background:var(--paper); color:var(--ink); }
.nav-toggle{ border-color:rgba(246,244,239,.5); }
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{ background:var(--paper); }
.mobile-nav{ background:#0F2639; }
.mobile-nav li a{ color:var(--paper); border-bottom-color:rgba(246,244,239,.12); font-size:1.05rem; }
.mobile-nav .btn-ghost{ color:var(--paper); border-color:rgba(246,244,239,.5); }
@media (max-width:1700px){ .logo small{ display:none; } }
.logo{ flex:none; white-space:nowrap; }

/* кнопки */
.btn{ letter-spacing:-.005em; }
.btn-primary::after{ content:"→"; font-weight:400; transition:transform .25s var(--ease); }
.btn-primary:hover::after{ transform:translateX(4px); }
.btn-block.btn-primary::after{ margin-left:.2rem; }

/* первый экран: синька */
.hero{ background:radial-gradient(900px 520px at 80% 35%, #214A6B 0%, rgba(33,74,107,0) 70%), var(--blueprint); color:var(--paper); padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,6vw,5.5rem); isolation:isolate; }
.hero::before{ content:""; position:absolute; inset:0; z-index:-1; background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:36px 36px; -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%); mask-image:linear-gradient(180deg,#000 55%,transparent 100%); }
.hero .eyebrow{ display:flex; align-items:center; gap:.7rem; color:var(--steel-light); }
.hero .eyebrow::before{ content:""; width:10px; height:10px; background:var(--copper-light); flex:none; }
.h1-big{ display:block; font:700 var(--fs-1)/1.05 var(--f-display); letter-spacing:-.035em; text-wrap:balance; }
.hero h1 em{ font-style:normal; color:var(--copper-light); }
.h1-sub{ display:block; margin-top:1.3rem; font:500 clamp(1.12rem,.95rem + .8vw,1.55rem)/1.35 var(--f-text); letter-spacing:0; color:rgba(246,244,239,.92); max-width:28ch; }
.hero .lede{ color:rgba(246,244,239,.68); max-width:52ch; margin-top:1.4rem; }
.hero .btn-primary{ background:var(--copper-light); color:var(--ink); }
.hero .btn-primary:hover{ background:var(--copper-hover); }
.hero .btn-ghost{ color:var(--paper); border-color:rgba(246,244,239,.45); }
.hero .btn-ghost:hover{ background:var(--paper); color:var(--ink); }
.guarantees{ border-top:1px solid rgba(246,244,239,.16); counter-reset:g; }
.guarantee{ color:rgba(246,244,239,.62); position:relative; padding-top:1.5rem; }
.guarantee::before{ counter-increment:g; content:"0" counter(g); position:absolute; top:0; left:0; font:500 .75rem var(--f-mono); color:var(--copper-light); letter-spacing:.1em; }
.guarantee b{ color:var(--paper); font:600 .84rem/1.3 var(--f-display); letter-spacing:-.01em; }
.hero-figure{ color:var(--paper); }
.hero-figure figcaption{ color:rgba(246,244,239,.55); }
.hz{ overflow:visible; }
.hz-line{ fill:none; stroke:var(--paper); stroke-width:1.6; stroke-linejoin:miter; }
.hz-thick{ stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round; }
.hz-thin{ stroke:rgba(246,244,239,.55); stroke-width:1.1; fill:none; }
.hz-dash{ stroke:rgba(246,244,239,.75); stroke-width:1.4; stroke-dasharray:6 5; fill:none; }
.hz-dashed{ stroke-dasharray:3 4; }
.hz-cut{ fill:none; stroke:var(--copper-light); stroke-width:1.5; stroke-dasharray:3 3; }
.hz-ins{ fill:url(#hz-hatch); color:var(--steel-light); stroke:none; opacity:0; animation:hzfade .8s var(--ease) var(--d,0s) forwards; }
.hz-d{ stroke-dasharray:1; stroke-dashoffset:1; animation:hzdraw 1.1s var(--ease) var(--d,0s) forwards; }
.hz-fade{ opacity:0; animation:hzfade .8s ease var(--d,0s) forwards; }
.hz-lead{ stroke:rgba(246,244,239,.4); stroke-width:1; opacity:0; animation:hzfade .6s ease var(--d,0s) forwards; }
.hz-tag{ opacity:0; animation:hzfade .5s ease var(--d,0s) forwards; }
.hz-pin{ fill:var(--copper-light); opacity:0; animation:hzfade .4s ease var(--d,0s) forwards; }
.hz-dot{ fill:var(--copper-light); }
.hz-num{ font:700 11px var(--f-mono); fill:var(--blueprint); text-anchor:middle; }
.hz-label{ font:500 11.5px var(--f-mono); letter-spacing:.09em; fill:var(--paper); }
@keyframes hzdraw{ to{ stroke-dashoffset:0; } }
@keyframes hzfade{ to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .hz-d{ animation:none; stroke-dashoffset:0; }
  .hz-ins, .hz-fade, .hz-lead, .hz-tag, .hz-pin{ animation:none; opacity:1; }
}

/* вступление */
.fact{ position:relative; transition:background .3s var(--ease); }
.fact:hover{ background:#fff; }
.fact::after{ content:""; position:absolute; left:0; top:0; height:3px; width:0; background:var(--copper); transition:width .5s var(--ease); }
.fact:hover::after{ width:100%; }
.fact .n{ font:700 2.5rem/1 var(--f-display); color:transparent; -webkit-text-stroke:1.2px var(--steel); letter-spacing:0; margin-bottom:1.4rem; }
.bridge{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.15rem,1rem + .9vw,1.6rem); max-width:34ch; }

/* тёмные разделы: сетка синьки */
.section--dark{ position:relative; isolation:isolate; overflow:hidden; }
.section--dark::before{ content:""; position:absolute; inset:0; z-index:-1; background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:36px 36px; -webkit-mask-image:radial-gradient(ellipse at 20% 30%,#000 10%,transparent 75%); mask-image:radial-gradient(ellipse at 20% 30%,#000 10%,transparent 75%); }
.layer-panel h3{ font-weight:700; }

/* шаги и образец акта */
.process-grid{ display:grid; gap:clamp(2rem,4vw,3rem); grid-template-columns:minmax(0,1fr); }
@media (min-width:1020px){ .process-grid{ grid-template-columns:minmax(0,1fr) 380px; align-items:start; } .act{ position:sticky; top:100px; } }
.steps{ max-width:none; }
.step-n{ border-radius:0; font:700 .9rem var(--f-display); transition:background .25s var(--ease), color .25s var(--ease); }
.step::before{ background:none; border-left:1px dashed var(--steel); }
.step:has(.tag--pay) .step-n{ background:var(--copper); border-color:var(--copper); color:var(--paper); }
.step h3{ font-size:1.05rem; }
.act{ background:#fff; border:1px solid var(--line); box-shadow:12px 12px 0 -1px var(--paper-dim), 12px 12px 0 0 var(--line); padding:1.7rem 1.6rem 1.4rem; position:relative; font-size:.9rem; transform:rotate(.7deg); }
.act-stamp{ position:absolute; top:16px; right:-12px; transform:rotate(7deg); border:2px solid var(--copper); color:var(--copper); font:700 .75rem var(--f-mono); letter-spacing:.14em; text-transform:uppercase; padding:.28rem .6rem; background:#fff; margin:0; }
.act h3{ font-size:1.05rem; margin-bottom:.9rem; }
.act-meta{ display:flex; flex-wrap:wrap; gap:.3rem 1rem; font:.76rem var(--f-mono); color:var(--gray); border-bottom:1px dashed var(--line); padding-bottom:.8rem; margin-bottom:1rem; }
.act-photos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; margin-bottom:1rem; }
.act-photos figure{ margin:0; }
.act-photos span{ display:block; aspect-ratio:4/3; background:repeating-linear-gradient(45deg,var(--paper-dim),var(--paper-dim) 6px,var(--paper) 6px,var(--paper) 12px); border:1px solid var(--line); }
.act-photos figcaption{ font:.75rem/1.3 var(--f-mono); color:var(--gray); margin-top:.3rem; }
.act-check li{ position:relative; padding:.3rem 0 .3rem 1.7rem; font-size:.86rem; }
.act-check li::before{ content:""; position:absolute; left:0; top:.42rem; width:.95rem; height:.95rem; border:1.5px solid var(--ok); }
.act-check li::after{ content:""; position:absolute; left:.3rem; top:.5rem; width:.34rem; height:.62rem; border:solid var(--ok); border-width:0 2px 2px 0; transform:rotate(40deg); }
.act-sign{ display:flex; gap:1.6rem; margin:1.3rem 0 .9rem; }
.act-sign span{ flex:1; border-top:1px solid var(--ink); padding-top:.3rem; font:.75rem var(--f-mono); color:var(--gray); }
.act-note{ font-size:.78rem; color:var(--gray); margin:0; line-height:1.45; }
.roles{ margin-top:clamp(2.5rem,5vw,4rem); }

/* калькулятор и проверка */
.result{ position:relative; overflow:hidden; }
.result::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(246,244,239,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(246,244,239,.04) 1px,transparent 1px); background-size:28px 28px; pointer-events:none; }
.result > *{ position:relative; }
.result .big{ font-family:var(--f-display); font-weight:700; letter-spacing:-.04em; }
.verdict .count{ font-family:var(--f-display); font-weight:700; }

/* услуги */
.service{ position:relative; transition:background .3s var(--ease); }
.service:hover{ background:#fff; }
.svc-ico{ width:34px; height:34px; stroke:var(--copper); fill:none; stroke-width:1.6; stroke-linecap:square; stroke-linejoin:miter; display:block; margin-bottom:1.3rem; }
.service .code{ position:absolute; top:1.2rem; right:1.4rem; margin:0; }
.service h3{ font-size:1.02rem; }

/* возражения и вопросы */
.objection{ position:relative; transition:transform .3s var(--ease), border-color .3s var(--ease); }
.objection:hover{ border-color:var(--copper); transform:translateY(-2px); }
.objection q{ font-family:var(--f-display); font-weight:600; font-size:1.02rem; }
.faq summary{ font-family:var(--f-display); font-weight:600; font-size:.98rem; }

/* форма */
.intent label b{ font-family:var(--f-display); font-weight:600; font-size:.88rem; }

/* подвал */
.site-footer{ position:relative; overflow:hidden; }
.site-footer .logo-mark{ width:42px; height:42px; }
.footer-mark{ font:700 clamp(3.5rem,17vw,14rem)/.78 var(--f-display); letter-spacing:.02em; color:transparent; -webkit-text-stroke:1px rgba(246,244,239,.16); text-align:center; margin:3rem 0 -.5rem; user-select:none; white-space:nowrap; overflow:hidden; }
.sticky-bar{ background:var(--glass); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }

/* девять контрольных точек: порядок работ сверху вниз, крупные кнопки */
.band .b-num{ font-size:14px; }
.band .b-label{ font:600 15px var(--f-text); }
.b-order{ fill:var(--steel-light); font:500 11px var(--f-mono); letter-spacing:.14em; }
.b-arrow{ stroke:var(--steel-light); stroke-width:1.5; fill:none; }
.b-line{ stroke:rgba(246,244,239,.35); stroke-width:1.5; stroke-dasharray:3 4; }
.layer-tabs{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.6rem; margin-bottom:1.8rem; }
@media (min-width:640px){ .layer-tabs{ grid-template-columns:repeat(9,minmax(0,1fr)); } }
.layer-tabs button{ min-width:0; min-height:56px; padding:0; font:700 1.15rem var(--f-display); border-width:1.5px; transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.layer-tabs button:hover{ border-color:var(--copper-light); }

/* легенда под чертежом: номера по порядку работ, сверху вниз */
.hero-figure svg{ width:100%; height:auto; display:block; }
.hz-legend{ margin-top:1.1rem; columns:2; column-gap:1.6rem; font-size:.82rem; line-height:1.35; color:rgba(246,244,239,.85); counter-reset:none; }
@media (min-width:1100px){ .hz-legend{ columns:3; } }
.hz-legend li{ break-inside:avoid; display:flex; align-items:center; gap:.55rem; padding:.32rem 0; }
.hz-legend span{ flex:none; width:1.45rem; height:1.45rem; border-radius:50%; background:var(--copper-light); color:var(--blueprint); font:700 .75rem/1.45rem var(--f-mono); text-align:center; }
.hz-num{ font-size:12px; }
.hero-grid{ align-items:center; }
@media (min-width:980px){ .hero-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); } }
.guarantee b{ font-size:.78rem; }
.footer-mark{ font-size:min(15.2vw, 11rem); }
.result{ align-self:start; }
@media (max-width:480px){
  .site-header .container{ gap:.6rem; }
  .logo{ gap:.55rem; }
  .logo-mark{ width:32px; height:32px; }
  .logo-word{ font-size:.92rem; letter-spacing:.09em; }
  .header-phone{ font-size:.8rem; }
  .header-actions{ gap:.5rem; }
  .nav-toggle{ width:44px; height:44px; }
}

@media (max-width:360px){ .logo-text{ display:none; } .header-phone{ font-size:.85rem; } }
.act-stamp{ top:-14px; right:16px; }
.band .b-label{ font-size:17px; }
.band .b-num{ font-size:15px; }