/* Industry landing: hero + secondary stills → looping videos */

.bm-industry-video {
  display: block;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  background: #0e1726;
}

/* Next/Image fill pattern: absolute covering parent */
img.absolute + .bm-industry-video,
.bm-industry-video.absolute {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bm-industry-video.absolute {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .bm-industry-video {
    /* Keep poster frame if browser honors it; still allow muted loop otherwise */
  }
}

/* How Bookme Works — "Step 1" labels (longer than "01") */
.bm-industry-how-step-num {
  letter-spacing: -0.02em;
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .bm-industry-how-step-num {
    font-size: clamp(1.35rem, 4.2vw, 1.85rem) !important;
    line-height: 1.15;
  }
}

/*
 * MOBILE ONLY — hero phone cards (Jill schedule etc.)
 * Mission dashboard float cards keep the original React layout.
 */
@media (max-width: 1023px) {
  .group.relative > .absolute.inset-0.z-20.flex.items-center.justify-center,
  .group.relative > div.absolute.inset-0.z-20.flex {
    justify-content: flex-start !important;
    align-items: flex-end !important;
    padding: 0 0 0 3% !important;
    overflow: visible !important;
  }

  .group.relative {
    overflow: visible !important;
  }

  .group.relative > .absolute.inset-0.z-20.flex img.pointer-events-none,
  .group.relative > .absolute.inset-0.z-20.flex img[src*="phone-"],
  .group.relative > .absolute.inset-0.z-20.flex img[src*="/images/"] {
    /* Override inline style="zoom:0.5" — size with real width */
    zoom: 1 !important;
    width: 34% !important;
    max-width: 128px !important;
    height: auto !important;
    max-height: none !important;
    left: 3% !important;
    right: auto !important;
    top: auto !important;
    bottom: -10% !important;
    margin: 0 !important;
    position: absolute !important;
    transform: none !important;
    object-fit: contain !important;
  }

  .industry-hero-phone-overlay {
    zoom: 0.26 !important;
  }
}