/* Start Reset */
* {
	padding: 0px;
	margin: 0px;
	border: none;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Links */

a, a:link, a:visited  {
    text-decoration: none;
}

a:hover  {
    text-decoration: none;
}

/* Common */

aside, nav, footer, header, section, main {
	display: block;
}

h1, h2, h3, h4, h5, h6, p {
    font-size: inherit;
	font-weight: inherit;
}

ul, ul li {
	list-style: none;
}

img {
	vertical-align: top;
}

address {
  font-style: normal;
}

/* Form */

input, textarea, button, select {
	font-family: inherit;
    font-size: inherit;
    color: inherit;
    background-color: transparent;
}

input::-ms-clear {
	display: none;
}

textarea {
	resize: vertical;
}

button, input[type="submit"] {
    display: inline-block;
    box-shadow: none;
    background-color: transparent;
    background: none;
    cursor: pointer;
}

button::-moz-focus-inner {
	padding: 0;
	border: 0;
}

label {
	cursor: pointer;
}

legend {
	display: block;
}

input[type='file'] {
	max-width: 100%;
}

/* End Reset */

*{
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

body{
	background-color: #F5F5F5;
}

a{
	text-decoration: none;
}

.burger {
  display: none;
  position: relative;
  border: none;
  background: transparent;
  width: 40px;
  height: 26px;
  cursor: pointer;
  z-index: 1;
}
.burger::before,
.burger::after {
  content: '';
  left: 0;
  position: absolute;
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 10px;
  background: #5F7CDB;
}
.burger::before {
  top: 0;
  box-shadow: 0 11px 0 #5F7CDB;
}
.burger::after {
  bottom: 0;
}
.burger::before {
  transition: box-shadow .3s .15s, top .3s .15s, transform .3s;
}
.burger::after {
  transition: bottom .3s .15s, transform .3s;
}
.burger.active::before {
  top: 11px;
  transform: rotate(45deg);
  box-shadow: 0 6px 0 rgba(0,0,0,0);
  transition: box-shadow .15s, top .3s, transform .3s .15s;
}
.burger.active::after {
  bottom: 11px;
  transform: rotate(-45deg);
  transition: bottom .3s, transform .3s .15s;
}
.burger-checkbox {
  position: absolute;
  visibility: hidden;
}
.burger-checkbox:checked + .burger::before {
  top: 11px;
  transform: rotate(45deg);
  box-shadow: 0 6px 0 rgba(0,0,0,0);
  transition: box-shadow .15s, top .3s, transform .3s .15s;
}
.burger-checkbox:checked + .burger::after {
  bottom: 11px;
  transform: rotate(-45deg);
  transition: bottom .3s, transform .3s .15s;
}
.menu{
    display: none;
}
.menu-list {
    position: fixed;  /* Меняем с absolute на fixed */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;    /* Используем viewport height */
    margin: 0;
    padding: 80px 0 42px 0;  /* Увеличиваем верхний отступ (под хедер) */
    background: #fff;
    list-style-type: none;
    display: grid;
    gap: 12px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-sizing: border-box;
    z-index: 999;     /* Чтобы было поверх всего */
    
    /* Жёсткая фиксация границ */
    right: 0;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;  /* Если пунктов много - будет скролл */
    
    /* Для Safari */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.menu-item {
  display: block;
  padding: 8px;
  color: #5F7CDB;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
}
.menu-item:hover {
  background: rgba(255,255,255,.2)
}
.burger-checkbox:checked ~ .menu-list {
	transform: translateX(0);
}

.wrapper{
	max-width: 1230px;
    padding: 0 15px;
    margin: 0 auto;
}

.header__container{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 15px 0px;
}

.header__menu>ul{
	gap: 50px;
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
}

.header__menu>ul>li>a{
	font-weight: 500;
	font-size: 16px;
	line-height: 19px;
	color: #121212;
}

.header__menu>ul>li>a:hover{
    color: #5F7CDB;
    transition: .2s;
}

.header__number>a{
	display: flex;
	align-items: center;
	font-weight: 600;
	font-size: 16px;
	line-height: 19px;
	color: #5F7CDB;
}

.header__number>a>img{
	margin-right: 20px;
}

.header__btn>a{
	display: flex;
	align-items: center;
	padding: 7px 10px;
	background-color: #5F7CDB;
	border-radius: 13px;
	max-width: 130px;
	max-height: 35px;
	font-weight: 400;
	font-size: 16px;
	line-height: 19px;
	color: #FFFFFF;
}

.header__btn img{
	padding-right: 17px;
}

.promo__container{
	background: #FFFFFF;
	border-radius: 20px;
	margin-top: 40px;
	padding: 44px 40px 27px 40px;
}

.promo_text__table{
	display: inline-block;
	font-weight: 500;
	font-size: 14px;
	line-height: 17px;
	color: #5377EA;
	padding: 8px 14px;
	background: rgba(115, 149, 255, 0.3);
	border-radius: 20px;
	margin-bottom: 27px;
}

.promo_text__title span{
	color: #5777A4;
}

.promo_text__title{
	font-weight: 700;
	font-size: 48px;
	line-height: 58px;
	color: #121212;
	margin-bottom: 25px;
}

.promo_text__subtitle{
	font-weight: 300;
	font-size: 20px;
	line-height: 24px;
	color: #7C7A7A;
	margin-bottom: 42px;
}

.btn-toform{
	font-weight: 400;
	font-size: 17px;
	line-height: 21px;
	color: #FFFFFF;
	padding: 10px 17px;
	background: #5F7CDB;
	border-radius: 13px;
	margin-right: 35px;
}

.btn-call{
	font-weight: 500;
	font-size: 17px;
	line-height: 21px;
	color: #5F7CDB;
	padding: 10px 43px;
	border: 1px solid #5F7CDB;
	border-radius: 13px;
}

.promo_block{
	display: flex;
	justify-content: space-between;
}

.promo_advantages{
	display: flex;
	justify-content: space-between;
	margin-top: 40px;
	border-top: 1px solid rgba(126, 126, 126, 0.5);
	padding-top: 23px;
}

.promo_advantages__card{
	font-weight: 400;
	font-size: 14px;
	line-height: 160.2%;
	color: #000000;
}

.promo_advantages__card span{
	display: block;
	font-weight: 600;
	font-size: 18px;
	line-height: 160.2%;
	color: #5F7CDB;
}

.services__container h2{
	font-weight: 700;
	font-size: 30px;
	line-height: 36px;
	color: #5F7CDB;
	text-align: center;
	margin-top: 30px;
	margin-bottom: 40px;
}

.service__item{
	display: flex;
	padding: 20px;
	background-color: #fff;
	border-radius: 20px;
	width: 570px;
	margin-bottom: 30px;
	justify-content: space-between;
}

.service__item_title{
	font-weight: 700;
	font-size: 24px;
	line-height: 29px;
	color: #424242;
	padding-bottom: 19px;
}

.service__item_list li{
	padding-bottom: 13px;
	font-weight: 300;
	font-size: 14px;
	line-height: 17px;
	color: #565656;
	display: flex;
}

.service__item_list li:last-child{
	padding-bottom: 0;
}

.service__item_list li span{
	width: 15px;
	height: 15px;
	background-image: url(/img/list_icon.png);
	background-repeat: no-repeat;
	padding-right: 30px;
	margin-left: 22px;
}

.service__item_btn a{
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	font-style: italic;
	font-weight: 600;
	font-size: 19px;
	line-height: 23px;
	color: #5F7CDB;
	border: 1px solid #5F7CDB;
	border-radius: 13px;
	margin-top: 30px;
}

.service__item_btn img{
	padding-left: 15px;
}

.service__item_price{
	font-weight: 700;
	font-size: 18px;
	line-height: 22px;
	color: #4C4C4C;
	text-align: center;
}

.services__items{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.service_item_rightcontent, .service_item_leftcontent{
  justify-content: space-between;
  flex-direction: column;
  display: inline-flex
}

.service__item_img{
	width: 228px;
	height: 163px;
}

.services__button{
	display: inline-block;
	padding: 12px 25px;
	background-color: #5F7CDB;
	color: #fff;
	border-radius: 13px;
	text-align: center;
	width: 330px;
	height: 45px;
	margin: 0 auto;
}

.steps__container{
	display: flex;
	justify-content: space-between;
}

.steps_h2{
	font-weight: 700;
	font-size: 30px;
	line-height: 36px;
	color: #5F7CDB;
	text-align: center;
	margin-top: 40px;
	margin-bottom: 25px;
}

.cert_h2{
	font-weight: 700;
	font-size: 30px;
	line-height: 36px;
	color: #5F7CDB;
	text-align: center;
	margin: 30px 0px 40px 0px;
}

.contact_h2{
	font-weight: 700;
	font-size: 30px;
	line-height: 36px;
	color: #5F7CDB;
	text-align: center;
	margin: 50px 0px 40px 0px;
}

.steps__right{
	margin-top: 20px;
}

.steps_item{
	width: 580px;
	height: 185px;
	background-color: #fff;
	border-radius: 20px;
	padding: 27px;
	margin-bottom: 40px;
}

.steps_item1{
	background-image: url(/img/01.png);
	background-repeat: no-repeat;
	background-position: 10px 10px;
}

.steps_item2{
	background-image: url(/img/02.png);
	background-repeat: no-repeat;
	background-position: 10px 10px;
}

.steps_item3{
	background-image: url(/img/03.png);
	background-repeat: no-repeat;
	background-position: 10px 10px;
}

.steps_item4{
	background-image: url(/img/04.png);
	background-repeat: no-repeat;
	background-position: 10px 10px;
}

.steps_item5{
	background-image: url(/img/05.png);
	background-repeat: no-repeat;
	background-position: 10px 10px;
}

.steps_item6{
	background-image: url(/img/06.png);
	background-repeat: no-repeat;
	background-position: 10px 10px;
}

.steps_item__title{
	font-weight: 700;
	font-size: 20px;
	line-height: 24px;
	color: #5F7CDB;
	text-align: center;
	margin-bottom: 15px;
}

.steps_item__text{
	font-weight: 300;
	text-align: center;
	font-size: 17px;
	line-height: 21px;
	color: #565656;
}

.certificates__container{
	display: flex;
	justify-content: space-evenly;
}

.license-item{
    height: 260px;
    width: 175px;
}

.contact__container{
	display: flex;
	justify-content: space-between;
}

.contact_info, .findus{
	width: 550px;
	height: 575px;
	background-color: #FFF;
	border-radius: 20px;
	padding: 25px;
}

.contact_info__title{
	font-weight: 700;
	font-size: 30px;
	line-height: 36px;
	color: #565656;
	margin-bottom: 40px;
}

.contact_info__item{
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.contact_info__item:last-child{
	margin-bottom: 0;
}

.info__item_icon{
	margin-right: 20px;
	height: 50px;
	width: 50px;
	border-radius: 13px;
	background-color: #5f7cdb;
	padding: 9px;
}

.info__item_title{
	font-weight: 700;
	font-size: 18px;
	line-height: 22px;
	color: #565656;
	padding-bottom: 6px;
}

.info__item_subtitle{
	font-weight: 700;
	font-size: 18px;
	line-height: 22px;
	color: #5F7CDB;
}

.form{
	margin-top: 55px;
	margin-bottom: 45px;
}

.form__container{
	background-color: #fff;
	border-radius: 20px;
	padding: 30px;
	width: 800px;
	height: 420px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.form__container{
	background-image: url(/img/form-line.png);
	background-repeat: no-repeat;
	background-position: 267px 67px;
}

.form_text__title{
	font-weight: 700;
	text-align: right;
	font-size: 42px;
	line-height: 51px;
	color: #565656;
	display: inline-block;
	margin-bottom: 60px;
}

.form_text__title span{
	font-weight: 700;
	font-size: 42px;
	line-height: 51px;
	color: #5F7CDB;
}

.form_text__subtitle{
	font-weight: 200;
	font-size: 22px;
	line-height: 27px;
	color: #565656;
	margin-left: 50px;
}

#form{
	display: flex;
	flex-direction: column;
}

#form label{
	border-bottom: 1px solid #5F7CDB;
	color: #525252;
	font-weight: 200;
	font-size: 20px;
	line-height: 19px;
	width: 300px;
}

#form input{
	outline: none;
}

#form label{
	margin-bottom: 20px;
}

.form-btn{
	display: block;
	color: #fff;
	background-color: #5F7CDB;
	padding: 7px 62px;
	border-radius: 10px;
	font-weight: 200;
	font-size: 22px;
	line-height: 27px;
	margin-top: 10px;
}

.form-approve{
	font-weight: 200;
	margin-top: 20px;
	font-size: 12px;
	line-height: 15px;
	color: #565656;
}

#sign{
	margin-right: 7px;
}

#footer{
	background-color: #fff;
	border-radius: 20px;
	padding: 40px 32px 6px 32px;
	width: 98%;
	margin: 0 auto;
	margin-bottom: 10px;
}

.footer__container{
	text-align: center;
}

.footer__menu{
	justify-content: space-between;     /* Все элементы по центру */
    gap: 40px;                    /* Расстояние между элементами */
    flex-wrap: wrap;              /* Перенос на мобильных */
}

.footer__menu, .footer__menu a{
	display: flex;
	align-items: center;
	font-style: normal;
	font-weight: 700;
	font-size: 14px;
	line-height: 17px;
	color: #565656;
}

.footer_adress{
	text-align: left;
}

.policy{
	display: block;
	margin: 25px 0px 10px 0px;
	font-weight: 200;
	font-size: 12px;
	line-height: 15px;
	color: #565656;
}

.mob_content{
	display: none;
}

.col{
    margin: 20px 0px;
}

label > textarea{
    resize: none;
    outline: none;
}

.timer {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
}

.timer > * {
  flex: 0 0 4.5rem;
  text-align: center;
}

.timer > :nth-child(even) {
  flex: 0 0 0.5rem;
}

.timer__item {
  position: relative;
	font-weight: 700;
	font-size: 42px;
	line-height: 51px;
	color: #5F7CDB;
}

.timer__item::before {
  content: attr(data-title);
  display: block;
  position: absolute;
  bottom: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.875rem;
  color: #424242;
}

.sale__container{
	padding: 35px 0px;
	display: flex;
	flex-direction: column;
	height: 274px;
	border: 2px solid #5377EA;
	border-radius: 20px;
	text-align: center;
	margin-top: 45px;
}

.sale__container h2{
	font-weight: 700;
	font-size: 42px;
	line-height: 51px;
	color: #565656;
	margin-bottom: 20px;
}

.sale_text{
	font-weight: 200;
	font-size: 22px;
	line-height: 27px;
	color: #565656;
	margin-top: 20px;
}

