/*
 * Beloknet - main.css
 *
 * PHASE 3. Sections below are ported VERBATIM from the old theme
 * GrampusTheme-main/assets/css/main.css (17 918 bytes, 995 lines).
 * Rules are intentionally NOT rewritten, NOT renamed and NOT normalised:
 * the goal of the migration phase is to reproduce the existing frontend.
 *
 * Deliberate differences from the source, each with a reason:
 *   - .dev rules removed         : Grampus credit link is not migrated
 *   - MODAL section not ported   : belongs to the forms phase
 *   - form/modal rules stripped  : same reason (inside media queries)
 *   - .burger / #close-mnu       : border reset, markup now uses <button>
 *   - footer contacts + skip-link: NEW, no counterpart in the old theme
 *
 * CSS cleanup is a separate later task. Do not refactor here.
 */

:root {
  --primary: #417979;
  --secondary: #FFB203;
  --txtColor: #333333;
  --txtColor2: #5C5C5C;
  --color: #8E8E8E;
  --f5: #F5F5F5;
  --light: #FCFCFC;
  --bgArrow: #EBEBEB;

  /* Stock colors */
  --wh: white;
  --bl: black;
}


/*============= ALIGNES ===============*/

.alignwide {
  width: 100%;
}

.alignfull {
  margin-left: calc(-100vw / 2 + 100% / 2);
  margin-right: calc(-100vw / 2 + 100% / 2);
  max-width: 1920px;
}

@media only screen and (min-width: 1920px) {
  .alignfull {
    width: 100vw !important;
    max-width: unset;
    /*margin-left: calc(-1 * (1920px - 1170px) / 2) !important;*/
    /*margin-right: calc(-1 * (1920px - 1170px) / 2) !important;*/
  }
}

/* =========== BASE CONFIG =========== */
html {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font-family: 'PT-Root-UI', sans-serif;

  box-sizing: inherit;
}

.swiper-button-lock {
  display: flex !important;
}

body {
  background-color: var(--light);
  /* max-width: 1920px; */
  overflow-x: hidden;
  margin: 0 auto;
  width: auto;
  -webkit-box-shadow: 0 0 20px 5px #747474;
  box-shadow: 0 0 20px 5px #747474;
}

a {
  text-decoration: none;
  color: #121212;
  transition: all 0.3s ease-in;
}

a:hover {
  color: var(--primary);
}

ul li {
  list-style-position: inside;
  color: #121212;
  font-size: 18px;
  line-height: 26px;
  margin-bottom: 10px;
}

ul li::marker {
  color: #1F2F47;
}

ol li {
  list-style-position: inside;
  color: #121212;
  font-size: 18px;
  line-height: 26px;
  margin-bottom: 10px;
}

p {
  margin-bottom: 15px;
  color: #121212;
  font-size: 18px;
  line-height: 26px;
}

h1.page-title {
  font-size: 32px;
  line-height: 38px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 30px;
}

main.foned {
  position: relative;
  overflow: hidden;
  z-index: 999;
}

main.foned:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.breadcrumbs {
  padding: 30px 0;
  font-weight: 300;
  font-size: 18px;
  line-height: 120%;
  color: var(--txtColor2);
}

.breadcrumbs span:hover {
  color: var(--secondary);
}


.breadcrumbs span {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.breadcrumbs span a {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.breadcrumbs span.current-item {
  color: var(--txtColor2);
}

.container {
  max-width: 1170px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}

.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 225px;
  width: 100%;
  height: 50px;
  background: var(--primary);
  border: 1px solid var(--primary);
  outline: none;
  flex: none;
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  line-height: 110%;
  cursor: pointer;
  transition: all 0.3s ease-in;
  padding: 8px 20px;
  border-radius: 10px;
}

.btn svg {
  transition: all 0.3s ease-in;
  margin-right: 10px;
}

.btn svg path {
  transition: all 0.3s ease-in;
}

.btn:hover {
  color: var(--primary);
  background-color: transparent;
}

.btn:hover svg path {
  fill: rgba(18, 223, 236, 0.5);
}

.btn:focus {
  letter-spacing: normal;
}

/* 
.btn.invert {
  background-color: #f6c4df;
  color: #fff;
} */

.title {
  font-weight: 700;
  font-size: 50px;
  line-height: 110%;
  text-transform: uppercase;
  color: var(--txtColor);
  text-align: center;
  margin-bottom: 40px;
}

#main,
#primary {
  min-height: 83vh;
}

