/* Zenesis v2 — "About" mega menu (header, ElementsKit).
   Menu item CSS class: zn-ab-menu. Panel root (Elementor container): .zn-abm → .zn-abm-intro (Elementor widgets)
   + [zn_about_menu] (.zn-abm-links, mu-plugins/zenesis-v2-about-menu.php):
     .zn-abm-list   the About page sections as a numbered list (number, eyebrow, name, arrow), as tall as the intro
     .zn-abm-stage  one featured picture: the section in focus (.zn-abm-slide.is-on, set by abmenu.js), otherwise the
                    first one (on the About page, the section in view)
   Same panel motion as the Knowledge Center menu (kcmenu.css), in a shorter layout. On the About page the section
   in view is marked (.is-current, set by abmenu.js). Below 1025px ElementsKit shows the item's submenu instead.
   The About page sections stop clear of the fixed header when linked to. */

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

/* ════════ Panel: open / close (desktop) ════════ */
@media (min-width: 1025px) {
	.ekit-wid-con .elementskit-navbar-nav-default .elementskit-navbar-nav .zn-ab-menu > .elementskit-megamenu-panel {
		max-height: calc(100vh - var(--zn-abm-top, 80px));
		max-height: calc(100dvh - var(--zn-abm-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-ab-menu:hover > .elementskit-megamenu-panel,
	.ekit-wid-con .elementskit-navbar-nav-default .elementskit-navbar-nav .zn-ab-menu.zn-ab-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 closes it even while the pointer is still over the item */
	.ekit-wid-con .elementskit-navbar-nav-default .elementskit-navbar-nav .zn-ab-menu.zn-ab-shut > .elementskit-megamenu-panel {
		opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px);
		transition: opacity .18s ease, visibility 0s linear .18s;
	}
}

/* ════════ Layout ════════ */
.zn-abm > .e-con-inner > .zn-abm-dyn.elementor-widget { --flex-grow: 1; --flex-shrink: 1; --flex-basis: 0%; flex: 1 1 0%; min-width: 0; } /* Elementor "grow" never shrinks */
.zn-abm > .e-con-inner > .zn-abm-intro { flex: none; }
.zn-abm .zn-abm-dyn > .elementor-widget-container, .zn-abm .zn-abm-dyn .elementor-shortcode { height: 100%; }

/* ════════ Intro (dark) ════════ */
.zn-abm .zn-abm-intro { position: relative; overflow: hidden; isolation: isolate; }
.zn-abm .zn-abm-intro > .elementor-widget { position: relative; z-index: 1; }
.zn-abm .zn-abm-intro > .zn-abm-intro__decowrap.elementor-widget { position: absolute; inset: 0; z-index: 0; margin: 0; pointer-events: none; }
.zn-abm .zn-abm-intro__text p { margin: 0; }
.zn-abm .zn-abm-intro__title .elementor-heading-title { text-wrap: balance; }
.zn-abm .zn-abm-intro__eyebrow .elementor-heading-title { display: inline-flex; align-items: center; gap: 12px; }
.zn-abm .zn-abm-intro__eyebrow .elementor-heading-title::before {
	content: ""; width: 24px; height: 1px; background: currentColor;
	transform-origin: left; transition: transform .7s var(--zn-abm-ease) .25s;
}

.zn-abm .zn-abm-intro__deco { position: absolute; inset: 0; }
.zn-abm .zn-abm-intro__deco span { position: absolute; display: block; }
.zn-abm .zn-abm-intro__deco span:nth-child(1),
.zn-abm .zn-abm-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-abm-gold) 55%, transparent);
	border-left-color: color-mix(in srgb, var(--zn-abm-gold) 18%, transparent);
	animation: zn-abm-spin 26s linear infinite;
	animation-play-state: paused;
}
.zn-abm .zn-abm-intro__deco span:nth-child(1) { width: 260px; height: 260px; right: -110px; bottom: -120px; }
.zn-abm .zn-abm-intro__deco span:nth-child(2) { width: 180px; height: 180px; right: -70px; bottom: -80px; animation-direction: reverse; animation-duration: 18s; }
.zn-abm .zn-abm-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-abm-gold) 16%, transparent));
	transform: skewX(-24deg);
	animation: zn-abm-drift 9s ease-in-out infinite alternate;
	animation-play-state: paused;
}
@keyframes zn-abm-spin { to { rotate: 360deg; } }
@keyframes zn-abm-drift { from { translate: 0 0; opacity: .7; } to { translate: -28px 0; opacity: 1; } }


/* ════════ Sections: a numbered list beside one featured picture ════════ */
.zn-abm .zn-abm-dyn { align-self: stretch; }
.zn-abm .zn-abm-links {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .78fr); gap: clamp(24px, 2.4vw, 40px); height: 100%;
}

