/* =====================================================================
   ГАЗЕТНОЕ ОФОРМЛЕНИЕ
   Слой поверх style.css: бумага вместо тёмного экрана, засечки в
   заголовках, линейки вместо свечения, красный только на акцентах.
   Подключать строго ПОСЛЕ style.css.
   ===================================================================== */

:root{
  --paper:      #F5F1E6;
  --paper-2:    #EDE7D6;
  --paper-3:    #E4DCC8;
  --ink:        #1A1814;
  --ink-2:      #4A4436;
  --ink-3:      #6E6656;
  --rule:       #C6BEAC;
  --red:        #B3000C;

  /* переопределяем токены базовой темы */
  --bg:         var(--paper);
  --bg-alt:     var(--paper-2);
  --panel:      #FFFDF6;
  --panel-2:    var(--paper-2);
  --border:     var(--rule);
  --text:       var(--ink);
  --text-dim:   var(--ink-2);
  --text-faint: var(--ink-3);
  --accent:     var(--red);
  --accent-2:   var(--red);
  --warm:       var(--red);
  --warm-2:     var(--red);
  --radius-lg:  0px;
  --radius-md:  0px;
  --radius-sm:  0px;
  --shadow:     none;
}

/* ---------- типографика ---------- */
body{
  font-family:"Libre Baskerville", Georgia, "Times New Roman", serif;
  font-size:15px;
  line-height:1.62;
  background:var(--paper);
  color:var(--ink);
}
h1, h2, h3, h4,
.logo-text, .price-amount, .price-amount span,
.pm-stat-number, .rebate-total strong, .gradient-text{
  font-family:"Libre Baskerville", Georgia, serif !important;
  letter-spacing:-0.01em;
}
h1{ font-weight:700; line-height:1.08; }
h2{ font-weight:700; }
.gradient-text{
  background:none !important;
  -webkit-text-fill-color:var(--red) !important;
  color:var(--red) !important;
}

/* надписи-ярлыки, кнопки, меню — узкий гротеск, как в шапке газеты */
.eyebrow, .section-eyebrow, .btn, .main-nav a, .nav-toggle,
.price-label, .trust-item span, .footer-links h4, .footer-contact h4,
.map-note, .area-tags a, .m-head, .dateline, .form-note, label,
.google-rating-text, .price-note, .pdf-hint{
  font-family:"Oswald", "Helvetica Neue", Arial, sans-serif !important;
}
.eyebrow, .section-eyebrow{
  font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--red); background:none; border:0; padding:0;
}
.section-title{ position:relative; }

/* ---------- шапка ---------- */
.site-header{
  background:var(--paper);
  border-bottom:3px solid var(--ink);
  padding:14px 0;
}
.site-header.scrolled{ background:var(--paper); }
.logo-text{ font-weight:700; letter-spacing:0; }
.logo-text em{
  font-family:"Oswald", Arial, sans-serif; font-style:normal;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
}
.main-nav a{
  font-size:.82rem; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-2);
}
.main-nav a:hover{ color:var(--red); }
.main-nav.open{ background:var(--paper); border-left:3px solid var(--ink); }
.nav-toggle span{ background:var(--ink); }

