/* Shared spacing rhythm for the development portfolio. */
:root {
  --page-gutter: clamp(20px, 3.5vw, 40px);
  --section-space: clamp(64px, 7vw, 96px);
  --card-space: clamp(20px, 2.2vw, 28px);
}

.wrap { width: min(1240px, calc(100% - var(--page-gutter) * 2)); }
.header { width: 100%; padding-inline: max(var(--page-gutter), calc((100% - 1240px) / 2)); }
.preview { padding-inline: max(var(--page-gutter), calc((100% - 1240px) / 2)); }
.section { padding-block: var(--section-space); }
.heading { margin-bottom: clamp(32px, 3.5vw, 48px); }
.heading h1, .about h1 { margin-top: 0; }
.breadcrumbs { padding-block: 24px; flex-wrap: wrap; }
.page-view > .breadcrumbs + section .section,
.page-view > .breadcrumbs + .section { padding-top: 48px; }

.services article, .services article:first-child, .services article:last-child,
.project-info, .package, .included li, .values li, .evidence article,
.toolkit article, .process-steps li, .journey li, .hw-body, .capability-side {
  padding: var(--card-space);
  min-width: 0;
}
.services, .projects, .packages { gap: 24px; }
.services ul, .services .placeholder-note { margin-bottom: 24px; }
.services article > a.button { margin-top: 0; }
.home-view #work { padding-bottom: 32px; }
.all-work-link { padding-bottom: var(--section-space); }
.maker-section { padding-bottom: var(--section-space); }
.client-callout, .page-next { margin-bottom: var(--section-space); }
.faq-section + .client-callout { margin-top: var(--section-space); }
.client-callout + .page-next { margin-top: -32px; }
.panel-body { padding: var(--card-space); }
.contact-panel { padding: 0; }
.contact-links > div { flex-wrap: wrap; gap: 8px 16px; }
.contact-links dd { margin-left: auto; }
.system-layers li { padding: var(--card-space); gap: 16px; }
.system-layers li > div { min-width: 0; }
.system-layers h3 { overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-section, .maker-section, .contact-details { column-gap: 40px; }
  .contact-form-section { column-gap: 32px; }
}

@media (max-width: 800px) {
  .heading, .about { gap: 16px; }
  .heading > .eyebrow, .about > .eyebrow { padding-top: 0; }
  .heading > div > p { margin-top: 16px; }
  .services, .projects, .packages { gap: 20px; }
  .capability-strip { margin-top: 24px; }
  .page-view > .breadcrumbs + section .section,
  .page-view > .breadcrumbs + .section { padding-top: 32px; }
  .journey li { column-gap: 16px; }
  .footer-top { padding-block: 48px 32px; gap: 32px; }
  .footer-nav { gap: 28px 20px; }
}

@media (max-width: 480px) {
  .process-steps { grid-template-columns: 1fr; }
  .system-layers li { flex-wrap: wrap; }
  .system-layers li > div { flex-basis: calc(100% - 62px); }
  .system-layers li > i { display: none; }
  .faq details { padding-inline: 20px; }
  .faq summary { gap: 16px; }
}