/**
 * 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.
 * ---------------------------------------------------------------- */

/* codi */
.fwsc-header, .fwsc-header :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--finewerk-header-footer-font, "Space Grotesk", sans-serif);
}
/* -codi */

/* 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. */
	/* codi */
	--fwsc-font-nav: var(--finewerk-header-footer-font, "Space Grotesk", sans-serif);
	--fwsc-font-accent: var(--finewerk-header-footer-font, "Space Grotesk", sans-serif);
	--fwsc-font-title: var(--finewerk-header-footer-font, "Space Grotesk", sans-serif);
	--fwsc-font-body: var(--finewerk-header-footer-font, "Space Grotesk", sans-serif);
	/* -codi */

	--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);

	/* Foreground over GLASS. The dynamic material (liquid-glass.js) reads the
	   page behind every glass surface and writes the aggregated verdict on
	   the header as data-fw-glass-theme="dark|light" (the value names the
	   BACKDROP; the header is the aggregation scope). Default = dark backdrop
	   → light foreground, which is also what renders before the script's
	   first reading — identical to the previous fixed white. */
	--fwsc-glass-fg: #fff;
	--fwsc-glass-fg-soft: rgba(255, 255, 255, 0.7);
	--fwsc-glass-hover: rgba(255, 255, 255, 0.12);
	--fwsc-logo-dark-bg: 1; /* 1 = the logo for dark backgrounds is showing */
	--fwsc-fg-dur: 0.35s;   /* colour / logo cross-fade duration            */
}

/* Light backdrop → dark foreground (text, icons, logo for light backgrounds). */
.fwsc-header[data-fw-glass-theme="light"] {
	--fwsc-glass-fg: var(--fwsc-ink);
	--fwsc-glass-fg-soft: rgba(30, 30, 30, 0.55);
	--fwsc-glass-hover: rgba(30, 30, 30, 0.06);
	--fwsc-logo-dark-bg: 0;
}

/* Accent + hairline colours over glass (mobile dropdown), per backdrop. */
.fwsc-header {
	--fwsc-glass-accent: var(--fwsc-green);
	--fwsc-glass-accent-line: var(--fwsc-green);
	--fwsc-glass-line: rgba(255, 255, 255, 0.55);
}

.fwsc-header[data-fw-glass-theme="light"] {
	--fwsc-glass-accent: var(--fwsc-deep);
	--fwsc-glass-accent-line: var(--fwsc-green-border);
	--fwsc-glass-line: rgba(30, 30, 30, 0.25);
}

/* The first classification lands without a fade — no swing from the
   pre-JS default (the attribute exists for one frame only). */
.fwsc-header[data-fw-glass-theme-initial] {
	--fwsc-fg-dur: 0s;
}

/* ------------------------------------------------------------------
 * 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
 * ---------------------------------------------------------------- */

/* Every pill (logo, navigation, CTA, hamburger) is exactly
   --fwsc-pill-height tall INCLUDING its padding, whatever the theme's
   global box-sizing is — the three groups must always line up. */
.fwsc-header .fwsc-pill,
.fwsc-header .fwsc-nav__link,
.fwsc-header .fwsc-cta-extra {
	box-sizing: border-box;
}

.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 var(--fwsc-fg-dur) 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 inside its own stacking context, so
 * putting it on a dedicated surface keeps the whole glass stack *behind*
 * the pill's content (logo, labels, icons) and leaves the interactive
 * elements free of an extra stacking context — which is what lets the
 * mega-menu panel escape the navigation pill. The material is static:
 * nothing in it follows the pointer.
 * ---------------------------------------------------------------- */

.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.
	 *
	 * The surfaces are `finewerk-liquid-glass__dynamic`, so tint and alpha
	 * are set through the dynamic inputs (NOT --fw-glass-tint/-opacity,
	 * which the material computes from them): the plate keeps its familiar
	 * 0.10 white over mid/dark content, lifts slightly over very dark
	 * content, and gains a faint smoke over white content. */
	--fw-glass-dyn-tint: 255, 255, 255;
	--fw-glass-dyn-opacity-min: 0.1;
	--fw-glass-dyn-opacity-max: 0.16;
	--fw-glass-dyn-light-opacity: 0.12;
	--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: var(--fwsc-glass-fg);
}

