/* =========================================================
   SERVICES PAGE
   ========================================================= */

.services-page-hero {
    padding: 88px 0 78px;

    overflow: hidden;

    background: var(--dark);
}

.services-page-intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 0.48fr);

    gap: 90px;

    align-items: end;
}

.services-page-title {
    max-width: 760px;

    margin: 0;

    color: #ffffff;

    font-family: var(--font-heading);

    font-size: clamp(
        3rem,
        5vw,
        5.4rem
    );

    font-weight: 600;

    line-height: 0.98;

    letter-spacing: -0.055em;
}

.services-page-intro-text {
    max-width: 430px;

    justify-self: end;
}

.services-page-intro-text p {
    margin-bottom: 24px;

    color: #a7afb4;

    font-size: 1rem;

    line-height: 1.75;
}


/* =========================================================
   SERVICES LIST
   ========================================================= */

.services-page-list {
    background: var(--bg-main);
}

.service-detail-row {
    display: grid;

    grid-template-columns:
        60px
        minmax(260px, 0.75fr)
        minmax(360px, 1fr);

    gap: 42px;

    padding: 72px 0;

    border-bottom: 1px solid var(--border);

    scroll-margin-top:
        calc(var(--header-height) + 30px);
}

.service-detail-row:first-child {
    border-top: 1px solid var(--border);
}

.service-detail-number {
    padding-top: 6px;

    color: var(--accent-dark);

    font-size: 0.68rem;

    font-weight: 700;
}

.service-detail-type {
    display: block;

    margin-bottom: 13px;

    color: var(--accent-dark);

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}

.service-detail-heading h2 {
    max-width: 440px;

    margin-bottom: 0;

    font-size: clamp(
        1.9rem,
        2.8vw,
        3rem
    );
}

.service-detail-copy {
    max-width: 570px;
}

.service-detail-copy p {
    margin-bottom: 15px;

    font-size: 0.94rem;

    line-height: 1.75;
}

.service-detail-copy .text-link {
    margin-top: 7px;
}


/* =========================================================
   DIAGNOSTIC FEATURE
   ========================================================= */

.diagnostic-feature {
    padding: 88px 0;

    overflow: hidden;

    background: var(--dark-soft);
}

.diagnostic-feature-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.03fr)
        minmax(0, 0.97fr);

    gap: 76px;

    align-items: center;
}

.diagnostic-feature-media {
    position: relative;

    min-width: 0;

    height: 570px;

    overflow: hidden;

    background: #20272b;
}

.diagnostic-feature-media img {
    width: 100%;
    height: 108%;

    object-fit: cover;
    object-position: center;

    transform-origin: center center;

    will-change: transform;
}

.diagnostic-photo-caption {
    position: absolute;

    left: 0;
    bottom: 0;

    width: min(100%, 280px);

    display: grid;

    gap: 4px;

    padding: 18px 21px;

    background: #ffffff;

    color: var(--text);
}

.diagnostic-photo-caption span {
    color: #768086;

    font-size: 0.64rem;

    font-weight: 700;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}

.diagnostic-photo-caption strong {
    font-family: var(--font-heading);

    font-size: 0.9rem;
}

.diagnostic-feature-copy {
    max-width: 590px;
}

.diagnostic-feature-copy h2 {
    margin-bottom: 24px;

    color: #ffffff;
}

.diagnostic-feature-lead {
    margin-bottom: 30px;

    color: #acb5ba;

    font-size: 1rem;

    line-height: 1.75;
}


/* =========================================================
   DIAGNOSTIC POINTS
   ========================================================= */

.diagnostic-points {
    margin-bottom: 30px;

    border-top: 1px solid var(--border-dark);
}

.diagnostic-points > div {
    display: grid;

    grid-template-columns:
        45px
        minmax(0, 1fr);

    gap: 16px;

    padding: 18px 0;

    border-bottom: 1px solid var(--border-dark);

    transition:
        padding-left 220ms ease;
}

.diagnostic-points > div:hover {
    padding-left: 7px;
}

.diagnostic-points span {
    color: #8599a6;

    font-size: 0.66rem;

    font-weight: 700;
}

.diagnostic-points p {
    margin: 0;

    color: #c1c8cc;

    font-size: 0.86rem;

    line-height: 1.6;
}


/* =========================================================
   ASSISTANCE
   ========================================================= */

.service-assistance {
    background: #ffffff;
}

.assistance-lines {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.assistance-line {
    position: relative;

    min-height: 205px;

    padding: 28px;

    border-right: 1px solid var(--border);

    transition:
        background-color 200ms ease;
}

.assistance-line:last-child {
    border-right: 0;
}

.assistance-line::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background: var(--accent);

    transform: scaleX(0);

    transform-origin: left center;

    transition:
        transform 300ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}

.assistance-line:hover {
    background: #f7f7f4;
}

.assistance-line:hover::before {
    transform: scaleX(1);
}

.assistance-line > span {
    display: block;

    margin-bottom: 43px;

    color: var(--accent-dark);

    font-size: 0.66rem;

    font-weight: 700;
}

.assistance-line strong {
    display: block;

    margin-bottom: 8px;

    font-family: var(--font-heading);

    font-size: 1rem;
}

.assistance-line p {
    max-width: 300px;

    margin: 0;

    font-size: 0.84rem;

    line-height: 1.6;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .services-page-intro {
        grid-template-columns: 1fr;

        gap: 32px;
    }

    .services-page-intro-text {
        justify-self: start;
    }

    .service-detail-row {
        grid-template-columns:
            45px
            minmax(220px, 0.8fr)
            minmax(280px, 1fr);

        gap: 25px;
    }

    .diagnostic-feature-grid {
        grid-template-columns: 1fr;

        gap: 48px;
    }

    .diagnostic-feature-media {
        height: 480px;
    }

    .assistance-lines {
        grid-template-columns: 1fr;
    }

    .assistance-line {
        min-height: auto;

        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .assistance-line:last-child {
        border-bottom: 0;
    }

    .assistance-line > span {
        margin-bottom: 20px;
    }

}


@media (max-width: 700px) {

    .services-page-hero {
        padding: 56px 0 52px;
    }

    .services-page-title {
        font-size: clamp(
            2.7rem,
            13vw,
            4rem
        );
    }

    .service-detail-row {
        grid-template-columns:
            32px
            minmax(0, 1fr);

        gap: 14px;

        padding: 44px 0;
    }

    .service-detail-number {
        grid-column: 1;

        grid-row: 1 / span 2;
    }

    .service-detail-heading,
    .service-detail-copy {
        grid-column: 2;
    }

    .diagnostic-feature {
        padding: 62px 0;
    }

    .diagnostic-feature-media {
        height: 360px;
    }

}


@media (max-width: 430px) {

    .diagnostic-feature-media {
        height: 300px;
    }

}