/**
 * Finewerk global header — frontend styles.
 *
 * Implements the Figma containers:
 *   `navbar`                       — default Desktop state (three white pills)
 *   `navbar onScroll`              — .is-scrolled glass state
 *   `navbar mega menu`             — .fwsc-mega panels
 *   `navbar mobile`                — <992px layout (centered logo + burger)
 *   `navbar mobile hamburger open` — .fwsc-mobile overlay
 *
 * The glass states reuse the child theme's finewerk-liquid-glass
 * material, applied to a dedicated `.fwsc-surface` layer inside each
 * pill (see the Glass surface section below); a plugin-local
 * backdrop-filter fallback covers installs without the material.
 *
 * All selectors are namespaced `fwsc-`.
 */

/* ------------------------------------------------------------------
 * Typography defaults (see assets/css/fonts.css)
 *
 * Archivo for every piece of text in this component, headings included.
 * Declared at single-class specificity — the tag group through a
 * zero-specificity :where() — so anything more specific can override it.
 * No !important anywhere.
 * ---------------------------------------------------------------- */

.fwsc-header, .fwsc-header :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--fw-font-body);
}

/* Form controls do not inherit the document font: the UA sheet gives
   button/input/select/textarea their own `font: 400 13.33px Arial`.
   Opt them back into the component's face. */
.fwsc-header :where(button, input, select, textarea, optgroup) {
	font-family: inherit;
}

/* ------------------------------------------------------------------
 * Design tokens (scoped to the header root)
 * ---------------------------------------------------------------- */

.fwsc-header {
	/* The whole header is Archivo — navigation, mega menu, buttons, labels,
	   language controls and the mobile menu. The four token names are kept
	   so existing rules (and the admin Font-family picker) keep working;
	   they all resolve to the same body face on purpose. */
	--fwsc-font-nav: var(--fw-font-body);
	--fwsc-font-accent: var(--fw-font-body);
	--fwsc-font-title: var(--fw-font-body);
	--fwsc-font-body: var(--fw-font-body);

	--fwsc-ink: #1e1e1e;
	--fwsc-ink-soft: #494d4d;
	--fwsc-green: #c8f8a9;
	--fwsc-green-border: #adda90;
	--fwsc-deep: #0f3d3a;
	--fwsc-pill-radius: 20px;
	--fwsc-pill-height: 64px;
	--fwsc-shadow-rest: 0 8px 20px rgba(19, 21, 21, 0.05);
	--fwsc-shadow-scrolled: 0 8px 20px rgba(19, 21, 21, 0.05), 0 4px 2px rgba(0, 0, 0, 0.18);
	--fwsc-ease: cubic-bezier(0.33, 1, 0.68, 1);
}

/* ------------------------------------------------------------------
 * Header shell — fixed overlay, never contributes layout space
 * ---------------------------------------------------------------- */

.fwsc-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1090;
	pointer-events: none;
	font-family: var(--fwsc-font-nav);
}

.fwsc-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	width: 100%;
	max-width: 1260px;
	margin: clamp(12px, 1.2vw, 21px) auto 0;
	padding: 0 30px;
	transition: max-width 0.45s var(--fwsc-ease);
}

/* `navbar onScroll`: the three pill groups condense toward the center. */
.fwsc-header.is-scrolled .fwsc-header__inner {
	max-width: 1088px;
}

.fwsc-header__zone {
	display: flex;
	align-items: center;
	min-width: 0;
}

.fwsc-header__zone--nav {
	flex: 1 1 auto;
	justify-content: center;
	display: none;
}

.fwsc-header__zone--end {
	justify-content: flex-end;
	gap: 6px;
}

/* ------------------------------------------------------------------
 * Pills — shared material
 * ---------------------------------------------------------------- */

.fwsc-pill {
	pointer-events: auto;
	position: relative;
	display: inline-flex;
	align-items: center;
	border: 0;
	border-radius: var(--fwsc-pill-radius);
	background: #fff;
	box-shadow: var(--fwsc-shadow-rest);
	color: var(--fwsc-ink);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition:
		background-color 0.35s var(--fwsc-ease),
		box-shadow 0.35s var(--fwsc-ease),
		color 0.35s var(--fwsc-ease);
}

