/*
 * Nahang Shell 0.4.4 compatibility layer
 * Navigation geometry, responsive type scale and brand-system refinement.
 */

:root {
	--font-xs: calc(var(--base-font-size) * .75);
	--font-sm: calc(var(--base-font-size) * .875);
	--font-md: var(--base-font-size);
	--font-lg: calc(var(--base-font-size) * 1.125);
	--font-xl: calc(var(--base-font-size) * 1.375);
	--font-2xl: calc(var(--base-font-size) * 1.75);
	--header-gutter: clamp(18px, 3.5vw, 54px);
	--header-control-radius: 14px;
	--header-border: rgba(130, 151, 181, .16);
}

html {
	scroll-padding-top: calc(var(--header) + 18px);
}

body,
button,
input,
select,
textarea {
	font-family: var(--font-ui) !important;
}

body {
	font-size: var(--base-font-size);
	font-weight: var(--body-font-weight);
	line-height: var(--base-line-height);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-ui) !important;
	font-weight: var(--heading-font-weight);
	line-height: var(--heading-line-height);
	letter-spacing: clamp(-.025em, var(--heading-letter-spacing), .02em);
	text-wrap: balance;
}

p,
li,
figcaption {
	text-wrap: pretty;
}

.chapter-label,
.eyebrow {
	font-size: var(--font-xs);
	font-weight: 720;
	line-height: 1.6;
	letter-spacing: .08em;
}

.chapter-heading {
	max-width: 780px;
	margin-bottom: clamp(36px, 4.5vw, 58px);
}

.chapter-heading h2,
.chapter-copy h2,
.digital__head h2,
.footer-cta h2 {
	max-width: 940px;
	font-size: clamp(
		calc(var(--base-font-size) * 2.35 * var(--type-scale-factor)),
		4.35vw,
		var(--section-heading-max)
	);
	line-height: clamp(1.08, var(--heading-line-height), 1.22);
}

.chapter-heading > p,
.chapter-copy > p,
.digital__head > p,
.entry-content {
	font-size: clamp(var(--font-md), 1.25vw, var(--font-lg));
	line-height: var(--base-line-height);
}

.site-header {
	height: var(--header);
	border-bottom: 1px solid var(--header-border);
	background: rgba(248, 250, 252, .9);
	box-shadow: 0 8px 32px rgba(7, 18, 34, .055);
	backdrop-filter: blur(18px) saturate(130%);
	-webkit-backdrop-filter: blur(18px) saturate(130%);
	transition: height .28s var(--ease), background-color .28s ease, border-color .28s ease, box-shadow .28s ease;
}

body:not(.nahang-sticky-header) .site-header {
	position: absolute;
}

.site-header.is-scrolled {
	height: max(64px, calc(var(--header) - 8px));
	background: rgba(248, 250, 252, .955);
	box-shadow: 0 12px 34px rgba(7, 18, 34, .09);
}

body[data-theme="dark"] .site-header {
	border-bottom-color: rgba(131, 153, 184, .14);
	background: rgba(5, 9, 15, .9);
	box-shadow: 0 10px 38px rgba(0, 0, 0, .24);
}

body[data-theme="dark"] .site-header.is-scrolled {
	background: rgba(5, 9, 15, .965);
	box-shadow: 0 12px 42px rgba(0, 0, 0, .36);
}

.site-header__inner {
	display: grid;
	grid-template-columns: minmax(180px, auto) minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(18px, 2.1vw, 32px);
	height: 100%;
	min-height: 0;
}

.brand {
	min-width: 0;
	gap: 10px;
}

.brand__symbol {
	position: relative;
	display: inline-block;
	width: 54px;
	height: 38px;
	flex: 0 0 54px;
	filter: drop-shadow(0 9px 18px rgba(18, 104, 255, .16));
}

.brand__mark {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 0;
	object-fit: contain;
	box-shadow: none;
}

.brand__mark--dark-surface {
	display: none;
}

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

body[data-theme="dark"] .brand__mark--dark-surface,
.surface-navy .brand__mark--dark-surface,
.surface-black .brand__mark--dark-surface,
.brand--footer .brand__mark--dark-surface {
	display: block;
}

.surface-navy .brand__mark--light-surface,
.surface-black .brand__mark--light-surface,
.brand--footer .brand__mark--light-surface {
	display: none;
}

.brand-story__mark .brand__symbol {
	width: clamp(156px, 15vw, 210px);
	height: clamp(110px, 10.6vw, 148px);
	flex-basis: auto;
	filter: drop-shadow(0 24px 42px rgba(0, 0, 0, .28));
}

.brand-story__mark .brand__mark {
	width: 100%;
	height: 100%;
	filter: none;
}

.brand__type strong {
	font-size: var(--font-md);
	font-weight: 780;
	line-height: 1.3;
	letter-spacing: -.015em;
}

.brand__type small {
	margin-top: 3px;
	font-size: calc(var(--font-xs) * .73);
	font-weight: 650;
	letter-spacing: .1em;
}

