/* Import CSS files in order */
@import url("reset.css");
@import url("variables.css");
@import url("base.css");
@import url("color.css");
@import url("typography.css");
@import url("component.css");

:root{

  --menu-height:4.4rem;
  --header-gutter:6rem;
  --section-gutter:calc(var(--md-space) * 2);

}

header{padding: var(--gutter) 0; transition: padding 300ms cubic-bezier(.22, 1, .36, 1), background-color 250ms ease;}
header.position-fixed{left: 0; top: 0; width: 100%; z-index: 999;}
header .container{display: flex; align-items: flex-start; gap: 0 var(--header-gutter);}
header .logo{display: flex; flex: 1 0 0%;}
header .logo > *{display: flex; position: relative; z-index: 1;}
header .logo > * > img{display: block; max-width: 11rem; transition: max-width 300ms cubic-bezier(.22, 1, .36, 1);}
nav{display: flex; align-items: center; gap: 0 var(--header-gutter);}
nav a{font-family: var(--font-medium); font-size: var(--fs-xl); color: var(--white-color); display: flex; align-items: center; justify-content: center; line-height: 1; white-space: nowrap; height: var(--menu-height);}
.languages{height:var(--menu-height); display: flex; align-items: center;}
.languages > *{display: flex; align-items: center; justify-content: center;}
.languages img{width: 2rem; height: 2rem; max-width: none;}
header.header-scrolled{padding: var(--gutter-half) 0; background-color: var(--body-color);}
header.header-scrolled .container{align-items: center;}
header.header-scrolled .logo > * > img{max-width: 8rem;}
@media(width < 1200px){
  :root{
    --header-gutter:3rem;
  }
  nav a{font-size: var(--fs-md);}
}
@media(width > 991px){

}
@media(width < 992px){
  nav{position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--body-color); flex-direction: column; align-items: center; justify-content: center; gap: 2vh 0; opacity: 0; visibility: hidden; pointer-events: none; transition: var(--transition);}
  nav.active{opacity: 1; visibility: visible; pointer-events: auto;}
  nav a{font-size: clamp(var(--fs-lg), 3vw, 3vw);}
  header{padding: var(--gutter-half) 0;}
  header .logo > * > img{max-width: 8rem;}
}

.hero-section{overflow: hidden; position: relative;}
.hero-section img, .hero-section video{object-fit: cover; width: 100%; height: 100%;}
.home-hero-video{display: block;}
.home-hero::after{position: absolute; inset: 0; z-index: 1; pointer-events: none; content: ""; background-image: linear-gradient(rgba(0, 0, 0, 28%), rgba(0, 0, 0, 28%)), radial-gradient(circle, rgba(0, 0, 0, 32%) .7px, transparent .8px); background-size: auto, 3px 3px;}
.hero-parallax-media{will-change: transform; transform-origin: center center;}
.hero-section .container{height: 100%; position: absolute; z-index: 99; left: 50%; top: 50%; transform: translate(-50%, -50%); padding-top: var(--lg-space); padding-bottom: var(--lg-space); display: flex; align-items: flex-end;}
.hero-content h1{color: var(--white-color);}
.hero-content .btn:not(:first-child){margin-top: calc(var(--md-space) * 2);}

