/* Inner-page hero header — the whole banner is ONE colour at a time, smoothly
   cycling through NexaLoom logo tints, with a white fade at the top.
   The animated colour lives on ::before (no !important, so the keyframes actually
   run — an !important background-color would override keyframe values). */
.new-hero-area,
.service-hero-modern {
  position: relative;
  overflow: hidden;
}

.new-hero-area::before,
.service-hero-modern::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #ffd3e6;
  /* white fade over the top of the cycling colour */
  background-image: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0) 60%);
  animation: innerHeroColor 16s ease-in-out infinite;
  pointer-events: none;
}

/* Keep the hero content above the animated background */
.new-hero-area > *,
.service-hero-modern > * {
  position: relative;
  z-index: 1;
}

@keyframes innerHeroColor {
  0%   { background-color: #ffd3e6; } /* pink */
  20%  { background-color: #ffe3c6; } /* peach / orange */
  40%  { background-color: #e7d0ff; } /* purple */
  60%  { background-color: #ffd2f2; } /* magenta */
  80%  { background-color: #d9d2ff; } /* violet */
  100% { background-color: #ffd3e6; } /* back to pink */
}

@media (prefers-reduced-motion: reduce) {
  .new-hero-area::before,
  .service-hero-modern::before {
    animation: none;
  }
}