@charset "UTF-8";

@import url("reset.css");
@import url("fonts.css");


:root{
  
    --c0: #040404;
    --c1: #fff;
    --c2: #009D00;
    --c3: #999;
    --c4: #B72025;
    --c5: #FCC02A;
    --c6: #2B74B9;
    --c7: rgba(0,157,0,0.8);
    --c8: #443E3E;
    
    --altfont: serif;
    
    --wr: 68rem;
    
    --f-d: max(14px, 18rem);
    --f-m: max(24px, 24rem);
    --f-b: max(24px, 28rem);
    --f-l: max(24px, 42rem);
    --f-l1: max(18px, 48rem);
    --f-l2: max(32px, 60rem);
    --f-xl: max(36px, 82rem);
    --f-xxl: max(115px, 115rem);
    
    
}


html{font-size: 0.069vw;}


.document{font-weight: 400;font-family: 'Manrope', sans-serif;font-size: var(--f-d);line-height: 1.33;color: var(--c1);background-color: var(--c0);}

.no-scroll{overflow: hidden!important;}

.wrapper{width: 100%;margin: 0 auto;max-width: 2500px;padding: 0 var(--wr);}

.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;}

.container{display: flex;flex-direction: column;min-height: 100vh;background-color: var(--c0);}

.headroom{background-color: var(--c0);height: 88rem;position: fixed;top: 0;left: 0;width: 100%;z-index: 999;will-change: transform;transition: transform .5s;transform: translateY(-100%);padding: 12rem 0;display: flex;border-bottom: 1rem solid var(--c8);}
.headroom.active{transform: translateY(0);}
.headroom.active-1{transform: translateY(-100%);}
.headroom.active-2{transform: translateY(0);}
.headroom.active-3{transform: translateY(-100%);}
.headroom-logo{position: relative;width: 40rem;height: 100%;}

.header{padding: 20rem 0;}

.topbar{display: grid;grid-template-columns: auto 1fr auto;grid-gap: 80rem;align-items: flex-start;position: relative;z-index: 2;}
.topbar-logo{min-height: 11vw;display: flex;align-items: center;width: 70rem;position: relative;}
.topbar-arrow{min-height: 11vw;display: flex;align-items: center;width: 120rem;background-position: center left;background-repeat: no-repeat;background-size: contain;background-image: url("data:image/svg+xml,%3Csvg width='123' height='8' viewBox='0 0 123 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M122.354 4.35356C122.549 4.1583 122.549 3.84172 122.354 3.64646L119.172 0.464477C118.976 0.269214 118.66 0.269214 118.464 0.464476C118.269 0.659739 118.269 0.976321 118.464 1.17158L121.293 4.00001L118.464 6.82844C118.269 7.0237 118.269 7.34028 118.464 7.53554C118.66 7.73081 118.976 7.73081 119.172 7.53554L122.354 4.35356ZM-4.37114e-08 4.5L122 4.50001L122 3.50001L4.37114e-08 3.5L-4.37114e-08 4.5Z' fill='white'%3E%3C/path%3E%3C/svg%3E");}
.topbar-title{display: flex;flex-direction: column;align-items: flex-end;text-align: right;font-weight: 800;text-transform: uppercase;font-size: 11vw;line-height: 1;}
.topbar-title > span:nth-child(2){margin-top: -.125em;}

.main{flex: auto;position: relative;z-index: 2;background-color: var(--c0);padding-bottom: 64rem;}

