/**
 * Circuit Craftworks custom global header.
 * Desktop, tablet, and mobile visual system.
 * Derived from the completed homepage V4 design language.
 */

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */

.cc-site-header {
	--cc-header-bg: #20395f;
	--cc-header-bg-2: #2b4d79;
	--cc-header-panel: #345d8d;
	--cc-header-panel-2: #3f6e9f;
	--cc-header-blue: #4a86ff;
	--cc-header-blue-2: #80b0ff;
	--cc-header-purple: #7b68ee;
	--cc-header-purple-2: #aa98ff;
	--cc-header-green: #39c9a5;
	--cc-header-cyan: #55c8ef;
	--cc-header-white: #fbfdff;
	--cc-header-muted: #d1dbea;
	--cc-header-line: rgba(190, 211, 248, 0.26);
	--cc-header-line-soft: rgba(190, 211, 248, 0.12);
	--cc-header-line-strong: rgba(202, 219, 251, 0.28);
	--cc-header-container: 1240px;
	--cc-header-height: 96px;
	--cc-header-radius: 24px;
	--cc-header-radius-small: 14px;
	--cc-header-transition: 0.2s ease;
}

/* =========================================================
   2. SCOPED RESETS
   ========================================================= */

.cc-site-header,
.cc-site-header *,
.cc-site-header *::before,
.cc-site-header *::after {
	box-sizing: border-box;
}

.cc-site-header {
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	line-height: 1.5;
}

.cc-site-header ul,
.cc-site-header ol,
.cc-site-header li,
.cc-site-header p {
	max-width: none;
	margin: 0;
	padding: 0;
}

.cc-site-header ul,
.cc-site-header ol {
	list-style: none;
}

.cc-site-header li {
	margin-bottom: 0;
}

.cc-site-header a {
	color: inherit;
	text-decoration: none;
	text-underline-offset: initial;
}

.cc-site-header a:hover {
	color: inherit;
}

.cc-site-header button {
	font: inherit;
}

/* =========================================================
   3. HEADER SHELL
   ========================================================= */

.cc-site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	isolation: isolate;
	width: 100%;
	min-height: var(--cc-header-height);
	overflow: visible;
	color: var(--cc-header-white);
	background:
		radial-gradient(circle at 10% 4%, rgba(74, 134, 255, 0.3), transparent 34%),
		radial-gradient(circle at 89% 15%, rgba(123, 104, 238, 0.26), transparent 33%),
		linear-gradient(145deg, #20395f, #2b4d79 60%, #263f69);
	border-bottom: 1px solid var(--cc-header-line);
	box-shadow: 0 18px 50px rgba(12, 30, 58, 0.22);
}

body.admin-bar .cc-site-header {
	top: 32px;
}

/* =========================================================
   4. DECORATIVE BACKGROUND
   ========================================================= */

.cc-site-header__background {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.cc-site-header__grid {
	position: absolute;
	inset: 0;
	opacity: 0.72;
	background-image:
		linear-gradient(rgba(137, 159, 219, 0.065) 1px, transparent 1px),
		linear-gradient(90deg, rgba(137, 159, 219, 0.065) 1px, transparent 1px);
	background-size: 54px 54px;
	mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}

.cc-site-header__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(20px);
}

.cc-site-header__glow--blue {
	top: -220px;
	left: -110px;
	width: 430px;
	height: 330px;
	background: radial-gradient(circle, rgba(52, 120, 255, 0.34), transparent 68%);
}

.cc-site-header__glow--purple {
	top: -220px;
	right: -130px;
	width: 450px;
	height: 340px;
	background: radial-gradient(circle, rgba(130, 86, 246, 0.31), transparent 68%);
}

.cc-site-header__bottom-line {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(74, 134, 255, 0.38),
		rgba(170, 152, 255, 0.42),
		rgba(57, 201, 165, 0.26),
		transparent
	);
	box-shadow: 0 0 14px rgba(75, 132, 255, 0.28);
}

/* =========================================================
   5. CONTAINER
   ========================================================= */

.cc-site-header__container {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: clamp(28px, 4vw, 62px);
	width: min(var(--cc-header-container), calc(100% - 48px));
	min-height: var(--cc-header-height);
	margin-inline: auto;
}

/* =========================================================
   6. BRAND
   ========================================================= */

.cc-site-header__brand {
	position: relative;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 13px;
	min-width: max-content;
	color: var(--cc-header-white);
	border-radius: var(--cc-header-radius-small);
	outline: none;
	transition: transform var(--cc-header-transition), filter var(--cc-header-transition);
}

.cc-site-header__brand:hover {
	color: var(--cc-header-white);
	transform: translateY(-2px);
	filter: brightness(1.06);
}

.cc-site-header__brand:focus-visible {
	outline: 3px solid var(--cc-header-blue-2);
	outline-offset: 5px;
}

.cc-site-header__logo {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.cc-site-header__logo-image {
	display: block;
	width: auto;
	max-width: 58px;
	height: 52px;
	object-fit: contain;
}

.cc-site-header__fallback-mark {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	overflow: hidden;
	color: #ffffff;
	background: linear-gradient(145deg, var(--cc-header-blue), var(--cc-header-purple));
	border: 1px solid rgba(202, 219, 251, 0.28);
	border-radius: 14px;
	box-shadow: 0 14px 30px rgba(65, 96, 213, 0.25);
}

.cc-site-header__fallback-mark::before {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: -1;
	border-radius: 12px;
	background: radial-gradient(circle at 23% 18%, rgba(255, 255, 255, 0.22), transparent 52%);
}

.cc-site-header__fallback-mark svg {
	display: block;
	width: 27px;
	height: 27px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cc-site-header__brand-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-width: 0;
}

.cc-site-header__site-name {
	color: var(--cc-header-white);
	font-size: clamp(17px, 1.4vw, 20px);
	font-weight: 850;
	line-height: 1.1;
	letter-spacing: -0.035em;
	white-space: nowrap;
}

.cc-site-header__site-description {
	color: var(--cc-header-muted);
	font-size: 9px;
	font-weight: 850;
	line-height: 1.3;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* =========================================================
   7. DESKTOP NAVIGATION
   ========================================================= */

.cc-site-header__navigation-panel {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(18px, 2.2vw, 30px);
	min-width: 0;
}

.cc-site-header__navigation {
	min-width: 0;
}

.cc-site-header__menu {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 3px;
}

.cc-site-header__menu > .menu-item {
	position: relative;
}

.cc-site-header__menu > .menu-item > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 11px;
	color: #d8e1ef;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.005em;
	white-space: nowrap;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 12px;
	outline: none;
	transition:
		color var(--cc-header-transition),
		background-color var(--cc-header-transition),
		border-color var(--cc-header-transition),
		transform var(--cc-header-transition);
}

.cc-site-header__menu > .menu-item > a::after {
	content: "";
	position: absolute;
	right: 11px;
	bottom: 5px;
	left: 11px;
	height: 1px;
	background: linear-gradient(90deg, var(--cc-header-blue), var(--cc-header-purple), var(--cc-header-green));
	box-shadow: 0 0 10px rgba(75, 132, 255, 0.45);
	opacity: 0;
	transform: scaleX(0.4);
	transition: opacity var(--cc-header-transition), transform var(--cc-header-transition);
}

.cc-site-header__menu > .menu-item > a:hover,
.cc-site-header__menu > .menu-item > a:focus-visible {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.045);
	border-color: rgba(150, 177, 247, 0.14);
	transform: translateY(-2px);
}

.cc-site-header__menu > .menu-item > a:focus-visible {
	outline: 2px solid var(--cc-header-blue-2);
	outline-offset: 2px;
}

.cc-site-header__menu > .menu-item > a:hover::after,
.cc-site-header__menu > .menu-item > a:focus-visible::after,
.cc-site-header__menu > .current-menu-item > a::after,
.cc-site-header__menu > .current-menu-ancestor > a::after,
.cc-site-header__menu > .current_page_item > a::after {
	opacity: 1;
	transform: scaleX(1);
}

.cc-site-header__menu > .current-menu-item > a,
.cc-site-header__menu > .current-menu-ancestor > a,
.cc-site-header__menu > .current_page_item > a {
	color: #ffffff;
	background: linear-gradient(145deg, rgba(52, 120, 255, 0.13), rgba(130, 86, 246, 0.08));
	border-color: rgba(145, 172, 239, 0.16);
}

.cc-site-header__menu > .menu-item-has-children > a::before {
	content: "";
	order: 2;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	opacity: 0.72;
	transform: rotate(45deg);
	transition: transform var(--cc-header-transition), opacity var(--cc-header-transition);
}

.cc-site-header__menu > .menu-item-has-children:hover > a::before,
.cc-site-header__menu > .menu-item-has-children:focus-within > a::before {
	opacity: 1;
	transform: translateY(2px) rotate(225deg);
}

/* =========================================================
   8. DESKTOP DROPDOWNS
   ========================================================= */

.cc-site-header__menu .sub-menu {
	position: absolute;
	top: calc(100% + 14px);
	left: 0;
	z-index: 50;
	display: grid;
	gap: 6px;
	min-width: 270px;
	max-width: min(360px, calc(100vw - 48px));
	padding: 12px;
	overflow: hidden;
	color: var(--cc-header-white);
	background:
		radial-gradient(circle at 85% 12%, rgba(74, 134, 255, 0.16), transparent 38%),
		linear-gradient(145deg, rgba(52, 93, 141, 0.98), rgba(21, 40, 70, 0.99));
	border: 1px solid rgba(155, 181, 247, 0.22);
	border-radius: 20px;
	box-shadow: 0 34px 85px rgba(1, 6, 20, 0.42);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(10px);
	transition:
		opacity var(--cc-header-transition),
		visibility var(--cc-header-transition),
		transform var(--cc-header-transition);
}

.cc-site-header__menu .sub-menu::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.4;
	background-image:
		linear-gradient(rgba(130, 154, 219, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(130, 154, 219, 0.05) 1px, transparent 1px);
	background-size: 34px 34px;
}

.cc-site-header__menu .menu-item-has-children:hover > .sub-menu,
.cc-site-header__menu .menu-item-has-children:focus-within > .sub-menu,
.cc-site-header__menu .menu-item-has-children.is-submenu-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.cc-site-header__menu .sub-menu .menu-item {
	position: relative;
}

.cc-site-header__menu .sub-menu a {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 10px 12px;
	color: #d1dbea;
	font-size: 12px;
	font-weight: 750;
	line-height: 1.35;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid transparent;
	border-radius: 13px;
	outline: none;
	transition:
		color var(--cc-header-transition),
		background-color var(--cc-header-transition),
		border-color var(--cc-header-transition),
		transform var(--cc-header-transition);
}

.cc-site-header__menu .sub-menu a::before {
	content: "";
	width: 8px;
	height: 8px;
	background: var(--cc-header-blue);
	border-radius: 50%;
	box-shadow: 0 0 12px rgba(74, 134, 255, 0.52);
	transition: background-color var(--cc-header-transition), box-shadow var(--cc-header-transition);
}

.cc-site-header__menu .sub-menu a:hover,
.cc-site-header__menu .sub-menu a:focus-visible,
.cc-site-header__menu .sub-menu .current-menu-item > a {
	color: #ffffff;
	background: linear-gradient(145deg, rgba(52, 120, 255, 0.14), rgba(130, 86, 246, 0.08));
	border-color: rgba(145, 172, 239, 0.16);
	transform: translateX(3px);
}

.cc-site-header__menu .sub-menu a:hover::before,
.cc-site-header__menu .sub-menu a:focus-visible::before,
.cc-site-header__menu .sub-menu .current-menu-item > a::before {
	background: var(--cc-header-green);
	box-shadow: 0 0 14px rgba(57, 201, 165, 0.62);
}

.cc-site-header__menu .sub-menu a:focus-visible {
	outline: 2px solid var(--cc-header-blue-2);
	outline-offset: 1px;
}

/* =========================================================
   9. SERVICES MEGA-MENU
   ========================================================= */

.cc-site-header__menu > .cc-menu-item--services {
	position: static;
}

.cc-site-header__menu > .cc-menu-item--services > .sub-menu {
	top: calc(100% - 5px);
	right: 190px;
	left: 245px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 7px;
	min-width: 0;
	max-width: none;
	padding: 18px;
	border-radius: 24px;
	transform: translateY(12px) scale(0.985);
	transform-origin: top center;
}

.cc-site-header__menu > .cc-menu-item--services:hover > .sub-menu,
.cc-site-header__menu > .cc-menu-item--services:focus-within > .sub-menu,
.cc-site-header__menu > .cc-menu-item--services.is-submenu-open > .sub-menu {
	transform: translateY(0) scale(1);
}

.cc-site-header__menu > .cc-menu-item--services > .sub-menu a {
	min-height: 54px;
	padding: 10px 12px;
}

/* =========================================================
   10. PRIMARY CTA
   ========================================================= */

.cc-site-header__action {
	flex: 0 0 auto;
}

.cc-site-header__request-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 20px;
	color: #ffffff;
	background: linear-gradient(135deg, var(--cc-header-blue), var(--cc-header-purple));
	border: 1px solid transparent;
	border-radius: 14px;
	box-shadow: 0 16px 35px rgba(55, 103, 255, 0.32);
	font-size: 12px;
	font-weight: 850;
	line-height: 1;
	white-space: nowrap;
	outline: none;
	transition:
		transform var(--cc-header-transition),
		filter var(--cc-header-transition),
		box-shadow var(--cc-header-transition);
}

.cc-site-header__request-button svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--cc-header-transition);
}

.cc-site-header__request-button:hover {
	color: #ffffff;
	transform: translateY(-3px);
	filter: brightness(1.05);
	box-shadow: 0 20px 42px rgba(55, 103, 255, 0.4);
}

.cc-site-header__request-button:hover svg {
	transform: translateX(4px);
}

.cc-site-header__request-button:active {
	transform: translateY(-1px);
}

.cc-site-header__request-button:focus-visible {
	outline: 3px solid var(--cc-header-blue-2);
	outline-offset: 4px;
}

.cc-site-header__menu-toggle,
.cc-submenu-toggle {
	display: none;
}

/* =========================================================
   11. COMPACT DESKTOP
   ========================================================= */

@media (max-width: 1220px) and (min-width: 1101px) {
	.cc-site-header__container {
		width: calc(100% - 32px);
		gap: 20px;
	}

	.cc-site-header__brand {
		gap: 9px;
	}

	.cc-site-header__fallback-mark {
		flex-basis: 43px;
		width: 43px;
		height: 43px;
	}

	.cc-site-header__logo-image {
		max-width: 50px;
		height: 46px;
	}

	.cc-site-header__site-name {
		font-size: 16px;
	}

	.cc-site-header__site-description {
		font-size: 8px;
		letter-spacing: 0.07em;
	}

	.cc-site-header__navigation-panel {
		gap: 13px;
	}

	.cc-site-header__menu > .menu-item > a {
		padding-inline: 8px;
		font-size: 11px;
	}

	.cc-site-header__request-button {
		min-height: 50px;
		padding-inline: 14px;
		font-size: 10.5px;
	}

	.cc-site-header__menu > .cc-menu-item--services > .sub-menu {
		right: 165px;
		left: 210px;
	}
}

/* =========================================================
   12. TABLET / MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 1100px) {
	.cc-site-header {
		--cc-header-height: 84px;
	}

	.cc-site-header__container {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 18px;
		width: calc(100% - 32px);
		min-height: var(--cc-header-height);
	}

	.cc-site-header__grid {
		background-size: 48px 48px;
	}

	.cc-site-header__glow--blue {
		top: -230px;
		left: -170px;
		width: 390px;
		height: 320px;
	}

	.cc-site-header__glow--purple {
		top: -230px;
		right: -180px;
		width: 400px;
		height: 320px;
	}

	.cc-site-header__brand {
		min-width: 0;
	}

	.cc-site-header__brand-copy {
		min-width: 0;
	}

	.cc-site-header__site-name {
		overflow: hidden;
		font-size: 18px;
		text-overflow: ellipsis;
	}

	.cc-site-header__site-description {
		overflow: hidden;
		max-width: min(52vw, 340px);
		text-overflow: ellipsis;
	}

	.cc-site-header__menu-toggle {
		position: relative;
		z-index: 60;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		min-width: 104px;
		min-height: 50px;
		padding: 0 14px;
		color: var(--cc-header-white);
		background: linear-gradient(145deg, rgba(52, 120, 255, 0.18), rgba(123, 104, 238, 0.12));
		border: 1px solid rgba(170, 194, 246, 0.24);
		border-radius: 14px;
		box-shadow: 0 14px 30px rgba(12, 30, 58, 0.18);
		cursor: pointer;
		outline: none;
		transition:
			color var(--cc-header-transition),
			background-color var(--cc-header-transition),
			border-color var(--cc-header-transition),
			transform var(--cc-header-transition),
			box-shadow var(--cc-header-transition);
	}

	.cc-site-header__menu-toggle:hover {
		background: linear-gradient(145deg, rgba(52, 120, 255, 0.26), rgba(123, 104, 238, 0.18));
		border-color: rgba(170, 194, 246, 0.36);
		transform: translateY(-2px);
	}

	.cc-site-header__menu-toggle:focus-visible {
		outline: 3px solid var(--cc-header-blue-2);
		outline-offset: 3px;
	}

	.cc-site-header__menu-toggle[aria-expanded="true"] {
		background: linear-gradient(135deg, var(--cc-header-blue), var(--cc-header-purple));
		border-color: transparent;
		box-shadow: 0 16px 35px rgba(55, 103, 255, 0.28);
	}

	.cc-site-header__menu-label {
		font-size: 11px;
		font-weight: 850;
		line-height: 1;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.cc-site-header__menu-icon {
		position: relative;
		display: block;
		width: 20px;
		height: 16px;
	}

	.cc-site-header__menu-icon > span {
		position: absolute;
		left: 0;
		display: block;
		width: 20px;
		height: 2px;
		background: currentColor;
		border-radius: 999px;
		transform-origin: center;
		transition: top var(--cc-header-transition), opacity var(--cc-header-transition), transform var(--cc-header-transition);
	}

	.cc-site-header__menu-icon > span:nth-child(1) {
		top: 0;
	}

	.cc-site-header__menu-icon > span:nth-child(2) {
		top: 7px;
	}

	.cc-site-header__menu-icon > span:nth-child(3) {
		top: 14px;
	}

	.cc-site-header__menu-toggle[aria-expanded="true"] .cc-site-header__menu-icon > span:nth-child(1) {
		top: 7px;
		transform: rotate(45deg);
	}

	.cc-site-header__menu-toggle[aria-expanded="true"] .cc-site-header__menu-icon > span:nth-child(2) {
		opacity: 0;
		transform: scaleX(0.3);
	}

	.cc-site-header__menu-toggle[aria-expanded="true"] .cc-site-header__menu-icon > span:nth-child(3) {
		top: 7px;
		transform: rotate(-45deg);
	}

	.cc-site-header__navigation-panel {
		position: absolute;
		top: calc(100% + 12px);
		right: 0;
		left: 0;
		z-index: 55;
		display: block;
		max-height: calc(100dvh - var(--cc-header-height) - 32px);
		padding: 16px;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		color: var(--cc-header-white);
		background:
			radial-gradient(circle at 8% 4%, rgba(74, 134, 255, 0.22), transparent 31%),
			radial-gradient(circle at 91% 6%, rgba(123, 104, 238, 0.18), transparent 31%),
			linear-gradient(145deg, rgba(52, 93, 141, 0.99), rgba(27, 51, 84, 0.995));
		border: 1px solid rgba(190, 211, 248, 0.26);
		border-radius: 24px;
		box-shadow: 0 34px 85px rgba(1, 6, 20, 0.42);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-10px) scale(0.985);
		transform-origin: top center;
		transition:
			opacity var(--cc-header-transition),
			visibility var(--cc-header-transition),
			transform var(--cc-header-transition);
	}

	.cc-site-header__navigation-panel::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		opacity: 0.65;
		background-image:
			linear-gradient(rgba(137, 159, 219, 0.05) 1px, transparent 1px),
			linear-gradient(90deg, rgba(137, 159, 219, 0.05) 1px, transparent 1px);
		background-size: 46px 46px;
		pointer-events: none;
	}

	.cc-site-header.is-menu-open .cc-site-header__navigation-panel {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0) scale(1);
	}

	.cc-site-header__navigation {
		width: 100%;
	}

	.cc-site-header__menu {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
		gap: 8px;
		width: 100%;
	}

	.cc-site-header__menu > .menu-item {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: stretch;
		width: 100%;
	}

	.cc-site-header__menu > .menu-item > a {
		justify-content: flex-start;
		width: 100%;
		min-height: 54px;
		padding: 12px 14px;
		color: #e5ecff;
		background: rgba(255, 255, 255, 0.035);
		border-color: rgba(145, 172, 239, 0.11);
		border-radius: 14px;
		font-size: 13px;
	}

	.cc-site-header__menu > .menu-item > a::after {
		right: 14px;
		bottom: 7px;
		left: 14px;
	}

	.cc-site-header__menu > .menu-item > a:hover,
	.cc-site-header__menu > .menu-item > a:focus-visible {
		background: linear-gradient(145deg, rgba(52, 120, 255, 0.15), rgba(123, 104, 238, 0.09));
		transform: none;
	}

	.cc-site-header__menu > .menu-item-has-children {
		grid-template-columns: minmax(0, 1fr) 50px;
	}

	.cc-site-header__menu > .menu-item-has-children > a {
		grid-column: 1;
		grid-row: 1;
		padding-right: 10px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	.cc-site-header__menu > .menu-item-has-children > a::before {
		display: none;
	}

	.cc-submenu-toggle {
		position: relative;
		grid-column: 2;
		grid-row: 1;
		display: grid;
		place-items: center;
		width: 50px;
		min-height: 54px;
		padding: 0;
		color: #dbe6ff;
		background: linear-gradient(145deg, rgba(52, 120, 255, 0.12), rgba(123, 104, 238, 0.075));
		border: 1px solid rgba(145, 172, 239, 0.11);
		border-left: 0;
		border-radius: 0 14px 14px 0;
		cursor: pointer;
		outline: none;
		transition: color var(--cc-header-transition), background-color var(--cc-header-transition), border-color var(--cc-header-transition);
	}

	.cc-submenu-toggle::before {
		content: "";
		width: 8px;
		height: 8px;
		margin-top: -4px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: margin var(--cc-header-transition), transform var(--cc-header-transition);
	}

	.cc-submenu-toggle:hover {
		color: #ffffff;
		background: linear-gradient(145deg, rgba(52, 120, 255, 0.22), rgba(123, 104, 238, 0.14));
	}

	.cc-submenu-toggle:focus-visible {
		outline: 2px solid var(--cc-header-blue-2);
		outline-offset: -3px;
	}

	.cc-submenu-toggle[aria-expanded="true"]::before {
		margin-top: 4px;
		transform: rotate(225deg);
	}

	.cc-site-header__menu .sub-menu,
	.cc-site-header__menu > .cc-menu-item--services > .sub-menu {
		position: static;
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
		width: 100%;
		min-width: 0;
		max-width: none;
		max-height: 0;
		margin: 0;
		padding: 0 8px;
		overflow: hidden;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: none;
		transition:
			max-height 360ms ease,
			margin-top var(--cc-header-transition),
			padding-top var(--cc-header-transition),
			padding-bottom var(--cc-header-transition),
			opacity var(--cc-header-transition),
			visibility var(--cc-header-transition);
	}

	.cc-site-header__menu .sub-menu::before {
		display: none;
	}

	.cc-site-header__menu .menu-item-has-children.is-submenu-open > .sub-menu {
		max-height: 1200px;
		margin-top: 8px;
		padding-top: 8px;
		padding-bottom: 8px;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.cc-site-header__menu .menu-item-has-children:not(.is-submenu-open):hover > .sub-menu,
	.cc-site-header__menu .menu-item-has-children:not(.is-submenu-open):focus-within > .sub-menu {
		max-height: 0;
		margin-top: 0;
		padding-top: 0;
		padding-bottom: 0;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: none;
	}

	.cc-site-header__menu .sub-menu a {
		min-height: 50px;
		padding: 10px 12px;
		background: linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.022));
		border-color: rgba(145, 172, 239, 0.1);
	}

	.cc-site-header__menu .sub-menu a:hover,
	.cc-site-header__menu .sub-menu a:focus-visible,
	.cc-site-header__menu .sub-menu .current-menu-item > a {
		transform: none;
	}

	.cc-site-header__action {
		width: 100%;
		margin-top: 12px;
		padding-top: 14px;
		border-top: 1px solid rgba(190, 211, 248, 0.14);
	}

	.cc-site-header__request-button {
		width: 100%;
		min-height: 58px;
		font-size: 13px;
	}
}

/* =========================================================
   13. 900PX REFINEMENT
   ========================================================= */

