/* ──────────────────────────────────────────────────────────────
   microanalytics — Design System
   spacing.css · standard vertical rhythm (hero + section spacing)
   ──────────────────────────────────────────────────────────────
   The raw step scale (--space-1 … --space-13, 4 → 120px) lives in
   tokens.css. THIS file adds the SEMANTIC rhythm every page shares,
   so heroes and sections are spaced identically across the site.

   Link AFTER the other system stylesheets. The hero rule carries
   !important so it is the single source of truth for the gap below
   the sticky nav, regardless of any page-level <style> overrides.
   Respect these tokens on every page — don't hand-roll section padding.
   ────────────────────────────────────────────────────────────── */

:root {
  /* Hero — gap below the sticky nav + space before the next section */
  --space-hero-top:        96px;   /* desktop */
  --space-hero-top-sm:     64px;   /* ≤ 980px */
  --space-hero-top-xs:     48px;   /* ≤ 640px */
  --space-hero-bottom:     64px;
  --space-hero-bottom-sm:  40px;
  --space-hero-bottom-xs:  32px;

  /* Section — standard vertical padding (top / bottom) */
  --space-section-top:     96px;   /* desktop */
  --space-section-top-sm:  56px;
  --space-section-top-xs:  40px;
  --space-section-bottom:  24px;
}

/* ── Hero — consistent, generous gap below the nav on every page ── */
.svc-hero {
  padding: var(--space-hero-top) 0 var(--space-hero-bottom) !important;
}
@media (max-width: 980px) {
  .svc-hero { padding: var(--space-hero-top-sm) 0 var(--space-hero-bottom-sm) !important; }
}
@media (max-width: 640px) {
  .svc-hero { padding: var(--space-hero-top-xs) 0 var(--space-hero-bottom-xs) !important; }
}

/* ── Standard section spacing — opt-in helper for new sections ──
   Existing sections (.solutions/.foundation/.engage/.method) already
   use 96/24; new sections should use this class or the tokens above. */
.section-y {
  padding-top: var(--space-section-top);
  padding-bottom: var(--space-section-bottom);
}
@media (max-width: 980px) { .section-y { padding-top: var(--space-section-top-sm); } }
@media (max-width: 640px) { .section-y { padding-top: var(--space-section-top-xs); } }