/* Prezlab Core — widget styles
   Design tokens mirror the Figma design system.
   Build stamp below: check it in devtools or by opening this file to
   confirm which version a browser is actually being served. */

:root { --pz-build: "2.6.1"; }
:root {
	--pz-dark: #002528;
	--pz-dark-700: #1a4a4e;
	--pz-ink: #0b2427;
	--pz-teal: #b6edf3;
	--pz-teal-200: #c1ebf2;
	--pz-slate: #62848c;
	--pz-off: #f9f9f7;
	--pz-grey: #f5f6f6;
	--pz-sand: #e4d7ca;
	--pz-radius: 12px;
	/* Named literally on purpose. Elementor always DEFINES its global font
	   variables, so a var(--e-global-…, fallback) never falls back — it would
	   silently inherit whatever Primary/Secondary happen to be set to.
	   Retarget with --pz-font-override / --pz-accent-font-override if needed. */
	--pz-font: var(--pz-font-override, "Figtree"),
		system-ui, -apple-system, "Segoe UI", sans-serif;
	--pz-accent-font: var(--pz-accent-font-override, "PP Editorial New"),
		"Times New Roman", Georgia, serif;
}

.pz-accent {
	font-family: var(--pz-accent-font);
	font-style: italic;
	font-weight: 400;
}

.pz-arrow {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
}

/* ---------------------------------------------------------- section heading */

.pz-sh__box {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.pz-sh[style*="center"] .pz-sh__box,
.pz-sh__box { align-items: center; }

.pz-sh__overline {
	margin: 0 0 36px;
	font-family: var(--pz-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.612px;
	text-transform: uppercase;
}

.pz-sh__title {
	margin: 0;
	font-family: var(--pz-font);
	font-weight: 600;
	line-height: 1.2;
}

.pz-sh__title,
.pz-sh__overline,
.pz-sh__sub { max-width: 100%; }

.pz-sh__sub {
	margin: 27px 0 0;
	font-family: var(--pz-font);
	font-size: 17.25px;
	line-height: 25.8px;
	/* No blanket dimming: some sections use a muted colour at full opacity,
	   others use a bright colour at 50%. The widget control decides. */
}

.pz-sh[style*="left"] .pz-sh__sub { margin-inline: 0 auto; }

/* --------------------------------------------------------- rotating heading */

.pz-rot {
	margin: 0;
	font-family: var(--pz-font);
	font-weight: 400;
}

/*
 * The active word sits in normal flow, so the slot is exactly as wide as the
 * word being shown — no hardcoded widths and correct spacing from first paint.
 * Inactive words are stacked absolutely on top and take no space.
 */
.pz-rot__slot {
	position: relative;
	display: inline-block;
	/* Baseline, not bottom: the italic serif has different metrics from the
	   sans around it, so aligning box edges drops the word off the baseline. */
	vertical-align: baseline;
	white-space: nowrap;
	/* Italic side bearings make the gap before the word look wider than the
	   one after it. Shift it without changing the space it occupies. */
	margin-inline: var(--pz-rot-kern, -0.05em) calc(var(--pz-rot-kern, -0.05em) * -1);
	/* Clip tight to the line so the outgoing word cannot show above or below
	   it. Only a hair of room at the bottom, for italic descenders, and at the
	   sides, where the italic overhangs. */
	clip-path: inset(0 -0.3em -0.1em -0.12em);
	transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pz-rot__word {
	display: inline-block;
	white-space: nowrap;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	transform: translateY(0.62em);
	/* The fade finishes first on purpose: by the time a word reaches the edge
	   of the clip it is already invisible. */
	transition: opacity 170ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

.pz-rot__word.is-active {
	position: relative;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	/* Arriving word fades in a little more slowly than the one leaving. */
	transition: opacity 260ms ease 60ms, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pz-rot__word.is-leaving {
	opacity: 0;
	transform: translateY(-0.62em);
}

/* ----------------------------------------------------------- circle carousel */

.pz-circles {
	--pz-circle-size: 232px;
	--pz-circle-gap: 96px;
	--pz-circles-blur: 14px;
	--pz-circles-duration: 12s;
	--pz-circles-count: 4;
	--pz-circles-h: 760px;
	position: relative;
	width: 100%;
	overflow: hidden;
}

.pz-circles__stage {
	position: absolute;
	inset: 0;
}

.pz-circles__item {
	--pz-travel: calc((var(--pz-circles-h) + var(--pz-circle-size)) / 2);
	position: absolute;
	top: 50%;
	left: 50%;
	margin: calc(var(--pz-circle-size) / -2) 0 0 calc(var(--pz-circle-size) / -2);
	width: var(--pz-circle-size);
	height: var(--pz-circle-size);
	border-radius: 50%;
	overflow: hidden;
	will-change: transform, filter, opacity;
	animation: pz-circle-travel var(--pz-circles-duration) linear infinite;
	animation-delay: calc(
		var(--pz-circles-duration) / var(--pz-circles-count) * var(--pz-circles-index) * -1
	);
}

.pz-circles--down .pz-circles__item { animation-direction: reverse; }
.pz-circles--pause:hover .pz-circles__item { animation-play-state: paused; }

.pz-circles__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Sharp and round in the middle, squashed and motion-blurred at both ends. */
@keyframes pz-circle-travel {
	0% {
		transform: translateY(var(--pz-travel)) scaleY(0.22);
		filter: blur(var(--pz-circles-blur));
		opacity: 0;
	}
	14% {
		transform: translateY(calc(var(--pz-travel) * 0.72)) scaleY(0.55);
		filter: blur(calc(var(--pz-circles-blur) * 0.55));
		opacity: 1;
	}
	50% {
		transform: translateY(0) scaleY(1);
		filter: blur(0);
		opacity: 1;
	}
	86% {
		transform: translateY(calc(var(--pz-travel) * -0.72)) scaleY(0.55);
		filter: blur(calc(var(--pz-circles-blur) * 0.55));
		opacity: 1;
	}
	100% {
		transform: translateY(calc(var(--pz-travel) * -1)) scaleY(0.22);
		filter: blur(var(--pz-circles-blur));
		opacity: 0;
	}
}

/* ----------------------------------------------------------------- stats grid */

.pz-stats {
	--pz-stats-border: rgba(255, 255, 255, 0.15);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: 100%;
	border: 1px solid var(--pz-stats-border);
}

.pz-stats--dividers,
.pz-stats--none { border: 0; }
.pz-stats--none .pz-stats__item { border-inline-end: 0; }

.pz-stats__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	text-align: center;
	padding: 36px 24px;
	border-inline-end: 1px solid var(--pz-stats-border);
}

.pz-stats__item:last-child { border-inline-end: 0; }

.pz-stats__num {
	font-family: var(--pz-font);
	font-weight: 400;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.pz-stats__label {
	font-family: var(--pz-font);
	font-size: 17.25px;
}

/* --------------------------------------------------------------- logo marquee */

.pz-marquee {
	--pz-marquee-duration: 34s;
	--pz-marquee-border: rgba(255, 255, 255, 0.15);
	--pz-marquee-per-view: 6;
	--pz-marquee-gap: 96px;
	width: 100%;
	padding-block: 32px;
}

.pz-marquee--border { border-bottom: 1px solid var(--pz-marquee-border); }
.pz-marquee--border-top { border-bottom: 0; border-top: 1px solid var(--pz-marquee-border); }

.pz-marquee--static .pz-marquee__track {
	animation: none;
	width: 100%;
	justify-content: space-between;
}

.pz-marquee__viewport { overflow: hidden; width: 100%; }

.pz-marquee--fade .pz-marquee__viewport {
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.pz-marquee__track {
	display: flex;
	align-items: center;
	gap: var(--pz-marquee-gap);
	width: max-content;
	animation: pz-marquee var(--pz-marquee-duration) linear infinite;
	will-change: transform;
}

.pz-marquee--reverse .pz-marquee__track { animation-direction: reverse; }
.pz-marquee--pause:hover .pz-marquee__track { animation-play-state: paused; }

.pz-marquee__item {
	/* Equal share of the CONTAINER so exactly --pz-marquee-per-view fit.
	   Must not be viewport-based or the track overflows a boxed section. */
	flex: 0 0 calc(
		(100% - (var(--pz-marquee-gap) * (var(--pz-marquee-per-view) - 1)))
		/ var(--pz-marquee-per-view)
	);
	display: flex;
	align-items: center;
	justify-content: center;
}

.pz-marquee--static .pz-marquee__item { flex: 1 1 0; }

.pz-marquee__item img {
	height: 30px;
	width: auto;
	display: block;
	object-fit: contain;
}

@keyframes pz-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-50% - 48px)); }
}

/* -------------------------------------------------------------- altitude cards */

.pz-cards {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 29px;
	width: 100%;
	/* Headroom so a lifted card is never clipped, pulled back up again so the
	   resting spacing above the row still matches the design. */
	padding-top: var(--pz-card-lift, 12px);
	margin-top: calc(var(--pz-card-lift, 12px) * -1);
}

.pz-card {
	--pz-card-lift: 12px;
	position: relative;
	flex: 0 0 448px;
	max-width: 448px;
	/* All cards share the height of the tallest closed one, so a long heading
	   never makes one box bigger than its neighbours. Measured in JS. */
	min-height: var(--pz-cards-min, 0px);
	border-radius: 9px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transform: translateY(0);
	transition:
		transform 560ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 560ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

/* Lift and settle, the way the reference site does it. */
.pz-card:hover,
.pz-card:focus-within,
.pz-card.is-open {
	transform: translateY(calc(var(--pz-card-lift) * -1));
	box-shadow: 0 28px 56px rgba(0, 0, 0, 0.3);
}

/* Fixed height — the image never shrinks or crops when the menu opens. */
.pz-card__media {
	flex: 0 0 auto;
	height: 347px;
	overflow: hidden;
}

.pz-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1);
	transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pz-card:hover .pz-card__media img,
.pz-card.is-open .pz-card__media img { transform: scale(1.05); }

.pz-card__body {
	--pz-card-ink: #0b2427;
	position: relative;
	/* Fills whatever is left of the shared height, so every coloured panel
	   starts at the same line and they all match. */
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 17.25px;
	padding: 25.5px;
	background-color: var(--pz-sand);
	color: var(--pz-card-ink);
}

.pz-card__label {
	margin: 0;
	font-family: var(--pz-font);
	font-size: 14px;
	text-transform: uppercase;
	color: var(--pz-dark-700);
}

.pz-card__title {
	margin: 0;
	font-family: var(--pz-font);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--pz-card-ink);
}

/* The toggle is an invisible hit area covering the card on touch devices. */
.pz-card__toggle {
	position: absolute;
	inset: 0;
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	display: none;
}

.pz-card__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pz-card__panel > .pz-card__list { overflow: hidden; }

.pz-cards--open .pz-card__panel,
.pz-card:hover .pz-card__panel,
.pz-card:focus-within .pz-card__panel,
.pz-card.is-open .pz-card__panel {
	grid-template-rows: 1fr;
}

.pz-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pz-card__row {
	border-top: 1px solid rgba(11, 36, 39, 0.2);
	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity 300ms ease,
		transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Rows arrive one after another as the panel opens. */
.pz-cards--open .pz-card__row,
.pz-card:hover .pz-card__row,
.pz-card:focus-within .pz-card__row,
.pz-card.is-open .pz-card__row {
	opacity: 1;
	transform: translateY(0);
}

.pz-card:hover .pz-card__row:nth-child(1),
.pz-card:focus-within .pz-card__row:nth-child(1),
.pz-card.is-open .pz-card__row:nth-child(1) { transition-delay: 120ms; }
.pz-card:hover .pz-card__row:nth-child(2),
.pz-card:focus-within .pz-card__row:nth-child(2),
.pz-card.is-open .pz-card__row:nth-child(2) { transition-delay: 170ms; }
.pz-card:hover .pz-card__row:nth-child(3),
.pz-card:focus-within .pz-card__row:nth-child(3),
.pz-card.is-open .pz-card__row:nth-child(3) { transition-delay: 220ms; }
.pz-card:hover .pz-card__row:nth-child(4),
.pz-card:focus-within .pz-card__row:nth-child(4),
.pz-card.is-open .pz-card__row:nth-child(4) { transition-delay: 270ms; }
.pz-card:hover .pz-card__row:nth-child(5),
.pz-card:focus-within .pz-card__row:nth-child(5),
.pz-card.is-open .pz-card__row:nth-child(5) { transition-delay: 320ms; }
.pz-card:hover .pz-card__row:nth-child(6),
.pz-card:focus-within .pz-card__row:nth-child(6),
.pz-card.is-open .pz-card__row:nth-child(6) { transition-delay: 370ms; }
.pz-card:hover .pz-card__row:nth-child(n+7),
.pz-card:focus-within .pz-card__row:nth-child(n+7),
.pz-card.is-open .pz-card__row:nth-child(n+7) { transition-delay: 420ms; }

.pz-card__row a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 17px;
	padding-block: 11px;
	font-family: var(--pz-font);
	font-size: 17.25px;
	line-height: 27.75px;
	color: var(--pz-card-ink);
	text-decoration: none;
	transition: opacity 200ms ease;
}

.pz-card__row a:hover { opacity: 0.62; }

.pz-card__row .pz-arrow { transition: transform 240ms ease; }
.pz-card__row a:hover .pz-arrow { transform: translate(2px, -2px); }

/* --------------------------------------------------------------- case studies */

.pz-cs {
	--pz-cs-ink: #ffffff;
	--pz-cs-h: 406px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	row-gap: 36px;
	column-gap: 33px;
	width: 100%;
}

.pz-cs__item {
	--pz-cs-bg: #00363b;
	height: var(--pz-cs-h);
	border-radius: 12px;
	overflow: hidden;
	background-color: var(--pz-cs-bg);
}

.pz-cs__item--feature { grid-column: 1 / -1; }

.pz-cs__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--pz-cs-ink);
	text-decoration: none;
}