/* ------------------------------------------------------------------
 * Glass surface layer
 *
 * `finewerk-liquid-glass` (the child theme's material) is applied to
 * this decorative element rather than to the pill itself. The material
 * paints its plate at z-index -1 and its specular highlight at z-index
 * 2 inside its own stacking context, so putting it on a dedicated
 * surface keeps the entire glass stack *behind* the pill's content
 * (logo, labels, icons) instead of washing over it, and leaves the
 * interactive elements free of an extra stacking context — which is
 * what lets the mega-menu panel escape the navigation pill.
 * ---------------------------------------------------------------- */

.fwsc-header .fwsc-surface {
	position: absolute;
	inset: 0;
	z-index: 0;
	/* Follows the pill's real radius, including any administrator
	 * override, so the pseudo-elements stay clipped to its shape. */
	border-radius: inherit;

	/* Material tuning for the Finewerk navbar. These must be declared on
	 * the surface itself: the material sets its own defaults on
	 * `.finewerk-liquid-glass`, which would beat anything merely inherited
	 * from an ancestor. Administrator "Glass background" overrides are
	 * generated as `#fwsc-header .fwsc-surface`, so they win over these. */
	--fw-glass-tint: 255, 255, 255;
	--fw-glass-opacity: 0.1;
	--fw-glass-blur: 16px;
	--fw-glass-saturation: 1.5;
	--fw-glass-border-opacity: 0.35;
}

/* Pill content always paints above the surface. Flex/grid items honour
 * z-index without `position`, so nothing here can disturb the absolutely
 * positioned icons inside the hamburger button. */
.fwsc-pill > :not(.fwsc-surface) {
	z-index: 1;
}

/* Bar pills are solid white at the top of the page (Figma `navbar`) and
 * fade into the glass treatment once scrolled (`navbar onScroll`). */
.fwsc-pill--bar > .fwsc-surface {
	opacity: 0;
	transition: opacity 0.35s var(--fwsc-ease);
}

.fwsc-header.is-scrolled .fwsc-pill--bar > .fwsc-surface {
	opacity: 1;
}

#fwsc-header.is-scrolled .fwsc-pill--bar {
	background: rgba(255, 255, 255, 0);
	box-shadow: var(--fwsc-shadow-scrolled);
	color: #fff;
}

/* Fallback glass when the material is unavailable (both handles dequeued). */
#fwsc-header:not(.fwsc-header--has-glass-lib).is-scrolled .fwsc-pill--bar {
	background: rgba(255, 255, 255, 0.1);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	#fwsc-header:not(.fwsc-header--has-glass-lib).is-scrolled .fwsc-pill--bar {
		-webkit-backdrop-filter: blur(16px) saturate(1.5);
		backdrop-filter: blur(16px) saturate(1.5);
	}
}

/* ------------------------------------------------------------------
 * Logo pill
 * ---------------------------------------------------------------- */

.fwsc-logo {
	height: var(--fwsc-pill-height);
	padding: 12px 16px;
	justify-content: center;
	flex: 0 0 auto;
}

.fwsc-logo__img {
	display: block;
	height: 40px;
	width: auto;
	max-width: 150px;
	object-fit: contain;
}

.fwsc-logo__text {
	font-family: var(--fwsc-font-accent);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* ------------------------------------------------------------------
 * Desktop navigation pill (`navbar` center group)
 * ---------------------------------------------------------------- */

.fwsc-nav-pill {
	height: var(--fwsc-pill-height);
	padding: 6px;
}

.fwsc-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fwsc-nav__item {
	position: relative;
	margin: 0;
	display: flex;
	align-items: center;
}

.fwsc-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 50px;
	padding: 16px clamp(16px, 1.7vw, 28px);
	border: 0;
	border-radius: 16px;
	background: transparent;
	font-family: var(--fwsc-font-nav);
	font-size: 15px;
	font-weight: 500;
	line-height: 18px;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s var(--fwsc-ease), color 0.35s var(--fwsc-ease);
}

.fwsc-nav__link:hover,
.fwsc-nav__link:focus-visible {
	background: rgba(30, 30, 30, 0.05);
}

.fwsc-header.is-scrolled .fwsc-nav__link:hover,
.fwsc-header.is-scrolled .fwsc-nav__link:focus-visible {
	background: rgba(255, 255, 255, 0.12);
}

.fwsc-nav-pill .fwsc-nav__link {
	color: var(--fwsc-ink-soft);
}

