/* Zenesis v2 — service page sections (zn-svh banner, zn-svi intro card, zn-svc capabilities, zn-svx includes,
   zn-svq consultation button). Content, colours, typography and spacing are set in Elementor / Site Settings.
   This file adds layer stacks, card and list interactions and the scroll reveal. States are set by service.js;
   without JS everything is visible. */

:where(.zn-svh, .zn-svi, .zn-svc, .zn-svx, .zn-svq) { --zn-ease-out: cubic-bezier(.16, 1, .3, 1); position: relative; }
:is(.zn-svh, .zn-svi, .zn-svc, .zn-svx, .zn-svq) .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* ════════ Banner ════════ */
.zn-svh { isolation: isolate; }
.zn-svh > .zn-svh__media {
	position: absolute; left: 0; top: -10%; width: 100%; height: 120%; min-height: 0; margin: 0; z-index: 0;
	scale: 1.04; will-change: translate; filter: grayscale(.2) contrast(1.05);
}
.zn-svh > .zn-svh__shade { position: absolute; inset: 0; width: auto; height: auto; min-height: 0; margin: 0; z-index: 1; pointer-events: none; }
.zn-svh > .zn-svh__content { position: relative; z-index: 2; }
.zn-svh .zn-svh__title .elementor-heading-title { letter-spacing: -.02em; }
.zn-svh .zn-svh__crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; letter-spacing: .04em; }
.zn-svh .zn-svh__crumbs a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color .4s ease, background-size .5s var(--zn-ease-out); }
.zn-svh .zn-svh__crumbs a:hover, .zn-svh .zn-svh__crumbs a:focus-visible { color: var(--e-global-color-accent); background-size: 100% 1px; }
.zn-svh .zn-svh__crumbs [aria-current] { color: var(--e-global-color-zn_white); }
.zn-svh .zn-svh__sep { width: 18px; height: 1px; background: var(--e-global-color-primary); }

/* ════════ Introduction card ════════ */
.zn-svi { z-index: 3; }
.zn-svi .zn-svi__card { position: relative; box-shadow: 0 40px 80px -48px rgb(15 19 43 / .45); }
.zn-svi .zn-svi__card::after {
	content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; opacity: 1; border: 0; z-index: 1;
	background: var(--e-global-color-primary); transform-origin: 0 50%;
}
.zn-svi .zn-svi__text .zn-w { display: inline-block; }

/* ════════ Capability cards ════════ */
.zn-svc .zn-svc__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.zn-svc .zn-svc__card {
	--mx: 50%; --my: 0%;
	position: relative; isolation: isolate; overflow: hidden; width: auto;
	box-shadow: 0 1px 0 var(--e-global-color-zn_line);
	transition: background-color .6s ease, box-shadow .7s ease, translate .7s var(--zn-ease-out);
}
/* light that follows the pointer (service.js sets --mx / --my) */
.zn-svc .zn-svc__card::before {
	content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; border: 0; pointer-events: none;
	background: radial-gradient(420px circle at var(--mx) var(--my), rgb(200 164 93 / .22), transparent 60%);
	transition: opacity .6s ease;
}
/* gold line drawn along the top edge */
.zn-svc .zn-svc__card::after {
	content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; z-index: 2; opacity: 1; border: 0;
	background: var(--e-global-color-primary); scale: 0 1; transform-origin: 0 50%; transition: scale .9s var(--zn-ease-out);
}
.zn-svc .zn-svc__icon {
	position: relative; border: 1px solid var(--e-global-color-zn_gold_line);
	background: var(--e-global-color-zn_cream);
	transition: background-color .6s ease, border-color .6s ease;
}
.zn-svc .zn-svc__glyph, .zn-svc .zn-svc__glyph .elementor-widget-container { width: 46%; display: flex; justify-content: center; }
.zn-svc .zn-svc__glyph img { display: block; width: 100%; height: auto; transition: filter .6s ease, scale .8s var(--zn-ease-out); }
.zn-svc .zn-svc__num .elementor-heading-title { letter-spacing: .16em; transition: color .5s ease; }
.zn-svc .zn-svc__name .elementor-heading-title, .zn-svc .zn-svc__desc { transition: color .5s ease; }

