/* HeroBanner */
.hero {
  position: relative; display: flex; justify-content: center; align-items: center;
  height: 667px;
  background: var(--hero-bg);
  color: var(--ink);
}
@media (min-width: 1025px) { .hero { height: var(--vh100-fixedTop); max-height: 810px; min-height: 600px; } }
@media (min-width: 1440px) { .hero { max-height: 1080px; min-height: 800px; } }
@media (min-width: 2560px) { .hero { height: 31.25vw; max-height: none; } }
.hero__media { position: absolute; inset: 0; z-index: 1; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__container { position: relative; z-index: 2; height: 100%; }
@media (max-width: 767px) { .hero__container { width: 100%; } }
.hero__text {
  position: absolute; left: 0; top: 0; z-index: 10; width: 100%;
  padding: var(--Section-Gap-2) var(--Content-Gap-5);
  text-align: center;
  opacity: 0; transition: opacity .8s;
}
.hero__text.is-visible { opacity: 1; }
@media (min-width: 1025px) {
  .hero__text {
    width: 498px; max-width: 800px; height: 100%; padding: 0; text-align: left;
    display: flex; flex-direction: column; justify-content: center;
  }
}
@media (min-width: 1440px) { .hero__text { width: 588px; } }
.hero__name {
  font-size: var(--Title-1-Size); line-height: var(--Title-1-Line-Height); font-weight: 700;
  margin: 0 0 var(--Content-Gap-4);
}
.hero__slogan {
  font-size: var(--Headline-3-Size); line-height: var(--Headline-3-Line-Height); font-weight: 700;
  margin: 0 0 var(--Content-Gap-8); white-space: pre-line;
}
.hero__buttons { display: inline-grid; grid-template-columns: repeat(2, 140px); gap: 8px; }
@media (min-width: 1025px) { .hero__buttons { grid-template-columns: repeat(2, 180px); gap: 12px; } }
.hero__buttons .btn { width: 100%; }
@media (min-width: 1025px) { .hero__buttons { align-self: flex-start; } }