/* garagetcs.nl's header, Elementor template 65 as bin/brand-header.php builds it: the old redesign's header
   (TCSTheme header.php and style.css 74-125, on staging) on the site's own widgets. The red and the faces are
   the kit's; the surface, ink, line and muted grey are TCSTheme's, the line translucent so it reads on the
   photo and on the surface alike, the grey lighter than TCSTheme's (L 0.80 for 0.74) for the contrast the fade
   below gives. The blurred surface once scrolled is the old redesign's own choice, not a default surface. */

.elementor-location-header .tcs-header {
	--tcs-header-surface: oklch(0.13 0.005 25);
	--tcs-header-ink: oklch(0.98 0 0);
	--tcs-header-muted: oklch(0.80 0.012 25);
	--tcs-header-line: oklch(0.40 0.012 25 / 0.35);
	--tcs-header-red: var(--e-global-color-primary);
	--tcs-header-glow: 0 0 8px color-mix(in oklch, var(--tcs-header-red) 45%, transparent);
	--tcs-header-tint: color-mix(in oklch, var(--tcs-header-red) 12%, transparent);
	--tcs-header-text-font: var(--e-global-typography-text-font-family, "Geist"), system-ui, sans-serif;
	--tcs-header-display-font: var(--e-global-typography-primary-font-family, "Race Sport"), sans-serif;
	position: fixed;
	inset: 0 0 auto;
	z-index: 999;
	width: 100%;
	max-width: none;
	background: transparent;
	transition: background-color 300ms ease, box-shadow 300ms ease, backdrop-filter 300ms ease;
}
/* Over the hero a dark fade runs from the top of the screen to below the header: 85 % behind the trust
   line and the menu row (0 to 92 px), then eased out to nothing at 280 px (alpha = 0.85 * (1 - t)^1.8,
   a stop every 16 px, so the tail shows no band). With the menu's grey at L 0.80 every small text in the
   header measures at least 7:1 (AAA) over the home, uitlaat and contact heroes; the old redesign's own
   hero carried that darkness in its picture. */
