/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

.header{
    background-image: url('/images/header-background-alt.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top; 
    height: 100vh;
    overflow: hidden;
}
.header__line{
    padding-top: var(--space-12);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.header__logo{
    -ms-flex-negative: 0;
        flex-shrink: 0;
}
.header__menu-list{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-column-gap: var(--space-12);
       -moz-column-gap: var(--space-12);
            column-gap: var(--space-12);
}
.header__menu-link, .header__phone{
    color: var(--color-white);
    font-size: var(--text-ui);
}
.menu__header {
    position: relative;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: var(--space-12) var(--space-8) 0;
    margin-bottom: var(--space-12);
}
.header__down{
    margin-top: 15vh;
    margin-bottom: 15vh;
}
.header__title{
    padding-bottom: var(--space-4);
    color:var(--color-white);
    font-size: var(--text-hero);
    font-weight: 700;
}
.header__slogan{
    padding-bottom: var(--space-8);
    color:var(--color-white);
    font-size: var(--text-slogan);
    font-weight: 600;
    line-height: 1;
}
.header__subtitle{
    padding-bottom: var(--space-10);
    color: var(--color-white);
    font-weight: 400;
}
.about{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: var(--space-32);
    -webkit-column-gap: var(--space-16);
       -moz-column-gap: var(--space-16);
            column-gap: var(--space-16);
}
.about__body-title{
    margin-bottom: var(--space-10);
    font-weight: 600;
    font-size: var(--text-h2);
}
.about__body-description{
    max-width: 524px;
    padding-bottom: var(--space-20);
}
.advantages__grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 30px 1fr 30px 1fr 30px 1fr;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
    max-width: 1180px;
    margin-inline: auto;
}
.advantages__item {
    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;
    /* Был случайный розоватый #fffbfb, не входивший ни в какую палитру */
    background-color: var(--color-surface);
    padding: var(--space-8);
    border-radius: var(--radius);
    -webkit-box-shadow: var(--shadow);
            box-shadow: var(--shadow);
}
/* Ховер убран: плитка никуда не ведёт, а подъём на 10px обещал клик,
   которого нет. Аффорданс должен быть только у интерактивного. */
.advantages__item-icon {
    margin-bottom: var(--space-4);
    /* Было: подбор цвета цепочкой из семи фильтров, которая давала
       не фирменный красный и пересчитывалась при каждой перерисовке.
       Теперь цвет берётся из currentColor родителя. */
    color: var(--color-red);
}
.advantages__item-number {
    font-size: var(--text-stat);
    font-weight: 700;
    margin: var(--space-3) 0 var(--space-1);
}
.advantages__item-description {
    text-align: center;
    /* Резервируем две строки. Иначе подпись из двух слов («активных
       клиентов») делает столбик выше, и на фоне соседей с однострочной
       подписью иконка и число уезжают вверх. */
    min-height: calc(var(--leading-normal) * 2em);
}
.services__grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 32px 1fr;
    grid-template-columns: repeat(2, 1fr);
    /* Было 58px — карточки распадались на отдельные острова */
    gap: var(--space-8);
}
.services__item {
    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-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    row-gap: var(--space-6);
    padding: var(--space-8);
    /* Карточка лежит на фото — цвет текста задаём явно, а не через глобальное a */
    color: var(--color-white);
    max-width: 606px;
    min-height: 380px;
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.services__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/images/image-service1.webp');
    background-size: cover;
    background-position: center;
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: -webkit-transform 0.5s ease;
    -o-transition: transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
    z-index: -2;
}
/* Затемнение под текстом. Без него белый заголовок пропадал на бликах
   лака — а на фото детейлинга блики есть всегда. */
