@charset "utf-8";
/* CSS Document */
/* © 2022 EX3 Inc. All Rights Reserved. */


body.for_enterprises section:nth-of-type(1)::after {
    background-image: url(../img/hybrid_intel_for_enterprises1.jpg);
	background-attachment: fixed;
	content: '';
    opacity: 0.75;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
}


body.for_enterprises section:nth-of-type(1) h1 {
    bottom: 30%;
}

/*****************SECTION TWO*********************/
body.for_enterprises section:nth-of-type(2)::after {
    background-image: url(../img/hybrid_intel_for_enterprises1.jpg);
    opacity: 0.4;
}

body.for_enterprises section.two div.enterprise_areas {
    right: 0;
    position: absolute;
    z-index: 21;
    width: 80%;
    height: 88%;
    padding: 4% 0%;
    opacity: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

body.for_enterprises section.two div.enterprise_areas > div {
    display: flex;
    position: static;
    color: var(--white);
    text-decoration: none;
    align-items: center;
    border-bottom: 1px solid transparent; /* Set width and style */
    border-image: linear-gradient(to right, transparent,  var(--dark-grey)) 1; /* Apply gradient */
    transform: scale(0.85);
    opacity: 0.4;
    transition: opacity 0.6s ease-in-out;
    cursor: pointer;
}

body.for_enterprises section.two div.enterprise_areas > div:hover {
    opacity: 1;
}

body.for_enterprises section.two div.enterprise_areas > div:first-of-type {
   opacity: 1;
}

body.for_enterprises section.two div.enterprise_areas > div:last-of-type {
    border:none;
}

body.for_enterprises section.two div.enterprise_areas > div h2, body.for_enterprises section.two div.enterprise_areas > div h3 {
    opacity: 1;
}

div.text_block {
    width:45%;
    pointer-events: none;
    justify-items: self-end;
    align-self: flex-start;
    margin: 2% 0 0 0;

    span {
        font-family: 'Playfair Display';
        display: flex;
        color: var(--light-grey);
    }
}

div.model_area {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width:auto;
    pointer-events: none;
}

div.model_area ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
    column-gap: 35px;
    row-gap: 35px;
    justify-content: flex-end;
}

div.model_area ul li {
    display: flex;
    flex-direction: column;
}

div.model_area ul li span {
    color:var(--light-grey);
}


div.enterprise {
    height: 28%;
    width: 98%;
    padding: 1% 1% 1% 1%;

    h2 {
        font-size: 2.6em;
    }

    li {
        flex-basis: calc(100% / 4);
    }

}

div.divisions  {
    display: flex;
    position: absolute;
    right: 3%;
    height: 22%;
    width: 80%;
    padding: 1% 1% 1% 19%;

    h2 {
        font-size: 2.2em;
    }

    li {
        flex-basis: calc(100% / 4);
    }
}

div.departments  {
    height: 20%;
    display: flex;
    position: absolute;
    right: 0%;
    width: 80%;
    padding: 1% 1% 1% 19%;

    h2 {
        font-size: 2em;
    }

    li {
            flex-basis: calc(100% / 3);
    }
}

div.individuals  {
    height: 17%;
    display: flex;
    position: absolute;
    right: 3%;
    width: 70%;
    padding: 1% 1% 1% 29%;

    h2 {
        font-size: 1.8em;
    }

    li {
        flex-basis: calc(100% / 3);
    }
}

/* Tall blur (as .tall): only while section two of the Enterprises page is in
   view, where the copy runs longest. Other sections and the Divisions /
   Departments / Individuals pages keep the standard blur height. Done in CSS
   because app.js rewrites the overlay's className on every scroll. */
body.for_enterprises:not(.for_divisions):not(.for_departments):not(.for_individuals):has(section.two.sectionFadein) div.gradient_overlay {
    height: 85%;
}

