:root {
	--mobile-nav-panel-width: min(84vw, 360px);
	--mobile-nav-transition: cubic-bezier(0.4, 0, 0.2, 1);
}

body {
	--mobile-nav-scrollbar: 0px;
}

@media (max-width: 991.98px) {
	body.mobile-nav-open {
		overflow: hidden;
		height: 100%;
		position: relative;
		touch-action: none;
		padding-right: var(--mobile-nav-scrollbar);
	}

	.navbar.fixed-top {
		z-index: 1050;
	}

	.navbar-toggler {
		width: 46px;
		height: 46px;
		border-radius: 999px;
		border: 1px solid rgba(15, 42, 74, 0.18);
		background: #fff;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		transition: box-shadow 0.2s ease, border-color 0.2s ease;
		z-index: 1055;
	}

	.navbar-toggler:focus-visible,
	.navbar-toggler:hover {
		border-color: #1c7ed6;
		box-shadow: 0 0 0 3px rgba(28, 126, 214, 0.25);
		outline: none;
	}

	.mobile-menu-overlay {
		position: fixed;
		inset: 0;
		background: rgba(8, 21, 41, 0.65);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.35s ease;
		z-index: 1035;
	}

	body.mobile-nav-open .mobile-menu-overlay {
		opacity: 1;
		pointer-events: auto;
	}

	.navbar-collapse {
		position: fixed !important;
		top: 0;
		right: 0;
		bottom: 0;
		width: var(--mobile-nav-panel-width);
		max-width: 400px;
		padding: calc(28px + env(safe-area-inset-top, 0)) 32px calc(32px + env(safe-area-inset-bottom, 0));
		background: #fdfefe;
		box-shadow: -30px 0 80px rgba(12, 30, 66, 0.24);
		border-left: 1px solid rgba(15, 42, 74, 0.08);
		transform: translateX(100%);
		transition: transform 0.35s var(--mobile-nav-transition), visibility 0.35s linear;
		height: 100vh;
		max-height: 100vh;
		overflow-y: auto;
		overflow-x: hidden;
		display: block !important;
		visibility: hidden;
		z-index: 1045;
		background-clip: padding-box;
	}

	.navbar-collapse.collapsing {
		height: 100vh !important;
		transform: translateX(100%);
		transition: transform 0.35s var(--mobile-nav-transition);
		visibility: visible;
	}

	.navbar-collapse.show {
		transform: translateX(0);
		visibility: visible;
	}

	.navbar-collapse .navbar-nav {
		width: 100%;
		margin: 0;
		padding: 0;
		flex-direction: column;
		gap: 0.25rem;
	}

	.navbar-collapse .navbar-nav .nav-item {
		width: 100%;
	}

	.navbar-collapse .navbar-nav .nav-link {
		width: 100%;
		padding: 14px 0 !important;
		margin: 0;
		font-size: 1rem;
		font-weight: 600;
		color: #0c2344;
		border-bottom: 1px solid rgba(15, 42, 74, 0.08);
		transition: color 0.2s ease, background 0.2s ease;
	}

	.navbar-collapse .navbar-nav .nav-link:last-child {
		border-bottom: 0;
	}

	.navbar-collapse .navbar-nav .nav-link:hover,
	.navbar-collapse .navbar-nav .nav-link:focus {
		color: #1c7ed6;
		background: rgba(28, 126, 214, 0.05);
		outline: none;
	}

	.navbar-collapse .navbar-nav .nav-link.active {
		color: #1c7ed6;
		background: rgba(28, 126, 214, 0.08);
		border-bottom-color: transparent;
		border-radius: 12px;
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	.mobile-menu-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		margin-bottom: 1.25rem;
		padding-bottom: 1rem;
		border-bottom: 1px solid rgba(15, 42, 74, 0.08);
	}

	.mobile-menu-header__eyebrow {
		text-transform: uppercase;
		letter-spacing: 0.12em;
		font-size: 0.75rem;
		color: #7c8ba3;
		margin: 0 0 0.15rem;
	}

	.mobile-menu-header__title {
		margin: 0;
		font-weight: 700;
		color: #0a2852;
		font-size: 1.15rem;
	}

	button.mobile-menu-close {
		border: none;
		background: #eef3ff;
		color: #10294c;
		border-radius: 50%;
		width: 44px;
		height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 1.5rem;
		transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
	}

	button.mobile-menu-close:hover,
	button.mobile-menu-close:focus-visible {
		background: #1c7ed6;
		color: #ffffff;
		box-shadow: 0 18px 30px rgba(28, 126, 214, 0.25);
		outline: none;
	}

	.navbar-collapse .mobile-call {
		border-radius: 14px;
		margin-top: 24px;
		background: linear-gradient(135deg, #0f9d58, #0a7f45);
		box-shadow: 0 15px 35px rgba(15, 157, 88, 0.3);
		border: none;
		overflow: hidden;
	}

	.navbar-collapse .mobile-call a {
		padding: 16px 18px !important;
		font-size: 1.02rem;
		font-weight: 800;
		letter-spacing: 0.04em;
		color: #ffffff !important;
		background: transparent;
		white-space: normal;
		line-height: 1.35;
		text-align: center;
		display: block;
	}

	.navbar-collapse .free-estimate-btn,
	.navbar-collapse .btn.free-estimate-btn {
		width: 100%;
		margin: 20px 0 0;
		text-align: center;
		border-radius: 999px;
		padding: 14px 0 !important;
		font-size: 1.05rem;
	}

	.navbar-collapse .navbar-nav li:last-child {
		border-bottom: none;
	}

	.navbar-collapse::-webkit-scrollbar {
		width: 6px;
	}

	.navbar-collapse::-webkit-scrollbar-thumb {
		background: rgba(12, 36, 66, 0.2);
		border-radius: 999px;
	}

	.navbar-collapse::-webkit-scrollbar-track {
		background: transparent;
	}
}