.strip-slot{position: absolute; left: 0; bottom: 0; width: 100%; min-height: 10rem; z-index: 100;}
.strip-slot:has(.strip.is-open), .strip-slot:has(.strip.is-closing){z-index: 1000;}
.strip{background-color: var(--body-color); position: relative; z-index: 1; border-radius: 2.4rem 2.4rem 0 0;}
.strip.is-open, .strip.is-closing{position: fixed; left: 0; bottom: 0; width: 100%; max-height: 100dvh; overflow-y: auto; z-index: 1000;}
.strip-trigger{width: 100%; min-height: 10rem; padding: var(--regular-space) 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; display: flex; align-items: center;}
.strip-trigger .container{width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--gutter-half) var(--md-space);}
.strip-content{display: flex; align-items: center; gap: var(--xs-space) var(--regular-space); position: relative;}
.strip-content::before{width: 3.2rem; aspect-ratio: 1; border-radius: 100%; content: ""; background-color: #E23535; opacity: 30%; flex-shrink: 0; transform-origin: center; animation: strip-status-pulse 2.6s ease-in-out infinite;}
.strip-content::after{position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); border-radius: 100%; width: 1rem; height: 1rem; background-color: #E23535; content: "";}
@keyframes strip-status-pulse{
  0%, 100%{transform: scale(.94); opacity: 24%;}
  50%{transform: scale(1.1); opacity: 38%;}
}
@media (prefers-reduced-motion: reduce){
  .strip-content::before{animation: none; transform: none; opacity: 30%;}
}
.strip-action{display: flex; align-items: center; justify-content: center; gap: 0 1rem; white-space: nowrap; color: var(--white-color);}
.strip-action-icon{display: block; position: relative; width: 2.4rem; height: 2.4rem; flex: 0 0 auto;}
.strip-action-icon img{position: absolute; inset: 0; display: block; width: 100%; height: 100%; transition: opacity 300ms ease, transform 400ms cubic-bezier(.22, 1, .36, 1);}
.strip-icon-expand{opacity: 1; transform: scale(1);}
.strip-icon-collapse{opacity: 0; transform: scale(.72);}
.strip.is-open .strip-icon-expand{opacity: 0; transform: scale(.72);}
.strip.is-open .strip-icon-collapse{opacity: 1; transform: scale(1);}
@media(width < 768px){
  .strip-trigger .container{flex-wrap: wrap;}
  .strip-action{margin-left: auto;}
}

.strip-panel{display: grid; grid-template-rows: 0fr; background-color: var(--body-color); transition: grid-template-rows 500ms cubic-bezier(.22, 1, .36, 1);}
.strip-panel-inner{min-height: 0; overflow: hidden;}
.strip-panel-inner > .container{padding-top: 0; padding-bottom: 0; transition: padding 500ms cubic-bezier(.22, 1, .36, 1);}
.strip.is-open .strip-panel{grid-template-rows: 1fr;}
.strip.is-open .strip-panel-inner > .container{padding-top: var(--gutter); padding-bottom: calc(var(--gutter) + var(--xs-space));}
.strip-panel figure{border-radius: var(--border-radius); max-width: 40vw;}
.strip-panel figure img{border-radius: inherit; object-fit: cover; width: 100%; height: 100%;}
.strip-panel .strip-modal-wrap{display: flex; align-items: center; justify-content: flex-start; gap: var(--gutter);}
.strip-panel .strip-modal-wrap > :last-child{flex: 1 0 0%; display: flex; justify-content: center;}
.strip-backdrop{position: fixed; inset: 0; z-index: 998; border: 0; background: rgba(0, 0, 0, 65%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 300ms ease, visibility 300ms ease;}
.strip-backdrop.active{opacity: 1; visibility: visible; pointer-events: auto;}
@media(width < 992px){
  .strip-panel .strip-modal-wrap{flex-direction: column; align-items: flex-start;}
  .strip-panel figure{max-width: 50vw;}
}
@media(width < 768px){
  .strip-modal-wrap article h6{font-size: var(--fs-sm);}
  .strip-content h6{font-size: var(--fs-sm);}
  .strip-modal-wrap h2{font-size: var(--fs-lg);}
}
@media(width < 640px){
  .strip-modal-wrap figure{display: none;}
}

.page-hero-section-wrapper{height: 100dvh; position: relative;}
.page-hero-section-wrapper .hero-section{height: 100%;}
.page-hero-section-wrapper .hero-section .container{padding-bottom: calc(var(--md-space) + 10rem);}


.footer-content{padding: var(--md) 0; display: flex; gap: var(--gutter); justify-content: space-between;}
.copyright{padding: 3rem 0; position: relative; display: flex; align-items: center; gap: var(--gutter-half); flex-wrap: wrap; justify-content: space-between;}
.copyright::before{position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 100vw; height: .1rem; background-color: #D4D4D4; content: "";}
.copyright p, .copyright p a{font-size: var(--fs-md); color: #F8F8F8;}
.copyright p a{display: flex; line-height: 1; white-space: nowrap;}
.copyright p.flex{gap: var(--gutter-half) var(--gutter); flex-wrap: wrap;}
@media(width > 991px){
  footer .logo{align-self: flex-end;}
}
@media(width < 992px){
  .copyright p, .copyright p a{font-size: var(--fs-sm);}
  .footer-content{flex-direction: column;}
}
.footer-content a{display: flex; align-items: center; line-height: 1; white-space: nowrap;}
.footer-links-block p{font-family: var(--font-medium)}
.footer-links-block p:not(:last-child){margin-bottom: var(--gutter-half);}
.footer-link > li{display: flex; align-items: center;}
.footer-link > li:not(:last-child){margin-bottom: var(--gutter-half);}
.footer-link > li > a{display: flex; align-items: center; line-height: 1; color: #5E5E5E; font-family: var(--font-medium); transition: var(--transition);}
.footer-link > li > a:hover{color: #D4D4D4;}
.footer-links{display: flex; gap: var(--gutter); justify-content: space-between; flex: 1 0 0%; max-width: 90rem; flex-wrap: wrap;}
.footer-links-block{display: flex; flex-direction: column; gap: var(--gutter); justify-content: space-between;}
@media(width < 576px){
  .footer-links{flex-direction: column;}
}
.social-icons{display: flex; align-items: center; gap: 0 var(--gutter-half);}

.section{padding: var(--section-gutter) 0;}
.section-header:not(:last-child){margin-bottom: calc(var(--section-gutter) * 2);}
.section-header-compact:not(:last-child){margin-bottom: var(--lg-space);}
.section-header > :not(:last-child){margin-bottom:calc(var(--lg-space) - var(--gutter));}
.section-header.flex{gap: var(--gutter) var(--lg-space);}
button.btn.btn-label{color: var(--white-color); border: .1rem dashed var(--white-color);}

.grid-type-1{display: grid; grid-template-columns: 1fr 2fr; gap: var(--gutter);}
@media(width < 992px){
  .grid-type-1{grid-template-columns: 1fr;}
}
.grid-type-2{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--lg-space);}
@media(width > 991px){
  .grid-type-2:has(> .photo-pair:first-child){grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);}
  .grid-type-2:has(> .photo-pair:last-child){grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);}
  .grid-type-2:has(> .photo-pair) > div:has(> article),
  .grid-type-2:has(> div > figure) > div:has(> article){display: flex; align-items: center;}
  .grid-type-2:has(> .photo-pair) > div:has(> article) > article,
  .grid-type-2:has(> div > figure) > div:has(> article) > article{width: 100%;}
}
@media(width < 992px){
  .grid-type-2{grid-template-columns: 1fr;}
}

.photo-pair{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter-half); align-items: end;}
.photo-pair-balanced{grid-template-columns: repeat(2, minmax(0, 1fr));}
.photo-pair figure{aspect-ratio: 4/5; min-width: 0; overflow: hidden; border-radius: var(--border-radius);}
.photo-pair img{width: 100%; height: 100%; object-fit: cover; display: block;}
@media(width < 576px){
  .photo-pair{gap: 1.2rem;}
}

.grid-type-3{display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter);}
@media(width < 992px){
  .grid-type-3{grid-template-columns: repeat(2, 1fr);}
}
@media(width < 576px){
  .grid-type-3{grid-template-columns: 1fr;}
}

.object-fit-cover{object-fit: cover; width: 100%; height: 100%;}

.avatar-boxes{display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter);}
.avatar-box{border-radius: var(--border-radius); aspect-ratio: .9/1; background-color: #333; display: flex; flex-direction: column; padding: var(--gutter);}
.avatar-box-icon{flex: 1 0 0%; display: flex; align-items: flex-start; justify-content: flex-start;}
.avatar-box-icon img{width: 3.5rem; height: 3.5rem; display: block;}
.avatar-box-content{padding: 0;}
@media(width < 1200px){
  .avatar-boxes{grid-template-columns: repeat(2, 1fr);}
}
@media(width < 576px){
  .avatar-boxes{grid-template-columns: 1fr;}
}

.section-content{margin-bottom: var(--section-gutter);}

.intro-banner{background-color: black; border-radius: var(--border-radius); overflow: hidden; position: relative; isolation: isolate;} 
.intro-banner::before{position: absolute; left: 0; top: 0; width:100%; height: 100%; content: ""; z-index: -1; background: url('../images/gradient.png') center center no-repeat; background-size: 100% 100%; pointer-events: none;}
.intro-banner-content{padding: var(--lg-space); padding-bottom: 0;}
.intro-banner-content h2{max-width: 121rem;}
.intro-banner-connect{min-height: clamp(60rem, 70vw, 90rem); display: flex; align-items: center; background-image: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.72) 62%, rgba(0,0,0,.58) 100%), url('../images/photos/home-connect-sm.webp'); background-size: cover; background-position: center center;}
.intro-banner-connect::before{display: none;}
.intro-banner-connect .intro-banner-content{width: 100%; padding: var(--lg-space);}
@media(width >= 1200px){
  .intro-banner-connect{background-image: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.72) 62%, rgba(0,0,0,.58) 100%), url('../images/photos/home-connect-lg.webp');}
}
article > :not(:last-child){margin-bottom: var(--md-space);}
@media(width < 767px){
  .intro-banner-content{padding: var(--gutter);}
  .intro-banner-connect .intro-banner-content{padding: var(--gutter);}
}

