#stage{background:#142634}
#stage:before,#stage:after{display:none}
.hero-video-background{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#142634;opacity:0;transition:opacity .5s;pointer-events:none}
.hero-video-background video,.hero-video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero-video-background video{opacity:0;transition:opacity .85s ease-in-out}
.hero-video-background video.visible{opacity:1}
.hero-video-background:after{content:'';position:absolute;inset:0;z-index:3;background:linear-gradient(90deg,rgba(5,14,24,.97) 0%,rgba(5,14,24,.90) 22%,rgba(5,14,24,.76) 40%,rgba(5,14,24,.38) 58%,rgba(5,14,24,.10) 78%,rgba(5,14,24,.04) 100%),linear-gradient(180deg,rgba(7,18,29,.4),transparent 30%,rgba(7,18,29,.16));pointer-events:none}
.video-hero #stage #film-panel,.video-hero #stage #film-title{color:#f4f9ff}
.video-hero #stage #film-description,.video-hero #stage #film-details{color:#d9e9f4}
.video-hero #site-header.on-hero:not(.on-dark-section){background:linear-gradient(180deg,#0b1c2c80,transparent)}
.video-hero #site-header.on-hero .brand,.video-hero #site-header.on-hero .header-nav a{color:#f4f9ff}
.video-hero #site-header.on-hero .header-nav a:hover{color:#9ed6ff}
@media(max-width:700px){.hero-video-background:after{background:linear-gradient(180deg,#0a192b50,#0a192b26 35%,#0a192bde 65%,#0a192bef)}.hero-video-background video,.hero-video-poster{object-position:60% center}}
@media(prefers-reduced-motion:reduce){.hero-video-background video{transition-duration:.12s}}
body.video-hero #site-header.on-hero .header-nav a{color:#f4f9ff!important}
body.video-hero #site-header.on-hero .header-nav a:hover{color:#9ed6ff!important}
.video-hero #film-panel{z-index:3}
.video-hero #stage #film-details .film-benefit strong{color:#d9e9f4}
/* Borderless navigation blends into each section instead of forming a bar. */
body #site-header,body #site-header:not(.on-hero):not(.on-dark-section),body #site-header.on-dark-section,body.video-hero #site-header.on-hero:not(.on-dark-section){background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
/* Keep the header mark and wordmark proportionate as one smaller unit. */
#site-header .brand.logo-original{scale:.82;transform-origin:left center}

#site-header .workspace-button{position:relative;left:12px}
@media(max-width:620px){#site-header .workspace-button{left:4px}}

#site-header .brand.logo-original span{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:400;letter-spacing:-.01em}