/**
 * Marby-matched header
 * Layout / spacing / CTA / overlay / scroll glass / motion
 */

:root {
	--tk-hdr-ink: var(--color-ink);
	--tk-hdr-ink-soft: var(--color-onyx);
	--tk-hdr-mute: var(--color-text-muted);
	--tk-hdr-mute-soft: var(--color-secondary-hover);
	--tk-hdr-fog: var(--color-fog);
	--tk-hdr-mist: var(--color-mist);
	--tk-hdr-white: var(--color-white);
	/* Exact Marby invert-text tokens (live computed) */
	--tk-hdr-invert-dark: var(--color-onyx);
	--tk-hdr-invert-light: var(--color-fog);
	--tk-hdr-invert: var(--tk-hdr-invert-dark);
	--tk-hdr-ease: cubic-bezier(0.12, 0.23, 0.5, 1);
	--tk-hdr-duration: 0.4s;
	/* Marby Menu item hover — spring { bounce:0.2, delay:0, duration:0.4 } */
	--tk-hdr-menu-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
	--tk-hdr-menu-duration: 0.4s;
	/* Marby brand color transition (live: color 0.25s) */
	--tk-hdr-invert-duration: 0.25s;
	/*
	 * Marby page-appear tween (live: Vn → Un on homepage)
	 * initial { opacity:.001, y:20 }
	 * animate { opacity:1, y:0, transition:{ delay:.2, duration:.4, ease:[.12,.23,.5,1], type:tween } }
	 */
	--tk-hdr-appear-ease: cubic-bezier(0.12, 0.23, 0.5, 1);
	--tk-hdr-appear-duration: 0.4s;
	--tk-hdr-appear-delay: 0.2s;
	/*
	 * Marby overlay menu panel spring (live: Jr)
	 * { bounce:.3, delay:0, duration:.5, type:spring } · scale .98 → 1
	 */
	--tk-hdr-overlay-spring: cubic-bezier(0.22, 1.3, 0.36, 1);
	--tk-hdr-overlay-duration: 0.5s;
	/* Close only — same spring curve, much snappier (~140ms) */
	--tk-hdr-overlay-close-duration: 0.14s;
	/*
	 * Marby overlay link spring (live: $r / ri / oi / li / fi)
	 * { bounce:.25, duration:.55, type:spring } · y:20 → 0 (social y:10)
	 */
	--tk-hdr-overlay-item-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
	--tk-hdr-overlay-item-duration: 0.55s;
	--tk-hdr-overlay-item-close-duration: 0.14s;
	--tk-hdr-pad: 20px;
	--tk-hdr-max: 1200px;
	--tk-hdr-radius: 10px;
	--tk-hdr-btn-radius: 4px;
	--tk-hdr-btn-h: 28px;
	--tk-hdr-z: 1000;
	--tk-hdr-font: var(--font-ui);
}

/* Animate Marby border vars like Framer Motion */
@property --tk-hdr-border-b {
	syntax: "<length>";
	inherits: true;
	initial-value: 0px;
}

/*
 * Marby nav — live computed values at ALL scroll positions:
 * background-color: rgba(0, 0, 0, 0)
 * backdrop-filter: none
 * box-shadow: none
 * border: 0
 * padding: 20px
 * height: 68px
 * Only brand text color inverts.
 */
.tk-hdr {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0 none;
	background-color: rgba(0, 0, 0, 0);
	background-image: none;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	z-index: var(--tk-hdr-z);
	font-family: var(--tk-hdr-font);
	-webkit-font-smoothing: antialiased;
	pointer-events: none;
}

.tk-hdr__trigger {
	position: relative;
	z-index: calc(var(--tk-hdr-z) + 2);
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0 none;
	background-color: rgba(0, 0, 0, 0);
	background-image: none;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	display: flex;
	justify-content: center;
	pointer-events: none;
	/* Marby appear entrance (Vn → Un) */
	opacity: 0.001;
	transform: translateY(20px);
	will-change: transform, opacity;
	transition:
		opacity var(--tk-hdr-appear-duration) var(--tk-hdr-appear-ease),
		transform var(--tk-hdr-appear-duration) var(--tk-hdr-appear-ease);
	transition-delay: 0s;
}

