@charset "UTF-8";

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


:root{
    
    --app-height: 100vh;
    --app-width: 100vw;
    --headroom-height: auto;
    
  
    --c0: #FFFFFF; 
    --c1: #10164F; 
    --c2: #304FFE; 
    --c3: #000000; 
    --c4: #EAEDFF; 
    --c5: rgba(255,255,255,.3); 
    --c6: rgba(0,0,0,.1); 
    --c7: rgba(255,255,255,.5); 
    --c8: rgba(16,22,79,.3); 
    
    --wr: 50rem;
    --awr: calc(-1 * var(--wr));
    
    --gap: 20rem;
    --sl: max(1px, 1rem);
    
    --br1: 8rem;
    --br2: 10rem;
    --br3: 12rem;
    --br4: 14rem;

    
    --f-xs: max(12px, 14rem);
    --f-s: max(14px, 16rem);
    --f-d: max(14px, 20rem);
    --f-m: max(14px, 22rem);
    --f-b: max(14px, 24rem);
    --f-b1: max(14px, 50rem);
    --f-l: max(14px, 80rem);
    --f-xl: max(14px, 140rem);
    --f-xxl: max(14px, 240rem);
    
    --mw: 19200px; 
    
    
}

@keyframes ticker {
    0% {
        transform: translate(0,0);
    }
    100% {
        transform: translate(-100%,0);
    }
}

@keyframes preloaderline {
	0%
	{
		height: 33vh;
	}
	50%{
		height: 20vh;
	}
	100%
	{
		height: 0vh;
	}
}


/* globals */

