/* 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.png') center / auto 100% no-repeat;
}
.hero-artwork img { height: auto; aspect-ratio: 1659 / 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: calc(100% - 32px); margin-top: 12px; border-radius: 10px; }
  .hero-artwork img { aspect-ratio: 948 / 1659; }
  .hero-artwork::before {
    background: linear-gradient(#f5fcff 0%, #f5fcff 43%, #e5f8ff 70%, #c6efff 100%);
  }
  .hero-image .hero-image-actions { padding: 14px 14px 20px; flex-direction: column; gap: 12px; }
  .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; }
}