.hero {
  background:
    linear-gradient(90deg, rgba(3, 8, 20, .98) 0%, rgba(3, 8, 20, .90) 36%, rgba(3, 8, 20, .28) 75%),
    url('display-ecosystem.png') center / cover no-repeat;
}

@media (max-width: 900px) {
  .hero {
    background-position: 62% center;
  }
}

/* Main header: larger wordmark and compact spacing. */
.compact-header{height:58px;gap:16px}
.compact-header .brand{min-width:0;flex-shrink:0}
.compact-header .brand-logo{width:440px;height:55px}
.compact-header nav{gap:16px}
.compact-header + main .hero{min-height:650px;padding-top:112px}
@media(max-width:1100px){.compact-header .brand-logo{width:360px}.compact-header nav{gap:10px;font-size:.78rem}}
@media(max-width:900px){.compact-header{height:54px}.compact-header .brand{max-width:calc(100% - 72px)}.compact-header .brand-logo{width:100%;max-width:440px;height:50px}.compact-header.open nav{top:54px}.compact-header + main .hero{padding-top:108px}}