@media (max-width: 1179px) {
    body.reviews-page {
        min-width: 0;
        overflow-x: hidden
    }

    .reviews-page .hero .container,
    .reviews-page .client-messages .container,
    .reviews-page .text-reviews-section .container,
    .reviews-page .cta .container {
        width: min(100% - 64px, 920px)
    }

    .reviews-page .hero-grid {
        grid-template-columns: minmax(0, 1fr) 260px !important;
        gap: 32px
    }

    .reviews-page .hero-main,
    .reviews-page .hero-copy,
    .reviews-page .hero-letters,
    .reviews-page .client-messages-carousel,
    .reviews-page .text-reviews-carousel {
        width: 100%;
    }

    .reviews-page .hero h1 {
        font-size: clamp(54px, 7vw, 68px)
    }

    .reviews-page .hero-phone {
        width: 260px;
        height: 529px
    }

    .reviews-page .hero-carousel-prev,
    .reviews-page .client-messages-carousel .hero-carousel-prev,
    .reviews-page .text-reviews-carousel .hero-carousel-prev {
        left: -30px
    }

    .reviews-page .hero-carousel-next,
    .reviews-page .client-messages-carousel .hero-carousel-next,
    .reviews-page .text-reviews-carousel .hero-carousel-next {
        right: -30px
    }
}

@media (max-width: 900px) {
    .reviews-page .hero {
        padding-top: 120px
    }

    .reviews-page .hero .container,
    .reviews-page .client-messages .container,
    .reviews-page .text-reviews-section .container,
    .reviews-page .cta .container {
        width: min(100% - 48px, 720px)
    }

    .reviews-page .hero-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center
    }

    .reviews-page .hero-main {
        text-align: center
    }

    .reviews-page .hero h1 br {
        display: none
    }

    .reviews-page .hero-copy {
        margin-right: auto;
        margin-left: auto
    }

    .reviews-page .hero-actions {
        justify-content: center
    }

    .reviews-page .hero-phone {
        margin-top: 12px
    }

    .reviews-page .hero-letters .hero-carousel-slide {
        flex-basis: calc((100% - 16px) / 3)
    }

    .reviews-page .client-messages-carousel .hero-carousel-slide,
    .reviews-page .text-reviews-carousel .hero-carousel-slide {
        flex-basis: calc((100% - 12px) / 2)
    }

    .reviews-page .client-messages-carousel .hero-carousel-slide {
        height: 300px
    }

    .reviews-page .text-reviews-section h2 {
        font-size: 44px
    }

    .reviews-page .cta-box {
        padding: 48px 38px;
        gap: 30px
    }

    .reviews-page .cta h2 {
        font-size: 30px
    }

    .reviews-page .cta h2 .cta-line {
        white-space: normal
    }
}

