*,*::after,*::before{
    box-sizing: border-box;
}

@font-face {
    font-family: 'forzablack';
    src: url('fonts/forza-black-webfont.woff2') format('woff2'),
         url('fonts/forza-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'forzamedium';
    src: url('fonts/forza-medium-webfont.woff2') format('woff2'),
         url('fonts/forza-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'forzalight';
    src: url('fonts/forza-light-webfont.woff2') format('woff2'),
         url('fonts/forza-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'forzathin';
    src: url('fonts/forza-thin-webfont.woff2') format('woff2'),
         url('fonts/forza-thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root{

    font-size: 16px;
    --ff-body: 'Lato', sans-serif;
    --ff-heading: 'forzablack';
    --ff-heading-thin: 'forzalight';
    --ff-forza-med: 'forzamedium';

    --c-white: hsl(0, 0%, 100%);
    --c-black: hsl(0, 0%, 0%);
    /* --c-dark-purple: hsl(296, 35%, 10%);
    --c-purple: hsl(284, 87%, 41%); */
    /* --c-dark-purple: #3b1c30;
    --c-purple: #471259; */
    --c-dark-purple: hsl(278, 88%, 17%);
    --c-purple: hsl(278, 88%, 40%);
    --c-dark-blue: hsl(236, 33%, 10%);
    --c-light-blue: hsl(196, 85%, 90%);
    /* --c-header-bg: hsla(205, 63%, 5%, var(--opacity,0.3)); */
    --c-input-bg: hsl(203, 58%, 10%);
    
    --c-blue: hsl(210, 62%, 48%);
    --c-pink: #FE68F8;
    --c-orange: #F2933F;
    --c-red: hsl(0, 62%, 48%);
    --c-green: hsl(110, 62%, 48%);
    --c-bg-dark: hsl(202, 63%, 8%);
    --c-bg-light:hsl(204, 56%, 11%);
    

}

img{
    max-width: 100%;
    height: auto;
}


body{
    margin: 0;
    font-family: var(--ff-body);
    background-color: hsl(204, 63%, 8%);
    transition: background-color 0.5s ease;
}

h1, h2, h3, h4, h5, h6{
    font-family: var(--ff-heading);
    margin: 0;
}

h2{
    font-size: 1rem;
    margin-block-end: 4rem;
    grid-column: 1/-1;
}

h2::before{
    content: '+ ';
}

h2.tagline::before{
    content: '';
}

h2.tagline{
    color: var(--c-white);
    font-family: var(--ff-heading-thin);
    text-transform: uppercase;
    letter-spacing: 0.2ch;
    font-size: 0.7rem;
    margin-block-start: -3rem;
    margin-block-end: 2rem;
}

h2.tagline .pink{
    color: var(--c-pink);
}

h2.tagline .orange{
    color: var(--c-orange);
}

h2.tagline .blue{
    color: var(--c-blue);
}


.pop-up{
    color: var(--c-white);
    padding: 0.25rem 1rem;
    text-align: center;
    line-height: 1.5em;
    font-weight: bold;
    display: none;
    position: fixed;
    width: 100%;
    z-index: 999;

    
}

.pop-up#success{
    background-color: var(--c-green);
    color: var(--c-white);
}

.pop-up#fail{
    background-color: var(--c-red);
}

.pop-up#success:target{
    display: block;
    animation: fadeOff 0.5s linear 5s 1 forwards;
}

.pop-up#fail:target{
    display: block;
    animation: fadeOff 0.5s linear 5s 1 forwards;
}

@keyframes fadeOff {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
    
}


header{
    position: fixed;
    z-index: 999999;
    width: 100vw;
    --opacity: 0.3;
    --c-header-bg: hsla(205, 63%, 5%, var(--opacity,0.3));
    background-color: var(--c-header-bg);
    color: var(--c-white);
    font-family: var(--ff-heading-thin);
    text-transform: uppercase;
    font-size: 1rem;
    padding: 0.75rem;
    
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

header .logo{
    /* width: 150px;
    margin-left: 20px; */
    margin-right: auto;
    /* height:26px; */
 }

header > a{
    display: block;
}

#hamburger{
    display: none;
}