.tk-hdr.is-entered .tk-hdr__trigger {
	opacity: 1;
	transform: translateY(0);
	transition-delay: var(--tk-hdr-appear-delay);
}

@media (prefers-reduced-motion: reduce) {
	.tk-hdr__trigger {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.tk-hdr__nav {
	position: relative;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: var(--tk-hdr-pad);
	border: 0 none;
	background-color: rgba(0, 0, 0, 0);
	background-image: none;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	pointer-events: none;
}

/* Decorative glass layer kept in DOM but disabled — Marby nav has no glass */
.tk-hdr__glass {
	display: none !important;
}

.tk-hdr__container {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	min-height: var(--tk-hdr-btn-h);
	pointer-events: auto;
}

.tk-hdr__side {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	min-width: 0;
}

.tk-hdr__side--start {
	justify-content: flex-start;
}

.tk-hdr__side--end {
	justify-content: flex-end;
}

/* —— Icon button (menu) —— original Marby dimensions + brand color —— */
.tk-hdr__icon-btn {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	border: 0;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	flex: none;
	width: 32px;
	min-width: 32px;
	max-width: 32px;
	height: var(--tk-hdr-btn-h);
	min-height: var(--tk-hdr-btn-h);
	max-height: var(--tk-hdr-btn-h);
	padding: 4px 8px;
	border-radius: var(--glass-radius, var(--tk-hdr-btn-radius));
	background: var(--glass-bg, rgba(255, 255, 255, 0.12));
	color: var(--glass-fg, var(--tk-hdr-fog));
	border: 1px solid var(--glass-border, rgba(201, 184, 154, 0.45));
	-webkit-backdrop-filter: blur(var(--glass-blur, 8px));
	backdrop-filter: blur(var(--glass-blur, 8px));
	cursor: pointer;
	position: relative;
	overflow: hidden;
	will-change: transform;
	/* Same glass language as Our Services / Get a Consultation */
	transition:
		transform var(--glass-duration, var(--tk-hdr-duration)) var(--glass-ease, var(--tk-hdr-ease)),
		background-color var(--tk-hdr-invert-duration) ease,
		color var(--tk-hdr-invert-duration) ease,
		border-color var(--tk-hdr-invert-duration) ease,
		opacity var(--tk-hdr-invert-duration) ease;
}

.tk-hdr__icon-btn:hover {
	transform: translateY(-1px);
	background: var(--glass-bg-hover, rgba(201, 184, 154, 0.22));
}

.tk-hdr__icon-btn:active {
	transform: translateY(0) scale(0.98);
	background: var(--glass-bg-active, rgba(201, 184, 154, 0.28));
}

.tk-hdr__icon-btn--on-light {
	background: var(--glass-bg, rgba(255, 255, 255, 0.12));
	color: var(--glass-fg, var(--tk-hdr-fog));
	border: 1px solid var(--glass-border, rgba(201, 184, 154, 0.45));
}

.tk-hdr__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	line-height: 0;
	/* Icon motion matches .tk-hdr__cta-icon (does not change idle size) */
	transition: transform var(--tk-hdr-duration) var(--tk-hdr-ease);
}

.tk-hdr__icon-btn:hover .tk-hdr__icon {
	transform: translate(2px, -2px);
}

.tk-hdr__icon svg {
	display: block;
	width: 16px;
	height: 16px;
}

.tk-hdr__icon--close {
	display: none;
}

.tk-hdr.is-open .tk-hdr__icon--menu {
	display: none;
}

.tk-hdr.is-open .tk-hdr__icon--close,
.tk-hdr__icon--close.is-visible {
	display: inline-flex;
}

/* —— Brand / logo — Marby invert-text (color 0.25s) —— */
.tk-hdr__brand {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	min-width: 0;
	text-decoration: none;
	color: var(--tk-hdr-invert);
	transition: color var(--tk-hdr-invert-duration) ease, opacity 0.25s ease;
}

.tk-hdr__brand:hover {
	opacity: 0.72;
}

.tk-hdr__logo-img {
	display: block;
	height: 40px;
	width: auto;
	max-width: 140px;
	object-fit: contain;
	transition: opacity 0.35s var(--tk-hdr-ease), filter var(--tk-hdr-invert-duration) var(--tk-hdr-ease);
}

/* Light TREEPLAST logo asset — white on dark, black on light sections */
.tk-hdr.is-invert-light .tk-hdr__logo-img {
	filter: none;
}

.tk-hdr.is-invert-dark .tk-hdr__logo-img {
	filter: brightness(0);
}

/* Placeholder brand text removed — TREEPLAST logo only */
.tk-hdr__brand-text {
	display: none !important;
}

.tk-hdr__brand.has-no-logo .tk-hdr__logo-img {
	display: block;
}

.tk-hdr__brand.has-no-logo .tk-hdr__brand-text {
	display: none !important;
}

/* —— CTA —— */
.tk-hdr__cta {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 20px;
	height: var(--tk-hdr-btn-h);
	padding: 4px 8px;
	border-radius: var(--tk-hdr-btn-radius);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	will-change: transform;
	transition:
		transform var(--tk-hdr-duration) var(--tk-hdr-ease),
		background-color var(--tk-hdr-invert-duration) ease,
		color var(--tk-hdr-invert-duration) ease,
		border-color var(--tk-hdr-invert-duration) ease,
		opacity var(--tk-hdr-invert-duration) ease;
}

.tk-hdr__cta--primary {
	/* Glass master = Our Services (.tk-hero__cta--ghost) */
	background: var(--glass-bg, rgba(255, 255, 255, 0.12));
	color: var(--glass-fg, var(--tk-hdr-fog));
	border: 1px solid var(--glass-border, rgba(201, 184, 154, 0.45));
	-webkit-backdrop-filter: blur(var(--glass-blur, 8px));
	backdrop-filter: blur(var(--glass-blur, 8px));
}

.tk-hdr__cta--secondary {
	background: var(--tk-hdr-mist);
	color: var(--tk-hdr-ink);
}

.tk-hdr__cta--lg {
	height: 32px;
	padding: 6px 10px;
}

.tk-hdr__cta:hover {
	transform: translateY(-1px);
}

.tk-hdr__cta--primary:hover {
	background: var(--glass-bg-hover, rgba(201, 184, 154, 0.22));
}

.tk-hdr__cta--secondary:hover {
	background: rgb(200, 200, 208);
}

.tk-hdr__cta:active {
	transform: translateY(0) scale(0.98);
}

.tk-hdr__cta-label {
	font-family: var(--tk-hdr-font);
	font-size: 12px;
	font-weight: 400;
	line-height: 100%;
	text-transform: uppercase;
	letter-spacing: 0;
}

.tk-hdr__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex: none;
	transition: transform var(--tk-hdr-duration) var(--tk-hdr-ease);
}