.site-nav {
	justify-self: center;
	min-width: 0;
}

.site-nav__list {
	direction: rtl;
	justify-content: center;
	gap: clamp(16px, 1.55vw, 25px);
	white-space: nowrap;
}

.site-nav__list > li {
	position: relative;
}

.site-nav__list > li > a {
	position: relative;
	padding: 12px 0;
	font-size: var(--header-nav-size);
	font-weight: 650;
	line-height: 1.5;
	letter-spacing: 0;
}

.site-nav__list > li > a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 5px;
	width: 100%;
	height: 2px;
	border-radius: 99px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .24s var(--ease);
}

.site-nav__list > li > a:hover::after,
.site-nav__list > .current-menu-item > a::after,
.site-nav__list > .current-menu-ancestor > a::after {
	transform: scaleX(1);
}

.site-header__actions {
	direction: rtl;
	justify-self: end;
	gap: 8px;
}

.site-header .icon-button,
.site-header .theme-switch,
.site-header .menu-toggle {
	width: var(--header-icon-size);
	height: var(--header-icon-size);
	flex: 0 0 var(--header-icon-size);
	border: 1px solid rgba(113, 135, 166, .24);
	border-radius: var(--header-control-radius);
	background: rgba(255, 255, 255, .68);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76);
}

.site-header .icon-button svg,
.site-header .theme-switch svg,
.site-header .menu-toggle svg {
	width: 19px;
	height: 19px;
	stroke-width: 1.75;
}

.theme-switch svg:nth-of-type(2) {
	display: none;
}

body[data-theme="dark"] .theme-switch svg:nth-of-type(1) {
	display: none;
}

body[data-theme="dark"] .theme-switch svg:nth-of-type(2) {
	display: block;
}

