/* Site chrome: header, panels, mobile menu, footer (SITEMAP 2-3, COMPONENTS 5). Tokens only; logical properties for RTL. */
:root {
	--hdr-h: 76px;
	--hit: 44px;
}

/* logo version follows the theme: reversed on ink, colour on light (BRAND 12b surface table) */
.logo {
	display: block;
	width: clamp(150px, 13vw, 196px);
	flex: none;
}

.logo img {
	width: 100%;
	height: auto;
}

.logo-light {
	display: none;
}

[data-theme="light"] .logo-dark {
	display: none;
}

[data-theme="light"] .logo-light {
	display: block;
}

/* light theme with the bare header over a dark hero: reversed logo (tokens come from tokens.css) */
[data-theme="light"] .hdr.on-dark .logo-dark {
	display: block;
}

[data-theme="light"] .hdr.on-dark .logo-light {
	display: none;
}

/* ---------- header ---------- */
.hdr {
	position: fixed;
	inset-inline: 0;
	inset-block-start: 0;
	z-index: 60;
	height: var(--hdr-h);
	display: flex;
	align-items: center;
	transition: background var(--d-base) var(--ease), transform var(--d-base) var(--ease);
}

.hdr.stuck {
	background: color-mix(in srgb, var(--bg) 78%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.hdr.stuck::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: var(--hairline);
	background: var(--ln);
}

.hdr-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-24);
	width: min(100% - 2 * var(--margin), 1600px);
}

.nav ul,
.nav-i .panel {
	list-style: none;
}

.nav > ul {
	display: flex;
	gap: clamp(18px, 2.2vw, 40px);
	align-items: center;
}

.nav-i {
	position: relative;
}

.nl {
	position: relative;
	display: inline-flex;
	padding-block: var(--sp-8);
	font-family: var(--font-mono);
	font-size: var(--fs-m);
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--fg);
	opacity: 0.82;
	transition: opacity var(--d-fast);
}

:lang(ar) .nl {
	font-family: var(--font-ar);
	letter-spacing: 0;
	text-transform: none;
	font-size: var(--fs-s-ar);
}

.nl::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 5px;
	border-inline: 1px solid var(--hi);
	background: linear-gradient(var(--hi), var(--hi)) center / 100% 1px no-repeat;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--d-base) var(--ease);
}

html[dir="rtl"] .nl::after {
	transform-origin: right;
}

.nl:hover,
.nl.on,
.nl[aria-current],
.nav-i:focus-within > .nl {
	opacity: 1;
}

.nl:hover::after,
.nl.on::after,
.nl[aria-current]::after,
.nav-i:focus-within > .nl::after {
	transform: scaleX(1);
}

/* panel under a nav item: opens on hover or focus-within (mouse and keyboard), touch uses the burger menu */
.nav-i .panel {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: calc(-1 * var(--sp-16));
	min-inline-size: 220px;
	padding: var(--sp-8);
	background: var(--surface-solid);
	border: var(--hairline) solid var(--ln-s);
	opacity: 0;
	visibility: hidden;
	transform: translateY(var(--sp-8));
	transition: opacity var(--d-fast), transform var(--d-fast) var(--ease), visibility 0s var(--d-fast);
}

