@import url(normalize.css);
@import url(reset.css);

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
    --step--2: clamp(0.6944rem, 0.6577rem + 0.1836vw, 0.8rem);
    --step--1: clamp(0.8333rem, 0.7754rem + 0.2899vw, 1rem);
    --step-0: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
    --step-1: clamp(1.2rem, 1.0739rem + 0.6304vw, 1.5625rem);
    --step-2: clamp(1.44rem, 1.2615rem + 0.8924vw, 1.9531rem);
    --step-3: clamp(1.728rem, 1.4799rem + 1.2407vw, 2.4414rem);
    --step-4: clamp(2.0736rem, 1.7334rem + 1.7011vw, 3.0518rem);
    --step-5: clamp(2.4883rem, 2.027rem + 2.3067vw, 3.8147rem);
    --brand-color-blue-0: #34caff;
    --brand-color-blue-1: #26A6FF;
    --brand-color-blue-2: #276bb2;
    --brand-color-blue-3: #003367;
    --brand-color-blue-4: #0A2540;
    --brand-color-gray-1: #E8F6FF;
    --brand-color-gray-2: #CDE6F6;
    --brand-color-gray-3: #B7DFF7;
    --brand-color-gray-4: #9CA3AF;
    --brand-color-gray-5: #6B7280;
}

/* Font Usage */

html {
    font-family: 'Inter', Helvetica, Arial ,sans-serif !important;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatoy;
}

h1, h2, h3, h4 {
    font-weight: 600;
}
h2 {
    text-transform: uppercase;
}
h3 {
    margin-bottom: 1.5rem;
    font-size: var(--step-2);
}
h4 {
    font-size: var(--step-1);
}
p {
    font-size: var(--step-0);
    font-weight: 400;
}

/* Layout */

video {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
}
section {
    scroll-snap-align: start;
}
.content {
    margin: 0 auto;
    max-width: 59rem;
}
.grid-wrap {
    display: grid;
    grid-gap: 1rem;;
}
ul[class] {
  margin:0;
  padding-left:0;
}
.section-header {
    display: block;
    aspect-ratio: 1 / 1;
}

@media only screen and (max-width: 599px) {
    section.feature {
        padding: 2.5rem 0;
    }
}
@media only screen and (min-width: 600px) {
    section.feature {
        padding: 10rem 0;
    }
}
/* Mobile */

@media only screen and (max-width: 599px) {
    .section-header {
        margin-left: 2rem;
        padding: 1.5rem;
        width: 10rem;
        font-size: 1.125rem;
    }
    section.feature {
        padding: 4rem 0;
    }
    
}    
/* Desktop */
    
@media only screen and (min-width: 600px) {
    .section-header {
        padding: 2rem;
        width: 15rem;
    }
    section.feature {
        padding: 10rem 0;
    }
}

/* Tablet portrait */

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

    #opening
    {
        height: 50vh;
    }

}

/* ------------------------------

HEADER 

------------------------------ */

/* Mobile AND tablet */

@media only screen and (max-width: 900px) {
    header#header {
        display: none;
    }
}

/* Desktop */

@media only screen and (min-width: 600px) {
    header#header {
        position: sticky;
        top: 0;
        display: flex;
        padding: 2rem;
        background: #fff;
        justify-content: space-between;
        align-items: center;
        z-index: 1000;
    }
    .nav {
        display: flex;
    }
    .nav li {
        list-style: none;
    }
    .nav li:not(:last-child) {
        margin-right: 2rem;
    }
    .nav li a {
        font-size: var(--step-0);
        text-decoration: none;
    }
}

/* ------------------------------

HERO 

------------------------------ */

#opening {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100vh;
    z-index: -1;
}
.hero {
    width: 100%;
    height: 100vh;
    background: url(../img/mediaFrame-symbol.svg) top left no-repeat;
    background-size: contain;
    background-color: var(--brand-color-blue-3);
    mix-blend-mode: hard-light;
    z-index: 100;
    display: grid;
}
.tagline {
    font-weight: 600;
    color: #fff;
}
.wordmark {
    grid-column: span 2;
}

