/* ============================================================
   Topbar — thin, minimal
   ============================================================ */
.topbar {
	background: var(--brand-navy-deep);
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.82rem;
	padding-block: 10px;
	position: relative;
	z-index: 60;
	border-block-end: 1px solid rgba(255, 255, 255, 0.06);
	transition: max-height 0.35s var(--ease-out-expo), opacity 0.25s ease, padding-block 0.35s var(--ease-out-expo);
	max-height: 80px;
	overflow: hidden;
}
body.is-scrolling-down .topbar {
	max-height: 0;
	opacity: 0;
	padding-block: 0;
	border-block-end-color: transparent;
}
.topbar a { color: inherit; transition: color var(--t-fast); }
.topbar a:hover { color: var(--brand-ice); }
.topbar__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
	flex-wrap: wrap;
}
.topbar__message { margin: 0; letter-spacing: 0.01em; display: flex; align-items: center; gap: 8px; }
.topbar__message::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--brand-mint);
	box-shadow: 0 0 8px var(--brand-mint);
	flex-shrink: 0;
}
.topbar__contact {
	list-style: none;
	padding: 0; margin: 0;
	display: flex;
	gap: var(--space-5);
	flex-wrap: wrap;
}
.topbar__contact a { display: inline-flex; align-items: center; gap: 6px; }

/* ============================================================
   Header shell — hosts the floating pill inside a container
   ============================================================ */
.site-header {
	position: sticky;
	inset-block-start: 12px;
	z-index: 55;
	padding-block: 0;
	pointer-events: none;
	transition: inset-block-start var(--t-base), transform 0.35s var(--ease-out-expo);
	will-change: transform;
}
.is-scrolled .site-header {
	inset-block-start: 0;
}
body.is-scrolling-down .site-header {
	transform: translateY(-140%);
}

.site-header__inner {
	pointer-events: auto;
	max-width: calc(var(--container) - 16px);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: 10px 14px 10px 18px;
	background: rgba(255, 255, 255, 0.78);
	backdrop-filter: blur(22px) saturate(1.5);
	-webkit-backdrop-filter: blur(22px) saturate(1.5);
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: var(--radius-pill);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.9) inset,
		0 18px 40px -16px rgba(14, 79, 110, 0.2);
	transition:
		background var(--t-base),
		border-color var(--t-base),
		box-shadow var(--t-base),
		border-radius var(--t-base),
		max-width var(--t-base),
		padding var(--t-base);
}
/* On scroll: pill expands into a full-width bar flush with the viewport. */
.is-scrolled .site-header__inner {
	max-width: 100%;
	border-radius: 0;
	border-inline: 0;
	border-block-start: 0;
	border-block-end: 1px solid rgba(14, 79, 110, 0.08);
	background: rgba(255, 255, 255, 0.95);
	padding: 10px max(var(--gutter), calc((100% - var(--container)) / 2 + 14px));
	box-shadow: 0 14px 32px -18px rgba(14, 79, 110, 0.35);
}

