/* 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);
}

/* 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;
  }
}

/* Production workbench: transparent artwork on the page's own surface. */
.vibe-production__visual {
  display: grid;
  place-items: center;
  min-height: 0;
  perspective: none;
  overflow: visible;
}
.production-workbench {
  width: 100%;
  max-width: 640px;
  position: relative;
  isolation: isolate;
}
.production-workbench::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4% -5% 12%;
  background: radial-gradient(ellipse, rgba(213, 222, 237, .48), rgba(233, 238, 245, .18) 48%, transparent 72%);
  pointer-events: none;
}
.production-workbench__drawing { display: block; width: 100%; height: auto; overflow: visible; }
.production-workbench__drawing text { font-family: "Outfit", sans-serif; fill: var(--ink); }
.production-workbench__guides { stroke: #CFD7E3; stroke-width: 1; opacity: .65; }
.production-workbench__drawing .production-workbench__mono { font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: 1.1px; }
.production-workbench__drawing .production-workbench__quiet { fill: #8A96A8; }
.production-workbench__drawing .production-workbench__address { fill: #79869A; font-size: 9px; letter-spacing: .8px; }
.production-workbench__drawing .production-workbench__tiny { fill: #667085; font-size: 7px; font-weight: 600; letter-spacing: .5px; }
.production-workbench__drawing .production-workbench__wordmark { font-size: 10px; font-weight: 600; letter-spacing: 1px; }
.production-workbench__drawing .production-workbench__headline { font-size: 28px; font-weight: 600; letter-spacing: -1.2px; }
.production-workbench__drawing .production-workbench__headline[fill] { fill: var(--accent); }
.production-workbench__drawing .production-workbench__cta { fill: white; font-size: 8px; letter-spacing: .4px; }
.production-workbench__draft { stroke: #BCC6D5; stroke-width: 1.2; stroke-dasharray: 4 4; }
.production-workbench__release { stroke: var(--accent); stroke-width: 1.25; stroke-opacity: .5; pointer-events: none; }
.production-workbench__signal { fill: var(--accent); }
.production-workbench__check-bg { fill: #FBFCFE; stroke: #D4DCE7; }
.production-workbench__check-progress { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; }
.production-workbench__tick { stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.production-workbench__drawing .production-workbench__check-label { font-size: 14px; font-weight: 500; }
.production-workbench__drawing .production-workbench__check-status { fill: var(--accent); font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: 1px; }
.production-workbench__check[data-state="waiting"] .production-workbench__check-status { fill: #8A96A8; }
.production-workbench__check:not([data-state="done"]) .production-workbench__tick { opacity: 0; }
.production-workbench__drawing .production-workbench__caption { fill: #667085; font-size: 13px; }
@media (max-width: 1000px) and (min-width: 701px) {
  .vibe-production__visual { min-height: 0; }
  .production-workbench { max-width: 600px; }
}
@media (max-width: 700px) {
  .vibe-production__visual { min-height: 0; margin-block: 22px 24px; }
  .production-workbench { max-width: 540px; }
  .production-workbench__drawing .production-workbench__mono { font-size: 12px; }
  .production-workbench__drawing .production-workbench__check-label { font-size: 17px; }
  .production-workbench__drawing .production-workbench__check-status { font-size: 10px; }
  .production-workbench__drawing .production-workbench__caption { font-size: 15px; }
}

/* A quieter hierarchy gives the copy and the work room to speak. */
.page-home .hero {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px);
  min-height: 700px;
  padding-block: 90px 76px;
}
.page-home .hero h1 { max-width: 740px; font-size: clamp(48px, 4.8vw, 72px); line-height: 1.04; letter-spacing: -.05em; }
.page-home .eyebrow { padding: 0; border: 0; background: none; box-shadow: none; font-size: 11px; letter-spacing: .08em; }
.page-home .hero-copy { max-width: 550px; font-size: 18px; line-height: 1.7; }
.page-home .hero-actions { flex-wrap: wrap; gap: 16px 26px; }
.page-home .hero-actions > .action-play { width: auto; min-width: 0; padding: 12px 0; gap: 14px; border: 0; border-radius: 0; background: transparent; }
.page-home .action-play b { font-weight: 500; }
.page-home .action-play .long-arrow { width: 20px; flex-basis: 20px; }
.page-home .teaser-instrument { width: 100%; min-width: 0; margin: 0; }
.page-home .teaser-detail-card { box-shadow: 0 8px 24px #1820300b; }
.page-home .services-section { align-items: start; gap: clamp(36px, 7vw, 100px); }
.page-home .services-nav { position: sticky; top: 140px; margin: 0; transform: none; }
.page-home .services-nav h2 { font-size: clamp(38px, 4vw, 56px); letter-spacing: -.045em; }
.page-home .service-list > .service-item { position: relative; min-height: 150px; padding-block: 30px; }
.page-home .service-list h3 { font-size: clamp(23px, 2vw, 29px); line-height: 1.2; }
.page-home .service-list h3 a { display: flex; align-items: baseline; gap: 20px; justify-content: space-between; }
.page-home .service-list h3 a::after { content: ""; position: absolute; inset: 0; }
.page-home .service-list h3 a span { color: var(--accent); font-size: 23px; font-weight: 400; }
.page-home .service-list h3 a:hover { color: var(--accent); }
.page-home .service-list p { max-width: 520px; font-size: 16px; line-height: 1.65; }
.home-questions { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(30px, 7vw, 100px); padding-block: var(--home-section-space); }
.home-questions h2 { margin: 22px 0; font-size: clamp(34px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -.04em; }
.home-questions h2 em { color: var(--accent); font-style: normal; }
.home-questions details { border-top: 1px solid var(--line); }
.home-questions details:last-child { border-bottom: 1px solid var(--line); }
.home-questions summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; padding: 20px 0; list-style: none; cursor: pointer; font-size: 19px; font-weight: 500; }
.home-questions summary::-webkit-details-marker { display: none; }
.home-questions summary::after { content: "+"; color: var(--accent); font-size: 24px; font-weight: 400; }
.home-questions details[open] summary::after { content: "−"; }
.home-questions details p { margin: 0; padding: 0 28px 26px 0; font-size: 16px; line-height: 1.7; color: var(--muted); }
@media (max-width: 1000px) {
  .page-home .hero { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); min-height: 620px; gap: 20px; }
  .page-home .hero h1 { font-size: clamp(42px, 5.5vw, 58px); }
  .page-home .hero-copy { font-size: 16px; }
  .page-home .teaser-detail-card { display: none; }
}
@media (max-width: 800px) {
  .page-home .hero { grid-template-columns: 1fr; padding-block: 64px 36px; min-height: 0; }
  .page-home .hero-content { text-align: center; }
  .page-home .eyebrow { justify-content: center; font-size: 10px; }
  .page-home .hero h1 { font-size: clamp(40px, 7.8vw, 62px); margin-inline: auto; }
  .page-home .hero-copy { margin-inline: auto; max-width: 540px; }
  .page-home .hero-actions { justify-content: center; }
  .page-home .teaser-instrument { width: min(100%, 430px); margin-inline: auto; }
  .page-home .services-nav { position: static; text-align: center; }
  .page-home .services-nav p { margin-inline: auto; }
  .page-home .process { padding-inline: 12px; }
  .page-home .center-heading { text-align: center; }
  .page-home .center-heading h2 { margin-inline: auto; }
  .page-home .cta-panel { padding-inline: 28px; }
  .home-questions { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 520px) {
  .page-home .hero { padding-top: 46px; }
  .page-home .hero h1 { font-size: clamp(38px, 9.6vw, 49px); }
  .page-home .hero-actions { flex-direction: column; gap: 6px; }
  .page-home .hero-actions > .button-primary { width: auto; min-width: 215px; }
  .page-home .teaser-instrument { width: min(100%, 340px); }
  .page-home .service-list > .service-item { min-height: 0; padding-block: 26px; }
  .page-home .service-list p { font-size: 15px; }
  .page-home .process { padding-inline: 0; }
  .page-home .center-heading h2 { font-size: clamp(36px, 10vw, 48px); }
  .page-home .steps { grid-template-columns: 1fr; gap: 16px; }
  .page-home .steps article { text-align: left; padding: 26px 22px; min-height: 0; }
  .page-home .cta-panel { padding: 54px 22px; }
  .page-home .cta-panel h2 { font-size: clamp(36px, 10vw, 48px); letter-spacing: -.04em; }
  .page-home .cta-panel p { max-width: 32ch; margin-inline: auto; }
}
/* Keep the decorative wash inside the hero instead of widening the document. */
.page-home .hero::before { inset: 0; }
.page-home .hero::after { width: min(420px, 100%); }