header label{
    /* padding: 0 1rem; */
    font-size: 1.5rem;
    cursor: pointer;
}

header nav{
    width: 100%;
    overflow: hidden;
    max-height: 0;
    transition: max-height .5s ease-out;
    z-index: 99;
}

header .menu{
   display: flex;
   flex-direction: column;
   
   list-style: none;
   padding: 0;
   margin: 1rem 0 0 0;
   border-top: 1px solid var(--c-pink);
}

.menu li{
    padding: 0.25rem;
    /* background-color: hsla(0, 0%, 0%, 0.1) */
 }

.menu li:not(:last-of-type){
    /* border-bottom: 1px solid var(--c-pink); */
}

.menu li:last-of-type{
    padding-bottom: 0;
}

.menu a{
   color: var(--c-white);
   display: block;
   padding: 0.5em 0;

   text-decoration: none;
   text-transform: uppercase;
   font-size: 0.75rem;
   text-align: right;
   text-shadow: 2px 2px 5px var(--c-black);
   font-family: var(--ff-heading);
}

.menu a::before{
    content: ': : ';
    display: none;
}

.menu li:hover a::before{
    display: inline;
}

.menu li.social a::before{
    content: '';
    display: none;
}

.menu li.nav-metaverse:hover a{
    color: var(--c-orange);
}

.menu li.nav-games:hover a{
    color: var(--c-blue);
}

.menu li.nav-creators:hover a{
    color: var(--c-pink);
}

.menu li.nav-connect:hover a{
    color: var(--c-purple);
}

.menu li.nav-work:hover a{
    color: var(--c-light-blue);
}

header li.nav-insta:hover path{
    fill: var(--c-pink)
}

header li.nav-in:hover path{
    fill: var(--c-blue)
}

#hamburger:checked + nav{
    max-height: 100vh;
}

section#work{
    min-height: 60vh;
}

section #work .new-leadership{
    height: auto;
}


.team-grid{

}

.corner-lines div{
   display: none;
}

footer{
    /* background-color: var(--c-dark-purple); */
    color: var(--c-white);
    text-transform: uppercase;
}

.thankyou{
    display: grid;
    place-items: center;
    padding: 3rem;
    max-width: 30rem;
    margin: 0 auto;
    text-align: center;
}

.thankyou img{
    width: 50%;
    height: auto;
}

.thankyou p{
    text-transform: uppercase;
    font-family: var(--ff-heading);
    font-size: min(max(1.75rem, 20vw), 3rem);
    margin: 0;
    margin-block-start: 2rem;
}

@supports (font-size: clamp(1.75rem, 3vw, 2.1rem)) {
    .thankyou p{
        font-size: clamp(1.75rem, 10vw, 3rem);
    }
}

.copywrite{
    background-color: black;
    text-align: center;
}

.copywrite p{
    margin: 0;
    padding: 0.75em;
}

main{
    display: grid; 
    place-items: center; 
    min-height: 100vh;
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
    /* background-position: -100vh center; */
    position: relative;
}

main > section{
    padding: 4rem 2rem;
    width: 99vw;
    position: relative;
    min-height: 100vh;
}

.bg-dark{
    background-color: var(--c-bg-dark) !important;
}

.bg-light{
    background-color: var(--c-bg-light) !important;
}

.tagline-large{
    color: var(--c-white);
    /* background-color: hsl(204, 63%, 8%); */
    text-transform: uppercase;
    min-height: unset;
    display: grid;
    place-content: center;
    padding: 10rem 2rem;
    position: relative;
    grid-column: 1/-1;
}