/*============ HEADER =================*/
#header .header-up {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}

#header .header-up .logo-holder {
  width: 153.5px; /* «Белок Нет» (решение владельца 23.10.2026): шире прежнего «Белокнет» — буквы того же размера */
}

#header .header-up .logo-holder img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#header .header-up .header-up-right {
  display: flex;
  gap: 20px;
}

#header .header-up .header-up-right .phone-time-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  width: 400px;
}

#header .header-up .header-up-right .phone-time-block .phones__holder .phone__item {
  font-weight: 900;
  font-size: 25px;
  line-height: 110%;
  color: var(--txtColor);
}

#header .header-up .header-up-right .phone-time-block .time__holder {
  font-weight: 500;
  font-size: 16px;
  line-height: 110%;
  color: var(--secondary);
}

#header .header-up .header-up-right .soc__holder {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}

#header .header-up .header-up-right .btn {
  font-weight: 500;
  font-size: 16px;
  line-height: 110%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: 10px;
}

#header .header-bottom .menuTop {
  display: flex;
  justify-content: space-between;
}

#header .header-bottom .menuTop .nav-menu-element {
  list-style: none;
}

#header .header-bottom .menuTop .nav-menu-element a {
  font-weight: 400;
  font-size: 16px;
  line-height: 135%;
  color: var(--txtColor2);
  padding-bottom: 5px;
}

#header .header-bottom .menuTop .nav-menu-element a:hover {
  border-bottom: 5px solid var(--primary);
}



/*================ MOBILE MNU =============*/
#header .burger.open_menu {
  display: none;
  flex-direction: column;
  background-color: transparent;
  height: 40px;
  width: 40px;
  justify-content: space-evenly;
  align-items: center;
  border-radius: 2px;
  flex-shrink: 0;
}

#header .burger.open_menu span {
  background-color: var(--primary);
  width: 30px;
  height: 4px;
  transition: all 0.3s ease-in;
}

#header .burger.open_menu.clicked {
  background-color: var(--primary);
}

#header .burger.open_menu.clicked span {
  background-color: #fff;
}

#header #mobile-mnu {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 320px;
  background-color: #f1f2f3;
  padding: 30px;
  transition: all 0.3s ease-in;
  transform: translateX(-350px);
  z-index: 9999;
  gap: 20px;
}

#header #mobile-mnu #close-mnu {
  font-size: 45px;
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  display: block;
  color: var(--primary)
}

#header #mobile-mnu a {
  font-size: 16px;
  line-height: 1;
  color: #374957;
  font-weight: 450;
}

#header #mobile-mnu a:hover {
  color: #D12D26;
}

#header #mobile-mnu .logo__holder {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

#header #mobile-mnu .logo__holder img {
  max-height: 60px;
}

#header #mobile-mnu .menuTop {
  list-style-type: none;
}

#header #mobile-mnu .menuTop li {}

#header #mobile-mnu .menuTop li a {
  font-size: 16px;
  line-height: 1;
  color: #374957;
  font-weight: 450;
}

#header #mobile-mnu .menuTop li a:hover {
  color: var(--primary);
}

#header #mobile-mnu .menuTop li.active a {
  color: var(--primary);
}

#header #mobile-mnu .adresses__holder {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 30px;
  margin-bottom: 20px;
  width: 100%;
}

#header #mobile-mnu .adresses__holder:before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  background-image: url("../images/map.svg");
  background-position: center center;
  background-repeat: no-repeat;
}

#header #mobile-mnu .adresses__holder p {
  font-size: 16px;
  line-height: 1;
  color: #374957;
  font-weight: 450;
}

#header #mobile-mnu .email__holder {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 20px;
}

#header #mobile-mnu .email__holder .email__item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  font-size: 16px;
  line-height: 1;
  color: #374957;
  font-weight: 450;
}

#header #mobile-mnu .email__holder .email__item:hover {
  color: var(--primary);
}

#header #mobile-mnu .email__holder .email__item svg {
  margin-right: 10px;
}

#header #mobile-mnu .phones__holder {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
}

#header #mobile-mnu .phones__holder .phone__item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  font-size: 16px;
  line-height: 1;
  color: var(--secondary);
  font-weight: 450;
}