.tk-hdr__cta-icon svg {
	display: block;
	width: 16px;
	height: 16px;
}

.tk-hdr__cta:hover .tk-hdr__cta-icon {
	transform: translate(2px, -2px);
}

/* —— Overlay menu (Marby live springs — RAF-measured 2026-08) ——
 * Panel: opacity 0→1, scale .98→1, spring bounce .3 / duration .5, origin center
 * Items: opacity 0→1, y 20→0, spring bounce .25 / duration .55
 * Delays: .15 / .15 / .25 / .35 / .45 (first two share)
 * Backdrop / shell: duration 0 (instant show/hide with overlay mount)
 * Exit: reverse panel + items; shell stays mounted until springs finish
 */
/* Hide top bar while menu is open; restore during close (overlay stays above) */
.tk-hdr.is-open .tk-hdr__trigger {
	opacity: 0 !important;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(0);
}

.tk-hdr__overlay {
	position: fixed;
	inset: 0;
	z-index: calc(var(--tk-hdr-z) + 3);
	display: block;
	/* Shell stays mounted — panel/items carry open/close motion */
	opacity: 1;
	visibility: hidden;
	pointer-events: none;
	transition: none;
}

/*
 * While open OR closing: keep overlay in document flow / visible.
 * Override UA [hidden] { display:none } so exit springs can paint.
 */