.tagline-large h2, .tagline-large h2 span{
    /* text-align: center; */
    display: block;
    font-size: 0.8rem;
    line-height: 1.75;
    margin-block-end: 0;
    /* font-family: var(--ff-forza-med); */
    font-family: var(--ff-heading-thin);
}

.tagline-large h2::before{
    content: '';
}

.tagline-large::before{
    content: '';
    /* position: absolute;
    top: 0; 
    height: 8.1rem;
    width: 100%;
    background: linear-gradient(0deg, hsl(204, 63%, 8%) 0%, hsla(204, 63%, 8%, 0) 100%); */
    /* background: red; */
}

section.home{
    color: var(--c-pink);
    text-transform: uppercase;
    min-height: 100vh;
    display: grid;
    place-content: center; 
    /* text-align: center; */
    padding: 4rem 2rem;
}

section.home h2::before, section.home h2::after{
    content: ' : : ';
    font-family: var(--ff-heading-thin);
}

/* section.home p::before{
    display: block;
    font-size: 0.6rem;
    color: var(--c-white);
    letter-spacing: 0.5ch;
    content: '...........';
    line-height: 2.5;
    margin-bottom: 0.5rem;
    font-family: var(--ff-heading-thin)
} */

section.home h2{
    font-size: 1.7rem;
    line-height: 1;
    margin-bottom: 1rem;
    margin-block-end: 0;
    text-align: center;
}

section.home p{
    color: var(--c-white);
    font-size: 1rem;
    text-transform: none;
    line-height: 1.5em;
    max-width: 96ch;
    margin-top: 3rem;
}

#metaverse h2{
    color: var(--c-orange);
}

#games h2{
    color: var(--c-blue);
}

#creators h2{
    color: var(--c-pink);
}

#work h2{
    color: var(--c-light-blue);
}



