@font-face {
    font-family: Work-Sans;
    src: url(../fonts/WorkSans-VariableFont_wght.ttf);
}

@font-face {
    font-family: Spline-Mono-Italic;
    src: url(../fonts/SplineSansMono-Italic-VariableFont_wght.woff2);
}

@font-face {
    font-family: Spline-Mono;
    src: url(../fonts/SplineSansMono-VariableFont_wght.woff2);
}

@font-face {
    font-family: Icons;
    src: url(../fonts/MaterialSymbolsRoundedVF.woff2);
}

:root {
    --main-color: white;
    --main-width: 960px;
    --secondary-width: 840px;
    --main-height: 360px;
    --image-height: 50vh;
    --h1: 32px;
    --h1-leading: 36px;
    --h2: 24px;
    --line-height: 1.4rem;
    --body: 18px;
    --gap: 48px;

    --space-xxs: 12px;
    --space-xs: 16px;
    --space-s: 24px;
    --space-m: 48px;
    --space-l: 128px;
    --space-xl: 196px;

    /*--primary-teal: #A53605;*/
    /* --primary-teal: #309676; */
    --primary-teal: #356666;
    --secondary-teal: #d6e1e0;
    --primary-black: #07120D;
    --primary-white: #F7FCFC;
    --active-color: #d6e1e0;

}


html,
body {
    overflow: hidden;
    overflow-y: scroll;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Work-Sans;
    font-size: var(--body);
    line-height: var(--line-height);
    scroll-behavior: smooth;
    font-variation-settings: 'wght' 400;
}

icon {
    font-family: Icons;
    vertical-align: middle;
    font-variation-settings: 'FILL' 0, 'opsz' 24, 'wght' 400;
}

a:hover icon {
    animation: fill ease-out 0.2s forwards;
}

@keyframes fill {
    from{
        font-variation-settings: 'FILL' 0, 'opsz' 24, 'wght' 400;
    } to {
        font-variation-settings: 'FILL' 100, 'opsz' 24, 'wght' 400;
    }
}

.large {
    font-size: var(--h1);
    line-height: var(--h1-leading);
    padding-right: 12px;
}

h1 {
    font-size: var(--h1); 
    line-height: var(--h1-leading); 
    margin-bottom: var(--space-s);
    color:var(--primary-teal);
    font-variation-settings: 'wght' 400;
}

h2 {
    font-size: var(--h2);  
    margin-bottom: var(--space-xs);
}

.image-slider {
    height: var(--image-height);
    max-height: var(--main-height);
    width: 100vw;
    margin: 0 auto;
    z-index: 1 !important;
}

.image-content {
    height: var(--image-height);
    max-height: var(--main-height);
    width: 100%;
    background-color: var(--secondary-teal);
    border: none;
}

img {
    object-fit: cover;
}


.visible {
    visibility:visible !important;
}

button {
    background-color: white;
    box-shadow: none;
    border: 1px solid black;
    padding: 8px 16px;
}
a{
    color: var(--primary-teal);
    text-decoration: none;
}
b {
    font-weight: 600;
    font-variation-settings: 'wght' 600;
}

.title{
    width: 100vw;
    background-color: var(--secondary-teal);
    padding:var(--space-s) 0;
}

.caps {
    text-transform: uppercase;
}

.page-title {
    width: var(--secondary-width);
    margin: 0 auto;
    text-align: center;
}

.left {
    text-align: left !important;
}

.head {
    display: grid;
    width: 80vw;
    padding-left: 10vw;
    padding-right: 10vw;
    padding-top: var(--space-xxs);
    background-color: white;
    position: fixed;
    padding-bottom: var(--space-xs);
    align-items: center;
    z-index: 10;
}

.logo {
    grid-row-start: 1;
    grid-row-end: 2;
    height: 80px;
}

.logo > img {
    height: 80px;
}

.menu {
    display: grid;
    font-size: 24px;
    grid-row-start: 1;
    align-items: center;
    justify-items: center;
}

.menu-item {
    grid-row-start: 1;
    text-align: center;
    padding: var(--space-xxs) var(--space-xs);
    text-transform: uppercase;
}

.menu-icon {
    display: none;
}

.active {
    background-color: var(--active-color);
    color: var(--primary-black);
    transform: skew(-1deg, -1deg);
}
.active > .text {
    transform: skew(1deg, 1deg);
}

.main-grid, .main-grid-2 {
    width: var(--main-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--gap);
}

