/* ==========================================================================
   Site navigation (fixed top bar). Ported from home-styles.css, extended with
   a real mobile dropdown menu (the delivered design only had a placeholder
   burger that scrolled to contact).
   Transparent at top; gains blur + shadow via .scrolled (added by main.js).
   ========================================================================== */

.nav {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	transition: background .3s ease, box-shadow .3s ease, border-color .3s ease, padding .3s ease;
	padding: 22px 0;
	border-bottom: 1px solid transparent;
}
.nav.scrolled {
	background: rgba(255,255,255,0.72);
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	box-shadow: 0 1px 0 rgba(15,27,45,0.06), 0 10px 30px rgba(15,27,45,0.05);
	border-bottom-color: rgba(15,27,45,0.06);
	padding: 14px 0;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.brand .wordmark, .footer .wordmark { white-space: nowrap; }
.brand img { height: 30px; width: auto; display: block; }
.brand-mark { display: block; flex-shrink: 0; }
.brand .wordmark { font-family: var(--sans); font-weight: 700; font-size: 26px; color: var(--cyan); letter-spacing: -0.02em; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
	font-size: 15px; font-weight: 500; color: var(--navy); position: relative; padding: 4px 0;
	transition: color .2s ease;
}
.nav-links a::after {
	content:''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
	background: var(--grad); border-radius: 2px; transition: right .25s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { right: 0; }
.nav-links a.active { color: var(--cyan); }
.nav-cta { display: flex; align-items: center; }

/* ---------- Burger button ---------- */
.nav-burger {
	display: none; flex-direction: column; gap: 5px; cursor: pointer;
	padding: 8px; background: none; border: 0;
}
.nav-burger span {
	width: 24px; height: 2px; background: var(--navy); border-radius: 2px;
	transition: transform .3s ease, opacity .2s ease;
}

/* ==========================================================================
   Mobile (<= 820px): hide inline links/cta, show burger + dropdown panel.
   ========================================================================== */
@media (max-width: 820px) {
	.nav-links, .nav-cta { display: none; }
	.nav-burger { display: flex; }

	/* When open, the fixed bar gets a solid background so the dropdown reads. */
	.nav.open {
		background: rgba(255,255,255,0.97);
		backdrop-filter: blur(16px) saturate(160%);
		-webkit-backdrop-filter: blur(16px) saturate(160%);
		box-shadow: 0 10px 30px rgba(15,27,45,0.08);
		border-bottom-color: rgba(15,27,45,0.06);
	}
	.nav.open .nav-inner { flex-wrap: wrap; }

	/* Dropdown: links stack full width below the bar. */
	.nav.open .nav-links {
		display: flex; flex-direction: column; align-items: stretch; gap: 2px;
		flex-basis: 100%; order: 3;
		margin-top: 14px; padding-top: 14px;
		border-top: 1px solid var(--line);
	}
	.nav.open .nav-links a { font-size: 17px; padding: 12px 4px; }
	.nav.open .nav-links a::after { display: none; }

	.nav.open .nav-cta {
		display: flex; flex-basis: 100%; order: 4;
		margin-top: 4px; padding-bottom: 6px;
	}
	.nav.open .nav-cta .btn { width: 100%; }

	/* Burger -> X */
	.nav.open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.nav.open .nav-burger span:nth-child(2) { opacity: 0; }
	.nav.open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 520px) {
	.nav-cta .btn { padding: 11px 16px; font-size: 14px; }
}