@media (max-width: 900px) {
	.cc-site-header {
		--cc-header-height: 82px;
	}

	.cc-site-header__container {
		gap: 14px;
	}

	.cc-site-header__logo-image {
		max-width: 52px;
		height: 47px;
	}

	.cc-site-header__fallback-mark {
		flex-basis: 44px;
		width: 44px;
		height: 44px;
	}

	.cc-site-header__site-name {
		font-size: 17px;
	}

	.cc-site-header__site-description {
		max-width: 285px;
		font-size: 8px;
	}

	.cc-site-header__navigation-panel {
		padding: 14px;
	}

	.cc-site-header__menu {
		grid-template-columns: 1fr;
	}

	.cc-site-header__menu .sub-menu,
	.cc-site-header__menu > .cc-menu-item--services > .sub-menu {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* =========================================================
   14. 700PX MOBILE
   ========================================================= */

@media (max-width: 700px) {
	.cc-site-header {
		--cc-header-height: 76px;
	}

	.cc-site-header__container {
		width: calc(100% - 32px);
	}

	.cc-site-header__brand {
		gap: 10px;
	}

	.cc-site-header__logo-image {
		max-width: 46px;
		height: 42px;
	}

	.cc-site-header__fallback-mark {
		flex-basis: 42px;
		width: 42px;
		height: 42px;
		border-radius: 13px;
	}

	.cc-site-header__fallback-mark svg {
		width: 23px;
		height: 23px;
	}

	.cc-site-header__site-name {
		font-size: 16px;
	}

	.cc-site-header__site-description {
		max-width: 46vw;
		font-size: 7.5px;
		letter-spacing: 0.075em;
	}

	.cc-site-header__menu-toggle {
		min-width: 50px;
		min-height: 48px;
		padding: 0 13px;
	}

	.cc-site-header__menu-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.cc-site-header__navigation-panel {
		top: calc(100% + 8px);
		max-height: calc(100dvh - var(--cc-header-height) - 24px);
		padding: 12px;
		border-radius: 20px;
	}

	.cc-site-header__menu {
		grid-template-columns: minmax(0, 1fr);
		gap: 7px;
	}

	.cc-site-header__menu .sub-menu,
	.cc-site-header__menu > .cc-menu-item--services > .sub-menu {
		grid-template-columns: minmax(0, 1fr);
	}

	.cc-site-header__menu > .menu-item > a,
	.cc-submenu-toggle {
		min-height: 52px;
	}

	.cc-site-header__menu .sub-menu a {
		min-height: 48px;
	}

	.cc-site-header__request-button {
		min-height: 56px;
	}
}

/* =========================================================
   15. 460PX COMPACT MOBILE
   ========================================================= */

@media (max-width: 460px) {
	.cc-site-header {
		--cc-header-height: 72px;
	}

	.cc-site-header__container {
		width: calc(100% - 24px);
		gap: 10px;
	}

	.cc-site-header__brand {
		gap: 8px;
	}

	.cc-site-header__logo-image {
		max-width: 42px;
		height: 38px;
	}

	.cc-site-header__fallback-mark {
		flex-basis: 39px;
		width: 39px;
		height: 39px;
		border-radius: 12px;
	}

	.cc-site-header__fallback-mark svg {
		width: 21px;
		height: 21px;
	}

	.cc-site-header__site-name {
		max-width: 55vw;
		font-size: 15px;
	}

	.cc-site-header__site-description {
		display: none;
	}

	.cc-site-header__menu-toggle {
		min-width: 46px;
		min-height: 44px;
		padding-inline: 11px;
		border-radius: 13px;
	}

	.cc-site-header__navigation-panel {
		max-height: calc(100dvh - var(--cc-header-height) - 18px);
		padding: 10px;
		border-radius: 18px;
	}

	.cc-site-header__menu > .menu-item > a {
		min-height: 50px;
		padding: 10px 12px;
		font-size: 12px;
	}

	.cc-submenu-toggle {
		width: 46px;
		min-height: 50px;
	}

	.cc-site-header__menu > .menu-item-has-children {
		grid-template-columns: minmax(0, 1fr) 46px;
	}

	.cc-site-header__menu .sub-menu {
		padding-right: 4px;
		padding-left: 4px;
	}

	.cc-site-header__menu .sub-menu a {
		min-height: 46px;
		padding: 9px 10px;
		font-size: 11px;
	}

	.cc-site-header__action {
		margin-top: 9px;
		padding-top: 11px;
	}

	.cc-site-header__request-button {
		min-height: 54px;
		padding-inline: 16px;
		font-size: 12px;
	}
}

/* =========================================================
   16. DOCUMENT / ADMIN STATES
   ========================================================= */

body.cc-navigation-open {
	overflow: hidden;
}

@media (max-width: 782px) {
	body.admin-bar .cc-site-header {
		top: 46px;
	}

	body.admin-bar.cc-navigation-open {
		overflow: hidden;
	}

	body.admin-bar .cc-site-header__navigation-panel {
		max-height: calc(100dvh - var(--cc-header-height) - 46px - 24px);
	}
}

/* =========================================================
   17. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.cc-site-header *,
	.cc-site-header *::before,
	.cc-site-header *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* CC-PATCH-HOVER-BRIDGE
   Desktop dropdown reliability: the dropdowns sit 14px (standard) and 33px
   (services mega panel) below their trigger, creating a dead zone that broke
   :hover while the pointer crossed it. A transparent bridge extends each open
   panel's hit area upward so hover stays continuous. Desktop only; the mobile
   accordion (max-width: 1100px) is untouched. */
@media (min-width: 1101px) {

	/* overflow:hidden previously clipped anything outside the panel box, so the
	   bridge could not exist. Corner clipping is preserved by giving the grid
	   texture layer the same radius it used to inherit from the clip. */
	.cc-site-header__menu .sub-menu {
		overflow: visible;
	}

	.cc-site-header__menu .sub-menu::before {
		border-radius: inherit;
	}

	.cc-site-header__menu > .menu-item-has-children > .sub-menu::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: 18px;
		background: transparent;
	}

	.cc-site-header__menu > .cc-menu-item--services > .sub-menu::after {
		height: 38px;
	}
}

/* =========================================================================
   FROZEN CHASSIS INTEGRATION — header
   =========================================================================
   Source of truth: cc-chassis-FINAL-BUNDLE.zip
     cc-chassis-FINAL.css      sha256 f8c02a06…1536  (39,595 bytes)
     cc-chassis-FINAL-prototype.html
     cc-chassis-pass4-*.png

   This is an INTEGRATION layer, not a redesign. The frozen rules are carried
   over verbatim wherever possible; the prototype's component classes are added
   to the real theme elements in header.php so the design applies literally.
   Where the real WordPress markup has no prototype counterpart (the menu <ul>
   that wp_nav_menu emits, the submenu system, the request button) a bridge
   rule maps the real selector onto the frozen treatment.

   Integration corrections, and nothing else, are marked [IC].
   ========================================================================= */

:root{
  --cc-head-top:#1b4d70;
  --cc-head-mid:#163f5f;
  --cc-head-deep:#0e2d46;
  --cc-head-ink:#091b2b;
  --cc-head-panel:#102d44;
  --cc-head-line:rgba(161,209,239,.18);
  --cc-head-line-strong:rgba(121,210,245,.42);
  --cc-head-text:#f7fbff;
  --cc-head-muted:#bed2df;
  --cc-head-cyan:#55c8ef;
  --cc-head-blue:#68a6ff;
  --cc-head-graphite:#171c22;
  --cc-focus:#bff4ff;
  --cc-hit:44px;
  --cc-mobile-bg:#0d2a40;
  --cc-mobile-panel:#171d24;
  --cc-rail-a:8.8%;
  --cc-rail-b:39.5%;
  --cc-rail-c:71.8%;
  --cc-rail-d:95.0%;
  --cc-live:#55c8ef;
  --cc-live-hot:#bff4ff;
  --cc-board:#071524;
}

/* ---- chassis shell ---- */
.cc-header-proto{
  position:sticky;                    /* [IC] real theme header is sticky */
  top:0;
  height:126px;
  min-height:126px;
  overflow:visible;
  isolation:isolate;
  z-index:100;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 22%),
    radial-gradient(750px 150px at 11% 0%,rgba(85,200,239,.105),transparent 60%),
    radial-gradient(620px 150px at 78% -18%,rgba(104,166,255,.09),transparent 65%),
    linear-gradient(180deg,var(--cc-head-top) 0%,var(--cc-head-mid) 55%,var(--cc-head-deep) 100%);
  border-top:1px solid rgba(199,232,248,.1);
  border-bottom:0;                    /* [IC] frozen design terminates via ::after */
  box-shadow:0 14px 42px rgba(0,8,18,.34);
}
.cc-header-proto::before{
  content:"";
  position:absolute;inset:0;
  opacity:.38;
  background-image:
    linear-gradient(rgba(180,225,247,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(180,225,247,.05) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.16) 72%,transparent);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.16) 72%,transparent);
  pointer-events:none;
}
.cc-header-proto::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:20px;
  background:
    linear-gradient(180deg,rgba(3,16,29,.18),rgba(3,13,24,.7)),
    linear-gradient(90deg,transparent 0 4%,rgba(102,194,234,.09) 4% 4.1%,transparent 4.1% 100%);
  border-top:1px solid rgba(148,213,240,.11);
  border-bottom:1px solid rgba(85,200,239,.18);
  pointer-events:none;
}

/* [IC] the previous header's own painted layers are replaced by the frozen
   chassis; they would otherwise double up on grid, glow and bottom rule. */
.cc-header-proto .cc-site-header__background,
.cc-header-proto .cc-site-header__grid,
.cc-header-proto .cc-site-header__glow,
.cc-header-proto .cc-site-header__bottom-line{display:none!important}

/* ---- inner rail ---- */
.cc-header__inner{
  width:min(94vw,1580px);
  max-width:1580px;
  height:106px;
  margin:0 auto;
  display:grid;
  /* [IC] real container holds brand + toggle + navigation panel, so the frozen
     two-column proportion is expressed as brand | (nav panel or toggle). */
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:42px;
  position:relative;
  z-index:4;
  padding:0 clamp(14px,1.5vw,24px);
}
.cc-header__inner::before{
  content:"";
  position:absolute;
  left:36%;right:0;top:20px;bottom:21px;
  border-top:1px solid rgba(185,224,243,.09);
  border-bottom:1px solid rgba(6,22,34,.7);
  background:linear-gradient(180deg,rgba(8,30,47,.16),rgba(4,18,31,.25));
  clip-path:polygon(18px 0,100% 0,100% 100%,0 100%,0 18px);
  pointer-events:none;
  z-index:-1;
}

