/* ==========================================================================
   CONTACT BANNER — the opening as a banner, not a curtain.

   The owner's note on the old opening: the photograph was buried under the
   cinematic scrim and the words arrived a full screen down, behind a ledger
   drawn in the same shape as every other scene. Here the image IS the banner,
   the words sit at the top of the page before anyone scrolls, and the four
   prompts collapse into one quiet line above a single way in.
   ========================================================================== */

body.inner-page .record-scene--banner[data-motion-profile="cinematic"] {
  min-height: min(86svh, 720px);
  display: block;
  padding: clamp(6.75rem, 15vh, 9.5rem) var(--case-gutter) clamp(2.75rem, 6vh, 4.5rem);
}

/* Dark holds the top where the words are; the lower half lets the photograph out. */
body.inner-page .record-scene--banner[data-motion-profile="cinematic"] > .record-scene__plate::after {
  background:
    linear-gradient(180deg, rgba(2, 7, 11, .9) 0%, rgba(2, 7, 11, .55) 34%, rgba(2, 7, 11, .1) 66%, rgba(2, 7, 11, .38) 100%),
    linear-gradient(90deg, rgba(2, 7, 11, .5) 0%, rgba(2, 7, 11, .06) 58%);
}

html[dir="rtl"] body.inner-page .record-scene--banner[data-motion-profile="cinematic"] > .record-scene__plate::after {
  background:
    linear-gradient(180deg, rgba(2, 7, 11, .9) 0%, rgba(2, 7, 11, .55) 34%, rgba(2, 7, 11, .1) 66%, rgba(2, 7, 11, .38) 100%),
    linear-gradient(270deg, rgba(2, 7, 11, .5) 0%, rgba(2, 7, 11, .06) 58%);
}

body.inner-page .record-scene--banner[data-motion-profile="cinematic"] .record-scene__content,
body.inner-page .record-scene--banner[data-motion-profile="cinematic"]:nth-child(even) .record-scene__content,
body.inner-page.record-static-ready .record-scene--banner[data-motion-profile="cinematic"] .record-scene__content {
  display: block;
  width: min(1520px, 100%);
  margin-inline: auto;
}

/* The four prompts as one line, not another four-row ledger. */
body.inner-page .record-scene--banner .record-scene__prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  max-width: none;
  margin-top: clamp(20px, 3.4vh, 30px);
}
body.inner-page .record-scene--banner .record-scene__prompts span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: Manrope, system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244, 239, 228, .76);
}
[dir="rtl"] body.inner-page .record-scene--banner .record-scene__prompts span { letter-spacing: 0; }
body.inner-page .record-scene--banner .record-scene__prompts span::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--record-amber, #f49f2e);
}

body.inner-page .record-scene--banner .banner-go {
  display: inline-block;
  margin-top: clamp(24px, 4.5vh, 36px);
  padding: 13px 28px;
  min-height: 50px;
  border-radius: 999px;
  background: var(--record-amber, #f49f2e);
  color: #1a1006;
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 22px;
  text-decoration: none;
  touch-action: manipulation;
  transition: background .25s ease, transform .25s cubic-bezier(.22, .9, .3, 1);
}
body.inner-page .record-scene--banner .banner-go:hover { background: #ffb85c; transform: translateY(-2px); }
body.inner-page .record-scene--banner .banner-go:focus-visible { outline: 2px solid #f4efe4; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  body.inner-page .record-scene--banner .banner-go { transition: none; }
}