/**
 * Header + primary nav — aligns with Figma Light Nav (node 233:34594).
 * Loads after main.css + top_header_bar.css; uses delco-tokens.css variables.
 * Desktop-only overrides (≥993px) so mobile drawer styles from main.css stay intact.
 */

@keyframes delco-header-phone-pulse {
	0%, 100% {
		transform: rotate(18deg) scale(1);
	}
	50% {
		transform: rotate(18deg) scale(1.16);
	}
}

@keyframes delco-header-phone-ring {
	0% {
		opacity: 0.5;
		transform: scale(0.85);
	}
	75%, 100% {
		opacity: 0;
		transform: scale(1.6);
	}
}

.header {
	z-index: 1100; /* above Leaflet map controls (z-index 1000) in service areas */
	background: var(--delco-color-bg-surface);
	padding-bottom: 0;
}

.header .header_row {
	align-items: center;
	padding-top: 1.2rem;
	padding-bottom: 1.2rem;
}

.header .header_col_1 {
	width: auto;
	flex: 0 0 auto;
}

.header .header_col_2 {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
}

@media (min-width: 993px) {
	.header .header_row {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-start;
		gap: 1.5rem;
	}

	.header .header_col_1,
	.header .header_col_2 {
		float: none !important;
		width: auto !important;
	}

	.header .header_col_1 {
		flex: 0 0 auto;
	}

	.header .header_col_2 {
		flex: 1 1 auto;
		display: flex;
		justify-content: center;
		min-width: 0;
		margin-left: 0;
	}

	/* Logo left; primary nav centered in bar; CALL NOW on the right (no burger on desktop) */
	.header .header_main_cluster {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		flex-wrap: nowrap;
		gap: var(--delco-space-nav-gap);
		flex: 1 1 auto;
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.header .navigation .menu_logo {
		display: none;
	}

	/* main_Copy sets .navigation { width: 100% } — stretch so nav can center in the bar */
	.header .header_main_cluster .navigation {
		display: flex;
		flex: 1 1 auto;
		justify-content: center;
		width: auto !important;
		max-width: none;
		min-width: 0;
		margin: 0 !important;
	}

	.navigation {
		margin-top: 0;
	}

	.navigation .header_nav {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		gap: 0 var(--delco-space-nav-gap);
		height: auto;
		min-height: 0;
		line-height: 1.2;
		margin: 0 auto;
		width: auto;
	}

	.navigation .header_nav > li {
		display: inline-flex;
		align-items: center;
	}

	.navigation .header_nav > li > a {
		font-family: var(--delco-font-nav) !important;
		font-weight: 600 !important;
		font-size: var(--delco-font-nav-size) !important;
		line-height: 1.25 !important;
		color: var(--delco-color-text-primary) !important;
		text-transform: uppercase;
		height: auto !important;
		min-height: 3.2rem;
		padding: 0.6rem 0.4rem !important;
		letter-spacing: 0.02em;
		transition: color 0.2s ease, opacity 0.2s ease;
	}

	/* Unified top-level labels (DOORS, WINDOWS, ABOUT, etc.) — beat main.css Lato + asymmetric padding */
	.navigation .header_nav > li.drDown > a,
	.navigation .header_nav > li.drDown.product_submenu > a,
	.navigation .header_nav > li.drDown.aboutMenu > a,
	.navigation .header_nav > li:first-child > a,
	.navigation .header_nav > li:nth-last-child(2) > a {
		font-family: var(--delco-font-nav) !important;
		font-weight: 600 !important;
		padding: 0.6rem 0.4rem !important;
	}

	.navigation .header_nav li.active > a {
		color: var(--delco-color-brand-blue) !important;
		font-weight: 700 !important;
	}

	/* Light nav — subtle hover on primary links (beats main.css #164ca8) */
	.navigation .header_nav > li > a:hover,
	.navigation .header_nav > li.drDown > a:hover {
		color: var(--delco-color-brand-blue) !important;
		opacity: 1;
	}

	.header .header_main_cluster .phones {
		flex: 0 0 auto;
		margin-left: 0;
	}

	/* No chevron on dropdown labels — it overlapped nav text */
	.navigation .header_nav li.drDown > a::after {
		display: none;
		content: none;
	}

	/*
	 * Mega menu hover fix (esp. homepage): main.css sets product_submenu li to position:static
	 * so the panel's top:100% was relative to .header_row — a dead zone between the link and
	 * the dropdown killed :hover. Anchor to the trigger <li> and center full-bleed width.
	 */
	.navigation .header_nav > li.drDown.product_submenu,
	.navigation .header_nav > li.drDown.aboutMenu {
		position: relative;
		z-index: 200;
		/* Widen hover corridor so pointer can reach fixed mega without leaving <li> */
		padding-bottom: 1rem;
		margin-bottom: -1rem;
	}

	/*
	 * Full-viewport mega: fixed to the viewport (not centered on the trigger <li>).
	 * main_Copy uses .navigation .subMenu { left:50%; transform:translate(-50%,0) } — that
	 * centers the panel on the link and, with body overflow-x:hidden, clips the left side.
	 * High-specificity + load order (site-nav last) keeps this winning over main + home_hero.
	 */
	.header .navigation .header_nav > li.drDown.product_submenu .subMenu,
	.header.fixed .navigation .header_nav > li.drDown.product_submenu .subMenu,
	.header .navigation .header_nav > li.drDown.aboutMenu .subMenu,
	.header.fixed .navigation .header_nav > li.drDown.aboutMenu .subMenu {
		position: fixed;
		inset-inline: 0;
		left: 0;
		right: 0;
		width: 100%;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		transform: none;
		-webkit-transform: none;
		/* Slight overlap kills dead air between nav row and panel (hover chain breaks in the gap) */
		top: calc(var(--delco-mega-top, 12.2rem) - 0.35rem);
		padding: 2rem max(1.5rem, env(safe-area-inset-right)) 2.5rem
			max(1.5rem, env(safe-area-inset-left));
		box-sizing: border-box;
		background: var(--delco-color-bg-surface);
		border-bottom: 1px solid var(--delco-color-border-subtle);
		box-shadow: 0 12px 40px rgba(50, 60, 72, 0.08);
		z-index: 1002;
	}

	@media only screen and (max-width: 1200px) {
		.header .navigation .header_nav > li.drDown.product_submenu .subMenu,
		.header.fixed .navigation .header_nav > li.drDown.product_submenu .subMenu,
		.header .navigation .header_nav > li.drDown.aboutMenu .subMenu,
		.header.fixed .navigation .header_nav > li.drDown.aboutMenu .subMenu {
			top: calc(var(--delco-mega-top, 12.8rem) - 0.35rem);
		}
	}

	/*
	 * main.css only reveals .subMenu inside @media (hover: hover) — hybrid / misreported devices
	 * never get open styles. Mirror here for desktop width (same selectors, no hover gate).
	 */
	.navigation li.drDown:hover .subMenu,
	.navigation li.drDown:focus-within .subMenu {
		height: auto;
		opacity: 1;
		visibility: visible;
		line-height: normal;
		transition: opacity 0.2s ease, visibility 0.2s ease;
	}

	.navigation .product_submenu .subMenu li {
		background: var(--delco-color-bg-surface);
		border-right: 0.5rem solid var(--delco-color-bg-subtle);
		vertical-align: top;
	}

	.navigation .product_submenu .subMenu li a {
		font-family: var(--delco-font-nav);
		font-weight: 600;
		font-size: 1.4rem; /* 14px */
		line-height: 1.35;
		color: var(--delco-color-text-primary);
	}

	.navigation .product_submenu .subMenu li a span {
		font-family: var(--delco-font-nav);
		color: var(--delco-color-text-body);
		font-weight: 600;
	}

	.navigation .product_submenu .subMenu li.product_all {
		background: var(--delco-color-bg-cta-dark);
		border-top: 0.75rem solid var(--delco-color-bg-subtle);
		border-right: none;
		border-radius: 0 0 var(--delco-radius-button) var(--delco-radius-button);
	}

	.navigation .product_submenu .subMenu li.product_all a {
		color: #ffffff !important;
		font-weight: 700;
		text-align: center;
		font-size: 1.4rem; /* 14px */
		letter-spacing: 0.04em;
	}

	/* Light nav mega — View All stays white (main.css hovers subMenu links to blue) */
	.navigation li.drDown:hover .subMenu li.product_all a,
	.navigation li.drDown:focus-within .subMenu li.product_all a,
	.navigation li.drDown:hover .subMenu li.product_all a:hover,
	.navigation li.drDown:focus-within .subMenu li.product_all a:hover {
		color: #ffffff !important;
		padding-left: 1.2rem;
	}

	.navigation li.drDown:hover .subMenu li:not(.product_all) a:hover,
	.navigation li.drDown:focus-within .subMenu li:not(.product_all) a:hover {
		color: var(--delco-color-brand-blue);
	}

	/* About mega — same full-width shell as products; links in a centered row */
	.navigation .aboutMenu .subMenu {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		column-gap: clamp(1.2rem, 3vw, 3.2rem);
		row-gap: 0.8rem;
		border: none;
	}

	.navigation .aboutMenu .subMenu li {
		display: flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: none;
		padding: 0;
		width: auto;
	}

	.navigation .header_nav .aboutMenu .subMenu li a {
		font-family: var(--delco-font-nav);
		font-weight: 600;
		font-size: 1.4rem; /* 14px */
		line-height: 1.35;
		color: var(--delco-color-text-primary);
		text-transform: uppercase;
		letter-spacing: 0.02em;
		padding: 0.55rem 0.4rem;
		height: auto;
		text-align: center;
		white-space: nowrap;
	}

	.navigation .header_nav .aboutMenu .subMenu li a:hover,
	.navigation li.drDown.aboutMenu:hover .subMenu li a:hover {
		color: var(--delco-color-brand-blue);
		padding-left: 0.55rem;
		padding-right: 0.4rem;
	}

	/* --- Homepage hero “at hero”: dark grey mega (white type) — matches nav over video --- */
	body.home_page .header.header--supports-hero.header--at-hero .navigation .header_nav > li.drDown.product_submenu .subMenu,
	body.home_page .header.header--supports-hero.header--at-hero .navigation .header_nav > li.drDown.aboutMenu .subMenu,
	body.home_page .header.header--supports-hero.header--at-hero.header.fixed .navigation .header_nav > li.drDown.product_submenu .subMenu,
	body.home_page .header.header--supports-hero.header--at-hero.header.fixed .navigation .header_nav > li.drDown.aboutMenu .subMenu {
		background: #343a42;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
		box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
	}

	body.home_page .header.header--supports-hero.header--at-hero .navigation .product_submenu .subMenu li {
		background: #3d4450;
		border-right-color: rgba(0, 0, 0, 0.35);
	}

	body.home_page .header.header--supports-hero.header--at-hero .navigation .product_submenu .subMenu li:nth-child(4n) {
		border-right-color: rgba(0, 0, 0, 0.35);
	}

	body.home_page .header.header--supports-hero.header--at-hero .navigation .product_submenu .subMenu li a {
		color: #ffffff;
	}

	body.home_page .header.header--supports-hero.header--at-hero .navigation .product_submenu .subMenu li a span {
		color: rgba(255, 255, 255, 0.88);
	}

	body.home_page .header.header--supports-hero.header--at-hero .navigation .product_submenu .subMenu li.product_all {
		background: #252a31;
		border-top-color: rgba(0, 0, 0, 0.35);
	}

	body.home_page .header.header--supports-hero.header--at-hero .navigation .product_submenu .subMenu li.product_all a {
		color: #ffffff;
	}

	body.home_page .header.header--supports-hero.header--at-hero .navigation li.drDown:hover .subMenu li:not(.product_all) a:hover,
	body.home_page .header.header--supports-hero.header--at-hero .navigation li.drDown:focus-within .subMenu li:not(.product_all) a:hover {
		color: var(--delco-color-accent-bright);
	}

	body.home_page .header.header--supports-hero.header--at-hero .navigation li.drDown:hover .subMenu li.product_all a,
	body.home_page .header.header--supports-hero.header--at-hero .navigation li.drDown:focus-within .subMenu li.product_all a,
	body.home_page .header.header--supports-hero.header--at-hero .navigation li.drDown:hover .subMenu li.product_all a:hover,
	body.home_page .header.header--supports-hero.header--at-hero .navigation li.drDown:focus-within .subMenu li.product_all a:hover {
		color: #ffffff !important;
	}

	body.home_page .header.header--supports-hero.header--at-hero .navigation .header_nav .aboutMenu .subMenu li a {
		color: #ffffff;
	}

	body.home_page .header.header--supports-hero.header--at-hero .navigation .header_nav .aboutMenu .subMenu li a:hover,
	body.home_page .header.header--supports-hero.header--at-hero .navigation li.drDown.aboutMenu:hover .subMenu li a:hover {
		color: var(--delco-color-accent-bright);
	}

	body.home_page .header.header--supports-hero.header--at-hero .header_logo img {
		width: 13.5rem;
		max-width: 100%;
		height: auto;
	}

	body.home_page .header.header--supports-hero.header--at-hero .navigation .header_nav {
		flex-wrap: nowrap;
		gap: 0 var(--delco-space-nav-gap);
		min-height: 0;
	}

	body.home_page .header.header--supports-hero.header--at-hero .navigation .header_nav > li > a,
	body.home_page .header.header--supports-hero.header--at-hero .navigation .header_nav > li.drDown > a,
	body.home_page .header.header--supports-hero.header--at-hero .navigation .header_nav > li.drDown.product_submenu > a,
	body.home_page .header.header--supports-hero.header--at-hero .navigation .header_nav > li.drDown.aboutMenu > a {
		color: #fff !important;
		font-size: var(--delco-font-nav-size);
		line-height: 1.25;
		padding: 0.6rem 0.4rem !important;
		min-height: 3.2rem;
		letter-spacing: 0.02em;
	}

	body.home_page .header.header--supports-hero.header--at-hero .navigation .header_nav > li > a:hover,
	body.home_page .header.header--supports-hero.header--at-hero .navigation .header_nav > li.drDown > a:hover {
		color: rgba(255, 255, 255, 0.88) !important;
	}

	body.home_page .header.header--supports-hero.header--at-hero .navigation .header_nav li.active > a {
		color: #fff !important;
		font-weight: 700 !important;
	}

	/* CALL NOW — Figma 233:34596: flex row, icon + left-aligned text (same dark + white) */
	.header .phones {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: var(--delco-space-phone-gap);
		font-size: initial;
		text-align: left;
	}

	.header .phones .icon_wrap {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--delco-size-phone-icon);
		height: var(--delco-size-phone-icon);
		margin: 0;
		position: relative;
	}

	/* Idle: no pulse (main.css .scale_home runs always — paused here until hover) */
	.header .phones .icon_wrap svg,
	.header .phones .icon_wrap svg.scale_home {
		width: var(--delco-size-phone-icon);
		height: var(--delco-size-phone-icon);
		color: var(--delco-color-brand-blue);
		transform: rotate(18deg);
		transform-origin: center center;
		animation: none;
	}

	.header .phones .icon_wrap::after {
		content: "";
		position: absolute;
		inset: -0.45rem;
		border-radius: 50%;
		border: 2px solid var(--delco-color-brand-blue);
		opacity: 0;
		pointer-events: none;
		transform: scale(0.85);
	}

	.header .phones:hover .icon_wrap svg,
	.header .phones:hover .icon_wrap svg.scale_home {
		animation: delco-header-phone-pulse 0.85s ease-in-out infinite;
	}

	.header .phones:hover .icon_wrap::after {
		animation: delco-header-phone-ring 1.35s ease-out infinite;
	}

	body.home_page .header.header--supports-hero.header--at-hero .phones .icon_wrap::after {
		border-color: rgba(255, 255, 255, 0.5);
	}

	.header .phones_wrap {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		text-align: left;
		margin: 0;
	}

	.header .phones_wrap .header-phone__label,
	.header .phones_wrap p {
		margin: 0;
		font-family: var(--delco-font-nav);
		font-weight: 500;
		font-size: var(--delco-font-phone-label);
		line-height: 1.15;
		color: var(--delco-color-text-primary);
		text-transform: uppercase;
		letter-spacing: 0.02em;
		text-align: left;
	}

	.header .phones_wrap .header-phone__label,
	.header .phones_wrap p,
	.header .phones_wrap a {
		transition: color 0.2s ease;
	}

	.header .phones_wrap a {
		display: block;
		font-family: var(--delco-font-nav);
		font-weight: 600;
		font-size: var(--delco-font-phone-num);
		line-height: 1.15;
		color: var(--delco-color-text-primary);
		text-decoration: none;
		text-align: left;
	}

	.header .phones_wrap a.header-phone__secondary {
		display: none;
	}

	/* Hover anywhere on CALL NOW block — number (and label) match nav link hover */
	.header .phones:hover .phones_wrap a,
	.header .phones_wrap a:hover {
		color: var(--delco-color-brand-blue);
	}

	.header .phones:hover .phones_wrap .header-phone__label,
	.header .phones:hover .phones_wrap p {
		color: var(--delco-color-brand-blue);
	}

	/* White / cream nav — phone hover (beats home_hero.css past-hero #323c48 + main.css #075be7) */
	.header.fixed .phones:hover .phones_wrap a,
	.header.fixed .phones_wrap a:hover,
	body.home_page .header.header--supports-hero.header--past-hero .phones:hover .phones_wrap a,
	body.home_page .header.header--supports-hero.header--past-hero .phones_wrap a:hover,
	.header:not(.header--supports-hero) .phones:hover .phones_wrap a,
	.header:not(.header--supports-hero) .phones_wrap a:hover {
		color: var(--delco-color-brand-blue) !important;
	}

	.header.fixed .phones:hover .phones_wrap .header-phone__label,
	.header.fixed .phones:hover .phones_wrap p,
	body.home_page .header.header--supports-hero.header--past-hero .phones:hover .phones_wrap .header-phone__label,
	body.home_page .header.header--supports-hero.header--past-hero .phones:hover .phones_wrap p,
	.header:not(.header--supports-hero) .phones:hover .phones_wrap .header-phone__label,
	.header:not(.header--supports-hero) .phones:hover .phones_wrap p {
		color: var(--delco-color-brand-blue) !important;
	}

	body.home_page .header.header--supports-hero.header--at-hero .phones:hover .phones_wrap a,
	body.home_page .header.header--supports-hero.header--at-hero .phones_wrap a:hover {
		color: var(--delco-color-accent-bright);
	}

	body.home_page .header.header--supports-hero.header--at-hero .phones:hover .phones_wrap .header-phone__label,
	body.home_page .header.header--supports-hero.header--at-hero .phones:hover .phones_wrap p {
		color: rgba(255, 255, 255, 0.88);
	}

	/* Burger only on tablet/mobile — main.css shows it below 992px */
	.header .header_main_cluster__menu {
		display: none !important;
	}

	.header.fixed .navigation .header_nav li a {
		font-family: var(--delco-font-nav);
		color: var(--delco-color-text-primary);
	}

	/*
	 * White / cream nav (inner pages + homepage scrolled): same Figma cluster as dark hero.
	 * Beats main_Copy fixed layout (hidden top bar, stretched nav, calc column widths).
	 */
	.header.fixed .top_header,
	body.home_page .header.header--supports-hero.header--past-hero .top_header {
		display: block !important;
	}

	.header.fixed .header_col_1,
	.header.fixed .header_col_2,
	body.home_page .header.header--supports-hero.header--past-hero .header_col_1,
	body.home_page .header.header--supports-hero.header--past-hero .header_col_2,
	.header:not(.header--supports-hero) .header_col_1,
	.header:not(.header--supports-hero) .header_col_2 {
		float: none !important;
		width: auto !important;
	}

	.header.fixed .header_col_1,
	body.home_page .header.header--supports-hero.header--past-hero .header_col_1,
	.header:not(.header--supports-hero) .header_col_1 {
		flex: 0 0 auto;
		margin: 0 !important;
	}

	.header.fixed .header_col_2,
	body.home_page .header.header--supports-hero.header--past-hero .header_col_2,
	body.home_page .header.header--supports-hero.header--at-hero .header_col_2,
	.header:not(.header--supports-hero) .header_col_2 {
		flex: 1 1 auto !important;
		display: flex !important;
		justify-content: center !important;
		min-width: 0;
		margin-left: 0 !important;
	}

	.header.fixed .header_main_cluster,
	body.home_page .header.header--supports-hero.header--past-hero .header_main_cluster,
	body.home_page .header.header--supports-hero.header--at-hero .header_main_cluster,
	.header:not(.header--supports-hero) .header_main_cluster {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		flex-wrap: nowrap;
		gap: var(--delco-space-nav-gap);
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
	}

	.header.fixed .navigation,
	body.home_page .header.header--supports-hero.header--past-hero .navigation,
	body.home_page .header.header--supports-hero.header--at-hero .navigation,
	.header:not(.header--supports-hero) .navigation {
		display: flex !important;
		flex: 1 1 auto !important;
		justify-content: center !important;
		width: auto !important;
		margin: 0 !important;
		min-width: 0;
	}

	.header.fixed .navigation .header_nav,
	body.home_page .header.header--supports-hero.header--past-hero .navigation .header_nav,
	body.home_page .header.header--supports-hero.header--at-hero .navigation .header_nav,
	.header:not(.header--supports-hero) .navigation .header_nav {
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: center !important;
		align-items: center !important;
		width: auto !important;
		height: auto !important;
		min-height: 0 !important;
		line-height: 1.2 !important;
		margin: 0 auto !important;
	}

	/* main.css fixed header stretches nav with space-between — keep cluster centered */
	.header.fixed .navigation .header_nav {
		justify-content: center !important;
		width: auto !important;
	}

	.header.fixed .navigation .header_nav li a,
	body.home_page .header.header--supports-hero.header--past-hero .navigation .header_nav > li > a,
	.header:not(.header--supports-hero) .navigation .header_nav > li > a {
		height: auto !important;
		line-height: 1.25 !important;
	}

	.header.fixed .phones,
	body.home_page .header.header--supports-hero.header--past-hero .phones,
	.header:not(.header--supports-hero) .phones {
		display: flex !important;
		font-size: initial !important;
		text-align: left !important;
	}

	.header .phones .phones_wrap p,
	.header .phones .phones_wrap a {
		text-align: left !important;
	}

	.header .phones .phones_wrap p,
	.header .phones .phones_wrap .header-phone__label {
		font-size: var(--delco-font-phone-label) !important;
		font-weight: 500 !important;
		line-height: 1.15 !important;
	}

	.header .phones .phones_wrap a {
		font-size: var(--delco-font-phone-num) !important;
		font-weight: 600 !important;
		line-height: 1.15 !important;
	}

	.header.fixed .header_col_1 {
		margin: 0;
	}
}

