/* ========================================
   PROCESS PAGE
========================================= */


/* ========================================
   PROCESS BANNER
========================================= */

/* Mobile - 0rem+ */

@media (min-width: 0rem) {

    .process-banner {
        position: relative;

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

        min-height: 17rem;

        overflow: hidden;

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

    .process-banner__image,
    .process-banner__overlay {
        position: absolute;
        inset: 0;
    }

    .process-banner__image img {
        display: block;

        width: 100%;
        height: 100%;

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

    .process-banner__overlay {
        background:
            linear-gradient(
                to bottom,
                rgba(5, 20, 15, .92) 0%,
                rgba(5, 20, 15, .74) 20%,
                rgba(5, 20, 15, .46) 52%,
                rgba(5, 20, 15, .58) 100%
            );
    }

    .process-banner__inner {
        position: relative;
        z-index: 2;

        width: 100%;

        padding:
            6.5rem
            1.5rem
            2.5rem;
    }

    .process-banner .eyebrow {
        color: #fff;
        opacity: 1;

        font-weight: 600;

        text-shadow:
            0 1px 8px rgba(0, 0, 0, .35);
    }

    .process-banner h1 {
        margin: 0;

        color: #fff;

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

        text-shadow:
            0 2px 12px rgba(0, 0, 0, .2);
    }

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

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

}


/* Tablet - 48rem+ */

@media (min-width: 48rem) {

    .process-banner {
        min-height: 20rem;
    }

    .process-banner__inner {
        padding:
            8rem
            4rem
            3rem;
    }

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

}


/* Desktop - 64rem+ */

@media (min-width: 64rem) {

    .process-banner {
        min-height: 22rem;
    }

    .process-banner__inner {
        width: min(90%, var(--max-width));

        margin: 0 auto;

        padding:
            8rem
            0
            3.5rem;
    }

    .process-banner h1 {
        font-size: clamp(4rem, 4vw, 5rem);
    }

}


/* ========================================
   PROCESS INTRO
========================================= */

/* Mobile - 0rem+ */

@media (min-width: 0rem) {

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

        background: var(--cream);
    }

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

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

        margin: 0 auto;
    }

    .process-intro__heading h2 {
        max-width: 38rem;

        margin: 0;

        color: var(--forest);

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

    .process-intro__copy {
        max-width: 35rem;
    }

    .process-intro__copy p {
        margin:
            0
            0
            1.2rem;

        color: #52605a;

        line-height: 1.75;
    }

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

}


/* Tablet - 48rem+ */

@media (min-width: 48rem) {

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

    .process-intro__inner {
        grid-template-columns: 1.1fr .9fr;
        gap: 5rem;

        align-items: end;
    }

}


/* Desktop - 64rem+ */

@media (min-width: 64rem) {

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

    .process-intro__inner {
        grid-template-columns: 1.2fr .8fr;
        gap: clamp(6rem, 10vw, 11rem);
    }

    .process-intro__heading h2 {
        font-size: clamp(3.2rem, 4vw, 4.8rem);
    }

}


/* ========================================
   PROCESS STEPS
========================================= */

/* Mobile - 0rem+ */

@media (min-width: 0rem) {

    .process-steps {
        overflow: hidden;

        padding:
            5rem
            1.5rem;

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

    .process-steps__inner {
        max-width: var(--max-width);

        margin: 0 auto;
    }

    .process-steps__header {
        max-width: 40rem;

        margin-bottom: 4rem;
    }

    .process-steps__header h2 {
        margin: 0;

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

    .process-timeline {
        position: relative;
    }

    .process-timeline__track {
        position: absolute;
        z-index: 0;

        top: 1.5rem;
        bottom: 2rem;
        left: 1.45rem;

        width: 1px;

        overflow: hidden;

        background: rgba(255,255,255,.16);
    }

    .process-timeline__progress {
        width: 100%;
        height: 0;

        background: var(--cream);
    }

    .process-step {
        position: relative;
        z-index: 1;

        display: grid;
        grid-template-columns: 3rem 1fr;
        gap:
            0
            1.5rem;

        padding-bottom: 5rem;
    }

    .process-step:last-child {
        padding-bottom: 0;
    }

    .process-step__marker {
        grid-column: 1;
        grid-row: 1 / span 2;

        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    .process-step__marker span {
        display: grid;
        place-items: center;

        width: 3rem;
        height: 3rem;

        color: var(--forest);
        background: var(--cream);

        border-radius: 50%;

        font-family: var(--sans);
        font-size: .65rem;
        font-weight: 700;
        letter-spacing: .08em;
    }

    .process-step__content {
        grid-column: 2;

        padding-top: .15rem;
    }

    .process-step__eyebrow {
        margin:
            0
            0
            .7rem;

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

        font-family: var(--sans);
        font-size: .65rem;
        font-weight: 600;
        letter-spacing: .16em;

        text-transform: uppercase;
    }

    .process-step__content h3 {
        max-width: 31rem;

        margin:
            0
            0
            1.3rem;

        font-family: var(--serif);
        font-size: clamp(2rem, 8vw, 3rem);
        font-weight: 400;
        line-height: 1.05;
    }

    .process-step__content p:not(.process-step__eyebrow) {
        max-width: 34rem;

        margin:
            0
            0
            1rem;

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

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

    .process-step__image {
        grid-column: 2;

        overflow: hidden;

        margin-top: 1.5rem;

        aspect-ratio: 1.2 / 1;

        border-radius:
            8% 3% 9% 3% /
            7% 4% 10% 5%;
    }

    .process-step__image img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;

        transform: scale(1.02);

        transition:
            transform 1.2s ease;
    }

    .process-step.is-active .process-step__image img {
        transform: scale(1);
    }

}


/* Tablet - 48rem+ */

@media (min-width: 48rem) {

    .process-steps {
        padding:
            6rem
            4rem;
    }

    .process-steps__header {
        margin-bottom: 5rem;
    }

    .process-step {
        grid-template-columns: 4rem 1fr;
        gap:
            0
            2.5rem;

        padding-bottom: 7rem;
    }

    .process-timeline__track {
        left: 1.95rem;
    }

    .process-step__marker span {
        width: 4rem;
        height: 4rem;
    }

    .process-step__content h3 {
        font-size: clamp(2.5rem, 5vw, 3.5rem);
    }

    .process-step__image {
        margin-top: 2rem;

        aspect-ratio: 1.6 / 1;
    }

}


/* Desktop - 64rem+ */

@media (min-width: 64rem) {

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

    .process-steps__header {
        margin-bottom: 7rem;
    }

    .process-steps__header h2 {
        font-size: clamp(3.5rem, 4vw, 4.8rem);
    }

    .process-timeline__track {
        top: 2rem;
        bottom: 3rem;
        left: 2.45rem;
    }

    .process-step {
        grid-template-columns:
            5rem
            minmax(0, .8fr)
            minmax(24rem, 1.2fr);

        gap:
            0
            clamp(3rem, 6vw, 7rem);

        align-items: center;

        min-height: 31rem;

        padding-bottom: 8rem;
    }

    .process-step__marker {
        grid-column: 1;
        grid-row: 1;
    }

    .process-step__marker span {
        width: 5rem;
        height: 5rem;

        font-size: .72rem;
    }

    .process-step__content {
        grid-column: 2;
        grid-row: 1;

        padding-top: 0;
    }

    .process-step__content h3 {
        font-size: clamp(2.8rem, 3.4vw, 4rem);
    }

    .process-step__image {
        grid-column: 3;
        grid-row: 1;

        margin-top: 0;

        aspect-ratio: 1.25 / 1;

        border-radius:
            14% 3% 12% 4% /
            10% 5% 14% 6%;
    }

    /*
     * Alternating composition.
     */

    .process-step:nth-of-type(even) {
        grid-template-columns:
            5rem
            minmax(24rem, 1.2fr)
            minmax(0, .8fr);
    }

    .process-step:nth-of-type(even)
    .process-step__image {
        grid-column: 2;
    }

    .process-step:nth-of-type(even)
    .process-step__content {
        grid-column: 3;
    }

}


/* ========================================
   PROCESS NOTE
========================================= */

/* Mobile - 0rem+ */

@media (min-width: 0rem) {

    .process-note {
        overflow: hidden;

        padding:
            5rem
            1.5rem;

        background: var(--cream);
    }

    .process-note__inner {
        display: grid;
        gap: 2rem;

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

        margin: 0 auto;
    }

    .process-note__number {
        color: rgba(13, 43, 32, .1);

        font-family: var(--serif);
        font-size: clamp(5rem, 25vw, 8rem);
        line-height: .8;

        white-space: nowrap;
    }

    .process-note__content {
        max-width: 43rem;
    }

    .process-note__content h2 {
        margin: 0;

        color: var(--forest);

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

    .process-note__content > p:not(.eyebrow) {
        max-width: 36rem;

        margin-top: 1.5rem;

        color: #52605a;

        line-height: 1.75;
    }

}


/* Tablet - 48rem+ */

@media (min-width: 48rem) {

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

    .process-note__inner {
        grid-template-columns: .7fr 1.3fr;
        gap: 4rem;

        align-items: center;
    }

    .process-note__number {
        font-size: clamp(7rem, 14vw, 11rem);
    }

}


/* Desktop - 64rem+ */

@media (min-width: 64rem) {

    .process-note {
        padding:
            9rem
            5%;
    }

    .process-note__inner {
        grid-template-columns: .8fr 1.2fr;
        gap: clamp(5rem, 9vw, 10rem);
    }

    .process-note__number {
        font-size: clamp(9rem, 13vw, 14rem);
    }

    .process-note__content h2 {
        font-size: clamp(3.2rem, 4vw, 4.8rem);
    }

}


/* ========================================
   PROCESS CTA
========================================= */

/* Mobile - 0rem+ */

@media (min-width: 0rem) {

    .process-cta {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        min-height: 31rem;

        overflow: hidden;

        padding:
            6rem
            1.5rem;

        text-align: center;

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

    .process-cta__image,
    .process-cta__overlay {
        position: absolute;
        inset: 0;
    }

    .process-cta__image img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
    }

    .process-cta__overlay {
        background:
            linear-gradient(
                rgba(8, 29, 21, .72),
                rgba(8, 29, 21, .78)
            );
    }

    .process-cta__inner {
        position: relative;
        z-index: 2;

        max-width: 45rem;

        margin: 0 auto;
    }

    .process-cta .eyebrow {
        color: #fff;

        opacity: .9;
    }

    .process-cta h2 {
        margin: 0;

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

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

        margin:
            1.5rem
            auto
            2rem;

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

        line-height: 1.7;
    }

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

}


/* Tablet - 48rem+ */

@media (min-width: 48rem) {

    .process-cta {
        min-height: 34rem;

        padding:
            7rem
            4rem;
    }

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

}


/* Desktop - 64rem+ */

@media (min-width: 64rem) {

    .process-cta {
        min-height: 38rem;

        padding:
            9rem
            5%;
    }

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

}