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




/*======================================================
    GRID SHELL
======================================================*/

    .gridContainer{
        width: 100%;
        float: left;
        clear: both;
        overflow-x: hidden;
    }




/*======================================================
    GSAP HORIZONTAL PANELS
    three panels  →  300%
======================================================*/

    /*--mobile first : the three panels stack and scroll normally.
        they only become a pinned horizontal track from 769px up.--*/
    .gsapcontainer{
        width: 100%;
        height: auto;
        display: block;
    }

    .panel{
        position: relative;
        width: 100%;
        height: auto;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        overflow: hidden;
    }

    .video-element,
    .image-element{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }




/*======================================================
    PANEL ONE  —  HERO
======================================================*/

    .hero-panel{
        height: 100vh;
        background-color: var(--basin-deep);
    }

    /*--the hero photograph, carried on its own layer so it can drift.
        Oversized so neither drift can expose an edge:
          desktop  GSAP slides it 16% of its own width against the
                   horizontal track  ->  0.24 of the panel, under the
                   25% of horizontal slack
          mobile   js/parallax.js drifts it 0.16 of the panel height,
                   under the 20% of vertical slack--*/
    .hp-bg{
        position: absolute;
        top: -20%;
        left: -25%;
        z-index: 0;
        width: 150%;
        height: 140%;
        background-size: cover;
        background-position: center;
        will-change: transform;
    }

    /*--the deep green wash that keeps the type legible--*/
    .hero-panel:after{
        content: "";
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(160deg, rgba(14,51,44,0.92) 0%, rgba(26,86,75,0.78) 45%, rgba(26,86,75,0.35) 100%);
        z-index: 1;
    }

    .welcome-details{
        position: relative;
        z-index: 2;
        width: 100%;
        height: 100%;
        padding: 0 7.5% 0 7.5%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-bottom: 3.5em;
    }

    .wd-text{
        width: 100%;
        margin-bottom: 2.5em;
        position: relative;
        z-index: 100;
        left: 0%;
    }

    .wd-text h1{
        font-size: 2.2em;
        color: var(--white);
        margin-bottom: 0.6em;
    }

    /*--the one line the whole brand hangs on--*/
    .wd-text h1 span{
        display: block;
        color: var(--energy-lime);
    }

    .wd-text p{
        max-width: 30em;
        color: rgba(255,255,255,0.72);
        margin-bottom: 2em;
    }

    .wd-buttons{
        display: flex;
        flex-wrap: wrap;
        gap: 0.7em;
    }


    /*--water-shared--*/
    .wd-volta{
        position: absolute;
        top: 0;
        z-index: 10;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }



    .wd-water{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    .wd-water canvas{
        display: block;
        width: 100%;
        height: 100%;
    }


    .volta-sun{
        position: absolute;
        bottom: 8vh;
        right:-5%;
        z-index: 0;
        width: 20vh;
        height: 20vh;
        border-radius: 20vh;
        background-color: #c2d324;
        filter: blur(0px);
        display: block;
    }





    /*--the scrolling strip of pillars along the base--*/
    .wd-marquee{
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 3;
        width: 100%;
        padding: 0.9em 0;
        font-size: 0.72em;
        font-weight: 600;
        letter-spacing: 0.35em;
        text-transform: uppercase;
        color: var(--basin-green);
        background-color: var(--energy-lime);
    }


    /*--the small scroll prompt--*/
    .wd-scroll{
        position: absolute;
        right: 7.5%;
        bottom: 15em;
        z-index: 3;
        display: none;
        align-items: center;
        gap: 0.8em; 
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.6);
    }

    .wd-scroll span{
        font-size: .9em;
    }

    .wd-scroll i{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 7em;
        height: 7em;
        font-size: 1em;
        color: var(--energy-lime);
        border: 1px solid var(--line-light);
        border-radius: 50%;
    }


