/* ============================================================
   Rensora, ModernZAI product page

   Conventions follow css/rensora-home.css:
     - every selector is scoped .rensora-site .mz-* (0,2,0), so it sits
       above WordPress core's :root :where(...) theme.json output (0,1,0)
       and cannot lose on stylesheet order when LiteSpeed combines CSS
     - the type scale is never restated here; markup carries .r-h1-.r-h6,
       .rensora-site .r-eyebrow, .r-kicker, .r-lead, .r-body
     - no hex codes, no font-family, no !important
   Page specific styles only.

   Uses theme tokens for colour, surface, border, layout,
   radius, shadow and motion. Everything the theme does not
   define is declared below, scoped to the page root.

   Accent: ModernZAI teal, used in the environment only.

   Every theme token carries a fallback value, e.g. var(--gutter).
   The theme's own value always wins; the fallback only applies if that
   token is not defined, so the page degrades to sane spacing and colour
   rather than collapsing.
   Buttons and text links stay on the Rensora blue.
   ============================================================ */

.rensora-site .mz {
	/* ---- Page scoped additions, not present in the theme ---- */

	/* Accent roles, mapped onto the theme teal ramp.
	   --mz-accent is for FILLS only (2-6px rules, nodes, gates, track). At
	   3.07:1 it is under the 4.5:1 text threshold, so any teal TEXT must use
	   --mz-accent-ink, which is the same --teal-ink the homepage routes all its
	   teal type through (.r-kicker--mz, .r-dash__link--mz). Keep the two apart. */
	--mz-accent: var(--teal-dark);
	--mz-accent-ink: var(--teal-ink);
	--mz-accent-bright: var(--teal);
	--mz-accent-soft: var(--surface-teal);

	/* Spacing scale. The theme ships rhythm tokens, not a step
	   scale, so the intermediate steps are declared here. */
	--mz-1: 0.25rem;
	--mz-2: 0.5rem;
	--mz-3: 0.75rem;
	--mz-4: 1rem;
	--mz-5: 1.25rem;
	--mz-6: 1.5rem;
	--mz-8: 2rem;
	--mz-10: 2.5rem;
	--mz-12: 3rem;
	--mz-16: 4rem;
	--mz-20: 5rem;

	/* Page container. --measure tokens govern text width, not
	   the page shell, so the shell width is declared here. */
	--mz-container: 80rem;
	--mz-container-wide: 87.5rem;

	/* Component sizes used in more than one place */
	--mz-control: 3rem;
	--mz-logo-height: 3rem;
	--mz-logo-max-width: 14rem;
	--mz-screen-min: 30rem;
}


.rensora-site .mz-accent { color: var(--mz-accent-ink); }

/* ------------------------------------------------------------
   In-card title sizes.

   The global scale in rensora-global.css is tuned for full-width section
   headings. The approved ModernZAI design sets smaller sizes for titles that
   sit INSIDE a card or panel, and the nearest global step runs up to a third
   too large at desktop width — the technical panel title is 36px in the
   approved design against .r-h3's 48px ceiling.

   So markup keeps a global class for family, weight and colour, and the rules
   below set font-size only, to the approved value. This is not a redefinition
   of the shared scale: nothing here changes how .r-h1-.r-h6 behave anywhere
   else and no other page is affected.
   ------------------------------------------------------------ */

/* Technical panel title — approved clamp(27px, 2.7vw, 36px) at weight 800.
   The global .r-h5 ceiling is already 36px, but its floor is 24px and its
   weight is 700, so both are restored here without touching the shared step. */
.rensora-site .mz-feature__title { font-size: clamp( 1.6875rem, 2.7vw, 2.25rem ); font-weight: 800; }

/* Journey panel title — approved 40px flat at weight 800. The middle term is
   a calc, not a bare vw: a steep slope from a low floor only meets the target
   at the widest viewport and undershoots everywhere else. This holds within
   ~3px of 40px from tablet up and eases only on small phones. */
.rensora-site .mz-journey__title { font-size: clamp( 2.125rem, 1.55rem + 1.2vw, 2.5rem ); font-weight: 800; }

/* Client story title — approved clamp(28px, 3.2vw, 39px) at weight 800. */
.rensora-site .mz-story__title { font-size: clamp( 1.75rem, 3.2vw, 2.44rem ); font-weight: 800; }

/* Delivery stage title — approved 30px flat at weight 800. Carries its own
   line-height because it sits on .r-h6 (1.3) while its panel-title peers all
   run 1.15. */
.rensora-site .mz-step__title {
	font-size: clamp( 1.65rem, 1.35rem + 0.65vw, 1.875rem );
	font-weight: 800;
	line-height: 1.15;
}

/* Delivery stage sub-heading — approved 19px. */
.rensora-site .mz-step__sub { font-size: 1.19rem; }