.card-slider .swiper-slide{width: auto;}
.card-slider .card{max-width: 40rem; position: relative;}
.card{border-radius: var(--border-radius);}
.card figure, .card figure img{border-radius: inherit;}
.card figure img{object-fit: cover; width: 100%; height: 100%;}
.card-content{padding: var(--gutter); position: absolute; left: 0; top: 0; width: 100%;}
.swiper-pagination-wrap{align-self: flex-end;}
.swiper-pagination-wrap .swiper-pagination{width: 13rem; position: static; background-color: rgba(248, 248, 248, 20%);}
.swiper-pagination-wrap .swiper-pagination .swiper-pagination-progressbar-fill{background-color: #F8F8F8;}
@media(width < 1200px){
  .card-slider .card{max-width: 35rem;}
}
@media(width < 992px){
  .card-slider .card{max-width: 30rem;}
}
@media(width < 768px){
  .swiper-pagination-wrap{display: none;}
  .card-slider .card{max-width: 25rem;}
  .card-content{padding: var(--gutter-half);}
}

.image-article{border-radius: var(--border-radius); position: relative;}
.image-article figure, .image-article figure img{border-radius: inherit;}
.image-article figure img{object-fit: cover; width: 100%; height: 100%;}
.image-article-content{position: absolute; left: 0; top: 0; width: 100%; height: 100%; isolation: isolate; padding: var(--md);}
.image-article-content::before{position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; z-index: -1; 
  background: linear-gradient(to top, rgba(0,0,0,57%), rgba(0,0,0,0%) );}
.image-article-content{display: flex; align-items: flex-end;} 
@media(width < 992px){
  .image-article-content{padding: var(--gutter);}
}

.page-hero-section{height: clamp(40rem,75dvh, 75dvh); padding: var(--lg-space) 0; overflow: hidden; isolation: isolate; position: relative; display: flex;}
.page-hero-media{position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;}
.guide-hero-media{object-position: center 65%;}
.page-hero-section::before{z-index: -1; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,100%), rgba(0,0,0,0%) ); opacity: 67%;}
.page-hero-section::after{z-index: -1; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,100%), rgba(0,0,0,0%) ); opacity:49%;}
.page-hero-section .container{display: flex; align-items:flex-end;}
.title-line-desktop{display: inline;}
@media(width >= 768px){
  .title-line-desktop{display: block;}
}

