@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: #FFFFFF; 
    --c1: #000000;
    --c2: #32006F;
    --c3: #E6EFFF;
    --c4: rgba(127, 173, 255, 0.2);
    --c5: #EE0000;
    --c6: rgba(0, 0, 0, .7);
    --c7: #BFBFBF;
    --c8: #5E5E5E;
    
    --wr: 20rem;
    --awr: calc(-1 * var(--wr));
    
    --gap: 20rem;
    --sl: max(1px, 1rem);
    
    --br1: 10rem;
    --br2: 20rem;
    
    --btn: max(55px, 60rem);

    
    --f-s: max(14px, 18rem);
    --f-d: max(14px, 20rem);
    --f-m: max(14px, 28rem);
    --f-b: max(14px, 40rem);
    --f-l: max(14px, 64rem);
    --f-xl: max(14px, 72rem);
    --f-xxl: max(14px, 80rem);
    --f-xxxl: max(14px, 90rem);
    
    --mw: 1920px; 
    
    --kw: 1vw;
    
}


/* globals */

@media screen {

    html{font-size: 0.0625vw;background-color: var(--c3);}

    .document{font-weight: 400;font-family: 'Aspekta', sans-serif;font-size: var(--f-d);line-height: 1.2;color: var(--c1);background-color: var(--c3);letter-spacing: -.02em;}
    
    .popup-active{}
    
    .wrapper{width: 100%;margin: 0 auto;padding: 0 var(--wr);max-width: var(--mw);}
    
    .preloader{background-color: var(--c3);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;}
    
    .unload .preloader{transition-duration: .5s;opacity: 1;visibility: visible;transition-delay: 0s;}
    
    .s13-5{transition: transform .5s;}
    
    .unload .s13-7:nth-child(1) .s13-5{transform: translateX(-100%);}
    .unload .s13-7:nth-child(2) .s13-5{transform: translateX(100%);}
    
    .header{transition: transform .5s 2s ease-out;}
    .hero .swiper-slide{transition: opacity 1s 2s;}
    .hero-animation{transition: all 1s 1s;}
    
    
    .loading .header{transform: translateY(-100%);transition-duration: 0s;transition-delay: 0s;}
    .loading .hero .swiper-slide{opacity: 0;transition-duration: 0s;transition-delay: 0s;}
    .loading .hero-animation{margin: calc(-60 * var(--kw));transition-duration: 0s;transition-delay: 0s;}
    
    .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;background-clip: border-box;}
    .button:not(.fill){overflow: hidden;position: relative;z-index: 1;}
    .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{display: flex;align-items: center;justify-content: center;margin: 0 10rem;width: max(10px, 12rem);height: max(10px, 18rem);}
    .button-icon:first-child{margin-left: 0;}
    .button-icon:last-child{margin-right: 0;}
    
    .button__default{background-color: var(--c0);color: var(--c2);padding: 0 50rem;height: var(--btn);border-radius: var(--br1);border: var(--sl) solid transparent;}
    .button__default .button-text{font-weight: 500;letter-spacing: -.03em;}
    .button__default .button-icon{}
    
    .button__contrast{background-color: var(--c2);color: var(--c0);}
    
    .button__wide{width: 100%;}
     
    .title{line-height: .95;font-weight: 500;width: 100%;color: var(--c2);letter-spacing: -.03em;}
    .title__default{font-size: var(--f-xl);}
    .title__large{font-size: var(--f-xxl);}
    .title__404{font-size: 300rem;}
    
    .container{display: flex;flex-direction: column;min-height: var(--app-height);}
    
    .header{position: sticky;top: 0;width: 100%;z-index: 15;pointer-events: none;}
    
    .topbar{background-color: var(--c0);color: var(--c1);border-radius: var(--br2);margin: 20rem 0 32rem;padding: 20rem;display: grid;grid-template-columns: 1fr auto 1fr;grid-gap: var(--gap);align-items: center;pointer-events: all;box-shadow: 0 0 10rem var(--c4);}
    .topbar-logo{max-width: 190rem;line-height: 0;}
    .topbar-nav,
    .topbar-action{font-weight: 500;font-size: var(--f-s);letter-spacing: -.03em;}
    .topbar-nav ul{display: grid;grid-auto-flow: column;grid-gap: var(--gap);align-items: center;}
    .topbar-action{margin-left: auto;text-decoration: underline;}
    
    .main{margin-top: 0;flex: auto;display: flex;flex-direction: column;overflow-x: clip;}
   
    .section{position: relative;z-index: 1;margin-bottom: 200rem;}
    .section:first-child{}
    .section:only-child{flex: auto;}
    
    .section-header{display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: var(--gap);}
    .section-header:not(:last-child){margin-bottom: 60rem;}
    .section-header-title{grid-column: 2/4;text-align: center;}
    
    .footer{overflow: hidden;margin-top: 0;padding: 60rem 0 120rem;background-color: var(--c0);color: var(--c1);position: relative;z-index: 1;}
    
    .footer-grid{display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 40rem var(--gap);align-items: flex-start;grid-template-rows: 1fr auto;grid-template-areas: "f1 f2 f2 f3" "f1 f2 f2 f4";}
    .f1{grid-area: f1;}
    .f1-1{max-width: 240rem;}
    .f1-2{margin-top: 30rem;max-width: 200rem;}
    .f1-3{margin-top: 35rem;}
    .f2{grid-area: f2;display: grid;grid-template-columns: 1fr 1fr;grid-gap: var(--gap);}
    .f2-1{}
    .f2-1-1{margin-bottom: 30rem;color: var(--c6);}
    .f2-1-2 ul{display: grid;grid-template-columns: auto;grid-gap: 10rem;}
    .f3{grid-area: f3;color: var(--c6);font-size: var(--f-s);}
    .f3-1{}
    .f3-2:not(:first-child){margin-top: 10rem;}
    .f3-2 ul{display: grid;grid-template-columns: auto;grid-gap: 10rem;}
    .f4{grid-area: f4;font-size: var(--f-s);}
    
    .bottombar-author{display: flex;align-items: baseline;}
    
    .dd-icon{width: 1em;height: 1.2em;margin: 0 .3em;color: currentColor;opacity: 1;display: inline-flex;align-items: center;justify-content: center;}
    .dd-icon .icon{width: 100%;}
    
    .page-header{position: relative;margin-bottom: 200rem;margin-top: calc(-1 * var(--headroom-height));}
    .page-header-inner{min-height: var(--app-height);padding: 40rem 0 40rem;display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));grid-gap: 50rem var(--gap);;grid-template-rows: 1fr auto 1fr;text-align: center;}
    .page-header-media{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
    .page-header-video{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
    .page-header-video::after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;background-color: var(--c1);opacity: .3;}
    .page-header-content{grid-row: 2/3;grid-column: 2/4;display: flex;flex-direction: column;align-items: center;position: relative;z-index: 1;}
    .page-header-content:last-child{margin-top: 50rem;}
    .page-header-title{margin: 0 calc((100% + var(--gap)) / -2);}
    .page-header-subtitle{margin-top: 30rem;}
    .page-header-action{margin-top: 40rem;}
    .page-header-scroll{grid-row: 3/4;grid-column: 2/4;margin: auto auto 0;font-size: var(--f-m);font-weight: 600;color: var(--c2);position: relative;z-index: 1;cursor: pointer;}
    .page-header-container{margin-top: 40rem;width: 100%;text-align: left;}
    
    .page-header-video ~ .page-header-content,
    .page-header-video ~ .page-header-content .title,
    .page-header-video ~ .page-header-scroll{color: var(--c0);}
    
    .header-video-sound.active .header-video-sound-on,
    .header-video-sound:not(.active) .header-video-sound-off{display: none;}
    
    
    .hero{position: relative;margin-bottom: 400rem;margin-top: calc(-1 * var(--headroom-height));}
    .hero .page-header{margin: 0;}
    .hero .swiper{overflow: visible;height: var(--app-height);}
    .hero .swiper-wrapper{}
    .hero .swiper-parallax{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
    
    .hero-scroll-visible{position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: 5rem;}
    .hero-scroll-indicator{position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: 5rem;}
    
    
    .textbox h2{margin: 80rem 0 30rem;line-height: 1;font-weight: 600;width: 100%;font-size: var(--f-b);}
    .textbox h2:first-child{margin-top: 0;}
    .textbox ul{margin: 30rem 0;display: grid;grid-template-columns: auto;grid-gap: 1em;}
    .textbox ul:first-child{margin-top: 0;}
    .textbox ul:last-child{margin-bottom: 0;}
    .textbox li{position: relative;padding-left: 1.5em;}
    .textbox li::before{content: "\2022";position: absolute;top: 0;left: 0;width: 1.5em;text-align: center;}
    .textbox img{margin: 200rem calc(var(--gap) / 2 - 50%);width: calc((100% - var(--gap) / 2) * 2);border-radius: var(--br1);max-width: none;}
    .textbox img:first-child{margin-top: 0;}
    .textbox img:last-child{margin-bottom: 0;}
    .textbox a{text-decoration: underline;}
    
    .textbox-quote{margin: 30rem 0;padding-left: 1.5em;position: relative;}
    .textbox-quote::before{content: "";position: absolute;top: 0;left: 0;width: 2rem;height: 100%;background-color: currentColor;}
    .textbox-quote:first-child{margin-top: 0;}
    .textbox-quote:last-child{margin-bottom: 0;}
    
    .formbox{display: grid;grid-template-columns: auto;grid-gap: var(--gap);width: 100%;}
    .formbox-footer{display: grid;grid-template-columns: 1fr auto;grid-gap: var(--gap);align-items: flex-start;margin-top: 30rem;}
    .formbox-footer-action:only-child{grid-column: 1/-1;}
    .formbox-footer-note{text-align: right;font-size: var(--f-s);color: var(--c8);}
    .formbox-row{display: flex;align-items: flex-start;}
    .formbox-cell{flex: 1;}
    .formbox-cell:not(:first-child){margin-left: var(--gap);}
    
    .textfield{width: 100%;display: flex;flex-direction: column;}
    .textfield-input{text-overflow: ellipsis;background-color: var(--c0);border-radius: var(--br1);padding: 20rem;width: 100%;min-width: 0;resize: none;}
    .textfield-message{margin-top: 5rem;color: var(--c5);display: none;}
    
    .textfield-input:invalid ~ .textfield-message{display: block;}
    
    .hero-animation{position: absolute;top: 0;left: 0;bottom: -100rem;right: 0;overflow-x: clip;}
    .hero-tile{position: absolute;}
    .hero-tile-1{top: 0;left: 0;width: calc(35 * var(--kw));height: calc(35 * var(--kw));transform: translate(-10%, -60%);}
    .hero-tile-1 img{object-position: top left;}
    .hero-tile-2{top: 0;right: 0;width: calc(40 * var(--kw));height: calc(45 * var(--kw));transform: translate(20%, -30%);}
    .hero-tile-2 img{object-position: top right;}
    .hero-tile-3{bottom: 0;left: 0;width: calc(60 * var(--kw));height: calc(45 * var(--kw));transform: translate(-30%, 0);}
    .hero-tile-3 img{object-position: bottom left;}
    .hero-tile-4{bottom: 0;right: 0;width: calc(40 * var(--kw));height: calc(35 * var(--kw));transform: translate(20%, 0);}
    .hero-tile-4 img{object-position: bottom right;filter: blur(3px);}
    .hero-tile-5{bottom: 0;left: 0;width: calc(60 * var(--kw));height: calc(45 * var(--kw));transform: translate(-30%, -20%);}
    .hero-tile-5 img{object-position: bottom left;transform: rotate(10deg);}
    .hero-tile-6{top: 0;right: 0;width: calc(35 * var(--kw));height: calc(35 * var(--kw));transform: translate(-10%, -60%);}
    .hero-tile-6 img{object-position: top right;transform: rotate(270deg);}
    .hero-tile-7{top: 125%;left: 0;width: calc(50 * var(--kw));height: calc(50 * var(--kw));transform: translate(-60%, -40%);}
    .hero-tile-7 img{object-position: top left;}
    .hero-tile-8{top: 150%;right: 0;width: calc(50 * var(--kw));height: calc(45 * var(--kw));transform: translate(20%, -50%);}
    .hero-tile-8 img{object-position: top right;transition: transform ease-out 1s 0s;}
    .hero-tile-9{top: 175%;left: 0;width: calc(50 * var(--kw));height: calc(40 * var(--kw));transform: translate(-10%, 100rem);}
    .hero-tile-9 img{object-position: bottom left;}
    .hero-tile-10{top: 225%;right: 0;width: calc(35 * var(--kw));height: calc(35 * var(--kw));transform: translate(20%, -60%);}
    .hero-tile-10 img{object-position: top left;transform: scaleX(-1);}
    .hero-tile-11{bottom: 0;right: 0;width: calc(40 * var(--kw));height: calc(35 * var(--kw));transform: translate(10%, 100rem);}
    .hero-tile-11 img{object-position: bottom right;filter: blur(3px);}
    
    .hero .carousel:not(.hero-scroll-init){pointer-events: none;}
    
    .s3-1 *::-moz-selection,
    .s4-4 *::-moz-selection,
    .s9-4 *::-moz-selection,
    .s13-2 *::-moz-selection{background-color: var(--c3);color: var(--c2);-webkit-text-fill-color: var(--c2);}
    .s3-1 *::selection,
    .s4-4 *::selection,
    .s9-4 *::selection,
    .s13-2 *::selection{background-color: var(--c3);color: var(--c2);-webkit-text-fill-color: var(--c2);}
    
}

/* cards */

@media screen {
   
    .card{position: relative;overflow: hidden;display: flex;min-height: 100%;flex-direction: column;}
    .card-title{line-height: 1;font-weight: 600;font-size: var(--f-m);}
  
    .card-1{border-radius: var(--br1);padding: 20rem;color: var(--c0);flex-direction: row;}
    .card-1::before{content: "";flex: none;width: 0;padding-top: 100%;}
    .card-1 .card-inner{display: flex;width: 100%;flex-direction: column;}
    .card-1 .card-header{flex: auto;}
    .card-1 .card-media{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: var(--c1);z-index: -1;}
    .card-1 .card-media::after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;background-image: linear-gradient(var(--c1), rgba(0,0,0,.4), var(--c1));opacity: .5;}
    .card-1 .card-content{margin-top: 20rem;}
    .card-1 .card-pretitle{position: relative;z-index: 1;}
    .card-1 .card-title{margin-top: auto;}
   
    .card-2 .card-header{position: relative;overflow: hidden;display: flex;border-radius: var(--br1);}
    .card-2 .card-header::before{content: "";flex: none;width: 0;padding-top: 110%;}
    .card-2 .card-content{display: grid;grid-template-columns: 1fr auto;grid-gap: 12rem var(--gap);margin-top: 12rem;margin-bottom: auto;}
    .card-2 .card-title{}
    .card-2 .card-subtitle{font-size: var(--f-s);margin-top: 5rem;color: var(--c8);}
    .card-2 .card-text{grid-column: 1/-1;padding-top: 12rem;border-top: var(--sl) solid var(--c7);}
    .card-2 .card-action{display: flex;align-items: center;justify-content: center;width: max(28px, 32rem);height: max(28px, 32rem);color: var(--c2);position: relative;z-index: 2;border: var(--sl) solid;border-radius: 5rem;}
    .card-2 .card-action a{width: 100%;height: 100%;}
    .card-2 .card-footer{margin-top: 30rem;display: grid;grid-template-columns: auto;grid-gap: 10rem;padding-bottom: var(--sl);}
    
}