#header #mobile-mnu .phones__holder .phone__item:hover {
  color: var(--primary);
}

#header #mobile-mnu .phones__holder .phone__item svg {
  margin-right: 10px;
}

#header #mobile-mnu .soc__holder {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-wrap: wrap;
}

#header #mobile-mnu .soc__holder .soc__item {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color .3s ease-in;
}

#header #mobile-mnu .soc__holder .soc__item:hover {
  background-color: #609FA8;
}

#header #mobile-mnu.opened {
  transform: translateX(0);
}


/*============ FOOTER ===============*/
#footer {
  background: var(--txtColor);
  padding: 40px 0 22px;
}

#footer .footer-wrap .footer-up {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 46.5px;
}

#footer .footer-wrap .footer-up .logo-holder {
  filter: brightness(0) invert(1);
}

#footer .footer-wrap .footer-up .menuTop {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  list-style: none;
  gap: 30px;
}

#footer .footer-wrap .footer-up .menuTop .nav-menu-element {
  margin: 0;
}

#footer .footer-wrap .footer-up .menuTop .nav-menu-element a {
  font-weight: 400;
  font-size: 16px;
  line-height: 135%;
  color: var(--color);
  transition: .6s;
}

#footer .footer-wrap .footer-up .menuTop .nav-menu-element a:hover {
  color: var(--wh);
}

#footer .footer-wrap .footer-bottom {
  padding-top: 20px;
  border-top: 1px solid var(--txtColor2);
}

#footer .footer-wrap .footer-bottom .bottom-wrap {
  display: flex;
  justify-content: space-between;
  align-self: flex-end;
}

#footer .footer-wrap .footer-bottom .bottom-wrap .privacy_link,
#footer .footer-wrap .footer-bottom .bottom-wrap .copy-write {
  font-weight: 400;
  font-size: 16px;
  line-height: 135%;
  color: var(--txtColor2);
  transition: .6s;
}

#footer .footer-wrap .footer-bottom .bottom-wrap .privacy_link:hover {
  color: var(--wh);
}

/* ============== ERROR PAGE ============= */
.error-404 .title {
  margin: 100px 0 50px;
}

.error-404 .error-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}

.error-404 .error-content .number {
  font-size: 250px;
  font-weight: 700;
  color: var(--primary);
}

.error-404 .error-content .error-n {
  font-size: 25px;
  font-weight: 600;
}

.error-404 .error-content .error-desc {
  text-align: center;
}

.privacy-policy #primary {
  max-width: 1170px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}

/* ============== НОВОЕ: доступность мобильной шторки ============== */
/* В старой теме закрытая шторка лишь уезжала за экран через transform.
   Она оставалась видимой для браузера, поэтому её ссылки попадали
   в порядок обхода клавиатурой: пользователь «проваливался» в невидимое меню.
   visibility убирает закрытую шторку из фокуса и из дерева доступности.
   transition: all в исходном правиле уже покрывает visibility,
   поэтому анимация выезда сохраняется. */

#header #mobile-mnu {
  visibility: hidden;
}

#header #mobile-mnu.opened {
  visibility: visible;
}

/* ============== НОВОЕ: сбросы для <button> ============== */
/* Бургер и крестик были <div>, теперь это <button> ради доступности.
   Правила ниже только снимают стили браузера по умолчанию. */

#header .burger.open_menu {
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

#header #mobile-mnu #close-mnu {
  background: transparent;
  border: 0;
  padding: 0;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
}

/* ============== НОВОЕ: ссылка «Перейти к содержимому» ============== */
/* Видна только при переходе с клавиатуры. На старом сайте отсутствовала. */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 10px 16px;
  background: var(--wh);
  color: var(--txtColor);
}

.skip-link:focus {
  left: 0;
}

/* ============== НОВОЕ: контакты в подвале ============== */
/* На старом сайте этот блок был закомментирован и никогда не выводился,
   поэтому исходной вёрстки не существует. Оформление подобрано
   в стилистике подвала: те же цвета, размеры и переходы. */

#footer .footer-contacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 40px;
  margin-bottom: 30px;
}

#footer .footer-contacts .contact__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  font-size: 16px;
  line-height: 135%;
  color: var(--color);
  transition: .6s;
}

#footer a.contact__item:hover {
  color: var(--wh);
}

#footer .footer-contacts .contact__item img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .7;
}

