/* Страница услуги «Составим смету, КС-2 и КС-3» (28.10.2026). Генератор — scripts/usluga-smety.py.
   Форма заявки — на первом экране справа от текста (правило первого экрана: кнопка видна на 1366×768 и 375×812). */
.us-hero .wrap { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding-top: 48px; padding-bottom: 56px; }
.us-txt { flex: 1 1 auto; min-width: 0; }
.us-hero h1 { font-size: 48px; margin-bottom: 18px; }
.us-hero .lead { margin-bottom: 22px; }
.us-fakty { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.us-fakty li { font: 700 13px/1 'Manrope', sans-serif; color: #fff; border: 1px solid rgba(255,255,255,.22); padding: 9px 12px; }
.us-zakaz { flex: none; width: 360px; max-width: 100%; display: grid; gap: 12px; }
.us-zakaz-k { text-align: center; font-size: 18px; padding: 22px 30px; }
.us-zakaz p { margin: 0; font: 500 14px/1.55 'Manrope', sans-serif; color: rgba(255,255,255,.62); }
.us-zakaz a:not(.btn-main), #vopros .res a { color: #FF6A1A; }
.us-tel { white-space: nowrap; }

.us-h2 { font: 800 32px/1.15 'Manrope', sans-serif; letter-spacing: -.02em; color: #101014; margin: 0 0 26px; }
.us-ceny { width: 100%; max-width: 860px; border-collapse: collapse; }
.us-ceny td { border-top: 1px solid rgba(16,16,20,.12); padding: 14px 0; vertical-align: top; font: 500 16px/1.45 'Manrope', sans-serif; color: #101014; }
.us-ceny tr:last-child td { border-bottom: 1px solid rgba(16,16,20,.12); }
.us-ceny td b { display: block; font-weight: 700; }
.us-ceny td span { display: block; font-size: 14px; color: rgba(16,16,20,.6); }
.us-ceny .us-c { text-align: right; white-space: nowrap; font-weight: 800; padding-left: 20px; }
.us-prim { font: 500 15px/1.6 'Manrope', sans-serif; color: rgba(16,16,20,.65); margin: 18px 0 0; max-width: 760px; }

.us-shagi { list-style: none; counter-reset: sh; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.us-shagi li { counter-increment: sh; background: #fff; padding: 22px; }
.us-shagi li::before { content: counter(sh); display: block; font: 800 28px/1 'Manrope', sans-serif; color: #FF6A1A; margin-bottom: 12px; }
.us-shagi b { display: block; font: 800 17px/1.3 'Manrope', sans-serif; color: #101014; margin-bottom: 8px; }
.us-shagi span { font: 500 15px/1.55 'Manrope', sans-serif; color: rgba(16,16,20,.7); }

.us-nuzhno { margin: 0; padding-left: 20px; max-width: 860px; }
.us-nuzhno li { font: 500 16px/1.6 'Manrope', sans-serif; color: rgba(16,16,20,.78); margin-bottom: 10px; }
.us-nuzhno b { color: #101014; }
.us-abz { font: 500 17px/1.65 'Manrope', sans-serif; color: rgba(16,16,20,.78); max-width: 820px; margin: 0 0 14px; }
.us-abz a { color: #c94f0c; font-weight: 700; }

.us-h3 { font: 800 20px/1.3 'Manrope', sans-serif; color: #101014; margin: 36px 0 14px; }
.us-vidy { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.us-vidy li { background: #fff; padding: 22px; }
.us-vidy h3 { font: 800 17px/1.3 'Manrope', sans-serif; color: #101014; margin: 0 0 8px; }
.us-vidy p { font: 500 15px/1.55 'Manrope', sans-serif; color: rgba(16,16,20,.7); margin: 0; }
.us-chitat { margin: 0; padding-left: 20px; }
.us-chitat li { font: 500 16px/1.6 'Manrope', sans-serif; margin-bottom: 6px; }
.us-chitat a { color: #c94f0c; font-weight: 700; }

.us-faq details {border-top: 1px solid rgba(16,16,20,.12); max-width: 860px; }
.us-faq details:last-child { border-bottom: 1px solid rgba(16,16,20,.12); }
.us-faq summary { font: 800 17px/1.4 'Manrope', sans-serif; color: #101014; padding: 18px 34px 18px 0; cursor: pointer; list-style: none; position: relative; }
.us-faq summary::-webkit-details-marker { display: none; }
.us-faq summary::after { content: '+'; position: absolute; right: 4px; top: 14px; font: 600 24px/1 'Manrope', sans-serif; color: #FF6A1A; }
.us-faq details[open] summary::after { content: '−'; }
.us-faq p { font: 500 16px/1.65 'Manrope', sans-serif; color: rgba(16,16,20,.72); margin: 0 0 20px; max-width: 760px; }

@media (max-width: 900px) {
  .us-hero .wrap { flex-direction: column; align-items: stretch; gap: 20px; padding-top: 22px; padding-bottom: 36px; }
  .us-hero h1 { font-size: 28px; margin-bottom: 10px; }
  .us-hero .lead { font-size: 15px; margin-bottom: 12px; }
  .us-hero .eyebrow { margin-bottom: 12px; }
  .us-fakty li { font-size: 12px; padding: 7px 9px; }
  .us-zakaz { width: 100%; }
  .us-shagi, .us-vidy { grid-template-columns: 1fr; }
  .us-h2 { font-size: 24px; }
  .us-ceny td { font-size: 15px; }
}