.prdctfltr_product_cat span:before{
	display: none !important;
}

.prdctfltr_product_cat label {
	display: block;
	padding: 14.5px 16px;
	font-size: 16px;
	font-weight: 300;
	border-bottom: 1px solid var(--grey-2);
	-webkit-transition: color var(--anim300), border-color var(--anim300), background-color var(--anim300);
	transition: color var(--anim300), border-color var(--anim300), background-color var(--anim300);
}
.prdctfltr_product_cat label.prdctfltr_active, .prdctfltr_product_cat label:hover{
	background: var(--grey-3);
	font-weight: 300;
}
.prdctfltr_filter .label a{
	display: block;

line-height: 24px;
	display: block;
padding: 14.5px 16px;
font-size: 16px;
font-weight: 300;
border-bottom: 1px solid var(--grey-2);
-webkit-transition: color var(--anim300), border-color var(--anim300), background-color var(--anim300);
transition: color var(--anim300), border-color var(--anim300), background-color var(--anim300);
}
.prdctfltr_filter .label a:hover, .prdctfltr_filter .label a.active {
  background: var(--grey-3);
  font-weight: 300;
}
.prdctfltr_wc .prdctfltr_filter label > span{
	font-weight: 300 !important;
}
.prdctfltr_wc .prdctfltr_woocommerce_ordering{
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.prdctfltr_wc .prdctfltr_filter_inner{

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	grid-row-gap: 80px;

}
.prdctfltr_filter_inner::before, .prdctfltr_filter_inner::after{
	display: none !important;
}
.prdctfltr_filter .prdctfltr_regular_title{
	margin-bottom: 16px !important;
	font-size: 16px !important;
	line-height: 1.4 !important;
	text-transform: uppercase !important;
	color: var(--grey-1) !important;
	font-weight: normal !important;
}
.pf_rngstyle_html5 .irs-line-left, .pf_rngstyle_html5 .irs-line-right, .pf_rngstyle_html5 .irs-min, .pf_rngstyle_html5 .irs-max{
	display: none !important;
}
.pf_rngstyle_html5 .irs-from, .pf_rngstyle_html5 .irs-to, .pf_rngstyle_html5 .irs-single{
	background: transparent !important;
	font-size: 16px !important;
font-weight: 300 !important;
	font-family: var(--mainfont)  !important;
font-size: var(--fontsize) !important;
line-height: var(--lineheight) !important;
color: var(--maincolor) !important;
}
.pf_rngstyle_html5 .irs-line{
	height: 1px !important;
	border: 0 !important;
	
}
.pf_rngstyle_html5 .irs-bar {
	height: 3px !important;
	top: 32px !important;
	border-top:0 !important;
	border-bottom:0 !important;
	background: var(--maincolor)  !important;
	
}
.pf_rngstyle_html5 .irs-slider {
	top: 27px !important;
	
	
	/*top: -5px;
	right: -6px;*/
	width: 12px !important;
	height: 12px !important;
	cursor: pointer;
	border-radius: 50%;
	border: none  !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	background: var(--maincolor) !important;

	
}

.prdctfltr_checkboxes  .prdctfltr_wc .prdctfltr_woocommerce_ordering .prdctfltr_filter label > span{
	position: relative !important;
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-box-align: center !important;
-ms-flex-align: center !important;
align-items: center !important;
padding-left: 40px !important;
min-height: 32px !important;
font-size: 16px !important;
font-weight: 300 !important;
}

.prdctfltr_filter label{
	font-size: 16px !important;
}

.prdctfltr_attributes:not(.prdctfltr_product_cat) .prdctfltr_checkboxes {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	grid-row-gap: 16px;
}
.prdctfltr_woocommerce_ordering  .prdctfltr_attributes:not(.prdctfltr_product_cat) label > span {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	padding-left: 40px;
	min-height: 32px;
	font-size: 16px;
	font-weight: 300;
}
.prdctfltr_woocommerce_ordering  .prdctfltr_attributes:not(.prdctfltr_product_cat) label > span::before, .prdctfltr_woocommerce_ordering  .prdctfltr_attributes:not(.prdctfltr_product_cat) label > span::after {
	content: "" !important;
	position: absolute !important;
	-webkit-box-sizing: border-box !important;
	box-sizing: border-box !important;
}
.prdctfltr_woocommerce_ordering  .prdctfltr_attributes:not(.prdctfltr_product_cat) label > span::before {
	top: 0 !important;
	left: 0 !important;
	width: 32px !important;
	height: 32px !important;
	border: 1px solid var(--grey-2) !important;
	background: var(--white) !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.prdctfltr_woocommerce_ordering  .prdctfltr_attributes:not(.prdctfltr_product_cat) label > span::after {
	opacity: 0 !important;
	visibility: hidden !important;
	width: 24px !important;
	height: 24px !important;
	top: 4px !important;
	left: 4px !important;
	-webkit-transition: visibility var(--anim150), opacity var(--anim150) !important;
	transition: visibility var(--anim150), opacity var(--anim150) !important;
	background-color: var(--maincolor) !important;
	background-image: url(../images/icons/chk.svg) !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 11px 8px !important;
}


.prdctfltr_woocommerce_ordering  .prdctfltr_attributes:not(.prdctfltr_product_cat) input:checked ~ .prdctfltr_woocommerce_ordering  .prdctfltr_attributes:not(.prdctfltr_product_cat) label > span::after {
	visibility: visible !important;
	opacity: 1 !important;
}
.prdctfltr_woocommerce_ordering .prdctfltr_attributes:not(.prdctfltr_product_cat) label.prdctfltr_active > span::after{
	visibility: visible !important;
	opacity: 1 !important;
}


.page-numbers {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	font-size: 16px;
	line-height: 1;
	text-align: center;
	border: 1px solid var(--grey-2);
	background: var(--white);
}
.page-numbers:hover {
	border-color: var(--maincolor);
}
.page-numbers.prev, .page-numbers.next {
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
}
.page-numbers.prev {
	background-image: url(../images/icons/pgn-prev.svg);
	font-size: 0;
	text-indent: -99999px;
}
.page-numbers.next {
	background-image: url(../images/icons/pgn-next.svg);
	font-size: 0;
	text-indent: -99999px;
}
.page-numbers.current {
	pointer-events: none;
	color: var(--white);
	background: var(--maincolor);
}

@media (max-width: 720px) {
	.page-numbers{
		width: 40px;
		height: 40px;
	}
}

@media (max-width: 480px) {
	.page-numbers.prev,
	.page-numbers.next{
		display: none;
	}
}

.article-body{
	
}
/*.article-body p, .article-body ol, .article-body ul, .article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5{
	max-width: 920px;
	margin-left: auto;
	margin-right: auto;
}*/
blockquote {
	padding: 64px 20px;
	font: 400 24px/1.5 var(--second-family);
	background: var(--grey-3);
	margin-left: 0;
	margin-right: 0;
}
blockquote p{
	margin: 0 auto;
	max-width: 920px;
}

.order-form-field.error .order-form-field__label{
	color: #f00;
}

.notifications-wrapper{
	position: fixed;
	width: 100%;
	max-width: 400px;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	z-index: 10;
	pointer-events: none;
}

.notification{
	width: 100%;
	padding: 10px;
	background: #418bce;
	color: #fff;
	margin-bottom: 15px;
	text-align: center;
	transform: translateY(100%);
	opacity: 0;
	transition: all 0.3s;
	pointer-events: none;
}
.notification.active{
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	cursor: pointer;
}

.notification_error{
	background: #f12c2c;
}
.notification_success{
	background: #37b610;
}

.error .order-form-field__input,
.error input[type=tel]{
	border: 1px solid #f00;
}

.order-form-accept.error{
	color: #f00;
}

.order-form-accept.error .checkbox__label:before{
	border-color: #f00;
}

.callback-form p{
	margin: 0;
}
.wpcf7 form .wpcf7-response-output{
	margin: 0 !important;
	color: #fff !important;
}
.callback-form.sent .wpcf7-response-output{
	display: none;
}

.prdctfltr_wc.prdctfltr_woocommerce{
	margin-top: -64px;
}
.services .ctg-item{
	width: 200px;
}

.services .ctg-items{
	justify-content: center;
	display: flex;
flex-wrap: wrap;
}

.article-body .article-content >  p{
	color: var(--grey-1);
}
.header-subnav{
	transition: opacity 300ms ease 0s;
}
.header-subnav.open{
	transition: opacity 600ms ease 0s;
}

.pagination .nav-links {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	grid-column-gap: 8px;
}

.catalog-sort .prdctfltr_wc{
	visibility: hidden;
position: absolute;
top:-1000;
	opacity: 0;
}
.prdctfltr_filter .prdctfltr_regular_title{
	position: relative;
	border-bottom: 1px solid var(--grey-2);
	margin-bottom: 16px;
	padding: 16px 0 !important;
}
.prdctfltr_filter.prdctfltr_rng_price .prdctfltr_regular_title{
	border: 0 !important;
}



/*.filter-item.is-active .filter-item__title {
  margin-bottom: 16px;
}*/
.prdctfltr_regular_title::before, .prdctfltr_regular_title::after {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.prdctfltr_regular_title.is-active::after {
  opacity: 0;
}
.prdctfltr_regular_title.is-active::before, .prdctfltr_regular_title.is-active::after {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}
/*.filter-item__title {
  position: relative;
  -webkit-transition: margin-bottom var(--anim300);
  transition: margin-bottom var(--anim300);
  margin-bottom: 16px;
  padding: 16px 0;
  font-size: 16px;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--grey-1);
}
@media (max-width: 767.98px) {
  .filter-item__title {
    margin-bottom: 12px;
    font-size: 14px;
  }
}*/
.prdctfltr_regular_title::before, .prdctfltr_regular_title::after {
  content: "";
  display: none;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: all var(--anim150);
  transition: all var(--anim150);
  background: var(--grey-1);
}
.prdctfltr_regular_title::before {
  right: 0;
  width: 16px;
  height: 2px;
}
.prdctfltr_regular_title::after {
  right: 7px;
  width: 2px;
  height: 16px;
}
.prdctfltr_regular_title::before, .prdctfltr_regular_title::after {
  display: block;
}
.prdctfltr_rng_price .prdctfltr_regular_title::before, .prdctfltr_rng_price .prdctfltr_regular_title::after{
	display: none !important;
}
.prdctfltr_regular_title.hide + .prdctfltr_add_scroll{display: none;} 

@media (max-width: 900px){
.sidebar-inner .prdctfltr_wc.prdctfltr_wc_regular.prdctfltr_woocommerce.pf_default .prdctfltr_woocommerce_ordering .prdctfltr_filter{
	width: 100% !important;
	}
}


@media (max-width: 767.98px){
	.prdctfltr_wc.prdctfltr_woocommerce {
	margin-top: -24px;
}
}


.prdctfltr_add_scroll{display: none;}
.show ~ .prdctfltr_add_scroll{display: block;}
.prdctfltr_filter_inner .prdctfltr_filter:first-child .prdctfltr_add_scroll{display: block !important}
.prdctfltr_filter_inner .prdctfltr_filter:nth-child(2):not('show') .prdctfltr_add_scroll{display: block;}


.cart-sidebar .btn_bd, .cart-sidebar .btn_bd:hover{background: #fff;}
.cart-sidebar .btn_bd{line-height: 1.3; }
#modal-order .btn{transition: .3s ease}

.portfolio-request-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 16px;
	font-size: 12px;
	line-height: 1.2;
	color: var(--white);
	text-align: center;
	text-transform: uppercase;
	background: var(--maincolor);
}

.portfolio-request-btn:hover{
	color: var(--white);
	background: var(--grey-1);
}

.portfolio-product-btn{
	min-width: 190px;
}

.header-logo{
	max-width: 150px;
}

.header-logo__img{
	display: block;
	width: auto;
	height: 80px;
	max-width: 100%;
	object-fit: contain;
}

@media (max-width: 767.98px){
	.header-logo{
		max-width: 96px;
	}

	.header-logo__img{
		height: 38px;
	}
}

.bst-item__cart.loading:before,
.product-btn.loading:before{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	width: 15px;
	height: 15px;
	border: 4px solid #242424;
	border-radius: 50%;
	border-top-color: transparent;
	animation: rotate 1.5s infinite linear;
	background: none;
}

.product-btn.loading{
	position: relative;
	background: var(--grey-1);
}

@keyframes rotate {
	from{
		rotate: 0deg;
	}
	to{
		rotate: 360deg;
	}
}

/* ================================================
   PAGE HEADER — простой H1 без фона
   ================================================ */

.page-header-inner {
  background: transparent !important;
  min-height: 0 !important;
  padding: 48px 0 !important;
}

@media (max-width: 1023.98px) {
  .page-header-inner {
    padding: 36px 0 !important;
  }
}

@media (max-width: 767.98px) {
  .page-header-inner {
    padding: 24px 0 !important;
  }
}

/* Скрываем фото-баннер в обычных шапках (не _xl) */
.page-header:not(.page-header_xl) .page-header__img {
  display: none !important;
}

/* END PAGE HEADER */

/* ================================================
   ЛЕНДИНГ ДЛЯ ДИЗАЙНЕРОВ — landing-designers.html
   ================================================ */

/* Отступ под фиксированный хедер */
.page-header {
  padding-top: 0;
}

/* Hero — page-header_xl с большой фото */
.page-header_xl {
  padding-top: 116px; /* высота хедера */
}
@media (max-width: 767.98px) {
  .page-header_xl {
    padding-top: 65px;
  }
}
.page-header_xl .page-header-inner {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
@media (max-width: 767.98px) {
  .page-header_xl .page-header-inner {
    min-height: 280px;
  }
}
.page-header_xl .page-header__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.page-header_xl .page-header__title {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 40px 60px;
  font: 400 48px/1.2 var(--second-family);
  color: var(--white);
  background: rgba(0,0,0,.52);
  max-width: 780px;
}
@media (max-width: 1023.98px) {
  .page-header_xl .page-header__title {
    font-size: 36px;
    padding: 32px 40px;
  }
}
@media (max-width: 767.98px) {
  .page-header_xl .page-header__title {
    font-size: 24px;
    padding: 24px 20px;
    max-width: 100%;
  }
}

/* Секции — вертикальные отступы */
.section-about,
.section-ctg,
.section-dlv,
.section-bst,
.section-how {
  padding: 80px 0;
}
@media (max-width: 1023.98px) {
  .section-about,
  .section-ctg,
  .section-dlv,
  .section-bst,
  .section-how {
    padding: 56px 0;
  }
}
@media (max-width: 767.98px) {
  .section-about,
  .section-ctg,
  .section-dlv,
  .section-bst,
  .section-how {
    padding: 40px 0;
  }
}

/* Картинка в секции "О компании" */
.about-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-height: 520px;
}
@media (max-width: 767.98px) {
  .about-img img {
    max-height: 300px;
  }
}

/* Кнопка "посмотреть всё портфолио" */
.designers-portfolio-more {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}
@media (max-width: 767.98px) {
  .designers-portfolio-more {
    margin-top: 32px;
  }
}

/* Секция "Как мы работаем" — шаги */
.designers-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 40px;
  margin-top: 0;
}
@media (max-width: 1023.98px) {
  .designers-steps {
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 32px;
  }
}
@media (max-width: 575.98px) {
  .designers-steps {
    grid-template-columns: 1fr;
    grid-row-gap: 24px;
  }
}

.designers-step {
  border-top: 1px solid var(--grey-2);
  padding-top: 24px;
}

.designers-step__num {
  font: 400 40px/1 var(--second-family);
  color: var(--grey-2);
  margin-bottom: 16px;
}
@media (max-width: 767.98px) {
  .designers-step__num {
    font-size: 32px;
  }
}

.designers-step__title {
  font: 400 18px/1.4 var(--second-family);
  margin-bottom: 12px;
}
@media (max-width: 767.98px) {
  .designers-step__title {
    font-size: 16px;
  }
}

.designers-step__desc {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--grey-1);
}

/* Кнопки в карточках портфолио */
.bst-item-main .btn {
  font-size: 12px;
  height: 36px;
  min-width: auto;
  padding: 0 14px;
  margin-top: 4px;
}

/* Секция callback — чтобы не было двойного padding от section_pb-sm */
.section-callback.section_pb-sm {
  padding-bottom: 0;
}

/* END ЛЕНДИНГ ДЛЯ ДИЗАЙНЕРОВ */

/* ================================================
   ХЕДЕР — тёмная текстура + белый текст
   ================================================ */

/* Светлая мраморно-кремовая шапка (зелёно-золотой стиль Onix) */
.header,
.header-main {
  background: -webkit-gradient(linear, left top, left bottom, from(#fefdfb), to(#f1eee5)) !important;
  background: linear-gradient(180deg, #fefdfb 0%, #f1eee5 100%) !important;
}
.header {
  border-bottom: 1px solid #e9e3d5;
}

/* Текст меню/слоган/телефон — тёмные */
.header-slogan,
.header-phone,
.header-menu li > a,
.header-menu li > span {
  color: #22331e !important;
}
.header-phone { font-weight: 500; }

/* Иконки — тёмные (убираем инверт, что был под чёрный фон) */
.header-search-icon svg path,
.header-cart-icon svg path,
.header-fav-icon svg path {
  fill: #22331e !important;
  stroke: #22331e !important;
}
.header-burger span,
.header-burger::before,
.header-burger::after {
  background: #22331e !important;
}
.header-im-icon img,
.header-phone-icon img {
  -webkit-filter: none;
  filter: none;
}

/* Подчёркивание пунктов — золотое; ховер/активный — зелёный */
.header-menu li > a:after,
.header-menu li > span:after {
  background: #c19a3e !important;
}
.header-menu li.active > a,
.header-menu li:hover > a {
  color: #2f6b3f !important;
}

.header-cart-count,
.header-fav-count {
  background: #2f6b3f !important;
  color: #ffffff !important;
}

.header-main {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Логотип чуть крупнее и заметнее */
.header-logo__img { max-height: 66px; width: auto; }

/* END ХЕДЕР */

.page-header {
  margin-bottom: 0 !important;
}

/* Hero fallback image (если нет видео) */
.main-fallback-img {
  width: 100%;
  height: 380px;
  display: block;
  object-fit: cover;
  object-position: center 40%;
}
@media (max-width: 767px) {
  .main-fallback-img { height: 220px; }
}

/* ================================================
   СТРАНИЦА УСЛУГИ
   ================================================ */

/* ─── Сетка сервисов ─────────────────────────── */
.section-services {
  padding: 60px 0 80px;
}
@media (max-width: 767px) {
  .section-services { padding: 40px 0 60px; }
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 1023px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 575px) {
  .services-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* Пятая карточка — по центру если нечётный ряд */
.services-grid .service-card:last-child:nth-child(3n - 1) {
  grid-column: 2 / 3;
}
@media (max-width: 1023px) {
  .services-grid .service-card:last-child:nth-child(odd):nth-child(n + 3) {
    grid-column: 1 / -1;
    max-width: 50%;
    justify-self: center;
  }
}

.service-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid #e8e8e8;
  transition: box-shadow .2s, border-color .2s;
}
.service-card:hover {
  box-shadow: 0 4px 24px rgba(0,0,0,.10);
  border-color: #ccc;
}

.service-card__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.service-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.service-card:hover .service-card__img img {
  transform: scale(1.04);
}

.service-card__body {
  padding: 20px 20px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.service-card__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--maincolor);
  line-height: 1.3;
}
.service-card__desc {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin: 0;
}

/* ─── Шаги ───────────────────────────────────── */
.section-steps {
  background: #f6f6f4;
  padding: 60px 0 80px;
}
@media (max-width: 767px) {
  .section-steps { padding: 40px 0 60px; }
}

.usluga-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
@media (max-width: 767px) {
  .usluga-steps { flex-direction: column; gap: 32px; }
}

.usluga-step {
  flex: 1;
  padding: 0 32px;
  text-align: center;
}
@media (max-width: 767px) {
  .usluga-step { padding: 0; text-align: left; }
}

.usluga-step__num {
  font-size: 48px;
  font-weight: 700;
  color: #e0e0e0;
  line-height: 1;
  margin-bottom: 12px;
}
.usluga-step__title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--maincolor);
}
.usluga-step__desc {
  font-size: 15px;
  line-height: 1.65;
  color: #555;
  margin: 0;
}

.usluga-step__arrow {
  flex: 0 0 auto;
  font-size: 28px;
  color: #ccc;
  align-self: center;
  padding-top: 0;
  padding-bottom: 24px;
}
@media (max-width: 767px) {
  .usluga-step__arrow { display: none; }
}

/* ─── Навигация на лендинги ──────────────────── */
.section-audience {
  background: #1c1c1c;
  padding: 60px 0 80px;
}
@media (max-width: 767px) {
  .section-audience { padding: 40px 0 60px; }
}
.section-audience .section-header {
  border-bottom-color: rgba(255,255,255,.15);
}

.audience-section__sub {
  color: rgba(255,255,255,.5);
  font-size: 15px;
  margin: -8px 0 0;
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 767px) {
  .audience-grid { grid-template-columns: 1fr; gap: 16px; }
}

.audience-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 32px 36px;
  border: 1px solid rgba(255,255,255,.12);
  text-decoration: none;
  color: #fff;
  transition: background .2s, border-color .2s;
}
.audience-card:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.3);
}
@media (max-width: 575px) {
  .audience-card { padding: 24px 20px; }
}