ul.border-list{margin-top: calc(var(--gutter) * -1); counter-reset: border-list-item;}
ul.border-list li{padding: var(--gutter) 0 var(--gutter) calc(var(--gutter) * 2); border-bottom: .1rem solid #707070; position: relative; counter-increment: border-list-item;}
ul.border-list li::before{content: counter(border-list-item, decimal-leading-zero); position: absolute; left: 0; top: calc(var(--gutter) + .4rem); color: var(--red-color);}
ul.border-list li p{color: var(--grey-color);}

.service-item{border-radius: var(--border-radius); background-color: #333333; aspect-ratio:1/1.11; padding: var(--gutter); display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;}
.service-item .feature-icon{width: 3.5rem; height: 3.5rem; display: block;}
.service-item h6{font-family: var(--font-medium); max-width: 25rem; color: var(--white-color);}

.content-banner{border-radius: calc(var(--border-radius) * 4); display: flex; align-items: center; min-height: 50rem; padding: var(--gutter) var(--lg-space); background-color: black; overflow: hidden; position: relative; isolation: isolate;}
.content-banner::before{position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1/1; content: ""; z-index: -1; 
  background: radial-gradient(circle,rgba(255, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 65%);}
.content-banner article{max-width: 120rem;}
.content-banner-vision{background-image: linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.54) 62%, rgba(0,0,0,.28) 100%), url('../images/photos/rc-vision-sm.webp'); background-size: cover; background-position: center center;}
.content-banner-vision::before{display: none;}
.content-banner-guide{background-image: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.64) 62%, rgba(0,0,0,.42) 100%), url('../images/photos/guide-cta-sm.webp'); background-size: cover; background-position: center center;}
.content-banner-guide::before{display: none;}
.content-banner-tools{background-image: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.62) 62%, rgba(0,0,0,.34) 100%), url('../images/photos/tools-cta-sm.webp'); background-size: cover; background-position: 68% center;}
.content-banner-tools::before{display: none;}
@media(width >= 1200px){
  .content-banner-vision{background-image: linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.54) 62%, rgba(0,0,0,.28) 100%), url('../images/photos/rc-vision-lg.webp');}
  .content-banner-guide{background-image: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.64) 62%, rgba(0,0,0,.42) 100%), url('../images/photos/guide-cta-lg.webp');}
  .content-banner-tools{background-image: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.62) 62%, rgba(0,0,0,.34) 100%), url('../images/photos/tools-cta-lg.webp'); background-position: center center;}
}
@media(width < 992px){
  .content-banner{padding: var(--lg-space) var(--gutter); min-height: auto; border-radius: calc(var(--border-radius) * 2);}
}
.image-card{aspect-ratio: 1/1.22; border-radius: var(--border-radius); overflow: hidden; position: relative; display: block;}
.image-card figure, .image-card figure img{border-radius: inherit;}
.image-card figure img{object-fit: cover; width: 100%; height: 100%;}
.image-card h6{position: absolute; left: 0; top: 0; width: 100%; padding: var(--gutter); color: var(--white-color);}