#footer .footer-contacts .contact__item.contact__phone {
  font-weight: 900;
  font-size: 20px;
  color: var(--wh);
}

#footer .footer-contacts .soc__holder {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

#footer .footer-contacts .soc__holder .soc__item {
  display: flex;
  width: 32px;
  height: 32px;
}

#footer .footer-contacts .soc__holder .soc__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
  opacity: 1;
}

#footer .footer-requisites {
  margin-bottom: 20px;
  font-weight: 400;
  font-size: 14px;
  line-height: 135%;
  color: var(--txtColor2);
}

#footer .footer-requisites p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* ============= MEDIA QUERIES =========== */
/* Перенесены из старой темы без изменений.
   Исключены правила форм и модальных окон — они относятся к фазе форм. */

@media (max-width: 992px) {
  #header .header-up .header-up-right .soc__holder {
    display: none;
  }

  .title {
    font-size: 30px;
  }

  #footer .footer-wrap .footer-up {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  h1.page-title {
    font-size: 25px;
  }
}

@media (max-width: 778px) {
  #header .header-up {
    gap: 10px;
  }

  #header .header-bottom .menuTop,
  #header .header-up .header-up-right .btn {
    display: none;
  }

  #header .header-up .header-up-right .phone-time-block {
    width: fit-content;
  }

  #header .burger.open_menu {
    display: flex;
  }

  #footer .footer-wrap .footer-up .menuTop {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 15px;
  }

  .error-404 .error-content .number {
    font-size: 120px;
  }
}

@media (max-width: 680px) {
  #footer .footer-wrap .footer-bottom .bottom-wrap {
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
  }

  #footer .footer-wrap .footer-up {
    margin-bottom: 20px;
  }

  /* НОВОЕ: контакты подвала в один столбец */
  #footer .footer-contacts {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 470px) {
  #header .header-up .header-up-right .phone-time-block .time__holder {
    display: none;
  }

  .title {
    font-size: 20px;
  }
}

@media (max-width: 400px) {
  #header .header-up .logo-holder {
    width: 109.6px;
  }

  #header .header-up .header-up-right .phone-time-block .phones__holder .phone__item {
    font-size: 14px;
  }
}


/* Хлебные крошки Yoast SEO (BN-F4-04): последний пункт у Yoast — span.breadcrumb_last
   вместо span.current-item у NavXT старого сайта. */
.breadcrumbs .breadcrumb_last {
  color: var(--txtColor2);
}

/* Яндекс.Карта в подвале (BN-F4-04, решение владельца 13.10.2026) — на страницах
   без секции «Контакты и адреса». Серая, как карта в секции контактов. */
.footer-map .map-holder {
  position: relative;
  height: 400px;
  background: url("../images/map-holder.png") center;
  filter: grayscale(1);
}

.footer-map .map-holder .map-object {
  position: absolute;
  inset: 0;
  display: flex;
}

.footer-map .map-holder .map-object iframe,
.footer-map .map-holder .map-object > ymaps {
  flex-grow: 1;
}

@media (max-width: 778px) {
  .footer-map .map-holder {
    height: 320px;
  }
}


/* ==================== BN-F7-03-B: мобильный UX (решения владельца F7-DEC-003, 20.10.2026) ==================== */

/* Шапка на телефоне: второй ряд — номер и мессенджеры видны без открытия меню. */
#header .header-mobile-contacts {
  display: none;
}

@media (max-width: 778px) {
  #header .header-up {
    flex-wrap: wrap;
    row-gap: 0;
  }
  #header .header-up .header-up-right .phone-time-block {
    display: none;
  }
  #header .header-mobile-contacts {
    display: flex;
    order: 3;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #ececec;
  }
  #header .header-mobile-contacts .hmc-phone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 44px;
    color: var(--txtColor);
    text-decoration: none;
  }
  #header .header-mobile-contacts .hmc-number {
    font-weight: 700;
    font-size: 20px;
    line-height: 1.15;
    white-space: nowrap;
  }
  #header .header-mobile-contacts .hmc-time {
    font-size: 12px;
    line-height: 1.25;
    color: var(--secondary);
  }
  #header .header-mobile-contacts .hmc-soc {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
  }
  #header .header-mobile-contacts .hmc-soc .soc__item img {
    display: block;
    width: 40px;
    height: 41px;
    border-radius: 10px;
    object-fit: contain;
  }
}

