.header__logo {
  display: flex;
  align-items: flex-start;
  width: 160px;
}

.button.button-outlined,
.button.button-filled {
  border-radius: 0;
}

html {
  --c-surface-accent: #dba66f;
  --c-text-accent: #dba66f;
  --c-surface-subdued: #E5E4E2;
  --c-surface-subdued-hovered: #dedcdb;
  --c-surface-accent-hovered: #c48d5b;
  --c-text-accent-hovered: #c48d5b;
  --c-surface-primary: rgb(205 205 205 / 30%);
}

html,.f-h1,.f-h2,.f-h3,h1,h2,h4,h5,h6 {
  font-family: 'Manrope', sans-serif;
}

@media (min-width: 992px) {
  .block_banner.banner-hero {
    min-height: 768px;
  }
}

@font-face
{
  font-family: 'Manrope';
  font-weight: 125 950;
  font-style: normal;

  src: url('/assets/fonts/Manrope/Manrope-VariableFont_wght.ttf') format('truetype');
}

@font-face
{
  font-family: 'Jost';
  font-weight: 125 950;
  font-style: normal;

  src: url('/assets/fonts/Jost/Jost-VariableFont_wght.ttf') format('truetype');
}
/* Подменю верхней навигации: раскрывается по наведению на пункт с разделами.
   Оформление взято у меню-шторки (`.nav__item*` в main.css), которая
   открывалась кнопкой «Меню»: тот же размер и цвет ссылок, тот же отступ
   слева, тот же чёрный при наведении. Собственный класс, а не `.is_dropdown`,
   потому что тот занят механизмом «лишние ссылки в троеточие». */
.header__submenu
{
  position: relative;
}
.header__submenu > .button
{
  gap: 4px;
}
.header__submenu .icon-ic24-chevron-down
{
  transition: transform .18s ease-in-out;
  transform: scaleY(1);
  transform-origin: center;

  color: var(--accent);
}
/* why: пункт меню кончается на 14px выше нижнего края шапки — подменю
   опускается под шапку, а зазор перекрывается прозрачным мостиком, иначе
   курсор по дороге к списку теряет :hover и меню схлопывается */
.header__submenu--content::before
{
  position: absolute;
  bottom: 100%;
  left: 0;

  display: block;

  width: 100%;
  height: 14px;

  content: '';
}
.header__submenu--content
{
  position: absolute;
  z-index: 50;
  top: calc(100% + 14px);
  left: 0;

  display: flex;
  flex-direction: column;
  gap: 4px;

  width: max-content;
  max-width: 380px;
  padding: 16px 24px 20px;

  transition: opacity .13s linear, transform .18s linear;
  transform: translateY(-16px);
  pointer-events: none;

  opacity: 0;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
/* размеры и цвета — как у ссылок раздела в меню-шторке */
.header__submenu--content .button
{
  min-width: 100%;
  padding: 6px 0;

  text-align: left;

  justify-content: flex-start;
}
/* why: длинные названия («Системы противопожарной безопасности») упираются в
   max-width подменю и переносятся на вторую строку. `.button span` в main.css
   центрирован — перенесённая строка вставала по центру, а не под первой. */
.header__submenu--content .button span
{
  font-size: clamp(16px, calc(16px + (18 - 16) * ((100vw - 1024px) / (1920 - 1024))), 18px);
  line-height: 1.56;

  text-align: left;

  color: #52525b;
  white-space: normal;
}
.header__submenu--content .button:hover span,
.header__submenu--content .button:focus span,
.header__submenu--content .button:active span
{
  color: #000;
}
.header__submenu:hover .icon-ic24-chevron-down,
.header__submenu:focus-within .icon-ic24-chevron-down
{
  transform: scaleY(-1);
}
.header__submenu:hover .header__submenu--content,
.header__submenu:focus-within .header__submenu--content
{
  transform: translateY(0);
  pointer-events: all;

  opacity: 1;
}

/* Копирайт и ссылка на политику — в правой части строки с адресом,
   контактами. Отдельная нижняя полоса подвала (и блок разработчика в ней)
   удалена, поэтому строка контактов теперь замыкает подвал. */
.footer__bottom-contacts
{
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
/* why: адрес, телефон и почта занимают почти всю ширину — копирайт помещается
   в ту же строку только более мелким шрифтом, иначе переносится вниз */
.footer__bottom-contacts .copyright
{
  display: flex;
  align-items: center;
  gap: 12px;

  margin-left: auto;

  font-size: 13px;
  line-height: 1.4;
}
.footer__bottom-contacts .copyright span,
.footer__bottom-contacts .copyright a
{
  font-size: 13px;

  color: var(--c-text-disabled);
}
.footer__bottom-contacts .copyright a:hover,
.footer__bottom-contacts .copyright a:focus
{
  color: var(--c-text-dark);
}
@media (max-width: 768px)
{
  .footer__bottom-contacts .copyright
  {
    flex-direction: column;
    align-items: flex-start;

    margin-left: 0;
  }
}