/**
 * HiGuppy — global section spacing (all subpages).
 * Loaded after hg-design.css, higuppy-pages.css, and about styles.
 */

:root {
  --hg-section-py: 48px;
  --hg-section-py-tight: 20px;
  --hg-section-py-sm: 32px;
  --hg-section-head-mb: 24px;
  --hg-cta-band-mb: 40px;
  --ha-section-py: 40px;
}

/* ─── hg-design + higuppy-pages (.higuppy-page) ─────────── */
.higuppy-page .hg-section {
  padding-top: var(--hg-section-py);
  padding-bottom: var(--hg-section-py);
}

.higuppy-page .hg-section + .hg-section {
  padding-top: var(--hg-section-py-tight);
}

.higuppy-page .hg-section-sm {
  padding-top: var(--hg-section-py-sm);
  padding-bottom: var(--hg-section-py-sm);
}

.higuppy-page .hg-section-sm + .hg-section,
.higuppy-page .hg-section + .hg-section-sm {
  padding-top: var(--hg-section-py-tight);
}

.higuppy-page .hg-section-head {
  margin-bottom: var(--hg-section-head-mb);
}

.higuppy-page .hg-hero,
.higuppy-page .hg-sub-hero {
  padding-bottom: 56px;
}

.higuppy-page .hg-cta-band {
  margin-bottom: var(--hg-cta-band-mb);
}

.higuppy-page .contact-main-section {
  margin-top: -24px;
  padding-bottom: 16px;
}

.higuppy-page .contact-main-section + .hg-section {
  padding-top: 20px;
}

/* ─── About page (.higuppy-about) ───────────────────────── */
.higuppy-about {
  --ha-section-py: 40px;
}

.higuppy-about .ha-section {
  padding-top: var(--ha-section-py);
  padding-bottom: var(--ha-section-py);
}

.higuppy-about .ha-section + .ha-section {
  padding-top: 18px;
}

.higuppy-about .ha-section-title {
  margin-bottom: 24px;
}

.higuppy-about .ha-section-desc {
  margin: -12px auto 24px;
}

.higuppy-about .ha-hero {
  padding-bottom: 24px;
}

/* ─── Tablet / mobile ───────────────────────────────────── */
@media (max-width: 900px) {
  :root {
    --hg-section-py: 28px;
    --hg-section-py-tight: 12px;
    --hg-section-py-sm: 24px;
    --hg-section-head-mb: 18px;
    --hg-cta-band-mb: 32px;
    --ha-section-py: 28px;
  }

  .higuppy-page .hg-hero,
  .higuppy-page .hg-sub-hero {
    padding-bottom: 40px;
  }

  .higuppy-about .ha-hero {
    padding-bottom: 16px;
  }

  .higuppy-about .ha-section + .ha-section {
    padding-top: 12px;
  }
}

@media (max-width: 640px) {
  :root {
    --hg-section-py: 24px;
    --hg-section-py-tight: 10px;
    --ha-section-py: 24px;
  }

  .higuppy-page .hg-cta-band {
    margin-bottom: 28px;
  }
}