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

/* ========================================
   SERVICES BANNER
========================================= */

/* Mobile - 0rem+ */

@media (min-width: 0rem) {

    .services-hero {
        position: relative;

        display: flex;
        align-items: flex-end;

        min-height: 17rem;

        overflow: hidden;

        color: #fff;
        background: var(--forest);
    }

    .services-hero__image,
    .services-hero__overlay {
        position: absolute;
        inset: 0;
    }

    .services-hero__image img {
        display: block;

        width: 100%;
        height: 100%;

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

    .services-hero__overlay {
        background:
            linear-gradient(
                to bottom,
                rgba(5, 20, 15, .76) 0%,
                rgba(5, 20, 15, .54) 25%,
                rgba(5, 20, 15, .30) 55%,
                rgba(5, 20, 15, .48) 100%
            );
    }

    .services-hero__inner {
        position: relative;
        z-index: 2;

        width: 100%;

        padding:
            6.5rem
            1.5rem
            2.5rem;
    }

    .services-hero h1 {
        margin: 0;

        font-family: var(--serif);
        font-size: clamp(2.7rem, 11vw, 3.8rem);
        font-weight: 400;
        line-height: 1;
    }

    /* Services page navigation logo */

    .services-page .nav__logo .nav__logo-green {
        display: none;
    }

    .services-page .nav__logo .nav__logo-white {
        display: block;
    }

}


/* Tablet - 48rem+ */

@media (min-width: 48rem) {

    .services-hero {
        min-height: 20rem;
    }

    .services-hero__inner {
        padding:
            8rem
            4rem
            3rem;
    }

    .services-hero h1 {
        font-size: clamp(3.6rem, 6vw, 4.8rem);
    }

}


/* Desktop - 64rem+ */

@media (min-width: 64rem) {

    .services-hero {
        min-height: 22rem;
    }

    .services-hero__inner {
        width: min(90%, var(--max-width));

        margin: 0 auto;

        padding:
            8rem
            0
            3.5rem;
    }

    .services-hero h1 {
        font-size: clamp(4rem, 4vw, 5rem);
    }
    .services-page .nav__logo .nav__logo-green {
        display: none;
    }
    .services-page .nav__logo .nav__logo-white {
        display: block;
    }

}

/* ========================================
   SERVICES INTRO
========================================= */

/* Mobile - 0px+ */
@media (min-width: 0rem) {

    .services-intro {
        padding:
            5rem
            1.5rem;

        background: var(--cream);
    }

    .services-intro__inner {
        display: grid;
        gap: 2.5rem;

        width: 100%;
        max-width: var(--max-width);

        margin: 0 auto;
    }

    .services-intro h2 {
        margin: 0;

        color: var(--forest);

        font-family: var(--serif);
        font-size: clamp(2.6rem, 10vw, 4rem);
        font-weight: 400;
        line-height: 1;
    }

    .services-intro__copy {
        max-width: 36rem;

        color: #4f5b55;

        line-height: 1.75;
    }

    .services-intro__copy p:first-child {
        margin-top: 0;
    }

    .services-intro__copy p:last-child {
        margin-bottom: 0;
    }

}


/* Tablet - 768px+ */

@media (min-width: 48rem) {

    .services-intro {
        padding:
            6rem
            4rem;
    }

    .services-intro__inner {
        grid-template-columns: 1fr 1fr;
        gap: 5rem;

        align-items: start;
    }

}


/* Desktop - 1024px+ */

@media (min-width: 64rem) {

    .services-intro {
        padding:
            8rem
            5%;
    }

    .services-intro__inner {
        grid-template-columns: .9fr 1.1fr;
        gap: clamp(6rem, 8vw, 9rem);
    }

    .services-intro h2 {
        font-size: clamp(3rem, 4vw, 4.5rem);
    }

    .services-intro__copy {
        max-width: 42rem;

        font-size: 1.05rem;
    }

}


/* ========================================
   SERVICE DETAILS
========================================= */

/* Mobile - 0px+ */

@media (min-width: 0rem) {

    .service-detail {
        padding:
            4.5rem
            1.5rem;

        background: var(--cream-light);
    }

    .service-detail--reverse {
        background: var(--cream);
    }

    .service-detail__inner {
        display: grid;
        gap: 3rem;

        width: 100%;
        max-width: var(--max-width);

        margin: 0 auto;
    }

    .service-detail__image {
        width: 100%;

        aspect-ratio: 1 / .8;

        overflow: hidden;

        border-radius:
            18% 6% 18% 6% /
            12% 8% 14% 10%;
    }

    .service-detail__image img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;

        transition: transform .6s ease;
    }

    .service-detail__image:hover img {
        transform: scale(1.03);
    }

    .service-detail__content {
        position: relative;
    }

    .service-detail__number {
        display: block;

        margin-bottom: 1rem;

        color: rgba(7, 22, 17, 0.60);

        font-family: var(--serif);
        font-size: 1.2rem;
    }

    .service-detail h2 {
        max-width: 34rem;

        margin: 0;

        color: var(--forest);

        font-family: var(--serif);
        font-size: clamp(2.3rem, 9vw, 3.8rem);
        font-weight: 400;
        line-height: 1.05;
    }

    .service-detail__content > p:not(.eyebrow) {
        max-width: 34rem;

        color: #52605a;

        line-height: 1.75;
    }

    .service-detail__list {
        display: grid;
        gap: .8rem;

        margin: 2rem 0 0;
        padding: 0;

        list-style: none;
    }

    .service-detail__list li {
        position: relative;

        padding-left: 1.5rem;

        color: #35433d;

        font-size: .9rem;
        line-height: 1.5;
    }

    .service-detail__list li::before {
        content: "";

        position: absolute;
        top: .5rem;
        left: 0;

        width: .45rem;
        height: .45rem;

        background: var(--forest);

        border-radius: 50%;
    }

}