.nav-i:hover .panel,
.nav-i:focus-within .panel {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.panel a {
	display: block;
	padding: var(--sp-12) var(--sp-16);
	font-size: var(--fs-s);
	color: var(--fg2);
}

.panel a:hover,
.panel a[aria-current] {
	color: var(--fg);
	background: var(--grid-line);
}

/* group label inside a link list (Services: Build, Create, Grow, Protect and advise) */
.grp {
	flex-basis: 100%;
	padding: var(--sp-12) var(--sp-16) var(--sp-4);
	font: 500 11px var(--font-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hi);
}

.ftr-col .grp {
	padding: var(--sp-12) 0 var(--sp-4);
}

.hdr-end {
	display: flex;
	align-items: center;
	gap: var(--sp-8);
}

.ib,
.lang-menu summary {
	display: inline-grid;
	place-items: center;
	min-inline-size: var(--hit);
	block-size: var(--hit);
	padding: 0;
	background: none;
	border: var(--hairline) solid transparent;
	color: var(--fg);
	cursor: pointer;
	list-style: none;
}

.ib:hover,
.ib[aria-current],
.lang-menu summary:hover,
.lang-menu[open] summary {
	border-color: var(--ln-s);
}

.ib svg {
	inline-size: 22px;
	block-size: 22px;
}

.lang-menu {
	position: relative;
}

.lang-menu summary::-webkit-details-marker {
	display: none;
}

.lang-menu summary {
	padding-inline: var(--sp-8);
}

.lang-menu .langs {
	position: absolute;
	inset-block-start: calc(100% + var(--sp-8));
	inset-inline-end: 0;
	inline-size: max-content;
	max-inline-size: min(360px, 90vw);
	padding: var(--sp-16);
	background: var(--surface-solid);
	border: var(--hairline) solid var(--ln-s);
}

.hdr .btn {
	height: var(--hit);
	padding-inline: 20px 16px;
	font-size: var(--fs-s);
}

.burger {
	display: none;
	position: relative;
	inline-size: var(--hit);
	block-size: var(--hit);
	background: none;
	border: var(--hairline) solid var(--ln-s);
	cursor: pointer;
}

.burger span {
	position: absolute;
	inset-inline: 12px;
	height: 2px;
	background: var(--fg);
	transition: transform var(--d-base) var(--ease);
}

.burger span:nth-child(1) {
	inset-block-start: 16px;
}

.burger span:nth-child(2) {
	inset-block-start: 26px;
}

.menu-open .burger span:nth-child(1) {
	transform: translateY(5px) rotate(45deg);
}

.menu-open .burger span:nth-child(2) {
	transform: translateY(-5px) rotate(-45deg);
}

/* ---------- footer ---------- */
.ftr {
	padding-block: var(--sp-64) var(--sp-32);
	background: var(--bg-alt);
	border-block-start: var(--hairline) solid var(--ln);
}

.ftr-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: var(--sp-32);
	padding-block: var(--sp-48);
}

.ftr-col h2 {
	margin-block-end: var(--sp-16);
	color: var(--hi);
}

.ftr-col ul,
.ftr-social {
	list-style: none;
}

.ftr-col a {
	display: inline-block;
	padding-block: var(--sp-4);
	color: var(--fg2);
	font-size: var(--fs-s);
}

.ftr-col a:hover,
.ftr-col a[aria-current] {
	color: var(--fg);
}

.ftr-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-16);
	padding-block: var(--sp-32);
	border-block-start: var(--hairline) solid var(--ln);
	color: var(--fg2);
	font-size: var(--fs-s);
}

.ftr-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4) var(--sp-16);
}

.ftr-legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-8) var(--sp-24);
	padding-block-start: var(--sp-24);
	border-block-start: var(--hairline) solid var(--ln);
	color: var(--fg2);
	font-size: var(--fs-m);
}

.ftr-legal a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- responsive: under 1000 px the burger replaces the nav (without JS the nav stays) ---------- */
@media (max-width: 999px) {
	.js .nav,
	.js .hdr-cta,
	.js .hdr-end [data-theme-toggle],
	.js .lang-menu {
		display: none;
	}

	.js .burger {
		display: block;
	}

	.nav > ul {
		flex-wrap: wrap;
		gap: var(--sp-8) var(--sp-16);
	}
}

.menu-open {
	overflow: hidden;
}

.rm .hdr,
.rm .nav-i .panel,
.rm .nl::after,
.rm .burger span {
	transition: none;
}

/* header CTA yields to an in-page primary button (chrome.js, [data-yield-cta]) */
.hdr-cta.is-yield {
	opacity: 0;
	visibility: hidden;
}

/* cart count on the header cart button */
.ib-cart {
	position: relative;
}

.ib-n {
	position: absolute;
	inset-block-start: 4px;
	inset-inline-end: 2px;
	display: grid;
	place-items: center;
	min-inline-size: 18px;
	block-size: 18px;
	padding-inline: 4px;
	background: var(--gold-300);
	color: var(--ink-950);
	font-size: 11px;
	line-height: 1;
	border-radius: 9px;
}