@charset "utf-8";
/* Simple fluid media */
img, object, embed, video {
	max-width: 100%;
}
.ie6 img {
	width:100%;
}




/*======================================================
    ROUTES  —  one door per audience
======================================================*/

    .routes{
        width: 100%;
        padding: 4.5em 7.5%;
        background-color: var(--white);
        float: left;
        clear: both;
    }

    .rt-head{ margin-bottom: 2.5em;}

    .rt-head h2{
        max-width: 13em;
        color: var(--basin-green);
        margin-bottom: 0.5em;
    }

    .rt-head p{ max-width: 36em;}

    .rt-inner{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 1em;
    }

    .rt-card{
        width: 100%;
        padding: 1.8em 1.6em;
        background-color: var(--mist);
        border: 1px solid var(--line);
        border-radius: 1.4em;
        transition: all 0.4s ease;
    }

    .rt-card:hover{
        background-color: var(--basin-green);
        border-color: var(--basin-green);
    }

    .rtc-icon{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.8em;
        height: 2.8em;
        margin-bottom: 1.2em;
        color: var(--white);
        background-color: var(--basin-green);
        border-radius: 50%;
        transition: all 0.4s ease;
    }

    .rt-card:hover .rtc-icon{
        color: var(--basin-green);
        background-color: var(--energy-lime);
    }

    .rt-card h3{
        margin-bottom: 0.6em;
        font-size: 1.15em;
        color: var(--basin-green);
    }

    .rt-card:hover h3{ color: var(--white);}

    .rt-card p{
        margin-bottom: 1.2em;
        font-size: 0.88em;
    }

    .rt-card:hover p{ color: rgba(255,255,255,0.68);}

    .rtc-mail{
        display: inline-block;
        font-size: 0.82em;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: var(--growth-teal);
        word-break: break-word;
    }

    .rt-card:hover .rtc-mail{ color: var(--energy-lime);}




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

    .contactform{
        width: 100%;
        padding: 4.5em 7.5%;
        background-color: var(--basin-green);
        color: var(--white);
        float: left;
        clear: both;
    }

    .cf-inner{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 2.5em;
    }

    .cf-left{ width: 100%;}

    .cf-left h2{
        max-width: 11em;
        color: var(--white);
        margin-bottom: 0.6em;
    }

    .cf-left p{
        max-width: 28em;
        color: rgba(255,255,255,0.65);
    }

    .cf-details{
        width: 100%;
        margin-top: 2.2em;
    }

    .cfd{
        width: 100%;
        padding: 1.2em 0;
        border-top: 1px solid var(--line-light);
    }

    .cfd:last-child{ border-bottom: 1px solid var(--line-light);}

    .cfd h5{
        margin-bottom: 0.4em;
        color: var(--energy-lime);
    }

    .cfd p{
        margin: 0;
        font-size: 0.95em;
        color: var(--white);
    }


    /*--the form itself--*/
    .cf-right{ width: 100%;}

    .cf-form{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.8em;
    }

    .cff{
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.5em;
    }

    .cff label{
        font-size: 0.7em;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.55);
    }

    .cff input,
    .cff select,
    .cff textarea{
        width: 100%;
        padding: 1em 1.3em;
        font-family: var(--font);
        font-size: 0.9em;
        color: var(--white);
        background-color: rgba(255,255,255,0.06);
        border: 1px solid var(--line-light);
        border-radius: 1em;
    }

    .cff textarea{
        min-height: 9em;
        resize: vertical;
    }

    .cff input::placeholder,
    .cff textarea::placeholder{ color: rgba(255,255,255,0.35);}

    .cff input:focus,
    .cff select:focus,
    .cff textarea:focus{
        outline: none;
        border-color: var(--growth-teal);
    }

    .cff select option{ color: var(--ink);}

    .cf-form button{
        margin-top: 0.6em;
        background-color: var(--energy-lime);
        border-color: var(--energy-lime);
        color: var(--basin-green);
    }

    .cf-form button:hover{
        background-color: var(--white);
        border-color: var(--white);
    }

    .cf-note{
        width: 100%;
        margin-top: 1em;
        font-size: 0.78em;
        line-height: 1.6;
        color: rgba(255,255,255,0.45);
    }




/*======================================================
    COMMUNITY NOTE  —  how we engage locally
======================================================*/

    .communitynote{
        width: 100%;
        padding: 4.5em 7.5%;
        background-color: var(--mist);
        float: left;
        clear: both;
    }

    .cn-inner{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 2.5em;
    }

    .cn-left{ width: 100%;}

    .cn-left h2{
        max-width: 12em;
        color: var(--basin-green);
        margin-bottom: 0.6em;
    }

    .cn-right{ width: 100%;}

    .cn-right h4{
        margin-bottom: 1em;
        font-size: 1.08em;
        font-weight: 500;
        line-height: 1.6;
        color: var(--basin-green);
    }




/*======================================================
    TABLET  481px
======================================================*/

@media only screen and (min-width: 481px) {

    .rt-card{ width: calc(50% - 0.5em);}

    .cff-half{ width: calc(50% - 0.4em);}

}




/*======================================================
    DESKTOP  769px
======================================================*/

@media only screen and (min-width: 769px) {

    .routes{ padding: 6.5em 7.5%;}

    .rt-card{ width: calc(25% - 0.75em);}


    .contactform{ padding: 6.5em 7.5%;}

    .cf-inner{ flex-wrap: nowrap; gap: 6%;}

    .cf-left{ width: 38%;}
    .cf-right{ width: 56%;}


    .communitynote{ padding: 6.5em 7.5%;}

    .cn-inner{ flex-wrap: nowrap; gap: 6%;}

    .cn-left{ width: 40%;}
    .cn-right{ width: 54%;}

}




/*======================================================
    LARGE  1080px
======================================================*/

@media only screen and (min-width: 1080px) {

    .cn-right h4{ font-size: 1.2em;}

}