/* Zenesis v2 — "Frameworks" mega menu (header, ElementsKit).
   Menu item CSS class: zn-fw-menu. Panel root (Elementor container): .zn-fwm →
     .zn-fwm-intro  dark block: the intro (Elementor widgets) and, over it, the preview stage
                    ([zn_frameworks_menu part="stage"]: .zn-fwm-pv per framework — eyebrow, title, subtitle,
                    the diagram's step marks with a gold marker running through them and the current step's name)
     .zn-fwm-dyn    [zn_frameworks_menu]: the index — a column per category (its name and number of frameworks),
                    a row per framework: its number in the category (1, 2, 3 …), name, arrow; the shorter
                    column ends with "Explore All Frameworks" (the Frameworks page)
   Hovering or focusing a tile shows its preview (li.zn-fw-pv + .zn-fwm-pv.is-on, set by fwmenu.js); the framework
   whose page is being viewed is marked (.is-current). Open / close motion as the About menu (abmenu.css).
   Below 1025px ElementsKit shows the item's submenu instead: grouped under the category names and numbered the
   same way.
   Framework sections and the overview cards stop clear of the fixed header when linked to. */

.zn-fwm {
	--zn-fwm-gut: 70px;
	--zn-fwm-gold: var(--e-global-color-primary, #C8A45D);
	--zn-fwm-dark: var(--e-global-color-secondary, #231F20);
	--zn-fwm-ink: var(--e-global-color-text, #0F132B);
	--zn-fwm-body: var(--e-global-color-zn_body, #5F6567);
	--zn-fwm-line: var(--e-global-color-zn_line, #E8E6E3);
	--zn-fwm-cream: var(--e-global-color-zn_cream, #F8F4EC);
	--zn-fwm-head: var(--e-global-typography-zn_h5-font-family, "Geologica"), sans-serif;
	--zn-fwm-text: var(--e-global-typography-zn_small-font-family, "Inter"), sans-serif;
	--zn-fwm-eyebrow: var(--e-global-typography-zn_eyebrow-font-family, "Inter"), sans-serif;
	--zn-fwm-ease: var(--zn-ease-out, cubic-bezier(.16, 1, .3, 1));
	text-align: left;
}
.zn-fwm *, .zn-fwm *::before, .zn-fwm *::after { box-sizing: border-box; }

/* ════════ Panel: open / close (desktop) ════════ */
@media (min-width: 1025px) {
	.ekit-wid-con .elementskit-navbar-nav-default .elementskit-navbar-nav .zn-fw-menu > .elementskit-megamenu-panel {
		max-height: calc(100vh - var(--zn-fwm-top, 80px));
		max-height: calc(100dvh - var(--zn-fwm-top, 80px));
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-8px);
		clip-path: inset(0 0 12% 0);
		transition: opacity .22s ease, transform .3s ease, clip-path .3s ease, visibility 0s linear .3s;
	}
	.ekit-wid-con .elementskit-navbar-nav-default .elementskit-navbar-nav .zn-fw-menu:hover > .elementskit-megamenu-panel,
	.ekit-wid-con .elementskit-navbar-nav-default .elementskit-navbar-nav .zn-fw-menu.zn-fw-open > .elementskit-megamenu-panel {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		clip-path: inset(0 0 -60px 0); /* lets the panel shadow show */
		transition: opacity .32s ease .05s, transform .6s var(--zn-ease-out, ease) .05s, clip-path .6s var(--zn-ease-out, ease) .05s, visibility 0s linear .05s;
	}
	/* Esc or a framework link closes it even while the pointer is still over the item */
	.ekit-wid-con .elementskit-navbar-nav-default .elementskit-navbar-nav .zn-fw-menu.zn-fw-shut > .elementskit-megamenu-panel {
		opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px);
		transition: opacity .18s ease, visibility 0s linear .18s;
	}
}

/* ════════ Layout ════════ */
.zn-fwm > .e-con-inner > .zn-fwm-dyn.elementor-widget { --flex-grow: 1; --flex-shrink: 1; --flex-basis: 0%; flex: 1 1 0%; min-width: 0; } /* Elementor "grow" never shrinks */
.zn-fwm > .e-con-inner > .zn-fwm-intro { flex: none; min-height: 284px; } /* fits the longest preview (fwmenu.js sets the exact height) */
.zn-fwm .zn-fwm-dyn { align-self: stretch; }
.zn-fwm .zn-fwm-dyn > .elementor-widget-container, .zn-fwm .zn-fwm-dyn .elementor-shortcode { height: 100%; }

/* ════════ Intro (dark) ════════ */
.zn-fwm .zn-fwm-intro { position: relative; overflow: hidden; isolation: isolate; }
.zn-fwm .zn-fwm-intro > .elementor-widget { position: relative; z-index: 1; transition: opacity .35s ease, translate .5s var(--zn-fwm-ease); }
.zn-fwm .zn-fwm-intro > .zn-fwm-intro__decowrap.elementor-widget { position: absolute; inset: 0; z-index: 0; margin: 0; pointer-events: none; }
.zn-fwm .zn-fwm-intro > .zn-fwm-intro__stagewrap.elementor-widget { position: absolute; inset: 0; z-index: 2; margin: 0; pointer-events: none; transition: none; }
.zn-fwm .zn-fwm-intro__stagewrap > .elementor-widget-container, .zn-fwm .zn-fwm-intro__stagewrap .elementor-shortcode { height: 100%; }
.zn-fwm .zn-fwm-intro__text p { margin: 0; font-size: 13.5px; line-height: 1.65; }
.zn-fwm .zn-fwm-intro__title .elementor-heading-title { text-wrap: balance; }
.zn-fwm .zn-fwm-intro__eyebrow .elementor-heading-title { display: inline-flex; align-items: center; gap: 12px; }
.zn-fwm .zn-fwm-intro__eyebrow .elementor-heading-title::before {
	content: ""; width: 24px; height: 1px; background: currentColor;
	transform-origin: left; transition: transform .7s var(--zn-fwm-ease) .25s;
}

.zn-fwm .zn-fwm-intro__deco { position: absolute; inset: 0; }
.zn-fwm .zn-fwm-intro__deco span { position: absolute; display: block; transition: opacity .6s ease; }
.zn-fwm .zn-fwm-intro__deco span:nth-child(1),
.zn-fwm .zn-fwm-intro__deco span:nth-child(2) { /* two slow gold arcs in the corner */
	border-radius: 50%;
	border: 1px solid transparent;
	border-top-color: color-mix(in srgb, var(--zn-fwm-gold) 55%, transparent);
	border-left-color: color-mix(in srgb, var(--zn-fwm-gold) 18%, transparent);
	animation: zn-fwm-spin 26s linear infinite;
	animation-play-state: paused;
}
.zn-fwm .zn-fwm-intro__deco span:nth-child(1) { width: 200px; height: 200px; right: -90px; bottom: -110px; }
.zn-fwm .zn-fwm-intro__deco span:nth-child(2) { width: 140px; height: 140px; right: -60px; bottom: -80px; animation-direction: reverse; animation-duration: 18s; }
.zn-fwm .zn-fwm-intro__deco span:nth-child(3) { /* skewed gold light, as in the page heroes */
	right: -40px; bottom: -40%; width: 120px; height: 140%;
	background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--zn-fwm-gold) 16%, transparent));
	transform: skewX(-24deg);
	animation: zn-fwm-drift 9s ease-in-out infinite alternate;
	animation-play-state: paused;
}
@keyframes zn-fwm-spin { to { rotate: 360deg; } }
@keyframes zn-fwm-drift { from { translate: 0 0; opacity: .7; } to { translate: -28px 0; opacity: 1; } }

/* ════════ Preview stage (inside the dark block) ════════ */
.zn-fwm .zn-fwm-stage { position: absolute; inset: 0; }
.zn-fwm .zn-fwm-pv {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
	padding: 28px 32px;
	opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s;
}
.zn-fwm .zn-fwm-pv.is-on { opacity: 1; visibility: inherit; transition: opacity .35s ease, visibility 0s; }
.zn-fwm .zn-fwm-pv > * { opacity: 0; translate: 0 10px; transition: opacity .2s ease, translate .2s ease; }
.zn-fwm .zn-fwm-pv.is-on > * { opacity: 1; translate: 0 0; transition: opacity .5s ease var(--d, 0s), translate .7s var(--zn-fwm-ease) var(--d, 0s); }
.zn-fwm .zn-fwm-pv > :nth-child(2) { --d: .05s; }
.zn-fwm .zn-fwm-pv > :nth-child(3) { --d: .1s; }
.zn-fwm .zn-fwm-pv > :nth-child(4) { --d: .15s; }
.zn-fwm .zn-fwm-pv > :nth-child(5) { --d: .2s; }

.zn-fwm .zn-fwm-pv__eyebrow {
	display: inline-flex; align-items: center; gap: 12px;
	font-family: var(--zn-fwm-eyebrow); font-weight: var(--e-global-typography-zn_eyebrow-font-weight, 500);
	font-size: var(--e-global-typography-zn_eyebrow-font-size, 12px); line-height: 1.6;
	letter-spacing: var(--e-global-typography-zn_eyebrow-letter-spacing, .2em); text-transform: uppercase;
	color: var(--zn-fwm-gold);
}
.zn-fwm .zn-fwm-pv__eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.zn-fwm .zn-fwm-pv__title {
	font-family: var(--e-global-typography-zn_h4-font-family, "Geologica"), sans-serif;
	font-weight: var(--e-global-typography-zn_h4-font-weight, 500);
	font-size: 20px; line-height: var(--e-global-typography-zn_h4-line-height, 1.3); /* the H4 style, a step smaller: two lines for the longest name */
	color: var(--e-global-color-zn_white, #fff); text-wrap: balance;
}
.zn-fwm .zn-fwm-pv__sub {
	font-family: var(--zn-fwm-text); font-size: 13.5px; line-height: 1.6;
	color: var(--e-global-color-zn_body_dark, rgba(255, 255, 255, .7));
}
/* the diagram's marks on a fine line; the gold marker runs through them */
.zn-fwm .zn-fwm-pv__marks { position: relative; display: flex; gap: 8px; margin-top: auto; padding-top: 6px; }
.zn-fwm .zn-fwm-pv__marks::before {
	content: ""; position: absolute; left: 14px; right: 14px; top: calc(6px + 14px); height: 1px;
	background: color-mix(in srgb, var(--zn-fwm-gold) 35%, transparent);
}
.zn-fwm .zn-fwm-pv__mark {
	position: relative; display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--zn-fwm-gold) 55%, transparent); background: var(--zn-fwm-dark);
	font-family: var(--zn-fwm-head); font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .02em;
	font-variant-numeric: tabular-nums; color: var(--zn-fwm-gold);
	scale: .6; opacity: 0;
	transition: scale .5s var(--zn-fwm-ease), opacity .3s ease, background-color .4s ease, color .4s ease, box-shadow .4s ease;
}
.zn-fwm .zn-fwm-pv.is-on .zn-fwm-pv__mark { scale: 1; opacity: 1; transition-delay: calc(.2s + var(--k) * .05s), calc(.2s + var(--k) * .05s), 0s, 0s, 0s; }
.zn-fwm .zn-fwm-pv.is-on .zn-fwm-pv__mark.is-at {
	background: var(--zn-fwm-gold); color: var(--zn-fwm-dark);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--zn-fwm-gold) 18%, transparent);
	transition-delay: 0s;
}
.zn-fwm .zn-fwm-pv__steps { position: relative; display: block; width: 100%; min-height: 1.45em; font-family: var(--zn-fwm-text); font-size: 13px; line-height: 1.45; }
.zn-fwm .zn-fwm-pv__step {
	position: absolute; left: 0; top: 0; right: 0;
	color: var(--e-global-color-zn_white, #fff); opacity: 0; translate: 0 6px;
	transition: opacity .3s ease, translate .4s var(--zn-fwm-ease);
}
.zn-fwm .zn-fwm-pv__step.is-at { opacity: .85; translate: 0 0; }

/* the intro gives way to the preview */
.zn-fw-menu.zn-fw-pv:is(:hover, .zn-fw-open):not(.zn-fw-shut) .zn-fwm-intro > .elementor-widget:not(.zn-fwm-intro__decowrap):not(.zn-fwm-intro__stagewrap) {
	opacity: 0; translate: 0 -8px; transition: opacity .25s ease, translate .4s var(--zn-fwm-ease);
}
.zn-fw-menu.zn-fw-pv .zn-fwm-intro__deco span { opacity: .45; }

/* ════════ Index: one column per category, one row per framework (number, name) ════════ */
.zn-fwm .zn-fwm-index {
	display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
	grid-template-rows: auto repeat(var(--rows, 1), minmax(0, 1fr)); column-gap: 40px; height: 100%;
}
.zn-fwm .zn-fwm-group { position: relative; display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; min-width: 0; }
.zn-fwm .zn-fwm-group + .zn-fwm-group::before { /* hairline between categories */
	content: ""; position: absolute; left: -20px; top: 4px; bottom: 0; width: 1px; background: var(--zn-fwm-line);
}
.zn-fwm .zn-fwm-group__label {
	display: flex; align-items: center; gap: 12px; margin: 0; padding-bottom: 14px; min-width: 0;
	font-family: var(--zn-fwm-eyebrow); font-weight: var(--e-global-typography-zn_eyebrow-font-weight, 500);
	font-size: var(--e-global-typography-zn_eyebrow-font-size, 12px); line-height: 1.6;
	letter-spacing: var(--e-global-typography-zn_eyebrow-letter-spacing, .2em); text-transform: uppercase;
	color: var(--zn-fwm-ink);
}
.zn-fwm .zn-fwm-group__label::before { content: ""; flex: none; width: 6px; height: 6px; rotate: 45deg; background: var(--zn-fwm-gold); }
.zn-fwm .zn-fwm-group__name { white-space: nowrap; }
.zn-fwm .zn-fwm-group__count {
	margin-left: auto; flex: none; padding: 3px 10px; border-radius: 999px;
	background: var(--zn-fwm-cream); color: color-mix(in srgb, var(--zn-fwm-gold) 70%, var(--zn-fwm-ink));
	font-size: 10.5px; line-height: 1.4; letter-spacing: .12em; white-space: nowrap;
}
.zn-fwm .zn-fwm-group__count b { font-weight: 600; }

.zn-fwm a.zn-fwm-item, .zn-fwm a.zn-fwm-all {
	position: relative; display: flex; align-items: center; gap: 14px; min-width: 0;
	padding: 10px 12px 10px 10px;
	border-top: 1px solid var(--zn-fwm-line); color: var(--zn-fwm-ink); text-decoration: none;
	isolation: isolate;
	transition: background-color .45s ease;
}
.zn-fwm .zn-fwm-group > a:last-child { border-bottom: 1px solid var(--zn-fwm-line); }
.zn-fwm a.zn-fwm-item::before { /* gold rule drawn down the left edge */
	content: ""; position: absolute; left: 0; top: -1px; bottom: 0; width: 2px; background: var(--zn-fwm-gold);
	scale: 1 0; transform-origin: 50% 0; transition: scale .5s var(--zn-fwm-ease);
}
/* its number in the category */
.zn-fwm .zn-fwm-item__num {
	flex: none; min-width: 20px; text-align: center;
	font-family: var(--zn-fwm-head); font-size: 18px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums;
	color: var(--zn-fwm-gold);
}
.zn-fwm .zn-fwm-item__title {
	flex: 1; min-width: 0;
	font-family: var(--zn-fwm-head);
	font-size: 15px; font-weight: var(--e-global-typography-zn_h5-font-weight, 500);
	line-height: 1.32; letter-spacing: -.01em; text-wrap: balance;
	color: var(--zn-fwm-ink);
	transition: color .3s ease, translate .5s var(--zn-fwm-ease);
}
.zn-fwm .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.zn-fwm :is(.zn-fwm-item__arrow, .zn-fwm-all__arrow) {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--zn-fwm-ink) 14%, transparent); color: var(--zn-fwm-ink);
	opacity: .55;
	transition: background-color .4s ease, border-color .4s ease, color .4s ease, opacity .4s ease;
}
.zn-fwm :is(.zn-fwm-item__arrow, .zn-fwm-all__arrow) svg { width: 10px; height: 10px; transition: translate .5s var(--zn-fwm-ease); } /* each row opens a framework page */

