@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}




/*======================================================
    VOLTA BASIN INITIATIVE  —  BRAND TOKENS
    Palette and type per the VBI Brand Manual (p.30 - p.32)
======================================================*/

    :root{

        /*--brand colors--*/
        --basin-green: #1a564b;     /* primary anchor  */
        --growth-teal: #1ba890;     /* secondary       */
        --energy-lime: #c2d324;     /* highlight       */
        --river-blue:  #21cce8;     /* accent          */

        /*--neutrals--*/
        --ink:   #000000;
        --mist:  #E6FFFA;
        --white: #ffffff;

        /*--derived tints used for depth--*/
        --basin-deep:  #0e332c;
        --basin-soft:  #21675a;
        --line:        rgba(26,86,75,0.15);
        --line-light:  rgba(255,255,255,0.18);
        --muted:       #5c6b68;

        /*--glass : the water layer.
            the identity is a river moving through land, so surfaces across the
            site read as water over ground — frosted, tinted, faintly refracting.--*/
        --glass-dark:   rgba(255,255,255,0.07);   /* panel on the green grounds  */
        --glass-darker: rgba(255,255,255,0.04);   /* recessed panel on green     */
        --glass-light:  rgba(255,255,255,0.55);   /* panel on the mist grounds   */
        --glass-tint:   rgba(33,204,232,0.07);    /* river blue, for the wash    */

        --glass-edge:       rgba(255,255,255,0.22);   /* lit rim, dark grounds  */
        --glass-edge-light: rgba(255,255,255,0.75);   /* lit rim, light grounds */

        --glass-blur:   blur(18px) saturate(150%);
        --glass-blur-s: blur(10px) saturate(140%);
        --glass-blur-l: blur(26px) saturate(160%);

        /*--the surface highlight that makes a panel read as a sheet of water--*/
        --glass-sheen:       inset 0 1px 0 rgba(255,255,255,0.20);
        --glass-sheen-light: inset 0 1px 0 rgba(255,255,255,0.85);
        --glass-drop:        0 1.2em 3em rgba(14,51,44,0.10);
        --glass-drop-dark:   0 1.2em 3em rgba(0,0,0,0.16);

        /*--type--*/
        --font: "Noto Sans Arabic", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    }




/*======================================================
    BASE
======================================================*/

    *{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    html{
        overflow-y: scroll;
        overflow-x: hidden;
    }

    body{
        margin: 0;
        overflow-x: hidden;
        font-family: var(--font);
        font-weight: 400;
        color: var(--ink);
        background-color: var(--white);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        letter-spacing: -0.01em;
    }

    a { color: inherit; text-decoration: none;}
    a:focus { outline: none; }

    ul{ list-style: none; margin: 0; padding: 0;}




/*======================================================
    TYPE SCALE  (mobile first)
    Manual: Title 6rem / Heading 3rem / Body 1rem / Caption 1.5rem
======================================================*/

    h1{
        font-size: 2.35em;
        line-height: 1.06;
        font-weight: 700;
        letter-spacing: -0.035em;
        margin: 0;
    }

    h2{
        font-size: 1.85em;
        line-height: 1.12;
        font-weight: 700;
        letter-spacing: -0.03em;
        margin: 0;
    }

    h3{
        font-size: 1.35em;
        line-height: 1.2;
        font-weight: 600;
        letter-spacing: -0.02em;
        margin: 0;
    }

    h4{
        font-size: 1.05em;
        line-height: 1.45;
        font-weight: 500;
        letter-spacing: -0.015em;
        margin: 0;
    }

    h5{
        font-size: 0.78em;
        line-height: 1.3;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        margin: 0;
    }

    p{
        font-size: 0.9em;
        line-height: 1.3;
        font-weight: 400;
        margin: 0 0 1em 0;
        color: var(--muted);
    }

    p:last-child{ margin-bottom: 0;}




/*======================================================
    UTILITIES
======================================================*/

    .whitebg{ background-color: var(--white);}
    .mistbg{ background-color: var(--mist);}
    .basinbg{ background-color: var(--basin-green);}
    .blackbg{ background-color: var(--ink);}

    .blacktext{ color: var(--ink);}
    .whitetext{ color: var(--white);}
    .basintext{ color: var(--basin-green);}

    .mobi{ display: block;}
    .desktop{ display: none;}


    /*--the small uppercase section marker used across the site--*/
    .eyebrow{
        display: inline-flex;
        align-items: center;
        gap: 0.7em;
        font-size: 1em;
        font-weight: 600;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--growth-teal);
        margin: 0 0 1.4em 0;
    }

    .eyebrow:before{
        content: "";
        display: block;
        width: 2.2em;
        height: 2px;
        background-color: var(--energy-lime);
    }

    .eyebrow-light{ color: var(--energy-lime);}
    .eyebrow-light:before{ background-color: var(--river-blue);}




