/*
 * Zivro Techs — component styles. Everything is scoped to the body class .zt or a zt-* class set on an
 * Elementor element (Advanced → CSS Classes). Colours come from Elementor Site Settings (global colours),
 * so changing a brand colour there updates this file too. Values set in the Elementor panel always win:
 * container padding is set through Elementor's --padding-* variables (never `padding`), and text size and
 * colour sit on the widget, not on its inner p/li, so the panel's Style controls reach them.
 */

/* ---------- Tokens & base ---------- */
.zt {
	--zt-blue: var(--e-global-color-primary, #246bfd);
	--zt-soft: var(--e-global-color-accent, #83b7ff);
	--zt-ink: var(--e-global-color-secondary, #12233c);
	--zt-muted: var(--e-global-color-text, #64748b);
	--zt-border: var(--e-global-color-ztborder, #e5ecf5);
	--zt-alt: var(--e-global-color-ztalt, #f5f9ff);
	--zt-head: var(--e-global-typography-primary-font-family, "Plus Jakarta Sans"), system-ui, sans-serif;
	--zt-body: var(--e-global-typography-text-font-family, "Inter"), system-ui, sans-serif;
	--zt-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
	--zt-ease: cubic-bezier(.22, .61, .36, 1);
	--zt-header-h: 76px;
	--zt-radius: 18px;
	--zt-shadow: 0 1px 2px rgba(18, 35, 60, .04), 0 22px 44px -22px rgba(18, 35, 60, .22);
	background: #fff;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
html { scroll-padding-top: 92px; }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
.zt ::selection { background: #d6e6ff; color: var(--zt-ink); }
.zt :focus-visible { outline: 2px solid var(--zt-blue); outline-offset: 3px; border-radius: 6px; }
.zt .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.zt .elementor-heading-title { text-wrap: balance; }

/* ---------- Type helpers ---------- */
.zt .zt-eyebrow .elementor-heading-title {
	display: inline-flex; align-items: center; gap: 10px;
	font: 600 12.5px/1.2 var(--zt-body); letter-spacing: .18em; text-transform: uppercase; color: var(--zt-blue);
}
.zt .zt-eyebrow .elementor-heading-title::before { content: ""; width: 20px; height: 1px; background: currentColor; }
.zt .zt-display .elementor-heading-title {
	font-family: var(--zt-head); font-size: clamp(42px, 5.3vw, 78px); font-weight: 700;
	line-height: 1.03; letter-spacing: -.045em; color: var(--zt-ink);
}
.zt .zt-hl { color: var(--zt-blue); }
.zt .zt-h2 .elementor-heading-title {
	font-family: var(--zt-head); font-size: clamp(32px, 3.6vw, 52px); font-weight: 700;
	line-height: 1.08; letter-spacing: -.038em; color: var(--zt-ink);
}
.zt .zt-lead { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; max-width: 34em; }
.zt .zt-note .elementor-heading-title {
	display: inline-flex; align-items: center; gap: 10px; font: 500 13px/1.3 var(--zt-body); color: var(--zt-muted);
}
.zt .zt-note .elementor-heading-title::before { /* small node-and-wire mark */
	content: ""; width: 26px; height: 8px;
	background: radial-gradient(circle at 4px 4px, var(--zt-blue) 3px, transparent 3.5px), linear-gradient(var(--zt-soft), var(--zt-soft)) 8px 3.5px / 18px 1px no-repeat;
}

/* ---------- Buttons (base style lives in Site Settings → Buttons) ---------- */
.zt .elementor-button { transition: transform .3s var(--zt-ease), box-shadow .3s var(--zt-ease), background-color .3s, color .3s; }
.zt .elementor-button:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -12px rgba(36, 107, 253, .6); }
.zt .zt-btn--arrow .elementor-button-text::after { content: "→"; display: inline-block; margin-left: .55em; transition: transform .3s var(--zt-ease); }
.zt .zt-btn--arrow .elementor-button:hover .elementor-button-text::after { transform: translateX(3px); }
.zt .zt-btn--ghost .elementor-button { background: #fff; color: var(--zt-ink); box-shadow: inset 0 0 0 1px var(--zt-border); }
.zt .zt-btn--ghost .elementor-button:hover { background: #fff; color: var(--zt-blue); box-shadow: inset 0 0 0 1px var(--zt-soft), 0 12px 26px -16px rgba(18, 35, 60, .3); }

/* ---------- Header (Header Footer Elementor template) ---------- */
.zt #masthead,
.zt.ehf-header #masthead { position: sticky; top: 0; z-index: 100; } /* HFE sets position: relative */
.zt.admin-bar #masthead { top: 32px; }
@media (max-width: 782px) { .zt.admin-bar #masthead { top: 46px; } }
@media (max-width: 600px) { .zt.admin-bar #masthead { top: 0; } }
.zt .zt-header {
	min-height: var(--zt-header-h);
	background-color: rgba(255, 255, 255, 0);
	box-shadow: 0 1px 0 rgba(229, 236, 245, 0);
	transition: background-color .35s var(--zt-ease), box-shadow .35s var(--zt-ease), backdrop-filter .35s;
}
.zt-scrolled .zt .zt-header {
	background-color: rgba(255, 255, 255, .88);
	-webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
	box-shadow: 0 1px 0 var(--zt-border), 0 10px 30px -22px rgba(18, 35, 60, .35);
}
.zt .zt-header__logo img { width: 168px; height: auto; display: block; }
.zt .zt-header .hfe-nav-menu > li > a.hfe-menu-item {
	padding: 10px 15px; border-radius: 999px;
	font: 500 15px/1 var(--zt-body); color: var(--zt-ink);
	transition: color .2s, background-color .2s;
}
.zt .zt-header .hfe-nav-menu > li > a.hfe-menu-item:hover,
.zt .zt-header .hfe-nav-menu > li > a.hfe-menu-item:focus-visible { color: var(--zt-blue); background: rgba(36, 107, 253, .07); }
.zt:not(.home) .zt-header .hfe-nav-menu > li.current-menu-item > a.hfe-menu-item { color: var(--zt-blue); }
.zt .zt-header__cta .elementor-button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; font-size: 14.5px; } /* 44px tap target */
.zt .zt-header .hfe-nav-menu__toggle { width: 44px; height: 44px; justify-content: center; border-radius: 12px; color: var(--zt-ink); }
.zt .zt-header .hfe-nav-menu-icon svg { width: 22px; height: 22px; fill: currentColor; }
@media (max-width: 1024px) {
	.zt .zt-header nav.hfe-dropdown {
		position: absolute !important; top: calc(100% + 10px) !important; left: auto !important; right: 0; width: min(320px, calc(100vw - 32px)) !important; padding: 8px; border: 1px solid var(--zt-border); border-radius: 16px;
		background: #fff; box-shadow: 0 24px 48px -24px rgba(18, 35, 60, .35);
	}
	.zt .zt-header nav.hfe-dropdown a.hfe-menu-item { padding: 14px 16px; border-radius: 10px; font: 500 16px/1 var(--zt-body); color: var(--zt-ink); }
	.zt .zt-header nav.hfe-dropdown a.hfe-menu-item:hover { background: var(--zt-alt); color: var(--zt-blue); }
}
@media (max-width: 480px) {
	.zt .zt-header__logo img { width: 138px; }
	.zt:not(.home) .zt-header .hfe-nav-menu > li.current-menu-item > a.hfe-menu-item { color: var(--zt-blue); }
.zt .zt-header__cta .elementor-button { padding: 11px 14px; font-size: 13.5px; }
}

/* ---------- Hero ---------- */
.zt .zt-hero {
	margin-top: calc(-1 * var(--zt-header-h)); /* slides under the transparent header */
	position: relative; isolation: isolate;
	overflow-x: clip; /* the canvas bleeds past its column; never let it widen the page */
	background:
		radial-gradient(ellipse 48% 52% at 74% 46%, rgba(131, 183, 255, .26), rgba(255, 255, 255, 0) 70%),
		radial-gradient(ellipse 85% 75% at 64% 42%, rgba(255, 255, 255, 0) 28%, #fff 76%),
		linear-gradient(var(--zt-border) 1px, transparent 1px) 0 0 / 64px 64px,
		linear-gradient(90deg, var(--zt-border) 1px, transparent 1px) 0 0 / 64px 64px,
		#fff;
}
.zt .zt-hero__copy { position: relative; z-index: 2; }
/* Elementor zeroes widget bottom margins, so vertical rhythm is set with margin-top only. */
.zt .zt-hero__copy .zt-display { margin-top: 22px; }
.zt .zt-hero__copy .zt-lead { margin-top: 26px; }
.zt .zt-hero__ctas { margin-top: 38px; }
.zt .zt-hero__copy .zt-note { margin-top: 30px; }
.zt .zt-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.zt .zt-w__i { display: inline-block; }

.zt .zt-scene { position: relative; width: 100%; height: clamp(460px, 44vw, 660px); }
.zt .zt-scene__canvas,
.zt .zt-scene__fallback { position: absolute; left: -12%; top: -12%; width: 124%; height: 124%; pointer-events: none; }
.zt .zt-scene__canvas {
	display: block; opacity: 0; transition: opacity 1.4s var(--zt-ease);
	-webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent); mask-image: radial-gradient(closest-side, #000 74%, transparent);
}
.zt .zt-scene.is-live .zt-scene__canvas { opacity: 1; }
.zt .zt-scene.is-static .zt-scene__fallback,
html:not(.zt-js) .zt .zt-scene:not(.is-live) .zt-scene__fallback { background: url(img/scene-fallback.webp) center / contain no-repeat; } /* fetched only when shown */
.zt .zt-scene::after { /* contact shadow under the structure */
	content: ""; position: absolute; left: 22%; right: 22%; bottom: -2%; height: 40px; z-index: -1;
	background: radial-gradient(closest-side, rgba(18, 35, 60, .14), transparent); filter: blur(4px);
	transform: translateY(calc(var(--zt-p, 0) * 50px)) scale(calc(1 - var(--zt-p, 0) * .35));
}

/* Floating interface panels: outer = pointer/scroll depth, __float = idle bob, __card = entrance. */
.zt .zt-panel {
	position: absolute; z-index: 2;
	transform: translate3d(calc(var(--zt-mx, 0) * var(--d) * -16px), calc(var(--zt-my, 0) * var(--d) * -12px + var(--zt-p, 0) * var(--d) * -70px), 0);
}
.zt .zt-panel--code { left: -2%; top: 14%; width: min(300px, 58%); }
.zt .zt-panel--status { right: 1%; top: 3%; width: 212px; }
.zt .zt-panel--chart { right: 5%; bottom: 7%; width: 252px; }
.zt .zt-panel__float { animation: zt-float 7s ease-in-out infinite; animation-delay: calc(var(--i) * -2.4s); }
.zt .zt-panel--status .zt-panel__float { animation-duration: 6s; }
.zt .zt-panel--chart .zt-panel__float { animation-duration: 8.5s; }
.zt .zt-panel__card {
	padding: 14px 16px; border: 1px solid rgba(229, 236, 245, .95); border-radius: 14px;
	background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: 0 1px 1px rgba(18, 35, 60, .04), 0 26px 50px -24px rgba(18, 35, 60, .3);
	font: 500 12px/1.4 var(--zt-body); color: var(--zt-ink);
	animation: zt-panel-in 1s var(--zt-ease) both; animation-delay: calc(1s + var(--i) * .2s);
}
.zt .zt-panel__bar { display: flex; align-items: center; gap: 6px; margin: -2px 0 10px; }
.zt .zt-panel__bar i { width: 8px; height: 8px; border-radius: 50%; background: #e2e8f0; }
.zt .zt-panel__bar span { margin-left: 8px; font: 500 11px var(--zt-mono); color: var(--zt-muted); }
.zt .zt-code { margin: 0; padding: 0; background: none; border: 0; overflow: hidden; white-space: pre; font: 400 11.5px/1.65 var(--zt-mono); color: var(--zt-ink); }
.zt .zt-code b { font-weight: 500; color: var(--zt-blue); }
.zt .zt-code s { text-decoration: none; color: #1f8f6a; }
.zt .zt-code em { font-style: normal; color: #94a3b8; }
.zt .zt-panel__title { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.zt .zt-panel__title small { margin-left: auto; font: 400 10.5px var(--zt-mono); color: var(--zt-muted); }
.zt .zt-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .15); }
.zt .zt-status { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.zt .zt-status li { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 10px; font: 400 11px var(--zt-mono); color: var(--zt-muted); }
.zt .zt-status i { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--zt-soft) var(--w), #edf2f9 var(--w)); }
.zt .zt-spark { display: block; width: 100%; height: auto; }
.zt .zt-spark__line { stroke-dasharray: 400; animation: zt-draw 2.2s var(--zt-ease) 1.6s both; }
.zt .zt-bars { display: flex; align-items: flex-end; gap: 5px; height: 26px; margin-top: 8px; }
.zt .zt-bars i { flex: 1; height: var(--h); border-radius: 3px; background: linear-gradient(#cfe0ff, #e8f0fe); }
.zt .zt-bars i:nth-child(6) { background: var(--zt-blue); }
@keyframes zt-float { 50% { transform: translateY(-10px); } }
@keyframes zt-panel-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes zt-draw { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }

@media (max-width: 1024px) {
	.zt .zt-scene { height: 480px; }
}
@media (max-width: 767px) {
	.zt .zt-scene { height: 380px; }
	.zt .zt-panel--chart { display: none; }
	.zt .zt-panel--code { left: 0; top: auto; bottom: 2%; width: 232px; }
	.zt .zt-panel--status { right: 0; width: 176px; }
	.zt .zt-code { font-size: 10.5px; }
	.zt .zt-hero__ctas .elementor-widget-button { flex: 1 1 auto; }
	.zt .zt-hero__ctas .elementor-button { width: 100%; justify-content: center; }
}

/* ---------- AI banner hero (dark variant: .zt-hero--ai) ---------- */
.zt .zt-hero.zt-hero--ai {
	background: radial-gradient(ellipse 55% 70% at 27% 52%, #0b2a8f 0%, #031152 40%, #00073b 62%, #000818 100%);
	color: #fff;
}
.zt .zt-hero__net { position: absolute !important; inset: 88px 0 0 0; z-index: -1; /* starts under the header links */ margin: 0 !important; pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 12%, #000 55%); mask-image: linear-gradient(90deg, transparent 12%, #000 55%); }
.zt .zt-hero__net > * { height: 100%; }
.zt .zt-hero--ai .zt-net__lines line { stroke: rgba(131, 183, 255, .17); }
.zt .zt-hero--ai .zt-net__dots circle { fill: rgba(196, 214, 255, .75); }
.zt .zt-ai-head { text-align: center; }
.zt .zt-ai-head img {
	display: block; width: 100%; max-width: 720px; height: auto; margin-inline: auto;
	-webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 60%, transparent 100%); /* melts the photo edge into the page */
	mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 60%, transparent 100%);
	animation: zt-hover 9s ease-in-out infinite;
}
@keyframes zt-hover { 50% { transform: translateY(-12px); } }
.zt .zt-ai-title .elementor-heading-title {
	font-size: clamp(32px, 4.4vw, 68px); font-weight: 400; line-height: 1.12; letter-spacing: .02em; text-transform: uppercase; color: #fff;
	text-shadow: 0 0 4px rgba(255, 255, 255, .75), 0 0 18px rgba(167, 139, 250, .8), 0 0 48px rgba(124, 58, 237, .5);
}
.zt .zt-hero--ai .zt-hero__copy { background: radial-gradient(closest-side, rgba(0, 8, 28, .88) 55%, rgba(0, 8, 28, 0)); } /* keeps the plexus off the text */
.zt .zt-hero--ai .zt-w { overflow: visible; } /* keep the neon glow unclipped */
.zt .zt-ai-sub { margin-top: 28px; max-width: 33em; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.65; color: rgba(255, 255, 255, .8); }
.zt .zt-ai-ctas { margin-top: 34px; }
.zt .zt-btn--line .elementor-button,
.zt .zt-btn--glow .elementor-button {
	padding: 14px 30px; border: 1px dashed rgba(255, 255, 255, .6); border-radius: 6px; background: transparent; color: #fff;
	font-size: clamp(16px, 1.45vw, 21px); letter-spacing: .04em; text-transform: uppercase; box-shadow: none;
}
.zt .zt-btn--glow .elementor-button { border: 1px solid transparent; background: linear-gradient(135deg, #246bfd, #7c3aed); box-shadow: 0 0 28px rgba(124, 58, 237, .45); }
.zt .zt-btn--glow .elementor-button:hover { background: linear-gradient(135deg, #3b7bff, #8b5cf6); color: #fff; box-shadow: 0 0 40px rgba(139, 92, 246, .65); }
.zt .zt-btn--line .elementor-button:hover { background: rgba(255, 255, 255, .06); color: #fff; border-style: solid; border-color: #c4b5fd; box-shadow: 0 0 26px rgba(167, 139, 250, .45); }
/* Header sitting on the dark banner: white logo + links until the page scrolls */
.zt .zt-header__logo img { transition: filter .35s; }
html:not(.zt-scrolled) .zt:has(.zt-hero--ai) .zt-header__logo img { filter: brightness(0) invert(1); }
html:not(.zt-scrolled) .zt:has(.zt-hero--ai) .zt-header .hfe-nav-menu__toggle { color: #fff; }
@media (min-width: 1025px) {
	html:not(.zt-scrolled) .zt:has(.zt-hero--ai) .zt-header .hfe-nav-menu > li > a.hfe-menu-item { color: rgba(255, 255, 255, .86); }
	html:not(.zt-scrolled) .zt:has(.zt-hero--ai) .zt-header .hfe-nav-menu > li > a.hfe-menu-item:hover { color: #fff; background: rgba(255, 255, 255, .1); }
}
@media (max-width: 1024px) {
	.zt .zt-ai-head img { max-width: 520px; }
}
@media (max-width: 767px) {
	.zt .zt-ai-head img { max-width: 380px; }
	.zt .zt-ai-sub { margin-top: 20px; }
	.zt .zt-ai-ctas { margin-top: 26px; width: 100%; }
	.zt .zt-ai-ctas .elementor-widget-button { flex: 1 1 100%; }
	.zt .zt-ai-ctas .elementor-button { width: 100%; justify-content: center; padding: 13px 22px; }
}

/* ---------- Capability strip ---------- */
.zt .zt-caps { border-block: 1px solid var(--zt-border); }
.zt .zt-caps__label .elementor-heading-title { font: 600 11.5px/1 var(--zt-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--zt-ink); white-space: nowrap; }
.zt .zt-caps .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 12px 34px; margin: 0; counter-reset: zt-cap; }
.zt .zt-caps .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; counter-increment: zt-cap; font: 500 15px/1.3 var(--zt-body); color: var(--zt-ink); }
.zt .zt-caps .elementor-icon-list-item::before { content: counter(zt-cap, decimal-leading-zero); margin-right: 10px; font: 500 11px var(--zt-mono); color: var(--zt-blue); }
.zt .zt-caps .elementor-icon-list-item::after { display: none !important; }
/* list fills the row and spreads its items, so the strip spans the full box width on desktop */
.zt .zt-caps__list { flex-grow: 1; }
@media (min-width: 1025px) { .zt .zt-caps .elementor-icon-list-items { justify-content: space-between; } }

/* ---------- Section heads ---------- */
.zt .zt-head .zt-h2 { margin-top: 16px; }
.zt .zt-head .zt-h2 + .zt-lead { margin-top: 20px; }
.zt .zt-head .zt-lead { max-width: 30em; }

/* ---------- Service cards ---------- */
.zt .zt-services__grid { counter-reset: zt-card; position: relative; }
.zt a.zt-card { color: var(--zt-muted); }
.zt .zt-card {
	position: relative; counter-increment: zt-card; text-decoration: none; height: 100%;
	padding: 30px 28px 26px; border: 1px solid var(--zt-border); border-radius: var(--zt-radius); background: #fff;
	transition: transform .4s var(--zt-ease), box-shadow .4s var(--zt-ease), border-color .4s;
}
.zt .zt-card:hover { transform: translateY(-6px); border-color: rgba(131, 183, 255, .75); box-shadow: var(--zt-shadow); }
.zt .zt-card::after { content: counter(zt-card, decimal-leading-zero); position: absolute; top: 28px; right: 26px; font: 500 12px var(--zt-mono); color: #a3b3c9; }
.zt .zt-card__icon .elementor-icon {
	width: 54px; height: 54px; display: grid; place-items: center; font-size: 28px; color: var(--zt-blue);
	border-radius: 14px; background: linear-gradient(180deg, #f3f8ff, #e5efff); box-shadow: inset 0 0 0 1px rgba(131, 183, 255, .4);
	transition: transform .4s var(--zt-ease);
}
.zt .zt-card__icon .elementor-icon svg { width: 28px; height: 28px; }
.zt .zt-card:hover .zt-card__icon .elementor-icon { transform: rotate(-6deg) scale(1.06); }
.zt .zt-card__title { margin-top: 26px; }
.zt .zt-card__title .elementor-heading-title { font: 700 21px/1.25 var(--zt-head); letter-spacing: -.02em; color: var(--zt-ink); }
.zt .zt-card__text { margin-top: 10px; font-size: 15.5px; line-height: 1.6; }
.zt .zt-card__link { margin-top: auto; padding-top: 22px; }
.zt .zt-card__link .elementor-heading-title { font: 600 14.5px/1 var(--zt-body); color: var(--zt-blue); }
.zt .zt-card__link .elementor-heading-title::after { content: "→"; display: inline-block; margin-left: .4em; transition: transform .3s var(--zt-ease); }
.zt .zt-card:hover .zt-card__link .elementor-heading-title::after { transform: translateX(4px); }
@media (min-width: 1025px) { /* fine wire linking the four services */
	.zt .zt-services__grid { padding-top: 44px; }
	.zt .zt-services__grid::after {
		content: ""; position: absolute; top: 10px; left: 55px; right: calc((100% - 60px) / 4 - 55px); height: 1px;
		background: linear-gradient(90deg, var(--zt-blue), var(--zt-soft)); transform-origin: left;
	}
	.zt-js .zt .zt-services__grid::after { transform: scaleX(0); transition: transform 1.6s var(--zt-ease) .3s; }
	.zt-js .zt .zt-services__grid.is-in::after { transform: scaleX(1); }
	.zt .zt-card__icon { position: relative; }
	.zt .zt-card__icon::before { content: ""; position: absolute; left: 26.5px; top: -64px; width: 1px; height: 34px; background: var(--zt-soft); }
	.zt .zt-card__icon::after { content: ""; position: absolute; left: 23px; top: -68px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--zt-blue); }
}

/* ---------- Featured projects ---------- */
.zt .zt-project + .zt-project { margin-top: clamp(56px, 6vw, 88px); }
.zt .zt-project__media { position: relative; isolation: isolate; --padding-top: 0; --padding-right: 9%; --padding-bottom: 9%; --padding-left: 0; }
.zt .zt-project__media::after {
	content: ""; position: absolute; z-index: -1; inset: 10% 0 0 9%; border-radius: 26px;
	border: 1px solid var(--zt-border); background: linear-gradient(140deg, #eef4ff, #f8fbff 60%);
}
.zt .zt-project--flip .zt-project__media { --padding-top: 0; --padding-right: 0; --padding-bottom: 9%; --padding-left: 9%; }
.zt .zt-project--flip .zt-project__media::after { inset: 10% 9% 0 0; }
.zt .zt-shot img { display: block; width: 100%; border-radius: 16px; border: 1px solid var(--zt-border); box-shadow: 0 2px 4px rgba(18, 35, 60, .05), 0 40px 80px -40px rgba(18, 35, 60, .4); }
.zt .zt-layer { position: absolute !important; right: 0; bottom: 0; width: 26%; z-index: 2; }
.zt .zt-project--flip .zt-layer { right: auto; left: 0; }
.zt .zt-layer img { display: block; width: 100%; border-radius: 20px; border: 1px solid var(--zt-border); box-shadow: 0 30px 60px -28px rgba(18, 35, 60, .45); }
.zt .zt-badge .elementor-heading-title {
	display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px;
	background: #eef4ff; color: var(--zt-blue); font: 600 12px/1 var(--zt-body); letter-spacing: .04em;
}
.zt .zt-badge .elementor-heading-title::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.zt .zt-project__title { margin-top: 14px; }
.zt .zt-project__title .elementor-heading-title { font: 700 clamp(26px, 2.4vw, 34px)/1.12 var(--zt-head); letter-spacing: -.035em; color: var(--zt-ink); }
.zt .zt-project__sub { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--zt-ink); }
.zt .zt-meta { margin-top: 18px; font-size: 14.5px; line-height: 1.5; }
.zt .zt-meta p { display: grid; grid-template-columns: 96px 1fr; gap: 14px; margin: 0; padding: 9px 0; border-top: 1px solid var(--zt-border); }
.zt .zt-meta strong { padding-top: 2px; font: 600 10.5px/1.4 var(--zt-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--zt-ink); }
.zt .zt-chips ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.zt .zt-chips { font: 500 12.5px/1 var(--zt-mono); color: var(--zt-ink); }
.zt .zt-chips li { padding: 6px 10px; border: 1px solid var(--zt-border); border-radius: 8px; background: #fff; }
@media (max-width: 1024px) {
	.zt .zt-project__media,
	.zt .zt-project--flip .zt-project__media { --padding-top: 0; --padding-right: 8%; --padding-bottom: 8%; --padding-left: 0; }
	.zt .zt-project--flip .zt-project__media::after { inset: 10% 0 0 9%; }
	.zt .zt-project--flip .zt-layer { left: auto; right: 0; }
}
@media (max-width: 767px) {
	.zt .zt-meta p { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Process ---------- */
.zt .zt-steps {
	position: relative;
	background: linear-gradient(var(--zt-border), var(--zt-border)) no-repeat 23px 23px / calc(100% - (100% - 96px) / 4) 1px;
}
.zt .zt-steps::after {
	content: ""; position: absolute; top: 22px; left: 23px; height: 2px; width: calc(100% - (100% - 96px) / 4);
	background: linear-gradient(90deg, var(--zt-blue), var(--zt-soft)); transform-origin: left;
	transform: scaleX(var(--zt-progress, 1)); transition: transform .3s linear;
}
.zt-js .zt .zt-steps { --zt-progress: 0; }
.zt .zt-step__num .elementor-heading-title {
	position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
	border: 1px solid var(--zt-blue); background: var(--zt-blue); color: #fff; font: 600 13px/1 var(--zt-mono);
	box-shadow: 0 0 0 6px rgba(36, 107, 253, .12); transition: background-color .5s, color .5s, border-color .5s, box-shadow .5s;
}
.zt-js .zt .zt-step:not(.is-active) .zt-step__num .elementor-heading-title { background: #fff; border-color: var(--zt-border); color: var(--zt-muted); box-shadow: 0 0 0 6px rgba(36, 107, 253, 0); }
.zt .zt-step > .elementor-element:not(.zt-step__num) { transition: opacity .5s; }
.zt-js .zt .zt-step:not(.is-active) > .elementor-element:not(.zt-step__num) { opacity: .5; }
.zt .zt-step__title { margin-top: 26px; }
.zt .zt-step__title .elementor-heading-title { font: 700 22px/1.2 var(--zt-head); letter-spacing: -.02em; color: var(--zt-ink); }
.zt .zt-step__text { margin-top: 10px; font-size: 15.5px; line-height: 1.6; }
.zt .zt-step__out { margin-top: 18px; }
.zt .zt-step__out .elementor-heading-title { display: inline-block; padding: 7px 11px; border-radius: 8px; background: #fff; border: 1px solid var(--zt-border); font: 500 12px/1 var(--zt-mono); color: var(--zt-ink); }
.zt .zt-step__out .elementor-heading-title::before { content: "OUT → "; color: var(--zt-blue); }
@media (max-width: 767px) {
	.zt .zt-steps { background-position: 23px 23px; background-size: 1px calc(100% - 46px); }
	.zt .zt-steps::after { left: 22px; top: 23px; width: 2px; height: calc(100% - 46px); transform-origin: top; transform: scaleY(var(--zt-progress, 1)); }
	.zt .zt-step { --padding-left: 70px; position: relative; }
	.zt .zt-step__num { position: absolute !important; left: 0; top: 0; }
	.zt .zt-step__title { margin-top: 8px; }
}

/* ---------- Technology tiles ---------- */
.zt .zt-tile {
	position: relative; min-height: 200px; --padding-top: 22px; --padding-right: 22px; --padding-bottom: 22px; --padding-left: 22px; border: 1px solid var(--zt-border); border-radius: 16px; background: #fff;
	transition: transform .4s var(--zt-ease), box-shadow .4s var(--zt-ease), border-color .4s;
}
.zt .zt-tile:hover { transform: translateY(-4px); border-color: rgba(131, 183, 255, .75); box-shadow: var(--zt-shadow); }
.zt .zt-tile__sym .elementor-heading-title {
	display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px;
	background: #f2f7ff; box-shadow: inset 0 0 0 1px rgba(131, 183, 255, .45);
	font: 700 22px/1 var(--zt-head); letter-spacing: -.03em; color: var(--zt-blue); transition: background-color .4s, color .4s;
}
.zt .zt-tile:hover .zt-tile__sym .elementor-heading-title { background: var(--zt-blue); color: #fff; }
.zt .zt-tile__cat { position: absolute !important; top: 24px; right: 22px; }
.zt .zt-tile__cat .elementor-heading-title { font: 500 10.5px/1 var(--zt-mono); letter-spacing: .12em; text-transform: uppercase; color: #94a3b8; }
.zt .zt-tile__name { margin-top: auto; padding-top: 24px; }
.zt .zt-tile__name .elementor-heading-title { font: 700 18px/1.2 var(--zt-head); letter-spacing: -.02em; color: var(--zt-ink); }
.zt .zt-tile__text { margin-top: 6px; font-size: 14.5px; line-height: 1.5; }

/* ---------- Why choose us ---------- */
.zt .zt-principle { --padding-top: 18px; border-top: 1px solid var(--zt-border); }
.zt .zt-principle__title .elementor-heading-title { display: flex; align-items: center; gap: 10px; font: 700 17px/1.3 var(--zt-head); letter-spacing: -.015em; color: var(--zt-ink); }
.zt .zt-principle__title .elementor-heading-title::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--zt-blue); transform: rotate(45deg); }
.zt .zt-principle__text { margin-top: 8px; font-size: 15px; line-height: 1.6; }
.zt .zt-principle--key { border-top: 2px solid var(--zt-blue); }
.zt .zt-arch { padding: clamp(18px, 3vw, 32px); border: 1px solid var(--zt-border); border-radius: 24px; background: #fff; box-shadow: var(--zt-shadow); }
.zt .zt-arch svg { display: block; width: 100%; height: auto; overflow: visible; }
.zt .zt-arch__tier text { font: 600 10px var(--zt-mono); letter-spacing: .14em; fill: #94a3b8; }
.zt .zt-arch__boxes rect { fill: #f8fbff; stroke: var(--zt-border); }
.zt .zt-arch__boxes text { font: 600 13.5px var(--zt-body); fill: var(--zt-ink); }
.zt .zt-arch__boxes text.zt-arch__sub { font-weight: 400; font-size: 11.5px; fill: var(--zt-muted); }
.zt .zt-arch__boxes .is-hl rect { fill: var(--zt-blue); stroke: none; }
.zt .zt-arch__boxes .is-hl text { fill: #fff; }
.zt .zt-arch__boxes .is-hl text.zt-arch__sub { fill: rgba(255, 255, 255, .8); }
.zt .zt-arch__boxes .is-key rect { fill: #eaf2ff; stroke: var(--zt-blue); stroke-width: 1.5; }
.zt .zt-arch__boxes .is-key text:not(.zt-arch__sub) { fill: var(--zt-blue); }
.zt .zt-arch__lines path { fill: none; stroke: #b9d2ff; stroke-width: 1.5; stroke-dasharray: 4 5; animation: zt-dash 1.4s linear infinite; }
.zt .zt-arch__dots circle { fill: var(--zt-blue); }
@keyframes zt-dash { to { stroke-dashoffset: -9; } }

/* ---------- What you can expect ---------- */
.zt .zt-expect {
	position: relative; --padding-top: 28px; --padding-right: 26px; --padding-bottom: 28px; --padding-left: 26px; border-radius: var(--zt-radius); background: var(--zt-alt); overflow: hidden;
	transition: transform .4s var(--zt-ease), background-color .4s;
}
.zt .zt-expect::after { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--zt-blue); transform: scaleX(.12); transform-origin: left; transition: transform .6s var(--zt-ease); }
.zt .zt-expect:hover { transform: translateY(-4px); background: #eef4ff; }
.zt .zt-expect:hover::after { transform: scaleX(1); }
.zt .zt-expect__num .elementor-heading-title { font: 500 12px/1 var(--zt-mono); color: var(--zt-blue); }
.zt .zt-expect__title { margin-top: 40px; }
.zt .zt-expect__title .elementor-heading-title { font: 700 19px/1.3 var(--zt-head); letter-spacing: -.02em; color: var(--zt-ink); }
.zt .zt-expect__text { margin-top: 10px; font-size: 15px; line-height: 1.6; }

/* ---------- Final call to action ---------- */
.zt .zt-cta { position: relative; isolation: isolate; overflow: hidden; border-radius: 32px; border: 1px solid #d5e4ff; }
.zt .zt-cta__bg { position: absolute !important; inset: 0; z-index: -1; margin: 0 !important; pointer-events: none; }
.zt .zt-cta__bg > * { height: 100%; }
.zt .zt-cta__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 46% 62% at 50% 50%, rgba(240, 246, 255, .94), rgba(240, 246, 255, 0)); }
.zt .zt-net { display: block; width: 100%; height: 100%; animation: zt-drift 40s ease-in-out infinite alternate; }
.zt .zt-net__lines line { stroke: rgba(36, 107, 253, .2); stroke-width: 1; }
.zt .zt-net__dots circle { fill: rgba(36, 107, 253, .5); animation: zt-blink 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); }
.zt .zt-cta .zt-h2 .elementor-heading-title { font-size: clamp(34px, 4.4vw, 62px); }
.zt .zt-cta .zt-lead { margin-inline: auto; }
@keyframes zt-drift { to { transform: translateX(-3%) scale(1.05); } }
@keyframes zt-blink { 50% { opacity: .25; } }

/* ---------- Footer ---------- */
.zt .zt-footer { border-top: 1px solid var(--zt-border); }
.zt .zt-footer__logo { text-align: left; }
.zt .zt-footer__logo img { width: 170px; height: auto; }
.zt .zt-footer__title .elementor-heading-title { font: 600 11.5px/1 var(--zt-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--zt-ink); }
.zt .zt-footer .elementor-icon-list-item { padding-block: 5px !important; }
.zt .zt-footer .elementor-icon-list-item a,
.zt .zt-footer .elementor-icon-list-text { font-size: 15px; color: var(--zt-muted); transition: color .2s; }
.zt .zt-footer .elementor-icon-list-item a:hover .elementor-icon-list-text { color: var(--zt-blue); }
.zt .zt-footer__bottom { border-top: 1px solid var(--zt-border); font-size: 14px; }
.zt .zt-footer a { text-decoration: none; }

/* ---------- Contact page ---------- */
.zt .zt-contact { background:
	radial-gradient(ellipse 85% 75% at 50% 30%, rgba(255, 255, 255, 0) 30%, #fff 76%),
	linear-gradient(var(--zt-border) 1px, transparent 1px) 0 0 / 64px 64px,
	linear-gradient(90deg, var(--zt-border) 1px, transparent 1px) 0 0 / 64px 64px, #fff; margin-top: calc(-1 * var(--zt-header-h)); }
.zt .zt-form-card { --padding-top: clamp(22px, 3vw, 36px); --padding-right: clamp(22px, 3vw, 36px); --padding-bottom: clamp(22px, 3vw, 36px); --padding-left: clamp(22px, 3vw, 36px); border: 1px solid var(--zt-border); border-radius: 24px; background: #fff; box-shadow: var(--zt-shadow); }
.zt .zt-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.zt .zt-f { margin: 0; grid-column: 1 / -1; }
.zt .zt-f--half { grid-column: auto; }
.zt .zt-f label { display: block; font: 600 14px/1.3 var(--zt-body); color: var(--zt-ink); }
.zt .zt-f label span.zt-opt { font-weight: 400; color: var(--zt-muted); }
.zt .zt-form input:not([type="submit"]):not([type="checkbox"]),
.zt .zt-form select,
.zt .zt-form textarea {
	display: block; width: 100%; margin-top: 8px; padding: 13px 14px; border: 1px solid var(--zt-border); border-radius: 12px;
	background: #fff; font: 400 16px/1.4 var(--zt-body); color: var(--zt-ink); transition: border-color .2s, box-shadow .2s;
}
.zt .zt-form textarea { height: 160px; min-height: 120px; resize: vertical; }
.zt .zt-form input:focus, .zt .zt-form select:focus, .zt .zt-form textarea:focus { outline: none; border-color: var(--zt-blue); box-shadow: 0 0 0 4px rgba(36, 107, 253, .14); }
.zt .zt-form .wpcf7-submit { min-height: 52px; padding-inline: 28px; border: 0; cursor: pointer; } /* Hello's reset adds a pink border */
.zt .zt-form .wpcf7-spinner { margin: 0 0 0 12px; vertical-align: middle; }
.zt .wpcf7-not-valid-tip { margin-top: 6px; font-size: 13px; color: #c2410c; }
.zt .wpcf7 form .wpcf7-response-output { margin: 18px 0 0; padding: 12px 14px; border-radius: 12px; font-size: 14.5px; }
.zt .wpcf7 form.sent .wpcf7-response-output { border-color: #22c55e; background: #f0fdf4; color: #166534; }
.zt .zt-contact-list p { display: grid; gap: 2px; margin: 0; padding: 16px 0; border-top: 1px solid var(--zt-border); }
.zt .zt-contact-list strong { font: 600 11px/1.4 var(--zt-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--zt-ink); }
.zt .zt-contact-list a { color: var(--zt-blue); text-decoration: none; font-size: 17px; }
@media (max-width: 600px) {
	.zt .zt-form { grid-template-columns: 1fr; }
	.zt .zt-form .wpcf7-submit { width: 100%; }
}

/* ---------- Entrance states (only while the motion script is running) ---------- */
.zt-js .zt .zt-reveal,
.zt-js .zt .zt-stagger > .elementor-element,
.zt-js .zt .zt-stagger > .e-con-inner > .elementor-element,
.zt-js .zt .zt-hero__copy .elementor-widget,
.zt-js .zt .zt-hero .zt-hero__visual { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	.zt *, .zt *::before, .zt *::after { animation: none !important; transition-duration: .01ms !important; }
	.zt .zt-arch__dots { display: none; }
}

/* ---------- Section-specific spacing ---------- */
.zt .zt-display--sm .elementor-heading-title { font-size: clamp(38px, 4.4vw, 64px); }
.zt .zt-card__icon .elementor-icon-wrapper { text-align: left; line-height: 0; }
.zt .zt-cta .zt-lead { margin-top: 20px; }
.zt .zt-cta .zt-cta__btn { margin-top: 36px; }
.zt .zt-form-title .elementor-heading-title { font: 700 22px/1.2 var(--zt-head); letter-spacing: -.02em; color: var(--zt-ink); }
.zt .zt-contact__copy .zt-display { margin-top: 20px; }
.zt .zt-contact__copy .zt-lead { margin-top: 22px; }
.zt .zt-contact-list { margin-top: 36px; width: 100%; }
@media (min-width: 1025px) {
	.zt .zt-why__visual { position: sticky; top: 112px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.zt .zt-steps { background: none; }
	.zt .zt-steps::after { display: none; }
}
@media (max-width: 1024px) {
	.zt .zt-header .zt-header__nav { width: auto; flex: 0 0 auto; }
}
@media (max-width: 767px) {
	.zt .zt-tile { min-height: 0; --padding-top: 18px; --padding-right: 18px; --padding-bottom: 18px; --padding-left: 18px; }
	.zt .zt-tile__cat { position: static !important; margin-top: 14px; }
	.zt .zt-tile__name { margin-top: 6px; padding-top: 0; }
}
.zt .zt-header nav.hfe-dropdown li { border-color: var(--zt-border) !important; }
.zt .zt-header nav.hfe-dropdown li:last-child { border-bottom: 0 !important; }

/* ---------- Intro (who we are) ---------- */
.zt .zt-intro__statement { margin-top: 16px; }
.zt .zt-intro__statement .elementor-heading-title { font: 600 clamp(28px, 3.3vw, 46px)/1.22 var(--zt-head); letter-spacing: -.03em; color: var(--zt-ink); }
.zt .zt-intro__soft { color: #94a3b8; }
.zt .zt-intro__text { margin-top: 20px; font-size: 16.5px; line-height: 1.65; }
.zt .zt-intro__text p + p { margin-top: 10px; }
.zt .zt-intro__sign { margin-top: 22px; --padding-top: 18px; border-top: 1px solid var(--zt-border); }
.zt .zt-intro__mark img { display: block; width: 44px; height: 44px; }
.zt .zt-intro__name .elementor-heading-title { font: 700 15px/1.35 var(--zt-head); color: var(--zt-ink); }
.zt .zt-intro__name small { display: block; font: 500 11px/1.6 var(--zt-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--zt-muted); }
.zt .zt-intro__link { margin-top: 18px; }
.zt .zt-intro__link .elementor-heading-title { font: 600 15px/1 var(--zt-body); color: var(--zt-blue); }
.zt .zt-intro__link .elementor-heading-title a { color: inherit; text-decoration: none; }
.zt .zt-intro__link a::after { content: "↓"; display: inline-block; margin-left: .45em; transition: transform .3s var(--zt-ease); }
.zt .zt-intro__link a:hover::after { transform: translateY(3px); }
.zt .zt-intro + .zt-services { border-top: 0; }

/* ---------- Intro photo collage (pinwheel of four tiles, after the client's reference) ---------- */
.zt .zt-intro__media { --padding-top: 26px; --padding-right: 26px; --padding-bottom: 26px; --padding-left: 26px; }
.zt .zt-collage {
	position: relative; isolation: isolate; display: grid !important; width: 100%; max-width: 460px; margin-inline: auto;
	grid-template-columns: repeat(10, 1fr); grid-template-rows: 1fr 1fr; gap: 10px; aspect-ratio: 1 / 1;
	--arc: 14px; --arc-gap: 9px; --r-big: 54px;
}
.zt .zt-ct { margin: 0 !important; overflow: hidden; border-radius: 16px; background: var(--zt-alt); }
.zt .zt-ct img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .8s var(--zt-ease); }
.zt .zt-ct:hover img { transform: scale(1.04); }
.zt .zt-ct--a { grid-column: 1 / 7; grid-row: 1; border-top-left-radius: var(--r-big); }
.zt .zt-ct--b { grid-column: 7 / 11; grid-row: 1; }
.zt .zt-ct--c { grid-column: 1 / 5; grid-row: 2; }
.zt .zt-ct--d { grid-column: 5 / 11; grid-row: 2; border-bottom-right-radius: var(--r-big); }
.zt .zt-collage__decor { position: absolute !important; inset: 0; margin: 0 !important; pointer-events: none; }
.zt .zt-decor { position: absolute; inset: 0; }
/* Thick frames hugging the two outer corners, concentric with the tile corners */
.zt .zt-decor__arc { position: absolute; z-index: -1; width: 46%; height: 47%; border: var(--arc) solid var(--zt-blue); --o: calc(-1 * (var(--arc) + var(--arc-gap))); }
.zt .zt-decor__arc--tl { top: var(--o); left: var(--o); border-right: 0; border-bottom: 0; border-top-left-radius: calc(var(--r-big) + var(--arc) + var(--arc-gap)); }
.zt .zt-decor__arc--br { right: var(--o); bottom: var(--o); border-color: #0f2557; border-left: 0; border-top: 0; border-bottom-right-radius: calc(var(--r-big) + var(--arc) + var(--arc-gap)); }
.zt .zt-decor__star { position: absolute; fill: var(--zt-blue); animation: zt-twinkle 3.2s ease-in-out infinite; }
.zt .zt-decor__star--lg { width: 42px; left: -34px; bottom: 17%; }
.zt .zt-decor__star--sm { width: 20px; left: -6px; bottom: 7%; animation-delay: -1.6s; }
/* Centre badge: navy disc, rotating white text, blue core with the mark */
.zt .zt-decor__badge { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; padding: 5px; background: #fff; box-shadow: 0 0 0 1px #cfe0ff, 0 14px 30px -12px rgba(15, 37, 87, .55); }
.zt .zt-decor__badge svg { display: block; width: 100%; height: 100%; animation: zt-spin 18s linear infinite; }
.zt .zt-decor__badge circle { fill: #0f2557; }
.zt .zt-decor__badge text { font: 600 9.6px var(--zt-body); letter-spacing: .5px; fill: #fff; }
.zt .zt-decor__badge img { position: absolute; left: 50%; top: 50%; width: 34%; height: 34%; translate: -50% -50%; padding: 6%; border-radius: 50%; background: var(--zt-blue); box-sizing: content-box; filter: none; }
@keyframes zt-spin { to { transform: rotate(1turn); } }
@keyframes zt-twinkle { 50% { transform: scale(.7); opacity: .6; } }
.zt .zt-intro__statement .elementor-heading-title { font-size: clamp(24px, 2.3vw, 34px); }
@media (max-width: 767px) {
	.zt .zt-intro__media { --padding-top: 20px; --padding-right: 20px; --padding-bottom: 20px; --padding-left: 20px; }
	.zt .zt-collage { gap: 8px; --arc: 10px; --arc-gap: 6px; --r-big: 36px; }
	.zt .zt-decor__badge text { font-size: 10.5px; }
	.zt .zt-decor__star--lg { width: 30px; left: -22px; }
	.zt .zt-decor__star--sm { width: 15px; left: -4px; }
}

/* ---------- Service cards: photo row with a notched arrow (after the client's reference) ---------- */
.zt .zt-services { --zt-notch: var(--zt-alt); } /* notch colour = section background */
.zt .zt-services .zt-h2 .elementor-heading-title { font-size: clamp(30px, 3.1vw, 44px); } /* two lines instead of three */
.zt .zt-svc-row { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.zt .zt-svc-row::-webkit-scrollbar { display: none; }
.zt .zt-svc {
	position: relative; isolation: isolate; overflow: hidden; flex: 0 0 calc((100% - 48px) / 4) !important; aspect-ratio: 4 / 5; /* Elementor resets flex on phones */
	--padding-top: 24px; --padding-right: 96px; --padding-bottom: 26px; --padding-left: 22px; border-radius: 20px; scroll-snap-align: start; text-decoration: none; color: #fff;
}
.zt .zt-svc__img { position: absolute !important; inset: 0; z-index: -2; margin: 0 !important; }
.zt .zt-svc__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: grayscale(1) brightness(.8) contrast(1.05); transition: filter .6s, transform .9s var(--zt-ease); }
.zt .zt-svc::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(14, 44, 140, .95), rgba(36, 107, 253, .55) 45%, rgba(36, 107, 253, .14) 80%); } /* blue overlay */
.zt .zt-svc:hover .zt-svc__img img,
.zt .zt-svc:focus-visible .zt-svc__img img { filter: grayscale(0) brightness(.85); transform: scale(1.05); }
.zt .zt-svc__title .elementor-heading-title { font: 600 18px/1.25 var(--zt-head); letter-spacing: -.01em; color: #fff; transition: color .3s; }
.zt .zt-svc__text { max-height: 0; opacity: 0; overflow: hidden; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .8); transition: max-height .5s var(--zt-ease), opacity .4s, margin-top .4s; }
.zt .zt-svc:hover .zt-svc__text,
.zt .zt-svc:focus-visible .zt-svc__text { max-height: 7em; margin-top: 8px; opacity: 1; }
@media (hover: none) {
	.zt .zt-svc__text { max-height: none; margin-top: 8px; opacity: 1; }
}
/* Notch: a section-coloured block in the corner with inverted-radius fillets, holding the round arrow button */
.zt .zt-svc__go { position: absolute !important; right: 0; bottom: 0; z-index: 2; width: 78px; height: 78px; margin: 0 !important; background: var(--zt-notch); border-top-left-radius: 34px; }
.zt .zt-svc__go::before,
.zt .zt-svc__go::after { content: ""; position: absolute; width: 20px; height: 20px; background: radial-gradient(circle at 0 0, transparent 19.5px, var(--zt-notch) 20px); }
.zt .zt-svc__go::before { left: -20px; bottom: 0; }
.zt .zt-svc__go::after { right: 0; top: -20px; }
.zt .zt-svc__go .elementor-heading-title { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--zt-ink); transition: background-color .3s; }
.zt .zt-svc__arrow { display: block; width: 22px; height: 22px; transition: transform .35s var(--zt-ease);
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E"); }
.zt .zt-svc:hover .zt-svc__go .elementor-heading-title,
.zt .zt-svc:focus-visible .zt-svc__go .elementor-heading-title,
.zt .zt-svc-row:not(:hover) .zt-svc:first-child .zt-svc__go .elementor-heading-title { background: var(--zt-blue); }
.zt .zt-svc:hover .zt-svc__arrow { transform: rotate(45deg); }
/* Scroll indicator under the row (added by zt.js, hidden when everything fits) */
.zt .zt-svc-bar { position: relative; width: 100%; max-width: 440px; height: 3px; margin: -22px auto 0; border-radius: 3px; background: #dbe4f0; }
.zt .zt-svc-bar[hidden] { display: none; }
.zt .zt-svc-bar i { position: absolute; top: 0; height: 100%; border-radius: 3px; background: var(--zt-ink); }
@media (max-width: 1024px) {
	.zt .zt-svc { flex: 0 0 42% !important; }
}
@media (max-width: 767px) {
	.zt .zt-svc { flex: 0 0 76% !important; --padding-top: 20px; --padding-right: 90px; --padding-bottom: 22px; --padding-left: 18px; }
	.zt .zt-svc-bar { margin-top: -14px; }
}