/* 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;
}

/* Two logos (for dark / for light backgrounds) share ONE grid cell, so both
   are always laid out and the pill never changes size or position when the
   material's verdict switches: only opacity cross-fades. */
.fwsc-logo__stack {
	display: grid;
	place-items: center;
}

.fwsc-logo__stack > .fwsc-logo__img {
	grid-area: 1 / 1;
	transition: opacity var(--fwsc-fg-dur) var(--fwsc-ease);
}

/* Solid white pills (`navbar` at the top of the page) always carry the
   logo for light backgrounds; glass states follow the backdrop verdict. */
.fwsc-logo__img--for-dark {
	opacity: 0;
}

.fwsc-header.is-scrolled .fwsc-logo__img--for-dark {
	opacity: var(--fwsc-logo-dark-bg);
}

.fwsc-header.is-scrolled .fwsc-logo__img--for-light {
	opacity: calc(1 - var(--fwsc-logo-dark-bg));
}

.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 var(--fwsc-fg-dur) 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: var(--fwsc-glass-hover);
}

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

.fwsc-header.is-scrolled .fwsc-nav-pill .fwsc-nav__link {
	color: var(--fwsc-glass-fg);
}

/* 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), color var(--fwsc-fg-dur) 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,
.fwsc-header.is-scrolled .fwsc-nav__link--button .fwsc-icon--caret {
	color: var(--fwsc-glass-fg-soft);
}

.fwsc-header.is-scrolled .fwsc-nav__toggle:hover,
.fwsc-header.is-scrolled .fwsc-nav__toggle:focus-visible {
	background: var(--fwsc-glass-hover);
}

.fwsc-icon--caret {
	display: block;
	transform: scaleY(-1); /* Figma glyph points up; default state points down. */
	transition: transform 0.25s var(--fwsc-ease), color var(--fwsc-fg-dur) 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: var(--fwsc-glass-fg);
}

/* ------------------------------------------------------------------
 * 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: var(--fwsc-glass-fg);
}

.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;
	/* Both icons occupy grid cell 1/1 of the inline-grid button and are
	   centred by place-items, so the hamburger→X cross-fade never shifts
	   and the X sits exactly in the middle of its hit area. */
}

.fwsc-burger .fwsc-icon--close {
	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;
	}

	/* Glass at every scroll position → the foreground and the logo follow
	   the backdrop verdict at every scroll position too. */
	#fwsc-header .fwsc-pill--bar {
		color: var(--fwsc-glass-fg);
	}

	.fwsc-burger {
		color: var(--fwsc-glass-fg);
	}

	.fwsc-logo__img--for-dark {
		opacity: var(--fwsc-logo-dark-bg);
	}

	.fwsc-logo__img--for-light {
		opacity: calc(1 - var(--fwsc-logo-dark-bg));
	}

	#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 bar pills keep their 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 dropdown (refferences/header-mobile-dropdown.png,
 * header-mobile-dropdown-submenu.png)
 *
 * A glass panel that drops out of the header bar — not a full-screen
 * overlay: no backdrop blur, no page dimming, no scroll lock. Its height
 * is its content's (grid-template-rows 0fr → 1fr animates that without a
 * fixed max-height); submenus expand INSIDE it with the same technique, so
 * the panel grows smoothly with them.
 * ---------------------------------------------------------------- */

.fwsc-header {
	--fwsc-mobile-gap: 12px;          /* bar → panel                    */
	--fwsc-mobile-radius: 20px;
	--fwsc-mobile-pad-x: 26px;        /* panel side padding             */
	--fwsc-mobile-link-size: 26px;
	--fwsc-mobile-row: 52px;
	--fwsc-mobile-sub-size: 22px;
	--fwsc-mobile-sub-row: 42px;
	--fwsc-mobile-dur: 0.4s;
}

.fwsc-mobile {
	position: absolute;
	left: clamp(16px, 4vw, 30px);
	right: clamp(16px, 4vw, 30px);
	top: calc(100% + var(--fwsc-mobile-gap));
	z-index: 1;
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transform: translateY(-8px);
	pointer-events: none;
	transition:
		grid-template-rows var(--fwsc-mobile-dur) var(--fwsc-ease),
		opacity 0.3s var(--fwsc-ease),
		transform var(--fwsc-mobile-dur) var(--fwsc-ease);
}