/* Resource card title — approved 26px flat. Weight stays at .r-h5's 700,
   which is what the approved design specifies here. */
.rensora-site .mz-resource__title { font-size: clamp( 1.45rem, 1.25rem + 0.45vw, 1.625rem ); }

.rensora-site .mz-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mz-4);
}

.rensora-site .mz-actions--centred { justify-content: center; align-items: center; }

/* ---- Inline link with moving arrow ---- */

.rensora-site .mz-link {
	display: inline-flex;
	align-items: center;
	gap: var(--mz-3);
	color: var(--blue-action);
	font-weight: 600;
	text-decoration: none;
	transition: gap var(--dur) var(--ease-standard), color var(--dur) var(--ease-standard);
}

.rensora-site .mz-link:hover,
.rensora-site .mz-link:focus-visible {
	color: var(--blue-dark);
	gap: var(--mz-4);
}

.rensora-site .mz-link--lg { font-size: 1.15rem; }
.rensora-site .mz-link--quiet { color: var(--ink-strong); }

.rensora-site .mz-link--quiet:hover,
.rensora-site .mz-link--quiet:focus-visible { color: var(--blue-action); }

/* ---- Cross-fading layer stacks ---- */

.rensora-site .mz-stack { display: grid; }

.rensora-site .mz-stack > .mz-layer {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-slow) var(--ease-standard);
}

.rensora-site .mz-stack > .mz-layer.is-active { opacity: 1; visibility: visible; }

/* ---- Tabs ---- */

.rensora-site .mz-tabs {
	display: flex;
	/* Wrap, don't scroll. The row hides its scrollbar (below), so any tab
	   pushed past the edge would be invisible with no affordance to reach it —
	   worse than the clipping this replaced. With 3-4 short labels wrapping to
	   a second line keeps every tab readable and reachable at every width, and
	   the bottom rule still reads as one track. */
	flex-wrap: wrap;
	gap: var(--mz-3);
	border-bottom: 1px solid var(--border-divider);
	overflow-x: auto;
	scrollbar-width: none;
}

.rensora-site .mz-tabs::-webkit-scrollbar { display: none; }

/* `flex: 1 0 auto` — grow, never shrink, size to the label.
   flex-shrink must stay 0. With shrink enabled, the three short tabs sit at
   exactly the 9.5rem min-width floor, so they stop shrinking immediately and
   the longest tab ("Chief Transformation Officer", 233px) absorbs the entire
   deficit — at a ~676px track it was squeezed to 184px and its text, plus the
   3px active underline, overflowed by 41px with the track not yet scrollable.
   A fixed min-width cannot prevent that because it is not content-based.
   With shrink at 0 the tabs hold their natural width and the wrapper's
   overflow-x scrolls instead, which is what the approved design does. */
.rensora-site .mz-tabs--even > .mz-tab { flex: 1 0 auto; min-width: 9.5rem; }
.rensora-site .mz-tabs--inline { justify-content: center; gap: var(--mz-8); border-bottom: 0; }

.rensora-site .mz-tab {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	padding: var(--mz-3) var(--mz-2);
	color: var(--ink-muted);
	font: inherit;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--dur) var(--ease-standard), border-color var(--dur) var(--ease-standard);
}

.rensora-site .mz-tabs--lg .mz-tab { font-size: 1.3rem; }
.rensora-site .mz-tab:hover { color: var(--ink-strong); }

.rensora-site .mz-tab.is-active {
	color: var(--ink-strong);
	font-weight: 700;
	border-bottom-color: var(--mz-accent);
}

/* ============================================================
   01 Hero
   ============================================================ */

.rensora-site .mz-hero {
	background: linear-gradient( 180deg, var(--surface) 0%, var(--surface-panel) 100% );
	padding-block: var(--section-y) 0;
	text-align: center;
}

/* Section heading rhythm. The global base zeroes all heading and paragraph
   margins, so a lead paragraph placed straight after an h2 sits flush against
   it. Restore the step here once, for every section on the page, rather than
   per-section. */
.rensora-site .mz h2 + .r-lead { margin-top: var(--mz-5); }

.rensora-site .mz-hero__text > .r-eyebrow { margin-bottom: var(--mz-5); }

.rensora-site .mz-hero__text > .r-lead {
	max-width: 68ch;
	margin-inline: auto;
	margin-top: var(--mz-6);
}

.rensora-site .mz-hero .mz-actions { justify-content: center; margin-top: var(--mz-8); }

.rensora-site .mz-hero__scene {
	max-width: var(--measure-wide);
	margin: var(--mz-12) auto 0;
}

.rensora-site .mz-hero__scene img { display: block; width: 100%; height: auto; }

/* ============================================================
   02 Credibility
   ============================================================ */

.rensora-site .mz-credibility {
	background: var(--surface-sunken);
	padding-block: var(--section-y-tight);
}

