/* Preserve the source proportions so the hero photograph is fully visible. */
.hero-image-frame {
  aspect-ratio: 678 / 949 !important;
}

.hero-image-frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* Three header logos share one exact visual centre line. */
.site-header .brand-group {
  display: flex !important;
  align-items: center !important;
  flex-basis: 500px !important;
  gap: 15px !important;
}

.site-header .brand-tss,
.site-header .brand-kontrolit,
.site-header .brand-company {
  display: block !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

.site-header .brand-tss {
  width: 90px !important;
}

.site-header .brand-kontrolit {
  width: 172px !important;
}

.site-header .brand-company {
  width: 164px !important;
}

.site-header .brand-group > span {
  display: block !important;
  flex: 0 0 1px !important;
  width: 1px !important;
  height: 42px !important;
  margin: 0 !important;
}

/* The Kontrolit wordmark has more empty space below in the source file. */
.site-header .brand-kontrolit {
  position: relative !important;
  top: 3px !important;
}

@media (max-width: 1180px) {
  .site-header .brand-group {
    flex-basis: 400px !important;
    gap: 8px !important;
  }

  .site-header .brand-tss {
    width: 76px !important;
  }

  .site-header .brand-kontrolit {
    width: 145px !important;
  }

  .site-header .brand-company {
    width: 138px !important;
  }

  .site-header .brand-group > span {
    display: block !important;
    height: 34px !important;
  }

  .site-header .brand-kontrolit {
    top: 2px !important;
  }
}

@media (max-width: 700px) {
  .site-header .brand-group {
    flex-basis: auto !important;
    gap: 6px !important;
  }

  .site-header .brand-tss {
    width: 51px !important;
  }

  .site-header .brand-kontrolit {
    width: 98px !important;
  }

  .site-header .brand-company {
    width: 93px !important;
  }

  .site-header .brand-group > span {
    display: none !important;
  }

  .site-header .brand-kontrolit {
    top: 2px !important;
  }
}