/* ==========================================================================
   HERO LIVE STRIP  (styles_hero_strip.css)  — index.html first slide only

   Layout: grid = [clear band with the running image strip] + [content].
   Constraint from the founder: the slide must NOT get taller. So the band and
   the content are budgeted against the hero's existing height
   (min-height: clamp(700px, 100vh, 1040px)) and the content is compressed to
   fit; short viewports compress further rather than growing the slide.
   ========================================================================== */

.hero.hero--live-strip {
  --strip-h: clamp(200px, 30vh, 300px);
  display: grid;
  grid-template-rows: var(--strip-h) minmax(0, 1fr);
  align-items: center;
  padding-left: 0;
  padding-right: 0;
  padding-top: 96px;              /* still clears the 60px fixed header */
}

/* ---------- the running strip (top band, full bleed) ---------- */
.hero--live-strip .hero-strip {
  grid-row: 1;
  align-self: center;
  width: 100%;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.hero--live-strip .hero-strip-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: vforge-strip-run 64s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

.hero--live-strip .strip-img {
  height: calc(var(--strip-h) - var(--space-3));
  width: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  border: 1px solid rgba(244, 239, 228, 0.12);
  margin-right: var(--space-3);   /* margin (not gap) keeps the loop seam exact */
  flex: 0 0 auto;
  filter: saturate(0.92) contrast(1.02);
}

@keyframes vforge-strip-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.hero--live-strip .hero-strip:hover .hero-strip-track,
.hero--live-strip .hero-strip:focus-within .hero-strip-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .hero--live-strip .hero-strip-track { animation: none; }
  .hero--live-strip .hero-strip { overflow-x: auto; }
}

/* ---------- content compressed into the lower area ---------- */
.hero--live-strip .hero-inner { grid-row: 2; align-self: center; }

/* The Security & Trust card is centred on the brand mark, and on ~981–1150px
   desktops that mark sits right where the (820px) copy column ends — the
   headline's last line ran BEHIND the card (measured 51px at 1024, 54px at 981).
   Hold a constant gutter to the card's left edge instead: the copy keeps its full
   820px wherever it fits and only narrows in that band.
   card.left = 100vw - 2*max(0,(100vw - container)/2) - 308px  ->  minus 28px gutter. */
@media (min-width: 981px) {
  .hero--live-strip .hero-inner {
    max-width: min(820px, calc(100vw - 2 * max(0px, (100vw - var(--container)) / 2) - 336px));
  }
}
.hero--live-strip .eyebrow { margin-bottom: 0.5rem; }
.hero--live-strip h1 { margin-bottom: 0.6rem; }
.hero--live-strip .lede { margin-bottom: 1rem; }
.hero--live-strip .hero-ctas { margin-bottom: 1.2rem; }
.hero--live-strip .signal-wrap { margin-top: 0; }
.hero--live-strip .signal-wrap svg { height: 74px; }

/* ---------- brand stage: bottom-anchored, sized to clear the band ---------- */
.hero--live-strip .brand-stage {
  top: auto;
  bottom: var(--space-3);
  transform: none;
  --stage-w: clamp(300px, 42vh, 520px);
}

/* ---------- shorter viewports: compress instead of growing the slide ------- */
@media (min-width: 981px) and (max-height: 900px) {
  .hero--live-strip h1 { font-size: clamp(1.7rem, 3.2vw, 2.45rem); }
  .hero--live-strip .signal-wrap svg { height: 62px; }
}
@media (min-width: 981px) and (max-height: 880px) {
  /* shorter viewports: shrink the mark so its trust card still clears the band */
  .hero--live-strip .brand-stage { --stage-w: clamp(250px, 37vh, 380px); }
}
@media (min-width: 981px) and (max-height: 780px) {
  .hero--live-strip { --strip-h: clamp(150px, 20vh, 200px); }
  .hero--live-strip .brand-stage { --stage-w: clamp(230px, 32vh, 320px); }
  .hero--live-strip h1 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
  .hero--live-strip .lede { font-size: 1rem; margin-bottom: 0.8rem; }
  .hero--live-strip .signal-wrap svg { height: 54px; }
}

/* ---------- tablet ---------- */
@media (max-width: 980px) {
  .hero.hero--live-strip { --strip-h: clamp(160px, 22vh, 230px); }
}

/* ---------- phones ---------- */
@media (max-width: 640px) {
  .hero.hero--live-strip {
    --strip-h: min(22vh, 158px);
    grid-template-rows: var(--strip-h) auto;
    min-height: auto;
    padding-top: 0;
  }
  .hero--live-strip .hero-inner { padding-top: var(--space-3); }
  .hero--live-strip .strip-img {
    height: calc(var(--strip-h) - 1.5rem);
    border-radius: 9px;
    margin-right: 0.75rem;
  }
  .hero--live-strip .eyebrow { margin-bottom: 0.4rem; }
  .hero--live-strip h1 { margin-bottom: 0.6rem; }
  .hero--live-strip .lede { margin-bottom: 0.9rem; }
  .hero--live-strip .hero-ctas { margin-bottom: 0.9rem; }
  .hero--live-strip .signal-wrap svg { height: 66px; }
}