/**
 * Single service design (servicedesign.html) — layout helpers.
 */

body.single-service {
  background-color: var(--at-neutral-50, #f2f2f2) !important;
}

body.single-service #primary.site-main.moonbow-service-single,
.moonbow-service-design {
  background-color: var(--at-neutral-0, #fefefe);
  width: 100%;
  max-width: 100%;
  float: none;
}

body.single-service #secondary.widget-area {
  display: none !important;
}

/* Avoid kit z-n1 hiding panels under opaque wrappers */
.moonbow-service-design .sec-3-services-details .scroll-section {
  position: relative;
  z-index: 1;
}

.moonbow-service-single__admin-hint {
  max-width: 720px;
  margin: 4rem auto;
  padding: 2rem;
  text-align: center;
}

/*
 * Pipeline (sd2) — kit uses dark ink + light text.
 * On single service the section sits on white; force readable #000.
 *
 * overflow:hidden on .sd2-pipeline clips the ScrollTrigger pin while the
 * pin-spacer still adds height → large empty white scroll. Keep the section
 * visible; clip only the track wrap.
 */
body.single-service .elementor-widget-at-moonbow-service-design,
body.single-service .elementor-widget-at-moonbow-service-design > .elementor-widget-container,
body.single-service .moonbow-service-design,
.moonbow-service-design .sd2-pipeline,
.elementor-widget-at-moonbow-service-design .sd2-pipeline,
body.single-service .sd2-pipeline {
  overflow: visible !important;
}

body.single-service .sd2-pipeline,
.moonbow-service-design .sd2-pipeline,
.elementor-widget-at-moonbow-service-design .sd2-pipeline {
  background: #fff !important;
  color: #000 !important;
}

body.single-service .sd2-pipeline__track-wrap,
.moonbow-service-design .sd2-pipeline__track-wrap,
.elementor-widget-at-moonbow-service-design .sd2-pipeline__track-wrap {
  overflow: hidden;
}

body.single-service .sd2-pipeline__progress-bar,
.moonbow-service-design .sd2-pipeline__progress-bar,
.elementor-widget-at-moonbow-service-design .sd2-pipeline__progress-bar {
  background: #000 !important;
}

body.single-service .sd2-pipeline .sd2-kicker,
.moonbow-service-design .sd2-pipeline .sd2-kicker,
.elementor-widget-at-moonbow-service-design .sd2-pipeline .sd2-kicker {
  color: #000 !important;
}

body.single-service .sd2-pipeline__title,
body.single-service .sd2-pipe__name,
body.single-service .sd2-pipe__text,
body.single-service .sd2-pipe__time,
body.single-service .sd2-pipe__phase,
.moonbow-service-design .sd2-pipeline__title,
.moonbow-service-design .sd2-pipe__name,
.moonbow-service-design .sd2-pipe__text,
.moonbow-service-design .sd2-pipe__time,
.moonbow-service-design .sd2-pipe__phase,
.elementor-widget-at-moonbow-service-design .sd2-pipeline__title,
.elementor-widget-at-moonbow-service-design .sd2-pipe__name,
.elementor-widget-at-moonbow-service-design .sd2-pipe__text,
.elementor-widget-at-moonbow-service-design .sd2-pipe__time,
.elementor-widget-at-moonbow-service-design .sd2-pipe__phase {
  color: #000 !important;
}

body.single-service .sd2-pipe,
.moonbow-service-design .sd2-pipe,
.elementor-widget-at-moonbow-service-design .sd2-pipe {
  background: #fff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}

body.single-service .sd2-pipe__time,
.moonbow-service-design .sd2-pipe__time,
.elementor-widget-at-moonbow-service-design .sd2-pipe__time {
  border-top-color: rgba(0, 0, 0, 0.12) !important;
}

body.single-service .sd2-pipeline__progress,
.moonbow-service-design .sd2-pipeline__progress,
.elementor-widget-at-moonbow-service-design .sd2-pipeline__progress {
  background: rgba(0, 0, 0, 0.12) !important;
}

/*
 * Title bar brand — single service only: clamp(48px, 11vw, 96px).
 * Force over Elementor/WP heading resets; allow wrap for long service titles.
 */
body.single-service .sec-1-home-13__brand,
.moonbow-service-design .sec-1-home-13__brand,
.elementor-widget-at-moonbow-service-design .sec-1-home-13__brand,
.elementor-widget-at-moonbow-service-design h1.sec-1-home-13__brand {
  font-family: var(--at-ff-heading, inherit) !important;
  font-weight: 600 !important;
  font-size: clamp(48px, 11vw, 96px) !important;
  line-height: 1 !important;
  letter-spacing: -0.05em !important;
  color: #000 !important;
  white-space: normal !important;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

body.single-service .sec-1-home-13__inner,
.moonbow-service-design .sec-1-home-13__inner,
.elementor-widget-at-moonbow-service-design .sec-1-home-13__inner {
  width: 100%;
  padding-left: clamp(16px, 4vw, 96px);
  padding-right: clamp(16px, 4vw, 96px);
  box-sizing: border-box;
}

/*
 * Hero ripple layer — required by kit JS (.ripple-image hides the <img>
 * and paints via background/canvas). Without this the container collapses
 * and the hero looks like a solid dark card.
 */
.sec-1-home-15__ripple {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
}

.sec-1-home-15__ripple canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  z-index: 1;
}

/*
 * Portfolio cinema (slideshow.is-embed) — match AT Cinema / kit embed.
 */
.moonbow-service-design .slideshow.is-embed,
.elementor-widget-at-moonbow-service-design .slideshow.is-embed {
  position: relative !important;
  inset: auto !important;
  display: block;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  z-index: 1;
  overflow: hidden;
  background-color: var(--at-neutral-50, #f5f5f5);
  color: var(--at-neutral-950, #0f0f10);
}

.moonbow-service-design .slideshow .project-list,
.elementor-widget-at-moonbow-service-design .slideshow .project-list {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.moonbow-service-design .slideshow .project,
.elementor-widget-at-moonbow-service-design .slideshow .project {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  color: var(--at-neutral-950, #0f0f10);
  opacity: 1;
  visibility: visible;
}

/* Statement icon — keep square; kit SVG must not stretch */
.moonbow-service-design .sec-2-home-15__statement-icon,
.elementor-widget-at-moonbow-service-design .sec-2-home-15__statement-icon,
body.single-service .sec-2-home-15__statement-icon {
  width: 40px !important;
  height: 40px !important;
  max-width: 40px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

/* Hero title under card — kit: 173px → 40px breakpoints */
body.single-service .sec-1-home-15__title,
.moonbow-service-design .sec-1-home-15__title,
.elementor-widget-at-moonbow-service-design .sec-1-home-15__title,
.elementor-widget-at-moonbow-service-design h1.sec-1-home-15__title,
.elementor-widget-at-moonbow-service-design h2.sec-1-home-15__title {
  font-family: var(--at-ff-heading, inherit) !important;
  font-weight: 700 !important;
  font-size: clamp(40px, 10.5vw, 173px) !important;
  line-height: 1 !important;
  letter-spacing: -0.05em !important;
  color: #000 !important;
  text-align: center;
  margin: 0 0 0.75rem !important;
}