@font-face {
    font-family: 'icomoon';

    src:  url('../fonts/icomoon.eot?89q8vk');
    src:  url('../fonts/icomoon.eot?89q8vk#iefix') format('embedded-opentype'),
          url('../fonts/icomoon.ttf?89q8vk') format('truetype'),
          url('../fonts/icomoon.woff?89q8vk') format('woff'),
          url('../fonts/icomoon.svg?89q8vk#icomoon') format('svg');

    font-style: normal;
    font-weight: normal;
    font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
    speak: never;

    font-family: 'icomoon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-close:before { content: "\e901"; }
.icon-arrow:before { content: "\e900"; }
.icon-expand:before { content: "\e902"; }


/* reset *********************************************************************/

* {
    color: inherit;

    margin: 0;
    border: 0;
    padding: 0;

    resize: none;
    outline: none;

    font-size: inherit;
    font-family: inherit;

    box-sizing: border-box;
    background: transparent;

    font-smoothing: antialiased;
}


/* base elements *************************************************************/

a {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

ul,
ol,
ul li,
ol li {
    list-style: none;
}

input,
select,
textarea {
    display: block;

    font-weight: inherit;
    font-family: inherit;

    appearance: none;
}

button {
    color: inherit;

    font-weight: inherit;
    font-family: inherit;

    cursor: pointer;
}

button[disabled] {
    pointer-events: none;
}


/* main html & body **********************************************************/

html, body {
    color: #000000;
    background: #ffffff;

    font-size: 10px;
    font-weight: 300;
    line-height: 150%;
    font-family: 'Poppins';

    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}


/* lenis *********************************************************************/

html.lenis {
    height: auto;
}

html.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

html.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

html.lenis.lenis-stopped {
    overflow: hidden;
}

html.lenis.lenis-scrolling iframe {
    pointer-events: none;
}


/* grid box ******************************************************************/

[flex] {
    display: flex;
}

[flex] > * {
    flex-grow: 0;
    flex-shrink: 0;
}

[flex].wrap {
    flex-wrap: wrap;
}

[flex].al-end {
    align-items: flex-end;
}

[flex].al-start {
    align-items: flex-start;
}

[flex].al-center {
    align-items: center;
}

[flex].jf-end {
    justify-content: flex-end;
}

[flex].jf-start {
    justify-content: flex-start;
}

[flex].jf-center {
    justify-content: center;
}

[flex].jf-between {
    justify-content: space-between;
}

[flex] [grow] {
    flex-grow: 1;
}

[flex] [shrink] {
    flex-shrink: 1;
}

[flex="column"] {
    flex-direction: column;
}


/* accessibility *************************************************************/

.for-display {
    speak: none;
}

.for-sreader {
    display: block;
    overflow: hidden;

    width: 0;
    height: 0;

    font-size: 14px;
    line-height: 14px;
}


/* shared components & classes ***********************************************/

.wrapper {
    max-width: 128rem;
    margin-left: auto;
    margin-right: auto;
}


.site-header {
    z-index: 10;

    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 19.6rem;
    position: absolute;

    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
}

.site-header:after {
    top: 0;
    left: 0;
    right: 0;
    height: 50rem;

    opacity: 0;
    z-index: 1;

    content: '';
    display: block;
    position: absolute;

    background: #ffffff;
    transition: 0.3s ease-out;
}

.site-header .wrapper {
    padding: 0 16rem;
    max-width: calc(192rem + 32rem);
}

.site-header .brand {
    z-index: 2;

    width: 13.5rem;
    height: auto;
    margin: 8rem 0 0;

    display: block;
    position: relative;
}

.site-header .brand .a {
    transition: 0.3s ease-out;
}

.site-header .brand svg {
    width: 100%;
    height: auto;
}


.site-header .menu {
    color: #ffffff;

    z-index: 2;
    position: relative;

    font-size: 3.6rem;
    font-weight: 400;
    line-height: 1.2em;

    margin-top: 8.4rem;
}

.site-header .menu a {
    transition: color 0.3s ease-out;
}

.site-header .menu a.active {
    font-weight: 500;
}

.site-header .menu > ul > li {
    height: 4.5rem;
    margin: 0 0 0 16rem;
}

.site-header .menu > ul > li:nth-child(1) { width: 10.5rem; }
.site-header .menu > ul > li:nth-child(2) { width: 15.5rem; }

.site-header .menu > ul > li ul {
    opacity: 0;
    margin-top: 6rem;
    transition: 0.3s ease-out;
    white-space: nowrap;
    pointer-events: none;
}

.site-header .menu > ul > li li {
    margin-bottom: 3rem;
}


.site-header.white:after {
    opacity: 1;
}

.site-header.black .brand .a,
.site-header.white .brand .a {
    fill: #000000;
}

.site-header.black .menu,
.site-header.white .menu {
    color: #000000;
}

.site-header.white .menu > ul > li {
    height: auto;
}

.site-header.white .menu > ul > li ul {
    opacity: 1;
    pointer-events: auto;
}

.site-header.black {
    background: #ffffff;
}


.site-footer {
    z-index: 8;
    position: relative;
}

.site-footer .wrapper {
    padding: 0 16rem;
    max-width: calc(192rem + 32rem);
}

.site-footer .top {
    margin-top: -8rem;
    margin-bottom: 10rem;
}

.site-footer .top .brand {
    width: 23.4rem;
    height: auto;
    margin-right: 12rem;
}

.site-footer .top .menu {
    margin-top: 7rem;
    font-size: 3.6rem;
    font-weight: 400;
    line-height: 1.2em;
}

.site-footer .bottom {
    margin-bottom: 12rem;
}

.site-footer .bottom a,
.site-footer .bottom h3 {
    font-size: 3.6rem;
    font-weight: 400;
    line-height: 1.2em;
    margin-bottom: 1rem;
}

.site-footer .bottom p,
.site-footer .bottom a small {
    font-size: 2.1rem;
    font-weight: 300;
    line-height: 1.65em;
}

.site-footer .bottom i {
    top: 0.4rem;
    position: relative;
    font-weight: 100;
    margin-right: 1rem;
}

.site-footer .bottom a {
    margin-bottom: 4.4rem;
}

.site-footer .bottom .form h3 {
    max-width: 44rem;
    margin-right: 6rem;
    margin-bottom: 4.4rem;
}

.site-footer .bottom .form input,
.site-footer .bottom .form button {
    font-size: 2.1rem;
    font-weight: 300;
    line-height: 3.8rem;
}

.site-footer .bottom .form input {
    width: 100%;
    padding: 1rem 0;
    border-bottom: 1px dashed #000000;
}

.site-footer .bottom .form input.invalid {
    color: #990000;
    border-bottom-style: solid;
    border-bottom-color: #990000;
}

.site-footer .bottom .form input.invalid::placeholder {
    color: #990000;
}

.site-footer .bottom .form button {
    font-weight: 400;
    margin-top: 4rem;
    margin-left: auto;
}

.site-footer .bottom .form .success,
.site-footer .bottom .form .failure {
    color: #3dab65;
    display: none;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 3.8rem;
}

.site-footer .bottom .form .failure {
    color: #990000;
}

.site-footer .bottom .form .success.visible,
.site-footer .bottom .form .failure.visible {
    display: block;
}

.button {
    color: #000000;

    font-size: 4.8rem;
    font-weight: 400;
    line-height: 1.2em;

    display: inline-flex;
    align-items: flex-end;

    transition: color 0.3s ease-out;
}

.button .icon-arrow {
    font-size: 4.6rem;
    margin-left: 2.6rem;
    line-height: 5.3rem;
    transition: transform 0.3s ease-out;
}


.project {
    overflow: hidden;
    position: relative;
}

.project img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.project .label {
    color: #ffcc00;
    background: #666666;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index: 2;

    display: flex;
    position: absolute;
    align-items: center;
    justify-content: flex-start;

    font-size: 9rem;
    font-weight: 400;
    line-height: 1em;
    white-space: nowrap;
    text-transform: uppercase;

    transition: 0.3s ease-out;
}

@keyframes projectLabelSpan {
      0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

.project .label > div {
    top: 10%;
    position: relative;
}


.partners {
    padding: 10rem 0;
    background: #f1f1f0;
}

.partners h3 {
    font-size: 4.8rem;
    font-weight: 400;
    line-height: 1.2em;
    margin-bottom: 5.6rem;
}

.partners .splide__slide {
    width: 20%;
    height: 8rem;
}

.partners .splide__slide img {
    width: 100%;
    height: 100%;
    max-width: 14rem;
    object-fit: contain;
    object-position: center bottom;
}

.partners .splide__pagination {
    margin: 5.6rem 0 0;
    position: static;
    justify-content: flex-start;
}

.partners .splide__pagination button {
    background: #000000;
}


.parallax-dot .dot {
    will-change: transform;
    transition: 0.05s ease;
}

.parallax-dot img {
    width: 100%;
    height: 100vh;
    display: block;
    object-fit: cover;
    object-position: center;
}

.parallax-dot img.fixed {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    position: fixed !important;
}

.parallax-dot .image-bg,
.parallax-dot .image-fg {
    z-index: 1;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.parallax-dot .image-bg .dot {
    z-index: 2;

    top: -10vh;
    width: 100%;
    height: 120vh;

    position: absolute;
    background: radial-gradient(circle, rgba(255,204,0,0) 0, rgba(255,204,0,0) 12.5rem, rgba(255,204,0,1) 12.5rem, rgba(255,204,0,1) 100%);
}

.parallax-dot .image-bg img.after {
    display: none !important;
}

.parallax-dot .image-fg {
    z-index: 2;
    height: 200vh;
    background-size: auto 100vh;
    background-position: center;
    background-attachment: fixed;
}

.parallax-dot .image-fg img {
    display: none;
    bottom: 0%;
    position: absolute;
}

.parallax-dot .image-fg img.after {
    display: block !important;
}

.parallax-dot .image-fg .dot {
    z-index: 2;

    left: calc(50% - 12.5rem);
    bottom: calc(125% - 12.5rem);
    width: 25rem;
    height: 25rem;

    position: absolute;
    background: rgba(255,204,0,1);

    border-radius: 50%;
}


.splide__arrows {
    top: 50%;
    left: 18rem;
    right: 18rem;
    z-index: 2;

    display: flex;
    position: absolute;
    align-items: center;
    justify-content: space-between;

    transform: translateY(-50%);
}

.splide__arrows .splide__arrow {
    width: 8rem;
    height: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    border-radius: 50%;
}

.splide__arrows .splide__arrow svg {
    fill: #ffffff;
    width: 4rem;
    height: auto;
}

.splide__arrows .splide__arrow--prev {
    transform: rotate(-180deg);
}

.splide__pagination {
    gap: 1.5rem;
    left: auto;
    right: auto;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
}

.splide__pagination button {
    width: 1.5rem;
    height: 1.5rem;
    opacity: 1;

    background: #ffffff;
    transition: background .3s ease;

    border-radius: 50%;
}

.splide__pagination button.is-active {
    background: #ffcc00 !important;
}


/* hovers ********************************************************************/

@media (any-hover: hover) {

    .site-header .menu li:hover > a,
    .site-footer .top .menu a:hover,
    .site-footer .bottom a:hover {
        font-weight: 500;
    }

    .button:hover {
        color: #ffcc00;
    }

    .button:hover .icon-arrow {
        transform: translateX(25%);
    }

    .project:hover .label {
        opacity: 1;
    }

    .project:hover .label div {
        animation: projectLabelSpan 45s infinite linear;
    }

}


/* responsive ****************************************************************/

@media (max-width: 1860px) {

    html, body {
        font-size: 9px;
    }

}

@media (max-width: 1660px) {

    html, body {
        font-size: 8px;
    }

}

@media (max-width: 1460px) {

    html, body {
        font-size: 7px;
    }

}


@media (max-width: 1160px) {
    .button {
        font-size: 3.8rem;
    }

    .wrapper {
        margin-left: 30px;
        margin-right: 30px;
    }

    .splide__arrows {
        left: 1rem;
        right: 1rem;
    }

    .splide__arrows .splide__arrow {
        width: 6rem;
        height: 6rem;
    }

    .splide__arrows .splide__arrow svg {
        width: 2rem;
    }

    .splide__pagination button {
        width: 1rem;
        height: 1rem;
    }

    .site-header .menu {
        top: 0;
        right: 0;
        bottom: 0;

        width: 320px;
        height: 100%;
        margin: 0;

        position: fixed;
        transform: translateX(100%);
        transition: 0.4s ease-out;

        background: #ffcc00;
    }

    .site-header .menu > ul {
        margin-top: 20rem;
        flex-direction: column;
    }

    .site-header .menu > ul > li {
        margin: 0;
        width: 100% !important;
        height: auto !important;
        padding: 2rem 30px;
        text-align: right;
    }

    .site-header .menu > ul > li ul {
        opacity: 1;

        font-size: .8em;
        font-weight: 300;

        margin-top: 4rem;
        margin-left: 4rem;

        pointer-events: auto;
    }

    .site-header .menu-toggle {
        width: 45px;
        margin: 8.5rem 0 0;
        z-index: 2;
        position: relative;
    }

    .site-header .menu-toggle div {
        width: 100%;
        height: 3px;
        margin: 5px 0px;
        background: #ffffff;
        transition: 0.2s ease-out;
    }

    .site-header .wrapper,
    .site-footer .wrapper {
        padding: 0;
    }

    .site-header.black .menu-toggle div {
        background: #000000;
    }

    .site-footer .top {
        margin-bottom: 8rem;
    }

    .site-footer .top .brand {
        width: 17.4rem;
    }

    .site-footer .top .menu {
        display: none;
    }

    .site-footer .bottom {
        flex-direction: column;
    }

    .site-footer .bottom > [flex="column"] {
        margin-top: 5rem;
        margin-bottom: 0.6rem;
    }


    .parallax-dot .image-fg .dot {
        left: calc(50% - 6.5rem);
        bottom: calc(125% - 6.5rem);
        width: 13rem;
        height: 13rem;
    }

    .parallax-dot .image-bg .dot {
        background: radial-gradient(circle, rgba(255,204,0,0) 0, rgba(255,204,0,0) 6.5rem, rgba(255,204,0,1) 6.5rem, rgba(255,204,0,1) 100%);
    }



    .menu-visible > section:not(.modal) {
        opacity: 0.6;
        transition: 0.2s ease-out;
    }

    .menu-visible .site-header .menu {
        transform: translateX(0%);
        box-shadow: 0 0px 6px rgba(0,0,0, 0.2);
    }

    .menu-visible .site-header .menu-toggle div:nth-child(2) { opacity: 0 }
    .menu-visible .site-header .menu-toggle div:nth-child(1) {
        transform: translateY(8px) rotate(-45deg);
    }

    .menu-visible .site-header .menu-toggle div:nth-child(3) {
        transform: translateY(-8px) rotate(45deg);
    }
}