.hero{
    background-image: url(../images/cc-tech-background.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: grid;
    gap: 3rem;
    justify-items: center;
    align-items: center;
    min-height: unset;
    padding-bottom: 6rem;
    width: 100%;
}

.hero-logo{
    filter:drop-shadow(0px 45px 20px black);
    /* transform: scale(0.6); */
    padding: 3rem;
    margin-block-end: 2rem;
    margin-block-start: 6rem;
}

h1{
    grid-column: 1/-1;
    grid-row: 1/-1;
}

.hero > img{
    grid-column: 1/-1;
    grid-row: 1/2;
    max-width: 90%;
    filter: drop-shadow(10px 30px 20px rgba(0, 0, 0, 0.6));
    -webkit-filter: drop-shadow(10px 30px 20px rgba(0, 0, 0, 0.6));
}




.showreel-container{
    width: 80vw;
    /* height: 100%; */
    grid-column: 1/-1;
    grid-row: 2/3;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.showreel{
    grid-row: 1/-1;
    grid-column: 1/-1;
    width: 100%;
    aspect-ratio: 16/9;
    /* filter: drop-shadow(10px 30px 20px rgba(0, 0, 0, 0.6));
    -webkit-filter: drop-shadow(10px 30px 20px rgba(0, 0, 0, 0.6)); */
}

.showreel-thumbnail{
    cursor: pointer;
    grid-row: 1/-1;
    grid-column: 1/-1;
    z-index: 9;
}

.new-leadership{
    position: relative;
    /* min-height: 70vh; */
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content;
    gap: 1rem;
    max-width: 980px;
}


.new-leadership h2{
    /* color: var(--c-white);
    font-size: 2rem;
    margin-bottom: 2rem; */
}

.new-leadership h3{
    grid-column: 1/-1;
    color: var(--c-white);
    font-family: var(--ff-heading-thin);
    text-align: center;
    margin: 2rem 0 1rem 0;
}

/* #creators .new-leadership:first-of-type h3::before, #work .new-leadership:first-of-type h3::before{
    display: block;
    font-size: 0.6rem;
    color: var(--c-white);
    letter-spacing: 0.5ch;
    content: '...........';
    line-height: 2.5;
    margin-bottom: 0.5rem;
    font-family: var(--ff-heading-thin)
} */

#creators .new-leadership:last-of-type h3{
    margin-top: 4rem;
}


/* 
.new-leadership::before{
    content: '';
    position: absolute;
    transform: translateX(-50%);
    margin-left: 50%;
    top: 2rem;
    width: 80vw;
    height: 1px;
    background-color: var(--c-white);
} */

.outline-text{
    --outline-color: var(--c-white);
    color: transparent; 
    -webkit-text-stroke: 1px var(--outline-color);
}

footer.new-home{
    background-color: unset;
}

footer.new-home section{
    display: grid;
    place-content: center;
}

footer.new-home section a{
    margin: 0 1rem 6rem 1rem;
    color: var(--c-white);
    text-decoration: none;
    padding: 0.75em 3em;
    border: 2px solid var(--c-purple);
}

footer.new-home section a:hover, footer.new-home section a:active{
    border: 2px solid var(--c-white);
}

/* 768px */
@media (min-width:48em){

    header{
        flex-wrap: nowrap;
    }

    header nav{
         /*clear unneed mobile styles*/
         position: unset;
         top: unset;
         max-height: unset;
         background-color: unset;
         width: unset;
    }

    header .menu{
        flex-direction: row;
        border: unset;
        margin: 0;
        align-items: center;
    }

    header .menu li{
        border: unset;
        padding: 0.25rem 0.75rem;
    }

    header .menu a{

    }

    header .social svg{
        height: 1rem;
    }

    header .nav-insta svg{
        /* height: 2rem; */
        margin-top: 0.3em;
    }

    .menu a::before{
        content: '';
        display: none;
    }

    header label{
        display: none;
    }

    .hero{
        grid-template-columns: 1fr 1fr;
        min-height: 100vh;
    }

    .hero > img{
        grid-column: 1/-1;
        grid-row: 1/-1;
    }

    
    .hero-logo{
        /* padding: 7rem 20rem; */
        /* margin-block-end: 2rem; */
        margin-block-end: 1rem;
        margin-block-start: 1rem;
        transform: scale(0.8);
    }

    h2.tagline{
        margin-block-start: -12rem;
        /* margin-block-end: 2rem; */
        font-size: 1rem;
    }

    .showreel-container{
        width: 100%;
        grid-column: 1/-1;
        justify-self: center;
        /* grid-row: 1/-1; */
    }

    .showreel{
        filter: drop-shadow(10px 30px 20px rgba(0, 0, 0, 0.6));
        -webkit-filter: drop-shadow(10px 30px 20px rgba(0, 0, 0, 0.6));
    }

section#metaverse{
    grid-row: 2/3;
    grid-column: 1/-1;
}
    
.corner-lines{
    pointer-events: none;
    z-index: 999;
    position: sticky;
    top: 4rem;
    width: 100%;
    height: 92%;
    display: grid;
    grid-template-columns: 2rem auto 1fr auto 2rem;
    grid-template-rows: 2rem auto 1fr auto 2rem;
    color: var(--c-white);
    grid-row: 2/3;
    grid-column: 1/-1;
}

.corner-lines div{
    display: grid;
    place-items: center;
    font-size: 2rem;
    letter-spacing: 1rem;
    opacity: 0.5;
}

.corner-lines div:nth-child(1){
    grid-row: 2/3;
    grid-column: 2/3;
}

.corner-lines div:nth-child(2){
    grid-row: 2/3;
    grid-column: 4/5;
}

.corner-lines div:nth-child(3){
    grid-row: 4/5;
    grid-column: 2/3;
}

.corner-lines div:nth-child(4){
    grid-row: 4/5;
    grid-column: 4/5;
}


#work .team-grid{
    width: 80vw;
}

}








.leadership{
    background-color: var(--c-dark-purple);
    color: white;
    display: grid;
}

