/* ===== МОБІЛЬНИЙ ВАРІАНТ СЛАЙДЕРА ===== */
@media (max-width: 480px) {

    .slider {
        margin-bottom: 40px;
        height: 218.7vw;          /* секція на весь екран */
    }

    .slider__wrapper {
        height: 100%;
    }

    .slide {
        height: 100%;
        width: 100%;
        position: relative;
        flex: 0 0 100%;  /* слайд на всю ширину */
    }

    .slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;       /* заповнює весь слайд */
        object-position: center; /* обрізає від центру */
        display: block;
    }

    /* затемнення на мобілці можна зробити більш рівномірним */
    .slider::before {
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.70) 0%,
            rgba(0, 0, 0, 0.45) 40%,
            rgba(0, 0, 0, 0.70) 100%
        );
    }

    /* контент більше не “коробка справа”, а блок по всій ширині */
    .slider__content {
        position: absolute;
        left: 0;
        right: 0;
        top: 25.3vw;              /* опускаємо блок трохи вниз від верху */
        bottom: auto;
        width: 100%;
        padding: 8vw 4.26vw;
        background: transparent; /* без темного прямокутника */
        text-align: left;
    }

    .slider__title {
        font-family: 'Ysabeau', sans-serif;
        font-size: 10.66vw;
        letter-spacing: 0;
        font-weight: 200;
        margin: 0 0 1.3vw 0;
        margin-block-start: 0;
    }

    .slider__subtitle {
        font-size: 9.33vw;
        font-weight: 400;
        margin: 0 0 9vw 0;
        white-space: normal;    /* дозволяємо перенос рядків */
    }

    .slider__row {
        flex-direction: column; /* текст і кнопка одна під одною */
        align-items: flex-start;
        gap: 6.6vw;
    }

    .slider__desc {
        font-size: 4.8vw;
        font-weight: 400;
        margin: 0;
    }

    .slider__btn {
        width: auto;
        height: auto;
        font-size: 4.25vw;
        padding: 4vw 8vw;
        border-radius: 999px;
        gap: 5.5vw;
        font-weight: 600;
    }

    .slider__btn-icon {
        width: 6.4vw;
        height: 6.4vw;
    }

    /* навігація зліва опускається нижче й стає крупнішою */
    .slider__nav {
        top: 152vw;
        bottom: auto;     /* приблизно як на макеті, вище крапок */
        left: 4.26vw;
        gap: 2.15vw;
    }

    .slider__nav-item {
        padding: 0;
        font-size: 6.95vw;
    }

    .slider__nav-item--active::before {
        display: none;
    }

    .slider__dots {
        position: absolute;
        left: 50%;
        bottom: 8vw;
        transform: translateX(-50%);
        display: flex;
        gap: 2.5vw;
        z-index: 10;
    }

    .slider__dot {
        width: 2.8vw;
        height: 2.8vw;
        border-radius: 50%;
        border: 1px solid #fff;
        background: transparent;
    }

    .slider__dot--active {
        background: #fff;
    }

    .projects__header{
        font-size: 8vw;
        padding: 8vw 4.26vw;
        letter-spacing: 0;
    }

    .projects__grid {
        display: block;
    }

    .project-card {
        padding: 0;
        display: block;         /* ← діти стають в один ряд */
    }

    .project-card__left{
        padding: 5.3vw 4.26vw;
        width: 100%;
    }

    .project-card__title {
        font-size: 6.9vw;
        font-weight: 200;
        font-family: 'Ysabeau', sans-serif;
    }

    .project-card__location {
        font-size: 4.26vw;
        margin-bottom: 5.3vw;
        color: #8B8B8B;
        font-weight: 400;
    }

    .project-card__info {
        gap: 2.6vw;
    }


    .project-info-icon{
        max-width: 6.4vw;
        max-height: 6.4vw;

    }

    .project-info-label{
        display: none;
    }

    .project-info-value{
        font-size: 4vw;
        text-align: left;
        margin-left: 3.2vw;
    }

    .project-card__right {
        width: 100%;
        height: auto;
    }

    .project-card__img {
        width: 100%;
        height: auto;
    }

    .project-card__img img {
        width: 100%;
        height: auto;
    }

    .more-projects{
        padding: 0 4.26vw;
    }

    .more-projects__text {
        font-size: 5.3vw;            /* підійде під макет — підженемо після */
        margin-bottom: 5.3vw;        /* відстань між текстом і кнопкою */
    }

    .more-projects__btn {
        padding: 4vw 8vw;
        font-weight: 600;
        font-size: 4.26vw;
        width: 53.3vw;
    }

    .why-us {
        margin: 0;
        padding: 20vw 0;
    }

    .why-us__title{
        font-size: 8vw;
        margin: 0 4.26vw;
    }

    .why-us__subtitle {
        font-weight: 500;
        font-size: 5.3vw;
        margin: 1.33vw 4.26vw 3.12vw 4.26vw;

    }

    .why-us__content{
        margin: 0 4.26vw;
    }

    /* Грід перетворюємо на горизонтальний трек */
    .why-us__grid {
        display: flex;                    /* замість grid */
        scroll-snap-type: x mandatory;    /* прилипання картки */
        gap: 4vw;
        padding: 0;             /* відступи як на макеті */
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch; /* плавний скрол на iOS */
        scrollbar-width: none; /* Firefox */
        overflow-x: auto;

    }

    .why-us__grid::-webkit-scrollbar {
        display: none;                  /* Chrome/Safari/Edge */
    }

    /* Кастомна лінія під картками */
    .why-us__scroll {
        margin-top: 4vw;
    }
    .why-us__scroll-track {
        width: 100%;
        height: 4px;
        background: rgba(58, 170, 53, 0.25); /* блідо-зелений трек */
        border-radius: 999px;
        overflow: hidden;
        position: relative;
    }

    /* Повзунок, який рухається */
    .why-us__scroll-thumb {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 20%;                         /* стартова ширина, JS перераховує */
        background: rgba(58, 170, 53, 1);    /* насичений зелений */
        border-radius: inherit;
        transform: translateX(0);
        transition: transform 0.05s linear;
    }



    /* Окрема картка – слайд */
    .why-us__item {
        flex: 0 0 100vw;                   /* ширина слайду ~ ширина екрану */
        scroll-snap-align: center;        /* картка стає по центру */
        padding: 5.87vw 4.26vw 5.87vw 0;
        margin: 0;                        /* прибираємо десктопний відступ */
        gap: 5.3vw;

        display: flex;
        align-items: center;      /* горизонтально по центру */
        justify-content: center;  /* вертикально по центру */

    }

    .why-us__icon {
        width: 29.3vw;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    .why-us__item-title {
        font-size: 5.86vw;
        margin-bottom: 2vw;
        margin-top: 0;
    }

    .why-us__item-text {
        font-size: 4vw;
        margin: 0;

    }

    .cta-strip__inner {
        margin-top: 2.6vw;
        padding: 8vw 4.26vw;             /* висота смуги */
        display: block;
        text-align: center;
    }

    /* Текст зліва */
    .cta-strip__text {
        font-size: 6.94vw;
        font-weight: 600;
        text-align: center;
    }

    .cta-strip__btn {
        gap: 3.2vw;
        padding: 4vw 8vw;
        font-weight: 600;
        font-size: 4.26vw;
        margin-top: 5.86vw;
    }

    /* іконка всередині кнопки */
    .cta-strip__btn-icon {
        width: 6.4vw;
        height: 6.4vw;
    }

    .services__header {
        padding: 0 0 0 4.26vw;
        font-size: 8vw;
        height: 32vw;
        margin-bottom: 2vw;
    }

    /* заголовок секції */
    .services {
        margin-top: 0;
    }


    /* панелі стають вертикальним списком */
    .services__panels {
        display: block;      /* замість flex */
        height: auto;
    }

    .services__item {
        position: relative;
        width: 100%;
        min-height: 29.4vw;    /* висота згорнутої картки */
        border-left: none;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        cursor: pointer;
        background-size: cover;          /* базово для згорнутих */
        background-position: center;
        display: flex;
        align-items: center;     /* вертикальний центр */
        justify-content: flex-start; /* або center, якщо треба по центру й по горизонталі */
    }

    /* фонове фото – заповнює картку по висоті, не спотворюється */
    .services__item::before {
        background: rgba(0, 0, 0, 0.55); /* трохи темніший фон на моб */
    }


    /* вертикальний напис перетворюємо на звичайний заголовок */
    .services__label {
        position: relative;
        left: 0;                  /* скидаємо 50% з десктопу */
        top: 0;
        z-index: 2;
        transform: none;
        transform-origin: initial;
        padding: 4.26vw;
        font-size: 5.3vw;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        white-space: normal;
        opacity: 1;
    }

    /* контент за замовчуванням прихований */
    .services__content {
        padding: 8vw 4.26vw;
        opacity: 1;
        transform: none;
        display: none;       /* ключове */
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;              /* ← притискаємо до низу */
    }

    /* відкрита картка */
    .services__item--active .services__content {
        display: block;
    }

    /* трохи більше внутрішній відступ у відкритої */
    .services__item--active {
        height: 133.4vw;                 /* фіксована висота як у макеті */
        min-height: 133.4vw;
        overflow: hidden;                /* обрізаємо зайве по ширині */
        background-size: auto 100%;      /* висота = 100%, ширина авто */
        background-position: center center; /* обрізання від центру */
    }

    .services__content-inner {
        width: 100%;
        max-width: 100%;
    }

    .services__title {
        font-size: 6.94vw;
        font-weight: 500;
        margin: 0 0 1.34vw 0;
    }

    .services__text {
        font-size: 4.8vw;
        font-weight: 400;
        margin: 0 0 6.6vw 0;
    }

    .services__buttons {
        flex-direction: column;
        align-items: flex-start;
        gap: 4vw;
    }

    .services__btn,
    .services .slider__btn {
        font-size: 4.26vw;
        padding: 2.66vw 5.86vw;
        height: auto;
        border-radius: 999px;
        gap: 3.2vw;

    }

    .services .slider__btn-icon {
        width: 5.3vw;
        height: 5.3vw;
    }

    .mobile-order-wrapper {
        display: flex;
        flex-direction: column-reverse; /* 🔥 міняємо місцями */
    }

    .report {
        margin: 25vw 4.26vw 0;      /* так само як інші секції по сітці */
    }

    .report__inner {
        display: block;
        align-items: center;
        justify-content: space-between;
        gap: 1.56vw;
        padding: 0;
    }

    .report__title {
        margin: 0 0 0.6vw 0;
        font-size: 8vw;
        font-weight: 200;

    }
    .report__subtitle {
        margin: 0 0 10.4vw 0;
        white-space: nowrap;                /* забороняємо перенос */
        font-size: clamp(4vw, 6.92vw, 8vw); /* авто-скейл */
        font-weight: 500;
        max-width: 100%;
    }



    .report__paragraph {
        font-size: 5.3vw;
        font-weight: 400;
        margin-bottom: 4vw;
    }

    .report__paragraph-bottom{
        font-size: 5.3vw;
        font-weight: 400;
        margin-bottom: 4vw;
    }

    .mobile-order-wrapper {
        gap: 0;
    }

    .measure {
        margin: -2px 0 20vw 0;
        position: relative;
    }

    .measure__inner {
        background: url("/static/main/img/measure-bg-mob.svg") center/cover no-repeat;
        min-height: 110vw;
    }

    .measure__man {
        left: -28.5vw;                     /* підженеш по макету */
        height: 87vw;                  /* робимо вищим за блок */
    }

    /* права частина з формою */
    .measure__content {
        width: 67.5vw;                   /* приблизно як у макеті */
        padding: 0;
    }
    .measure__title {
        font-size: 8vw;
        margin: 0;

    }

    .measure__title-light {
        font-weight: 700;        /* тонший */
        letter-spacing: 0;  /* трекінг як на макеті */
        display: block;
        margin-right: 0;
    }

    .measure__title-bold {
        font-weight: 200;        /* жирніше */
        letter-spacing: 0;
        display: block;
    }

    .measure__subtitle {
        font-size: 6.93vw;
        margin: 0 0 6.6vw 0;
    }

    .measure__label {
        font-size: 4.8vw;
        margin: 0 0 2.6vw 0;
    }

    .measure__row {
        display: block;
        gap: 0;          /* відстань між Ім’я та Телефон */
    }

    /* Інпут */
    .measure__input {
        padding: 3.2vw 5.86vw;
        border-radius: 40px;
        font-size: 4.26vw;
        margin-bottom: 2.6vw;
    }


    .cost {
        background: url("/static/main/img/cost-bg-mob.svg") center/cover no-repeat;
        margin-bottom: 20vw;
    }

    .cost__inner {
        padding: 16.8vw 0 8.4vw;   /* бокові відступи як у інших секцій */
    }

    /* заголовки */
    .cost__title {
        font-size: 8vw;
        font-weight: 200;
        padding: 0 0 2.6vw 0;
        border-bottom: 2px solid rgba(245, 245, 245, 1);
        letter-spacing: 0.06em;
        margin: 0 4.26vw;
    }

    .cost__subtitle {
        font-size: 6.9vw;
        font-weight: 500;
        margin: 0 0 12.8vw 0;
        padding: 0 4.26vw;
    }

    .cost__box {
        padding: 8vw 5.8vw;
    }

    .cost__question {
        font-size: 6.9vw;
        margin: 0 0 2.6vw 0;
        overflow: visible;
        white-space: nowrap;
    }

    .cost__note {
        font-size: 4.8vw;
        opacity: 0.8;
        margin: 0 0 10.6vw 0;
    }

    .cost__form {
        display: flex;
        flex-direction: column;
        gap: 5.3vw;
    }

    .cost__step {
        gap: 5.3vw;
    }

    .cost__option {
        display: flex;
        align-items: center;
        gap: 2.6vw;
        cursor: pointer;
        font-size: 6.4vw;
        margin-bottom: 5.3vw;
    }

    .cost__contact-row{
        width: 100%;
    }

    .cost__option-mark {
        width: 4.8vw;
        height: 4.8vw;
    }

    .cost__option-text {
        font-size: 6.4vw;
    }

    .cost__form .slider__btn{
        margin-top: 5.3vw;
    }

    .ba-section {
        margin: 0 0 20vw 0;
        padding: 0;

    }

    .ba-section__title-mob{
        padding: 0 4.26vw;
        margin: 0 0 5.3vw 0;
    }

    .ba-section__title {
        font-size: 6.93vw;
        font-weight: 200;
        margin: 0;
    }

    .ba-section__subtitle {
        font-size: 5.3vw;
        margin: 0 0 5.3vw 0;
        padding: 0 4.26vw;
    }

    /* ДВА СЛАЙДЕРИ ПОРУЧ */

    .ba-section__grid {
        display: block;
        grid-template-columns: none;
        gap: 2.6vw;
    }

    .ba-slider {
        margin-top: 1vw;
    }

    .ba-slider__handle-line {
        width: 3px;
    }


    .ba-slider__handle-circle {
        position: relative;
        width: 8vw;     /* розмір зеленого круга */
        height: 8vw;
    }

    .ba-slider__icon {
        width: 5.3vw;   /* ← ТУТ керуєш шириною іконки */
        height: auto;   /* ← Пропорції */
    }

    .ba-slider__label {
        font-size: 3.73vw;
        font-weight: 600;
        padding: 2.13vw 3.2vw;
        width: 31.4vw;
    }

    .ba-slider__label--before {
        border-top-right-radius: 5.3vw;
    }

    .ba-slider__label--after {
        border-top-left-radius: 5.3vw;
    }

    .about {
        margin: 0 4.26vw;
        display: block;
        align-items: center;
        gap: 4vw;
    }

    .about__image {
        flex: 0 0 40%;
        display: flex;
        justify-content: left;
        align-items: center;
        margin-bottom: 6.6vw;
    }

    .about__image-mobile {
        max-width: 100%;
        height: auto;
        display: block;
    }

    .about__image-desktop{
        display: none;
    }

    .about__content .why-us__title{
        margin: 0;
    }

    .about__content .report__subtitle{
        white-space: normal;
    }

    .about__content .report__paragraph-bottom{
        margin-bottom: 10.6vw;
    }

    .about__btn {
        padding: 4.26vw 8vw;
        border-radius: 999px;
        border: 1px solid rgba(0, 0, 0, 1);
        background: transparent;
        font-size: 4.26vw;
        margin-bottom: 20vw;
        font-weight: 600;
    }








}