/* =====================================================================
   ЕДИНАЯ ШАПКА СТРАНИЦЫ — один и тот же блок на всех страницах сайта
   (блог, разделы блога, исследования, заявка; к страницам услуг не относится).
   ЭТАЛОН РАЗМЕРОВ — менять только здесь и только для всех страниц сразу:
     заголовок  clamp(50px, 9.4vw, 131px), межстрочный .9, шрифт Fatal, заглавные
     вступление 22px / 19px (планшет) / 17px (телефон), ширина до 640px
     отступы    69px сверху / 61px снизу;  планшет 45 / 41;  телефон 29 / 29
     высота     не меньше расчётной (min-height) — шапки на всех страницах одной высоты, даже с коротким вступлением
     квадраты-знак 16px над заголовком; два декоративных квадрата справа (красный и чёрный)
   Разметка:  <section class="blog-hero"><div class="blog-wrap"><div class="sqm">…</div>
              <h1 class="blog-hero__title">…</h1><p class="blog-hero__intro">…</p></div></section>
   На страницах без обёртки .blog шапку кладут внутрь <div class="hero-top"> (отступ под фиксированное меню).
   ===================================================================== */

.blog-hero, .hero-top {
  --b-ink: #1e1e1e; --b-black: #0f0f0e; --b-red: #cd1213; --b-gray: #efefef; --b-muted: #6f6f6d;
}
.blog-hero, .blog-hero *, .blog-hero *::before, .blog-hero *::after { box-sizing: border-box; }

/* отступ под фиксированное меню (как у .blog) */
.hero-top { padding-top: 70px; background: #fff; }
@media (max-width: 1199px) { .hero-top { padding-top: 68px; } }
@media (max-width: 959px) { .hero-top { padding-top: 58px; } }
@media (max-width: 639px) { .hero-top { padding-top: 38px; } }

.blog-wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; position: relative; }
@media (max-width: 639px) { .blog-wrap { padding: 0 20px; } }

/* квадраты-«фирменный знак» */
.sqm { display: flex; gap: 6px; margin-bottom: 26px; }
.sqm i { width: 16px; height: 16px; background: var(--b-ink, #1e1e1e); display: block; }
.sqm i.r { background: var(--b-red, #cd1213); }

.blog-hero { --hero-title: clamp(50px, 9.4vw, 131px); position: relative; background: var(--b-gray); padding: 69px 0 61px; overflow: hidden;
  /* ЕДИНАЯ ВЫСОТА: 130 отступы + 42 квадраты-знак + 26 + 92 (вступление до 3 строк) + заголовок в одну строку */
  min-height: calc(290px + var(--hero-title) * .9); }
.blog-hero::before, .blog-hero::after { content: ''; position: absolute; pointer-events: none; }
.blog-hero::before { right: 9%; top: 22%; width: 210px; height: 210px; background: var(--b-red); opacity: .9; }
.blog-hero::after { right: 3%; top: 48%; width: 150px; height: 150px; background: var(--b-black); opacity: .82; }
.blog-hero .blog-wrap { z-index: 1; }
.blog-hero__title { margin: 0; font: 700 var(--hero-title)/.9 'Fatal', Arial, sans-serif; text-transform: uppercase; color: var(--b-ink); }
.blog-hero__intro { margin: 26px 0 0; max-width: 640px; font: 500 22px/1.4 'GilroyRad', Arial, sans-serif; color: #444; }
@media (max-width: 959px) {
  .blog-hero { padding: 45px 0 41px; min-height: calc(207px + var(--hero-title) * .9); }   /* 86 + 42 + 26 + вступление до 2 строк */
  .blog-hero::before { width: 130px; height: 130px; right: 6%; top: 14%; }
  .blog-hero::after { width: 90px; height: 90px; right: 2%; top: 52%; }
  .blog-hero__intro { font-size: 19px; }
}
@media (max-width: 639px) {
  .blog-hero { padding: 29px 0 29px; min-height: calc(213px + var(--hero-title) * .9); }   /* 58 + 42 + 18 + вступление до 4 строк */
  .blog-hero::before { width: 84px; height: 84px; right: 12%; top: 10%; }
  .blog-hero::after { width: 56px; height: 56px; right: 4%; top: 34%; }
  .blog-hero__intro { font-size: 17px; margin-top: 18px; }
}