/* KKW 5.1: wide photographic hero + supplied brand pattern.
   No retouching, generated faces, filters, or cropping of the photographs.
   Text remains HTML. Only the empty left part of the photo is faded into
   the brand background; the person is outside the fade. */
.hero-wide,
.page-banner,
.contact-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hero-wide {
  --hero-gutter: max(32px, calc((100vw - var(--wrap)) / 2));
  background: linear-gradient(108deg, #062e35 0%, #093a42 57%, #064b53 100%);
}
.hero-wide::before,
.hero-wide::after,
.page-banner::before,
.page-banner::after,
.contact-band::before,
.contact-band::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(48px, 9vw, 165px);
  pointer-events: none;
  background: url('../img/pattern-decoration.webp') left center / 560px auto repeat-y;
  opacity: .24;
  z-index: 1;
}
.hero-wide::before,
.page-banner::before,
.contact-band::before {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, #000 15%, transparent 100%);
  mask-image: linear-gradient(to right, #000 15%, transparent 100%);
}
.hero-wide::after,
.page-banner::after,
.contact-band::after {
  right: 0;
  background-position: right center;
  -webkit-mask-image: linear-gradient(to left, #000 15%, transparent 100%);
  mask-image: linear-gradient(to left, #000 15%, transparent 100%);
}
.page-banner::before,
.page-banner::after { opacity: .15; }
.contact-band::before,
.contact-band::after { opacity: .22; }
.page-banner > .wrap,
.contact-band > .wrap { position: relative; z-index: 2; }
.hero-wide .hero-grid {
  grid-template-columns: 54% 46%;
  gap: 0;
  align-items: center;
}
.hero-wide .hero-copy {
  position: relative;
  z-index: 3;
  padding: 44px 0 48px;
  max-width: 625px;
}
.hero-wide h1 { font-size: clamp(36px, 3.65vw, 54px); letter-spacing: -.9px; }
.hero-wide .hero-subtitle { font-size: 29px; margin-bottom: 24px; }
.hero-wide .hero-intro { max-width: 525px; font-size: 18px; }
.hero-wide .hero-person { max-width: 515px; }
.hero-wide .hero-photo {
  position: relative;
  width: calc(100% + var(--hero-gutter) + 140px);
  max-width: none;
  margin: 0 0 0 -140px;
  padding: 0;
  background: transparent;
  z-index: 0;
}
.hero-wide .hero-photo img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
}
.hero-wide .hero-photo::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 34%;
  background: linear-gradient(to right, #093a42 0%, rgba(9,58,66,.9) 28%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.hero-wide .hero-photo figcaption {
  position: absolute;
  left: auto;
  right: max(26px, calc(var(--hero-gutter) - 20px));
  bottom: 0;
  transform: none;
  background: rgba(6,46,53,.96);
  color: #fff;
  border-top: 1px solid #d6b77f;
  padding: 11px 20px;
  text-align: left;
  font-size: 19px;
  line-height: 1.5;
  z-index: 2;
}
.hero-wide .hero-photo figcaption span {
  display: block;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 12px;
  letter-spacing: .8px;
}
@media (min-width: 1801px) {
  .hero-wide .hero-photo { width: 920px; margin-left: -120px; }
}
@media (min-width: 1001px) and (max-width: 1200px) {
  .hero-wide .hero-copy { padding: 34px 0; }
  .hero-wide h1 { font-size: 43px; }
  .hero-wide .hero-subtitle { font-size: 25px; margin-bottom: 18px; }
  .hero-wide .hero-intro { font-size: 17px; max-width: 460px; }
  .hero-wide .hero-person { margin-top: 18px; }
  .hero-wide .hero-actions { margin-top: 22px; }
  .hero-wide .hero-photo figcaption { font-size: 17px; right: 26px; }
}
@media (min-width: 721px) and (max-width: 1000px) {
  .hero-wide .hero-grid { display: block; }
  .hero-wide .hero-copy { padding: 38px 0 28px; max-width: 640px; }
  .hero-wide h1 { font-size: 44px; }
  .hero-wide .hero-photo {
    width: 80vw;
    margin: 0 calc(-1 * var(--hero-gutter)) 0 auto;
  }
  .hero-wide .hero-photo figcaption { right: 32px; }
}
@media (max-width: 720px) {
  .hero-wide { --hero-gutter: 18px; }
  .hero-wide .hero-grid { display: block; }
  .hero-wide .hero-copy { padding: 27px 0 25px; max-width: none; }
  .hero-wide h1 { font-size: 35px; letter-spacing: -.55px; }
  .hero-wide .hero-subtitle { font-size: 23px; margin-bottom: 16px; }
  .hero-wide .hero-intro { font-size: 16px; max-width: none; }
  .hero-wide .hero-person { font-size: 14px; margin-top: 13px; }
  .hero-wide .hero-actions { margin-top: 20px; gap: 14px; }
  .hero-wide .hero-actions .button { min-height: 48px; }
  .hero-wide .hero-photo {
    width: calc(100% + 36px);
    margin: 0 -18px;
    padding: 0;
  }
  .hero-wide .hero-photo img { width: 100%; height: auto; }
  .hero-wide .hero-photo::before { width: 32%; }
  .hero-wide .hero-photo figcaption {
    position: absolute;
    right: 12px;
    left: auto;
    bottom: 0;
    font-size: 14px;
    line-height: 1.35;
    padding: 7px 12px;
    background: rgba(6,46,53,.97);
  }
  .hero-wide .hero-photo figcaption span { display: block; font-size: 10px; letter-spacing: .4px; }
  .hero-wide::before,
  .hero-wide::after,
  .page-banner::before,
  .page-banner::after,
  .contact-band::before,
  .contact-band::after { width: 38px; opacity: .12; background-size: 410px auto; }
}
@media (forced-colors: active) {
  .hero-wide::before, .hero-wide::after,
  .page-banner::before, .page-banner::after,
  .contact-band::before, .contact-band::after,
  .hero-wide .hero-photo::before { display: none; }
  .hero-wide .hero-photo figcaption { background: Canvas; color: CanvasText; }
}