/* Below the hero: pale red / white, with the original asymmetric shapes.
   Contact sections supply the red step through their existing red CTA.
   Company retains its original gray background from the base stylesheet.
   Name sections explicitly so animation wrappers cannot shift the sequence. */
.sdl-hero-preview #top-main {
  --section-red: #fdf5f6;
  --section-white: #fff;
}

.sdl-hero-preview #top-main > .services {
  background: var(--section-red);
}

.sdl-hero-preview #top-main > #about-hcm,
.sdl-hero-preview #top-main > .service-detail,
.sdl-hero-preview #top-main > .case-studies,
.sdl-hero-preview #top-main > #blog,
.sdl-hero-preview #top-main > .news,
.sdl-hero-preview #top-main > .footer-plain,
.sdl-hero-preview #top-main > .contact {
  background: var(--section-white);
}

.sdl-hero-preview #top-main > #about-hcm::after {
  background: var(--section-white);
}

/* Service cards already supply the space above this contact CTA.
   Leave the lower contact section's original spacing unchanged. */
.sdl-hero-preview #top-main > .contact--after-services {
  margin: 24px 0 0;
  padding: 0;
}

@media (max-width: 768px) {
  .sdl-hero-preview #top-main > .contact--after-services {
    margin-bottom: 64px;
  }
}

/* Follow all six cards at every breakpoint instead of stopping at 800px. */
.sdl-hero-preview #top-main > .service-detail::after,
.sdl-hero-preview #top-main > #seminar-event::after,
.sdl-hero-preview #top-main > .news::after {
  height: 100%;
  background: var(--section-red);
}