section.card-stack {
    overflow: hidden;

    & .container {
        padding-left: var(--sideGap);
        padding-right: var(--sideGap);
        max-width: unset;
    }

    & .container:not(.cardstack-arrows-wrapper) {
       --sideGap: 16px;
    }

    & a.btn-link {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    & a.btn-link::after {
        content: '';
        mask: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.31066C9.58579 3.31066 9.25 3.64645 9.25 4.06066L9.25 14.2708L5.22703 10.2478C4.93414 9.95495 4.45926 9.95495 4.16637 10.2478C3.87348 10.5407 3.87348 11.0156 4.16637 11.3085L9.46967 16.6118C9.76256 16.9047 10.2374 16.9047 10.5303 16.6118L15.8336 11.3085C16.1265 11.0156 16.1265 10.5407 15.8336 10.2478C15.5407 9.95495 15.0659 9.95495 14.773 10.2478L10.75 14.2708L10.75 4.06066C10.75 3.64645 10.4142 3.31066 10 3.31066Z" fill="white"/></svg>');
        background-color: currentColor;
        width: 20px;
        height: 20px;
        display: inline-block;
        vertical-align: middle;
        margin-left: 5px;
        transform: rotate(-130deg);
    }

    & a.btn-link:hover::after {
        transform: rotate(-130deg) translate(0, 2px);
    }

    .btn-wrap {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
        margin-top: 40px;
    }

    .eyebrow-text {
        margin-bottom: 16px;
    }

    h2 {
        margin-bottom: 25px;
    }
}

.cardstack {
    width: 100%;
    min-height: 479px;

    & p {
        color: rgba(0, 0, 0, 0.5382);
    }

    & .container {
        overflow: visible;
    }

    & .cardstack-wrapper {
        position: relative;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 40px 71px;
        padding: 36px 0;
        max-width: 1156px;
        margin: 0 auto;
    }

    & .cardstack-left {
        width: 326px;
        margin-left: 11px;
    }

    & .cardstack-right {
        flex-grow: 1;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        max-width: 748px;
    }

    & .cardstack-bottom {
        width: 100%;
        pointer-events: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    & .cardstack-panel-container {
        min-height: 401px;
        position: relative;
        flex: 1;
        background: rgba(210, 215, 220, 0.2);
        border-radius: 20px;
        backdrop-filter: blur(10px);
        overflow: hidden;
        pointer-events: auto;
        transition: height 0.3s ease-out;
        margin-top: 4px;
    }

    & .cardstack-panel-content {
        width: 100%;
        opacity: 0;
        transition: opacity 0.3s ease-out;
        pointer-events: none;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 100%;
        line-height: 1;

        &.active {
            opacity: 1;
            pointer-events: auto;
        }
    }

    & .cardstack-panel {
        padding: 32px 40px 32px 40px;
        height: auto;

        & svg {
            margin-bottom: 14px;
        }

        & .quote,
        & .quote p,
        & .quote li {
            font-size: 24px;
            font-weight: 400;
            line-height: 1.4;
            color: rgba(4, 11, 18, 0.8);
            letter-spacing: -0.36px;
        }

        & .quote-author {
            margin-top: 24px;
            display: flex;

            p {
                margin: 0;
                padding: 0;
            }

            & :first-child {
                color: rgba(4, 11, 18, 0.8);
                font-weight: 700;
                font-size: 18px;
                font-style: normal;
                font-weight: 600;
                line-height: 1.25;
            }

            & :not(:first-child) {
                padding-left: 12px;
                margin-left: 12px;
                border-left: 1px solid #E5E5E9;
                font-style: italic;
                font-size: 18px;
                font-weight: 400;
                line-height: 1.25;
            }
        }
    }

    & .cardstack-container {
        perspective: 800px;
        position: relative;
        height: 340px;
    }

    & .cardstack-card {
        display: flex;
        position: absolute;
        top: 50%;
        left: 50%;
        justify-content: center;
        align-items: center;
        user-select: none;
        transform-style: preserve-3d;
        height: 312px;
        width: 276px;

        &.behind .cardstack-card-content {
            filter: brightness(0.8);
            pointer-events: none;
        }
    }

    & .cardstack-card-content {
        display: flex;
        border-radius: 12px;
        width: 100%;
        height: 100%;
        overflow: hidden;
        box-shadow:
            0 10px 15px -3px rgba(0, 0, 0, 0.1),
            0 4px 6px -2px rgba(0, 0, 0, 0.05);
        transition: filter 0.3s ease-out;
        filter: brightness(1);
        line-height: 1;

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            user-select: none;
            -webkit-user-drag: none;
            -khtml-user-drag: none;
            -moz-user-drag: none;
            -o-user-drag: none;
            user-drag: none;
            draggable: false;
        }
    }

    & .cardstack-dots-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        border-radius: 40px;
        padding: 16px 22px;
        background: rgba(210, 215, 220, 0.2);
        backdrop-filter: blur(10px);
    }

    & .cardstack-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(77, 117, 143, 0.30);
        cursor: pointer;
        border: none;
        padding: 0;
        transition: background-color 0.3s ease-out;
        position: relative;
        user-select: none;

        &::before {
            content: '';
            position: absolute;
            top: -12px;
            left: -4px;
            right: -4px;
            bottom: -12px;
            border-radius: 50%;
            background: transparent;
        }

        &.active {
            background: #4D758F;
        }

        &:focus-visible {
            outline: 2px solid #4D758F;
            outline-offset: 2px;
        }
    }

    & .cardstack-arrows-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        border-radius: 40px;
    }

    & .cardstack-arrow {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #4D758F;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.3s ease-out, transform 0.2s ease-out;
        user-select: none;
        color: white;

        &.at-edge {
            background: rgba(77, 117, 143, 0.50);
            cursor: default;
        }

        &:focus-visible {
            outline: 2px solid #4D758F;
            outline-offset: 2px;
        }

        & svg {
            width: 24px;
            height: 24px;
        }
    }

    & .cardstack-panel-measuring {
        opacity: 0 !important;
        position: absolute !important;
        visibility: hidden !important;
        display: block !important;
        pointer-events: none !important;
        left: -9999px !important;
        top: 0 !important;
        height: auto !important;
    }

    & .cardstack-overlay-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
        opacity: 1;
        border-radius: 12px;
        pointer-events: none;
        transition: opacity 0.3s ease-out;
    }

    & .cardstack-card-content-relative {
        position: relative;
    }

    & .cardstack-overlay-fadeout {
        opacity: 0 !important;
    }
}

