/* Zenesis v2 — Our Frameworks page and framework pages (zn-fki introduction, zn-fkg category header with the
   framework cards zn-fko, zn-fkx framework step cards + "How we use it", zn-fkq closing call to action, zn-fkn
   previous / next framework). The banner comes from service.css, the
   methodology panels and diagrams from frameworks.css / frameworks.js; this file adds six- and eight-point
   diagram layouts, the step cards that mirror the diagram's current step, and the scroll reveal.
   Content, colours, typography and spacing are set in Elementor / Site Settings. Without JS everything is shown. */

:where(.zn-fki, .zn-fkg, .zn-fkx, .zn-fkq, .zn-fkn) { --zn-ease-out: cubic-bezier(.16, 1, .3, 1); position: relative; }
:is(.zn-fki, .zn-fkg, .zn-fkx, .zn-fkq) .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
:is(.zn-fki, .zn-fkg) :is(.zn-fki__head, .zn-fki__body, .zn-fkg__head, .zn-fkg__body) { min-width: 0; }

/* ════════ Introduction ════════ */

/* ════════ Category header ════════ */
.elementor .zn-fkg .zn-fkg__num.elementor-element .elementor-heading-title { /* outlined numeral (beats the widget's own colour rule) */
	color: transparent; -webkit-text-stroke: 1px var(--e-global-color-primary);
}

/* ════════ Framework panels ════════ */
.zn-fkx .zn-fkm__panel > .zn-fkm__text { align-self: center; }
/* long labels (Manage & Monitor) wrap onto two centred lines, clear of the centre circle; one-word labels stay on one */
.elementor.elementor .zn-fkx .zn-fkm__node > .zn-fkm__label.elementor-element { width: max-content; max-width: 124px; }
.zn-fkx .zn-fkm__node > .zn-fkm__label .elementor-heading-title { white-space: normal; text-align: center; text-wrap: balance; }
@media (max-width: 767px) {
	.elementor.elementor .zn-fkx .zn-fkm__node > .zn-fkm__label.elementor-element { max-width: 96px; }
}

/* six- and eight-point diagrams (centre 50 / 50, radius 33); frameworks.js reads --x / --y */
.zn-fkm.zn-fkx--n6 .zn-fkm__diagram > .zn-fkm__node:nth-child(1) { --x: 50%;    --y: 17%; }
.zn-fkm.zn-fkx--n6 .zn-fkm__diagram > .zn-fkm__node:nth-child(2) { --x: 78.58%; --y: 33.5%; }
.zn-fkm.zn-fkx--n6 .zn-fkm__diagram > .zn-fkm__node:nth-child(3) { --x: 78.58%; --y: 66.5%; }
.zn-fkm.zn-fkx--n6 .zn-fkm__diagram > .zn-fkm__node:nth-child(4) { --x: 50%;    --y: 83%; }
.zn-fkm.zn-fkx--n6 .zn-fkm__diagram > .zn-fkm__node:nth-child(5) { --x: 21.42%; --y: 66.5%; }
.zn-fkm.zn-fkx--n6 .zn-fkm__diagram > .zn-fkm__node:nth-child(6) { --x: 21.42%; --y: 33.5%; }
.zn-fkm.zn-fkx--n8 .zn-fkm__diagram > .zn-fkm__node:nth-child(1) { --x: 50%;    --y: 17%; }
.zn-fkm.zn-fkx--n8 .zn-fkm__diagram > .zn-fkm__node:nth-child(2) { --x: 73.33%; --y: 26.67%; }
.zn-fkm.zn-fkx--n8 .zn-fkm__diagram > .zn-fkm__node:nth-child(3) { --x: 83%;    --y: 50%; }
.zn-fkm.zn-fkx--n8 .zn-fkm__diagram > .zn-fkm__node:nth-child(4) { --x: 73.33%; --y: 73.33%; }
.zn-fkm.zn-fkx--n8 .zn-fkm__diagram > .zn-fkm__node:nth-child(5) { --x: 50%;    --y: 83%; }
.zn-fkm.zn-fkx--n8 .zn-fkm__diagram > .zn-fkm__node:nth-child(6) { --x: 26.67%; --y: 73.33%; }
.zn-fkm.zn-fkx--n8 .zn-fkm__diagram > .zn-fkm__node:nth-child(7) { --x: 17%;    --y: 50%; }
.zn-fkm.zn-fkx--n8 .zn-fkm__diagram > .zn-fkm__node:nth-child(8) { --x: 26.67%; --y: 26.67%; }
/* longer step names: a slightly larger centre readout */
.zn-fkm:is(.zn-fkx--n6, .zn-fkx--n8) .zn-fkm__hub { width: 36%; padding: 0 2%; }
.zn-fkm:is(.zn-fkx--n6, .zn-fkx--n8) .zn-fkm__hubname { max-width: 92%; }
.zn-fkm.zn-fkx--n8 .zn-fkm__stage > .zn-fkm__diagram { --nd: 58px; }
@media (max-width: 767px) {
	.zn-fkm.zn-fkx--n8 .zn-fkm__stage > .zn-fkm__diagram { --nd: 44px; }
	.zn-fkm.zn-fkx--n6 .zn-fkm__stage > .zn-fkm__diagram { --nd: 48px; }
}

