/* Restrained integration layer. Section layouts and palettes come from the original site. */
[hidden] { display: none !important; }
html { margin: 0; scroll-behavior: smooth; }
body { margin: 0; }
body[data-gate="locked"] { height: 100svh; overflow: hidden !important; background: #020304; }
#cinematic-shell { position: relative; z-index: 2; height: 100svh; min-height: 560px; background: #020304; }
#cinematic-frame { display: block; width: 100%; height: 100%; border: 0; }
#intro-controls {
  position: absolute; top: clamp(28px, 3.7vw, 58px); right: clamp(36px, 5vw, 92px);
  z-index: 40; display: flex; align-items: center; gap: 16px;
}
#intro-skip {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0; border: 0; background: transparent; color: #d3d7d8;
  font: 500 12px/20px 'IBM Plex Mono', monospace; min-height: 44px; min-width: 74px;
  cursor: pointer; letter-spacing: .04em;
}
#intro-skip span { font-size: 19px; line-height: 20px; }
#intro-skip:focus-visible, .explore-link:focus-visible { outline: 2px solid #ffbe55; outline-offset: 4px; }
#site-content { position: relative; z-index: 3; }
#site-content main { background: transparent; }
#site-chrome { position: relative; z-index: 100; }
#site-chrome .site-header { transition: background-color 320ms ease, color 320ms ease, box-shadow 320ms ease; }
#site-chrome .site-header.is-scrolled { background: var(--paper); }
#cinematic-shell > #top { position: absolute; inset: 0 auto auto 0; }
body[data-page="home"] #site-chrome .nav-shell { transition: min-height 320ms ease; }
body[data-page="home"].over-cinematic #site-chrome .site-header {
  background: linear-gradient(#020304e8, #02030490 65%, transparent);
  color: #edf1f2; box-shadow: none; border-color: transparent; backdrop-filter: none;
  transition: none;
}
body[data-page="home"].over-cinematic #site-chrome .nav-shell {
  width: 100%; padding-inline: clamp(36px, 5vw, 92px);
  min-height: calc(2 * clamp(28px, 3.7vw, 58px) + 34px);
  transition: none;
}
body[data-page="home"].over-cinematic #site-chrome .brand { font-size: 25px; gap: 13px; }
body[data-page="home"].over-cinematic #site-chrome .brand span { font: 25px 'Anta', sans-serif; }
body[data-page="home"].over-cinematic #site-chrome .brand img { width: 34px; height: 34px; }
body[data-page="home"].over-cinematic #site-chrome .desktop-nav a { color: #d4dce1; }
body[data-page="home"].over-cinematic #site-chrome .nav-cta { background: transparent; border-color: #687078; color: #fff; }
body[data-page="home"].over-cinematic #site-chrome .menu-toggle { color: #fff; }
body[data-page="home"].over-cinematic #site-chrome .menu-toggle span { background: currentColor; }
.explore-link {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); color: #c4ccd1;
  font: 10px 'IBM Plex Mono', monospace; letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none; display: flex; align-items: center; gap: 14px; min-height: 44px;
}
body[data-gate="open"] #site-chrome :is(.desktop-nav, .nav-cta, .menu-toggle) { animation: menu-enter 300ms ease both; }
@keyframes menu-enter { from { opacity: 0; } to { opacity: 1; } }
/* Light surfaces completely cover the single fixed field, dark sections remain windows. */
body[data-page="home"] .staging-solutions { border-top: 1px solid #dfe5e8; }
.preview-contact-note { font-size: .8rem; color: var(--slate, #5b6b80); }
.load-error { padding: 80px 24px; background: #f7fafb; color: #0f172a; }
body[data-page="system"] #site-chrome { position: static; }
body[data-page="system"] #site-content { z-index: auto; }
@media (max-width: 960px) {
  #cinematic-shell { min-height: 100svh; }
  #intro-controls { top: max(11px, env(safe-area-inset-top)); right: 16px; gap: 12px; }
  .explore-link { display: none; }
  body[data-page="home"].over-cinematic #site-chrome .nav-shell { min-height: 70px; padding-inline: 20px 16px; }
  body[data-page="home"].over-cinematic #site-chrome .brand { font-size: 22px; gap: 11px; }
  body[data-page="home"].over-cinematic #site-chrome .brand span { font-size: 22px; }
  body[data-page="home"].over-cinematic #site-chrome .brand img { width: 30px; height: 30px; }
  body[data-page="home"].over-cinematic #site-chrome .mobile-nav { color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  body[data-page="home"] .staging-window-section { background: #0a1014; }
}

/* Replay belongs to the cinematic and fades away as soon as the page leaves the top. */
#intro-replay {
  position: absolute; z-index: 30; left: clamp(24px, 3vw, 46px); bottom: max(14px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px;
  border: 0; background: transparent; color: #c4ccd1; cursor: pointer;
  font: 10px 'IBM Plex Mono', monospace; letter-spacing: .06em;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}
#intro-replay[data-visible="true"] { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
#intro-replay:hover { color: #ffbe55; }
#intro-replay:focus-visible { outline: 2px solid #ffbe55; outline-offset: 2px; }
#intro-replay > [aria-hidden] { font-size: 18px; }
@media (max-width: 960px) {
  #intro-replay { left: 16px; bottom: max(6px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  #intro-replay { transition: none !important; }
}