.leadership-card{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content min-content 2.5rem;
    column-gap: 0.625rem;
    /* grid-auto-flow: dense; */
}

.leadership-card:not(:last-of-type){
    margin-block-end: 3rem;
} 

.leadership-headshot{
    grid-row: 1/4;
    grid-column: 1/2;
    align-self: end;
    /* height: 100%;
    width: 100%; */
    /* object-fit: cover; */
    clip-path: polygon(65% 0%, 100% 35%, 100% 100%, 0 100%, 0 0);
    filter: grayscale(1);
    /* box shadow & clip path??? */
    /* box-shadow: 10px 30px 20px rgba(0, 0, 0, 0.6); */
}

.leadership-name{
    margin: 0;
    font-family: var(--ff-heading);
    font-size: min(max(1rem, 5vw), 3rem);
    line-height: 1.2em;
    margin-block-start: 2rem;
    text-transform: uppercase;
    align-self: start;
}

.leadership-name span{
    font-size: 0.875em;
    line-height: 1em;
    font-family: var(--ff-heading-thin);
    display: block;
}
.leadership-name span::before{
    content: ': : ';
}

@supports (font-size: clamp(1rem, 5vw, 3rem)) {
    .leadership-name{
        font-size: clamp(1rem, 5vw, 3rem);
    }
}

.leadership-bio{
    margin: 0;
    grid-column: 1/-1;
    line-height: 1.5em;
    margin-block-start: 0.45rem;
    margin-block-end: 0.45rem;
}

.leadership .socials{
    /* align-self: unset; */
    grid-row: 3/4;
}

.leadership-coords{
    margin: 0;
    grid-row: 2;
    font-size: 0.5rem;
    align-self: end;
    /* margin-block-end: 0.25em; */
}

/* 600px */
@media (min-width:37.5em){

    .leadership{
        padding: 4rem 2rem;
    }

    .leadership-card{
        grid-template-columns: 10rem 1fr;
        grid-template-rows: min-content min-content;
    }

    .leadership-card:nth-of-type(odd){
        margin-block-end: unset;
    }

    .leadership-headshot{
        grid-row: 1/5;
    }

    .leadership-name{
        font-size: min(max(1.5rem, 1.5vw), 3rem);
        line-height: 1.2em;
    }
    
    .leadership-name span{
        font-size: 1em;
        line-height: 1em;
        font-family: var(--ff-heading-thin);
        display: block;
    }
    
    @supports (font-size: clamp(1.5rem, 1.5vw, 3rem)) {
        .leadership-name{
            font-size: clamp(1.5rem, 1.5vw, 3rem);
        }
    }

    .leadership-bio{
        grid-row: 3/4;
        grid-column: 2/3;
        max-width: 60ch;
    }

    .leadership .socials{
        grid-column: 2;
        margin-bottom: 6px;
        grid-row: 4/5;
    }

    .leadership-card:nth-of-type(even){
        grid-template-columns: 1fr 10em;
        text-align: right;
    }

    .leadership-card:nth-of-type(even) .leadership-headshot{
        grid-column: -2;
        clip-path: polygon(35% 0, 100% 0, 100% 100%, 0 100%, 0 35%);
    }

    .leadership-card:nth-of-type(even) .leadership-bio{
        grid-column: 1/2;
        justify-self: end;
    }

    .leadership-card:nth-of-type(even) .leadership-socials{
        grid-column: 1;
        justify-self: end;
        direction: rtl;
    }
}


/* 930px */
@media (min-width:58.125em){

    header{
        padding-left: 4rem;
        padding-right: 4rem;
    }

    .leadership-name span{
        display: inline;
    }

    .tagline-large h2{
        /* text-align: center; */
        display: block;
        font-size: 1.2rem;
        line-height: 1.3em;
        margin-block-end: 0;
        max-width: 72ch;
    }

    section#work{
        min-height: 100vh;
    }


    section.home h2 {
        font-size: 3rem;
    }

    
    section.home p::before {
        font-size: 1rem;
    }

    #creators .new-leadership:first-of-type h3::before, #work .new-leadership:first-of-type h3::before{
        font-size: 1rem;
    }

    section.home p{
        font-size: 1.1rem;
    }

}

