/* ==============================
   RESPONSIVE
   ============================== */

@media (max-width: 1024px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 900px) {
	.services-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.contact-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.hero::before,
	.hero::after {
		display: none;
	}
}

@media (max-width: 768px) {
	section {
		padding: 56px 0;
	}

	.hero {
		padding: 64px 0 52px;
	}

	.cta {
		padding: 52px 0;
	}

	/* --- mobile nav --- */
	.menu-toggle {
		display: block;
	}

	.main-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #ffffff;
		border-top: 1px solid #e2e8f0;
		border-bottom: 1px solid #e2e8f0;
		box-shadow: 0 8px 24px rgba(15,23,42,.08);
		z-index: 199;
	}

	.site-header {
		position: relative;
	}

	.main-nav ul {
		display: none;
		flex-direction: column;
		gap: 4px;
		padding: 12px 16px 16px;
	}

	.main-nav ul.active {
		display: flex;
	}

	.main-nav a {
		display: block;
		padding: 10px 12px;
		border-radius: 8px;
	}

	.phone-btn {
		display: none;
	}

	.contact-form {
		padding: 24px;
	}

	/* --- grids --- */
	.services-grid,
	.gallery-grid,
	.footer-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.hero-buttons {
		flex-direction: column;
		align-items: flex-start;
	}

	.hero-features {
		gap: 16px;
	}

	.gallery-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 900px) {
	.services-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.contact-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

@media (max-width: 768px) {
	section {
		padding: 48px 0;
	}

	.hero {
		padding: 56px 0 48px;
	}

	/* --- mobile nav --- */
	.menu-toggle {
		display: block;
	}

	.main-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #ffffff;
		border-top: 1px solid #e2e8f0;
		border-bottom: 1px solid #e2e8f0;
		z-index: 199;
	}

	.site-header {
		position: relative;
	}

	.main-nav ul {
		display: none;
		flex-direction: column;
		gap: 0;
		padding: 8px 16px 16px;
	}

	.main-nav ul.active {
		display: flex;
	}

	.main-nav a {
		display: block;
		padding: 10px 8px;
		border-radius: 6px;
	}

	.phone-btn {
		display: none;
	}

	/* --- grids --- */
	.services-grid,
	.gallery-grid,
	.footer-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.hero-buttons {
		flex-direction: column;
		align-items: flex-start;
	}

	.gallery-grid {
		grid-template-columns: 1fr;
	}
}