.site-announcement,
.workflow-heading {
  background: var(--blue, #1267ff);
}

.site-header--home {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  height: 92px;
  min-height: 92px;
  padding: 0 clamp(12px, 1.2vw, 40px);
}

.site-header--home .nav-item,
.site-header--home .nav-link {
  height: 92px;
}

.hero-visual {
  container-type: inline-size;
}

.hero-visual .quote-screen {
  opacity: 0.16;
  pointer-events: none;
}

.hero-visual .floating-cube {
  opacity: 0.3;
}

.hero-visual .model-preview {
  opacity: 0.82;
}

.hero-visual .three-mold {
  --backdrop-half-width: min(45cqw, 440px);
  --backdrop-half-height: max(187.5px, calc(var(--backdrop-half-width) / 1.85));
  height: 120%;
  left: calc(-42% + var(--backdrop-half-width));
  top: calc(34% - var(--backdrop-half-height));
  width: 100%;
}

.hero-visual .three-mold canvas {
  filter: drop-shadow(0 36px 38px rgba(10, 64, 135, 0.26)) drop-shadow(0 8px 12px rgba(10, 64, 135, 0.14));
}

@media (min-width: 1121px) and (max-width: 1300px) {
  .site-header--home .brand-tagline {
    display: none;
  }
}

@media (max-width: 720px) {
  .site-header--home {
    gap: 8px;
    height: 76px;
    min-height: 76px;
    padding: 14px 18px;
  }

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

  .hero-visual .three-mold {
    height: 360px;
    left: 0;
    top: 80px;
    width: 100%;
  }
}