.rensora-site .mz-credibility__intro {
	margin: 0 0 var(--mz-10);
	text-align: center;
	font-size: 1.45rem;
	color: var(--ink);
}

.rensora-site .mz-credibility__intro strong { color: var(--ink-strong); }

.rensora-site .mz-marquee {
	position: relative;
	overflow: hidden;
	margin-bottom: var(--mz-12);
	-webkit-mask-image: linear-gradient( 90deg, transparent 0, black var(--mz-20), black calc( 100% - var(--mz-20) ), transparent 100% );
	mask-image: linear-gradient( 90deg, transparent 0, black var(--mz-20), black calc( 100% - var(--mz-20) ), transparent 100% );
}

.rensora-site .mz-marquee__track {
	display: flex;
	width: max-content;
	align-items: center;
	gap: var(--mz-16);
	animation: mz-marquee 48s linear infinite;
}

.rensora-site .mz-marquee:hover .mz-marquee__track { animation-play-state: paused; }

.rensora-site .mz-marquee__item { display: flex; align-items: center; color: var(--ink-soft); }

.rensora-site .mz-marquee__item img {
	display: block;
	/* Cap height AND width so marks of very different proportions read at a
	   similar optical size. The client marks range from 2.6:1 to 7.8:1, so a
	   fixed height alone makes the widest mark three times the visual weight
	   of the narrowest. */
	height: auto;
	width: auto;
	max-height: var(--mz-logo-height);
	max-width: var(--mz-logo-max-width);
	object-fit: contain;
	opacity: 1;
	transition: opacity var(--dur) var(--ease-standard);
}

.rensora-site .mz-marquee__item img:hover { opacity: 1; }

@keyframes mz-marquee {
	from { transform: translateX( 0 ); }
	to { transform: translateX( -50% ); }
}

.rensora-site .mz-stats {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
	gap: var(--mz-8);
	max-width: var(--measure);
	margin-inline: auto;
}

.rensora-site .mz-stat { display: grid; grid-template-rows: 1fr auto; text-align: center; padding-inline: var(--mz-4); }
.rensora-site .mz-stat:nth-child(2) { border-inline: 1px solid var(--border-divider); }

.rensora-site .mz-stat__value {
	align-self: end;
	margin: 0 0 var(--mz-2);
	font-size: 1.85rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ink-strong);
}

.rensora-site .mz-stat__value--text { font-size: 1.25rem; line-height: 1.2; }

.rensora-site .mz-stat__label { margin: 0; font-size: 0.95rem; color: var(--ink-muted); }

/* ============================================================
   03 Legacy constraints
   ============================================================ */

.rensora-site .mz-constraints { padding-block: var(--section-y); }

.rensora-site .mz-constraints__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 17.5rem, 1fr ) );
	gap: var(--mz-6);
	margin-top: var(--mz-12);
}

.rensora-site .mz-tile {
	background: var(--surface-sunken);
	border-radius: var(--radius-lg);
	padding: var(--mz-2) var(--mz-2) var(--mz-8);
	text-align: center;
}

.rensora-site .mz-tile img {
	display: block;
	width: 100%;
	height: auto;
}

.rensora-site .mz-tile p { margin: var(--mz-4) var(--mz-5) 0; }

.rensora-site .mz-constraints__close {
	max-width: 68ch;
	margin: var(--mz-12) auto 0;
	text-align: center;
	color: var(--ink);
	font-size: 1.3rem;
}

.rensora-site .mz-constraints__close p { margin: 0 0 var(--mz-1); line-height: 1.5; }
.rensora-site .mz-constraints__close strong { color: var(--ink-strong); }

/* ============================================================
   04 Perspectives, bounded scroll
   ============================================================ */

.rensora-site .mz-perspectives {
	background: var(--surface-alt);
	height: 320vh;
}

.rensora-site .mz-perspectives__sticky {
	position: sticky;
	top: 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding-block: var(--section-y-tight);
}

.rensora-site .mz-perspectives .mz-tabs { margin-top: var(--mz-10); }

.rensora-site .mz-stack--quote {
	min-height: clamp( 12rem, 27vh, 17rem );
	margin-top: var(--mz-10);
}

.rensora-site .mz-role {
	margin: 0 0 var(--mz-5);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--mz-accent-ink);
}

.rensora-site .mz-quote {
	margin: 0;
	font-size: clamp( 1.5rem, 3vw, 2.25rem );
	line-height: 1.45;
	color: var(--ink-strong);
}

.rensora-site .mz-progress { display: flex; gap: var(--mz-3); margin-top: var(--mz-8); }

.rensora-site .mz-progress span {
	width: 4rem;
	height: 5px;
	border-radius: var(--radius-pill);
	background: var(--border-strong);
	transition: background var(--dur) var(--ease-standard);
}

.rensora-site .mz-progress span.is-filled { background: var(--mz-accent-bright); }