.site-header__logo { flex-shrink: 0; display: inline-flex; align-items: center; }
.site-header__logo img {
	max-height: 42px;
	width: auto;
	transition: transform var(--t-base);
}
.site-header__logo:hover img { transform: scale(1.04); }
.site-header__logo-text {
	font-weight: 900;
	font-size: 1.3rem;
	background: var(--g-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	letter-spacing: 0.04em;
}

/* ============================================================
   Navigation
   ============================================================ */
.site-nav { flex: 1; }
.site-nav__menu {
	list-style: none;
	padding: 0; margin: 0;
	display: flex;
	gap: 2px;
	justify-content: center;
	flex-wrap: wrap;
}
.site-nav__menu li { position: relative; }
.site-nav__menu a {
	display: inline-flex;
	align-items: center;
	padding: 10px 16px;
	color: var(--ink);
	font-weight: 600;
	font-size: 0.92rem;
	letter-spacing: 0.01em;
	border-radius: var(--radius-pill);
	transition: all var(--t-base);
	position: relative;
}
.site-nav__menu a:hover {
	background: var(--brand-frost);
	color: var(--brand-navy);
}
.site-nav__menu .current-menu-item > a,
.site-nav__menu .current-page-ancestor > a {
	background: var(--g-brand);
	color: #fff;
	box-shadow: var(--shadow-glow);
}

/* ============================================================
   Header actions (right side in RTL, visually end-inline)
   ============================================================ */
.site-header__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.site-header__phone,
.site-header__search {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	color: var(--brand-navy);
	background: var(--brand-frost);
	border: 0;
	cursor: pointer;
	transition: all var(--t-base);
}
.site-header__phone:hover,
.site-header__search:hover {
	background: var(--brand-navy);
	color: #fff;
	transform: rotate(-8deg) scale(1.06);
}
.site-header__phone .icon,
.site-header__search .icon { margin: 0; font-size: 16px; }
.site-header__search:hover { transform: scale(1.08); }

.site-header__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: var(--radius-pill);
	background: var(--g-brand);
	color: #fff;
	font-weight: 700;
	font-size: 0.88rem;
	letter-spacing: 0.01em;
	box-shadow: var(--shadow-glow);
	transition: all var(--t-base);
}
.site-header__cta:hover {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 0 50px rgba(37, 150, 190, 0.45);
}

/* ============================================================
   Mobile burger
   ============================================================ */
.mobile-toggle {
	display: none;
	width: 44px; height: 44px;
	background: var(--brand-frost);
	border: 0;
	border-radius: 50%;
	padding: 12px;
	flex-direction: column;
	justify-content: space-between;
	cursor: pointer;
	transition: background var(--t-fast);
}
.mobile-toggle:hover { background: var(--brand-ice); }
.mobile-toggle span {
	display: block;
	height: 2px;
	background: var(--brand-navy);
	border-radius: 1px;
	transition: all var(--t-base);
}

/* ============================================================
   Mobile menu — full-screen overlay with gradient
   ============================================================ */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 100;
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--t-base), visibility var(--t-base);
}
.mobile-menu.is-open { visibility: visible; opacity: 1; }

.mobile-menu__overlay {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(50% 60% at 15% 20%, rgba(123, 94, 224, 0.45) 0%, transparent 55%),
		radial-gradient(55% 65% at 85% 80%, rgba(37, 150, 190, 0.5) 0%, transparent 55%),
		var(--brand-navy-deep);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
}

.mobile-menu__panel {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: var(--space-7) var(--space-5);
	overflow-y: auto;
	color: #fff;
}

.mobile-menu__close {
	align-self: flex-end;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-size: 1.4rem;
	line-height: 1;
	color: #fff;
	width: 48px; height: 48px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	margin-block-end: var(--space-6);
	transition: all var(--t-base);
}
.mobile-menu__close:hover {
	background: rgba(255, 255, 255, 0.16);
	transform: rotate(90deg);
}

.mobile-menu__list {
	list-style: none;
	padding: 0;
	margin: auto 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: center;
}
.mobile-menu__list a {
	display: block;
	padding: var(--space-4);
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: var(--tracking-tight);
	color: #fff;
	position: relative;
	transition: color var(--t-base);
}
.mobile-menu__list a::before {
	content: '';
	position: absolute;
	inset-inline: 50%;
	inset-block-end: 10px;
	height: 2px;
	width: 48px;
	background: var(--g-sky);
	transform: translateX(50%) scaleX(0);
	transform-origin: center;
	transition: transform var(--t-base);
}
.mobile-menu__list a:hover {
	color: var(--brand-ice);
}
.mobile-menu__list a:hover::before {
	transform: translateX(50%) scaleX(1);
}

