/* ════════════════════════════════════════════════════════════
   MOTION LAYER — plumbing for js/motion.js (smooth scroll)
   Revert: delete this file's <link> and the motion <script> tags
   in index.html. Nothing else depends on it.
   ════════════════════════════════════════════════════════════ */

html.lenis, html.lenis body { height: auto; }

/* Lenis drives the scroll position itself, so the site's
   html{scroll-behavior:smooth} has to stand down. */
.lenis.lenis-smooth { scroll-behavior: auto !important; }

.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ── Section crossfades ───────────────────────────────────────
   A section marked data-fade-over is pulled up over the one above it and
   dissolved in by js/motion.js, so consecutive sections hand over instead
   of each arriving as the next box in a stack.
   Only applies when the motion layer is live (html.lenis) — without it the
   overlap would just hide the top of the section under the previous one.
   ──────────────────────────────────────────────────────────── */
html.lenis [data-fade-over] {
  position: relative;
  z-index: 2;
  margin-top: -14vh;
}

@media (max-width: 767px) {
  /* Less overlap on phones: a 14vh bite out of a tall narrow section eats
     real content rather than just the padding. */
  html.lenis [data-fade-over] { margin-top: -7vh; }
}

/* ── Brand mark in the header ─────────────────────────────────
   The nav was a text-only wordmark until the real logo existed. The mark
   sits beside the name rather than replacing it: the words carry the SEO
   and the mark carries the recognition.
   (Lives here rather than style.css so it ships without touching the
   minified stylesheet the site actually serves.)
   ──────────────────────────────────────────────────────────── */
.nav__logo {
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
}
.nav__logo-mark {
  width: 42px;
  height: auto;
  flex: 0 0 auto;
  display: block;
}
.nav__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
@media (max-width: 767px) {
  .nav__logo-mark { width: 34px; }
  .nav__logo { gap: 8px; }
}