/* ============================================================
   05 Product journey
   ============================================================ */

.rensora-site .mz-journey { padding-block: var(--section-y); }
.rensora-site .mz-journey .mz-tabs { margin-top: var(--mz-10); }

.rensora-site .mz-journey__body {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mz-10);
	align-items: center;
	margin-top: var(--mz-10);
}

.rensora-site .mz-journey__copy { flex: 1 1 19rem; min-width: 17rem; }
.rensora-site .mz-journey__copy .mz-layer { align-content: center; }
.rensora-site .mz-journey__copy h3 { margin: 0 0 var(--mz-5); }

.rensora-site .mz-journey__copy p {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.6;
	color: var(--ink);
}

.rensora-site .mz-journey__copy strong { color: var(--ink-strong); }

.rensora-site .mz-journey__screen {
	flex: 2 1 33rem;
	min-width: 18rem;
	background: var(--surface-sunken);
	border-radius: var(--radius-xl);
	padding: var(--mz-4);
}

/* Every dashboard state occupies the same box. */
.rensora-site .mz-screen-stack { min-height: var(--mz-screen-min); }
.rensora-site .mz-screen-stack > .mz-layer { display: grid; }

/* ---- Dashboard environment ---- */

.rensora-site .mz-app {
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.rensora-site .mz-app__bar {
	display: flex;
	align-items: center;
	gap: var(--mz-3);
	padding: var(--mz-3) var(--mz-4);
	border-bottom: 1px solid var(--border-subtle);
}

.rensora-site .mz-app__logo { height: 1.125rem; width: auto; display: block; flex: none; }

.rensora-site .mz-app__context {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ink-strong);
	white-space: nowrap;
	padding-left: var(--mz-3);
	border-left: 1px solid var(--border-subtle);
}

.rensora-site .mz-app__status {
	display: inline-flex;
	align-items: center;
	gap: var(--mz-2);
	font-size: 0.72rem;
	color: var(--ink-muted);
	white-space: nowrap;
}

.rensora-site .mz-app__status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: var(--radius-pill);
	background: var(--mz-accent-bright);
}

.rensora-site .mz-app__avatar {
	margin-left: auto;
	flex: none;
	width: 1.55rem;
	height: 1.55rem;
	display: grid;
	place-items: center;
	border-radius: var(--radius-pill);
	background: var(--surface-sunken);
	color: var(--blue-action);
	font-size: 0.62rem;
	font-weight: 700;
}

.rensora-site .mz-app__body { display: flex; flex: 1; min-height: 0; }

.rensora-site .mz-app__nav {
	flex: 0 0 clamp( 6.5rem, 16%, 9.4rem );
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: var(--mz-3) var(--mz-2);
	background: var(--surface-alt);
	border-right: 1px solid var(--border-subtle);
}

.rensora-site .mz-app__nav span {
	padding: var(--mz-2) var(--mz-3);
	border-radius: var(--radius-sm);
	border-left: 3px solid transparent;
	font-size: 0.75rem;
	color: var(--ink-muted);
}

.rensora-site .mz-app__nav span.is-active {
	background: var(--surface-sunken);
	border-left-color: var(--blue-action);
	color: var(--blue-action);
	font-weight: 600;
}

.rensora-site .mz-app__main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--mz-3);
	padding: var(--mz-4);
}

.rensora-site .mz-app__title {
	margin: 0 0 2px;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ink-strong);
}

.rensora-site .mz-app__sub { margin: 0; font-size: 0.75rem; color: var(--ink-muted); }

.rensora-site .mz-app__row { display: flex; flex-wrap: wrap; gap: var(--mz-2); }

.rensora-site .mz-kpis { display: flex; flex-wrap: wrap; gap: var(--mz-2); }

.rensora-site .mz-kpi {
	flex: 1 1 8.5rem;
	min-width: 8rem;
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: var(--mz-3);
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius);
}

.rensora-site .mz-kpi__label { font-size: 0.7rem; color: var(--ink-muted); }

.rensora-site .mz-kpi__value {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--ink-strong);
}

.rensora-site .mz-panel {
	flex: 1 1 11.5rem;
	min-width: 11rem;
	padding: var(--mz-3);
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius);
}

.rensora-site .mz-panel--wide { flex: 2 1 16rem; }

.rensora-site .mz-panel__title {
	margin: 0 0 var(--mz-3);
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--ink-strong);
}

.rensora-site .mz-panel img { display: block; width: 100%; height: auto; }

.rensora-site .mz-list { margin: 0; padding: 0; list-style: none; }

.rensora-site .mz-list li {
	display: flex;
	align-items: center;
	gap: var(--mz-2);
	padding: var(--mz-2) 0;
	border-bottom: 1px solid var(--border-subtle);
	font-size: 0.75rem;
	color: var(--ink-strong);
}

.rensora-site .mz-list li:last-child { border-bottom: 0; }

