@charset "UTF-8";

@import url("reset.css");
@import url("fonts.css");
@import url("swiper-bundle.min.css");


:root{
    
    --app-height: 100vh;
    --headroom-height: auto;
    
  
    --c0: #000000; 
    --c1: #FFFFFF;
    --c2: #D9331D;
    
    --wr: 24rem;
    --awr: calc(-1 * var(--wr));
    
    --gap: 20rem;
    --sl: max(1px, 1rem);
    
    --br1: 10rem;

    --btn: max(36px, 42rem);
    
    --f-s: max(14px, 18rem);
    --f-d: max(14px, 18rem);
    --f-m: max(14px, 21rem);
    --f-b: max(14px, 26rem);
    
    --mw: 192000px; 
    
    
}


/* globals */

@media screen {

    html{font-size: 0.052vw;background-color: var(--c0);}

    .document{font-weight: 400;font-family: 'PPNeueMontreal', sans-serif;font-size: var(--f-d);line-height: 1;color: var(--c1);background-color: var(--c0);letter-spacing: normal;}
    
    .popup-active{}
    
    .wrapper{width: 100%;margin: 0 auto;padding: 0 var(--wr);max-width: var(--mw);}
    
    .preloader{background-color: var(--c0);position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 9999;visibility: hidden;opacity: 0;transition: all .25s 1s;display: flex;color: var(--c1);will-change: transform;}
     
    .loading{pointer-events: none;}
    .loading .preloader{transition-duration: 0s;opacity: 1;visibility: visible;}
    
    .icon{display: flex;max-height: 100%;align-items:center;justify-content:center;line-height: 0;max-width: 100%;width: auto;height: auto;}
    .cover,
    .contain{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-position: center;pointer-events: none;}
    .cover{object-fit: cover;}
    .contain{object-fit: contain;}
    .fill::after{content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1;}

    .button{display: inline-flex;justify-content: center;max-width: 100%;user-select: none;cursor: pointer;align-items: center;z-index: 1;position: relative;border-radius: var(--br1);background-clip: padding-box;}
    .button:not(.fill){overflow: hidden;}
    .button-text{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: center;position: relative;z-index: 2;min-width: 0;padding: 0 .1em;}
    .button-icon{width: 1em;height: 1em;display: flex;align-items: center;justify-content: center;margin: 0 10rem;}
    .button-icon:first-child{margin-left: 0;}
    .button-icon:last-child{margin-right: 0;}
    
    .button__default{background-color: var(--c2);color: var(--c1);height: var(--btn);border-radius: 999rem;padding: 0 20rem;}
    .button__default .button-text{font-size: var(--f-m);}
    .button__wide{width: 100%;}
     
    .title{line-height: 1.3;font-weight: 500;width: 100%;}
    
    .container{display: flex;flex-direction: column;min-height: var(--app-height);}
    
    .header{position: sticky;top: 0;z-index: 99;display: flex;align-items: flex-start;height: 0;}
    
    .topbar{display: grid;grid-template-columns: 1fr auto;grid-gap: var(--gap);align-items: center;padding: 24rem 0;flex: none;width: 100%;transition: all .5s 1.5s;}
    .topbar-main{display: grid;grid-template-columns: 1fr auto;grid-gap: var(--gap);align-items: center;}
    .topbar-logo{max-width: 216rem;}
    
    .main{margin-top: 0;flex: auto;display: flex;flex-direction: column;}
   
    .section{position: relative;z-index: 1;overflow-x: clip;margin-bottom: 160rem;}
    .section:first-child{z-index: 2;}
    .section:last-child{margin-bottom: 0;}
    .section:only-child{flex: auto;}
    
    .section-header{display: flex;flex-direction: column;}
    
    .footer{overflow: hidden;margin-top: 0;}
    
    
}

/* cards */

@media screen {
   
    .card{position: relative;overflow: hidden;display: flex;min-height: 100%;flex-direction: column;user-select: none;}
  
   
}

/* sections */

@media screen {
    
    
    .s1-1{display: flex;align-items: center;margin: 0 var(--awr);padding: 100rem 0;min-height: var(--app-height);transition: opacity 1s 2s;}
    .s1-2{flex: 1;text-align: center;text-transform: uppercase;font-size: 300rem;position: relative;z-index: 2;pointer-events: none;mix-blend-mode: difference;}
    .s1-3,
    .s1-4,
    .s1-6{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
    .s1-4{display: flex;transition: all 0s 2.5s;}
    .s1-5{flex: 1;position: relative;display: flex;justify-content: flex-end;padding: 75rem var(--wr);align-items: center;flex-direction: column;text-align: center;overflow: hidden;}
    .s1-5-1{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;}
    .s1-5-2{border: var(--sl) solid;border-radius: 999rem;font-size: var(--f-b);padding: 5rem 20rem;}
    .s1-5-3{margin-top: 24rem;}
    
    .loading .topbar{transform: translateY(-100%);opacity: 0;transition-duration: 0s;}
    .loading .s1-1{opacity: 0;transition-duration: 0s;}
    .loading .s1-4{visibility: hidden;transition-duration: 0s;}
   
}

@media screen and (max-width: 1023.98px) {
    
    :root{

        --wr: 12rem;

        --gap: 20rem;

        --btn: 36rem;

        --f-s: 14rem;
        --f-d: 14rem;
        --f-m: 16rem;
        --f-b: 20rem;

        --mw: 192000px; 
        
    }
    
    html{font-size: 1px;}
    
    .desktop{display: none!important;}
    
    .topbar{padding: 12rem 0;}
    .topbar-main{grid-template-columns: auto;grid-gap: 2rem;}
    .topbar-logo{max-width: 120rem;}
  
    .s1-1{margin: 0;}
    .s1-2{font-size: 80rem;}
    .s1-2:not(.active){mix-blend-mode: normal;opacity: .3;}
    .s1-5{height: 100%;text-align: left;align-items: flex-start;padding-bottom: 32rem;}
    .s1-5-3{margin-top: 12rem;max-width: 200rem;}
    .s1-6 .swiper{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
    
}


@media screen and (min-width: 1024px) {
    
    .mobile{display: none!important;}
    
    
    
}

@media screen and (min-width: 192000px) {
    
    
    html{font-size: 1px;}
    
    
}

/* hover animations */

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
   
    .button{transition: all .15s;}
    .button__default:hover{background-color: var(--c1);color: var(--c2);}
    
    .s1-5{transition: opacity .25s;opacity: 0;}
    .s1-5-1{will-change: transform;transition: transform .5s;}
    
    .s1-5:hover{opacity: 1;}
    .s1-5:hover .s1-5-1{transform: scale(1.05);}
    
}