/* Tablet - 768px+ */

@media (min-width: 48rem) {

    .service-detail {
        padding:
            6rem
            4rem;
    }

    .service-detail__inner {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;

        align-items: center;
    }

    .service-detail--reverse .service-detail__image {
        order: 2;
    }

    .service-detail--reverse .service-detail__content {
        order: 1;
    }

    .service-detail__image {
        aspect-ratio: .9;
    }

    .service-detail h2 {
        font-size: clamp(2.7rem, 5vw, 3.8rem);
    }

}


/* Desktop - 1024px+ */

@media (min-width: 64rem) {

    .service-detail {
        padding:
            8rem
            5%;
    }

    .service-detail__inner {
        grid-template-columns: 1.1fr .9fr;
        gap: clamp(5rem, 8vw, 9rem);
    }

    .service-detail--reverse .service-detail__inner {
        grid-template-columns: .9fr 1.1fr;
    }

    .service-detail__image {
        aspect-ratio: 1.1;
    }

    .service-detail h2 {
        font-size: clamp(3rem, 3.7vw, 4.6rem);
    }

    .service-detail__content > p:not(.eyebrow) {
        font-size: 1rem;
    }

    .service-detail__list li {
        font-size: .95rem;
    }

}

/* ========================================
   SERVICES PROCESS
========================================= */


/* Mobile - 0rem+ */