.rensora-site .mz-list li::before {
	content: "";
	flex: none;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: var(--radius-sm);
	background: var(--mz-accent-soft);
}

.rensora-site .mz-ghost {
	margin: var(--mz-2) 0 0;
	padding: var(--mz-2);
	text-align: center;
	border: 1px solid var(--blue-action);
	border-radius: var(--radius-sm);
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--blue-action);
}

.rensora-site .mz-table {
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius);
	overflow: hidden;
}

.rensora-site .mz-table__title {
	margin: 0;
	padding: var(--mz-3);
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--ink-strong);
}

.rensora-site .mz-table__head,
.rensora-site .mz-table__row {
	display: grid;
	grid-template-columns: minmax( 0, 1.6fr ) minmax( 0, 1fr ) minmax( 0, 1fr );
}

.rensora-site .mz-table__head {
	background: var(--surface-sunken);
	border-block: 1px solid var(--border-subtle);
	font-size: 0.7rem;
	color: var(--ink-muted);
}

.rensora-site .mz-table__row {
	font-size: 0.74rem;
	color: var(--ink-strong);
	border-bottom: 1px solid var(--border-subtle);
}

.rensora-site .mz-table__row:last-child { border-bottom: 0; }

.rensora-site .mz-table__head span,
.rensora-site .mz-table__row span { padding: var(--mz-2) var(--mz-3); }

.rensora-site .mz-dot { display: inline-flex; align-items: center; gap: var(--mz-2); }

.rensora-site .mz-dot::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: var(--radius-pill);
	background: var(--mz-accent-bright);
}

.rensora-site .mz-code {
	flex: 1 1 13.5rem;
	min-width: 12.5rem;
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius);
	overflow: hidden;
}

.rensora-site .mz-code__title {
	margin: 0;
	padding: var(--mz-3);
	border-bottom: 1px solid var(--border-subtle);
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--ink-strong);
}

.rensora-site .mz-code pre {
	margin: 0;
	padding: var(--mz-3);
	overflow-x: auto;
	font-size: 0.66rem;
	line-height: 1.55;
	color: var(--ink-strong);
}

/* ============================================================
   06 Technical explorer, bounded scroll
   ============================================================ */

.rensora-site .mz-technical { height: 340vh; }

.rensora-site .mz-technical__sticky {
	position: sticky;
	top: 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding-block: var(--section-y-tight);
}

.rensora-site .mz-technical .mz-tabs { margin-block: var(--mz-8); }

.rensora-site .mz-feature {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mz-8);
	padding: var(--mz-10);
	background: var(--surface-sunken);
	border-radius: var(--radius-xl);
}

.rensora-site .mz-feature__copy { flex: 1 1 21rem; min-width: 17rem; }
.rensora-site .mz-feature__copy h3 { margin: 0 0 var(--mz-4); }

/* Body copy only. `:not(.r-kicker)` matters — this rule out-specifies
   `.r-kicker--mz`, so without it the teal eyebrow above each heading was
   being repainted as plain body ink. */
.rensora-site .mz-feature__copy > .mz-layer > p:not(.r-kicker) {
	margin: 0 0 var(--mz-6);
	font-size: 1.15rem;
	line-height: 1.55;
	color: var(--ink);
}

.rensora-site .mz-feature__scene { flex: 2 1 26rem; min-width: 16rem; }

.rensora-site .mz-feature__scene img {
	display: block;
	width: 100%;
	max-height: clamp( 12.5rem, 40vh, 24rem );
	object-fit: contain;
	margin-inline: auto;
}

.rensora-site .mz-specs {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--mz-3);
}

.rensora-site .mz-specs li {
	display: grid;
	line-height: 1.5;
	grid-template-columns: minmax( 0, 7rem ) minmax( 0, 1fr );
	gap: var(--mz-4);
	align-items: baseline;
	padding-top: var(--mz-3);
	border-top: 1px solid var(--border-panel);
}

.rensora-site .mz-specs li > span:first-child {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--ink-strong);
}

/* --ink-soft, deliberately: one step down from body --ink so the spec rows
   read as supporting detail, but still 7.3:1 on the panel. --ink-muted was
   the obvious choice and lands at 3.87:1, under AA for 15px text. */
.rensora-site .mz-specs li > span:last-child { font-size: 0.95rem; color: var(--ink-soft); }

/* ============================================================
   07 Client stories
   ============================================================ */

.rensora-site .mz-stories {
	background: var(--surface-navy);
	padding-block: var(--section-y);
}

.rensora-site .mz-stories .r-h2 { color: var(--ink-inverse); margin-bottom: var(--mz-10); }

.rensora-site .mz-story {
	display: flex;
	flex-wrap: wrap;
	background: var(--surface-card);
	border-radius: var(--radius-xl);
	overflow: hidden;
}

