/* Paste into WordPress > Appearance > Customize > Additional CSS. */
@media (max-width: 1100px) {
  .un-home .un-header {
    height: auto;
    min-height: 88px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .un-home .un-header .un-brand {
    grid-column: 1;
    grid-row: 1;
  }
  .un-home .un-header .un-header__actions {
    grid-column: 2;
    grid-row: 1;
  }
  .un-home .un-header .un-nav {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 16px;
    width: 100%;
    border-top: 1px solid #d8d0c0;
    padding-top: 8px;
  }
  .un-home .un-header .un-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 4px;
    font-size: 11px;
  }
  .un-home .un-header .un-nav a:focus-visible {
    outline: 2px solid #1f3524;
    outline-offset: 2px;
  }
}

/* Keep the laboratory product image legible beside the new headline. */
.un-home .un-hero { min-height: 620px; }
.un-home .un-hero > img {
  inset: 0 0 0 auto;
  width: 45%;
  height: 100%;
  object-fit: contain;
  padding: 24px;
  background: #142619;
}
.un-home .un-hero__shade { background: linear-gradient(90deg, #142619 0%, #142619 49%, transparent 65%); }
.un-home .un-hero__copy { width: 62%; padding: 72px clamp(24px, 5vw, 84px); }
.un-home .un-hero h1 { font-size: clamp(48px, 6vw, 92px); line-height: .98; }
@media (max-width: 680px) {
  .un-home .un-hero { display: flex; flex-direction: column; min-height: 0; }
  .un-home .un-hero > img { position: relative; inset: auto; order: 2; width: 100%; height: 320px; padding: 16px 24px; }
  .un-home .un-hero__shade { display: none; }
  .un-home .un-hero__copy { width: 100%; padding: 42px 20px 24px; }
  .un-home .un-hero h1 { font-size: clamp(44px, 12vw, 70px); }
  .un-home .un-header__actions > a:first-child { display: inline-flex; }
}