/* Responsive, art-directed homepage hero. The two supplied compositions have their own aspect ratios. */
.hero.hero-art {
  display: block !important;
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 0 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 145, 31, .28);
  border-radius: 22px;
  background: #030b18;
  box-shadow: 0 18px 48px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.04);
  grid-template-columns: none !important;
}
.hero.hero-art::before,
.hero.hero-art::after { display: none !important; content: none !important; }
.hero-art-picture { display: block !important; position: relative !important; inset: auto !important; z-index: 0 !important; width: 100%; height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9; line-height: 0; }
.hero-art-picture img { display: block !important; position: relative !important; inset: auto !important; z-index: 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-width: 100%; object-fit: contain !important; border-radius: 0; }
.hero-art-hotspots { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hero-hotspot { position: absolute; display: block; pointer-events: auto; border-radius: 14px; background: transparent; outline: 0; -webkit-tap-highlight-color: transparent; }
.hero-hotspot:focus-visible { outline: 3px solid #fff; outline-offset: 2px; background: rgba(255,255,255,.08); box-shadow: 0 0 0 5px rgba(255,139,25,.75); }
.hero-art-accessible { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
/* Desktop artwork: 1672 × 941 composition. */
@media (min-width: 768px) {
  .hero-hotspot-call { left: 58.8%; top: 60.7%; width: 16.0%; height: 8.4%; }
  .hero-hotspot-whatsapp { left: 75.3%; top: 60.7%; width: 12.0%; height: 8.4%; }
  .hero-hotspot-services { left: 87.8%; top: 60.7%; width: 9.6%; height: 8.4%; }
  .hero-hotspot-appointment { left: 58.9%; top: 71.6%; width: 37.8%; height: 9.0%; }
  .hero-hotspot-tire { left: 4.1%; top: 70.5%; width: 11.7%; height: 20.0%; }
  .hero-hotspot-battery { left: 16.6%; top: 70.5%; width: 11.6%; height: 20.0%; }
  .hero-hotspot-electric { left: 29.0%; top: 70.5%; width: 11.7%; height: 20.0%; }
  .hero-hotspot-diagnostic { left: 41.5%; top: 70.5%; width: 11.7%; height: 20.0%; }
}
/* Mobile artwork: 941 × 1672 portrait composition. No cropping; all copy and service tiles remain visible. */
@media (max-width: 767px) {
  .hero.hero-art { border-radius: 16px; margin-bottom: 14px; }
  .hero-art-picture { aspect-ratio: 900 / 1599; }
  .hero-art-picture img { width: 100% !important; height: auto !important; aspect-ratio: 900 / 1599; object-fit: contain !important; }
  .hero-hotspot { border-radius: 10px; }
  .hero-hotspot-call { left: 3.6%; top: 64.8%; width: 36.9%; height: 5.9%; }
  .hero-hotspot-whatsapp { left: 41.6%; top: 64.8%; width: 29.0%; height: 5.9%; }
  .hero-hotspot-services { left: 72.2%; top: 64.8%; width: 23.0%; height: 5.9%; }
  .hero-hotspot-appointment { left: 3.7%; top: 72.1%; width: 91.8%; height: 6.0%; }
  .hero-hotspot-tire { left: 4.0%; top: 80.6%; width: 21.4%; height: 12.1%; }
  .hero-hotspot-battery { left: 27.2%; top: 80.6%; width: 21.4%; height: 12.1%; }
  .hero-hotspot-electric { left: 49.6%; top: 80.6%; width: 21.4%; height: 12.1%; }
  .hero-hotspot-diagnostic { left: 72.9%; top: 80.6%; width: 22.0%; height: 12.1%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-hotspot { transition: none !important; }
}