/* The opening is one quiet composition. Text remains in the document, above WebGL. */
.home-page #hero.hallway-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(660px, 78svh, 860px);
  padding: 110px max(var(--gutter), calc((100% - var(--site-width)) / 2));
  background: #101417;
  color: #f8fafb;
}
.hallway-poster, .hallway-hero > shader-renderer, .hallway-wash {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.hallway-poster { object-fit: cover; }
.hallway-hero > shader-renderer { opacity: 0; transition: opacity 900ms ease; }
.hallway-live > shader-renderer[data-state="ready"] { opacity: 1; }
.hallway-wash { display: none; }
.hallway-content { position: relative; width: min(100%, 780px); z-index: 2; }
.home-page .hallway-hero h1 {
  font-family: var(--font-display);
  color: #f8fafb;
  font-size: clamp(42px, 4.35vw, 72px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.045em;
  margin: 0;
}
.hallway-hero h1 span { display: block; }
.home-page .hallway-work {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; margin-top: 30px; padding: 12px 22px;
  color: #fff; background: transparent; border: 0; border-bottom: 1px solid #fff;
  border-radius: 0; box-shadow: none; text-decoration: none; font-size: 14px; font-weight: 500;
  transition: color 200ms ease;
}
.hallway-work::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: #fff;
  transform: scaleY(0); transform-origin: bottom; transition: transform 200ms ease;
}
@media (hover: hover) {
  .hallway-work:hover { color: #000; }
  .hallway-work:hover::before { transform: scaleY(1); }
}
.hallway-work:focus-visible, .hallway-work:active { color: #000; }
.hallway-work:focus-visible::before, .hallway-work:active::before { transform: scaleY(1); }
.hallway-work:focus-visible { outline: 2px solid #ffbd71; outline-offset: 5px; }
@media (prefers-reduced-motion: reduce) {
  .hallway-work, .hallway-work::before { transition: none; }
}
/* The empty background button sits below selectable text and the scroll link. */
.hallway-control {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer;
  touch-action: pan-y pinch-zoom;
}
.hallway-control[hidden] { display: none; }
.hallway-control:focus-visible { outline: 2px solid #ffbd71; outline-offset: -6px; }
.hallway-scroll {
  position: absolute; z-index: 3; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: grid; place-items: center; width: 48px; height: 48px; color: #d8dfe3;
}
.hallway-scroll:focus-visible { outline: 2px solid #ffbd71; outline-offset: 3px; }
.home-page #capabilities .section-header h2 { font-size: clamp(30px, 3vw, 44px); font-weight: 400; letter-spacing: -.035em; }
.home-page #capabilities .section-header { margin-bottom: 36px; }
.home-page #capabilities .section-label { font-size: 10px; color: #59646e; letter-spacing: .2em; }
.home-page #capabilities .cap-card { border: 0; border-left: 1px solid #d8dde3; padding: 0 26px; border-radius: 0; }
.home-page #capabilities .cap-card:first-child { border-left: 0; padding-left: 0; }
.home-page #capabilities .cap-card::before { display: none; }
.home-page #capabilities .cap-card:hover { transform: none; box-shadow: none; }
.home-page #capabilities h3 { font-size: 19px; font-weight: 500; }
.home-page #capabilities .cap-card p { font-size: 14px; }
.home-page .home-delivery-note { border-top: 1px solid #e5e8eb; margin: 34px 0 0; padding-top: 24px; font-size: 14px; }
.home-page .reveal { opacity: 1; transform: none; }
@media (max-width: 700px) {
  .home-page #hero.hallway-hero { min-height: max(650px, calc(100svh - 72px)); padding: 96px 24px; }
  .home-page .hallway-hero h1 { font-size: clamp(35px, 8.8vw, 42px); line-height: 1.14; letter-spacing: -.035em; }
  .hallway-hero h1 span { display: inline; }
  .hallway-wash { display: none; }
  .home-page #capabilities .cap-card, .home-page #capabilities .cap-card:first-child { border-left: 0; border-top: 1px solid #d8dde3; padding: 22px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hallway-hero > shader-renderer { transition: none; }
  html { scroll-behavior: auto; }
}