.menu-catalog__wrapper .menu-catalog__block {
    width: 25%;
}
.menu-catalog__wrapper {
    width: 100%;
}
.sales-item{background: rgb(197 213 214);}
.sales-item__img img:last-child {    border: 10px solid rgb(197 213 214);}

.examples .catalog-item__top{text-align: center;}
.catalog-btn{cursor: pointer;}
.maxw .btn{  height: 87px;}
.page-wrapper{min-height: auto;}
.main-catalog {
        padding-bottom: 0px;
    }
    
.article-content.index h1{
    color: #202020;
    font-size: 64px;
    font-weight: 400;
    line-height: 90%;
    margin-bottom: 30px;
}
.contact-title{padding-left: 85px;}
.article-content.index h3{
	margin-bottom: 40px;
	color: #000;
    font-size: 36px;
    font-weight: 400;
    line-height: 80%;
}
.load_img{
	background: url(./img/load.gif) #010709 center center no-repeat;
	height: 100%;
	position: fixed;
	width: 100%;
	top: 0px;
	display: none;
	left: 0;
	opacity: 0.2;
	z-index: 1000;
}
.catalog-item__top{min-height: 174px;}

.erv{text-decoration: none;}
a .rev-rating{color: #000}

.bor .catalog-item {
    padding-bottom: 17px;
    border: 1px solid #e6eded;
    border-radius: 36px;
}
.bor .catalog-item__btn{
    right: -5px;
    bottom: -25px;
}
.examples {
    padding-bottom: 0;
}
.examples-left{
	top: 294px;
}

.materials h2{
color: #202020;
font-size: 64px;
font-style: normal;
font-weight: 400;
line-height: 90%;
}
.materials p{
color: #202020;
font-size: 20px;
font-weight: 400;
line-height: 120%;
margin-top: 30px;
}

.steps-title.title.white{    padding-left: 0;}
.menu-catalog{top: 78px;}
.catalog-list.row .col{padding: 0 3px;}
            .about-center::before {
               max-width: 100%;
            }
            


.header-nav ul li span {
color: #377172;
font-size: 18px;
font-weight: 400;
line-height: 90%;
text-transform: uppercase;
-webkit-transition: all 0.4s;
transition: all 0.4s;
text-decoration: none;
outline: none;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}


/*@media (min-width: 1730px) {
	.main-bg {
        top: auto;
        bottom: 186px;
    }
    .main-img{top: -59px;}
}*/

	.sitemap-wrapper {
  max-width: 800px;
  margin: 20px auto 40px auto;
  padding: 24px 32px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.05);
}
.sitemap-wrapper h1 {
  margin-top: 0;
  margin-bottom: 32px;
  font-size: 2rem;
  font-weight: 700;
  color: #1a2635;
  letter-spacing: 0.03em;
}
.sitemap-wrapper ul {
  padding-left: 22px;
  margin-bottom: 0;
  list-style: none;
}
.sitemap-wrapper ul ul {
  margin-top: 23px;
  margin-bottom: 4px;
}
.sitemap-wrapper li {
  margin-bottom: 7px;
  position: relative;
}
.sitemap-wrapper li::before {
  content: "⟶";
  color: #00b6c9;
  margin-right: 7px;
  font-size: 0.95em;
  opacity: .65;
}
.sitemap-wrapper a {
text-decoration: none;
color: #253858;
font-size: 16px;
transition: color .2s;
padding: 0;
}
.sitemap-wrapper a:hover {
  background: #e7fafe;
  color: #009ab3;
}
.none{display:none} /* class="none" */
.none_w1{width:100%; height:596px; background:#eee; position:relative;}
.none_w2{text-align:center; padding-top:250px; color:#888;}
.none_background{width: 100%; height: 596px; background: #eee;}
.pad273{padding-top: 273px;}
.backgroundF29D61{background: #F29D61;}


@media (min-width: 2120px){
	.index.z5{    z-index: 4;}
}

/* grass.png: 1920x703, линия травы на 31.3% высоты. Картинка тянется по
   ширине окна (min-width: 100%), поэтому её высота растёт вместе с экраном,
   и фиксированный bottom перестаёт работать: трава уезжает вверх, а под
   первым экраном остаётся пустая полоса.
   Считаем смещение от ширины: bottom = 33px - 0.687 * 0.3661 * 100vw,
   чтобы линия травы всегда шла на 33px выше низа .main — ровно так, как
   задумано базовым правилом -450px при ширине 1920.
   Заменяет лестницу из шести правил на 1930/2120/2300/2470/2500/2620,
   где значения к тому же спорили друг с другом. */
@media (min-width: 1920px) {
	.main-grass { bottom: calc(33px - 25.15vw); }
}

/* bg-main-2.png: 1920x1046, горизонт на 54.4% высоты, зелень до 96.4%.
   Картинка тянется по ширине окна, поэтому её высота растёт вместе с экраном.
   Было bottom: 163px — фиксированное значение, из-за которого на широких
   экранах поле обрывалось на 163px выше низа .main, и под первым экраном
   оставалась пустая полоса (на 2000px это 243px пустоты до заголовка
   «Примеры наших работ»).
   Считаем от ширины так, чтобы зелень всегда заканчивалась на 8px выше низа
   .main — ровно как это делает базовое правило top: 0 при ширине 1920.
   Проверка: при 1920px calc даёт -29.7px, базовое правило -30px. */
@media (min-width: 1920px) {
	.main-bg {
		top: auto;
		bottom: calc(8px - 1.9613vw);
	}
}



@media (max-width: 980px){
	.examples .catalog-item__img{height: 150px;}
	.maxw .btn{  height: 52px;}
	.mob_hide{display: none;}
}
@media (max-width: 830px){
	.menu-catalog__wrapper .menu-catalog__block {
	    width: 50%;
	}
}
@media (max-width: 768px){
	.menu-catalog__wrapper .menu-catalog__block {
	    width: 50%;
	}
}

@media (max-width: 576px){
	.menu-catalog__wrapper .menu-catalog__block {
	    width: 100%;
	}
}
.menu-catalog__item img{max-height: 110px;}
/* ---- Блок частых вопросов (снипет faq_block) ---- */
.faq {
  padding: 40px 0 10px;
}
.faq-title {
  color: #202020;
  font-size: 60px;
  font-weight: 400;
  line-height: 90%;
  letter-spacing: 4px;
  text-transform: uppercase;
  padding-left: 11px;
  position: relative;
  text-indent: 66px;
  padding-top: 57px;
}
.faq-list {
  max-width: 900px;
}
.faq-item {
  border-bottom: 1px solid rgba(32, 68, 69, 0.18);
  padding: 16px 0;
}
.faq-item__q {
  font-size: 20px;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 40px;
}
.faq-item__q::-webkit-details-marker {
  display: none;
}
.faq-item__q::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: -2px;
  font-size: 26px;
  line-height: 1;
  color: #204445;
  transition: transform 0.2s;
}
.faq-item[open] .faq-item__q::after {
  content: "\2212";
}
.faq-item__a {
  padding-top: 12px;
  font-size: 17px;
  line-height: 1.5;
  color: #333;
  max-width: 760px;
}
@media (max-width: 768px) {
  .faq { padding: 24px 0 4px; }
  .faq-title {
    font-size: 32px;
    letter-spacing: 3.2px;
    padding-left: 0;
    text-indent: 55px;
    padding-top: 30px;
  }
  .faq-item__q { font-size: 17px; padding-right: 32px; }
  .faq-item__a { font-size: 15px; }
}

/* На <=992 .menu-catalog это полноэкранная панель (top: 0), стрелка-указатель
   пункта меню там смысла не имеет. */
@media (max-width: 992px) {
    .menu-catalog::after { display: none; }
}

/* =========================================================================
   Блок «команда» (.about-team) на планшетах и мобильных.

   Что было не так:
   1. У .about-team__item-img задана только width:100%, без height:auto.
      В разметке у <img> стоят width="262" height="321", поэтому на любой
      ширине, где карточка уже 262px, картинка сжималась по горизонтали,
      а высота оставалась 321px — лица растягивались по вертикали.
   2. На <=992px пять карточек делят ширину экрана: на 375px это ~68px
      на карточку, подпись 11px, а описание вообще скрыто
      (.about-team__item-text span { display: none }) — у Сергея и Ларисы
      весь текст лежит в span, так что под фото не оставалось ничего.

   Что сделано:
   — пропорции фото восстановлены (height:auto + aspect-ratio);
   — на <=992px ряд превращён в горизонтальную ленту со scroll-snap:
     следующая карточка подглядывает справа, описание вернули на место.
   ========================================================================= */

/* Пропорции фото — на всех разрешениях, где карточка уже 262px. */
.about-team__item-img {
    height: auto;
    aspect-ratio: 262 / 321;
    object-fit: cover;
}

@media (max-width: 992px) {
    .about-team {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding-bottom: 4px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .about-team::-webkit-scrollbar {
        display: none;
    }

    .about-team__block {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 280px;
        flex: 0 0 280px;
        width: 280px;
        max-width: 280px;
        margin-top: 0;
        padding: 0;
        scroll-snap-align: start;
    }
    .about-team__block + .about-team__block {
        margin-left: 12px;
    }

    /* У .about-team__item-top уже есть overflow:hidden (класс .overflow),
       поэтому скругление вешаем на него — плашку с именем оно обрежет само. */
    .about-team__item-top {
        border-radius: 12px 28px 0 12px;
        padding-bottom: 0;
    }
    .about-team__item-img {
        border-radius: 0;
    }
    .about-team__item-job {
        height: 34px;
        font-size: 17px;
        line-height: 120%;
        border-radius: 0;
    }
    .about-team__item-text {
        margin-top: 10px;
        padding: 0;
        font-size: 13px;
        line-height: 135%;
        text-align: left;
    }
    .about-team__item-text span {
        display: inline;
    }
}

/* <=576px .container становится 100% с padding 0 20px — растягиваем ленту
   на всю ширину экрана, вернув поля падингом, чтобы крайние карточки
   не липли к краям. */
@media (max-width: 576px) {
    .about-team {
        margin: 0 -20px;
        padding: 0 20px 4px;
        scroll-padding-left: 20px;
    }
    .about-team__block {
        -ms-flex: 0 0 62%;
        flex: 0 0 62%;
        width: 62%;
        max-width: 62%;
    }
}

.mb-30{margin-bottom: 30px;}

/* Articles listing pagination */
.articles-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 40px 0 0;
}

.articles-pagination__link,
.article-content .articles-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    padding: 8px 13px;
    border: 1px solid rgba(32, 68, 69, 0.35);
    border-radius: 10px;
    color: #204445;
    background: #fff;
    font-size: 17px;
    line-height: 1;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.articles-pagination__link:hover,
.article-content .articles-pagination__link:hover {
    color: #fff;
    background: #2d6263;
    border-color: #2d6263;
}

.articles-pagination__link.is-current,
.article-content .articles-pagination__link.is-current {
    color: #fff;
    background: #204445;
    border-color: #204445;
    cursor: default;
}

.articles-pagination__link--arrow,
.article-content .articles-pagination__link--arrow {
    padding-right: 17px;
    padding-left: 17px;
}

.articles-pagination__dots {
    min-width: 28px;
    color: #204445;
    text-align: center;
}

@media (max-width: 576px) {
    .articles-pagination {
        gap: 6px;
        margin-top: 30px;
    }

    .articles-pagination__link,
    .article-content .articles-pagination__link {
        min-width: 40px;
        min-height: 40px;
        padding: 7px 11px;
        font-size: 16px;
    }
}

/* Contacts page responsive layout */
.contact-article-wrapper {
    box-sizing: border-box;
    width: 100%;
    max-width: 980px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 30px;
}

.contact-article-wrapper .article-content {
    line-height: 1.5;
}

@media (max-width: 992px) {
    .page-contact__top .contact-title.pad273 {
        height: auto;
        min-height: 0;
        padding-top: 0 !important;
    }

    .page-contact__top .contact-bottom {
        overflow: visible;
    }

    .page-contact__top .contact-tour,
    .page-contact__top .contact-map {
        height: 280px;
    }

    .page-contact__top .contact-map {
        margin-top: 14px;
        border-radius: 30px;
    }

    .page-contact__top .contact-tour {
        border-radius: 30px;
    }

    .page-contact__top .contact-tour > div,
    .page-contact__top .contact-tour iframe,
    .page-contact__top .contact-map iframe {
        display: block;
        width: 100% !important;
        height: 100% !important;
    }

    .page-contact__img,
    .page-contact__left,
    .page-contact__right,
    .page-contact__leaves {
        display: none !important;
    }

    .contact-article-wrapper + .address {
        margin-top: 40px;
    }
}

@media (max-width: 767px) {
    .page-contact__top {
        padding-top: 24px;
        border-radius: 48px 48px 0 0;
    }

    .page-contact__top .contact-top {
        align-items: flex-start;
        padding: 0;
    }

    .page-contact__top h1.contact-title.pad273 {
        width: 100%;
        margin: 0 0 18px;
        font-size: 36px;
        line-height: 1.1;
    }

    .page-contact__top h1.contact-title.pad273 span {
        font-size: 40px;
        line-height: 1.1;
    }

    .page-contact__top .contact-title:not(.pad273) {
        margin-top: 0;
    }

    .page-contact__top .contact-img {
        display: none;
    }

    .page-contact__top .contact-text {
        box-sizing: border-box;
        width: 100%;
        margin-top: 20px;
        padding: 20px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.08);
    }

    .page-contact__top .contact-text__top {
        font-size: 24px;
        line-height: 1.2;
    }

    .page-contact__top .contact-text__center {
        margin: 10px 0 14px;
        font-size: 18px;
        line-height: 1.35;
    }

    .page-contact__top .contact-text__flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 14px;
        margin-right: 0;
    }

    .page-contact__top .contact-text__bottom {
        width: auto;
        font-size: 16px;
        line-height: 1.35;
    }

    .page-contact__top .contact-bottom {
        width: calc(100% - 40px);
        margin-top: 24px;
    }

    .page-contact__top .contact-tour,
    .page-contact__top .contact-map {
        height: 250px;
        border-radius: 24px;
    }

    .page-contact {
        overflow: hidden;
        padding: 42px 0 64px;
    }

    .page-contact .page-contact__list {
        gap: 12px;
        margin: 0;
    }

    .page-contact .page-contact__block {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .page-contact .page-contact__item {
        padding: 20px;
        border-radius: 24px;
    }

    .page-contact .page-contact__item-icon {
        margin-bottom: 12px;
        width: 40px;
        height: 40px;
    }

    .page-contact .page-contact__item-text {
        font-size: 18px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .page-contact .page-contact__item-text.contact-phone {
        font-size: 26px;
        line-height: 1.2;
    }

    .contact-article-wrapper {
        max-width: none;
        padding: 0 20px;
    }

    .contact-article-wrapper .article-content {
        margin-top: 0;
        font-size: 17px;
        line-height: 1.55;
    }

    .contact-article-wrapper .article-content h2 {
        margin-top: 28px;
        font-size: 27px;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .contact-article-wrapper .article-content p,
    .contact-article-wrapper .article-content li {
        line-height: 1.55;
    }

    .contact-article-wrapper + .address {
        margin-top: 36px;
    }

    .contact-article-wrapper + .address .address-map,
    .contact-article-wrapper + .address .address-map__content {
        height: 250px;
    }
}