.fwsc-mobile.is-open {
	grid-template-rows: 1fr;
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.fwsc-mobile__panel {
	position: relative;
	min-height: 0;
	max-height: calc(100vh - var(--fwsc-pill-height) - 2 * clamp(12px, 1.2vw, 21px) - var(--fwsc-mobile-gap) - 12px);
	max-height: calc(100dvh - var(--fwsc-pill-height) - 2 * clamp(12px, 1.2vw, 21px) - var(--fwsc-mobile-gap) - 12px);
	overflow: hidden auto;
	border-radius: var(--fwsc-mobile-radius);
	color: var(--fwsc-glass-fg);
	transition: color var(--fwsc-fg-dur) var(--fwsc-ease);
}

/* Fallback plate when the glass material is unavailable. */
#fwsc-header:not(.fwsc-header--has-glass-lib) .fwsc-mobile__panel {
	background: rgba(90, 92, 92, 0.55);
}

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

.fwsc-mobile__nav {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 14px 0 0;
}

.fwsc-mobile__list {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0 var(--fwsc-mobile-pad-x) 22px;
}

.fwsc-mobile__item {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	max-width: 100%;
	margin: 0;
}

/* One row per item: the link plus (for groups) the disclosure caret. The
   row is what turns into the green pill when the item is the current
   page, so label and caret share one pill exactly like the reference. */
.fwsc-mobile__row {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	min-height: var(--fwsc-mobile-row);
	padding: 0 8px;
	border-radius: 999px;
	border: 1px solid transparent;
	background: transparent;
	transition:
		background-color 0.3s var(--fwsc-ease),
		border-color 0.3s var(--fwsc-ease),
		color var(--fwsc-fg-dur) var(--fwsc-ease),
		padding 0.3s var(--fwsc-ease);
}

.fwsc-mobile__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 6px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	font-family: var(--fwsc-font-nav);
	font-size: var(--fwsc-mobile-link-size);
	font-weight: 500;
	line-height: 1.15;
	text-align: right;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s var(--fwsc-ease), color var(--fwsc-fg-dur) var(--fwsc-ease);
}

.fwsc-mobile__link:hover,
.fwsc-mobile__link:focus-visible {
	background: var(--fwsc-glass-hover);
}

/* Current page — the green pill of the reference (row-level, so a group's
   caret sits inside it). Hover keeps its own wash, never the pill. */
.fwsc-mobile__item.is-active > .fwsc-mobile__row {
	padding: 0 14px 0 18px;
	background: var(--fwsc-green);
	border-color: var(--fwsc-green-border);
	color: var(--fwsc-ink);
}

.fwsc-mobile__item.is-active > .fwsc-mobile__row .fwsc-mobile__link {
	font-family: var(--fwsc-font-accent);
	letter-spacing: 0.2px;
}

.fwsc-mobile__item.is-active > .fwsc-mobile__row .fwsc-mobile__link:hover,
.fwsc-mobile__item.is-active > .fwsc-mobile__row .fwsc-mobile__link:focus-visible {
	background: rgba(30, 30, 30, 0.08);
}

/* Disclosure caret (groups). Rotates when its submenu is open. */
.fwsc-mobile__disclose {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: -4px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.2s var(--fwsc-ease), color var(--fwsc-fg-dur) var(--fwsc-ease);
}

.fwsc-mobile__disclose:hover,
.fwsc-mobile__disclose:focus-visible {
	background: var(--fwsc-glass-hover);
}

.fwsc-mobile__item.is-active > .fwsc-mobile__row .fwsc-mobile__disclose:hover,
.fwsc-mobile__item.is-active > .fwsc-mobile__row .fwsc-mobile__disclose:focus-visible {
	background: rgba(30, 30, 30, 0.08);
}

.fwsc-mobile__row .fwsc-icon--caret {
	width: 14px;
	height: 9px;
	transform: scaleY(-1); /* down */
	transition: transform 0.3s var(--fwsc-ease);
}

.fwsc-mobile__item.is-open > .fwsc-mobile__row .fwsc-icon--caret {
	transform: scaleY(1); /* up */
}

/* Submenu: expands in place; the panel grows with it. */
.fwsc-mobile__sub {
	display: grid;
	grid-template-rows: 0fr;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transition:
		grid-template-rows 0.35s var(--fwsc-ease),
		opacity 0.25s var(--fwsc-ease),
		visibility 0s linear 0.35s;
}