body[data-theme="dark"] .site-header .icon-button,
body[data-theme="dark"] .site-header .theme-switch,
body[data-theme="dark"] .site-header .menu-toggle {
	border-color: rgba(132, 156, 190, .2);
	background: rgba(14, 23, 36, .84);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.site-header .icon-button:hover,
.site-header .theme-switch:hover,
.site-header .menu-toggle:hover {
	border-color: color-mix(in srgb, var(--accent), transparent 38%);
	background: color-mix(in srgb, var(--accent), transparent 91%);
	transform: translateY(-1px);
}

.header-cta {
	min-height: var(--header-icon-size);
	padding-inline: 18px;
	border-radius: var(--header-control-radius);
	font-size: var(--font-sm);
	font-weight: 720;
	box-shadow: 0 10px 26px color-mix(in srgb, var(--accent), transparent 76%);
}

.cart-link span {
	top: -5px;
	right: -5px;
	left: auto;
	display: grid;
	place-items: center;
	min-width: 17px;
	height: 17px;
	padding-inline: 4px;
	border: 2px solid #07101a;
	border-radius: 999px;
	font-size: 9px;
	line-height: 1;
}

.site-header.is-scrolled ~ .header-search {
	top: max(64px, calc(var(--header) - 8px));
}

.admin-bar .site-header.is-scrolled ~ .header-search {
	top: calc(max(64px, calc(var(--header) - 8px)) + 32px);
}

.hero {
	padding-top: calc(var(--header) + clamp(52px, 6vw, 88px));
	padding-bottom: clamp(72px, 8vw, 112px);
}

.hero h1 {
	max-width: 720px;
	margin: clamp(18px, 2.2vw, 28px) 0;
	font-size: clamp(
		calc(var(--base-font-size) * 2.7 * var(--type-scale-factor)),
		5.45vw,
		var(--hero-heading-max)
	);
	line-height: clamp(1.06, var(--heading-line-height), 1.14);
}

.hero__lead {
	max-width: 650px;
	margin-bottom: 30px;
	font-size: clamp(var(--font-md), 1.35vw, var(--font-lg));
	line-height: var(--base-line-height);
}

.button {
	min-height: 50px;
	padding-inline: 21px;
	border-radius: 15px;
	font-size: var(--font-sm);
}

.button--small {
	min-height: 42px;
	padding-inline: 17px;
}

.trust-cues {
	font-size: var(--font-xs);
}

.mobile-menu__list {
	direction: rtl;
}

.deep-dock {
	font-family: var(--font-ui) !important;
}

@media (max-width: 1180px) {
	.site-header__inner {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.site-header__actions {
		gap: 7px;
	}

	.menu-toggle {
		display: grid;
	}

	.mobile-menu:not([hidden]) {
		position: fixed !important;
		inset: 0 !important;
		width: 100% !important;
		max-width: none !important;
		height: 100dvh !important;
		margin: 0 !important;
		padding-top: max(14px, env(safe-area-inset-top));
		background: radial-gradient(circle at 88% 5%, rgba(18, 104, 255, .14), transparent 24%), rgba(247, 249, 252, .99);
	}

	body[data-theme="dark"] .mobile-menu:not([hidden]) {
		background: radial-gradient(circle at 88% 5%, rgba(18, 104, 255, .2), transparent 25%), rgba(4, 8, 14, .995);
	}

	.mobile-menu__top {
		min-height: 58px;
		padding-bottom: 12px;
	}

	.mobile-menu__body {
		padding: clamp(22px, 5vh, 42px) 0 18px;
	}

	.mobile-menu__list > li > a {
		grid-template-columns: 28px minmax(0, 1fr);
		gap: 11px;
		padding: clamp(12px, 1.7vh, 17px) 2px;
		font-size: clamp(19px, 4.3vw, 26px);
		font-weight: 720;
		line-height: 1.4;
		letter-spacing: -.015em;
	}

	.mobile-menu__list > li > a::after {
		display: none;
	}

	.mobile-menu__list > li > a::before {
		font-size: 9px;
	}

	.mobile-menu__footer {
		padding-top: 13px;
	}
}

@media (max-width: 780px) {
	:root {
		--header-mobile: clamp(64px, var(--header), 70px);
		--header-control-radius: 13px;
	}

	html {
		scroll-padding-top: calc(var(--header-mobile) + 12px);
	}

	.site-header,
	.site-header.is-scrolled {
		height: var(--header-mobile);
	}

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

	.site-header .brand__symbol {
		width: 46px;
		height: 33px;
		flex-basis: 46px;
	}

	.site-header .brand__type strong {
		font-size: 14px;
	}

	.site-header .brand__type small {
		display: none;
	}

	.site-header .icon-button,
	.site-header .theme-switch,
	.site-header .menu-toggle {
		width: min(40px, var(--header-icon-size));
		height: min(40px, var(--header-icon-size));
		flex-basis: min(40px, var(--header-icon-size));
	}

	.site-header .icon-button svg,
	.site-header .theme-switch svg,
	.site-header .menu-toggle svg {
		width: 18px;
		height: 18px;
	}

	.site-header.is-scrolled ~ .header-search,
	.header-search {
		top: var(--header-mobile);
	}

	.admin-bar .site-header.is-scrolled ~ .header-search,
	.admin-bar .header-search {
		top: calc(var(--header-mobile) + 46px);
	}

	.hero {
		padding-top: calc(var(--header-mobile) + 44px);
		padding-bottom: 78px;
	}

	.hero__grid {
		gap: 34px;
	}

	.hero h1 {
		margin-block: 18px;
		font-size: clamp(
			calc(var(--base-font-size) * 2.2 * var(--type-scale-factor)),
			10vw,
			48px
		);
		line-height: 1.15;
	}

	.hero__lead {
		font-size: var(--font-md);
		line-height: max(1.85, var(--base-line-height));
	}

	.chapter-heading h2,
	.chapter-copy h2,
	.digital__head h2,
	.footer-cta h2 {
		font-size: clamp(
			calc(var(--base-font-size) * 1.95 * var(--type-scale-factor)),
			8.6vw,
			44px
		);
		line-height: 1.18;
	}

	.chapter-heading > p,
	.chapter-copy > p,
	.digital__head > p {
		font-size: var(--font-md);
		line-height: max(1.85, var(--base-line-height));
	}

	.button {
		min-height: 50px;
		font-size: var(--font-md);
	}

	.trust-cues {
		gap: 10px 14px;
		font-size: var(--font-sm);
	}

	.deep-dock {
		right: 12px;
		bottom: calc(10px + env(safe-area-inset-bottom));
		left: 12px;
		height: 62px;
		padding: 6px 8px;
		border-radius: 18px;
		background: rgba(247, 250, 253, .94);
		box-shadow: 0 14px 42px rgba(5, 18, 34, .24);
	}

	body[data-theme="dark"] .deep-dock {
		background: rgba(8, 14, 22, .95);
	}

	.deep-dock a {
		gap: 2px;
		font-size: 9px;
		font-weight: 650;
	}

	.deep-dock svg {
		width: 19px;
		height: 19px;
	}

	.deep-dock a.is-active {
		transform: translateY(-1px);
	}

	.deep-dock a.is-active::before {
		top: -2px;
		width: 36px;
		height: 30px;
		border-radius: 12px;
	}

	.deep-dock__primary {
		transform: translateY(-7px) !important;
	}

	.deep-dock__primary svg {
		width: 20px;
		height: 20px;
		padding: 6px;
		border-radius: 12px;
		box-shadow: 0 10px 24px color-mix(in srgb, var(--accent), transparent 62%);
	}
}

@media (max-width: 430px) {
	.site-header .brand__type {
		display: none;
	}

	.site-header__actions {
		gap: 6px;
	}

	.mobile-menu:not([hidden]) {
		padding-right: 16px;
		padding-left: 16px;
	}

	.mobile-menu__list > li > a {
		font-size: clamp(18px, 6vw, 24px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header * {
		transition-duration: .01ms !important;
	}
}