/* Top hero: the header and hero together fit the initial viewport. */
.top-page .carousel-hero,
.top-page .top-hero {
  height: calc(100vh - var(--header-h)) !important;
  height: calc(100svh - var(--header-h)) !important;
  min-height: 0 !important;
  max-height: none !important;
}

.top-page .carousel-hero .top-hero-content {
  bottom: clamp(58px, 9vh, 100px) !important;
}

.top-page .carousel-hero .top-hero-catch {
  font-size: clamp(32px, 6.4vh, 68px) !important;
  line-height: 1.45 !important;
  margin-bottom: clamp(18px, 3vh, 32px) !important;
}

@media (max-height: 720px) and (min-width: 769px) {
  .top-page .carousel-hero .top-hero-content { bottom: 54px !important; }
  .top-page .carousel-hero .top-hero-eyebrow { margin-bottom: 12px !important; }
  .top-page .carousel-hero .top-hero-catch { font-size: clamp(30px, 6vh, 44px) !important; line-height: 1.35 !important; margin-bottom: 16px !important; }
  .top-page .carousel-hero .top-hero-btns a { padding-top: 13px !important; padding-bottom: 13px !important; }
  .top-page .ch-right-col { bottom: 38px !important; transform: scale(.84) !important; transform-origin: right bottom !important; }
  .top-page .ch-nav { bottom: 28px !important; }
  .top-page .ch-caption-wrap { bottom: 32px !important; }
  .top-page .scroll-indicator { display: none !important; }
}

@media (max-width: 768px) {
  .top-page .carousel-hero,
  .top-page .top-hero { height: calc(100svh - var(--header-h)) !important; min-height: 0 !important; max-height: none !important; }
  .top-page .carousel-hero .top-hero-content { bottom: 58px !important; }
  .top-page .carousel-hero .top-hero-catch { font-size: clamp(30px, 10vw, 48px) !important; line-height: 1.4 !important; margin-bottom: 18px !important; }
  .top-page .top-hero-eyebrow { margin-bottom: 12px !important; }
  .top-page .ch-nav { bottom: 22px !important; }
  .top-page .ch-bg--hero-04 { background-position:48% 55% !important; }
  .top-page .ch-bg--hero-05 { background-position:42% 50% !important; }
}

@media (max-width: 420px), (max-height: 620px) {
  .top-page .carousel-hero .top-hero-content { bottom: 44px !important; }
  .top-page .carousel-hero .top-hero-catch { font-size: clamp(27px, 8.5vh, 40px) !important; line-height: 1.32 !important; margin-bottom: 12px !important; }
  .top-page .top-hero-eyebrow { display: none !important; }
  .top-page .top-hero-btns { gap: 8px !important; }
  .top-page .top-hero-btns a { padding-top: 12px !important; padding-bottom: 12px !important; }
  .top-page .ch-nav { bottom: 16px !important; }
}