/* "How it works" heading — float and settle.

   The heading hovers over the hero's van scene while the section climbs to
   meet it, then hands back to normal flow in exactly the same place. There is
   no backing band: the heading is plain type, so nothing reads as a box over
   the scene. Over the dark scene it switches to light type (.is-over-dark),
   and back to ink once the section's own background is behind it.

   The position is worked out every frame in heading-float.js from the real
   layout, so nothing snaps. --a fades the heading in once the hero has
   cleared, so it never appears over the hero copy. */

.float-head.is-floating {
  position: fixed;
  left: 0; right: 0;
  top: calc(var(--nav-h) + var(--quote-bar-h) + 24px);   /* exactly where it lands, so the hand-back is seamless */
  z-index: 5;
  width: 100%;
  padding-inline: var(--gutter);
  box-sizing: border-box;
  background: none;
  pointer-events: none;
  opacity: var(--a, 1);
  will-change: opacity;
}

/* the floating heading keeps the same box as .container at every width */
.float-head.is-floating > .section__head {
  max-width: 620px; margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
  /* no float at all: the heading simply sits in its section, a correct end state */
  .float-head.is-floating {
    position: static; opacity: 1; padding-inline: 0; width: auto;
  }
}