/* ==========================================================================
   Agency Pro — Responsive Rules
   Breakpoints: Desktop (default, >1024px) -> Tablet (<=1024px) -> Mobile (<=640px)
   Built mobile-first in spirit: base main.css uses simple, scalable units;
   these overrides progressively simplify the grid as viewport shrinks.
   ========================================================================== */

/* --------------------------------------------------------------------
   Tablet: <= 1024px
   -------------------------------------------------------------------- */
@media (max-width: 1024px) {

	.agency-main section {
		padding: 72px 0;
	}

	.agency-header-nav {
		display: none;
	}

	.agency-header-phone {
		display: none;
	}

	.agency-mobile-toggle {
		display: flex;
	}

	.agency-hero-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.agency-hero-visual {
		min-height: 320px;
		order: -1;
	}

	.agency-hero-desc {
		max-width: 100%;
	}

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

	.agency-why-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

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

	.agency-industries-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.agency-ai-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.agency-ai-visual {
		order: -1;
	}

	.agency-footer-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* --------------------------------------------------------------------
   Mobile: <= 640px
   -------------------------------------------------------------------- */
@media (max-width: 640px) {

	.agency-container {
		padding: 0 18px;
	}

	.agency-main section {
		padding: 56px 0;
	}

	.agency-header-inner {
		height: 68px;
	}

	.agency-header-actions .agency-btn {
		display: none;
	}

	.agency-hero {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.agency-hero-heading {
		font-size: 32px;
	}

	.agency-hero-desc {
		font-size: 16px;
	}

	.agency-hero-buttons {
		flex-direction: column;
	}

	.agency-hero-buttons .agency-btn {
		width: 100%;
	}

	.agency-hero-stats {
		gap: 24px;
	}

	.agency-stat-number {
		font-size: 24px;
	}

	.agency-hero-visual {
		min-height: 260px;
	}

	.agency-visual-card-main {
		height: 260px;
	}

	.agency-floating-card {
		padding: 10px 14px;
	}

	.agency-floating-card-1 {
		top: 4%;
		right: 0;
	}

	.agency-floating-card-2 {
		bottom: 2%;
		left: 0;
	}

	.agency-floating-card-3 {
		display: none;
	}

	.agency-section-heading {
		margin-bottom: 36px;
	}

	.agency-services-grid,
	.agency-case-grid,
	.agency-industries-grid,
	.agency-footer-grid {
		grid-template-columns: 1fr;
	}

	.agency-service-card {
		padding: 24px;
	}

	.agency-why-item {
		flex-direction: column;
		text-align: left;
	}

	.agency-testimonial-slide {
		padding: 28px;
	}

	.agency-testimonial-text {
		font-size: 16px;
	}

	.agency-final-cta-inner {
		padding: 0 8px;
	}

	.agency-footer {
		padding-top: 48px;
	}

	.agency-footer-grid {
		gap: 32px;
	}
}

/* Touch-friendly tap targets across all breakpoints below desktop */
@media (max-width: 1024px) {
	.agency-btn,
	.agency-mobile-toggle,
	.agency-testimonial-prev,
	.agency-testimonial-next,
	.agency-testimonial-dot {
		min-height: 44px;
	}

	.agency-testimonial-dot {
		min-height: 9px;
	}
}