/* Mobile */

@media only screen and (max-width: 599px) {
    .hero {
      padding: 1rem;
      grid-template-rows: repeat(2,1fr);
      gap: 1.5rem;
    }
    .tagline {
        grid-row: 2 / -1;
        font-size: 1.5rem;
    }
    .wordmark {
        align-self: end;
    }
  }

/* Desktop */

@media only screen and (min-width: 600px) {
    .hero {
        padding: 2.5rem;
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: 64% auto;
        align-items: end;
    }
    .tagline {
        grid-column: 2 / -1;
        font-size: 2.5rem;
        font-weight: 600;
        align-self: center;
        color: #fff;
    }
    .wordmark {
        grid-column: span 2;
    }
}

/* ------------------------------

STATEMENT  

------------------------------ */

#statement {
    width: 100%;
    background-image: url(../img/mediaFrame-symbol-isometric.svg);
    background-color: var(--brand-color-blue-4);
    background-repeat: no-repeat;
    background-attachment: fixed;
}
#statement p {
    line-height: 140%;
    color: var(--brand-color-gray-3);
}
#statement p em {
    font-weight: 600;
    font-style: normal;
    color: var(--brand-color-blue-0);
}

/* Mobile */

@media only screen and (max-width: 599px) {
    #statement {
        padding: 4rem 1.5rem;
        height: 100vh;
        background-size: 75% auto;
        background-position: center center;
    }
    #statement p {
        font-size: 1.5rem;
    }
}

/* Desktop */

@media only screen and (min-width: 600px) {
    #statement {
        padding: 3rem;
        height: 100vh;
        display: flex;
        justify-content: flex-end;
        background-size: 32% auto;
        background-position: 35% center;
    }
    #statement p {
        width: 50%;
        font-size: 2rem;
    }
}

/* ------------------------------

OUR EXPERTISE 

------------------------------ */

#expertise {
    background: var(--brand-color-gray-3);
    mix-blend-mode: hard-light;
}

#expertise .section-header {
    background: var(--brand-color-blue-3);
    color: var(--brand-color-blue-0);
}
.expertise {
    display: block;
}
.expertise h3 {
    color: var(--brand-color-blue-3);
}
.expertise-1 {
    background-color: var(--brand-color-gray-1);
}
.expertise-2 {
    background-color: #fff;
    z-index: 100;
}
.expertise-3 {
    background-color: var(--brand-color-gray-1);
    z-index: 200;
}

/* Mobile */

@media only screen and (max-width: 599px) {

    #expertise .content.grid-wrap {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 12rem auto;
    }
    #expertise .section-header {
        grid-column: 1 / 4;
    }
    .expertise {
        padding: 1.5rem;
    }
    .expertise-1 {
        padding-bottom: 8rem;
        grid-column: 2 / -1;
    }
    .expertise-2 {
        margin-top: -6rem;
        padding-bottom: 10rem;
        grid-column: 1 / 6;
    }
    .expertise-3 {
        margin-top: -8rem;
        grid-column: 2 / -1;
    }

}
/* Desktop */

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

    #expertise .content.grid-wrap {
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: 5rem 26rem 26rem auto;
    }

    #expertise .section-header {
        grid-column: span 4;
    }
    .expertise {
        display: block;
        padding: 3rem;
        aspect-ratio: 1 / 1;
    }
    .expertise-1 {
        grid-column: 5 / -1;
        grid-row-start: 2;
    }
    .expertise-2 {
        grid-column: span 7;
        grid-row-start: 3;
    }
    .expertise-3 {
        grid-column: 7 / -1;
        grid-row-start: 4;
    }

}

/* ------------------------------

OUR ADVANTAGE

------------------------------ */

#advantage {
    background: var(--brand-color-blue-4);
    color: #fff;
}
#advantage .section-header {
    border: 2px solid var(--brand-color-blue-1);
    color: var(--brand-color-blue-1);
}
.list-advantage p {
    color: var(--brand-color-blue-1);
}

/* Mobile */

