/* ==========================================================================
   Reigrow Solutions — responsive.css
   Breakpoints preserve the original design's behaviour exactly.
   1024px: tablet · 860px: nav collapses to hamburger · 640px: phone.
   ========================================================================== */

@media (max-width: 1024px) {
	.bento { grid-template-columns: repeat(4, 1fr); }
	.bento .project-card--span2 { grid-column: span 2; }
	.bento .project-card--span3 { grid-column: span 2; }
	.bento .project-card--span4 { grid-column: span 4; }
	.mission__stats { gap: 4px; }
	.has-sidebar .content-area,
	.content-area.has-sidebar { grid-template-columns: minmax(0, 1fr); }
	.sidebar { max-width: 640px; }
}

@media (max-width: 860px) {
	.nav__menu,
	.nav__cta--desktop,
	.nav__icons--desktop { display: none; }
	.nav__mobile { display: inline-flex; }
	.nav__cluster { padding: 6px; }

	.split { gap: 40px; }
	.split__main,
	.split__aside { flex: 1 1 100%; }
	.split--reverse-mobile { flex-direction: column-reverse; }

	.cta-band--split .cta-band__row { flex-direction: column; align-items: flex-start; text-align: left; }

	.service-row { flex-direction: column; }
	.service-row--rev { flex-direction: column; }

	.mission__stats { grid-template-columns: repeat(3, 1fr); }
	.post-nav a { max-width: 100%; }
}

@media (max-width: 640px) {
	body { font-size: 15.5px; }

	.bento { grid-template-columns: 1fr; }
	.bento .project-card--span2,
	.bento .project-card--span3,
	.bento .project-card--span4 { grid-column: span 1; }

	.section { padding-block: clamp(52px, 12vw, 72px); }
	.field-row { grid-template-columns: 1fr; }
	.checklist { grid-template-columns: 1fr; }

	.mission__stats { grid-template-columns: 1fr; gap: 22px; }
	.mission__stat { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .1); padding: 16px 0 0; }
	.mission__stat:first-child { padding: 0; border-top: 0; }

	.float-badge { transform: scale(.86); }
	.float-badge--tr { top: -14px; right: -4px; }
	.float-badge--bl { bottom: -14px; left: -4px; }

	.cta-band__actions { flex-direction: column; }
	.cta-band__actions .btn { width: 100%; }

	.actions .btn { width: 100%; }
	.site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }

	.filters { gap: 8px; }
	.filter-btn { padding: 9px 15px; font-size: 13px; }
}

@media (max-width: 420px) {
	.brand__word { font-size: 18px; }
	.display { font-size: clamp(2.2rem, 10vw, 2.8rem); }
}