/* ════════ Step cards (each name is the step control driven by frameworks.js) ════════ */
.zn-fkx .zn-fkx__steps {
	--cols: 5; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 20px; counter-reset: zn-fkx;
}
.zn-fkx.zn-fkx--n6 .zn-fkx__steps { --cols: 3; }
.zn-fkx.zn-fkx--n8 .zn-fkx__steps { --cols: 4; }
.zn-fkx .zn-fkx__steps > .zn-fkx__step {
	position: relative; width: auto; min-width: 0; counter-increment: zn-fkx; cursor: pointer;
	border-top: 1px solid var(--e-global-color-zn_gold_line); background-color: transparent;
	transition: background-color .5s ease;
}
.zn-fkx .zn-fkx__steps > .zn-fkx__step::before { /* 01, 02, … */
	content: counter(zn-fkx, decimal-leading-zero); position: static; display: block; width: auto; height: auto;
	opacity: 1; border: 0; background: none; filter: none; mix-blend-mode: normal;
	font-family: var(--e-global-typography-zn_eyebrow-font-family), sans-serif; font-weight: var(--e-global-typography-zn_eyebrow-font-weight);
	font-size: var(--e-global-typography-zn_eyebrow-font-size); letter-spacing: .18em; line-height: 1;
	color: var(--e-global-color-primary); margin-bottom: 8px; transition: translate .6s var(--zn-ease-out);
}
.zn-fkx .zn-fkx__steps > .zn-fkx__step::after { /* gold line along the top: fills while the step is current */
	content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; opacity: 1; border: 0; filter: none;
	background: var(--e-global-color-primary); scale: 0 1; transform-origin: 0 50%; transition: scale .6s var(--zn-ease-out);
}
.zn-fkx .zn-fkx__step > .zn-fkm__chip { pointer-events: none; } /* the whole card handles the pointer */
.zn-fkx .zn-fkx__step > .zn-fkm__chip .elementor-heading-title { transition: color .4s ease, translate .6s var(--zn-ease-out); }
.zn-fkx .zn-fkx__step > .zn-fkm__chip:focus-visible { outline: 2px solid var(--e-global-color-primary); outline-offset: 4px; }
.zn-fkx .zn-fkx__steps > .zn-fkx__step.is-active { background-color: var(--e-global-color-zn_cream); }
.zn-fkx .zn-fkx__steps > .zn-fkx__step.is-active::after { scale: 1 1; }
.zn-fkx .zn-fkx__steps > .zn-fkx__step.is-timing::after { animation: zn-fkx-timer var(--zn-t, 3.4s) linear both; }
@keyframes zn-fkx-timer { from { scale: 0 1; } to { scale: 1 1; } }
@media (hover: hover) {
	.zn-fkx .zn-fkx__steps > .zn-fkx__step:hover::before,
	.zn-fkx .zn-fkx__steps > .zn-fkx__step:hover > .zn-fkm__chip .elementor-heading-title { translate: 4px 0; }
}
@media (max-width: 1199px) {
	.zn-fkx .zn-fkx__steps { --cols: 3; }
	.zn-fkx.zn-fkx--n8 .zn-fkx__steps { --cols: 4; }
}
@media (max-width: 1024px) {
	.zn-fkx .zn-fkx__steps, .zn-fkx:is(.zn-fkx--n6, .zn-fkx--n8) .zn-fkx__steps { --cols: 2; gap: 16px; }
	.zn-fkx .zn-fkm__panel > .zn-fkm__text { align-self: flex-start; }
}
@media (max-width: 767px) {
	.zn-fkx .zn-fkx__steps, .zn-fkx:is(.zn-fkx--n6, .zn-fkx--n8) .zn-fkx__steps { --cols: 1; gap: 12px; }
}