@media (max-width: 1200px) {
    .wrapper {
    	max-width: 1170px;
    }
    .service__item {
    width: 545px;
	}
	.steps_item {
    width: 550px;
    height: 210px;
    background-color: #fff;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 25px;
	}
}

@media (max-width: 900px) {
    .wrapper {
    	max-width: 870px;
    }
    .mob_content{
    	display: block;
    }
    .steps_item__title_HIDE, .steps_item__text_HIDE{
    	display: none;
    }
    .header__logo a img{
    	width: 39px;
    }
    .header__menu>ul {
    	gap: 25px;
    }
    .header__number a img{
    	display: none;
    }
    .header__number>a{
    	font-size: 15px;
    }
    .header__btn>a{
    	font-size: 14px;
    }
    .header__menu>ul>li>a {
    	font-size: 14px;
	}
    .promo_banner img{
    	width: 380px;
    }
    .promo_text__title{
    	font-size: 33px;
    }
    .promo_text__subtitle{
    	font-size: 16px;
	}
	.steps__container{
    	flex-direction: column;
	}
	.promo_text__table{
		font-size: 13px;
	}
	.promo_text__buttons a{
		display: inline-block;
		width: 177px;
        height: 43px;
	}
	.btn-toform{
		margin-bottom: 15px;
	}
	.promo_advantages__card span {
    	font-size: 16px;
    }
    .promo_advantages__card {
    	font-size: 12px;
	}
	.services__container h2 {
    	font-size: 26px;
	}
	.service__item {
        width: 100%;
    }
    .service__item_title {
    	font-size: 21px;
	}
	.service__item_btn a{
		font-size: 18px;
	}
	.steps_h2{
		font-size: 26px;
	}
	.steps_item {
        width: 100%;
    }
    .steps_item3 {
    	background-image: url(/img/02.png);
	}
	.steps_item5 {
    	background-image: url(/img/03.png);
	}
	.steps__right {
    	margin-top: 0px;
	}
	.steps_item2 {
    	background-image: url(/img/04.png);
	}
	.steps_item4 {
    	background-image: url(/img/05.png);
	}
	.cert_h2 {
    	font-size: 26px;
	}
	.contact_h2{
		font-size: 26px;
	}
	.contact__container {
    	flex-direction: column;
	}
	.contact_info, .findus {
    	width: 100%;
    	margin-bottom: 25px;
	}
	.form {
    	margin-top: 30px;
	}
	.findus{
	    display: flex;
	    align-items: center;
	    flex-direction: column;
	}
	.findus iframe{
	    width: 100%;
	}
	.menu-list {
        padding-top: 100px;  /* Ещё больше отступ сверху на мобильных */
    }
}

@media (max-width: 600px) {
    .promo_advantages{
        flex-direction: column;
        text-align: center;
    }
    .promo_advantages__card{
        margin-bottom: 15px;
    }
    .promo_advantages__card:last-child{
        margin-bottom: 0;
    }
	.wrapper{
		max-width: 570px;
	}
	.burger, .menu{
		display: block;
	}
	.promo_banner{
		display: none;
	}
	.promo_text{
		text-align: center;
	}
	.btn-toform{
		margin-bottom: 0;
		margin-right: 0;
	}
	.promo_text__buttons{
		justify-content: space-evenly;
    	display: flex;
	}
	.header__menu, .header__number{
		display: none;
	}
    .promo_block {
    	flex-direction: column;
	}
	.certificates__container {
    	flex-direction: column;
    	align-items: center;
	}
	.certificates__container a{
		margin-bottom: 25px;
	}
	.certificates__container a:last-child{
		margin-bottom: 0;
	}
	.form__container{
		width: auto;
		height: auto;
		flex-direction: column;
		background-image: none;
	}
	.form_text__title{
		text-align: center;
		margin-bottom: 15px;
	}
	.form_text{
		text-align: center;
		margin-bottom: 30px;
	}
	.form_text__subtitle {
    	margin-left: 0px;
	}
	#form label{
		width: 100%;
		margin-bottom: 40px;
	}
	.form-btn {
    	text-align: center;
	}
	.form-approve {
    	text-align: center;
	}
	.footer__menu, .footer__menu a {
    	flex-direction: column;
    	gap: 25px;
	}
	#footer{
		padding: 20px 32px 6px 32px;
	}
	.footer_adress {
    	text-align: center;
	}
	.sale__container h2{
	    font-size: 32px;
	}
	.sale_text{
	    font-size: 17px;
	}
	.menu-list {
        padding-top: 120px;  /* Ещё больше */
    }
}

@media (max-width: 480px) {
	.header__btn{
		display: none;
	}
	.header__container{
		flex-direction: row-reverse;
	}
	.steps_item {
    height: 280px;
  }
  .findus a img{
      width: 410px;
  }
  .menu-list {
        padding-top: 140px;  /* И ещё */
    }
}

@media (max-width: 430px) {
	.promo_text__buttons{
		flex-direction: column;
		align-items: center;
	}
	.btn-toform{
		margin-bottom: 20px;
	}
	.promo_advantages{
		flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .promo_advantages__card{
    margin-bottom: 15px;
  }
  .promo_advantages__card:last-child{
  	margin-bottom: 0;
  }
  .service__item_img{
  	display: none;
  }
  .service__item{
  	flex-direction: column;
    text-align: center;
  }
  .service__item_btn{
  	margin-bottom: 12px;
  }
  .service__item_list{
  	text-align: left;
  }
  .promo_advantages__card {
    font-size: 13px;
  }
  .promo_advantages__card span {
    font-size: 18px;
  }
  .contact_info, .findus {
    height: 530px;
  }
  .findus a img{
      width: 355px;
  }
  .findus{
      height: auto;
  }
  .sale__container h2{
	    font-size: 26px;
  }
}


/* ========================================= */
/* СТИЛИ ДЛЯ ПЕРЕКЛЮЧАТЕЛЯ ГОРОДОВ */
/* ========================================= */

.city-selector {
    padding: 8px 12px;
    border: 1px solid #5F7CDB;
    border-radius: 13px;
    font-size: 14px;
    cursor: pointer;
    background-color: white;
    min-width: 150px;
    color: #121212;
    font-weight: 500;
    outline: none;
}

.city-selector:hover {
    border-color: #3a5bbf;
}

/* Модальное окно выбора города */
.city-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.city-modal-content {
    background: white;
    padding: 30px;
    border-radius: 20px;
    max-width: 400px;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.city-modal h3 {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 700;
    color: #121212;
}

.city-modal p {
    color: #7C7A7A;
    margin-bottom: 20px;
    font-size: 16px;
}

.city-modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 13px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s;
}

.btn-primary {
    background: #5F7CDB;
    color: white;
}

.btn-primary:hover {
    background: #3a5bbf;
}

.btn-link {
    background: none;
    color: #5F7CDB;
    text-decoration: underline;
    border: 1px solid #5F7CDB;
}

.btn-link:hover {
    background: #f0f4ff;
}

.city-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
}

.city-modal-close:hover {
    color: #333;
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
    .city-modal-content {
        margin: 20px;
        padding: 20px;
    }
    
    .city-selector {
        min-width: 120px;
        font-size: 12px;
        padding: 6px 8px;
    }
}

@media (max-width: 600px) {
    .city-selector {
        margin: 10px 0;
        width: 100%;
    }
}

/* До 900px - ваш существующий брейкпоинт */
@media (max-width: 900px) {
    .contact_info, .findus{
        height: 610px;
    }
    .header__container {
        flex-wrap: wrap;  /* Разрешаем перенос */
        justify-content: space-between;
        align-items: center;
        position: relative;
    }
    
    .header__menu, .header__number {
        display: none;
    }
    
    .burger, .menu {
        display: block;
        z-index: 1001;
    }
    
    /* Логотип слева */
    .header__logo {
        order: 1;
        flex: 0 0 auto;
    }
    
    /* Бургер справа */
    .menu {
        order: 3;
        flex: 0 0 auto;
    }
    
    .burger-checkbox {
        /* ваш существующий код */
    }
    
    /* Telegram кнопка - скрываем или оставляем? */
    .header__btn {
        display: none;  /* Скрываем Telegram на мобильных */
    }
    
    /* СЕЛЕКТОР НА ВСЮ ШИРИНУ - главное изменение */
    .city-selector {
        order: 4;
        width: 100%;           /* Вся ширина */
        min-width: 100%;       /* Перебиваем min-width */
        margin: 10px 0 0 0;    /* Отступ сверху */
        padding: 10px 30px 10px 12px;  /* Увеличиваем для удобного тыка */
        font-size: 16px;       /* Побольше для мобильных */
        box-sizing: border-box; /* Чтобы padding не выходил за границы */
    }
}

/* Для совсем маленьких */
@media (max-width: 600px) {
    .city-selector {
        padding: 12px 30px 12px 12px;  /* Ещё больше для удобства */
        font-size: 16px;
    }
}

/* Если нужно подправить бургер меню */
@media (max-width: 480px) {
    .header__container {
        padding: 10px 15px;  /* Добавляем отступы по бокам */
    }
    
    .city-selector {
        margin: 10px 0 5px 0;
    }
}


/* ФИНАЛЬНЫЙ ФИКС ДЛЯ MENU-LIST */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}

.menu-list {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: translateX(-100%) !important;
}

.burger-checkbox:checked ~ .menu-list {
    transform: translateX(0) !important;
}

/* Фикс для wrapper чтобы не создавал лишних отступов */
.wrapper {
    max-width: 1230px;
    padding: 0 15px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ============================================================
   Кадастр Лайф — апгрейд: выбор города + hero D+B
   Подключается ПОСЛЕ style.css. Чтобы откатить — уберите
   <link rel="stylesheet" href="/upgrade.css"> из index.html.
   Все новые классы начинаются с kl- и не пересекаются со style.css.
   ============================================================ */

:root {
  --kl-brand: #5F7CDB;        /* фирменный синий — как в style.css */
  --kl-brand-d: #4A67C9;      /* он же при наведении */
  --kl-brand-soft: #EEF2FC;   /* светлая подложка */
  --kl-brand-line: #C9D4F5;   /* тонкие рамки */
  --kl-ink: #121212;
  --kl-ink-2: #424242;
  --kl-text: #565656;
  --kl-muted: #7C7A7A;
  --kl-ok: #2FA56B;
  --kl-ease: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Кнопки: состояния наведения, нажатия, фокуса ---------- */
.btn-toform, .btn-call, .form-btn, .header__btn > a {
  transition: background-color .2s var(--kl-ease), color .2s var(--kl-ease),
              box-shadow .2s var(--kl-ease), transform .12s var(--kl-ease);
}
.btn-toform:hover, .form-btn:hover, .header__btn > a:hover {
  background-color: var(--kl-brand-d);
  box-shadow: 0 10px 22px -12px var(--kl-brand);
}
.btn-call:hover { background-color: var(--kl-brand-soft); }
.btn-toform:active, .btn-call:active, .form-btn:active { transform: scale(.98); }
.btn-toform:focus-visible, .btn-call:focus-visible, .form-btn:focus-visible,
.kl-city__btn:focus-visible, .kl-city__opt:focus-visible, .kl-chip:focus-visible,
.kl-pick__more:focus-visible, .kl-toast button:focus-visible {
  outline: 3px solid rgba(95, 124, 219, .45);
  outline-offset: 3px;
}

/* ============================================================
   ВЫБОР ГОРОДА В ШАПКЕ
   ============================================================ */
.kl-city { position: relative; }
.kl-city__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--kl-brand-line); border-radius: 13px;
  background: #fff; cursor: pointer;
  font-weight: 500; font-size: 16px; line-height: 19px; color: var(--kl-ink);
  transition: border-color .2s var(--kl-ease);
}
.kl-city__btn:hover { border-color: var(--kl-brand); }
.kl-city__btn svg { width: 16px; height: 16px; flex: none; }
.kl-city__pin { color: var(--kl-brand); }
.kl-city__chev { color: var(--kl-muted); transition: transform .2s var(--kl-ease); }
.kl-city__btn[aria-expanded="true"] .kl-city__chev { transform: rotate(180deg); }

.kl-city__menu {
  position: absolute; top: calc(100% + 8px); left: 50%;
  min-width: 250px; padding: 6px; z-index: 1002;
  background: #fff; border-radius: 16px;
  box-shadow: 0 18px 40px -16px rgba(18, 18, 18, .28), 0 0 0 1px rgba(95, 124, 219, .14);
  opacity: 0; visibility: hidden; transform: translate(-50%, -4px);
  transition: opacity .18s var(--kl-ease), transform .18s var(--kl-ease), visibility .18s;
}
.kl-city__menu.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.kl-city__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--kl-ink); font-size: 15px; font-weight: 500; line-height: 1.3;
}
.kl-city__opt small { display: block; margin-top: 2px; color: var(--kl-muted); font-size: 13px; font-weight: 400; }
.kl-city__opt:hover { background: var(--kl-brand-soft); }
.kl-city__check { width: 18px; height: 18px; color: var(--kl-brand); flex: none; visibility: hidden; }
.kl-city__opt[aria-current="page"] .kl-city__check { visibility: visible; }

@media (max-width: 1200px) {
  .header__menu > ul { gap: 28px; }
}
@media (max-width: 1060px) {
  .header__number > a > img { display: none; }
  .header__menu > ul { gap: 20px; }
  .header__menu > ul > li > a { font-size: 15px; }
}
@media (max-width: 900px) {
  .kl-city { order: 2; margin: 0 auto; }
}
@media (max-width: 480px) {
  .kl-city__btn { font-size: 15px; padding: 6px 10px; }
}

