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




/*======================================================
    VOLTA BASIN INITIATIVE  —  THE WATER LAYER

    The logomark is a river moving through shaped land.
    This sheet carries that idea into the interface: panels
    behave like water over ground — frosted, faintly tinted,
    lit along the top edge where the surface catches light.

    Loaded LAST so it sits over the section stylesheets.
    Tokens live in css/font.css.
======================================================*/




/*======================================================
    THE CURRENT
    Soft caustic washes behind the sections. These are plain
    radial gradients, not filters, so they cost nothing to paint.
======================================================*/

    .pagehead,
    .values-home,
    .partnership,
    .roadmap,
    .basin-gallery,
    .contactform,
    .ctaband,
    .secondpanel,
    .pmv,
    .persona,
    .endowments,
    .integration,
    .communitynote,
    .routes,
    .discover,
    .homeabout,
    .groundwork,
    .basin-home,
    .about-intro,
    .different,
    .framework,
    .corridor,
    .places,
    .pillars-list{
        position: relative;
        overflow: hidden;
    }


    /*--on the deep green grounds : light through water--*/
    .pagehead:before,
    .values-home:before,
    .partnership:before,
    .roadmap:before,
    .basin-gallery:before,
    .contactform:before,
    .ctaband:before{
        content: "";
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        background:
            radial-gradient(45em 30em at 12% 4%, rgba(33,204,232,0.16), transparent 60%),
            radial-gradient(38em 28em at 92% 82%, rgba(27,168,144,0.22), transparent 62%),
            radial-gradient(26em 20em at 62% 40%, rgba(194,211,36,0.07), transparent 64%);
        pointer-events: none;
        z-index: 0;
    }


    /*--on the mist and white grounds : shallow water--*/
    .secondpanel:before,
    .pmv:before,
    .persona:before,
    .endowments:before,
    .integration:before,
    .communitynote:before,
    .routes:before,
    .discover:before,
    .homeabout:before,
    .groundwork:before,
    .basin-home:before,
    .about-intro:before,
    .different:before,
    .framework:before,
    .corridor:before,
    .places:before,
    .pillars-list:before{
        content: "";
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        background:
            radial-gradient(40em 28em at 6% 0%, rgba(33,204,232,0.10), transparent 58%),
            radial-gradient(34em 26em at 96% 88%, rgba(27,168,144,0.11), transparent 62%);
        pointer-events: none;
        z-index: 0;
    }


    /*--keep every section's own content above the wash--*/
    .ph-inner,
    .vh-head, .vh-inner,
    .pt-head, .pt-inner, .pt-roles,
    .rm-head, .rm-inner,
    .bg-head, .basin-gallery .swiper-container,
    .cf-inner,
    .cb-inner,
    .secondpanel-container,
    .section-head, .pmv-inner,
    .pn-inner,
    .ed-head, .ed-inner,
    .ig-head, .ig-inner,
    .cn-inner,
    .rt-head, .rt-inner,
    .discover-inner, .discover-img,
    .homeabout-inner,
    .gw-head, .gw-grid,
    .bh-top, .bh-down,
    .ai-inner,
    .df-head, .df-inner,
    .fw-inner,
    .cr-inner,
    .pc-inner,
    .pillar-long{
        position: relative;
        z-index: 2;
    }




    /*--the page heads carry a photograph under the wash, so their
        caustic layer has to sit above it--*/
    .pagehead:before{ z-index: 1;}




/*======================================================
    THE GLASS PANELS  —  dark grounds
======================================================*/

    /*--NOTE ON BLUR
        backdrop-filter only earns its compositing cost where the backdrop
        actually has detail — photographs, the hero, content scrolling under
        the header. Over the flat caustic washes it blurs a gradient, which
        looks identical and costs a layer, so those panels get the
        translucency, rim and sheen only. See "panels over detail" below.--*/

    .vh-card,
    .pt-firm,
    .ptr,
    .rm-phase,
    .plbf,
    .pi{
        background-color: var(--glass-dark);
        background-image: linear-gradient(160deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 42%);
        border: 1px solid var(--glass-edge);
        box-shadow: var(--glass-sheen), var(--glass-drop-dark);
    }

    .ptr{ background-color: var(--glass-darker);}

    .vh-card:hover{
        background-color: rgba(255,255,255,0.13);
        border-color: rgba(33,204,232,0.55);
        box-shadow: var(--glass-sheen), 0 1.6em 3.6em rgba(0,0,0,0.22);
    }


    /*--the pull quote reads as a deeper pool--*/
    .pn-quote{
        background-color: var(--basin-green);
        background-image:
            radial-gradient(30em 20em at 88% 10%, rgba(33,204,232,0.30), transparent 62%),
            radial-gradient(24em 18em at 8% 92%, rgba(27,168,144,0.32), transparent 64%);
        border: 1px solid rgba(255,255,255,0.14);
        box-shadow: var(--glass-sheen), var(--glass-drop-dark);
    }