@media (max-width: 370px) {
  #header .header-mobile-contacts .hmc-number {
    font-size: 18px;
  }
  #header .header-mobile-contacts .hmc-soc {
    gap: 6px;
  }
  #header .header-mobile-contacts .hmc-soc .soc__item img {
    width: 36px;
    height: 37px;
  }
}

/* Выдвижное меню: при открытой шторке гамбургер скрыт (виден один крестик),
   крестик — зона 44×44, белый текст кнопки, страница под шторкой не прокручивается. */
#header .burger.open_menu.clicked {
  visibility: hidden;
}

#header #mobile-mnu #close-mnu {
  width: 44px;
  height: 44px;
  font-size: 40px;
  line-height: 44px;
  text-align: center;
}

#header #mobile-mnu a.btn {
  color: var(--wh);
}

html.bn-menu-open,
html.bn-menu-open body {
  overflow: hidden;
}

#header #mobile-mnu {
  overflow-y: auto;
}

/* Вложенные пункты в шторке (например, «Услуги» → группы → услуги). */
#header #mobile-mnu .menuTop li.menu-item-has-children {
  position: relative;
}

#header #mobile-mnu .menuTop .sub-menu {
  display: none;
  list-style: none;
  margin: 8px 0 4px;
  padding: 0 0 0 12px;
  border-left: 2px solid #dfe9e9;
}

#header #mobile-mnu .menuTop li.is-open > .sub-menu {
  display: block;
}

#header #mobile-mnu .menuTop .sub-menu .sub-menu .sub-menu {
  display: none !important; /* методы кодирования — на странице «Кодирование» */
}

#header #mobile-mnu .menuTop .sub-menu li a {
  display: block;
  padding: 10px 0;
}

#header #mobile-mnu .sub-toggle {
  position: absolute;
  right: 0;
  top: -9px; /* по центру строки «Услуги» (строка 26 px, кнопка 44 px) */
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: #e5ebeb;
  color: var(--txtColor);
  cursor: pointer;
}

#header #mobile-mnu .sub-toggle::before,
#header #mobile-mnu .menu-group-toggle::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s;
}

#header #mobile-mnu .is-open > .sub-toggle::before,
#header #mobile-mnu .is-open > .menu-group-toggle::after {
  transform: rotate(-135deg);
}

#header #mobile-mnu .menu-group-toggle {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 4px 8px 0;
  border: 0;
  border-top: 1px solid #e3e6e6;
  background: none;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--primary);
  text-align: left;
  cursor: pointer;
}

/* Компьютер: мегаменю у пункта с подменю. Открывается стрелкой, клавиатурой, наведением. */
@media (min-width: 779px) {
  #header > .container {
    position: relative;
  }
  #header .header-bottom .menuTop > li.has-mega {
    position: static;
    display: flex;
    align-items: center;
    gap: 2px;
  }
  #header .header-bottom .sub-arrow {
    width: 24px;
    height: 24px;
    border: 0;
    background: none;
    color: var(--txtColor2);
    cursor: pointer;
  }
  #header .header-bottom .sub-arrow::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
  }
  #header .header-bottom .is-open > .sub-arrow::before {
    transform: rotate(-135deg);
  }
  #header .header-bottom .menuTop > li > .sub-menu {
    display: none;
    position: absolute;
    left: 15px;
    right: 15px;
    top: 100%;
    z-index: 60;
    margin: 0;
    padding: 22px 26px 16px;
    list-style: none;
    background: var(--wh);
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 28px;
    max-height: calc(100vh - 170px);
    overflow: auto;
  }
  #header .header-bottom .menuTop > li.is-open > .sub-menu,
  #header .header-bottom .menuTop > li.has-mega:focus-within > .sub-menu {
    display: grid;
  }
  #header .header-bottom .sub-menu li {
    list-style: none;
  }
  #header .header-bottom .sub-menu .sub-menu {
    margin: 0;
    padding: 0;
  }
  #header .header-bottom .sub-menu .menu-group-title {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--primary);
  }
  #header .header-bottom .menuTop .sub-menu .nav-menu-element a {
    display: block;
    padding: 6px 0;
    font-size: 15px;
    color: var(--txtColor);
    border: 0;
  }
  #header .header-bottom .menuTop .sub-menu .nav-menu-element a:hover {
    border: 0;
    color: var(--primary);
  }
  #header .header-bottom .menuTop .sub-menu .sub-menu .sub-menu a {
    padding-left: 14px;
    font-size: 14px;
    color: var(--txtColor2);
  }
  #header .header-bottom .sub-menu > .mega-all {
    grid-column: 1 / -1;
    border-top: 1px solid #eee;
    padding-top: 10px;
  }
  #header .header-bottom .sub-menu > .mega-all a {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
  }
}