/* 1200px */
@media (min-width:60em){

    .leadership{
        /* grid-template-columns: 1fr 1fr 1fr 1fr;
        column-gap: 1rem; */
        max-width: 80em;
        margin: 0 auto;
        box-shadow: 0 0 0 100vmax var(--c-dark-purple);
        clip-path: inset(0 -100vmax);
    }



}










.socials{
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1.25rem 1.25rem 1.25rem;
    grid-template-rows: 1.25rem;
    gap: 0.375rem;
    align-self: end;
    margin-bottom: 2px;
}
.socials a{
    text-decoration: none;
}

.socials li{
    margin: 0;
    padding: 0.1em;
    background-color: white;
    color: var(--c-bg-light);
    font-size: 1rem;
    display: grid;
    place-items: center;
}
/* 
.socials i{
    margin: 0;
} */

.socials li:hover{
    cursor: pointer;
    /* opacity: 0.75; */
    /* transform: scale(1.05); */

}

.talent{
    background-color: var(--c-dark-blue);
    color: white;
    display: grid;
}

.talent-card{
    display: grid;
    grid-template-columns: 1fr 2.5rem;
    gap: 0.625rem;
    grid-auto-flow: dense;
}

/* .talent-card:nth-of-type(n+2){
    margin-block-start: 3rem;
} */

section.home .talent-card p::before{
    content: '';
    display: none;
}

.talent-headshot{
    grid-row: 1/3;
    /* height: 100%; */
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
}

.talent-name, .talent-role, .talent-achievements{
    grid-column: 1/-1;
    margin: 0;
}

.talent-coords{
    margin: 0;
    grid-row: 1;
    font-size: 0.875rem;
    writing-mode: vertical-rl;
    text-orientation: mixed;   
    justify-self: start;
}

.talent .socials{
    align-self: end;
    grid-template-rows: 2rem 2rem;
    grid-template-columns: 2rem;
}

.talent .socials li{
    color: var(--c-dark-blue);
}

.talent-card .talent-name{
    margin: 0;
    font-family: var(--ff-heading);
    font-size: min(max(1.5rem, 8vw), 1rem);
    line-height: 1em;
    text-transform: uppercase;
}

.talent-card .talent-name span{
    font-family: var(--ff-heading-thin);
    /* color: var(--c-blue); */
    font-size: min(max(0.675rem, 5vw), 1rem);
    display: block;
}


.new-leadership .talent-card{
    grid-template-columns: 1fr;
}


.new-leadership .talent-name{
    text-transform: uppercase;
    text-align: left;
}

.new-leadership .talent-headshot{
    grid-row: 1/2;
    /* grid-column: 1/-1;
    height: 100%;
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
    overflow: hidden; */
}

.new-leadership .talent-name{
    grid-row: 2/3;
    grid-column: 1/-1;
}
@supports (font-size: clamp(1.5rem, 8vw, 1.675rem)) {
    .talent-card .talent-name{
        font-size: clamp(0.72rem, 2.65vw, 1.4rem);
    }

    .talent-card .talent-name span{
        font-size: min(max(2rem, 8vw), 0.8rem);
    }
}

.talent-achievements{
    padding: 0;
    list-style: none;
}

/* .talent-achievements li::marker{
    content: '+ ';
    font-weight: bold;
} */

.talent-achievements li ul{
    padding: 0 0.75em;
    list-style: none;
}

/* .talent-achievements li li::marker{
    color: var(--c-blue);
} */

.talent-achievements li::before{
    content: '+ ';
    font-weight: bold;
}

.talent-achievements li li::before{
    color: var(--c-blue);
}