@media only screen and (max-width: 599px) {
    #advantage .section-header {
        margin-bottom: 4rem;
    }
    .list-advantage .grid-wrap {
        padding: 2rem;;
    }
}

/* Desktop */

@media only screen and (min-width: 600px) {
    #advantage .section-header {
        margin-bottom: 8rem;
    }
    .list-advantage .grid-wrap {
        grid-template-columns: 41.666667% auto;
    }
    .list-advantage li:not(:last-child) {
        margin-bottom: 6rem;
    }
}

/* ------------------------------

INDUSTRIES WE SERVE

------------------------------ */

#industries {
    background: #fff;
}

#industries .section-header {
    border: 2px solid var(--brand-color-blue-2);
    color: var(--brand-color-blue-2);
}
.industries > li:not(:last-child) {
    margin-bottom: 4rem;
}
.industry h3 {
    color: var(--brand-color-blue-2);
}
.capabilities li {
    margin-left: 1rem;
    list-style: disc;
}
.capabilities li p {
    color: var(--brand-color-gray-5);
}

/* Mobile */

@media only screen and (max-width: 599px) {
    
    #industries .section-header {
        margin-bottom: 4rem;
    }
    .industry {
        padding: 0 2rem;
    }

}

/* Desktop */

@media only screen and (min-width: 600px) {
    
    #industries .grid-wrap {
        grid-template-columns: 1fr 2fr;
    }
    #industries .section-header {
        position: sticky;
        top: 9rem;
    }
}

/* ------------------------------

OUR VENTURES

------------------------------ */

#ventures {
    background: var(--brand-color-gray-1);
    color: var(--brand-color-gray-5);
}
#ventures .section-header {
    margin-inline: auto;
    margin-bottom: 8rem;
    background: var(--brand-color-blue-3);
    color: var(--brand-color-blue-0);
}
#ventures li p {
    font-size: 1.125rem;
}
.list-ventures {
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
.ventures {
    display: grid;
    place-content: center;
    text-align: center;
}
.venture {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
}
.venture h3 {
    align-self: center;
}
.venture h3 img {
    mix-blend-mode: multiply;
}
.portfolio {
    text-align: center;
}
.portfolio-intro {
    margin-inline: auto;
    padding: 4rem 0;
    max-width: 72%;
}
.portfolio-intro p {
    margin-bottom: 1rem;
}
.list-portfolio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;
}
.list-portfolio li {
    padding: 2rem;
    border: 1px solid var(--brand-color-gray-3);
    aspect-ratio: 1 /1;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 1rem;
}
.list-portfolio li h4 {
    align-self: end;
    color: var(--brand-color-blue-1);
}


/* Mobile */

@media only screen and (max-width: 599px) {

    .list-ventures {
        flex-direction: column;
    }
    .venture {
        aspect-ratio: 2 / 1;
    }

}

/* Desktop */

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

    .venture {
        margin: 0 2rem;
        width: 18rem;
        aspect-ratio: 1 / 1;
        display: grid;
        place-content: center;
        text-align: center;
    }

}

/* ------------------------------

CONTACT

------------------------------ */

#contact {
    display: grid;
    height: 100vh;
    background-color: var(--brand-color-blue-3);
    mix-blend-mode: hard-light;
} 
#contact .section-header {
    background: var(--brand-color-blue-1);
    color:#000;
}
#contact p {
    margin-bottom: 2rem;
    color: #fff;
}
#contact .email a {
    font-size: var(--step-3);
    font-weight: 600;
    text-decoration: none;
}
#contact .logo-outlined {
    opacity: 1.0;
    align-self: end;
}

/* Mobile */

@media only screen and (max-width: 599px) {

    #contact {
        padding: 2rem;
    }
    #contact .section-header {
        margin-left: 0;
    }
    .contact-details {
        margin-bottom: 6rem;
    }

}

/* Desktop */

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

    #contact {
        padding: 2.5rem;
        padding-top: 6rem;
        grid-template-rows: repeat(2,1fr);
    }
    #contact .grid-wrap {
        grid-template-columns: 41.666667% auto;
    }

}