/* =========================================
   ПЛАНШЕТЫ (769px – 1425px): пропорциональный хедер, без бургера
   ========================================= */
@media (min-width: 768px) and (max-width: 1425px) {

    /* Шапка здесь 70px, поэтому и отступ body меньше — иначе под ней
       остаётся лишний зазор, которого нет на десктопе */
    body {
        padding-top: 80px !important;
    }

    .header {
        height: 70px !important;
        padding: 0 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Лого не сжимается никогда */
    .header-logo {
        flex-shrink: 0 !important;
    }

    .header-img {
        flex-shrink: 0 !important;
    }

    .header-burger {
        display: none !important;
    }

    .header-content {
        position: static !important;
        display: flex !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        opacity: 1 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        flex-direction: row !important;
        width: auto !important;
        top: auto !important;
        left: auto !important;
        /* flex-shrink: 1 — пусть nav-сторона сжимается, а не лого */
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }

    .header-btns {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        /* 93px на 1425px → 16px на 769px, линейно */
        column-gap: clamp(16px, calc(-97px + 12.96vw), 93px) !important;
        gap: clamp(16px, calc(-97px + 12.96vw), 93px) !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .btn {
        font-size: clamp(14px, calc(7px + 1vw), 21px) !important;
        padding: 0 !important;
        width: auto !important;
        border-bottom: none !important;
        display: inline !important;
        white-space: nowrap !important;
        text-align: left !important;
        color: #fff !important;
    }

    .header-rect {
        display: block !important;
        height: 14px !important;
        width: 1px !important;
        margin: 0 !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }

    .btn-btn {
        font-size: clamp(14px, calc(7px + 1vw), 21px) !important;
        padding: 5.5px clamp(10px, calc(-2px + 1.9vw), 27px) !important;
        width: auto !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        margin-top: 0 !important;
        border-radius: 7px !important;
        background-color: #fff !important;
        color: #5D3A99 !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 1399px) {

    .header {

        height: 80px;

        padding: 0 20px;

        align-items: center;

        background-color: #5D3A99;

        transition: 0.3s;

        border-radius: 0 0 20px 20px;

        position: fixed;

        top: 0;

        left: 0;

        right: 0;

        z-index: 1000;

    }



    .header.open {

        border-radius: 0;

    }



    .header-burger {

        display: flex;

    }



    .header-content {

        position: fixed;

        top: 80px;

        left: 0;

        width: 100%;

        background-color: #5D3A99;

        padding: 0 20px;

        box-sizing: border-box;

        border-radius: 0 0 20px 20px;

        max-height: 0;

        overflow: hidden;

        opacity: 0;

        transition: all 0.4s ease-in-out;

        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);

        display: flex;

        flex-direction: column;

    }



    .header.open .header-content {

        max-height: 100vh;

        max-height: 100dvh;

        opacity: 1;

        padding-bottom: 30px;

    }



    .header.open .header-burger span:nth-child(1) {

        transform: rotate(45deg) translate(5px, 6px);

    }



    .header.open .header-burger span:nth-child(2) {

        opacity: 0;

    }



    .header.open .header-burger span:nth-child(3) {

        transform: rotate(-45deg) translate(5px, -6px);

    }



    .header-btns {

        flex-direction: column;

        align-items: center;

        width: 100%;

        gap: 0;

    }



    .btn {

        width: 100%;

        padding: 15px 0;

        border-bottom: 1px solid rgba(255, 255, 255, 0.2);

        font-size: 18px;

        text-align: center;

        color: #fff;

        display: block;

    }



    .header-rect {

        display: none;

    }



    .btn-btn {

        width: 100%;

        margin-top: 20px;

        text-align: center;

        background-color: #fff;

        color: #5D3A99;

        display: block;

        padding: 15px 0;

        border-radius: 10px;

    }






    .container,

    .main-container,

    .services-container {

        width: 100%;

        padding-left: 20px;

        padding-right: 20px;

        box-sizing: border-box;

    }

}

/* =========================================
   «О НАС»: ТЕЛЕФОН СКРЫТ И ТЕКСТ ТЯНЕТСЯ ПО ВЫСОТЕ — ТОЛЬКО ДО 768px.
   На 768px и выше секция масштабируется пропорционально (--pa).
   ========================================= */
@media (max-width: 767.98px) {



    .mobile {

        display: none;

    }



    .aboutus-desc-container {

        width: 100%;

        height: auto;

    }



    .abotus-title,

    .aboutus-subtitle {

        font-size: 36px;

    }


}

/* =========================================
   ПОРТФОЛИО: ПЛИТОЧНАЯ (АДАПТИВНАЯ) РАСКЛАДКА — ТОЛЬКО ДО 768px.
   На 768px и выше используется десктопная раскладка
   с пропорциональным масштабированием (см. блок в конце файла).
   ========================================= */
@media (max-width: 767.98px) {
    .portfolio-container {

        width: calc(100% - 30px) !important;

        max-width: 1399px !important;

        margin: 0 !important;

        position: relative !important;

        left: auto !important;

        top: auto !important;

        transform: none !important;

        background-color: transparent !important;

        background-image: none !important;

        border: 1px solid #7B61FF !important;

        border-radius: 20px;

        padding: 10px 10px 20px 10px !important;

        box-sizing: border-box !important;

        height: auto !important;

    }



    .portfolio-dots {

        position: relative !important;

        width: 100% !important;

        display: flex !important;

        justify-content: center !important;

        align-items: center !important;

        margin-top: 12px !important;

        left: auto !important;

        transform: none !important;

        bottom: auto !important;

        padding: 0 !important;

        gap: 6px !important;

        z-index: 5;

    }



    .dot {

        width: 6px;

        height: 6px;

        background-color: #D1C4E9;

        border-radius: 50%;

        transition: 0.3s;

    }



    .dot.active {

        background-color: #5D3A99;

        transform: scale(1.2);

    }
    /* ФИКС СТРЕЛОК ДЛЯ 5 СЛАЙДА (Приравниваем его ширину к остальным сеткам) */

    #sliderContent .slide:nth-child(5)>div {

        width: calc(100% - 46px) !important;

        margin: 0 auto !important;

    }



    /* Раскладка открытых кейсов на мобилке — см. блок в конце файла */
}



/* =========================================
   ФИКС ПЕРЕПОЛНЕНИЯ: 1200px – 1425px
   ========================================= */
@media (min-width: 1200px) and (max-width: 1425px) {

    body {
        padding-top: 80px;
    }

    .main-container {
        width: 100%;
        max-width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .services-container {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    section.portfolio {
        max-width: 100%;
        padding: 39px 20px 0 20px !important;
        box-sizing: border-box !important;
    }

    .contacts {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box;
    }
}

/* =========================================
   УСЛУГИ — КОМПАКТНАЯ СЕТКА ТОЛЬКО НА ТЕЛЕФОНАХ (до 768px)
   ========================================= */
@media (max-width: 767.98px) {



    /* --- УСЛУГИ --- */

    .services {

        padding: 20px 0 0 0;

    }



    .services-container {

        display: grid !important;

        grid-template-columns: repeat(6, 1fr);

        gap: 8px;

        width: 100%;

    }



    .service-block {

        background-color: #fff;

        border-radius: 12px;

        padding: 8px 5px;

        display: flex;

        align-items: center;

        justify-content: flex-start;

        min-height: 55px;

        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

        cursor: pointer;

        grid-column: span 2;

    }



    .services-container:hover .service-block {

        opacity: 0.2;

    }



    .services-container .service-block:hover {

        opacity: 1 !important;

        transform: scale(1.05);

        z-index: 10;

    }



    .service-block:nth-last-child(1),

    .service-block:nth-last-child(2) {

        grid-column: span 3;

    }



    .service-logo {

        width: 24px;

        height: 24px;

        object-fit: contain;

        margin-right: 5px;

        flex-shrink: 0;

    }



    /* Слова целиком: перенос только между словами, размер подбирается
       так, чтобы самое длинное слово («Спецпроекты») влезало в строку.
       10px — на широком телефоне, ниже — пропорционально ширине экрана. */
    .service-text {

        font-family: 'Montserrat', sans-serif;

        font-weight: 700;

        font-size: clamp(6.5px, calc(4.465vw - 7.72px), 10px);

        line-height: 1.2;

        color: #000000;

        word-wrap: normal;

        overflow-wrap: normal;

        word-break: normal;

        -webkit-hyphens: none;

        -moz-hyphens: none;

        hyphens: none;

        min-width: 0;

        overflow: hidden;

    }



}

/* =========================================
   ПОРТФОЛИО: МОБИЛЬНАЯ РАСКЛАДКА СЛАЙДЕРА — ТОЛЬКО ДО 768px
   ========================================= */
@media (max-width: 767.98px) {
    /* --- ПОРТФОЛИО (ОБЩИЕ СТИЛИ ДЛЯ ПЛАНШЕТОВ И МОБИЛОК) --- */

    .slides-window {

        width: 95% !important;

        height: auto !important;

        overflow: visible !important;

        position: relative !important;

    }

    .portfolio-container {

        height: auto !important;

        overflow: visible !important;

    }

    #slider-view {

        height: auto !important;

    }

    .slide,
    .slide.active {

        height: auto !important;

    }

    section.portfolio {

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        width: 100% !important;

        padding: 20px 0 0 0 !important;

        box-sizing: border-box !important;

    }




    /* СЕТКА ФОТО — новый макет (левая + правая + кнопка под правой) */

    .portfolio-grid {

        display: flex !important;

        justify-content: space-between !important;

        align-items: flex-start !important;

        width: calc(100% - 46px) !important;

        height: auto !important;

        margin: 0 auto 20px auto !important;

        padding: 0 !important;

    }

    .grid-left {

        flex: 1 !important;

        margin-right: 12px !important;

        align-self: stretch !important;

        width: auto !important;

        height: auto !important;

        aspect-ratio: unset !important;

        position: static !important;

    }

    .grid-left .img-main {

        width: 100% !important;

        object-fit: cover !important;

        border-radius: 10px !important;

        display: block !important;

    }

    .grid-right {

        display: flex !important;

        flex-direction: column !important;

        width: 43% !important;

        flex-shrink: 0 !important;

        position: static !important;

        height: auto !important;

        aspect-ratio: unset !important;

        margin: 0 !important;

        padding: 0 !important;

    }

    .grid-right .img-main {

        width: 100% !important;

        display: block !important;

        object-fit: cover !important;

        border-radius: 10px !important;

        height: auto !important;

    }

    .grid-right .btn-more-wrap {

        margin-top: 9px !important;

        width: 100% !important;

    }

    .grid-right .btn-more-wrap .btn-more {

        width: 100% !important;

        height: 36px !important;

        font-size: 1.82vw !important;

        border-radius: 8px !important;

        min-width: unset !important;

    }

    /* Слайд 5 — одна картинка + кнопка под ней справа */

    .portfolio-grid-single {

        display: flex !important;

        flex-direction: column !important;

        align-items: flex-end !important;

        width: calc(100% - 46px) !important;

        margin: 0 auto 20px auto !important;

    }

    .img-main-single {

        width: 100% !important;

        display: block !important;

        object-fit: cover !important;

        border-radius: 10px !important;

    }

    .btn-more-wrap--single {

        margin-top: 9px !important;

        width: 43% !important;

    }

    .btn-more-wrap--single .btn-more {

        width: 100% !important;

        height: 36px !important;

        font-size: 1.82vw !important;

        border-radius: 8px !important;

        min-width: unset !important;

    }

    /* Скрываем старые элементы которых больше нет в HTML */

    .grid-right .img-side-top,

    .grid-right .grid-right-bottom,

    .grid-right-bottom,

    .btn-cutout {

        display: none !important;

    }

    /* ТОЧКИ (DOTS) И СТРЕЛКИ */

    .portfolio-dots {

        position: relative !important;

        width: 100% !important;

        display: flex !important;

        justify-content: center !important;

        align-items: center !important;

        margin-top: 12px !important;

        left: auto !important;

        transform: none !important;

        bottom: auto !important;

        padding: 0 !important;

        gap: 6px !important;

        z-index: 5;

    }



    .dot {

        width: 6px;

        height: 6px;

        background-color: #D1C4E9;

        border-radius: 50%;

        transition: 0.3s;

    }



    .dot.active {

        background-color: #5D3A99;

        transform: scale(1.2);

    }



    .slider-view {

        position: relative !important;

        width: 100% !important;

    }



    .slider-arrow {

        position: absolute !important;

        top: 55% !important;

        transform: translateY(-50%) !important;

        z-index: 20 !important;

        width: 15px !important;

        height: 15px !important;

        background-color: #5D3A99;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        cursor: pointer;

        border: none !important;

    }



    .slider-arrow img {

        width: 5px !important;

        height: auto !important;

        display: block !important;

    }



    .slider-arrow.prev {

        left: 4px !important;

    }



    .slider-arrow.next {

        right: 4px !important;

    }

}



/* =========================================
   КОНТАКТЫ — адаптив для средних экранов
   ========================================= */

/* От 945px до 1140px: секция прижимается к правому краю —
   уменьшаем gap и ширину кнопки, чтобы она не выходила за экран */
@media (max-width: 1140px) {

    .contacts {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box;
    }

    .contacts-wrapper {
        width: 100% !important;
        gap: clamp(16px, 3vw, 64px) !important;
        justify-content: flex-start !important;
    }

    .contact-button {
        width: clamp(180px, 20vw, 300px) !important;
        font-size: clamp(14px, 1.6vw, 22px) !important;
        height: clamp(44px, 5vw, 60px) !important;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .contact-text {
        font-size: clamp(13px, 1.3vw, 18px) !important;
    }

    .contact-sep {
        /* Ширится/сужается вместе с gap обёртки, свой margin не нужен. */
        margin: 0 !important;
    }
}

/* От 769px до 945px: контакты начинают переноситься —
   переходим на column layout */
@media (max-width: 945px) {

    .contacts-wrapper {
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        gap: 16px !important;
    }

    /* В столбик линия-разделитель теряет смысл: она вертикальная и
       высотой в строку, между почтой и кнопкой смотрелась бы случайной
       чёрточкой. Разделять сверху вниз тут уже нечего — прячем. */
    .contact-sep {
        display: none !important;
    }

    .contact-button {
        width: 100% !important;
        max-width: 280px !important;
        height: 50px !important;
        font-size: 18px !important;
    }

    .contact-text {
        font-size: clamp(13px, 1.4vw, 16px) !important;
    }
}

/* =========================================
   ТОЛЬКО МОБИЛЬНЫЕ ТЕЛЕФОНЫ (ДО 768px)
   ========================================= */
@media (max-width: 767.98px) {



    /* --- 1. БАЗОВЫЕ НАСТРОЙКИ --- */

    body {

        padding-top: 80px;

        overflow-x: hidden;

    }



    .main-container,

    .container {

        width: 100% !important;

        padding: 0 15px !important;

        box-sizing: border-box;

    }



    /* --- 2. HEADER (ШАПКА) --- */

    .header {

        height: 80px;

        padding: 0 20px;

        align-items: center;

        background-color: #5D3A99;

        transition: 0.3s;

        border-radius: 0 0 20px 20px;

        position: fixed;

        top: 0;

        left: 0;

        right: 0;

        z-index: 1000;

    }



    .header.open {

        border-radius: 0;

    }



    .header-burger {

        display: flex;

    }



    .header-content {

        position: fixed;

        top: 80px;

        left: 0;

        width: 100%;

        background-color: #5D3A99;

        padding: 0 20px;

        box-sizing: border-box;

        border-radius: 0 0 20px 20px;

        max-height: 0;

        overflow: hidden;

        opacity: 0;

        transition: all 0.4s ease-in-out;

        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);

        display: flex;

        flex-direction: column;

    }



    .header.open .header-content {

        max-height: 100vh;

        max-height: 100dvh;

        opacity: 1;

        padding-bottom: 30px;

    }



    .header.open .header-burger span:nth-child(1) {

        transform: rotate(45deg) translate(5px, 6px);

    }



    .header.open .header-burger span:nth-child(2) {

        opacity: 0;

    }



    .header.open .header-burger span:nth-child(3) {

        transform: rotate(-45deg) translate(5px, -6px);

    }



    .header-btns {

        flex-direction: column;

        align-items: center;

        width: 100%;

        gap: 0;

    }



    .btn {

        width: 100%;

        padding: 15px 0;

        border-bottom: 1px solid rgba(255, 255, 255, 0.2);

        font-size: 18px;

        text-align: center;

        color: #fff;

        display: block;

    }



    .header-rect {

        display: none;

    }



    .btn-btn {

        width: 100%;

        margin-top: 20px;

        text-align: center;

        background-color: #fff;

        color: #5D3A99;

        display: block;

        padding: 15px 0;

        border-radius: 10px;

    }



    /* --- 3. ГЛАВНЫЙ ЭКРАН (ABOUT US) --- */

    .main-container {

        flex-direction: column-reverse;

        align-items: center;

    }

    .left-section {

        gap: 20px;

        width: 100%;

    }



    .aboutus {

        width: 100%;

        display: flex;

        justify-content: center;

        padding: 20px 0 0 0;

    }



    .aboutus .container {

        width: 100% !important;

        height: auto !important;

        margin: 0 auto;

        padding: 10px 13px !important;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        background-size: cover;

        background-position: center;

        border-radius: 12px;

    }



    .abotus-title {

        font-family: 'Montserrat', sans-serif;

        font-weight: 500;

        font-size: 18px !important;

        line-height: 1.2 !important;

        text-transform: uppercase;

        color: #000;

        margin: 0;

    }



    .aboutus-subtitle {

        font-family: 'Montserrat', sans-serif;

        font-weight: 700;

        font-size: 18px !important;

        line-height: 1.2 !important;

        text-transform: uppercase;

        color: #000;

        margin-top: 5px !important;

    }



    .mobile {

        display: none;

    }



    .aboutus-desc-container {

        font-size: 14px;

        padding: 18px 20px;

        line-height: 1.5;

        width: 100%;

        text-align: left;

    }



    /* --- 4. УСЛУГИ (СЕТКА) --- */

    .service-text {

        font-size: clamp(6.5px, calc(4.465vw - 7.72px), 10px);

        word-break: normal;

        overflow-wrap: normal;

        -webkit-hyphens: none;

        -moz-hyphens: none;

        hyphens: none;

        min-width: 0;

        overflow: hidden;

    }



    .service-block {

        grid-column: span 2 !important;

        order: 1 !important;

        overflow: hidden !important;

        min-width: 0 !important;

    }



    .service-block:nth-child(4) {

        order: 8 !important;

        grid-column: span 3 !important;

    }



    .service-block:nth-child(8) {

        order: 7 !important;

        grid-column: span 3 !important;

    }

    /* Заголовок портфолио и текст кейсов — пропорционально: 28px и 18px на 768px */
    .portfolio-title {
        font-size: 3.6vw !important;
    }

    .case-grid [class*="text"] {
        font-size: 2.34vw !important;
    }

    .grid-right .btn-more-wrap .btn-more,
    .btn-more-wrap--single .btn-more {
        font-size: 1.82vw !important;
    }


    /* --- ПОРТФОЛИО КОНТЕЙНЕР ДЛЯ МОБИЛОК --- */

    .portfolio-container {

        width: calc(100% - 30px) !important;

        max-width: 700px !important;

        margin: 0 !important;

        position: relative !important;

        left: auto !important;

        top: auto !important;

        transform: none !important;

        background-color: #F2E9FC;

        border-radius: 20px;

        padding: 10px 10px 20px 10px !important;

        box-sizing: border-box !important;

        height: auto !important;

    }



    /* --- 7. КОНТАКТЫ (ВЛЕВО) --- */

    .contacts {

        padding: 20px 0 40px 0 !important;

        margin-top: 0;

    }



    .contacts-wrapper {

        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;

        width: 100% !important;

        padding: 0 20px !important;

        gap: 15px !important;

    }



    .contacts-info {

        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;

        gap: 10px !important;

        width: 100% !important;

        margin: 0 !important;

    }



    .contact-row {

        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;

        gap: 3px !important;

    }



    .contact-text {

        font-size: clamp(11px, 3vw, 14px) !important;

        color: #000 !important;

        text-decoration: none !important;

        font-weight: 500 !important;

        white-space: nowrap !important;

    }

    /* Селектор без .contacts-info: линия переехала в .contacts-wrapper. */
    .contact-sep {

        display: none !important;

    }



    .contact-button {

        width: 100% !important;

        max-width: 150px;

        height: 35px !important;

        display: flex !important;

        align-items: center;

        justify-content: center;

        margin: 0 !important;

        background-color: #5D3A99;

        color: #fff !important;

        border-radius: 15px;

        font-size: 14px;

        font-weight: 600;

    }



    /* --- 8. ФУТЕР --- */

    .footer {

        background-color: #5D3A99;

        padding: 20px;

        height: auto !important;

        align-items: center !important;

    }



    .footer-inner {

        display: flex;

        flex-direction: row;

        align-items: center;

        justify-content: flex-start;

        gap: 17px;

    }



    .footer-logo {

        width: 100px;

        margin: 0;

    }



    .footer-copyright {

        font-size: 8px;

        font-weight: 400;

        color: #fff;

        line-height: 1.4;

        text-align: left;

        margin: 0;

    }



    /* --- 9. МОДАЛЬНОЕ ОКНО (POPUP) --- */

    .modal-overlay {

        display: none;

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background-color: rgba(0, 0, 0, 0.5);

        z-index: 2000;

        justify-content: center;

        align-items: center;

        -webkit-backdrop-filter: blur(5px);

        backdrop-filter: blur(5px);

    }



    .modal-overlay.active {

        display: flex;

    }



    .modal-content {

        width: 90% !important;

        max-width: 350px;

        background-color: #5D3A99 !important;

        padding: 25px 20px !important;

        border-radius: 20px !important;

        height: auto !important;

        display: flex;

        flex-direction: column;

        position: relative;

    }



    .modal-close {

        position: absolute;

        top: 15px;

        right: 15px;

        background: transparent;

        border: none;

        width: 34px;

        height: 34px;

        display: flex;

        align-items: center;

        justify-content: center;

        cursor: pointer;

        z-index: 10;

    }



    .modal-close svg circle {

        fill: transparent;

    }



    .modal-close svg path {

        stroke: white;

        stroke-width: 2.5;

    }



    .modal-title {

        font-family: 'Montserrat', sans-serif;

        font-size: 20px;

        font-weight: 700;

        color: #fff;

        margin-bottom: 20px;

    }



    .modal-input {

        width: 100%;

        height: 45px;

        margin-bottom: 10px;

        border-radius: 12px;

        border: none;

        padding: 0 15px;

        font-size: 14px;

    }



    .textarea-wrapper {

        position: relative;

        margin-bottom: 15px;

    }



    .modal-textarea {

        width: 100%;

        height: 120px;

        border-radius: 12px;

        border: none;

        padding: 15px;

        font-size: 14px;

        resize: none;

    }



    .file-upload-label {

        position: absolute;

        bottom: 15px;

        right: 15px;

    }



    .modal-submit {

        width: 100%;

        height: 50px;

        border-radius: 15px;

        border: none;

        background-color: #fff;

        color: #5D3A99;

        font-weight: 700;

        font-size: 16px;

    }



    /* --- 10. БЛОК СОГЛАСИЯ В МОДАЛКЕ --- */

    .modal-consent {

        margin-top: 10px;

        margin-bottom: 8px;

        width: 100%;

    }



    .consent-label {

        display: flex;

        align-items: flex-start;

        gap: 10px;

        cursor: pointer;

    }



    .consent-checkbox {

        width: 18px;

        height: 18px;

        min-width: 18px;

        margin-top: 2px;

        flex-shrink: 0;

        -webkit-appearance: none;

        -moz-appearance: none;

        appearance: none;

        border: 2px solid #fff;

        border-radius: 4px;

        background: transparent;

        cursor: pointer;

    }



    .consent-checkbox:checked {

        background: #fff;

        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%235D3A99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");

        background-repeat: no-repeat;

        background-position: center;

        background-size: 12px;

    }



    .consent-text {

        font-size: 11px;

        color: rgba(255, 255, 255, 0.85);

        line-height: 1.4;

    }



    .consent-link {

        color: #fff;

        text-decoration: underline;

    }

}


/* =========================================
   ПОРТФОЛИО — МОБИЛЬНЫЕ ТЕЛЕФОНЫ (до 480px)
   ========================================= */
@media (max-width: 480px) {

    .portfolio-grid {
        width: calc(100% - 30px) !important;
        margin: 0 auto 16px auto !important;
    }

    .grid-left {
        margin-right: 8px !important;
    }

    .grid-right {
        width: 44% !important;
    }

    .grid-right .img-main {
        border-radius: 8px !important;
    }

    .grid-left .img-main {
        border-radius: 8px !important;
    }

    .grid-right .btn-more-wrap {
        margin-top: 7px !important;
    }

    .grid-right .btn-more-wrap .btn-more {
        height: 30px !important;
        font-size: 1.82vw !important;
        border-radius: 6px !important;
    }

    .portfolio-grid-single {
        width: calc(100% - 30px) !important;
        margin: 0 auto 16px auto !important;
    }

    .img-main-single {
        border-radius: 8px !important;
    }

    .btn-more-wrap--single {
        width: 44% !important;
        margin-top: 7px !important;
    }

    .btn-more-wrap--single .btn-more {
        height: 30px !important;
        font-size: 1.82vw !important;
        border-radius: 6px !important;
    }

}

/* =========================================
   ПОРТФОЛИО — МОБИЛЬНЫЕ КАРТИНКИ (до 768px)
   ========================================= */
@media (max-width: 767.98px) {

    /* picture ведёт себя как блок, не добавляет лишних отступов */
    .grid-left picture,
    .grid-right picture {
        display: block;
        width: 100%;
        height: 100%;
    }

    .grid-left picture img,
    .grid-right picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 10px;
    }

    /* Третья картинка — показываем только на мобилке */
    .img-third {
        display: block !important;
        width: 100%;
        object-fit: cover;
        border-radius: 6px;
        margin-top: 3px;
    }

    /* grid-right со слайдами 6/7 (3 картинки):
       высота левой = высота правой + 3px + третьей + 5px кнопки
       Достигается через align-self: stretch на grid-left */
    .grid-right {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Кнопка под всем правым блоком — 5px отступ */
    .grid-right .btn-more-wrap {
        margin-top: 5px !important;
    }

    /* Слайд 5 — кнопка 5px под картинкой */
    .btn-more-wrap--single {
        margin-top: 5px !important;
    }

    /* Левая картинка растягивается на всю высоту правой колонки */
    .grid-left {
        margin-right: 7px !important;
        align-self: stretch !important;
    }

    .grid-left picture {
        height: 100% !important;
    }

    .grid-left picture img {
        height: 100% !important;
    }
}

/* Слайд 5 — picture на всю ширину */
@media (max-width: 767.98px) {
    .portfolio-grid-single picture {
        display: block;
        width: 100%;
    }

    .portfolio-grid-single picture img {
        width: 100%;
        display: block;
        object-fit: cover;
        border-radius: 10px;
    }
}

/* =========================================
   ТРЕТЬЯ КАРТИНКА — внутри второй (слайды 6, 7)
   ========================================= */
@media (max-width: 767.98px) {

    /* Обёртка второй картинки — relative для абсолютного позиционирования третьей */
    .grid-right-img-wrap {
        position: relative;
        display: block;
        width: 100%;
        overflow: hidden;
        border-radius: 10px;
        aspect-ratio: 400 / 448;
        isolation: isolate;
    }

    .grid-right-img-wrap picture {
        display: block;
        width: 100%;
        height: 100%;
    }

    .grid-right-img-wrap picture img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 10px !important;
        display: block !important;
    }

    /* Третья картинка — поверх второй, в нижнем левом углу */
    .grid-right-img-wrap .img-third {
        display: block !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 55% !important;
        height: auto !important;
        clip-path: inset(0 8px 0 0 round 0 8px 0 10px) !important;
        border-radius: 0 8px 0 10px !important;
        margin: 0 !important;
        object-fit: cover !important;
    }

    /* На десктопе обёртка ведёт себя прозрачно */
}

@media (min-width: 768px) {
    .grid-right-img-wrap {
        position: static;
        display: block;
        width: 100%;
        overflow: visible;
        border-radius: 0;
        aspect-ratio: unset;
        isolation: auto;
    }

    .grid-right-img-wrap .img-third {
        display: none !important;
    }
}


/* =========================================
   ПОРТФОЛИО И УСЛУГИ НА ПЛАНШЕТАХ И НОУТБУКАХ (768px – 1439px)

   Раскладка полностью совпадает с десктопной (>1440px): те же позиции
   элементов — и в закрытом слайдере портфолио, и в раскрытых кейсах,
   и в сетке услуг (4 колонки 200/230/270/300).
   Меняется только масштаб: пока блок помещается по ширине с отступами
   от краёв — размеры 1:1 как на десктопе; как только он почти касается
   края страницы (примерно с 1177px), всё (текст, картинки, кнопки,
   отступы и высоты) уменьшается пропорционально через единицу --pf.

   --pf = 1px на десктопе  ->  ширина блока 1121 * 1px = 1121px
   --pf < 1px ниже         ->  все размеры уменьшаются с тем же коэффициентом
   56px = 20px левый отступ + 20px правый отступ + запас на скроллбар
   ========================================= */
@media (min-width: 768px) and (max-width: 1439.98px) {

    :root {
        --pf: min(1px, calc((100vw - 56px) / 1121));
        --pa: min(1px, calc((100vw - 56px) / 1400));
    }

    /* Секция «о нас» — десктопная раскладка, пропорционально уменьшенная:
       слоган, описание и телефон сжимаются одним коэффициентом --pa,
       поэтому переносы строк те же, что на десктопе, а телефон по-прежнему
       ровно по высоте двух блоков. */
    .main-container {
        max-width: 100% !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }

    .mobile {
        display: flex !important;
    }

    .portfolio {
        max-width: 100% !important;
        padding: 39px 20px 0 20px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    /* Услуги — та же сетка, что на десктопе, только пропорционально меньше.
       Текст никогда не рвётся посреди слова: колонки сжимаются ровно так же,
       как шрифт, поэтому длинные слова всегда помещаются в строку. */
    .services-container {
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    /* На случай, если браузер не понимает min() — остаёмся на десктопных 1:1 */
    @supports not (width: min(1px, 1vw)) {
        :root {
            --pf: 1px;
        }
    }
}

/* =====================================================================
   МОБИЛЬНЫЕ КЕЙСЫ — 1:1 С ЭТАЛОННЫМИ СЛАЙДАМИ (/img/slides_reference)
   ---------------------------------------------------------------------
   Эталон: канва 1128 ед., поле заголовка 1032 ед., контент сетки 940 ед.
   Все размеры заданы в долях ширины контейнера, поэтому раскладка —
   точная пропорциональная копия эталона на ЛЮБОЙ ширине до 768px.
   Картинки берутся из /img/slides_mobile (обрезаны по непрозрачному
   содержимому), поэтому рамка элемента совпадает с видимым изображением.
   ===================================================================== */
@media (max-width: 767.98px) {

    /* контейнер запросов: 100cqw = 1032 ед. эталона */
    #cases-wrapper {
        container-type: inline-size;
    }

    .case-view-item {
        /* 1 ед. эталона */
        --u: 0.0968992cqw;
        padding: 0 !important;
        height: auto !important;
    }

    /* Запасной расчёт для браузеров без container queries (Safari до 16,
       Firefox до 110, Chrome до 105). Без него значение 0.0968992cqw
       считается невалидным, --u схлопывается, и все 23 правила слайдера,
       завязанные на calc(N * var(--u)), теряют смысл разом — раскладка
       разваливается целиком, а не частично.

       Формула повторяет ширину #cases-wrapper через размеры родителя:
       .portfolio-container = min(100vw - 30px, 700px), внутри рамка 1px
       и padding 10px с каждой стороны при box-sizing: border-box,
       значит содержимое уже на 22px. Проверено на 375px: обе формулы
       дают 0.313px на единицу.

       Оговорка: 100vw включает ширину полосы прокрутки, а проценты — нет.
       На настольном браузере с постоянной полосой (Firefox под Windows)
       расчёт даст на ~15px больше. Для запасного пути это допустимо —
       он включается только там, где иначе не работало бы ничего. */
    @supports not (container-type: inline-size) {
        .case-view-item {
            --u: calc((min(100vw - 30px, 700px) - 22px) / 1032);
        }
    }

    .portfolio-container.expanded {
        height: auto !important;
        max-height: none !important;
        padding-bottom: 20px !important;
        background-color: #F2E9FC !important;
        background-image: none !important;
    }

    /* --- ШАПКА КЕЙСА --- */
    .case-header {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: calc(20 * var(--u)) !important;
        width: 100% !important;
        margin: calc(14 * var(--u)) 0 calc(46 * var(--u)) 0 !important;
    }

    .case-header .portfolio-title {
        flex: 1 1 auto !important;
        width: auto !important;
        margin: 0 !important;
        text-align: left !important;
        font-weight: 800 !important;
        font-size: calc(41 * var(--u)) !important;
        line-height: 1.25 !important;
    }

    #slider-view .portfolio-title {
        /* Заголовок карусели — в левом верхнем углу блока, как в макете.
           Раньше стоял по центру при ширине 80%: визуально он «плавал»
           и не совпадал по левому краю ни с карточками, ни с точками. */
        width: 100% !important;
        /* Единицы --u здесь НЕ работают: она объявлена только на
           .case-view-item внутри #cases-wrapper, а карусель лежит
           снаружи. calc() с ней становится невалидным, и размер
           молча откатывается к 16px. Поэтому vw с ограничителями. */
        margin: 0 0 clamp(12px, 4.3vw, 22px) !important;
        text-align: left !important;
        font-size: clamp(18px, 5.3vw, 26px) !important;
        line-height: 1.2 !important;
        font-weight: 800 !important;
    }

    .close-expand {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        flex: 0 0 auto !important;
        width: max(24px, calc(68 * var(--u))) !important;
        height: max(24px, calc(68 * var(--u))) !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background-color: #5D3A99 !important;
    }

    .close-expand svg {
        width: 55% !important;
        height: 55% !important;
    }

    /* --- ОБЩАЯ СЕТКА КЕЙСА --- */
    .case-grid {
        position: relative !important;
        display: grid !important;
        /* контент 940 ед. внутри поля 1032 ед. */
        padding: 0 calc(46 * var(--u)) !important;
        width: 100% !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        margin: 0 !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
        align-items: start !important;
        justify-items: stretch !important;
        box-sizing: border-box !important;
    }

    .case-grid .item {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* Картинки уже обрезаны по содержимому, скругления запечены в PNG */
    .case-grid .item picture {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    .case-grid .item img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        object-fit: fill !important;
        border-radius: 0 !important;
    }

    .case-grid [class*="text"] {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        color: #000 !important;
        font-weight: 500 !important;
        /* шаг строки эталона — 36 ед. */
        font-size: calc(32 * var(--u)) !important;
        line-height: 1.15 !important;
        box-sizing: border-box !important;
    }

    .brk-mobile {
        display: block !important;
        height: 0.28em !important;
    }

    .brk-desktop {
        display: none !important;
    }

    /* ============ КЕЙС 1 — PEUGEOT & CITROEN, ПРЯМЫЕ ПРОДАЖИ ============
       текст | карточка Peugeot (в её вырез снизу заходит белый фургон)
       белый фургон | тёмный фургон (по нижнему краю)
       текст / баннер Citroen / текст                                     */
    #case-1 .case-grid {
        grid-template-columns: 55.3191% 9.3617% 1.7021% 33.6170% !important;
    }

    #case-1 .text-1 {
        grid-column: 1 / 2 !important;
        grid-row: 1 !important;
    }

    #case-1 .img-2 {
        grid-column: 2 / 5 !important;
        grid-row: 1 / 3 !important;
        align-self: start !important;
    }

    #case-1 .img-1 {
        grid-column: 1 / 3 !important;
        grid-row: 2 !important;
        margin-top: calc(8 * var(--u)) !important;
    }

    #case-1 .img-4 {
        grid-column: 4 / 5 !important;
        grid-row: 2 !important;
        align-self: end !important;
    }

    #case-1 .text-2 {
        grid-column: 1 / 5 !important;
        grid-row: 3 !important;
        margin-top: calc(24 * var(--u)) !important;
    }

    #case-1 .img-3 {
        grid-column: 1 / 5 !important;
        grid-row: 4 !important;
        margin-top: calc(8 * var(--u)) !important;
    }

    #case-1 .text-3 {
        grid-column: 1 / 5 !important;
        grid-row: 5 !important;
        margin-top: calc(24 * var(--u)) !important;
    }

    /* ==================== КЕЙС 2 — SOLGAR ====================
       текст | «Золотой стандарт» (в вырез заходит бежевый баннер)
       баннер
       текст
       постер | разворот брошюры                                  */
    #case-2 .case-grid {
        grid-template-columns: 36.5957% 1.7021% 19.1489% 5.1064% 37.4468% !important;
    }

    #case-2 .text-1 {
        grid-column: 1 / 4 !important;
        grid-row: 1 !important;
    }

    #case-2 .img-1 {
        grid-column: 4 / 6 !important;
        grid-row: 1 / 3 !important;
        align-self: start !important;
    }

    #case-2 .img-2 {
        grid-column: 1 / 5 !important;
        grid-row: 2 !important;
        /* Низ этой картинки должен стоять вровень с низом img-1 справа.
           Раньше положение задавалось отступом сверху и потому зависело
           от высоты текста над ней — стоило тексту стать короче, картинка
           уезжала вверх и выравнивание ломалось. Привязка к низу ряда
           держит её на месте при любой длине текста. */
        align-self: end !important;
    }

    #case-2 .text-2 {
        grid-column: 1 / 6 !important;
        grid-row: 3 !important;
        margin-top: calc(24 * var(--u)) !important;
    }

    #case-2 .img-3 {
        grid-column: 1 / 2 !important;
        grid-row: 4 !important;
        margin-top: calc(8 * var(--u)) !important;
    }

    #case-2 .img-4 {
        grid-column: 3 / 6 !important;
        grid-row: 4 !important;
        margin-top: calc(8 * var(--u)) !important;
    }

    /* ==================== КЕЙС 3 — AUTOREPAR ====================
       текст | всплеск «А»
       канистра (на две строки) | текст
                                | баллончики (по нижнему краю)      */
    #case-3 .case-grid {
        grid-template-columns: 45.5319% 2.5532% 15.7447% 35.3191% 0.8511% !important;
    }

    #case-3 .text-1 {
        grid-column: 1 / 4 !important;
        grid-row: 1 !important;
    }

    #case-3 .img-1 {
        grid-column: 4 / 6 !important;
        grid-row: 1 !important;
    }

    #case-3 .img-3 {
        grid-column: 1 / 2 !important;
        grid-row: 2 / 4 !important;
        align-self: start !important;
        margin-top: calc(8 * var(--u)) !important;
    }

    #case-3 .text-2 {
        grid-column: 3 / 6 !important;
        grid-row: 2 !important;
        margin-top: calc(24 * var(--u)) !important;
    }

    #case-3 .img-2 {
        grid-column: 3 / 5 !important;
        grid-row: 3 !important;
        align-self: end !important;
        margin-top: calc(8 * var(--u)) !important;
    }

    /* ============== КЕЙС 4 — CITROEN, ОКЛЕЙКИ ==============
       текст | две светлые машины
       две тёмные машины | текст                              */
    #case-4 .case-grid {
        grid-template-columns: 53.1915% 2.1277% 2.1277% 42.5532% !important;
    }

    #case-4 .text-1 {
        grid-column: 1 / 4 !important;
        grid-row: 1 !important;
    }

    #case-4 .img-1 {
        grid-column: 4 / 5 !important;
        grid-row: 1 !important;
    }

    #case-4 .img-2 {
        grid-column: 1 / 2 !important;
        grid-row: 2 !important;
        margin-top: calc(8 * var(--u)) !important;
    }

    #case-4 .text-2 {
        grid-column: 3 / 5 !important;
        grid-row: 2 !important;
        margin-top: calc(24 * var(--u)) !important;
    }

    /* ============== КЕЙС 5 — АДАПТАЦИЯ ВИДЕО ==============
       текст / карусель / текст — в одну колонку             */
    #case-5 .case-grid {
        grid-template-columns: 100% !important;
    }

    #case-5 .text-1 {
        grid-row: 1 !important;
    }

    #case-5 .img-1 {
        grid-row: 2 !important;
        margin-top: calc(8 * var(--u)) !important;
    }

    #case-5 .text-2 {
        grid-row: 3 !important;
        margin-top: calc(24 * var(--u)) !important;
    }

    #case-5 .c5-outer-wrap {
        padding: 0 !important;
    }

    #case-5 .c5-viewport {
        aspect-ratio: 936 / 348 !important;
        width: 99.5745% !important;
        height: auto !important;
        border-radius: calc(24 * var(--u)) !important;
    }

    #case-5 .c5-track,
    #case-5 .c5-slide {
        height: 100% !important;
    }

    #case-5 #case5-img-0 {
        content: url("../img/slides_mobile/5_1.webp") !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 0 !important;
    }

    #case-5 .c5-slide video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 0 !important;
    }

    /* Стрелки — в поле слева/справа от кадра, как в эталоне.
       Позиционируем через right:100% / left:100% от обёртки кадра: так стрелка
       всегда стоит ЗА пределами кадра независимо от того, сработал минимальный
       размер в 20px или нет. Отрицательные отступы этого не гарантировали —
       на узких экранах кнопка налезала на превью и на само видео. */
    #case-5 .c5-arrow {
        width: max(20px, calc(48 * var(--u))) !important;
        height: max(20px, calc(48 * var(--u))) !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }

    #case-5 .c5-prev {
        left: auto !important;
        right: 100% !important;
        margin-right: calc(6 * var(--u)) !important;
    }

    #case-5 .c5-next {
        right: auto !important;
        left: 100% !important;
        margin-left: calc(6 * var(--u)) !important;
    }

    /* ==================== КЕЙС 6 — CITROEN SMM ====================
       текст | тюльпаны (в её вырез заходит зимняя машина)
       зимняя машина | девушка (по нижнему краю)
       текст                                                        */
    #case-6 .case-grid {
        grid-template-columns: 62.5532% 2.1277% 1.7021% 33.6170% !important;
    }

    #case-6 .text-1 {
        grid-column: 1 / 2 !important;
        grid-row: 1 !important;
    }

    #case-6 .img-1 {
        grid-column: 2 / 5 !important;
        grid-row: 1 / 3 !important;
        align-self: start !important;
    }

    #case-6 .img-2 {
        grid-column: 1 / 3 !important;
        grid-row: 2 !important;
        margin-top: 2.5532% !important;
    }

    #case-6 .img-3 {
        grid-column: 4 / 5 !important;
        grid-row: 2 !important;
        align-self: end !important;
    }

    #case-6 .text-2 {
        grid-column: 1 / 5 !important;
        grid-row: 3 !important;
        margin-top: calc(24 * var(--u)) !important;
    }

    /* ==================== КЕЙС 7 — PEUGEOT SMM ====================
       текст
       ночной город (на две строки) | синяя машина
       световые кольца (низ) | кот | ёлка
       текст / текст                                                 */
    #case-7 .case-grid {
        grid-template-columns: 29.7872% 1.7021% 1.3830% 2.0213% 22.5532% 1.7021% 40.4255% 0.4255% !important;
    }

    #case-7 .text-1 {
        grid-column: 1 / 9 !important;
        grid-row: 1 !important;
    }

    #case-7 .img-1 {
        grid-column: 1 / 4 !important;
        grid-row: 2 / 4 !important;
        align-self: start !important;
        margin-top: calc(8 * var(--u)) !important;
    }

    #case-7 .img-4 {
        grid-column: 5 / 8 !important;
        grid-row: 2 !important;
        margin-top: calc(8 * var(--u)) !important;
    }

    #case-7 .img-3 {
        grid-column: 3 / 6 !important;
        grid-row: 3 !important;
        margin-top: calc(8 * var(--u)) !important;
    }

    #case-7 .img-5 {
        grid-column: 7 / 8 !important;
        grid-row: 3 !important;
        margin-top: calc(8 * var(--u)) !important;
    }

    #case-7 .img-2 {
        grid-column: 1 / 2 !important;
        grid-row: 3 !important;
        align-self: end !important;
    }

    #case-7 .text-2 {
        grid-column: 1 / 9 !important;
        grid-row: 4 !important;
        margin-top: calc(24 * var(--u)) !important;
    }

    #case-7 .text-3 {
        grid-column: 1 / 9 !important;
        grid-row: 5 !important;
        margin-top: calc(24 * var(--u)) !important;
    }

    /* ---------------------------------------------------------------
       Минимальная высота текстовых блоков. Нужна, чтобы нижние ряды
       не «уезжали» вверх: иначе картинка заходит в непрозрачную часть
       соседней карточки (проверено — в кейсе 6 без этого img-1
       налезает на img-3).

       Значения выставлены по ФАКТИЧЕСКОЙ высоте текста, а не по макету.
       Раньше они брались из эталона, а Montserrat переносит строки
       иначе — из-за чего под текстом оставалось от 5 до 45 пустых
       пикселей, причём в каждом кейсе своё. Визуально это читалось
       как «тут прижато, а тут дыра». Теперь текст заполняет блок
       целиком. Если текст окажется длиннее — блок просто вырастет.
       --------------------------------------------------------------- */
    #case-1 .text-1 { min-height: calc(472 * var(--u)) !important; }
    #case-1 .text-2 { min-height: calc(148 * var(--u)) !important; }
    #case-2 .text-1 { min-height: calc(336 * var(--u)) !important; }
    #case-2 .text-2 { min-height: calc(308 * var(--u)) !important; }
    #case-3 .text-1 { min-height: calc(299 * var(--u)) !important; }
    #case-3 .text-2 { min-height: calc(299 * var(--u)) !important; }
    #case-4 .text-1 { min-height: calc(366 * var(--u)) !important; }
    #case-5 .text-1 { min-height: calc(299 * var(--u)) !important; }
    #case-6 .text-1 { min-height: calc(448 * var(--u)) !important; } /* не ниже: иначе img-1 налезает на img-3 */
    #case-7 .text-1 { min-height: calc(326 * var(--u)) !important; }
    #case-7 .text-2 { min-height: calc(112 * var(--u)) !important; }
}


/* =========================================
   ЗАГОЛОВОК СЕКЦИИ УСЛУГ
   =========================================
   .services-title лежит вне .services-container (тот — grid), поэтому
   горизонтальные отступы контейнера на него не распространяются.
   Ниже 1440px все правила .services-container задают padding 20px —
   повторяем это одним правилом, чтобы заголовок не уезжал от плиток. */
@media (max-width: 1439.98px) {
    .services-title {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
}

@media (max-width: 767.98px) {
    .services-title {
        font-size: 20px;
        margin-bottom: 12px;
    }
}