section.testimonials-tall {
    background: linear-gradient(180deg, rgba(241, 247, 252, 1) 0%, rgba(248, 251, 253, 1) 100%);
    padding: 80px 0;
    --card-bg: #ffffff;
    --desktop-padding: 3.13rem;
    --card-width: min(201px, calc(17.38 * (100vw - var(--desktop-padding) - var(--desktop-padding)) / 100));
    --open-card-width: min(504.9px, calc(43.7 * (100vw - var(--desktop-padding) - var(--desktop-padding)) / 100));

    & .sec-heading {
        margin-bottom: 48px;
    }

    & .tallquotes-wrapper {
        display: flex;
        aspect-ratio: 1156 / 463;
        width: 100%;
        align-items: flex-start;
        justify-content: center;
        gap: 16px;
        align-self: stretch;

        & .tallquotes-card {
            box-shadow:
                0 0.5px 0 0 rgba(36, 133, 198, 0.5) inset,
                0 -2px 10px 0 rgba(36, 133, 198, 0.05),
                0 -2px 40px 0 rgba(36, 133, 198, 0.3);
            overflow: hidden;
            border-radius: 20px;
            background: var(--card-bg);
            position: relative;
            height: 100%;
            transition: all 0.3s ease;
            display: flex;
            max-width: var(--open-card-width);
            cursor: pointer;
        }
    }

    & .tallquotes-left {
        height: 100%;
        transition: all 0.3s ease;
        min-width: var(--card-width);
        width: var(--card-width);
        position: relative;

        & .tallquotes-imagewrap {
            overflow: hidden;
            min-height: 100%;
            min-width: 100%;
            max-height: 100%;
            max-width: 100%;
            aspect-ratio: 201 / 463;
            border-radius: 20px;
            transition: all 0.3s ease;
            position: relative;
        }

        & .tallquotes-image {
            height: 100%;
            width: 100%;
            background-size: var(--card-width) auto;
            background-repeat: no-repeat;
            background-position: center top;
            overflow: hidden;
            position: relative;
            /* background-image: url("/wp-content/themes/assent-wp/assets/images/testimonials-tall--desktop-bg.webp"); */
            background: linear-gradient(118deg, #163548 6.95%, #215274 40.97%, #00A398 90.17%);

            & img {
                position: absolute;
                bottom: 0;
                left: -5px;
                width: calc(var(--card-width) + 10px);
                min-width: calc(var(--card-width) + 10px);
                aspect-ratio: 100 / 182;
                object-fit: cover;
                height: auto;
                transition:
                left 0.3s ease,
                bottom 0.3s ease;
                pointer-events: none;
                user-select: none;
            }
        }

        & .tallquotes-iconwrap {
            position: absolute;
            bottom: 14px;
            left: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-width: 66px;
            min-height: 66px;
            max-width: 66px;
            max-height: 66px;
            padding: 6px;
            border-radius: 200px;
            border: 1.5px solid #fff;
            background: #fff;
            box-shadow:
                0 0 20px 0 rgba(0, 0, 0, 0.08),
                0 1px 3px -1px rgba(0, 0, 0, 0.08);
            transition:
                left 0.3s ease,
                bottom 0.3s ease;
        }
    }

    & .tallquotes-right {
        max-width: 0px;
        transition: max-width 0.3s ease;
        overflow: hidden;

        & .tallquotes-rightwrap {
            padding: 20px 12px 20px 26px;
            min-width: calc(var(--open-card-width) - var(--card-width));
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;

            svg {
                margin-bottom: 10px;
            }

            & .tallquotes-quote p {
                color: #343a40;
                font-size: 20px;
                line-height: 125%;
                letter-spacing: normal;
                margin: 0;
                font-weight: 400;
                font-style: italic !important;

                & strong {
                    font-weight: 700;
                }
            }

            & .tallquotes-author p {
                color: #6b6d72;
                font-size: 18px;
                line-height: 125%;
                letter-spacing: normal;
                margin: 0;
                font-weight: 400;
                margin-top: 8px;

                & strong {
                    font-weight: 600;
                    color: #343a40;
                }
            }

            & .tallquotes-author + .cta-link {
                margin-top: 32px;
                margin-bottom: 8px;
            }

            & .cta-link {
                display: block;
                color: #4d758f;
                font-size: 20px;
                font-style: normal;
                font-weight: 600;
                line-height: 120%;
                letter-spacing: 0.05px;
                text-decoration: none;

                &::after {
                    content: "";
                    height: 22px;
                    width: 22px;
                    display: inline-block;
                    vertical-align: text-bottom;
                    background-color: currentColor;
                    mask: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.74164 16.2584C6.06382 16.5805 6.58618 16.5805 6.90836 16.2584L14.85 8.31672V14.575C14.85 15.0306 15.2194 15.4 15.675 15.4C16.1306 15.4 16.5 15.0306 16.5 14.575V6.325C16.5 5.86937 16.1306 5.5 15.675 5.5H7.425C6.96937 5.5 6.6 5.86937 6.6 6.325C6.6 6.78063 6.96937 7.15 7.425 7.15H13.6833L5.74164 15.0916C5.41945 15.4138 5.41945 15.9362 5.74164 16.2584Z' fill='black'/%3E%3C/svg%3E%0A");
                    mask-repeat: no-repeat;
                    mask-position: center center;
                    mask-size: cover;
                    transition: transform 0.3s ease;
                }

                &:hover {
                    color: #215273;

                    &::after {
                        transform: translate(1px, -1px);
                    }
                }
            }
        }
    }

    & .tallquotes-card.tallquotes-open {
        cursor: default;

        & .tallquotes-left {
            border-radius: 16px;
            padding: 10px 0 10px 10px;

            & .tallquotes-imagewrap {
                border-radius: 16px;
                cursor: default;
            }
            & .tallquotes-image img {
                left: -15px;
                bottom: -10px;
            }
            & .tallquotes-iconwrap {
                left: 18px;
                bottom: 10px;
            }
        }

        & .tallquotes-right {
            max-width: calc(var(--open-card-width) - var(--card-width));
        }
    }

    & .container {
        max-width: 1256px;
        margin: 0 auto;
        padding-left: var(--desktop-padding);
        padding-right: var(--desktop-padding);
    }
}

@media (max-width: 1242px) {
    section.testimonials-tall {
        & .tallquotes-right {
            & .tallquotes-rightwrap {
                padding-left: 12px;

                & .tallquotes-quote p,
                & .cta-link {
                    font-size: 16px;
                }

                & .tallquotes-author p {
                    font-size: 14px;
                    margin-top: 4px;
                }

                & .tallquotes-author + .cta-link {
                    margin-top: 20px;
                    margin-bottom: 6px;
                }
            }
        }
    }
}

@media (max-width: 991px) {
    section.testimonials-tall {
        --scroll-padding: calc((16vw - 10px) / 2);
        background: rgba(241, 247, 252, 1);

        & .container {
            padding-left: 0;
            padding-right: 0;
        }

        & .sec-heading {
            padding-left: 2.19rem;
            padding-right: 2.19rem;
        }

        & .tallquotes-wrapper {
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: 42vw;
            justify-content: flex-start;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            -webkit-scrollbar: none;
            -ms-overflow-style: none;
            scrollbar-width: none;
            scroll-behavior: smooth;
            gap: 10px;
            aspect-ratio: unset;
            padding: 0 var(--scroll-padding);
            margin: 0;
            scroll-padding-left: var(--scroll-padding);
            height: 100%; 

            &::-webkit-scrollbar {
                display: none;
            }

            & .tallquotes-card {
                box-shadow: none;
                scroll-snap-align: start;
                width: auto;
                cursor: default;
                max-width: unset;
                border-radius: 12px;
            }

            & .tallquotes-right {
                max-width: unset;
                position: relative;
                
                & .tallquotes-rightwrap {
                    padding: 20px 20px 32px 20px;
                    justify-content: center;

                    & svg {
                        margin-bottom: 8px;
                    }

                    & .tallquotes-quote p,
                    & .cta-link {
                        font-size: 20px;
                        line-height: 125%;
                        letter-spacing: -0.25px;
                        color: #fff;
                    }

                    & .tallquotes-quote {
                        margin-bottom: 24px;
                    }

                    & .tallquotes-author {
                        margin-bottom: 47px;
                        max-width: 161px;

                        & p {
                            margin-top: 10px;
                            font-size: 14px;
                            color: #fff;
                            
                            & strong {
                                font-size: 16px;
                                color: #fff;
                            }
                        }
                    }

                    & .cta-link {
                        max-width: 154px;
                        margin-bottom: 0;
                        text-shadow: 0 0 3px #31375a;

                        &::after {
                            background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.74164 16.2584C6.06382 16.5805 6.58618 16.5805 6.90836 16.2584L14.85 8.31672V14.575C14.85 15.0306 15.2194 15.4 15.675 15.4C16.1306 15.4 16.5 15.0306 16.5 14.575V6.325C16.5 5.86937 16.1306 5.5 15.675 5.5H7.425C6.96937 5.5 6.6 5.86937 6.6 6.325C6.6 6.78063 6.96937 7.15 7.425 7.15H13.6833L5.74164 15.0916C5.41945 15.4138 5.41945 15.9362 5.74164 16.2584Z' fill='white'/%3E%3C/svg%3E%0A");
                            background-repeat: no-repeat;
                            background-position: center center;
                            background-size: cover;
                            mask: none;
                            background-color: transparent;
                            filter: drop-shadow(0 0 3px #31375a);
                        }
                    }
                }
            }

            & .tallquotes-left {
                height: 100%;
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
                transition: none;
                min-width: unset;

                & .tallquotes-imagewrap {
                    aspect-ratio: unset;
                    height: 100%;
                    width: 100%;
                    border-radius: 12px;
                }

                & .tallquotes-image {
                    /* background-image: url("/wp-content/themes/assent-wp/assets/images/testimonials-tall--mobile-bg.webp"); */
                    background: linear-gradient(118deg, #163548 6.95%, #215274 40.97%, #00A398 90.17%);
                    background-size: cover;

                    & img {
                        position: absolute;
                        bottom: 0;
                        left: auto;
                        right: -40px;
                        width: auto;
                        height: 250px;
                        min-width: unset;
                        aspect-ratio: unset;
                        object-fit: contain;
                        object-position: bottom;
                        transition: none;
                    }
                }

                & .tallquotes-iconwrap {
                    right: 20px;
                    left: auto;
                    bottom: 14px;
                }
            }
        }
    }
}

@media (max-width: 374px) {
    section.testimonials-tall {
        & .sec-heading {
            padding-left: 1.25rem;
            padding-right: 1.25rem;
        }
    }
}

@media (max-width: 720px) {
    section.testimonials-tall {
        --scroll-padding: calc(16vw / 2);

        & .tallquotes-wrapper {
            grid-auto-columns: 84vw;
        }
    }
}

/* Video Modal Styles */
section.testimonials-tall {

    & .video-modal {
        display: flex;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        align-items: center;
        justify-content: center;
        transition: opacity 0.2s ease, visibility 0.2s ease;

        &.video-modal-open {
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
        }

        & .video-modal-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
            cursor: pointer;
        }

        & .video-modal-content {
            position: relative;
            width: 90%;
            max-width: 900px;
            aspect-ratio: 426 / 240;
            border-radius: 8px;
            overflow: hidden;
        }

        & .video-modal-body {
            width: 100%;
            height: 100%;

            & iframe {
                width: 100%;
                height: 100%;
                border: none;
            }
        }
        
        & .video-iframe-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            
            & iframe {
                width: 100%;
                height: 100%;
                border: none;
            }
        }
    }
}

@media (max-width: 991px) {
    section.testimonials-tall {
        & .video-modal {
            & .video-modal-content {
                width: 95%;
                margin: 0 auto;
            }
        }
    }
}


/* Update homepage v3 (light background theme on cards) */
section.testimonials-tall {
    background: linear-gradient(180deg, rgba(241, 247, 252, 1) 0%, rgba(248, 251, 253, 0) 20%);

    & .tallquotes-left .tallquotes-image {
        background: linear-gradient(90deg, #D3DCE4 0%, #CEE9E8 100%);
        background-size: 400% 100%;
        background-repeat: no-repeat;
    }

    & .tallquotes-card:nth-child(1) .tallquotes-image {
        background-position: 0% 0;
    }

    & .tallquotes-card:nth-child(2) .tallquotes-image {
        background-position: 33.33% 0;
    }

    & .tallquotes-card:nth-child(3) .tallquotes-image {
        background-position: 66.67% 0;
    }

    & .tallquotes-card:nth-child(4) .tallquotes-image {
        background-position: 100% 0;
    }

    & .tallquotes-wrapper .tallquotes-card {
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    }
}
@media (max-width: 991px) {
    section.testimonials-tall {
        background: linear-gradient(180deg, rgba(241, 247, 252, 1) 0%, rgba(248, 251, 253, 0) 20%);

        & .tallquotes-wrapper {
            & .tallquotes-card {
                box-shadow: none;
            }

            & .tallquotes-left {
                & .tallquotes-image {
                    background: linear-gradient(90deg, #D3DCE4 0%, #CEE9E8 100%);
                    background-size: cover;
                }
            }

            & .tallquotes-right {
                & .tallquotes-rightwrap {
                    & svg {
                        filter: brightness(0) saturate(100%) invert(45%) sepia(5%) saturate(336%) hue-rotate(185deg) brightness(96%) contrast(92%);
                    }

                    & .tallquotes-quote p {
                        color: #343A40;
                    }

                    & .tallquotes-author p,
                    & .tallquotes-author p strong {
                        color: #343A40;
                    }

                    & .cta-link {
                        color: #215274;
                        text-shadow: 0 0 3px #CEE9E8;

                        &::after {
                            display: none;
                            background-color: #215274;
                            background-image: none;
                            mask: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.74164 16.2584C6.06382 16.5805 6.58618 16.5805 6.90836 16.2584L14.85 8.31672V14.575C14.85 15.0306 15.2194 15.4 15.675 15.4C16.1306 15.4 16.5 15.0306 16.5 14.575V6.325C16.5 5.86937 16.1306 5.5 15.675 5.5H7.425C6.96937 5.5 6.6 5.86937 6.6 6.325C6.6 6.78063 6.96937 7.15 7.425 7.15H13.6833L5.74164 15.0916C5.41945 15.4138 5.41945 15.9362 5.74164 16.2584Z' fill='black'/%3E%3C/svg%3E%0A");
                            mask-repeat: no-repeat;
                            mask-position: center center;
                            mask-size: cover;
                            filter: none;
                        }
                    }
                }
            }
        }
    }
}