/* the shorter column ends with the way to all frameworks */
.zn-fwm a.zn-fwm-all {
	grid-row: span var(--span, 1); align-items: flex-end; justify-content: space-between; padding: 16px 14px 14px 16px;
	background: linear-gradient(135deg, var(--zn-fwm-cream), transparent 80%);
}
.zn-fwm .zn-fwm-all__text {
	display: inline-flex; align-items: center; gap: 12px;
	font-family: var(--zn-fwm-eyebrow); font-weight: var(--e-global-typography-zn_eyebrow-font-weight, 500);
	font-size: 11.5px; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; color: var(--zn-fwm-ink);
	transition: color .3s ease;
}
.zn-fwm .zn-fwm-all__text::before { content: ""; width: 24px; height: 1px; background: var(--zn-fwm-gold); transition: width .5s var(--zn-fwm-ease); }

/* hovered / focused row (and the one being previewed) */
.zn-fwm a.zn-fwm-item:is(:hover, :focus-visible, .is-active) { background-color: var(--zn-fwm-cream); }
.zn-fwm a.zn-fwm-item:is(:hover, :focus-visible, .is-active)::before { scale: 1 1; }
.zn-fwm a.zn-fwm-item:is(:hover, :focus-visible, .is-active) .zn-fwm-item__title { translate: 4px 0; }
.zn-fwm a:is(.zn-fwm-item, .zn-fwm-all):is(:hover, :focus-visible, .is-active) :is(.zn-fwm-item__arrow, .zn-fwm-all__arrow) {
	opacity: 1; background: var(--zn-fwm-gold); border-color: var(--zn-fwm-gold); color: #fff;
}
.zn-fwm a:is(.zn-fwm-item, .zn-fwm-all):is(:hover, :focus-visible, .is-active) :is(.zn-fwm-item__arrow, .zn-fwm-all__arrow) svg { translate: 2px 0; }
.zn-fwm a.zn-fwm-all:is(:hover, :focus-visible) .zn-fwm-all__text::before { width: 36px; }
.zn-fwm a:is(.zn-fwm-item, .zn-fwm-all):focus-visible { outline: 2px solid var(--zn-fwm-gold); outline-offset: -2px; }
/* the framework whose page is being viewed */
.zn-fwm a.zn-fwm-item.is-current .zn-fwm-item__title { color: var(--zn-fwm-gold); }
.zn-fwm a.zn-fwm-item.is-current::before { scale: 1 1; }