/* BN-F7-NAV: наведение. Панель открывает класс is-hover (assets/js/mobile-menu.js) с задержкой закрытия,
   а невидимая полоса под «Услуги» перекрывает промежуток до панели — курсор не теряет меню. */
@media (min-width: 779px) and (hover: hover) {
  #header .header-bottom .menuTop > li.has-mega.is-hover > .sub-menu {
    display: grid;
  }
  #header .header-bottom .menuTop > li.has-mega > a {
    position: relative;
  }
  #header .header-bottom .menuTop > li.has-mega > a::after {
    content: "";
    position: absolute;
    left: -30px;
    right: -40px;
    top: 100%;
    height: 26px;
  }
}

/* Подвал на телефоне: меню в две колонки, контрастные ссылки, удобные строки. */
@media (max-width: 778px) {
  #footer .footer-wrap .footer-up .menuTop {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
    width: 100%;
    padding: 0;
  }
  #footer .footer-wrap .footer-up .menuTop .nav-menu-element a {
    display: block;
    min-height: 44px;
    padding: 11px 0;
    box-sizing: border-box;
    color: var(--wh);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }
  #footer .footer-contacts .contact__item {
    color: #e6e6e6;
  }
  #footer .footer-contacts .contact__item.contact__phone {
    color: var(--wh);
  }
  #footer .footer-contacts .soc__holder .soc__item {
    width: 40px;
    height: 40px;
  }
  #footer .footer-requisites {
    color: #c9c9c9;
    font-size: 13px;
  }
  #footer .footer-wrap .footer-bottom .bottom-wrap {
    align-items: flex-start;
  }
  #footer .footer-wrap .footer-bottom .bottom-wrap .privacy_link {
    display: inline-block;
    padding: 10px 0;
    color: var(--wh);
    text-decoration: underline;
  }
  #footer .footer-wrap .footer-bottom .bottom-wrap .copy-write {
    color: #c9c9c9;
  }
}

/* Политика и тексты страниц: длинные неразрывные строки переносятся (страница не уходит вбок). */
#primary .entry-content,
.privacy-policy #primary {
  overflow-wrap: anywhere;
}
/* ---------- BN-F7-NAV: мегаменю «Услуги» — карточки ---------- */
.mega-card__title {
  display: block;
  font-weight: 600;
  line-height: 1.3;
}

.mega-card__desc {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--txtColor2);
}

.mega-card__draft {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #fff3d6;
  color: #7a5200;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: 1px;
}

@media (min-width: 779px) {
  #header .header-bottom .menuTop > li.has-mega > .sub-menu {
    padding: 24px 26px 18px;
    gap: 18px 22px;
  }
  #header .header-bottom .sub-menu .menu-group-title {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e3ecec;
  }
  #header .header-bottom .menuTop .sub-menu .sub-menu {
    display: grid;
    gap: 10px;
  }
  #header .header-bottom .menuTop .sub-menu .mega-card > a {
    display: block;
    height: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1px solid #e3ecec;
    border-radius: 10px;
    background: #f7fafa;
    color: var(--txtColor);
    font-size: 15px;
    transition: border-color .2s, background-color .2s, box-shadow .2s;
  }
  #header .header-bottom .menuTop .sub-menu .mega-card > a:hover,
  #header .header-bottom .menuTop .sub-menu .mega-card > a:focus-visible {
    border-color: var(--primary);
    background: var(--wh);
    box-shadow: 0 6px 18px rgba(65, 121, 121, .14);
    color: var(--txtColor);
  }
  #header .header-bottom .menuTop .sub-menu .mega-card > a:hover .mega-card__title {
    color: var(--primary);
  }
}

/* Шторка (телефон): карточки внутри аккордеона групп. */
#header #mobile-mnu .menuTop .sub-menu .mega-card > a {
  margin: 6px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #e8eeee;
  color: var(--txtColor);
  font-size: 15px;
}

