/* Official logo, not a reconstructed wordmark. */
html { scrollbar-gutter: stable; }

/* Opening the full-screen navigation must not alter the layout viewport. */
body.menu-open { overflow-y: hidden; }
body.menu-open .site-header { right: 0; width: auto !important; }
.site-header, .site-menu { transform: translateZ(0); }

.prelude {
  display: grid;
  place-content: center;
  gap: 18px;
  padding: 36px;
  background: linear-gradient(128deg, rgba(69,105,188,.09), transparent 34%), linear-gradient(310deg, rgba(238,120,35,.12), transparent 42%), #f7f5f0;
  color: #151820;
}
.prelude::before {
  content: '';
  position: absolute;
  width: min(46vw, 660px);
  height: 1px;
  top: calc(50% - 85px);
  left: 50%;
  background: linear-gradient(90deg, transparent, rgba(21,24,32,.18), transparent);
  transform: translateX(-50%);
}
.prelude-brand { position: relative; z-index: 1; }
.prelude-brand img { display: block; width: clamp(200px, 23vw, 390px); height: auto; }
.prelude > p { margin: 0; color: rgba(21,24,32,.55); font: 600 clamp(8px,.62vw,10px)/1.3 var(--mono); letter-spacing: .13em; text-align: center; text-transform: uppercase; }
.prelude-progress { display: grid; grid-template-columns: minmax(120px, 290px) auto; align-items: center; justify-content: center; gap: 12px; }
.prelude-line { width: 100%; background: rgba(21,24,32,.13); }
.prelude-line i { background: linear-gradient(90deg, var(--blue), var(--red) 50%, var(--orange)); }
.prelude span { color: var(--orange); font: 600 11px/1 var(--mono); }

/* Full colour mark on the bright hero; the same asset becomes monochrome only on dark utility states. */
body:not(.menu-open) .site-header:not(.is-scrolled) .brand img { filter: none; }
body.menu-open .site-header .brand img,
.site-header.is-scrolled .brand img { filter: brightness(0) invert(1) !important; }

@media (max-width: 900px) {
  .prelude { gap: 14px; padding: 24px; }
  .prelude::before { top: calc(50% - 67px); width: 76vw; }
  .prelude-brand img { width: min(74vw, 310px); }
  .prelude-progress { grid-template-columns: minmax(105px, 45vw) auto; }
}
@media (prefers-reduced-motion: reduce) { .prelude { display: none; } }