.services-highlight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.services-highlight-stage {
    position: relative;
}

.services-highlight-card {
    --q-size: clamp(158px, 18.5vw, 276px);
    --q-safe-x: clamp(124px, 13.8vw, 206px);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.58);
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.88), rgba(239, 244, 252, 0.8)),
    radial-gradient(320px 140px at 8% 8%, rgba(148, 46, 135, 0.06), transparent 74%);
    box-shadow: 0 14px 24px -18px rgba(15, 23, 42, 0.3);
    padding: 1rem;
    display: grid;
    gap: 0.46rem;
    align-content: start;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.services-highlight-card:hover {
    transform: translateY(-2px);
    border-color: rgba(148, 46, 135, 0.3);
    box-shadow: 0 18px 28px -18px rgba(82, 39, 120, 0.28);
}

.services-highlight-card h3 {
    margin: 0.08rem 0 0;
    color: #5a2b82;
    font-size: 1.04rem;
    font-weight: 700;
    position: relative;
    z-index: 2;
    padding-bottom: 0.42rem;
}

.services-highlight-card h3::after {
    content: "";
    display: block;
    width: 72px;
    height: 3px;
    margin-top: 0.42rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(90, 43, 130, 0.86), rgba(148, 46, 135, 0.2));
}

.services-highlight-card p {
    margin: 0;
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.45;
    position: relative;
    z-index: 2;
}

.services-highlight-list {
    margin: 0.18rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.22rem;
    list-style: none;
    color: #4b5567;
    font-size: 0.84rem;
    line-height: 1.35;
    position: relative;
    z-index: 2;
}

.services-highlight-list li {
    display: grid;
    grid-template-columns: 0.85rem 1fr;
    align-items: start;
    column-gap: 0.42rem;
}

.services-highlight-list li::before {
    content: "";
    width: 0.72rem;
    height: 0.72rem;
    margin-top: 0.08rem;
    background: url("../assets/rr-icon.svg") center / contain no-repeat;
    opacity: 0.9;
}

.services-highlight-card-cta {
    margin-top: 0.18rem;
    color: #522778;
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    position: relative;
    z-index: 2;
}

.services-highlight-quarter {
    position: absolute;
    width: var(--q-size);
    height: var(--q-size);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36);
    z-index: 1;
}

.services-highlight-quarter img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.services-highlight-quarter--br {
    right: 0;
    bottom: 0;
    border-radius: 100% 0 0 0;
}

.services-highlight-quarter--bl {
    left: 0;
    bottom: 0;
    border-radius: 0 100% 0 0;
}

.services-highlight-quarter--tr {
    right: 0;
    top: 0;
    border-radius: 0 0 0 100%;
}

.services-highlight-quarter--tl {
    left: 0;
    top: 0;
    border-radius: 0 0 100% 0;
}

.services-highlight-card--lt,
.services-highlight-card--lb {
    padding-right: calc(var(--q-safe-x) + 1.25rem);
}

.services-highlight-card--rt,
.services-highlight-card--rb {
    padding-left: calc(var(--q-safe-x) + 1.25rem);
    justify-items: end;
    text-align: right;
}

.services-highlight-card--rt h3::after,
.services-highlight-card--rb h3::after {
    margin-left: auto;
}

.services-highlight-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(96px, 10.6vw, 148px);
    height: clamp(96px, 10.6vw, 148px);
    border-radius: 999px;
    background: linear-gradient(140deg, rgba(82, 39, 120, 0.96), rgba(148, 46, 135, 0.93));
    border: 1px solid rgba(255, 255, 255, 0.56);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 20px 30px -18px rgba(82, 39, 120, 0.62);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    cursor: pointer;
    transition: box-shadow 0.34s ease, border-color 0.34s ease;
}

.services-highlight-center::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #ffffff;
    clip-path: circle(0% at 50% 50%);
    transition: clip-path 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.services-highlight-center-icon {
    position: absolute;
    width: 52%;
    height: 52%;
    object-fit: contain;
    z-index: 1;
    transition: clip-path 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.services-highlight-center-icon--white {
    filter: brightness(0) invert(1);
    clip-path: circle(75% at 50% 50%);
}

.services-highlight-center-icon--color {
    filter: none;
    clip-path: circle(0% at 50% 50%);
}

.services-highlight-center:hover {
    border-color: rgba(82, 39, 120, 0.25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 20px 30px -18px rgba(82, 39, 120, 0.3);
}

.services-highlight-center:hover::before {
    clip-path: circle(75% at 50% 50%);
}

.services-highlight-center:hover .services-highlight-center-icon--white {
    clip-path: circle(0% at 50% 50%);
}

.services-highlight-center:hover .services-highlight-center-icon--color {
    clip-path: circle(75% at 50% 50%);
}

@media (min-width: 1181px) {
    .services-highlight-card {
        --q-size: clamp(188px, 19.6vw, 296px);
        --q-safe-x: clamp(144px, 15.2vw, 232px);
        min-height: 250px;
    }
}

@media (max-width: 1180px) {
    .services-highlight-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .services-highlight-grid {
        grid-template-columns: 1fr;
    }

    .services-highlight-center {
        display: none;
    }

    .services-highlight-card {
        --q-size: clamp(128px, 33vw, 186px);
        --q-safe-x: clamp(96px, 24vw, 140px);
    }

    .services-highlight-quarter {
        width: var(--q-size);
        height: var(--q-size);
    }
}