.site-header {
	background-color: var(--header-bg);
	position: relative;
	z-index: 1030;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 18px;
	min-height: 127.5px;
}

.site-header__brand {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	line-height: 0;
	text-decoration: none;
}

.site-header__brand .brand-logo,
.site-header__brand img {
	display: block;
	width: 209.95px;
	height: 91.5px;
	max-width: 100%;
	object-fit: contain;
}

/*
 * Hamburger toggler — hidden on desktop (≥1400px), shown on mobile.
 * Bootstrap's .collapse JS handles the open/close via data-bs-* attrs;
 * `.site-nav-toggle` is our own class (paired alongside `.navbar-toggler`
 * in the markup, never redefining it) that carries the custom look.
 */
.site-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--footer-icon-border);
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--header-link-color);
}

.site-nav-toggle:focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
}

/*
 * The nav (7 links, incl. "Terms & Conditions") plus search + CTA button
 * only fit on one line from ~1350px of viewport width upward (measured);
 * below that the flex row overflows because nav-link text can't wrap.
 * 1400px is used as a safe threshold above that measured minimum.
 */
@media (min-width: 1400px) {
	.site-nav-toggle {
		display: none;
	}

	/* On desktop the collapse is always visible inline. `!important` is
	   required here: Bootstrap's Collapse JS toggles `.show` based on the
	   mobile drawer's last open/close state, which persists across a resize
	   from mobile to desktop — without `!important` the nav would stay
	   hidden on desktop whenever it happened to be "closed" at that state. */
	#navbarToggleExternalContent {
		position: static;
		display: block !important;
		width: auto;
		padding: 0;
		background: transparent;
	}

	/* Bootstrap's bg-body-tertiary/shadow-3/p-4 on the inner wrapper are meant
	   for the mobile dropdown popout — strip them so desktop nav sits flush
	   on the header instead of inside a white box. */
	#navbarToggleExternalContent > div {
		padding: 0;
		background: transparent;
		box-shadow: none;
	}

	#navbarToggleExternalContent .site-nav .tg-navbar-nav {
		flex-direction: row;
		width: auto;
	}
}

.site-nav .tg-navbar-nav {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 38px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav .tg-nav-item {
	position: relative;
}

.site-nav .tg-nav-link {
	display: block;
	padding: 8px 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 21px;
	letter-spacing: .28px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--header-link-color);
	transition: color .2s ease;
}

.site-nav .tg-nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background-color: var(--primary-color);
	opacity: 0;
	transition: opacity .2s ease;
}

/* Dropdown caret (chevron) on parent items like "Services" — replaces the
   underline for those links so the arrow sits right after the label. */
.site-nav .menu-item-has-children > .tg-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.site-nav .menu-item-has-children > .tg-nav-link::after {
	position: static;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentcolor;
	border-bottom: 2px solid currentcolor;
	background-color: transparent;
	transform: rotate(45deg) translateY(-2px);
	opacity: .8;
	transition: transform .25s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}

.site-nav .menu-item-has-children.is-open > .tg-nav-link::after,
.site-nav .menu-item-has-children:focus-within > .tg-nav-link::after {
	transform: rotate(225deg) translateY(2px);
	opacity: 1;
}

.site-nav .tg-nav-link:hover,
.site-nav .tg-nav-link:focus-visible,
.site-nav .current-menu-item > .tg-nav-link,
.site-nav .current_page_item > .tg-nav-link,
.site-nav .current-menu-ancestor > .tg-nav-link,
.site-nav .current-menu-parent > .tg-nav-link {
	color: var(--primary-color);
}

.site-nav .current-menu-item > .tg-nav-link::after,
.site-nav .current_page_item > .tg-nav-link::after,
.site-nav .current-menu-ancestor > .tg-nav-link::after,
.site-nav .current-menu-parent > .tg-nav-link::after {
	opacity: 1;
}

.site-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	min-width: 220px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background-color: var(--header-bg);
	border: 1px solid var(--footer-icon-border);
	border-radius: var(--radius-sm);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .22s cubic-bezier(.4, 0, .2, 1), transform .22s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .22s;
}

.site-nav .tg-nav-item.is-open > .sub-menu,
.site-nav .tg-nav-item:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity .22s ease, transform .22s ease, visibility 0s;
}

.site-nav .sub-menu .tg-nav-link {
	padding: 8px 20px;
}

.site-nav .sub-menu .tg-nav-link::after {
	display: none;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-shrink: 0;
}

.header-search {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 1px;
	border: 1px solid var(--header-search-border);
	border-radius: var(--radius-pill);
	background-color: transparent;
	color: var(--header-link-color);
	transition: border-color .2s ease, color .2s ease;
}

.header-search:hover,
.header-search:focus-visible {
	border-color: var(--primary-color);
	color: var(--primary-color);
}

.header-search .tg-icon {
	display: block;
}

.btn-quote {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 32px;
	border: 0;
	border-radius: var(--radius-sm);
	background-color: var(--primary-color);
	box-shadow: var(--shadow-cta);
	font-size: 14px;
	font-weight: 700;
	line-height: 21px;
	letter-spacing: 1.12px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--text-color-light);
	transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.btn-quote:hover,
.btn-quote:focus-visible {
	color: var(--text-color-light);
	background-color: var(--primary-hover);
	box-shadow: 0 10px 24px -8px rgba(var(--primary-rgb), .75);
}