.services__item::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: -webkit-gradient(linear, left bottom, left top,
        from(rgba(10, 10, 10, .82)), color-stop(55%, rgba(10, 10, 10, .28)), to(rgba(10, 10, 10, .06)));
    background-image: -o-linear-gradient(bottom,
        rgba(10, 10, 10, .82) 0%, rgba(10, 10, 10, .28) 55%, rgba(10, 10, 10, .06) 100%);
    background-image: linear-gradient(to top,
        rgba(10, 10, 10, .82) 0%, rgba(10, 10, 10, .28) 55%, rgba(10, 10, 10, .06) 100%);
    pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
    .services__item:hover::before {
        -webkit-transform: scale(1.06);
            -ms-transform: scale(1.06);
                transform: scale(1.06);
    }
}
.services__item:nth-child(2)::before{
    background-image: url('/images/image-service2.webp');
}
.services__item:nth-child(3)::before{
    background-image: url('/images/image-service3.webp');
}
.services__item:nth-child(4)::before{
    background-image: url('/images/image-service4.webp');
}
.services__item:nth-child(5)::before{
    background-image: url('/images/image-service5.webp');
}
.services__item:nth-child(6)::before{
    background-image: url('/images/image-service6.webp');
}
.services__item-title{
    font-weight: 600;
    font-size: var(--text-h3);
    max-width: 451px;
}
.client__images{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.client__images-small{
    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-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.feedback__section{
    background-image: url('/images/image-feedback.webp');
    background-repeat: no-repeat;
    background-size: cover;
    height: 622px;
    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-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.feedback__inner{
    color: var(--color-white);
    text-align: center;
}
.feedback__title{
    margin-bottom: var(--space-8);
    font-weight: 600;
    font-size: var(--text-h2);
}
.feedback__description{
    margin-bottom: var(--space-16);
    max-width: 672px;
}
.contacts__map{
    margin-bottom: var(--space-24);
    border: var(--border);
    border-radius: var(--border-radius);
    overflow: hidden; 
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: var(--space-4);
}
.contacts__map-container {
    position: relative;
    width: 100%;
    height: 549px;
    max-width: 1270px;
    padding-top: 43.23%;
    overflow: hidden;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
.contacts__map-container iframe {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 100%;
    height: 100%;
    border: 0;
}
.contacts__map-link {
    position: absolute;
    color: #eee;
    font-size: var(--text-ui);
    top: 0;
}
.contacts__map-link:nth-of-type(2) {
    top: 14px;
}
.contacts__list{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.contact__element-item{
    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-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    row-gap: var(--space-8);
    padding-block: var(--space-4);
}
.contact__element-item:nth-child(2){
    border-inline: var(--border-alternative-gray);
}
.contact__element-link{
    text-align: center;
}

@media (max-width: 1391px) {
    .client__images{
        -webkit-column-gap: var(--space-16);
           -moz-column-gap: var(--space-16);
                column-gap: var(--space-16);
    }
    .client__image-item{
        -o-object-position: left;
           object-position: left;
        -o-object-fit: cover;
           object-fit: cover;
        border-radius: var(--border-radius);
    }
}
@media (max-width: 1300px) {
    .header__logo-image{
        width: clamp(7.5rem, 6.153rem + 6.73vw, 11.625rem);
    }
    .header__menu-link,
    .header__phone,
    .menu__phone,
    .footer__list-link,
    .footer__list-title,
    .footer__list-copyright{
        font-size: var(--text-ui);
    }
    .header__menu-list{
        -webkit-column-gap: clamp(1.563rem, -5.394rem + 10.87vw, 3.438rem);
           -moz-column-gap: clamp(1.563rem, -5.394rem + 10.87vw, 3.438rem);
                column-gap: clamp(1.563rem, -5.394rem + 10.87vw, 3.438rem);
    }
    .header__title{
        font-size: var(--text-hero);
        /* padding-bottom: clamp(0.625rem, 0.395rem + 1.05vw, 1.25rem); */
    }
    .header__slogan{
        font-size: var(--text-slogan);
    }
    .advantages__item-number{
        font-size: var(--text-stat);
    }
    .title,
    .about__body-title,
    .feedback__title{
        font-size: var(--text-h2);
    }.about__body-description,
.advantages__item-description,
.header__subtitle,
.feedback__description,
.contact__element-link{
        font-size: var(--text-lead);
    }
    .button,
    .button-alternative{
        font-size: var(--text-ui);
        min-height: var(--button-height);
        padding-inline: var(--button-padding-x);
    }
    .header__down{
        margin-top: 8vh;
    }
    /* .header__line{
        padding-top: clamp(1.875rem, 0.223rem + 3.57vw, 3.125rem);
    }; */
    .about__image{
        min-width: 627px;
    }
    .services__item-title{
        font-size: var(--text-h3);
    }
    .contact__element-item:nth-child(odd) .contact__element-icon {
        width: clamp(3.125rem, 2.664rem + 2.11vw, 4.375rem);
        height: clamp(3.125rem, 2.664rem + 2.11vw, 4.375rem);
    }
    .contact__element-item:nth-child(even) .contact__element-icon {
        width: clamp(3.75rem, 3.289rem + 2.11vw, 5rem);
        height: clamp(3.75rem, 3.289rem + 2.11vw, 5rem);
    }
}
/* @media (max-height: 700px) {
    .header__logo-image{
        width: clamp(7.5rem, 6.153rem + 6.73vh, 11.625rem)
    }
    .header__menu-link,
    .header__phone{
        font-size: var(--text-ui);
    }
    .header__menu-list{
        column-gap: clamp(1.563rem, -5.394rem + 10.87vh, 3.438rem);
    }
    .header__title{
        font-size: var(--text-hero);
        /* padding-bottom: clamp(0.625rem, 0.395rem + 1.05vw, 1.25rem); */
    /* } 
    .header__slogan{
        font-size: var(--text-slogan);
    }
    .title{
        font-size: var(--text-h2);
    }
    .header__down{
        margin-top: clamp(1.563rem, -1.316rem + 13.16vh, 9.375rem);
    }
    .button,
    .button-alternative{
        font-size: var(--text-ui);
        height: clamp(2.875rem, 2.737rem + 0.63vh, 3.25rem);
        padding-inline: clamp(1.375rem, 1.191rem + 0.84vh, 1.875rem);
    } */
/* } */ 
@media (max-width: 1200px){
    .header__phone{
        display: none;
    }
}
@media (max-width: 1170px) {
    .about{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        row-gap: var(--space-20);
        margin-top: var(--space-32);
        text-align: center;
    }
    .about__body-description{
        max-width: 627px;
        padding-bottom: var(--space-12);
    }
    .about__image{
        display: none;
    }
    .advantages__grid {
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 1015px) {
}

@media (max-width: 868px) {
    .about__image{
        min-width: 200px;
    }
    .services__grid{
        -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr); 
        justify-items: center; 
        -webkit-box-align: center; 
            -ms-flex-align: center; 
                align-items: center; 
    }
    .services__item {
        width: 100%;
    }
    .client{
        display: none;
    }
    .contact__element-item{
        padding-inline: var(--space-4);
    }
    .feedback__section{
        background-position: center;
    }
}
@media (max-width: 660px) {
    .contacts__list {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .contact__element-item:nth-child(2) {
        border-inline: none;
    }
    .contacts__inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
        row-gap: var(--space-20);
    }
}
@media (max-width: 550px) {
    .advantages__item{
        -webkit-box-shadow: none;
                box-shadow: none;
    }
}
@media (max-width: 470px) {
    .advantages__grid{
        gap: 0px;
    }
}
@media (max-width: 430px) {
    /* На узких экранах плиткам нужна вся ширина: отступ по краям минимальный */
    .advantages__container{
        padding-inline: var(--space-2);
    }
}
/* ---------------------------------------------------------------------------
   ЧАСТЫЕ ВОПРОСЫ
   Раскрывашки на нативном <details> — без единой строки JS, значит
   и без задержки отклика. Ответы лежат в разметке, поисковик их видит.
   --------------------------------------------------------------------------- */
.faq__list {
    max-width: 900px;
    margin-inline: auto;
}
.faq__item {
    border-bottom: 1px solid var(--color-line);
}
.faq__question {
    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;
    gap: var(--space-4);
    min-height: var(--tap-target);
    padding-block: var(--space-4);
    font-size: var(--text-ui);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
/* Своя стрелка вместо системного треугольника */
.faq__question::-webkit-details-marker {
    display: none;
}
.faq__question::after {
    content: '+';
    -ms-flex-negative: 0;
        flex-shrink: 0;
    font-size: var(--text-h3);
    font-weight: 400;
    line-height: 1;
    color: var(--color-red);
}
.faq__item[open] .faq__question::after {
    content: '−';
}
.faq__answer {
    padding-bottom: var(--space-6);
    font-size: var(--text-ui);
    color: var(--color-gray);
}
.faq__link {
    color: var(--color-black);
    text-decoration: underline;
    text-underline-offset: 3px;
    -webkit-transition: color var(--transition-duration);
    -o-transition: color var(--transition-duration);
    transition: color var(--transition-duration);
}
.faq__link:hover {
    color: var(--color-red);
}