.th-header-graphic{
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}

/* The graphic assets are 2048×360. Keep the artwork proportional and let
   the banner crop minimally rather than stretching the source image. */
.th-header-graphic.header-small{
  min-height:clamp(220px,17.58vw,360px);
}

@media (max-width:767px){
  .th-header-graphic.header-small{
    min-height:220px;
  }

  /* Mobile art direction: preserve the strong crop that already works for blue. */
  .th-header-graphic--blue{
    background-size:cover;
    background-position:center center;
  }

  /* Beige/azure use a true mobile crop: larger artwork, fewer fragments. */
  .th-header-graphic--beige{
    background-size:auto 650px !important;
    background-position:44% 50% !important;
  }

  .th-header-graphic--azure{
    background-size:auto 330px;
    background-position:center center;
  }
}

.th-header-graphic--beige .headline,
.th-header-graphic--beige #breadcrumbs,
.th-header-graphic--beige #breadcrumbs a,
.th-header-graphic--azure .headline,
.th-header-graphic--azure #breadcrumbs,
.th-header-graphic--azure #breadcrumbs a{
  color:#063B68;
}

.th-header-graphic--blue .headline,
.th-header-graphic--blue #breadcrumbs,
.th-header-graphic--blue #breadcrumbs a{
  color:#fff;
}

.th-header-graphic--beige .overlay,
.th-header-graphic--blue .overlay,
.th-header-graphic--azure .overlay{
  background:none !important;
  background-image:none !important;
  opacity:0 !important;
}