.rensora-site .mz-story__copy {
	flex: 1 1 22rem;
	min-width: 17rem;
	padding: var(--mz-12) var(--mz-10);
}

.rensora-site .mz-story__copy > .mz-layer { display: flex; flex-direction: column; }
.rensora-site .mz-story__copy h3 { margin: 0 0 var(--mz-6); }

.rensora-site .mz-story__client {
	margin: 0 0 var(--mz-1);
	font-size: 1.45rem;
	font-weight: 700;
	color: var(--ink-strong);
}

.rensora-site .mz-story__sector {
	margin: 0 0 var(--mz-10);
	font-size: 1.05rem;
	font-weight: 600;
}

.rensora-site .mz-story__summary {
	margin: 0 0 var(--mz-10);
	font-size: 1.25rem;
	line-height: 1.5;
	color: var(--ink);
}

.rensora-site .mz-story__copy .mz-link { margin-top: auto; }

.rensora-site .mz-story__media {
	flex: 1 1 24rem;
	min-width: 17rem;
	position: relative;
	min-height: 24rem;
}

.rensora-site .mz-story__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rensora-site .mz-story__quote {
	position: absolute;
	inset: auto var(--mz-6) var(--mz-6);
	padding: var(--mz-8);
	border-radius: var(--radius-lg);
	background: color-mix( in srgb, var(--navy) 93%, transparent );
	color: var(--ink-inverse);
}

.rensora-site .mz-rule {
	display: block;
	width: 2.85rem;
	height: 3px;
	margin-bottom: var(--mz-5);
	background: var(--mz-accent-bright);
}

.rensora-site .mz-story__quote blockquote {
	margin: 0 0 var(--mz-5);
	font-size: clamp( 1.25rem, 2vw, 1.7rem );
	line-height: 1.35;
}

.rensora-site .mz-story__name { margin: 0 0 2px; font-size: 1.05rem; font-weight: 700; }

.rensora-site .mz-story__role {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.45;
	color: var(--ink-inverse-muted);
}

.rensora-site .mz-story__controls {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--mz-4);
	margin-top: var(--mz-6);
}

.rensora-site .mz-arrow {
	width: var(--mz-control);
	height: var(--mz-control);
	border-radius: var(--radius);
	border: 1px solid color-mix( in srgb, var(--ink-inverse) 22%, transparent );
	background: none;
	color: var(--ink-inverse);
	font: inherit;
	font-size: 1.25rem;
	cursor: pointer;
	transition: background var(--dur) var(--ease-standard);
}

.rensora-site .mz-arrow:hover { background: color-mix( in srgb, var(--ink-inverse) 10%, transparent ); }

.rensora-site .mz-dots { display: flex; gap: var(--mz-3); }

.rensora-site .mz-dots button {
	width: 0.75rem;
	height: 0.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: color-mix( in srgb, var(--ink-inverse) 38%, transparent );
	cursor: pointer;
	transition: background var(--dur) var(--ease-standard);
}

.rensora-site .mz-dots button.is-active { background: var(--ink-inverse); }

/* ============================================================
   08 Delivery journey, bounded scroll
   ============================================================ */

.rensora-site .mz-delivery {
	height: 340vh;
	background: linear-gradient( 180deg, var(--surface) 0%, var(--surface-alt) 45%, var(--surface) 100% );
}

.rensora-site .mz-delivery__sticky {
	position: sticky;
	top: 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding-block: var(--section-y-tight);
}

.rensora-site .mz-path__scroll {
	overflow-x: auto;
	padding-bottom: var(--mz-2);
	margin-top: var(--mz-10);
}

.rensora-site .mz-path { min-width: 51rem; position: relative; }

.rensora-site .mz-path__stages { display: grid; grid-template-columns: repeat( 5, 1fr ); }

.rensora-site .mz-path__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3.6rem;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
	transition: transform var(--dur) var(--ease-standard);
}

.rensora-site .mz-path__stage img {
	width: clamp( 5rem, 10vh, 8.25rem );
	height: auto;
	display: block;
	transition: filter var(--dur) var(--ease-standard);
}

.rensora-site .mz-path__stage span {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ink-strong);
}

.rensora-site .mz-path__stage.is-active { transform: translateY( -4px ); }
.rensora-site .mz-path__stage.is-active span { color: var(--mz-accent-ink); }

.rensora-site .mz-path__stage.is-active img {
	filter: drop-shadow( 0 6px 14px color-mix( in srgb, var(--mz-accent-bright) 35%, transparent ) );
}

.rensora-site .mz-path__line {
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: 2.5rem;
	height: 2px;
	background: var(--border-strong);
}

.rensora-site .mz-path__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	background: var(--mz-accent);
	transition: width var(--dur-slow) var(--ease-standard);
}

.rensora-site .mz-path__node,
.rensora-site .mz-path__gate {
	position: absolute;
	top: 50%;
	background: var(--border-strong);
	transition: background var(--dur) var(--ease-standard);
}