/* ════════ How we use it ════════ */
.zn-fkx .zn-fkx__use { max-width: 980px; padding: 6px 0 6px 28px; border-left: 2px solid var(--e-global-color-primary); }
.zn-fkx .zn-fkx__usetext strong {
	display: block; margin-bottom: 8px; font-family: var(--e-global-typography-zn_eyebrow-font-family), sans-serif;
	font-weight: var(--e-global-typography-zn_eyebrow-font-weight); font-size: var(--e-global-typography-zn_eyebrow-font-size);
	line-height: 1.6; letter-spacing: .2em; text-transform: uppercase; color: var(--e-global-color-primary);
}
@media (max-width: 767px) { .zn-fkx .zn-fkx__use { padding-left: 18px; } }

/* ════════ Closing call to action ════════ */
.zn-fkq .zn-fkq__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.zn-fkq .zn-fkq__inner .elementor-widget-text-editor { text-align: center; }

/* ════════ Overview: framework cards (zn-fko, in the category sections) ════════
   Each card: the framework's diagram in miniature (its letters / numbers round a ring), eyebrow, title, subtitle and
   "Explore Framework" (.zn-link). The whole card follows that link. On hover the ring's points light up in turn. */
.elementor .zn-fkg .e-con.zn-fko__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.elementor .zn-fkg .e-con.zn-fko__card {
	position: relative; isolation: isolate; width: auto; min-width: 0;
	border: 1px solid var(--e-global-color-zn_line);
	transition: translate .6s var(--zn-ease-out), box-shadow .6s ease, border-color .5s ease;
}
.elementor .zn-fkg .e-con.zn-fko__card::after { /* gold rule along the top */
	content: ""; position: absolute; left: -1px; right: -1px; top: -1px; width: auto; height: 2px; z-index: 1;
	opacity: 1; border: 0; border-radius: 0; filter: none; mix-blend-mode: normal;
	background: var(--e-global-color-primary); scale: 0 1; transform-origin: 0 50%; transition: scale .7s var(--zn-ease-out);
}
.elementor .zn-fkg .zn-fko__card > .zn-fko__body { position: static; align-self: stretch; min-width: 0; }
.zn-fko__body > .zn-fko__cta { position: static; margin-top: auto; padding-top: 10px; }
.zn-fko__body > .zn-fko__cta .elementor-button { position: static; }
.zn-fko__body > .zn-fko__cta .elementor-button::after { content: ""; position: absolute; inset: 0; z-index: 2; } /* the whole card is the link */
.zn-fko__body > .zn-fko__cta .elementor-button:focus-visible { outline: none; }
.zn-fko__card:has(.zn-fko__cta .elementor-button:focus-visible) { outline: 2px solid var(--e-global-color-primary); outline-offset: 4px; }

