/* Full-bleed hero media. The poster paints first; the video loads during idle time. */
.qs-hero{width:100vw;height:min(calc(100dvh - 122px),56.25vw);min-height:0;margin-left:calc(50% - 50vw)}
.qs-hero-inner{height:100%;min-height:0}
.qs-hero .qs-hero-media{background-image:url('/style/video/home-hero-poster-20260914.webp');background-position:center;filter:none}
.qs-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .5s ease}
.qs-hero-video.is-ready{opacity:1}
.qs-hero .qs-hero-media:after{background:linear-gradient(90deg,rgba(5,26,49,.7),rgba(5,26,49,.32) 48%,rgba(5,26,49,.1)),linear-gradient(0deg,rgba(5,26,49,.2),transparent 50%)}
@media(max-width:900px){.qs-hero{width:100%;height:560px;min-height:560px;margin-left:0}.qs-hero .qs-hero-media:after{background:rgba(5,26,49,.55)}}
@media(prefers-reduced-motion:reduce){.qs-hero-video{transition:none}}
@media(max-width:900px){.qs-hero-video{opacity:0!important}.qs-hero-video-toggle{display:none!important}}
.qs-hero-video-toggle{position:absolute;right:24px;bottom:112px;z-index:3;max-width:calc(100% - 48px);padding:7px 11px;border:1px solid rgba(255,255,255,.45);border-radius:4px;background:rgba(6,28,45,.62);color:#fff;font:12px/1.4 "Microsoft YaHei",Arial,sans-serif;cursor:pointer}
.qs-hero-video-toggle[hidden]{display:none!important}
.qs-hero-video-toggle:focus-visible{outline:2px solid #fff;outline-offset:3px}
.qs-hero-video-toggle:disabled{cursor:default;opacity:.8}

/* The homepage hero owns the first viewport. Keep its video edge to edge and
   let the fixed header sit over it until the user begins scrolling. */
body.qs-home-page{padding-top:0!important}
body.qs-home-page .qs-hero{height:100svh!important;min-height:100svh!important;max-height:none!important;margin-top:0!important}
body.qs-home-page .qs-hero-inner{height:100%!important;min-height:100%!important}
body.qs-home-page .qs-hero-stats{margin-bottom:0!important;transform:none!important}
@supports (height:100dvh){body.qs-home-page .qs-hero{height:100dvh!important;min-height:100dvh!important}}
body.qs-home-page .top:not(.is-scrolled){background:transparent!important;border-bottom-color:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.qs-home-page .top:not(.is-scrolled) .NavCeshi>li>a,
body.qs-home-page .top:not(.is-scrolled) .NavCeshi>li.navcurrent>a,
body.qs-home-page .top:not(.is-scrolled) .NavCeshi>li:hover>a{color:#fff!important;text-shadow:0 1px 5px rgba(0,20,45,.5)}
body.qs-home-page .top:not(.is-scrolled) .NavCeshi>li>a:after{background:rgba(255,255,255,.92)!important}

/* Swap the mark with the header contrast: the light logo sits over the hero,
   while the dark mark is used for glass, hover and menu states. */
.top .logo .qs-logo-image{display:none!important}
.top .logo .qs-logo-standard{display:block!important}
body.qs-home-page .top:not(.is-scrolled):not(.is-nav-hover):not(.is-menu-open) .logo .qs-logo-standard{display:none!important}
body.qs-home-page .top:not(.is-scrolled):not(.is-nav-hover):not(.is-menu-open) .logo .qs-logo-on-dark{display:block!important}

/* Desktop hover opens the same glass treatment as a scrolled header so the
   full-width mega menu reads as one continuous surface. */
body.qs-home-page .top.is-nav-hover{background:rgba(255,255,255,.78)!important;border-bottom:1px solid rgba(210,226,239,.72)!important;box-shadow:0 8px 24px rgba(37,78,115,.08)!important;backdrop-filter:saturate(150%) blur(16px)!important;-webkit-backdrop-filter:saturate(150%) blur(16px)!important}
body.qs-home-page .top.is-nav-hover .NavCeshi>li>a{color:#34444d!important;text-shadow:none!important}
body.qs-home-page .top.is-nav-hover .NavCeshi>li>a:after{background:var(--qs-brand)!important}

/* Keep hovered and focused labels readable while the first-screen header is
   over the hero.  This comes after the white first-screen rule above so it
   also wins when a mega-menu item is the current navigation item. */
body.qs-home-page .top:not(.is-scrolled) .NavCeshi>li.qs-nav-has-menu:hover>a,
body.qs-home-page .top:not(.is-scrolled) .NavCeshi>li.qs-nav-has-menu:focus-within>a,
body.qs-home-page .top.is-nav-hover .NavCeshi>li.qs-nav-has-menu:hover>a,
body.qs-home-page .top.is-nav-hover .NavCeshi>li.qs-nav-has-menu.navcurrent>a{color:#000!important;text-shadow:none!important}

/* Plain links do not open a mega menu, so keep their first-screen contrast
   when they are hovered or focused.  Once a dropdown opens, the glass header
   intentionally applies the dark navigation treatment to the full nav. */
body.qs-home-page .top:not(.is-scrolled):not(.is-nav-hover) .NavCeshi>li:not(.qs-nav-has-menu):hover>a,
body.qs-home-page .top:not(.is-scrolled):not(.is-nav-hover) .NavCeshi>li:not(.qs-nav-has-menu):focus-within>a{color:#fff!important;text-shadow:0 1px 5px rgba(0,20,45,.5)!important}

/* Refined hero typography: a stronger architectural hierarchy over the moving image. */
.qs-hero-copy{max-width:760px;position:relative;text-shadow:0 2px 18px rgba(0,12,28,.28)}
.qs-hero .qs-eyebrow{display:inline-flex;align-items:center;gap:12px;letter-spacing:3px;color:#d9edff}
.qs-hero .qs-eyebrow:before{content:"";width:42px;height:2px;background:#45a9ff;box-shadow:0 0 12px rgba(69,169,255,.6)}
.qs-hero h1{display:flex;flex-direction:column;gap:5px;margin:24px 0 22px;font-size:clamp(56px,5vw,100px);line-height:1.06;font-weight:500;letter-spacing:-.035em;text-wrap:balance}
.qs-hero h1 .qs-title-line{font-size:.72em;line-height:1.15;font-weight:500;letter-spacing:.08em;color:rgba(255,255,255,.96)}
.qs-hero h1 strong{display:inline-block;font-size:1em;font-weight:800;line-height:1.04;letter-spacing:-.045em;color:#fff}
.qs-hero p{margin:0 0 28px;padding-left:15px;border-left:2px solid rgba(69,169,255,.9);font-size:18px;line-height:1.5;letter-spacing:4px;color:rgba(239,248,255,.9)}
.qs-hero-points{gap:10px;margin-bottom:30px}
.qs-hero-points span{padding:9px 16px;border:1px solid rgba(255,255,255,.48);border-radius:4px;background:rgba(8,40,72,.28);color:#fff;letter-spacing:1px;box-shadow:0 5px 16px rgba(0,12,28,.12)}
.qs-primary{min-height:50px;padding:13px 22px;border-radius:4px;box-shadow:0 10px 24px rgba(0,93,190,.28);letter-spacing:1px;text-shadow:none}
.qs-primary b{font-size:22px;line-height:1;transition:transform .25s ease}
.qs-primary:hover b{transform:translateX(4px)}
@media(max-width:900px){.qs-hero-copy{max-width:100%}.qs-hero h1{font-size:clamp(38px,8vw,58px)}.qs-hero p{font-size:15px;letter-spacing:2px}.qs-hero-points{flex-wrap:wrap}.qs-primary{min-height:46px}}