/*
 * Шапка сайта. Один файл на обе темы оформления (style.css и landing-new.css),
 * чтобы правила не расходились между шаблонами.
 *
 * Что было не так: на десктопе между логотипом и телефоном зияла пустота,
 * «Район работы» выглядел серой подписью и не читался как кликабельный,
 * кнопки заявки в шапке не было вовсе. На телефоне в шапке не было города —
 * на сети из 125 гео-хостов это главный элемент.
 */

:root {
	--kp-lime: #a4d020;
	--kp-green: #4d9b42;
	--kp-deep: #2b8750;
	--kp-ink: #1c2410;
	--kp-grad: linear-gradient(135deg, #a6d120 0%, #7ab52f 45%, #2b8750 100%);
	/* Полоса меню отдельным градиентом: на светлом лайме белый текст не читался. */
	--kp-navgrad: linear-gradient(100deg, #37701f 0%, #2f7d3b 55%, #1f6f45 100%);
}

/* ─── общий каркас ─────────────────────────────────────────────────────── */

#header {position: relative; z-index: 1200; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .06);}
/* Сетка шапки: логотип, город, телефон, кнопка — четыре зоны, каждая по
   содержимому. Раньше блоки были flex-элементами без ограничений и телефон
   растягивался на 460 px, из-за чего подпись под ним уезжала от края. */
#header .head {display: flex; align-items: center; gap: 20px; padding: 14px 0;}
#header .logo {display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 auto;}
#header .log {flex: none;}
#header .log img {display: block; width: 216px; height: auto;}
#header .cont {display: flex; align-items: center; gap: 18px; flex: none; margin-left: auto;}
#header .phonebox {flex: none; display: flex; flex-direction: column; align-items: flex-end;}
.citypill {flex: none;}
.hbtn {flex: none;}

/* ─── плашка города ────────────────────────────────────────────────────── */

.citypill {display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px 8px 12px; border: 1.5px solid #e6eed3; border-radius: 999px; background: #f6faec; text-decoration: none; line-height: 1.15; transition: border-color .18s, background .18s, box-shadow .18s;}
.citypill:hover {border-color: var(--kp-lime); background: #f0f7de; box-shadow: 0 3px 12px rgba(164, 208, 32, .22);}
.citypill svg {flex: none; color: var(--kp-green);}
.citypill__t {font-size: 13px; color: #6e7a5c;}
.citypill__t b {display: block; font-size: 15px; font-weight: 700; color: var(--kp-ink) !important;}
.citypill__c {margin-left: 4px; padding-left: 11px; border-left: 1px solid #dce7c4; font-size: 12px; color: #86935f; white-space: nowrap;}
.citypill:hover .citypill__c {color: var(--kp-green);}

/* ─── телефон и кнопка ─────────────────────────────────────────────────── */

#header .phonebox .phone {display: inline-flex; align-items: center; gap: 8px; font-size: 23px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; color: var(--kp-ink) !important; white-space: nowrap;}
#header .phonebox .phone .ph-ico {flex: none; padding: 6px; border-radius: 50%; background: var(--kp-lime-soft, #eef6dc); color: var(--kp-green); box-sizing: content-box; transition: background .16s, color .16s;}
#header .phonebox .phone:hover {color: var(--kp-green) !important;}
#header .phonebox .phone:hover .ph-ico {background: var(--kp-green); color: #fff;}
#header .phonebox .time {display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 4px; font-size: 12.5px; color: #8b8b8b; white-space: nowrap;}
#header .phonebox .time .tm-ico {flex: none; color: #a9b39a;}

.hbtn, .hbtn span, .hbtn:visited {color: #fff !important;}
.hbtn {display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px; border: 0; border-radius: 999px; background: var(--kp-grad); color: #fff !important; font-size: 15.5px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: 0 6px 18px rgba(77, 155, 66, .28); transition: transform .15s, box-shadow .18s, filter .18s;}
.hbtn:hover {transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 9px 24px rgba(77, 155, 66, .34); color: #fff !important;}
.hbtn:active {transform: translateY(0);}
.hbtn svg {flex: none;}

/* ─── строка меню ──────────────────────────────────────────────────────── */

#header .menu.pu {background: var(--kp-navgrad); position: relative;}
#header .menu.pu::after {content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: rgba(0, 0, 0, .07);}
#header .menu .nav {display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; justify-content: space-between; font-family: var(--fonttitle);}
#header .menu .nav > li {position: relative;}
#header .menu .nav > li > a {display: flex; align-items: center; gap: 8px; padding: 11px 14px !important; color: #fff !important; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; transition: background .16s;}
#header .menu .nav > li > a .mi {flex: none; opacity: .82; transition: opacity .16s, transform .16s;}
#header .menu .nav > li:hover > a .mi {opacity: 1; transform: translateY(-1px);}
#header .menu .nav > li > a::before {content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; background: var(--kp-lime); opacity: 0; transition: opacity .16s;}
#header .menu .nav > li > a {position: relative;}
#header .menu .nav > li:hover > a {background: rgba(255, 255, 255, .1); color: #fff !important;}
#header .menu .nav > li:hover > a::before, #header .menu .nav > li.current-menu-item > a::before, #header .menu .nav > li.current-menu-parent > a::before {opacity: 1;}
#header #menu-glavnoe-menyu li:hover {background: transparent;}

#header .menu .menu-item-has-children > a::after {content: ""; width: 6px; height: 6px; margin-left: 4px; border-right: 2px solid rgba(255, 255, 255, .8); border-bottom: 2px solid rgba(255, 255, 255, .8); transform: translateY(-2px) rotate(45deg); transition: transform .18s;}
#header .menu .menu-item-has-children:hover > a::after {transform: translateY(1px) rotate(225deg);}
#header .menu .menu-item-has-children:after {content: none;}

#header .menu .sub-menu {display: none; position: absolute; top: 100%; left: 0; min-width: 250px; margin: 0; padding: 8px 0; list-style: none; background: #fff; border-radius: 0 0 12px 12px; box-shadow: 0 16px 40px rgba(20, 30, 10, .16); z-index: 20;}
#header .menu .menu-item-has-children:hover .sub-menu {display: block; position: absolute; top: 100%;}
#header .menu .sub-menu li {padding: 0;}
#header .menu .sub-menu a {display: block; padding: 10px 20px; color: #2c3320 !important; font-size: 15px; font-weight: 500; text-transform: none; transition: background .14s, color .14s;}
#header .menu .sub-menu a:hover {background: #f4f9e7; color: var(--kp-green) !important;}


@media (max-width: 1399px) {
	#header .log img {width: 190px;}
	#header .head {gap: 16px;}
	#header .phonebox .phone {font-size: 21px;}
	.hbtn {padding: 13px 20px; font-size: 15px;}
}

@media (max-width: 1199px) {
	#header .log img {width: 168px;}
	#header .citypill__c {display: none;}
	#header .citypill {padding: 7px 12px 7px 10px;}
	#header .phonebox .phone {font-size: 19px;}
	#header .phonebox .phone .ph-ico {padding: 5px;}
	#header .phonebox .time {font-size: 11.5px;}
	.hbtn {padding: 12px 16px; font-size: 14px; gap: 7px;}
	#header .menu .nav > li > a {padding: 10px 9px !important; font-size: 14px; gap: 6px;}
	#header .menu .nav > li > a .mi {width: 17px; height: 17px;}
}

/* Между 992 и 1080 кнопка и телефон уже не помещаются в одну строку:
   прячем подпись на кнопке, оставляя иконку. */
@media (max-width: 1079px) {
	#header .log img {width: 150px;}
	#header .hbtn span, #header .hbtn {font-size: 0;}
	#header .hbtn {padding: 12px; border-radius: 50%;}
	#header .hbtn svg {width: 19px; height: 19px;}
	#header .menu .nav > li > a {padding: 10px 7px !important; font-size: 13px;}
}

/* ☠️ Границу держим на 1024, а не на 991: в стилях лендинга десктопная шапка
   пряталась правилом `@media (max-width: 1024px) #header{display:none!important}`,
   и при 992–1024 сайт оставался вообще без шапки. */
#mobile {display: none;}

@media (max-width: 1024px) {
	#header {display: none !important;}
	#mobile {display: block;}
}

/* ─── мобильная шапка ──────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	#mobile {position: relative; z-index: 1200; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .07);}
	#mobile .container {display: flex !important; align-items: center; gap: 10px; padding-top: 10px; padding-bottom: 10px;}
	#mobile .mlogo {flex: none;}
	#mobile .mlogo img {display: block; width: 126px; height: auto;}
	#mobile .mcity {flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1.5px solid #e6eed3; border-radius: 999px; background: #f6faec; color: var(--kp-ink) !important; font-size: 13.5px; font-weight: 600; line-height: 1.1; text-decoration: none;}
	#mobile .mcity svg {flex: none; color: var(--kp-green);}
	#mobile .mcity span {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
	#mobile .mtel, #mobile .mburger {flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; text-decoration: none;}
	#mobile .mtel {background: var(--kp-grad); color: #fff;}
	#mobile .mtel svg {fill: #fff;}
	#mobile .mburger svg {fill: var(--kp-ink);}
}

@media (max-width: 400px) {
	#mobile .mlogo img {width: 104px;}
	#mobile .mcity {font-size: 12.5px; padding: 6px 9px;}
	#mobile .container {gap: 7px;}
}

/* ─── мобильное меню ─────────────────────────────────────────
 * Был плоский список из 16 одинаковых строк. Стало окно с городом, звонком,
 * ветками услуг в аккордеонах и мессенджерами внизу.
 */

/* Шапка #mobile сидит на 1200 и перекрывала верх окна меню (1050 от старого бутстрапа). */
#mmenu.mmv2 {z-index: 1300 !important; background: #fff !important; padding: 0 !important;}
#mmenu.mmv2 .modal-dialog {width: 100%; max-width: none; height: 100%; margin: 0; padding: 0 16px 32px; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff;}

.mm-top {position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -16px 14px; padding: 12px 16px; background: #fff; border-bottom: 1px solid #eef2e6;}
.mm-logo img {display: block; width: auto; height: 31px;}
.mm-close {display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #f2f6ea; color: var(--kp-ink); cursor: pointer;}
.mm-close:hover {background: var(--kp-lime); color: #1e2c05;}

.mm-city {display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-radius: 14px; background: var(--kp-tint, #f7faf1); box-shadow: inset 0 0 0 1px #e7ece0; color: var(--kp-ink) !important; text-decoration: none;}
.mm-city svg {flex: none; color: var(--kp-green);}
.mm-city b {flex: 1; min-width: 0; font-size: 15px; font-weight: 700;}
.mm-city span {flex: none; padding: 5px 11px; border-radius: 999px; background: #fff; color: var(--kp-green); font-size: 12.5px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(77, 155, 66, .3);}

.mm-cta {display: grid; gap: 10px; margin: 12px 0 18px;}
.mm-call {display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px #e7ece0; color: var(--kp-ink) !important; text-decoration: none;}
.mm-call svg {flex: none; padding: 9px; border-radius: 50%; background: rgba(164, 208, 32, .18); color: var(--kp-green); box-sizing: content-box;}
.mm-call i {display: block; font-style: normal; font-size: 21px; font-weight: 800; line-height: 1.1;}
.mm-call small {display: block; margin-top: 3px; font-size: 12.5px; font-weight: 500; color: var(--kp-muted, #7c8571);}
.mm-btn {width: 100%; padding: 15px 18px; border: 0; border-radius: 999px; background: var(--kp-grad); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;}

.mm-nav {margin: 0; padding: 0; list-style: none;}
.mm-item {border-bottom: 1px solid #eef2e6; padding: 0 !important; list-style: none;}
.mm-item:first-child {border-top: 1px solid #eef2e6;}
.mm-row {display: flex; align-items: stretch; gap: 4px;}
.mm-row > a {flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 14px 2px; color: var(--kp-ink) !important; font-size: 16.5px; font-weight: 600; line-height: 1.3; text-decoration: none;}
.mm-row > a .mi {flex: none; width: 21px; height: 21px; color: var(--kp-green);}
.mm-item.is-current > .mm-row > a {color: var(--kp-green) !important;}
.mm-more {flex: none; width: 46px; padding: 0; border: 0; background: none; color: #8d9880; cursor: pointer; transition: transform .2s, color .2s;}
.mm-more[aria-expanded="true"] {transform: rotate(180deg); color: var(--kp-green);}

.mm-sub {margin: 0 0 10px; padding: 2px 0 2px 31px; list-style: none;}
.mm-sub li {border: 0 !important; padding: 0 !important; margin: 0; list-style: none;}
/* Точка висит на самой ссылке: при двухстрочном пункте она остаётся у первой строки,
 * а не уезжает относительно высоты всего li. */
.mm-sub a {position: relative; display: block; padding: 10px 2px 10px 19px; color: #5c6a48 !important; font-size: 15.5px; line-height: 1.4; text-decoration: none;}
.mm-sub a::before {content: ""; position: absolute; left: 2px; top: 18px; width: 6px; height: 6px; border-radius: 50%; background: #cfdcb4;}
.mm-sub a.is-current::before, .mm-sub a:hover::before {background: var(--kp-lime);}
.mm-sub a.is-current, .mm-sub a:hover {color: var(--kp-green) !important;}

.mm-foot {margin-top: 22px; padding: 18px 16px 20px; border-radius: 18px; background: var(--kp-tint, #f7faf1);}
.mm-foot__t {margin-bottom: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #7b8a5a;}
.mm-msg {display: flex; flex-wrap: wrap; gap: 8px;}
.mm-msg a {display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #e2e9d6; color: var(--kp-ink) !important; font-size: 14px; font-weight: 600; text-decoration: none;}
.mm-msg a:hover {box-shadow: inset 0 0 0 1.5px var(--kp-lime);}
.mm-msg svg, .mm-msg img {flex: none; width: 19px; height: 19px;}
.mm-msg .soc-tg svg {color: #2ba0da;}
.mm-msg .soc-mail svg {color: var(--kp-green);}

/* Мессенджеры в шапке: коммерческий фактор, был только в подвале. */
.headmsg {display: flex; gap: 8px; align-items: center;}
.headmsg__a {display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--kp-line, #e7ece0); border-radius: 12px; color: #5c6752; background: #fff; transition: color .16s, border-color .16s, transform .12s;}
.headmsg__a:hover {color: #fff; transform: translateY(-1px);}
.headmsg__a--tg:hover {border-color: #29a9eb; background: #29a9eb;}
.headmsg__a--max:hover {border-color: #7c4dff; background: #7c4dff;}
@media (max-width: 1100px) {.headmsg {display: none;}}