/* the diagram in miniature: points round a ring (--n points, the k-th at k/n of a turn from the top) */
.elementor .zn-fkg .zn-fko__card > .zn-fko__visual { width: auto; }
.elementor .zn-fkg .e-con.zn-fko__ring {
	--rs: 148px; --nd: 32px;
	position: relative; display: block; width: var(--rs); height: var(--rs); flex: none;
	background: radial-gradient(circle, var(--e-global-color-primary) 0 3px, transparent 3.5px);
}
.zn-fko__ring { --n: 5; } /* number of points: zn-fko__ring--n{5,6,8} */
.zn-fko__ring.zn-fko__ring--n6 { --n: 6; }
.zn-fko__ring.zn-fko__ring--n8 { --n: 8; }
.elementor .zn-fkg .e-con.zn-fko__ring::before { /* the ring */
	content: ""; position: absolute; inset: calc(var(--nd) / 2); width: auto; height: auto;
	opacity: 1; border: 1px solid var(--e-global-color-zn_gold_line); border-radius: 50%; background: none; filter: none;
	transition: rotate 1.2s var(--zn-ease-out), border-color .5s ease;
}
.elementor .zn-fkg .zn-fko__ring > .elementor-widget.zn-fko__node {
	--a: calc(var(--k, 0) * 360deg / var(--n));
	position: absolute; left: 50%; top: 50%; width: var(--nd); max-width: none; height: var(--nd); margin: calc(var(--nd) / -2) 0 0 calc(var(--nd) / -2);
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--e-global-color-primary); border-radius: 50%; background-color: var(--e-global-color-zn_white);
	transform: rotate(var(--a)) translateY(calc(var(--rs) / -2 + var(--nd) / 2)) rotate(calc(var(--a) * -1));
	transition: background-color .35s ease, scale .5s var(--zn-ease-out);
}
.zn-fko__ring > .zn-fko__node .elementor-heading-title { line-height: 1; letter-spacing: 0; transition: color .35s ease; }
.zn-fko__ring > .zn-fko__node:nth-child(2) { --k: 1; }
.zn-fko__ring > .zn-fko__node:nth-child(3) { --k: 2; }
.zn-fko__ring > .zn-fko__node:nth-child(4) { --k: 3; }
.zn-fko__ring > .zn-fko__node:nth-child(5) { --k: 4; }
.zn-fko__ring > .zn-fko__node:nth-child(6) { --k: 5; }
.zn-fko__ring > .zn-fko__node:nth-child(7) { --k: 6; }
.zn-fko__ring > .zn-fko__node:nth-child(8) { --k: 7; }

@media (hover: hover) {
	.elementor .zn-fkg .e-con.zn-fko__card:hover {
		translate: 0 -4px; border-color: var(--e-global-color-zn_gold_line);
		box-shadow: 0 28px 56px -32px rgb(35 31 32 / .28);
	}
	.elementor .zn-fkg .e-con.zn-fko__card:hover::after { scale: 1 1; }
	.elementor .zn-fkg .zn-fko__card:hover .zn-fko__ring > .elementor-widget.zn-fko__node { /* the points light up in turn */
		background-color: var(--e-global-color-primary);
		transition-delay: calc(var(--k, 0) * 70ms);
	}
	.zn-fko__card:hover .zn-fko__ring > .zn-fko__node .elementor-heading-title { color: var(--e-global-color-zn_white); transition-delay: calc(var(--k, 0) * 70ms); }
	.elementor .zn-fkg .zn-fko__card:hover .e-con.zn-fko__ring::before { rotate: 45deg; border-color: var(--e-global-color-primary); }
	.zn-fko__card:hover .zn-link .elementor-button-icon {
		border-color: var(--e-global-color-primary); background-color: var(--e-global-color-primary); color: var(--e-global-color-zn_white);
	}
	.zn-fko__card:hover .zn-link .elementor-button-icon svg { translate: 3px 0; }
}

