.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; }

/* Keep desktop placement above; compose the image separately on phones. */
@media (max-width: 800px) {
  .hero { display: flex; flex-direction: column; min-height: 0; }
  .hero::before { display: none; }
  .hero-copy { order: 0; background: #faf7ef; padding-bottom: 28px; }
  .hero-saved-image {
    order: 1;
    position: relative;
    display: block;
    left: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 5;
    object-fit: cover;
    object-position: 72% center;
    transform: none;
  }
}