.hero-stage { position: relative; isolation: isolate; overflow: clip; background: #f9fcff; }
.hero-art { z-index: -1; pointer-events: none; background: none; }
.hero-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #f9fcff75, #f9fcff2b 43%, transparent 70%),
    url("/assets/hero-globe.webp") right bottom / cover no-repeat;
}
.hero-art::after {
  height: clamp(138px, 13vw, 205px);
  background: url("/assets/hero-curves.svg") center top / 100% 100% no-repeat;
}
.hero-grid { min-height: clamp(565px, 74svh, 755px); padding-block: 145px 105px; }
.hero-main { max-width: min(740px, 67%); }
.hero .eyebrow { color: #86622d; }
.hero h1 { color: #102c4d; font-size: clamp(48px, 6.1vw, 90px); }
.hero h1 em { color: #075ba8; }
html:not([lang="zh-CN"]) .hero h1 { font-size: clamp(42px, 4.65vw, 72px); }
.hero-copy { color: #3e556b; }
.hero .button { border-radius: 4px; }
.hero .primary { color: white; background: #07579f; }
.hero .primary:hover { background: #06457d; }
.hero .ghost { color: #173a5e; background: #ffffffe0; border-color: #829fb9; }
.hero .ghost:hover { background: #eaf4ff; border-color: #07579f; }
.hero .ghost svg { color: #07579f; }

@media (max-width: 730px) {
  .hero-grid { min-height: 570px; align-items: start; padding-block: 101px clamp(150px, 35vw, 210px); }
  .hero-main { max-width: 100%; }
  .hero-art::before {
    background: url("/assets/hero-mountains.webp") center bottom / max(100%, 760px) auto no-repeat;
    mask-image: linear-gradient(to top, black 118px, transparent 305px);
  }
  .hero-art::after { height: 108px; background-size: 160% 100%; }
  .hero h1 { font-size: clamp(44px, 9.5vw, 61px); }
  html:not([lang="zh-CN"]) .hero h1 { font-size: clamp(34px, 8.2vw, 54px); }
}