.elementor-location-header .tcs-header::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: -1;
	height: 280px;
	background: linear-gradient(to bottom, color-mix(in oklch, var(--tcs-header-surface) 85%, transparent) 0, color-mix(in oklch, var(--tcs-header-surface) 85%, transparent) 92px, color-mix(in oklch, var(--tcs-header-surface) 72.4%, transparent) 108px, color-mix(in oklch, var(--tcs-header-surface) 60.8%, transparent) 124px, color-mix(in oklch, var(--tcs-header-surface) 50%, transparent) 140px, color-mix(in oklch, var(--tcs-header-surface) 40.2%, transparent) 156px, color-mix(in oklch, var(--tcs-header-surface) 31.3%, transparent) 172px, color-mix(in oklch, var(--tcs-header-surface) 23.5%, transparent) 188px, color-mix(in oklch, var(--tcs-header-surface) 16.6%, transparent) 204px, color-mix(in oklch, var(--tcs-header-surface) 10.9%, transparent) 220px, color-mix(in oklch, var(--tcs-header-surface) 6.2%, transparent) 236px, color-mix(in oklch, var(--tcs-header-surface) 2.8%, transparent) 252px, color-mix(in oklch, var(--tcs-header-surface) 0.6%, transparent) 268px);
	pointer-events: none;
	transition: opacity 300ms ease;
}
.elementor-location-header .tcs-header.is-scrolled::before {
	opacity: 0;
}
.elementor-location-header .tcs-header.is-scrolled {
	background: color-mix(in oklch, var(--tcs-header-surface) 82%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 6px 24px -10px oklch(0 0 0 / 0.55);
}
@media (prefers-reduced-motion: reduce) {
	.elementor-location-header .tcs-header { transition: none; }
}

/* The trust line: 30 px, the counts in ink, the rest muted. With nothing stored the strip prints nothing
   and the line keeps its 30 px. */
.elementor-location-header .tcs-header .tcs-header__top {
	min-height: 30px;
	border-bottom: 1px solid oklch(1 0 0 / 0.09);
}
.elementor-location-header .tcs-header .tcs-header__strip,
.elementor-location-header .tcs-header .tcs-header__strip > .elementor-widget-container {
	margin: 0;
}
.elementor-location-header .tcs-header .tcs-strip {
	height: 30px;
	padding: 0;
	gap: 0 24px;
	flex-wrap: nowrap;
}
.elementor-location-header .tcs-header .tcs-strip .tcs-strip__item {
	position: relative;
	gap: 0.42rem;
	min-height: 26px;
	color: var(--tcs-header-muted);
	font-family: var(--tcs-header-text-font);
	font-size: 14px;
	font-weight: 500;
	transition: color 200ms;
}
.elementor-location-header .tcs-header .tcs-strip .tcs-strip__item b {
	color: var(--tcs-header-ink);
}
/* A finger gets 44 px of height from a 30 px line; the focus ring sits on the link's edge, so it stays
   inside the 2 px left above a 26 px link. */
@media (pointer: coarse) {
	.elementor-location-header .tcs-header .tcs-strip .tcs-strip__item::after {
		content: "";
		position: absolute;
		inset: -9px 0;
	}
}
.elementor-location-header .tcs-header .tcs-strip .tcs-strip__item:focus-visible {
	outline-offset: 0;
}
@media (hover: hover) and (pointer: fine) {
	.elementor-location-header .tcs-header .tcs-strip .tcs-strip__item:hover {
		color: var(--tcs-header-ink);
		text-decoration: none;
	}
}
.elementor-location-header .tcs-header .tcs-strip__label {
	display: none;
}
@media (min-width: 1025px) {
	.elementor-location-header .tcs-header .tcs-strip__label { display: inline; }
}

/* The row: lockup, menu, pill; 66 px; 1320 px wide, wider than the page's 1140 px content column by the
   owner's choice of 2026-10-13 (the sections follow one by one with their redesigns). The trust line centres
   over the same width. */
.elementor-location-header .tcs-header :is(.tcs-header__row, .tcs-strip) {
	width: min(1320px, 100% - 48px);
	margin-inline: auto;
}
.elementor-location-header .tcs-header .tcs-header__row {
	height: 66px;
	gap: 2rem;
}
@media (max-width: 1024px) {
	.elementor-location-header .tcs-header :is(.tcs-header__row, .tcs-strip) { width: calc(100% - 40px); }
	.elementor-location-header .tcs-header .tcs-header__row { gap: 12px; }
}

/* The lockup: one home link, the hexagon (decorative) beside the wordmark over the rotating line. The
   hexagon is exactly as tall as the two texts together: header.js sets its height from the texts' measured
   height at every width (38 px here is the value before the script runs). */
.elementor-location-header .tcs-header .tcs-header__lockup {
	gap: 18px;
	min-height: 44px;
	color: var(--tcs-header-ink);
	text-decoration: none;
}
.elementor-location-header .tcs-header :is(.tcs-header__lockup, .tcs-header__words) > .elementor-element {
	width: auto;
	margin: 0;
}
.elementor-location-header .tcs-header .tcs-header__mark img {
	display: block;
	width: auto;
	height: 38px;
	max-width: none;
	padding: 0;
	border: 0;
}
.elementor-location-header .tcs-header .tcs-header__words {
	gap: 4px;
}
.elementor-location-header .tcs-header .tcs-header__line :is(.elementor-headline, .elementor-headline *) {
	font-family: var(--tcs-header-display-font);
	font-size: 10px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	-webkit-text-stroke: 0;
}
.elementor-location-header .tcs-header .tcs-header__line .elementor-headline {
	margin: 0;
	color: var(--tcs-header-muted);
	white-space: nowrap;
}
/* Elementor paints the plain part in the kit's secondary colour (#141414) unless the widget sets one. */
.elementor-location-header .tcs-header .tcs-header__line .elementor-headline-plain-text {
	color: var(--tcs-header-muted);
}
/* The rotating word (header.js builds .tcs-header__roll in place of Elementor's wrapper) rolls up like a
   counter. The words share one grid cell, so the line is as wide as its widest word and nothing beside it
   moves. With reduced motion the first word stands still (the script runs no rotation). */
.elementor-location-header .tcs-header .tcs-header__roll {
	display: inline-grid;
	overflow: hidden;
	vertical-align: bottom;
	color: var(--tcs-header-ink);
}
/* The move and the fade share one clock and one curve, and the words keep their own layer, so the
   lettering does not re-sharpen when the move ends (that read as the word settling). */
.elementor-location-header .tcs-header .tcs-header__roll-word {
	grid-area: 1 / 1;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(110%);
	transition: transform 450ms cubic-bezier(0.33, 1, 0.68, 1), opacity 450ms cubic-bezier(0.33, 1, 0.68, 1);
	will-change: transform, opacity;
	backface-visibility: hidden;
}
.elementor-location-header .tcs-header .tcs-header__roll-word.is-in {
	opacity: 1;
	transform: none;
}
.elementor-location-header .tcs-header .tcs-header__roll-word.is-out {
	opacity: 0;
	transform: translateY(-110%);
}

/* On phones the line is 9 px with 12 px to the hexagon, so "DE GARAGE VOOR" and its widest word
   (AMBIENTLIGHTING) stay on one row and the menu button still fits at 375 px (measured: 31 px spare). */
@media (max-width: 767px) {
	.elementor-location-header .tcs-header .tcs-header__line :is(.elementor-headline, .elementor-headline *) {
		font-size: 9px;
		letter-spacing: 0.02em;
	}
	.elementor-location-header .tcs-header .tcs-header__lockup { gap: 12px; }
}
/* Under 375 px not even that fits: the rotating word goes under "DE GARAGE VOOR". */
@media (max-width: 374px) {
	.elementor-location-header .tcs-header .tcs-header__roll { display: grid; }
}

.elementor-location-header .tcs-header .tcs-header__row > .elementor-element {
	width: auto;
	margin: 0;
	flex: 0 0 auto;
}
.elementor-location-header .tcs-header .tcs-header__brand .elementor-heading-title {
	margin: 0;
	font-family: var(--tcs-header-display-font);
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}
.elementor-location-header .tcs-header .tcs-header__brand .tcs-wordmark__tcs {
	color: var(--tcs-header-red);
}

/* The menu: small uppercase letter-spaced, muted; hover and the current item in ink, with a 2 px red
   line under it: the old header's (Element Pack navbar style 4) line, grown in from the left on hover and
   drawn out to the right on leave, in the brand red with its glow, and always under the current item. */
.elementor-location-header .tcs-header .tcs-header__nav .bdt-navbar-nav {
	gap: 30px;
}
.elementor-location-header .tcs-header .tcs-header__nav .bdt-navbar-nav > li > a {
	position: relative;
	min-height: 44px;
	padding: 0;
	color: var(--tcs-header-muted);
	font-family: var(--tcs-header-text-font);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	background: none;
	transition: color 200ms;
}
.elementor-location-header .tcs-header .tcs-header__nav .bdt-navbar-nav > li.is-current > a,
.elementor-location-header .tcs-header .tcs-header__nav .bdt-navbar-nav > li > a:focus-visible {
	color: var(--tcs-header-ink);
}
.elementor-location-header .tcs-header .tcs-header__nav .bdt-navbar-nav > li > a::before {
	content: "";
	position: absolute;
	inset: auto 0 6px;
	height: 2px;
	background: var(--tcs-header-red);
	box-shadow: var(--tcs-header-glow);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.elementor-location-header .tcs-header .tcs-header__nav .bdt-navbar-nav > li.is-current > a::before,
.elementor-location-header .tcs-header .tcs-header__nav .bdt-navbar-nav > li > a:focus-visible::before {
	transform: scaleX(1);
	transform-origin: left;
}
@media (prefers-reduced-motion: reduce) {
	.elementor-location-header .tcs-header .tcs-header__nav .bdt-navbar-nav > li > a::before { transition: none; }
}
/* Diensten's caret, as the old redesign drew it, in place of Element Pack's indicator. */
.elementor-location-header .tcs-header .tcs-header__nav .bdt-navbar-nav > li > a::after {
	content: none;
}
.elementor-location-header .tcs-header .tcs-header__nav .bdt-navbar-nav > li.bdt-parent > a::after {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: 0.5rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}
.elementor-location-header .tcs-header .tcs-header__nav .bdt-navbar-dropdown {
	width: auto;
	min-width: 0;
	padding: 0.6rem;
	border: 1px solid var(--tcs-header-line);
	border-radius: 12px;
	background: color-mix(in oklch, var(--tcs-header-surface) 97%, transparent);
	box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.8);
}
.elementor-location-header .tcs-header .tcs-header__nav .bdt-navbar-dropdown-nav {
	display: grid;
	grid-template-rows: repeat(7, auto);
	grid-auto-flow: column;
	column-gap: 0.5rem;
}
.elementor-location-header .tcs-header .tcs-header__nav .bdt-navbar-dropdown-nav > li > a {
	display: block;
	padding: 0.5rem 0.85rem;
	border-radius: 8px;
	color: var(--tcs-header-muted);
	font-family: var(--tcs-header-text-font);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	background: none;
}
.elementor-location-header .tcs-header .tcs-header__nav .bdt-navbar-dropdown-nav > li > a:focus-visible,
.elementor-location-header .tcs-header .tcs-header__nav .bdt-navbar-dropdown-nav > li.is-current > a {
	color: var(--tcs-header-ink);
	background: oklch(1 0 0 / 0.05);
}

/* The pills, the bar's and the menu's: outlined, uppercase, opening the configurator window. */
.elementor-location-header .tcs-header :is(.tcs-header__cta .elementor-button, .tcs-header__menu-cta) {
	align-items: center;
	border: 1px solid var(--tcs-header-line);
	border-radius: 999px;
	background: transparent;
	color: var(--tcs-header-ink);
	font-family: var(--tcs-header-text-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: border-color 200ms, background-color 200ms;
}
.elementor-location-header .tcs-header :is(.tcs-header__cta .elementor-button, .tcs-header__menu-cta):is(:focus-visible, :active) {
	border-color: var(--tcs-header-red);
	background: var(--tcs-header-tint);
}
.elementor-location-header .tcs-header .tcs-header__cta .elementor-button {
	display: inline-flex;
	min-height: 40px;
	padding: 0.7rem 1.3rem;
}

/* Hover, for a pointer that hovers: a finger's tap would leave it on. */
@media (hover: hover) and (pointer: fine) {
	.elementor-location-header .tcs-header .tcs-header__nav .bdt-navbar-nav > li:hover > a {
		color: var(--tcs-header-ink);
	}
	.elementor-location-header .tcs-header .tcs-header__nav .bdt-navbar-nav > li:hover > a::before {
		transform: scaleX(1);
		transform-origin: left;
	}
	.elementor-location-header .tcs-header .tcs-header__nav .bdt-navbar-dropdown-nav > li > a:hover {
		color: var(--tcs-header-ink);
		background: oklch(1 0 0 / 0.05);
	}
	.elementor-location-header .tcs-header :is(.tcs-header__cta .elementor-button, .tcs-header__menu-cta):hover {
		border-color: var(--tcs-header-red);
		background: var(--tcs-header-tint);
	}
}

/* Focus: a white ring over a black one, which shows on the photo and on the dark surface alike. */
.elementor-location-header .tcs-header :focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #000;
	border-radius: 4px;
}

/* Phones and tablets: the menu, after needforparts.eu's (nfp-theme main.css, .hamburger and .header-nav),
   from the right. The button is the row's last item; its three lines turn into a cross in place, so open
   and close are the same spot. */
.elementor-location-header .tcs-header .tcs-header__menu-toggle {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--tcs-header-ink);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}
.elementor-location-header .tcs-header .tcs-header__menu-toggle-icon {
	display: block;
	overflow: visible;
}
.elementor-location-header .tcs-header .tcs-header__menu-toggle :is(.tcs-header__menu-toggle-top, .tcs-header__menu-toggle-mid, .tcs-header__menu-toggle-bot) {
	transition: transform 320ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms ease-out;
}
.elementor-location-header .tcs-header .tcs-header__menu-toggle-top { transform-origin: 4px 5px; }
.elementor-location-header .tcs-header .tcs-header__menu-toggle-mid { transform-origin: 12px 12px; }
.elementor-location-header .tcs-header .tcs-header__menu-toggle-bot { transform-origin: 4px 19px; }
/* 41.19° and ×1.329 take each outer line from its left end to the opposite corner of the 16 × 14 box. */
.elementor-location-header .tcs-header .tcs-header__menu-toggle[aria-expanded="true"] .tcs-header__menu-toggle-top { transform: rotate(41.19deg) scaleX(1.329); }
.elementor-location-header .tcs-header .tcs-header__menu-toggle[aria-expanded="true"] .tcs-header__menu-toggle-mid { opacity: 0; }
.elementor-location-header .tcs-header .tcs-header__menu-toggle[aria-expanded="true"] .tcs-header__menu-toggle-bot { transform: rotate(-41.19deg) scaleX(1.329); }

