/* ==========================================================================
Mobile-first breakpoints. Base styles above target < 768px.
========================================================================== */

/* --- Small phones: keep body text >= 14px, no horizontal scroll --- */
@media
(max-width: 399px) {
.hero__stats { grid-template-columns: 1fr; gap: var(--sp-3); }
.about__facts { grid-template-columns: 1fr; }
.btn { width: 100%; justify-content: center; }
}

/* --- Large phone / small tablet --- */
@media
(min-width: 560px) {
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Tablet --- */
@media
(min-width: 768px) {
.footer__top { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-5); }
.feature { grid-template-columns: 1fr 1fr; padding: var(--sp-5); }
.contact__grid { grid-template-columns: 1fr 1fr; }
}

/* --- Desktop: reveal the mega menu, hide the mobile drawer --- */
@media
(min-width: 1024px) {
.nav__list { display: flex; }
.nav__toggle { display: none; }
.drawer { display: none; }

.hero__inner { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-4); }
.stage { display: block; }

.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.about__grid { grid-template-columns: 0.95fr 1.05fr; gap: var(--sp-6); }
.gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Wide desktop: let whitespace breathe --- */
@media
(min-width: 1440px) {
:root { --sp-section: clamp(6rem, 13vh, 11rem); }
}

/* --- Print fallback --- */
@media
print {
.nav,
.drawer,
.stage,
.hero::after { display: none; }

body { background: #fff; color: #111; }
.hero { min-height: auto; background-image: none; }
.hero::before { display: none; }
}