/* ── Breakpoints ─────────────────────────────────────────────
   xs:   < 480px
   sm:   480px – 767px
   md:   768px – 1023px
   lg:   1024px – 1199px
   xl:   ≥ 1200px
──────────────────────────────────────────────────────────── */

/* Section padding reduction on mobile */
@media (max-width: 768px) {
    .section      { padding-block: var(--space-12); }
    .section--sm  { padding-block: var(--space-8); }

    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl); }

    .section-title    { font-size: var(--text-2xl); }
    .section-subtitle { font-size: var(--text-base); }
}

@media (max-width: 480px) {
    .section { padding-block: var(--space-10); }
    h1 { font-size: var(--text-2xl); }
}