/* V70 — black services preview */

#services,
#services.section,
#services .container,
#servicesStage,
.services-stage,
.service-detail {
  background: #000 !important;
}

#services {
  color: #fff;
}

#services .section-kicker {
  color: rgba(255,255,255,.52) !important;
}

#services .section-title {
  color: #fff !important;
}

#services .section-copy {
  color: rgba(255,255,255,.72) !important;
}

.service-grid {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.10) !important;
}

.service-card {
  background: #050505 !important;
  border-color: rgba(255,255,255,.08) !important;
}

.service-card:hover {
  background: #0c0c0c !important;
  border-color: rgba(227,30,36,.42) !important;
}

.service-card p,
.service-motto {
  color: rgba(255,255,255,.66) !important;
}

.service-open {
  color: rgba(255,255,255,.72) !important;
}

.service-detail {
  overflow: hidden !important;
  border-color: rgba(255,255,255,.10) !important;
}

.service-detail-frame {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: clamp(500px, 42vw, 620px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
  border: 0 !important;
  box-sizing: border-box !important;
  cursor: pointer;
}

.service-detail-frame::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-color: #000 !important;
  transform: none !important;
}

.service-detail-frame::after {
  display: none !important;
  content: none !important;
}

.service-detail-content,
.service-detail-visual {
  display: none !important;
}

/* keep approved panels full bleed */
.service-detail-frame.detail-bg-01::before,
.service-detail-frame.detail-bg-02::before,
.service-detail-frame.detail-bg-03::before,
.service-detail-frame.detail-bg-04::before,
.service-detail-frame.detail-bg-05::before,
.service-detail-frame.detail-bg-06::before {
  background-size: cover !important;
  background-position: center center !important;
}

@media (max-width: 1280px) {
  .service-detail-frame {
    height: clamp(460px, 44vw, 580px) !important;
  }
}

@media (max-width: 980px) {
  .service-detail-frame {
    height: clamp(360px, 56vw, 520px) !important;
  }
}

@media (max-width: 640px) {
  .service-detail-frame {
    height: 360px !important;
  }
}