/* ---------- кнопки ---------- */
.btn{
  border-radius:0; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; font-size:.8rem; box-shadow:none;
}
.btn-primary{ background:var(--red); color:#fff; border:2px solid var(--ink); }
.btn-primary:hover{ background:var(--ink); color:var(--paper); }
.btn-outline, .btn-outline-light{
  background:transparent; color:var(--ink); border:2px solid var(--ink);
}
.btn-outline:hover, .btn-outline-light:hover{ background:var(--ink); color:var(--paper); }

/* ---------- первый экран ---------- */
.hero{
  background:var(--paper);
  border-bottom:3px solid var(--ink);
  min-height:auto;
  padding:120px 0 54px;
}
.hero-bg, .hero-glow, .hero-pipes, .cta-banner-glow{ display:none !important; }
.hero-inner{ text-align:left; }
.hero h1{ font-size:clamp(2.1rem, 6.4vw, 3.5rem); }
.hero-sub{
  font-size:1.02rem; color:var(--ink-2); max-width:62ch;
  border-top:1px solid var(--rule); padding-top:16px; margin-top:20px;
}
.pulse-dot{ background:var(--red) !important; box-shadow:none !important; }
.scroll-cue{ display:none; }

/* ---------- полосы и секции ---------- */
section{ background:var(--paper); }
.trust-bar{
  background:var(--paper-2);
  border-bottom:1px solid var(--ink);
}
.trust-item{ color:var(--ink-2); }
.trust-item svg{ color:var(--red); }

.section-title{
  font-size:clamp(1.5rem, 4.4vw, 2.2rem);
  padding-bottom:10px; margin-bottom:14px;
  border-bottom:3px solid var(--ink);
}
.section-sub{ color:var(--ink-2); max-width:66ch; }

/* ---------- карточки ---------- */
.service-card, .price-card, .review-card, .gallery-card,
.pm-content, .why-content, .rebate-content, .faq-item,
.contact-form, .tip-inner, .video-player-wrap{
  background:var(--panel);
  border:2px solid var(--ink);
  border-radius:0;
  box-shadow:none;
}
.service-card:hover, .price-card:hover{ transform:none; border-color:var(--red); }
.service-icon{
  background:var(--paper-2); border:1px solid var(--ink); border-radius:0; color:var(--red);
}
.service-card h3{ font-size:1.12rem; }
.service-price{
  font-family:"Oswald", Arial, sans-serif; font-size:.86rem;
  color:var(--ink-2); border-top:1px dotted var(--rule); padding-top:10px;
}
.service-card > a{
  font-family:"Oswald", Arial, sans-serif; text-transform:uppercase;
  letter-spacing:.08em; font-size:.76rem; color:var(--red);
}

/* ---------- цены ---------- */
.price-card-featured{ background:var(--paper-2); border-width:3px; }
.price-label{
  font-family:"Oswald", Arial, sans-serif; text-transform:uppercase;
  letter-spacing:.16em; font-size:.7rem; color:var(--ink-3);
}
.price-amount{ color:var(--ink) !important; font-size:2.4rem; }
.price-amount span{ color:var(--ink-3) !important; font-size:.9rem; }
.price-addons li{ border-top:1px dotted var(--rule); }
.price-note, .price-conditions{ color:var(--ink-2); font-size:.9rem; }

/* ---------- отзывы, работы, видео ---------- */
.review-stars, .google-rating-stars{ color:var(--red); }
.gallery-card img{ filter:grayscale(.25) contrast(1.05); }

/* ---------- баннеры ---------- */
.tip-banner, .cta-banner{ background:var(--paper-2); border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); }
.cta-banner-inner h2, .tip-inner h3{ color:var(--ink); }

/* ---------- субсидия ---------- */
.rebate{ background:var(--paper-2); }
.rebate-content{ background:var(--panel); }
.rebate-total strong{ color:var(--red) !important; }

/* ---------- карта и зона ---------- */
.area{ background:var(--paper); }
.area-map{ filter:none; }
.map-pin text{ fill:var(--ink); }
.area-tags a{
  background:var(--paper-2); border:1px solid var(--ink); border-radius:0;
  text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; color:var(--ink-2);
}

/* ---------- вопросы ---------- */
.faq-item{ margin-bottom:10px; }
.faq-item summary{
  font-family:"Libre Baskerville", Georgia, serif;
  font-weight:700; font-size:1rem; color:var(--ink);
}
.faq-item[open]{ border-color:var(--red); }
.faq-item p{ color:var(--ink-2); }

/* ---------- форма ---------- */
.contact-form input, .contact-form textarea, .contact-form select{
  background:var(--paper); border:1px solid var(--ink); border-radius:0;
  color:var(--ink); font-family:"Libre Baskerville", Georgia, serif;
}
.contact-form input::placeholder, .contact-form textarea::placeholder{ color:var(--ink-3); }

/* ---------- подвал ---------- */
.site-footer{
  background:var(--paper-2);
  border-top:4px solid var(--ink);
  color:var(--ink-2);
}
.site-footer a{ color:var(--ink-2); }
.site-footer a:hover{ color:var(--red); }
.footer-links h4, .footer-contact h4{
  text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; color:var(--ink);
  border-bottom:2px solid var(--ink); padding-bottom:6px;
}
.footer-bottom{ border-top:1px solid var(--rule); color:var(--ink-3); }

/* ---------- нижняя полоса звонка ---------- */
.mobile-call-bar{
  background:var(--red); color:#fff; border-top:3px solid var(--ink);
  font-family:"Oswald", Arial, sans-serif; text-transform:uppercase; letter-spacing:.08em;
}

/* ---------- зерно бумаги ---------- */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  opacity:.16;
  background-image:radial-gradient(#000 .5px, transparent .6px);
  background-size:4px 4px;
}