/*======================================================
    PANEL TWO  —  POSITIONING
======================================================*/

    .secondpanel{
        background-color: var(--mist);
    }

    .secondpanel-container{
        position: relative;
        width: 100%;
        height: auto;
        padding: 6em 7.5%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /*--watermark of the mark--*/
    .secondpanel-container:before{
        content: "";
        position: absolute;
        right: -15%;
        top: 50%;
        transform: translateY(-50%);
        width: 70%;
        height: 70%;
        background-image: url(../img/logos/VB-Logos_icon.svg);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0.07;
    }

    .sc-inner{
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 34em;
    }

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

    .sc-inner h3{
        color: var(--growth-teal);
        margin-bottom: 1em;
        font-weight: 500;
    }

    .sc-inner p{ max-width: 32em;}

    .sc-arrow{
        position: absolute;
        right: 7.5%;
        bottom: 4.5em;
        display: none;
        align-items: center;
        justify-content: center;
        width: 3.6em;
        height: 3.6em;
        color: var(--white);
        background-color: var(--basin-green);
        border-radius: 50%;
    }




/*======================================================
    PANEL THREE  —  THE FOUR PILLARS
======================================================*/

    .thirdslide{
        position: relative;
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        background-color: var(--basin-green);
    }

    /*--each pillar card--*/
    .property{
        position: relative;
        width: 100%;
        height: 24em;
        overflow: hidden;
        border-bottom: 1px solid rgba(255,255,255,0.12);
    }

    .p-img{
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        transition: transform 1.2s ease;
    }

    .property:hover .p-img{ transform: scale(1.06);}

    .p-gradient{
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgba(14,51,44,0.96) 12%, rgba(26,86,75,0.82) 48%, rgba(26,86,75,0.35) 100%);
    }

    .p-text{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 1.6em 1.3em 2.6em 1.3em;
        color: var(--white);
    }

    /*--the pillar number--*/
    .p-text h5{
        margin-bottom: 0.9em;
        color: var(--energy-lime);
    }

    .p-text h3{
        margin-bottom: 0.5em;
        color: var(--white);
    }

    .p-text h4{
        margin-bottom: 0.9em;
        font-size: 0.88em;
        font-weight: 400;
        color: var(--river-blue);
    }

    .p-text p{
        font-size: 0.85em;
        line-height: 1.65;
        color: rgba(255,255,255,0.7);
    }

    .p-text button{
        margin-top: 1.2em;
        padding: 0.8em 1.4em;
        font-size: 0.68em;
    }


    /*--the small stat row inside a pillar card--*/
    .property-indicators{
        display: none;
        flex-wrap: wrap;
        gap: 0.5em;
        margin: 1em 0;
    }

    .pi{
        padding: 0.7em 0.9em;
        background-color: rgba(255,255,255,0.07);
        border: 1px solid var(--line-light);
        border-radius: 0.8em;
    }

    .pi i{
        font-size: 0.8em;
        color: var(--energy-lime);
    }

    .pi p{
        display: block;
        margin: 0.4em 0 0 0;
        font-size: 0.6em;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.55);
    }

    .pi h4{
        margin: 0;
        font-size: 0.9em;
        font-weight: 600;
        color: var(--white);
    }


    /*--closing marquee strip on the panel--*/
    .third-last{
        position: relative;
        z-index: 4;
        width: 100%;
        padding: 0.9em 0;
        font-size: 0.72em;
        font-weight: 600;
        letter-spacing: 0.35em;
        text-transform: uppercase;
        color: var(--basin-green);
        background-color: var(--energy-lime);
    }

    .third-last .wd-marquee{
        position: static;
        padding: 0;
        background-color: transparent;
    }




/*======================================================
    DISCOVER  —  the operating premise
======================================================*/

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

    .discover-inner{
        position: relative;
        z-index: 2;
        width: 100%;
    }

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

    .discover-inner h4{
        max-width: 26em;
        margin-bottom: 1.2em;
        color: var(--growth-teal);
    }

    .discover-inner p{ max-width: 34em;}

    .discover-inner button{ margin-top: 1.6em;}


    /*--the stat rail--*/
    .discover-stats{
        width: 100%;
        margin-top: 3em;
        display: flex;
        flex-wrap: wrap;
        gap: 1px;
        background-color: var(--line);
        border: 1px solid var(--line);
        border-radius: 1.4em;
        overflow: hidden;
    }

    .ds{
        flex: 1 1 40%;
        min-width: 0;
        padding: 1.6em 1.4em;
        background-color: var(--white);
    }

    .ds h2{
        font-size: 1.9em;
        color: var(--growth-teal);
        margin-bottom: 0.25em;
    }

    .ds p{
        margin: 0;
        font-size: 0.78em;
        line-height: 1.5;
        letter-spacing: 0.02em;
    }

    .discover-img{
        width: 100%;
        margin-top: 2.5em;
        border-radius: 1.5em;
    }




