/* VM Scroll Scrub — full-bleed editorial hero */
.vm-scroll-scrub {
  --vmss-scrub-vh: 170vh;
  --vmss-object-position: 42% 40%;
  position: relative;
  height: var(--vmss-scrub-vh);
  margin: 0;
  padding: 0;
  background: #0b1c26;
  z-index: 1;
}

.vm-scroll-scrub__pin {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #0b1c26;
  z-index: 2;
}
.vm-scroll-scrub.is-pinned .vm-scroll-scrub__pin {
  /* Class-based fixed pin (beats theme absolute); JS keeps inline fallback */
  position: fixed !important;
  top: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  z-index: 30 !important;
}
.vm-scroll-scrub.is-after .vm-scroll-scrub__pin {
  position: absolute !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100vh !important;
}

.vm-scroll-scrub__stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.vm-scroll-scrub__poster,
.vm-scroll-scrub__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--vmss-object-position);
  pointer-events: none;
  user-select: none;
}

.vm-scroll-scrub__canvas {
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 1;
}

.vm-scroll-scrub.is-ready .vm-scroll-scrub__canvas {
  opacity: 1;
}

.vm-scroll-scrub.is-ready .vm-scroll-scrub__poster {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.vm-scroll-scrub.is-static .vm-scroll-scrub__canvas {
  display: none !important;
}

.vm-scroll-scrub.is-static .vm-scroll-scrub__poster {
  opacity: 1 !important;
}

.vm-scroll-scrub__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Sky band — restrained editorial placement */
  padding: clamp(64px, 11vh, 104px) 24px 24px;
  pointer-events: none;
  text-align: center;
  box-sizing: border-box;
}

/* Match home .vm-type-bridge (Point of Sale): black body + cyan accent */
.vm-scroll-scrub__overlay :is(h1, h2, .vm-type-hero) {
  color: #000;
  text-shadow: none;
  -webkit-text-stroke: 0;
  filter: none;
  font-family: aktiv-grotesk-extended, sans-serif;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  font-weight: 400;
  text-transform: uppercase;
  /* POS bridge uses 18em; hero phrase needs ~22em for the same 2-line editorial wrap */
  max-width: min(22em, 92vw);
  margin: 0 auto;
}

.vm-scroll-scrub__overlay :is(h1, h2, .vm-type-hero) span,
.vm-scroll-scrub__overlay :is(h1, h2, .vm-type-hero) strong {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-weight: inherit;
  text-shadow: none;
  -webkit-text-stroke: 0;
  filter: none;
}

/* Keep brand cyan on accent phrase (beats black !important theme overrides) */
.vm-scroll-scrub__overlay :is(h1, h2, .vm-type-hero) span[style*="color"],
.vm-scroll-scrub__overlay :is(h1, h2, .vm-type-hero) strong span[style*="color"] {
  color: #06a4ea;
}

.vm-scroll-scrub__overlay a {
  pointer-events: auto;
}

@media (max-width: 849px) {
  /* Mobile keeps existing Flatsome mobile hero; hide desk scrub */
  .vm-scroll-scrub.hide-for-medium,
  .section .vm-scroll-scrub.hide-for-medium {
    display: none !important;
  }
}