@media (min-width: 1025px) and (max-width: 1279px) {
	.elementor .zn-fkg .e-con.zn-fko__card { flex-direction: column; gap: 28px; }
}
@media (max-width: 1024px) {
	.elementor .zn-fkg .e-con.zn-fko__grid { gap: 20px; }
	.elementor .zn-fkg .e-con.zn-fko__ring { --rs: 128px; --nd: 30px; }
}
@media (max-width: 767px) {
	.elementor .zn-fkg .e-con.zn-fko__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.elementor .zn-fkg .e-con.zn-fko__ring { --rs: 112px; --nd: 28px; }
	.zn-fko__ring > .zn-fko__node .elementor-heading-title { font-size: 11px; }
}

/* ════════ Framework pages: first section under the banner (zn-fkm right after zn-svh) ════════
   On desktop the text is centred against the 520px diagram, whose drawing starts ~70px inside its box; with the
   standard 120px section padding the content began ~190–270px below the banner. 64px puts the diagrams ~120px under
   the banner like the first content of the other inner pages (and keeps a taller text column 64px clear of it). Tablet / mobile stack the
   panel and keep their padding. */
@media (min-width: 1025px) {
	.elementor .e-con.e-parent.zn-svh + .e-con.e-parent.zn-fkm { --padding-top: 64px; }
}

/* ════════ Framework pages: previous / next framework (zn-fkn, [zn_frameworks_menu part="pager"]) ════════ */
.zn-fkn .zn-fkn__nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 32px; }
.zn-fkn a { text-decoration: none; }
.zn-fkn .zn-fkn__step { display: flex; align-items: center; gap: 18px; min-width: 0; color: var(--e-global-color-text); }
.zn-fkn .zn-fkn__step--next { justify-content: flex-end; text-align: right; }
.zn-fkn .zn-fkn__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.zn-fkn .zn-fkn__dir, .zn-fkn .zn-fkn__all {
	font-family: var(--e-global-typography-zn_eyebrow-font-family), sans-serif; font-weight: var(--e-global-typography-zn_eyebrow-font-weight);
	font-size: var(--e-global-typography-zn_eyebrow-font-size); line-height: 1.4; letter-spacing: .2em; text-transform: uppercase;
}
.zn-fkn .zn-fkn__dir { color: var(--e-global-color-primary); }
.zn-fkn .zn-fkn__name {
	font-family: var(--e-global-typography-zn_h5-font-family), sans-serif; font-weight: var(--e-global-typography-zn_h5-font-weight);
	font-size: var(--e-global-typography-zn_h5-font-size); line-height: 1.35; transition: color .4s ease;
}
.zn-fkn .zn-fkn__icon {
	display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid var(--e-global-color-zn_gold_line); color: var(--e-global-color-text);
	transition: border-color .4s ease, background-color .4s ease, color .4s ease;
}
.zn-fkn .zn-fkn__icon svg { width: 12px; height: 12px; transition: translate .5s var(--zn-ease-out); }
.zn-fkn .zn-fkn__step--prev .zn-fkn__icon svg { rotate: 180deg; }
.zn-fkn .zn-fkn__all {
	color: var(--e-global-color-text); padding-bottom: 4px;
	background: linear-gradient(var(--e-global-color-primary), var(--e-global-color-primary)) 0 100% / 100% 1px no-repeat;
	transition: color .4s ease, background-size .5s var(--zn-ease-out);
}
.zn-fkn .zn-fkn__step:is(:hover, :focus-visible) .zn-fkn__icon { border-color: var(--e-global-color-primary); background-color: var(--e-global-color-primary); color: var(--e-global-color-zn_white); }
.zn-fkn .zn-fkn__step:is(:hover, :focus-visible) .zn-fkn__name { color: var(--e-global-color-primary); }
.zn-fkn .zn-fkn__step--next:hover .zn-fkn__icon svg { translate: 3px 0; }
.zn-fkn .zn-fkn__step--prev:hover .zn-fkn__icon svg { translate: -3px 0; }
.zn-fkn .zn-fkn__all:is(:hover, :focus-visible) { color: var(--e-global-color-primary); background-size: 40% 1px; }
.zn-fkn a:focus-visible { outline: 2px solid var(--e-global-color-primary); outline-offset: 4px; }
/* the footer's slanted gold shape rises 66px into the section above it (desktop only; hidden on tablet): keep the
   pager's text clear of it */