#header #mobile-mnu .menuTop .sub-menu .mega-card .mega-card__desc {
  font-size: 13px;
}

/* ---------- BN-F7-NAV: мессенджер без ссылки — обычный значок без действия ---------- */
.soc__item.soc__item--inactive {
  cursor: default;
}

/* Полоса предпросмотра для администратора. */
.bn-preview-note {
  padding: 6px 16px;
  background: #fff3d6;
  color: #5a3d00;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

/* BN-F7-NAV: после Esc панель скрыта, пока фокус не уйдёт из пункта или не наведут мышь. */
@media (min-width: 779px) {
  #header .header-bottom .menuTop > li.has-mega.is-dismissed > .sub-menu {
    display: none !important;
  }
}

/* Fable FA-12: у картинок из медиатеки есть width/height (пропорции известны заранее);
   высота по-прежнему по ширине — вид не меняется там, где CSS задаёт только ширину. */
.bn-img {
  height: auto;
}

/* Fable FA-13: <nav> вокруг меню — область навигации для экранного диктора;
   в раскладке не участвует, вид прежний. */
.bn-nav {
  display: contents;
}

/* Fable FA-13: в шторке зона нажатия пунктов верхнего уровня — около 35 px по высоте
   (было 19 px) за счёт невидимого расширения ссылки; текст и отступы не меняются. */
#header #mobile-mnu .menuTop > li > a {
  position: relative;
}

#header #mobile-mnu .menuTop > li > a::after {
  content: "";
  position: absolute;
  inset: -8px 0;
}

/* Fable FA-13: контраст текста по WCAG AA — решение владельца 23.10.2026 «контраст: все»
   (предпросмотр REPORTS/BN-FABLE-AUDIT/screens/contrast-preview/CONTRAST_PREVIEW.png).
   Меняется только цвет текста; фоны, плашки и кнопки фирменного жёлтого не трогаются.
   !important — правила должны перекрыть цвета из sections.css/service.css, которые
   подключаются позже main.css. */
.time__holder,
.hmc-time,
.counter .counter__current {
  color: #996b02 !important;
}

.step-item .number {
  color: #c28702 !important;
}

#cotacts-block .phones__holder .phone__item,
.contact-in .phones__holder .phone__item {
  color: #c48902 !important;
}

.price-block .old-price,
.price-block .new-price {
  color: #333333 !important;
}

.review-item .date,
.price-bottom-block [class*="old-pr"] {
  color: #707070 !important;
}

.pa-price .pa-old {
  color: #757575 !important;
}

.counter__total {
  color: #747474 !important;
}

.svc-inline-cta__sub {
  color: #f0f5f5 !important;
}

.service-cta__text {
  color: #ffffff !important;
}

/* Подвал на компьютере (на телефоне ссылки уже светлые — без изменений). */
@media (min-width: 779px) {
  .site-footer .menuTop a,
  .site-footer .footer-requisites,
  .site-footer .footer-requisites p,
  .site-footer .privacy_link,
  .site-footer .copy-write {
    color: #9c9c9c !important;
  }

  /* наведение — как раньше (белый) */
  .site-footer .menuTop a:hover,
  .site-footer .privacy_link:hover {
    color: var(--wh) !important;
  }
}

/* Fable FA-12: <picture> вокруг картинки с WebP-копией не участвует в раскладке. */
picture.bn-pic {
  display: contents;
}

/* Шапка на компьютере: подчёркивание «Услуги» при наведении не сдвигает шапку и мегаменю.
   У этого пункта ссылка — элемент flex-строки (рядом стрелка), поэтому border-bottom
   добавлял 5 px высоты строке меню. Линия рисуется отдельным слоем той же толщины и
   цвета ровно там, где была рамка (под отступом ссылки), поверх открытого мегаменю —
   раскладка не меняется. */
@media (min-width: 779px) {
  #header .header-bottom .menuTop > li.has-mega > a {
    position: relative;
  }
  #header .header-bottom .menuTop > li.has-mega > a:hover {
    border-bottom: 0;
  }
  #header .header-bottom .menuTop > li.has-mega > a::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px; /* на одной высоте с линией у остальных пунктов меню */
    height: 5px;
    z-index: 61;
    background: var(--primary);
    opacity: 0;
    transition: opacity .3s ease-in;
    pointer-events: none;
  }
  #header .header-bottom .menuTop > li.has-mega > a:hover::before {
    opacity: 1;
  }
}