/* ════════ Entrance: content follows the panel in (only inside the header menu) ════════ */
@media (min-width: 1025px) {
	.zn-fw-menu .zn-fwm-intro > .elementor-widget:not(.zn-fwm-intro__decowrap):not(.zn-fwm-intro__stagewrap),
	.zn-fw-menu .zn-fwm-group__label,
	.zn-fw-menu :is(a.zn-fwm-item, a.zn-fwm-all) {
		opacity: 0; transform: translateY(8px);
		transition: opacity .2s ease, transform .2s ease, background-color .45s ease;
	}
	.zn-fw-menu .zn-fwm-intro__eyebrow .elementor-heading-title::before { transform: scaleX(0); }
	.zn-fw-menu:is(:hover, .zn-fw-open):not(.zn-fw-shut) .zn-fwm-intro > .elementor-widget:not(.zn-fwm-intro__decowrap):not(.zn-fwm-intro__stagewrap),
	.zn-fw-menu:is(:hover, .zn-fw-open):not(.zn-fw-shut) .zn-fwm-group__label,
	.zn-fw-menu:is(:hover, .zn-fw-open):not(.zn-fw-shut) :is(a.zn-fwm-item, a.zn-fwm-all) {
		opacity: 1; transform: none;
		transition: opacity .5s ease var(--zn-fwm-d, .1s), transform .7s var(--zn-fwm-ease, ease) var(--zn-fwm-d, .1s), background-color .45s ease, translate .5s var(--zn-fwm-ease);
	}
	.zn-fw-menu .zn-fwm-intro > .elementor-widget:nth-child(2) { --zn-fwm-d: .08s; }
	.zn-fw-menu .zn-fwm-intro > .elementor-widget:nth-child(3) { --zn-fwm-d: .14s; }
	.zn-fw-menu .zn-fwm-intro > .elementor-widget:nth-child(4) { --zn-fwm-d: .2s; }
	.zn-fw-menu .zn-fwm-group__label { --zn-fwm-d: calc(.08s + var(--g, 0) * .12s); }
	.zn-fw-menu a.zn-fwm-item { --zn-fwm-d: calc(.12s + var(--i, 0) * .05s); }
	.zn-fw-menu a.zn-fwm-all { --zn-fwm-d: .45s; }
	.zn-fw-menu:is(:hover, .zn-fw-open):not(.zn-fw-shut) .zn-fwm-intro__eyebrow .elementor-heading-title::before { transform: scaleX(1); }
	.zn-fw-menu:is(:hover, .zn-fw-open):not(.zn-fw-shut) .zn-fwm-intro__deco span { animation-play-state: running; }
}

