.clickt-site-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 22px var(--clickt-pad-x);
	background: var(--clickt-navy-800);
	border-bottom: 1px solid var(--clickt-gold-18);
	position: relative;
	z-index: 100;
	font-family: var(--clickt-font-body);
}
.clickt-site-header__logo img {
	height: 46px;
	display: block;
}
.clickt-site-header__nav {
	display: flex;
	gap: 44px;
	align-items: center;
}
.clickt-site-header__link {
	color: var(--clickt-cream-100);
	text-decoration: none;
	opacity: 0.92;
	font-size: var(--clickt-fs-caption);
	letter-spacing: var(--clickt-ls-caps-nav);
	text-transform: uppercase;
	font-weight: 500;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: color 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: inherit;
}
.clickt-site-header__link:hover,
.clickt-site-header__link.is-active {
	color: var(--clickt-gold-500);
	opacity: 1;
}
.clickt-site-header__dropdown { position: relative; }
.clickt-site-header__dropdown-toggle svg { transition: transform 0.2s; }
.clickt-site-header__dropdown.is-open .clickt-site-header__dropdown-toggle svg { transform: rotate(180deg); }
.clickt-site-header__menu {
	position: absolute;
	top: calc(100% + 18px);
	left: -24px;
	background: var(--clickt-cream-100);
	min-width: 320px;
	box-shadow: var(--clickt-shadow-drop);
	padding: 20px 0;
	border-top: 2px solid var(--clickt-gold-500);
	z-index: 200;
	display: none;
}
.clickt-site-header__dropdown.is-open .clickt-site-header__menu { display: block; }
/* Transparent bridge across the gap below the button so moving the cursor from the
   toggle into the menu doesn't cross a dead zone that dismisses the dropdown. */
.clickt-site-header__menu::before { content: ""; position: absolute; top: -22px; left: 0; right: 0; height: 22px; }
.clickt-site-header__menu-item {
	display: block;
	padding: 11px 28px;
	color: var(--clickt-navy-800);
	text-decoration: none;
	font-size: var(--clickt-fs-dropdown);
	font-weight: 500;
	border-left: 2px solid transparent;
	transition: all 0.15s;
}
.clickt-site-header__menu-item:hover {
	background: var(--clickt-cream-200);
	border-left-color: var(--clickt-gold-500);
	padding-left: 32px;
}
.clickt-site-header__menu-all {
	display: block;
	margin: 12px 28px 0;
	padding-top: 14px;
	border-top: 1px solid var(--clickt-navy-12);
	color: var(--clickt-gold-700);
	font-size: var(--clickt-fs-eyebrow);
	letter-spacing: var(--clickt-ls-caps-nav);
	text-transform: uppercase;
	font-weight: 600;
	text-decoration: none;
}
.clickt-site-header__cta {
	font-size: var(--clickt-fs-eyebrow);
	letter-spacing: var(--clickt-ls-caps-eyebrow);
	text-transform: uppercase;
	color: var(--clickt-navy-800);
	background: var(--clickt-gold-500);
	padding: 15px 30px;
	text-decoration: none;
	font-weight: 700;
}
/* ---------- Mobile hamburger ---------- */
.clickt-site-header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	padding: 9px 8px;
	background: none;
	border: none;
	cursor: pointer;
}
.clickt-site-header__burger span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--clickt-cream-100);
	transition: transform 0.25s var(--clickt-ease-out), opacity 0.2s ease;
}
.clickt-site-header.nav-open .clickt-site-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.clickt-site-header.nav-open .clickt-site-header__burger span:nth-child(2) { opacity: 0; }
.clickt-site-header.nav-open .clickt-site-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
	.clickt-site-header__burger { display: flex; }
	.clickt-site-header__cta { margin-left: auto; }

	/* Nav collapses into a full-width panel toggled by the burger */
	.clickt-site-header__nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px var(--clickt-pad-x) 22px;
		background: var(--clickt-navy-800);
		border-top: 1px solid var(--clickt-gold-18);
		box-shadow: var(--clickt-shadow-drop);
		z-index: 90;
	}
	.clickt-site-header.nav-open .clickt-site-header__nav { display: flex; }

	.clickt-site-header__nav > .clickt-site-header__link,
	.clickt-site-header__dropdown-toggle {
		width: 100%;
		justify-content: flex-start;
		padding: 15px 2px;
		border-bottom: 1px solid var(--clickt-navy-12);
	}
	.clickt-site-header__dropdown { width: 100%; }

	/* Services submenu shows inline inside the panel */
	.clickt-site-header__menu {
		position: static;
		display: none;
		min-width: 0;
		width: 100%;
		padding: 4px 0 10px 14px;
		background: transparent;
		border-top: none;
		box-shadow: none;
	}
	.clickt-site-header__dropdown.is-open .clickt-site-header__menu { display: block; }
	.clickt-site-header__menu::before { content: none; }
	.clickt-site-header__menu-item { color: var(--clickt-cream-100) !important; padding: 10px 10px; border-left-color: var(--clickt-gold-25); }
	.clickt-site-header__menu-item:hover { background: rgba(255, 255, 255, 0.05); padding-left: 14px; }
	/* The mobile nav panel is navy, so the cream-surface gold would sit at
	 * 3.0:1 here. Switch to the on-navy gold (9.7:1), matching the same
	 * light/dark pairing duration-tiers.css uses for its featured card. */
	.clickt-site-header__menu-all { margin: 10px 0 0; color: var(--clickt-gold-500) !important; }
}

@media (max-width: 767px) {
	.clickt-site-header__logo img { height: 40px; }
	.clickt-site-header__cta { padding: 12px 20px; }
	.clickt-site-header__burger { margin-left: 10px; }
}