/* ---------- всё, что базовая тёмная тема красила в белый ---------- */
.hero h1,
.section-title,
.service-card h3,
.price-amount,
.tip-content h2,
.rebate-row strong,
.rebate-total span,
.google-rating-text strong,
.review-card figcaption,
.faq-item summary,
.cta-banner h2,
.footer-links h4, .footer-contact h4,
.platform-card strong,
.service-promises strong,
.video-facade-title,
.pm-list li strong,
.area-hoods h3,
.gallery-card figcaption,
input, textarea, select, select option{
  color:var(--ink) !important;
}
.btn-outline-light{ color:var(--ink) !important; }
.nearby-links a:hover,
.area-tags span:hover, .area-tags a:hover,
.social-links a:hover{ color:var(--red) !important; }

/* белый текст уместен только на красной заливке */
.btn-primary, .btn-primary:link, .btn-primary:visited,
.mobile-call-bar, .mobile-call-bar a{ color:#fff !important; }
.btn-primary:hover{ color:var(--paper) !important; }

/* мелкие правки читаемости */
.hero h1 .gradient-text{ display:block; }
.area-hoods h3{ font-size:.9rem; }
.rebate-row, .rebate-total{ border-color:var(--rule); }

/* телефон в шапке не должен ломаться на три строки */
.header-cta .phone-link{ white-space:nowrap; font-family:"Oswald",Arial,sans-serif; letter-spacing:.04em; }

/* =====================================================================
   ТАБЛОИДНЫЕ ЗАГОЛОВКИ
   Крупно, тяжело, заглавными — как передовица, которая кричит с лотка.
   Текст остаётся с засечками: кричит заголовок, а не абзац.
   ===================================================================== */

h1, h2,
.hero h1, .section-title, .cta-banner h2, .tip-content h2{
  font-family:"Anton", "Oswald", Impact, sans-serif !important;
  font-weight:400 !important;
  text-transform:uppercase;
  letter-spacing:-0.005em;
  line-height:0.94;
}

/* первый экран — самая крупная подача */
.hero{ padding:104px 0 46px; }
.hero h1{
  font-size:clamp(2.9rem, 11vw, 5.6rem) !important;
  margin-bottom:6px;
}
.hero h1 .gradient-text{
  display:block;
  color:var(--red) !important;
  -webkit-text-fill-color:var(--red) !important;
}
.hero-sub{
  font-size:1.06rem;
  border-top:3px solid var(--ink);
  padding-top:14px;
  margin-top:22px;
}

/* рубрика над заголовком — красной плашкой, как кикер в таблоиде */
.eyebrow, .section-eyebrow{
  display:inline-block;
  background:var(--red);
  color:#fff !important;
  padding:5px 11px 4px;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.18em;
  margin-bottom:12px;
  border:0;
}
.eyebrow .pulse-dot{ display:none; }

/* заголовки разделов — в двойной линейке */
.section-title{
  font-size:clamp(2rem, 7vw, 3.4rem) !important;
  border-top:5px solid var(--ink);
  border-bottom:2px solid var(--ink);
  padding:12px 0 10px;
  margin-bottom:16px;
}
.section-sub{ font-size:1.02rem; }

/* подзаголовки карточек — узким гротеском заглавными */
.service-card h3, .price-card h3, .faq-item summary,
.area-hoods h3, .pm-content h3, .why-content h3{
  font-family:"Oswald", Arial, sans-serif !important;
  font-weight:600 !important;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:1.06rem;
  line-height:1.2;
}

/* цены — крупнее и тяжелее */
.price-amount{
  font-family:"Anton", Impact, sans-serif !important;
  font-size:3.1rem !important;
  letter-spacing:0;
}
.price-amount span{ font-family:"Oswald", Arial, sans-serif !important; }

/* баннеры-врезки */
.cta-banner h2, .tip-content h2{ font-size:clamp(1.8rem, 5.6vw, 2.8rem) !important; }

/* красная строка заголовка — тем же тяжёлым шрифтом, а не засечками */
.hero h1 .gradient-text{
  font-family:"Anton", Impact, sans-serif !important;
  letter-spacing:-0.005em;
}

/* =====================================================================
   ЦИФРЫ В ТЕКСТЕ
   Суммы, проценты и «24/7» набраны узким гротеском красным —
   глаз цепляется за них так же, как за заголовок.
   ===================================================================== */
.amt{
  font-family:"Oswald", Arial, sans-serif;
  font-weight:700;
  font-size:1.08em;
  color:var(--red);
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
/* на красной заливке и в кнопках цифры не должны исчезать */
.btn .amt, .mobile-call-bar .amt, .cta-banner .btn-primary .amt,
.eyebrow .amt, .section-eyebrow .amt{ color:#fff; }
/* в крупных ценниках выделение излишне — там уже свой шрифт */
.price-amount .amt{ font-family:inherit; font-size:inherit; color:inherit; }

/* города в таблице субсидий — рубрикой */
.rebate-row strong{
  font-family:"Oswald", Arial, sans-serif !important;
  text-transform:uppercase; letter-spacing:.08em; font-size:.86rem;
}

/* буквица в первом абзаце своего раздела — как в полосе */
#local .section-sub::first-letter{
  float:left;
  font-family:"Anton", Impact, sans-serif;
  font-size:3.4rem;
  line-height:.82;
  padding:6px 10px 0 0;
  color:var(--red);
}

/* =====================================================================
   СОВРЕМЕННЫЙ РЕДАКЦИОННЫЙ НАБОР
   Instrument Serif в заголовках, Instrument Sans в тексте и подписях.
   Идёт последним — перекрывает более ранние правила.
   ===================================================================== */

body,
.section-sub, .hero-sub, p, li, td, th,
.contact-form input, .contact-form textarea, .contact-form select{
  font-family:"Instrument Sans", "Helvetica Neue", Arial, sans-serif !important;
}
body{ font-size:16px; line-height:1.6; }

h1, h2, .hero h1, .section-title, .cta-banner h2, .tip-content h2,
.hero h1 .gradient-text, .price-amount, .pm-stat-number{
  font-family:"Instrument Serif", Georgia, serif !important;
  font-weight:400 !important;
  text-transform:none !important;
  letter-spacing:-0.02em;
  line-height:1.02;
}
.hero h1{ font-size:clamp(2.6rem, 9vw, 4.6rem) !important; }
.section-title{ font-size:clamp(1.9rem, 6vw, 3rem) !important; }
.price-amount{ font-size:3.4rem !important; letter-spacing:-.03em; }

/* подписи, рубрики, кнопки, меню, заголовки карточек */
.eyebrow, .section-eyebrow, .btn, .main-nav a, .price-label,
.service-card h3, .price-card h3, .faq-item summary, .area-hoods h3,
.pm-content h3, .why-content h3, .footer-links h4, .footer-contact h4,
.service-card > a, .service-price, .trust-item span, .m-head,
.mobile-call-bar, .logo-text em, .rebate-row strong, .amt, .price-note, .pdf-hint{
  font-family:"Instrument Sans", Arial, sans-serif !important;
}
.service-card h3, .price-card h3, .faq-item summary,
.pm-content h3, .why-content h3{
  font-weight:600 !important; letter-spacing:.03em; font-size:.98rem;
}
.logo-text{ font-family:"Instrument Serif", Georgia, serif !important; font-weight:400; font-size:1.3rem; letter-spacing:-.02em; }
.amt{ font-weight:600; font-size:1em; }
#local .section-sub::first-letter{ font-family:"Instrument Serif", Georgia, serif; font-size:3.1rem; }

/* меню: Instrument Sans шире прежнего шрифта — поджимаем, чтобы влезало */
@media (min-width: 981px){
  .main-nav{ gap:11px; }
  .main-nav a{ font-size:.74rem; letter-spacing:.02em; }
  .header-cta{ gap:12px; }
}
@media (min-width: 981px) and (max-width: 1400px){
  .main-nav a{ font-size:.68rem; }
  .main-nav{ gap:9px; }
}

/* =====================================================================
   ВЫПАДАЮЩИЙ СПИСОК УСЛУГ В ШАПКЕ
   На компьютере услуги и города не помещались в строку меню, поэтому
   раньше их видел только телефон. Теперь они под кнопкой «All Services».
   ===================================================================== */
@media (min-width: 981px){
  .nav-more-wrap{ position:relative; }
  .nav-more-btn{
    font-family:"Instrument Sans", Arial, sans-serif;
    font-size:.74rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
    background:none; border:0; padding:0; cursor:pointer; color:var(--ink);
  }
  .nav-more-btn::after{ content:" ▾"; }
  .nav-more-btn:hover{ color:var(--red); }
  .nav-more{
    position:absolute; top:calc(100% + 14px); right:0; min-width:250px;
    background:var(--panel); border:2px solid var(--ink);
    padding:10px 0 12px; display:none; z-index:220;
    box-shadow:6px 6px 0 rgba(26,24,20,.14);
  }
  .nav-more-wrap:hover .nav-more,
  .nav-more-wrap:focus-within .nav-more{ display:block; }
  .main-nav .nav-more .m-only{
    display:block; padding:6px 18px; font-size:.82rem; text-transform:none;
    letter-spacing:0; color:var(--ink-2);
  }
  .main-nav .nav-more .m-only:hover{ color:var(--red); }
  .main-nav .nav-more .m-head{
    display:block; padding:10px 18px 4px; font-size:.62rem; font-weight:600;
    letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
    font-family:"Instrument Sans", Arial, sans-serif;
  }
  .main-nav .nav-more .m-head:first-child{ padding-top:2px; }
}
/* на телефоне ничего не меняется: обёртка прозрачна для раскладки */
@media (max-width: 980px){
  .nav-more-wrap, .nav-more{ display:contents; }
  .nav-more-btn{ display:none; }
}
@media (min-width: 981px){
  .nav-more-btn{ white-space:nowrap; }
}

/* =====================================================================
   ЛОГОТИП-ШАПКА
   Название набрано как заголовок газеты: крупно, тёмным, с линейкой
   под ним и разрядкой в подписи. Раньше терялся рядом с заголовком.
   ===================================================================== */
.logo{ gap:12px; }
.logo svg{ width:38px; height:38px; }
.logo-text{
  font-family:"Instrument Serif", Georgia, serif !important;
  font-weight:400;
  font-size:1.75rem;
  line-height:.94;
  letter-spacing:-.035em;
  color:var(--ink);
}
.logo-text em{
  font-family:"Instrument Sans", Arial, sans-serif !important;
  font-style:normal;
  font-size:.56rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-2);
  border-top:1.5px solid var(--ink);
  padding-top:5px;
  margin-top:6px;
}
@media (max-width: 640px){
  .logo svg{ width:32px; height:32px; }
  .logo-text{ font-size:1.42rem; }
  .logo-text em{ font-size:.5rem; letter-spacing:.18em; padding-top:4px; margin-top:5px; }
}

/* шапка стала шире из-за крупного логотипа — поджимаем меню и телефон */
@media (min-width: 981px) and (max-width: 1500px){
  .main-nav{ gap:8px; }
  .main-nav a, .nav-more-btn{ font-size:.63rem; letter-spacing:.01em; }
  .header-cta .phone-link{ font-size:.82rem; }
  .header-inner{ gap:14px; }
}
@media (min-width: 981px) and (max-width: 1180px){
  .main-nav a[href="#reviews"], .main-nav a[href="#work"]{ display:none; }
}

/* врезка вылезала за экран телефона: контент был шире вьюпорта */
.tip-inner{ max-width:100%; }
.tip-content{ max-width:100%; min-width:0; }
.tip-content h2, .tip-content p{ max-width:100%; }
@media (max-width: 700px){
  .tip-banner{ padding:56px 0; }
  .tip-inner{ padding:24px 20px; gap:16px; }
  .tip-content .btn{ width:100%; }
}

/* блок со статистикой выталкивал страницу вбок на телефоне */
.pm-stat{ min-width:0; }
.pm-stat-label{ max-width:100%; }
@media (max-width: 700px){
  .pm-stat{ padding:30px 18px; }
  .pm-stat-number{ font-size:2.6rem; }
}
/* страховка: страница не должна ездить вбок ни при каких обстоятельствах */
html, body{ overflow-x:hidden; max-width:100%; }

/* =====================================================================
   СЕТКИ ДОЛЖНЫ УМЕТЬ СЖИМАТЬСЯ
   По умолчанию элемент сетки не сужается меньше своего содержимого,
   из-за чего колонки распирало шире экрана телефона и текст обрезался.
   ===================================================================== */
.pm-grid > *, .services-grid > *, .pricing-grid > *, .contact-grid > *,
.rebate-grid > *, .video-grid > *, .reviews-grid > *, .gallery-grid > *,
.trust-grid > *, .footer-inner > *, .area-grid > *, .why-grid > *{
  min-width: 0;
}
.pm-content, .pm-content > *, .pm-list, .pm-list li, .pm-list li > *,
.why-content, .rebate-content, .tip-content{ min-width: 0; }
.pm-content p, .pm-content h2{ max-width: 100%; }
.pm-list li{ flex-wrap: wrap; }
/* длинные слова и адреса не должны распирать колонку */
.pm-content, .service-card, .price-card, .review-card, .faq-item,
.rebate-content, .tip-content, .contact-form{ overflow-wrap: anywhere; }

/* длинные надписи на кнопках должны переноситься, а не вылезать за экран */
@media (max-width: 700px){
  .btn{ max-width:100%; white-space:normal; text-align:center; line-height:1.3; }
}