.zn-svc .zn-svc__card:hover, .zn-svc .zn-svc__card:focus-within {
	/* !important: the card colour set in Elementor is emitted with a higher-specificity rule */
	background-color: var(--e-global-color-secondary) !important; translate: 0 -8px;
	box-shadow: 0 40px 70px -40px rgb(15 19 43 / .6);
}
.zn-svc .zn-svc__card:hover::before { opacity: 1; }
.zn-svc .zn-svc__card:hover::after, .zn-svc .zn-svc__card:focus-within::after { scale: 1 1; }
.zn-svc .zn-svc__card:hover .zn-svc__icon { background-color: var(--e-global-color-primary); border-color: var(--e-global-color-primary); }
.zn-svc .zn-svc__card:hover .zn-svc__glyph img { filter: brightness(0) invert(1); scale: 1.08; }
.zn-svc .zn-svc__card:hover .zn-svc__num .elementor-heading-title { color: var(--e-global-color-primary); }
.zn-svc .zn-svc__card:hover .zn-svc__name .elementor-heading-title { color: var(--e-global-color-zn_white); }
.zn-svc .zn-svc__card:hover .zn-svc__desc { color: var(--e-global-color-zn_body_dark); }

@media (max-width: 1024px) {
	.zn-svc .zn-svc__grid { grid-template-columns: minmax(0, 1fr); }
	/* tablet: icon column beside the text */
	.zn-svc .zn-svc__card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; align-content: start; }
	.zn-svc .zn-svc__card > .zn-svc__top { grid-row: 1 / span 2; margin: 0; flex-direction: column; gap: 14px; }
	.zn-svc .zn-svc__card > .zn-svc__name, .zn-svc .zn-svc__card > .zn-svc__desc { grid-column: 2; }
}
@media (max-width: 767px) {
	.zn-svc .zn-svc__card { display: flex; }
	.zn-svc .zn-svc__card > .zn-svc__top { flex-direction: row; }
	.zn-svc .zn-svc__card:hover { translate: none; }
}

/* ════════ Includes: numbered list on a progress line ════════ */
@media (min-width: 1025px) {
	.zn-svx .zn-svx__aside { position: sticky; top: 140px; }
}
.zn-svx .zn-svx__count {
	display: flex; align-items: baseline; gap: 10px; color: var(--e-global-color-zn_muted);
	font-family: var(--e-global-typography-zn_eyebrow-font-family), sans-serif; font-size: 12px; letter-spacing: .16em;
}
.zn-svx .zn-svx__count b {
	font-family: var(--e-global-typography-zn_stat-font-family), sans-serif; font-weight: var(--e-global-typography-zn_stat-font-weight);
	font-size: var(--e-global-typography-zn_stat-font-size); line-height: 1; letter-spacing: -.02em; color: var(--e-global-color-primary);
	display: inline-block; min-width: 2ch; transition: opacity .3s ease, translate .5s var(--zn-ease-out);
}
.zn-svx .zn-svx__count.is-swapping b { opacity: 0; translate: 0 12px; }

