/* Final image corrections loaded after the main stylesheet. */
.site-header {
  min-height: 128px;
  overflow: visible;
}

.brand {
  width: clamp(255px, 18vw, 340px);
  height: 88px;
  overflow: visible;
}

.brand-logo {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: left center;
}

.hero .intro {
  color: #3f4650;
}

.hero-visual {
  min-height: 620px;
  background: #d8dde0;
}

.hero-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-image-position, center center);
}

.hero-copy {
  background: rgba(247, 245, 239, 0.78);
  backdrop-filter: blur(2px);
}

.hero .hero-copy .intro {
  color: #3f4650;
}

@media (max-width: 1000px) {
  .hero-visual {
    min-height: 440px;
  }
}

@media (max-width: 700px) {
  .site-header {
    min-height: 104px;
  }

  .brand {
    width: min(250px, 62vw);
    height: 72px;
  }

  .hero-visual {
    min-height: 360px;
  }
}