@media (min-width: 0rem) {

    .services-process {
        padding:
            5.5rem
            1.5rem;

        color: #fff;
        background: var(--forest);
    }

    .services-process__inner {
        width: 100%;
        max-width: var(--max-width);

        margin: 0 auto;
    }

    .services-process__heading {
        max-width: 38rem;

        margin-bottom: 4rem;
    }

    .services-process__heading h2 {
        margin:
            0
            0
            1.5rem;

        font-family: var(--serif);
        font-size: clamp(2.7rem, 10vw, 4.2rem);
        font-weight: 400;
        line-height: 1;
    }

    .services-process__intro {
        max-width: 31rem;

        margin:
            0
            0
            1.75rem;

        color: rgba(255, 255, 255, .7);

        font-size: .9rem;
        line-height: 1.75;
    }

    .services-process__link {
        display: inline-flex;
        gap: .65rem;
        align-items: center;

        padding-bottom: .3rem;

        color: #fff;

        border-bottom: 1px solid rgba(255,255,255,.45);

        font-size: .75rem;
        font-weight: 600;
        letter-spacing: .08em;

        text-decoration: none;
        text-transform: uppercase;

        transition:
            border-color .3s ease,
            opacity .3s ease;
    }

    .services-process__link span {
        transition: transform .3s ease;
    }

    .services-process__link:hover {
        border-color: #fff;
    }

    .services-process__link:hover span {
        transform: translateX(.3rem);
    }


    /* Steps */

    .services-process__steps {
        border-top: 1px solid rgba(255,255,255,.2);
    }

    .services-process__step {
        display: grid;
        grid-template-columns: 2.5rem 1fr;
        gap: 1.25rem;

        padding:
            1.75rem
            0;

        border-bottom: 1px solid rgba(255,255,255,.2);
    }

    .services-process__number {
        padding-top: .2rem;

        color: rgba(255,255,255,.55);

        font-family: var(--serif);
        font-size: 1rem;
    }

    .services-process__step h3 {
        margin:
            0
            0
            .4rem;

        font-family: var(--serif);
        font-size: 1.65rem;
        font-weight: 400;
    }

    .services-process__step p {
        max-width: 27rem;

        margin: 0;

        color: rgba(255,255,255,.65);

        font-size: .85rem;
        line-height: 1.65;
    }

}


/* Tablet - 48rem+ */

@media (min-width: 48rem) {

    .services-process {
        padding:
            7rem
            4rem;
    }

    .services-process__heading {
        margin-bottom: 5rem;
    }

    .services-process__heading h2 {
        font-size: clamp(3.2rem, 6vw, 4.5rem);
    }

    .services-process__step {
        grid-template-columns: 4rem 1fr;

        gap: 1.5rem;

        padding:
            2rem
            0;
    }

    .services-process__number {
        font-size: 1.15rem;
    }

    .services-process__step h3 {
        font-size: 1.9rem;
    }

}


/* Desktop - 64rem+ */

@media (min-width: 64rem) {

    .services-process {
        padding:
            8rem
            5%;
    }

    .services-process__inner {
        display: grid;
        grid-template-columns:
            minmax(0, .9fr)
            minmax(0, 1.1fr);

        gap: clamp(6rem, 10vw, 11rem);

        align-items: start;
    }

    .services-process__heading {
        position: sticky;
        top: 8rem;

        margin-bottom: 0;
    }

    .services-process__heading h2 {
        font-size: clamp(3.2rem, 4vw, 4.6rem);
    }

    .services-process__intro {
        font-size: .95rem;
    }

    .services-process__step {
        grid-template-columns: 4.5rem 1fr;

        padding:
            2.25rem
            0;
    }

    .services-process__number {
        font-size: 1.25rem;
    }

    .services-process__step h3 {
        font-size: 2rem;
    }

    .services-process__step p {
        font-size: .9rem;
    }

}

/* ========================================
   SERVICES CTA
========================================= */

/* Mobile - 0px+ */

@media (min-width: 0rem) {

    .services-cta {
        padding:
            6rem
            1.5rem;

        text-align: center;

        background: var(--cream);
    }

    .services-cta__inner {
        width: 100%;
        max-width: 44rem;

        margin: 0 auto;
    }

    .services-cta h2 {
        margin: 0;

        color: var(--forest);

        font-family: var(--serif);
        font-size: clamp(2.7rem, 10vw, 4.5rem);
        font-weight: 400;
        line-height: 1;
    }

    .services-cta p:not(.eyebrow) {
        max-width: 32rem;

        margin:
            1.5rem
            auto
            2rem;

        color: #55615b;

        line-height: 1.7;
    }

    .services-cta .button {
        white-space: nowrap;
    }

}


/* Tablet - 768px+ */

@media (min-width: 48rem) {

    .services-cta {
        padding:
            7rem
            4rem;
    }

    .services-cta h2 {
        font-size: clamp(3.5rem, 6vw, 4.8rem);
    }

}


/* Desktop - 1024px+ */

@media (min-width: 64rem) {

    .services-cta {
        padding:
            9rem
            5%;
    }

    .services-cta__inner {
        max-width: 50rem;
    }

    .services-cta h2 {
        font-size: clamp(4rem, 4.5vw, 5.2rem);
    }

}