.zn-svx .zn-svx__list { --zn-p: 0; position: relative; }
/* line through the number markers: grey track + gold fill that follows the scroll */
.zn-svx .zn-svx__list::before, .zn-svx .zn-svx__list::after {
	content: ""; position: absolute; left: 27px; top: 36px; bottom: 36px; width: 1px; z-index: 0; opacity: 1; border: 0;
	background: var(--e-global-color-zn_line);
}
.zn-svx .zn-svx__list::after { background: var(--e-global-color-primary); transform-origin: 50% 0; scale: 1 var(--zn-p); }
.zn-svx .zn-svx__item { position: relative; z-index: 1; border-bottom: 1px solid var(--e-global-color-zn_line); }
.zn-svx .zn-svx__item:last-child { border-bottom: 0; }
.zn-svx .zn-svx__item::before {
	content: ""; position: absolute; left: 72px; right: 0; top: 0; bottom: 0; z-index: -1; opacity: 0; border: 0;
	background: linear-gradient(90deg, var(--e-global-color-zn_cream), transparent 85%); transition: opacity .6s ease;
}
.zn-svx .zn-svx__num { width: 56px; flex: 0 0 56px; }
.zn-svx .zn-svx__num .elementor-heading-title {
	display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%;
	background: var(--e-global-color-zn_white); border: 1px solid var(--e-global-color-zn_gold_line);
	transition: background-color .5s ease, color .5s ease, border-color .5s ease, scale .6s var(--zn-ease-out), box-shadow .6s ease;
}
.zn-svx .zn-svx__body { padding-top: 14px; min-width: 0; }
.zn-svx .zn-svx__desc { flex: 1 1 0; min-width: 0; }
/* sideways clip that keeps the sticky title column working (overflow: hidden would not) */
.zn-svx.e-con, .zn-svi.e-con { overflow-x: clip; }
.zn-svx .zn-svx__name { width: 42%; flex: 0 0 42%; }
.zn-svx .zn-svx__name .elementor-heading-title { transition: color .5s ease; }
.zn-svx .zn-svx__body > * { transition: opacity .5s ease, translate .6s var(--zn-ease-out); }
.zn-svx .zn-svx__item.is-active .zn-svx__num .elementor-heading-title,
.zn-svx .zn-svx__item:hover .zn-svx__num .elementor-heading-title {
	background: var(--e-global-color-primary); border-color: var(--e-global-color-primary); color: var(--e-global-color-zn_white);
	scale: 1.06; box-shadow: 0 0 0 8px rgb(200 164 93 / .14);
}
.zn-svx .zn-svx__item:hover::before { opacity: 1; }
.zn-svx .zn-svx__item:hover .zn-svx__body > * { translate: 6px 0; }
@media (hover: hover) and (min-width: 1025px) {
	.zn-svx .zn-svx__list.is-tracking .zn-svx__item:not(.is-active):not(:hover) .zn-svx__body > * { opacity: .5; }
}
@media (max-width: 1024px) {
	.zn-svx .zn-svx__list::before, .zn-svx .zn-svx__list::after { left: 23px; top: 30px; bottom: 30px; }
	.zn-svx .zn-svx__num, .zn-svx .zn-svx__num .elementor-heading-title { width: 48px; height: 48px; flex-basis: 48px; }
	.zn-svx .zn-svx__body { padding-top: 10px; }
	.zn-svx .zn-svx__item::before { left: 60px; }
}
@media (max-width: 767px) {
	.zn-svx .zn-svx__list::before, .zn-svx .zn-svx__list::after { left: 19px; top: 24px; bottom: 24px; }
	.zn-svx .zn-svx__num, .zn-svx .zn-svx__num .elementor-heading-title { width: 40px; height: 40px; flex-basis: 40px; }
	.zn-svx .zn-svx__num .elementor-heading-title { font-size: 13px; }
	.zn-svx .zn-svx__name { width: 100%; flex-basis: auto; }
	.zn-svx .zn-svx__body { padding-top: 8px; }
	.zn-svx .zn-svx__item::before { display: none; }
	.zn-svx .zn-svx__item:hover .zn-svx__body > * { translate: none; }
}

/* ════════ Consultation button ════════ */
.zn-svq .zn-svq__row > .zn-svq__btn { flex: 0 0 auto; }