/* Подсказка «Вы из …?» */
.kl-toast {
  position: fixed; left: 50%; bottom: 20px; z-index: 1003;
  width: min(440px, calc(100% - 24px));
  padding: 18px 20px; background: #fff; border-radius: 20px;
  box-shadow: 0 22px 50px -20px rgba(18, 18, 18, .38), 0 0 0 1px rgba(95, 124, 219, .15);
  opacity: 0; transform: translate(-50%, 16px);
  transition: opacity .25s var(--kl-ease), transform .25s var(--kl-ease);
}
.kl-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }
.kl-toast__text { margin-bottom: 14px; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--kl-ink); }
.kl-toast__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.kl-toast__yes, .kl-toast__no {
  padding: 10px 17px; border-radius: 13px; cursor: pointer;
  font-size: 16px; line-height: 20px;
  transition: background-color .2s var(--kl-ease), transform .12s var(--kl-ease);
}
.kl-toast__yes { background: var(--kl-brand); color: #fff; }
.kl-toast__yes:hover { background: var(--kl-brand-d); }
.kl-toast__no { border: 1px solid var(--kl-brand); color: var(--kl-brand); }
.kl-toast__no:hover { background: var(--kl-brand-soft); }
.kl-toast__yes:active, .kl-toast__no:active { transform: scale(.98); }

/* Плавный уход при смене города */
body > header, body > section, body > footer { transition: opacity .15s var(--kl-ease); }
body.kl-leaving > header, body.kl-leaving > section, body.kl-leaving > footer { opacity: 0; }

/* ============================================================
   HERO: заголовок + ближайший выезд (D)
   ============================================================ */
.promo_block { gap: 40px; align-items: center; }
.promo_text { max-width: 620px; }
.promo_text__title h1 { text-wrap: balance; }
.promo_text__title h1 span { display: block; }
.promo_text__subtitle { margin-bottom: 22px; max-width: 34em; text-wrap: pretty; }

.kl-visit {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 34px; padding: 10px 14px;
  background: #F4F7FE; border: 1px solid #DCE4FA; border-radius: 13px;
  font-size: 15px; line-height: 1.35; color: var(--kl-ink-2);
}
.kl-visit[hidden] { display: none; }
.kl-visit b { font-weight: 600; color: var(--kl-ink); }
.kl-visit__dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--kl-ok); box-shadow: 0 0 0 0 rgba(47, 165, 107, .5);
}
@media (prefers-reduced-motion: no-preference) {
  .kl-visit__dot { animation: klPulse 2.4s infinite; }
}
@keyframes klPulse {
  70%  { box-shadow: 0 0 0 8px rgba(47, 165, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 165, 107, 0); }
}

/* ============================================================
   HERO: подбор услуги (B) — встаёт на место картинки
   ============================================================ */
.promo_banner.kl-pick-wrap { position: relative; flex: 0 0 480px; max-width: 480px; }
/* наклонная голубая подложка — как у прежней картинки hero */
.kl-pick-wrap::before {
  content: ""; position: absolute; inset: 10px -10px -10px 12px; z-index: 0;
  background: #DDE5FA; border-radius: 22px; transform: rotate(2.2deg);
}
.kl-pick {
  position: relative; z-index: 1;
  padding: 26px; background: #fff;
  border: 1px solid var(--kl-brand-line); border-radius: 20px;
}
.kl-pick__title { font-weight: 700; font-size: 22px; line-height: 27px; color: var(--kl-ink); }
.kl-pick__sub { margin: 4px 0 16px; font-weight: 300; font-size: 15px; line-height: 20px; color: var(--kl-muted); }

.kl-pick__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kl-chip {
  padding: 8px 11px; cursor: pointer;
  border: 1px solid var(--kl-brand-line); border-radius: 13px; background: #fff;
  font-weight: 500; font-size: 14px; line-height: 18px; color: var(--kl-ink-2); text-align: left;
  transition: background-color .2s var(--kl-ease), border-color .2s var(--kl-ease),
              color .2s var(--kl-ease), transform .12s var(--kl-ease);
}
.kl-chip:hover { border-color: var(--kl-brand); color: var(--kl-brand); }
.kl-chip:active { transform: scale(.97); }
.kl-chip[aria-pressed="true"] { background: var(--kl-brand); border-color: var(--kl-brand); color: #fff; }
.kl-chip--help { border-style: dashed; }

.kl-pick__result {
  margin-top: 16px; padding: 18px;
  background: var(--kl-brand-soft); border-radius: 16px;
}
.kl-pick__name { font-weight: 700; font-size: 20px; line-height: 25px; color: var(--kl-ink-2); }
.kl-pick__list { margin: 8px 0 12px; }
.kl-pick__list li {
  position: relative; padding-left: 16px; margin-bottom: 4px;
  font-weight: 300; font-size: 14px; line-height: 19px; color: var(--kl-text);
}
.kl-pick__list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--kl-brand);
}
.kl-pick__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 14px; }
.kl-pick__price { font-weight: 700; font-size: 20px; line-height: 24px; color: var(--kl-brand); }
.kl-pick__term { font-size: 14px; color: var(--kl-text); }
.kl-pick__term[hidden], .kl-pick__meta[hidden] { display: none; }
.kl-pick__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.kl-pick .btn-toform { display: inline-block; margin: 0; }
.kl-pick__more {
  font-weight: 500; font-size: 15px; color: var(--kl-brand);
  text-decoration: underline !important; text-underline-offset: 3px;
  text-decoration-color: rgba(95, 124, 219, .4) !important;
}
.kl-pick__more:hover { text-decoration-color: var(--kl-brand) !important; }

@media (prefers-reduced-motion: no-preference) {
  .kl-swap { animation: klSwap .28s var(--kl-ease); }
}
@keyframes klSwap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Карточка услуги, к которой перешли по «Подробнее» */
.service__item { scroll-margin-top: 24px; }
@media (prefers-reduced-motion: no-preference) {
  .service__item.kl-target { animation: klTarget 1.6s var(--kl-ease); }
}
@keyframes klTarget { 0%, 100% { box-shadow: 0 0 0 0 rgba(95, 124, 219, 0); } 25% { box-shadow: 0 0 0 4px rgba(95, 124, 219, .45); } }

@media (max-width: 1100px) {
  .promo_banner.kl-pick-wrap { flex-basis: 420px; max-width: 420px; }
  .promo_text__title { font-size: 40px; line-height: 48px; }
}
/* Планшет: подбор услуги встаёт под текст на всю ширину */
@media (max-width: 900px) {
  .promo_block { flex-direction: column; align-items: stretch; gap: 32px; }
  .promo_text { max-width: none; }
  .promo_text__title { font-size: 33px; line-height: 40px; }
  .promo_banner.kl-pick-wrap { flex: none; max-width: none; }
  .kl-pick-wrap::before { inset: 8px -6px -8px 8px; transform: rotate(1deg); }
  .kl-pick { padding: 22px; }
}
@media (max-width: 600px) {
  .promo__container { padding-left: 20px; padding-right: 20px; }
  .promo_banner.kl-pick-wrap { display: block; flex: none; max-width: none; margin-top: 8px; }
  .kl-pick-wrap::before { display: none; }
  .kl-pick { padding: 20px 14px; text-align: center; }
  .kl-pick__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .kl-chip { padding: 9px 8px; font-size: 13.5px; text-align: center; }
  .kl-chip--help { grid-column: 1 / -1; }
  .kl-pick__list { display: inline-block; text-align: left; }
  .kl-pick__meta, .kl-pick__actions { justify-content: center; }
  .kl-visit { margin-bottom: 28px; text-align: left; }
}

/* ============================================================
   Оффер вместо таймера
   ============================================================ */
.sale__container.sale__container--offer { height: auto; padding: 36px 20px; align-items: center; }
.sale__container--offer .sale_text { margin: 0 0 26px; max-width: 640px; }
.sale__container--offer h2 { line-height: 1.2; margin-bottom: 14px; }
.sale__container--offer .btn-toform { margin: 0; }

/* ============================================================
   Форма: поле «Услуга»
   ============================================================ */
.form__container { height: auto; min-height: 420px; max-width: 100%; } /* на 601–829px форма раньше обрезалась справа */
#form select {
  width: 100%; padding: 0 28px 2px 0; outline: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  font-weight: 200; font-size: 20px; line-height: 19px; color: #525252;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F7CDB' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right center / 18px no-repeat;
}
#form select:invalid, #form select.is-empty { color: #8a8a8a; }
#form select option { color: #121212; }
@media (prefers-reduced-motion: no-preference) {
  .kl-flash { animation: klFlash 1.4s var(--kl-ease); }
}
@keyframes klFlash { 0%, 100% { background-color: transparent; } 25% { background-color: var(--kl-brand-soft); } }

/* Блок «Где работаем» (для города без офиса) */
.kl-area__text { font-size: 18px; line-height: 1.5; color: var(--kl-text); margin-bottom: 18px; }
.kl-area__list { margin-bottom: 26px; }
.kl-area__list li { position: relative; padding-left: 18px; margin-bottom: 8px; font-size: 17px; color: var(--kl-ink-2); }
.kl-area__list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--kl-brand); }