.fwsc-header.is-scrolled .fwsc-nav-pill .fwsc-nav__link {
	color: #fff;
}

/* Active page — green chip, identical in every navbar state. */
.fwsc-nav__item.is-active .fwsc-nav__label {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 8px;
	border-radius: 12px;
	background: var(--fwsc-green);
	border: 1px solid var(--fwsc-green-border);
	font-family: var(--fwsc-font-accent);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.4px;
	line-height: 1;
	color: var(--fwsc-ink);
	text-transform: capitalize;
}

/* Mega toggle caret button (separate control when the trigger also links). */
.fwsc-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-left: -6px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #c8c8c8;
	cursor: pointer;
	transition: background-color 0.2s var(--fwsc-ease), transform 0.25s var(--fwsc-ease);
}

.fwsc-nav__toggle:hover,
.fwsc-nav__toggle:focus-visible {
	background: rgba(30, 30, 30, 0.06);
}

.fwsc-header.is-scrolled .fwsc-nav__toggle:hover,
.fwsc-header.is-scrolled .fwsc-nav__toggle:focus-visible {
	background: rgba(255, 255, 255, 0.12);
}

.fwsc-icon--caret {
	display: block;
	transform: scaleY(-1); /* Figma glyph points up; default state points down. */
	transition: transform 0.25s var(--fwsc-ease);
}

.fwsc-nav__item.is-open .fwsc-icon--caret,
.fwsc-mobile__disclose[aria-expanded="true"] .fwsc-icon--caret,
.fwsc-mobile__link--button[aria-expanded="true"] .fwsc-icon--caret {
	transform: scaleY(1);
}

/* Trigger-as-button variant keeps link styling. */
.fwsc-nav__link--button .fwsc-icon--caret {
	color: #c8c8c8;
}

/* ------------------------------------------------------------------
 * CTA pill ("Get in Touch")
 * ---------------------------------------------------------------- */

.fwsc-cta {
	height: var(--fwsc-pill-height);
	padding: 0 24px;
	gap: 8px;
	justify-content: center;
	font-family: var(--fwsc-font-accent);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.48px;
	line-height: 16px;
	color: #000;
	white-space: nowrap;
	flex: 0 0 auto;
}

.fwsc-cta:hover .fwsc-icon--arrow,
.fwsc-cta:focus-visible .fwsc-icon--arrow {
	transform: translate(2px, -2px);
}

.fwsc-icon--arrow {
	display: block;
	transition: transform 0.25s var(--fwsc-ease);
}

.fwsc-header.is-scrolled .fwsc-cta--bar {
	color: #fff;
}

/* ------------------------------------------------------------------
 * Focus visibility (all interactive header controls)
 * ---------------------------------------------------------------- */

.fwsc-header a:focus-visible,
.fwsc-header button:focus-visible {
	outline: 2px solid var(--fwsc-green);
	outline-offset: 2px;
}

.fwsc-header a:focus:not(:focus-visible),
.fwsc-header button:focus:not(:focus-visible) {
	outline: none;
}

/* ------------------------------------------------------------------
 * Mega menu (`navbar mega menu`)
 * ---------------------------------------------------------------- */

.fwsc-mega {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	z-index: 20;
	width: max-content;
	max-width: min(720px, calc(100vw - 32px));
	border-radius: 20px;
	background: #fefffb;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 24px 60px -24px rgba(15, 61, 58, 0.25);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateX(calc(-50% + var(--fwsc-mega-shift, 0px))) translateY(-10px);
	transition:
		opacity 0.24s var(--fwsc-ease),
		transform 0.24s var(--fwsc-ease),
		visibility 0s linear 0.24s;
}

/* Pointer bridge: no dead gap between the pill and the panel. */
.fwsc-mega::before {
	content: "";
	position: absolute;
	top: -14px;
	left: 0;
	right: 0;
	height: 14px;
}

/* The panel anchors to the nav pill, not the individual item, so it can
 * never be clipped or pushed off-screen at narrower desktop widths. */
.fwsc-nav-pill {
	position: relative;
}

.fwsc-nav__item.is-open .fwsc-mega,
.fwsc-nav__item:focus-within .fwsc-mega {
	opacity: 1;
	visibility: visible;
	transform: translateX(calc(-50% + var(--fwsc-mega-shift, 0px))) translateY(0);
	transition:
		opacity 0.24s var(--fwsc-ease),
		transform 0.24s var(--fwsc-ease),
		visibility 0s;
}