.audience-card__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.4);
}
.audience-card__title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
}
@media (max-width: 575px) {
  .audience-card__title { font-size: 18px; }
}
.audience-card__desc {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,.6);
  margin: 0;
  flex: 1;
}
.audience-card__cta {
  font-size: 14px;
  color: rgba(255,255,255,.5);
  margin-top: 6px;
  transition: color .2s;
}
.audience-card:hover .audience-card__cta {
  color: #fff;
}

/* END СТРАНИЦА УСЛУГИ */

/* FOOTER — копирайт первой строкой, остальное второй (desktop) */
@media (min-width: 768px) {
  .footer-bottom {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .footer-copyright {
    -ms-flex: 0 0 100%;
        flex: 0 0 100%;
    margin-bottom: 12px;
  }
}

/* Мобильное выдвижное меню: фон белый (десктопный хедер чёрный → меню там белое),
   поэтому на мобиле возвращаем тексту чёрный цвет */
@media (max-width: 767.98px) {
  .header-nav .header-menu li > a,
  .header-nav .header-menu li > span {
    color: var(--maincolor) !important;
  }
  .header-nav .header-menu li > a:after,
  .header-nav .header-menu li > span:after {
    background: var(--maincolor) !important;
  }
}

/* ===== Мега-меню «Портфолио»: материал -> тип изделия ===== */
.portfolio-drop, .portfolio-types { list-style: none; }
.portfolio-caret {
  display: inline-block;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  -webkit-transform: rotate(45deg); transform: rotate(45deg);
  margin-left: 7px; -ms-flex: none; flex: none;
  -webkit-transition: -webkit-transform .2s; transition: transform .2s;
}

/* --- Десктоп: каскадная выпадашка по наведению --- */
@media (min-width: 768px) {
  .portfolio-nav { position: relative; }
  .portfolio-drop {
    position: absolute; top: 100%; left: 0; z-index: 999;
    min-width: 340px; margin: 0; padding: 8px 0;
    background: #fff; border-radius: 4px;
    -webkit-box-shadow: 0 12px 32px rgba(0,0,0,.16); box-shadow: 0 12px 32px rgba(0,0,0,.16);
    opacity: 0; visibility: hidden; -webkit-transform: translateY(6px); transform: translateY(6px);
    -webkit-transition: opacity .2s, visibility .2s, -webkit-transform .2s;
    transition: opacity .2s, visibility .2s, transform .2s;
  }
  .portfolio-nav:hover > .portfolio-drop { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); }
  .portfolio-drop > li { position: relative; display: block; padding: 0; }
  .portfolio-mat__link {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
    padding: 9px 16px; white-space: nowrap; text-transform: none; letter-spacing: 0; font-size: 14px;
  }
  .portfolio-drop > li:hover > .portfolio-mat__link { background: #f5f6f8; }
  .portfolio-types {
    position: absolute; top: -8px; left: 100%; z-index: 1000;
    min-width: 300px; margin: 0; padding: 8px 0;
    background: #fff; border-radius: 4px;
    -webkit-box-shadow: 0 12px 32px rgba(0,0,0,.16); box-shadow: 0 12px 32px rgba(0,0,0,.16);
    opacity: 0; visibility: hidden; -webkit-transform: translateX(6px); transform: translateX(6px);
    -webkit-transition: opacity .2s, visibility .2s, -webkit-transform .2s;
    transition: opacity .2s, visibility .2s, transform .2s;
  }
  .portfolio-mat.has-types:hover > .portfolio-types { opacity: 1; visibility: visible; -webkit-transform: translateX(0); transform: translateX(0); }
  .portfolio-types > li { display: block; }
  .portfolio-types a { display: block; padding: 7px 16px; white-space: nowrap; text-transform: none; letter-spacing: 0; font-size: 13px; }
  .portfolio-types a:hover { background: #f5f6f8; }
  /* текст в белых панелях — чёрный (перебиваем белый цвет меню чёрного хедера) */
  .header-menu .portfolio-drop a,
  .header-menu .portfolio-types a { color: var(--maincolor) !important; }
  .header-menu .portfolio-drop a:after,
  .header-menu .portfolio-types a:after { display: none !important; }
  .portfolio-mat__link .portfolio-caret { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
}

/* --- Мобайл: аккордеон внутри выдвижного меню --- */
@media (max-width: 767.98px) {
  .portfolio-nav__top, .portfolio-mat__link {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
  }
  .portfolio-drop, .portfolio-types {
    margin: 0; padding: 0; overflow: hidden; max-height: 0;
    -webkit-transition: max-height .3s ease; transition: max-height .3s ease;
  }
  .portfolio-nav.open > .portfolio-drop { max-height: 2200px; }
  .portfolio-mat.open > .portfolio-types { max-height: 1600px; }
  .portfolio-drop { padding-left: 12px; }
  .portfolio-types { padding-left: 16px; }
  .portfolio-nav.open > .portfolio-nav__top .portfolio-caret,
  .portfolio-mat.open > .portfolio-mat__link .portfolio-caret {
    -webkit-transform: rotate(-135deg); transform: rotate(-135deg);
  }
}

/* ===== Hero на главной: одна картинка клиента («onix banner 2-1», 1920x400) ===== */
/* aspect-ratio не сочетаем с min-height: браузер переносит min-height в min-width и блок раздувается вширь */
.hero-banner {
  position: relative; border-radius: 8px; overflow: hidden; line-height: 0;
  width: 100%; height: 280px;
}
@media (min-width: 1440px) {
  .hero-banner { height: auto; aspect-ratio: 1920 / 400; }
}
@media (max-width: 767.98px) {
  .hero-banner { height: 300px; border-radius: 6px; }
}
.hero-banner img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;
  -o-object-fit: cover; object-fit: cover;
  -o-object-position: 50% 50%; object-position: 50% 50%;
}
.hero-banner .hero-overlay { line-height: normal; }
/* кнопка поверх фото — белая, чтобы читалась */
.hero-overlay .main-item__btn { color: #fff; border-color: #fff; }
.hero-overlay .main-item__btn:hover { background: #fff; color: #22331e; }
.hero-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 6;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  text-align: center; grid-row-gap: 24px; padding: 24px;
  pointer-events: none;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(20,20,20,.28)), color-stop(45%, rgba(20,20,20,.12)), to(rgba(20,20,20,.55)));
  background: linear-gradient(180deg, rgba(20,20,20,.28) 0%, rgba(20,20,20,.12) 45%, rgba(20,20,20,.55) 100%);
}
.hero-overlay .main-item__title {
  color: #fff; max-width: 900px; margin: 0;
  font-size: 40px; line-height: 1.2; font-weight: 500;
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.hero-overlay .btn { pointer-events: auto; }
@media (max-width: 1023.98px) {
  .hero-overlay .main-item__title { font-size: 30px; }
}
@media (max-width: 767.98px) {
  .hero-overlay { grid-row-gap: 16px; padding: 16px; }
  .hero-overlay .main-item__title { font-size: 22px; }
}

/* ===== Баннер в шапке (фон от дизайнера, «onix banner 2») ===== */
.header-banner { display: block; width: 100%; line-height: 0; border-radius: 0 0 6px 6px; overflow: hidden; }
.header-banner img { width: 100%; height: auto; display: block; }
/* брендинг теперь в баннере — прячем старый логотип/слоган в строке меню */
.header-main .header-logo,
.header-main .header-slogan { display: none !important; }
.header-main { padding-top: 6px !important; padding-bottom: 6px !important; }
/* справа в строке меню абсолютно стоят мессенджеры+телефон+поиск (~250px) — резервируем место, чтобы меню не наезжало */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .header-nav { padding-right: 260px; }
}
@media (min-width: 1280px) {
  .header-nav { padding-left: 260px; padding-right: 260px; }
}
/* планшет: меню и контакты в одну строку. Номер текстом не влезает — вместо него иконка телефона
   (по тапу окно «Свяжитесь с нами»: позвонить / WhatsApp / Telegram). Под иконки резервируем место справа. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .header-nav { padding-right: 175px; }
  .header-main .header-phone { display: none !important; }
  .header-main .header-phone-icon { display: block; }
  .header-menu li > a,
  .header-menu li > span { white-space: nowrap; letter-spacing: 0.01em; font-size: 13px; }
}

/* ===== Главная: правки по тесту на планшете/мобиле ===== */
/* нижний отступ hero был под пагинацию слайдера — слайдера больше нет, отступ давал пустую дыру над категориями */
.main { padding-bottom: 0 !important; }

/* категории: на планшете все 5 в один ряд (иначе пятая падала одна на вторую строку) */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .section-ctg .ctg-items { gap: 16px; -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
  .section-ctg .ctg-item { width: calc((100% - 64px) / 5); max-width: 170px; }
  .section-ctg .ctg-item-head { width: 100%; max-width: 140px; height: auto; aspect-ratio: 1 / 1; }
  .section-ctg .ctg-item__title { font-size: 14px; }
}

/* кнопка «наверх»: аккуратный круг с тенью вместо белого квадрата, который «стирал» текст под собой */
.scroll-top-btn {
  border-radius: 50%;
  background-color: rgba(255,255,255,.92);
  -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.15); box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
@media (max-width: 767.98px) {
  .scroll-top-btn { right: 12px; width: 36px; height: 36px; background-size: 20px 20px; }
}

/* липкая шапка при прокрутке: сворачиваем баннер, меню оставляем (тема по умолчанию прятала меню, а баннер оставался) */
.header .header-banner {
  max-height: 600px; opacity: 1;
  -webkit-transition: max-height .35s ease, opacity .25s ease; transition: max-height .35s ease, opacity .25s ease;
}
.header.scrollDown .header-banner { max-height: 0; opacity: 0; }
.header.scrollDown .header-nav { visibility: visible !important; opacity: 1 !important; margin-top: 0 !important; }
/* меню в свёрнутой шапке теперь видно — бургер на планшете/десктопе при скролле не нужен (на мобиле остаётся) */
@media (min-width: 768px) {
  .header.scrollDown .header-burger { visibility: hidden !important; opacity: 0 !important; }
}

/* мобила: строка бургер/поиск/контакты была 12px, а иконки (absolute) висели ниже и наезжали на hero */
@media (max-width: 767.98px) {
  .header-main { position: relative; min-height: 48px; }
  .header-main .header-burger,
  .header-main .header-group { top: 8px !important; }
  .header-main .header-search-icon--mobile { top: 14px !important; }
  /* выдвижное меню — сразу под реальной высотой шапки (баннер + строка), а не с жёстких 65px */
  .header-nav {
    top: var(--hdr-h, 65px) !important;
    height: calc(100vh - var(--hdr-h, 65px)) !important;
    height: calc(100dvh - var(--hdr-h, 65px)) !important;
  }
}

/* баннер шапки ниже (просьба клиента — «в 2 раза»): та же картинка, обрезка сверху/снизу поровну, центр по вертикали.
   Логотип (дуга + бриллиант + «Onix» + черта) занимает y 85–266 из 350 = 181px — ровно в половину (175px) не влезает,
   поэтому окно 200px (y 75–275): логотип целиком с полями ~10px, баннер ниже в 1,75 раза.
   На мобиле не режем: баннер там и так ~60px, меньше логотип перестаёт читаться. */
@media (min-width: 768px) {
  .header-banner { position: relative; aspect-ratio: 1920 / 200; }
  .header-banner img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    -o-object-fit: cover; object-fit: cover;
    -o-object-position: 50% 50%; object-position: 50% 50%;
  }
}

