/* DeepCiphers / Module 4: spacing and alignment only.
   Compositions, type, colours, surfaces, controls and motion stay page-owned.
   Pinned heights, carousel tracks, overlapping cards and form slots are excluded. */
@layer dc-spacing {
  :root {
    --dc-space-section: clamp(56px, 5vw, 72px);
    --dc-space-service: clamp(48px, 4vw, 56px);
    --dc-space-content: clamp(28px, 2.5vw, 36px);
    --dc-space-group: clamp(28px, 2.5vw, 36px);
    --dc-space-card-gap: 24px;
    --dc-space-copy: 16px;
  }

  /* These two roots inherited the browser's 8px body margin despite 100% width. */
  body:is(.contact-page, .partnership-page) { margin: 0 !important; }

  /* Home already has a controlled rhythm. Unify only its regular content sections. */
  .homeSections > :where(.howAiSection, #workflow, .aiFirstSection,
    .industrySection, .modernizationSection, .postLaunchSection, .aiAppsSection,
    .featuredCaseStudiesRefSection, .testimonialsSection, .toolsSection,
    .insightsSection, .finalCtaSection) {
    padding-block: var(--dc-space-section) !important;
  }
  .homeSections > .dc-home-services-cta {
    margin-top: var(--dc-space-content) !important;
    padding-bottom: var(--dc-space-section) !important;
  }

  /* About: remove accumulated outer margins, retaining full-bleed/pinned structures. */
  .about-page-root > main > :where(section.mt-24, section.mt-28, #leadership,
    .testimonials-surface) {
    margin-top: var(--dc-space-section) !important;
  }
  .about-page-root > main { padding-bottom: var(--dc-space-section) !important; }
  .about-page-root .values-section {
    margin-top: 0 !important;
    padding-top: var(--dc-space-section) !important;
    padding-bottom: 0 !important;
  }
  .about-page-root .values-title { margin-bottom: var(--dc-space-content) !important; }
  .about-page-root .mission-vision-surface > * + * {
    margin-top: var(--dc-space-group) !important;
  }
  .about-page-root .how-we-work-layout { margin-top: var(--dc-space-content) !important; }
  .about-page-root #about-story h2 { margin: 0 !important; }

  /* Company sections keep their own columns, imagery and sticky-stack runway. */
  .careers-page-main > :where(.roles, .experience, .culture-showcase, .benefits, .process) {
    padding-block: var(--dc-space-section) !important;
  }
  .careers-page-main :where(.heading, .culture-heading) {
    margin-bottom: var(--dc-space-content) !important;
  }
  .careers-page-main .experience > .heading { margin-bottom: 0 !important; }
  .team-page :where(.experts, .culture) { padding-block: var(--dc-space-section) !important; }
  .team-page .join { padding-top: var(--dc-space-section) !important; }
  .team-page .team-grid { row-gap: var(--dc-space-group) !important; }
  .team-page :where(.culture-panel, .join-card) { margin-top: var(--dc-space-content) !important; }

  /* Service sections: one measured rhythm without changing pinned service/project regions. */
  :is(html.page-service, html.page-web-development) :where(.tech-section,
    .engagement-section, .why-clients-section, .faq-section) {
    padding-block: var(--dc-space-service) !important;
    margin-block: 0 !important;
  }
  :is(html.page-service, html.page-web-development) :where(.tech-section,
    .engagement-section) .main-heading { margin-bottom: 0 !important; }
  :is(html.page-service, html.page-web-development) :where(.tech-section,
    .engagement-section) .cards-grid {
    margin-top: var(--dc-space-content) !important;
    gap: var(--dc-space-card-gap) !important;
  }
  :is(html.page-service, html.page-web-development) .engagement-section .heading-row {
    margin-bottom: 0 !important;
  }
  :is(html.page-service, html.page-web-development) .why-clients-section .why-title {
    margin-bottom: var(--dc-space-copy) !important;
  }
  :is(html.page-service, html.page-web-development) .why-clients-section .intro-wrap {
    margin-top: 0 !important;
  }
  :is(html.page-service, html.page-web-development) .why-clients-section .top-card-row {
    margin-top: var(--dc-space-content) !important;
  }
  :is(html.page-service, html.page-web-development) .why-clients-section .bottom-layout {
    margin-top: var(--dc-space-card-gap) !important;
  }
  :is(html.page-service, html.page-web-development) .faq-section .faq-heading {
    margin-bottom: var(--dc-space-content) !important;
  }
  :is(html.page-service, html.page-web-development) .faq-section .faq-grid {
    margin-top: 0 !important;
  }
  html.page-web-development :where(.dev-process-intro-section, .middle-svg-section) {
    margin-top: 0 !important;
    padding-block: var(--dc-space-service) !important;
  }
  html.page-web-development :where(.dev-process-svg-wrap, .middle-svg-inner) {
    margin-top: var(--dc-space-content) !important;
  }

  /* Transparent portfolio compositions and screenshot dimensions remain intact. */
  .portfolio-page .case-studies { padding-block: var(--dc-space-section) !important; }
  .portfolio-page .filters {
    margin-top: var(--dc-space-content) !important;
    margin-bottom: var(--dc-space-content) !important;
  }
  .portfolio-page .case-grid { gap: var(--dc-space-group) !important; }

  /* Contact form and split intro are untouched; only the later informational sections change. */
  .contact-content :where(.direct-section, .next-section) {
    padding-block: var(--dc-space-section) !important;
  }
  .contact-content :where(.direct-section, .next-section) > .section-heading {
    margin-bottom: var(--dc-space-content) !important;
  }

  @media (max-width: 700px) {
    :root {
      --dc-space-section: 44px;
      --dc-space-service: 40px;
      --dc-space-content: 28px;
      --dc-space-group: 28px;
      --dc-space-card-gap: 20px;
    }
  }
}