/* ============================================================
   BANNERS - FULLY FLUID (all page banners, home + inner pages)
   One continuous ramp per property, valid 320px -> 2560px+.
   No viewport-size @media queries: values are exact at every
   width and continuous everywhere (1px changes 1px).
   Generated by gen_fluid_banners.py - do not edit by hand.
   ============================================================ */

/* ============================================================
   HOME HERO SLIDER
   ============================================================ */
.hero-slider,
.home-hero {
  height: auto !important;
  /* content-sized hero (no viewport-filling), with a floor so the
     image still has presence on small screens */
  min-height: clamp(560px, 60vh, 720px) !important;
}

/* state: every banner image layer is viewport-pinned (position: fixed)
   and clipped to the banner box (clip-path on the banner), so the image
   stays perfectly still while the banner content scrolls over it. Pure
   compositor rendering: works on iOS Safari and Android (which ignore
   background-attachment: fixed) with zero lag on every device. */
.hero-slider,
.page-hero {
  clip-path: inset(0);
}
.hero-slider .bg,
.hero-slider .home-slide-bg {
  position: fixed !important;
  inset: 0 !important;
}

/* state: on mobile/tablet the home banner image is sized with cover
   (always fills the whole banner, edge to edge); a small scroll
   handler in main.js shifts its background-position so the image
   stays FIXED to the viewport while the banner content scrolls over
   it (background-attachment: fixed can't be used here because the
   banner is taller than the viewport) */