.blob-canvas{width: 550rem;position: absolute;right: -20rem;top: -220rem;bottom: 20rem;z-index: -1;}
.blob-animation{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;}
.blob-image{background: red;position: absolute;top: 0;left: 0;right: 0;bottom: 0;clip-path: url(#shape);-webkit-clip-path: url(#shape);}

.s0{position: relative;margin-top: 120rem;}
.s0-1{display: grid;grid-template-columns: 1fr auto;grid-gap: 0;position: relative;border-bottom: 1px solid var(--c3);}
.s0-2{grid-column: 1/-1;border-bottom: 1px solid var(--c3);display: grid;grid-template-columns: 1fr 1fr;text-transform: uppercase;padding: 0 0 20rem;}
.s0-3{border-right: 1px solid var(--c3);display: flex;padding: 80rem 0;}
.s0-4{}
.s0-5{display: flex;border-radius: 50%;overflow: hidden;position: relative;background-color: var(--c2);align-items: center;justify-content: center;padding: 64rem;text-transform: uppercase;}
.s0-5::before{content: "";flex: none;width: 0;padding-top: 100%;}
.s0-6{max-width: 800rem;font-size: var(--f-b);position: relative;width: 100%;}

.s1{margin-top: 128rem;}
.s1-1{font-size: var(--f-xl);line-height: 1;max-width: 856rem;position: relative;}
.s1-2{margin-top: 64rem;max-width: 1080rem;color: var(--c3);}

.karaoke-back{opacity: .5;}
.karaoke-front{position: absolute;top: 0;left: 0;}
.karaoke-front > div{clip-path: inset(0 100% -20% 0);transition: clip-path .5s;}
.karaoke-front > div,
.karaoke-back > div{white-space: nowrap;}

.karaoke-front > div.active{clip-path: inset(0 0 -20% 0);}

.s2{margin-top: 64rem;padding: 160rem 0;background-image: url(../img/s2.png);background-repeat: no-repeat;background-position: center;background-size: cover;background-attachment: fixed;position: relative;overflow: hidden;min-height: 53vw;}
.s2-1{position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;background-position: center;background-repeat: no-repeat;background-size: cover;background-image: url(../img/ideas.svg);outline: 999rem solid var(--c0);}
.s2-2{margin-top: 24vw;font-size: var(--f-l1);line-height: 1;text-align: center;position: relative;z-index: 2;}
.s2-3{display: flex;flex-direction: column;align-items: center;width: 100%;height: 100%;}
.s2-5{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

.s2.init .s2-2{opacity: 0;}
.s2.init .s2-5{opacity: 0;transform: scale(5);}

.s3{margin-top: 64rem;background-image: url(../img/_s4.png);background-position: center;background-repeat: no-repeat;background-size: cover;background-attachment: fixed;min-height: 250vh;position: relative;}
.s3-1{display: grid;grid-template-columns: auto;grid-gap: 32rem;position: relative;z-index: 1;}
.s3-2{font-size: var(--f-l);line-height: 1;}
.s3-3{display: grid;grid-gap: 56rem;grid-template-columns: repeat(4, 1fr);align-items: flex-end;}

.s3-5{display: flex;flex-direction: column;}
.s3-6{font-weight: 700;color: var(--c2);font-size: var(--f-l);line-height: 1;}
.s3-7{margin-bottom: 8rem;max-width: 235rem;order: -1;}
.s3-8{}
.s3-9{display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 40rem;width: 100%;margin: 64rem 0;opacity: 0;transform: translateY(100%);}
.s3-10{border-bottom: 1rem solid;padding-bottom: 8rem;}
.s3-11{display: flex;align-items: center;line-height: 1.15;font-size: var(--f-b);font-weight: 700;}
.s3-11::after{content: "";margin-left: 8rem;border-radius: 50%;width: 12rem;height: 12rem;flex: none;}
.s3-12{margin-top: 8rem;}
.s3-13{position: relative;flex: auto;margin: 0;overflow: hidden;display: flex;flex-direction: column;}
.s3-13::before{content: "";flex: auto;background-color: var(--c0);}
.s3-14{display: flex;flex-direction: column;height: 100vh;}
.s3-15{position: relative;height: 0;display: flex;align-items: flex-end;}
.s3-16{position: sticky;top: 0;z-index: 1;}
.s3-17{flex: none;padding: 64rem 0 0;position: relative;}
.s3-18{position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1;background-color: var(--c0);}

.s3-10:nth-child(1) .s3-11::after{background-color: var(--c2);}
.s3-10:nth-child(2) .s3-11::after{background-color: var(--c4);}
.s3-10:nth-child(3) .s3-11::after{background-color: var(--c5);}
.s3-10:nth-child(4) .s3-11::after{background-color: var(--c6);}


.s6{padding-top: 50rem;margin-top: 100rem;}
.s6-1{margin: 0 auto;width: 100%;max-width: 856rem;}
.s6-2{font-size: var(--f-l2);line-height: 1;}
.s6-3{margin-top: 32rem;font-weight: 700;line-height: 1;font-size: var(--f-xxl);}
.s6-4{margin-top: 16rem;}
.s6-5{position: fixed;top: 50%;left: 50%;padding: 48rem 20rem;transform: translate(-50%, -50%);z-index: 99;opacity: 0;transition: all .5s;}
.s6-5::before{content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: var(--c2);border-radius: 4rem;opacity: .85;}
.s6-6{position: relative;z-index: 1;display: flex;flex-direction: column;align-items: center;text-align: center;font-size: var(--f-d);}
.s6-7{width: 48rem;height: 48rem;flex: none;margin-bottom: 8rem;background-color: var(--c1);border-radius: 50%;background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 53 52' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='26.5' cy='26' r='26' fill='white'%3E%3C/circle%3E%3Cpath d='M18.2969 27.762L23.3445 32.8096L35.9635 20.1906' stroke='%23040404' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");background-repeat: no-repeat;background-position: center;background-size: contain;}
.s6-8{font-weight: 700;}

.s6-5.active{opacity: 1;}

.formgrid{display: grid;grid-template-columns: auto;grid-gap: 8rem;}
.formgrid-note{padding: 8rem 0 24rem;}

.textfield{display: flex;}
.textfield-input{width: 100%;flex: auto;padding: 32rem;resize: none;overflow: hidden;text-overflow: ellipsis;background-image:linear-gradient(var(--c1),var(--c1)), linear-gradient(var(--c3), var(--c3));background-position: bottom;background-repeat: no-repeat;background-size: 0 1px, 100% 1px;transition:background-size .5s;}
.textfield-input:focus{background-size:100% 1px, 100% 1px;}

.labelbox{position: relative;overflow: hidden;display: flex;align-items: flex-start;}
.labelbox-control{position: absolute;right: 999rem;}
.labelbox-icon{flex: none;width: 32rem;height: 32rem;margin-right: 32rem;border-radius: 4rem;overflow: hidden;position: relative;display: inline-flex;align-items: center;justify-content: center;line-height: 1;}
.labelbox-icon::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: currentColor;opacity: .8;}
.labelbox-icon::after{content: "";transform: scale(0);transition: all .25s;width: 18rem;height: 18rem;opacity: 0;border-radius: 4rem;background-color: var(--c2);will-change: transform;}
.labelbox-title{display: flex;align-items: center;min-height: 32rem;}
.labelbox-title a{text-decoration: underline;}

.labelbox-control:checked ~ .labelbox-icon::after{transform: scale(1);opacity: 1;}

.button{display: inline-flex;align-items: center;justify-content: center;padding: 0 96rem;min-height: 56rem;color: var(--c0);background-color: var(--c1);border-radius: 999rem;max-width: 100%;}
.button-text{text-transform: uppercase;overflow: hidden;text-overflow: ellipsis;}

.footer{background-color: var(--c2);color: var(--c1);position: sticky;bottom: 0;z-index: 1;width: 100%;}

.f0{display: grid;grid-template-columns: 1fr auto;grid-template-areas: "a1 a2" "a3 ." "a4 a5";grid-gap: 0 48rem;padding: 32rem 0;}
.f1{grid-area: a1;display: grid;grid-template-columns: auto;grid-gap: 16rem;}
.f2{grid-area: a2;text-align: right;font-size: var(--f-m);line-height: 1;}
.f3{grid-area: a3;padding: 200rem 0 60rem;margin-top: auto;align-self: flex-end;}
.f4{grid-area: a4;display: grid;grid-template-columns: auto;grid-gap: 8rem;}
.f5{grid-area: a5;text-align: right;margin-top: auto;}

.footer-logo{height: 136rem;position: relative;max-width: 472rem;}
.footer-logo img{object-position: left center;}

.loading .container{opacity: 0;}
.loading .appear-left{transform: translateX(-50vw);opacity: 0;will-change: transform;}
.loading .appear-right{transform: translateX(50vw);opacity: 0;will-change: transform;}

.document:not(.loading) .container{transition: opacity 1s;}
.document:not(.loading) .appear{transition: all 1s 1s;}
.document:not(.loading) .appear[data-delay="1"]{transition-delay: 1.25s;}
.document:not(.loading) .appear[data-delay="2"]{transition-delay: 1.75s;}
.document:not(.loading) .appear[data-delay="3"]{transition-delay: 2.25s;}
.document:not(.loading) .appear[data-delay="4"]{transition-delay: 2.75s;}

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

        --wr: 16rem;
        
        --f-xs: 12rem;
        --f-s: 14rem;
        --f-m: 24rem;
        --f-b: 24rem;
        --f-l: 24rem;
        --f-l1: 18rem;
        --f-l2: 32rem;
        --f-xl: 36rem;
      
    }
    
    
    html{font-size: 1px;}
    
    .desktop{display: none!important;}
    
    .wrapper{max-width: 480rem;}
    
    .header .wrapper{max-width: none;}
    
    .container{}
    
    .header{padding: 32rem 0;}
    .topbar{grid-template-columns: auto 1fr;grid-gap: 16rem 28rem;}
    .topbar-logo{min-height: 0;width: 24rem;height: 40rem;}
    .topbar-arrow{min-height: 0;width: 40rem;height: 40rem;}
    .topbar-title{grid-column: 1/-1;font-size: 15vw;}
    
    .blob-canvas{position: relative;top: auto;bottom: auto;width: 100%;height: 320rem;right: -50rem;margin-left: auto;}
    
    .s0{margin-top: 60rem;overflow: hidden;}
    .s0-1{grid-template-columns: auto;}
    .s0-2{grid-template-columns: 1fr auto;font-size: var(--f-s);padding-bottom: 16rem;}
    .s0-3{border-right: none;padding: 16rem 0 0;}
    .s0-4{margin-top: -140rem;display: flex;border-top: 1rem solid var(--c3);}
    .s0-4::before{content: "";flex: 1;border-right: 1rem solid var(--c3);}
    .s0-5{padding: 16rem;flex: none;max-width: 184rem;width: 100%;}
    
    .s1{margin-top: 68rem;}
    .s1-2{margin-top: 24rem;}
    
    .s2{padding: 0;background-attachment: scroll;}
    .s2-2{margin-top: 35vw;}
    
    .s3{background: none;}
    .s3-1{grid-template-columns: auto;grid-gap: 36rem;}
    .s3-3{grid-gap: 32rem 12rem;grid-template-columns: repeat(4, 1fr);grid-auto-flow: row;align-items: flex-end;}
    .s3-7{font-size: var(--f-xs);word-break: break-word;}
    .s3-19{background-image: url(../img/s4-m.png);background-size: cover;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-position: top center;}
    
    .s3-9{grid-template-columns: auto;grid-gap: 16rem;}
    .s3-17{padding: 32rem 0;}
    
    .s6{padding-top: 64rem;margin-top: 0;}
    .s6-3{margin-top: 16rem;}
    
    .textfield-input{padding: 20rem 16rem;}
    .labelbox-icon{margin-right: 16rem;}
    
    .button{min-width: 100%;}
    
    .footer{}
   
    .f0{grid-template-columns: auto;grid-template-areas: "a2" "a1" "a3" "a5" "a4";padding: 64rem 0 32rem;min-height: 100vh;grid-template-rows: auto 1fr auto auto auto;align-items: flex-start;}
    .f1{margin-top: 32rem;}
    .f2{text-align: left;}
    .f3{padding: 60rem 0 48rem;}
    .f5{text-align: left;margin-bottom: 8rem;margin-top: 0;}
    
    .footer-logo{width: 280rem;height: 80rem;}
    
}

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

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

    
}




/* hover animations */

@media (hover: hover) and (pointer: fine) {
    
    .button{transition: all .25s;}
    .button:hover{background-color: var(--c7);color: var(--c1);}
    
}