.grid-item {
    display: grid;
    grid-gap: var(--space-s);
    align-content: start;   
}

.main-grid-2 > .grid-item {
    grid-gap: 0;
}

.grid-item > .image-content {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
}

.grid-item-full {
    grid-column: 1 / span 2;
}

.main-grid-3 {
    width: var(--main-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: var(--gap);
}

.main-grid-3 h2 {
    margin-top: 0;
}

.main-grid-3 > .grid-item {
    align-content: start;   
}

.main-grid-3 .image-content {
    height: auto;
    min-height: 240px;
    max-height: fit-content;
    width: 100%;
    aspect-ratio: auto;
}



.contact {
    width: var(--secondary-width);
    margin: 0 auto;
    transform: skew(-1deg, -1deg);
}

.contact-content {
    background-color: var(--secondary-teal);
    padding: var(--space-m) var(--space-m) var(--space-l) var(--space-m);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--space-s) var(--gap);
    color: var(--primary-black);
}

.contact-full {
    transform: skew(1deg, 1deg);
}

.contact-item {
    transform: skew(1deg, 1deg);
}

.contact-item:nth-child(1){
    grid-row-start: 1;
    grid-column-start: 1;
    grid-column-end: 3;
}

.contact-item:nth-child(2){
    grid-row-start: 2;
}
.contact-item:nth-child(3){
    grid-row-start: 2;
}

.contact-triangle {
    border-right: 32px solid transparent;
    border-top: 32px solid var(--secondary-teal);
    height: 0;
    margin-left: var(--space-l);
    width: 0;
    margin-top: -2px;
}


.footer {
    width: var(--secondary-width);
    margin: 0 auto;
    border-top: 1px solid var(--primary-black);
    padding: var(--space-s) var(--space-l);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--space-xxs) var(--gap);
}

.footer a {
    color: var(--primary-black);
    text-align: center;
}

/* SPACEERS */


.space-xxs {
    padding-top: var(--space-xxs);
}

.space-xs {
    padding-top: var(--space-xs);
}

.space-s {
    padding-top: var(--space-s);
}

.space-m {
    padding-top: var(--space-m);
}

.space-l {
    padding-top: var(--space-l);
}

.space-xl {
    padding-top: var(--space-xl);
}






@media screen and (max-width: 968px) {
    :root {
        --main-width: 90%;
        --main-height: 280px;
        --secondary-width: 85%;
        --body: 18px;
        --gap: 24px;
        --h1: 24px;
        --line-height: 1.2rem;
    }
    .head {
        padding-left: var(--space-xxs);
        padding-right: var(--space-xxs);
        padding-top: var(--space-xxs);
        width: calc(100% - 24px);
        align-items: start;
    }
    .logo {
        height: 48px;
    }
    .logo > img {
        height: 48px;
    }
    .menu {
        justify-items: end;
        display: grid;
        grid-template-rows: repeat(auto-fit);
    }
    .menu-icon {
        display: block !important;
        font-size: var(--h1);
        line-height: var(--h1-leading);
        padding-right: 12px;
        text-align: right;
        color: var(--primary-teal);
        z-index: 10;
    }
    .menu-item {
        text-align: right;
    }

    .animate {
        animation: fill ease-out 0.2s forwards;
    }

    .menu-item {
        display: none;
        grid-row-start: initial;
    }
    .image-slider{
        width: 100vw;
    }
    .slick-prev {
        /*display: none;*/
    }
    .slick-next {
        /*display: none;*/
    }
    .slick-dots{
        display: none !important;
    }
    .main-grid, .main-grid-2 {
        grid-template-columns: 1fr;
    }
    .main-grid-3{
        grid-template-columns: 1fr;
    } 
    .main-grid-3 > div:nth-child(even){
        padding-bottom: calc(var(--gap) + var(--space-s));
    }
    .main-grid-3 > .grid-item:nth-child(1) {
        display: none;
    }
    .contact-content {
        grid-template-columns: 1fr;
    }
    .contact-item {
        grid-row-start: inherit;
    }
    .contact-item:nth-child(3){
        grid-row-start: 3;
    }
    .contact-item:nth-child(4){
        grid-row-start: 4;
    }
    .footer {
        padding: var(--space-xs) 0;
    }
    li {
        margin: 0 var(--space-xs);
    }
}

@media screen and (max-width: 580px) {
    :root {
        --main-height: 196px;
    }   
}