@media (min-width: 969px) {
    .cardstack {
        &.cardstack-reverse {
            & .cardstack-left {
                order: 2;
                margin-left: 0;
                margin-right: 11px;
                width: 420px;
            }

            & .cardstack-right {
                order: 1;
            }

            & .cardstack-bottom {
                order: 3;
            }
        }
        &.cardstack-arrows {
            & .cardstack-panel-container {
                background: unset;
                position: relative;
                overflow: visible;
                min-height: 440px;
                height: auto;

                &::before {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    top: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 300vw;
                    background: rgba(210, 215, 220, 0.2);
                }
            }

            & .cardstack-left {
                z-index: 1;
                margin: 0;
            }

            & .cardstack-wrapper {
                gap: 20px 62px;
            }

            & .cardstack-container {
                height: 464px;
            }

            & .cardstack-card {
                width: 338px;
                height: 396px;
            }

            & .btn-wrap {
                margin-top: 32px;
            }
            
            & .cardstack-bottom {
                justify-content: flex-start;
            }

            .cardstack-panel {
                padding-left: 0;
                padding-right: 0;
                padding-top: 44px;
                padding-bottom: 44px;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;

                & .cardstack-panel-text {
                    flex-grow: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                }

                & .btn-wrap {
                    flex-shrink: 1;
                    margin-top: 44px;
                }
            }
        }
    }
}

@media (max-width: 1410px) and (min-width: 969px) {
    .cardstack {
        &.cardstack-arrows {
            & .cardstack-wrapper {
                gap: 20px 0px;
                justify-content: space-between;
            }
        }
    }
}

@media (max-width: 1200px) {
    .cardstack {
        & .cardstack-wrapper {
            gap: 20px;
        }

        & .cardstack-left {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        
        & .cardstack-panel .quote-author {
            flex-direction: column;

            & :not(:first-child) {
                padding-left: 0;
                margin-left: 0;
                border-left: none;
            }
        }
    }
}

@media (max-width: 968px) {
    .cardstack {
        & .cardstack-wrapper {
            gap: 8px;
            flex-direction: column;
        }

        & .cardstack-container {
            height: 340px;
        }

        & .cardstack-left {
            width: 100%;
            order: 1;
        }

        & .cardstack-bottom {
            order: 2;
        }

        & .cardstack-right {
            order: 3;
            padding: 0;
            width: 100%;
            align-items: flex-start;
            margin-top: 8px;
        }

        & .cardstack-dots-container {
            padding: 12px 20px;
            gap: 16px;
            margin-top: 2px;
        }
        
        & .cardstack-dot {
            width: 12px;
            height: 12px;

            &::before {
                top: -16px;
                left: -8px;
                right: -8px;
                bottom: -16px;
            }
        }

        & .cardstack-panel-container {
            margin: 0;
        }

        
        & .cardstack-panel .quote-author {
            flex-direction: column;

            & :not(:first-child) {
                padding-left: 0;
                margin-left: 0;
                border-left: none;
            }
        }

        & .cardstack-arrows-container {
            gap: 24px;
            margin-top: 2px;
        }
        
        & .cardstack-arrow {
            width: 48px;
            height: 48px;

            & svg {
                width: 28px;
                height: 28px;
            }
        }
    }
}

@media (max-width: 600px) {
    .cardstack .cardstack-panel {
        padding: 32px 16px 8px;

        & .quote, & .quote p, & .quote li {
            font-size: 20px;
            line-height: 1.4;
        }
        
        & .quote-author {
            & :first-child {
                font-size: 18px;
            }

            & :not(:first-child) {
                font-size: 16px;
                margin-top: 6px;
            }
        }
    }
    section.card-stack {
        .btn-wrap {
            margin-top: 32px;
            row-gap: 8px;
        }
    }
}