/* =========================================================
   RESPONSIVE.CSS
   Breakpoints: 1920 / 1440 / 1280 / 1024 / 768 / 430 / 390 / 375 / 320
   ========================================================= */

/* ---- Large desktops (1440px and below tighten container a touch) ---- */
@media (max-width: 1440px) {
	:root { --container-width: 1160px; }
}

/* ---- Small desktop / large tablet ---- */
@media (max-width: 1280px) {
	:root { --container-width: 1080px; }
	.grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Small desktop / large tablet ---- */
@media (max-width: 1024px) {
	:root { --container-width: 1080px; }
	.grid-4 { grid-template-columns: repeat(2, 1fr); }
	.split { gap: 40px; }
	.footer-top { grid-template-columns: 1.2fr 1fr 1fr; row-gap: 40px; }
	.grid-3 { grid-template-columns: repeat(2, 1fr); }
	.stats-bar { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }

	/* Header & Mobile Slide-Out Drawer (Medium Devices 1024px & below) */
	.site-header .container { height: 80px; }
	.menu-toggle { display: flex; }

	.menu-toggle.is-active,
	body.menu-is-open .site-header .menu-toggle {
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
		transition: opacity 0.2s ease, visibility 0.2s ease;
	}

	.main-navigation {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 10005;
		width: 50vw;
		min-width: 320px;
		max-width: 480px;
		height: 100vh;
		height: 100dvh;
		background: #0b1528;
		border-right: 1px solid rgba(255, 255, 255, 0.15);
		box-shadow: 15px 0 50px rgba(0, 0, 0, 0.8);
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		padding: 0 0 32px;
		gap: 0;
		transform: translateX(-100%);
		transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
		overflow-y: auto;
		opacity: 1 !important;
		pointer-events: auto !important;
		-webkit-font-smoothing: antialiased;
	}

	.main-navigation.is-open {
		transform: translateX(0);
	}

	.mobile-nav-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 24px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
		width: 100%;
		margin-bottom: 20px;
		background: #0b1528;
	}

	.mobile-nav-header .site-branding a {
		color: #ffffff;
	}

	.nav-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		width: 100%;
		padding: 0 24px;
	}

	.nav-menu a {
		font-size: 19px;
		font-weight: 700;
		color: #ffffff !important;
		opacity: 1 !important;
		display: block;
		padding: 10px 0;
		width: 100%;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
		pointer-events: auto !important;
		cursor: pointer !important;
		position: relative;
		z-index: 10010;
	}

	.nav-menu a:hover,
	.nav-menu .current-menu-item a {
		color: var(--color-blue-400) !important;
	}

	.nav-menu a::after,
	.nav-menu a:hover::after,
	.nav-menu .current-menu-item a::after {
		display: none !important;
		content: none !important;
	}

	.header-cta {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		width: 100%;
		padding: 24px 24px 0;
		margin-top: 16px;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
	}

	.header-cta .btn {
		width: 100%;
		justify-content: center;
	}
}

/* ---- Tablet portrait ---- */
@media (max-width: 768px) {
	.site-logo-img, .site-logo-wrap img { height: 42px; }
	.section { padding: 44px 0; }
	.section-tight { padding: 28px 0; }
	.section-header { margin-bottom: 28px; }

	.hero { padding: 75px 0 50px; }
	.hero-has-slider { padding: 80px 0 50px; }
	.hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; }
	.hero-actions .btn { width: auto; flex: 0 0 auto; }
	.hero-inner.center .hero-actions { justify-content: center; }

	.split { grid-template-columns: 1fr; }
	.split-media { order: -1; margin-bottom: 24px; }
	.split-media .float-card { position: static; margin-top: -40px; margin-left: 16px; max-width: none; width: calc(100% - 32px); }

	.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
	.stats-bar { grid-template-columns: repeat(2, 1fr); padding: 28px; }

	.footer-top { grid-template-columns: 1fr 1fr; gap: 32px; padding-bottom: 40px; }
	.footer-brand { grid-column: 1 / -1; }

	.form-row { grid-template-columns: 1fr; }
	.cta-section { padding: 48px 24px; }
}

/* ---- Mobile ---- */
@media (max-width: 430px) {
	.site-header .container { height: 76px; }
	.main-navigation { width: 85vw; min-width: 280px; max-width: 360px; }
	.container { padding: 0 18px; }
	.hero { padding: 60px 0 38px; }
	.hero-has-slider { padding: 68px 0 40px; }
	.hero h1 { font-size: clamp(28px, 8.5vw, 38px); }
	.hero .lead { font-size: 16px; }
	.section-header h2 { font-size: 26px; }
	.section-header p { font-size: 16px; }
	.card { padding: 28px 22px; }
	.footer-top { grid-template-columns: 1fr; }
	.footer-bottom { flex-direction: column; align-items: flex-start; }
	.stats-bar { grid-template-columns: 1fr; }
	.cta-section h2 { font-size: 24px; }
	.contact-info-card { padding: 28px; }
	.page-hero { padding: 50px 0 36px; }
	.error-404 .code { font-size: 64px; }
}

@media (max-width: 375px) {
	.site-branding a { font-size: 19px; }
	.btn { padding: 14px 24px; font-size: 14px; }
}

@media (max-width: 320px) {
	.container { padding: 0 14px; }
	.hero h1 { font-size: 26px; }
	.card { padding: 22px 18px; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.fade-in-up { opacity: 1; transform: none; }
}