.experience {
  position: relative;
  height: 450dvh;
  min-height: 100dvh;
  background: #000;
  isolation: isolate;
}
.experience:not(.experience--mounted) { height: auto; }

.experience-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #fff;
}

.experience--mounted .experience-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

.experience-stage[hidden] { display: none; }
.experience-visual, .experience-canvas { position: absolute; inset: 0; }
.experience-canvas { opacity: 0; transition: opacity 600ms ease; }
.experience-canvas canvas { display: block; width: 100%; height: 100%; }
.experience--ready .experience-canvas { opacity: 1; }
.experience-poster {
  position: absolute;
  inset: 88px 24px 24px;
  overflow: hidden;
  border-radius: 16px;
  background: #111 url('/assets/hero/poster.jpg') center / cover no-repeat;
  transition: opacity 600ms ease;
}
.experience-poster::after { content: ''; position: absolute; inset: 0; background: #0006; }
.experience--ready .experience-poster { opacity: 0; }

.experience-heading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px;
  color: #fff;
  opacity: 1;
  transition: opacity 250ms ease;
}
.experience-heading h1 {
  width: 100%;
  max-width: 1152px;
  margin: 0;
  font-family: inherit;
  font-size: 64px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.01em;
  text-align: center;
  text-wrap: balance;
}
.experience-heading.is-hidden, .experience-scroll.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease, visibility 0s linear 250ms;
}
.experience-scroll {
  position: absolute;
  right: 72px;
  bottom: 72px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  border: 0;
  padding: 0;
  background: none;
  color: white;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .025em;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 250ms ease;
}
.experience-scroll svg { width: 34px; height: 34px; padding: 8px; border: 1px solid #fff; border-radius: 4px; box-sizing: border-box; }
.experience-scroll:focus-visible { outline: 2px solid #72ce7b; outline-offset: 8px; border-radius: 2px; }

.experience-copy {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 150px));
  justify-content: center;
  gap: 8px;
  padding: 0 24px;
  opacity: 0;
  visibility: hidden;
}
.experience-copy.is-active, .experience-copy.is-exiting { opacity: 1; visibility: visible; pointer-events: none; }
.experience-copy-inner {
  grid-column: 2 / span 3;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 48px 0;
}
.experience-copy--intro .experience-copy-inner { grid-column: 5 / span 4; align-self: end; align-items: center; padding: 96px 0; text-align: center; }
.experience-copy--memory .experience-copy-inner { grid-column: 9 / span 3; }
.experience-copy-text { display: flex; flex-direction: column; gap: 15px; width: 100%; min-width: 0; }
.experience-copy-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 50px; width: 100%; min-width: 0; }
.experience-line-mask { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.experience-line { display: block; }
.experience-word { display: inline-block; }
.experience-eyebrow {
  width: 100%;
  margin: 0 0 24px;
  color: #929292;
  font-family: var(--font-mono, 'Aeonik Mono', monospace);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  text-transform: uppercase;
}
.experience-copy h2 {
  margin: 0;
  color: #fff;
  font-family: inherit;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1875;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.experience-copy h2 em { color: inherit; font-style: normal; }
.experience-copy p:not(.experience-eyebrow) {
  margin: 0;
  color: #c7c7c7;
  font-size: 14px;
  line-height: 1.43;
  text-wrap: balance;
}
.experience-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  justify-content: space-between;
  gap: 6px;
  height: 44px;
  margin-top: 24px;
  padding: 6px 4px 6px 16px;
  border: 0;
  border-radius: 6px;
  background: #193a29;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  pointer-events: auto;
  overflow: hidden;
  transition: background 300ms ease-out;
}
.experience-link-icon { display: block; position: relative; flex-shrink: 0; overflow: hidden; width: 32px; height: 32px; }
.experience-link-icon > span { display: flex; width: 64px; height: 32px; align-items: center; transform: translateX(-50%); transition: transform 600ms ease-out; }
.experience-link-icon svg { box-sizing: content-box; width: 16px; height: 16px; padding: 0 8px; flex-shrink: 0; }
.experience-link:hover { background: #142f22; }
.experience-link:hover .experience-link-icon > span { transform: translateX(0); }
.experience-link:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.experience .partner-logos {
  display: flex;
  position: relative;
  align-items: center;
  align-self: flex-start;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px 24px;
  max-height: 48px;
  padding: 0;
  color: #929292;
}
.experience .partner-logos img { display: block; width: auto; height: auto; max-width: 68px; max-height: 30px; object-fit: contain; }

@media (min-width: 768px) and (max-width: 1449px) {
  .experience-poster { inset: 75px 18px 18px; border-radius: 12px; }
  .experience-heading { align-items: flex-start; padding: 50dvh 64px 64px; }
  .experience-scroll { right: 54px; bottom: 54px; }
  .experience-copy { grid-template-columns: repeat(8, minmax(0, 1fr)); padding-top: 50dvh; }
  .experience-copy-inner,
  .experience-copy--intro .experience-copy-inner,
  .experience-copy--memory .experience-copy-inner {
    grid-column: 2 / span 6;
    align-self: start;
    justify-self: center;
    align-items: center;
    gap: 24px;
    width: auto;
    max-width: none;
    padding: 0;
    text-align: center;
  }
  .experience-copy--intro .experience-copy-inner { padding: 48px 0; }
  .experience-eyebrow { margin: 0; }
  .experience-link { align-self: center; margin-top: 0; }
  .experience .partner-logos { align-self: center; padding-bottom: 48px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .experience-heading { padding-inline: 32px; }
}

@media (max-width: 767px) {
  .experience { height: 232dvh; }
  .experience-poster { inset: 72px 16px 16px; border-radius: 16px; background-position: 62% center; }
  .experience-heading { align-items: flex-start; padding: 45dvh 32px 64px; }
  .experience-heading h1 { font-size: 32px; line-height: 1.05; }
  .experience-scroll { right: 40px; bottom: 40px; }
  .experience-scroll > span { display: none; }
  .experience-copy { display: block; padding: 45dvh 24px 0; }
  .experience-copy-inner,
  .experience-copy--intro .experience-copy-inner,
  .experience-copy--memory .experience-copy-inner {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    text-align: center;
  }
  .experience-copy--intro .experience-copy-inner { padding: 40px 0; }
  .experience-copy-text { margin-bottom: 24px; }
  .experience-copy h2 { font-size: 24px; }
  .experience-eyebrow { margin: 0 0 24px; font-size: 10px; }
  .experience-copy-actions { gap: 40px; }
  .experience-link { margin-top: 0; align-self: center; }
  .experience .partner-logos { align-self: center; padding-bottom: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .experience *, .experience *::before, .experience *::after { transition: none !important; animation: none !important; }
}
/* External SVG images do not inherit the row's currentColor. */
.partner-logos img { filter:brightness(0) invert(57.2549%); }

.experience-eyebrow::before { content:""; display:inline-block; width:8px; height:8px; margin-right:8px; background:currentColor; clip-path:polygon(0 0,100% 0,100% 100%); }
@media(max-width:767px) { .experience-eyebrow::before { display:none; } }

@media(max-width:1449px) { .experience .partner-logos { justify-content:center; } }

.experience-eyebrow { display:flex; align-items:center; justify-content:flex-start; gap:8px; }
.experience-eyebrow::before { margin-right:0; flex:none; }
@media(max-width:1449px) { .experience-eyebrow { justify-content:center; } }