/* ---------- Аттестаты: подписи и ссылка на реестр СРО ---------- */
.certificates__container { align-items: flex-start; gap: 16px; }
.kl-certfig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 220px; text-align: center; }
.kl-certfig img { filter: grayscale(0); transition: transform .4s var(--kl-ease); }
.kl-certfig a:hover img { transform: translateY(-3px); }
.kl-certfig figcaption { font-size: 14px; line-height: 19px; color: #565656; }
.kl-certfig figcaption b { display: block; margin-bottom: 2px; font-weight: 600; font-size: 15px; color: #424242; }
.kl-certfig figcaption small { display: block; margin-top: 4px; font-size: 12px; color: #9A9A9A; }
.kl-certcheck { margin: 28px auto 0; max-width: 640px; text-align: center; font-weight: 300; font-size: 15px; line-height: 21px; color: #565656; }
.kl-certcheck a { color: #5F7CDB; text-decoration: underline !important; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .certificates__container { align-items: center; }
  .kl-certfig { margin-bottom: 25px; }
}

/* ---------- Подвал: реквизиты ---------- */
.kl-legal { margin-top: 18px; text-align: center; font-weight: 300; font-size: 13px; line-height: 18px; color: #7C7A7A; }
.footer_phones { line-height: 1.45; }
.footer_phones a { color: inherit; }

/* ---------- Фон страницы: рельеф (горизонтали) ---------- */
body {
  background-color: #F4F6F9;
  background-image:
    radial-gradient(1100px 520px at 80% 0%, rgba(95,124,219,.07), transparent 65%),
    url("/img/bg-topo.svg");
  background-size: auto, 900px 900px;
  background-repeat: no-repeat, repeat;
}
/* прозрачный блок со скидкой получает лёгкую подложку */
.sale__container { background: rgba(255,255,255,.72); }
@media (max-width: 600px) {
  body { background-size: auto, 560px 560px; }
}


/* ============================================================
   Новая шапка: одна белая полоса, закрепляется при прокрутке.
   Меню видно до 760px, дальше — бургер.
   ============================================================ */

/* overflow-x:hidden на html/body ломает position:sticky — clip его не ломает */
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

.kl-hdr { position: sticky; top: 0; z-index: 1000; padding: 14px 0 0; transition: padding .25s var(--kl-ease); }
.kl-hdr.is-compact { padding-top: 8px; }
.kl-hdr__bar {
  display: flex; align-items: center; gap: 36px;
  height: 64px; padding: 0 12px 0 22px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(95, 124, 219, .07);
  transition: height .25s var(--kl-ease), box-shadow .25s var(--kl-ease);
}
.kl-hdr.is-compact .kl-hdr__bar {
  height: 56px;
  box-shadow: 0 12px 32px -20px rgba(18, 18, 18, .28), 0 0 0 1px rgba(95, 124, 219, .1);
}
.kl-hdr__logo { display: flex; align-items: center; flex: none; }
.kl-hdr__logo img { display: block; height: 40px; width: auto; transition: height .25s var(--kl-ease); }
.kl-hdr.is-compact .kl-hdr__logo img { height: 36px; }

.kl-hdr__nav { display: flex; align-items: center; gap: 30px; margin-right: auto; }
.kl-hdr__nav a {
  position: relative; padding: 8px 0;
  font-weight: 500; font-size: 15px; line-height: 20px; color: #424242; white-space: nowrap;
  transition: color .2s var(--kl-ease);
}
.kl-hdr__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 2px; border-radius: 2px;
  background: #5F7CDB; transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--kl-ease);
}
.kl-hdr__nav a:hover { color: #5F7CDB; }
.kl-hdr__nav a:hover::after, .kl-hdr__nav a.is-active::after { transform: scaleX(1); }
.kl-hdr__nav a.is-active { color: #121212; }
.kl-hdr__nav a:focus-visible { outline: 3px solid rgba(95, 124, 219, .45); outline-offset: 4px; border-radius: 4px; }

.kl-hdr__right { display: flex; align-items: center; gap: 14px; flex: none; }
.kl-hdr__contact { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.kl-hdr__phone { font-weight: 600; font-size: 16px; line-height: 20px; color: #121212; white-space: nowrap; transition: color .2s; }
.kl-hdr__phone:hover { color: #5F7CDB; }

/* Город — строчкой под телефоном, без рамки */
.kl-city--inline .kl-city__btn {
  gap: 4px; padding: 1px 0; border: 0; border-radius: 6px; background: none;
  font-weight: 500; font-size: 13px; line-height: 17px; color: #7C7A7A;
}
.kl-city--inline .kl-city__btn:hover { color: #5F7CDB; }
.kl-city--inline .kl-city__btn svg { width: 13px; height: 13px; }
.kl-city--inline .kl-city__pin { color: currentColor; }
.kl-city--inline .kl-city__chev { color: currentColor; }
.kl-city--inline .kl-city__menu { left: auto; right: -8px; transform: translateY(-4px); top: calc(100% + 12px); }
.kl-city--inline .kl-city__menu.is-open { transform: none; }

.kl-hdr__icon {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 14px;
  background: #EEF2FC; color: #5F7CDB;
  transition: background-color .2s var(--kl-ease), color .2s var(--kl-ease), transform .12s var(--kl-ease);
}
.kl-hdr__icon:hover { background: #5F7CDB; color: #fff; }
.kl-hdr__icon:active { transform: scale(.95); }
.kl-hdr__icon svg { width: 20px; height: 20px; }
.kl-hdr__icon--call, .kl-hdr__burger { display: none; }

/* Бургер и выпадающая панель (только маленькие экраны) */
.kl-hdr__burger {
  position: relative; width: 44px; height: 44px; border-radius: 14px; background: #EEF2FC; flex: none;
}
.kl-hdr__burger span, .kl-hdr__burger::before, .kl-hdr__burger::after {
  content: ""; position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: #5F7CDB;
  transition: transform .25s var(--kl-ease), opacity .2s;
}
.kl-hdr__burger::before { top: 16px; }
.kl-hdr__burger span { top: 21px; }
.kl-hdr__burger::after { top: 26px; }
.kl-hdr__burger[aria-expanded="true"]::before { transform: translateY(5px) rotate(45deg); }
.kl-hdr__burger[aria-expanded="true"] span { opacity: 0; }
.kl-hdr__burger[aria-expanded="true"]::after { transform: translateY(-5px) rotate(-45deg); }

.kl-hdr__panel {
  margin-top: 8px; padding: 8px; border-radius: 20px; background: #fff;
  box-shadow: 0 20px 40px -22px rgba(18, 18, 18, .35), 0 0 0 1px rgba(95, 124, 219, .1);
}
.kl-hdr__panel:not([hidden]) { animation: klPanel .22s var(--kl-ease); }
@keyframes klPanel { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.kl-hdr__panel nav a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 14px; border-radius: 12px;
  font-weight: 500; font-size: 17px; color: #121212;
}
.kl-hdr__panel nav a::after {
  content: ""; width: 8px; height: 8px; border-right: 2px solid #B9C6EC; border-top: 2px solid #B9C6EC; transform: rotate(45deg);
}
.kl-hdr__panel nav a:hover, .kl-hdr__panel nav a.is-active { background: #F4F7FE; color: #5F7CDB; }
.kl-hdr__panel-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #EEF0F5; }
.kl-hdr__panel-contacts a {
  display: grid; place-items: center; height: 48px; border-radius: 13px;
  background: #EEF2FC; color: #5F7CDB; font-weight: 600; font-size: 15px;
}
.kl-hdr__panel-contacts a.main { grid-column: 1 / -1; background: #5F7CDB; color: #fff; font-size: 16px; }

/* Отступ первого экрана под новую шапку */
.promo__container { margin-top: 16px; }
section[id], [id="spForm"], [id="bizForm"] { scroll-margin-top: 96px; }

/* ---------- Планшет ---------- */
@media (max-width: 1100px) {
  .kl-hdr__bar { gap: 24px; }
  .kl-hdr__nav { gap: 20px; }
  .kl-hdr__nav a { font-size: 14.5px; }
}
@media (max-width: 900px) {
  .kl-hdr__bar { gap: 18px; padding-left: 16px; }
  .kl-hdr__nav { gap: 16px; }
  .kl-hdr__nav a { font-size: 14px; }
  .kl-hdr__phone { font-size: 14.5px; }
  .kl-hdr__logo img { height: 34px; }
  .kl-hdr__right { gap: 10px; }
  .kl-hdr__icon { width: 40px; height: 40px; border-radius: 12px; }
}

/* ---------- Телефон: меню уходит в бургер ---------- */
@media (max-width: 760px) {
  .kl-hdr { padding-top: 10px; }
  .kl-hdr__bar { height: 60px; gap: 10px; padding: 0 8px 0 14px; }
  .kl-hdr.is-compact .kl-hdr__bar { height: 56px; }
  .kl-hdr__nav { display: none; }
  .kl-hdr__right { flex: 1; gap: 8px; }
  .kl-hdr__contact { align-items: flex-start; margin-right: auto; padding-left: 4px; }
  .kl-hdr__phone { display: none; }
  .kl-city--inline .kl-city__btn { font-size: 14.5px; color: #424242; padding: 8px 2px; }
  .kl-city--inline .kl-city__menu { left: -8px; right: auto; }
  .kl-hdr__icon--call, .kl-hdr__burger { display: grid; }
  .kl-hdr__burger { display: block; }
  .kl-hdr__icon, .kl-hdr__burger { width: 42px; height: 42px; }
  .kl-hdr__burger::before { top: 15px; } .kl-hdr__burger span { top: 20px; } .kl-hdr__burger::after { top: 25px; }
  .kl-hdr__burger span, .kl-hdr__burger::before, .kl-hdr__burger::after { left: 12px; right: 12px; }
}
@media (max-width: 380px) {
  .kl-hdr__icon--tg { display: none; }
}
@media (min-width: 761px) {
  .kl-hdr__panel { display: none !important; }
}
/* отменяем центрирование города из upgrade.css */
.kl-city--inline { order: 0; margin: 0; }


/* ============================================================
   Первый экран: выбор города над заголовком, подзаголовок, кнопки
   ============================================================ */

/* ---------- Переключатель города ---------- */
.kl-seg { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 26px; }
.kl-seg__label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 14px; line-height: 17px; color: #7C7A7A; }
.kl-seg__label svg { width: 15px; height: 15px; color: #5F7CDB; }
.kl-seg__track {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  padding: 4px; border-radius: 20px; background: rgba(115, 149, 255, .16);
}
.kl-seg__thumb {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 16px; background: #fff;
  box-shadow: 0 2px 8px -3px rgba(83, 119, 234, .45), 0 0 0 1px rgba(95, 124, 219, .08);
  transition: transform .3s var(--kl-ease);
}
.kl-seg__track[data-active="msk"] .kl-seg__thumb { transform: translateX(100%); }
.kl-seg__btn {
  position: relative; z-index: 1; padding: 7px 16px; border-radius: 16px;
  font-weight: 500; font-size: 14px; line-height: 18px; color: #5A6FAF; white-space: nowrap;
  transition: color .2s var(--kl-ease);
}
.kl-seg__btn:hover { color: #3D55B8; }
.kl-seg__btn[aria-checked="true"] { color: #121212; font-weight: 600; }
.kl-seg__btn:focus-visible { outline: 3px solid rgba(95, 124, 219, .45); outline-offset: 1px; }

/* Плавная смена городских текстов */
.kl-cityfade { transition: opacity .18s var(--kl-ease); }
.kl-cityfade.is-out { opacity: 0; }

/* ---------- Заголовок и подзаголовок ---------- */
.promo_text__title { margin-bottom: 18px; }
.promo_text__subtitle.kl-sub {
  max-width: 30em; margin-bottom: 20px;
  font-weight: 300; font-size: 17px; line-height: 25px; color: #7C7A7A;
}

/* ---------- Кнопки ---------- */
.kl-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; }
.kl-cta__main {
  display: inline-flex; align-items: center; gap: 16px;
  height: 56px; padding: 0 8px 0 24px; border-radius: 16px;
  background: #5F7CDB; color: #fff; font-weight: 500; font-size: 17px; line-height: 21px;
  box-shadow: 0 12px 24px -16px rgba(95, 124, 219, .9);
  transition: background-color .2s var(--kl-ease), box-shadow .2s var(--kl-ease), transform .12s var(--kl-ease);
}
.kl-cta__arrow {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255, 255, 255, .18);
  transition: background-color .2s var(--kl-ease), color .2s var(--kl-ease);
}
.kl-cta__arrow svg { width: 18px; height: 18px; transition: transform .25s var(--kl-ease); }
.kl-cta__main:hover { background: #4A67C9; box-shadow: 0 16px 28px -16px rgba(74, 103, 201, .95); }
.kl-cta__main:hover .kl-cta__arrow { background: #fff; color: #5F7CDB; }
.kl-cta__main:hover .kl-cta__arrow svg { transform: translateX(2px); }
.kl-cta__main:active { transform: scale(.98); }

.kl-cta__call { display: inline-flex; align-items: center; gap: 12px; color: #121212; }
.kl-cta__ic {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; flex: none;
  border: 1px solid #C9D4F5; color: #5F7CDB;
  transition: background-color .2s var(--kl-ease), border-color .2s var(--kl-ease), color .2s var(--kl-ease);
}
.kl-cta__ic svg { width: 20px; height: 20px; }
.kl-cta__call b { display: block; font-weight: 600; font-size: 17px; line-height: 21px; transition: color .2s var(--kl-ease); }
.kl-cta__call small { display: block; font-weight: 300; font-size: 13px; line-height: 17px; color: #7C7A7A; }
.kl-cta__call:hover .kl-cta__ic { background: #5F7CDB; border-color: #5F7CDB; color: #fff; }
.kl-cta__call:hover b { color: #5F7CDB; }
.kl-cta__main:focus-visible, .kl-cta__call:focus-visible { outline: 3px solid rgba(95, 124, 219, .45); outline-offset: 4px; }

@media (prefers-reduced-motion: no-preference) {
  .kl-cta__call:hover .kl-cta__ic svg { animation: klRing .5s var(--kl-ease); }
}
@keyframes klRing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 60% { transform: rotate(9deg); } }

/* ---------- Адаптив ---------- */
@media (max-width: 1100px) {
  .kl-cta { gap: 14px 20px; }
}
@media (max-width: 900px) {
  .promo_text__subtitle.kl-sub { font-size: 16px; line-height: 23px; }
}
@media (max-width: 600px) {
  .kl-seg { justify-content: center; margin-bottom: 20px; }
  .kl-seg__label { width: 100%; justify-content: center; }
  .promo_text__subtitle.kl-sub { margin-left: auto; margin-right: auto; font-size: 15px; line-height: 22px; }
  .kl-cta { flex-direction: column; align-items: stretch; gap: 16px; }
  .kl-cta__main { justify-content: space-between; }
  .kl-cta__call { justify-content: center; text-align: left; }
}

/* Ширина кнопки не меняется, когда текст становится жирнее */
.kl-seg__btn { display: inline-grid; text-align: center; }
.kl-seg__btn::after { content: attr(data-label); font-weight: 600; height: 0; overflow: hidden; visibility: hidden; }

/* ---------- Подбор: пакет «Гаражная амнистия» ---------- */
.kl-chip__badge {
  display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 6px; vertical-align: 1px;
  background: #EEF2FC; color: #5F7CDB; font-weight: 600; font-size: 11px; line-height: 15px;
  transition: background-color .2s, color .2s;
}
.kl-chip[aria-pressed="true"] .kl-chip__badge { background: rgba(255, 255, 255, .22); color: #fff; }
.kl-pick__name .kl-chip__badge { font-size: 12px; vertical-align: 3px; }
.kl-pick__list.is-pack { counter-reset: pk; margin-top: 10px; }
.kl-pick__list.is-pack li {
  counter-increment: pk; display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 0 7px 26px; margin: 0; border-bottom: 1px solid #DCE4FA;
  font-weight: 400; font-size: 14px; color: #424242;
}
.kl-pick__list.is-pack li:last-child { border-bottom: 0; }
.kl-pick__list.is-pack li::before {
  content: counter(pk); top: 8px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; background: #5F7CDB; color: #fff; font-weight: 600; font-size: 11px;
}
.kl-pick__list.is-pack b { font-weight: 600; color: #5F7CDB; white-space: nowrap; }
.kl-pick__note { margin: 0 0 14px; font-size: 13px; line-height: 18px; color: #7C7A7A; }
.kl-pick__note[hidden] { display: none; }
@media (max-width: 600px) {
  .kl-chip__badge { display: none; }
  .kl-pick__list.is-pack { display: block; }
}
.kl-pick__name .kl-chip__badge { background: #fff; }
@media (max-width: 600px) {
  .kl-pick .kl-chip--help { grid-column: 1 / -1; }
}

#form { scroll-margin-top: 120px; }


/* ============================================================
   Фон страницы: рельеф (горизонтали) + мягкое свечение сверху
   ============================================================ */
body.bg-topo {
  background-color: #F4F6F9;
  background-image:
    radial-gradient(1100px 520px at 80% 0%, rgba(95,124,219,.07), transparent 65%),
    url("/assets/img/bg-topo.svg");
  background-size: auto, 900px 900px;
  background-repeat: no-repeat, repeat;
}
/* Прозрачный блок с таймером получает лёгкую подложку */
body.bg-topo .kl-timer { background: rgba(255,255,255,.72); }
@media (max-width: 600px) {
  body.bg-topo { background-size: auto, 560px 560px; }
}


/* ============================================================
   Подвал: ровная сетка из четырёх колонок
   ============================================================ */
#footer.kl-foot { width: auto; margin: 72px 0 0; padding: 0 0 24px; background: transparent; border-radius: 0; text-align: left; }
.kl-foot__card { padding: 40px 40px 0; background: #fff; border-radius: 20px; }
.kl-foot__grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1.25fr; gap: 32px; padding-bottom: 32px; align-items: start; }
.kl-foot__logo { display: inline-flex; align-items: center; gap: 12px; color: #121212; }
.kl-foot__logo img { height: 44px; width: auto; display: block; }
.kl-foot__logo b { display: block; font-weight: 700; font-size: 18px; line-height: 22px; }
.kl-foot__logo small { display: block; font-size: 13px; line-height: 17px; color: #7C7A7A; }
.kl-foot__brand p { margin: 16px 0 18px; max-width: 290px; font-weight: 300; font-size: 14.5px; line-height: 21px; color: #565656; }
.kl-foot__social { display: flex; gap: 8px; }
.kl-foot__social a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: #EEF2FC; color: #5F7CDB; transition: background-color .2s, color .2s;
}
.kl-foot__social a:hover { background: #5F7CDB; color: #fff; }
.kl-foot__social svg { width: 18px; height: 18px; }
.kl-foot__col b { display: block; margin-bottom: 14px; font-weight: 700; font-size: 15px; line-height: 20px; color: #121212; }
.kl-foot__col a, .kl-foot__col span { display: block; margin-bottom: 10px; font-weight: 400; font-size: 14.5px; line-height: 20px; color: #565656; transition: color .2s; }
.kl-foot__col a:hover { color: #5F7CDB; }
.kl-foot__col .kl-foot__phone { margin-bottom: 4px; font-weight: 600; font-size: 16px; color: #121212; }
.kl-foot__col .kl-foot__phone + a:not(.kl-foot__phone) { margin-top: 10px; }
.kl-foot__addr { color: #7C7A7A !important; font-size: 14px !important; }
.kl-foot__col .kl-foot__cta { display: inline-block; margin: 6px 0 0; padding: 10px 18px; font-size: 15px; color: #fff; }
.kl-foot__col .kl-foot__cta:hover { color: #fff; }
.kl-foot__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 8px 24px; flex-wrap: wrap;
  padding: 18px 0 22px; border-top: 1px solid #EEF0F5; font-size: 13px; line-height: 18px; color: #7C7A7A;
}
.kl-foot__bottom a { color: #7C7A7A; text-decoration: underline; text-underline-offset: 3px; }
.kl-foot__bottom a:hover { color: #5F7CDB; }

@media (max-width: 1000px) {
  .kl-foot__grid { grid-template-columns: 1fr 1fr; gap: 28px 32px; }
}
@media (max-width: 600px) {
  #footer.kl-foot { margin-top: 52px; }
  .kl-foot__card { padding: 28px 20px 0; }
  .kl-foot__grid { grid-template-columns: 1fr 1fr; gap: 26px 16px; }
  .kl-foot__brand, .kl-foot__contacts { grid-column: 1 / -1; }
  .kl-foot__col a, .kl-foot__col span { font-size: 14px; }
  .kl-foot__bottom { flex-direction: column; align-items: flex-start; }
}


:root{--kl-list-icon:url(/img/list_icon.png)}
/* ============================================================
   Новые блоки. Поверх style.css + upgrade.css
   ============================================================ */
html { color-scheme: light; }
body { background-color: #F5F5F5; color: #121212; }
img { max-width: 100%; }
[hidden] { display: none !important; }


/* Общие заголовки секций — как на сайте */
.kl-sec { margin-top: 72px; scroll-margin-top: 16px; }
.kl-h2 { font-weight: 700; font-size: 30px; line-height: 36px; color: #5F7CDB; text-align: center; }
.kl-lead { max-width: 640px; margin: 12px auto 0; text-align: center; font-weight: 300; font-size: 17px; line-height: 24px; color: #565656; }
.kl-head { margin-bottom: 36px; }
.kl-example {
  display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 8px;
  border: 1px dashed #B9C6EC; border-radius: 8px; background: #fff;
  font-weight: 500; font-size: 12px; line-height: 16px; color: #7C7A7A; letter-spacing: 0;
}
.kl-card { background: #fff; border-radius: 20px; }
.kl-link { color: #5F7CDB; font-weight: 500; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-color: rgba(95,124,219,.4) !important; }
.kl-link:hover { text-decoration-color: #5F7CDB !important; }
.kl-outline {
  display: inline-flex; align-items: center; gap: 12px; padding: 6px 12px;
  border: 1px solid #5F7CDB; border-radius: 13px;
  font-style: italic; font-weight: 600; font-size: 17px; line-height: 23px; color: #5F7CDB;
  transition: background-color .2s var(--kl-ease);
}
.kl-outline img { width: 29px; height: 12px; transition: transform .2s var(--kl-ease); }
.kl-outline:hover { background: var(--kl-brand-soft); }
.kl-outline:hover img { transform: translateX(4px); }
.btn-toform { display: inline-block; }

/* Появление при прокрутке — один раз */
.js .kl-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--kl-ease), transform .6s var(--kl-ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .kl-reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
   УСЛУГИ — новая сетка
   ============================================================ */
.kl-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.kl-svc {
  display: flex; flex-direction: column; padding: 22px 22px 24px; scroll-margin-top: 24px;
  background: #fff; border-radius: 20px; border: 1px solid transparent;
  transition: transform .25s var(--kl-ease), box-shadow .25s var(--kl-ease), border-color .25s;
}
.kl-svc:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -20px rgba(95,124,219,.45); border-color: #DCE4FA; }
@media (hover: none) { .kl-svc:hover { transform: none; } }
.kl-svc__img { height: 150px; display: grid; place-items: center; margin-bottom: 16px; }
.kl-svc__img img { width: 210px; height: auto; transition: transform .5s var(--kl-ease); }
.kl-svc:hover .kl-svc__img img { transform: scale(1.04) rotate(-1deg); }
.kl-svc__title { font-weight: 700; font-size: 22px; line-height: 27px; color: #424242; margin-bottom: 12px; }
.kl-svc__list { flex: 1; margin-bottom: 18px; }
.kl-svc__list li { position: relative; padding-left: 26px; margin-bottom: 9px; font-weight: 300; font-size: 14.5px; line-height: 19px; color: #565656; }
.kl-svc__list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 15px; height: 15px; background: var(--kl-list-icon) no-repeat center / contain; }
.kl-svc__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid #EEF0F5; margin-bottom: 16px; }
.kl-svc__price { font-weight: 700; font-size: 21px; line-height: 26px; color: #121212; }
.kl-svc__price small { font-weight: 500; font-size: 14px; color: #7C7A7A; margin-right: 2px; }
.kl-svc__term { font-size: 13px; color: #7C7A7A; text-align: right; }
.kl-svc__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.kl-svc__actions .kl-outline { font-size: 15px; padding: 7px 12px; }
.kl-svc.kl-target { animation: klTarget 1.6s var(--kl-ease); }

.kl-help {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 24px; padding: 22px 28px; border-radius: 20px;
  background: var(--kl-brand-soft); border: 1px dashed #B9C6EC;
}
.kl-help b { display: block; font-size: 20px; line-height: 26px; color: #121212; }
.kl-help span { font-weight: 300; font-size: 15px; color: #565656; }
.kl-help__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Оффер */
.kl-offer { margin-top: 48px; }

/* ============================================================
   БИЗНЕСУ — плашка на главной
   ============================================================ */
.kl-biz {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center;
  padding: 36px 40px; border-radius: 20px; color: #fff; position: relative; overflow: hidden;
  background: #5F7CDB;
}
.kl-biz::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 320px; height: 320px; border-radius: 40px;
  border: 1.5px solid rgba(255,255,255,.18); transform: rotate(18deg); pointer-events: none;
}
.kl-biz__tag { display: inline-block; padding: 6px 12px; border-radius: 20px; background: rgba(255,255,255,.18); font-weight: 500; font-size: 13px; margin-bottom: 14px; }
.kl-biz h2 { font-weight: 700; font-size: 32px; line-height: 38px; margin-bottom: 10px; }
.kl-biz p { font-weight: 300; font-size: 17px; line-height: 24px; color: rgba(255,255,255,.88); margin-bottom: 22px; }
.kl-biz ul { display: grid; gap: 10px; position: relative; z-index: 1; }
.kl-biz li { position: relative; padding: 12px 14px 12px 44px; border-radius: 13px; background: rgba(255,255,255,.12); font-size: 15px; line-height: 20px; }
.kl-biz li::before { content: ""; position: absolute; left: 14px; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F7CDB' stroke-width='3'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.kl-btn-white { display: inline-block; padding: 11px 20px; border-radius: 13px; background: #fff; color: #5F7CDB; font-weight: 600; font-size: 17px; line-height: 21px; transition: transform .12s var(--kl-ease), box-shadow .2s; position: relative; z-index: 1; }
.kl-btn-white:hover { box-shadow: 0 12px 24px -12px rgba(0,0,0,.35); }
.kl-btn-white:active { transform: scale(.98); }

/* ============================================================
   КЕЙСЫ
   ============================================================ */
.kl-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.kl-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.kl-case { display: flex; flex-direction: column; padding: 24px; background: #fff; border-radius: 20px; transition: transform .25s var(--kl-ease), box-shadow .25s var(--kl-ease), opacity .25s; }
.kl-case:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(18,18,18,.3); }
.kl-case__vis { height: 132px; border-radius: 14px; background: var(--kl-brand-soft); display: grid; place-items: center; margin-bottom: 16px; position: relative; }
.kl-case__vis svg { width: 190px; height: 110px; }
.kl-case__vis .lbl { position: absolute; left: 10px; top: 10px; padding: 3px 8px; border-radius: 7px; background: #fff; font-size: 11.5px; font-weight: 600; color: #7C7A7A; }
.kl-case__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.kl-case__tags span { padding: 3px 9px; border-radius: 8px; background: var(--kl-brand-soft); color: #5F7CDB; font-weight: 600; font-size: 12px; }
.kl-case h3 { font-weight: 700; font-size: 19px; line-height: 24px; color: #121212; margin-bottom: 14px; }
.kl-pss { display: grid; gap: 10px; flex: 1; }
.kl-pss div { font-weight: 300; font-size: 14px; line-height: 19px; color: #565656; padding-left: 12px; border-left: 2px solid #DCE4FA; }
.kl-pss b { display: block; font-weight: 600; font-size: 12.5px; color: #424242; margin-bottom: 2px; }
.kl-pss .res { border-left-color: #2FA56B; }
.kl-pss .res b { color: #1F8A55; }
.kl-case__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #EEF0F5; font-size: 13.5px; color: #7C7A7A; }
.kl-case.is-hidden { display: none; }

/* ============================================================
   ОТЗЫВЫ
   ============================================================ */
.kl-rev { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
.kl-rates { display: grid; gap: 12px; padding: 22px; background: #fff; border-radius: 20px; }
.kl-rates__title { font-weight: 700; font-size: 18px; color: #424242; margin-bottom: 2px; }
.kl-rate { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #E6EBF6; border-radius: 13px; color: #121212; transition: border-color .2s, transform .2s var(--kl-ease); }
.kl-rate:hover { border-color: #5F7CDB; transform: translateX(3px); }
.kl-rate__ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; flex: none; }
.kl-rate b { font-size: 20px; font-variant-numeric: tabular-nums; }
.kl-rate .stars { color: #F0A500; font-size: 13px; letter-spacing: 1px; margin-left: 4px; }
.kl-rate small { display: block; font-size: 12.5px; color: #7C7A7A; }
.kl-rates__leave { margin-top: 4px; font-size: 14px; }
.kl-revlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.kl-rcard { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; background: #fff; border-radius: 20px; }
.kl-rcard__who { display: flex; align-items: center; gap: 12px; }
.kl-ava { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--kl-brand-soft); color: #5F7CDB; font-weight: 700; flex: none; }
.kl-rcard__who b { display: block; font-size: 15px; color: #121212; }
.kl-rcard__who small { font-size: 12.5px; color: #7C7A7A; }
.kl-rcard p { flex: 1; font-weight: 300; font-size: 15px; line-height: 22px; color: #424242; }
.kl-rcard__src { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.kl-rcard__src .stars { color: #F0A500; letter-spacing: 1px; }

/* ============================================================
   ЭТАПЫ — новая шкала
   ============================================================ */
.kl-steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; padding-top: 64px; counter-reset: s; }
.kl-steps::before, .kl-steps::after {
  content: ""; position: absolute; top: 25px; left: 10%; right: 10%; height: 2px; background: #DCE4FA;
}
.kl-steps::after { background: #5F7CDB; transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--kl-ease) .15s; }
.kl-steps.is-in::after { transform: scaleX(1); }
.kl-step { position: relative; padding: 26px 20px 22px; background: #fff; border-radius: 20px; overflow: visible; }
.kl-step__num {
  position: absolute; top: -64px; left: 50%; transform: translateX(-50%);
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 2px solid #DCE4FA; color: #9AAAD6; font-weight: 700; font-size: 20px; z-index: 1;
  transition: border-color .3s, color .3s, background-color .3s, box-shadow .3s;
  transition-delay: calc(.15s + var(--i, 0) * .32s);
}
.kl-steps.is-in .kl-step__num { border-color: #5F7CDB; color: #fff; background: #5F7CDB; box-shadow: 0 0 0 6px #F5F5F5; }
.kl-step::after {
  content: attr(data-n); position: absolute; right: 12px; bottom: -8px;
  font-weight: 800; font-size: 76px; line-height: 1; color: rgba(95,124,219,.07); pointer-events: none;
}
.kl-step h3 { font-weight: 700; font-size: 18px; line-height: 23px; color: #5F7CDB; margin-bottom: 8px; }
.kl-step p { font-weight: 300; font-size: 14.5px; line-height: 20px; color: #565656; position: relative; z-index: 1; }
.kl-step__tag { display: inline-block; margin-top: 12px; padding: 3px 9px; border-radius: 8px; background: var(--kl-brand-soft); color: #5F7CDB; font-weight: 600; font-size: 12.5px; position: relative; z-index: 1; }
.kl-steps-cta { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 28px; }
.kl-steps-cta span { font-weight: 300; font-size: 17px; color: #565656; }

/* ============================================================
   СЕРТИФИКАТЫ
   ============================================================ */
.kl-certs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.kl-cert { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: #fff; border-radius: 20px; text-align: left; cursor: zoom-in; }
.kl-cert__img { aspect-ratio: 175 / 240; border-radius: 12px; overflow: hidden; background: #EEF0F5; }
.kl-cert__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: grayscale(1); opacity: .85; transition: filter .4s var(--kl-ease), opacity .4s, transform .5s var(--kl-ease); }
.kl-cert:hover .kl-cert__img img, .kl-cert:focus-visible .kl-cert__img img { filter: none; opacity: 1; transform: scale(1.03); }
.kl-cert b { font-size: 15px; line-height: 20px; color: #424242; }
.kl-cert small { display: block; margin-top: 2px; font-size: 13px; color: #7C7A7A; }
.kl-lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 760px); max-height: 92vh; }
.kl-lightbox::backdrop { background: rgba(18,18,18,.72); }
.kl-lightbox img { display: block; max-height: 86vh; width: auto; margin: 0 auto; border-radius: 12px; }
.kl-lightbox button { position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; background: #fff; font-size: 22px; color: #121212; }

/* ============================================================
   FAQ
   ============================================================ */
.kl-faq { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.kl-faq__item { background: #fff; border-radius: 16px; }
.kl-faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; text-align: left; font-weight: 600; font-size: 17px; line-height: 23px; color: #121212; }
.kl-faq__q:focus-visible { outline: 3px solid rgba(95,124,219,.45); border-radius: 16px; }
.kl-faq__pl { width: 28px; height: 28px; border-radius: 50%; background: var(--kl-brand-soft); position: relative; flex: none; }
.kl-faq__pl::before, .kl-faq__pl::after { content: ""; position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; border-radius: 2px; background: #5F7CDB; transition: transform .3s var(--kl-ease); }
.kl-faq__pl::after { transform: rotate(90deg); }
.kl-faq__item.is-open .kl-faq__pl::after { transform: rotate(0); }
.kl-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--kl-ease); }
.kl-faq__item.is-open .kl-faq__a { grid-template-rows: 1fr; }
.kl-faq__a > div { overflow: hidden; }
.kl-faq__a p { padding: 0 22px 18px; font-weight: 300; font-size: 15.5px; line-height: 23px; color: #565656; max-width: 70ch; }

/* ============================================================
   Контакты: карта-заглушка
   ============================================================ */
.kl-map { position: relative; height: 380px; border-radius: 16px; overflow: hidden; background: #E9EEF7; display: grid; place-items: center; }
.kl-map svg.bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kl-map__pin { position: relative; display: grid; justify-items: center; gap: 12px; text-align: center; }
.kl-map__pin b { display: block; padding: 10px 14px; border-radius: 12px; background: #fff; box-shadow: 0 10px 24px -14px rgba(18,18,18,.4); font-weight: 600; font-size: 14px; color: #121212; max-width: 280px; }
.findus { height: auto; }
.contact_info { height: auto; }

/* Форма: сообщение об отправке */
.kl-sent { display: none; padding: 16px 0 0; font-size: 15px; color: #1F8A55; font-weight: 600; max-width: 300px; }
form.is-sent .kl-sent { display: block; }

/* Подвал: реквизиты */
.kl-legal { margin-top: 18px; font-weight: 300; font-size: 12.5px; color: #7C7A7A; }

/* Мобильная панель действий */
.kl-mbar { display: none; }
@media (max-width: 600px) {
  .kl-mbar {
    position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 990;
    display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 6px; padding: 6px;
    background: rgba(255,255,255,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-radius: 18px; box-shadow: 0 14px 34px -14px rgba(18,18,18,.35), 0 0 0 1px rgba(95,124,219,.14);
  }
  .kl-mbar a { display: grid; place-items: center; height: 46px; border-radius: 13px; font-weight: 600; font-size: 14.5px; color: #5F7CDB; background: var(--kl-brand-soft); }
  .kl-mbar a.main { background: #5F7CDB; color: #fff; }
  body { padding-bottom: 76px; }
  .kl-toast { bottom: 84px; }
}

/* ============================================================
   СТРАНИЦЫ УСЛУГ и БИЗНЕСУ
   ============================================================ */
.kl-crumbs { margin: 28px 0 16px; font-size: 14px; color: #7C7A7A; }
.kl-crumbs a { color: #5F7CDB; }
.kl-crumbs span { margin: 0 6px; }
.kl-page-hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; padding: 40px; background: #fff; border-radius: 20px; }
.kl-page-hero h1 { font-weight: 700; font-size: 44px; line-height: 52px; color: #121212; margin-bottom: 16px; text-wrap: balance; }
.kl-page-hero h1 span { color: #5777A4; }
.kl-page-hero .lead { font-weight: 300; font-size: 19px; line-height: 27px; color: #565656; margin-bottom: 22px; max-width: 36em; }
.kl-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.kl-fact { padding: 9px 14px; border-radius: 13px; background: #F4F7FE; border: 1px solid #DCE4FA; font-size: 15px; color: #424242; }
.kl-fact b { color: #5F7CDB; }
.kl-page-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.kl-page-hero__img { display: grid; place-items: center; }
.kl-page-hero__img img { width: 100%; max-width: 360px; }

.kl-h2-left { font-weight: 700; font-size: 28px; line-height: 34px; color: #121212; margin-bottom: 20px; }
.kl-situations { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kl-sit { padding: 22px; background: #fff; border-radius: 20px; }
.kl-sit__ic { width: 40px; height: 40px; border-radius: 12px; background: var(--kl-brand-soft); color: #5F7CDB; display: grid; place-items: center; font-weight: 700; margin-bottom: 14px; }
.kl-sit p { font-size: 15.5px; line-height: 22px; color: #424242; }
.kl-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.kl-box { padding: 28px; background: #fff; border-radius: 20px; }
.kl-box h2 { font-weight: 700; font-size: 24px; line-height: 30px; color: #121212; margin-bottom: 16px; }
.kl-checks li { position: relative; padding: 10px 0 10px 34px; border-bottom: 1px solid #EEF0F5; font-size: 16px; line-height: 22px; color: #424242; }
.kl-checks li:last-child { border-bottom: 0; }
.kl-checks li::before { content: ""; position: absolute; left: 0; top: 10px; width: 22px; height: 22px; border-radius: 7px; background: var(--kl-brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F7CDB' stroke-width='3'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.kl-checks--doc li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F7CDB' stroke-width='2'%3E%3Cpath d='M7 3h7l4 4v14H7z'/%3E%3Cpath d='M14 3v4h4M9.5 12h5M9.5 16h5'/%3E%3C/svg%3E"); background-size: 16px; }
.kl-note { margin-top: 14px; font-weight: 300; font-size: 14px; color: #7C7A7A; }
.kl-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kl-rel { display: flex; align-items: center; gap: 14px; padding: 16px; background: #fff; border-radius: 20px; color: #121212; transition: transform .2s var(--kl-ease), box-shadow .2s; }
.kl-rel:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -20px rgba(95,124,219,.5); }
.kl-rel img { width: 88px; flex: none; }
.kl-rel b { display: block; font-size: 17px; line-height: 22px; }
.kl-rel small { font-size: 14px; color: #5F7CDB; font-weight: 600; }
.kl-draft { margin: 28px 0 0; text-align: center; font-size: 13px; color: #7C7A7A; }

.kl-page-form { display: grid; grid-template-columns: .9fr 1.1fr; gap: 32px; align-items: start; padding: 36px 40px; background: #fff; border-radius: 20px; }
.kl-page-form h2 { font-weight: 700; font-size: 32px; line-height: 38px; color: #121212; margin-bottom: 10px; }
.kl-page-form h2 span { color: #5F7CDB; }
.kl-page-form p { font-weight: 300; font-size: 17px; line-height: 24px; color: #565656; }
.kl-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kl-fields .full { grid-column: 1 / -1; }
.kl-fields label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: #7C7A7A; cursor: default; }
.kl-fields input, .kl-fields select, .kl-fields textarea {
  width: 100%; height: 48px; padding: 0 14px; border: 1px solid #D6DEF2; border-radius: 13px; background: #fff;
  font-size: 16px; color: #121212; outline: none; transition: border-color .2s, box-shadow .2s;
}
.kl-fields textarea { height: 90px; padding: 12px 14px; resize: none; }
.kl-fields input:focus, .kl-fields select:focus, .kl-fields textarea:focus { border-color: #5F7CDB; box-shadow: 0 0 0 3px rgba(95,124,219,.18); }
.kl-fields .file { height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px dashed #B9C6EC; border-radius: 13px; font-size: 15px; color: #7C7A7A; cursor: pointer; }
.kl-fields .file:hover { border-color: #5F7CDB; color: #5F7CDB; }
.kl-consent { display: flex !important; align-items: flex-start; gap: 10px !important; font-weight: 300 !important; font-size: 13px !important; line-height: 18px; color: #565656 !important; cursor: pointer !important; }
.kl-consent input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: #5F7CDB; }
.kl-fields .form-btn { margin-top: 0; padding: 10px 28px; font-weight: 400; font-size: 18px; }
.kl-page-form .kl-sent { max-width: none; }

/* Бизнесу */
.kl-audience { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kl-aud { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: #fff; border-radius: 20px; font-weight: 600; font-size: 16px; color: #424242; }
.kl-aud svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--kl-brand-soft); color: #5F7CDB; flex: none; }
.kl-terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kl-term { padding: 22px; background: #fff; border-radius: 20px; }
.kl-term b { display: block; font-size: 17px; line-height: 22px; color: #121212; margin-bottom: 6px; }
.kl-term p { font-weight: 300; font-size: 15px; line-height: 21px; color: #565656; }
.kl-docs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.kl-doc { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid #E6EBF6; border-radius: 14px; color: #121212; transition: border-color .2s; }
.kl-doc:hover { border-color: #5F7CDB; }
.kl-doc__ic { width: 40px; height: 44px; border-radius: 8px; background: var(--kl-brand-soft); color: #5F7CDB; display: grid; place-items: center; font-weight: 700; font-size: 11px; flex: none; }
.kl-doc b { display: block; font-size: 15px; font-weight: 600; }
.kl-doc small { font-size: 12.5px; color: #7C7A7A; }

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 1100px) {
  .kl-svc-grid, .kl-cases { grid-template-columns: repeat(2, 1fr); }
  .kl-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
  .kl-step { padding: 22px 14px 18px; }
  .kl-step h3 { font-size: 16px; line-height: 21px; }
  .kl-step p { font-size: 13.5px; }
  .kl-situations { grid-template-columns: repeat(2, 1fr); }
  .kl-rev { grid-template-columns: 1fr; }
  .kl-rates { grid-template-columns: repeat(3, 1fr); }
  .kl-rates__title { grid-column: 1 / -1; }
  .kl-rates__leave { grid-column: 1 / -1; }
  .kl-certs { grid-template-columns: repeat(2, 1fr); max-width: 560px; margin: 0 auto; }
}
@media (max-width: 900px) {
  .kl-biz { grid-template-columns: 1fr; padding: 28px; }
  .kl-page-hero { grid-template-columns: 1fr; padding: 28px; }
  .kl-page-hero__img { display: none; }
  .kl-page-hero h1 { font-size: 34px; line-height: 41px; }
  .kl-two, .kl-page-form { grid-template-columns: 1fr; }
  .kl-page-form { padding: 28px; }
  .kl-audience, .kl-terms, .kl-related { grid-template-columns: 1fr 1fr; }
  /* Этапы — вертикальная шкала */
  .kl-steps { grid-template-columns: 1fr; gap: 14px; padding-top: 0; padding-left: 70px; }
  .kl-steps::before, .kl-steps::after { top: 26px; bottom: 26px; left: 25px; right: auto; width: 2px; height: auto; }
  .kl-steps::after { transform: scaleY(0); transform-origin: top; }
  .kl-steps.is-in::after { transform: scaleY(1); }
  .kl-step__num { top: 50%; left: -70px; transform: translateY(-50%); }
  .kl-step { padding: 20px 22px; }
  .kl-step h3 { font-size: 18px; }
  .kl-step p { font-size: 15px; }
  .kl-h2 { font-size: 26px; }
}
@media (max-width: 600px) {
  .kl-sec { margin-top: 52px; }
  .kl-svc-grid, .kl-cases, .kl-revlist, .kl-audience, .kl-terms, .kl-related, .kl-docs { grid-template-columns: 1fr; }
  .kl-situations { grid-template-columns: 1fr; }
  .kl-rates { grid-template-columns: 1fr; }
  .kl-help { padding: 20px; text-align: center; justify-content: center; }
  .kl-help__actions { justify-content: center; }
  .kl-biz { padding: 24px 20px; }
  .kl-biz h2 { font-size: 26px; line-height: 32px; }
  .kl-certs { gap: 12px; }
  .kl-cert { padding: 10px; }
  .kl-steps { padding-left: 58px; }
  .kl-steps::before, .kl-steps::after { left: 21px; }
  .kl-step__num { left: -58px; width: 44px; height: 44px; font-size: 17px; }
  .kl-page-hero { padding: 22px 20px; }
  .kl-page-hero h1 { font-size: 29px; line-height: 35px; }
  .kl-fields { grid-template-columns: 1fr; }
  .kl-page-form { padding: 22px 20px; }
  .kl-page-form h2 { font-size: 26px; line-height: 32px; }
  .kl-map { height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; transition-delay: 0s !important; }
  .js .kl-reveal { opacity: 1; transform: none; }
}

/* Правки после проверки */
ol.kl-steps { list-style: none; margin-left: 0; margin-right: 0; margin-bottom: 0; }
#form { max-width: 300px; }
.form-approve .kl-consent { font-weight: 200 !important; line-height: 15px; }
@media (max-width: 600px) { #form { max-width: none; } }


/* ---------- Пакетная карточка «Гаражная амнистия» в услугах ---------- */
.kl-pack {
  grid-column: 1 / -1; display: grid; grid-template-columns: .9fr 1.4fr; gap: 28px; align-items: center;
  padding: 28px 30px; background: #fff; border-radius: 20px; border: 1px solid #DCE4FA; scroll-margin-top: 96px;
  transition: box-shadow .25s var(--kl-ease), border-color .25s;
}
.kl-pack:hover { box-shadow: 0 18px 36px -22px rgba(95,124,219,.5); border-color: #C9D4F5; }
.kl-pack__tag { display: inline-block; padding: 5px 11px; border-radius: 20px; background: #EEF2FC; color: #5F7CDB; font-weight: 600; font-size: 13px; margin-bottom: 12px; }
.kl-pack h3 { font-weight: 700; font-size: 26px; line-height: 31px; color: #424242; margin-bottom: 8px; }
.kl-pack p { font-weight: 300; font-size: 15.5px; line-height: 22px; color: #565656; margin-bottom: 20px; }
.kl-pack__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; counter-reset: ps; }
.kl-pack__step { position: relative; counter-increment: ps; display: flex; flex-direction: column; gap: 4px; padding: 18px 16px; border-radius: 16px; background: #F4F7FE; color: #121212; transition: background-color .2s, transform .2s var(--kl-ease); }
.kl-pack__step:hover { background: #EAF0FD; transform: translateY(-2px); }
.kl-pack__step::before { content: counter(ps); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #5F7CDB; color: #fff; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.kl-pack__step:not(:last-child)::after {
  content: ""; position: absolute; right: -10px; top: 26px; width: 8px; height: 8px; z-index: 1;
  border-top: 2px solid #9AAAD6; border-right: 2px solid #9AAAD6; transform: rotate(45deg);
}
.kl-pack__step b { font-size: 16px; line-height: 20px; }
.kl-pack__step small { font-weight: 300; font-size: 13.5px; line-height: 18px; color: #565656; flex: 1; }
.kl-pack__step em { font-style: normal; font-weight: 700; font-size: 15px; color: #5F7CDB; margin-top: 6px; }
.kl-pack__note { grid-column: 1 / -1; margin: -8px 0 0; font-size: 13px; color: #7C7A7A; }
@media (max-width: 900px) {
  .kl-pack { grid-template-columns: 1fr; padding: 24px; }
}
@media (max-width: 600px) {
  .kl-pack__steps { grid-template-columns: 1fr; }
  .kl-pack__step:not(:last-child)::after { right: auto; left: 28px; top: auto; bottom: -9px; transform: rotate(135deg); }
  .kl-pack { padding: 20px; }
  .kl-pack h3 { font-size: 23px; }
}
.kl-related--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .kl-related--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .kl-related--4 { grid-template-columns: 1fr; } }
.kl-svc__actions .btn-toform, .kl-pick__actions .btn-toform { margin: 0; }
@media (max-width: 600px) {
  .kl-pack .kl-svc__actions { flex-direction: column; align-items: stretch; gap: 10px !important; }
  .kl-pack .kl-svc__actions > * { justify-content: center; text-align: center; }
}


/* ============================================================
   УСЛУГИ v2 — сетка 4 × 2, фото сверху, одна кнопка
   ============================================================ */
.kl-sv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.kl-sv {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border-radius: 20px; padding: 8px;
  transition: transform .25s var(--kl-ease), box-shadow .25s var(--kl-ease);
}
.kl-sv:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(95,124,219,.55); }
@media (hover: none) { .kl-sv:hover { transform: none; } }
.kl-sv__media { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #F4F7FE; }
.kl-sv__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--kl-ease); }
.kl-sv:hover .kl-sv__media img { transform: scale(1.04); }
.kl-sv__cat {
  position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: 20px;
  background: rgba(255,255,255,.94); color: #5F7CDB; font-weight: 600; font-size: 12px; line-height: 16px;
}
.kl-sv__go {
  position: absolute; right: 10px; bottom: 10px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: #5F7CDB;
  box-shadow: 0 6px 16px -8px rgba(18,18,18,.35);
  opacity: 0; transform: translateY(6px); transition: opacity .25s var(--kl-ease), transform .25s var(--kl-ease);
}
.kl-sv__go svg { width: 18px; height: 18px; }
.kl-sv:hover .kl-sv__go, .kl-sv:focus-within .kl-sv__go { opacity: 1; transform: none; }
.kl-sv__body { display: flex; flex-direction: column; flex: 1; padding: 14px 10px 8px; }
.kl-sv__title { font-weight: 700; font-size: 18px; line-height: 23px; color: #121212; margin-bottom: 6px; }
.kl-sv__link { color: inherit; transition: color .2s; }
.kl-sv__link::after { content: ""; position: absolute; inset: 0; border-radius: 20px; z-index: 1; }
.kl-sv:hover .kl-sv__link { color: #5F7CDB; }
.kl-sv__link:focus-visible { outline: none; }
.kl-sv:has(.kl-sv__link:focus-visible) { outline: 3px solid rgba(95,124,219,.45); outline-offset: 2px; }
.kl-sv__desc { flex: 1; margin-bottom: 14px; font-weight: 300; font-size: 14px; line-height: 20px; color: #565656; }
.kl-sv__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid #EEF0F5; }
.kl-sv__price { font-weight: 700; font-size: 18px; line-height: 22px; color: #121212; white-space: nowrap; }
.kl-sv__price small { font-weight: 400; font-size: 13px; color: #7C7A7A; }
.kl-sv__price--ask { font-weight: 600; font-size: 15px; color: #565656; }
.kl-sv__order {
  position: relative; z-index: 2; flex: none;
  padding: 8px 14px; border-radius: 12px; border: 1px solid #C9D4F5; background: #fff;
  font-weight: 500; font-size: 14px; line-height: 18px; color: #5F7CDB;
  transition: background-color .2s var(--kl-ease), color .2s var(--kl-ease), border-color .2s var(--kl-ease), transform .12s;
}
.kl-sv__order:hover { background: #5F7CDB; border-color: #5F7CDB; color: #fff; }
.kl-sv__order:active { transform: scale(.97); }
.kl-sv__order--main { align-self: flex-start; padding: 11px 20px; background: #5F7CDB; border-color: #5F7CDB; color: #fff; font-size: 16px; }
.kl-sv__order--main:hover { background: #4A67C9; border-color: #4A67C9; }

/* Заглушка фото */
.kl-ph {
  display: grid; place-content: center; justify-items: center; gap: 6px;
  width: 100%; height: 100%; min-height: 100%; padding: 12px; text-align: center; border-radius: inherit;
  background: repeating-linear-gradient(135deg, #F6F8FE 0 12px, #EFF3FC 12px 24px);
  border: 1.5px dashed #C3CFEF; color: #8FA0D2;
}
.kl-ph svg { width: 30px; height: 30px; }
.kl-ph b { font-weight: 600; font-size: 13px; line-height: 17px; color: #6F82BD; }
.kl-ph small { font-size: 11.5px; line-height: 15px; color: #9AA8D0; }
.kl-ph--sm { padding: 6px; gap: 0; }
.kl-ph--sm svg { width: 22px; height: 22px; }

/* Широкая карточка «Гаражная амнистия» */
.kl-gar {
  position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: 280px 1fr 1.45fr; gap: 26px; align-items: center;
  padding: 8px 24px 8px 8px; background: #fff; border-radius: 20px; scroll-margin-top: 96px;
  transition: box-shadow .25s var(--kl-ease);
}
.kl-gar:hover { box-shadow: 0 20px 40px -26px rgba(95,124,219,.55); }
.kl-gar__media { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; }
.kl-gar__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kl-gar__info h3 { font-weight: 700; font-size: 24px; line-height: 29px; color: #121212; margin-bottom: 8px; }
.kl-gar__info p { font-weight: 300; font-size: 15px; line-height: 21px; color: #565656; margin-bottom: 16px; }
.kl-gar:hover .kl-sv__link { color: #5F7CDB; }
.kl-gar .kl-sv__link::after { border-radius: 20px; }
.kl-gar__steps { position: relative; }
.kl-gar .kl-pack__step { padding: 16px 14px; }

/* Страницы услуг: место под фото */
.kl-page-hero__img { aspect-ratio: 4 / 3; width: 100%; max-width: 420px; justify-self: end; border-radius: 18px; overflow: hidden; }
.kl-page-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.kl-rel__ph { width: 88px; height: 66px; flex: none; border-radius: 12px; overflow: hidden; }
.kl-rel__ph img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Адаптив ---------- */
@media (max-width: 1100px) {
  .kl-sv-grid { gap: 16px; }
  .kl-sv__title { font-size: 17px; line-height: 22px; }
  .kl-sv__foot { flex-wrap: wrap; }
  .kl-gar { grid-template-columns: 220px 1fr; padding-right: 20px; }
  .kl-gar__steps { grid-column: 1 / -1; padding: 0 0 12px 12px; }
}
@media (max-width: 900px) {
  .kl-sv-grid { grid-template-columns: repeat(2, 1fr); }
  .kl-sv__foot { flex-wrap: nowrap; }
}
@media (max-width: 600px) {
  .kl-sv-grid { grid-template-columns: 1fr; gap: 12px; }
  .kl-sv { display: grid; grid-template-columns: 108px 1fr; align-items: stretch; gap: 0; padding: 8px; }
  .kl-sv__media { aspect-ratio: auto; min-height: 108px; }
  .kl-sv__cat, .kl-sv__go { display: none; }
  .kl-ph b, .kl-ph small { display: none; }
  .kl-sv__body { padding: 4px 6px 2px 14px; }
  .kl-sv__title { font-size: 16.5px; line-height: 21px; margin-bottom: 4px; }
  .kl-sv__desc { font-size: 13px; line-height: 18px; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .kl-sv__foot { padding-top: 0; border-top: 0; }
  .kl-sv__price { font-size: 16px; }
  .kl-sv__order { padding: 7px 12px; font-size: 13.5px; }
  .kl-gar { grid-template-columns: 1fr; padding: 8px; gap: 16px; }
  .kl-gar__media { aspect-ratio: 16 / 9; }
  .kl-gar__info { padding: 0 12px; }
  .kl-gar__info h3 { font-size: 22px; }
  .kl-gar__steps { padding: 0 4px 8px; }
  .kl-page-hero__img { display: none; }
}

/* ============================================================
   Акция с таймером
   ============================================================ */
.kl-timer { padding: 40px 24px 36px; border: 2px solid #5377EA; border-radius: 20px; text-align: center; }
.kl-timer__title { font-weight: 700; font-size: 38px; line-height: 46px; color: #565656; margin-bottom: 24px; text-wrap: balance; }
.kl-timer__clock { display: flex; justify-content: center; align-items: flex-start; gap: 10px; }
.js .kl-timer__clock:not(.is-ready) { visibility: hidden; }
.kl-timer__unit { display: grid; justify-items: center; gap: 8px; }
.kl-timer__num {
  display: grid; place-items: center; min-width: 96px; height: 92px; padding: 0 12px; border-radius: 18px;
  background: #F4F7FE; border: 1px solid #DCE4FA;
  font-weight: 700; font-size: 48px; line-height: 1; color: #5F7CDB; font-variant-numeric: tabular-nums;
}
.kl-timer__num.is-tick { animation: klTick .35s var(--kl-ease); }
@keyframes klTick { from { opacity: .35; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.kl-timer__unit small { font-weight: 400; font-size: 13px; color: #7C7A7A; }
.kl-timer__sep { height: 92px; display: grid; place-items: center; font-weight: 700; font-size: 40px; color: #B9C6EC; }
@media (prefers-reduced-motion: no-preference) {
  .kl-timer__sep { animation: klBlink 1s steps(1) infinite; }
}
@keyframes klBlink { 50% { opacity: .35; } }
.kl-timer__text { max-width: 560px; margin: 22px auto 22px; font-weight: 300; font-size: 20px; line-height: 27px; color: #565656; }
.kl-timer__text b { font-weight: 700; color: #5F7CDB; }
.kl-timer__btn { margin: 0 !important; }
@media (max-width: 900px) {
  .kl-timer__title { font-size: 30px; line-height: 37px; }
}
@media (max-width: 600px) {
  .kl-timer { padding: 28px 14px 26px; }
  .kl-timer__title { font-size: 24px; line-height: 30px; margin-bottom: 18px; }
  .kl-timer__clock { gap: 6px; }
  .kl-timer__num { min-width: 70px; height: 68px; font-size: 34px; border-radius: 14px; }
  .kl-timer__sep { height: 68px; font-size: 28px; }
  .kl-timer__text { font-size: 16px; line-height: 22px; margin: 18px auto; }
}

/* Отзывы: карточка-история со ссылкой на площадку */
.kl-rcard { color: inherit; transition: transform .25s var(--kl-ease), box-shadow .25s var(--kl-ease); }
.kl-rcard:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -22px rgba(18,18,18,.35); }
.kl-rcard__svc { align-self: flex-start; padding: 3px 9px; border-radius: 8px; background: var(--kl-brand-soft); color: #5F7CDB; font-weight: 600; font-size: 12px; }
.kl-rcard p { font-weight: 500; font-size: 16.5px; line-height: 23px; color: #121212; }
.kl-rcard__who { padding-top: 12px; border-top: 1px solid #EEF0F5; }
.kl-rcard__who > div { flex: 1; }
.kl-rate__ic--sm { width: 26px; height: 26px; border-radius: 8px; font-size: 12px; }
.kl-rcard__more { font-size: 13.5px; font-weight: 500; color: #5F7CDB; }
.kl-rcard:hover .kl-rcard__more { text-decoration: underline; text-underline-offset: 3px; }
.kl-rates { position: sticky; top: 96px; }
@media (max-width: 1100px) { .kl-rates { position: static; grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .kl-rates { grid-template-columns: 1fr; } }
.kl-cert__note { margin-top: 4px !important; font-size: 12px !important; color: #9A9A9A !important; }
.kl-certs__check { margin: 22px 0 0; text-align: center; font-weight: 300; font-size: 15px; color: #565656; }
.kl-rate__ic--avito { background: #fff; border: 1px solid #E6EBF6; padding: 3px; }
.kl-rate__ic--avito svg { width: 100%; height: 100%; }
@media (min-width: 601px) and (max-width: 1100px) { .kl-rates { grid-template-columns: repeat(3, 1fr); } }
.kl-addr-note { margin-top: 6px; font-weight: 300; font-size: 14px; line-height: 19px; color: #7C7A7A; }
.kl-addr-note:empty { display: none; }
.kl-case__place { background: #F4F6FA !important; color: #7C7A7A !important; font-weight: 500 !important; }
.kl-case__vis svg text { font-family: Inter, Arial, sans-serif; }

/* ---------- Кейсы: реальные фото и документы ---------- */
.kl-case__vis--img { display: block; width: 100%; height: 190px; padding: 0; border: 1px solid #E6EBF6; background: #fff; overflow: hidden; cursor: zoom-in; text-align: left; }
.kl-case__vis--img img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .45s var(--kl-ease); }
.kl-case__vis--img.is-cover img { object-fit: cover; }
.kl-case:hover .kl-case__vis--img img { transform: scale(1.03); }
.kl-case__vis--img .lbl { z-index: 1; box-shadow: 0 2px 8px -4px rgba(18,18,18,.3); }
.kl-case__count { position: absolute; right: 10px; top: 10px; z-index: 1; padding: 3px 8px; border-radius: 7px; background: rgba(18,18,18,.66); color: #fff; font-size: 12px; font-weight: 600; }
.kl-case__zoom { position: absolute; right: 10px; bottom: 10px; z-index: 1; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #5F7CDB; display: grid; place-items: center; box-shadow: 0 6px 14px -8px rgba(18,18,18,.4); transition: transform .2s var(--kl-ease); }
.kl-case__zoom svg { width: 18px; height: 18px; }
.kl-case__vis--img:hover .kl-case__zoom { transform: scale(1.08); }
.kl-case__vis--img:focus-visible { outline: 3px solid rgba(95,124,219,.45); outline-offset: 2px; }

/* Просмотр фото и документов */
.kl-lightbox { max-width: min(94vw, 1100px); max-height: 94vh; overflow: visible; }
.kl-lb__fig { margin: 0; padding: 10px; background: #fff; border-radius: 16px; }
.kl-lightbox .kl-lb__fig img { display: block; max-width: 100%; max-height: 76vh; width: auto; height: auto; margin: 0 auto; border-radius: 10px; }
.kl-lb__fig figcaption { padding: 10px 8px 4px; text-align: center; font-size: 14px; line-height: 20px; color: #565656; max-width: 720px; margin: 0 auto; }
.kl-lightbox .kl-lb__close { position: fixed; top: 16px; right: 16px; left: auto; width: 44px; height: 44px; border-radius: 50%; background: #fff; font-size: 22px; color: #121212; }
.kl-lightbox .kl-lb__nav { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: #fff; color: #121212; font-size: 30px; line-height: 1; display: none; box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); }
.kl-lightbox.is-multi .kl-lb__nav { display: grid; place-items: center; }
.kl-lightbox .kl-lb__nav.prev { left: 16px; right: auto; }
.kl-lightbox .kl-lb__nav.next { right: 16px; left: auto; }
@media (max-width: 600px) {
  .kl-case__vis--img { height: 170px; }
  .kl-lightbox .kl-lb__nav { top: auto; bottom: 16px; transform: none; }
}
dialog.kl-lightbox { margin: auto; inset: 0; }
.kl-case__vis { height: 190px; }
.kl-case__vis svg { width: 100%; height: 100%; max-width: 260px; }
.kl-case__vis--art { cursor: default; background: #EEF3FB; }
.kl-case__vis--art img { object-fit: cover; }
.kl-case:hover .kl-case__vis--art img { transform: none; }
@media (max-width: 600px) { .kl-case__vis { height: 170px; } }
#caseFilter .kl-chip__badge { margin-left: 6px; background: #EEF2FC; color: #5F7CDB; }
#caseFilter .kl-chip[aria-pressed="true"] .kl-chip__badge { background: rgba(255,255,255,.25); color: #fff; }
@media (max-width: 600px) { #caseFilter .kl-chip__badge { display: inline-block; } }
.kl-audience { grid-template-columns: repeat(4, 1fr); }
.kl-aud { line-height: 20px; }
@media (max-width: 1100px) { .kl-audience { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .kl-audience { grid-template-columns: 1fr; } }

/* ---------- Под ключ: ряд преимуществ и акцентная плашка ---------- */
.kl-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin: 18px auto 0; padding: 0; list-style: none; max-width: 1120px; }
.kl-perks li {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 9px; border-radius: 20px;
  background: #fff; border: 1px solid #DCE4FA; font-weight: 500; font-size: 14px; line-height: 18px; color: #424242;
}
.kl-perks svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #E7F6EE; color: #1F8A55; flex: none; }
.kl-fact--accent { background: #E7F6EE; border-color: #BFE5CF; color: #1F6B45; }
.kl-fact--accent b { color: #1F8A55; }
@media (max-width: 600px) {
  .kl-perks { justify-content: flex-start; }
  .kl-perks li { font-size: 13px; }
}
@media (min-width: 1101px) {
  .kl-steps.kl-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kl-steps.kl-steps--4::before, .kl-steps.kl-steps--4::after { left: 12.5%; right: 12.5%; }
}

/* ---------- Сроки ---------- */
.kl-sv__pt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kl-sv__term { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; line-height: 16px; color: #7C7A7A; white-space: nowrap; }
.kl-sv__term svg { width: 13px; height: 13px; color: #5F7CDB; flex: none; }
.kl-pick__term { display: inline-flex; align-items: center; gap: 5px; color: #565656; }
.kl-pick__term svg { width: 15px; height: 15px; color: #5F7CDB; }
.kl-pick__list.is-pack li small { display: block; font-size: 12px; color: #7C7A7A; font-weight: 400; }
.kl-pack__term { font-size: 12.5px; color: #7C7A7A; }
@media (max-width: 600px) { .kl-sv__term { white-space: normal; } }
/* Документы для бизнеса: готовый файл */
.kl-doc--ready { grid-column: 1 / -1; border-color: #C9D4F5; background: #F9FBFF; flex-wrap: wrap; }
.kl-doc--ready .kl-doc__ic { background: #5F7CDB; color: #fff; }
.kl-doc__txt { flex: 1; min-width: 140px; }
.kl-doc__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.kl-doc__btn { padding: 8px 14px; border-radius: 10px; border: 1px solid #C9D4F5; background: #fff; font-weight: 500; font-size: 14px; color: #5F7CDB; transition: background-color .2s, color .2s, border-color .2s; }
.kl-doc__btn:hover { background: #EEF2FC; }
.kl-doc__btn--main { background: #5F7CDB; border-color: #5F7CDB; color: #fff; }
.kl-doc__btn--main:hover { background: #4A67C9; border-color: #4A67C9; }
.kl-doc__btn[hidden] { display: none; }
.kl-step__link { display: block; margin-top: 10px; position: relative; z-index: 1; padding: 0; background: none; font-weight: 500; font-size: 13.5px; color: #5F7CDB; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(95,124,219,.4); cursor: pointer; }
.kl-step__link:hover { text-decoration-color: #5F7CDB; }

/* ---------- Гаражная амнистия: вся карточка — ссылка на страницу ---------- */
.kl-gar__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; position: relative; z-index: 2; }
.kl-gar__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: #5F7CDB; }
.kl-gar__more svg { width: 16px; height: 16px; transition: transform .2s var(--kl-ease); }
.kl-gar__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.kl-gar { cursor: pointer; transition: transform .25s var(--kl-ease), box-shadow .25s var(--kl-ease); }
.kl-gar:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(95,124,219,.55); }
.kl-gar:hover .kl-gar__more svg { transform: translateX(3px); }
.kl-gar__media { position: relative; }
.kl-gar:hover .kl-sv__go { opacity: 1; transform: none; }
.kl-gar__steps { z-index: auto; }
.kl-pack__step, .kl-pack__step:hover { transform: none; cursor: inherit; }
div.kl-pack__step:hover { background: #F4F7FE; }
.kl-gar:hover .kl-pack__step { background: #EEF2FC; }
@media (hover: none) { .kl-gar:hover { transform: none; } }

/* ============================================================
   Адаптив: правки после полной проверки
   ============================================================ */
/* колонки сетки могут сжиматься уже содержимого */
.kl-sv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kl-sv__foot { flex-wrap: wrap; row-gap: 8px; }
.kl-gar { grid-template-columns: 280px minmax(0, 1fr) minmax(0, 1.45fr); }
.kl-pack__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* гаражная амнистия: на средних экранах шаги уходят под описание */
@media (max-width: 1240px) {
  .kl-gar { grid-template-columns: 240px minmax(0, 1fr); padding-right: 20px; }
  .kl-gar__steps { grid-column: 1 / -1; padding: 0 0 12px 12px; }
}
@media (max-width: 900px) {
  .kl-sv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .kl-sv-grid { grid-template-columns: minmax(0, 1fr); }
  .kl-sv { grid-template-columns: 108px minmax(0, 1fr); }
  .kl-gar { grid-template-columns: minmax(0, 1fr); padding: 8px; }
  .kl-gar__steps { padding: 0 4px 8px; }
  .kl-pack__steps { grid-template-columns: minmax(0, 1fr); }
  #form label { width: 100%; max-width: 300px; }
}
/* очень узкие телефоны */
@media (max-width: 374px) {
  .kl-sv { grid-template-columns: 84px minmax(0, 1fr); }
  .kl-sv__media { min-height: 96px; }
  .kl-sv__body { padding-left: 10px; }
  .kl-sv__order { padding: 6px 10px; }
  .promo_text__title h1 { font-size: 27px; line-height: 33px; }
  .kl-timer__num { min-width: 62px; height: 62px; font-size: 30px; }
  .kl-timer__sep { height: 62px; }
}
#form input:not([type="checkbox"]), #form textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
@media (max-width: 600px) {
  .kl-sv__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 10px; }
  .kl-sv__order { justify-self: end; }
}
@media (max-width: 374px) {
  .kl-sv__foot { grid-template-columns: minmax(0, 1fr); }
  .kl-sv__order { justify-self: start; }
}
.kl-case__foot { flex-wrap: wrap; row-gap: 6px; }

/* ---------- Адаптив, второй проход ---------- */
/* этапы: вертикальная шкала до 1100px */
@media (max-width: 1100px) {
  .kl-steps, .kl-steps.kl-steps--4 { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 0; padding-left: 70px; }
  .kl-steps::before, .kl-steps::after, .kl-steps.kl-steps--4::before, .kl-steps.kl-steps--4::after { top: 26px; bottom: 26px; left: 25px; right: auto; width: 2px; height: auto; }
  .kl-steps::after { transform: scaleY(0); transform-origin: top; }
  .kl-steps.is-in::after { transform: scaleY(1); }
  .kl-step__num { top: 50%; left: -70px; transform: translateY(-50%); }
  .kl-step { padding: 20px 22px; }
  .kl-step h3 { font-size: 18px; }
  .kl-step p { font-size: 15px; max-width: 640px; }
}
@media (max-width: 600px) {
  .kl-steps, .kl-steps.kl-steps--4 { padding-left: 58px; }
  .kl-steps::before, .kl-steps::after, .kl-steps.kl-steps--4::before, .kl-steps.kl-steps--4::after { left: 21px; }
  .kl-step__num { left: -58px; }
}

/* услуги: две колонки с невысоким фото до 900px, телефонный вид — только до 480px */
@media (max-width: 900px) {
  .kl-sv__media { aspect-ratio: 16 / 9; }
}
@media (min-width: 481px) and (max-width: 600px) {
  .kl-sv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kl-sv { display: flex; flex-direction: column; padding: 8px; }
  .kl-sv__media { aspect-ratio: 16 / 9; min-height: 0; }
  .kl-sv__cat { display: inline-block; }
  .kl-sv__body { padding: 12px 6px 4px; }
  .kl-sv__desc { -webkit-line-clamp: 3; }
}

/* форма заявки по центру на узких экранах */
@media (max-width: 600px) {
  #form { max-width: 360px; margin-left: auto; margin-right: auto; }
  #form label { max-width: none; }
}

/* кейсы: одинокий последний — во всю ширину */
@media (min-width: 601px) and (max-width: 1100px) {
  .kl-cases > .kl-case:last-child:nth-child(odd) {
    grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 24px; align-items: start;
  }
  .kl-cases > .kl-case:last-child:nth-child(odd) > .kl-case__vis { grid-row: 1 / span 4; height: 100%; min-height: 240px; margin: 0; }
  .kl-cases > .kl-case:last-child:nth-child(odd) > :not(.kl-case__vis) { grid-column: 2; }
}
@media (max-width: 480px) {
  .kl-sv__media { aspect-ratio: auto; }
}
@media (max-width: 600px) {
  .kl-gar__media { aspect-ratio: 21 / 9; }
}

/* ---------- Фото машины: полоса в «Работаем под ключ» ---------- */
.kl-ride { position: relative; margin: 0 0 44px; border-radius: 20px; overflow: hidden; aspect-ratio: 12 / 5; background: #2a3140; }
.kl-ride img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; }
.kl-ride::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,18,30,.72) 0%, rgba(14,18,30,.35) 38%, rgba(14,18,30,0) 62%); pointer-events: none; }
.kl-ride figcaption { position: absolute; left: 36px; bottom: 32px; z-index: 1; max-width: 360px; color: #fff; }
.kl-ride b { display: block; font-weight: 700; font-size: 30px; line-height: 36px; margin-bottom: 6px; }
.kl-ride span { display: block; font-weight: 400; font-size: 16px; line-height: 23px; color: rgba(255,255,255,.88); }
@media (max-width: 900px) {
  .kl-ride { aspect-ratio: 16 / 8; margin-bottom: 28px; }
  .kl-ride b { font-size: 24px; line-height: 30px; }
  .kl-ride figcaption { left: 24px; bottom: 22px; max-width: 300px; }
}
@media (max-width: 600px) {
  .kl-ride { aspect-ratio: 4 / 3; }
  .kl-ride img { object-position: 72% 55%; }
  .kl-ride::after { background: linear-gradient(0deg, rgba(14,18,30,.78) 0%, rgba(14,18,30,.3) 45%, rgba(14,18,30,0) 70%); }
  .kl-ride figcaption { left: 18px; right: 18px; bottom: 16px; max-width: none; }
  .kl-ride b { font-size: 21px; line-height: 26px; margin-bottom: 4px; }
  .kl-ride span { font-size: 14px; line-height: 20px; }
}
/* «Бизнесу»: фото машины видно и на телефоне, баннером над текстом */
@media (max-width: 900px) {
  .kl-page-hero__img--show { display: block !important; order: -1; max-width: none; justify-self: stretch; aspect-ratio: 16 / 9; }
}
.kl-ride img { filter: brightness(1.12) contrast(1.04) saturate(1.05); }
.kl-ride::after { background: linear-gradient(90deg, rgba(14,18,30,.66) 0%, rgba(14,18,30,.28) 32%, rgba(14,18,30,0) 50%); }
@media (max-width: 600px) {
  .kl-ride::after { background: linear-gradient(0deg, rgba(14,18,30,.75) 0%, rgba(14,18,30,.25) 40%, rgba(14,18,30,0) 60%); }
}

/* ---------- Самые узкие экраны: шапка и переключатель города ---------- */
.kl-seg__track { grid-template-columns: auto auto; }
.kl-seg__thumb { width: auto; }
.kl-hdr__right, .kl-hdr__contact { min-width: 0; }
@media (max-width: 380px) {
  .kl-hdr__bar { gap: 8px; padding: 0 6px 0 12px; }
  .kl-hdr__right { gap: 6px; }
  .kl-hdr__icon, .kl-hdr__burger { width: 40px; height: 40px; }
  .kl-hdr__burger::before { top: 14px; } .kl-hdr__burger span { top: 19px; } .kl-hdr__burger::after { top: 24px; }
  .kl-city--inline .kl-city__btn { font-size: 14px; gap: 4px; }
  .kl-seg__btn { padding: 7px 12px; }
}
@media (max-width: 340px) {
  .kl-hdr__icon--call { display: none !important; }
  .kl-hdr__logo img { height: 30px; }
  .kl-seg__btn { padding: 7px 10px; font-size: 13.5px; }
  .promo_text__title h1 { font-size: 24px; line-height: 30px; }
}
@media (max-width: 380px) {
  .kl-hdr .kl-city--inline .kl-city__menu { left: -50px; right: auto; width: min(250px, calc(100vw - 30px)); min-width: 0; }
}

/* ---------- Страница политики ---------- */
.kl-policy { margin: 8px 0 40px; padding: 44px 48px; background: #fff; border-radius: 20px; }
.kl-policy h1 { margin: 0 0 22px; font-weight: 700; font-size: 34px; line-height: 40px; color: #121212; }
.kl-policy__body { max-width: 860px; }
.kl-policy__body h2 { margin: 30px 0 10px; font-weight: 700; font-size: 20px; line-height: 26px; color: #121212; }
.kl-policy__body p { margin: 0 0 10px; font-weight: 400; font-size: 15.5px; line-height: 24px; color: #424242; }
.kl-policy__body ul { margin: 0 0 12px; padding-left: 22px; }
.kl-policy__body li { margin: 0 0 6px; font-size: 15.5px; line-height: 24px; color: #424242; list-style: disc; }
.kl-consent a { position: relative; z-index: 1; }
@media (max-width: 600px) {
  .kl-policy { padding: 26px 20px; }
  .kl-policy h1 { font-size: 24px; line-height: 30px; }
  .kl-policy__body h2 { font-size: 18px; line-height: 24px; }
  .kl-policy__body p, .kl-policy__body li { font-size: 14.5px; line-height: 22px; }
}


/* ============================================================
   Боевая версия: формы, cookie, карта, документы, 404
   ============================================================ */
.kl-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
form.is-error .kl-sent { color: #B42318; background: #FEF3F2; border-color: #FECDCA; }
form.is-sent:not(.is-error) .form-btn { opacity: .75; }

/* прикрепление файла */
.kl-file .file { position: relative; cursor: pointer; }
.kl-file input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.kl-file__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-file .file:focus-within { outline: 3px solid rgba(95,124,219,.35); outline-offset: 2px; }

/* настоящая карта */
.kl-map--live { padding: 0; overflow: hidden; background: #EEF2F7; }
.kl-map--live iframe { display: block; width: 100%; height: 100%; min-height: 380px; border: 0; }
.kl-map__open { margin: 12px 0 0; font-size: 14.5px; }

/* дата редакции документов */
.kl-policy__date { margin: -12px 0 22px; font-size: 14px; color: #7C7A7A; }

/* плашка о cookie */
.kl-cookie {
  position: fixed; left: 16px; bottom: 16px; z-index: 60; max-width: 440px;
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: #fff; border: 1px solid #E6EBF6; border-radius: 16px;
  box-shadow: 0 18px 40px -20px rgba(18,18,18,.35);
}
.kl-cookie p { margin: 0; font-size: 13.5px; line-height: 19px; color: #424242; }
.kl-cookie__ok { flex: none; padding: 9px 16px; border-radius: 10px; background: #5F7CDB; color: #fff; font-weight: 600; font-size: 14px; }
.kl-cookie__ok:hover { background: #4A67C9; }
@media (max-width: 760px) {
  .kl-cookie { left: 10px; right: 10px; bottom: 82px; max-width: none; }
}

/* 404 */
.kl-404 { margin: 24px 0 48px; padding: 64px 32px; background: #fff; border-radius: 20px; text-align: center; }
.kl-404__code { font-weight: 800; font-size: 96px; line-height: 1; color: #DCE4FA; }
.kl-404 h1 { margin: 12px 0 10px; font-weight: 700; font-size: 32px; color: #121212; }
.kl-404 p { max-width: 520px; margin: 0 auto 26px; font-size: 16px; line-height: 24px; color: #565656; }
.kl-404__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

/* подпись согласия переносится как обычный текст */
.kl-consent__txt { flex: 1 1 auto; min-width: 0; }
.form-approve .kl-consent { width: 100% !important; }
@media (max-width: 340px) {
  .kl-sv__title { font-size: 15px; line-height: 20px; overflow-wrap: anywhere; }
  .kl-page-form h2 { font-size: 22px; line-height: 28px; overflow-wrap: anywhere; }
  .kl-page-form { padding: 20px 16px; }
}
@media (max-width: 900px) {
  .kl-page-form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .kl-fields { grid-template-columns: minmax(0, 1fr); }
}
.kl-page-form > *, .kl-fields > *, .kl-fields input, .kl-fields select, .kl-fields .file { min-width: 0; }