div.operating_model_animation {
    position: absolute;
    z-index: 5000;
    bottom:3%;
    left: 2%;
    width: 525px;
    transform: scale(1.0);
}

    .stg8{background:transparent;border-radius:12px;padding:26px;display:flex;flex-direction:column;align-items:center;gap:16px}
    .vp8{width:100%;height:400px;perspective:1600px;perspective-origin:15% 145%;display:flex;align-items:center;justify-content:center}
    .stk8{position:relative;width:340px;height:240px;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-42deg);transition:transform 1100ms cubic-bezier(.65,0,.2,1)}
    .stk8.flat{transform:rotateX(0deg) rotateZ(0deg)}
    .ly8{backdrop-filter: blur(15px);position:absolute;left:50%;top:50%;width:var(--w);height:calc(var(--w)*.62);margin-left:calc(var(--w)/-2);margin-top:calc(var(--w)*-.31);background:var(--fill);border:1px solid rgba(255,255,255,.24);transform:rotateZ(0deg) rotateX(0deg) translate3d(var(--x),var(--y),var(--z));transition:transform 1100ms cubic-bezier(.65,0,.2,1),width 1100ms cubic-bezier(.65,0,.2,1), background-color 600ms ease;display:flex;align-items:flex-end;padding:10px 14px;box-sizing:border-box; font-family: 'Playfair Display';}
    .stk8.flat .ly8{transform:rotateZ(0deg) rotateX(0deg) translate3d(var(--fx),var(--fy),0);width:var(--fw)}
    .lb8{font-family:var(--font-voice);font-size:13px;color:#fff;opacity:0;transition:opacity 450ms ease 500ms;white-space:nowrap}
    .stk8.flat .lb8,.ly8.out .lb8{opacity:1}
    @keyframes pull8{
    0%{transform:rotateZ(0deg) rotateX(0deg) translate3d(var(--x),var(--y),var(--z))}
    45%{transform:rotateZ(0deg) rotateX(0deg) translate3d(var(--x),var(--y),calc(var(--z) + 200px))}
    /* 100%{transform:rotateZ(42deg) rotateX(-58deg) translate3d(0px,0px,130px)}} */
    100%{transform:rotateZ(42deg) rotateX(-58deg) translate3d(0px,0px,400px)}}
    @keyframes push8{
        0%{transform:rotateZ(42deg) rotateX(-58deg) translate3d(0px,0px,400px)}
    /* 0%{transform:rotateZ(42deg) rotateX(-58deg) translate3d(0px,0px,130px)} */
    55%{transform:rotateZ(0deg) rotateX(0deg) translate3d(var(--x),var(--y),calc(var(--z) + 200px))}
    100%{transform:rotateZ(0deg) rotateX(0deg) translate3d(var(--x),var(--y),var(--z))}}
    .btnrow8{display:flex;flex-wrap:wrap;gap:8px;justify-content:center; position:fixed; bottom: 11%; left: 1%;}
    .btnrow8 button{border:1px solid rgba(255,255,255,.3);color:#e8e5e0;background:transparent;font-size:12px;padding:12px 24px; font-family:"Playfair Display";}
    .btnrow8 button.on{border-color:#fff;color:#fff}

    .fadeStackLayer {
        background:rgba(255,255,255,0.4);
    }

    .ly8 span {
        color:var(--light-grey);
        font-size: 0.8em;
    }

body.for_enterprises section:nth-of-type(2) div.title_area, body.for_enterprises section:nth-of-type(3) div.title_area  {
    width: 40% !important;
    bottom: 65% !important;
    left: 0;
    transform: scale(0.75);
}

body.for_enterprises section:nth-of-type(3) div.title_area h1, body.for_enterprises section:nth-of-type(3) div.title_area p {
    width:70%;
}

/*****************SECTION THREE*********************/

body.for_enterprises section:nth-of-type(3)::after {
    background-image: url(../img/division_banner_wide.jpg);
    background-attachment: fixed;
    content: '';
    opacity: 0.75;
    background-position: 23% 0%;
    background-size: 100% 55%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
}

body.for_enterprises section:nth-of-type(3) {
    justify-content: end;

    div.platform_grid {
		display: flex;
        flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
		row-gap: 1%;
        column-gap: 4%;
        position: absolute;
        right: 0;
        width: 79%;
		z-index: 25;
        bottom: 5%;
        height: 35%;
    } 

     div.platform_grid div {
        height: auto;
        cursor: pointer;
        width: 16%;
        display: flex;
        flex-direction: column;
        align-self: flex-start;
     }

    div.platform_grid  h2, div.platform_grid p  {
        opacity: 1;
        width: 100%;
    }

    div.platform_grid p  {
        font-size: 0.85em;
        color:var(--light-grey);
    }
}

/*****************LEVEL PAGES (Divisions, Departments & Teams, Individuals)*********************/
/* These pages reuse this sheet via body.for_enterprises and drop their parent
   levels; the page class (for_divisions etc.) sets what differs. */

/* Hero + section two photography */
body.for_divisions section:nth-of-type(1)::after,
body.for_divisions section:nth-of-type(2)::after {
    background-image: url(../img/division_banner.jpg);
    background-position: 70% center;
}

body.for_departments section:nth-of-type(1)::after,
body.for_departments section:nth-of-type(2)::after {
    background-image: url(../img/hybrid_intel3.jpeg);
    background-position: center 30%;
}

body.for_individuals section:nth-of-type(1)::after,
body.for_individuals section:nth-of-type(2)::after {
    background-image: url(../img/hybrid_intel3a.jpg);
    background-position: center 25%;
}

/* The page's own level leads the list, sized like the Enterprise row.
   Kept low-specificity so the phone / tablet layouts (height: auto) win. */
body.for_divisions div.divisions,
body.for_departments div.departments,
body.for_individuals div.individuals {
    height: 28%;
}

body.for_divisions div.divisions h2,
body.for_departments div.departments h2,
body.for_individuals div.individuals h2 {
    font-size: 2.6em;
}

/* Fewer levels leave room: sit the "for …" list at the bottom of the section */
body.for_divisions section.two div.enterprise_areas,
body.for_departments section.two div.enterprise_areas,
body.for_individuals section.two div.enterprise_areas {
    justify-content: flex-end;
}

/* One layer has no stacked / individual views to switch between */
body.for_individuals .btnrow8 {
    display: none;
}

/* Hero headlines wrap into even lines instead of leaving one word behind */
body.for_divisions section:nth-of-type(1) h1,
body.for_departments section:nth-of-type(1) h1,
body.for_individuals section:nth-of-type(1) h1 {
    text-wrap: balance;
}