/* One box model everywhere, so every page's 1280px container and its side padding line up with the footer */
*, *::before, *::after { box-sizing: border-box; }

/* Mistral Venture Partners: shared motion rules.
   Everything that moves lives inside the no-preference query, so a visitor who asks for reduced
   motion gets the site exactly as it was. site.js adds html.mvp-motion only when it is about to
   run, so nothing is hidden before the script is ready (no flash, and no blank page if it fails). */

@media (prefers-reduced-motion: no-preference) {

  /* 1. Scroll reveal */
  html.mvp-motion [data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
  }
  html.mvp-motion [data-reveal].is-in { opacity: 1; transform: none; }
  html.mvp-motion [data-reveal] [data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
  }
  html.mvp-motion [data-reveal].is-in [data-reveal-stagger] > * { opacity: 1; transform: none; }

  /* 3. List hover: text to azure, arrow slides 4px. The row itself never moves. */
  [data-arrow] { display: inline-block; transition: transform .18s ease; }
  a:hover [data-arrow], a:focus-visible [data-arrow] { transform: translateX(4px); }
  a[data-pb], a[data-pb] [data-pb-title], [data-pb-title] { transition: color .18s ease; }

  /* 4. Scroll progress hairline */
  #mvp-progress { transition: transform .08s linear; }

  /* 5. Logo crossfade */
  #mvp-logo-cell img { transition: opacity .22s ease, transform .22s ease; }

  /* 6. Hero video fade. The navy header background stays behind it. */
  html.mvp-motion #hero-video { opacity: 0; transition: opacity .6s ease; }
  html.mvp-motion #hero-video.is-playing { opacity: 1; }
}

/* Non-motion rules (apply always) */
a[data-pb]:hover, a[data-pb]:hover [data-pb-title], a[data-pb]:focus-visible [data-pb-title],
a[data-pb]:hover [data-arrow] { color: #3A7BC8 !important; }
#mvp-progress {
  position: absolute; top: 0; left: 0; height: 2px; width: 100%;
  background: #3A7BC8; transform-origin: left; transform: scaleX(0); pointer-events: none; z-index: 1;
}
.mvp-ico { width: 16px; height: 16px; flex: 0 0 16px; vertical-align: -0.15em; margin-right: 10px; color: inherit; }

/* Footer fleet band: desktop art above 860px, mobile art below */
@media (max-width: 860px) {
  [data-fleet-art="desktop"] { display: none !important; }
  [data-fleet-art="mobile"]  { display: block !important; }
}

/* Footer: the whole panel drops to a darker navy while the email field is active or holds text */
footer.is-active { background: #010230 !important; }
footer form[data-mq="signup"] input[type="email"]:focus { border-color: rgba(255,255,255,0.7) !important; outline: none; }
@media (prefers-reduced-motion: no-preference) {
  footer { transition: background-color .25s ease; }
}

/* Guard rails: nothing may widen the page sideways, and anything past the footer reads navy */
html { background: #02034A; }
html, body { overflow-x: clip; }
main a, article a { overflow-wrap: anywhere; }