/* =========================================================
   RESPONSIVE
   Breakpoints:
     Desktop : > 1024px  (rail nav, 3-col cards, 2-col grids)
     Tablet  : 641px - 1024px (rail collapses to icons only, 2-col grids)
     Mobile  : <= 640px  (hamburger + fullscreen menu, single column,
               cards stacked full-width — matches the supplied mobile
               mockup exactly rather than shrinking the desktop grid)
========================================================= */

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.mcg-rail__label { display: none; }

	.mcg-hero__grid { grid-template-columns: 1fr; }
	.mcg-hero__cards { order: -1; }
	.mcg-cards { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }

	.mcg-stats-strip { grid-template-columns: repeat(2, 1fr); }
	.mcg-stats-strip__cta { grid-column: span 2; }

	.mcg-about__grid,
	.mcg-services__grid,
	.mcg-portfolio__grid,
	.mcg-testimonials__grid,
	.mcg-statistics__grid,
	.mcg-archive__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.mcg-about__grid { grid-template-columns: 1fr; }

	.mcg-footer__inner { grid-template-columns: 1fr 1fr; }
}

/* ---------- Mobile ----------
   The desktop icon rail and glass-blur transparent header are
   replaced entirely by the hamburger + fullscreen menu pattern
   from the mobile mockup; content also loses the left rail offset.
*/
@media (max-width: 640px) {

	body.mcg-body { font-size: 0.95rem; }

	/* Header: hamburger left, logo center, CTA right */
	.mcg-rail { display: none; }
	.mcg-hamburger { display: block; }
	.mcg-header__inner { padding: 0.9rem 1.1rem; }
	.mcg-header[data-scrolled="true"] { background: rgba(10, 10, 10, 0.85); }

	.mcg-section,
	.mcg-hero,
	.mcg-footer {
		padding-inline-start: var(--mcg-gutter);
	}

	/* ---------- Hero ---------- */
	.mcg-hero { min-height: auto; padding-top: 6rem; }
	.mcg-hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
	.mcg-hero__content { max-width: 100%; }
	.mcg-hero__headline { font-size: clamp(2.25rem, 10vw, 3rem); }
	.mcg-hero__actions { flex-direction: column; align-items: flex-start; gap: 1.25rem; }

	/* ---------- Division cards: full-width stacked, matches mobile mockup ---------- */
	.mcg-cards { grid-template-columns: 1fr; gap: 1.25rem; max-width: 100%; }
	.mcg-card { aspect-ratio: 4 / 5; }

	/* ---------- Stats + CTA strip: 2x2 grid, CTA below full width ---------- */
	.mcg-stats-strip { grid-template-columns: repeat(2, 1fr); border-radius: var(--mcg-radius-md); }
	.mcg-stat { padding: 1.1rem; }
	.mcg-stat__value, .mcg-stat__suffix { font-size: 1.5rem; }
	.mcg-stats-strip__cta { grid-column: 1 / -1; text-align: left; }

	.mcg-logo-marquee__track { animation-duration: 20s; }

	/* ---------- Generic sections stack to 1 column ---------- */
	.mcg-about__grid,
	.mcg-services__grid,
	.mcg-portfolio__grid,
	.mcg-testimonials__grid,
	.mcg-statistics__grid,
	.mcg-archive__grid {
		grid-template-columns: 1fr;
	}

	.mcg-typography-section__words { padding-inline: 1.25rem; text-align: center; }

	/* ---------- Footer stacks ---------- */
	.mcg-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
	.mcg-footer__social { align-items: flex-start; }

	/* Mobile fullscreen menu panel takes full width on very small screens */
	.mcg-mobile-menu__panel { width: 100vw; }
}