.hero {
  position: relative;
  background: #24475f;
  background-image: none;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, #f9f5eb 0 27%, #f9f5ebcc 33%, transparent 42%);
}

.hero-saved-image {
  --hero-x: 185px;
  --hero-y: -60px;
  --hero-scale: 1;
  position: absolute;
  z-index: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  max-width: none;
  transform: translate(var(--hero-x), var(--hero-y)) scale(var(--hero-scale));
  transform-origin: center center;
  user-select: none;
}

.hero-copy { position: relative; z-index: 2; }

@media (max-width: 800px) {
  .hero::before { background: linear-gradient(180deg, #faf7eff7 0 57%, #faf7ef33 76%, transparent 100%); }
  .hero-saved-image { width: 100%; height: 310px; object-fit: cover; object-position: center; }
}