/* Small card: image takes the remaining height above the text. */
.pz-cs__media {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

.pz-cs__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pz-cs__link:hover .pz-cs__media img { transform: scale(1.04); }

.pz-cs__body {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 27px;
	padding: 30px;
}

/* Featured card: image and text split 50/50 side by side. */
.pz-cs__item--feature .pz-cs__link { flex-direction: row; align-items: stretch; }
.pz-cs__item--feature .pz-cs__media { flex: 1 1 0; }
.pz-cs__item--feature .pz-cs__body {
	flex: 1 1 0;
	justify-content: center;
	padding: 30px 37.5px;
}

.pz-cs .pz-cs__tag {
	margin: 0;
	font-family: var(--pz-font);
	font-size: 13.3px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--pz-teal);
}

/* Scoped to .pz-cs so a theme or Elementor global heading rule cannot win
   on specificity and swap the family out from under the card. */
.pz-cs .pz-cs__title,
.pz-cs h3.pz-cs__title {
	margin: 0;
	font-family: var(--pz-font);
	font-size: 24px;
	font-weight: 400;
	line-height: 34.96px;
	letter-spacing: 0;
	color: var(--pz-cs-ink);
}

.pz-cs__item--feature .pz-cs__title {
	font-size: 30px;
	line-height: 37.96px;
	max-width: 520px;
}

.pz-cs__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-block: 9px;
	font-family: var(--pz-font);
	font-size: 15.97px;
	font-weight: 600;
	color: var(--pz-teal);
}

.pz-cs__cta .pz-arrow {
	width: 15px;
	height: 15px;
	flex-basis: 15px;
	transition: transform 240ms ease;
}

.pz-cs__link:hover .pz-cs__cta .pz-arrow { transform: translate(2px, -2px); }

@media (max-width: 1024px) {
	.pz-cs__item--feature .pz-cs__title { font-size: 24px; line-height: 32px; }
}

@media (max-width: 767px) {
	.pz-cs { grid-template-columns: 1fr; }
	.pz-cs__item { height: auto; }
	.pz-cs__item--feature .pz-cs__link { flex-direction: column; }
	.pz-cs__media { flex: none; aspect-ratio: 16 / 10; }
	.pz-cs__item--feature .pz-cs__body { padding: 30px; }
}

/* --------------------------------------------------------------- testimonials */

.pz-tst {
	--pz-tst-arrow: 84px;
	display: flex;
	align-items: flex-start;
	gap: 64px;
	width: 100%;
}

.pz-tst__nav { display: flex; flex-direction: column; gap: 20px; flex: 0 0 auto; }

.pz-tst__nav button {
	width: var(--pz-tst-arrow);
	height: var(--pz-tst-arrow);
	border: 0;
	border-radius: 50%;
	background-color: var(--pz-teal-200);
	color: var(--pz-ink);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: transform 220ms ease, opacity 220ms ease;
}

.pz-tst__nav button:hover { transform: scale(1.06); }
.pz-tst__nav button svg { width: 34%; height: 34%; }

.pz-tst__main { flex: 1; min-width: 0; }

.pz-tst__viewport { position: relative; height: 220px; overflow: hidden; }

.pz-tst__track { position: relative; height: 100%; }

.pz-tst__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 460ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

.pz-tst__slide.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pz-tst__slide.is-leaving-up { opacity: 0; transform: translateY(-40px); }

.pz-tst__quote {
	margin: 0 0 24px;
	font-family: var(--pz-accent-font);
	font-style: italic;
	font-size: 29.25px;
	line-height: 43.8px;
	color: var(--pz-dark);
}

.pz-tst__meta { display: flex; flex-direction: column; gap: 2px; }

.pz-tst__name {
	font-family: var(--pz-font);
	font-size: 14px;
	font-weight: 600;
	color: var(--pz-ink);
}

.pz-tst__company { font-family: var(--pz-font); font-size: 14px; color: var(--pz-slate); }

.pz-tst__count {
	margin: 24px 0 0;
	font-family: var(--pz-font);
	font-size: 13px;
	color: var(--pz-slate);
	font-variant-numeric: tabular-nums;
}

.pz-tst__current { color: var(--pz-ink); font-weight: 600; }

/* ------------------------------------------------------------------------ faq */

.pz-faq {
	--pz-faq-cols: 2;
	display: grid;
	grid-template-columns: repeat(var(--pz-faq-cols), 1fr);
	gap: 30px;
	align-items: start;
	width: 100%;
}

.pz-faq__col { display: flex; flex-direction: column; gap: 30px; }

.pz-faq__item {
	background-color: var(--pz-off);
	border-radius: 9px;
	padding: 30px;
}

.pz-faq__heading { margin: 0; }

.pz-faq__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: start;
	font-family: var(--pz-font);
	font-size: 19.5px;
	font-weight: 500;
	line-height: 24.3px;
	color: var(--pz-dark);
}

.pz-faq__text { flex: 1 1 auto; }