@media (min-width: 1025px) {
	.elementor .e-con.e-parent.zn-fkn { --padding-bottom: 104px; }
}
@media (max-width: 767px) {
	.zn-fkn .zn-fkn__nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 28px 16px; }
	.zn-fkn .zn-fkn__all { grid-column: 1 / -1; order: -1; justify-self: center; }
	.zn-fkn .zn-fkn__step { flex-direction: column; align-items: flex-start; gap: 12px; }
	.zn-fkn .zn-fkn__step--next { align-items: flex-end; }
	.zn-fkn .zn-fkn__step--next .zn-fkn__icon { order: -1; }
	.zn-fkn .zn-fkn__icon { width: 40px; height: 40px; }
}

/* ════════ Scroll reveal (armed by frameworks-v2.js; the panels themselves are revealed by frameworks.js) ════════ */
.is-armed :is(.zn-fki__accent, .zn-fkg__accent) { scale: 1 0; transform-origin: 50% 0; }
.is-armed :is(.zn-fki-rv, .zn-fkg-rv, .zn-fkq-rv) { opacity: 0; translate: 0 28px; }
.zn-fkx__steps.is-armed > .zn-fkx__step { opacity: 0; translate: 0 28px; }
.zn-fkx__use.is-armed { opacity: 0; translate: 0 24px; }
.elementor .zn-fkg .zn-fko__grid.is-armed > .e-con.zn-fko__card { opacity: 0; transform: translateY(32px); }
.zn-fkm.zn-fkx.is-armed .zn-fkx__step > .zn-fkm__chip { opacity: 1; translate: none; } /* revealed with its card */

.is-in :is(.zn-fki__accent, .zn-fkg__accent) { scale: 1 1; transition: scale 1s var(--zn-ease-out) .3s; }
.is-in :is(.zn-fki-rv, .zn-fkg-rv, .zn-fkq-rv) {
	opacity: 1; translate: 0 0; transition: opacity 1s ease, translate 1.2s var(--zn-ease-out); transition-delay: var(--zn-d, .1s);
}
.zn-fkx__steps.is-in > .zn-fkx__step {
	opacity: 1; translate: 0 0;
	transition: opacity .9s ease var(--zn-d, 0s), translate 1.1s var(--zn-ease-out) var(--zn-d, 0s), background-color .5s ease;
}
.zn-fkx__steps.is-in.is-settled > .zn-fkx__step { transition: background-color .5s ease; }
.elementor .zn-fkg .zn-fko__grid.is-in > .e-con.zn-fko__card {
	opacity: 1; transform: none;
	transition: opacity .9s ease var(--zn-d, 0s), transform 1.1s var(--zn-ease-out) var(--zn-d, 0s), translate .6s var(--zn-ease-out), box-shadow .6s ease, border-color .5s ease;
}
.zn-fkx__use.is-in { opacity: 1; translate: 0 0; transition: opacity 1s ease .1s, translate 1.2s var(--zn-ease-out) .1s; }

@media (prefers-reduced-motion: reduce) {
	:where(.zn-fki, .zn-fkg, .zn-fkx, .zn-fkq, .zn-fkn) *, :where(.zn-fki, .zn-fkg, .zn-fkx, .zn-fkq, .zn-fkn) *::before,
	:where(.zn-fki, .zn-fkg, .zn-fkx, .zn-fkq, .zn-fkn) *::after { transition: none !important; animation: none !important; }
	.elementor .zn-fkg .e-con.zn-fko__card:hover { translate: none; }
}