/* 600px */
@media (min-width:37.5em){

    .talent{
        grid-template-columns: 1fr 1fr;
        column-gap: 1rem;
        padding: 4rem 2rem;
    }

    .talent-card{
        grid-template-rows: max-content min-content min-content;
    }

    .talent-card:nth-of-type(n+2){
        margin-block-start: unset;
    }

    .talent-card:nth-of-type(n+3){
        /* margin-block-start: 2rem; */ 
    }

    .new-leadership{
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }


} 

/* 960px */
@media (min-width:60em){

    .talent{
        grid-template-columns: 1fr 1fr 1fr 1fr;
        column-gap: 1rem;
        max-width: 80em;
        margin: 0 auto;
        box-shadow: 0 0 0 100vmax var(--c-dark-blue);
        clip-path: inset(0 -100vmax);
    }

    .talent-card:nth-of-type(n+2){
        margin-block-start: unset;
    }

    .talent-card:nth-of-type(n+5){
        margin-block-start: 2rem;
    }

    .talent-card{
        grid-template-rows: max-content min-content min-content;
    }

    .talent-coords{
        font-size: 0.5rem;
    }

    .new-leadership h2{
        color: var(--c-white);
        font-size: 3rem;
        margin-bottom: 2rem;
    }
    
    .new-leadership{
        position: relative;
        min-height: unset
    }
    
    /* .new-leadership::before{
        content: '';
        position: absolute;
        transform: translateX(-50%);
        margin-left: 50%;
        top: 6.5rem;
        width: 80vw;
        height: 1px;
        background-color: var(--c-white);
    } */

    #creators .new-leadership:first-of-type h3, #work .new-leadership:first-of-type h3, #creators .new-leadership:last-of-type h3{
        font-size: 1.8rem;
    }

}

/* 1200px */
@media (min-width:75em){

    .new-leadership h2{
        color: var(--c-white);
        font-size: 3rem;
        margin: 3rem 0;
    }

    /* .new-leadership::before{
        content: '';
        position: absolute;
        transform: translateX(-50%);
        margin-left: 50%;
        top: 6rem;
        width: 60vw;
        height: 1px;
        background-color: var(--c-white);
    } */

}






.connect{
    background-size: cover;
    background-repeat: no-repeat;
    /* background-image: url(../images/connect-bg.png); */
}

.connect h2{
    color: var(--c-dark-blue);
}


.connect form{
    /* background-color: var(--c-dark-blue); */
    padding: 1rem;
    display: grid;
    gap: 2rem;
    /* position: relative; */
    text-align: left;
}

.form-group{
    display: grid;
    gap: 0.25rem;
    grid-template-rows: min-content min-content;
}

.connect label{
    color: var(--c-purple);
    font-family: var(--ff-forza-med);
    text-transform: uppercase;
}

.connect .error{
    margin: 0;
    color: var(--c-red);
    font-family: var(--ff-heading-thin);
    text-transform: uppercase;
    font-size: 0.675rem;
    display: none;
}

.connect input{
    border-radius: 0;
    -webkit-appearance: none;
    padding: 0.5rem;
    border: none;
    background-color: var(--c-input-bg);
    color: var(--c-white);
}

.connect textarea{
    border-radius: 0;
    -webkit-appearance: none;
    padding: 0.5rem;
    border: none;
    min-height: 5rem;
    resize: none;
    background-color: var(--c-input-bg);
    color: var(--c-white);
}

.connect .button-wrapper{
    justify-self: center;
    /* clip-path: polygon(0 0, 85% 0%, 100% 45%, 100% 100%, 15% 100%, 0% 55%); */
    /* background-color: var(--c-purple); */
    /* padding: 0.1em; */
    /* border-radius: 0; */
    /* width: 100%;
    height: 100%; */
}

.connect-new .connect-content h2{ 
        color: var(--c-purple);
        text-align: center;
        /* font-size: 3rem; */
        line-height: 1;
        margin-bottom: 1rem;
}

