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




/*======================================================
    FRAMEWORK INTRO
======================================================*/

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

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

    .fw-left{ width: 100%;}

    .fw-left h2{
        color: var(--basin-green);
        margin-bottom: 0.6em;
    }

    .fw-right{ width: 100%;}

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




/*======================================================
    PILLAR LONG  —  the four expandable records
======================================================*/

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

    .pillar-long{
        width: 100%;
        margin-bottom: 1em;
        background-color: var(--mist);
        border: 1px solid var(--line);
        border-radius: 1.5em;
        overflow: hidden;
        transition: all 0.4s ease;
    }

    .pillar-long:last-child{ margin-bottom: 0;}

    .pl-open{
        background-color: var(--basin-green);
        border-color: var(--basin-green);
    }


    /*--the always-visible head row--*/
    .pl-head{
        width: 100%;
        padding: 1.8em 1.6em;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1em;
        cursor: pointer;
    }

    .plh-no{
        font-size: 0.7em;
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--growth-teal);
    }

    .pl-open .plh-no{ color: var(--energy-lime);}

    .plh-title{ width: 100%;}

    .plh-title h2{
        font-size: 1.6em;
        color: var(--basin-green);
    }

    .pl-open .plh-title h2{ color: var(--white);}

    .plh-title h4{
        margin-top: 0.3em;
        font-size: 0.92em;
        font-weight: 400;
        color: var(--muted);
    }

    .pl-open .plh-title h4{ color: var(--river-blue);}

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

    .pl-open .plh-toggle{
        color: var(--basin-green);
        background-color: var(--energy-lime);
        transform: rotate(45deg);
    }


    /*--the body, opened by the accordion script--*/
    .pl-body{
        display: none;
        width: 100%;
        padding: 0 1.6em 2em 1.6em;
    }

    .plb-img{
        width: 100%;
        height: 14em;
        margin-bottom: 1.8em;
        background-size: cover;
        background-position: center;
        border-radius: 1.2em;
    }

    .plb-text h4{
        margin-bottom: 1em;
        font-size: 1.05em;
        font-weight: 500;
        line-height: 1.6;
        color: var(--white);
    }

    .plb-text p{ color: rgba(255,255,255,0.65);}

    .plb-text h5{
        margin: 1.8em 0 1em 0;
        color: var(--energy-lime);
    }

    /*--the workstream checklist--*/
    .plb-list li{
        position: relative;
        margin-bottom: 0.9em;
        padding-left: 1.9em;
        font-size: 0.92em;
        line-height: 1.7;
        color: rgba(255,255,255,0.72);
    }

    .plb-list li:before{
        content: "\f0da";
        position: absolute;
        left: 0;
        top: 0;
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 0.85em;
        color: var(--energy-lime);
    }

    /*--the fact strip--*/
    .plb-facts{
        width: 100%;
        margin-top: 2em;
        display: flex;
        flex-wrap: wrap;
        gap: 0.7em;
    }

    .plbf{
        width: 100%;
        padding: 1.2em 1.4em;
        background-color: rgba(255,255,255,0.06);
        border: 1px solid var(--line-light);
        border-radius: 1em;
    }

    .plbf h5{
        margin: 0 0 0.4em 0;
        color: var(--river-blue);
    }

    .plbf p{
        margin: 0;
        font-size: 0.9em;
        font-weight: 500;
        color: var(--white);
    }




/*======================================================
    ROADMAP  —  the phased sequence
======================================================*/

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

    .rm-head{ margin-bottom: 2.8em;}

    .rm-head h2{
        max-width: 13em;
        color: var(--white);
        margin-bottom: 0.5em;
    }

    .rm-head p{
        max-width: 36em;
        color: rgba(255,255,255,0.65);
    }

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

    .rm-phase{
        position: relative;
        width: 100%;
        padding: 1.8em 1.6em;
        background-color: rgba(255,255,255,0.05);
        border: 1px solid var(--line-light);
        border-radius: 1.4em;
    }

    .rmp-no{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.6em;
        height: 2.6em;
        margin-bottom: 1.2em;
        font-size: 0.85em;
        font-weight: 700;
        color: var(--basin-green);
        background-color: var(--energy-lime);
        border-radius: 50%;
    }

    .rm-phase h5{
        margin-bottom: 0.5em;
        color: var(--river-blue);
    }

    .rm-phase h3{
        margin-bottom: 0.7em;
        font-size: 1.2em;
        color: var(--white);
    }

    .rm-phase p{
        margin: 0;
        font-size: 0.88em;
        color: rgba(255,255,255,0.65);
    }




/*======================================================
    INTEGRATION  —  how the pillars feed each other
======================================================*/

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

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

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

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

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

    .ig-link{
        width: 100%;
        padding: 1.6em;
        background-color: var(--white);
        border: 1px solid var(--line);
        border-left: 3px solid var(--growth-teal);
        border-radius: 0 1.2em 1.2em 0;
    }

    .ig-link h4{
        margin-bottom: 0.4em;
        font-size: 0.95em;
        font-weight: 600;
        color: var(--basin-green);
    }

    .ig-link p{
        margin: 0;
        font-size: 0.88em;
    }




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

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

    .rm-phase{ width: calc(50% - 0.5em);}

    .ig-link{ width: calc(50% - 0.5em);}

    .plbf{ width: calc(50% - 0.35em);}

}




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

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

    .framework{ padding: 6.5em 7.5% 3.5em 7.5%;}

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

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


    .pillars-list{ padding: 0 7.5% 6.5em 7.5%;}

    .pl-head{
        flex-wrap: nowrap;
        gap: 2em;
        padding: 2.2em 2.4em;
    }

    .plh-no{ width: 12%;}
    .plh-title{ width: 78%;}

    .plh-title h2{ font-size: 2em;}

    .plh-toggle{ margin-left: auto;}

    .pl-body{
        padding: 0 2.4em 2.8em 2.4em;
        display: none;
    }

    .plb-inner{
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        gap: 5%;
    }

    .plb-img{
        width: 38%;
        height: auto;
        min-height: 22em;
        margin-bottom: 0;
    }

    .plb-text{ width: 57%;}

    .plbf{ width: calc(50% - 0.35em);}


    .roadmap{ padding: 6.5em 7.5%;}

    .rm-phase{ width: calc(25% - 0.75em);}


    .integration{ padding: 6.5em 7.5%;}

    .ig-link{ width: calc(33.333% - 0.667em);}

}




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

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

    .plh-title h2{ font-size: 2.3em;}

    .fw-right h4{ font-size: 1.25em;}

}