/* ==========================================================================
   Fixed video hero with the content scrolling over it. Loaded only by
   index.html; styles.css is untouched, so this file can be removed whole if
   the hero ever changes again.

   It was written as an experiment that deliberately breaks brand.md §6, which
   bans parallax, on the understanding that §6 would be amended on purpose if
   it survived. It survived: promoted to the home page 2026-08-31.
   ========================================================================== */

/* The media layer sits behind everything. position: fixed — NOT
   background-attachment: fixed, which iOS Safari has never handled. */
.vhero__media {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Dropped as soon as the hero leaves the viewport, so the compositor and
     the video decoder stop working for the rest of the page. */
  transition: opacity 400ms var(--ease);
}
.vhero__media[data-off] { opacity: 0; pointer-events: none; }

.vhero__media video,
.vhero__media img.vhero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Guarantees text contrast over footage we cannot predict. Bottom-weighted so
   the copy sits in the densest part. MUST be re-measured against the real
   video — a bright frame is the worst case, not an average one. */
.vhero__scrim {
  position: absolute;
  inset: 0;
  /* The gradient bottoms out near the forest of the trust strip, so the hero
     resolves into the next section instead of stopping abruptly. */
  background:
    linear-gradient(to bottom,
      rgba(43, 43, 36, 0.55) 0%,
      rgba(43, 43, 36, 0.72) 45%,
      rgba(43, 43, 36, 0.86) 100%);
}

.vhero {
  position: relative;
  z-index: 1;
  /* dvh, not vh: iOS changes viewport height as the toolbar hides, and vh
     would make the layer jump mid-scroll. */
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  /* Generous bottom padding so the copy is not pinned against the trust strip
     below it, which was what made the hero read as cramped. */
  padding-block: var(--sp-16) var(--sp-24);
  color: var(--c-eggshell);
}

/* Headlines over full-bleed media will run the entire viewport width unless
   held. brand.md §4 caps the measure at 60-72 characters; at display sizes
   that lands around 15em. */
.vhero h1 { max-width: 15em; text-wrap: balance; }
.vhero .eyebrow,
.vhero__lede,
.vhero__actions { max-width: var(--measure-max); }
@supports not (min-height: 100dvh) { .vhero { min-height: 100vh; } }

.vhero .eyebrow  { color: var(--c-sage-on-dark); }
.vhero h1        { color: var(--c-eggshell); }
.vhero__lede {
  font-size: var(--fs-body-lg);
  color: rgba(248, 246, 240, 0.92);
  margin-block: var(--sp-6) var(--sp-8);
}
.vhero__actions { display: flex; flex-direction: column; gap: var(--sp-3); }
@media (min-width: 40em) { .vhero__actions { flex-direction: row; } }

.vhero .btn--primary { background: var(--c-eggshell); color: var(--c-forest); }
.vhero .btn--primary:hover { background: var(--c-white); }
.vhero .btn--ghost { border-color: rgba(248, 246, 240, 0.55); color: var(--c-eggshell); }
.vhero .btn--ghost:hover { background: rgba(248, 246, 240, 0.1); }

/* Everything after the hero is opaque and rides over the fixed layer.
   The media layer must be excluded explicitly: it is also a child of <main>,
   and this selector outranks `.vhero__media` on specificity — without the
   exclusion it would be forced back to position: relative and painted over. */
main > *:not(.vhero):not(.vhero__media),
.footer,
.actionbar { position: relative; z-index: 1; }

/* Only the sections that are transparent by default need an opaque ground.
   The dark and paper sections are excluded rather than re-declared: this
   selector carries two classes' worth of specificity from the :not() chain,
   so any attempt to override it afterwards with a plain `.trust` loses. */
main > *:not(.vhero):not(.vhero__media):not(.trust):not(.finder):not(.contact):not(.about) {
  background: var(--bg-page);
}

/* No pause control: the clip plays once and stops, so it never becomes
   "auto-moving content for more than five seconds" under WCAG 2.2.2.
   If looping is ever reinstated, the control must come back with it. */

/* No autoplay, no motion: the poster frame carries the hero instead. */
@media (prefers-reduced-motion: reduce) {
  .vhero__media video { display: none; }
  .vhero__media img.vhero__poster { display: block; }
}