/* list */
.zn-abm .zn-abm-list {
	display: grid; grid-template-rows: repeat(var(--n, 4), minmax(0, 1fr)); align-content: stretch;
	border-top: 1px solid var(--zn-abm-line); border-bottom: 1px solid var(--zn-abm-line);
}
.zn-abm a.zn-abm-row {
	position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 0 16px;
	min-height: 60px; padding: 10px 6px 10px 18px;
	color: var(--zn-abm-ink); text-decoration: none; isolation: isolate;
	transition: padding-left .5s var(--zn-abm-ease);
}
.zn-abm a.zn-abm-row + a.zn-abm-row { border-top: 1px solid var(--zn-abm-line); }
.zn-abm a.zn-abm-row::before { /* soft wash behind the row in focus */
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(90deg, var(--zn-abm-light), color-mix(in srgb, var(--zn-abm-light) 0%, transparent));
	opacity: 0; transition: opacity .45s ease;
}
.zn-abm a.zn-abm-row::after { /* gold bar on the left */
	content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: var(--zn-abm-gold);
	scale: 1 0; transition: scale .5s var(--zn-abm-ease);
}
.zn-abm .zn-abm-row__num {
	font-family: var(--zn-abm-head); font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: .06em;
	font-variant-numeric: tabular-nums; color: var(--zn-abm-gold);
}
.zn-abm .zn-abm-row__text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.zn-abm .zn-abm-row__eyebrow {
	font-family: var(--zn-abm-text); font-size: 10.5px; font-weight: 500; line-height: 1.3; letter-spacing: .18em; text-transform: uppercase;
	color: var(--zn-abm-muted); transition: color .4s ease;
}
.zn-abm .zn-abm-row__title {
	font-family: var(--zn-abm-head); font-size: 17px; font-weight: var(--e-global-typography-zn_h5-font-weight, 500);
	line-height: 1.3; letter-spacing: -.01em; color: var(--zn-abm-ink); transition: color .35s ease;
}
.zn-abm .zn-abm-row__arrow {
	display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--zn-abm-ink) 14%, transparent); color: var(--zn-abm-ink);
	transition: background-color .4s ease, border-color .4s ease, color .4s ease;
}
.zn-abm .zn-abm-row__arrow svg { width: 10px; height: 10px; rotate: 90deg; transition: translate .5s var(--zn-abm-ease); } /* points down the page */