@media (max-width: 768px) {
  .hero-slider .hero-slide {
    height: auto !important;
  }
  .hero-slider .bg,
  .hero-slider .home-slide-bg {
    background-attachment: scroll !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
}

.hero-slider .content,
.home-hero .content {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  padding-top: calc(76.00px + clamp(0px, (100vw - 321px) * 0.185185, 10.00px) + clamp(0px, (100vw - 376px) * 0.204082, 10.00px) + clamp(0px, (100vw - 426px) * 0.029240, 10.00px) + clamp(0px, (100vw - 769px) * 0.039216, 10.00px) + clamp(0px, (100vw - 1025px) * 0.024096, 10.00px) + clamp(0px, (100vw - 1441px) * 0.011919, 10.00px) + 0.00px + clamp(0px, (100vw - 321px) * 0.092593, 5.00px) + clamp(0px, (100vw - 376px) * 0.102041, 5.00px) + clamp(0px, (100vw - 426px) * 0.029240, 10.00px) + clamp(0px, (100vw - 1026px) * 0.057971, 24.00px) + clamp(0px, (100vw - 1441px) * 0.023838, 20.00px) + clamp(0px, (100vw - 2281px) * 0.014337, 4.00px) + 0.00px + clamp(0px, (100vw - 1440px) * -0.039286, 44.00px)) !important;
  padding-bottom: calc(76.00px + clamp(0px, (100vw - 321px) * 0.185185, 10.00px) + clamp(0px, (100vw - 376px) * 0.204082, 10.00px) + clamp(0px, (100vw - 426px) * 0.029240, 10.00px) + clamp(0px, (100vw - 769px) * 0.039216, 10.00px) + clamp(0px, (100vw - 1025px) * 0.024096, 10.00px) + clamp(0px, (100vw - 1441px) * 0.011919, 10.00px) + 0.00px + clamp(0px, (100vw - 321px) * 0.092593, 5.00px) + clamp(0px, (100vw - 376px) * 0.102041, 5.00px) + clamp(0px, (100vw - 426px) * 0.029240, 10.00px) + clamp(0px, (100vw - 1026px) * 0.057971, 24.00px) + clamp(0px, (100vw - 1441px) * 0.023838, 20.00px) + clamp(0px, (100vw - 2281px) * 0.014337, 4.00px) + 0.00px + clamp(0px, (100vw - 1440px) * -0.039286, 44.00px)) !important;
  padding-left: calc(11.20px + clamp(0px, (100vw - 321px) * 0.044444, 2.40px) + clamp(0px, (100vw - 426px) * 0.007018, 2.40px) + clamp(0px, (100vw - 769px) * 0.031373, 8.00px)) !important;
  padding-right: calc(11.20px + clamp(0px, (100vw - 321px) * 0.044444, 2.40px) + clamp(0px, (100vw - 426px) * 0.007018, 2.40px) + clamp(0px, (100vw - 769px) * 0.031373, 8.00px)) !important;
}

.hero-slider .content h1,
.home-hero .content h1 {
  font-size: calc(42.00px + clamp(0px, (100vw - 321px) * 0.148148, 8.00px) + clamp(0px, (100vw - 376px) * 0.122449, 6.00px) + clamp(0px, (100vw - 426px) * 0.035088, 12.00px) + clamp(0px, (100vw - 769px) * 0.039216, 10.00px) + clamp(0px, (100vw - 1025px) * 0.033735, 14.00px) + clamp(0px, (100vw - 1441px) * 0.028605, 24.00px) + clamp(0px, (100vw - 2281px) * 0.028674, 8.00px)) !important;
  white-space: normal !important;
}

.home-hero .hero-kicker {
  font-size: calc(10.00px + clamp(0px, (100vw - 321px) * 0.018519, 1.00px) + clamp(0px, (100vw - 376px) * 0.010204, 0.50px) + clamp(0px, (100vw - 426px) * 0.001462, 0.50px) + clamp(0px, (100vw - 769px) * 0.001961, 0.50px) + clamp(0px, (100vw - 1025px) * 0.001205, 0.50px) + clamp(0px, (100vw - 1441px) * 0.001788, 1.50px) + clamp(0px, (100vw - 2281px) * 0.001792, 0.50px)) !important;
  white-space: normal !important;
}

.hero-slider .content .hero-subtitle,
.home-hero .hero-subtitle {
  font-size: calc(11.50px + clamp(0px, (100vw - 321px) * 0.027778, 1.50px) + clamp(0px, (100vw - 376px) * 0.020408, 1.00px) + clamp(0px, (100vw - 426px) * 0.004386, 1.50px) + clamp(0px, (100vw - 769px) * 0.005882, 1.50px) + clamp(0px, (100vw - 1025px) * 0.004819, 2.00px) + clamp(0px, (100vw - 1441px) * 0.003576, 3.00px) + clamp(0px, (100vw - 2281px) * 0.003584, 1.00px)) !important;
}

.hero-slider .content .hero-desc,
.home-hero .content .hero-desc {
  font-size: calc(12.00px + clamp(0px, (100vw - 321px) * 0.018519, 1.00px) + clamp(0px, (100vw - 376px) * 0.010204, 0.50px) + clamp(0px, (100vw - 426px) * 0.001462, 0.50px) + clamp(0px, (100vw - 769px) * 0.001961, 0.50px) + clamp(0px, (100vw - 1025px) * 0.001205, 0.50px) + clamp(0px, (100vw - 1441px) * 0.000894, 0.75px) + clamp(0px, (100vw - 2281px) * 0.000896, 0.25px)) !important;
  margin-bottom: calc(10.00px + clamp(0px, (100vw - 321px) * 0.018519, 1.00px) + clamp(0px, (100vw - 376px) * 0.020408, 1.00px) + clamp(0px, (100vw - 426px) * 0.005848, 2.00px) + clamp(0px, (100vw - 769px) * 0.031373, 8.00px) + clamp(0px, (100vw - 1025px) * 0.019277, 8.00px) + clamp(0px, (100vw - 1441px) * 0.004175, 2.00px)) !important;
}

.home-hero .hero-buttons {
  gap: calc(8.00px + clamp(0px, (100vw - 321px) * 0.018519, 1.00px) + clamp(0px, (100vw - 376px) * 0.020408, 1.00px) + clamp(0px, (100vw - 426px) * 0.002924, 1.00px) + clamp(0px, (100vw - 769px) * 0.003922, 1.00px) + clamp(0px, (100vw - 1025px) * 0.002410, 1.00px) + clamp(0px, (100vw - 1441px) * 0.002682, 2.25px) + clamp(0px, (100vw - 2281px) * 0.002688, 0.75px)) !important;
}

/* home hero buttons: strictly centered, natural width (defeats the
   legacy full-width + margin-left:16px rules from the old media system) */
.home-hero .hero-buttons .btn-primary,
.home-hero .hero-buttons .btn-secondary {
  width: auto !important;
  margin-left: 0 !important;
  margin-top: calc(16.00px + clamp(0px, (100vw - 321px) * 0.018519, 1.00px) + clamp(0px, (100vw - 376px) * 0.020408, 1.00px) + clamp(0px, (100vw - 426px) * 0.005848, 2.00px) + clamp(0px, (100vw - 769px) * 0.023529, 6.00px) + clamp(0px, (100vw - 1025px) * 0.009639, 4.00px) + clamp(0px, (100vw - 1441px) * 0.004175, 2.00px)) !important;
}

/* state: home hero buttons stay side-by-side and centered on
   mobile/tablet too (the old system stacked them in a column);
   nowrap guarantees neither button ever wraps to a next line */
@media (max-width: 768px) {
  .hero-slider .hero-buttons,
  .home-hero .hero-buttons {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  .hero-slider .hero-buttons .btn-primary,
  .hero-slider .hero-buttons .btn-secondary,
  .home-hero .hero-buttons .btn-primary,
  .home-hero .hero-buttons .btn-secondary {
    white-space: nowrap !important;
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
    min-width: 0 !important;
    display: inline-flex !important;
  }
}

/* state: on phones the legacy media system inflates the hero buttons
   (14.4px font, 32px side padding), which makes the pair too wide and
   forces them onto separate lines; keep them modest so both fit on
   one line on every phone width */
@media (max-width: 425px) {
  .hero-slider .hero-buttons .btn-primary,
  .hero-slider .hero-buttons .btn-secondary,
  .home-hero .hero-buttons .btn-primary,
  .home-hero .hero-buttons .btn-secondary {
    font-size: 11px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    margin-top: 0 !important;
  }
}

/* state: proper spacing between the hero paragraph and the buttons
   on mobile/tablet (the desktop ramp bottoms out at only 10-14px) */
@media (max-width: 768px) {
  .hero-slider .content .hero-desc,
  .home-hero .content .hero-desc {
    margin-bottom: calc(18.00px + clamp(0px, (100vw - 321px) * 0.008929, 4.00px)) !important;
  }
}

/* state: slider controls sized for tiny screens */
@media (max-width: 425px) {
  .slider-prev, .slider-next {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.8rem !important;
  }
  .slider-prev { left: 8px !important; }
  .slider-next { right: 8px !important; }
  .slider-dot {
    width: 27px !important;
    height: 27px !important;
  }
}

/* state: active (blue) slider dot smaller on mobile screens so it
   does not dominate the banner (15px base, 19.5px scaled vs 26px
   on desktop). min-width:0 alone is NOT enough: the box can never
   shrink below padding+border+min-content (8+8+4 = 20px), so the
   padding must also be trimmed on mobile. background-clip goes back
   to border-box because the content-box clip rule would erase the
   blue fill at this size (content area would be negative). */
@media (max-width: 768px) {
  .hero-slider .slider-dot.active {
    width: 15px !important;
    height: 15px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 2px !important;
    background-clip: border-box !important;
    background-origin: border-box !important;
  }
}

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  min-height: 0 !important;
}

/* fixed layer created by main.js: carries the banner image (moved off
   .page-hero itself) and is clipped to the banner box by the clip-path
   on .page-hero above; z-index 0 keeps it below the ::before overlay
   (1), the ::after accent bar (2) and .content (2) */
.page-hero .page-hero-bg {
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* state: tight h1 line-height; on mobile/tablet the page banner image
   is sized with cover (always fills the whole banner, edge to edge); a
   small scroll handler in main.js shifts its background-position so the
   image stays FIXED to the viewport while the banner content scrolls
   over it (background-attachment: fixed can't be used here: iOS Safari
   silently ignores it, and the banner may be taller than the viewport
   on small phones) */
@media (max-width: 768px) {
  .page-hero {
    background-attachment: scroll !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
  .page-hero .content h1 {
    line-height: 0.9 !important;
  }
}

.page-hero .content {
  padding-top: calc(76.00px + clamp(0px, (100vw - 321px) * 0.185185, 10.00px) + clamp(0px, (100vw - 376px) * 0.204082, 10.00px) + clamp(0px, (100vw - 426px) * 0.029240, 10.00px) + clamp(0px, (100vw - 769px) * 0.039216, 10.00px) + clamp(0px, (100vw - 1025px) * 0.024096, 10.00px) + clamp(0px, (100vw - 1441px) * 0.011919, 10.00px) + 0.00px + clamp(0px, (100vw - 769px) * 0.156250, 40.00px) + clamp(0px, (100vw - 1026px) * 0.057971, 24.00px) + clamp(0px, (100vw - 1441px) * 0.023838, 20.00px) + clamp(0px, (100vw - 2281px) * 0.014337, 4.00px) + 0.00px + clamp(0px, (100vw - 1440px) * -0.039286, 44.00px)) !important;
  padding-bottom: calc(76.00px + clamp(0px, (100vw - 321px) * 0.185185, 10.00px) + clamp(0px, (100vw - 376px) * 0.204082, 10.00px) + clamp(0px, (100vw - 426px) * 0.029240, 10.00px) + clamp(0px, (100vw - 769px) * 0.039216, 10.00px) + clamp(0px, (100vw - 1025px) * 0.024096, 10.00px) + clamp(0px, (100vw - 1441px) * 0.011919, 10.00px) + 0.00px + clamp(0px, (100vw - 1440px) * -0.039286, 44.00px)) !important;
}

.page-hero .content h1 {
  font-size: calc(42.00px + clamp(0px, (100vw - 321px) * 0.074074, 4.00px) + clamp(0px, (100vw - 376px) * 0.081633, 4.00px) + clamp(0px, (100vw - 426px) * 0.035088, 12.00px) + clamp(0px, (100vw - 769px) * 0.031373, 8.00px) + clamp(0px, (100vw - 1025px) * 0.033735, 14.00px) + clamp(0px, (100vw - 1441px) * 0.025030, 21.00px) + clamp(0px, (100vw - 2281px) * 0.025090, 7.00px)) !important;
}

.page-hero .content .breadcrumb {
  font-size: calc(11.00px + clamp(0px, (100vw - 321px) * 0.018519, 1.00px) + clamp(0px, (100vw - 376px) * 0.010204, 0.50px) + clamp(0px, (100vw - 426px) * 0.001462, 0.50px) + clamp(0px, (100vw - 769px) * 0.001961, 0.50px) + clamp(0px, (100vw - 1025px) * 0.001205, 0.50px) + clamp(0px, (100vw - 1441px) * 0.000447, 0.38px) + clamp(0px, (100vw - 2281px) * 0.000448, 0.12px)) !important;
  padding-top: calc(9.00px + clamp(0px, (100vw - 321px) * 0.009259, 0.50px) + clamp(0px, (100vw - 376px) * 0.010204, 0.50px) + clamp(0px, (100vw - 426px) * 0.001462, 0.50px) + clamp(0px, (100vw - 769px) * 0.001961, 0.50px) + clamp(0px, (100vw - 1025px) * 0.001205, 0.50px) + clamp(0px, (100vw - 1441px) * 0.002980, 2.50px)) !important;
  padding-bottom: calc(9.00px + clamp(0px, (100vw - 321px) * 0.009259, 0.50px) + clamp(0px, (100vw - 376px) * 0.010204, 0.50px) + clamp(0px, (100vw - 426px) * 0.001462, 0.50px) + clamp(0px, (100vw - 769px) * 0.001961, 0.50px) + clamp(0px, (100vw - 1025px) * 0.001205, 0.50px) + clamp(0px, (100vw - 1441px) * 0.002980, 2.50px)) !important;
  padding-left: calc(11.00px + clamp(0px, (100vw - 321px) * 0.018519, 1.00px) + clamp(0px, (100vw - 376px) * 0.020408, 1.00px) + clamp(0px, (100vw - 426px) * 0.002924, 1.00px) + clamp(0px, (100vw - 769px) * 0.003922, 1.00px) + clamp(0px, (100vw - 1025px) * 0.002410, 1.00px) + clamp(0px, (100vw - 1441px) * 0.002980, 2.50px) + clamp(0px, (100vw - 2281px) * 0.001792, 0.50px)) !important;
  padding-right: calc(11.00px + clamp(0px, (100vw - 321px) * 0.018519, 1.00px) + clamp(0px, (100vw - 376px) * 0.020408, 1.00px) + clamp(0px, (100vw - 426px) * 0.002924, 1.00px) + clamp(0px, (100vw - 769px) * 0.003922, 1.00px) + clamp(0px, (100vw - 1025px) * 0.002410, 1.00px) + clamp(0px, (100vw - 1441px) * 0.002980, 2.50px) + clamp(0px, (100vw - 2281px) * 0.001792, 0.50px)) !important;
}