/* ============================================================
   NORTHWEST WEB DEVELOPMENT — styles_responsive.css
   Breakpoints — mobile-first adjustments
   ============================================================ */


/* ────────────────────────────────────────────
   ≤ 1100px  (tighter containers)
──────────────────────────────────────────── */
@media only screen and (max-width: 1100px) {
	.pad {
		padding: 0 28px;
	}
	.statsInner {
		gap: 48px;
	}
	.whoGrid {
		gap: 48px;
	}
	.aiInner {
		gap: 48px;
	}
}


/* ────────────────────────────────────────────
   ≤ 900px  (switch to mobile nav, stack grids)
──────────────────────────────────────────── */
@media only screen and (max-width: 900px) {

	/* Switch to hamburger */
	.navLinks {
		display: none;
	}
	#mobileMenuToggle {
		display: flex;
	}
	#mobileMenu {
		display: block;
	}

	/* Who I Am — stack vertically */
	.whoGrid {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.whoVisual {
		aspect-ratio: 16/9;
		max-height: 320px;
	}

	/* Services — 2 col */
	.servicesGrid {
		grid-template-columns: repeat(2, 1fr);
	}
	.serviceCardDark {
		grid-column: span 2;
	}

	/* Testimonials — stack */
	.testimonialsGrid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	/* Process — 2 col */
	.processSteps {
		grid-template-columns: repeat(2, 1fr);
		gap: 48px;
	}
	.processSteps::before {
		display: none;
	}

	/* AI section — stack */
	.aiInner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	/* Footer — stack */
	.ftrInner {
		flex-direction: column;
		text-align: center;
		gap: 28px;
	}
	.ftrNav {
		justify-content: center;
		gap: 20px;
	}

}


/* ────────────────────────────────────────────
   ≤ 680px  (single column everything)
──────────────────────────────────────────── */
@media only screen and (max-width: 680px) {

	.pad {
		padding: 0 20px;
	}

	/* Hero */
	.homeHeroContent {
		padding: 140px 20px 80px;
	}
	.heroCTAs {
		flex-direction: column;
	}
	.btnPrimary,
	.btnSecondary,
	.btnPrimaryDark {
		width: 100%;
		justify-content: center;
	}
	.heroScroll {
		display: none;
	}

	/* Stats */
	.statsInner {
		gap: 32px;
	}
	.stat {
		width: 40%;
	}

	/* Who I Am */
	.whoIAm {
		padding: 80px 0;
	}

	/* Services — single col */
	.homeServices {
		padding: 80px 0;
	}
	.servicesGrid {
		grid-template-columns: 1fr;
	}
	.serviceCardDark {
		grid-column: span 1;
	}

	/* Testimonials */
	.homeTestimonials {
		padding: 80px 0;
	}

	/* Process */
	.homeProcess {
		padding: 80px 0;
	}
	.processSteps {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	/* AI */
	.homeAI {
		padding: 80px 0;
	}

	/* CTA */
	.homeCTA {
		padding: 100px 0;
	}
	.homeCTA h2 {
		font-size: clamp(32px, 8vw, 48px);
	}

}


/* ────────────────────────────────────────────
   ≤ 420px  (small phones)
──────────────────────────────────────────── */
@media only screen and (max-width: 420px) {

	.statNumber {
		font-size: 28px;
	}
	.stat {
		width: 45%;
	}
	.testimonialCard {
		padding: 28px 24px;
	}

}