/*
 * Responsive breakpoints.
 * Tablet breakpoint is ≤1024px (not just ≤640px) for the header nav —
 * verified against real content in the prior build round that the nav
 * items + phone + button overlap well before 640px on real device widths.
 */

/* ---------------------------------------------------------------------
   Tablet — ≤1024px
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
	:root { --container-pad: 40px; }

	/* Header: collapse to hamburger */
	.nav-menu { display: none; }
	.hamburger { display: flex; }
	.site-header__inner { padding-top: 14px; padding-bottom: 14px; }
	.header-phone span { display: none; }

	.mobile-nav {
		display: none;
		flex-direction: column;
		gap: 0;
		list-style: none;
		background: var(--white);
		border-top: 1px solid var(--gray-300);
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 99;
		box-shadow: 0 12px 24px rgba(0,0,0,0.12);
	}
	.mobile-nav.is-open { display: flex; }
	.mobile-nav a {
		display: flex;
		align-items: center;
		min-height: 28px;
		padding: 24px var(--container-pad);
		border-bottom: 1px solid var(--gray-100);
		font-family: var(--font-heading);
		font-weight: 600;
		font-size: 16px;
		letter-spacing: 0.45px;
		text-transform: uppercase;
		color: var(--black);
	}
	.mobile-nav .btn { margin: 24px var(--container-pad); padding-top: 18px; padding-bottom: 18px; }

	/* Hero */
	.hero { flex-direction: column; min-height: 0; }
	.hero__content { flex: none; max-width: 100%; width: 100%; padding: 56px var(--container-pad); }
	.hero__heading { font-size: 38px; }
	.hero__photo { flex: none; width: 100%; height: 360px; position: relative; }

	/* About hero */
	.about-hero { flex-direction: column; padding: 56px var(--container-pad); }
	.about-hero__photo { width: 100%; height: 420px; }
	.about-hero__story-text { max-width: 100%; }

	/* Contact */
	.contact-section { flex-direction: column; padding: 56px var(--container-pad); }
	.contact-info-card { width: 100%; flex: none; }

	/* Projects grid: 2-up */
	.projects-grid, .project-row { justify-content: center; }
	.project-card { width: 46%; min-width: 300px; height: auto; aspect-ratio: 1 / 1; }

	/* Gallery slider: 2 images visible at this width instead of 3. */
	.project-gallery-grid .gallery-item { flex-basis: calc((100% - 13px) / 2); }
	.gallery-slider__arrow { width: 38px; height: 38px; }
	.gallery-slider__arrow svg { width: 18px; height: 18px; }

	.footer-top { padding-left: var(--container-pad); padding-right: var(--container-pad); }
	.footer-bottom { padding-left: var(--container-pad); padding-right: var(--container-pad); }

	.section-header, .h2 { font-size: 32px; }
}

/* ---------------------------------------------------------------------
   Mobile — ≤640px
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
	:root { --container-pad: 20px; }

	body { font-size: 16px; }

	.branding__name { font-size: 17px; }
	.branding__meta { font-size: 10.5px; }
	.branding__mark { width: 42px; height: 42px; }

	/* Header: the "Request a Quote" button in the top bar is dropped at
	   this width — it's already repeated inside the mobile-nav dropdown
	   (see .mobile-nav .btn). With the button gone there's room for the
	   phone icon + hamburger to sit next to the logo without crowding or
	   overflowing it (this is what was overlapping the logo before). */
	.header-actions { gap: 16px; }
	.header-actions > .btn-primary { display: none; }
	.header-phone svg { width: 20px; height: 20px; }

	.hero__heading { font-size: 30px; }
	.hero__badges { gap: 20px 28px; }
	.hero__actions { flex-direction: column; width: 100%; }
	.hero__actions .btn { width: 100%; }
	.hero__photo { height: 240px; }

	.h1, .egami-h1, .page-header-bar .h1 { font-size: 32px; }
	.h2, .egami-h2 { font-size: 26px; }
	.cta-band .h2 { font-size: 26px; }
	.error-404__code { font-size: 64px; }

	.about-hero__photo { height: 300px; }
	.stat-row { gap: 24px; }

	.form-row { flex-direction: column; }
	.contact-info-card { padding: 24px; }

	.project-card { width: 100%; min-width: 0; }

	/* Gallery slider: 1 image visible at this width, arrows shrink further. */
	.project-gallery-grid .gallery-item { flex-basis: 100%; }
	.gallery-slider { gap: 6px; }
	.gallery-slider__arrow { width: 32px; height: 32px; }
	.gallery-slider__arrow svg { width: 16px; height: 16px; }
	.egami-lightbox { padding: 16px; }
	.egami-lightbox__arrow { width: 40px; height: 40px; }
	.egami-lightbox__arrow--prev { left: 8px; }
	.egami-lightbox__arrow--next { right: 8px; }

	.filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
	.filter-pill { flex-shrink: 0; }

	.cert-band { gap: 32px; }
	.cert-band__item { width: 140px; }
	.cert-band__pill { width: 120px; height: 120px; }

	.footer-top { flex-direction: column; gap: 28px; padding-top: 48px; }
	.footer-bottom { padding: 20px; }
	.footer-bottom p { font-size: 11.5px; }

	.contact-section, .about-hero, .hero__content { padding-left: var(--container-pad); padding-right: var(--container-pad); }
}