/* ════════ Laptop (1025–1280) ════════ */
@media (max-width: 1280px) {
	.zn-fwm .zn-fwm-index { column-gap: 32px; }
	.zn-fwm .zn-fwm-group + .zn-fwm-group::before { left: -16px; }
	.zn-fwm .zn-fwm-group__label { gap: 10px; letter-spacing: .16em; }
	.zn-fwm .zn-fwm-group__count { padding: 3px 8px; letter-spacing: .08em; }
	.zn-fwm a.zn-fwm-item { padding: 9px 10px 9px 8px; gap: 12px; }
	.zn-fwm .zn-fwm-item__num { font-size: 16px; }
	.zn-fwm .zn-fwm-item__title { font-size: 14px; }
	.zn-fwm :is(.zn-fwm-item__arrow, .zn-fwm-all__arrow) { width: 26px; height: 26px; }
	.zn-fwm .zn-fwm-pv { padding: 24px 26px; }
	.zn-fwm > .e-con-inner > .zn-fwm-intro { min-height: 300px; }
	.zn-fwm .zn-fwm-pv__eyebrow { gap: 10px; font-size: 11px; letter-spacing: .14em; white-space: nowrap; }
	.zn-fwm .zn-fwm-pv__eyebrow::before { width: 16px; }
	.zn-fwm .zn-fwm-pv__title { font-size: 18px; }
	.zn-fwm .zn-fwm-pv__steps { min-height: 2.9em; }
	.zn-fwm .zn-fwm-pv__sub { font-size: 13px; line-height: 1.55; }
	.zn-fwm .zn-fwm-pv__marks { gap: 6px; }
	.zn-fwm .zn-fwm-pv__mark { width: 25px; height: 25px; font-size: 10px; }
	.zn-fwm .zn-fwm-pv__marks::before { top: calc(6px + 12.5px); }
}