/* sections */

@media screen {
    
    .s1-1{background-color: var(--c0);border-radius: var(--br1);padding: 80rem 0;display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 80rem var(--gap);}
    .s1-2{grid-column: 2/4;}
    .s1-3{margin-bottom: 50rem;display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 40rem var(--gap);align-items: flex-start;}
    .s1-4{grid-column: 2/4;display: grid;grid-template-columns: auto;grid-gap: 80rem;}
    .s1-7{display: grid;grid-gap: 30rem 60rem;grid-template-columns: 1fr 1fr;}
    .s1-7:not(:first-child){margin-top: 30rem;}
    .s1-8-1{font-size: var(--f-m);line-height: 1;color: var(--c2);font-weight: 600;}
    .s1-8-2{margin-top: 10rem;color: var(--c6);}
    .s1-8-2::before{content: "\2014\a0";}
    .s1-9{position: relative;overflow: hidden;display: flex;border-radius: var(--br1);grid-column: 1/-1;}
    .s1-9::before{content: "";flex: none;width: 0;padding-top: 30%;}
    .s1-10{grid-column: 1/4;}
    .s1-11{margin-left: auto;padding-left: 30rem;display: flex;flex-direction: column;align-items: flex-end;text-align: right;}
    .s1-11-1 ul{display: flex;flex-wrap: wrap;margin: -5rem;}
    .s1-11-1 li{margin: 5rem;}
    .s1-11-1 li:not(:first-child){border-left: var(--sl) solid;padding-left: 10rem;}
    .s1-11-2{margin-top: 20rem;font-size: var(--f-s);color: var(--c8);}
    
    .s2-1{display: grid;grid-template-columns: repeat(6, 1fr);grid-gap: var(--gap);}
    .s2-2{margin-top: 50rem;display: flex;justify-content: center;}
    
    .s3{background-color: var(--c2);color: var(--c0);}
    .s3:last-child{margin: 0;}
    .s3-1{display: flex;align-items: center;min-height: var(--app-height);}
    .s3-2{padding: 200rem 0;display: flex;flex-direction: column;position: relative;z-index: 1;align-items: center;text-align: center;width: 100%;}
    .s3-2-1 .title{color: inherit;}
    .s3-2-2{margin-top: 25rem;}
    .s3-2-3{margin-top: 30rem;}
   
    .s4-1{display: grid;grid-template-columns: 1fr 1fr;grid-gap: var(--gap);}
    .s4-2{background-color: var(--c0);border-radius: var(--br1);color: var(--c1);}
    .s4-3{background-color: var(--c2);border-radius: var(--br1);color: var(--c0);}
    .s4-3:nth-child(odd):last-child{grid-column: 1/-1;}
    .s4-4{padding: 50rem 20rem;display: flex;align-items: center;flex-direction: column;text-align: center;justify-content: center;width: 100%;}
    .s4-4-1{position: relative;width: 100%;padding-top: 20%;max-width: 350rem;margin-bottom: 50rem;}
    .s4-4-2{line-height: 1;font-weight: 600;font-size: var(--f-b);}
    .s4-4-3{margin-bottom: auto;width: 100%;margin-top: 20rem;padding-top: 20rem;border-top: var(--sl) solid var(--c7);color: var(--c6);}
    .s4-4-3 ul{display: grid;grid-template-columns: auto;grid-gap: .5em;}
    .s4-4-4{margin-top: 30rem;}
    .s4-5{display: flex;min-height: 100%;}
    
    .s5-1{display: flex;justify-content: center;margin: calc(var(--gap) / -2);flex-wrap: wrap;}
    .s5-1-1{width: 25%;padding: calc(var(--gap) / 2);flex: none;}
    .s5-2{font-size: var(--f-s);text-align: right;margin-top: 50rem;color: var(--c8);}
    
    .s6-1{display: grid;grid-template-columns: 1fr 1fr;grid-gap: var(--gap);align-items: flex-start;}
    .s6-2{display: flex;background-color: var(--c0);border-radius: var(--br1);overflow: hidden;}
    .s6-2::before{content: "";flex: none;width: 0;padding-top: 100%;}
    .s6-3{background-color: var(--c0);border-radius: var(--br1);padding: 20rem 20rem 40rem;display: grid;grid-template-columns: auto;grid-gap: 100rem;}
    .s6-4-1:not(:last-child){margin-bottom: 20rem;}
    .s6-4-2{line-height: 1;font-size: var(--f-m);font-weight: 600;}
    .s6-4-2:not(:last-child){margin-bottom: 10rem;}
    .s6-4-2,
    .s6-4-3{color: var(--c6);}
    .s6-5{}
    .s6-6{color: var(--c6);margin-bottom: 10rem;padding-bottom: 10rem;line-height: 1;font-size: var(--f-m);font-weight: 600;border-bottom: var(--sl) solid var(--c7);}
    .s6-7{color: var(--c2);line-height: 1;font-size: var(--f-m);font-weight: 600;}
    .s6-8{display: flex;flex-wrap: wrap;margin: 0 -15rem;}
    .s6-8-1{display: flex;width: 120rem;padding: 20rem 0;align-items: center;margin: 0 15rem;justify-content: center;}
    .s6-8-1::before{content: "";flex: none;width: 0;padding-top: 66.666%;}
    .s6-8-1 img{max-height: 100%;width: auto;max-width: 100%;}
    
    .s7-1{display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));grid-gap: var(--gap);position: relative;z-index: 1;}
    .s7-2{padding: 200rem 0;}
    .s7-3{position: relative;overflow: hidden;display: flex;grid-column: 2/5;z-index: -1;mask-image: radial-gradient(closest-side, black 50%, transparent 100%);margin: 0 var(--awr) -200rem 0;user-select: none;}
    .s7-3::before{content: "";flex: none;width: 0;padding-top: 70%;}
    .s7-4{white-space: nowrap;}
    .s7-5{margin-top: 130rem;}
    .s7-5-1{font-size: var(--f-m);line-height: 1;font-weight: 600;}
    .s7-5-2{margin-top: 25rem;color: var(--c6);}
    
    .s8-1{display: flex;flex-wrap: wrap;margin: calc(var(--gap) / -2);justify-content: center;padding: 0 40rem;}
    .s8-2{padding: calc(var(--gap) / 2);width: 33.33%;}
    .s8-3{font-size: var(--f-b);line-height: 1;font-weight: 600;}
    .s8-4{margin-top: 20rem;padding-top: 20rem;border-top: var(--sl) solid var(--c7);}
    .s8-4-1{font-size: var(--f-m);line-height: 1;font-weight: 600;}
    .s8-4-2{color: var(--c6);}
    .s8-4-2:not(:first-child){margin-top: 20rem;}
    .s8-5{padding: 50rem 20rem;background-color: var(--c0);color: var(--c1);border-radius: var(--br1);text-align: center;min-height: 100%;}
    
    .s9-1{display: grid;grid-template-columns: 1fr 1fr;grid-gap: var(--gap);}
    .s9-2{background-color: var(--c0);color: var(--c1);border-radius: var(--br1);padding: 50rem 20rem;}
    .s9-3{font-size: var(--f-b);font-weight: 600;line-height: 1;}
    .s9-4{margin-top: 25rem;border-top: var(--sl) solid var(--c7);padding-top: 25rem;}
    .s9-4 ul{display: grid;grid-template-columns: auto;grid-gap: 10rem;}
    .s9-4 li{background-color: var(--c2);color: var(--c0);padding: 15rem 20rem;border-radius: var(--br1);}
    
    .s10-1{display: grid;grid-gap: var(--gap);grid-template-columns: repeat(3, 1fr);padding: 0 75rem;}
    .s10-2{background-color: var(--c4);padding: 60rem 120rem;border-radius: var(--br1);max-height: 260rem;display: flex;align-items: center;justify-content: center;}
    .s10-2::before{content: "";flex: none;width: 0;padding-top: 50%;}
    .s10-2 img{max-height: 100%;}
    
    .s11-1{display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: var(--gap);}
    .s11-2{padding-left: 20rem;display: flex;flex-direction: column;min-height: 400rem;border-left: var(--sl) solid var(--c7);}
    .s11-2-1{margin-bottom: auto;font-size: var(--f-m);font-weight: 600;line-height: 1;}
    .s11-2-2{font-size: var(--f-xxxl);margin-top: 100rem;}
    .s11-3{font-size: var(--f-s);margin-top: 50rem;color: var(--c8);}
    
    .s12-1{display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));grid-gap: 60rem var(--gap);}
    .s12-2{grid-column: 2/4;}
    .s12-3{grid-column: 4/5;margin-left: auto;}
    .s12-4{grid-column: 1/-1;display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: var(--gap);}
    
    .s13-1{display: grid;grid-template-columns: 1fr 1fr;grid-gap: 0;}
    .s13-2{display: flex;position: relative;width: 100%;overflow: hidden;}
    .s13-2::before{content: "";flex: none;width: 0;padding-top: 100%;}
    .s13-3{padding: 50rem 20rem;position: relative;}
    .s13-3 .title{color: inherit;}
    .s13-4{padding: 50rem;position: absolute;top: 0;left: 0;width: 100%;height: 100%;font-size: var(--f-m);line-height: 1;font-weight: 600;transform: rotateY(180deg);}
    .s13-5{max-width: 450rem;margin: 0 auto;width: 100%;display: flex;flex-direction: column;align-items: center;-webkit-perspective: 1000;-moz-perspective: 1000;-o-perspective: 1000;perspective: 1000;}
    .s13-6{margin-top: 35rem;}
    .s13-7{padding: 20rem 0;}
    .s13-7:nth-child(2){border-left: var(--sl) solid var(--c7);}
    .s13-8{position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: -10%;}
    .s13-8 canvas{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: contain;object-position: center;}
    .s13-9{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;text-align: center;color: var(--c0);}
    
    .s13-2x{background-color: var(--c2);border-radius: 15%;overflow: visible;}
    .s13-7:nth-child(1) .s13-2x{background-image: linear-gradient(#3F3F62, #521973);}
    .s13-7:nth-child(2) .s13-2x{background-image: linear-gradient(#867EB3, #291E6D);}
    
    .s13-3,
    .s13-4{backface-visibility: hidden;display: flex;align-items: center;justify-content: center;}
    
    .s14-1{}
    .s14-2{display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: var(--gap);padding: 100rem 0;min-height: var(--app-height);align-items: center;}
    .s14-3{grid-column-end: span 2;}
    .s14-4{display: grid;grid-template-columns: auto;width: min-content;}
    .s14-4-1{margin-bottom: 20rem;padding-bottom: 20rem;border-bottom: var(--sl) solid var(--c7);white-space: nowrap;}
    .s14-4-2{min-width: 0;}
    
    .s14-2__1 .s14-3{grid-column-start: 2;}
    .s14-2__2 .s14-3{grid-column-start: 3;}
    
}

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

        --wr: 15rem;

        --gap: 10rem;

        --br2: 12rem;

        --btn: 54rem;


        --f-s: 14rem;
        --f-d: 16rem;
        --f-btn: 18rem;
        --f-m: 20rem;
        --f-b: 24rem;
        --f-l: 28rem;
        --f-xl: 32rem;
        --f-xxl: 44rem;
        --f-xxxl: 52rem;

        --mw: 640rem; 
        
        --kw: 2vw;
        
    }
    
    html{font-size: 1px;}
    
    .desktop{display: none!important;}
    
    .button{width: 100%;}
    .button__default .button-text{font-size: var(--f-btn);}
    
    .title__404{font-size: 128rem;}
    
    .topbar{grid-template-columns: 1fr auto;margin: 15rem 0;padding: 15rem 15rem 15rem 20rem;}
    .topbar-nav,
    .topbar-action{display: none;}
    .topbar-logo{max-width: 125rem;}
    
    .topbar-menu{position: relative;display: flex;width: 40rem;height: 40rem;align-items: center;border-radius: 50%;background-color: var(--c2);color: var(--c0);padding: 10rem;}
    .topbar-menu-inner{position: relative;background-color: currentColor;height: 1px;width: 100%;transition: background-color .15s;}
    .topbar-menu-inner::before,
    .topbar-menu-inner::after{content: "";position: absolute;background-color: currentColor;height: 100%;width: 100%;left: 0;transition: all .15s;}
    .topbar-menu-inner::before{bottom: 5rem;}
    .topbar-menu-inner::after{top: 5rem;} 
    .topbar-menu-close{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;display: none;}

    .popup{position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 10;padding: var(--headroom-height) var(--wr) var(--wr);overflow: auto;display: flex;transition: transform .5s;will-change: transform;}
    .popup-inner{width: 100%;border-radius: var(--br1);display: flex;background-color: var(--c0);color: var(--c1);padding: 50rem 25rem;align-items: center;}
    .popup-inner ul{display: grid;grid-template-columns: auto;font-size: var(--f-xl);letter-spacing: -.03em;color: var(--c2);font-weight: 500;width: 100%;}
    .popup-inner li{padding: 25rem 0;border-bottom: var(--sl) solid var(--c7);text-align: center;transition: all .5s 1s;opacity: 1;will-change: transform;}
    
    
    .popup-overlay{background-color: var(--c1);position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 5;opacity: 0;transition: all .5s;visibility: hidden;}
    
    .popup:not(.active){transform: translateY(-100%);}
    .popup.active ~ .popup-overlay{opacity: 1;visibility: visible;}
    
    .popup:not(.active) .popup-inner li{opacity: 0;transition-duration: 0s;transition-delay: 1s!important;transform: translateY(-50%);}
    
    .popup-active .topbar-menu-inner{color: rgba(0,0,0,0);pointer-events: none;}
    .popup-active .topbar-menu-inner::before{bottom: 0;color: var(--c0);transform: rotate(-45deg);}
    .popup-active .topbar-menu-inner::after{top: 0;color: var(--c0);transform: rotate(45deg);}
    .popup-active .topbar-menu-close{display: block;}
    
    
    .page-header{margin-bottom: 100rem;}
    .page-header-inner{padding: 20rem 0;grid-template-columns: auto;}
    .page-header-content{grid-column: auto;}
    .page-header-content:last-child{margin-top: 80rem;}
    .page-header-title{margin: 0;max-width: 340rem;}
    .page-header-subtitle{margin-top: 20rem;max-width: 185rem;}
    .page-header-action{margin-top: 15rem;}
    .page-header-scroll{grid-column: auto;}
    
    
    .hero{margin-bottom: 100rem;}
    
    .hero-animation{bottom: -50rem;}
    .hero-tile-1{transform: translate(-40%, -45%);}
    .hero-tile-2{transform: translate(55%, -25%);}
    .hero-tile-3{transform: translate(15%, -15%);left: 50%;}
    .hero-tile-3 img{transform: scaleX(-1);}
    .hero-tile-4{transform: translate(-20%, -75%);right: 50%;}
    .hero-tile-4 img{transform: scaleX(-1);filter: none;}
    
    .hero-tile-5{bottom: 50%;transform: translate(-75%, 0%);}
    .hero-tile-6{transform: translate(30%, -25%);}
    .hero-tile-7{display: none;}
    .hero-tile-8{transform: translate(45%, -100%);}
    .hero-tile-9{transform: translate(45%, 100rem) scale(.75);}
    .hero-tile-9 img{transform: scaleX(-1);}
    .hero-tile-10{transform: translate(-90%, -120%);}
    .hero-tile-10 img{transform: scaleX(1);}
    .hero-tile-11{transform: translate(40%, -10%);}
    
    .footer{padding: 40rem 0;}
    .footer-grid{grid-template-columns: auto;grid-template-areas: "f1" "f2" "f3" "f4";grid-gap: 30rem;}
    .f1-1{max-width: 165rem;}
    .f1-2{margin-top: 10rem;max-width: none;}
    .f1-3{margin-top: 25rem;}
    .f2{grid-template-columns: auto;grid-gap: 30rem;}
    .f2-1-1{margin-bottom: 10rem;}
    
    .section{margin-bottom: 100rem;}
    
    .section-header{grid-template-columns: auto;}
    .section-header:not(:last-child){margin-bottom: 40rem;}
    .section-header-title{grid-column: 1/-1;}
    
    .textbox h2{margin: 60rem 0 15rem;}
    .textbox img{width: 100%;margin: 60rem 0;}
    
    .formbox{grid-gap: 5rem;}
    .formbox-row{flex-direction: column;}
    .formbox-cell{width: 100%;}
    .formbox-cell:not(:first-child){margin: 5rem 0 0;}
    .formbox-footer{grid-template-columns: 1fr 1fr;margin-top: 25rem;}
    
    .textfield-message{margin-bottom: 5rem;}
    
    .formbox-row:not(:last-child) .formbox-cell:not(:last-child) .textfield-message{margin-bottom: 0;}
    
    .card-1{padding: 0;border-radius: 0;}
    .card-1::before{display: none;}
    .card-1 .card-header{position: relative;display: flex;padding: 20rem;border-radius: var(--br1);overflow: hidden;}
    .card-1 .card-header::before{content: "";flex: none;width: 0;padding-top: 50%;}
    .card-1 .card-content{margin-top: 15rem;color: var(--c1);}
    
    .card-2 .card-content{margin-top: 15rem;grid-gap: 5rem var(--gap);}
    .card-2 .card-text{padding-top: 5rem;}
    .card-2 .card-footer{height: auto!important;margin-top: 15rem;}
    
    
    .s1-1{padding: 40rem 20rem;grid-template-columns: auto;grid-gap: 60rem 0;}
    .s1-2{grid-column: auto;}
    .s1-3{grid-template-columns: auto;margin-bottom: 100rem;grid-gap: 0;}
    .s1-4{grid-column: auto;}
    .s1-7{grid-template-columns: auto;grid-gap: 15rem;}
    .s1-7:not(:first-child){margin-top: 20rem;}
    .s1-9::before{padding-top: 50%;}
    .s1-10{grid-column: auto;margin-top: 40rem;order: 1;}
    .s1-11{margin: 15rem 0 0;padding: 0;align-items: flex-start;text-align: left;}
    .s1-11-2{margin-top: 10rem;font-size: var(--f-d);}
    
    .s2-1{grid-template-columns: auto;grid-gap: 40rem;}
    .s2-2{margin-top: 40rem;}
    
    .s3-2-1 .title{font-size: var(--f-xl);}
    .s3-2-2{margin-top: 20rem;max-width: 275rem;}
    .s3-2-3{margin-top: 15rem;}
    
    .s4-1{grid-template-columns: auto;grid-gap: 15rem;}
    .s4-4{padding: 35rem 20rem;}
    .s4-4-1{margin: 0 auto 30rem;padding: 0;width: auto;}
    .s4-4-1 img{max-width: 220rem;max-height: 115rem;}
    .s4-4-3{margin-top: 15rem;padding-top: 15rem;}
    
    .s5-1{margin: 0;display: grid;grid-template-columns: auto;grid-gap: 40rem;}
    .s5-1-1{padding: 0;width: 100%;}
    .s5-2{margin-top: 40rem;text-align: left;}
    
    .s6-1{grid-template-columns: auto;grid-gap: 15rem;}
    .s6-2{position: relative;}
    .s6-8{margin: 0 -10rem;justify-content: space-between;}
    .s6-8-1{width: 80rem;padding: 10rem 0;margin: 0 10rem;}
    
    .s7-1{grid-template-columns: auto;grid-gap: 0;}
    .s7-2{padding: 0;}
    .s7-3{margin: 0;grid-column: auto;position: static;}
    .s7-3::before{padding-top: 150%;}
    .s7-4{white-space: normal;text-align: center;}
    .s7-5{margin-top: 40rem;grid-template-columns: 1fr 1fr;grid-gap: var(--gap);display: grid;}
    .s7-5-2{margin: 0;}
    
    .s8-1{padding: 0;}
    .s8-2{width: 100%;}
    .s8-4{margin-top: 15rem;padding-top: 15rem;}
    .s8-4-2{}
    .s8-4-2:not(:first-child){margin-top: 15rem;}
    .s8-5{padding: 35rem 20rem;}
    
    .s9-1{grid-template-columns: auto;grid-gap: 15rem;}
    .s9-2{padding: 35rem 20rem;}
    .s9-4{margin-top: 15rem;padding-top: 15rem;}
    
    .s10-1{padding: 0;grid-template-columns: auto;grid-gap: 15rem;}
    .s10-2{max-height: 200rem;padding: 40rem 60rem;height: 200rem;}
    
    .s11-1{grid-template-columns: auto;grid-gap: 40rem;}
    .s11-2{padding: 0;border: none;min-height: 0;text-align: center;}
    .s11-2-1 br{display: none;}
    .s11-2-2{margin: 0 0 10rem;order: -1;border-bottom: var(--sl) solid var(--c7);padding-bottom: 10rem;}
    .s11-3{margin-top: 40rem;}
    
    .s12-1{grid-gap: 40rem;grid-template-columns: auto;}
    .s12-2{grid-column: auto;}
    .s12-3{grid-column: auto;order: 1;margin: 0;}
    .s12-4{grid-column: auto;grid-template-columns: auto;grid-gap: 40rem;}
  
    .s13-1{grid-template-columns: auto;grid-gap: 40rem;}
    .s13-3{width: 100%;padding: 55rem;}
    .s13-4{display: none;}
    .s13-6{margin-top: 15rem;}
    .s13-7{padding: 0 40rem;}
    .s13-7:nth-child(2){border: none;}
    
    .s14-1{grid-gap: 0;}
    .s14-2{padding: 200rem 0 0;min-height: 0;}
    .s14-2__1 .s14-3{grid-column: 1/4;}
    .s14-2__2 .s14-3{grid-column: 2/-1;}
    .s14-4{width: 100%;}
    .s14-4-1{margin-bottom: 15rem;padding-bottom: 15rem;}
    
    
}


@media screen and (min-width: 1024px) {
    
    .mobile{display: none!important;}
    
    .hide-scrollbar{overflow: -moz-scrollbars-none!important;scrollbar-width: none;}
    .hide-scrollbar::-webkit-scrollbar{display: none;}
    
    
    .title{text-box: trim-both cap alphabetic;}
    
    .s1-10:first-child,
    .s1-10:first-child ~ .s1-11{padding-top: 120rem;}
    
    .s2-1-1{grid-column-end: span 2;}
    .s2-1-1:nth-child(1){grid-column: 2/4;}
    .s2-1-1:nth-child(3){grid-column-start: 1;}
    .s2-1-2{grid-column-end: span 2;}
    
    .s4-4-1 img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-position: center;pointer-events: none;object-fit: contain;}
    
    .s6-2{position: sticky;top: var(--headroom-height);z-index: 1;}
    
    .s12-5 .card-1::before{padding-top: 85%;}
    .s12-5 .card-1 .card-pretitle{display: none;}
    
    .s12-5:nth-child(1) .card-1,
    .s12-5:nth-child(3) .card-1{border-radius: 0;padding: 0;}
    .s12-5:nth-child(1) .card-1 .card-header,
    .s12-5:nth-child(3) .card-1 .card-header{position: relative;border-radius: var(--br1);overflow: hidden;}
    .s12-5:nth-child(1) .card-1 .card-title,
    .s12-5:nth-child(3) .card-1 .card-title{color: var(--c1);}
    
    .s12-5:nth-child(2){grid-column-end: span 2;}
    .s12-5:nth-child(2) .card-1 .card-header{flex: none;}
    .s12-5:nth-child(2) .card-1 .card-content{margin: 0;max-width: 445rem;}
    
    
}

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