/* ---- brand ---- */
.cc-brand{display:flex;align-items:center;gap:15px;min-width:0;text-decoration:none}
.cc-brand .cc-site-header__logo,
.cc-brand .cc-site-header__fallback-mark{
  width:48px;height:48px;flex:0 0 48px;position:relative;border-radius:13px;
  border:1px solid rgba(189,230,248,.28);
  background:
    radial-gradient(circle at 50% 50%,rgba(85,200,239,.15) 0 28%,transparent 29%),
    linear-gradient(145deg,rgba(119,176,255,.55),rgba(108,93,223,.42));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 26px rgba(0,12,25,.28);
  display:grid;place-items:center;overflow:hidden;contain:paint;
}
.cc-brand .cc-site-header__logo img,
.cc-brand .cc-site-header__fallback-mark svg{width:26px;height:26px;display:block}
.cc-brand__name{font-weight:820;font-size:18px;line-height:1.05;letter-spacing:-.025em;color:var(--cc-head-text);white-space:nowrap}
.cc-brand__sub{margin-top:5px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:9px;font-weight:700;letter-spacing:.115em;color:#c0d8e5;text-transform:uppercase;white-space:nowrap}

/* ---- desktop navigation (bridged onto wp_nav_menu output) ---- */
.cc-nav{display:flex;justify-content:flex-end;align-items:stretch;height:64px;min-width:0}
.cc-nav .cc-site-header__menu{display:flex;align-items:stretch;gap:2px;margin:0;padding:0;list-style:none}
.cc-nav .cc-site-header__menu > li{position:relative;display:flex;align-items:stretch}
.cc-nav .cc-site-header__menu > li > a{
  position:relative;display:flex;align-items:center;gap:6px;padding:0 clamp(10px,1vw,17px);
  color:#eaf5fa;text-decoration:none;font-size:13px;font-weight:690;letter-spacing:-.01em;
  border:1px solid transparent;background:none;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.cc-nav .cc-site-header__menu > li > a::before{
  content:"";position:absolute;left:14px;right:14px;bottom:7px;height:1px;
  background:linear-gradient(90deg,transparent,var(--cc-head-cyan),transparent);
  transform:scaleX(0);opacity:0;transition:.22s ease;
}
.cc-nav .cc-site-header__menu > li > a::after{
  content:"";position:absolute;width:5px;height:5px;border-radius:50%;bottom:5px;left:50%;margin-left:-2.5px;
  background:var(--cc-head-cyan);box-shadow:0 0 10px rgba(85,200,239,.85);
  transform:scale(0);opacity:0;transition:.22s ease;
}
.cc-nav .cc-site-header__menu > li > a:hover,
.cc-nav .cc-site-header__menu > li > a:focus-visible{background:rgba(6,25,40,.28);border-color:rgba(163,217,240,.1);outline:none}
.cc-nav .cc-site-header__menu > li > a:hover::before,
.cc-nav .cc-site-header__menu > li > a:focus-visible::before{transform:scaleX(1);opacity:.62}
.cc-nav .cc-site-header__menu > li > a:hover::after,
.cc-nav .cc-site-header__menu > li > a:focus-visible::after{transform:scale(1);opacity:1}
/* current page: small energized node + trace, never a bright slab */
.cc-nav .cc-site-header__menu > li.current-menu-item > a,
.cc-nav .cc-site-header__menu > li.current_page_item > a,
.cc-nav .cc-site-header__menu > li.current-menu-ancestor > a,
.cc-nav .cc-site-header__menu > li.current-menu-parent > a{
  background:linear-gradient(180deg,rgba(6,25,40,.1),rgba(4,18,31,.44));color:#fff;
}
.cc-nav .cc-site-header__menu > li.current-menu-item > a::before,
.cc-nav .cc-site-header__menu > li.current_page_item > a::before,
.cc-nav .cc-site-header__menu > li.current-menu-ancestor > a::before,
.cc-nav .cc-site-header__menu > li.current-menu-parent > a::before{transform:scaleX(1);opacity:.82}
.cc-nav .cc-site-header__menu > li.current-menu-item > a::after,
.cc-nav .cc-site-header__menu > li.current_page_item > a::after,
.cc-nav .cc-site-header__menu > li.current-menu-ancestor > a::after,
.cc-nav .cc-site-header__menu > li.current-menu-parent > a::after{transform:scale(1);opacity:1}
.cc-nav .cc-submenu-toggle{color:#a9cad9}

/* ---- circuit topology inside the chassis ---- */
.cc-head-traces{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;overflow:hidden}
.cc-head-traces svg{width:100%;height:100%;display:block}
.cc-head-traces .t{fill:none;stroke:rgba(137,206,236,.26);stroke-width:1}
.cc-head-traces .t2{fill:none;stroke:rgba(102,174,214,.14);stroke-width:1}
.cc-head-traces .via{fill:#163f5f;stroke:rgba(112,214,248,.54);stroke-width:1.2}

/* ---- grouped edge connector (not a repeating dash strip) ---- */
.cc-edge-interface{position:absolute;left:0;right:0;bottom:-32px;height:52px;z-index:5;pointer-events:none}
.cc-edge-interface__rail{
  position:absolute;left:0;right:0;top:0;height:2px;opacity:.62;
  background:linear-gradient(90deg,
    transparent 0 3%,
    rgba(74,134,255,.12) 7%,
    rgba(85,200,239,.28) 24%,
    rgba(85,200,239,.12) 50%,
    rgba(85,200,239,.28) 78%,
    rgba(74,134,255,.12) 93%,
    transparent 97%);
  box-shadow:none;
  transition:opacity .3s ease;
}
.cc-edge-interface__group{position:absolute;top:4px;height:20px;display:flex;gap:5px;align-items:flex-start}
.cc-edge-interface__group span{display:block;width:11px;height:var(--h,14px);background:linear-gradient(180deg,rgba(127,217,247,.55),rgba(54,144,188,.2));border:1px solid rgba(137,219,247,.18);border-top:0;border-radius:0 0 2px 2px;box-shadow:inset 0 -3px 6px rgba(5,18,28,.28)}
.cc-edge-interface__drop{position:absolute;top:3px;width:1px;height:35px;background:linear-gradient(180deg,rgba(98,202,240,.5),rgba(74,134,255,.2),transparent)}
.cc-edge-interface__drop::after{content:"";position:absolute;left:-3px;bottom:3px;width:7px;height:7px;border-radius:50%;background:#0c2940;border:1.5px solid rgba(85,200,239,.7);box-shadow:0 0 8px rgba(85,200,239,.18)}
.cc-edge-interface__group.g1{left:calc(var(--cc-rail-a) - 12px)}
.cc-edge-interface__group.g2{left:calc(var(--cc-rail-b) - 20px)}
.cc-edge-interface__group.g3{left:calc(var(--cc-rail-c) - 14px)}
.cc-edge-interface__group.g4{left:auto;right:calc(100% - var(--cc-rail-d) - 8px)}
.cc-edge-interface__drop.d1{left:var(--cc-rail-a)}
.cc-edge-interface__drop.d2{left:var(--cc-rail-b);height:42px}
.cc-edge-interface__drop.d3{left:var(--cc-rail-c);height:28px}
.cc-edge-interface__drop.d4{left:var(--cc-rail-d);right:auto;height:38px}
.cc-header-proto.is-handoff .cc-edge-interface__rail{opacity:.9}

/* ---- request button keeps its own identity inside the chassis ---- */
.cc-header-proto .cc-site-header__action{display:flex;align-items:center}

/* ---- focus ---- */
.cc-nav .cc-site-header__menu > li > a:focus-visible,
.cc-menu-toggle:focus-visible,
.cc-mobile-nav a:focus-visible,
.cc-header-proto .cc-site-header__request-button:focus-visible{
  outline:2px solid var(--cc-focus);
  outline-offset:3px;
}

/* ---- toggle + drawer are desktop-hidden ---- */
/* [IC] the drawer label is a decorative node emitted by header.php; it must
   only exist inside the drawer, never beside the brand on desktop. */
.cc-menu-toggle,
.cc-mobile-nav__label{display:none}

/* [IC] frozen design switches at 1080px; the live navigation controller uses
   1100/1101px. The breakpoint is aligned to the controller so the drawer and
   the toggle can never disagree. Composition is unchanged. */
@media (max-width:1100px){
  .cc-header-proto{height:104px;min-height:104px}
  .cc-header__inner{
    width:min(94vw,980px);
    height:84px;
    grid-template-columns:minmax(0,1fr) auto;
    gap:18px;
    padding-inline:4px;
  }
  .cc-header__inner::before{left:42%;top:14px;bottom:14px;opacity:.58}
  .cc-brand{gap:12px}
  .cc-brand .cc-site-header__logo,
  .cc-brand .cc-site-header__fallback-mark{width:44px;height:44px;flex-basis:44px;border-radius:12px}
  .cc-brand__name{font-size:16px}
  .cc-brand__sub{display:block;font-size:8px;letter-spacing:.095em;margin-top:4px}
  /* [IC] The live theme has ONE nav element and it lives inside the panel.
     The frozen desktop nav bar is suppressed here, but the same element has
     to stay visible inside the open drawer, so the hide must NOT be
     !important or it would also blank the mobile menu. */
  .cc-nav{display:none}
  .cc-header-proto .cc-site-header__action{display:none}

  .cc-menu-toggle{
    display:inline-grid;
    place-items:center;
    width:48px;height:48px;
    min-width:var(--cc-hit);min-height:var(--cc-hit);
    padding:0;
    border:1px solid rgba(189,225,242,.22);
    border-radius:10px;
    background:linear-gradient(180deg,rgba(11,36,54,.58),rgba(6,25,39,.72));
    color:#eefaff;
    box-shadow:inset 0 1px rgba(255,255,255,.04),0 8px 22px rgba(0,9,18,.16);
    cursor:pointer;
    position:relative;
    z-index:12;
  }
  .cc-menu-toggle .cc-site-header__menu-label{display:none}
  .cc-menu-toggle .cc-site-header__menu-icon{display:block;position:relative;width:20px;height:14px}
  .cc-menu-toggle .cc-site-header__menu-icon span{
    display:block;position:absolute;left:0;width:20px;height:1.5px;border-radius:2px;
    background:#dff7ff;box-shadow:0 0 7px rgba(85,200,239,.12);
    transition:transform .22s ease,opacity .16s ease,top .22s ease;
  }
  .cc-menu-toggle .cc-site-header__menu-icon span:nth-child(1){top:0}
  .cc-menu-toggle .cc-site-header__menu-icon span:nth-child(2){top:6px}
  .cc-menu-toggle .cc-site-header__menu-icon span:nth-child(3){top:12px}
  .cc-header-proto.is-menu-open .cc-site-header__menu-icon span:nth-child(1){top:6px;transform:rotate(45deg)}
  .cc-header-proto.is-menu-open .cc-site-header__menu-icon span:nth-child(2){opacity:0}
  .cc-header-proto.is-menu-open .cc-site-header__menu-icon span:nth-child(3){top:6px;transform:rotate(-45deg)}

  .cc-mobile-nav{
    display:block;
    position:absolute;
    z-index:40;
    top:84px;
    right:max(3vw,14px);
    left:auto;
    width:min(440px,94vw);
    max-height:min(72vh,620px);
    overflow:auto;
    padding:12px;
    background:
      linear-gradient(180deg,rgba(33,49,60,.99),rgba(18,29,38,.995)),
      var(--cc-mobile-panel);
    border:1px solid rgba(191,216,230,.18);
    border-top-color:rgba(85,200,239,.35);
    border-radius:0 0 14px 14px;
    box-shadow:0 28px 55px rgba(0,8,16,.42),inset 0 1px rgba(255,255,255,.025);
    clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .18s ease,transform .22s cubic-bezier(.2,.7,.25,1),visibility 0s linear .22s;
  }
  .cc-header-proto.is-menu-open .cc-mobile-nav{
    opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
    transition-delay:0s;
  }
  .cc-mobile-nav::before{
    content:"";position:absolute;left:14px;right:14px;top:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(85,200,239,.52),transparent);
  }
  /* [IC] the real drawer holds the nav plus the request button; the frozen
     "Site navigation" label is provided by header.php as a decorative node. */
  .cc-mobile-nav__label{
    display:block;
    padding:8px 10px 10px;
    font:800 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
    letter-spacing:.16em;text-transform:uppercase;color:#97dff3;
  }
  .cc-mobile-nav .cc-site-header__navigation{display:block;height:auto;justify-content:flex-start;min-width:0}
  .cc-mobile-nav .cc-site-header__menu{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:5px}
  .cc-mobile-nav .cc-site-header__menu > li{display:block;position:relative}
  .cc-mobile-nav .cc-site-header__menu > li > a{
    min-height:48px;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:10px 12px;
    color:#eef7fb;text-decoration:none;
    border:1px solid rgba(188,211,224,.08);
    background:rgba(9,27,41,.38);
    border-radius:7px;
    font-size:13px;font-weight:680;
    position:relative;
  }
  .cc-mobile-nav .cc-site-header__menu > li > a::after{content:"";width:5px;height:5px;border-radius:50%;background:#31526a;border:1px solid rgba(133,190,216,.32);position:static;transform:none;opacity:1;box-shadow:none;margin:0}
  .cc-mobile-nav .cc-site-header__menu > li > a::before{display:none}
  .cc-mobile-nav .cc-site-header__menu > li > a:hover,
  .cc-mobile-nav .cc-site-header__menu > li > a:focus-visible{background:rgba(18,52,72,.58);border-color:rgba(85,200,239,.22)}
  .cc-mobile-nav .cc-site-header__menu > li.current-menu-item > a,
  .cc-mobile-nav .cc-site-header__menu > li.current_page_item > a,
  .cc-mobile-nav .cc-site-header__menu > li.current-menu-ancestor > a{background:linear-gradient(90deg,rgba(26,69,94,.72),rgba(12,36,53,.5));border-color:rgba(85,200,239,.23)}
  .cc-mobile-nav .cc-site-header__menu > li.current-menu-item > a::after,
  .cc-mobile-nav .cc-site-header__menu > li.current_page_item > a::after,
  .cc-mobile-nav .cc-site-header__menu > li.current-menu-ancestor > a::after{background:#8cecff;border-color:#bff7ff;box-shadow:0 0 9px rgba(85,200,239,.55)}
  /* the drawer's own action button stays available and full width */
  .cc-mobile-nav .cc-site-header__action{display:block;margin-top:10px}
  .cc-mobile-nav .cc-site-header__request-button{width:100%;justify-content:center;min-height:48px}

  /* [IC] The base theme paints its own open-state toggle (blue/purple) and
     animates the middle bar to a sliver, which read as a blue arrow instead of
     the frozen close glyph. These raise specificity to restore the chassis
     control and a proper X. */
  .cc-header-proto .cc-site-header__menu-toggle.cc-menu-toggle{
    background:linear-gradient(180deg,rgba(11,36,54,.58),rgba(6,25,39,.72));
    border:1px solid rgba(189,225,242,.22);
    box-shadow:inset 0 1px rgba(255,255,255,.04),0 8px 22px rgba(0,9,18,.16);
  }
  .cc-header-proto.is-menu-open .cc-site-header__menu-toggle.cc-menu-toggle{
    background:linear-gradient(180deg,rgba(14,45,66,.74),rgba(8,30,46,.86));
    border-color:rgba(85,200,239,.35);
  }
  .cc-header-proto.is-menu-open .cc-site-header__menu-icon span:nth-child(1){
    top:6px!important;transform:rotate(45deg)!important;opacity:1!important;
  }
  .cc-header-proto.is-menu-open .cc-site-header__menu-icon span:nth-child(2){
    opacity:0!important;transform:scaleX(0)!important;
  }
  .cc-header-proto.is-menu-open .cc-site-header__menu-icon span:nth-child(3){
    top:6px!important;transform:rotate(-45deg)!important;opacity:1!important;
  }

  /* [IC] The live menu emits a <button class="cc-submenu-toggle"> as a sibling
     of the link inside each parent <li>. Left as a block it dropped onto its
     own row and broke the drawer rhythm. The row becomes link + control, with
     the sub-menu spanning underneath. */
  .cc-mobile-nav .cc-site-header__menu > li{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    column-gap:6px;
  }
  .cc-mobile-nav .cc-site-header__menu > li > .sub-menu{grid-column:1 / -1;margin:4px 0 0}
  .cc-mobile-nav .cc-site-header__menu > li > .cc-submenu-toggle{
    width:46px;height:46px;min-width:44px;min-height:44px;
    display:grid;place-items:center;
    border:1px solid rgba(188,211,224,.08);
    background:rgba(9,27,41,.38);
    border-radius:7px;
    color:#cfe6f2;
    padding:0;
  }
  .cc-mobile-nav .cc-site-header__menu > li > .cc-submenu-toggle:hover,
  .cc-mobile-nav .cc-site-header__menu > li > .cc-submenu-toggle:focus-visible{
    background:rgba(18,52,72,.58);border-color:rgba(85,200,239,.22);
  }

  /* keep only mechanically meaningful chassis contacts at tablet scale */
  .cc-edge-interface__group.g2 span:nth-child(even),
  .cc-edge-interface__group.g3 span:nth-child(even){display:none}
}

@media (max-width:620px){
  .cc-header-proto{height:92px;min-height:92px}
  .cc-header__inner{height:74px;width:92vw}
  .cc-header__inner::before{display:none}
  .cc-brand .cc-site-header__logo,
  .cc-brand .cc-site-header__fallback-mark{width:42px;height:42px;flex-basis:42px}
  .cc-brand__name{font-size:15px}
  .cc-brand__sub{font-size:7.4px;max-width:210px;overflow:hidden;text-overflow:ellipsis}
  .cc-menu-toggle{width:46px;height:46px}
  .cc-mobile-nav{top:74px;right:4vw;width:92vw;max-height:76vh}
  .cc-mobile-nav .cc-site-header__menu{grid-template-columns:1fr}
  .cc-mobile-nav .cc-site-header__menu > li > a{min-height:46px}
  .cc-head-traces{opacity:.28}
  .cc-head-traces svg{transform:scaleX(1.12);transform-origin:center}

  .cc-edge-interface__group.g2,
  .cc-edge-interface__drop.d2{display:none!important}
  .cc-edge-interface__group.g3{left:calc(50% - 14px)!important}
  .cc-edge-interface__drop.d3{left:50%!important}
  .cc-edge-interface__group.g1{left:calc(7% - 10px)!important}
  .cc-edge-interface__drop.d1{left:7%!important}
  .cc-edge-interface__group.g4{right:calc(7% - 10px)!important;left:auto!important}
  .cc-edge-interface__drop.d4{left:93%!important;right:auto!important}
  .cc-edge-interface__rail{opacity:.46}
}

@media (max-width:430px){
  .cc-brand__sub{display:none}
}

@media (hover:none),(pointer:coarse){
  .cc-nav .cc-site-header__menu > li > a:hover::before,
  .cc-nav .cc-site-header__menu > li > a:hover::after{opacity:0;transform:scaleX(0)}
}
@media (prefers-contrast:more){
  .cc-header-proto{border-color:rgba(215,239,250,.5)}
  .cc-mobile-nav{border-color:rgba(224,240,249,.48)}
  .cc-brand__sub{color:#e3edf2}
}
@media (forced-colors:active){
  .cc-head-traces,.cc-edge-interface{display:none!important}
  .cc-header-proto,.cc-mobile-nav{background:Canvas!important;color:CanvasText!important;border:1px solid CanvasText!important;clip-path:none!important}
  .cc-nav .cc-site-header__menu > li > a,.cc-mobile-nav a{color:LinkText!important}
  .cc-menu-toggle{background:ButtonFace!important;color:ButtonText!important;border:1px solid ButtonText!important}
}
@media (prefers-reduced-motion:reduce){
  .cc-menu-toggle .cc-site-header__menu-icon span,.cc-mobile-nav{transition:none!important}
}

/* =========================================================================
   FROZEN CHASSIS INTEGRATION — physical motherboard handoff
   =========================================================================
   Carried over from cc-chassis-FINAL.css Pass 3 + Pass 4 verbatim in geometry.
   Design coordinates: outer A 8.8%, inner B 39.5%, inner C 71.8%, outer D 95%.
   Outer A/D continue into the content-safe side gutters; inner B/C terminate
   on short local elbows so they never draw a line through hero copy.

   [IC] The prototype hosts these stages inside dedicated stacking sections.
   On the live site the top stage is emitted by header.php immediately after
   the header and anchored to <body>, and the bottom stage is emitted by
   footer.php inside the footer. Nothing is added to any page body.
   ========================================================================= */

.cc-board-handoff{
  position:absolute;
  left:0;right:0;
  height:128px;
  z-index:1;
  pointer-events:none;
  isolation:isolate;
  overflow:hidden;
  background:transparent;         /* [IC] must not repaint the motherboard */
}
.cc-board-handoff::before{
  content:"";
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(760px 260px at 50% 0%,rgba(24,75,111,.12),transparent 68%),
    linear-gradient(180deg,rgba(10,28,47,.22),rgba(7,21,36,.04) 42%,rgba(7,21,36,.12));
}
.cc-board-handoff__rails{position:absolute;inset:0;z-index:2;pointer-events:none}
.cc-board-handoff__rail{
  position:absolute;top:-44px;bottom:-44px;width:1px;
  background:linear-gradient(180deg,
    rgba(85,200,239,.48),
    rgba(85,200,239,.19) 13%,
    rgba(91,166,210,.105) 45%,
    rgba(85,200,239,.13) 82%,
    rgba(85,200,239,.42));
  box-shadow:0 0 12px rgba(85,200,239,.045);
}
.cc-board-handoff__rail::before,
.cc-board-handoff__rail::after{
  content:"";position:absolute;left:-4px;width:9px;height:9px;border-radius:50%;
  background:#0a263b;border:1px solid rgba(85,200,239,.55);
  box-shadow:0 0 10px rgba(85,200,239,.08);
}
.cc-board-handoff__rail::before{top:72px}
.cc-board-handoff__rail::after{bottom:72px}
.cc-board-handoff__rail.r1{left:var(--cc-rail-a)}
.cc-board-handoff__rail.r2{left:var(--cc-rail-b)}
.cc-board-handoff__rail.r3{left:var(--cc-rail-c)}
.cc-board-handoff__rail.r4{left:var(--cc-rail-d)}

.cc-board-handoff__branch{position:absolute;height:1px;background:linear-gradient(90deg,rgba(85,200,239,.28),rgba(85,200,239,.07));z-index:2;pointer-events:none}
.cc-board-handoff__branch::after{content:"";position:absolute;right:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:#09243a;border:1px solid rgba(85,200,239,.42)}
.cc-board-handoff__branch.b1{left:var(--cc-rail-a);top:21%;width:13%}
.cc-board-handoff__branch.b2{left:var(--cc-rail-b);top:48%;width:10%}
.cc-board-handoff__branch.b3{right:calc(100% - var(--cc-rail-c));top:32%;width:15%;transform:scaleX(-1);transform-origin:right}
.cc-board-handoff__branch.b4{right:calc(100% - var(--cc-rail-d));top:67%;width:11%;transform:scaleX(-1);transform-origin:right}

/* mechanical collar instead of a hard colour seam */
.cc-handoff-collar{
  position:absolute;left:0;right:0;height:72px;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,16,27,.72),rgba(5,20,34,.28) 38%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0 28%,rgba(0,0,0,.82) 55%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0 28%,rgba(0,0,0,.82) 55%,transparent 100%);
}
.cc-handoff-collar--top{top:0}
.cc-handoff-collar--bottom{bottom:0;transform:rotate(180deg)}
.cc-handoff-collar i{position:absolute;top:0;width:28px;height:15px;border:1px solid rgba(124,204,235,.16);border-top:0;background:rgba(24,72,101,.2);clip-path:polygon(0 0,100% 0,86% 100%,14% 100%)}
.cc-handoff-collar i:nth-child(1){left:calc(var(--cc-rail-a) - 14px)}
.cc-handoff-collar i:nth-child(2){left:calc(var(--cc-rail-b) - 14px)}
.cc-handoff-collar i:nth-child(3){left:calc(var(--cc-rail-c) - 14px)}
.cc-handoff-collar i:nth-child(4){left:calc(var(--cc-rail-d) - 14px)}

/* only the OUTER reference rails span the board; inner banks hand off locally */
.cc-board-handoff__rail.r2,
.cc-board-handoff__rail.r3{
  bottom:auto;
  height:82px;
  background:linear-gradient(180deg,rgba(85,200,239,.4),rgba(85,200,239,.15) 58%,transparent);
}
.cc-board-handoff--bottom .cc-board-handoff__rail.r2,
.cc-board-handoff--bottom .cc-board-handoff__rail.r3{
  top:auto;bottom:-44px;height:86px;
  background:linear-gradient(0deg,rgba(85,200,239,.4),rgba(85,200,239,.15) 58%,transparent);
}
.cc-board-handoff__rail.r2::after,
.cc-board-handoff__rail.r3::after{display:none}
.cc-board-handoff--top .cc-board-handoff__rail.r2::before,
.cc-board-handoff--top .cc-board-handoff__rail.r3::before{top:58px}
.cc-board-handoff--bottom .cc-board-handoff__rail.r2::before,
.cc-board-handoff--bottom .cc-board-handoff__rail.r3::before{top:auto;bottom:58px}
.cc-board-handoff--top .cc-board-handoff__rail.r2::after,
.cc-board-handoff--top .cc-board-handoff__rail.r3::after,
.cc-board-handoff--bottom .cc-board-handoff__rail.r2::after,
.cc-board-handoff--bottom .cc-board-handoff__rail.r3::after{
  display:block;width:54px;height:1px;border:0;border-radius:0;
  background:linear-gradient(90deg,rgba(85,200,239,.24),transparent);box-shadow:none;
}
.cc-board-handoff--top .cc-board-handoff__rail.r2::after{left:0;top:75px}
.cc-board-handoff--top .cc-board-handoff__rail.r3::after{left:-54px;top:75px;transform:scaleX(-1)}
.cc-board-handoff--bottom .cc-board-handoff__rail.r2::after{left:0;bottom:75px;top:auto}
.cc-board-handoff--bottom .cc-board-handoff__rail.r3::after{left:-54px;bottom:75px;top:auto;transform:scaleX(-1)}

/* placement on the live document */
.cc-board-handoff--top{top:126px}                 /* directly under the chassis */
.cc-board-handoff--bottom{top:-128px;height:128px}/* rises out of the footer    */
.admin-bar .cc-board-handoff--top{top:calc(126px + 32px)}

/* event-driven motion only; there is no ambient loop anywhere in this system */
.cc-handoff-packet{
  --packet-x:var(--cc-rail-b);
  position:absolute;z-index:12;left:var(--packet-x);width:5px;height:32px;margin-left:-2px;
  opacity:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(85,200,239,.18) 38%,rgba(191,244,255,.9) 78%,#fff 100%);
  filter:drop-shadow(0 0 5px rgba(85,200,239,.48));
}
.cc-handoff-packet::after{content:"";position:absolute;left:0;bottom:-2px;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 5px #fff,0 0 12px rgba(85,200,239,.85)}
.cc-handoff-packet--top{top:-16px}
.cc-handoff-packet--bottom{top:-42px}
.cc-handoff-packet.is-firing{animation:ccHandoffDown 760ms cubic-bezier(.2,.68,.2,1) both}
.cc-handoff-packet--bottom.is-firing{animation-duration:980ms}
@keyframes ccHandoffDown{
  0%{opacity:0;transform:translateY(0) scaleY(.72)}
  10%{opacity:.96}
  74%{opacity:.9}
  100%{opacity:0;transform:translateY(118px) scaleY(1)}
}

@media (max-width:1100px){
  .cc-board-handoff--top{top:104px}
  .admin-bar .cc-board-handoff--top{top:calc(104px + 32px)}
}
@media (max-width:782px){
  .admin-bar .cc-board-handoff--top{top:calc(104px + 46px)}
}
@media (max-width:760px){
  :root{--cc-rail-a:7%;--cc-rail-c:50%;--cc-rail-d:93%}
  .cc-board-handoff{overflow:clip}
  .cc-board-handoff__rail.r2,
  .cc-board-handoff__branch.b2{display:none!important}
  .cc-board-handoff__rail.r3{left:50%!important}
  .cc-board-handoff__rail.r1{left:7%!important}
  .cc-board-handoff__rail.r4{left:93%!important}
  .cc-board-handoff__branch.b1{left:7%!important;width:16%}
  .cc-board-handoff__branch.b3{right:50%!important;width:12%}
  .cc-board-handoff__branch.b4{right:7%!important;width:14%}
  .cc-handoff-collar i:nth-child(2){display:none}
  .cc-handoff-collar i:nth-child(1){left:calc(7% - 14px)}
  .cc-handoff-collar i:nth-child(3){left:calc(50% - 14px)}
  .cc-handoff-collar i:nth-child(4){left:calc(93% - 14px)}
}
@media (max-width:620px){
  .cc-board-handoff--top{top:92px}
  .admin-bar .cc-board-handoff--top{top:calc(92px + 46px)}
}
@media (forced-colors:active){
  .cc-board-handoff__rails,.cc-handoff-collar,.cc-handoff-packet,.cc-board-handoff__branch{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  .cc-handoff-packet{display:none!important}
}

/* [IC] brand copy bridges — the live theme names these spans differently,
   so the frozen brand typography is bound to the real elements. */
.cc-brand .cc-site-header__site-name{font-weight:820;font-size:18px;line-height:1.05;letter-spacing:-.025em;color:var(--cc-head-text);white-space:nowrap;display:block}
.cc-brand .cc-site-header__site-description{margin-top:5px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:9px;font-weight:700;letter-spacing:.115em;color:#c0d8e5;text-transform:uppercase;white-space:nowrap;display:block}
.cc-brand .cc-site-header__brand-copy{min-width:0}
@media (max-width:1100px){
  .cc-brand .cc-site-header__site-name{font-size:16px}
  .cc-brand .cc-site-header__site-description{display:block;font-size:8px;letter-spacing:.095em;margin-top:4px}
}
@media (max-width:620px){
  .cc-brand .cc-site-header__site-name{font-size:15px}
  .cc-brand .cc-site-header__site-description{font-size:7.4px;max-width:210px;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:430px){
  .cc-brand .cc-site-header__site-description{display:none}
}

/* =========================================================================
   INTEGRATION FIX — desktop dropdowns
   =========================================================================
   The live theme carries two dropdown parents: a standard "Service Areas"
   menu and a three-column "Services" mega-menu. The mega-menu is laid out
   with `position:static` on its <li> so that it resolves against the nav
   rail and spans it via left/right offsets.

   The chassis layer had set `position:relative` on every top-level <li>,
   which stole that containing block: the mega-menu then resolved against an
   89px item and its 245px/190px offsets collapsed it to a 37px sliver.
   Dropdowns also opened inside the 126px chassis, because they hang off a
   64px nav rail, and the edge connector (z-index 5) painted over them.

   Fixed at the cause: the rail spans the full chassis height so `top:100%`
   is the chassis edge, the mega-menu gets its static containing block back,
   and the nav rail is lifted above the connector.
   ========================================================================= */

@media (min-width:1101px){
  /* the inner rail now fills the chassis, so a dropped panel starts exactly
     at the chassis edge instead of floating inside it */
  .cc-header__inner{height:100%;z-index:6}
  /* keep the recessed nav channel visually identical to the frozen design */
  .cc-header__inner::before{top:21px;bottom:40px}

  .cc-nav{height:100%}
  .cc-nav .cc-site-header__menu{height:100%;align-items:stretch}
  .cc-nav .cc-site-header__menu > li{height:100%;align-items:center}
  /* the link keeps the frozen 64px pill, so hover/current indicators,
     which are positioned from the link's bottom, do not move */
  .cc-nav .cc-site-header__menu > li > a{height:64px}

  /* standard dropdown clears the chassis */
  .cc-nav .cc-site-header__menu .sub-menu{top:calc(100% + 12px)}

  /* mega-menu: give back the static containing block and span the nav rail */
  .cc-nav .cc-site-header__menu > .cc-menu-item--services{position:static}
  .cc-nav .cc-site-header__menu > .cc-menu-item--services > .sub-menu{
    top:calc(100% + 12px);
    left:auto;
    right:0;
    width:min(920px,calc(100vw - 80px));
    min-width:0;
    max-width:none;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* =========================================================================
   INTEGRATION — middle handoff stage (bundle Pass 3)
   =========================================================================
   The bundle's prototype carries three handoff stages: top, middle and
   bottom. Only the top and bottom were integrated in the first pass, which
   left the rails looking as though they dropped out of the chassis and
   stopped. The middle stage is what carries the OUTER reference rails
   through the body so the board reads as one continuous circuit.

   Per the frozen rule, only the outer rails (A 8.8% / D 95%) continue: they
   sit in the content-safe side gutters. The inner banks (B/C) stay hidden in
   this stage so nothing is drawn through copy or panels.
   ========================================================================= */

.cc-board-handoff--middle{
  position:absolute;
  left:0;right:0;
  top:126px;
  height:16000px;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  background:transparent;
  isolation:auto;
}
.cc-board-handoff--middle::before{display:none}
.cc-board-handoff--middle .cc-board-handoff__rail.r2,
.cc-board-handoff--middle .cc-board-handoff__rail.r3{display:none!important}
.cc-board-handoff--middle .cc-board-handoff__rail{
  top:0;bottom:0;height:auto;
  background:linear-gradient(180deg,
    rgba(85,200,239,.30),
    rgba(85,200,239,.10) 4%,
    rgba(91,166,210,.07) 50%,
    rgba(85,200,239,.10) 96%,
    rgba(85,200,239,.26));
  box-shadow:none;
}
.cc-board-handoff--middle .cc-board-handoff__rail::before{top:220px}
.cc-board-handoff--middle .cc-board-handoff__rail::after{bottom:220px}
.admin-bar .cc-board-handoff--middle{top:calc(126px + 32px)}

/* the lower chassis must cover the rails where the board terminates */
.cc-footer-proto{z-index:2}

@media (max-width:1100px){
  .cc-board-handoff--middle{top:104px}
  .admin-bar .cc-board-handoff--middle{top:calc(104px + 32px)}
}
@media (max-width:782px){
  .admin-bar .cc-board-handoff--middle{top:calc(104px + 46px)}
}
@media (max-width:620px){
  .cc-board-handoff--middle{top:92px}
  .admin-bar .cc-board-handoff--middle{top:calc(92px + 46px)}
}
/* phone: the frozen system prunes decorative density; the through-board
   rails come out entirely so nothing runs beside narrow copy */
@media (max-width:760px){
  .cc-board-handoff--middle{display:none}
}
@media (forced-colors:active){
  .cc-board-handoff--middle{display:none!important}
}

/* =========================================================================
   INTEGRATION — dropdown panels in the chassis language
   =========================================================================
   The live dropdowns were still painted in the pre-chassis palette: a bright
   blue/violet gradient with a 20px radius. Hanging off a steel-blue chassis
   that reads as a different product. They are restyled here as graphite
   equipment mounted on the chassis, using the same material as the footer's
   service terminal: gunmetal body, bevelled corner, cyan edge bar, mono
   section rules. No new art direction - the frozen system's own materials.
   ========================================================================= */

@media (min-width:1101px){
  .cc-nav .cc-site-header__menu .sub-menu{
    background:linear-gradient(155deg,#242b34 0%,#1a2027 55%,#141a20 100%);
    border:1px solid rgba(190,211,224,.2);
    border-top-color:rgba(216,232,240,.28);
    border-radius:0;
    clip-path:polygon(0 14px,14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
    box-shadow:0 24px 58px rgba(0,10,18,.42),inset 0 1px 0 rgba(255,255,255,.035);
    padding:16px;
    gap:4px;
  }
  /* cyan edge bar, the same signature the footer terminal carries */
  .cc-nav .cc-site-header__menu .sub-menu::after{
    content:"";position:absolute;left:0;top:14px;width:3px;height:56px;
    background:linear-gradient(180deg,var(--cc-head-cyan),rgba(85,200,239,.08));
    box-shadow:0 0 14px rgba(85,200,239,.14);
    pointer-events:none;
  }
  /* the decorative grid inside the panel is dropped: graphite is a solid
     material, and the chassis already carries the board texture */
  .cc-nav .cc-site-header__menu .sub-menu::before{display:none}

  .cc-nav .cc-site-header__menu .sub-menu a{
    min-height:44px;
    border-radius:6px;
    border:1px solid transparent;
    color:#d7e3ea;
    transition:background .18s ease,border-color .18s ease,color .18s ease;
  }
  .cc-nav .cc-site-header__menu .sub-menu a:hover,
  .cc-nav .cc-site-header__menu .sub-menu a:focus-visible,
  .cc-nav .cc-site-header__menu .sub-menu .current-menu-item > a{
    background:rgba(18,52,72,.55);
    border-color:rgba(85,200,239,.22);
    color:#fff;
  }

  /* mega-menu: anchored to the nav rail and never wider than the rail, so it
     cannot run off the right edge at any viewport */
  .cc-nav .cc-site-header__menu > .cc-menu-item--services > .sub-menu{
    left:auto;
    right:0;
    width:min(920px,100%);
    max-width:100%;
    padding:18px;
  }
}

/* -------------------------------------------------------------------------
   Middle handoff stage — withdrawn after measurement.

   The frozen spec PERMITS the outer rails to continue ("Outer A/D may
   visually continue into content-safe side gutters") but FORBIDS any rail
   drawing through copy ("must NOT produce vertical lines through hero copy
   or content panels"). Measured on the live site, the body copy occupies
   4.43%-94.83% of the viewport on page 24 and 6.47%-93.79% on the homepage,
   so the 8.8%/95% rails land INSIDE the text column: 46 text elements were
   crossed at 1440px, including the H1.

   There is no content-safe gutter on this site, so the permissive rule
   cannot be satisfied without breaking the mandatory one. The stage is kept
   in the DOM but not drawn, so it can be re-enabled if the content column is
   ever narrowed. Page 24 already carries its own continuous backplane, which
   is what provides through-body continuity there.
   ------------------------------------------------------------------------- */
.cc-board-handoff--middle{display:none!important}


/* =========================================================
   CIRCUIT CRAFTWORKS HEADER V2 — I/O COMMAND HEADER
   ========================================================= */
.cc-header-v2{
  --h2-steel:#173f5f;
  --h2-steel-2:#123650;
  --h2-deep:#0b283c;
  --h2-line:rgba(183,226,246,.19);
  --h2-line-strong:rgba(125,210,245,.42);
  --h2-cyan:#55c8ef;
  --h2-blue:#087ab8;
  --h2-blue-strong:#0574b8;
  --h2-ice:#f7fbfd;
  --h2-ice-2:#edf7fb;
  --h2-ink:#15384f;
  --h2-muted:#aecaDA;
  --h2-shell:min(calc(100vw - 26px),1425px);
  position:sticky!important;
  top:0;
  z-index:5000;
  width:100%;
  min-height:98px!important;
  overflow:visible!important;
  color:#fff;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 24%),
    radial-gradient(680px 120px at 11% -15%,rgba(85,200,239,.13),transparent 70%),
    radial-gradient(620px 130px at 84% -25%,rgba(130,190,225,.10),transparent 72%),
    linear-gradient(180deg,#1b4a6b 0%,var(--h2-steel) 48%,var(--h2-deep) 100%)!important;
  border:0!important;
  box-shadow:0 10px 30px rgba(19,55,77,.17)!important;
}
body.admin-bar .cc-header-v2{top:32px}
.cc-header-v2::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;
  background-image:
    linear-gradient(rgba(190,228,246,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(190,228,246,.06) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(90deg,transparent,black 14%,black 86%,transparent);
}
.cc-header-v2__fabric{position:absolute;inset:0;pointer-events:none;opacity:.42;overflow:hidden}
.cc-header-v2__fabric svg{width:100%;height:100%;display:block}
.cc-header-v2__fabric path{fill:none;stroke:rgba(158,218,244,.20);stroke-width:1}
.cc-header-v2__fabric circle{fill:#163f5f;stroke:rgba(121,216,250,.58);stroke-width:1.1}

.cc-header-v2__shell{
  position:relative;z-index:4;
  width:var(--h2-shell);height:98px;margin:0 auto;
  display:grid;grid-template-columns:minmax(270px,.72fr) minmax(0,1.78fr);
  align-items:center;gap:32px;
}
.cc-header-v2__brand{
  display:flex!important;align-items:center;gap:13px;min-width:0!important;
  color:#fff!important;border-radius:10px;outline:none;
  transition:transform .18s ease,filter .18s ease;
}
.cc-header-v2__brand:hover{transform:translateY(-1px);filter:brightness(1.04)}
.cc-header-v2__brand:focus-visible{outline:2px solid #a9e7ff;outline-offset:5px}
.cc-header-v2__mark{
  position:relative;display:grid;place-items:center;width:50px;height:50px;flex:0 0 50px;
  border:1px solid rgba(197,235,251,.32);border-radius:12px;
  background:
    radial-gradient(circle at 50% 50%,rgba(85,200,239,.16) 0 28%,transparent 29%),
    linear-gradient(150deg,#28658c,#123650);
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 10px 24px rgba(3,23,36,.20);
}
.cc-header-v2__chip{
  width:22px;height:22px;border:1px solid rgba(225,247,255,.76);border-radius:5px;
  box-shadow:0 0 0 4px rgba(85,200,239,.06),inset 0 0 12px rgba(85,200,239,.10);
}
.cc-header-v2__chip::after{
  content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;
  background:#e5faff;box-shadow:0 0 11px rgba(85,200,239,.75);
}
.cc-header-v2__mark i{position:absolute;background:rgba(150,222,250,.5)}
.cc-header-v2__mark .p1{width:8px;height:1px;left:5px;top:17px}
.cc-header-v2__mark .p2{width:1px;height:8px;left:17px;top:5px}
.cc-header-v2__mark .p3{width:8px;height:1px;right:5px;bottom:17px}
.cc-header-v2__mark .p4{width:1px;height:8px;right:17px;bottom:5px}
.cc-header-v2__brand-copy{display:grid;gap:4px;min-width:0}
.cc-header-v2__brand-copy strong{
  color:#fff;font-size:19px;font-weight:900;line-height:1;letter-spacing:-.035em;white-space:nowrap
}
.cc-header-v2__brand-copy small{
  color:#bdd5e2;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:8.5px;font-weight:800;letter-spacing:.115em;line-height:1.2;white-space:nowrap
}

.cc-header-v2__nav-panel{
  display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:20px!important;min-width:0
}
.cc-header-v2__nav{min-width:0}
.cc-header-v2__menu{
  display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:1px!important;
  margin:0!important;padding:0!important;list-style:none!important
}
.cc-header-v2__menu>.menu-item{position:relative;display:flex;align-items:center}
.cc-header-v2__menu>.menu-item>a{
  position:relative;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-height:48px!important;padding:0 12px!important;
  border:1px solid transparent!important;border-radius:8px!important;
  color:#d9e8ef!important;background:transparent!important;
  font-size:12px!important;font-weight:800!important;line-height:1!important;letter-spacing:-.01em!important;
  white-space:nowrap!important;text-decoration:none!important;transform:none!important;
  transition:color .18s ease,background .18s ease,border-color .18s ease!important;
}
.cc-header-v2__menu>.menu-item>a::after{
  content:""!important;position:absolute!important;left:12px!important;right:12px!important;bottom:4px!important;
  height:1px!important;background:linear-gradient(90deg,transparent,#8bdefd,transparent)!important;
  box-shadow:none!important;opacity:0!important;transform:scaleX(.3)!important;
  transition:opacity .18s ease,transform .18s ease!important;
}
.cc-header-v2__menu>.menu-item>a:hover,
.cc-header-v2__menu>.menu-item>a:focus-visible{
  color:#fff!important;background:rgba(5,30,46,.22)!important;border-color:rgba(161,219,243,.10)!important;
}
.cc-header-v2__menu>.menu-item>a:focus-visible{outline:2px solid #a9e7ff!important;outline-offset:2px!important}
.cc-header-v2__menu>.menu-item>a:hover::after,
.cc-header-v2__menu>.menu-item>a:focus-visible::after,
.cc-header-v2__menu>.current-menu-item>a::after,
.cc-header-v2__menu>.current-menu-ancestor>a::after{opacity:1!important;transform:scaleX(1)!important}
.cc-header-v2__menu>.current-menu-item>a,
.cc-header-v2__menu>.current-menu-ancestor>a{
  color:#fff!important;background:rgba(6,28,43,.34)!important;border-color:rgba(159,220,245,.12)!important
}
.cc-header-v2__menu>.current-menu-ancestor>a::before{
  content:"";position:absolute;left:50%;bottom:1px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;
  background:#dff8ff;box-shadow:0 0 9px rgba(85,200,239,.9)
}
.cc-header-v2__menu>.menu-item-has-children>a{padding-right:26px!important}
.cc-header-v2__menu>.menu-item-has-children>a::before{
  content:""!important;position:absolute!important;right:11px!important;top:50%!important;width:6px!important;height:6px!important;
  margin-top:-5px!important;border:0!important;border-right:1.5px solid currentColor!important;border-bottom:1.5px solid currentColor!important;
  opacity:.72!important;transform:rotate(45deg)!important;order:0!important
}

/* SERVICES MEGA MENU */
.cc-header-v2__menu>.cc-menu-item--services{position:static!important}
.cc-header-v2__services-menu{
  position:absolute!important;top:84px!important;left:290px!important;right:205px!important;z-index:100!important;
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;
  min-width:0!important;max-width:none!important;padding:54px 14px 14px!important;
  background:#f8fcfe!important;
  border:1px solid rgba(13,107,162,.20)!important;border-radius:14px!important;
  box-shadow:0 25px 65px rgba(7,38,58,.23)!important;
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  transform:translateY(8px)!important;transition:opacity .18s ease,visibility .18s ease,transform .18s ease!important;
  overflow:hidden!important;
}
.cc-header-v2__services-menu::before{
  content:"SERVICE ROUTER · CHOOSE THE CLOSEST STARTING POINT";
  position:absolute;left:16px;right:16px;top:0;height:42px;display:flex;align-items:center;
  color:#557586;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;font-weight:900;letter-spacing:.11em;
  border-bottom:1px solid rgba(12,107,163,.12)
}
.cc-header-v2__services-menu::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.17;
  background-image:linear-gradient(rgba(12,113,170,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(12,113,170,.07) 1px,transparent 1px);
  background-size:34px 34px
}
.cc-header-v2__menu>.cc-menu-item--services:hover>.cc-header-v2__services-menu,
.cc-header-v2__menu>.cc-menu-item--services:focus-within>.cc-header-v2__services-menu,
.cc-header-v2__menu>.cc-menu-item--services.is-submenu-open>.cc-header-v2__services-menu,
.cc-header-v2.is-preview-services-open .cc-header-v2__services-menu{
  opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important
}
.cc-header-v2__services-menu>.menu-item{position:relative!important;z-index:2!important;margin:0!important}
.cc-header-v2__services-menu>.menu-item>a{
  position:relative!important;display:grid!important;align-content:center!important;gap:4px!important;
  min-height:72px!important;padding:12px 13px 12px 48px!important;border:1px solid rgba(12,108,165,.12)!important;
  border-radius:10px!important;background:rgba(255,255,255,.84)!important;color:#173d55!important;
  font-size:12.5px!important;font-weight:900!important;line-height:1.2!important;text-decoration:none!important;
  box-shadow:none!important;transform:none!important;
  transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease!important
}
.cc-header-v2__services-menu>.menu-item>a::before{
  content:"";position:absolute;left:13px;top:50%;width:23px;height:23px;margin-top:-11.5px;border-radius:7px;
  background:#e8f5fb;border:1px solid rgba(8,122,184,.18)
}
.cc-header-v2__services-menu>.menu-item>a::after{
  display:block!important;color:#658091!important;font-size:9.5px!important;font-weight:650!important;line-height:1.25!important
}
.cc-header-v2__services-menu>.menu-item>a:hover,
.cc-header-v2__services-menu>.menu-item>a:focus-visible{
  background:#fff!important;border-color:rgba(8,122,184,.32)!important;transform:translateY(-1px)!important;
  box-shadow:0 8px 20px rgba(25,78,108,.08)!important;color:#0d3853!important
}
.cc-header-v2__services-menu>.menu-item>a:focus-visible{outline:2px solid #087ab8!important;outline-offset:1px!important}
.cc-svc--diag>a::after{content:"Power · crashes · heat · instability"}
.cc-svc--upgrade>a::after{content:"SSD · RAM · cooling · compatible parts"}
.cc-svc--os>a::after{content:"Windows · Linux · dual boot · setup"}
.cc-svc--data>a::after{content:"Migration · cloning · files · backup"}
.cc-svc--build>a::after{content:"Gaming · workstation · custom systems"}
.cc-svc--private>a::after{content:"Photos · files · media · home backups"}
.cc-header-v2__services-menu>.cc-special>a{min-height:52px!important;padding-left:42px!important;background:#edf7fb!important}
.cc-header-v2__services-menu>.cc-special>a::after{display:none!important}
.cc-header-v2__services-menu>.cc-special>a::before{width:16px;height:16px;margin-top:-8px;border-radius:50%;background:#087ab8}
.cc-header-v2__services-menu>.cc-special{margin-top:2px!important}
.cc-header-v2__services-menu>.cc-special--laptop{grid-column:1}
.cc-header-v2__services-menu>.cc-special--gaming{grid-column:2}
.cc-header-v2__services-menu>.cc-special--remote{grid-column:3}

.cc-header-v2__request{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;
  min-height:50px!important;padding:0 17px!important;border:1px solid rgba(208,242,255,.28)!important;border-radius:10px!important;
  color:#fff!important;background:linear-gradient(135deg,#087ab8,#056da8)!important;
  box-shadow:0 10px 24px rgba(2,70,108,.20)!important;
  font-size:11.5px!important;font-weight:900!important;line-height:1!important;white-space:nowrap!important;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease!important
}
.cc-header-v2__request:hover{transform:translateY(-2px)!important;filter:brightness(1.05);box-shadow:0 14px 28px rgba(2,70,108,.27)!important}
.cc-header-v2__request:focus-visible{outline:2px solid #dff8ff!important;outline-offset:3px!important}
.cc-header-v2__request svg{width:16px!important;height:16px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important}

.cc-header-v2__io-seam{
  position:absolute;left:0;right:0;bottom:-1px;height:8px;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,21,33,.36),rgba(3,21,33,.62));
  border-top:1px solid rgba(153,218,244,.11);border-bottom:1px solid rgba(87,194,235,.20)
}
.cc-header-v2__io-seam::before{
  content:"";position:absolute;left:4%;right:4%;top:3px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(121,211,244,.30) 12%,rgba(121,211,244,.48) 50%,rgba(121,211,244,.30) 88%,transparent)
}
.cc-header-v2__io-seam span{position:absolute;top:1px;width:7px;height:7px;border-radius:50%;background:#0e3048;border:1px solid rgba(103,211,247,.62)}
.cc-header-v2__io-seam .n1{left:8%}.cc-header-v2__io-seam .n2{left:31%}.cc-header-v2__io-seam .n3{left:50%}.cc-header-v2__io-seam .n4{left:72%}.cc-header-v2__io-seam .n5{right:7%}

.cc-header-v2__menu-toggle{display:none!important}

/* COMPACT DESKTOP */
@media(max-width:1280px) and (min-width:1101px){
  .cc-header-v2__shell{gap:18px}
  .cc-header-v2__brand-copy strong{font-size:17px}
  .cc-header-v2__brand-copy small{font-size:7.7px}
  .cc-header-v2__menu>.menu-item>a{padding-inline:9px!important;font-size:11px!important}
  .cc-header-v2__menu>.menu-item-has-children>a{padding-right:23px!important}
  .cc-header-v2__request{padding-inline:13px!important;font-size:10.5px!important}
  .cc-header-v2__services-menu{left:255px!important;right:185px!important}
}

/* TABLET / MOBILE */
@media(max-width:1100px){
  .cc-header-v2{min-height:78px!important}
  .cc-header-v2__shell{
    width:calc(100% - 24px);height:78px;grid-template-columns:minmax(0,1fr) auto;gap:14px
  }
  .cc-header-v2__mark{width:44px;height:44px;flex-basis:44px;border-radius:10px}
  .cc-header-v2__chip{width:19px;height:19px}
  .cc-header-v2__brand-copy strong{font-size:17px}
  .cc-header-v2__brand-copy small{font-size:7.4px;letter-spacing:.09em}
  .cc-header-v2__menu-toggle{
    position:relative;z-index:200;display:inline-flex!important;align-items:center;justify-content:center;gap:9px;
    min-width:91px;min-height:46px;padding:0 12px;border:1px solid rgba(172,225,247,.22)!important;border-radius:10px;
    color:#fff;background:rgba(6,32,49,.28);font-size:11px;font-weight:900;cursor:pointer
  }
  .cc-header-v2__hamb{display:grid;gap:3px;width:17px}.cc-header-v2__hamb i{display:block;width:17px;height:1.5px;background:#dff7ff;border-radius:2px}
  .cc-header-v2__nav-panel{
    position:fixed!important;top:88px!important;left:12px!important;right:12px!important;z-index:150!important;
    display:grid!important;grid-template-columns:1fr!important;align-content:start!important;gap:12px!important;
    max-height:calc(100vh - 100px)!important;padding:14px!important;overflow:auto!important;
    background:linear-gradient(180deg,#f8fcfe,#eef7fb)!important;border:1px solid rgba(9,111,169,.22)!important;border-radius:14px!important;
    box-shadow:0 25px 65px rgba(7,38,58,.30)!important;
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(-8px)!important;
    transition:opacity .18s ease,visibility .18s ease,transform .18s ease!important
  }
  .cc-header-v2.is-menu-open .cc-header-v2__nav-panel,
  .cc-header-v2.is-preview-mobile-open .cc-header-v2__nav-panel{
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important
  }
  .cc-header-v2__nav{width:100%}
  .cc-header-v2__menu{display:grid!important;grid-template-columns:1fr!important;gap:6px!important}
  .cc-header-v2__menu>.menu-item{display:grid!important;grid-template-columns:1fr auto!important;align-items:center!important}
  .cc-header-v2__menu>.menu-item>a{
    justify-content:flex-start!important;min-height:48px!important;padding:0 13px!important;border:1px solid rgba(9,111,169,.11)!important;
    border-radius:9px!important;background:#fff!important;color:#214a61!important;font-size:12px!important
  }
  .cc-header-v2__menu>.menu-item>a::after{display:none!important}
  .cc-header-v2__menu>.current-menu-ancestor>a,.cc-header-v2__menu>.current-menu-item>a{background:#eaf6fb!important;color:#0d5f8d!important}
  .cc-header-v2__menu>.menu-item-has-children>a{padding-right:13px!important}
  .cc-header-v2__menu>.menu-item-has-children>a::before{display:none!important}
  .cc-header-v2 .cc-submenu-toggle{
    position:relative!important;display:grid!important;place-items:center!important;width:42px!important;height:42px!important;margin-left:6px!important;
    border:1px solid rgba(9,111,169,.14)!important;border-radius:9px!important;background:#eaf6fb!important;color:#176b98!important
  }
  .cc-header-v2 .cc-submenu-toggle::before{
    content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,-1px)
  }
  .cc-header-v2 .menu-item-has-children.is-submenu-open>.cc-submenu-toggle::before{transform:rotate(225deg) translate(-1px,-1px)}
  .cc-header-v2__services-menu{
    position:static!important;grid-column:1/3!important;display:none!important;grid-template-columns:1fr 1fr!important;gap:6px!important;
    padding:8px!important;margin:6px 0 4px!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;
    transform:none!important;background:#eaf6fb!important;border:1px solid rgba(8,122,184,.12)!important;border-radius:10px!important;box-shadow:none!important
  }
  .cc-header-v2__services-menu::before,.cc-header-v2__services-menu::after{display:none!important}
  .cc-header-v2 .menu-item-has-children.is-submenu-open>.cc-header-v2__services-menu,
  .cc-header-v2.is-preview-mobile-open .cc-menu-item--services>.cc-header-v2__services-menu{display:grid!important}
  .cc-header-v2__services-menu>.menu-item>a{min-height:58px!important;padding:10px!important;background:#fff!important;font-size:11px!important}
  .cc-header-v2__services-menu>.menu-item>a::before{display:none!important}
  .cc-header-v2__services-menu>.menu-item>a::after{font-size:8.7px!important}
  .cc-header-v2__services-menu>.cc-special>a{min-height:44px!important;padding:9px!important}
  .cc-header-v2__services-menu>.cc-special--laptop,.cc-header-v2__services-menu>.cc-special--gaming,.cc-header-v2__services-menu>.cc-special--remote{grid-column:auto}
  .cc-header-v2__action{width:100%}
  .cc-header-v2__request{width:100%!important;min-height:50px!important;font-size:12px!important}
  .cc-header-v2__io-seam{height:6px}
}
@media(max-width:560px){
  .cc-header-v2__brand-copy small{display:none}
  .cc-header-v2__brand-copy strong{font-size:16px}
  .cc-header-v2__mark{width:41px;height:41px;flex-basis:41px}
  .cc-header-v2__menu-toggle{min-width:82px}
  .cc-header-v2__services-menu{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){
  .cc-header-v2 *,.cc-header-v2 *::before,.cc-header-v2 *::after{animation:none!important;transition-duration:.01ms!important}
}

/* =========================================================
   HEADER V3 IMPROVEMENTS
   Appended from the approved prototype block id="cc-header-v3-improvements".
   Nothing above this line was modified or removed in this pass.
   ========================================================= */
/* ==========================================================================
   HEADER V3 — precision backplane + service router
   This block intentionally overrides Header V2 without touching page content.
   ========================================================================== */
.cc-header-v2{
  --h3-blue:#4a86ff;
  --h3-blue-2:#80b0ff;
  --h3-purple:#7b68ee;
  --h3-cyan:#55c8ef;
  --h3-ink:#081523;
  --h3-panel:#111b27;
  --h3-panel-2:#182633;
  --h3-line:rgba(152,197,232,.2);
  --h3-text:#f7fbff;
  --h3-muted:#aebfd0;
  background:
    radial-gradient(780px 170px at 14% -28%,rgba(74,134,255,.28),transparent 64%),
    radial-gradient(720px 180px at 82% -45%,rgba(123,104,238,.18),transparent 68%),
    linear-gradient(180deg,#1d4567 0%,#153956 52%,#0c2941 100%)!important;
  border-bottom:1px solid rgba(128,176,255,.24)!important;
  box-shadow:0 14px 38px rgba(3,12,25,.34)!important;
}
.cc-header-v2::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;
  background-image:
    linear-gradient(rgba(155,209,239,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(155,209,239,.04) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.cc-header-v2__fabric{opacity:.78!important;inset:0!important}
.cc-header-v2__fabric svg{width:100%!important;height:100%!important;display:block;overflow:visible}
.cc-header-v2__fabric .cc-trace{
  fill:none;stroke:rgba(158,218,244,.28);stroke-width:1.15;
  vector-effect:non-scaling-stroke;shape-rendering:geometricPrecision
}
.cc-header-v2__fabric .cc-trace--soft{stroke:rgba(128,176,255,.14);stroke-width:.85}
.cc-header-v2__fabric .cc-trace--live{stroke:rgba(85,200,239,.43);stroke-width:1.35}
.cc-header-v2__fabric .cc-via{
  fill:#133b59;stroke:rgba(166,229,250,.72);stroke-width:1.1;
  vector-effect:non-scaling-stroke
}
.cc-header-v2__fabric .cc-pad{
  fill:rgba(9,35,53,.45);stroke:rgba(122,195,229,.28);stroke-width:1;
  vector-effect:non-scaling-stroke
}
.cc-header-v2__shell{width:min(96vw,1580px)!important;gap:clamp(22px,2.5vw,42px)!important}
.cc-header-v2__mark{
  border-color:rgba(195,235,252,.38)!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(85,200,239,.2) 0 26%,transparent 27%),
    linear-gradient(145deg,#2a6791,#102f48)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 26px rgba(0,12,25,.3),0 0 0 4px rgba(85,200,239,.035)!important
}
.cc-header-v2__brand-copy strong{font-size:20px!important;letter-spacing:-.03em!important}
.cc-header-v2__brand-copy small{color:#c2d8e5!important;letter-spacing:.105em!important}
.cc-header-v2__request{
  background:linear-gradient(135deg,#3f7ce9,#6759d9)!important;
  border-color:rgba(213,228,255,.3)!important;
  box-shadow:0 12px 28px rgba(33,70,166,.28)!important
}

/* Desktop service router: six core cards, then two clearly separated repairs. */
.cc-header-v2__services-menu{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:10px!important;padding:18px!important;
  background:
    radial-gradient(560px 180px at 10% 0%,rgba(74,134,255,.13),transparent 70%),
    linear-gradient(160deg,#1b2936 0%,#111b27 58%,#0d1620 100%)!important;
  border:1px solid rgba(128,176,255,.28)!important;
  border-top-color:rgba(128,213,245,.42)!important;
  border-radius:16px!important;
  box-shadow:0 30px 72px rgba(3,10,21,.48),inset 0 1px rgba(255,255,255,.035)!important;
  overflow:hidden!important
}
.cc-header-v2__services-menu::before{display:none!important}
.cc-header-v2__services-menu::after{
  content:""!important;display:block!important;position:absolute;inset:0;pointer-events:none;opacity:.34!important;
  background-image:
    linear-gradient(rgba(128,176,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(128,176,255,.04) 1px,transparent 1px)!important;
  background-size:28px 28px!important
}
.cc-services-group{
  position:relative!important;z-index:2!important;grid-column:1/-1!important;
  display:flex!important;align-items:center!important;gap:10px!important;
  min-height:24px!important;margin:0!important;padding:0 3px!important;
  color:#9db6c8!important;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;
  font-size:9px!important;font-weight:850!important;letter-spacing:.13em!important;text-transform:uppercase!important
}
.cc-services-group::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,rgba(85,200,239,.3),transparent)}
.cc-services-group--special{margin-top:4px!important;color:#b8c7d5!important}
.cc-header-v2__services-menu>.cc-svc{grid-column:span 2!important}
.cc-header-v2__services-menu>.cc-special{grid-column:span 3!important;margin:0!important}
.cc-header-v2__services-menu>.menu-item>a{
  min-height:76px!important;padding:13px 13px 13px 50px!important;
  background:linear-gradient(155deg,rgba(34,50,65,.96),rgba(22,34,46,.96))!important;
  border:1px solid rgba(154,190,218,.14)!important;border-radius:11px!important;
  color:#f5f9fc!important;box-shadow:inset 0 1px rgba(255,255,255,.025)!important
}
.cc-header-v2__services-menu>.menu-item>a::before{
  display:grid!important;place-items:center!important;left:14px!important;width:25px!important;height:25px!important;
  margin-top:-12.5px!important;border-radius:7px!important;
  color:#a8dfff!important;background:rgba(74,134,255,.11)!important;
  border:1px solid rgba(128,176,255,.26)!important;
  font:850 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace!important
}
.cc-svc--diag>a::before{content:"01"}.cc-svc--upgrade>a::before{content:"02"}
.cc-svc--os>a::before{content:"03"}.cc-svc--data>a::before{content:"04"}
.cc-svc--build>a::before{content:"05"}.cc-svc--private>a::before{content:"06"}
.cc-special--laptop>a::before{content:"L"}.cc-special--gaming>a::before{content:"G"}
.cc-header-v2__services-menu>.menu-item>a::after{color:#9fb2c1!important;font-size:9.5px!important}
.cc-header-v2__services-menu>.menu-item>a:hover,
.cc-header-v2__services-menu>.menu-item>a:focus-visible{
  color:#fff!important;background:linear-gradient(150deg,rgba(41,68,91,.98),rgba(25,46,63,.98))!important;
  border-color:rgba(85,200,239,.38)!important;box-shadow:0 10px 22px rgba(0,8,18,.24),inset 3px 0 #55c8ef!important
}
.cc-header-v2__services-menu>.cc-special>a{
  min-height:58px!important;padding:11px 13px 11px 50px!important;
  background:linear-gradient(155deg,rgba(39,50,65,.96),rgba(25,34,45,.96))!important
}
.cc-header-v2__services-menu>.cc-special>a::after{display:block!important}
.cc-special--laptop>a::after{content:"Screens · batteries · ports · hinges"!important}
.cc-special--gaming>a::after{content:"Crashes · thermals · parts · performance"!important}

@media(max-width:1100px){
  .cc-header-v2__shell{width:calc(100% - 24px)!important}
  .cc-header-v2__fabric{opacity:.52!important}
  .cc-header-v2__nav-panel{
    top:78px!important;left:10px!important;right:10px!important;
    padding:12px!important;gap:10px!important;
    max-height:calc(100dvh - 90px)!important;
    background:
      radial-gradient(420px 140px at 12% 0%,rgba(74,134,255,.14),transparent 70%),
      linear-gradient(165deg,#182633,#101923 66%,#0c141d)!important;
    border:1px solid rgba(128,176,255,.26)!important;
    border-top-color:rgba(85,200,239,.42)!important;border-radius:0 0 14px 14px!important;
    box-shadow:0 28px 65px rgba(1,8,18,.52)!important
  }
  .cc-header-v2__menu{gap:5px!important}
  .cc-header-v2__menu>.menu-item>a{
    justify-content:space-between!important;min-height:50px!important;padding:0 14px!important;
    color:#edf6fb!important;background:rgba(17,31,43,.84)!important;
    border:1px solid rgba(157,193,219,.12)!important;border-radius:9px!important;font-size:13px!important
  }
  .cc-header-v2__menu>.menu-item>a:hover,.cc-header-v2__menu>.menu-item>a:focus-visible{
    background:rgba(30,56,75,.95)!important;border-color:rgba(85,200,239,.3)!important
  }
  .cc-header-v2__menu>.current-menu-ancestor>a,.cc-header-v2__menu>.current-menu-item>a{
    color:#fff!important;background:linear-gradient(90deg,rgba(45,89,121,.94),rgba(28,51,70,.94))!important;
    border-color:rgba(85,200,239,.34)!important
  }
  /* Services itself is the disclosure. The injected side button is removed
     from the visual interaction so users never have to hunt for a tiny arrow. */
  .cc-header-v2__menu>.cc-menu-item--services{grid-template-columns:1fr!important}
  .cc-header-v2__menu>.cc-menu-item--services>.cc-submenu-toggle{display:none!important}
  .cc-header-v2__menu>.cc-menu-item--services>a{cursor:pointer!important}
  .cc-header-v2__menu>.cc-menu-item--services>a::before{
    content:""!important;display:block!important;position:static!important;
    width:8px!important;height:8px!important;margin:-4px 3px 0 12px!important;
    border:0!important;border-right:1.5px solid #bcecff!important;border-bottom:1.5px solid #bcecff!important;
    transform:rotate(45deg)!important;transition:transform .18s ease!important
  }
  .cc-header-v2__menu>.cc-menu-item--services.is-submenu-open>a::before{
    margin-top:4px!important;transform:rotate(225deg)!important
  }
  .cc-header-v2__services-menu{
    grid-column:1!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;padding:10px!important;margin:6px 0 2px!important;
    background:rgba(7,19,29,.76)!important;border:1px solid rgba(128,176,255,.18)!important;
    border-radius:11px!important
  }
  .cc-services-group{grid-column:1/-1!important;min-height:26px!important;padding-inline:2px!important;color:#9fc5db!important}
  .cc-services-group--special{margin-top:4px!important}
  .cc-header-v2__services-menu>.cc-svc,.cc-header-v2__services-menu>.cc-special{grid-column:auto!important}
  .cc-header-v2__services-menu>.menu-item>a,
  .cc-header-v2__services-menu>.cc-special>a{
    min-height:64px!important;padding:10px 10px 10px 44px!important;
    color:#f1f7fb!important;background:linear-gradient(150deg,rgba(31,49,64,.98),rgba(20,33,44,.98))!important;
    border-color:rgba(154,190,218,.14)!important;font-size:11.5px!important
  }
  .cc-header-v2__services-menu>.menu-item>a::before{display:grid!important;left:11px!important;width:24px!important;height:24px!important;margin-top:-12px!important}
  .cc-header-v2__services-menu>.menu-item>a::after{display:block!important;color:#9fb1c0!important;font-size:8.7px!important}
  .cc-header-v2__request{min-height:52px!important;font-size:12px!important}
}
@media(max-width:620px){
  .cc-header-v2__brand-copy strong{font-size:16px!important}
  .cc-header-v2__nav-panel{left:6px!important;right:6px!important;padding:10px!important}
  .cc-header-v2__services-menu{grid-template-columns:1fr!important;padding:8px!important}
  .cc-header-v2__services-menu>.menu-item>a,
  .cc-header-v2__services-menu>.cc-special>a{min-height:62px!important}
}
@media(max-width:390px){
  .cc-header-v2__brand-copy strong{font-size:15px!important}
  .cc-header-v2__menu-toggle{min-width:76px!important;padding-inline:10px!important}
}
@media(forced-colors:active){
  .cc-header-v2__fabric{display:none!important}
  .cc-header-v2__services-menu,.cc-header-v2__nav-panel{background:Canvas!important;border:1px solid CanvasText!important}
}

/* =========================================================
   HEADER V5 — SERVICE MENU THUMBNAILS
   Appended for V5 Phase 1. Every Services entry now carries its
   mapped WordPress image in the card's left media rail, replacing
   the numeric/letter tile the V3 block drew with ::before.

   The rail is absolutely positioned and sized to the slot the V3 tile
   already occupied, so the anchor's approved grid (label beside its
   ::after description) keeps its prototype text metrics and nothing
   overflows the card. No V3 rule above this point is edited, removed,
   or reordered.
   ========================================================= */

/* The image takes over the rail, so retire the numeric/letter tile. */
.cc-header-v2__services-menu > .cc-svc > a::before,
.cc-header-v2__services-menu > .cc-special > a::before {
	content: none !important;
	display: none !important;
}

.cc-svc-thumb {
	position: absolute !important;
	left: 6px !important;
	top: 50% !important;
	width: 38px !important;
	height: 28px !important;
	margin-top: -14px !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	/* Fixed blue/graphite placeholder: the card never reflows or flashes
	   white while a lazy thumbnail is still arriving. */
	background: linear-gradient(150deg, #22384c, #16222e) !important;
	border: 1px solid rgba(128, 176, 255, 0.24) !important;
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.05) !important;
	pointer-events: none !important;
}

.cc-svc-thumb__img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	object-fit: cover !important;
	border-radius: inherit !important;
	opacity: 0.92 !important;
	transition: opacity 0.16s ease, transform 0.16s ease;
}

.cc-header-v2__services-menu > .cc-svc > a,
.cc-header-v2__services-menu > .cc-special > a {
	padding-left: 50px !important;
}

.cc-header-v2__services-menu > .menu-item > a:hover .cc-svc-thumb__img,
.cc-header-v2__services-menu > .menu-item > a:focus-visible .cc-svc-thumb__img {
	opacity: 1 !important;
	transform: scale(1.04) !important;
}

.cc-header-v2__services-menu > .menu-item > a:hover .cc-svc-thumb,
.cc-header-v2__services-menu > .menu-item > a:focus-visible .cc-svc-thumb {
	border-color: rgba(85, 200, 239, 0.42) !important;
}

/* Tablet / mobile console: two service columns. */
@media (max-width: 1100px) {
	.cc-svc-thumb {
		left: 6px !important;
		width: 34px !important;
		height: 26px !important;
		margin-top: -13px !important;
		border-radius: 6px !important;
	}

	.cc-header-v2__services-menu > .cc-svc > a,
	.cc-header-v2__services-menu > .cc-special > a {
		padding-left: 44px !important;
	}
}

/* Phone: one full-width service column, so the rail can breathe again. */
@media (max-width: 620px) {
	.cc-svc-thumb {
		left: 7px !important;
		width: 44px !important;
		height: 34px !important;
		margin-top: -17px !important;
	}

	.cc-header-v2__services-menu > .cc-svc > a,
	.cc-header-v2__services-menu > .cc-special > a {
		padding-left: 56px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-svc-thumb__img {
		transition: none !important;
	}

	.cc-header-v2__services-menu > .menu-item > a:hover .cc-svc-thumb__img,
	.cc-header-v2__services-menu > .menu-item > a:focus-visible .cc-svc-thumb__img {
		transform: none !important;
	}
}

@media print {
	.cc-svc-thumb {
		display: none !important;
	}

	.cc-header-v2__services-menu > .cc-svc > a,
	.cc-header-v2__services-menu > .cc-special > a {
		padding-left: 10px !important;
	}
}

/* =========================================================
   HEADER V6 — SERVICE IMAGE TILES
   The Services mega-menu card becomes an image tile: the
   photograph fills the whole card, and the service name and
   its description sit over a bottom-weighted gradient scrim so
   the picture stays readable as a picture.

   Structure is unchanged. The card is still the single <a>
   WordPress already renders, so every destination, the mobile
   row disclosure, focus handling and lazy loading are untouched.
   Painting order: the image sits at z-index -2 and the scrim at
   -1 inside the card's own stacking context, which lets the
   card's plain text node paint above both without any extra
   markup being layered in.
   ========================================================= */

.cc-header-v2__services-menu > .cc-svc > a,
.cc-header-v2__services-menu > .cc-special > a {
	position: relative !important;
	isolation: isolate;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	align-content: end !important;
	gap: 3px !important;
	overflow: hidden !important;
	padding: 14px 14px 13px !important;
	background: #101a24 !important;
	border: 1px solid rgba(154, 190, 218, 0.16) !important;
	border-radius: 12px !important;
	color: #ffffff !important;
	text-shadow: 0 1px 3px rgba(2, 8, 15, 0.72) !important;
	box-shadow: 0 2px 10px rgba(0, 8, 18, 0.22) !important;
	transition:
		transform 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease !important;
}

/* The photograph, filling the tile. */
.cc-svc-thumb {
	position: absolute !important;
	inset: 0 !important;
	z-index: -2;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: inherit !important;
	overflow: hidden !important;
	/* Fixed blue/graphite placeholder while the tile loads. */
	background: linear-gradient(150deg, #22384c, #16222e) !important;
	box-shadow: none !important;
	pointer-events: none !important;
}

.cc-svc-thumb__img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	object-fit: cover !important;
	border-radius: inherit !important;
	opacity: 1 !important;
	transform: scale(1);
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

/* Readability scrim. Weighted to the bottom so the upper two thirds
   of every photograph stays essentially uncovered. */
.cc-header-v2__services-menu > .cc-svc > a::before,
.cc-header-v2__services-menu > .cc-special > a::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: -1;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: inherit !important;
	background: linear-gradient(
		to top,
		rgba(6, 14, 22, 0.92) 0%,
		rgba(6, 14, 22, 0.78) 22%,
		rgba(6, 14, 22, 0.34) 48%,
		rgba(6, 14, 22, 0.06) 72%,
		rgba(6, 14, 22, 0) 100%
	) !important;
	transition: opacity 0.2s ease !important;
}

/* Service name. */
.cc-header-v2__services-menu > .cc-svc > a,
.cc-header-v2__services-menu > .cc-special > a {
	font-size: 15px !important;
	font-weight: 900 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
}

/* Supporting line, kept from the approved design. */
.cc-header-v2__services-menu > .cc-svc > a::after,
.cc-header-v2__services-menu > .cc-special > a::after {
	display: block !important;
	position: relative !important;
	color: #cfe1ee !important;
	font-size: 10.5px !important;
	font-weight: 650 !important;
	line-height: 1.3 !important;
	letter-spacing: 0.01em !important;
	text-shadow: 0 1px 3px rgba(2, 8, 15, 0.8) !important;
}

/* ---- Desktop: 3 across for the core six, 2 across for specialised ---- */
.cc-header-v2__services-menu > .cc-svc > a {
	min-height: 186px !important;
}

.cc-header-v2__services-menu > .cc-special > a {
	min-height: 150px !important;
}

/* Subject framing per service. The core cards sit near the source ratio so
   cover barely crops there; the wide specialised cards, the tablet layout and
   the phone layout crop hard vertically, which is where these values earn
   their keep. Tuned per photograph so the subject survives the crop. */
.cc-svc--diag .cc-svc-thumb__img {
	/* technician and motherboard sit just below centre */
	object-position: 50% 52% !important;
}

.cc-svc--upgrade .cc-svc-thumb__img {
	/* keep the component boxes and GPU in frame, not the empty pegboard */
	object-position: 50% 58% !important;
}

.cc-svc--os .cc-svc-thumb__img {
	object-position: 50% 34% !important;
}

.cc-svc--data .cc-svc-thumb__img {
	object-position: 50% 52% !important;
}

.cc-svc--build .cc-svc-thumb__img {
	/* square source: favour the radiator, tubing and reservoir over the floor */
	object-position: 50% 45% !important;
}

.cc-svc--private .cc-svc-thumb__img {
	object-position: 50% 50% !important;
}

.cc-special--laptop .cc-svc-thumb__img {
	/* the opened chassis, not the bench above it */
	object-position: 50% 55% !important;
}

.cc-special--gaming .cc-svc-thumb__img {
	object-position: 50% 50% !important;
}

/* ---- Hover / focus: lift the card and ease the photograph in ---- */
.cc-header-v2__services-menu > .cc-svc > a:hover,
.cc-header-v2__services-menu > .cc-svc > a:focus-visible,
.cc-header-v2__services-menu > .cc-special > a:hover,
.cc-header-v2__services-menu > .cc-special > a:focus-visible {
	transform: translateY(-3px) !important;
	border-color: rgba(85, 200, 239, 0.5) !important;
	box-shadow: 0 14px 30px rgba(0, 8, 18, 0.42) !important;
	background: #101a24 !important;
}

.cc-header-v2__services-menu > .menu-item > a:hover .cc-svc-thumb__img,
.cc-header-v2__services-menu > .menu-item > a:focus-visible .cc-svc-thumb__img {
	transform: scale(1.07) !important;
}

.cc-header-v2__services-menu > .cc-svc > a:hover::before,
.cc-header-v2__services-menu > .cc-special > a:hover::before {
	opacity: 0.88 !important;
}

.cc-header-v2__services-menu > .cc-svc > a:focus-visible,
.cc-header-v2__services-menu > .cc-special > a:focus-visible {
	outline: 2px solid #7fd6ff !important;
	outline-offset: 2px !important;
}

/* ---- Tablet / mobile console ---- */
@media (max-width: 1100px) {
	.cc-header-v2__services-menu > .cc-svc > a,
	.cc-header-v2__services-menu > .cc-special > a {
		min-height: 156px !important;
		padding: 12px 12px 11px !important;
		font-size: 14px !important;
	}

	.cc-header-v2__services-menu > .cc-svc > a::after,
	.cc-header-v2__services-menu > .cc-special > a::after {
		font-size: 10px !important;
	}
}

/* ---- Phone: one large, near full-width tile per service ---- */
@media (max-width: 620px) {
	.cc-header-v2__services-menu > .cc-svc > a,
	.cc-header-v2__services-menu > .cc-special > a {
		min-height: 168px !important;
		padding: 13px 13px 12px !important;
		font-size: 15px !important;
	}

	.cc-header-v2__services-menu > .cc-svc > a::after,
	.cc-header-v2__services-menu > .cc-special > a::after {
		font-size: 10.5px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-svc-thumb__img,
	.cc-header-v2__services-menu > .cc-svc > a,
	.cc-header-v2__services-menu > .cc-special > a {
		transition: none !important;
	}

	.cc-header-v2__services-menu > .menu-item > a:hover .cc-svc-thumb__img,
	.cc-header-v2__services-menu > .menu-item > a:focus-visible .cc-svc-thumb__img {
		transform: none !important;
	}

	.cc-header-v2__services-menu > .cc-svc > a:hover,
	.cc-header-v2__services-menu > .cc-special > a:hover {
		transform: none !important;
	}
}

@media print {
	.cc-svc-thumb {
		display: none !important;
	}

	.cc-header-v2__services-menu > .cc-svc > a,
	.cc-header-v2__services-menu > .cc-special > a {
		min-height: 0 !important;
		padding: 10px !important;
		color: #173d55 !important;
		text-shadow: none !important;
	}
}

/* ---- Keep the open mega-menu inside the viewport ----
   The tiles make the panel much taller than the old text list, so short
   desktop screens (1280x720 and similar) get slightly trimmed tiles, and a
   max-height guard makes overflow impossible on any screen we did not test. */
@media (min-width: 1101px) and (max-height: 780px) {
	.cc-header-v2__services-menu > .cc-svc > a {
		min-height: 168px !important;
	}

	.cc-header-v2__services-menu > .cc-special > a {
		min-height: 134px !important;
	}
}

@media (min-width: 1101px) {
	.cc-header-v2__services-menu {
		max-height: calc(100vh - 104px) !important;
		overflow-y: auto !important;
		overscroll-behavior: contain;
	}
}

/* =========================================================
   HEADER V7 — OCCASIONAL ELECTRICAL PULSE (HEADER ONLY)
   A short charge travels the bottom edge of the header toward
   the brand, the logo answers with a brief glow, then everything
   returns to completely static.

   No JavaScript and no library. Two co-prime cycles (14s and 23s)
   are used instead of a timer, so the gap between events keeps
   changing (roughly 8-18s) without ever repeating on a short loop.
   Only transform, opacity and filter animate, so this stays on the
   compositor and off the layout/paint path.

   The footer is deliberately untouched.
   ========================================================= */

/* ---- 1. The charge running along the header's bottom edge ---- */
.cc-header-v2__fabric::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 30%;
	height: 3px;
	opacity: 0;
	pointer-events: none;
	/* Sits inside the circuit fabric, which is drawn at 0.78 opacity, so the
	   core is taken to full white to survive that multiplier and still read
	   as a single quick spark rather than a glowing bar. */
	background: linear-gradient(
		90deg,
		rgba(133, 214, 255, 0) 0%,
		rgba(133, 214, 255, 0.5) 32%,
		#ffffff 50%,
		rgba(133, 214, 255, 0.5) 68%,
		rgba(133, 214, 255, 0) 100%
	);
	filter:
		drop-shadow(0 0 4px rgba(180, 234, 255, 0.95))
		drop-shadow(0 0 13px rgba(85, 200, 239, 0.6));
	animation: ccHdrCharge 14s linear infinite;
}

@keyframes ccHdrCharge {
	0%,
	0.9% {
		opacity: 0;
		transform: translate3d(333%, 0, 0);
	}

	1.8% {
		opacity: 1;
	}

	5.4% {
		opacity: 1;
	}

	6.2% {
		opacity: 0;
		transform: translate3d(-30%, 0, 0);
	}

	100% {
		opacity: 0;
		transform: translate3d(-30%, 0, 0);
	}
}

/* ---- 2. The logo answering as the charge arrives ---- */
.cc-header-v2__mark::after {
	content: "";
	position: absolute;
	inset: -7px;
	border-radius: 15px;
	opacity: 0;
	pointer-events: none;
	background: radial-gradient(
		circle at 50% 50%,
		rgba(140, 222, 255, 0.32) 0%,
		rgba(85, 200, 239, 0.16) 46%,
		rgba(85, 200, 239, 0) 72%
	);
	box-shadow: 0 0 16px rgba(85, 200, 239, 0.5);
	animation: ccHdrLogoGlow 14s linear infinite;
}

@keyframes ccHdrLogoGlow {
	0%,
	5.2% {
		opacity: 0;
	}

	6.1% {
		opacity: 1;
	}

	7.0% {
		opacity: 0.55;
	}

	8.6% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

/* ---- 3. The four logo traces briefly conducting ---- */
.cc-header-v2__mark i {
	animation: ccHdrTrace 14s linear infinite;
}

.cc-header-v2__mark .p2 {
	animation-delay: 0.06s;
}

.cc-header-v2__mark .p3 {
	animation-delay: 0.12s;
}

.cc-header-v2__mark .p4 {
	animation-delay: 0.18s;
}

@keyframes ccHdrTrace {
	0%,
	5.4% {
		background: rgba(150, 222, 250, 0.5);
	}

	6.2% {
		background: rgba(226, 248, 255, 0.98);
	}

	8.4% {
		background: rgba(150, 222, 250, 0.5);
	}

	100% {
		background: rgba(150, 222, 250, 0.5);
	}
}

/* ---- 4. A second, slower arc so the rhythm never feels metronomic ---- */
.cc-header-v2__mark::before {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 14px;
	opacity: 0;
	pointer-events: none;
	border: 1px solid rgba(196, 240, 255, 0.85);
	box-shadow: 0 0 10px rgba(85, 200, 239, 0.55);
	animation: ccHdrArc 23s linear infinite;
}

@keyframes ccHdrArc {
	0%,
	40% {
		opacity: 0;
		clip-path: inset(0 0 92% 0);
	}

	41% {
		opacity: 0.85;
		clip-path: inset(0 0 62% 0);
	}

	42.4% {
		opacity: 0.35;
		clip-path: inset(0 0 30% 0);
	}

	43.6% {
		opacity: 0;
		clip-path: inset(0 0 0 0);
	}

	100% {
		opacity: 0;
		clip-path: inset(0 0 0 0);
	}
}

/* ---- 5. Restrained electrical response on the primary CTA ---- */
.cc-header-v2__request {
	transition:
		transform 0.18s ease,
		filter 0.18s ease,
		box-shadow 0.25s ease,
		border-color 0.25s ease !important;
}

.cc-header-v2__request:hover,
.cc-header-v2__request:focus-visible {
	border-color: rgba(179, 233, 255, 0.62) !important;
	box-shadow:
		0 10px 24px rgba(2, 70, 108, 0.24),
		0 0 0 1px rgba(133, 214, 255, 0.28),
		0 0 18px rgba(85, 200, 239, 0.34) !important;
}

/* ---- Accessibility and non-screen output ---- */
@media (prefers-reduced-motion: reduce) {
	.cc-header-v2__fabric::after,
	.cc-header-v2__mark::after,
	.cc-header-v2__mark::before {
		animation: none !important;
		opacity: 0 !important;
	}

	.cc-header-v2__mark i {
		animation: none !important;
	}

	.cc-header-v2__request {
		transition: none !important;
	}
}

@media print {
	.cc-header-v2__fabric::after,
	.cc-header-v2__mark::after,
	.cc-header-v2__mark::before {
		display: none !important;
	}

	.cc-header-v2__mark i {
		animation: none !important;
	}
}

/* =========================================================
   HEADER V8 — RECONSTRUCTED CIRCUITRY "C" + TRANSPARENT WORDMARK

   The brand is now [ inline-SVG circuitry C ][ transparent wordmark ].
   The C is rebuilt as vector so its individual traces can conduct; the
   wordmark is the supplied artwork, untouched and never redrawn.

   The energising sequence is phased against the SAME 14s cycle the V7
   header charge already runs on, so it reads as one electrical network:

     0.9-6.2%   charge sweeps the header's bottom edge toward the brand (V7)
     5.4-10.2%  charge enters the C and travels its outer ring
     +0.18s     inner ring picks it up
     +0.34s     it branches into the two left traces
     +0.46s     and into the two right traces
     6.0-8.4%   pads light as the current reaches them
     7.4-11%    the wordmark answers with a restrained halo
     then everything returns to completely static.

   Total energetic event ~= 0.7s. A second, lighter halo runs on a 23s
   cycle so the gap between events keeps changing (~8-18s) without a timer.
   ========================================================= */

.cc-header-v2__brand {
	align-items: center !important;
	gap: 12px !important;
}

/* The mark is no longer a drawn chip; strip the old box entirely. */
.cc-header-v2__mark.cc-cmark {
	display: block !important;
	position: relative !important;
	width: 50px !important;
	height: 62px !important;
	flex: 0 0 50px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	overflow: visible !important;
}

.cc-cmark__svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* ---- The mark itself ---- */
.cc-cmark__frame {
	/* One shadow, not a stack: three nested drop-shadows measurably raised
	   paint cost on the header's first render for no visible gain. */
	filter: drop-shadow(0 0 6px rgba(85, 200, 239, 0.5));
}

.cc-cmark__outer {
	stroke: url(#ccMarkEdge);
	stroke-width: 6.4;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.cc-cmark__inner {
	stroke: url(#ccMarkEdge);
	stroke-width: 3.9;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.cc-cmark__trace {
	stroke: #cfe7f7;
	stroke-width: 2.5;
	stroke-linejoin: round;
	stroke-linecap: round;
	opacity: 0.92;
}

.cc-cmark__pad {
	stroke: #e6f5ff;
	stroke-width: 2.2;
	fill: #0d2233;
}

.cc-cmark__tool rect,
.cc-cmark__tool path {
	fill: url(#ccMarkTool);
}

/* ---- Current travelling through the traces ----
   pathLength="100" on every spark path means one set of dash values works
   for routes of completely different real lengths. */
.cc-spark {
	fill: none;
	stroke: #f4fdff;
	stroke-width: 3.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 13 100;
	stroke-dashoffset: 113;
	opacity: 0;
	filter: drop-shadow(0 0 5px rgba(150, 226, 255, 0.9));
	animation: ccCFlow 14s linear infinite;
}

@keyframes ccCFlow {
	0%,
	5.4% {
		stroke-dashoffset: 113;
		opacity: 0;
	}

	5.9% {
		opacity: 1;
	}

	9.4% {
		opacity: 1;
	}

	10.2% {
		stroke-dashoffset: 0;
		opacity: 0;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 0;
	}
}

.cc-spark--inner {
	animation-delay: 0.18s;
	stroke-width: 2.6;
}

.cc-spark--tl {
	animation-delay: 0.34s;
	stroke-width: 2.3;
}

.cc-spark--bl {
	animation-delay: 0.38s;
	stroke-width: 2.3;
}

.cc-spark--br {
	animation-delay: 0.46s;
	stroke-width: 2.3;
}

.cc-spark--tr {
	animation-delay: 0.5s;
	stroke-width: 2.3;
}

/* ---- Pads lighting as the current arrives ---- */
.cc-cmark__pad {
	animation: ccPadLit 14s linear infinite;
}

@keyframes ccPadLit {
	0%,
	6% {
		fill: #0d2233;
		stroke: #e6f5ff;
	}

	6.7% {
		fill: #c8ecff;
		stroke: #ffffff;
	}

	8.5% {
		fill: #0d2233;
		stroke: #e6f5ff;
	}

	100% {
		fill: #0d2233;
		stroke: #e6f5ff;
	}
}

.cc-cmark__pad.p-c { animation-delay: 0.36s; }
.cc-cmark__pad.p-d { animation-delay: 0.42s; }
.cc-cmark__pad.p-e { animation-delay: 0.48s; }
.cc-cmark__pad.p-f { animation-delay: 0.52s; }
.cc-cmark__pad.p-g { animation-delay: 0.56s; }
.cc-cmark__pad.p-h { animation-delay: 0.6s; }
.cc-cmark__pad.p-a { animation-delay: 0.62s; }
.cc-cmark__pad.p-b { animation-delay: 0.68s; }

/* ---- Retune the V7 mark pseudo-elements for the new SVG mark ----
   V7 drew a bordered rounded rect around the old chip. Against a vector C
   that reads as a box, so it becomes a soft halo on the same 23s cycle. */
.cc-header-v2__mark::before {
	inset: -9px !important;
	border: 0 !important;
	border-radius: 16px !important;
	box-shadow: none !important;
	clip-path: none !important;
	background: radial-gradient(
		circle at 50% 50%,
		rgba(126, 214, 255, 0.24) 0%,
		rgba(85, 200, 239, 0.1) 46%,
		rgba(85, 200, 239, 0) 72%
	) !important;
	animation: ccCArc 23s linear infinite !important;
}

@keyframes ccCArc {
	0%,
	40% { opacity: 0; }
	41.2% { opacity: 0.9; }
	42.6% { opacity: 0.4; }
	44.4% { opacity: 0; }
	100% { opacity: 0; }
}

.cc-header-v2__mark::after {
	inset: -9px !important;
	border-radius: 16px !important;
}

/* ---- The wordmark ---- */
.cc-header-v2__brand-copy {
	position: relative !important;
	display: block !important;
	gap: 0 !important;
	min-width: 0 !important;
}

.cc-header-v2__wordmark {
	display: block !important;
	width: 131px !important;
	height: 44px !important;
	max-width: 100% !important;
	margin: 0 !important;
	border: 0 !important;
}

/* Restrained answering halo. The artwork itself is never filtered. */
.cc-header-v2__brand-copy::after {
	content: "";
	position: absolute;
	inset: -7px -12px;
	border-radius: 12px;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(
		62% 130% at 18% 50%,
		rgba(126, 214, 255, 0.22) 0%,
		rgba(85, 200, 239, 0.08) 48%,
		rgba(85, 200, 239, 0) 74%
	);
	animation: ccWordGlow 14s linear infinite;
}

@keyframes ccWordGlow {
	0%,
	7.4% { opacity: 0; }
	8.4% { opacity: 1; }
	9.6% { opacity: 0.45; }
	11% { opacity: 0; }
	100% { opacity: 0; }
}

/* ---- Responsive: the C and the wordmark scale as one group ---- */
@media (max-width: 1100px) {
	.cc-header-v2__brand { gap: 10px !important; }

	.cc-header-v2__mark.cc-cmark {
		width: 44px !important;
		height: 55px !important;
		flex-basis: 44px !important;
	}

	.cc-header-v2__wordmark {
		width: 116px !important;
		height: 39px !important;
	}
}

@media (max-width: 620px) {
	.cc-header-v2__brand { gap: 9px !important; }

	.cc-header-v2__mark.cc-cmark {
		width: 38px !important;
		height: 47px !important;
		flex-basis: 38px !important;
	}

	.cc-header-v2__wordmark {
		width: 101px !important;
		height: 34px !important;
	}
}

@media (max-width: 390px) {
	.cc-header-v2__brand { gap: 8px !important; }

	.cc-header-v2__mark.cc-cmark {
		width: 34px !important;
		height: 42px !important;
		flex-basis: 34px !important;
	}

	.cc-header-v2__wordmark {
		width: 89px !important;
		height: 30px !important;
	}
}

/* ---- Accessibility ---- */
@media (prefers-reduced-motion: reduce) {
	.cc-spark {
		animation: none !important;
		opacity: 0 !important;
	}

	.cc-cmark__pad {
		animation: none !important;
		fill: #0d2233 !important;
		stroke: #e6f5ff !important;
	}

	.cc-header-v2__brand-copy::after,
	.cc-header-v2__mark::before,
	.cc-header-v2__mark::after {
		animation: none !important;
		opacity: 0 !important;
	}
}

@media print {
	.cc-spark,
	.cc-header-v2__brand-copy::after {
		display: none !important;
	}

	.cc-cmark__outer,
	.cc-cmark__inner,
	.cc-cmark__trace {
		stroke: #173d55 !important;
	}

	.cc-cmark__frame { filter: none !important; }
}

/* =========================================================
   HEADER V9 — THE C IS THE CORE, THE HEADER IS ITS BOARD

   The old V7 concept ran a charge along the header's bottom edge and into
   the logo. That is gone. The direction of the whole system is reversed:
   the reconstructed C is now the processor at the densest junction of the
   board, and every electrical event ORIGINATES inside it and propagates
   outward through a real routed network.

   A new PCB layer (.cc-pcb) is anchored to the C rather than to the header,
   because the C's offset from the header's left edge ranges from 12px on a
   phone to 170px at 1920 -- no fixed header viewBox can meet it. A ~20-line
   controller writes the C's measured right edge, centre and height into
   custom properties, so the board's routes always begin exactly on the C's
   I/O pads at every width.

   Routing is 45/90-degree PCB style: 4 primary outputs off the C's own pads,
   7 secondary branches off junctions, 6 far-field routes, plus dormant
   traces, vias, pads and component footprints that never conduct.

   Event timeline against the shared 14s cycle:
     PHASE 1  0.0-1.2s   core wakeup: current walks the C's internal traces,
                         pads light as it reaches them
     PHASE 2  0.5-0.8s   output: current exits the C's four I/O stubs
     PHASE 3  0.6-1.3s   propagation: 4 primaries, then branches at junctions
     PHASE 4  1.2-2.0s   far field: distant routes and vias, visibly dimmer
     PHASE 5  ~2.0s      decay back to the resting board
   ========================================================= */

/* ---- PHASE 0: retire the old bottom-edge power line ---- */
.cc-header-v2__fabric::after {
	content: none !important;
	display: none !important;
	animation: none !important;
}

/* The original decorative fabric stays, but drops back so the new routed
   board reads as the real network rather than competing with it. */
.cc-header-v2__fabric {
	opacity: 0.34 !important;
}


/* ---- Component keep-out behind the brand ----
   A real board leaves copper out from under a component. Routing already
   avoids the wordmark's footprint; this adds the faint solder-mask darkening
   that sells it and keeps the logo the brightest thing in its own area. */
.cc-header-v2__brand::before {
	content: "";
	position: absolute;
	inset: -14px -26px -14px -20px;
	z-index: -1;
	pointer-events: none;
	border-radius: 18px;
	background: radial-gradient(
		68% 130% at 26% 50%,
		rgba(8, 22, 34, 0.72) 0%,
		rgba(8, 22, 34, 0.42) 46%,
		rgba(8, 22, 34, 0) 78%
	);
}

.cc-header-v2__brand {
	position: relative !important;
	isolation: isolate;
}

/* The core outranks the board it feeds. */
.cc-cmark__frame {
	filter: drop-shadow(0 0 7px rgba(85, 200, 239, 0.62)) !important;
}

/* ---- The board layer ---- */
.cc-pcb {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
	contain: paint;
}

.cc-pcb__net {
	position: absolute;
	/* Fallbacks match the desktop resting geometry, so the board is already
	   correctly placed on the very first frame; the controller only refines it. */
	left: var(--cc-core-r, 79px);
	top: var(--cc-core-y, 49px);
	height: calc(var(--cc-core-h, 62px) * 1.6);
	width: calc(var(--cc-core-h, 62px) * 22.857);
	transform: translateY(-50%);
}

/* ---- Static board: density falls off with distance from the core ---- */
.cc-pcb__trace {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cc-pcb__trace--primary {
	stroke: rgba(163, 216, 245, 0.44);
	stroke-width: 2.6;
}

.cc-pcb__trace--branch {
	stroke: rgba(150, 204, 236, 0.3);
	stroke-width: 2;
}

.cc-pcb__trace--far {
	stroke: rgba(140, 192, 226, 0.2);
	stroke-width: 1.7;
}

.cc-pcb__dorm {
	fill: none;
	stroke: rgba(132, 184, 220, 0.11);
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cc-pcb__pad {
	fill: #0e2536;
	stroke-width: 2;
}

.cc-pcb__pad--primary { stroke: rgba(186, 228, 250, 0.62); }
.cc-pcb__pad--branch  { stroke: rgba(168, 212, 240, 0.44); }
.cc-pcb__pad--far     { stroke: rgba(150, 196, 228, 0.3); }

.cc-pcb__via {
	fill: rgba(176, 218, 246, 0.34);
	stroke: none;
}

.cc-pcb__comp {
	fill: rgba(20, 44, 64, 0.5);
	stroke: rgba(150, 200, 232, 0.26);
	stroke-width: 1.3;
}

/* ---- Current moving along the real routes ----
   pathLength="100" on every conductor, so one dash pair drives routes of
   completely different real lengths. Only transform-free stroke properties
   animate, and each route is a <use> of the static path -- no duplicated
   geometry in the DOM. */
.cc-pcb__flow {
	fill: none;
	stroke: #eafaff;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 10 100;
	stroke-dashoffset: 110;
	opacity: 0;
	animation: ccPcbFlow 14s linear infinite;
	animation-delay: calc(620ms + var(--d, 0ms));
}

.cc-pcb__flow--primary { stroke-width: 3; filter: drop-shadow(0 0 4px rgba(150, 226, 255, 0.9)); }
.cc-pcb__flow--branch  { stroke-width: 2.4; stroke: #d6f4ff; filter: drop-shadow(0 0 3px rgba(133, 214, 255, 0.72)); }
.cc-pcb__flow--far     { stroke-width: 2; stroke: #bfe8fb; filter: drop-shadow(0 0 3px rgba(120, 200, 244, 0.5)); }

@keyframes ccPcbFlow {
	0% { stroke-dashoffset: 110; opacity: 0; }
	0.7% { opacity: 1; }
	3.1% { opacity: 1; }
	3.9% { stroke-dashoffset: 0; opacity: 0; }
	100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Pads answer as the current reaches their part of the board. */
.cc-pcb__pad {
	animation: ccPcbPad 14s linear infinite;
}

.cc-pcb__pad--primary { animation-delay: 0.86s; }
.cc-pcb__pad--branch  { animation-delay: 1.18s; }
.cc-pcb__pad--far     { animation-delay: 1.54s; }

@keyframes ccPcbPad {
	0%, 0.4% { fill: #0e2536; }
	1.1% { fill: rgba(176, 232, 255, 0.92); }
	2.6% { fill: #0e2536; }
	100% { fill: #0e2536; }
}

.cc-pcb__via {
	animation: ccPcbVia 14s linear infinite;
	animation-delay: 1.42s;
}

@keyframes ccPcbVia {
	0%, 0.5% { fill: rgba(176, 218, 246, 0.34); }
	1.2% { fill: rgba(214, 245, 255, 0.95); }
	2.8% { fill: rgba(176, 218, 246, 0.34); }
	100% { fill: rgba(176, 218, 246, 0.34); }
}

/* ---- Route variation. A route only conducts when its event class is on. ---- */
.cc-pcb__flow { animation-name: none; }

.cc-evt-a .cc-pcb__flow.r-p1,
.cc-evt-a .cc-pcb__flow.r-p2,
.cc-evt-a .cc-pcb__flow.r-b1,
.cc-evt-a .cc-pcb__flow.r-b2,
.cc-evt-a .cc-pcb__flow.r-b4,
.cc-evt-a .cc-pcb__flow.r-b6,
.cc-evt-a .cc-pcb__flow.r-f1,
.cc-evt-a .cc-pcb__flow.r-f4,
.cc-evt-b .cc-pcb__flow.r-p3,
.cc-evt-b .cc-pcb__flow.r-p4,
.cc-evt-b .cc-pcb__flow.r-b3,
.cc-evt-b .cc-pcb__flow.r-b5,
.cc-evt-b .cc-pcb__flow.r-b8,
.cc-evt-b .cc-pcb__flow.r-f2,
.cc-evt-b .cc-pcb__flow.r-f3,
.cc-evt-b .cc-pcb__flow.r-f5,
.cc-evt-c .cc-pcb__flow,
.cc-evt-d .cc-pcb__flow.r-p2,
.cc-evt-d .cc-pcb__flow.r-b2,
.cc-evt-d .cc-pcb__flow.r-b7,
.cc-evt-d .cc-pcb__flow.r-f2 {
	animation-name: ccPcbFlow;
}

/* ---- PHASE 1 + 2: the core itself, retimed to lead the event ---- */
.cc-spark {
	animation-name: ccCoreFlow;
}

@keyframes ccCoreFlow {
	0% { stroke-dashoffset: 113; opacity: 0; }
	0.6% { opacity: 1; }
	3.6% { opacity: 1; }
	4.4% { stroke-dashoffset: 0; opacity: 0; }
	100% { stroke-dashoffset: 0; opacity: 0; }
}

/* The four outputs leaving the C's pads, brightest point in the system. */
.cc-cmark__iotrace {
	fill: none;
	stroke: rgba(196, 234, 252, 0.62);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cc-spark--io1 { animation-delay: 0.52s; }
.cc-spark--io2 { animation-delay: 0.56s; }
.cc-spark--io3 { animation-delay: 0.6s; }
.cc-spark--io4 { animation-delay: 0.64s; }

.cc-spark--io1,
.cc-spark--io2,
.cc-spark--io3,
.cc-spark--io4 {
	stroke-width: 3;
	stroke: #ffffff;
}

/* The core's own pads lead the board's pads. */
.cc-cmark__pad { animation-name: ccPadLit; }

/* ---- The wordmark's reflected light, after the core peaks ---- */
.cc-header-v2__brand-copy::after {
	animation-name: ccWordGlow9;
}

@keyframes ccWordGlow9 {
	0%, 3.4% { opacity: 0; }
	4.4% { opacity: 1; }
	5.6% { opacity: 0.42; }
	7.2% { opacity: 0; }
	100% { opacity: 0; }
}

/* ---- The final wordmark asset is 5.83:1, far wider than the one it
        replaced, so the whole logo group is re-proportioned. ---- */
.cc-header-v2__brand { gap: 14px !important; }

.cc-header-v2__wordmark {
	width: 210px !important;
	height: 36px !important;
}

@media (max-width: 1100px) {
	.cc-header-v2__brand { gap: 12px !important; }

	.cc-header-v2__wordmark {
		width: 187px !important;
		height: 32px !important;
	}
}

@media (max-width: 620px) {
	.cc-header-v2__brand { gap: 10px !important; }

	.cc-header-v2__wordmark {
		width: 157px !important;
		height: 27px !important;
	}

	/* Phone keeps the core and its directly connected routes; the far field
	   and the dormant texture drop out rather than the whole network. */
	.cc-pcb__trace--far,
	.cc-pcb__dorm,
	.cc-pcb__comp,
	.cc-pcb__pad--far,
	.cc-pcb__flow--far {
		display: none !important;
	}
}

@media (max-width: 430px) {
	.cc-header-v2__brand { gap: 9px !important; }

	.cc-header-v2__wordmark {
		width: 140px !important;
		height: 24px !important;
	}
}

@media (max-width: 360px) {
	.cc-header-v2__wordmark {
		width: 128px !important;
		height: 22px !important;
	}
}

/* ---- Accessibility ---- */
@media (prefers-reduced-motion: reduce) {
	.cc-pcb__flow {
		animation: none !important;
		opacity: 0 !important;
	}

	.cc-pcb__pad,
	.cc-pcb__via {
		animation: none !important;
	}
}

@media print {
	.cc-pcb { display: none !important; }
}

/* =========================================================
   V9b REVISION — read-through fixes after reviewing the frames
   ========================================================= */

/* 1. The core's current was invisible at header scale: a ~1.6px white spark
      was riding on top of the C's own ~3px near-white stroke. The resting
      mark is eased back a little and the travelling charge is widened and
      given a real bloom, so the moving point is unmistakably brighter than
      the conductor it is moving along. */
.cc-cmark__outer,
.cc-cmark__inner {
	opacity: 0.82;
}

.cc-cmark__trace,
.cc-cmark__iotrace {
	opacity: 0.72;
}

.cc-spark {
	stroke: #ffffff !important;
	stroke-width: 6 !important;
	stroke-dasharray: 11 100 !important;
	filter:
		drop-shadow(0 0 3px #b9ecff)
		drop-shadow(0 0 9px rgba(96, 206, 255, 0.95))
		drop-shadow(0 0 18px rgba(60, 170, 235, 0.55)) !important;
}

.cc-spark--inner { stroke-width: 4.6 !important; }
.cc-spark--tl,
.cc-spark--bl,
.cc-spark--br,
.cc-spark--tr { stroke-width: 4 !important; }

.cc-spark--io1,
.cc-spark--io2,
.cc-spark--io3,
.cc-spark--io4 { stroke-width: 5 !important; }

/* The whole mark lifts slightly while it is powered, then settles. */
.cc-cmark__frame {
	animation: ccCoreWake 14s linear infinite;
}

@keyframes ccCoreWake {
	0% { opacity: 0.9; }
	1.2% { opacity: 1; }
	5.2% { opacity: 1; }
	8% { opacity: 0.9; }
	100% { opacity: 0.9; }
}

/* 2. The keep-out was reading as a drawn panel behind the logo. It drops to a
      barely-there wash whose only job is lifting the wordmark off the board. */
.cc-header-v2__brand::before {
	inset: -20px -40px -20px -28px !important;
	border-radius: 40px !important;
	background: radial-gradient(
		74% 150% at 24% 50%,
		rgba(8, 22, 34, 0.4) 0%,
		rgba(8, 22, 34, 0.16) 52%,
		rgba(8, 22, 34, 0) 82%
	) !important;
}

/* 3. Highest density belongs at the core: a short fan-out cluster sits in the
      gap between the C's I/O pads and the first long routes. */
.cc-pcb__fan {
	fill: none;
	stroke: rgba(178, 224, 250, 0.5);
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cc-pcb__fanpad {
	fill: #0e2536;
	stroke: rgba(190, 230, 250, 0.62);
	stroke-width: 1.7;
	animation: ccPcbPad 14s linear infinite;
	animation-delay: 0.74s;
}

/* The board is positioned from measured custom properties, so its first
   correction after the controller runs was itself registering a small layout
   shift (0.003). It now fades in once the geometry is set: an opacity change
   never contributes to CLS, and the board is invisible for the one frame
   before it is correctly placed. */
.cc-pcb {
	opacity: 0;
	transition: opacity 0.45s ease;
}

.cc-pcb-ready .cc-pcb {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.cc-pcb { transition: none !important; }
}

/* =========================================================
   HEADER V10 — SEQUENTIAL NODE CONDUCTION + 16:9 SERVICE TILES

   Two corrections to V9:

   1. The board no longer fires a travelling dash down every route at once.
      Current is now read through the NODES: pads and vias light in sequence,
      outward from the C, like a signal hitting checkpoints. Each node's delay
      is derived from its x position, so the wave visibly moves away from the
      core. The C keeps its own internal travelling current -- that part was
      right -- and the board answers it.

   2. Every service tile is 16:9. Previously they ranged from 1.49 to 3.04,
      and at tablet width the 3.04 crop left almost no photograph visible.
      ========================================================= */

/* ---- 1. Board conduction: nodes, not dashes ---- */
.cc-pcb__flow,
.cc-pcb__live {
	display: none !important;
}

.cc-pcb__node {
	fill: #10293c;
	stroke: rgba(176, 220, 248, 0.5);
	stroke-width: 1.9;
	animation: ccNodeHit 14s linear infinite;
	animation-delay: var(--s, 600ms);
}

@keyframes ccNodeHit {
	0%,
	0.2% {
		fill: #10293c;
		stroke: rgba(176, 220, 248, 0.5);
		stroke-width: 1.9;
	}

	0.9% {
		fill: #e4f7ff;
		stroke: #ffffff;
		stroke-width: 2.6;
	}

	2.6% {
		fill: #10293c;
		stroke: rgba(176, 220, 248, 0.5);
		stroke-width: 1.9;
	}

	100% {
		fill: #10293c;
		stroke: rgba(176, 220, 248, 0.5);
		stroke-width: 1.9;
	}
}

/* Nearest nodes brightest, far field quieter, so the C stays the focal point. */
.cc-pcb__node--fan { stroke: rgba(198, 236, 255, 0.66); }
.cc-pcb__node--via { stroke: rgba(168, 212, 242, 0.4); stroke-width: 0; fill: rgba(176, 218, 246, 0.34); }
.cc-pcb__node--b   { stroke: rgba(168, 212, 240, 0.42); }
.cc-pcb__node--f   { stroke: rgba(150, 196, 228, 0.3); }

.cc-pcb__node--f {
	animation-name: ccNodeHitFar;
}

@keyframes ccNodeHitFar {
	0%,
	0.2% { fill: #10293c; stroke: rgba(150, 196, 228, 0.3); }
	0.9% { fill: rgba(190, 228, 250, 0.8); stroke: rgba(226, 246, 255, 0.85); }
	2.6% { fill: #10293c; stroke: rgba(150, 196, 228, 0.3); }
	100% { fill: #10293c; stroke: rgba(150, 196, 228, 0.3); }
}

.cc-pcb__node--via {
	animation-name: ccViaHit;
}

@keyframes ccViaHit {
	0%, 0.2% { fill: rgba(176, 218, 246, 0.34); }
	0.9% { fill: #dff5ff; }
	2.6% { fill: rgba(176, 218, 246, 0.34); }
	100% { fill: rgba(176, 218, 246, 0.34); }
}

/* ---- 2. Breathing room around the wordmark ---- */
.cc-header-v2__brand { gap: 18px !important; }

@media (max-width: 1100px) { .cc-header-v2__brand { gap: 15px !important; } }
@media (max-width: 620px) { .cc-header-v2__brand { gap: 13px !important; } }
@media (max-width: 430px) { .cc-header-v2__brand { gap: 11px !important; } }

.cc-header-v2__brand::before {
	inset: -22px -54px -22px -30px !important;
}

/* ---- 3. Service tiles: one 16:9 system, nine tiles, three across ---- */
.cc-header-v2__services-menu {
	width: min(1020px, calc(100vw - 40px)) !important;
	max-width: none !important;
	gap: 10px !important;
	padding: 16px !important;
}

.cc-header-v2__services-menu > .cc-svc,
.cc-header-v2__services-menu > .cc-special,
.cc-header-v2__services-menu > .cc-svc-soon {
	grid-column: span 2 !important;
	margin: 0 !important;
}

.cc-header-v2__services-menu > .cc-svc > a,
.cc-header-v2__services-menu > .cc-special > a,
.cc-header-v2__services-menu > .cc-svc-soon > .cc-svc-soon__inner {
	aspect-ratio: 16 / 9 !important;
	min-height: 0 !important;
	height: auto !important;
	padding: 12px 14px 13px !important;
	font-size: 15.5px !important;
}

/* The scrim only needs the lower third now that the tiles are large. */
.cc-header-v2__services-menu > .cc-svc > a::before,
.cc-header-v2__services-menu > .cc-special > a::before,
.cc-svc-soon__inner::before {
	background: linear-gradient(
		to top,
		rgba(6, 14, 22, 0.9) 0%,
		rgba(6, 14, 22, 0.66) 15%,
		rgba(6, 14, 22, 0.22) 33%,
		rgba(6, 14, 22, 0.04) 48%,
		rgba(6, 14, 22, 0) 60%
	) !important;
}

.cc-header-v2__services-menu > .cc-svc > a::after,
.cc-header-v2__services-menu > .cc-special > a::after {
	font-size: 11px !important;
}

/* ---- The non-interactive "coming soon" tile ---- */
.cc-svc-soon { position: relative !important; z-index: 2 !important; }

.cc-svc-soon__inner {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: end;
	gap: 4px;
	overflow: hidden;
	background: #101a24;
	border: 1px solid rgba(154, 190, 218, 0.16);
	border-radius: 12px;
	color: #ffffff;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-shadow: 0 1px 3px rgba(2, 8, 15, 0.72);
	box-shadow: 0 2px 10px rgba(0, 8, 18, 0.22);
	cursor: default;
}

.cc-svc-soon__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
}

.cc-svc-soon .cc-svc-thumb__img {
	filter: saturate(0.6) brightness(0.78);
}

.cc-svc-soon__badge {
	justify-self: start;
	margin-top: 2px;
	padding: 3px 9px;
	border: 1px solid rgba(133, 214, 255, 0.5);
	border-radius: 999px;
	background: rgba(10, 32, 48, 0.72);
	color: #bfe8ff;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 9.5px;
	font-weight: 850;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-shadow: none;
}

/* ---- Tablet: two across, still 16:9 ---- */
@media (max-width: 1100px) {
	.cc-header-v2__services-menu {
		width: auto !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 9px !important;
		padding: 12px !important;
	}

	.cc-header-v2__services-menu > .cc-svc,
	.cc-header-v2__services-menu > .cc-special,
	.cc-header-v2__services-menu > .cc-svc-soon {
		grid-column: auto !important;
	}

	.cc-header-v2__services-menu > .cc-svc > a,
	.cc-header-v2__services-menu > .cc-special > a,
	.cc-header-v2__services-menu > .cc-svc-soon > .cc-svc-soon__inner {
		font-size: 14px !important;
		padding: 11px 12px 12px !important;
	}

	.cc-header-v2__services-menu > .cc-svc > a::after,
	.cc-header-v2__services-menu > .cc-special > a::after {
		font-size: 10px !important;
	}
}

/* ---- Phone: one large 16:9 card per service ---- */
@media (max-width: 620px) {
	.cc-header-v2__services-menu {
		grid-template-columns: 1fr !important;
		gap: 10px !important;
		padding: 10px !important;
	}

	.cc-header-v2__services-menu > .cc-svc > a,
	.cc-header-v2__services-menu > .cc-special > a,
	.cc-header-v2__services-menu > .cc-svc-soon > .cc-svc-soon__inner {
		font-size: 16px !important;
		padding: 13px 14px 14px !important;
	}

	.cc-header-v2__services-menu > .cc-svc > a::after,
	.cc-header-v2__services-menu > .cc-special > a::after {
		font-size: 11.5px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-pcb__node {
		animation: none !important;
	}
}

/* The theme's mobile accordion opens submenus by animating max-height from 0
   to a fixed 1200px. That comfortably cleared eight small thumbnails; nine
   16:9 tiles need roughly 1,900-2,300px depending on width, so the last tiles
   were being clipped and could not be scrolled to. The cap is raised for the
   services submenu only -- every other submenu keeps the original behaviour. */
@media (max-width: 1100px) {
	.cc-site-header__menu .menu-item-has-children.is-submenu-open > .cc-header-v2__services-menu {
		max-height: 3000px !important;
	}
}

/* =========================================================
   HEADER V11 — BIGGER SERVICE TILES, PUNCHIER LABEL BAND

   Two changes:

   1. The dropdown grows. It was left-anchored at a fixed 290px offset with
      only 36px of room to spare on the right at 1366. It is now right-anchored
      to the shell and grows leftward, where there was 310px going spare, so it
      can be substantially wider at every desktop width without ever
      overflowing.

   2. The scrim gets its contrast back, but as a tight band rather than a long
      fade. The old gradient took 60% of the tile height to clear; this one is
      effectively gone by 36%, so the label sits on real darkness while the
      photograph above it stays clean. A faint cyan bloom sits exactly at the
      hand-off, so the band reads as light spilling off an energised component
      rather than a black box dropped on the picture.
   ========================================================= */

@media (min-width: 1101px) {
	.cc-header-v2__services-menu {
		left: auto !important;
		right: 0 !important;
		width: min(1180px, 100%) !important;
		padding: 18px !important;
		gap: 10px !important;
	}
}

/* ---- The label band ---- */
.cc-header-v2__services-menu > .cc-svc > a::before,
.cc-header-v2__services-menu > .cc-special > a::before,
.cc-svc-soon__inner::before {
	background:
		linear-gradient(
			to top,
			rgba(85, 200, 239, 0) 0%,
			rgba(85, 200, 239, 0) 27%,
			rgba(85, 200, 239, 0.13) 31.5%,
			rgba(85, 200, 239, 0) 37%
		),
		linear-gradient(
			to top,
			rgba(3, 10, 17, 0.95) 0%,
			rgba(3, 10, 17, 0.9) 9%,
			rgba(3, 10, 17, 0.62) 17%,
			rgba(4, 13, 21, 0.24) 25%,
			rgba(5, 16, 26, 0.06) 31%,
			rgba(6, 18, 28, 0) 36%
		) !important;
}

/* Service name: larger and tighter so it holds the band on its own. */
.cc-header-v2__services-menu > .cc-svc > a,
.cc-header-v2__services-menu > .cc-special > a,
.cc-header-v2__services-menu > .cc-svc-soon > .cc-svc-soon__inner {
	gap: 2px !important;
	padding: 14px 16px 15px !important;
	font-size: 17.5px !important;
	line-height: 1.14 !important;
	letter-spacing: -0.015em !important;
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.85),
		0 2px 12px rgba(0, 0, 0, 0.5) !important;
}

.cc-header-v2__services-menu > .cc-svc > a::after,
.cc-header-v2__services-menu > .cc-special > a::after {
	color: #d6e8f4 !important;
	font-size: 11.5px !important;
	letter-spacing: 0.015em !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

/* Hover deepens the band slightly rather than the whole tile. */
.cc-header-v2__services-menu > .cc-svc > a:hover::before,
.cc-header-v2__services-menu > .cc-special > a:hover::before,
.cc-header-v2__services-menu > .cc-svc > a:focus-visible::before,
.cc-header-v2__services-menu > .cc-special > a:focus-visible::before {
	opacity: 1 !important;
	filter: brightness(1.18) !important;
}

/* ---- Tablet ---- */
@media (max-width: 1100px) {
	.cc-header-v2__services-menu {
		padding: 12px !important;
		gap: 10px !important;
	}

	.cc-header-v2__services-menu > .cc-svc > a,
	.cc-header-v2__services-menu > .cc-special > a,
	.cc-header-v2__services-menu > .cc-svc-soon > .cc-svc-soon__inner {
		font-size: 17px !important;
		padding: 13px 15px 14px !important;
	}

	.cc-header-v2__services-menu > .cc-svc > a::after,
	.cc-header-v2__services-menu > .cc-special > a::after {
		font-size: 11.5px !important;
	}
}

/* ---- Phone: reclaim padding so the card itself is wider ---- */
@media (max-width: 620px) {
	.cc-header-v2__services-menu {
		padding: 8px !important;
		gap: 9px !important;
	}

	.cc-header-v2__services-menu > .cc-svc > a,
	.cc-header-v2__services-menu > .cc-special > a,
	.cc-header-v2__services-menu > .cc-svc-soon > .cc-svc-soon__inner {
		font-size: 18px !important;
		padding: 13px 15px 14px !important;
	}

	.cc-header-v2__services-menu > .cc-svc > a::after,
	.cc-header-v2__services-menu > .cc-special > a::after {
		font-size: 12px !important;
	}
}

.cc-svc-soon__badge {
	font-size: 10px !important;
	padding: 3px 10px !important;
}

/* =========================================================
   HEADER V12 — BIGGER SERVICES DROPDOWN (DESKTOP ONLY)

   The panel is sized to the screen rather than to a single fixed number, so
   it is as large as the viewport genuinely allows and never has to scroll:

     tall desktops (>960px high)  -> up to 1400px wide, tiles ~446 x 251
     laptop heights (<=960px)     -> up to 1250px wide, tiles ~402 x 226

   For reference the panel was 1180px with 374 x 210 tiles, so on a 1080-high
   display this is +19% on each edge and +42% in area.

   Chrome was trimmed to buy that height back: padding 18 -> 14, gap 10 -> 8,
   and the two group labels 26 -> 22. Tablet and phone are deliberately
   untouched.
   ========================================================= */

@media (min-width: 1101px) {
	.cc-header-v2__services-menu {
		width: min(1400px, 100%) !important;
		padding: 14px !important;
		gap: 8px !important;
	}

	.cc-header-v2__services-menu > .cc-services-group {
		min-height: 22px !important;
	}

	.cc-header-v2__services-menu > .cc-svc > a,
	.cc-header-v2__services-menu > .cc-special > a,
	.cc-header-v2__services-menu > .cc-svc-soon > .cc-svc-soon__inner {
		padding: 15px 18px 16px !important;
		font-size: 19px !important;
	}

	.cc-header-v2__services-menu > .cc-svc > a::after,
	.cc-header-v2__services-menu > .cc-special > a::after {
		font-size: 12.5px !important;
	}

	.cc-svc-soon__badge {
		font-size: 10.5px !important;
		padding: 4px 11px !important;
	}
}

/* Laptop-height desktops: step the panel down so it still opens fully without
   the max-height guard ever having to scroll it. */
@media (min-width: 1101px) and (max-height: 960px) {
	.cc-header-v2__services-menu {
		width: min(1250px, 100%) !important;
	}

	.cc-header-v2__services-menu > .cc-svc > a,
	.cc-header-v2__services-menu > .cc-special > a,
	.cc-header-v2__services-menu > .cc-svc-soon > .cc-svc-soon__inner {
		font-size: 18px !important;
		padding: 14px 16px 15px !important;
	}
}