.gk-oval-cta {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.gk-oval-cta__inner {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gk-oval-cta__label {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    white-space: nowrap;
}

.gk-oval-cta--dark .gk-oval-cta__label,
.gk-oval-cta--light .gk-oval-cta__label {
    text-transform: capitalize;
    color: inherit;
}

.gk-oval-cta__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gk-oval-cta__arrow svg {
    display: block;
    width: 28px;
    height: 28px;
}

.gk-oval-cta--dark {
    color: var(--color-ash);
}

.gk-oval-cta--light {
    color: var(--color-forge);
}

@media (min-width: 769px) {
    .gk-oval-cta--dark .gk-oval-cta__inner,
    .gk-oval-cta--light .gk-oval-cta__inner {
        position: relative;
        gap: 0;
        width: 142px;
        min-width: 142px;
        max-width: 142px;
        height: 56px;
        padding: 0 14px;
        border-width: 1px;
        border-style: solid;
        border-radius: 50%;
        overflow: hidden;
        transition:
            border-color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
            color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
            gap 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .gk-oval-cta--dark .gk-oval-cta__inner {
        border-color: var(--color-ash);
    }

    .gk-oval-cta--light .gk-oval-cta__inner {
        border-color: var(--color-forge);
    }

    .gk-oval-cta--dark .gk-oval-cta__arrow,
    .gk-oval-cta--light .gk-oval-cta__arrow {
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        transform: translate3d(-3px, 0, 0);
        transition:
            max-width 0.45s cubic-bezier(0.33, 1, 0.68, 1),
            opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
    }

    .gk-oval-cta--dark:hover .gk-oval-cta__inner,
    .gk-oval-cta--dark:focus-visible .gk-oval-cta__inner,
    .gk-oval-cta--light:hover .gk-oval-cta__inner,
    .gk-oval-cta--light:focus-visible .gk-oval-cta__inner {
        gap: 4px;
        border-color: var(--color-flare);
        color: var(--color-flare);
    }

    .gk-oval-cta--dark:hover .gk-oval-cta__arrow,
    .gk-oval-cta--dark:focus-visible .gk-oval-cta__arrow,
    .gk-oval-cta--light:hover .gk-oval-cta__arrow,
    .gk-oval-cta--light:focus-visible .gk-oval-cta__arrow {
        max-width: 28px;
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@media (max-width: 768px) {
    .expertise .gk-oval-cta {
        margin-inline-start: auto;
    }

    .gk-oval-cta__inner {
        gap: 6px;
        padding: 0;
        border: 0;
        border-radius: 0;
        width: auto;
        min-width: 0;
        max-width: none;
        height: auto;
    }

    .gk-oval-cta__label {
        font-size: 16px;
        line-height: 24px;
        text-decoration: underline;
        text-underline-offset: 4px;
        text-decoration-thickness: 1px;
    }

    .gk-oval-cta__arrow {
        max-width: none;
        opacity: 1;
        transform: none;
        transition: none;
    }

    .gk-oval-cta--dark:hover,
    .gk-oval-cta--dark:focus-visible,
    .gk-oval-cta--light:hover,
    .gk-oval-cta--light:focus-visible {
        color: var(--color-flare);
    }

    .gk-oval-cta--dark:hover .gk-oval-cta__label,
    .gk-oval-cta--dark:focus-visible .gk-oval-cta__label,
    .gk-oval-cta--light:hover .gk-oval-cta__label,
    .gk-oval-cta--light:focus-visible .gk-oval-cta__label {
        text-decoration-color: var(--color-flare);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gk-oval-cta--dark .gk-oval-cta__arrow,
    .gk-oval-cta--light .gk-oval-cta__arrow {
        transition: none;
    }

    .gk-oval-cta--dark:hover .gk-oval-cta__arrow,
    .gk-oval-cta--dark:focus-visible .gk-oval-cta__arrow,
    .gk-oval-cta--light:hover .gk-oval-cta__arrow,
    .gk-oval-cta--light:focus-visible .gk-oval-cta__arrow {
        max-width: 28px;
        opacity: 1;
        transform: none;
    }
}