@media screen {

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

    .document{font-weight: 400;font-family: 'Noto Sans', sans-serif;font-size: var(--f-d);line-height: 1.2;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: 1;transition: all 1s 1s;display: flex;will-change: transform;overflow: hidden;pointer-events: none;transform: translateY(-100%);}
    .preloader-inner{height: var(--app-height);display: grid;grid-template-rows: 1fr auto 1fr;padding: 70rem 0;grid-template-areas: "." "p1" "p2";overflow: hidden;grid-template-columns: auto;}
    .preloader-title{grid-area: p1;white-space: nowrap;text-align: center;overflow: hidden;width: 100%;font-size: var(--f-l);height: 1em;}
    .preloader-title .swiper{height: 100%;}
    .preloader-title-blue{color: var(--c2);}
    
    .preloader-perc{grid-area: p2;text-align: center;margin-top: auto;font-family: sans-serif;}
    .preloader-perc::after{content: "%";}
    .preloader-bar{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;will-change: transform;transform: translateY(100%);}
    .preloader-bar-blue{background-color: var(--c2);}
    .preloader-bar-white{background-color: var(--c0);visibility: hidden;}
     
    .preloader-scene-1 .preloader-title-1 .mask-appear-inner{transform: translateY(0);}
    .preloader-scene-2 .preloader-title-1 .mask-appear-inner{transform: translateY(-100%);}
    .preloader-scene-2 .preloader-title-2 .mask-appear-inner{transform: translateY(0);}
    .preloader-scene-30 .preloader-title-2 .mask-appear-inner{transform: translateY(-100%);transition-delay: .5s!important;}
    
    .preloader-scene-3 .preloader-bar-blue{transition: transform .75s;transform: translateY(0);}
    .preloader-scene-4 .preloader-bar-white{transition: transform .75s;transform: translateY(0);}
    .preloader-scene-4{}
    
    .loading{pointer-events: none;overflow: hidden;}
    .loading .preloader{transition-duration: 0s;transform: translateY(0);visibility: visible;}
    .loading .container{visibility: hidden;}
    
    .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;}

    .player-video{max-width: none;}
    
    .button{display: inline-flex;justify-content: center;max-width: 100%;user-select: none;cursor: pointer;align-items: center;z-index: 1;position: relative;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__main{background-color: var(--c2);color: var(--c0);padding: 0 50rem;height: max(50px, 75rem);border-radius: var(--br4);}
    .button__main .button-text{font-size: var(--f-m);font-weight: 900;text-transform: uppercase;line-height: 1.1;letter-spacing: -.02em;}
    .button__secondary{background-color: var(--c0);color: var(--c1);padding: 0 30rem;height: max(45px, 55rem);border-radius: var(--br2);}
    .button__wide{width: 100%;}
     
    .altfont,
    .timer-delimiter,
    .countdown-timer,
    .title,
    .textbox h2,
    .textbox h3{line-height: .9;font-weight: 700;width: 100%;font-family: 'FWC26', 'Noto Sans', sans-serif;}
    .title{text-transform: uppercase;}
    .title__small{font-size: var(--f-l);}
    .title__default{font-size: var(--f-xl);}
    .title__large{font-size: var(--f-xxl);}
    
    .container{display: flex;flex-direction: column;min-height: var(--app-height);}
    
    .header{position: fixed !important;left: 0;top: 0;z-index: 1001;overflow-x: clip;width: 100%;color: var(--c1);transition: color .25s;background-color: var(--c0);transform: translateY(0) !important;opacity: 1 !important;visibility: visible !important;box-shadow: 0 2px 8px rgba(0,0,0,0.1);}
    
    .topbar{display: grid;grid-template-columns: 1fr auto 1fr;grid-gap: 50rem;align-items: center;transition: opacity .75s;opacity: 1 !important;}
    .topbar-nav{font-size: var(--f-s);font-weight: 700;text-transform: uppercase;letter-spacing: 0;padding: 30rem 0;position: relative;z-index: 2;pointer-events: auto !important;}
    .topbar-nav__left{margin-right: auto;}
    .topbar-nav__right{margin-left: auto;}
    .topbar-nav ul{display: grid;grid-auto-flow: column;grid-gap: 50rem;}
    .topbar-logo{max-width: 160rem;display: flex;position: relative;align-items: flex-start;justify-content: center;height: 100rem;z-index: 1;}
    .topbar-logo-inner{padding: 0;position: relative;flex: none;width: 100%;overflow: hidden;min-width: 160rem;display: flex;align-items: center;aspect-ratio: 160/100;pointer-events: none;}
    .topbar-logo-back,
    .topbar-logo-front{aspect-ratio: 1115/428;width: 100%;overflow: hidden;position: relative;}
    .topbar-logo-back{position: absolute;opacity: 0;z-index: 1;transition: opacity .15s;}
    .topbar-logo-back img{object-position: left;}
    .topbar-logo-static{opacity: 0;}
    .topbar-logo-overlay{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 10;pointer-events: none;width: 50rem;height: auto;display: flex;align-items: center;justify-content: center;}
    .topbar-logo-overlay .logo-insert{width: 100%;height: auto;object-fit: contain;filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));}

    /* Simple Logo Section - Replaces complex SVG/Video */
    .topbar-logo-simple{display: flex;align-items: center;justify-content: center;padding: 20rem 20rem;width: 100%;max-width: 200rem;margin: 0 auto;}
    .topbar-logo-simple a{display: flex;align-items: center;justify-content: center;transition: transform 0.3s ease, opacity 0.3s ease;}
    .topbar-logo-simple a:hover{transform: scale(1.05);opacity: 0.9;}
    .header-logo{height: 80rem;width: auto;object-fit: contain;display: block;}

    .main{flex: auto;display: flex;flex-direction: column;}
   
    .section{position: relative;z-index: 1;overflow: clip;padding: 20rem 0;}
    .section:only-child{flex: auto;}
    
    .section-header{display: flex;flex-direction: column;}
    
    .formbox{display: grid;grid-template-columns: auto;grid-gap: var(--gap);}
    .formbox-footer{margin-top: 60rem;}
    
    .textfield{width: 100%;display: flex;position: relative;min-height: max(55px, 70rem);}
    .textfield:focus-within{}
    .textfield-input{text-overflow: ellipsis;padding: 20rem 20rem;position: relative;flex: auto;resize: none;z-index: 1;width: 100%;transition: border-color .15s;border-radius: var(--br3);border: var(--sl) solid var(--c5);}
    .textfield-input:focus{border-color: var(--c0);}
    
    .textfield-error{color: #dc3232;margin-top: 10rem;font-size: var(--f-s);}
    
    #section-form .wpcf7-form-control-wrap{flex-direction: column;}
    
    .selector{user-select: none;}
    .selector-holder{border-radius: var(--br3);min-height: max(55px, 70rem);border: var(--sl) solid var(--c5);display: flex;overflow: hidden;align-items: center;cursor: pointer;padding: 0 20rem;color: var(--c0);}
    .selector-holder-input{flex: auto;overflow: hidden;text-overflow: ellipsis;min-width: 0;pointer-events: none;padding: 20rem 0;}
    .selector-holder-icon{flex: none;margin-left: 10rem;display: flex;width: max(10px, 14rem);height: max(10px, 14rem);align-items: center;justify-content: center;}
    
    .selector.active .selector-holder{background-color: var(--c0);color: var(--c1);border-bottom-left-radius: 0;border-bottom-right-radius: 0;}
    .selector.active .selector-holder-icon{transform: scaleY(-1);}
    
    .selector-list{background-color: var(--c0);position: absolute;width: 100%;z-index: 999;overflow: auto;max-height: 600rem;padding: 0;display: grid;grid-template-columns: auto;grid-gap: 5rem;border-radius: 0 0 var(--br3) var(--br3);}
    .selector-list:not(.active){visibility: hidden;opacity: 0;}
    .selector-option{position: relative;padding: 10rem 20rem;border-bottom: var(--sl) solid var(--c6);}
    .selector-option:last-child{padding-bottom: 20rem;border-bottom: none;}
    .selector-option-inner:not(.active){cursor: pointer;}
    .selector-option-inner.active{color: var(--c2);pointer-events: none;}
    
    .selector-message{font-size: var(--f-s);padding-top: 10rem;}
    .selector-message:not(.active){display: none;}
    .selector-message a{text-decoration: underline;}
    
    .footer{overflow: hidden;margin-top: 0;background-color: var(--c2);color: var(--c0);position: relative;z-index: 1;padding: 30rem 0 20rem;}
    .footer-grid{display: grid;grid-template-columns: 1fr 1fr;grid-gap: 30rem var(--gap);align-items: flex-start;}
    .footer-form{max-width: 550rem;}
    .footer-form-caption{margin-bottom: 25rem;}
    .footer-form-container{display: grid;grid-template-columns: 1fr auto;grid-gap: 15rem 10rem;}
    .footer-form-cell{display: flex;}
    .footer-form-cell .textfield-input{padding: 0 20rem;}
    .footer-nav{display: flex;align-items: flex-start;line-height: 1;}
    .footer-nav-title{margin-bottom: .6em;color: var(--c7);}
    .footer-nav-col:not(:last-child){padding-right: 150rem;}
    .footer-nav ul{display: grid;grid-template-columns: auto;grid-gap: .6em;}
    .footer-form-message{}
    
    .footer-form-wrapper:not(.success) .footer-form-message{visibility: hidden;}
    
    .footer-runner{grid-column: 1/-1;}
    
    .marquee{white-space: nowrap;display: inline-flex;justify-content: flex-start;}
    .marquee-container{display: inline-flex;align-items: center;height: 350rem;}
    .marquee-container img{height: 100%;width: auto;max-width: none;}
    .marquee-container::after{content: "";width: 30rem;height: 30rem;background-color: currentColor;border-radius: 50%;margin: 0 70rem;}
    
    
    .runner-end, 
    .runner-start{animation: 25s linear infinite ticker;display: flex;will-change: transform;transition: transform .01s;}
    
    
    .bottombar{margin-top: 35rem;display: grid;grid-template-columns: 1fr auto;grid-gap: 50rem;color: var(--c7);}
    .bottombar-author{display: flex;align-items: baseline;}
    .bottombar-author a{color: var(--c0);}
    .bottombar-author sup{font-size: var(--f-xs);margin-bottom: calc(var(--f-d) - 1em);}
    
    .dd-icon{width: 1.2em;height: 1em;margin: 0 .3em;color: var(--c0);display: inline-flex;align-items: center;justify-content: center;}
    .dd-icon .icon{width: 100%;}
    
    .mask-appear{position: relative;display: inline-block;}
    .mask-appear-wrapper{display: block;position: relative;overflow: hidden;z-index: 1;}
    .mask-appear-inner{display: block;transition: transform .5s .5s;will-change: transform;}
    
    .nobr{white-space: nowrap;}
    
    .scrl{position: relative;overflow: hidden;white-space: nowrap;display: inline-flex;align-items: flex-start;padding: 0 .05em;margin: 0 -.05em;height: 1.2em;}
    .scrl-inner{display: grid;grid-template-columns: auto;height: 1.2em;}
    .scrl-inner *{line-height: 1!important;height: 1.2em;display: inline-flex;align-items: center;}
    
    
    .textbox h2,
    .textbox h3{margin: 45rem 0 15rem;font-size: var(--f-b);text-transform: uppercase;font-weight: 900;line-height: 1.2;}
    .textbox h2:first-child,
    .textbox h3:first-child{margin-top: 0;}
    
}