/* hover animations */

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
   
    .button__default{transition: all .25s;}
    .button__default:hover{border-color: var(--c2);color: var(--c2);background-color: transparent;}
    
    .s3-2-3 .button__default:hover,
    .s4-4-4 .button__default:hover{border-color: var(--c0);color: var(--c0);}
    
    .card-1 .card-media{will-change: transform;transition: transform .5s;}
    .card-1:hover .card-media{transform: scale(1.05);}
    
    .card-2 .card-action{transition: all .25s;}
    .card-2 .card-action:hover{color: var(--c0);border-color: var(--c2);background-color: var(--c2);}
    
    .topbar-action a,
    .textbox a{transition: opacity .15s;}
    
    .topbar-action a:hover,
    .textbox a:hover{opacity: .5;}
    
    .topbar-nav a,
    .bottombar-author a,
    .f2-1-2 a,
    .f3-2 a,
    .s1-8-1 a,
    .s6-7 a{background-size: 0 var(--sl);background-repeat: no-repeat;background-position: right bottom;background-image: linear-gradient(currentColor, currentColor);display: inline;transition: background-size .5s cubic-bezier(0.2, 1, 0.3, 1);}
    
    .topbar-nav a:hover,
    .bottombar-author a:hover,
    .f2-1-2 a:hover,
    .f3-2 a:hover,
    .s1-8-1 a:hover,
    .s6-7 a:hover{background-size: 100% var(--sl);background-position: left bottom;}
    
    .s13-9{transform-style: preserve-3d;will-change: transform;}
    .s13-2x{transform-style: preserve-3d;will-change: transform;transition: transform 1.0s ease-in-out;}
    
    .s13-5:hover .s13-2:not(.s13-2x) .s13-9{}
    .s13-5:hover .s13-2x{transform: rotateY(180deg);}
    
}