html.portrait-page-root,
.portrait-page-root body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
}

.portrait-page-root body {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(9, 10, 11);
}

.portrait-page-root .page {
  height: 100svh;
  min-height: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
}

.portrait-page-root .portrait-backdrop {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: auto;
  height: 100vh;
  height: 100lvh;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(9, 10, 11);
  pointer-events: none;
}

.portrait-page-root .portrait-backdrop-image {
  position: absolute;
  top: -4%;
  right: -4%;
  bottom: -4%;
  left: -4%;
  background-image: url("../assets/portrait/backdrop.jpg");
  background-position-x: center;
  background-position-y: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
  opacity: 0.66;
  will-change: transform;
}

.portrait-page-root .portrait-backdrop::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-image: linear-gradient(0deg, var(--surface-shade-bottom), transparent var(--surface-shade-clear-stop), var(--surface-shade-top));
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
}

.portrait-page-root .main,
.portrait-page-root .main-inner {
  min-height: 0px;
}

.portrait-page-root .main {
  touch-action: none;
}

.portrait-page-root .main-inner {
  height: auto;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

.portrait-page-root .hero {
  position: static;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  row-gap: 0px;
  column-gap: 0px;
}

.portrait-page-root .ticker-strip,
.portrait-page-root .ticker-strip#ticker-strip {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 100vw;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding-block-start: 20px;
  padding-block-end: 20px;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.portrait-page-root .ticker-parallax {
  position: relative;
  left: -24px;
  width: calc(100% + 48px);
  transform-origin: center center;
  will-change: transform;
}

.portrait-page-root .ticker-inner {
  display: inline-flex;
  animation-duration: var(--ticker-duration, 120s);
}

.portrait-page-root .ticker-text {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  font-family: var(--font-family);
  font-weight: 900;
}

.portrait-page-root .ticker-strip.is-in-front {
  z-index: 3;
}

.portrait-page-root .ticker-link:focus-visible {
  outline-color: rgb(255, 255, 255);
  outline-style: solid;
  outline-width: 1px;
  outline-offset: 4px;
}

.portrait-page-root .portrait-stage {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 2;
  pointer-events: none;
}

.portrait-page-root #portrait-canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.portrait-page-root .portrait-stage.is-webgl #portrait-canvas {
  opacity: 1;
}

.portrait-page-root .portrait-stage.is-webgl .portrait-fallback {
  visibility: hidden;
}

.portrait-page-root .portrait-fallback {
  position: absolute;
  top: var(--portrait-center, 57%);
  left: 50%;
  height: var(--portrait-height, min(88svh, 90vw, 880px));
  width: auto;
  max-width: none;
  transform: translate(-50%, -50%);
  mask-image: linear-gradient(#000 var(--portrait-fade-start, 82%), transparent);
}

.portrait-page-root .social-nav-layer {
  z-index: 4;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 48px;
}

.portrait-page-root .footer {
  z-index: 4;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 28px;
}

.portrait-page-root .social-link:focus-visible,
.portrait-page-root .nav-link:focus-visible,
.portrait-page-root .logo:focus-visible {
  outline-color: currentcolor;
  outline-style: solid;
  outline-width: 1px;
  outline-offset: 5px;
}

@media (hover: none), (pointer: coarse) {
  html.modern-brand.portrait-page-root {
    height: auto;
    overflow: visible;
    overscroll-behavior: auto;
  }

  .portrait-page-root .portrait-backdrop,
  .portrait-page-root .portrait-stage,
  .portrait-page-root .ticker-strip#ticker-strip { position: absolute; }

  .portrait-page-root .portrait-stage {
    height: 100%;
    bottom: auto;
    overflow: hidden;
  }

  .portrait-page-root .portrait-backdrop-image { will-change: auto; }
}

@media (max-width: 600px) {
  .portrait-page-root .ticker-strip#ticker-strip {
    top: var(--ticker-mobile-top, 25%);
  }

  .portrait-page-root .ticker-text {
    font-size: var(--ticker-mobile-font-size, 52px);
  }

  .portrait-page-root .social-nav-layer {
    flex-basis: 70px;
  }

  .portrait-page-root .social-nav {
    row-gap: 14px;
    column-gap: 18px;
    font-size: 11px;
    bottom: 8px;
  }
}

@media (max-height: 480px) and (min-width: 601px) {
  .portrait-page-root .social-nav-layer {
    flex-basis: 24px;
  }

  .portrait-page-root .social-nav {
    font-size: 10px;
    row-gap: 16px;
    column-gap: 16px;
    bottom: 2px;
  }

  .portrait-page-root .footer {
    flex-basis: 20px;
    font-size: 9px;
  }
}