/**
 * Homepage hero — one <img>, deterministic mobile landscape frame.
 * Source ratio 2048×1365 (served webp matches same ratio).
 */

/* —— Mobile / narrow (authoritative) —— */
@media (max-width: 767px) {
  .homepage-hero,
  #home.homepage-hero.hero {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    align-items: stretch !important;
    padding-top: var(--header-total, 96px) !important;
  }

  .homepage-hero__media,
  #home.homepage-hero .homepage-hero__media {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 2048 / 1365 !important;
    overflow: hidden !important;
    background: #0e0e0e !important;
  }

  .homepage-hero__media img,
  #home.homepage-hero .homepage-hero__media img {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    animation: none !important;
  }

  .homepage-hero__overlay,
  #home.homepage-hero .homepage-hero__overlay {
    display: none !important;
  }

  .homepage-hero__content,
  #home.homepage-hero .homepage-hero__content {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 32px 20px 44px !important;
    background: #11100e !important;
  }

  .homepage-hero__content::before {
    content: none !important;
    display: none !important;
  }

  #home.homepage-hero .hero-stats {
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    gap: 22px !important;
    margin: 0 !important;
    padding: 14px 16px 22px !important;
    background: #11100e !important;
    border: 0 !important;
    border-top: 1px solid rgba(201, 168, 76, 0.12) !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
    animation: none !important;
  }

  /* Kill legacy absolute/cover hero rules on mobile */
  #home.homepage-hero .hero-bg,
  #home.hero .hero-bg {
    position: relative !important;
    inset: auto !important;
  }
}

/* —— Tablet+ desktop cinematic (same single img) —— */
@media (min-width: 768px) {
  .homepage-hero__media img {
    image-rendering: auto;
  }
  .homepage-hero.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .homepage-hero__media {
    position: absolute;
    inset: -2px;
    overflow: hidden;
  }

  .homepage-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    display: block;
  }

  .homepage-hero__overlay {
    display: block;
  }
}

/* —— Header: keep Request a Quote inside viewport —— */
@media (max-width: 767px) {
  .site-header {
    overflow-x: clip;
  }

  .site-header > nav {
    padding: 0 10px !important;
    gap: 8px !important;
    max-width: 100vw;
    box-sizing: border-box;
  }

  .site-header .nav-logo {
    flex-shrink: 1;
    min-width: 0;
  }

  .site-header .nav-logo img {
    height: 48px !important;
    max-width: 120px;
    width: auto !important;
  }

  .site-header .nav-right {
    gap: 6px !important;
    flex-shrink: 0;
    max-width: calc(100vw - 140px);
  }

  .site-header .nav-btn {
    font-size: 0.46rem !important;
    letter-spacing: 0.06em !important;
    padding: 9px 10px !important;
    white-space: nowrap !important;
    max-width: none !important;
  }

  .site-header .nav-call {
    padding: 0 4px !important;
  }

  .site-header .nav-call span {
    font-size: 0.46rem !important;
  }

  .site-header .nav-hamburger {
    padding: 6px !important;
  }
}