/* Мобильное меню (решения владельца 23.10.2026): белый фон, разделители пунктов. Услуги в «Услугах» —
   отдельные строки на светлой подложке с разделителями и стрелкой, без выделения отдельных услуг:
   востребованные просто стоят первыми (порядок — меню «Шторка: услуги списком»). */
#header #mobile-mnu {
  background: #fff;
}
#header #mobile-mnu .menuTop > li {
  margin: 0;
  border-bottom: 1px solid #edf1f1;
}
#header #mobile-mnu .menuTop > li > a {
  display: block;
  padding: 14px 0;
  font-size: 17px;
  line-height: 1.2;
  color: #2c3a3a;
}
#header #mobile-mnu .menuTop > li > a::after {
  inset: 0;
}
#header #mobile-mnu .menuTop > li.menu-item-has-children > .sub-toggle {
  top: 3px;
  background: #eef4f4;
}
#header #mobile-mnu .menuTop > li.menu-item-has-children > .sub-menu {
  margin: 0 0 14px;
  padding: 0 14px;
  border-left: 0;
  border-radius: 12px;
  background: #f3f7f7;
}
#header #mobile-mnu .menuTop .sub-menu .drawer-service {
  margin: 0;
  border-bottom: 1px solid #dfe9e9;
}
#header #mobile-mnu .menuTop .sub-menu .drawer-service:last-child {
  border-bottom: 0;
}
#header #mobile-mnu .menuTop .sub-menu .drawer-service > a {
  display: block;
  padding: 13px 22px 13px 0; /* 20px строка + 26px ≥ 44px — зона нажатия */
  font-size: 16px;
  line-height: 1.25;
  color: #2c3a3a;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='%23417979' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 2px center / 8px 14px no-repeat;
}
#header #mobile-mnu .menuTop .sub-menu .drawer-service:last-child > a {
  font-weight: 600;
  color: var(--primary);
  background: none;
}
#header #mobile-mnu .phones__holder .phone__item {
  color: #2c3a3a; /* тёмный, как в шапке (контраст на белом ≈ 12:1) */
}

/* Мобильное меню: «Услуги» — окно снизу (вариант 3, решение владельца 23.10.2026; assets/js/mobile-menu.js).
   Список в шторке при включённом JS не раскрывается — его заменяет окно. */
#header #mobile-mnu .menuTop > li.has-sheet > .sub-menu {
  display: none !important;
}
.bn-sheet-dim {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(20, 35, 35, .45);
  opacity: 0;
  transition: opacity .25s ease;
}
.bn-sheet-dim.is-open {
  opacity: 1;
}
.bn-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  max-height: 85dvh;
  padding: 10px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  border-radius: 20px 20px 0 0;
  background: #fff;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .15);
  transform: translateY(100%);
  transition: transform .25s ease;
  overscroll-behavior: contain;
}
.bn-sheet.is-open {
  transform: translateY(0);
}
.bn-sheet[hidden],
.bn-sheet-dim[hidden] {
  display: none;
}
.bn-sheet__grab {
  flex: 0 0 auto;
  width: 40px;
  height: 4px;
  margin: 0 auto 8px;
  border-radius: 2px;
  background: #cfdcdc;
}
.bn-sheet__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.bn-sheet__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #2c3a3a;
}
.bn-sheet__close {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #eef4f4;
  color: #417979;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.bn-sheet__list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.bn-sheet__item {
  margin: 0;
  border-bottom: 1px solid #e3ecec;
}
.bn-sheet__item > a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 12px 22px 12px 0;
  font-size: 17px;
  line-height: 1.25;
  color: #2c3a3a;
  text-decoration: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='%23417979' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 2px center / 8px 14px no-repeat;
}
.bn-sheet__item:last-child {
  border-bottom: 0;
  padding-top: 14px;
}
.bn-sheet__item:last-child > a {
  justify-content: center;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}
.bn-sheet__close:focus-visible,
.bn-sheet__item > a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.bn-sheet__item:last-child > a:focus-visible {
  outline-color: #2c3a3a;
}
@media (prefers-reduced-motion: reduce) {
  .bn-sheet,
  .bn-sheet-dim {
    transition: none;
  }
}