/*======================================================
    BUTTONS
======================================================*/

    button{
        font-family: var(--font);
        display: inline-flex;
        align-items: center;
        gap: 0.7em;
        padding: 1.05em 1.9em;
        font-size: 0.82em;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--white);
        background-color: var(--basin-green);
        border: 1px solid var(--basin-green);
        border-radius: 3em;
        cursor: pointer;
        transition: all 0.35s ease;
    }

    button i{
        font-size: 0.9em;
        transition: transform 0.35s ease;
    }

    button:hover{
        background-color: var(--growth-teal);
        border-color: var(--growth-teal);
        color: var(--white);
    }

    button:hover i{ transform: translateX(0.35em);}


    /*--outlined, for use on light grounds--*/
    .btn-line{
        color: var(--basin-green);
        background-color: transparent;
        border: 1px solid var(--line);
    }

    .btn-line:hover{
        background-color: var(--basin-green);
        border-color: var(--basin-green);
        color: var(--white);
    }


    /*--reversed, for use on the deep green grounds--*/
    .btn-light{
        color: var(--basin-green);
        background-color: var(--energy-lime);
        border-color: var(--energy-lime);
    }

    .btn-light:hover{
        background-color: var(--white);
        border-color: var(--white);
        color: var(--basin-green);
    }

    .btn-ghost{
        color: var(--white);
        background-color: transparent;
        border: 1px solid var(--line-light);
    }

    .btn-ghost:hover{
        background-color: var(--white);
        border-color: var(--white);
        color: var(--basin-green);
    }




/*======================================================
    SHARED PAGE HEADER  (used by about / pillars / basin / contact)
======================================================*/

    .pagehead{
        position: relative;
        width: 100%;
        padding: 9em 7.5% 3.5em 7.5%;
        background-color: var(--basin-green);
        color: var(--white);
        overflow: hidden;
    }

    /*--the photograph behind the head. Sized taller than the header
        so js/parallax.js can drift it without exposing an edge.
        While any part of the head is on screen the layer travels at
        most 0.18 of its height, so 24% slack each way clears it.--*/
    .ph-bg{
        position: absolute;
        top: -24%;
        left: 0;
        z-index: 0;
        width: 100%;
        height: 148%;
        background-size: cover;
        background-position: center;
        will-change: transform;
    }

    /*--the wash that keeps the type readable over any photograph--*/
    .ph-bg:after{
        content: "";
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(150deg, rgba(14,51,44,0.96) 0%, rgba(26,86,75,0.91) 42%, rgba(26,86,75,0.82) 100%);
    }

    .ph-inner{
        position: relative;
        z-index: 3;
        width: 100%;
    }

    .ph-inner h1{
        color: var(--white);
        max-width: 16em;
    }

    .ph-inner p{
        color: rgba(255,255,255,0.72);
        max-width: 34em;
        margin-top: 1.2em;
    }

    /*--the logomark watermark bleeding off the corner--*/
    .ph-mark{
        position: absolute;
        right: -6%;
        bottom: -35%;
        width: 60%;
        height: 150%;
        background-image: url(../img/logos/VB-Logos_icon.svg);
        background-size: contain;
        background-position: center right;
        background-repeat: no-repeat;
        opacity: 0.09;
        z-index: 2;
        will-change: transform;
    }

    /*--breadcrumb row under the title--*/
    .ph-crumbs{
        display: flex;
        align-items: center;
        gap: 0.6em;
        margin-top: 2.2em;
        font-size: 0.72em;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.5);
    }

    .ph-crumbs i{ font-size: 0.7em;}
    .ph-crumbs span{ color: var(--energy-lime);}




/*======================================================
    SECTION SHELL
======================================================*/

    .section{
        width: 100%;
        padding: 4.5em 7.5%;
        float: left;
        clear: both;
    }

    .section-head{
        width: 100%;
        margin-bottom: 2.8em;
    }

    .section-head h2{ max-width: 15em;}

    .section-head p{
        max-width: 36em;
        margin-top: 1.1em;
    }




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

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

    h1{ font-size: 2.9em;}
    h2{ font-size: 2.2em;}
    h3{ font-size: 1.3em;}

    .pagehead{ padding: 10em 7.5% 4.5em 7.5%;}

}




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

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

    .mobi{ display: none;}
    .desktop{ display: block;}

    h1{ font-size: 3.6em;}
    h2{ font-size: 2.6em;}
    h3{ font-size: 1.6em;}
    h4{ font-size: 1.12em;}
    p{ font-size: 1em;}

    .section{ padding: 6.5em 7.5%;}

    .section-head{ margin-bottom: 3.5em;}

    .pagehead{ padding: 13em 7.5% 6em 7.5%;}

    .ph-mark{
        right: 2%;
        bottom: -45%;
        width: 38%;
        height: 190%;
        opacity: 0.11;
    }

}




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

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

    h1{ font-size: 4.4em;}
    h2{ font-size: 3em;}
    h3{ font-size: 2em;}
    h4{ font-size: 2em;}
    

    .pagehead{ padding: 15em 7.5% 7em 7.5%;}

}




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

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

    h1{ font-size: 5.1em;}
    h2{ font-size: 3.2em;}
    p{ font-size: .95em;}

    .section{ padding: 8em 7.5%;}

}




/*======================================================
    XXL  1920px
======================================================*/

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

    body{ font-size: 18px;}

}