.fwsc-mobile__item.is-open > .fwsc-mobile__sub {
	grid-template-rows: 1fr;
	opacity: 1;
	visibility: visible;
	transition:
		grid-template-rows 0.35s var(--fwsc-ease),
		opacity 0.25s var(--fwsc-ease) 0.05s,
		visibility 0s linear 0s;
}

.fwsc-mobile__sublist {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	min-height: 0;
	overflow: hidden;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fwsc-mobile__subitem {
	margin: 0;
}

.fwsc-mobile__subitem:first-child {
	margin-top: 4px;
}

.fwsc-mobile__subitem:last-child {
	margin-bottom: 8px;
}

.fwsc-mobile__sublink {
	display: inline-flex;
	align-items: center;
	min-height: var(--fwsc-mobile-sub-row);
	padding: 0 14px;
	border-radius: 12px;
	font-family: var(--fwsc-font-nav);
	font-size: var(--fwsc-mobile-sub-size);
	font-weight: 400;
	line-height: 1.2;
	text-align: right;
	color: inherit;
	text-decoration: none;
	text-decoration-color: transparent;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
	transition:
		background-color 0.2s var(--fwsc-ease),
		color var(--fwsc-fg-dur) var(--fwsc-ease),
		text-decoration-color 0.3s var(--fwsc-ease);
}

.fwsc-mobile__sublink:hover,
.fwsc-mobile__sublink:focus-visible {
	background: var(--fwsc-glass-hover);
}

/* Current page inside a submenu: Finewerk green + green underline. */
.fwsc-mobile__subitem.is-active .fwsc-mobile__sublink {
	color: var(--fwsc-glass-accent);
	text-decoration: underline;
	text-decoration-color: var(--fwsc-glass-accent-line);
}

/* Footer: hairline divider + CTA. */
.fwsc-mobile__footer {
	display: flex;
	justify-content: flex-end;
	margin: 0 14px;
	padding: 24px calc(var(--fwsc-mobile-pad-x) - 14px) 24px;
	border-top: 1px solid var(--fwsc-glass-line);
	transition: border-color var(--fwsc-fg-dur) var(--fwsc-ease);
}

.fwsc-mobile__cta {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	height: auto;
	min-height: 44px;
	padding: 0 8px;
	border-radius: 12px;
	background: transparent;
	box-shadow: none;
	text-decoration: none;
	white-space: nowrap;
	font-family: var(--fwsc-font-nav);
	font-size: var(--fwsc-mobile-link-size);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.15;
	gap: 10px;
	color: inherit;
}

.fwsc-mobile__cta:hover,
.fwsc-mobile__cta:focus-visible {
	background: var(--fwsc-glass-hover);
}

.fwsc-mobile__cta .fwsc-icon--arrow {
	width: 18px;
	height: 18px;
}

/* ------------------------------------------------------------------
 * 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`: logo on the left, menu button on the right. */
	.fwsc-header__zone--end {
		margin-left: auto;
	}

	/* Grayer glass for the mobile bar pills and the dropdown panel: the
	   same dynamic material, with a neutral gray plate instead of the
	   near-invisible white one (see refferences/header-mobile-dropdown.png). */
	#fwsc-header .fwsc-surface {
		--fw-glass-dyn-tint: 128, 132, 132;
		--fw-glass-dyn-opacity-min: 0.34;
		--fw-glass-dyn-opacity-max: 0.42;
		--fw-glass-dyn-light-opacity: 0.18;
		--fw-glass-border-opacity: 0.45;
	}

	.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-logo__stack > .fwsc-logo__img,
	.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__panel,
	.fwsc-mobile__row,
	.fwsc-mobile__link,
	.fwsc-mobile__disclose,
	.fwsc-mobile__sub,
	.fwsc-mobile__sublink,
	.fwsc-mobile__footer,
	.fwsc-mobile__cta {
		transition: 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);
	}

	/* The dropdown panel's material goes near-solid; its text follows the
	 * backdrop verdict, which the near-opaque light plate turns to ink. */
	.fwsc-header .fwsc-mobile__panel {
		color: var(--fwsc-ink);
	}
}

/* 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;
}