/* The menu is the dimmed page under the header; the panel slides in over it from the right. Closed, it
   stays shown until the slide out has ended, then leaves the page (visibility), its links with it. Its
   geometry is all explicit because its containing block changes: the header's blur (is-scrolled, forced while
   the menu is open) makes the header the box a fixed child is placed in, and the header spans the screen's
   full width from its top, so the same numbers land on the same pixels either way. --tcs-header-menu-top is
   the header's bottom edge, which header.js measures on open (96 px: the 30 px trust line and the 66 px row). */
.elementor-location-header .tcs-header .tcs-header__menu {
	position: fixed;
	top: var(--tcs-header-menu-top, 96px);
	left: 0;
	width: 100%;
	height: calc(100dvh - var(--tcs-header-menu-top, 96px));
	background: oklch(0 0 0 / 0.6);
	opacity: 0;
	visibility: hidden;
	transition: opacity 320ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s 320ms;
}
.elementor-location-header .tcs-header .tcs-header__menu.is-open {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}
.elementor-location-header .tcs-header .tcs-header__menu-panel {
	position: absolute;
	inset: 0 0 0 auto;
	width: 100%;
	box-sizing: border-box;
	padding: 8px 20px max(32px, env(safe-area-inset-bottom));
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--tcs-header-surface);
	border-top: 1px solid oklch(1 0 0 / 0.09);
	transform: translateX(100%);
	transition: transform 320ms cubic-bezier(0.23, 1, 0.32, 1);
}
.elementor-location-header .tcs-header .tcs-header__menu.is-open .tcs-header__menu-panel { transform: none; }
@media (min-width: 768px) {
	.elementor-location-header .tcs-header .tcs-header__menu-panel { width: 400px; }
}
@media (max-width: 374px) {
	.elementor-location-header .tcs-header .tcs-header__menu-panel { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.elementor-location-header .tcs-header :is(.tcs-header__menu, .tcs-header__menu-panel, .tcs-header__menu-toggle g) { transition: none; }
}
/* The page behind the open menu does not scroll. */
html.tcs-header-menu-open {
	overflow: hidden;
}
/* The page's two floating buttons, the configurator's and the cookie settings', and the cookie banner of a
   first visit sit over the panel's details (the cookie ones at the top of every layer); while the menu is
   open they step aside. The menu has its own two ways into the configurator. */
html.tcs-header-menu-open :is(#tcs-configurator-button, #tcs-consent-settings, #tcs-consent) {
	visibility: hidden;
}

/* The rows: 20 px uppercase, 56 px, a hairline between them; muted, the current page in ink with the
   desktop menu's red line under it. */
.elementor-location-header .tcs-header .tcs-header__menu :is(ul, li) {
	margin: 0;
	padding: 0;
	list-style: none;
}
.elementor-location-header .tcs-header .tcs-header__menu-item + .tcs-header__menu-item {
	border-top: 1px solid var(--tcs-header-line);
}
.elementor-location-header .tcs-header .tcs-header__menu-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--tcs-header-muted);
	font-family: var(--tcs-header-text-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-align: left;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color 200ms;
}
.elementor-location-header .tcs-header .tcs-header__menu-item.is-current > .tcs-header__menu-link {
	color: var(--tcs-header-ink);
}
@media (hover: hover) and (pointer: fine) {
	.elementor-location-header .tcs-header .tcs-header__menu :is(.tcs-header__menu-link, .tcs-header__menu-sublink, a.tcs-header__menu-detail):hover {
		color: var(--tcs-header-ink);
	}
}
.elementor-location-header .tcs-header .tcs-header__menu-text {
	position: relative;
}
.elementor-location-header .tcs-header .tcs-header__menu-item.is-current > .tcs-header__menu-link > .tcs-header__menu-text::before {
	content: "";
	position: absolute;
	inset: auto 0 -6px;
	height: 2px;
	background: var(--tcs-header-red);
	box-shadow: var(--tcs-header-glow);
}
.elementor-location-header .tcs-header .tcs-header__menu-group .tcs-header__menu-icon {
	flex: none;
	transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1);
}
.elementor-location-header .tcs-header .tcs-header__menu-item.is-open .tcs-header__menu-group .tcs-header__menu-icon {
	transform: rotate(180deg);
}
/* The caret sits next to "Diensten", not at the row's far end. */
.elementor-location-header .tcs-header .tcs-header__menu-link.tcs-header__menu-group {
	justify-content: flex-start;
	gap: 8px;
}

