.services-section {
    position: relative;
    overflow: hidden;
    padding-block:
        clamp(
            5rem,
            9vw,
            9rem
        );

    background: var(--color-navy);
    color: var(--color-white);
    isolation: isolate;
}

.services-section::before {
    position: absolute;
    z-index: -1;
    top: -20rem;
    right: -18rem;
    width: 44rem;
    height: 44rem;
    border: 1px solid rgb(0 181 226 / 16%);
    border-radius: 50%;
    box-shadow:
        0 0 0 5rem rgb(0 181 226 / 3%),
        0 0 0 10rem rgb(0 181 226 / 2%);
    content: "";
}

.services-section::after {
    position: absolute;
    z-index: -2;
    inset: 0;
    background-image:
        linear-gradient(
            rgb(255 255 255 / 3%) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgb(255 255 255 / 3%) 1px,
            transparent 1px
        );
    background-size: 5rem 5rem;
    content: "";
    mask-image:
        linear-gradient(
            90deg,
            transparent,
            black 55%
        );
}

.services-section__header {
    margin-bottom:
        clamp(
            3rem,
            6vw,
            5rem
        );
}

.section-eyebrow--light {
    color: var(--color-cyan);
}

.services-section__heading {
    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(18rem, 0.9fr);
    align-items: end;
    gap:
        clamp(
            2rem,
            8vw,
            7rem
        );
}

.services-section__heading h2 {
    max-width: 16ch;
    font-size:
        clamp(
            2.25rem,
            4.5vw,
            4.5rem
        );
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.services-section__introduction {
    max-width: 38rem;
}

.services-section__introduction p {
    color: rgb(255 255 255 / 70%);
    font-size: 1.0625rem;
    line-height: 1.8;
}

.services-section__all-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: var(--space-3);
    color: var(--color-white);
    font-weight: 800;
}

.services-section__all-link span {
    color: var(--color-orange);
    transition: transform 180ms ease;
}

.services-section__all-link:hover span,
.services-section__all-link:focus-visible span {
    transform: translateX(0.25rem);
}

.services-layout {
    display: grid;
    grid-template-columns:
        minmax(24rem, 1.05fr)
        minmax(0, 0.95fr);
    align-items: stretch;
    gap: clamp(2.5rem, 5vw, 5rem);
}

.services-visual {
    position: relative;
    top: auto;
    height: 100%;
    align-self: stretch;
    margin: 0;
}

.services-visual__image {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 44rem;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            #004463,
            var(--color-navy)
        );
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: var(--radius-medium);
}

.services-visual__image::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgb(0 25 41 / 88%) 100%
        );
    content: "";
    pointer-events: none;
}

.services-visual__image img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
}

.services-visual__caption {
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-3);
    left: var(--space-3);
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid rgb(255 255 255 / 30%);
    color: var(--color-white);
}

.services-visual__caption-index {
    flex: 0 0 auto;
    color: var(--color-orange);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.services-visual__caption p {
    max-width: 22rem;
    color: rgb(255 255 255 / 82%);
    font-size: 0.9375rem;
    text-align: right;
}

.services-list {
    height: 100%;
    display: grid;
    grid-template-rows: repeat(6, minmax(0, 1fr));
    padding: 0;
    margin: 0;
    border-top: 1px solid rgb(255 255 255 / 18%);
    list-style: none;
}

.service-item {
    display: grid;

    grid-template-columns:
        2.5rem
        minmax(0, 1fr)
        2.75rem;

    align-items: center;

    gap:
        clamp(
            0.875rem,
            2vw,
            1.5rem
        );

    padding-block:
        clamp(
            1.2rem,
            2vw,
            1.75rem
        );

    border-bottom:
        1px solid
        rgb(255 255 255 / 18%);

    transition:
        background-color 180ms ease;
}


.service-item:hover {
    background:
        rgb(255 255 255 / 4%);
}

.service-item__number,
.service-item__content,
.service-item__link {
    transition:
        transform 180ms ease;
}


.service-item:hover .service-item__number,
.service-item:hover .service-item__content {
    transform:
        translateX(
            0.35rem
        );
}


.service-item:hover .service-item__link {
    transform:
        translateX(
            -0.2rem
        );
}

.service-item__number {
    padding-top: 0.35rem;
    color: var(--color-orange);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.service-item__content h3 {
    color: var(--color-white);
    font-size:
        clamp(
            1.15rem,
            1.7vw,
            1.45rem
        );
    line-height: 1.2;
}

.service-item__content p {
    max-width: 36rem;
    margin-top: 0.55rem;
    color: rgb(255 255 255 / 66%);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.service-item__link {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(255 255 255 / 24%);
    border-radius: 50%;
    color: var(--color-orange);
    font-size: 1.125rem;
    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.service-item__link:hover,
.service-item__link:focus-visible {
    background: var(--color-orange);
    border-color: var(--color-orange);
    color: var(--color-white);
    transform: translate(0.15rem, -0.15rem);
}

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

    .services-list {
    height: auto;
    display: block;
    }

    .services-layout {
        grid-template-columns: 1fr;
    }

    .services-visual {
        position: relative;
        top: auto;
    }

    .services-visual__image,
    .services-visual__image img {
        min-height: 34rem;
    }
}

@media (max-width: 650px) {
    .services-visual__image {
    min-height: 25rem;
    }

    .services-visual__image img {
    height: 25rem;
    }

    .services-visual__caption {
        align-items: flex-start;
        flex-direction: column;
    }

    .services-visual__caption p {
        text-align: left;
    }

    .service-item {
        grid-template-columns:
            2.25rem
            minmax(0, 1fr);
    }

    .service-item__link {
        grid-column: 2;
        margin-top: var(--space-1);
    }

    .service-item:hover {
        padding-inline: 0;
        background: transparent;
    }
}