/* A film-title entrance using the existing crew, type and brand palette. */
html.suit-intro-pending { background: var(--ink); }
.suit-intro-pending body { visibility: hidden; }
.suit-intro-active, .suit-intro-active body { overflow: hidden; }
.suit-intro-pending .hero .word-ink,
.suit-intro-pending .hero .eyebrow,
.suit-intro-pending .hero-description,
.suit-intro-pending .hero-copy > .button,
.suit-intro-pending .mascot-control,
.suit-intro-pending .office-item,
.suit-intro-pending .ticker-track { animation-play-state: paused !important; }
.suit-intro {
  --intro-ease: cubic-bezier(.16, 1, .3, 1);
  position: fixed;
  inset: 0;
  z-index: 30;
  visibility: visible;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  transition: transform .6s var(--intro-ease);
}
.suit-intro.is-leaving { transform: translateY(-101%); }
.suit-intro [hidden] { display:none !important; }
.suit-intro-film { position:absolute; inset:0; }
.suit-intro.is-loading * { animation-play-state: paused !important; }
.suit-intro-scene { position: absolute; inset: 0; overflow: hidden; }
.suit-intro-crew {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;
  animation: intro-camera 4s var(--intro-ease) both;
}
.suit-intro-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(16 16 16 / .72), transparent 28%, rgb(16 16 16 / .15) 45%, rgb(16 16 16 / .95) 100%);
}
.suit-intro-door {
  position: absolute;
  inset-block: 0;
  width: 50.1%;
  background: var(--ink);
  animation: intro-door 1.35s .15s var(--intro-ease) both;
}
.suit-intro-door-left { left: 0; --door-exit: -101%; }
.suit-intro-door-right { right: 0; --door-exit: 101%; }
.suit-intro-top {
  position: absolute;
  top: max(24px, env(safe-area-inset-top));
  left: 5%;
  right: 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.suit-intro-logo { font: 900 44px/1 var(--display); letter-spacing: -.02em; }
.suit-intro-logo > span { color: var(--red); }
.suit-intro-skip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid rgb(255 255 255 / .65);
  border-radius: 0;
  background: rgb(16 16 16 / .65);
  color: var(--paper);
  font: 700 14px/1 var(--body);
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.suit-intro-skip > span { font-size: 24px; }
.suit-intro-skip:hover { background: var(--red); border-color: var(--red); }
.suit-intro-skip:active { transform: translateY(1px); }
.suit-intro-skip:focus-visible { outline: 2px solid var(--paper); outline-offset: 5px; }
.suit-intro-title { position: absolute; bottom: 105px; left: 5%; right: 5%; }
.suit-intro-line { display: block; overflow: hidden; padding-block: .05em; margin-block: -.05em; }
.suit-intro-line > span {
  display: block;
  font: 900 clamp(4.2rem, 8vw, 6rem)/.88 var(--display);
  letter-spacing: -.025em;
  animation: intro-type .9s .55s var(--intro-ease) both;
}
.suit-intro-line:nth-child(2) > span { color: var(--red); animation-delay: .74s; }
.suit-intro-title p { margin: 24px 0 0; font-size: 14px; font-weight: 700; letter-spacing: .08em; animation: intro-caption .8s 1.1s both; }
.suit-intro-bottom {
  position: absolute;
  bottom: max(35px, env(safe-area-inset-bottom));
  left: 5%;
  right: 5%;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .045em;
}
.suit-intro-timeline { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: rgb(255 255 255 / .15); }
.suit-intro-timeline span { display: block; height: 100%; background: var(--red); transform-origin: left; animation: intro-progress 3.2s linear both; }
@keyframes intro-door { from { transform: translateX(0); } to { transform: translateX(var(--door-exit)); } }
@keyframes intro-camera { from { transform: scale(1.09); } to { transform: scale(1); } }
@keyframes intro-type { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes intro-caption { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes intro-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 680px) {
  .suit-intro-crew { object-fit: contain; object-position: center 22%; background: var(--ink); }
  .suit-intro-shade { background: linear-gradient(180deg, rgb(16 16 16 / .8), transparent 26%, transparent 38%, rgb(16 16 16 / .85) 48%, var(--ink) 58%); }
  .suit-intro-top { top: max(20px, env(safe-area-inset-top)); left: 6%; right: 6%; }
  .suit-intro-logo { font-size: 36px; }
  .suit-intro-skip { gap: 12px; padding-inline: 12px; }
  .suit-intro-title { bottom: max(112px, 16dvh); left: 6%; right: 6%; }
  .suit-intro-line > span { font-size: clamp(3.5rem, 16vw, 6rem); }
  .suit-intro-title p { max-width: 24ch; line-height: 1.5; letter-spacing: .04em; margin-top: 20px; }
  .suit-intro-bottom { left: 6%; right: 6%; bottom: max(28px, env(safe-area-inset-bottom)); }
  .suit-intro-bottom > span:last-child { display: none; }
}
@media (max-height: 520px) {
  .suit-intro-crew { object-fit: cover; object-position: center 30%; }
  .suit-intro-shade { background: linear-gradient(180deg, rgb(16 16 16 / .65), rgb(16 16 16 / .15) 28%, rgb(16 16 16 / .95) 100%); }
  .suit-intro-title { bottom: 70px; }
  .suit-intro-line > span { font-size: clamp(2.6rem, 14vh, 4rem); }
  .suit-intro-title p { margin-top: 14px; max-width: none; }
  .suit-intro-bottom { bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .suit-intro { transition: none; }
  .suit-intro-film { display: none; }
  .suit-intro-pending body { visibility: visible; }
}

/* The sequence ends here; this choice waits for the visitor without a timer. */
.suit-intro.is-choosing { overflow:auto; overscroll-behavior:contain; background:#101010; color:#f7f5ef; }
.suit-entry-choice { width:min(940px,100%); min-height:100%; margin-inline:auto; padding:clamp(24px,5vh,56px) clamp(24px,5vw,64px); display:flex; flex-direction:column; justify-content:center; }
.suit-entry-choice > .suit-intro-logo { font-size:32px; margin-bottom:clamp(24px,4vh,46px); }
.suit-entry-eyebrow { margin:0 0 14px; font:700 10px/1.4 var(--body,Arial,sans-serif); letter-spacing:.13em; color:#c5c2bd; }
.suit-entry-choice h1 { margin:0; font:900 clamp(3.1rem,7.5vw,5.4rem)/.9 var(--display,Impact,sans-serif); letter-spacing:-.025em; }
.suit-entry-choice h1 span { color:#ed2027; }
.suit-entry-choice h1:focus { outline:none; }
.suit-entry-choice > #suit-entry-description { margin:24px 0 30px; max-width:58ch; font:400 16px/1.6 var(--body,Arial,sans-serif); color:#cfcdc7; }
.suit-entry-options { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.suit-entry-option { display:flex; flex-direction:column; align-items:flex-start; min-width:0; min-height:228px; padding:25px; background:#1c1c1c; border:1px solid #595754; color:#f7f5ef; text-decoration:none; transition:background .18s,border-color .18s; }
.suit-entry-number { font:700 9px/1.4 var(--body,Arial,sans-serif); letter-spacing:.1em; color:#c1beb8; }
.suit-entry-option strong { margin:18px 0 12px; font:800 clamp(1.65rem,3vw,2rem)/1 var(--display,Impact,sans-serif); letter-spacing:-.01em; }
.suit-entry-option > span:not([class]) { font:400 13px/1.6 var(--body,Arial,sans-serif); color:#cfcdc7; max-width:31ch; }
.suit-entry-arrow { display:flex; align-items:center; justify-content:space-between; gap:18px; width:100%; margin-top:auto; padding-top:24px; font:700 12px/1.4 var(--body,Arial,sans-serif); }
.suit-entry-arrow svg { flex:none; }
.suit-entry-holder { background:#290f10; border-color:#9b3539; }
.suit-entry-option:hover { border-color:#f7f5ef; background:#2a2927; }
.suit-entry-holder:hover { background:#411417; border-color:#ed2027; }
.suit-entry-option:focus-visible { outline:3px solid #f7f5ef; outline-offset:4px; }
.suit-entry-note { margin:23px 0 0; font:400 11px/1.5 var(--body,Arial,sans-serif); color:#c1beb8; }
@media(max-width:600px) {
  .suit-entry-choice { justify-content:flex-start; padding:24px max(24px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); }
  .suit-entry-choice > .suit-intro-logo { margin-bottom:27px; }
  .suit-entry-choice h1 { font-size:clamp(2.8rem,13vw,4rem); }
  .suit-entry-choice > #suit-entry-description { margin:19px 0 24px; font-size:14px; }
  .suit-entry-options { grid-template-columns:1fr; gap:12px; }
  .suit-entry-option { padding:21px; min-height:190px; }
  .suit-entry-option strong { margin:14px 0 10px; font-size:1.85rem; }
  .suit-entry-arrow { padding-top:19px; }
}
@media(prefers-reduced-motion:reduce) { .suit-entry-option { transition:none; } }
@media(forced-colors:active) { .suit-entry-option { border-color:ButtonText; } .suit-entry-choice h1 span { color:CanvasText; } }