.mobile-menu__footer {
	margin-block-start: var(--space-6);
	padding-block-start: var(--space-5);
	border-block-start: 1px solid rgba(255, 255, 255, 0.12);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	align-items: center;
}
.mobile-menu__footer a {
	color: var(--brand-ice);
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* ============================================================
   Breakpoints
   ============================================================ */
@media (max-width: 1100px) {
	.site-nav__menu a { padding: 10px 12px; font-size: 0.88rem; }
	.site-header__cta { font-size: 0.82rem; padding: 10px 14px; }
}
@media (max-width: 900px) {
	.site-nav { display: none; }
	.mobile-toggle { display: flex; }
	.site-header__inner { padding: 8px 10px 8px 14px; }
	.site-header__cta { display: none; }
	.site-header__phone { width: 44px; height: 44px; }
}
@media (max-width: 520px) {
	.site-header { inset-block-start: 8px; }
	.site-header__inner { border-radius: var(--radius-lg); }
}

/* ============================================================
   Search overlay — fullscreen glass-dark
   ============================================================ */
.search-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--t-base), visibility var(--t-base);
}
.search-overlay.is-open { visibility: visible; opacity: 1; }

.search-overlay__backdrop {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(55% 60% at 20% 15%, rgba(37, 150, 190, 0.45) 0%, transparent 60%),
		radial-gradient(50% 55% at 80% 85%, rgba(123, 94, 224, 0.4) 0%, transparent 60%),
		rgba(6, 18, 44, 0.92);
	backdrop-filter: blur(28px) saturate(1.3);
	-webkit-backdrop-filter: blur(28px) saturate(1.3);
	cursor: pointer;
}

.search-overlay__panel {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-6);
	color: #fff;
}

.search-overlay__close {
	position: absolute;
	inset-block-start: var(--space-5);
	inset-inline-end: var(--space-5);
	width: 48px; height: 48px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--t-base);
}
.search-overlay__close:hover {
	background: rgba(255, 255, 255, 0.18);
	transform: rotate(90deg);
}

.search-overlay__inner {
	width: 100%;
	max-width: 720px;
	text-align: center;
	transform: translateY(16px);
	opacity: 0;
	transition: opacity var(--t-base), transform var(--t-base);
}
.search-overlay.is-open .search-overlay__inner {
	transform: translateY(0);
	opacity: 1;
	transition-delay: 80ms;
}
.search-overlay__inner .eyebrow {
	color: var(--brand-ice);
	display: block;
	margin-block-end: var(--space-3);
}
.search-overlay__title {
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 800;
	letter-spacing: var(--tracking-tight);
	color: #fff;
	margin: 0 0 var(--space-3);
}
.search-overlay__sub {
	color: rgba(255, 255, 255, 0.75);
	margin: 0 0 var(--space-6);
	font-size: var(--fs-lead);
}

.search-overlay__form { margin-block-end: var(--space-5); }
.search-overlay__field {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--radius-pill);
	padding: 6px 6px 6px var(--space-4);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: border-color var(--t-fast), background var(--t-fast);
}
.search-overlay__field:focus-within {
	border-color: var(--brand-sky);
	background: rgba(255, 255, 255, 0.12);
}
.search-overlay__icon {
	color: var(--brand-ice);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 18px;
}
.search-overlay__input {
	flex: 1;
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 1.1rem;
	font-weight: 500;
	padding: 14px 8px;
	outline: none;
	min-width: 0;
}
.search-overlay__input::placeholder { color: rgba(255, 255, 255, 0.45); }
.search-overlay__submit {
	background: var(--g-brand);
	color: #fff;
	font-weight: 700;
	padding: 12px var(--space-5);
	border-radius: var(--radius-pill);
	border: 0;
	cursor: pointer;
	box-shadow: var(--shadow-glow);
	transition: transform var(--t-fast);
}
.search-overlay__submit:hover { transform: translateY(-1px); }

.search-overlay__tags {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
}
.search-overlay__tags-label {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.85rem;
	font-weight: 600;
}
.search-overlay__tag {
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.85rem;
	font-weight: 600;
	transition: all var(--t-fast);
}
.search-overlay__tag:hover {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	border-color: var(--brand-sky);
}

body.has-search-open { overflow: hidden; }
@media (max-width: 520px) {
	.search-overlay__field { flex-direction: column; padding: var(--space-3); border-radius: var(--radius-lg); }
	.search-overlay__field .search-overlay__icon { align-self: flex-start; }
	.search-overlay__input { width: 100%; }
	.search-overlay__submit { width: 100%; }
}