.rensora-site .mz-path__node {
	width: 13px;
	height: 13px;
	border-radius: var(--radius-pill);
	transform: translate( -50%, -50% );
}

.rensora-site .mz-path__gate {
	width: 11px;
	height: 11px;
	transform: translate( -50%, -50% ) rotate( 45deg );
}

.rensora-site .mz-path__node:nth-of-type(1) { left: 0; }
.rensora-site .mz-path__node:nth-of-type(2) { left: 25%; }
.rensora-site .mz-path__node:nth-of-type(3) { left: 50%; }
.rensora-site .mz-path__node:nth-of-type(4) { left: 75%; }
.rensora-site .mz-path__node:nth-of-type(5) { left: 100%; }
.rensora-site .mz-path__gate:nth-of-type(1) { left: 12.5%; }
.rensora-site .mz-path__gate:nth-of-type(2) { left: 37.5%; }
.rensora-site .mz-path__gate:nth-of-type(3) { left: 62.5%; }
.rensora-site .mz-path__gate:nth-of-type(4) { left: 87.5%; }

.rensora-site .mz-path__node.is-on,
.rensora-site .mz-path__gate.is-on { background: var(--mz-accent); }

.rensora-site .mz-path__approval {
	position: absolute;
	left: 20%;
	bottom: 3.9rem;
	margin: 0;
	transform: translateX( -50% );
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--mz-accent-ink);
	white-space: nowrap;
	transition: left var(--dur-slow) var(--ease-standard), opacity var(--dur) var(--ease-standard);
}

.rensora-site .mz-delivery__panel {
	display: flex;
	align-items: center;
	gap: var(--mz-5);
	margin-top: var(--mz-8);
	padding: var(--mz-8);
	min-height: 10.5rem;
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

.rensora-site .mz-delivery__copy { flex: 1; align-content: center; }
.rensora-site .mz-delivery__copy h3 { margin: var(--mz-2) 0; }

.rensora-site .mz-delivery__copy p {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.5;
	color: var(--ink);
}

.rensora-site .mz-next {
	flex: none;
	width: var(--mz-control);
	height: var(--mz-control);
	border-radius: var(--radius);
	border: 1px solid var(--border-subtle);
	background: var(--surface-card);
	color: var(--ink);
	font: inherit;
	font-size: 1.25rem;
	cursor: pointer;
	transition: background var(--dur) var(--ease-standard);
}

.rensora-site .mz-next:hover { background: var(--surface-alt); }
.rensora-site .mz-next[disabled] { opacity: 0.4; cursor: default; }

.rensora-site .mz-assurances {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 16rem, 1fr ) );
	gap: var(--mz-8);
	margin-top: var(--mz-10);
}

.rensora-site .mz-assurances h4 { margin: 0 0 var(--mz-1); }

.rensora-site .mz-assurances p {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.5;
	color: var(--ink);
}

/* ============================================================
   09 Advisory
   ============================================================ */

.rensora-site .mz-advisory {
	background: linear-gradient( 120deg, var(--surface-sunken) 0%, var(--surface-alt) 60%, var(--surface-sunken) 100% );
	padding-block: var(--mz-6);
}

.rensora-site .mz-advisory__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mz-6);
	max-width: var(--measure-wide);
}

.rensora-site .mz-advisory__copy {
	flex: 1 1 22rem;
	min-width: 17rem;
	padding-block: var(--mz-10);
}

.rensora-site .mz-advisory__copy h2 { margin: 0 0 var(--mz-5); }

.rensora-site .mz-advisory__copy .r-lead {
	max-width: 62ch;
	margin-bottom: var(--mz-6);
}

.rensora-site .mz-advisory__scene { flex: 1 1 26rem; min-width: 17rem; }
.rensora-site .mz-advisory__scene img { display: block; width: 100%; height: auto; }

/* ============================================================
   10 Resources
   ============================================================ */

.rensora-site .mz-resources { padding-block: var(--section-y); }

.rensora-site .mz-resources__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 18.75rem, 1fr ) );
	gap: var(--mz-6);
	margin-top: var(--mz-12);
}

.rensora-site .mz-resource {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: border-color var(--dur) var(--ease-standard), box-shadow var(--dur) var(--ease-standard);
}

.rensora-site .mz-resource:hover {
	border-color: var(--border-strong);
	box-shadow: var(--shadow-md);
}

.rensora-site .mz-resource__thumb { overflow: hidden; }

.rensora-site .mz-resource__thumb img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform var(--dur) var(--ease-standard);
}

.rensora-site .mz-resource:hover .mz-resource__thumb img { transform: scale( 1.02 ); }

.rensora-site .mz-resource__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--mz-8);
}

.rensora-site .mz-resource__body h3 { margin: var(--mz-3) 0 var(--mz-4); }