@media (max-width: 1180px) { /* narrow laptops: the count pill keeps just the number (the word stays for screen readers) */
	.zn-fwm .zn-fwm-group__unit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.zn-fwm .zn-fwm-group__count { padding: 3px 9px; }
	.zn-fwm .zn-fwm-group__label { letter-spacing: .12em; }
}

/* ════════ Below 1025px: the panel is not used (the editor still previews it) ════════ */
@media (max-width: 1024px) {
	.zn-fwm > .e-con-inner { flex-wrap: wrap; }
	.zn-fwm > .e-con-inner > .zn-fwm-intro, .zn-fwm > .e-con-inner > .zn-fwm-dyn { width: 100%; }
	.zn-fwm .zn-fwm-index { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
	.zn-fwm .zn-fwm-group { grid-row: auto; grid-template-rows: none; }

	/* off-canvas submenu: frameworks numbered under their category, roomy touch targets */
	.elementskit-navbar-nav .zn-fw-menu > .elementskit-dropdown > li.zn-fw-link--first:not(:first-child) { margin-top: 10px; }
	.ekit-wid-con .elementskit-navbar-nav .zn-fw-menu > .elementskit-dropdown > li > a {
		position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 14px;
		min-height: 48px; text-align: left;
	}
	.ekit-wid-con .elementskit-navbar-nav .zn-fw-menu > .elementskit-dropdown > li > a[data-zn-group] { flex-wrap: wrap; row-gap: 6px; }
	.elementskit-navbar-nav .zn-fw-menu > .elementskit-dropdown > li > a[data-zn-num]::before {
		content: attr(data-zn-num);
		content: attr(data-zn-num) / ""; /* decorative */
		flex: none; min-width: 16px; text-align: center;
		font-family: var(--e-global-typography-zn_h5-font-family, "Geologica"), sans-serif;
		font-size: 13px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums;
		color: var(--e-global-color-primary, #C8A45D);
	}
	/* the category name above its first framework (decorative: the menu names stay the links' names) */
	.elementskit-navbar-nav .zn-fw-menu > .elementskit-dropdown > li > a[data-zn-group]::after {
		content: attr(data-zn-group);
		content: attr(data-zn-group) / "";
		order: -1; flex: 0 0 100%; display: flex; align-items: center; gap: 10px;
		font-family: var(--e-global-typography-zn_eyebrow-font-family, "Inter"), sans-serif;
		font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase;
		color: var(--e-global-color-primary, #C8A45D);
		pointer-events: none;
	}
}

/* ════════ Framework sections (and the overview cards, which keep the old /frameworks/#… anchors) stop clear of the fixed header ════════ */
body :is(.zn-fkx, .zn-fko__card)[id] { scroll-margin-top: var(--zn-hdr-hc, 80px); }

@media (hover: none) {
	.zn-fwm a.zn-fwm-item:hover { translate: none; }
}
@media (prefers-reduced-motion: reduce) {
	.zn-fwm *, .zn-fwm *::before, .zn-fwm *::after,
	.ekit-wid-con .elementskit-navbar-nav-default .elementskit-navbar-nav .zn-fw-menu > .elementskit-megamenu-panel {
		transition-duration: .01s !important; transition-delay: 0s !important; animation: none !important;
	}
	.zn-fw-menu .zn-fwm-item, .zn-fw-menu .zn-fwm-all, .zn-fw-menu .zn-fwm-group__label, .zn-fw-menu .zn-fwm-intro > .elementor-widget { transform: none !important; }
	.ekit-wid-con .elementskit-navbar-nav-default .elementskit-navbar-nav .zn-fw-menu > .elementskit-megamenu-panel { transform: none !important; }
}