/* ════════════ INQUIRY — marquee + eclipse (v3) ════════════ */
.inq {
  min-height: 100svh;
  background: var(--c-primary);
  display: flex; flex-direction: column;
  padding-top: var(--nav-h);
  overflow: hidden;              /* marquee never causes a page scrollbar */
}

/* ── Marquee headline ──
   The wave is a FIXED sine <path> in screen space; the headline is a single
   SVG <text><textPath> that scrolls along it by animating startOffset (SMIL —
   browser-driven, no per-frame JS). textPath rotates each glyph tangent to the
   curve natively, so letters climb and tilt over crests that themselves never
   move. Built by js/marquee.js; the static line below is the fallback.      */
.marquee {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;                        /* keeps the over-wide path off the page */
  width: 100%;
}
.marquee__static {
  width: 100%;
  text-align: center;
  padding-inline: var(--pad-x);
}
.marquee__item {
  white-space: nowrap;
  font-size: clamp(56px, 9vw, 150px);
  line-height: 1;
  color: var(--c-white);
}
.marquee__item--ital { font-family: var(--font-display); font-style: italic; font-weight: 300; }
.marquee__item--sans { font-family: var(--font-ui); font-weight: 500; text-transform: uppercase; letter-spacing: -0.01em; }

/* SVG wave */
.marquee__svg {
  display: block;
  overflow: visible;                       /* crest glyphs must not clip */
  width: 100%;
  opacity: 0;
  transition: opacity .6s var(--ease-expo); /* fades in once fonts are ready */
}
.marquee__svg.is-ready { opacity: 1; }
.marquee__text { will-change: transform; }
.marquee__text .mq-i { font-family: var(--font-display); font-style: italic; font-weight: 300; }
.marquee__text .mq-s { font-family: var(--font-ui); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  /* JS never builds the SVG under reduced motion — the static line is it */
  .marquee__svg { display: none; }
}

/* ── Two-tone eclipse banner ── */
.eclipse {
  --dome-h: clamp(30px, 7vw, 110px);       /* shallow, wide arc */
  position: relative;
  height: clamp(340px, 48vh, 580px);
}
.eclipse__field {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 55%;
  background: var(--c-ink);                /* exact footer background token */
}
.eclipse__field::before {
  content: "";
  position: absolute; left: 50%; bottom: 100%;
  transform: translateX(-50%);
  width: 150vw; height: var(--dome-h);
  background: var(--c-ink);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
}

/* ── Submit Brief pill — centered on the curve apex ── */
.pill-btn {
  position: absolute; left: 50%;
  bottom: calc(55% + var(--dome-h));
  transform: translate(-50%, 50%);
  z-index: 2;
  background: var(--c-white);
  color: var(--c-ink);
  border-radius: 999px;
  padding: 1.15em 2.6em;
  font-family: var(--font-ui); font-weight: 500;
  font-size: clamp(12px, 1.2vw, 15px);
  letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer;
  transition: opacity .3s;
}
.pill-btn:hover { opacity: 0.85; }