.tk-hdr.is-overlay-on .tk-hdr__overlay,
.tk-hdr.is-overlay-on .tk-hdr__overlay[hidden],
.tk-hdr.is-closing .tk-hdr__overlay,
.tk-hdr.is-closing .tk-hdr__overlay[hidden] {
	display: block !important;
	visibility: visible;
	opacity: 1;
	pointer-events: none;
}

/* Interaction only while fully open — disabled for the whole closing spring */
.tk-hdr.is-open:not(.is-closing) .tk-hdr__overlay {
	pointer-events: auto;
}

.tk-hdr__overlay-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	background: var(--glass-bg, rgba(255, 255, 255, 0.12));
	-webkit-backdrop-filter: blur(var(--glass-blur, 8px));
	backdrop-filter: blur(var(--glass-blur, 8px));
	opacity: 0;
	visibility: hidden;
	/* Marby FeinXEBoh: duration:0 — snap with mount/unmount, not mid-close */
	transition: none;
	pointer-events: none;
}

.tk-hdr.is-overlay-on .tk-hdr__overlay-bg,
.tk-hdr.is-closing .tk-hdr__overlay-bg {
	opacity: 1;
	visibility: visible;
}

.tk-hdr__overlay-panel {
	position: fixed;
	top: 0;
	left: 50%;
	z-index: 1;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	width: 1160px;
	min-height: 100%;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 0;
	overflow: clip;
	/* Marby panel spring: bounce .3 / duration .5 · scale .98 → 1 */
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) scale(0.98);
	transform-origin: center center;
	will-change: transform, opacity;
	pointer-events: none;
	transition:
		opacity var(--tk-hdr-overlay-duration) var(--tk-hdr-overlay-spring),
		transform var(--tk-hdr-overlay-duration) var(--tk-hdr-overlay-spring),
		visibility 0s linear var(--tk-hdr-overlay-duration);
}

/* Visible for open AND closing so exit opacity/transform can run */
.tk-hdr.is-open .tk-hdr__overlay-panel,
.tk-hdr.is-closing .tk-hdr__overlay-panel,
.tk-hdr.is-overlay-on .tk-hdr__overlay-panel {
	visibility: visible;
}

.tk-hdr.is-open:not(.is-closing) .tk-hdr__overlay-panel {
	opacity: 1;
	transform: translateX(-50%) scale(1);
	pointer-events: auto;
	transition:
		opacity var(--tk-hdr-overlay-duration) var(--tk-hdr-overlay-spring),
		transform var(--tk-hdr-overlay-duration) var(--tk-hdr-overlay-spring),
		visibility 0s linear 0s;
}

/* Closing: same easing/movement, shorter duration only */
.tk-hdr.is-closing .tk-hdr__overlay-panel,
.tk-hdr.is-overlay-on:not(.is-open) .tk-hdr__overlay-panel {
	opacity: 0;
	transform: translateX(-50%) scale(0.98);
	pointer-events: none;
	transition:
		opacity var(--tk-hdr-overlay-close-duration) var(--tk-hdr-overlay-spring),
		transform var(--tk-hdr-overlay-close-duration) var(--tk-hdr-overlay-spring),
		visibility 0s linear var(--tk-hdr-overlay-close-duration);
}

.tk-hdr__overlay-top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	flex-flow: row;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 20px;
	width: 100%;
	padding: 20px;
	pointer-events: none;
}

.tk-hdr__overlay-top-start,
.tk-hdr__overlay-top-end {
	flex: 1 0 0;
	display: flex;
	align-items: flex-start;
	min-width: 0;
	pointer-events: auto;
}