/*======================================================
    THE GLASS PANELS  —  light grounds
======================================================*/

    .pmv-card,
    .pn-card,
    .ed-card,
    .rt-card,
    .ig-link,
    .gw-item,
    .discover-stats{
        background-color: var(--glass-light);
        background-image: linear-gradient(160deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.25) 48%);
        border: 1px solid rgba(255,255,255,0.7);
        box-shadow: var(--glass-sheen-light), var(--glass-drop);
    }

    .ds{
        background-color: transparent;
        background-image: none;
    }

    .ig-link{ border-left: 3px solid var(--growth-teal);}

    .pmv-card:hover,
    .pn-card:hover,
    .ed-card:hover,
    .ig-link:hover{
        background-color: rgba(255,255,255,0.72);
        border-color: rgba(27,168,144,0.45);
        box-shadow: var(--glass-sheen-light), 0 1.6em 3.6em rgba(14,51,44,0.14);
    }


    /*--contact route cards flood with green on hover, so the
        glass has to invert with them--*/
    .rt-card:hover{
        background-color: rgba(26,86,75,0.82);
        background-image: linear-gradient(160deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 45%);
        border-color: rgba(255,255,255,0.22);
        box-shadow: var(--glass-sheen), var(--glass-drop-dark);
    }


    /*--the corridor table--*/
    .pc-inner{
        background-color: rgba(26,86,75,0.10);
        border-color: rgba(255,255,255,0.6);
        box-shadow: var(--glass-sheen-light), var(--glass-drop);
    }

    .pc-place{ background-color: var(--glass-light);}

    .pc-place:hover{ background-color: rgba(230,255,250,0.78);}


    /*--pillar accordion : closed panels are glass, the open one
        sinks to the riverbed--*/
    .pillar-long{
        background-color: var(--glass-light);
        background-image: linear-gradient(160deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.25) 48%);
        border: 1px solid rgba(255,255,255,0.7);
        box-shadow: var(--glass-sheen-light), var(--glass-drop);
    }

    .pl-open{
        background-color: var(--basin-green);
        background-image:
            radial-gradient(38em 26em at 92% 6%, rgba(33,204,232,0.22), transparent 62%),
            radial-gradient(30em 22em at 4% 94%, rgba(27,168,144,0.26), transparent 64%);
        border-color: rgba(255,255,255,0.14);
        box-shadow: var(--glass-sheen), var(--glass-drop-dark);
    }




/*======================================================
    PANELS OVER DETAIL
    Everything below keeps a real backdrop-filter, because what
    sits behind it is a photograph, the hero, or page content
    scrolling underneath — detail that is worth refracting.
======================================================*/




/*======================================================
    HEADER AND DRAWER
======================================================*/

    /*--the bar rides over both the dark hero and the light sections,
        so it is frosted enough to see movement through, but opaque
        enough that the green nav type stays legible over either.--*/
    .topmoved{
        background-color: rgba(255,255,255,0.86);
        background-image: linear-gradient(to bottom, rgba(255,255,255,0.45) 0%, rgba(230,255,250,0.30) 100%);
        box-shadow: 0 1px 0 rgba(255,255,255,0.6), 0 0.6em 2em rgba(14,51,44,0.07);
        -webkit-backdrop-filter: var(--glass-blur-l);
        backdrop-filter: var(--glass-blur-l);
    }

    .navopen{
        background-color: rgba(14,51,44,0.88);
        background-image:
            radial-gradient(34em 26em at 90% 12%, rgba(33,204,232,0.18), transparent 62%),
            radial-gradient(28em 22em at 6% 88%, rgba(27,168,144,0.20), transparent 64%);
        -webkit-backdrop-filter: var(--glass-blur-l);
        backdrop-filter: var(--glass-blur-l);
    }


    /*--the nav pill on the scrolled bar--*/
    .topmoved nav #mainnav li:hover{
        background-color: rgba(26,86,75,0.88);
        -webkit-backdrop-filter: var(--glass-blur-s);
        backdrop-filter: var(--glass-blur-s);
    }




/*======================================================
    HERO AND PANEL FURNITURE
======================================================*/

    /*--the scroll prompt and the panel-two arrow become glass chips--*/
    .wd-scroll i,
    .sc-arrow{
        background-color: rgba(255,255,255,0.12);
        border: 1px solid var(--glass-edge);
        box-shadow: var(--glass-sheen);
        -webkit-backdrop-filter: var(--glass-blur-s);
        backdrop-filter: var(--glass-blur-s);
    }

    .sc-arrow{
        color: var(--basin-green);
        background-color: rgba(255,255,255,0.45);
        border-color: rgba(255,255,255,0.8);
        box-shadow: var(--glass-sheen-light), var(--glass-drop);
    }


    /*--the pillar cards on the home track : the copy sits on a
        sheet of water rather than a flat gradient--*/
    .p-gradient{
        background:
            linear-gradient(to top, rgba(14,51,44,0.92) 10%, rgba(26,86,75,0.55) 52%, rgba(26,86,75,0.18) 100%),
            radial-gradient(24em 20em at 70% 12%, rgba(33,204,232,0.22), transparent 64%);
    }

    .p-text{
        -webkit-backdrop-filter: var(--glass-blur);
        backdrop-filter: var(--glass-blur);
        background-image: linear-gradient(to top, rgba(14,51,44,0.55) 30%, rgba(14,51,44,0) 100%);
        border-top: 1px solid rgba(255,255,255,0.14);
    }


    /*--groundwork captions : these DO sit over photographs--*/
    .gwi-text{
        -webkit-backdrop-filter: var(--glass-blur-s);
        backdrop-filter: var(--glass-blur-s);
        border-top: 1px solid rgba(255,255,255,0.14);
    }