/* ════════ Scroll reveal (armed by service.js) ════════ */
.zn-svh.is-armed > .zn-svh__media { clip-path: inset(0 0 100% 0); scale: 1.16; }
.zn-svh.is-armed > .zn-svh__shade { opacity: 0; }
.is-armed :is(.zn-svh__accent, .zn-svc__accent, .zn-svx__accent, .zn-svi__accent) { scale: 1 0; transform-origin: 50% 0; }
.is-armed :is(.zn-svc__rule, .zn-svq__rule) { scale: 0 1; }
.zn-svc.is-armed .zn-svc__rule { transform-origin: 0 50%; }
.zn-svq.is-armed .zn-svq__rule:first-child { transform-origin: 100% 50%; }
.zn-svq.is-armed .zn-svq__rule:last-child { transform-origin: 0 50%; }
.is-armed :is(.zn-svh-rv, .zn-svc-rv, .zn-svx-rv) { opacity: 0; translate: 0 28px; }
.zn-svi.is-armed .zn-svi__card { opacity: 0; translate: 0 40px; }
.zn-svi.is-armed .zn-svi__card::after { scale: 0 1; }
.zn-svi.is-armed .zn-svi__text .zn-w { opacity: 0; translate: 0 .5em; }
.zn-svc.is-armed .zn-svc__card { opacity: 0; translate: 0 48px; }
.zn-svx.is-armed .zn-svx__item { opacity: 0; translate: 0 32px; }
.zn-svx.is-armed .zn-svx__count { opacity: 0; }
.zn-svq.is-armed .zn-svq__btn { opacity: 0; scale: .94; }

.zn-svh.is-in > .zn-svh__media { clip-path: inset(0 0 0 0); scale: 1.04; transition: clip-path 1.6s var(--zn-ease-out), scale 2.4s var(--zn-ease-out); }
.zn-svh.is-in > .zn-svh__shade { opacity: 1; transition: opacity 1.2s ease .2s; }
.is-in :is(.zn-svh__accent, .zn-svc__accent, .zn-svx__accent, .zn-svi__accent) { scale: 1 1; transition: scale 1s var(--zn-ease-out) .3s; }
.is-in :is(.zn-svc__rule, .zn-svq__rule) { scale: 1 1; transition: scale 1.6s var(--zn-ease-out) .4s; }
.is-in :is(.zn-svh-rv, .zn-svc-rv, .zn-svx-rv) { opacity: 1; translate: 0 0; transition: opacity 1s ease, translate 1.2s var(--zn-ease-out); transition-delay: var(--zn-d, 0s); }
.zn-svi.is-in .zn-svi__card { opacity: 1; translate: 0 0; transition: opacity 1s ease .5s, translate 1.4s var(--zn-ease-out) .5s; }
.zn-svi.is-in .zn-svi__card::after { scale: 1 1; transition: scale 1.4s var(--zn-ease-out) 1s; }
.zn-svi.is-in .zn-svi__text .zn-w { opacity: 1; translate: 0 0; transition: opacity .7s ease var(--zn-d, 0s), translate .9s var(--zn-ease-out) var(--zn-d, 0s); }
.zn-svc.is-in .zn-svc__card { opacity: 1; translate: 0 0; transition: opacity 1s ease var(--zn-d, 0s), translate 1.3s var(--zn-ease-out) var(--zn-d, 0s); }
.zn-svc.is-in .zn-svc__card.is-settled { transition: background-color .6s ease, box-shadow .7s ease, translate .7s var(--zn-ease-out); }
.zn-svc.is-in .zn-svc__card.is-settled:hover { translate: 0 -8px; }
.zn-svx .zn-svx__item.is-in { opacity: 1; translate: 0 0; transition: opacity 1s ease var(--zn-d, 0s), translate 1.2s var(--zn-ease-out) var(--zn-d, 0s); }
.zn-svx.is-in .zn-svx__count { opacity: 1; transition: opacity 1s ease .5s; }
.zn-svq.is-in .zn-svq__btn { opacity: 1; scale: 1; transition: opacity .9s ease .3s, scale 1.1s var(--zn-ease-out) .3s; }
@media (max-width: 767px) { .zn-svc.is-in .zn-svc__card.is-settled:hover { translate: none; } }

@media (prefers-reduced-motion: reduce) {
	:where(.zn-svh, .zn-svi, .zn-svc, .zn-svx, .zn-svq) *,
	:where(.zn-svh, .zn-svi, .zn-svc, .zn-svx, .zn-svq) *::before,
	:where(.zn-svh, .zn-svi, .zn-svc, .zn-svx, .zn-svq) *::after { transition: none !important; animation: none !important; }
	.zn-svh > .zn-svh__media { translate: none !important; }
	.zn-svc .zn-svc__card:hover { translate: none; }
}