.fwsc-mega__body {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 20px;
}

.fwsc-mega__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(190px, 213px));
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fwsc-mega__link {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px;
	border-radius: 10px;
	text-decoration: none;
	transition: background-color 0.18s var(--fwsc-ease);
}

.fwsc-mega__link:hover,
.fwsc-mega__link:focus-visible {
	background: rgba(15, 61, 58, 0.06);
}

.fwsc-mega__icon {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	overflow: hidden;
}

.fwsc-mega__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fwsc-mega__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.fwsc-mega__title {
	font-family: var(--fwsc-font-title);
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	color: var(--fwsc-ink);
	white-space: nowrap;
}

.fwsc-mega__desc {
	font-family: var(--fwsc-font-body);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.35;
	color: rgba(30, 30, 30, 0.85);
	max-width: 150px;
}

/* Promo card (right column). */
.fwsc-mega__promo {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 0 0 240px;
	width: 240px;
	padding: 16px;
	border-radius: 12px;
	background: #f6f8f3;
	border: 1px solid rgba(15, 61, 58, 0.08);
	box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.25);
}

.fwsc-mega__promo-media {
	position: relative;
	display: block;
	height: 96px;
	border-radius: 10px;
	overflow: hidden;
}

.fwsc-mega__promo-media img,
.fwsc-mega__promo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fwsc-mega__promo-tag {
	position: absolute;
	left: 5px;
	bottom: 6px;
	padding: 3px 9px;
	border-radius: 100px;
	background: rgba(11, 11, 15, 0.55);
	font-family: var(--fwsc-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.32px;
	line-height: 1.2;
	color: #fff;
	text-transform: uppercase;
}

.fwsc-mega__promo-title {
	font-family: var(--fwsc-font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.15px;
	line-height: 1.3;
	color: #000;
}

.fwsc-mega__promo-text {
	font-family: var(--fwsc-font-body);
	font-size: 13px;
	line-height: 1.4;
	color: rgba(0, 0, 0, 0.85);
}

.fwsc-mega__promo-link {
	font-family: var(--fwsc-font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--fwsc-deep);
	text-decoration: none;
}

.fwsc-mega__promo-link:hover,
.fwsc-mega__promo-link:focus-visible {
	text-decoration: underline;
}

/* Bottom bar. */
.fwsc-mega__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 20px;
	background: var(--fwsc-deep);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.fwsc-mega__bar-text {
	margin: 0;
	font-family: var(--fwsc-font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: #f4f4f6;
}

.fwsc-mega__bar-btn {
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 9px;
	font-family: var(--fwsc-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: #f4f4f6;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.18s var(--fwsc-ease);
}

.fwsc-mega__bar-btn:hover,
.fwsc-mega__bar-btn:focus-visible {
	background: rgba(255, 255, 255, 0.12);
}

/* ------------------------------------------------------------------
 * Burger (`navbar mobile`)
 * ---------------------------------------------------------------- */

.fwsc-burger {
	display: none;
	width: 69px;
	height: var(--fwsc-pill-height);
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	color: var(--fwsc-ink);
}

.fwsc-header.is-scrolled .fwsc-burger,
.fwsc-header.is-menu-open .fwsc-burger {
	color: #fff;
}

.fwsc-burger .fwsc-icon--hamburger,
.fwsc-burger .fwsc-icon--close {
	grid-area: 1 / 1;
	width: 32px;
	height: 32px;
	transition: opacity 0.2s var(--fwsc-ease), transform 0.25s var(--fwsc-ease);
}

.fwsc-burger {
	display: none;
	/* Icons stack in a single grid cell for the cross-fade. */
}

.fwsc-burger .fwsc-icon--close {
	position: absolute;
	opacity: 0;
	transform: rotate(-45deg) scale(0.8);
}

.fwsc-burger[aria-expanded="true"] .fwsc-icon--hamburger {
	opacity: 0;
	transform: rotate(45deg) scale(0.8);
}

.fwsc-burger[aria-expanded="true"] .fwsc-icon--close {
	opacity: 1;
	transform: rotate(0) scale(1);
}

/* Below the navigation breakpoint the bar pills are glass at every scroll
 * position — the Figma `navbar mobile` container already shows the
 * translucent treatment on both the logo pill and the hamburger. */
@media (max-width: 991px) {
	.fwsc-pill--bar > .fwsc-surface {
		opacity: 1;
	}

	#fwsc-header .fwsc-pill.fwsc-pill--bar {
		background: rgba(255, 255, 255, 0);
		box-shadow: var(--fwsc-shadow-scrolled);
	}

	#fwsc-header:not(.fwsc-header--has-glass-lib) .fwsc-pill.fwsc-pill--bar {
		background: rgba(255, 255, 255, 0.1);
	}
}

/* While the mobile menu is open the burger pill sits above the overlay
 * and keeps its glass look. */
#fwsc-header.is-menu-open .fwsc-pill--bar {
	background: rgba(255, 255, 255, 0);
	box-shadow: var(--fwsc-shadow-scrolled);
}

.fwsc-header.is-menu-open .fwsc-pill--bar > .fwsc-surface {
	opacity: 1;
}

#fwsc-header:not(.fwsc-header--has-glass-lib).is-menu-open .fwsc-pill--bar {
	background: rgba(255, 255, 255, 0.1);
}

