/* The official home hero uses device-specific artwork; CTA links stay live. */
.hero-official.hero-image {
  width: calc(100% - 48px);
  max-width: 1160px;
  margin: 22px auto 0;
  background: #eaf9ff;
  border-radius: 14px;
  overflow: visible;
}
.hero-official.hero-image::before,
.hero-official.hero-image::after { display: none; }
.hero-artwork, .hero-artwork img { display: block; width: 100%; }
.hero-artwork { position: relative; isolation: isolate; }
.hero-artwork::before {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background: #e4f7ff url('../images/official-hero-background-clean.webp') center / auto 100% no-repeat;
}
.hero-artwork img { height: auto; aspect-ratio: 1660 / 948; }
@media (min-width: 768px) {
  .hero-artwork img {
    mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  }
}
@media (min-width: 1990px) {
  .hero-artwork::before { background-size: 100% 100%; }
}
.hero-image .hero-image-actions {
  max-width: none;
  margin: 0;
  padding: 22px 36px 28px;
  gap: 20px;
  background: linear-gradient(#eaf9ff, #f7fcff);
}
.hero-image-actions > a { flex: 1; min-width: 0; }
.hero-image-actions .call small,
.hero-image-actions .line small { font-size: 14px; }
.hero-image-actions .call b { font-size: clamp(26px, 3vw, 36px); }
.hero-image-actions .line b { font-size: 21px; }
.hero-image-actions a:focus-visible { outline: 3px solid #123d63; outline-offset: 4px; }
@media (max-width: 767px) {
  .hero-official.hero-image { width: 100%; margin-top: 12px; border-radius: 0; background: #eaf9ff; }
  .hero-artwork img { aspect-ratio: 922 / 1706; }
  .hero-artwork::before { display: none; }
  .hero-image .hero-image-actions { padding: 14px 16px 20px; flex-direction: column; gap: 12px; background: linear-gradient(#e5f8ff, #f7fcff); }
  .hero-image-actions .call, .hero-image-actions .line { padding: 14px 10px; }
  .hero-image-actions .call b { font-size: 30px; }
  .hero-image-actions .line b { font-size: 19px; }
}