.servicesCards {
    width: min(var(--site-max), 100%);
    display: flex;
    flex-direction: column;
    gap: var(--spacer-arrow);
    margin: 0 auto;
}

    .servicesCards .svc-viewport {
        overflow: hidden;
        width: 100%;
    }

    .servicesCards .svc-track {
        display: flex;
        gap: 24px;
        transition: transform 0.55s var(--ease);
        will-change: transform;
    }

        .servicesCards .svc-track .svc-card:first-child {
            margin-left: var(--gutter);
        }

    .servicesCards .svc-card {
        position: relative;
        flex: 0 0 436px;
        /*height: 60vh;
        max-width: 56vh;*/
        width: clamp(280px, 104vh, 436px);
        height: clamp(195px, 60vh, 552px);
        overflow: hidden;
        display: block;
        text-decoration: none;
        color: inherit;
        cursor: pointer;
    }

    .servicesCards .svc-card__img {
        position: absolute;
        inset: 0;
    }

        .servicesCards .svc-card__img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .servicesCards .svc-card__glow {
        position: absolute;
        left: -245px;
        top: 280px;
        width: 606px;
        height: 545px;
        display: flex;
        align-items: center;
        justify-content: center;
        mix-blend-mode: screen;
        pointer-events: none;
    }

        .servicesCards .svc-card__glow::before {
            content: "";
            width: 593px;
            height: 227px;
            background: var(--bg-primary-strong);
            filter: blur(74.8px);
            transform: rotate(-38.21deg);
        }

    .servicesCards .svc-card__overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.34);
        opacity: 0;
        transition: opacity var(--t-base) var(--ease);
    }

    .servicesCards .svc-card:hover .svc-card__overlay,
    .servicesCards .svc-card:focus-visible .svc-card__overlay {
        opacity: 1;
    }

    .servicesCards .svc-card__arrow {
        position: absolute;
        top: 24px;
        right: 24px;
        z-index: 3;
        width: 40px;
        height: 40px;
        color: var(--icon-inverse);
        opacity: 0;
        transform: translate(-6px, 6px);
        transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
        pointer-events: none;
    }

        .servicesCards .svc-card__arrow svg {
            width: 100%;
            height: 100%;
            display: block;
            transform: rotate(-45deg);
        }

    .servicesCards .svc-card:hover .svc-card__arrow,
    .servicesCards .svc-card:focus-visible .svc-card__arrow {
        opacity: 1;
        transform: translate(0, 0);
    }

    .servicesCards .svc-card__content {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 436px;
        max-width: 100%;
        min-height: 176px;
        padding: 48px 16px;
        display: flex;
        flex-direction: column;
        gap: 0;
        justify-content: center;
        background: var(--bg-neutral-strong);
        border-top-right-radius: 128px;
    }

    .servicesCards .svc-card__desc {
        max-width: 380px;
        font-weight: var(--fw-light);
        font-family: var(--font-tpSans-light);
        /*font-size: var(--fs-18);*/
        /*line-height: var(--lh-24);*/
        color: var(--body-default);
        margin-top: 0;
        max-height: 0;
        opacity: 0;
        transform: translateY(12px);
        overflow: hidden;
        transition: max-height var(--t-base) var(--ease), opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), margin-top var(--t-base) var(--ease);
    }

    .servicesCards .svc-card:hover .svc-card__desc,
    .servicesCards .svc-card:focus-visible .svc-card__desc {
        margin-top: 16px;
        max-height: 220px;
        opacity: 1;
        transform: translateY(0);
    }

    .servicesCards .svc-card__title {
        max-width: 360px;
        font-weight: var(--fw-extralight);
        font-family: var(--font-tpSans-exLight);
        /*font-size: var(--fs-40);*/
        /*line-height: var(--lh-40);*/
        background: linear-gradient(70.88deg, #000 18.37%, #8051ff 48.47%, #000 92.19%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .servicesCards .svc-action {
        display: flex;
        gap: 24px;
        align-items: center;
        justify-content: center;
        height: 56px;
        width: 100%;
    }

        .servicesCards .svc-action.is-hidden {
            display: none;
        }

        .servicesCards .svc-action .kpi-btn {
            background: var(--bg-neutral-subtle);
            box-shadow: none;
        }

    .servicesCards .svc-progress {
        position: relative;
        width: 581px;
        max-width: 46%;
        height: 1px;
        background: var(--bg-neutral-strong);
    }

    .servicesCards .svc-progress__fill {
        position: absolute;
        left: 0;
        top: -1.5px;
        height: 4px;
        width: 40%;
        background: var(--bg-primary-strong);
        transition: width 0.45s var(--ease);
    }


    .servicesCards .kpi-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        flex: none;
        background: var(--bg-default);
        color: var(--icon-default);
        position: relative;
        isolation: isolate;
        overflow: hidden;
        transition: color var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
        box-shadow: 0 4px 20px rgba(16, 12, 40, 0.06);
    }

        .servicesCards .kpi-btn svg {
            width: 24px;
            height: 24px;
            position: relative;
            z-index: 2;
        }

        .servicesCards .kpi-btn::before {
            content: "";
            position: absolute;
            inset: 0;
            background: var(--bg-primary-strong);
            transform: scaleX(0);
            transform-origin: left center;
            z-index: 1;
            transition: transform var(--t-base) var(--ease);
        }

        .servicesCards .kpi-btn:hover::before,
        .servicesCards .kpi-btn:focus-visible::before {
            transform: scaleX(1);
        }

        .servicesCards .kpi-btn:hover,
        .servicesCards .kpi-btn:focus-visible {
            color: var(--icon-inverse);
        }

    .servicesCards .kpi-btn--back.is-hidden {
        opacity: 0;
        pointer-events: none;
    }

    .servicesCards .kpi-btn[disabled] {
        opacity: 0.35;
        pointer-events: none;
    }

@media (max-width: 767px) {
    .servicesCards .svc-card {
        flex: 0 0 84%;
        max-width: 84%;
    }
}