/* Immersive, code-drawn pixel-art introduction. */
.office-intro { --office-header: 72px; height: calc(100svh - var(--office-header)); position: relative; background: #081d3d; }
.office-stage { position: fixed; z-index: 10; top: var(--office-header); left: 0; width: 100%; height: calc(100svh - var(--office-header)); overflow: hidden; isolation: isolate; pointer-events: none; }
.office-stage canvas { position: absolute; width: 100%; height: 100%; inset: 0; image-rendering: pixelated; }
.office-wordmark { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.office-pixel-wordmark { pointer-events: none; will-change: transform, opacity; }
/* The canvas clears actual pixels, revealing the page as it scrolls underneath. */
@media (max-width: 760px) { .office-intro { --office-header: 64px; } }
@media (prefers-reduced-motion: reduce) {
  .office-stage { position: absolute; top: 0; }
}