/* CrushPeek hero silhouette
   Full-height visual anchored to the centered site grid.
   The image's left edge now stays in a consistent relationship with the
   header navigation instead of drifting with viewport-percentage widths. */

.hero4-section-area {
  isolation: isolate;
  overflow: hidden;
}

.hero4-section-area > .container {
  position: relative;
  z-index: 2;
}

.cp-hero-silhouette {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;

  /* Anchor the image to the centered page grid. At common desktop widths,
     this places the woman's left/elbow edge close to the Contact menu item. */
  left: calc(50% + 250px);
  right: 0;

  height: 100%;
  pointer-events: none;
  user-select: none;
  overflow: visible;
}

.cp-hero-silhouette picture {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: auto;
  height: 100%;
}

.cp-hero-silhouette img {
  position: relative;
  z-index: 2;
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: left top;
  filter: saturate(0.96) contrast(1.03) drop-shadow(-22px 20px 46px rgba(0, 0, 0, 0.34));
}

.cp-hero-silhouette__glow {
  position: absolute;
  z-index: 1;
  top: 4%;
  left: 0;
  width: min(720px, 48vw);
  height: 82%;
  border-radius: 48% 52% 50% 46%;
  background:
    radial-gradient(circle at 62% 28%, rgba(255, 23, 97, 0.22) 0%, rgba(255, 23, 97, 0.09) 30%, transparent 65%),
    radial-gradient(circle at 42% 62%, rgba(191, 19, 84, 0.15) 0%, transparent 62%);
  filter: blur(36px);
  opacity: 0.9;
  transform: scale(1.06);
}

@media (min-width: 1200px) {
  .hero4-section-area .hero4-header {
    max-width: 780px;
  }
}

/* Preserve the same alignment principle on compact desktop screens while
   giving the hero copy enough room. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .cp-hero-silhouette {
    left: calc(50% + 205px);
    opacity: 0.86;
  }
}

/* The mobile hero uses a different composition. */
@media (max-width: 991.98px) {
  .cp-hero-silhouette {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cp-hero-silhouette picture {
    animation: cpHeroSilhouetteIn 1.15s cubic-bezier(.2,.72,.24,1) both;
  }

  .cp-hero-silhouette__glow {
    animation: cpHeroGlow 6s ease-in-out 1.15s infinite alternate;
  }
}

@keyframes cpHeroSilhouetteIn {
  from { opacity: 0; transform: translate3d(34px, 0, 0) scale(0.985); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes cpHeroGlow {
  from { opacity: 0.68; transform: scale(1.02); }
  to   { opacity: 0.96; transform: scale(1.09); }
}