/* Final hero layout loads in the head before the first banner is rendered. */
html body .tt-hero-slider {
  transition: none !important;
  height: calc(100vh - var(--tt-header-height, 0px)) !important;
  height: calc(100dvh - var(--tt-header-height, 0px)) !important;
  min-height: 0 !important;
  max-height: none !important;
}
/* Center the copy within each slide as the banner height changes. */
html body .tt-hero-slider .tt-slide {
  align-items: center !important;
}
html body .tt-hero-slider .tt-slide > .tt-hero-copy {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  margin-block: 0 !important;
  transform: none !important;
}
/* Home banner copy sizing. */
html body .tt-hero-slider .tt-hero-copy {
  width: min(760px, 55vw) !important;
  max-width: min(760px, 55vw) !important;
  box-sizing: border-box;
}
html body .tt-hero-slider .tt-hero-copy p {
  font-size: 18px !important;
  line-height: 1.5 !important;
}
@media (max-width: 767px) {
  html body .tt-hero-slider .tt-hero-copy {
    width: calc(100% - 64px) !important;
    max-width: 760px !important;
  }
}
/* The responsive slide uses a scaled 1024 x 576 canvas; match its visible height. */
@media (max-width: 1024px) {
  html body .tt-hero-slider {
    height: calc(576px * var(--tt-hero-scale, 1)) !important;
  }
}

:root { --tt-hero-transition-duration: 300ms; }
@layer tt-hero-transition {
  .tt-hero-slider .tt-hero-crossfade {
    position: absolute;
    inset: 0;
    z-index: 6;
    overflow: hidden;
    pointer-events: none;
  }
  .tt-hero-crossfade-frame, .tt-hero-crossfade-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #fff;
  }
  .tt-hero-crossfade-slide { display: flex; align-items: center; }
  .tt-hero-crossfade :is(.tt-hero-copy, .tt-hero-brand) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
  }
}