.home-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 75svh, 800px);
  overflow: hidden;
  color: #fff;
  background: #061014;
}
.home-hero-media, .home-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.home-hero-media { z-index: -2; object-fit: cover; object-position: center; }
.home-hero-video { opacity: 0; }
.hero-video-ready .home-hero-video { opacity: 1; }
.hero-video-toggle {
  position: absolute;
  inset-inline-end: var(--gutter);
  bottom: 24px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 50%;
  color: #fff;
  background: rgb(6 16 20 / 70%);
}
.hero-video-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.hero-video-toggle .hero-play-icon { display: none; }
.hero-video-toggle[data-paused="true"] .hero-play-icon { display: block; }
.hero-video-toggle[data-paused="true"] .hero-pause-icon { display: none; }
.hero-video-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .hero-video-toggle:hover { background: rgb(40 59 65 / 90%); }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero-video, .hero-video-toggle { display: none; }
}
.home-hero-shade {
  z-index: -1;
  background: linear-gradient(90deg, rgb(3 9 12 / 85%) 0%, rgb(3 9 12 / 62%) 42%, rgb(3 9 12 / 8%) 100%);
}
.home-hero-content { padding-block: 88px 100px; }
.home-hero h1 {
  max-width: 850px;
  font-size: clamp(2.75rem, 4.5vw, 4.75rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.home-hero p {
  max-width: 650px;
  margin-top: 32px;
  color: #d9e2e5;
  font-size: 1.125rem;
  line-height: 1.65;
}
.home-hero .button {
  width: fit-content;
  min-height: 48px;
  margin-top: 36px;
  padding: 12px 24px;
  border: 1px solid #fff;
  border-radius: 5px;
  background: #fff;
  color: #101b20;
  font-weight: 600;
}
.home-hero .button:hover { background: #e5edef; border-color: #e5edef; }
.home-hero .button:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
html[dir="rtl"] .home-hero-shade { transform: scaleX(-1); }
html[dir="rtl"] .home-hero-media { transform: scaleX(-1); }
@media (max-width: 700px) {
  .home-hero { min-height: 580px; }
  .home-hero-content { padding-block: 72px 80px; }
  .home-hero h1 { font-size: clamp(2.25rem, 8.5vw, 3.5rem); max-width: 540px; }
  .home-hero p { margin-top: 24px; font-size: 1rem; }
  .home-hero .button { margin-top: 28px; }
  .home-hero-shade { background: linear-gradient(180deg, rgb(3 9 12 / 72%), rgb(3 9 12 / 50%)); }
  .home-hero-media { object-position: 65% center; }
}

/* The animated scene fills the complete hero, beneath the copy. */
.home-hero-regional { background: #06091b; min-height: clamp(560px, 70svh, 760px); }
.home-hero-regional .home-hero-media {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
}
.home-hero-regional .home-hero-shade {
  background: linear-gradient(90deg, rgb(3 5 18 / 70%), rgb(3 5 18 / 40%) 45%, rgb(3 5 18 / 4%) 100%);
}
.home-hero-regional h1 {
  max-width: 49%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(2.5rem, 3.65vw, 4rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.08;
  text-wrap: balance;
}
.home-hero-regional p { max-width: 40%; font-size: 1.05rem; line-height: 1.65; margin-top: 28px; }
html[dir="rtl"] .home-hero-regional .home-hero-media { transform: none; }
@media (max-width: 700px) {
  .home-hero-regional { align-items: flex-start; min-height: 680px; }
  .home-hero-regional .home-hero-content { padding-block: 48px 340px; }
  .home-hero-regional h1 { max-width: 100%; font-size: clamp(2.25rem, 8vw, 3.25rem); }
  .home-hero-regional p { max-width: 100%; font-size: 1rem; margin-top: 20px; }
  .home-hero-regional .home-hero-media { object-position: 60% center; }
  .home-hero-regional .home-hero-shade {
    transform: none;
    background: linear-gradient(180deg, rgb(3 5 18 / 78%), rgb(3 5 18 / 62%) 36%, rgb(3 5 18 / 8%) 78%);
  }
}