/* Mobile landing hero (max-width: 768px only)
   Locked — desktop/tablet use styles.css + building.jpg <img> only.
   Tune only the variables in the "Locked tuning" block below. */

@media (max-width: 768px) {
  .hero {
    /* ── Locked tuning (home hero mobile) ──
       height 94svh/580px · zoom 163% · focal 74% / 95% */
    --hero-min-height: max(calc(100vh - var(--header-spacer-full)), 580px);
    --hero-min-height: max(calc(94svh - var(--header-spacer-full)), 580px);
    --hero-mobile-shadow-rise: clamp(220px, 56vw, 320px);
    --hero-mobile-bg-height: 163%;
    --hero-mobile-image-x: 74%;
    --hero-mobile-image-y: 95%;

    --hero-panel-slant: 0%;
    --hero-panel-content-pad: clamp(18px, 4.5vw, 28px);
    --hero-content-pad-y: 20px;
    --hero-title-size: clamp(1.85rem, 9.5vw, 2.45rem);
    --hero-eyebrow-size: 0.62rem;
    --hero-stack-gap: 12px;

    display: block;
    min-height: var(--hero-min-height);
    background-color: #040506;
  }

  /* In-flow paint box — Safari can skip first paint when all children are absolute */
  .hero::before {
    content: "";
    display: block;
    min-height: var(--hero-min-height);
    width: 100%;
    visibility: hidden;
    pointer-events: none;
  }

  .hero .hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background-color: #040506;
    background-image: url("../assets/shop/g-and-s-machine-shop-exterior-springdale-ar-hero-2000.webp");
    background-repeat: no-repeat;
    background-position: var(--hero-mobile-image-x) var(--hero-mobile-image-y);
    background-size: auto var(--hero-mobile-bg-height);
  }

  .hero-media::after {
    display: none;
  }

  /* Keep <img> for preload/LCP; photo is drawn via .hero-media background */
  .hero .hero-media .hero-image {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
  }

  .hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.04) 0%,
      rgba(0, 0, 0, 0.02) 28%,
      transparent 55%
    );
  }

  .hero-shell {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    width: 100%;
    margin-top: 0;
    pointer-events: none;
  }

  .hero-panel {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    max-height: none;
    margin-right: 0;
    clip-path: none;
    color: #ffffff;
    pointer-events: auto;
    background: transparent;
    background-image: none;
    box-shadow: none;
    isolation: isolate;
  }

  .hero-panel::before {
    content: "";
    display: block;
    position: absolute;
    top: calc(-1 * var(--hero-mobile-shadow-rise));
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(4, 6, 10, 0) 0%,
      rgba(4, 6, 10, 0) 15%,
      rgba(4, 6, 10, 0.08) 24%,
      rgba(4, 6, 10, 0.22) 36%,
      rgba(4, 6, 10, 0.48) 48%,
      rgba(4, 6, 10, 0.72) 60%,
      rgba(4, 6, 10, 0.88) 72%,
      rgba(4, 6, 10, 0.96) 82%,
      #040506 90%,
      #040506 100%
    );
  }

  .hero-panel::after {
    display: none;
  }

  .hero-panel-top-rule {
    display: none;
  }

  .hero-panel-body {
    margin-left: 0;
    padding: var(--hero-content-pad-y) var(--hero-panel-content-pad)
      clamp(20px, 5vw, 28px) var(--hero-panel-content-pad);
  }

  .hero-panel-stack {
    gap: 12px;
  }

  .hero-panel-accent {
    box-shadow: none;
  }

  .hero-eyebrow {
    letter-spacing: 0.12em;
  }

  .hero-title {
    text-shadow: none;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
    width: 100%;
  }

  .hero-actions .hero-button,
  .hero-actions .hero-button-secondary {
    --hero-btn-slant: 5.5%;
    width: 100%;
    min-width: 0;
    padding: 11px 8px;
  }

  .hero-actions .hero-button-inner,
  .hero-actions .hero-button-secondary .hero-button-inner {
    gap: 6px;
    font-size: clamp(0.58rem, 2.65vw, 0.66rem);
    letter-spacing: 0.055em;
    line-height: 1.15;
    white-space: nowrap;
  }

  .hero-actions .hero-button-secondary .hero-button-inner {
    letter-spacing: 0.065em;
    text-transform: none;
  }

  .hero-actions .hero-button img,
  .hero-actions .hero-button-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  .hero-trust-strip-main,
  .hero-trust-strip-cta {
    padding: 12px 14px;
  }

  .hero-trust-strip-score {
    font-size: 1.45rem;
  }

  .hero-location {
    padding-top: 6px;
    border-top: none;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.82);
  }
}

@media (max-width: 480px) {
  .hero {
    /* Small phones: zoom in slightly + nudge focal point right */
    --hero-mobile-bg-height: 168%;
    --hero-mobile-image-x: 64%;
  }
}