/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1919px) {
    /* keeps the hero rule flush with the screen edge (hero padding is 30px here) */
    .hero { --hero-pad: 30px; }

    /* shared (reused by cases) */
    .header__request {
        border-radius: 3px;
        gap: 20px;
        padding: 9px 12px 9px 20px;
        font-size: 12px;
    }
    .header__request img { width: 12px; height: auto; }
    .reviews__arrow { width: 30px; height: 30px; }
    .reviews__arrow img { width: 10px; height: auto; }
    /* hero */
    .hero__title {
        font-size: 225px;
    }

    .hero__descr {
        font-size: 15px;
        max-width: 565px;
    }

    .hero__btn-small {
        min-width: 147px;
    }

    .hero__cta {
        gap: 20px;
    }

    .hero__content {
        gap: 60px;
    }

    .hero__top {
        margin-right: 30px;
    }

    /* .featured */
    .featured {
        padding: 75px 0 0;
    }

    .featured__divider {
        margin-bottom: 8px;
    }

    .featured__label img {
        width: 15px;
        height: auto;
    }

    .featured__label {
        gap: 8px;
        font-size: 12px;
        margin-bottom: 65px;
    }

    .featured__title {
        font-size: 40px;
    }

    .featured__area {
        font-size: 15px;
        margin-bottom: 8px;
    }

    .featured__type {
        font-size: 12px;
        margin-bottom: 24px;
    }

    .featured__btn {
        min-width: 150px;
    }

    .featured__bottom {
        margin-bottom: 60px;
    }

    /* cases */
    .cases { padding: 113px 0 140px; }
    .cases__top { margin: 0 22px 36px 22px; padding-bottom: 20px; }
    .cases__filters { gap: 56px; }
    .cases__filter { gap: 7px; font-size: 19px; }
    .cases__dot { width: 4px; height: 4px; }
    .cases__nav { gap: 5px; }
    .cases__grid .swiper-slide { width: 741px; height: 368px; }
    .case-card { padding: 11px 17px 17px 11px; }
    .case-card__pin img { width: 15px; height: 15px; }
    .case-card__tag { gap: 12px; border-radius: 20px; padding: 8px 21px 8px 10px; font-size: 11px; }
    .case-card__bottom { gap: 18px; }
    .case-card__info { gap: 18px; margin-left: 8px; }
    .case-card__name { font-size: 17px; }
    .case-card__loc { font-size: 11px; }
    .case-card__btn,
    .case-big__btn { gap: 56px; padding: 14px 13px 14px 19px; }
    .cases__big { margin-top: 12px; --gutter: 22px; }
    .case-big { padding: 21px 26px 26px 15px; }
    .case-big__bottom { gap: 18px; }
    .case-big__info { gap: 19px; }
    .case-big__name { font-size: 20px; }
    .case-big__desc { font-size: 15px; }
    .cases__big-arrow { width: 69px; height: 69px; }
    .cases__big-arrow img { width: 15px; height: auto; }
    .cases__big-arrow--prev { left: 65px; }
    .cases__big-arrow--next { right: 65px; }
    .cases__big .swiper-slide {
        height: 700px;
    }

    /* contacts */
    .contact__inner { padding: 37px 37px 280px; }
    .contact__logo img { width: 105px; }
    .contact__link { font-size: 12px; }
    .contact__main { margin-top: 200px; }
    .contact__title { max-width: 730px; margin-bottom: 24px; font-size: 80px; }
    .contact__descr { font-size: 20px; margin-bottom: 38px; }
    .contact__input,
    .contact__select-trigger { height: 39px; font-size: 13px; }
    .contact__form { width: 350px; }
    .contact__fields { column-gap: 14px; row-gap: 12px; }
    .contact__submit { font-size: 12px; margin-top: 14px; padding: 13px 21px 13px 24px; }
    .contact__submit img { width: 12px; height: auto; }
    .contact__select-option { font-size: 13px; }

    /* footer */
    .footer {
        margin-top: -60px;
    }
}

@media (max-width: 1340px) {
    .hero__descr {
        display: none;
    }
}