/* ===== Hero: картинка клиента без обрезки (contain), по центру, вокруг поля; hero выше ===== */
.hero-banner.hero-banner--framed { background: #f1eee5; height: 560px; aspect-ratio: auto; }
@media (min-width: 1440px) {
  .hero-banner.hero-banner--framed { height: 620px; aspect-ratio: auto; }
}
@media (max-width: 1023.98px) {
  .hero-banner.hero-banner--framed { height: 440px; }
}
@media (max-width: 767.98px) {
  /* на мобиле картинка занимает всю ширину — полей нет, высота по пропорции 4:3 */
  .hero-banner.hero-banner--framed { height: auto; aspect-ratio: 1024 / 768; }
}
.hero-banner--framed img { -o-object-fit: contain; object-fit: contain; -o-object-position: 50% 50%; object-position: 50% 50%; }

/* заголовок и кнопка — под картинкой (поверх закрывали бы логотип клиента) */
.hero-caption {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  text-align: center; grid-row-gap: 20px; gap: 20px; padding-top: 28px;
}
.hero-caption .main-item__title { margin: 0; max-width: 900px; color: #22331e; font-size: 36px; line-height: 1.2; font-weight: 500; }
@media (max-width: 1023.98px) {
  .hero-caption .main-item__title { font-size: 28px; }
}
@media (max-width: 767.98px) {
  .hero-caption { gap: 14px; grid-row-gap: 14px; padding-top: 18px; }
  .hero-caption .main-item__title { font-size: 22px; }
}

/* мобильная шапка: рядом с телефоном — WhatsApp и Telegram (на мобиле тема их прятала) */
@media (max-width: 767.98px) {
  .header-main .header-im-icon { display: block; margin-right: 0; }
}

/* Hero, просьба клиента: на планшете/десктопе картинка растянута на весь блок (без полей), обрезка сверху/снизу.
   Логотип на картинке — y 138–460 из 768; привязка 30% по вертикали держит его в кадре на 1440/1024/768. Мобила — как было. */
@media (min-width: 768px) {
  .hero-banner--framed img {
    -o-object-fit: cover; object-fit: cover;
    -o-object-position: 50% 30%; object-position: 50% 30%;
  }
}

/* Hero, десктоп: заголовок и кнопка поверх низа картинки, под ними аккуратный градиент чёрный → прозрачный.
   Логотип на картинке заканчивается ~на 80% высоты блока — верхняя четверть градиента прозрачная, «Оникс» не темнеет. */
@media (min-width: 1024px) {
  .hero-wrap { position: relative; }
  .hero-wrap .hero-caption {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 64px 32px 30px; gap: 14px; grid-row-gap: 14px;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.4) 42%, rgba(0,0,0,0) 78%);
    pointer-events: none;
  }
  .hero-wrap .hero-caption .main-item__title {
    color: #fff; font-size: 30px; max-width: 1200px;
    text-shadow: 0 2px 14px rgba(0,0,0,.45);
  }
  .hero-wrap .hero-caption .main-item__btn {
    pointer-events: auto; color: #fff; border-color: rgba(255,255,255,.85);
  }
  .hero-wrap .hero-caption .main-item__btn:hover { background: #fff; color: #22331e; border-color: #fff; }
}
/* десктоп: кадр чуть ниже по картинке (40%), чтобы логотип поднялся и надпись внизу не заходила на круг */
@media (min-width: 1024px) {
  .hero-wrap .hero-banner--framed img { -o-object-position: 50% 40%; object-position: 50% 40%; }
  .hero-wrap .hero-caption { padding-bottom: 26px; }
}
/* узкий десктоп: заголовок в одну строку, чтобы не упираться в круг логотипа */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .hero-wrap .hero-caption .main-item__title { font-size: 24px; }
}
/* от 1280 hero выше (620px, как на 1440): на широком экране картинка сильно увеличена и надписи не хватало места под логотипом */
@media (min-width: 1280px) {
  .hero-banner.hero-banner--framed { height: 620px; }
}