/* .connect-new .connect-content h2::before{
    content: '';
} */

/* .button-wrapper input[type=submit], .button-wrapper button{
    border-radius: 0;
    -webkit-appearance: none;
    background-color: var(--c-dark-blue);
    color: var(--c-white);
    cursor: pointer;
    border: none;
    font-family: var(--ff-heading);
    font-size: 0.875rem;
    text-transform: uppercase;
    padding: 0.5em 1.75em;
    clip-path: polygon(0 0, 85% 0%, 100% 50%, 100% 99%, 14% 99%, 0% 52%);
} */

.button-wrapper input[type=submit], .button-wrapper button{
    border-radius: 0;
    -webkit-appearance: none;
    background-color: transparent;
    color: var(--c-white);
    cursor: pointer;
    border: 1px solid var(--c-purple);
    font-family: var(--ff-heading-thin);
    font-size: 0.875rem;
    text-transform: uppercase;
    padding: 0.75em 2.75em;
    width: 100%;
    height: 100%;
    transition: background-color 0.1s linear;
    /* clip-path: polygon(0 0, 85% 0%, 100% 50%, 100% 99%, 14% 99%, 0% 52%); */
}

.button-wrapper input[type=submit]:hover, .button-wrapper button:hover{
    background-color: var(--c-purple);
    color: var(--c-white);
}

.button-wrapper:focus-within{
    background-color: var(--c-blue);
}

.form-group input:not(:focus):not(:placeholder-shown):invalid, .form-group textarea:not(:focus):not(:placeholder-shown):invalid {
   outline: 2px solid var(--c-red)
}

.form-group input:not(:focus):not(:placeholder-shown):invalid ~ .error, .form-group textarea:not(:focus):not(:placeholder-shown):invalid ~ .error {
    display: block;
}

.form-group input:not(:focus):not(:placeholder-shown):valid, .form-group textarea:not(:focus):not(:placeholder-shown):valid {
    outline: 2px solid var(--c-green);
}

.recaptcha-container{
    grid-row: span 2;
    justify-self: center;
    overflow: hidden;
    transform: scale(0.8);
}

#g-recaptcha-error{
    grid-column: 2;
    color: var(--c-red);
    text-transform: uppercase;
    font-family: var(--ff-heading);
}

/* 600px */
@media (min-width: 37.5em){
    .connect form{
        grid-template-columns: 1fr;
    }

    .message{
        grid-column: 1/-1;
    }

    .connect .button-wrapper{
        grid-column: -2;
        grid-row: span 2;
        /* justify-self: end; */
        align-self: end;
    }

    .button-wrapper input[type="submit"], .button-wrapper button {
        padding: 1em 7em;
    }

    .recaptcha-container{
        justify-self: start;
        /* transform: scale(1); */
    }

    #g-recaptcha-error{
        font-family: var(--ff-heading-thin);
    }
}

/* 960px */
@media (min-width:60em){

    .connect-content{
        max-width: 80em;
        margin: 0 auto;
        min-width: 40em;
    }

    .connect form{
        padding: 2rem 3rem;
        grid-template-columns: 1fr 1fr;
    }

    .form-group{
        grid-column: 1/-1;
        /* grid-template-columns: 8rem 2fr; */
        /* gap: 0; */
    }

    .connect .error{
        /* grid-row: 1/-1; */
        grid-column: 2/3;
    }

    .recaptcha-container{
        display: grid;
        /* grid-template-columns: 8rem 2fr;
        justify-self: start; */
    }

    .g-recaptcha{
        grid-column: 2;
    }

    .connect .button-wrapper{
        grid-column: -2;
        grid-row: span 2;
        /* justify-self: end; */
        align-self: center;
    }

    .button-wrapper input[type="submit"], .button-wrapper button {
        padding: 1.5em 7em;
    }
}