.tk-hdr__overlay-top-start {
	flex-flow: row;
	justify-content: flex-start;
	gap: 10px;
}

.tk-hdr__overlay-top-end {
	flex-flow: column;
	align-items: flex-end;
	justify-content: flex-start;
	gap: 10px;
}

.tk-hdr__overlay-brand {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	text-decoration: none;
	color: var(--tk-hdr-ink);
	transition: opacity 0.35s var(--tk-hdr-ease);
}

.tk-hdr__overlay-brand:hover {
	opacity: 0.78;
}

.tk-hdr__overlay-logo {
	display: block;
	height: 44px;
	width: auto;
	max-width: 120px;
	object-fit: contain;
	/* Overlay panel is light — show TREEPLAST mark in dark ink */
	filter: brightness(0);
}

.tk-hdr__overlay-brand-text {
	display: none !important;
}

.tk-hdr__overlay-nav {
	position: relative;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	width: auto;
	max-width: 100%;
}

.tk-hdr__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	width: auto;
}

.tk-hdr__menu-item {
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 42px;
	height: 42px;
	margin: 0;
	padding: 0;
	overflow: visible;
	/* Marby link containers: opacity 0 + translateY(20px) → settled */
	opacity: 0.001;
	transform: translate3d(0, 20px, 0);
	will-change: transform, opacity;
	transition:
		opacity var(--tk-hdr-overlay-item-duration) var(--tk-hdr-overlay-item-spring),
		transform var(--tk-hdr-overlay-item-duration) var(--tk-hdr-overlay-item-spring);
	/* Exit: delay 0 — springs reverse with panel */
	transition-delay: 0s;
}

.tk-hdr.is-open:not(.is-closing) .tk-hdr__menu-item {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	/* Enter delays from JS: .15 / .15 / .25 / .35 / .45 */
	transition-delay: var(--tk-hdr-enter-delay, 0.15s);
}

/* Closing: reverse to y:20 / opacity 0 — same spring, ~25% faster */
.tk-hdr.is-closing .tk-hdr__menu-item {
	opacity: 0.001;
	transform: translate3d(0, 20px, 0);
	transition-delay: 0s;
	transition:
		opacity var(--tk-hdr-overlay-item-close-duration) var(--tk-hdr-overlay-item-spring),
		transform var(--tk-hdr-overlay-item-close-duration) var(--tk-hdr-overlay-item-spring);
}

.tk-hdr__menu-item.has-children.is-open {
	height: auto;
}

/* Default State — original centered menu styles (unchanged) */
.tk-hdr__menu-link,
.tk-hdr__submenu-link {
	--tk-hdr-border-b: 0px;
	--tk-hdr-border-c: rgba(0, 0, 0, 0);

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: auto;
	height: 42px;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: var(--font-heading);
	font-size: 48px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--tk-hdr-ink);
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
	transition:
		color var(--tk-hdr-menu-duration) var(--tk-hdr-menu-spring),
		padding var(--tk-hdr-menu-duration) var(--tk-hdr-menu-spring),
		gap var(--tk-hdr-menu-duration) var(--tk-hdr-menu-spring),
		--tk-hdr-border-b var(--tk-hdr-menu-duration) var(--tk-hdr-menu-spring),
		--tk-hdr-border-c var(--tk-hdr-menu-duration) var(--tk-hdr-menu-spring);
}

/* Marby Menu item hover — spring / color / pad / underline */
.tk-hdr__menu-link::after,
.tk-hdr__submenu-link::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border-style: solid;
	border-color: var(--tk-hdr-border-c);
	border-width: 0 0 var(--tk-hdr-border-b) 0;
	border-radius: inherit;
	pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
	.tk-hdr__menu-link:hover,
	.tk-hdr__menu-link:focus-visible,
	.tk-hdr__submenu-link:hover,
	.tk-hdr__submenu-link:focus-visible {
		/* Glass accent follows invert state tokens */
		color: var(--glass-accent, var(--tk-hdr-mist));
		gap: 0;
		padding-inline-start: 12px;
		--tk-hdr-border-b: 1px;
		--tk-hdr-border-c: var(--glass-border, var(--tk-hdr-mist));
	}
}