/* Hero, десктоп: надпись и кнопка по центру по вертикали (просьба клиента).
   Логотип на картинке тоже по центру — поэтому вместо нижнего градиента мягкое затемнение к центру, чтобы белый текст читался. */
@media (min-width: 1024px) {
  .hero-wrap .hero-caption {
    top: 0; bottom: 0;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    padding: 32px;
    border-radius: 8px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.5) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,.08) 80%);
  }
  .hero-wrap .hero-caption .main-item__title { text-shadow: 0 2px 16px rgba(0,0,0,.6); }
}

/* Hero, десктоп: надпись и кнопка СВЕРХУ (просьба клиента), под ними градиент чёрный → прозрачный сверху вниз.
   Кадр сдвинут к верху картинки, чтобы логотип опустился и освободил место под надпись (логотип: y 138–460 из 768). */
@media (min-width: 1024px) {
  .hero-wrap .hero-caption {
    top: 0; bottom: auto;
    -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;
    padding: 22px 32px 60px; gap: 12px; grid-row-gap: 12px;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,.4) 42%, rgba(0,0,0,0) 80%);
  }
  .hero-wrap .hero-caption .main-item__title { text-shadow: 0 2px 14px rgba(0,0,0,.45); }
  .hero-wrap .hero-banner--framed img { -o-object-position: 50% 0%; object-position: 50% 0%; }
}
@media (min-width: 1280px) {
  .hero-wrap .hero-banner--framed img { -o-object-position: 50% 6%; object-position: 50% 6%; }
}