@media (max-width: 767px) {
    .reviews-page .hero .container,
    .reviews-page .client-messages .container,
    .reviews-page .text-reviews-section .container,
    .reviews-page .cta .container {
        width: min(100% - 32px, 560px)
    }

    .reviews-page .hero {
        padding-top: 96px
    }

    .reviews-page .hero h1 {
        margin: 10px 0 22px;
        font-size: clamp(42px, 12vw, 58px);
        line-height: .9
    }

    .reviews-page .hero-copy {
        padding: 12px 16px 14px;
        font-size: 19px
    }

    .reviews-page .hero-letters {
        padding: 8px 0
    }

    .reviews-page .hero-letters .hero-carousel-slide {
        flex-basis: calc((100% - 8px) / 2)
    }

    .reviews-page .hero-carousel-slide .letter {
        height: 155px
    }

    .reviews-page .hero-carousel-arrow {
        width: 38px;
        height: 48px;
        border-radius: 50%;
        font-size: 42px
    }

    .reviews-page .hero-carousel-prev,
    .reviews-page .client-messages-carousel .hero-carousel-prev,
    .reviews-page .text-reviews-carousel .hero-carousel-prev {
        left: -30px;
    }

    .reviews-page .hero-carousel-next,
    .reviews-page .client-messages-carousel .hero-carousel-next,
    .reviews-page .text-reviews-carousel .hero-carousel-next {
        right: -31px;
    }

    .reviews-page .client-messages {
        padding: 30px 0 !important
    }

    .reviews-page .client-messages-carousel .hero-carousel-slide,
    .reviews-page .text-reviews-carousel .hero-carousel-slide {
        flex-basis: 100%
    }

    .reviews-page .client-messages-carousel .hero-carousel-slide {
        min-height: 300px
    }

    .reviews-page .client-messages-carousel .client-message-card img {
        max-height: 420px;
        object-fit: contain
    }

    .reviews-page .text-reviews-section {
        padding: 52px 0 58px !important
    }

    .reviews-page .text-reviews-eyebrow {
        font-size: 14px
    }

    .reviews-page .text-reviews-section h2 {
        margin: 14px 0 32px;
        font-size: 38px;
        line-height: 1
    }

    .reviews-page .text-reviews-section h2 br {
        display: none
    }

    .reviews-page .text-review-card {
        height: auto;
        min-height: 500px
    }

    .reviews-page .cta {
        padding: 54px 0
    }

    .reviews-page .cta-box {
        padding: 40px 24px;
        flex-direction: column;
        align-items: stretch;
        text-align: center
    }

    .reviews-page .cta h2 {
        font-size: 29px
    }

    .reviews-page .cta-action,
    .reviews-page .cta .btn {
        width: 100%;
        min-width: 0
    }

    .reviews-page .growth-line {
        display: none
    }

    .reviews-page .modal {
        padding: 16px
    }

    .reviews-page .modal-close {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
        /* background: rgba(13, 23, 53, .86); */
    }

    .reviews-page .text-review-dialog {
        width: 100%;
        max-height: calc(100dvh - 32px);
        padding: 54px 22px 28px;
        border-radius: 12px
    }

    .reviews-page .text-review-dialog .modal-close {
        position: absolute
    }

    .reviews-page .text-review-dialog h2 {
        margin: 12px 0 20px;
        font-size: 25px
    }

    .reviews-page .text-review-modal-body {
        font-size: 14px;
        line-height: 1.55
    }

    .reviews-page .review-request-popup {
        padding: 12px
    }

    .reviews-page .review-request-popup .meeting-popup-dialog {
        max-height: calc(100dvh - 24px)
    }
}

@media (max-width: 479px) {
    .reviews-page .hero .container,
    .reviews-page .client-messages .container,
    .reviews-page .text-reviews-section .container,
    .reviews-page .cta .container {
        width: calc(100% - 24px)
    }

    .reviews-page .hero {
        padding-top: 82px
    }

    .reviews-page .eyebrow {
        font-size: 13px
    }

    .reviews-page .hero h1 {
        font-size: clamp(37px, 12vw, 48px)
    }

    .reviews-page .hero-copy {
        font-size: 17px
    }

    .reviews-page .hero-letters .hero-carousel-slide {
        flex-basis: 100%;
    }

    .reviews-page .hero-letters .hero-carousel-slide .letter {
        width: fit-content;
        height: 310px;
        margin: 0 auto;
        padding: 10px;
    }

    .reviews-page .hero-letters .hero-carousel-slide .letter img {
        display: block;
        width: auto;
        height: 290px;
        padding: 0;
    }

    .reviews-page .hero-phone {
        width: 290px;
        height: 560px;
    }

    .reviews-page .client-messages-carousel .hero-carousel-slide {
        min-height: 260px
    }

    .reviews-page .client-messages-carousel .client-message-card img {
        padding: 6px
    }

    .reviews-page .text-reviews-section h2 {
        font-size: 32px
    }

    .reviews-page .text-review-card {
        min-height: 520px;
        padding: 20px 16px 18px
    }

    .reviews-page .text-review-category {
        font-size: 12px
    }

    .reviews-page .text-review-card h3 {
        min-height: 0;
        font-size: 18px
    }

    .reviews-page .text-review-card > p {
        font-size: 14px;
        -webkit-line-clamp: 9
    }

    .reviews-page .text-review-person strong,
    .reviews-page .text-review-modal-person strong {
        font-size: 16px
    }

    .reviews-page .cta h2 {
        font-size: 26px
    }

    .reviews-page .letter-modal img,
    .reviews-page #letterModal img {
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px)
    }
}

@media (prefers-reduced-motion: reduce) {
    .reviews-page .hero-carousel-track,
    .reviews-page .letter img {
        transition: none
    }
}