/*======================================================
    HOME ABOUT  —  purpose / mission / vision
======================================================*/

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

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

    .hi-left{ width: 100%;}

    .hia-icon{
        width: 3.6em;
        height: 3.6em;
        margin-bottom: 1.8em;
        background-image: url(../img/logos/VB-Logos_icon.svg);
        background-size: contain;
        background-position: left center;
        background-repeat: no-repeat;
    }

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

    .hi-left hr{
        width: 100%;
        height: 1px;
        margin: 2.2em 0;
        background-color: var(--line);
        border: none;
    }

    .hi-mv{ margin-bottom: 1.8em;}

    .hi-mv h4{
        margin-bottom: 0.5em;
        font-size: 1em;
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--growth-teal);
    }

    .hi-mv:last-child{ margin-bottom: 0;}

    .hi-right{
        width: 100%;
        min-height: 20em;
        border-radius: 1.5em;
        overflow: hidden;
    }

    .hir-inner{
        width: 100%;
        height: 100%;
        min-height: 20em;
        background-image: url(../img/basin/lake-volta.jpg);
        background-size: cover;
        background-position: center 72%;
    }




/*======================================================
    VALUES  —  the four core values
======================================================*/

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

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

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

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

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

    .vh-card{
        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;
        transition: all 0.4s ease;
    }

    .vh-card:hover{
        background-color: rgba(255,255,255,0.1);
        border-color: var(--growth-teal);
    }

    .vhc-icon{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2em;
        height: 1em;
        margin-bottom: 1.2em;
        font-size: 3em;
        color: var(--energy-lime);
        background-color: ;
        border-radius: 50%;
    }

    .vh-card h3{
        margin-bottom: 0.6em;
        color: var(--white);
    }

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




/*======================================================
    GROUNDWORK  —  proof from the site
======================================================*/

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

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

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

    .gw-head p{ max-width: 34em;}

    .gw-grid{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 1em;
    }

    .gw-item{
        position: relative;
        width: 100%;
        height: 16em;
        border-radius: 1.4em;
        overflow: hidden;
    }

    .gwi-img{
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        transition: transform 1.2s ease;
    }

    .gw-item:hover .gwi-img{ transform: scale(1.06);}

    .gwi-text{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 1.4em;
        padding-top: 4em;
        background: linear-gradient(to top, rgba(14,51,44,0.95) 25%, rgba(14,51,44,0) 100%);
    }

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

    .gwi-text p{
        margin: 0;
        font-size: 0.85em;
        color: var(--white);
    }




