/* White globe hero. Existing type, actions and container rhythm remain intact. */
.hero { position: relative; isolation: isolate; overflow: hidden; overflow: clip; background: #fff; }
.hero-inner { position: relative; z-index: 2; display: flex; min-height: 660px; flex-direction: column; align-items: stretch; justify-content: center; gap: 0; padding-top: 68px; padding-bottom: 28px; }
.hero-copy { position: relative; max-width: 600px; padding-bottom: 70px; }
.hero-world { position: absolute; z-index: 0; width: min(104vw, 1400px); aspect-ratio: 1; top: -74px; right: calc(50% - clamp(960px, 86vw, 1110px)); pointer-events: none; }
.hero-globe { width: 100%; height: 100%; position: relative; pointer-events: none; }
.hero-globe-canvas { position: relative; width: 100%; height: 100%; display: block; opacity: 0; pointer-events: none; transition: opacity 1.2s ease; }
.hero-globe-canvas[data-ready="true"] { opacity: .54; }
.hero-globe-fallback { position: absolute; inset: 10%; border-radius: 50%; overflow: hidden; opacity: .6; transition: opacity 1.2s ease; background: radial-gradient(circle at 32% 26%, #fff 0%, #eef1f4 30%, #d7dde3 60%, #c5ccd3 82%); box-shadow: inset 1px 1px 1px #fff9; }
.hero-globe:has([data-ready="true"]) .hero-globe-fallback { opacity: 0; }
.hero-globe-fallback span { position: absolute; inset: 0 28%; border: 1px solid rgba(52,75,107,.14); border-radius: 50%; rotate: -25deg; }
.hero-globe-fallback span:nth-child(2) { inset: 0 10%; }
.hero-globe-fallback span:nth-child(3) { inset: 30% -5%; }
.hero-scrim { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg, #fff 0%, #fffffff5 33%, #ffffff80 52%, #ffffff00 72%), linear-gradient(0deg, #fff 0%, #fff 8%, #ffffff00 28%); }
.capability-map { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; margin-top: auto; overflow-x: auto; padding: 8px 5px; margin-left: -5px; scrollbar-width: thin; scrollbar-color: #c5ccd3 #fff; }
.capability-map a { display: inline-flex; align-items: baseline; gap: 9px; flex-shrink: 0; min-height: 44px; padding-block: 14px; font-size: 10px; font-weight: 600; line-height: 1.5; letter-spacing: .65px; text-transform: uppercase; color: var(--ink); }
.capability-map a:hover { color: var(--brand); }
.capability-number { font-size: 10px; color: var(--brand); font-variant-numeric: tabular-nums; }
.hero-bottom { position: relative; z-index: 2; }
@media (max-width: 1023px) {
  .hero-inner { min-height: 850px; padding-top: 64px; }
  .hero-copy { max-width: 620px; padding-bottom: 270px; }
  .hero-world { width: 900px; right: -320px; top: 280px; }
  .hero-scrim { background: linear-gradient(180deg, #fff 0%, #ffffffe8 26%, #ffffff20 57%, #ffffff00 72%, #fff 88%), linear-gradient(90deg, #ffffffc0 0%, #ffffff00 70%); }
  /* Wrap instead of scrolling: a sideways scroller hid three of five links on touch screens. */
  .capability-map { flex-wrap: wrap; justify-content: flex-start; overflow: visible; column-gap: 28px; row-gap: 0; margin-left: 0; padding-inline: 0; }
}
@media (max-width: 639px) {
  .hero-inner { min-height: 0; padding-top: 45px; padding-bottom: 18px; }
  .hero-copy { max-width: 100%; padding-bottom: 120px; }
  .hero-world { width: clamp(600px, 164vw, 760px); right: calc(50% - 415px); top: auto; bottom: -230px; }
  /* The capability list sits over the globe here; the side fade keeps its labels crisp. */
  .hero-scrim { background: linear-gradient(180deg, #fff 0%, #fff 40%, #ffffffa0 52%, #ffffff40 70%, #ffffffb0 88%, #fff 97%), linear-gradient(90deg, #ffffffb0 0%, #ffffff60 45%, #ffffff00 75%); }
  .capability-map { flex-direction: column; align-items: flex-start; }
}