/* Homepage-only layout rhythm and rendering boundaries. */
:root {
  --home-section-space: clamp(68px, 6vw, 82px);
}

.projects-section,
.services-section,
.vibe-production.section-shell,
.process.section-shell,
.cta-wrap.section-shell {
  padding-top: var(--home-section-space);
  padding-bottom: var(--home-section-space);
}

.koko-payment.section-shell {
  width: min(1360px, calc(100% - 28px));
  margin-top: var(--home-section-space);
  margin-bottom: var(--home-section-space);
}

.projects-heading,
.project-slider,
.vibe-production.section-shell,
.process.section-shell {
  width: min(1360px, calc(100% - 28px));
}

.project-slider-frame::before,
.project-slider-frame::after {
  width: max(72px, calc((100% - 1360px) / 2 + 120px));
}

.project-slider .project-slide {
  flex-basis: min(610px, 44vw);
}

.projects-section,
.services-section,
.vibe-production,
.process,
.cta-wrap {
  content-visibility: auto;
  contain-intrinsic-size: auto 760px;
}

/* The KoKo character intentionally breaks above the banner boundary. */
.koko-payment {
  overflow: visible;
  contain: none;
  content-visibility: visible;
}

@media (max-width: 700px) {
  :root {
    --home-section-space: 54px;
  }

  .koko-payment.section-shell {
    width: calc(100% - 20px);
  }

  .projects-heading,
  .project-slider,
  .vibe-production.section-shell,
  .process.section-shell {
    width: calc(100% - 20px);
  }

  .project-slider .project-slide {
    flex-basis: 86vw;
  }

  .services-section.section-shell {
    padding-top: 92px;
  }

  .services-nav {
    text-align: center;
  }

  .services-nav p {
    margin-inline: auto;
  }
}