.pz-faq__icon {
	position: relative;
	flex: 0 0 27px;
	width: 27px;
	height: 27px;
	transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pz-faq__icon::before,
.pz-faq__icon::after {
	content: "";
	position: absolute;
	inset-inline-start: 3px;
	top: 50%;
	width: 21px;
	height: 1.5px;
	background-color: currentColor;
}

.pz-faq__icon::after { transform: rotate(90deg); }

/* Closed shows a plus; open rotates it into the cross used in the design. */
.pz-faq__item.is-open .pz-faq__icon { transform: rotate(45deg); }

.pz-faq__panel {
	display: grid;
	grid-template-rows: 0fr;
	padding-top: 0;
	transition: grid-template-rows 420ms cubic-bezier(0.22, 1, 0.36, 1),
		padding-top 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pz-faq__item.is-open .pz-faq__panel {
	grid-template-rows: 1fr;
	padding-top: 26.25px;
}

.pz-faq__a {
	overflow: hidden;
	visibility: hidden;
	font-family: var(--pz-font);
	font-size: 17.25px;
	line-height: 25.8px;
	color: #536466;
	transition: visibility 0s linear 420ms;
}

.pz-faq__item.is-open .pz-faq__a {
	visibility: visible;
	transition-delay: 0s;
}

.pz-faq__a p { margin: 0 0 1em; }
.pz-faq__a p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ responsive */

@media (max-width: 1024px) {
	.pz-cards { flex-wrap: wrap; }
	.pz-card { flex: 1 1 320px; max-width: none; }
	.pz-tst { gap: 32px; }
	.pz-stats { grid-template-columns: repeat(2, 1fr); }
	.pz-stats__item:nth-child(2n) { border-inline-end: 0; }
	.pz-stats__item:nth-child(-n+2) { border-bottom: 1px solid var(--pz-stats-border); }
}

@media (max-width: 767px) {
	.pz-cards { flex-direction: column; }
	.pz-card { width: 100%; max-width: none; }
	.pz-tst { flex-direction: column-reverse; align-items: stretch; }
	.pz-tst__nav { flex-direction: row; justify-content: flex-start; }
	.pz-tst__viewport { height: 300px; }
	.pz-faq { grid-template-columns: 1fr; }
	.pz-circles { --pz-circle-size: 150px; --pz-circles-blur: 9px; }
	/* Touch: the menu opens on tap, so surface the hit area. */
	.pz-card__toggle { display: block; }
	.pz-card:hover .pz-card__panel { grid-template-rows: 0fr; }
	.pz-card.is-open .pz-card__panel { grid-template-rows: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.pz-circles__item { animation: none; }
	.pz-circles__item:not(:first-child) { opacity: 0; }
	.pz-marquee__track { animation: none; }
	.pz-rot__word,
	.pz-tst__slide,
	.pz-card__panel,
	.pz-cs__media img { transition: none; }
}


/* ---------------------------------------------------------------- mosaic */

.pz-mosaic {
	display: grid;
	grid-template-columns: 1.9fr 0.79fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 8px;
	height: 389px;
	width: 100%;
}

.pz-mosaic__cell { overflow: hidden; border-radius: 4px; }
.pz-mosaic__cell--1 { grid-column: 1; grid-row: 1 / span 2; }
.pz-mosaic__cell--2 { grid-column: 2; grid-row: 1 / span 2; }
.pz-mosaic__cell--3 { grid-column: 3; grid-row: 1; }
.pz-mosaic__cell--4 { grid-column: 3; grid-row: 2; }

.pz-mosaic__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------- video feature */

.pz-video {
	position: relative;
	width: 100%;
	aspect-ratio: 2.4 / 1;
	overflow: hidden;
	background-color: #0b2427;
}

.pz-video__poster,
.pz-video iframe,
.pz-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	display: block;
}

.pz-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 84px;
	height: 84px;
	border: 0;
	border-radius: 50%;
	background-color: #fff;
	color: var(--pz-ink);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pz-video__play:hover { transform: translate(-50%, -50%) scale(1.08); }
.pz-video__play svg { width: 38%; height: 38%; }
.pz-video.is-playing .pz-video__play,
.pz-video.is-playing .pz-video__poster { display: none; }

/* ---------------------------------------------------------- team carousel */

.pz-team {
	--pz-team-per-view: 2;
	--pz-team-gap: 31px;
	--pz-team-nav-offset: 118px;
	width: 100%;
}

/* In normal flow above the cards, right aligned as in the design. */
.pz-team__nav {
	display: flex;
	justify-content: flex-end;
	gap: 9px;
	margin-bottom: 40px;
	padding-inline-end: var(--pz-team-nav-offset);
}

.pz-team__nav button {
	--pz-team-arrow-size: 43.5px;
	width: var(--pz-team-arrow-size);
	height: var(--pz-team-arrow-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: transform 220ms ease, opacity 220ms ease;
}

.pz-team__prev {
	background-color: var(--pz-team-prev-bg, #1a4a4e);
	color: var(--pz-team-prev-ink, #ffffff);
}

.pz-team__next {
	background-color: var(--pz-team-next-bg, #b6edf3);
	color: var(--pz-team-next-ink, #0b2427);
}

.pz-team__nav button:not(:disabled):hover { transform: scale(1.06); }

/* Still clearly visible at the ends — just a touch quieter. */
.pz-team__nav button:disabled { opacity: 0.55; cursor: default; }

.pz-team__nav button svg { width: 19px; height: 19px; }

.pz-team__viewport { overflow: hidden; width: 100%; }

.pz-team__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--pz-team-gap);
	transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pz-team__card {
	flex: 0 0 calc(
		(100% - (var(--pz-team-gap) * (var(--pz-team-per-view) - 1)))
		/ var(--pz-team-per-view)
	);
	display: flex;
	flex-direction: column;
	gap: 41px;
}

.pz-team__photo {
	height: 459px;
	border-radius: 12px;
	overflow: hidden;
}

.pz-team__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pz-team__meta { display: flex; flex-direction: column; gap: 5px; }

.pz-team__name {
	margin: 0;
	font-family: var(--pz-font);
	font-size: 20.25px;
	font-weight: 500;
	line-height: normal;
	color: #ffffff;
}

.pz-team__role {
	margin: 0;
	font-family: var(--pz-font);
	font-size: 18.75px;
	font-weight: 400;
	line-height: normal;
	color: #859193;
}

/* ----------------------------------------------------------- quote rotator */

.pz-qr {
	width: 100%;
	max-width: 880px;
	margin-inline: auto;
	text-align: center;
}

.pz-qr__viewport { position: relative; height: 220px; }

.pz-qr__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

.pz-qr__slide.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }

.pz-qr__quote {
	margin: 0 0 32px;
	font-family: var(--pz-accent-font);
	font-style: italic;
	font-size: 29.25px;
	line-height: 43.8px;
	color: var(--pz-dark);
}

.pz-qr__meta { display: flex; flex-direction: column; gap: 2px; }

.pz-qr__name {
	font-family: var(--pz-font);
	font-size: 14px;
	font-weight: 600;
	color: var(--pz-ink);
}

.pz-qr__role { font-family: var(--pz-font); font-size: 13px; color: var(--pz-slate); }

.pz-qr__dots { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }

.pz-qr__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(11, 36, 39, 0.25);
	cursor: pointer;
	transition: background-color 240ms ease, transform 240ms ease;
}

.pz-qr__dot.is-active { background-color: var(--pz-ink); transform: scale(1.25); }

/* -------------------------------------------------------- process timeline */

.pz-tl {
	--pz-tl-line: #a5eef3;
	--pz-tl-fill: #b6edf3;
	--pz-tl-num-on: #0b2427;
	--pz-tl-body: #4f747c;
	--pz-tl-body-on: #ffffff;
	--pz-tl-stroke: 1.66;
	width: 100%;
}

.pz-tl__scroll { position: relative; }

.pz-tl__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pz-tl[data-pin="off"] .pz-tl__scroll { height: auto !important; }
.pz-tl[data-pin="off"] .pz-tl__sticky { position: static; height: auto; padding-block: 40px; }

.pz-tl__stage { width: 100%; }
.pz-tl__svg { width: 100%; height: auto; display: block; overflow: visible; }

.pz-tl__track path {
	fill: none;
	stroke: var(--pz-tl-line);
	stroke-width: var(--pz-tl-stroke);
	stroke-miterlimit: 10;
	stroke-dasharray: 4.15 16.61;
	opacity: 0.55;
}

.pz-tl__progress {
	fill: none;
	stroke: var(--pz-tl-line);
	stroke-width: var(--pz-tl-stroke);
	stroke-miterlimit: 10;
	stroke-linecap: round;
}

.pz-tl__eraser { fill: none; stroke: #000; stroke-width: 6; }

.pz-tl__dot { fill: var(--pz-tl-fill); }
.pz-tl__dot--end { opacity: 0.35; transition: opacity 500ms ease; }

.pz-tl__ring {
	fill: none;
	stroke: var(--pz-tl-line);
	stroke-width: var(--pz-tl-stroke);
	transition: opacity 450ms ease;
}

.pz-tl__disc {
	fill: var(--pz-tl-fill);
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(0.72);
	transition: opacity 450ms ease, transform 600ms cubic-bezier(0.34, 1.25, 0.5, 1);
}

.pz-tl text { font-family: var(--pz-font); }

.pz-tl__num {
	font-size: 41.5px;
	font-weight: 600;
	fill: var(--pz-tl-fill);
	text-anchor: middle;
	transition: fill 450ms ease;
}

.pz-tl__kicker {
	font-size: 14.05px;
	font-weight: 600;
	letter-spacing: 0.7166px;
	fill: var(--pz-tl-fill);
}

.pz-tl__body {
	font-size: 20.19px;
	font-weight: 400;
	fill: var(--pz-tl-body);
	transition: fill 500ms ease;
}

.pz-tl__step.is-active .pz-tl__disc { opacity: 1; transform: scale(1); }
.pz-tl__step.is-active .pz-tl__ring { opacity: 0; }
.pz-tl__step.is-active .pz-tl__num { fill: var(--pz-tl-num-on); }
.pz-tl__step.is-active .pz-tl__body { fill: var(--pz-tl-body-on); }

@media (max-width: 1024px) {
	.pz-mosaic { grid-template-columns: 1.6fr 1fr; height: 420px; }
	.pz-mosaic__cell--2 { grid-column: 2; grid-row: 1; }
	.pz-mosaic__cell--3 { grid-column: 2; grid-row: 2; }
	.pz-mosaic__cell--4 { display: none; }
	.pz-team__photo { height: 340px; }
	.pz-team { --pz-team-nav-offset: 0px; }
}

@media (max-width: 820px) {
	.pz-tl__sticky { position: static; height: auto; padding-block: 24px; }
	.pz-tl__scroll { height: auto !important; }
	.pz-tl__stage { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.pz-tl__svg { min-width: 900px; }
}

@media (max-width: 767px) {
	.pz-mosaic { grid-template-columns: 1fr 1fr; height: 300px; }
	.pz-mosaic__cell--1 { grid-column: 1 / span 2; grid-row: 1; }
	.pz-mosaic__cell--2 { grid-column: 1; grid-row: 2; }
	.pz-mosaic__cell--3 { grid-column: 2; grid-row: 2; }
	.pz-qr__viewport { height: 340px; }
	.pz-team__photo { height: 300px; }
	.pz-video { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
	.pz-team__track,
	.pz-qr__slide,
	.pz-tl__disc,
	.pz-tl__body { transition: none; }
}

/* ======================================================= case study listing */

.pz-cg {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 55px;
	row-gap: 70px;
	width: 100%;
}

.pz-cg__item--wide { grid-column: 1 / -1; }

.pz-cg__link { display: block; text-decoration: none; }

.pz-cg__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin-bottom: 19px;
	background-color: rgba(0, 37, 40, 0.06);
}

.pz-cg__item--wide .pz-cg__media { aspect-ratio: 2 / 1; }

.pz-cg__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pz-cg__link:hover .pz-cg__media img { transform: scale(1.03); }

.pz-cg__body { display: flex; flex-direction: column; gap: 19.5px; }

.pz-cg__client {
	margin: 0;
	font-family: var(--pz-font);
	font-size: 20.25px;
	font-weight: 600;
	color: var(--pz-dark);
}

.pz-cg__title {
	margin: -15px 0 0;
	font-family: var(--pz-font);
	font-size: 18.75px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--pz-dark);
}

.pz-cg__chips { display: flex; flex-wrap: wrap; gap: 6.75px; }

.pz-cg__chip {
	display: inline-flex;
	align-items: center;
	height: 21px;
	padding-inline: 8px;
	border: 1px solid currentColor;
	border-radius: 3px;
	font-family: var(--pz-font);
	font-size: 9.5px;
	font-weight: 300;
	line-height: 1;
	white-space: nowrap;
	color: var(--pz-dark);
	opacity: 0.75;
}

/* ============================================================ fact bar */

.pz-facts {
	--pz-facts-rule: rgba(255, 255, 255, 0.18);
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	margin: 0;
	width: 100%;
	border-top: 1px solid var(--pz-facts-rule);
	border-bottom: 1px solid var(--pz-facts-rule);
}

.pz-facts__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 25px 24px;
	border-inline-end: 1px solid var(--pz-facts-rule);
}

.pz-facts__item:last-child { border-inline-end: 0; }

.pz-facts__label {
	margin: 0;
	font-family: var(--pz-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.612px;
	text-transform: uppercase;
	color: var(--pz-slate);
}

.pz-facts__value {
	margin: 0;
	font-family: var(--pz-font);
	font-size: 18px;
	font-weight: 500;
	color: var(--pz-off);
}

/* =========================================================== pull quote */

.pz-pq { --pz-pq-rule: rgba(255, 255, 255, 0.18); width: 100%; }

.pz-pq__text {
	margin: 0;
	padding-block: 42px;
	font-family: var(--pz-font);
	font-size: 37.5px;
	font-weight: 400;
	line-height: 1.35;
	text-align: center;
	color: var(--pz-off);
}

.pz-pq--rules-both .pz-pq__text,
.pz-pq--rules-top .pz-pq__text { border-top: 1px solid var(--pz-pq-rule); }
.pz-pq--rules-both .pz-pq__text,
.pz-pq--rules-bottom .pz-pq__text { border-bottom: 1px solid var(--pz-pq-rule); }

/* ======================================================= numbered cards */

.pz-nc { display: grid; grid-template-columns: repeat(2, 1fr); gap: 33px; width: 100%; }

.pz-nc__card { margin: 0; display: flex; flex-direction: column; overflow: hidden; }

.pz-nc__media { height: 355px; overflow: hidden; }
.pz-nc__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pz-nc__bar {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 24px 26px;
	background-color: #0a3b40;
	color: var(--pz-off);
	font-family: var(--pz-font);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.35;
	flex: 1;
}

.pz-nc__num {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border: 1px solid currentColor;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 11px;
	font-weight: 500;
	opacity: 0.8;
}

/* ==================================================== hotspot explainer */

.pz-hs {
	--pz-hs-bg: rgba(255, 255, 255, 0.05);
	--pz-hs-bg-on: #0a3b40;
	--pz-hs-ink: #f9f9f7;
	--pz-hs-accent: #b6edf3;
	--pz-hs-list: 392px;
	display: grid;
	grid-template-columns: var(--pz-hs-list) 1fr;
	gap: 38px;
	align-items: start;
	width: 100%;
}

.pz-hs__list { display: flex; flex-direction: column; gap: 14px; }

.pz-hs__item {
	background-color: var(--pz-hs-bg);
	border-radius: 8px;
	overflow: hidden;
	transition: background-color 360ms ease;
}

.pz-hs__item.is-active { background-color: var(--pz-hs-bg-on); }

.pz-hs__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 26px 24px;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: start;
	font-family: var(--pz-font);
	font-size: 17px;
	font-weight: 500;
	color: var(--pz-hs-ink);
}

.pz-hs__num {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border: 1px solid var(--pz-hs-accent);
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 12px;
	color: var(--pz-hs-accent);
}

.pz-hs__item.is-active .pz-hs__num {
	background-color: var(--pz-hs-accent);
	color: var(--pz-dark);
}

.pz-hs__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pz-hs__item.is-active .pz-hs__panel { grid-template-rows: 1fr; }

.pz-hs__panel > p {
	overflow: hidden;
	margin: 0;
	padding: 0 24px 26px 82px;
	font-family: var(--pz-font);
	font-size: 15px;
	line-height: 1.6;
	color: var(--pz-hs-ink);
	opacity: 0.75;
}

.pz-hs__media { position: relative; border-radius: 10px; overflow: hidden; }
.pz-hs__media img { width: 100%; height: auto; display: block; }

.pz-hs__dot {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid var(--pz-hs-accent);
	border-radius: 50%;
	background-color: rgba(0, 37, 40, 0.55);
	color: var(--pz-hs-accent);
	font-family: var(--pz-font);
	font-size: 10px;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: transform 300ms cubic-bezier(0.34, 1.25, 0.5, 1), background-color 300ms ease;
}

.pz-hs__dot.is-active {
	background-color: var(--pz-hs-accent);
	color: var(--pz-dark);
	transform: translate(-50%, -50%) scale(1.25);
}

/* ========================================================= before / after */

.pz-ba {
	--pz-ba-rule: rgba(255, 255, 255, 0.15);
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 187px;
	width: 100%;
}

.pz-ba__label {
	margin: 0 0 20px;
	font-family: var(--pz-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.612px;
	text-transform: uppercase;
}

.pz-ba__cell {
	margin: 0;
	padding-block: 27px;
	border-top: 1px solid var(--pz-ba-rule);
	font-family: var(--pz-font);
	font-size: 17.25px;
	line-height: 1.5;
}

.pz-ba__cell--after { font-weight: 500; }

/* ============================================================ impact cards */

.pz-ic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px; width: 100%; }

.pz-ic__card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }

.pz-ic-label-plain .pz-ic__title { margin-top: 0; }
.pz-ic-label-plain .pz-ic__body { max-width: none; }

.pz-ic__pill {
	display: inline-flex;
	align-items: center;
	font-family: var(--pz-font);
	font-weight: 600;
}

.pz-ic__pill--badge {
	padding: 9px 20px;
	border-radius: 999px;
	background-color: var(--pz-teal);
	color: var(--pz-dark);
	font-size: 12px;
	letter-spacing: 0.612px;
	text-transform: uppercase;
}

/* A plain label is a heading over the sentence, not a chip — no fill, no
   uppercasing, and nothing for a pill background to paint. */
.pz-ic__pill--plain {
	padding: 0;
	border-radius: 0;
	background-color: transparent;
	font-size: 20.768px;
	letter-spacing: normal;
	text-transform: none;
}

.pz-ic__title {
	margin: 10px 0 0;
	font-family: var(--pz-font);
	font-size: 24px;
	font-weight: 600;
	color: var(--pz-dark);
}

.pz-ic__body {
	margin: 0;
	font-family: var(--pz-font);
	font-size: 17.25px;
	line-height: 25.8px;
	color: #536466;
	max-width: 300px;
}

/* ============================================================= image strip */

.pz-strip { --pz-strip-duration: 55s; width: 100%; overflow: hidden; }

.pz-strip__track {
	display: flex;
	align-items: center;
	gap: 16px;
	width: max-content;
	animation: pz-marquee var(--pz-strip-duration) linear infinite;
	will-change: transform;
}

.pz-strip--reverse .pz-strip__track { animation-direction: reverse; }
.pz-strip--pause:hover .pz-strip__track { animation-play-state: paused; }

.pz-strip__item { flex: 0 0 auto; margin: 0; height: 312px; border-radius: 6px; overflow: hidden; }
.pz-strip__item img { height: 100%; width: auto; display: block; object-fit: cover; }

@media (max-width: 1024px) {
	.pz-facts { grid-template-columns: repeat(3, 1fr); }
	.pz-facts__item:nth-child(3n) { border-inline-end: 0; }
	.pz-facts__item:nth-child(-n+3) { border-bottom: 1px solid var(--pz-facts-rule); }
	.pz-hs { grid-template-columns: 1fr; }
	.pz-ba { column-gap: 60px; }
	.pz-ic { grid-template-columns: 1fr; }
	.pz-ic__body { max-width: 420px; }
}

@media (max-width: 767px) {
	.pz-cg { grid-template-columns: 1fr; row-gap: 48px; }
	.pz-cg__item--wide { grid-column: auto; }
	.pz-cg__item--wide .pz-cg__media { aspect-ratio: 16 / 9; }
	.pz-facts { grid-template-columns: repeat(2, 1fr); }
	.pz-facts__item:nth-child(2n) { border-inline-end: 0; }
	.pz-facts__item { border-bottom: 1px solid var(--pz-facts-rule); }
	.pz-nc { grid-template-columns: 1fr; }
	.pz-ba { grid-template-columns: 1fr; column-gap: 0; }
	.pz-ba__label--after { margin-top: 40px; }
	.pz-pq__text { font-size: 24px; padding-block: 28px; }
	.pz-strip__item { height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
	.pz-strip__track { animation: none; }
	.pz-hs__panel,
	.pz-hs__dot,
	.pz-cg__media img { transition: none; }
}


/* ================================================ v1.4 additions and fixes */

/* --- before / after: circular icon centred between the two columns --- */

.pz-ba { --pz-ba-icon: 78px; position: relative; }

.pz-ba__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: var(--pz-ba-icon);
	height: var(--pz-ba-icon);
	border-radius: 50%;
	background-color: var(--pz-teal);
	color: var(--pz-dark);
	display: grid;
	place-items: center;
	z-index: 2;
}

.pz-ba__icon svg { width: 44%; height: 44%; }

/* --- hotspot: spotlight the active region, dim everything else --- */

.pz-hs { --pz-hs-dim: 0.62; }

.pz-hs__region {
	position: absolute;
	transform: translate(-50%, -50%);
	border: 1px solid var(--pz-hs-accent);
	border-radius: 6px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 420ms ease, box-shadow 420ms ease;
	/* The huge spread is the spotlight: everything outside the box darkens. */
	box-shadow: 0 0 0 0 rgba(0, 20, 22, 0);
}

.pz-hs__region.is-active {
	opacity: 1;
	box-shadow: 0 0 0 2000px rgba(0, 20, 22, var(--pz-hs-dim));
}

.pz-hs__dot { z-index: 3; }

/* --- marquee item sizing inside a boxed container --- */

.pz-marquee__viewport { width: 100%; }

@media (prefers-reduced-motion: reduce) {
	.pz-hs__region { transition: none; }
}


/* ========================================================== header / footer */

.pz-lang {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-family: var(--pz-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}

.pz-lang a { color: inherit; text-decoration: none; transition: color 200ms ease; }
.pz-lang .is-current { color: inherit; }

/* Frosted glass behind the 80% header background. */
.pz-header {
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
}

/* Elementor nav menu: no underline pointer, Figma spacing handled in widget. */
.pz-header .elementor-nav-menu--main .elementor-item { line-height: 1; }

.pz-footer a { transition: color 200ms ease; }
.pz-footer a:hover { color: var(--pz-teal) !important; }

/* ============================================================== slide wall */

.pz-wall {
	--pz-wall-card: clamp(260px, 33vw, 660px);
	--pz-wall-gap: 60px;
	--pz-wall-angle: -17.8deg;
	--pz-wall-duration: 90s;
	position: relative;
	width: 100%;
	height: 714px;
	overflow: hidden;
}

/* An oversized plane, rotated, so the tilted rows reach every edge. */
.pz-wall__plane {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 300%;
	display: flex;
	flex-direction: column;
	gap: var(--pz-wall-gap);
	transform: translate(-50%, -50%) rotate(var(--pz-wall-angle));
}

.pz-wall__row { display: flex; justify-content: center; }

/* Brick pattern: every other row sits half a slide across. */
.pz-wall__row:nth-child(even) { transform: translateX(calc((var(--pz-wall-card) + var(--pz-wall-gap)) / 2)); }

.pz-wall__track {
	display: flex;
	gap: var(--pz-wall-gap);
	width: max-content;
	animation: pz-wall-drift var(--pz-wall-duration) linear infinite;
	will-change: transform;
}

.pz-wall__row--reverse .pz-wall__track { animation-direction: reverse; }
.pz-wall--still .pz-wall__track { animation: none; }

.pz-wall__card {
	flex: 0 0 var(--pz-wall-card);
	aspect-ratio: 16 / 9;
	border-radius: 14px;
	overflow: hidden;
	background-color: #00363b;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.pz-wall__card img { width: 100%; height: 100%; object-fit: cover; display: block; }

@keyframes pz-wall-drift {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-50% - (var(--pz-wall-gap) / 2))); }
}

/* ============================================================== icon tiles */

.pz-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18.75px;
	width: 100%;
}

.pz-tiles__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	min-height: 214.6px;
	padding: 36px 24px;
	border-radius: 24px;
	background-color: #00363b;
	text-align: center;
	text-decoration: none;
	transition: background-color 280ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

a.pz-tiles__tile:hover { transform: translateY(-3px); }

.pz-tiles__icon {
	display: grid;
	place-items: center;
	width: 57px;
	height: 57px;
	font-size: 57px;
	line-height: 1;
	color: var(--pz-teal);
}

.pz-tiles__icon svg,
.pz-tiles__icon img { width: 100%; height: 100%; }
.pz-tiles__icon svg:not([fill]) { fill: currentColor; }

.pz-tiles__label {
	margin: 0;
	font-family: var(--pz-accent-font);
	font-style: italic;
	font-weight: 400;
	font-size: 33.75px;
	line-height: 1.15;
	color: var(--pz-off);
}

/* =========================================================== process steps */

.pz-steps {
	--pz-steps-circle: 146.5px;
	--pz-steps-item: 250px;
	--pz-steps-accent: #b6edf3;
	--pz-steps-num-on: #002528;
	--pz-steps-text: #4f747c;
	--pz-steps-text-on: #ffffff;
	display: flex;
	align-items: flex-start;
	width: 100%;
}

.pz-steps__item {
	flex: 0 0 var(--pz-steps-item);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	cursor: default;
}

.pz-steps__circle {
	width: var(--pz-steps-circle);
	height: var(--pz-steps-circle);
	border: 1.66px solid var(--pz-steps-accent);
	border-radius: 50%;
	display: grid;
	place-items: center;
	transition: background-color 450ms ease, transform 600ms cubic-bezier(0.34, 1.25, 0.5, 1);
}

.pz-steps__num {
	font-family: var(--pz-font);
	font-size: calc(var(--pz-steps-circle) * 0.242);
	font-weight: 400;
	line-height: 1;
	color: var(--pz-steps-accent);
	transition: color 450ms ease;
}

.pz-steps__label {
	margin: 26px 0 0;
	font-family: var(--pz-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.612px;
	text-transform: uppercase;
	line-height: 1;
	color: var(--pz-steps-accent);
}

.pz-steps__text {
	margin: 12px 0 0;
	font-family: var(--pz-font);
	font-size: 17.25px;
	line-height: 25.8px;
	color: var(--pz-steps-text);
	transition: color 450ms ease;
}

/* The connector sits level with the centre of the circles. */
.pz-steps__line {
	flex: 1 1 0;
	min-width: 24px;
	margin-top: calc(var(--pz-steps-circle) / 2);
	margin-inline: -22px;
	border-top: 1.66px dashed var(--pz-steps-accent);
	opacity: 0.55;
}

.pz-steps__item.is-active .pz-steps__circle { background-color: var(--pz-steps-accent); }
.pz-steps__item.is-active .pz-steps__num { color: var(--pz-steps-num-on); }
.pz-steps__item.is-active .pz-steps__text { color: var(--pz-steps-text-on); }

/* ================================================================= box row */

.pz-boxes {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
}

.pz-boxes__box {
	flex: 0 1 430px;
	max-width: 430px;
	min-height: 85px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	border-radius: 4px;
	background-color: #002528;
	color: #fff;
	font-family: var(--pz-font);
	font-size: 24.75px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 240ms ease;
}

@media (max-width: 1024px) {
	.pz-steps { flex-wrap: wrap; justify-content: center; row-gap: 48px; }
	.pz-steps__line { display: none; }
	.pz-steps__item { flex-basis: 45%; }
	.pz-boxes { flex-wrap: wrap; justify-content: center; }
	.pz-boxes__box { flex: 1 1 280px; max-width: none; }
}

@media (max-width: 767px) {
	.pz-steps__item { flex-basis: 100%; }

	.pz-boxes { flex-direction: column; align-items: stretch; }

	/* Once the row stacks, the 280px basis inherited from the tablet rule
	   lands on the vertical axis and every box becomes 280px tall. Height
	   goes back to the content. */
	.pz-boxes__box {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pz-wall__track { animation: none; }
	.pz-steps__circle,
	.pz-steps__num,
	.pz-steps__text,
	.pz-tiles__tile { transition: none; }
}


/* ==================================== case studies — carousel (service pages) */

.pz-cs--carousel {
	/* Figma runs this edge to edge: three 683.5px cards are wider than the
	   screen, so the outer two are cropped by the viewport. */
	--pz-cs-card: 683.5px;
	--pz-cs-gap: 33px;
	--pz-cs-card-h: 406.32px;
	display: block;
	width: 100%;
}

.pz-cs--carousel .pz-cs__track {
	display: flex;
	gap: var(--pz-cs-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
	cursor: grab;
}

.pz-cs--carousel .pz-cs__track::-webkit-scrollbar { display: none; }
.pz-cs--carousel .pz-cs__track.is-dragging { cursor: grabbing; scroll-behavior: auto; }

.pz-cs--carousel .pz-cs__item {
	flex: 0 0 var(--pz-cs-card);
	max-width: var(--pz-cs-card);
	height: var(--pz-cs-card-h);
	scroll-snap-align: center;
	border-radius: 12px;
}

.pz-cs--carousel .pz-cs__link { flex-direction: column; justify-content: flex-end; }

.pz-cs--carousel .pz-cs__media {
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	border-end-start-radius: 34px;
	border-end-end-radius: 34px;
	overflow: hidden;
}

.pz-cs--carousel .pz-cs__body {
	flex: 0 0 auto;
	gap: 12px;
	padding: 24px;
	align-items: flex-start;
	text-align: start;
}

.pz-cs--carousel .pz-cs__tag {
	font-size: 13.301px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--pz-teal);
}

.pz-cs--carousel .pz-cs__title {
	font-size: 24px;
	font-weight: 400;
	line-height: 34.96px;
	max-width: none;
}

@media (max-width: 1024px) {
	.pz-cs--carousel { --pz-cs-card: 60vw; --pz-cs-card-h: 360px; --pz-cs-gap: 24px; }
}

@media (max-width: 767px) {
	.pz-cs--carousel { --pz-cs-card: 84vw; --pz-cs-card-h: 340px; --pz-cs-gap: 16px; }
	.pz-cs--carousel .pz-cs__track { padding-inline: 20px; }
}

/* ============================ process steps — connector fills as it advances */

.pz-steps__line {
	position: relative;
	height: 1.66px;
	border-top: 0;
	opacity: 1;
	/* Dotted route underneath. */
	background-image: repeating-linear-gradient(
		to right,
		var(--pz-steps-accent) 0 4.15px,
		transparent 4.15px 16.61px
	);
	background-size: 100% 1.66px;
	background-repeat: no-repeat;
	background-position: left center;
}

.pz-steps__line::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: transparent;
	opacity: 0.55;
}

/* Solid overlay grows left to right once the step before it is reached. */
.pz-steps__line::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	height: 100%;
	width: 0;
	background-color: var(--pz-steps-accent);
	transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pz-steps__line.is-filled::after { width: 100%; }

@media (prefers-reduced-motion: reduce) {
	.pz-steps__line::after { transition: none; }
}


/* ============================= process steps — pinned scroll runway (optional) */

.pz-steps-pin { position: relative; width: 100%; }

.pz-steps-pin__sticky {
	position: sticky;
	top: 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Unpinned: behave like an ordinary block. */
.pz-steps-pin[data-pin="off"] { height: auto !important; }
.pz-steps-pin[data-pin="off"] .pz-steps-pin__sticky {
	position: static;
	min-height: 0;
}

@media (max-width: 1024px) {
	.pz-steps-pin { height: auto !important; }
	.pz-steps-pin__sticky { position: static; min-height: 0; }
}


/* Cards: no motion when the reader asks for none. */
@media (prefers-reduced-motion: reduce) {
	.pz-card,
	.pz-card__media img,
	.pz-card__row { transition: none; }
	.pz-card:hover,
	.pz-card:focus-within,
	.pz-card.is-open { transform: none; }
}


/* Cards on small screens: stacked, each sized to its own content. */
@media (max-width: 767px) {
	.pz-cards { padding-top: 0; margin-top: 0; }
	.pz-card { min-height: 0; }
	.pz-card__media { height: 240px; }
}


/* ============================================================ service tabs */

.pz-tabs { width: 100%; }

/* Every number below is read off the placed instance in the artboard, which
   sits at 0.75 of the master component — so these are the sizes the section
   actually renders at, not the component's own figures. */

.pz-tabs__nav {
	/* flex + max-content rather than inline-flex: an inline box ignores the
	   auto margins and the track ends up hard against the left edge. */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: max-content;
	max-width: 100%;
	padding: 6px;
	margin-inline: auto;
	border-radius: 50px;
	background-color: #e3d8cc;
}

.pz-tabs__pill {
	width: 258.5px;
	height: 45.76px;
	padding-inline: 12px;
	border: 0;
	border-radius: 100px;
	background: transparent;
	color: #002528;
	cursor: pointer;
	font-family: var(--pz-font);
	font-size: 16.05px;
	font-weight: 600;
	line-height: 1.1;
	white-space: nowrap;
	transition: background-color 320ms ease, color 320ms ease;
}

.pz-tabs__pill.is-active {
	background-color: var(--pz-dark);
	color: var(--pz-off);
}

.pz-tabs__pill:not(.is-active):hover { background-color: rgba(0, 37, 40, 0.07); }

.pz-tabs__panel {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	width: 100%;
	padding-top: 65px;
}

.pz-tabs__panel[hidden] { display: none; }

/* Fades in so switching tab does not feel like a page jump. */
.pz-tabs__panel.is-active { animation: pz-tabs-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both; }

@keyframes pz-tabs-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

.pz-tabs__intro {
	/* 467.25 in the artboard, widened to share the 1400 grid with the tiles.
	   The generous space between the two columns is space-between doing its
	   job, not a gap value. */
	flex: 0 1 478px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 23px;
	padding-block: 21px;
}

.pz-tabs__heading {
	margin: 0;
	font-family: var(--pz-font);
	font-size: 44.25px;
	font-weight: 600;
	line-height: 51px;
	color: var(--pz-dark);
}

.pz-tabs__text {
	margin: 0;
	font-family: var(--pz-font);
	font-size: 17.25px;
	font-weight: 500;
	line-height: 1.5;
	color: rgba(0, 37, 40, 0.6);
}

.pz-tabs__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 19.5px;
	border-radius: 3px;
	background-color: var(--pz-teal);
	color: var(--pz-dark);
	font-family: var(--pz-font);
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 220ms ease, transform 220ms ease;
}

.pz-tabs__cta:hover { background-color: #c1ebf2; transform: translateY(-2px); }

.pz-tabs__grid {
	flex: 0 1 636px;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 15px;
	row-gap: 13px;
}

.pz-tabs__tile {
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* Sized by its content — the artboard's 158.97 is exactly what this
	   padding and type add up to. Grid rows keep each row level. */
	min-height: 0;
	padding: 22px 24px 19px;
	border-radius: 9px;
	background-color: #fff;
	text-decoration: none;
	transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms ease;
}

a.pz-tabs__tile:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(0, 37, 40, 0.12);
}

.pz-tabs__tile-title {
	margin: 0;
	font-family: var(--pz-font);
	font-size: 20.77px;
	font-weight: 600;
	line-height: 21px;
	color: var(--pz-dark);
}

.pz-tabs__tile-text {
	margin: 0;
	font-family: var(--pz-font);
	font-size: 14.54px;
	font-weight: 500;
	line-height: 22px;
	color: rgba(0, 37, 40, 0.6);
}

@media (max-width: 1200px) {
	.pz-tabs__panel { flex-direction: column; gap: 48px; padding-top: 56px; }
	.pz-tabs__intro,
	.pz-tabs__grid { flex-basis: auto; width: 100%; }
}

@media (max-width: 1024px) {
	.pz-tabs__nav { flex-wrap: wrap; width: 100%; border-radius: 28px; }
	.pz-tabs__pill { flex: 1 1 200px; }
}

@media (max-width: 767px) {
	.pz-tabs__nav {
		width: 100%;
		flex-direction: column;
		gap: 6px;
		border-radius: 20px;
	}
	.pz-tabs__pill { width: 100%; flex: none; height: 48px; }
	.pz-tabs__grid { grid-template-columns: 1fr; }
	.pz-tabs__cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.pz-tabs__panel.is-active { animation: none; }
	.pz-tabs__tile, .pz-tabs__cta, .pz-tabs__pill { transition: none; }
}

/* ------------------------------------------------- dual-track wave */

/* Laid out against the artboard's 1531.72 x 531.97 stage. Everything inside
   the stage is positioned as a percentage of it and text is sized in
   container units, so the whole block scales as one piece. */

.pz-dt {
	--pz-dt-a: #b6edf3;
	--pz-dt-b: #f9f99b;
	--pz-dt-ink: #002528;
	--pz-dt-idle-ink: #fff;
	--pz-dt-stroke: 2.6;
	--pz-dt-dash: 7;
	--pz-dt-gap: 7.5;
	--pz-dt-idle-op: 0.65;
	--pz-dt-hover-op: 0.12;
	--pz-dt-btn-size: 21;
	--pz-dt-label-size: 12;
	--pz-dt-label-w: 130;
	width: 100%;
}

.pz-dt__stage {
	container-type: inline-size;
	position: relative;
	width: 100%;
}

/* design px -> rendered px at the stage's current width */
.pz-dt__stage { --pz-dt-u: calc(100cqw / var(--pz-dt-stage-w)); }

.pz-dt__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	/* The wave is painted over the buttons, so it must not take the cursor. */
	pointer-events: none;
}

.pz-dt__line {
	fill: none;
	stroke-width: var(--pz-dt-stroke);
	vector-effect: non-scaling-stroke;
	transition: opacity 320ms ease;
}

/* Round caps add half a stroke width to each end of every dash, which reads
   as long dashes with pinched gaps. The idle rail wants flat caps. */
.pz-dt__line.is-active { stroke-linecap: round; }

.pz-dt__line--a { stroke: var(--pz-dt-a); }
.pz-dt__line--b { stroke: var(--pz-dt-b); }

/* The idle rail is dashed; JS swaps the dash array out when a track becomes
   active so the solid line can be drawn on. */
.pz-dt__line:not(.is-active) {
	stroke-dasharray: var(--pz-dt-dash) var(--pz-dt-gap);
	stroke-dashoffset: 0;
	stroke-linecap: butt;
}

.pz-dt__dot { transition: opacity 320ms ease, r 260ms ease; }

/* The wave itself stays click-through; only a linked node takes the cursor. */
.pz-dt__hit {
	pointer-events: auto;
	cursor: pointer;
}

.pz-dt__hit:hover .pz-dt__dot,
.pz-dt__hit:focus-visible .pz-dt__dot { r: 11.5; }

.pz-dt__hit:focus-visible { outline: none; }
.pz-dt__hit:focus-visible .pz-dt__dot { stroke: currentColor; stroke-width: 2; }
.pz-dt__dot--a { fill: var(--pz-dt-a); }
.pz-dt__dot--b { fill: var(--pz-dt-b); }

/* ---- the two circle buttons ---- */

.pz-dt__circle {
	position: absolute;
	z-index: 2;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	padding-inline: calc(48 * var(--pz-dt-u));
	border: calc(2 * var(--pz-dt-u)) solid;
	border-radius: 100%;
	background-color: transparent;
	cursor: pointer;
	font-family: var(--pz-font);
	font-size: calc(var(--pz-dt-btn-size) * var(--pz-dt-u));
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	transition: background-color 420ms ease, color 420ms ease, border-color 420ms ease;
}

.pz-dt__circle--a { border-color: var(--pz-dt-a); color: var(--pz-dt-idle-a, #fff); }
.pz-dt__circle--b { border-color: var(--pz-dt-b); color: var(--pz-dt-idle-b, #fff); }

/* Hovering an idle button washes it with its own track colour. The active
   button already carries that colour at full strength and does not react. */
.pz-dt__circle::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	opacity: 0;
	transition: opacity 260ms ease;
}

.pz-dt__circle--a::before { background-color: var(--pz-dt-a); }
.pz-dt__circle--b::before { background-color: var(--pz-dt-b); }

.pz-dt__circle:not(.is-active):hover::before,
.pz-dt__circle:not(.is-active):focus-visible::before { opacity: var(--pz-dt-hover-op); }

.pz-dt--static .pz-dt__circle { cursor: default; }
.pz-dt--static .pz-dt__circle::before { opacity: 0 !important; }

.pz-dt__circle--a.is-active { background-color: var(--pz-dt-a); color: var(--pz-dt-ink); }
.pz-dt__circle--b.is-active { background-color: var(--pz-dt-b); color: var(--pz-dt-ink); }

.pz-dt__circle:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* ---- node labels ---- */

.pz-dt__label {
	position: absolute;
	width: max-content;
	max-width: calc(var(--pz-dt-label-w) * var(--pz-dt-u));
	transform: translateX(-50%);
	font-family: var(--pz-font);
	font-size: calc(var(--pz-dt-label-size) * var(--pz-dt-u));
	font-weight: 400;
	line-height: 1.6;
	pointer-events: none;
	text-align: center;
	transition: opacity 320ms ease;
}

.pz-dt__label--a { color: var(--pz-dt-a); }
.pz-dt__label--b { color: var(--pz-dt-b); }

a.pz-dt__label { pointer-events: auto; text-decoration: none; cursor: pointer; }
a.pz-dt__label:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Whichever track is not live steps back so the active one reads first. */
.pz-dt[data-active="a"] .pz-dt__label--b,
.pz-dt[data-active="b"] .pz-dt__label--a { opacity: var(--pz-dt-idle-op); }

/* ---- cards ---- */

.pz-dt__cards {
	position: relative;
	margin-top: 114px;
	color: #f9f9f7;
}

.pz-dt__deck {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 50px;
	width: 100%;
}

.pz-dt__deck[hidden] { display: none; }

.pz-dt__deck.is-active { animation: pz-dt-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both; }

@keyframes pz-dt-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

.pz-dt__card {
	display: flex;
	flex-direction: column;
	gap: 9px;
	min-height: 191px;
	padding: 40px 32px 32px 46px;
	border-radius: 9px;
	background-color: #f9f9f7;
	color: inherit;
	text-decoration: none;
	transition: background-color 260ms ease, transform 260ms ease;
}

a.pz-dt__card:hover { transform: translateY(-3px); }

.pz-dt__card-title {
	margin: 0;
	/* Accent italic, as the artboard sets it. */
	font-family: var(--pz-accent-font);
	font-style: italic;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--pz-dark);
}

.pz-dt__card-text {
	margin: 0;
	font-family: var(--pz-font);
	font-size: 17.25px;
	font-weight: 500;
	line-height: 27.75px;
	color: rgba(0, 37, 40, 0.6);
}

@media (max-width: 1024px) {
	.pz-dt__deck { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	.pz-dt__card { padding: 28px 26px 24px; min-height: 0; }
}

/* Below this the wave is too small to read, so it steps aside and the two
   tracks become a plain toggle. The cards carry the content either way. */
@media (max-width: 900px) {
	.pz-dt__stage { aspect-ratio: auto !important; display: flex; gap: 12px; }
	.pz-dt__svg,
	.pz-dt__label { display: none; }
	.pz-dt__circle {
		position: static;
		flex: 1 1 0;
		width: auto !important;
		aspect-ratio: auto;
		min-height: 64px;
		padding-inline: 16px;
		border-width: 2px;
		border-radius: 40px;
		font-size: 16px;
	}
	.pz-dt__cards { margin-top: 28px; }
	.pz-dt__deck { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.pz-dt__deck.is-active { animation: none; }
	.pz-dt__line, .pz-dt__circle, .pz-dt__card { transition: none; }
}

/* ------------------------------------------------- media cards */

/* Image on top, then a coloured panel holding the title and description.
   Panel fill and ink are set per card, since the artboard alternates them. */

.pz-mc {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 33px;
	width: 100%;
}

.pz-mc__card {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.pz-mc__media {
	height: 265px;
	border-radius: 9px 9px 0 0;
	overflow: hidden;
}

.pz-mc__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

a.pz-mc__card:hover .pz-mc__media img { transform: scale(1.04); }

.pz-mc__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 9px;
	min-height: 186px;
	padding: 34px 46px 32px;
	border-radius: 0 0 9px 9px;
	background-color: var(--pz-mc-bg, #00363b);
	color: var(--pz-mc-ink, #fff);
	transition: background-color 380ms ease, color 380ms ease;
}

.pz-mc__card:hover .pz-mc__body {
	background-color: var(--pz-mc-bg-hover, var(--pz-mc-bg, #00363b));
	color: var(--pz-mc-ink-hover, var(--pz-mc-ink, #fff));
}

.pz-mc__title {
	margin: 0;
	font-family: var(--pz-accent-font);
	font-style: italic;
	font-size: 26.932px;
	font-weight: 400;
	line-height: 1.2;
	color: inherit;
}

.pz-mc__text {
	margin: 0;
	max-width: 56ch;
	font-family: var(--pz-font);
	font-size: 18px;
	font-weight: 500;
	line-height: 27.675px;
	color: inherit;
	opacity: 0.5;
}

@media (max-width: 767px) {
	.pz-mc { grid-template-columns: 1fr; gap: 32px; }
	.pz-mc__body { padding: 26px 24px 28px; min-height: 0; }
	.pz-mc__title { font-size: 22px; }
	.pz-mc__text { font-size: 16px; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
	.pz-mc__media img,
	.pz-mc__body { transition: none; }
}

/* ------------------------------------------------- featured case card */

.pz-fc {
	--pz-fc-accent: #bee8ef;
	--pz-fc-rule: rgba(190, 232, 239, 0.25);
	width: 969px;
	max-width: 100%;
	margin-inline: auto;
	border-radius: 9px;
	background-color: #00363b;
	overflow: hidden;
}

.pz-fc__media { height: 398px; overflow: hidden; }

.pz-fc__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pz-fc__body {
	display: flex;
	flex-direction: column;
	padding: 51px 46px 32px;
}

.pz-fc__label {
	margin: 0 0 18px;
	font-family: var(--pz-font);
	font-size: 13.3px;
	font-weight: 400;
	letter-spacing: 0.5px;
	color: var(--pz-fc-accent);
}

.pz-fc__title {
	margin: 0 0 28px;
	max-width: 62ch;
	font-family: var(--pz-font);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.46;
	color: #fff;
}

/* Rules above and below, plus a divider between each pair. */
.pz-fc__stats {
	display: grid;
	grid-template-columns: repeat(var(--pz-fc-cols, 4), minmax(0, 1fr));
	padding-block: 11px 22px;
	border-top: 1px solid var(--pz-fc-rule);
	border-bottom: 1px solid var(--pz-fc-rule);
}

.pz-fc__stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-inline: 22px;
	border-left: 1px solid var(--pz-fc-rule);
}

.pz-fc__stat:first-child { padding-left: 0; border-left: 0; }

.pz-fc__num {
	font-family: var(--pz-font);
	font-size: 43.828px;
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
}

.pz-fc__stat-label {
	font-family: var(--pz-font);
	font-size: 12.145px;
	font-weight: 400;
	line-height: 1.3;
	color: #92c5d1;
}

.pz-fc__text {
	margin: 27px 0 0;
	max-width: 92ch;
	font-family: var(--pz-font);
	font-size: 18px;
	font-weight: 500;
	line-height: 27.68px;
	color: var(--pz-fc-accent);
}

.pz-fc__cta {
	margin-top: 25px;
	align-self: flex-start;
	font-family: var(--pz-font);
	font-size: 15.974px;
	font-weight: 400;
	color: var(--pz-fc-accent);
	text-decoration: none;
	transition: opacity 200ms ease;
}

a.pz-fc__cta:hover { opacity: 0.75; }

@media (max-width: 900px) {
	.pz-fc__body { padding: 32px 24px 28px; }
	.pz-fc__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
	.pz-fc__stat { padding-inline: 16px; }
	.pz-fc__stat:nth-child(odd) { padding-left: 0; border-left: 0; }
	.pz-fc__title { font-size: 20px; margin-bottom: 20px; }
}

/* =================================================== mobile (≤767) layout
   Everything below follows the 390px artboard. It is additive: no rule here
   changes desktop, and the desktop copy and heading levels are untouched —
   only sizing and arrangement differ. */

@media (max-width: 767px) {

	/* ---- process steps: a vertical numbered rail ---- */

	.pz-steps {
		flex-direction: column;
		align-items: stretch;
		row-gap: 0;
		width: 100%;
	}

	.pz-steps__item {
		position: relative;
		flex: 0 0 auto;
		display: grid;
		grid-template-columns: 36px 1fr;
		grid-template-rows: auto auto;
		column-gap: 16px;
		align-items: start;
		text-align: left;
		padding-bottom: 24px;
	}

	/* The rail runs from under one circle to the next, so it stretches with
	   however much text a step carries. The sibling connector the desktop
	   uses stays hidden. */
	.pz-steps__item:not(:last-child)::before {
		content: "";
		position: absolute;
		left: 17px;
		top: 44px;
		bottom: -4px;
		width: 1.5px;
		background-color: var(--pz-steps-rail, rgba(182, 237, 243, 0.5));
	}

	.pz-steps__circle {
		grid-column: 1;
		grid-row: 1 / span 2;
		width: 36px;
		height: 36px;
		border-width: 1.419px;
	}

	.pz-steps__num { font-size: 14px; font-weight: 700; }

	.pz-steps__label {
		grid-column: 2;
		grid-row: 1;
		margin: 0;
		font-family: var(--pz-font);
		font-size: 18px;
		font-weight: 600;
		letter-spacing: normal;
		text-transform: none;
		color: var(--pz-steps-title-m, #fff);
	}

	/* On the artboard every step body is the same muted colour — only the
	   numbered circle marks the first one, so the desktop highlight is
	   deliberately not carried over. */
	.pz-steps__text,
	.pz-steps__item.is-active .pz-steps__text {
		grid-column: 2;
		grid-row: 2;
		margin: 6px 0 0;
		font-size: 14px;
		line-height: 1.4;
		color: var(--pz-steps-rail-ink, #92c5d1);
	}

	/* ---- FAQ: staged reveal ---- */

	.pz-faq--staged .pz-faq__col { gap: 12px; }

	/* ---- case studies: a peeking horizontal carousel ---- */

	.pz-cs--carousel {
		--pz-cs-card: 304px;
		--pz-cs-gap: 32px;
		--pz-cs-card-h: auto;
	}

	.pz-cs--carousel .pz-cs__track { padding-inline: 20px; }

	.pz-cs--carousel .pz-cs__item {
		flex: 0 0 304px;
		max-width: 304px;
		height: auto;
		scroll-snap-align: start;
	}

	/* ---- related-service pills ---- */

	.pz-boxes__box { font-size: 18px; }

	/* ---- link boxes: two mobile treatments ---- */

	/* Stacked pills — the related-services buttons. */
	.pz-boxes--m-pills .pz-boxes__box {
		min-height: 0;
		padding: 16px 24px;
		border: 1px solid var(--pz-teal);
		border-radius: 8px;
		background-color: var(--pz-dark);
		color: #fff;
		font-size: 15px;
		font-weight: 700;
		line-height: 1.3;
	}

	/* One panel with dividers — the service chips. On the phone artboard these
	   stop being separate teal cards entirely. */
	.pz-boxes--m-list {
		gap: 4px;
		padding: 8px 17px;
		border-radius: 6px;
		background-color: rgba(26, 74, 78, 0.4);
	}

	.pz-boxes--m-list .pz-boxes__box {
		min-height: 0;
		padding: 12px 0;
		border: 0;
		border-radius: 0;
		background-color: transparent;
		color: #cce4e7;
		font-size: 16px;
		font-weight: 400;
		line-height: 26px;
		text-align: center;
	}

	.pz-boxes--m-list .pz-boxes__box + .pz-boxes__box {
		border-top: 1px solid rgba(107, 157, 163, 0.4);
	}

	/* ---- the phone artboard is left-aligned throughout ---- */

	.pz-sh { text-align: left; }
	.pz-sh__box { align-items: flex-start; }
	.pz-stats__item { align-items: flex-start; text-align: left; }

	/* Logo row: the desktop gap is far too wide at this size. */
	.pz-marquee { --pz-marquee-gap: 24px; }

	/* ---- type not covered by a responsive control ---- */

	/* One body size across every section, per the artboard. */
	.pz-sh__sub { line-height: 26px; }

	.pz-stats__label { font-size: 13px; }

	.pz-tiles__label { line-height: 26px; }
}

/* The reveal button never shows on desktop; JS turns staging on only at
   mobile widths and clears it again on resize. */
.pz-faq__more {
	display: none;
	/* a grid child, so it needs justify-self rather than align-self */
	justify-self: center;
	width: max-content;
	max-width: 100%;
	margin-top: 4px;
	padding: 13px 28px;
	border: 1.5px solid currentColor;
	border-radius: 100px;
	background: none;
	color: inherit;
	cursor: pointer;
	font-family: var(--pz-font);
	font-size: 16px;
	font-weight: 600;
	transition: background-color 220ms ease, color 220ms ease;
}

@media (max-width: 767px) {
	.pz-faq--staged .pz-faq__more { display: inline-flex; }
	.pz-faq--staged.is-complete .pz-faq__more { display: none; }
	.pz-faq__more:hover { background-color: var(--pz-teal); color: var(--pz-dark); }
}



/* ------------------------------------------------- type ownership

   Elementor's global kit styles bare heading elements — `.elementor-kit-N h3`
   and friends — which outranks a single widget class and was rewriting the
   size, weight and colour of every heading a widget renders. These carry two
   classes so they beat the kit, while still losing to a widget's own controls,
   which resolve at wrapper specificity. Generated from the rules above by
   scratchpad/gen_type_ownership.py — regenerate, do not hand-edit. */

.pz-cards .pz-card__title {
	font-family: var(--pz-font);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--pz-card-ink);
}

.pz-cg .pz-cg__title {
	font-family: var(--pz-font);
	font-size: 18.75px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--pz-dark);
}

.pz-cs .pz-cs__title {
	font-family: var(--pz-font);
	font-size: 24px;
	font-weight: 400;
	line-height: 34.96px;
	letter-spacing: 0;
	color: var(--pz-cs-ink);
}

.pz-dt .pz-dt__card-title {
	font-family: var(--pz-accent-font);
	font-style: italic;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--pz-dark);
}

.pz-fc .pz-fc__title {
	font-family: var(--pz-font);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.46;
	color: #fff;
}

.pz-ic .pz-ic__title {
	font-family: var(--pz-font);
	font-size: 24px;
	font-weight: 600;
	color: var(--pz-dark);
}

.pz-mc .pz-mc__title {
	font-family: var(--pz-accent-font);
	font-style: italic;
	font-size: 26.932px;
	font-weight: 400;
	line-height: 1.2;
	color: inherit;
}

.pz-sh .pz-sh__title {
	font-family: var(--pz-font);
	font-weight: 600;
	line-height: 1.2;
}

.pz-steps .pz-steps__label {
	font-family: var(--pz-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.612px;
	text-transform: uppercase;
	line-height: 1;
	color: var(--pz-steps-accent);
}

.pz-tabs .pz-tabs__tile-title {
	font-family: var(--pz-font);
	font-size: 20.77px;
	font-weight: 600;
	line-height: 21px;
	color: var(--pz-dark);
}

.pz-tiles .pz-tiles__label {
	font-family: var(--pz-accent-font);
	font-style: italic;
	font-weight: 400;
	font-size: 33.75px;
	line-height: 1.15;
	color: var(--pz-off);
}

.pz-stats .pz-stats__num {
	font-family: var(--pz-font);
	font-weight: 400;
	line-height: 1;
}

.pz-stats .pz-stats__label {
	font-family: var(--pz-font);
	font-size: 17.25px;
}

.pz-boxes .pz-boxes__box {
	color: #fff;
	font-family: var(--pz-font);
	font-size: 24.75px;
	font-weight: 700;
	line-height: 1.2;
}

.pz-steps .pz-steps__text {
	font-family: var(--pz-font);
	font-size: 17.25px;
	line-height: 25.8px;
	color: var(--pz-steps-text-on);
}

.pz-fc .pz-fc__num {
	font-family: var(--pz-font);
	font-size: 43.828px;
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
}

.pz-sh .pz-sh__overline {
	font-family: var(--pz-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.612px;
	text-transform: uppercase;
}

.pz-sh .pz-sh__sub {
	font-family: var(--pz-font);
	font-size: 17.25px;
	line-height: 25.8px;
}

@media (max-width: 767px) {

	.pz-mc .pz-mc__title {
		font-size: 22px;
	}

	.pz-steps .pz-steps__label {
		font-family: var(--pz-font);
		font-size: 18px;
		font-weight: 600;
		letter-spacing: normal;
		text-transform: none;
		color: var(--pz-steps-title-m, #fff);
	}

	.pz-tiles .pz-tiles__label {
		line-height: 26px;
	}

	.pz-stats .pz-stats__label {
		font-size: 13px;
	}

	.pz-boxes .pz-boxes__box {
		font-size: 16px;
		color: #cce4e7;
		font-weight: 400;
		line-height: 26px;
	}

	.pz-steps .pz-steps__text {
		font-size: 14px;
		line-height: 1.4;
		color: var(--pz-steps-rail-ink, #92c5d1);
	}

	.pz-sh .pz-sh__sub {
		line-height: 26px;
	}
}