/* ------------------------------------------------------------------
 * Mobile menu overlay (`navbar mobile hamburger open`)
 * ---------------------------------------------------------------- */

.fwsc-mobile {
	position: fixed;
	inset: 0;
	z-index: -1; /* Behind the pills of its own header. */
	pointer-events: auto;
	overflow-y: auto;
	background: rgba(24, 26, 26, 0.62);
	opacity: 0;
	transition: opacity 0.3s var(--fwsc-ease);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.fwsc-mobile {
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		background: rgba(24, 26, 26, 0.48);
	}
}

.fwsc-mobile.is-open {
	opacity: 1;
}

.fwsc-mobile__nav {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 18px;
	max-width: 1260px;
	margin: 0 auto;
	padding: calc(clamp(12px, 1.2vw, 21px) + var(--fwsc-pill-height) + 18px) 30px 40px;
}

.fwsc-mobile__list {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fwsc-mobile__item {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

.fwsc-mobile__row {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.fwsc-mobile__link {
	height: 47px;
	padding: 0 18px;
	border-radius: 15px;
	justify-content: center;
	gap: 10px;
	font-family: var(--fwsc-font-nav);
	font-size: 22px;
	font-weight: 500;
	line-height: 1;
	color: #fff;
	cursor: pointer;
}

/* Overlay pills (inside the open mobile menu) are always glassy — each
 * one is its own translucent surface in `navbar mobile hamburger open`.
 * The tint comes from the glass surface, so the pill itself only carries
 * the shadow; the flat background is the no-material fallback. */
#fwsc-header .fwsc-pill--overlay {
	background: transparent;
	box-shadow: var(--fwsc-shadow-scrolled);
}

#fwsc-header:not(.fwsc-header--has-glass-lib) .fwsc-pill--overlay {
	background: rgba(255, 255, 255, 0.1);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	#fwsc-header:not(.fwsc-header--has-glass-lib) .fwsc-pill--overlay {
		-webkit-backdrop-filter: blur(16px) saturate(1.5);
		backdrop-filter: blur(16px) saturate(1.5);
	}
}

/* Active page pill — solid green chip like the Figma open state. */
.fwsc-mobile__item.is-active .fwsc-mobile__link {
	background: var(--fwsc-green);
	border: 1px solid var(--fwsc-green-border);
	color: #000;
	font-family: var(--fwsc-font-accent);
	letter-spacing: 0.4px;
	height: 49px;
}

.fwsc-mobile__item.is-active .fwsc-mobile__link .fwsc-icon--caret {
	color: #000;
}

.fwsc-mobile__disclose {
	width: 47px;
	height: 47px;
	border-radius: 15px;
	justify-content: center;
	color: #fff;
	cursor: pointer;
}

.fwsc-mobile__sub[hidden] {
	display: none;
}

.fwsc-mobile__sub {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0 8px 0 0;
}

.fwsc-mobile__sublink {
	height: 40px;
	padding: 0 16px;
	border-radius: 13px;
	justify-content: center;
	font-family: var(--fwsc-font-nav);
	font-size: 17px;
	font-weight: 500;
	color: #fff;
}

.fwsc-mobile__cta {
	margin-top: 26px;
	color: #fff;
}