.tk-hdr__menu-toggle {
	justify-content: center;
}

.tk-hdr__chevron {
	flex: none;
	width: 12px;
	height: 12px;
	transition: transform var(--tk-hdr-duration) var(--tk-hdr-ease);
}

.tk-hdr__menu-item.is-open > .tk-hdr__menu-toggle .tk-hdr__chevron {
	transform: rotate(180deg);
}

.tk-hdr__submenu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition:
		max-height var(--tk-hdr-duration) var(--tk-hdr-ease),
		opacity var(--tk-hdr-duration) var(--tk-hdr-ease);
}

.tk-hdr__menu-item.is-open > .tk-hdr__submenu {
	max-height: 480px;
	opacity: 1;
	margin-top: 8px;
}

.tk-hdr__submenu-link {
	font-size: 22px;
	height: auto;
	padding: 4px 0;
	color: var(--tk-hdr-mute);
}

@media (hover: hover) and (pointer: fine) {
	.tk-hdr__submenu-link:hover,
	.tk-hdr__submenu-link:focus-visible {
		padding: 4px 0;
		padding-inline-start: 12px;
	}
}

.tk-hdr__overlay-social {
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 20px 0 0;
	overflow: clip;
	/* Marby social links: initial { opacity:0, y:10 }, delay:.55, duration:.55, bounce:.25 */
	opacity: 0;
	transform: translateY(10px);
	will-change: transform, opacity;
	transition:
		opacity var(--tk-hdr-overlay-item-duration) var(--tk-hdr-overlay-item-spring),
		transform var(--tk-hdr-overlay-item-duration) var(--tk-hdr-overlay-item-spring);
	transition-delay: 0s;
}

.tk-hdr.is-open:not(.is-closing) .tk-hdr__overlay-social {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.55s;
}

.tk-hdr.is-closing .tk-hdr__overlay-social {
	opacity: 0;
	transform: translateY(10px);
	transition-delay: 0s;
	transition:
		opacity var(--tk-hdr-overlay-item-close-duration) var(--tk-hdr-overlay-item-spring),
		transform var(--tk-hdr-overlay-item-close-duration) var(--tk-hdr-overlay-item-spring);
}

.tk-hdr__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.tk-hdr__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--tk-hdr-font);
	font-size: 12px;
	font-weight: 400;
	line-height: 100%;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--tk-hdr-ink);
	text-decoration: none;
	/* Marby Social link (OQrieumzI) — spring { bounce:0.2, duration:0.4 } */
	transition:
		color var(--tk-hdr-menu-duration) var(--tk-hdr-menu-spring),
		gap var(--tk-hdr-menu-duration) var(--tk-hdr-menu-spring);
}

@media (hover: hover) and (pointer: fine) {
	.tk-hdr__social a:hover,
	.tk-hdr__social a:focus-visible {
		color: var(--tk-hdr-mute-soft);
		gap: 0;
	}
}

.tk-hdr__overlay-mobile-cta {
	display: none;
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity var(--tk-hdr-overlay-item-duration) var(--tk-hdr-overlay-item-spring),
		transform var(--tk-hdr-overlay-item-duration) var(--tk-hdr-overlay-item-spring);
	transition-delay: 0s;
}

.tk-hdr.is-open:not(.is-closing) .tk-hdr__overlay-mobile-cta {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.55s;
}

.tk-hdr.is-closing .tk-hdr__overlay-mobile-cta {
	opacity: 0;
	transform: translateY(10px);
	transition-delay: 0s;
	transition:
		opacity var(--tk-hdr-overlay-item-close-duration) var(--tk-hdr-overlay-item-spring),
		transform var(--tk-hdr-overlay-item-close-duration) var(--tk-hdr-overlay-item-spring);
}

/* Overlay nav wrapper no longer animates as a block — items stagger individually */
.tk-hdr__overlay-nav[data-tk-hdr-anim] {
	opacity: 1;
	transform: none;
}