/*======================================================
    BUTTONS, FIELDS AND CHIPS
======================================================*/

    .btn-ghost{
        background-color: rgba(255,255,255,0.10);
        border-color: var(--glass-edge);
        box-shadow: var(--glass-sheen);
        -webkit-backdrop-filter: var(--glass-blur-s);
        backdrop-filter: var(--glass-blur-s);
    }

    .btn-ghost:hover{
        background-color: rgba(255,255,255,0.92);
        border-color: rgba(255,255,255,0.92);
        color: var(--basin-green);
    }

    .btn-line{
        background-color: rgba(255,255,255,0.5);
        border-color: rgba(255,255,255,0.8);
        box-shadow: var(--glass-sheen-light), var(--glass-drop);
        -webkit-backdrop-filter: var(--glass-blur-s);
        backdrop-filter: var(--glass-blur-s);
    }

    .btn-line:hover{
        background-color: var(--basin-green);
        border-color: var(--basin-green);
        box-shadow: var(--glass-drop);
    }


    /*--footer and form fields--*/
    .loca-span,
    .newsletter input,
    .social i,
    .cff input,
    .cff select,
    .cff textarea{
        background-color: var(--glass-dark);
        border-color: var(--glass-edge);
        box-shadow: var(--glass-sheen);
        -webkit-backdrop-filter: var(--glass-blur-s);
        backdrop-filter: var(--glass-blur-s);
    }

    .cff input:focus,
    .cff select:focus,
    .cff textarea:focus,
    .newsletter input:focus{
        background-color: rgba(255,255,255,0.12);
        border-color: var(--river-blue);
    }

    .loca-span:hover,
    .social i:hover{ box-shadow: var(--glass-sheen);}


    /*--the map panel gets a glass rim--*/
    .map{
        border: 1px solid var(--glass-edge);
        box-shadow: var(--glass-sheen), var(--glass-drop-dark);
    }




/*======================================================
    FOOTER
======================================================*/

    .footer{
        background-image:
            radial-gradient(44em 30em at 8% 6%, rgba(33,204,232,0.14), transparent 60%),
            radial-gradient(36em 26em at 94% 90%, rgba(27,168,144,0.16), transparent 62%);
    }




/*======================================================
    NO BACKDROP-FILTER
    Older browsers get solid panels rather than see-through ones.
======================================================*/

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {

    .topmoved{ background-color: rgba(255,255,255,0.97);}

    .navopen{ background-color: var(--basin-deep);}

    .loca-span,
    .newsletter input,
    .social i,
    .cff input,
    .cff select,
    .cff textarea,
    .btn-ghost{ background-color: rgba(255,255,255,0.13);}

    .btn-line{ background-color: var(--white);}

    /*--without the blur these panels rely on their gradient alone--*/
    .p-text{ background-image: linear-gradient(to top, rgba(14,51,44,0.94) 35%, rgba(14,51,44,0.30) 100%);}

    .gwi-text{ background: linear-gradient(to top, rgba(14,51,44,0.96) 25%, rgba(14,51,44,0) 100%);}

    .wd-scroll i{ background-color: rgba(255,255,255,0.18);}

    .sc-arrow{ background-color: var(--white);}

}




/*======================================================
    REDUCED TRANSPARENCY
    Respect the OS setting; keep the colour, drop the see-through.
======================================================*/

@media (prefers-reduced-transparency: reduce) {

    .topmoved{
        background-color: rgba(255,255,255,0.98);
        background-image: none;
    }

    .pmv-card,
    .pn-card,
    .ed-card,
    .rt-card,
    .ig-link,
    .gw-item,
    .discover-stats,
    .pillar-long,
    .pc-place{
        background-color: var(--white);
        background-image: none;
    }

    .vh-card,
    .pt-firm,
    .rm-phase,
    .plbf,
    .pi{ background-image: none;}

}




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

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

    /*--the pillar cards only need the glass sheet once the copy
        is showing, which is from this breakpoint up--*/
    .p-text{
        background-image: linear-gradient(to top, rgba(14,51,44,0.62) 35%, rgba(14,51,44,0) 100%);
    }

}