/* Staggered entrance from the right (Figma motion intent). */
.fwsc-mobile.is-open .fwsc-mobile__item,
.fwsc-mobile.is-open .fwsc-mobile__cta {
	animation: fwsc-slide-in 0.42s var(--fwsc-ease) both;
	animation-delay: calc(60ms + var(--fwsc-i, 0) * 55ms);
}

@keyframes fwsc-slide-in {
	from {
		opacity: 0;
		transform: translateX(48px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Body scroll lock while the menu is open. */
body.fwsc-no-scroll {
	overflow: hidden;
}

/* ------------------------------------------------------------------
 * Layout breakpoints
 * ---------------------------------------------------------------- */

@media (min-width: 992px) {
	.fwsc-header__zone--nav {
		display: flex;
	}
}

@media (max-width: 991px) {
	.fwsc-burger {
		display: inline-grid;
		place-items: center;
	}

	/* `navbar mobile`: the logo is physically centered in the viewport —
	 * absolute centering, not leftover-space centering. */
	.fwsc-header__zone--start {
		position: static;
	}

	.fwsc-logo {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.fwsc-header__zone--end {
		margin-left: auto;
	}

	.fwsc-header__inner {
		padding: 0 clamp(16px, 4vw, 30px);
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	/* Compressed desktop layout for wider tablets. */
	.fwsc-nav__link {
		padding: 16px 16px;
	}

	.fwsc-cta {
		padding: 0 18px;
	}
}

/* Content-range utilities (device variants). Hidden variants use
 * display:none so they can never be focused or read by AT. */
@media (max-width: 1199px) {
	.fwsc-range--d {
		display: none !important;
	}
}

@media (min-width: 1200px), (max-width: 767px) {
	.fwsc-range--t {
		display: none !important;
	}
}

@media (min-width: 768px) {
	.fwsc-range--m {
		display: none !important;
	}
}

@media (min-width: 1200px), (max-width: 991px) {
	.fwsc-range--t-high {
		display: none !important;
	}
}

@media (min-width: 992px), (max-width: 767px) {
	.fwsc-range--tm-t {
		display: none !important;
	}
}

@media (max-width: 991px) {
	.fwsc-range--dt-high {
		display: none !important;
	}
}

/* ------------------------------------------------------------------
 * Accessibility preferences
 * ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.fwsc-header__inner,
	.fwsc-pill,
	.fwsc-pill--bar > .fwsc-surface,
	.fwsc-nav__link,
	.fwsc-nav__toggle,
	.fwsc-icon--caret,
	.fwsc-icon--arrow,
	.fwsc-mega,
	.fwsc-mobile,
	.fwsc-burger .fwsc-icon--hamburger,
	.fwsc-burger .fwsc-icon--close {
		transition: none !important;
	}

	.fwsc-mobile.is-open .fwsc-mobile__item,
	.fwsc-mobile.is-open .fwsc-mobile__cta {
		animation: none !important;
	}
}

/* The glass material goes near-solid white under prefers-contrast /
 * reduced transparency — flip the scrolled text back to ink so contrast
 * never degrades. */
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
	.fwsc-header.is-scrolled .fwsc-pill--bar,
	.fwsc-header.is-scrolled .fwsc-nav-pill .fwsc-nav__link,
	.fwsc-header.is-scrolled .fwsc-cta--bar,
	.fwsc-header.is-menu-open .fwsc-burger {
		color: var(--fwsc-ink);
	}

	.fwsc-header:not(.fwsc-header--has-glass-lib).is-scrolled .fwsc-pill--bar,
	.fwsc-header:not(.fwsc-header--has-glass-lib).is-menu-open .fwsc-pill--bar {
		background: rgba(255, 255, 255, 0.92);
	}

	/* Overlay pills go near-solid dark; the active green chip is already
	 * opaque and keeps its Figma treatment. The tint variable steers the
	 * liquid-glass plate to the same dark color so white text stays
	 * readable when the material goes near-opaque. */
	.fwsc-pill--overlay {
		background: rgba(20, 24, 24, 0.92) !important;
	}

	.fwsc-header .fwsc-pill--overlay > .fwsc-surface {
		--fw-glass-tint: 20, 24, 24;
	}
}

/* Screen-reader-only helper (WordPress convention, local copy). */
.fwsc-header .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}