/* Diensten's accordion: the services in the menu's order, 48 px rows in 16 px sentence case. Closed it
   takes no height, and its links leave the tab order (visibility) once the fold has run. */
.elementor-location-header .tcs-header .tcs-header__menu-sub {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows 240ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s 240ms;
}
.elementor-location-header .tcs-header .tcs-header__menu-item.is-open > .tcs-header__menu-sub {
	grid-template-rows: 1fr;
	visibility: visible;
	transition-delay: 0s;
}
.elementor-location-header .tcs-header .tcs-header__menu-sublist {
	min-height: 0;
	overflow: hidden;
}
.elementor-location-header .tcs-header .tcs-header__menu-item.is-open .tcs-header__menu-sublist {
	padding-bottom: 8px;
}
.elementor-location-header .tcs-header .tcs-header__menu-sublink {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding-left: 16px;
	color: var(--tcs-header-muted);
	font-family: var(--tcs-header-text-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.25;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
.elementor-location-header .tcs-header .tcs-header__menu-sublink[aria-current="page"] {
	color: var(--tcs-header-ink);
}
@media (prefers-reduced-motion: reduce) {
	.elementor-location-header .tcs-header :is(.tcs-header__menu-sub, .tcs-header__menu-group .tcs-header__menu-icon) { transition: none; }
}

/* The menu's own pill, full width under the items. */
.elementor-location-header .tcs-header .tcs-header__menu-cta {
	display: flex;
	justify-content: center;
	min-height: 48px;
	margin-top: 24px;
}

/* The contact details under the pill, as needforparts.eu shows its own: an icon and a line each, 44 px rows. */
.elementor-location-header .tcs-header .tcs-header__menu .tcs-header__menu-details {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--tcs-header-line);
}
.elementor-location-header .tcs-header .tcs-header__menu-detail {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	color: var(--tcs-header-muted);
	font-family: var(--tcs-header-text-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
}
.elementor-location-header .tcs-header a.tcs-header__menu-detail {
	color: var(--tcs-header-ink);
}
.elementor-location-header .tcs-header .tcs-header__menu-detail .tcs-header__menu-icon {
	flex: none;
	color: var(--tcs-header-muted);
}

/* Below 1200 px the row leaves the menu and the pill no room at their full spacing: both close up. These
   rules match the ones they narrow exactly, so they win only by coming after them. */
@media (min-width: 1025px) and (max-width: 1199px) {
	.elementor-location-header .tcs-header .tcs-header__row { gap: 1rem; }
	.elementor-location-header .tcs-header .tcs-header__nav .bdt-navbar-nav { gap: 22.8px; }
	.elementor-location-header .tcs-header .tcs-header__nav .bdt-navbar-nav > li > a { font-size: 13px; letter-spacing: 0.04em; }
	.elementor-location-header .tcs-header .tcs-header__cta .elementor-button { padding-inline: 1rem; letter-spacing: 0.06em; }
}

/* At desktop width the row is three columns, the menu centred in the middle one and the pill at the end of
   the last, so a change in the lockup's width moves neither. */
@media (min-width: 1025px) {
	.elementor-location-header .tcs-header .tcs-header__row {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}
	.elementor-location-header .tcs-header .tcs-header__row > .tcs-header__nav { justify-self: center; }
	.elementor-location-header .tcs-header .tcs-header__row > .tcs-header__cta { justify-self: end; }
}

/* The narrowest phones (under 375 px): the wordmark at 19 px and 16 px side margins, so the lockup and
   the menu button fit a 320 px screen. */
@media (max-width: 374px) {
	.elementor-location-header .tcs-header :is(.tcs-header__row, .tcs-strip) { width: calc(100% - 32px); }
	.elementor-location-header .tcs-header .tcs-header__brand .elementor-heading-title { font-size: 19px; }
}