.zn-abm a.zn-abm-row:is(:hover, .is-active, :focus-visible) { padding-left: 24px; }
.zn-abm a.zn-abm-row:is(:hover, .is-active, :focus-visible)::before { opacity: 1; }
.zn-abm a.zn-abm-row:is(:hover, .is-active, :focus-visible)::after { scale: 1 1; }
.zn-abm a.zn-abm-row:is(:hover, .is-active, :focus-visible) .zn-abm-row__eyebrow { color: var(--zn-abm-gold); }
.zn-abm a.zn-abm-row:is(:hover, .is-active, :focus-visible) .zn-abm-row__arrow { background: var(--zn-abm-gold); border-color: var(--zn-abm-gold); color: #fff; }
.zn-abm a.zn-abm-row:is(:hover, .is-active, :focus-visible) .zn-abm-row__arrow svg { translate: 0 2px; }
.zn-abm a.zn-abm-row:focus-visible { outline: 2px solid var(--zn-abm-gold); outline-offset: -2px; }
/* the section currently in view on the About page */
.zn-abm a.zn-abm-row.is-current .zn-abm-row__title { color: var(--zn-abm-gold); }
.zn-abm a.zn-abm-row.is-current::after { scale: 1 1; }

/* featured picture: one per section, stacked; the one in focus fades in */
.zn-abm .zn-abm-stage { position: relative; overflow: hidden; isolation: isolate; min-height: 220px; background: var(--zn-abm-light); }
.zn-abm .zn-abm-stage::after { /* hairline gold frame, inset */
	content: ""; position: absolute; inset: 10px; z-index: 3; pointer-events: none;
	border: 1px solid color-mix(in srgb, var(--zn-abm-gold) 40%, transparent);
}
.zn-abm .zn-abm-slide { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity .55s ease; }
.zn-abm .zn-abm-slide.is-on { opacity: 1; z-index: 1; }
.zn-abm .zn-abm-slide > img {
	position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0;
	object-fit: cover; object-position: 50% 25%;
	scale: 1.06; transition: scale 1.4s var(--zn-abm-ease);
}
.zn-abm .zn-abm-slide.is-on > img { scale: 1; }
.zn-abm .zn-abm-slide--photo::before { /* shade so the tag reads */
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(0deg, rgb(35 31 32 / .55), rgb(35 31 32 / 0) 45%);
}
.zn-abm .zn-abm-slide--cutout {
	background: radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--zn-abm-gold) 24%, transparent), transparent 60%), var(--zn-abm-light);
}
.zn-abm .zn-abm-slide--cutout > img { inset: 14% 0 0; height: 86%; object-fit: contain; object-position: 50% 100%; }
.zn-abm .zn-abm-slide--team {
	background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--zn-abm-gold) 16%, transparent), transparent 65%), var(--zn-abm-light);
}
.zn-abm .zn-abm-slide__faces {
	position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, auto); place-content: center; gap: 10px;
	padding: 24px 24px 40px;
}
.zn-abm .zn-abm-slide__faces img, .zn-abm .zn-abm-slide__more {
	display: block; width: clamp(44px, 3.4vw, 62px); height: auto; aspect-ratio: 1; border-radius: 50%; margin: 0;
	object-fit: cover; object-position: 50% 15%; border: 2px solid #fff; background: #fff;
	box-shadow: 0 8px 18px -12px rgb(15 19 43 / .45);
	translate: 0 8px; opacity: 0; transition: translate .7s var(--zn-abm-ease), opacity .5s ease;
}
.zn-abm .zn-abm-slide.is-on .zn-abm-slide__faces > * { translate: 0 0; opacity: 1; }
.zn-abm .zn-abm-slide__faces > :nth-child(2) { transition-delay: .03s; }
.zn-abm .zn-abm-slide__faces > :nth-child(3) { transition-delay: .06s; }
.zn-abm .zn-abm-slide__faces > :nth-child(4) { transition-delay: .09s; }
.zn-abm .zn-abm-slide__faces > :nth-child(5) { transition-delay: .12s; }
.zn-abm .zn-abm-slide__faces > :nth-child(6) { transition-delay: .15s; }
.zn-abm .zn-abm-slide__faces > :nth-child(7) { transition-delay: .18s; }
.zn-abm .zn-abm-slide__faces > :nth-child(8) { transition-delay: .21s; }
.zn-abm .zn-abm-slide__more {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--zn-abm-dark); border-color: var(--zn-abm-dark); color: var(--zn-abm-gold);
	font-family: var(--zn-abm-head); font-size: 14px; font-weight: 500; letter-spacing: .02em;
}
.zn-abm .zn-abm-slide__tag {
	position: absolute; left: 22px; bottom: 20px; z-index: 2;
	font-family: var(--zn-abm-head); font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: .12em;
	font-variant-numeric: tabular-nums; color: rgb(255 255 255 / .75);
}
.zn-abm .zn-abm-slide__tag b { font-weight: 500; color: #fff; }
.zn-abm .zn-abm-slide--cutout .zn-abm-slide__tag, .zn-abm .zn-abm-slide--team .zn-abm-slide__tag { color: var(--zn-abm-muted); }
.zn-abm .zn-abm-slide--cutout .zn-abm-slide__tag b, .zn-abm .zn-abm-slide--team .zn-abm-slide__tag b { color: var(--zn-abm-gold); }

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

/* ════════ Laptop (1025–1280): a narrower picture, tighter rows ════════ */
@media (max-width: 1280px) {
	.zn-abm .zn-abm-links { grid-template-columns: minmax(0, 1fr) minmax(200px, .62fr); gap: 24px; }
	.zn-abm a.zn-abm-row { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 0 12px; padding-left: 14px; }
	.zn-abm a.zn-abm-row:is(:hover, .is-active, :focus-visible) { padding-left: 20px; }
	.zn-abm .zn-abm-row__title { font-size: 16px; }
	.zn-abm .zn-abm-slide__faces { grid-template-columns: repeat(3, auto); gap: 8px; }
	.zn-abm .zn-abm-slide__faces > :nth-child(n+6):not(.zn-abm-slide__more) { display: none; }
}
/* the intro's own sizes for this panel (the Knowledge Center panel is left as it is) */
.zn-abm .zn-abm-intro__text p { font-size: 13.5px; line-height: 1.65; }
.zn-abm .zn-abm-intro__deco span:nth-child(1) { width: 200px; height: 200px; right: -90px; bottom: -110px; }
.zn-abm .zn-abm-intro__deco span:nth-child(2) { width: 140px; height: 140px; right: -60px; bottom: -80px; }
/* below 1025px the panel is not used (ElementsKit shows the submenu); the editor still previews it */
@media (max-width: 1024px) {
	.zn-abm .zn-abm-links { grid-template-columns: minmax(0, 1fr); }
	.zn-abm .zn-abm-stage { display: none; }
}

/* ════════ About page: sections stop clear of the fixed header when linked to ════════ */
body .zn-abp, body .zn-abv, body .zn-abf, body .zn-abt, body .zn-value { scroll-margin-top: var(--zn-hdr-hc, 80px); }

@media (prefers-reduced-motion: reduce) {
	.zn-abm *, .zn-abm *::before, .zn-abm *::after,
	.ekit-wid-con .elementskit-navbar-nav-default .elementskit-navbar-nav .zn-ab-menu > .elementskit-megamenu-panel {
		transition-duration: .01s !important; transition-delay: 0s !important; animation: none !important;
	}
	.zn-ab-menu .zn-abm-row, .zn-ab-menu .zn-abm-stage, .zn-ab-menu .zn-abm-intro > .elementor-widget { transform: none !important; }
	.ekit-wid-con .elementskit-navbar-nav-default .elementskit-navbar-nav .zn-ab-menu > .elementskit-megamenu-panel { transform: none !important; }
}