@media (max-width: 992px) {
	/* One row: burger + logo (left cluster) · spacer · CTA (right) */
	.header .header_row {
		display: grid !important;
		grid-template-columns: auto auto minmax(0, 1fr) auto;
		align-items: center !important;
		justify-items: stretch;
		column-gap: 1rem;
		row-gap: 0.6rem;
		flex-wrap: nowrap !important;
	}

	.header .header_row > .clearfix {
		display: none;
	}

	.header .header_col_1,
	.header.fixed .header_col_1,
	body.home_page .header.header--supports-hero .header_col_1 {
		float: none !important;
		width: auto !important;
		flex: none !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		grid-column: 2;
		grid-row: 1;
		justify-self: start;
		text-align: left;
	}

	.header .header_col_2,
	.header.fixed .header_col_2,
	body.home_page .header.header--supports-hero .header_col_2 {
		display: contents !important;
	}

	.header .header_main_cluster {
		display: contents !important;
	}

	.header .header_col_1 .header_logo {
		display: inline-block;
	}

	.header .header_main_cluster__cta {
		grid-column: 4;
		grid-row: 1;
		justify-self: end;
		align-self: center;
	}

	/* Drawer stays off-canvas (main.css) */
	.header .header_main_cluster > .navigation {
		position: fixed !important;
		flex: none !important;
		min-width: 0 !important;
		margin: 0 !important;
	}

	.header .header_main_cluster__menu.navigation_btn {
		display: block !important;
		position: relative !important;
		top: auto !important;
		right: auto !important;
		left: auto !important;
		transform: none !important;
		height: auto;
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		align-self: center;
		cursor: pointer;
		z-index: 601;
	}

	.header .header_main_cluster__menu p {
		display: none;
	}

	.header .header_main_cluster__menu .hamburger_box {
		width: 2.75rem;
		height: 2.75rem;
	}

	/* Thinner burger lines on mobile */
	.header .navigation_btn.hamburger_squeeze .hamburger_inner,
	.header .navigation_btn.hamburger_squeeze .hamburger_inner::before,
	.header .navigation_btn.hamburger_squeeze .hamburger_inner::after {
		width: 2.75rem;
		height: 0.22rem;
		border-radius: 0.11rem;
	}

	.header .navigation_btn.hamburger_squeeze .hamburger_inner {
		margin-top: -0.11rem;
	}

	.header .navigation_btn.hamburger_squeeze .hamburger_inner::before {
		top: -0.72rem;
	}

	.header .navigation_btn.hamburger_squeeze .hamburger_inner::after {
		bottom: -0.72rem;
	}

	.header .header_main_cluster .phones {
		display: none;
	}

	.header .header_logo img,
	.header.fixed .header_logo img {
		width: auto !important;
		max-width: min(14rem, 52vw);
		height: auto;
		margin-left: 0;
		margin-right: 0;
	}
}

@media (max-width: 767px) {
	.header .navigation_btn.header_main_cluster__menu {
		position: relative !important;
		top: auto !important;
		right: auto !important;
	}

	.header .header_logo img,
	.header.fixed .header_logo img {
		max-width: min(12rem, 48vw);
	}
}

/* Hamburger — brand blue (visible on tablet/mobile strip) */
.navigation_btn .hamburger_inner,
.navigation_btn .hamburger_inner::before,
.navigation_btn .hamburger_inner::after {
	background-color: var(--delco-color-brand-blue);
}

.navigation_btn p {
	color: var(--delco-color-brand-blue);
}

@media (prefers-reduced-motion: reduce) {
	.header .phones:hover .icon_wrap svg,
	.header .phones:hover .icon_wrap svg.scale_home,
	.header .phones:hover .icon_wrap::after {
		animation: none !important;
	}
}