/* ==========================================================================
   pages.css — per-page composition and section rhythm only.
   No new component styling here; every value references a token.
   ========================================================================== */

/* Shared: a section's heading group */
.section > .container > .section__head:first-child {
  margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
  .section > .container > .section__head:first-child {
    margin-bottom: var(--space-5);
  }
}

/* --------------------------------------------------------------------------
   Home
   -------------------------------------------------------------------------- */
.home-services {
  background: var(--surface-1);
}

.home-services .section__head {
  max-width: 52ch;
}

.home-process {
  background: var(--surface-2);
}

.home-featured .section__head {
  max-width: 52ch;
}

.home-faq {
  background: var(--surface-2);
}

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */
.services-explorer {
  background: var(--surface-1);
}

.services-closing {
  background: var(--surface-1);
  padding-bottom: var(--section-y-sm);
}

@media (min-width: 1024px) {
  .services-closing {
    padding-bottom: var(--section-y);
  }
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.about-capability {
  background: var(--surface-1);
}

.about-capability .prose {
  max-width: var(--container-narrow);
}

.about-capability .prose p + p {
  margin-top: var(--space-3);
}

.about-values {
  background: var(--surface-2);
}

.about-quotes {
  background: var(--surface-1);
}

/* --------------------------------------------------------------------------
   Projects
   -------------------------------------------------------------------------- */
.projects-list {
  background: var(--surface-1);
}

.projects-list .case + .case {
  margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   Utilities used sparingly in page markup
   -------------------------------------------------------------------------- */
.u-measure { max-width: 62ch; }
.u-mt-3 { margin-top: var(--space-3); }
.u-mt-4 { margin-top: var(--space-4); }