.vang-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: max(680px, 100svh);
  overflow: hidden;
  /* The transformed photo must not become Chrome's scroll-restoration anchor. */
  overflow-anchor: none;
  border: 0;
  background: #12232a;
  color: #fff;
  padding: 130px max(6vw, 24px) 120px;
}
.vang-hero .vang-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 70% center;
  transform-origin: 70% 45%;
  animation: none;
  z-index: -2;
}
.vang-hero.vang-hero--ready .vang-hero__image { animation: vang-hero-pan 12s linear infinite alternate; }
@keyframes vang-hero-pan {
  from { transform: scale(1.025); }
  to { transform: scale(1.12) translate(-.8%, -.5%); }
}
.vang-hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(9,23,31,.86), rgba(9,23,31,.54) 40%, rgba(9,23,31,.04) 78%), linear-gradient(0deg, rgba(9,23,31,.66), transparent 30%, transparent 75%, rgba(9,23,31,.25));
  pointer-events: none;
}
.vang-hero__inner { width: min(100%, 1280px); margin-inline: auto; }
.vang-hero .vang-hero__eyebrow { color: #d9d2ff; font-size: .72rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 30px; }
.vang-hero .vang-hero__title { color: #fff; font-size: clamp(3.2rem, 6.6vw, 6.25rem); line-height: 1.01; letter-spacing: -.055em; font-weight: 650; max-width: 11ch; margin: 0 0 30px; text-wrap: balance; }
.vang-hero .vang-hero__description { font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.65; color: #f0f1ef; max-width: 36ch; margin: 0 0 34px; }
.vang-hero .vang-hero__cta { display: inline-flex; align-items: center; gap: 42px; min-height: 54px; padding: 14px 24px; border-radius: 4px; color: #14202c; background: #fff; text-decoration: none; font-size: .92rem; font-weight: 650; transition: background .2s, transform .2s; }
.vang-hero__cta:hover { background: #e8e3ff; transform: translateY(-2px); }
.vang-hero__cta span { font-size: 1.35rem; }
.vang-hero__bottom { position: absolute; bottom: 26px; left: max(6vw, 24px); right: max(6vw, 24px); }
.vang-hero__location { font-size: .69rem; letter-spacing: .065em; color: #f0f1ef; }
.vang-hero__location span { margin-inline: 12px; opacity: .65; }
.vang-hero.vang-hero--paused .vang-hero__image { animation-play-state: paused; }
.vang-hero :focus-visible { outline: 3px solid #dfd7ff; outline-offset: 5px; }
.vang-hero-after { max-width: 1180px; margin: 0 auto; padding: 70px 24px; scroll-margin-top: 85px; }
.vang-hero-home .vang-head:not(.vang-is-stuck) .vang-brand,
/* The switcher lives in the bar (.vang-nav__lang), outside .vang-menu, so the
   `> li > a` selector never reaches it. Over the transparent homepage bar its
   anchors and its pill outline must both go white. */
.vang-hero-home .vang-head:not(.vang-is-stuck) .vang-menu > li > a,
.vang-hero-home .vang-head:not(.vang-is-stuck) .vang-nav__lang .babelpress-switcher__link,
.vang-hero-home .vang-head:not(.vang-is-stuck) .vang-nav__lang .babelpress-switcher__list,
.vang-hero-home .vang-head:not(.vang-is-stuck) .vang-nav-toggle { color: #fff; }
/* ...except the current pill, which keeps its indigo fill and white label. */
.vang-hero-home .vang-head:not(.vang-is-stuck) .vang-nav__lang .babelpress-switcher__link--current { color: #fff; }
.vang-hero-home .vang-head:not(.vang-is-stuck) .vang-brand b { color: #d9d2ff; }
.vang-hero-home .vang-head:not(.vang-is-stuck) .vang-nav__cta .vang-btn { color: #fff; background: #ffffff18; border: 1px solid #ffffff80; }
/* Drawer open on the homepage: the panel is opaque, so its links go dark. The CTA is
   excluded - it is a solid indigo button and this rule was painting navy on indigo. */
.vang-hero-home .vang-menu.vang-is-open > li:not(.vang-menu__cta) > a { color: #061b31 !important; }
@media (max-width: 760px) {
  .vang-hero { min-height: max(740px, 100svh); align-items: flex-end; padding: 300px 24px 126px; }
  .vang-hero .vang-hero__image { object-position: 78% center; }
  .vang-hero__shade { background: linear-gradient(0deg, rgba(9,23,31,.98), rgba(9,23,31,.85) 28%, rgba(9,23,31,.42) 65%, rgba(9,23,31,.18)); }
  .vang-hero .vang-hero__title { font-size: clamp(2.8rem, 11.5vw, 4rem); max-width: 12ch; margin-bottom: 20px; }
  .vang-hero .vang-hero__eyebrow { font-size: .62rem; letter-spacing: .12em; margin-bottom: 18px; }
  .vang-hero .vang-hero__description { font-size: 1rem; max-width: 32ch; margin-bottom: 24px; }
  .vang-hero__bottom { bottom: 20px; left: 24px; right: 24px; }
  .vang-hero__location { max-width: 18ch; font-size: .62rem; }
  .vang-hero__tagline { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vang-hero .vang-hero__image,
  .vang-hero.vang-hero--ready .vang-hero__image { animation: none; transform: none; }
  .vang-hero .vang-hero__cta { transition: none; }
  html:has(.vang-hero) { scroll-behavior: auto; }
}