body { background: #FBF0EE; margin: 0; }

/* Full-width image strip with pink overlay + 2 BIG symmetric waves */
.hero-strip{
  position: relative;
  width: 100%;
  height: 40vh;
  overflow: hidden;

  /* tweak this if you ever want to nudge the wave left/right */
  --mask-shift: 0px;

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 0H1200V260C1050 260 1050 360 900 360C750 360 750 260 600 260C450 260 450 360 300 360C150 360 150 260 0 260V0Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: calc(50% + var(--mask-shift)) 100%;

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 400' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 0H1200V260C1050 260 1050 360 900 360C750 360 750 260 600 260C450 260 450 360 300 360C150 360 150 260 0 260V0Z'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: calc(50% + var(--mask-shift)) 100%;
}

/* Background image */
.hero-strip img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Pink overlay */
.hero-overlay{
  position: absolute;
  inset: 0;
  background: rgba(255, 182, 193, 0.45);
  pointer-events: none;
}