/*======================================================
    BASIN HOME  —  closing band
======================================================*/

    .basin-home{
        width: 100%;
        background-color: var(--mist);
        float: left;
        clear: both;
    }

    .bh-top{
        width: 100%;
        padding: 4.5em 7.5% 3em 7.5%;
    }

    .bh-top h2{
        max-width: 12em;
        color: var(--basin-green);
        margin-bottom: 0.5em;
    }

    .bh-top p{
        max-width: 32em;
        margin-bottom: 1.8em;
    }

    .bh-down{
        position: relative;
        width: 100%;
        height: 22em;
    }

    .bh-img{
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
    }

    .bh-mark{
        position: absolute;
        right: 7.5%;
        bottom: 2em;
        width: 9em;
        height: 3.2em;
        background-image: url(../img/logos/VB-Logos_white-icon-text.svg);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0.9;
    }




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

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

    .ds{ flex: 1 1 20%;}

    .gw-item{ width: calc(50% - 0.5em); height: 18em;}

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

    .bh-down{ height: 26em;}

}




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

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

    /*--the pinned horizontal track--*/
    .gsapcontainer{
        width: 300%;
        height: 100vh;
        display: flex;
        flex-wrap: nowrap;
    }

    .panel{
        height: 100%;
        min-height: 0;
    }

    .thirdslide{
        height: 100%;
        flex-wrap: nowrap;
    }

    .property{
        width: 25%;
        height: 100%;
        border-right: 1px solid rgba(255,255,255,0.12);
        border-bottom: none;
    }

    .third-last{
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .secondpanel-container{ height: 100%; padding: 0 7.5%;}


    /*--hero--*/
    .welcome-details{
        justify-content: center;
        padding-bottom: 0;
        
    }

    .wd-text{
        width: 58%;
        margin-bottom: 0;
        position: absolute;
        left: 5%;
    }

    .wd-text h1{ font-size: 2.9em;}

    .wd-scroll{ display: flex;}

    .wd-marquee{ font-size: 0.78em; padding: 1.1em 0;}



    /*--water-shared--*/
    .wd-volta{
        position: absolute;
        top: 0;
        z-index: 10;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }



    .wd-water{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    .wd-water canvas{
        display: block;
        width: 100%;
        height: 100%;
    }


    .volta-sun{
        position: absolute;
        bottom: 15vh;
        right: 25%;
        z-index: 0;
        width: 40vh;
        height: 40vh;
        border-radius: 20vh;
        background-color: #c2d324;
        filter: blur(0px);
    }





    /*--panel two--*/
    .secondpanel-container:before{
        right: -5%;
        width: 45%;
        height: 80%;
        opacity: 0.09;
    }

    .sc-inner{ max-width: 30em;}

    .sc-arrow{ display: flex;}


    /*--pillars--*/
    .p-text{ padding: 2em 1.8em 3.4em 1.8em;}

    .property-indicators{ display: flex;}


    /*--discover--*/
    .discover{
        padding: 6.5em 7.5%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 5%;
    }

    .discover-inner{ width: 47%;}

    .discover-stats{ width: 100%; flex-wrap: nowrap;}

    .discover-img{
        width: 48%;
        margin-top: 0;
        height: 30em;
        object-fit: cover;
    }


    /*--home about--*/
    .homeabout{ padding: 6.5em 7.5%;}

    .homeabout-inner{ flex-wrap: nowrap; gap: 5%;}

    .hi-left{ width: 52%;}
    .hi-right{ width: 43%; min-height: 34em;}
    .hir-inner{ min-height: 34em;}


    /*--values--*/
    .values-home{ padding: 6.5em 7.5%;}

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


    /*--groundwork--*/
    .groundwork{ padding: 6.5em 7.5%;}

    .gw-item{ width: calc(33.333% - 0.667em); height: 20em;}


    /*--basin band--*/
    .bh-top{
        padding: 6.5em 7.5% 4em 7.5%;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 2em;
    }

    .bh-top h2{ width: 50%; margin-bottom: 0;}

    .bh-tr{ width: 40%;}

    


    .volta-sun{
        position: absolute;
        bottom: 8vh;
        right:5%;
        z-index: 0;
        width: 20vh;
        height: 20vh;
        border-radius: 20vh;
        background-color: #c2d324;
        filter: blur(0px);
        display: block;
    }

}




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

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

    .wd-text{ width: 52%;}

    .wd-text h1{ font-size: 3.3em;}

    .sc-inner{ max-width: 34em;}

    .p-text h4{ font-size: 0.92em;}

    .ds h2{ font-size: 2.4em;}

    .discover-img{ height: 34em;}

    .bh-down{ height: 38em;}

    .bh-mark{ width: 12em; height: 4.2em;}

    .volta-sun{
        position: absolute;
        bottom: 15vh;
        right: 20%;
        z-index: 0;
        width: 40vh;
        height: 40vh;
        border-radius: 20vh;
        background-color: #c2d324;
        filter: blur(0px);
        display: block;
    }

}




/*======================================================
    XL  1440px
======================================================*/

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

    .wd-text{ width: 50%;}

    .wd-text h1{ font-size: 3.6em;}

    .p-text{ padding: 2.4em 2.2em 3.8em 2.2em;}

    .discover-img{ height: 40em;}

}