.accordian{border-top: .1rem solid rgb(248, 248, 248, 15%);}
.accordian li{border-bottom: .1rem solid rgb(248, 248, 248, 15%); position: relative; overflow: hidden; transition: var(--transition);}
.accordian li::before, .accordian li::after{position: absolute; content: ""; background-color: var(--white-color); cursor: pointer; transition: opacity .25s ease, transform .25s ease;}
.accordian li::before{right:1rem; top: 4.3rem; width: 1.2rem; height: .2rem;}
.accordian li::after{right:1.5rem; top: 3.8rem; width: .2rem; height: 1.2rem;}
.accordian li h6{cursor: pointer; padding: var(--gutter) 0;}
.accordian li p{margin: 0; max-width: 72rem; color: #A5A5A5; overflow: hidden; max-height: 0; opacity: 0; padding-bottom: 0; transition: max-height .45s ease, opacity .3s ease, padding-bottom .3s ease;}
.accordian li.active{padding-bottom: var(--gutter);}
.accordian li.active p{max-height: 30rem; opacity: 1;}
.accordian li.active::after{opacity: 0; transform: rotate(90deg);}
.accordian li h6, .accordian li.active h6{padding-right: var(--gutter);}

.post-slider .swiper-slide{width: auto;}
.post-slide{display: block; border: .1rem solid rgb(248, 248, 248, 15%); width: clamp(30rem, 22vw, 22vw); aspect-ratio: 1/1.13; padding: var(--gutter); display: flex; flex-direction: column; justify-content: space-between; gap: var(--gutter); border-radius: var(--border-radius);}
.post-slide h5{color: var(--white-color);}
.post-slide p{color: #CFCFCF;}
.post-slide h5:not(:last-child){margin-bottom: 1rem;}
.arrow-link{color: #CFCFCF; display: inline-flex; align-items: center; gap: 0 .8rem; transition: var(--transition);}
.arrow-link span{color: var(--red-color); display: block; line-height: 1;}
.post-slider-header{display: flex; align-items:flex-end; justify-content: space-between;}
.post-slider-header > :not(:last-child){margin-bottom: 0;}
.post-slider-header .swiper-pagination{position: static;}
.post-slider-header .swiper-pagination{width: 13rem; position: static; background-color: rgba(248, 248, 248, 20%);}
.post-slider-header .swiper-pagination .swiper-pagination-progressbar-fill{background-color: #F8F8F8;}
@media(width < 576px){
  .post-slider-header .swiper-pagination{display: none;}
}

.video-list  li:not(:last-child){margin-bottom: var(--gutter);}
.video-list li > :first-child{aspect-ratio: 16/9; width: clamp(40rem, 35%, 35%); position: relative;}
.video-list li > :first-child > iframe{width: 100%; height: 100%; border: 0;}
.video-list li > :first-child > figure{width: 100%; height: 100%;}
.video-list li > :first-child > figure img{object-fit: cover; width: 100%; height: 100%;}
.video-list li > :first-child .play-button{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(7.8rem, 16%, 16%); aspect-ratio: 1; z-index: 1; border-radius: 100%; background-color: var(--red-color); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 300ms cubic-bezier(.22, 1, .36, 1), background-color 250ms ease;}
.video-list li > :first-child .play-button:hover{transform: translate(-50%, -50%) scale(1.06);}
.video-list li{display: flex; background-color: #333333;} 
.video-list li .content{padding: var(--gutter) var(--md-space); display: flex; align-items:center;}
.video-list li .content > *{max-width: 56rem;}
.video-list li .content p{color: #A5A5A5;}
.video-list li .content h3:not(:last-child){margin-bottom: var(--gutter-half);}
@media(width < 992px){
  .video-list  li{flex-direction: column;}
  .video-list li > :first-child{width: 100%;}
}

.video-modal{position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: var(--gutter); background-color: rgba(0, 0, 0, 88%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 300ms ease, visibility 300ms ease;}
.video-modal.is-open{opacity: 1; visibility: visible; pointer-events: auto;}
.video-modal-dialog{position: relative; width: min(120rem, 92vw); transform: translateY(2rem) scale(.98); opacity: 0; transition: transform 400ms cubic-bezier(.22, 1, .36, 1), opacity 300ms ease;}
.video-modal.is-open .video-modal-dialog{transform: translateY(0) scale(1); opacity: 1;}
.video-modal-frame{aspect-ratio: 16/9; overflow: hidden; border-radius: var(--border-radius); background-color: #000; box-shadow: 0 2rem 8rem rgba(0, 0, 0, 45%);}
.video-modal-frame iframe{display: block; width: 100%; height: 100%; border: 0;}
.video-modal-close{position: absolute; right: 0; bottom: calc(100% + 1.2rem); width: 4.4rem; height: 4.4rem; border-radius: 100%; background-color: var(--white-color); color: var(--body-color); font-size: 3rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1;}
body.video-modal-open{overflow: hidden;}
@media (prefers-reduced-motion: reduce){
  .video-list li > :first-child .play-button, .video-modal, .video-modal-dialog{transition: none;}
}

.banner-slider{overflow: hidden;}
.banner-slide{aspect-ratio: 2.4/1; background-color: #000; background-size: cover; background-repeat: no-repeat; background-position: center center;}
.banner-slider-wrapper{position: relative;}
.banner-slider-content{position: absolute; left: 0; bottom: 0; width: 100%; padding: var(--md-space);}
.banner-slider-content h6{max-width: 23rem;}
.slider-controls{display: flex; align-items:center; justify-content: space-between; gap: 1rem;}
.slider-control{aspect-ratio: 1; border: .1rem solid var(--white-color); font-family: Arial, Helvetica, sans-serif; display: grid; place-items: center; width: 4.6rem; cursor: pointer; color: var(--white-color);}
.banner-slider-wrapper .slider-controls{position: absolute; right: var(--md-space); bottom: var(--md-space); z-index: 99;}
.slider-control.swiper-button-disabled{pointer-events: none; opacity: 50%;}
@media(width < 992px){
  .slider-control{width: 4rem;}
  .banner-slide{aspect-ratio: 2.4/1.5;}
}
@media(width < 768px){
  .slider-control{width: 3.2rem;}
}
.banner-slider-wrapper .swiper-pagination{position: absolute; left: var(--md-space); bottom: 10rem; width: auto; font-size: 1.4rem;}
@media(width < 768px){
  .banner-slider-wrapper .swiper-pagination{ bottom: 8rem;}
}