/* ========================================
   CONTACT PAGE
========================================= */


/* ========================================
   CONTACT BANNER
========================================= */

/* Mobile - 0rem+ */

@media (min-width: 0rem) {

    .contact-banner {
        position: relative;

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

        min-height: 17rem;

        overflow: hidden;

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

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

    .contact-banner__image img {
        display: block;

        width: 100%;
        height: 100%;

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

    .contact-banner__overlay {
        background:
            linear-gradient(
                to bottom,
                rgba(5, 20, 15, .72) 0%,
                rgba(5, 20, 15, .48) 30%,
                rgba(5, 20, 15, .35) 60%,
                rgba(5, 20, 15, .55) 100%
            );
    }

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

        width: 100%;

        padding:
            6.5rem
            1.5rem
            2.5rem;
    }

    .contact-banner h1 {
        max-width: 35rem;

        margin: 0;

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

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

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

}


/* Tablet - 48rem+ */

@media (min-width: 48rem) {

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

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

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

}


/* Desktop - 64rem+ */

@media (min-width: 64rem) {

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

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

        margin: 0 auto;

        padding:
            8rem
            0
            3.5rem;
    }

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

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

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

}


/* ========================================
   CONTACT MAIN
========================================= */

/* Mobile - 0rem+ */

@media (min-width: 0rem) {

    .contact-main {
        padding:
            5rem
            1.5rem;

        background: var(--cream);
    }

    .contact-main__inner {
        display: grid;
        gap: 4rem;

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

        margin: 0 auto;
    }

    .contact-main__intro h2 {
        max-width: 30rem;

        margin: 0;

        color: var(--forest);

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

    .contact-main__intro > p:not(.eyebrow) {
        max-width: 32rem;

        color: #52605a;

        line-height: 1.75;
    }

    .contact-details {
        display: grid;
        gap: 1.6rem;

        margin-top: 3rem;
    }

    .contact-detail {
        display: grid;
        grid-template-columns: 2.5rem 1fr;
        gap: 1rem;

        align-items: start;
    }

    .contact-detail__icon {
        display: grid;
        place-items: center;

        width: 2rem;
        height: 2rem;

        color: var(--forest);
    }

    .contact-detail__icon svg {
        width: 100%;
        height: 100%;

        fill: none;
        stroke: currentColor;
        stroke-width: 1.4;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .contact-detail div > span {
        display: block;

        margin-bottom: .35rem;

        color: #5b5b5b;

        font-size: .62rem;
        font-weight: 600;
        letter-spacing: .13em;

        text-transform: uppercase;
    }

    .contact-detail a,
    .contact-detail p {
        margin: 0;

        color: var(--forest);

        font-size: .92rem;
        line-height: 1.6;

        text-decoration: none;
    }

}


/* Tablet - 48rem+ */

@media (min-width: 48rem) {

    .contact-main {
        padding:
            6rem
            4rem;
    }

    .contact-main__inner {
        grid-template-columns: .9fr 1.1fr;
        gap: 5rem;

        align-items: start;
    }

}


/* Desktop - 64rem+ */

@media (min-width: 64rem) {

    .contact-main {
        padding:
            8rem
            5%;
    }

    .contact-main__inner {
        grid-template-columns: .8fr 1.2fr;
        gap: clamp(6rem, 9vw, 10rem);
    }

    .contact-main__intro {
        padding-top: 1rem;
    }

    .contact-main__intro h2 {
        font-size: clamp(3.2rem, 4vw, 4.7rem);
    }

}


/* ========================================
   CONTACT FORM
========================================= */

/* Mobile - 0rem+ */

@media (min-width: 0rem) {

    .contact-form-wrap {
        padding:
            2rem
            1.5rem;

        background: var(--cream-light);

        border-radius: 1rem;
    }

    .contact-form {
        display: grid;
        gap: 1.6rem;
    }

    .contact-form__row {
        display: grid;
        gap: 1.6rem;
    }

    .contact-form .form-field {
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }

    .contact-form .form-field label {
        color: #53605a;

        font-size: .62rem;
        font-weight: 600;
        letter-spacing: .12em;

        text-transform: uppercase;
    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        width: 100%;

        padding: .9rem .2rem;

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

        border: 0;
        border-bottom: 1px solid #b9beb9;

        border-radius: 0;

        font: inherit;

        outline: none;
    }

    .contact-form select {
        cursor: pointer;
    }

    .contact-form textarea {
        min-height: 8rem;

        padding: .9rem;

        border: 1px solid #b9beb9;

        resize: vertical;
    }

    .contact-form input:focus,
    .contact-form select:focus,
    .contact-form textarea:focus {
        border-color: var(--forest);
    }

    .contact-form .button {
        justify-self: start;

        white-space: nowrap;
    }

}


/* Tablet - 48rem+ */

@media (min-width: 48rem) {

    .contact-form-wrap {
        padding:
            3rem;
    }

    .contact-form__row {
        grid-template-columns: 1fr 1fr;
    }

}


/* Desktop - 64rem+ */

@media (min-width: 64rem) {

    .contact-form-wrap {
        padding:
            3.5rem
            4rem;
    }

}


/* ========================================
   WHAT TO EXPECT
========================================= */

/* Mobile - 0rem+ */

@media (min-width: 0rem) {

    .contact-expect {
        padding:
            5rem
            1.5rem;

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

    .contact-expect__inner {
        width: 100%;
        max-width: var(--max-width);

        margin: 0 auto;
    }

    .contact-expect__heading h2 {
        margin: 0 0 3rem;

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

    .contact-expect__steps {
        display: grid;
        gap: 2.5rem;
    }

    .expect-step {
        padding-top: 1.5rem;

        border-top: 1px solid rgba(255,255,255,.18);
    }

    .expect-step > span {
        color: rgba(255,255,255, 0.62);

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

    .expect-step h3 {
        margin: .8rem 0 .7rem;

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

    .expect-step p {
        max-width: 24rem;

        margin: 0;

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

        font-size: .88rem;
        line-height: 1.7;
    }

}


/* Tablet - 48rem+ */

@media (min-width: 48rem) {

    .contact-expect {
        padding:
            6rem
            4rem;
    }

    .contact-expect__steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;
    }

}


/* Desktop - 64rem+ */

@media (min-width: 64rem) {

    .contact-expect {
        padding:
            8rem
            5%;
    }

    .contact-expect__inner {
        display: grid;
        grid-template-columns: .7fr 1.5fr;
        gap: clamp(5rem, 8vw, 9rem);

        align-items: start;
    }

    .contact-expect__heading h2 {
        margin-bottom: 0;

        font-size: clamp(3rem, 4vw, 4.5rem);
    }

}