/* Breakpoint for the burger/drawer switch is intentionally 1100px, not 900px —
   the 900–1250px range is a known squeeze zone for this nav item count even
   though both <900px and ≥1250px look fine in isolation. */
@media (max-width: 1100px) {
	.site-nav { display: none; }
	.header-cta { display: none; }
	.burger { display: inline-flex; }

	/* Reset any desktop hover/focus transforms so a stale state can't survive
	   into the mobile layout. */
	.nav-menu a:hover,
	.nav-menu a:focus-within { transform: none; }
}

@media (min-width: 1101px) {
	.mobile-drawer,
	.mobile-drawer-overlay { display: none; }
}

@media (max-width: 900px) {
	.service-row,
	.service-row--reverse {
		display: block;
	}
	.service-row__media,
	.service-row--reverse .service-row__media {
		grid-column: auto;
		order: 0;
		margin-bottom: 1.5rem;
		max-width: 420px;
	}
	.service-row__body,
	.service-row--reverse .service-row__body {
		grid-column: auto;
		order: 0;
	}

	.band__grid { display: block; }
	.band__text { grid-column: auto; margin-bottom: 2rem; }
	.band__image { grid-column: auto; max-width: 420px; }

	.contact-grid { display: block; }
	.contact-grid__info,
	.contact-grid__form { grid-column: auto; }
	.contact-grid__form { margin-top: var(--space-md); }

	.site-footer__grid { display: block; }
	.site-footer__col { grid-column: auto !important; margin-bottom: var(--space-sm); }

	:root {
		--space-lg: 4.5rem;
		--space-xl: 5.5rem;
		--space-xxl: 6.5rem;
	}
}

@media (max-width: 600px) {
	.hero { min-height: 78vh; }
	.hero__content { padding-block: var(--space-md) var(--space-sm); max-width: 100%; }

	.slider__slide { width: 84vw; }

	.closing__actions { flex-direction: column; align-items: stretch; }
	.closing__actions .btn { justify-content: center; }

	:root {
		--space-md: 3rem;
		--space-lg: 3.5rem;
		--space-xl: 4.5rem;
		--space-xxl: 5rem;
	}
}