/* Shared spacing rhythm for public interior pages. Service Areas is intentionally excluded. */
:root {
  --sbh-section-space: clamp(3.4rem, 5vw, 4.15rem);
  --sbh-section-space-mobile: 3rem;
}

.sl-section,
.co-section,
.ct-section,
.fb-section,
.fb-cta,
.ff-section,
.sbh-process-section,
.ps-section {
  padding-top: var(--sbh-section-space) !important;
  padding-bottom: var(--sbh-section-space) !important;
}

.sl-hero {
  min-height: 32rem !important;
  padding-top: 4.25rem !important;
  padding-bottom: 4.25rem !important;
}

.co-hero,
.ps-hero {
  min-height: 32rem !important;
  padding-top: 4.25rem !important;
  padding-bottom: 4.25rem !important;
}

.ct-hero,
.fb-hero {
  padding-top: 8.75rem !important;
  padding-bottom: 3.75rem !important;
}

.sl-about,
.co-split,
.ct-layout,
.ps-summary {
  gap: clamp(1.5rem, 3vw, 2.75rem) !important;
}

.sl-gallery,
.sl-process,
.sl-values,
.sl-related,
.co-values,
.fb-grid,
.ct-grid,
.ps-grid {
  gap: clamp(1rem, 2vw, 1.35rem) !important;
}

.sl-section h2,
.co-section h2,
.ct-section h2,
.fb-section h2,
.ff-section h2,
.ps-section h2 {
  margin-bottom: 1rem;
}

@media (max-width: 760px) {
  .sl-section,
  .co-section,
  .ct-section,
  .fb-section,
  .fb-cta,
  .ff-section,
  .sbh-process-section,
  .ps-section {
    padding-top: var(--sbh-section-space-mobile) !important;
    padding-bottom: var(--sbh-section-space-mobile) !important;
  }

  .sl-hero,
  .co-hero,
  .ps-hero {
    min-height: 28rem !important;
    padding-top: 3.25rem !important;
    padding-bottom: 3.25rem !important;
  }

  .ct-hero,
  .fb-hero {
    padding-top: 7.25rem !important;
    padding-bottom: 3.1rem !important;
  }
}

@media (max-width: 480px) {
  :root { --sbh-section-space-mobile: 2.65rem; }

  .sl-hero,
  .co-hero,
  .ps-hero {
    min-height: 26rem !important;
  }
}