body.tk-hdr-lock {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.tk-hdr__overlay-panel,
	.tk-hdr__menu-item,
	.tk-hdr__overlay-social,
	.tk-hdr__overlay-mobile-cta {
		transition: none !important;
		transition-delay: 0s !important;
	}

	.tk-hdr.is-open .tk-hdr__overlay-panel {
		opacity: 1;
		transform: translateX(-50%) scale(1);
	}

	.tk-hdr.is-open .tk-hdr__menu-item,
	.tk-hdr.is-open .tk-hdr__overlay-social,
	.tk-hdr.is-open .tk-hdr__overlay-mobile-cta {
		opacity: 1;
		transform: none;
	}
}

/* Hide legacy header rules if any leftover markup appears */
header.header-mobile,
header.header-website {
	display: none !important;
}

/* —— Tablet —— */
@media (max-width: 1199.98px) {
	.tk-hdr__nav {
		max-width: 810px;
	}

	.tk-hdr__overlay-panel {
		width: 100%;
	}

	.tk-hdr__overlay-top {
		gap: unset;
		justify-content: space-between;
	}

	.tk-hdr__overlay-top-end {
		flex: 0 0 auto;
		align-items: center;
		width: min-content;
	}

	.tk-hdr__menu-link,
	.tk-hdr__submenu-link {
		font-size: 38px;
	}
}

/* —— Phone —— */
@media (max-width: 809.98px) {
	:root {
		--tk-hdr-pad: 16px;
		--tk-hdr-radius: 8px;
	}

	.tk-hdr__nav {
		max-width: 100%;
		padding: 16px var(--tk-hdr-pad);
	}

	.tk-hdr__container {
		gap: unset;
		justify-content: space-between;
	}

	.tk-hdr__side--start {
		order: 1;
		flex: 0 0 auto;
		justify-content: flex-end;
	}

	.tk-hdr__brand {
		order: 0;
		flex: 1 1 auto;
		justify-content: flex-start;
	}

	.tk-hdr__side--end {
		display: none;
	}

	.tk-hdr__logo-img {
		height: 34px;
		max-width: 120px;
	}

	.tk-hdr__overlay-logo {
		height: 36px;
		max-width: 100px;
	}

	.tk-hdr__overlay-panel {
		width: 100%;
		padding: 0 0 0 20px;
	}

	.tk-hdr__overlay-top {
		gap: unset;
		justify-content: space-between;
		padding: 16px;
	}

	.tk-hdr__overlay-top-start {
		flex: 1 1 auto;
		flex-direction: row-reverse;
		justify-content: space-between;
		width: 100%;
	}

	.tk-hdr__overlay-top-end,
	.tk-hdr__overlay-cta--top {
		display: none;
	}

	.tk-hdr__overlay-mobile-cta {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tk-hdr__menu-link,
	.tk-hdr__submenu-link {
		font-size: 30px;
	}

	.tk-hdr__cta-label {
		font-size: 10px;
	}

	.tk-hdr__cta {
		gap: 12px;
	}
}

/* RTL */
html[dir="rtl"] .tk-hdr__side--start {
	justify-content: flex-start;
}

html[dir="rtl"] .tk-hdr__side--end {
	justify-content: flex-end;
}

html[dir="rtl"] .tk-hdr__overlay-top-start {
	flex-direction: row-reverse;
}

html[dir="rtl"] .tk-hdr__overlay-top-end {
	align-items: flex-start;
}

html[dir="rtl"] .tk-hdr__submenu {
	padding-inline-start: 0;
	padding-inline-end: 12px;
}

@media (max-width: 809.98px) {
	html[dir="rtl"] .tk-hdr__side--start {
		justify-content: flex-start;
	}

	html[dir="rtl"] .tk-hdr__brand {
		justify-content: flex-end;
	}

	html[dir="rtl"] .tk-hdr__overlay-panel {
		padding: 0 20px 0 0;
	}

	html[dir="rtl"] .tk-hdr__overlay-top-start {
		flex-direction: row;
	}
}