@media (max-width: 1025px) {
    /* short intro that sits on top of the line's right end */
    .hero__note {
        display: block;
        max-width: 222px;
        margin-left: auto;
        margin-bottom: 12px;
        font-weight: 500;
        font-size: 16px;
        line-height: 135%;
        text-align: right;
        color: #fff;
    }

    /* .featured — title stays on top, the meta block moves below the image.
       Both wrappers collapse so divider/label/title/meta/image become siblings
       of .featured and can be reordered; the side padding moves onto the text
       parts so the image keeps running full width. */
    .featured {
        display: flex;
        flex-direction: column;
    }

    .featured__inner,
    .featured__bottom {
        display: contents;
    }

    .featured__divider,
    .featured__label,
    .featured__title,
    .featured__meta {
        padding-left: 28px;
        padding-right: 28px;
    }

    .featured__img {
        order: 1;
    }

    .featured__meta {
        order: 2;
        padding-top: 40px;
        align-items: flex-start;
    }

    .featured__title {
        margin-bottom: 40px;
    }

    .featured__btn {
        min-width: 0;
    }

    .cases__big { --gutter: 20px; }

    /* one card per screen: the offsets are 20px on each side below 1026px
       (see the casesGrid breakpoints in main.js), so the slide takes the rest */
    .cases__grid { --gutter: 20px; }
    .cases__grid .swiper-slide { width: calc(100% - var(--gutter) * 2); }
    .cases__grid .swiper-slide,
    .cases__top {
        flex-direction: column;
        align-items: flex-start;
        border-bottom: none;
        padding-bottom: 0;
        gap: 20px;
    }
    /* The filters scroll sideways instead of wrapping. The side inset moves
       from .cases__top onto its children, so the row can scroll out to the
       screen edge rather than being cut at the container's margin. */
    .cases__top {
        --side: 22px;
        margin-left: 0;
        margin-right: 0;
    }

    .cases__filters {
        width: 100%;
        padding: 0 var(--side) 20px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .cases__filters::-webkit-scrollbar {
        display: none;
    }

    .cases__filter {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .cases__nav {
        margin-left: var(--side);
        margin-right: var(--side);
    }
    .cases__big-arrow--prev { left: 45px; }
    .cases__big-arrow--next { right: 45px; }

    .case-card__bottom {
        bottom: 20px;
        width: 100%;
    }

    /* hero */
    .hero__title {
        font-size: 150px;
    }

    /* contact */
    .contact__title {
        font-size: 60px;
    }
}

@media (max-width: 769px) {
    .case-big__bottom { flex-direction: column; align-items: flex-start; }
    .case-big__info { margin-left: 0; }

    /* contact */
    .contact__fields { grid-template-columns: 1fr; }

    /* hero */
    .hero__title {
        font-size: 100px;
    }
}

@media (max-width: 570px) {
    /* hero padding is 20px here */
    .hero { --hero-pad: 20px; padding-bottom: 50px; }

    .hero__title {
        font-size: 92px;
    }

    .hero__top {
        margin-right: 0px;
    }

    .hero__cta {
        gap: 33px;
    }

    .hero__content {
        gap: 45px;
    }

    /* featured */
    .featured {
        padding: 90px 0 0;
    }

    .featured__divider {
        margin-left: 20px;
        margin-right: 20px;
    }

    .featured__divider, .featured__label, .featured__title, .featured__meta {
        padding-left: 20px;
        padding-right: 20px;
    }

    .featured__label {
        font-size: 15px;
        margin-bottom: 40px;
    }

    .featured__label img {
        width: 20px;
        height: auto;
    }

    .featured__title {
        font-size: 45px;
        line-height: 104%;
        margin-bottom: 50px;
    }

    .featured__title span {
        display: inline;
    }

    .featured__img {
        height: 330px;
        object-fit: cover;
    }

    .featured__meta {
        padding-top: 50px;
    }

    .featured__area {
        font-size: 20px;
        margin-bottom: 6px;
    }

    .featured__type {
        font-size: 16px;
        margin-bottom: 28px;
    }

    .featured__btn {
        width: 100%;
    }

    /* shared (reused by cases) */
    .header__request { gap: 50px; padding: 13px 17px 13px 25px; font-size: 14px; }
    .header__request img { width: 15px; height: auto; }
    .reviews__arrow { width: 40px; height: 40px; }
    .reviews__arrow img { width: 11px; height: auto; }

    /* cases */
    .cases { padding: 90px 0 100px; }
    .cases__top { --side: 20px; margin: 0 0 30px; gap: 30px; }
    .cases__filter { font-size: 14px; }
    .cases__filters { gap: 18px; padding: 0 var(--side) 30px; }
    .cases__grid .swiper-slide,
    .case-card__bottom { flex-direction: column; align-items: flex-start; gap: 15px;  bottom: 0; }
    .case-card__info { margin-left: 0; gap: 16px; }
    .case-card__loc { font-size: 12px; }
    .case-card__btn,
    .case-big__btn { font-size: 13px; padding: 13px 13px 13px 19px; gap: 50px; }
    .cases__grid .swiper-slide { padding: 12px 12px 25px 12px; }
    .cases__big { margin-top: 10px; --gutter: 20px; }
    .cases__big .swiper-slide { height: 527px; padding: 21px 10px 25px 15px; }
    .cases__big-arrow { width: 45px; height: 45px; }
    .cases__big-arrow img { width: 11px; height: auto; }
    .cases__big-arrow--prev { left: 40px; }
    .cases__big-arrow--next { right: 40px; }
    .case-big__name { font-size: 18px; }
    .case-big__desc { font-size: 12px; }
    .case-big__info { gap: 16px; }
    .case-big__bottom { gap: 15px; }

    /* contact */
    .contact__inner { padding: 20px 20px 60px; }
    .contact__logo img { width: 80px; }
    .contact__link { font-size: 14px; }
    .contact__main { margin-top: 50px; }
    .contact__title { font-size: 40px; margin-bottom: 26px; }
    .contact__descr {
        font-size: 16px;
        line-height: 138%;
        max-width: 151px;
        align-self: end;
        margin-bottom: 240px;
    }

    .contact__input,
    .contact__select-trigger { max-width: 224px; height: 41px; padding: 0 12px 0 16px; }
    .contact__fields {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: end;
        gap: 5px;
    }
    .contact__select { width: 100%; display: flex; justify-content: end; }

    /* The select is the last field and .contact__inner clips with
       overflow: hidden, so a list opening downwards is cut off by the section.
       It drops upwards here instead, aligned to the trigger's right edge. */
    .contact__select-list {
        top: auto;
        bottom: calc(100% + 6px);
        left: auto;
        right: 0;
        width: 224px;
        max-width: 100%;
        max-height: 220px;
        overflow-y: auto;
        transform: translateY(6px);
    }

    .contact__select.is-open .contact__select-list {
        transform: translateY(0);
    }
    .contact__submit {
        max-width: 224px;
        margin-top: 10px;
        padding-top: 14px;
        padding-bottom: 14px;
        padding-right: 12px;
    }
    .contact__form { display: flex; flex-direction: column; align-items: end; }
    /* footer */
    .footer-mob {
        margin-top: -40px;
        z-index: 1;
        position: relative;
    }
}