.rensora-site .mz-resource__body > p {
	margin: 0 0 var(--mz-8);
	flex: 1;
	font-size: 1.05rem;
	line-height: 1.5;
	color: var(--ink);
}

/* ============================================================
   11 Closing
   ============================================================ */

.rensora-site .mz-closing {
	position: relative;
	overflow: hidden;
	background: linear-gradient( 180deg, var(--surface-alt) 0%, var(--surface-sunken) 100% );
	padding: var(--section-y) var(--gutter) calc( var(--section-y) + var(--mz-20) );
	text-align: center;
}

.rensora-site .mz-closing__light,
.rensora-site .mz-closing__core,
.rensora-site .mz-closing__arc {
	position: absolute;
	opacity: 0.35;
	transition: opacity 600ms var(--ease-standard);
	pointer-events: none;
}

.rensora-site .mz-closing.is-lit .mz-closing__light,
.rensora-site .mz-closing.is-lit .mz-closing__core,
.rensora-site .mz-closing.is-lit .mz-closing__arc { opacity: 1; }

.rensora-site .mz-closing__light {
	left: -12%;
	right: -12%;
	bottom: 0;
	height: 44%;
	filter: blur( 3px );
	background: radial-gradient(
		95% 125% at 50% 132%,
		var(--surface-card) 0%,
		color-mix( in srgb, var(--mz-accent-bright) 45%, var(--surface-card) ) 26%,
		color-mix( in srgb, var(--mz-accent-bright) 62%, transparent ) 46%,
		color-mix( in srgb, var(--mz-accent-bright) 22%, transparent ) 64%,
		transparent 100%
	);
}

.rensora-site .mz-closing__core {
	left: -4%;
	right: -4%;
	bottom: -6%;
	height: 26%;
	background: radial-gradient(
		46% 100% at 50% 106%,
		var(--surface-card) 0%,
		color-mix( in srgb, var(--mz-accent-bright) 28%, var(--surface-card) ) 45%,
		transparent 100%
	);
}

.rensora-site .mz-closing__arc {
	left: -32%;
	right: -32%;
	bottom: -62%;
	height: 92%;
	border-radius: 50%;
	border-top: 2px solid color-mix( in srgb, var(--surface-card) 75%, transparent );
}

.rensora-site .mz-closing__inner { position: relative; }
.rensora-site .mz-closing__inner h2 { margin: 0 0 var(--mz-5); }
.rensora-site .mz-closing__inner .r-lead { margin-bottom: var(--mz-10); }

/* ============================================================
   Responsive
   ============================================================ */

@media ( max-width: 900px ) {
	.rensora-site .mz-perspectives,
	.rensora-site .mz-technical,
	.rensora-site .mz-delivery { height: auto; }

	.rensora-site .mz-perspectives__sticky,
	.rensora-site .mz-technical__sticky,
	.rensora-site .mz-delivery__sticky {
		position: static;
		min-height: 0;
		display: block;
		padding-block: var(--section-y-tight);
	}

	/* Without bounded scroll the tabs carry selection,
	   so the stacks can flow to their natural height. */
	.rensora-site .mz-stack--quote { min-height: 0; }
	.rensora-site .mz-screen-stack { min-height: 22rem; }

	.rensora-site .mz-stat:nth-child(2) { border-inline: 0; }

	.rensora-site .mz-feature { padding: var(--mz-6); }
	.rensora-site .mz-story__copy { padding: var(--mz-8) var(--mz-6); }
	.rensora-site .mz-story__media { min-height: 20rem; }
	.rensora-site .mz-story__quote { inset: auto var(--mz-4) var(--mz-4); padding: var(--mz-5); }
	.rensora-site .mz-story__controls { justify-content: center; }

	.rensora-site .mz-advisory__copy { padding-block: var(--mz-8); }
	.rensora-site .mz-closing { padding-bottom: var(--section-y); }
}

@media ( max-width: 600px ) {
	.rensora-site .mz-tabs--even > .mz-tab { flex: 0 1 auto; min-width: 0; }
	.rensora-site .mz-tabs--inline { justify-content: flex-start; gap: var(--mz-5); }
	.rensora-site .mz-marquee__track { gap: var(--mz-10); }
	.rensora-site .mz-journey__screen { padding: var(--mz-3); }
	.rensora-site .mz-delivery__panel { flex-direction: column; align-items: stretch; }
	.rensora-site .mz-next { align-self: flex-end; }
}

@media ( prefers-reduced-motion: reduce ) {
	.rensora-site .mz-marquee__track { animation: none; }
	.rensora-site .mz-path__stage.is-active { transform: none; }
	.rensora-site .mz-resource:hover .mz-resource__thumb img { transform: none; }

	.rensora-site .mz-closing__light,
	.rensora-site .mz-closing__core,
	.rensora-site .mz-closing__arc { opacity: 1; transition: none; }
}