.hero-video-panel { display: none; }
body.hero-video-page .hero-orbit { display: none; }
body.hero-video-page .hero-sticky { background: #00224f; }
body.hero-video-page .hero-shade { background: none; pointer-events: none; }
.hero-video-page .hero-video-panel { display: block; position: absolute; inset: 0 0 58px 44%; }
.hero-video-media { position: absolute; inset: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent 7%, #000 42%); }
.hero-video-poster, .hero-background-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 44% center; }
.hero-background-video { opacity: 0; }
.hero-video-panel.is-ready .hero-background-video { opacity: 1; }
.hero-video-page .hero-inner { z-index: 1; pointer-events: none; align-items: flex-end; padding-bottom: 76px; }
.hero-video-page .hero-phase.phase1 h1 { font-size: clamp(32px, 3.4vw, 54px); line-height: 1.15; margin-bottom: 22px; }
.hero-video-page .hero-phase.phase1 .sub { font-size: clamp(18px, 1.25vw, 20px); max-width: 560px; line-height: 1.6; }
.hero-video-page .hero-inner a, .hero-video-page .hero-inner button { pointer-events: auto; }
.hero-video-page .hero-phase.phase1 h1, .hero-video-page .hero-phase.phase1 .sub { text-shadow: none; }
@media (min-width: 901px) and (max-height: 700px) {
  body.hero-video-page .hero-sticky { min-height: 700px; }
}
@media (max-width: 900px) {
  body.hero-video-page .hero-sticky { min-height: 0; }
  .hero-video-page .hero-video-panel { position: relative; inset: auto; order: 2; width: 100%; aspect-ratio: 16 / 10; }
  .hero-video-page .hero-inner { padding-bottom: 20px; }
  .hero-video-media { mask-image: linear-gradient(180deg, transparent, #000 22%); }
  .hero-video-poster, .hero-background-video { object-position: center; }
}
@media (max-width: 480px) {
  .hero-video-page .hero-video-panel { aspect-ratio: 4 / 3; }
  .hero-video-page .hero-inner { padding-bottom: 16px; }
}

/* Full-width office media with a neutral brown surrounding theme. */
body.hero-office-page header#top,
body.hero-office-page .hero-sticky { background: #25231f; }
body.hero-office-page .hero-video-panel { position: absolute; inset: 0; width: auto; aspect-ratio: auto; }
.hero-office-page .hero-video-media { mask-image: none; }
.hero-office-page .hero-video-poster, .hero-office-page .hero-background-video { object-position: center; }
body.hero-office-page nav { transition: none; }
body.hero-office-page nav:not(.solid):not(.menu-open) { background: transparent; box-shadow: none; }
body.hero-office-page nav:not(.solid):not(.menu-open) .nav-demo { background: transparent; color: inherit; border-color: rgba(255,255,255,.65); }
body.hero-office-page nav:not(.solid):not(.menu-open) .nav-demo:hover { border-color: #fff; }
body.hero-office-page nav:not(.solid):not(.menu-open) .nav-demo:focus-visible { outline-color: currentColor; }
.hero-office-page .trustbar { position: relative; z-index: 2; background: rgba(37,35,31,.45); }
@media (max-width: 900px) {
  body.hero-office-page .hero-sticky { min-height: 100svh; }
  .hero-office-page .hero-inner { padding-bottom: 88px; }
  .hero-office-page .hero-video-poster, .hero-office-page .hero-background-video { object-position: 78% center; }
}

/* The evening banner leads directly into the visibility section. */
.statement-connected::after {
  content: ""; position: absolute; inset: auto 0 0; height: 70px;
  background: linear-gradient(180deg, rgba(0,34,79,0), var(--navy));
  pointer-events: none;
}
.statement-connected .statement-inner { z-index: 1; }
.statement-connected + .visibility-section { padding-top: 64px; border-top: 0; }
@media (max-width: 580px) {
  .statement-connected + .visibility-section { padding-top: 44px; }
}

/* Keep the opening copy below centre and the scrolling quote above it. */
@media (min-width: 901px) and (min-height: 701px) {
  .hero-office-page .hero-inner, .hero-office-page .hero-stage { position: static; }
  .hero-office-page .hero-phase.phase1,
  .hero-office-page .hero-phase.phase2 { position: absolute; left: 4.5%; width: 40.5%; }
  .hero-office-page .hero-phase.phase1 { top: 49%; }
  .hero-office-page .hero-phase.phase2 { top: 24%; bottom: auto; }
}
@media (min-width: 1500px) and (min-height: 701px) and (max-height: 800px) {
  .hero-office-page .hero-phase.phase1 h1 { font-size: 48px; }
  .hero-office-page .hero-phase.phase1 .sub { font-size: 18px; }
}

/* Anchor the AI label above the trust bar, including when its height changes. */
.hero-watermark { display: none; }
.hero-video-page .hero-watermark { display: block; right: 12px; bottom: calc(100% + 10px); }