/* cards */

@media screen {
   
    .card{position: relative;overflow: hidden;display: flex;min-height: 100%;flex-direction: column;user-select: none;width: 100%;}
  
    .card-1{background-color: var(--c2);color: var(--c0);padding: 30rem;}
    .card-1 .card-header{margin-bottom: auto;}
    .card-1 .card-footer{margin-top: 30rem;}
    .card-1 .card-footer .button{background-color: var(--c0);color: var(--c2);}
   
}

/* sections */

@media screen {
    
    .s1{padding: 0;margin-top: 70px;}
    .s1-1{margin: 0 var(--awr);position: sticky;top: calc(var(--app-height) / 5);height: calc(var(--app-height) / 5 * 4);z-index: 1;}
    .s1-2{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;background-color: var(--c3);overflow: hidden;}
    .s1-3::after{content: "";display: block;height: 5vh;}
    
    .s2{background-color: var(--c0);color: var(--c1);padding: 0;transition: all .5s;}
    .s2.invert{background-color: var(--c1);color: var(--c0);}
    .s2-1{display: grid;grid-template-columns: auto 1fr auto;grid-gap: 0 var(--wr);grid-template-areas: "a1 a2 a3";position: sticky;top: 0;margin: 0 var(--awr);}
    .s2-2{display: flex;align-items: flex-start;padding-bottom: 10vh;}
    .s2-3,
    .s2-4,
    .s2-11{grid-area: a2;max-width: 1300rem;display: flex;align-items: center;margin: 0 auto;min-height: auto;padding: 20rem 0;pointer-events: none;}
    .s2-5,
    .s2-6{position: relative;display: flex;align-items: center;width: 0;}
    .s2-5{grid-area: a1;justify-content: flex-end;}
    .s2-6{grid-area: a3;justify-content: flex-start;}
    .s2-7{display: grid;grid-template-columns: auto;grid-gap: 40rem;grid-template-rows: 1fr 1fr;text-align: center;pointer-events: all;}
    .s2-7-1{display: flex;align-items: flex-end;justify-content: center;overflow: hidden;}
    .s2-7-2{display: flex;align-items: flex-start;justify-content: center;max-width: 600rem;margin: 0 auto;transition: opacity .5s 1s;}
    .s2-7-2 a{text-decoration: underline;}
    .s2-8{position: relative;overflow: hidden;display: flex;width: 62.5vw;flex: none;max-width: var(--app-height);}
    .s2-8::before{content: "";flex: none;width: 0;padding-top: 100%;}
    .s2-8 img{will-change: transform;}
    
    .s2-5 .s2-8{transform: translateX(20%);}
    .s2-5 .s2-8 img{transform: rotate(90deg);}
    .s2-6 .s2-8{transform: translateX(-20%);}
    .s2-6 .s2-8 img{transform: rotate(-90deg);}
    .s2-7.hidden{pointer-events: none;}
    .s2-7.hidden .s2-7-1 .mask-appear-inner{transform: translateY(100%);transition-delay: 0s!important;text-align: center;}
    .s2-7.hidden .s2-7-2{opacity: 0;transition-delay: 0s;}
    
    .s2-9{height: 350vh;display: flex;flex-direction: column;position: relative;z-index: 1;opacity: .5;}
    
    .scene-trigger{visibility: visible;width: 20rem;}
    
    .scene-trigger{flex: 1;width: var(--sl);visibility: hidden;}
    .scene-trigger:nth-child(odd){background: red;}
    .scene-trigger:nth-child(even){background: pink;}
    
    
    .s2-9-1{flex: 2;}
    
    .s2-10{padding: 15vh 100rem 0;width: 100%;display: flex;flex-direction: column;}
    .s2-10-1{width: 420rem;}
    .s2-10-2{width: 375rem;margin-left: auto;}
    .s2-10-3{width: 480rem;margin-left: 215rem;margin-top: 30rem;}
    
    .s3{background-color: var(--c2);color: var(--c0);padding: 0;}
    .s3-1{min-height: auto;display: flex;padding: 30rem 0;}
    .s3-2{margin-top: auto;}
    .s3-2 .timer{font-size: var(--f-xxl);display: flex;align-items: center;margin-right: -.3em;line-height: 1;user-select: none;}
    .s3-2 .timer-val{text-align: right;min-width: 1.4em;position: relative;flex: none;padding-right: .3em;}
    .s3-2 .timer-val::after{content: attr(title);position: absolute;top: 100%;left: 50%;white-space: nowrap;transform: translateX(-50%);font-size: var(--f-d);}
    .s3-2 .timer-delimiter{padding-left: 0em;}
    .s3-2 .countdown-timer{}
    .s3-3{text-transform: uppercase;margin-top: 75rem;border-top: var(--sl) solid var(--c5);padding-top: 20rem;}
    .s3-4{text-align: center;display: flex;flex-direction: column;margin: auto;}
    .s3-5,
    .s3-6{position: absolute;left: 0;width: 100%;z-index: 1;height: 230rem;}
    .s3-5{top: -1px;}
    .s3-6{bottom: -1px;}
    .s3-5-1,
    .s3-6-1{height: 100%;width: 100%;position: absolute;left: 0;background-size:  auto 230rem;background-repeat: no-repeat;}
    .s3-5-1{background-image: url(../img/timer-top-a.svg);background-position: top;top: 0;}
    .s3-6-1{background-image: url(../img/timer-bottom-a.svg);background-position: bottom;bottom: 0;}
    
    .s4{background-color: var(--c0);}
    .s4-2{display: flex;flex-direction: column;align-items: center;text-align: center;}
    .s4-2-2{margin-top: 10rem;}
    .s4-2-2 a{text-decoration: underline;}
    .s4-3{display: grid;grid-template-columns: auto;grid-gap: 8rem;margin-top: 60rem;}
    .s4-4{display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 0 50rem;align-items: center;background-color: var(--schedule-row-bg, var(--c4));border-radius: var(--br4);padding: 20rem 50rem;position: relative;overflow: hidden;}
    .s4-4__a{--schedule-row-bg: var(--c4);}
    .s4-4__b{--schedule-row-bg: var(--c2);color: var(--c0);}
    .s4-4__c{--schedule-row-bg: var(--c1);color: var(--c0);}
    .s4-5{font-weight: 900;font-size: var(--f-b);}
    .s4-6{font-weight: 900;font-size: var(--f-b);text-align: center;}
    .s4-7{display: flex;align-items: center;justify-content: flex-end;}
    .s4-7-2{display: flex;align-items: center;justify-content: center;width: max(50px, 64rem);height: max(50px, 64rem);padding: 15rem;border-radius: 50%;overflow: hidden;background-color: currentColor;flex: none;margin-left: 20rem;}
    .s4-7-2 .icon{color: var(--schedule-row-bg);}
    
    .s4-4__a .s4-7.disabled .s4-7-1{color: var(--c8);}
    .s4-4__b .s4-7.disabled .s4-7-1,
    .s4-4__c .s4-7.disabled .s4-7-1{color: var(--c5);}
    .s4-7.disabled .s4-7-2{opacity: .3;}
    
    .s5{background-color: var(--c1);color: var(--c0);padding: 0;}
    .s5-1{margin: 0 var(--awr);max-height: 1031rem;position: relative;padding: 20rem var(--wr);flex: auto;}
    .s5-1-1::after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: linear-gradient(to bottom, var(--c1), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, var(--c1));opacity: 1;}
    .s5-1-1 img{object-position: center;}
    .s5-1-2{position: relative;z-index: 1;text-align: center;}
    .s5-1-3{position: absolute;bottom: 68.5%;left: calc(1014 * 100% / 3840);z-index: 1;display: flex;align-items: flex-end;justify-content: center;width: 0;height: var(--sl);}
    .s5-1-3 .marker{flex: none;width: 95rem;display: flex;align-items: flex-end;}
    .s5-1-4{position: absolute;bottom: 12.5%;left: 32.5%;z-index: 1;display: flex;align-items: flex-end;justify-content: center;width: 0;height: var(--sl);}
    .s5-1-4 .marker{flex: none;width: 55rem;display: flex;align-items: flex-end;}
    .s5-2{padding: 0 0 70rem;display: grid;grid-template-columns: 1fr 1fr;grid-gap: var(--gap);flex: none;}
    .s5-3{display: grid;grid-template-columns: auto 1fr;grid-gap: 70rem;align-items: flex-start;}
    .s5-4{color: var(--c5);}
    .s5-5{display: grid;display: flex;flex-wrap: wrap;margin: -10rem;}
    .s5-6{margin: 10rem;position: relative;}
    .s5-6-1{border: var(--sl) solid var(--c5);padding: 15rem 25rem;border-radius: var(--br2);}
    .s5-6-2{position: absolute;top: 100%;left: 0;width: 100%;text-align: center;font-size: var(--f-xs);margin-top: 5rem;opacity: .5;user-select: none;}
    .s5-7{min-height: var(--app-height);display: flex;flex-direction: column;}
    
    .s6{background-color: var(--c0);}
    .s6-1{display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: var(--gap);}
    .s6-2{padding-bottom: 50rem;grid-column: 1/3;}
    .s6-3{display: grid;margin-top: auto;grid-gap: var(--gap);}
    .s6-3-1{width: 100%;position: relative;border-radius: var(--br3);overflow: hidden;background-color: var(--c6);display: flex;}
    .s6-3-1::before{content: "";flex: none;width: 0;padding-top: 100%;}
    
    .s7{background-color: var(--c3);color: var(--c0);padding: 20rem 0 30rem;min-height: auto;}
    .s7-1{position: relative;z-index: 1;max-width: 800rem;width: 50%;}
    .s7-2{opacity: .7;}
    .s7-3-2{margin-top: 25rem;}
    .s7-4{margin-top: 35rem;}
    .s7-5{position: relative;z-index: 1;padding: 50rem 0;width: 100%;}
    
    .s7:not(.success) .s7-5,
    .s7.success .s7-1{display: none;}
    
    
    
    .s8{background-color: var(--c2);color: var(--c0);padding: 75rem 0;border-bottom: var(--sl) solid var(--c5);}
    .s8 + .s8{padding-top: 50rem;}
    .s8-1{display: flex;align-items: center;/*justify-content: space-between;*/margin: 0 -40rem;}
    .s8-2{margin: 0 40rem;}
    .s8-4{margin-bottom: 35rem;opacity: .5;}
    
    
    .s8 .swiper{overflow: visible;}
    .s8 .swiper-wrapper{transition-timing-function: linear !important;}
    .s8 .swiper-slide{height: 155rem;padding: 0 var(--wr);width: auto;}
    .s8 .swiper-slide img{height: 100%;width: auto;max-width: none;}
    
    .s9{padding: 75rem 0 50rem;border-bottom: var(--sl) solid var(--c5);}
    .s9-1{display: flex;align-items: center;justify-content: space-between;margin: 0 -40rem;}
    .s9-2{margin: 0 40rem;}
    .s9-4{margin-bottom: 35rem;opacity: .5;}
    
    .s404-1{display: flex;align-items: center;flex-direction: column;}
    .s404-2{width: 100%;display: flex;position: relative;overflow: hidden;max-width: 760rem;}
    .s404-2::before{content: "";flex: none;width: 0;padding-top: 60%;}
    .s404-3{margin-top: 50rem;text-align: center;font-size: var(--f-b1);font-weight: 700;}
    .s404-4{margin-top: 15rem;max-width: 400rem;text-align: center;}
    .s404-5{margin-top: 45rem;}
    
    .s10-1{}
    .s10-3{margin-top: 25rem;max-width: 1120rem;}
    
}

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

    /* CRITICAL: Global Box-Sizing and Overflow Fixes */
    *, *::before, *::after {
        box-sizing: border-box !important;
    }

    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    :root{

        --wr: 15rem;

        --gap: 5rem;

        --br1: 5rem;
        --br2: 10rem;
        --br3: 12rem;
        --br4: 10rem;


        --f-xs: 10rem;
        --f-s: 12rem;
        --f-d: 14rem;
        --f-m: 14rem;
        --f-b: 16rem;
        --f-b1: 36rem;
        --f-l: 50rem;
        --f-xl: 45rem;
        --f-xxl: 70rem;

        --mw: 680px; 
        
    }
    
    html{font-size: 1px;}

    /* Hide desktop navigation only on tablets and smaller */
    .topbar-nav.desktop,
    .topbar-nav__left.desktop,
    .topbar-nav__right.desktop {
        display: none !important;
    }

    /* Show mobile navigation */
    .topbar-nav.mobile {
        display: block !important;
    }

    .hamburger-btn {
        display: flex !important;
    }

    .preloader-inner{padding: 50rem 0 120rem;}
    .preloader-perc{font-size: 14px;}
    
    .button__main{height: 45rem;padding: 0 30rem;}
    .button__main .button-text{font-size: var(--f-s);}
    .button__secondary{height: 45rem;padding: 0 30rem;}
  
    /* Header - Navbar only, no full viewport height */
    .header{
        padding: 0 !important;
        position: fixed !important;
        width: 100vw !important;
        min-height: auto !important;
        height: auto !important;
        display: block !important;
        background-color: var(--c0) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .topbar{
        grid-template-columns: auto 1fr;
        align-items: flex-start;
        position: relative !important;
        z-index: 100 !important;
    }

    /* Mobile Navigation - Hidden by default on desktop */
    .topbar-nav.mobile {
        display: none;
    }

    .hamburger-menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 40rem !important;
        height: 35rem !important;
        padding: 8rem 6rem !important;
        background-color: var(--c2) !important;
        border-radius: 6rem !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        z-index: 1001 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    }

    .hamburger-menu:hover {
        background-color: var(--c1) !important;
        transform: scale(1.05) !important;
    }

    .hamburger-line {
        width: 100% !important;
        height: 3rem !important;
        background-color: var(--c0) !important;
        border-radius: 2rem !important;
        transition: all 0.3s ease !important;
        display: block !important;
    }

    .hamburger-menu:hover .hamburger-line {
        background-color: var(--c0) !important;
    }

    .topbar-logo{
        max-width: 40rem;
        height: auto;
        justify-content: flex-start;
        margin-top: 0;
        position: relative !important;
        z-index: 10 !important;
    }

    .topbar-logo-static{}

    .topbar-logo-inner{
        min-width: 40rem;
        aspect-ratio: 134/255;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .topbar-logo-back{display: none;}

    .topbar-logo-front{
        aspect-ratio: 134/255;
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }

    .topbar-logo-overlay{
        width: 20rem;
        top: 45%;
        left: 48%;
        position: absolute !important;
        z-index: 15 !important;
    }

    /* CRITICAL: Force Video Display on Mobile */
    .topbar-logo-front .videoObject,
    .videoObject.mobile {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-color: transparent !important;
        object-fit: cover !important;
    }

    .topbar-logo-front video,
    .videoObject.mobile video {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        background-color: transparent !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }

    .topbar-logo-front .mobile{
        display: block !important;
        visibility: visible !important;
    }

    /* ========================================
       MOBILE DRAWER MENU - COMPLETE REDESIGN
       ======================================== */

    /* Hamburger Button Styling - Hidden by default (desktop) */
    .hamburger-btn {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        width: 50px;
        height: 50px;
        background-color: #304FFE;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 0;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .hamburger-btn:hover {
        background-color: #10164F;
        transform: scale(1.05);
    }

    .hamburger-btn:active {
        transform: scale(0.95);
    }

    .hamburger-bar {
        width: 26px;
        height: 3px;
        background-color: #FFFFFF;
        border-radius: 2px;
        transition: all 0.3s ease;
        display: block;
    }

    /* Mobile Drawer Container */
    .mobile-drawer {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9998;
        pointer-events: none;
        visibility: hidden;
    }

    .mobile-drawer.menu-open {
        pointer-events: auto;
        visibility: visible;
    }

    /* Overlay Background */
    .mobile-drawer-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        transition: background-color 0.3s ease;
        z-index: 1;
    }

    .mobile-drawer.menu-open .mobile-drawer-overlay {
        background-color: rgba(0, 0, 0, 0.6);
    }

    /* Drawer Content Panel */
    .mobile-drawer-content {
        position: absolute;
        top: 0;
        right: 0;
        width: 85%;
        max-width: 400px;
        height: 100%;
        background-color: #0A1C3B;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 2;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-drawer.menu-open .mobile-drawer-content {
        transform: translateX(0);
    }

    /* Drawer Header with Close Button */
    .mobile-drawer-header {
        padding: 20px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .close-btn {
        width: 44px;
        height: 44px;
        background-color: transparent;
        border: none;
        cursor: pointer;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        border-radius: 50%;
    }

    .close-btn:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .close-btn:active {
        transform: scale(0.9);
    }

    .close-icon {
        position: absolute;
        width: 28px;
        height: 3px;
        background-color: #FFFFFF;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    .close-icon:first-child {
        transform: rotate(45deg);
    }

    .close-icon:last-child {
        transform: rotate(-45deg);
    }

    /* Drawer Body Content */
    .mobile-drawer-body {
        padding: 0;
    }

    /* Navigation Links */
    .mobile-nav-links {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mobile-nav-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .mobile-nav-item:last-child {
        border-bottom: none;
    }

    .mobile-nav-link {
        display: block;
        padding: 20px 24px;
        color: #FFFFFF;
        text-decoration: none;
        font-size: 18px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
        position: relative;
    }

    .mobile-nav-link::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 0;
        background-color: #304FFE;
        transition: width 0.3s ease;
        z-index: -1;
    }

    .mobile-nav-link:hover,
    .mobile-nav-link:active {
        color: #FFFFFF;
        padding-left: 32px;
    }

    .mobile-nav-link:hover::before,
    .mobile-nav-link:active::before {
        width: 100%;
    }

    /* Search Input Section */
    .mobile-drawer-search {
        padding: 24px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .mobile-search-input {
        width: 100%;
        padding: 14px 18px;
        background-color: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        color: #FFFFFF;
        font-size: 16px;
        outline: none;
        transition: all 0.3s ease;
    }

    .mobile-search-input::placeholder {
        color: rgba(255, 255, 255, 0.5);
    }

    .mobile-search-input:focus {
        background-color: rgba(255, 255, 255, 0.12);
        border-color: #304FFE;
    }

    /* Social Media Section */
    .mobile-drawer-social {
        padding: 24px;
    }

    .social-title {
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 0 0 16px 0;
    }

    .social-icons {
        display: flex;
        gap: 16px;
        align-items: center;
    }

    .social-icon {
        width: 44px;
        height: 44px;
        background-color: rgba(255, 255, 255, 0.08);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        transition: all 0.3s ease;
        text-decoration: none;
    }

    .social-icon:hover {
        background-color: #304FFE;
        transform: translateY(-2px);
    }

    .social-icon svg {
        width: 20px;
        height: 20px;
    }

    /* ========================================
       END MOBILE DRAWER MENU
       ======================================== */

    .selector-holder,
    .textfield{min-height: 45rem;border-radius: var(--br1);}

    /* Mobile Responsiveness Enhancements */
    body, .document{overflow-x: hidden;max-width: 100vw;}
    .wrapper{max-width: 100%;padding: 0 15rem;box-sizing: border-box;}
    .section{width: 100%;overflow: hidden;}
    img{max-width: 100%;height: auto;}
    .main{width: 100%;overflow-x: hidden;}

    /* Popup Mobile Adjustments */
    .popup{margin-left: 0;width: 100%;}
    .popup-inner{padding: 60rem 20rem 35rem 20rem;}
    .popup-close{top: 15rem;right: 15rem;width: 35rem;height: 35rem;}
    .popup-close span{width: 25rem;height: 2rem;}
    .popup-nav-menu ul{gap: 20rem;}
    .popup-nav-menu a{font-size: var(--f-m);padding: 12rem 15rem;}
    
    .selector-holder{padding: 0 15rem;}
    .selector-holder-input{padding: 15rem 0;}
    .selector-holder-icon{width: 8rem;height: 8rem;}
    .selector-list{border-radius: 0 0 var(--br1) var(--br1);}
    .selector-option{padding: 10rem 15rem;}
    .selector-message{padding-top: 5rem;}
    
    .textfield-input{padding: 15rem;border-radius: var(--br1);}
    .textfield-error{margin-top: 5rem;}
    
    .formbox{grid-gap: 10rem;}
    .formbox-footer{margin-top: 20rem;}
    
    .footer{padding: 60rem 0 15rem;}
    .footer-grid{grid-template-columns: auto;grid-gap: 0;}
    .footer-form-container{grid-gap: 15rem 30rem;align-items: center;}
    .footer-form-cell .textfield-input{padding: 15rem;}
    .footer-form-cell__input{grid-column: 1/-1;}
    .footer-form-cell__button{order: 1;}
    .footer-form-cell__message{}
    .footer-nav{flex-direction: column;margin-top: 25rem;}
    .footer-nav-col:not(:last-child){padding: 0;margin-bottom: 30rem;}
    .footer-runner{padding: 0 var(--wr);margin: 20rem var(--awr) 0;overflow: hidden;}
    
    .marquee-container{height: 65rem;}
    .marquee-container::after{margin: 0 15rem;width: 10rem;height: 10rem;}
    
    .bottombar{grid-template-columns: auto;grid-gap: 20rem;margin-top: 20rem;}
    
    .textbox h2,
    .textbox h3{margin: 35rem 0 15rem;}
    
    .card-1{padding: 10rem;}
    .card-1 .card-footer .button{height: 30rem;border-radius: var(--br1);}
    
    .section{padding: 10rem 0;}
    
    .main{}
    
    .s1{padding: 0;}
    
    .logo-trigger{position: absolute;top: 0;left: 0;}
    
    .scene-trigger{}
    
    .s2{padding: 0;}
    .s2-1{margin: 0 var(--awr);grid-template-columns: auto;grid-gap: 0;grid-template-rows: auto 1fr auto;grid-template-areas: "a1" "a2" "a3";overflow: hidden;padding: 0 var(--wr);z-index: 1;}
    .s2-2{margin: 0 var(--awr);padding-bottom: 10rem;}
    .s2-3,
    .s2-4,
    .s2-11{padding: 10rem 0 15rem;align-items: flex-start;}
    .s2-5{display: none;}
    .s2-6{width: calc(100% + 400rem);height: 0;margin-top: 10rem;align-items: flex-start;margin: 0 -200rem;justify-content: center;}
    .s2-6 .s2-8{transform: translateY(-30%);align-items: flex-start;}
    .s2-7{grid-gap: 15rem;}
    .s2-7-2{max-width: 360rem;}
    .s2-8{width: 100%;}
    .s2-9{height: 250vh;}
    .s2-9-4{flex: 1;}
    .s2-9-5{flex: 1;}
    .s2-9-6{height: 100vh;flex: none;}
    
    .s2-10{padding: 0 100vw 70rem ;flex-direction: row;flex: none;width: auto;align-items: flex-end;height: var(--app-height);position: sticky;top: 0;}
    .s2-10-1,
    .s2-10-2,
    .s2-10-3{flex: none;width: auto;height: 220rem;margin: 0;display: flex;}
    .s2-10-2,
    .s2-10-3{margin-left: 10rem;}
    .s2-10 img{width: auto;max-width: none;height: 100%;}
    
    .sx2-10{padding-left: 0;padding-right: 0;}
    .sx2-10-1{width: 145rem;margin-left: -25rem;}
    .sx2-10-2{width: 135rem;margin-right: 30rem;margin-top: 25rem;}
    .sx2-10-3{width: 150rem;margin: 30rem auto 0;}
    
    .s3{padding: 0;}
    .s3-1{min-height: 0;padding: 10rem 0;}
    .s3-2{margin: auto;}
    .s3-2 .timer{margin-right: -.1em;}
    .s3-2 .timer-val{padding-right: .1em;min-width: 1.1em;}
    .s3-2 .timer-val::after{font-size: var(--f-xs);}
    .s3-2 .timer-delimiter{width: 0;margin-right: .1em;}
    .s3-3{margin-top: 40rem;padding-top: 10rem;}
    .s3-4{width: 100%;}
    .s3-5,
    .s3-6{height: 70rem;}
    .s3-5-1,
    .s3-6-1{background-size: auto 70rem;;height: 100%;}
    
    .s4-3{margin-top: 30rem;grid-gap: var(--gap);}
    .s4-4{padding: 15rem;grid-gap: 5rem 30rem;grid-template-columns: 1fr auto;}
    .s4-5{margin-top: auto;font-weight: 400;}
    .s4-6{order: 1;margin-bottom: auto;text-align: left;}
    .s4-7{grid-row-end: span 2;margin-left: auto;}
    .s4-7-1{font-size: var(--f-xs);max-width: 70rem;}
    .s4-7-2{width: 40rem;height: 40rem;padding: 10rem;margin-left: 5rem;}
    
    .s5{padding: 75rem 0;}
    .s5-1{padding-top: 0;padding-bottom: 0;height: auto;max-height: none;flex: none;}
    .s5-1-1{margin: 0 var(--awr);position: relative;display: flex;}
    .s5-1-1 img{}
    .s5-1-2{text-align: left;}
    .s5-1-3{bottom: auto;left: 12%;top: 31%;line-height: 0;}
    .s5-1-3 .marker{width: 35rem;}
    .s5-1-4{bottom: auto;left: 28.5%;top: 86%;line-height: 0;}
    .s5-1-4 .marker{width: 35rem;}
    .s5-2{grid-template-columns: auto;grid-gap: 30rem;padding: 0;}
    .s5-3{grid-template-columns: auto;grid-gap: 10rem;}
    .s5-6-1{padding: 15rem;}
    .s5-6-2{position: relative;top: auto;text-align: left;}
    
    .s6-1{grid-template-columns: 1fr 1fr;}
    .s6-2{grid-column: 1/-1;padding-bottom: 15rem;}
    .s6-2 .title br{display: none;}
    .s6-3:nth-child(3n + 4){grid-column: 2/3;}
    .s6-3:nth-child(3n + 6){grid-column: 1/2;}
    
    .s7-1{width: 100%;}
    .s7-4{margin-top: 20rem;}
    
    .s8{padding: 35rem 0;}
    
    .s8 .swiper-slide{height: 45rem;}
    
    .s8-1{/*justify-content: space-around;*/margin: 0;/*width: 200vw;*/}
    .s8-2{padding: 0 var(--wr);margin: 0;}
    .s8-2 img{height: 45rem;width: auto;max-width: none;min-width: 0;}
    .s8-3{margin: 0 var(--awr);overflow: auto;overflow: -moz-scrollbars-none!important;scrollbar-width: none;}
    .s8-3::-webkit-scrollbar{display: none;}
    
    .s9{padding: 35rem 0;}
    
    .s9 .swiper{overflow: visible;}
    .s9 .swiper-wrapper{transition-timing-function: linear !important;}
    .s9 .swiper-slide{height: 45rem;padding: 0 var(--wr);width: auto;}
    .s9 .swiper-slide img{height: 100%;width: auto;max-width: none;}
    
    .s10-3{margin-top: 15rem;}
    
    .s404{padding: 150rem 0;}
    .s404-5{margin-top: 30rem;}
    
    .popup{position: fixed;z-index: 999;top: 0;left: 0;right: 0;bottom: 0;background-color: var(--c2);color: var(--c0);display: flex;overflow: auto;margin-left: 50rem;will-change: transform;transition: transform .5s;transform: translateX(100%);}
    .popup-inner{display: flex;flex-direction: column;padding: 15rem var(--wr) 35rem 35rem;width: 100%;}
    .popup-overlay{background-color: var(--c0);position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 100;opacity: 0;transition: opacity .5s;pointer-events: none;}
    
    .popup-header{margin-left: auto;font-weight: 700;text-transform: uppercase;letter-spacing: 0;display: flex;align-items: center;}
    .popup-close{position: absolute;top: 20rem;right: 20rem;width: 40rem;height: 40rem;cursor: pointer;z-index: 1000;display: flex;align-items: center;justify-content: center;}
    .popup-close span{position: absolute;width: 30rem;height: 3rem;background-color: var(--c0);transition: all 0.3s;}
    .popup-close span:first-child{transform: rotate(45deg);}
    .popup-close span:last-child{transform: rotate(-45deg);}
    .popup-close:hover span{background-color: rgba(255,255,255,0.7);}
    .popup-nav{margin: 50rem 0;}
    .popup-nav ul{display: grid;grid-template-columns: auto;grid-gap: 0;font-size: var(--f-xl);text-transform: uppercase;}
    .popup-nav-menu{width: 100%;display: flex;align-items: center;justify-content: center;margin: auto;}
    .popup-nav-menu ul{list-style: none;padding: 0;margin: 0;display: flex;flex-direction: column;align-items: center;gap: 30rem;}
    .popup-nav-menu li{width: 100%;text-align: center;}
    .popup-nav-menu a{color: var(--c0);text-decoration: none;font-size: var(--f-l);font-weight: 700;text-transform: uppercase;letter-spacing: 2rem;transition: all 0.3s;display: block;padding: 15rem 20rem;}
    .popup-nav-menu a:hover{color: rgba(255,255,255,0.7);transform: translateX(10rem);}
    .popup-footer{margin-top: auto;}
    .popup-footer ul{display: grid;grid-template-columns: auto;grid-gap: 10rem;}

    .popup.active{transform: translateX(0);}
    
    .popup.active ~ .popup-overlay{opacity: 1;pointer-events: all;}
    
    
    .header .player-video{max-width: none;width: auto;}
    
    .runner-end, 
    .runner-start{ }
    
    
    .invert .header{color: var(--c1);background-color: var(--c0) !important;}
    
    .hide-header .topbar{opacity: 0;pointer-events: none;}
    
    
    .videoObject{background-color: var(--c1);}

}

/* Hide Mobile Menu on Desktop/Laptop Screens */
@media screen and (min-width: 769px) {
    .hamburger-btn,
    .mobile-drawer,
    .topbar-nav.mobile {
        display: none !important;
    }

    .topbar-nav.desktop,
    .topbar-nav__left.desktop,
    .topbar-nav__right.desktop {
        display: flex !important;
    }
}

/* Additional Mobile Responsiveness for Tablets and Smaller Phones */
@media screen and (max-width: 768px) {
    :root{
        --wr: 12rem;
        --gap: 4rem;
        --f-l: 40rem;
        --f-xl: 35rem;
    }

    html{font-size: 0.9px;}

    .wrapper{padding: 0 12rem;}

    /* Header and Navigation */
    .header{min-height: auto !important;height: auto !important;}
    .topbar{padding: 8rem 0 !important;}
    .topbar-nav.desktop{display: none !important;}
    .topbar-nav.mobile{display: block !important;}
    .hamburger-btn{display: flex !important;position: fixed !important;top: 20px !important;right: 20px !important;z-index: 9999 !important;}
    .hamburger-menu{width: 38rem !important;height: 33rem !important;}
    .topbar-logo{max-width: 35rem;}
    .topbar-logo-inner{min-width: 35rem;}
    .topbar-logo-overlay{width: 18rem;}

    /* Simple Logo - Responsive */
    .topbar-logo-simple{max-width: 180rem;padding: 15rem 15rem;}
    .header-logo{height: 60rem;}

    /* Popup Menu */
    .popup{margin-left: 0 !important;width: 100vw !important;}
    .popup-inner{padding: 50rem 15rem 30rem 15rem !important;}
    .popup-nav-menu a{font-size: 28rem;}

    /* Fix content overflow and white backgrounds */
    .section{padding: 20rem 0;}
    .main{background-color: var(--c0);}
}

@media screen and (max-width: 480px) {
    :root{
        --wr: 10rem;
        --gap: 3rem;
        --f-s: 11rem;
        --f-d: 13rem;
        --f-m: 13rem;
        --f-b: 15rem;
        --f-l: 32rem;
        --f-xl: 28rem;
    }

    html{font-size: 0.8px;}

    .wrapper{padding: 0 10rem;}

    /* Header and Navigation */
    .header{min-height: auto !important;height: auto !important;}
    .topbar{padding: 6rem 0 !important;}
    .topbar-nav.desktop{display: none !important;}
    .topbar-nav.mobile{display: block !important;}
    .hamburger-btn{display: flex !important;position: fixed !important;top: 15px !important;right: 15px !important;z-index: 9999 !important;width: 45px !important;height: 45px !important;}
    .hamburger-menu{width: 35rem !important;height: 30rem !important;padding: 6rem 5rem !important;}
    .hamburger-line{height: 2.5rem !important;}
    .topbar-logo{max-width: 30rem;}
    .topbar-logo-inner{min-width: 30rem;}
    .topbar-logo-overlay{width: 15rem;}

    /* Simple Logo - Responsive */
    .topbar-logo-simple{max-width: 160rem;padding: 12rem 12rem;}
    .header-logo{height: 50rem;}

    /* Popup Menu */
    .popup{margin-left: 0 !important;width: 100vw !important;}
    .popup-inner{padding: 45rem 12rem 25rem 12rem !important;}
    .popup-close{top: 10rem !important;right: 10rem !important;width: 30rem !important;height: 30rem !important;}
    .popup-close span{width: 20rem !important;height: 2rem !important;}
    .popup-nav-menu ul{gap: 15rem;}
    .popup-nav-menu a{font-size: 22rem;padding: 10rem 12rem;letter-spacing: 1rem;}

    /* Ensure no content gets cut off */
    .section{padding: 15rem 0;min-height: auto !important;}
    body, html{overflow-x: hidden !important;max-width: 100vw !important;}
}


@media screen and (min-width: 1024px) {
    
    .mobile{display: none!important;}
    
    
    .topbar-logo-inner{max-width: 100vw;padding: 0!important;height: auto!important;}
    
    
    .clip-header .topbar-logo-back{opacity: 1;}
    
    .logo-trigger{position: absolute;top: 0;left: 0;}
    
    .section:not(.s8):not(.s9){min-height: var(--app-height);}
    
    .footer-form-cell .textfield{min-height: auto;}
    
    .s2-10{transform: none!important;}
    
    .s5-1{min-height: calc(2062 * var(--app-width) / 3840);}
    .s5-1-1{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
    
    .s6-3:nth-child(even){grid-template-columns: 1fr 1fr;grid-column-end: span 2;}
    
    .s8-2,
    .s9-2{height: 100rem;}
    
    .s8-2 img,
    .s9-2 img{height: 100%;}
    
    
    .header{transition: transform .75s, background-color .5s, color .5s;background-color: var(--c0);will-change: transform;}
    
    .invert .header{background-color: var(--c0) !important;color: var(--c1) !important;}
    
    .hide-header{pointer-events: none;transform: translateY(-100%);}
    
    
    .footer-runner:not(.visible) .runner-end, 
    .footer-runner:not(.visible) .runner-start{animation-play-state: paused;}
    
    
    
}

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

/* hover animations */

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
    
    .s5-6-1{cursor: pointer;}
    
    .button__main{background-image: url(../img/main-button-hover.gif);background-position: center;background-repeat: no-repeat;background-size: 0;}
    .button__main:hover{color: var(--c0)!important;background-size: cover;}
    
    .scrl-inner{will-change: transform;transition: transform .25s;}
    .scrl:hover .scrl-inner,
    .s5-6-1:hover .scrl-inner,
    .button__secondary:hover .scrl-inner{transform: translateY(-100%);}
   
    .selector-option-inner{transition: color .15s;}
    .selector-option-inner:hover{color: var(--c2);}
    
    .s2-7-2 a,
    .s4-2-2 a,
    .selector-message a{transition: opacity .25s;}
    
    .s2-7-2 a:hover,
    .s4-2-2 a:hover,
    .selector-message a:hover{opacity: .6;}
    
    
}