/* Hero, десктоп, надпись сверху: компактнее блок (отступ, кнопка 44px), чтобы кнопка не упиралась в логотип;
   hero 620px уже с 1200 (иначе на 1200–1279 логотип почти касался низа); на ≥1280 кадр 4% — логотип ниже кнопки и не срезан снизу. */
@media (min-width: 1024px) {
  .hero-wrap .hero-caption { padding-top: 16px; gap: 10px; grid-row-gap: 10px; }
  .hero-wrap .hero-caption .main-item__btn { height: 44px; font-size: 14px; padding: 0 18px; }
}
@media (min-width: 1200px) {
  .hero-banner.hero-banner--framed { height: 620px; }
}
@media (min-width: 1280px) {
  .hero-wrap .hero-banner--framed img { -o-object-position: 50% 4%; object-position: 50% 4%; }
}

/* Hero, десктоп, надпись сверху: отодвигаем от верхнего края (было «прилипло»).
   Чтобы кнопка при этом не упёрлась в логотип: кадр прижат к верху картинки (0%) на всём десктопе,
   hero от 1200 — 650px (логотип не срезается снизу), на 1024–1199 заголовок/кнопка чуть компактнее. */
@media (min-width: 1024px) {
  .hero-wrap .hero-caption { padding-top: 32px; }
  .hero-wrap .hero-banner--framed img { -o-object-position: 50% 0%; object-position: 50% 0%; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .hero-wrap .hero-caption { padding-top: 28px; gap: 8px; grid-row-gap: 8px; }
  .hero-wrap .hero-caption .main-item__title { font-size: 22px; }
  .hero-wrap .hero-caption .main-item__btn { height: 40px; font-size: 13px; }
}
@media (min-width: 1200px) {
  .hero-banner.hero-banner--framed { height: 650px; }
}

/* Hero, десктоп: надпись ещё чуть ниже. Предел — логотип под ней, поэтому сдвиг зависит от ширины
   (на широких больше запаса; на 1024 запаса нет — отступ растёт плавно вместе с шириной окна). */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .hero-wrap .hero-caption { padding-top: calc(28px + (100vw - 1024px) * 0.1); }
}
@media (min-width: 1200px) { .hero-wrap .hero-caption { padding-top: 42px; } }
@media (min-width: 1280px) { .hero-wrap .hero-caption { padding-top: 44px; } }
@media (min-width: 1440px) { .hero-wrap .hero-caption { padding-top: 50px; } }