/* Service detail / introduction, scope and preparation. */
.service-intro {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(36px, 5vw, 85px);
    align-items: center;
    padding-block: 75px;
}
.service-intro-copy h2 {
    font-size: clamp(30px, 3vw, 46px);
    margin-bottom: 28px;
}
.service-intro-copy > p:not(.eyebrow) {
    color: #62675b;
    font-size: 16px;
    line-height: 2.1;
}
.service-intro-copy h3 {
    margin: 32px 0 14px;
    font-size: 20px;
}
.service-suitable {
    padding-left: 20px;
    color: #62675b;
    margin: 0 0 30px;
}
.service-suitable li {
    padding-block: 4px;
}
.service-intro-image {
    margin: 0;
    position: relative;
}
.service-intro-image img {
    aspect-ratio: 1.02;
    box-shadow: 18px 18px 0 #e1dccf;
}
.service-intro-image figcaption {
    font-size: 13px;
    letter-spacing: .08em;
    padding-top: 27px;
    color: #686752;
}
.service-features {
    background: #343e31;
    color: #f2eee3;
    padding-block: 75px;
}
.service-features > h2 {
    max-width: 850px;
}
.service-features .eyebrow {
    color: #d5c6a2;
}
.service-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4vw;
    margin-top: 45px;
}
.service-feature {
    border-top: 1px solid #7f8a73;
    padding-top: 27px;
}
.feature-number {
    font: 50px var(--serif);
    color: #c7b38a;
}
.service-feature h3 {
    font-size: 23px;
    margin: 25px 0 20px;
}
.service-feature p {
    color: #d4dacb;
    font-size: 15px;
    line-height: 2;
    margin-bottom: 0;
}
.service-scope {
    display: grid;
    grid-template-columns: .75fr 1.5fr;
    gap: 6vw;
    padding-block: 80px;
}
.scope-heading > p:not(.eyebrow) {
    color: var(--muted);
    max-width: 300px;
}
.scope-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
}
.scope-item {
    padding: 25px 0;
    border-top: 1px solid #b8b9a8;
}
.scope-item h3 {
    font-size: 22px;
}
.scope-item p {
    margin-bottom: 0;
    color: #65695c;
}
.service-preparation {
    background: #e9e3d6;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px 6vw;
    padding-block: 65px;
    margin-bottom: 60px;
}
.service-preparation h2 {
    font-size: 28px;
}
.service-preparation > div > p:not(.eyebrow) {
    color: #616352;
    line-height: 2;
}
.service-preparation .info-note {
    grid-column: 1 / -1;
    margin: 0;
    background: #f2eee4;
}
@media (max-width: 1000px) {
    .service-intro {
        gap: 35px;
    }
    .service-intro-copy h2 {
        font-size: 32px;
    }
    .service-scope {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}
@media (max-width: 700px) {
    .service-intro {
        grid-template-columns: 1fr;
        padding-block: 45px;
    }
    .service-intro-image img {
        aspect-ratio: 1.3;
        box-shadow: 10px 10px 0 #e1dccf;
    }
    .service-feature-grid,
    .scope-grid,
    .service-preparation {
        grid-template-columns: 1fr;
        gap: 26px;
    }
    .service-features,
    .service-scope,
    .service-preparation {
        padding-block: 50px;
    }
    .service-feature h3 {
        margin-top: 18px;
    }
    .scope-item {
        padding-bottom: 0;
    }
}