/*
 * VirtualCRO (customer spike, 2026-10-12).
 *
 * Load order: this file loads before the Blockstudio block stylesheets, so
 * a rule here that overrides a block's own rule needs one more selector
 * (body ...) to win. Values for the parent's section
 * slots in both schemes, the header, the Scale-up Framework diagram (drawn
 * by inc/framework.php inside several blocks, so its styles live here), the
 * proof strip and sequence tweaks, and the enquiry form.
 *
 * Schemes: dark is the default. body.scheme-light (page meta upp_scheme)
 * makes theme.json remap the preset colours on :root; the brand-specific
 * slots below are remapped on the same element, because a custom property
 * that refers to another is resolved where it is declared.
 */

:root {
	--wu-accent: var(--wp--preset--color--pink);
	--wu-success: var(--wp--preset--color--mint);
	--wu-glow-tint: #ef53a5;
	/* Glow slots are named after WebUpp's; here the first is purple at 30%,
	   the second pink at 16%, the third blue at 10% (proposal section 3). */
	--wu-glow-red: var(--wp--custom--glow--purple);
	--wu-glow-purple: var(--wp--custom--glow--pink);
	--wu-glow-blue: var(--wp--custom--glow--blue);
	/* Chip pill: opaque, 10% pink on the ground. */
	--wu-chip-bg: #2a1029;
	--wu-chip-border: rgba(239, 83, 165, 0.3);
	--wu-radius: 999px;
	--wu-button-face: var(--wp--preset--color--surface-2);
	--wu-button-text: #fff;
	/* Hover face: the purple run of the gradient only, so white text on it
	   stays at 4.5:1 or better (4.68 at its lightest end). */
	--wu-button-hover-face: linear-gradient(120deg, #61145f 0%, #9b3f9a 55%, #c93a8f 100%);
	/* The h1 phrase: pink to pink soft on the dark ground (6.0 and 9.3:1),
	   not the full brand gradient, whose purple start is 1.6:1 there. */
	--vcro-wash: linear-gradient(120deg, #ef53a5 0%, #ff8fc8 100%);
	--wu-figure: var(--wp--preset--color--pink);
	--vcro-ink: #1a0f1f;
	--vcro-header-ground: rgba(18, 9, 20, 0.78);
	--wu-dot: rgba(255, 255, 255, 0.04);
}

:root:has(body.scheme-light) {
	--wu-accent: var(--wp--preset--color--purple);
	--wu-glow-tint: #9b3f9a;
	--wu-glow-red: var(--wp--custom--light--glow-purple);
	--wu-glow-purple: var(--wp--custom--light--glow-pink);
	--wu-glow-blue: var(--wp--custom--light--glow-blue);
	--wu-chip-bg: #f6eef7;
	--wu-chip-border: rgba(97, 20, 95, 0.18);
	--wu-button-face: #fff;
	--wu-button-text: var(--wp--preset--color--text);
	/* Purple to pink on white: the pink end is 3.3:1, large text only. */
	--vcro-wash: linear-gradient(120deg, #61145f 0%, #ef53a5 100%);
	--wu-figure: var(--wp--preset--color--purple);
	--vcro-header-ground: rgba(255, 255, 255, 0.82);
	--wu-dot: rgba(26, 15, 31, 0.05);
	--wu-ghost-face: rgba(26, 15, 31, 0.02);
	--wu-ghost-face-hover: rgba(26, 15, 31, 0.05);
	--wu-ghost-border-hover: rgba(26, 15, 31, 0.36);
}

html {
	scroll-padding-top: calc(var(--wu-header-h) + 16px);
	background: var(--wu-ground);
	color-scheme: dark;
}

html:has(body.scheme-light) {
	color-scheme: light;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

::selection {
	background: rgba(239, 83, 165, 0.45);
	color: #fff;
}

:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 2px solid var(--wu-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.wu-wash {
	background-image: var(--vcro-wash);
}

.upp-main > .wp-block-post-content,
.upp-main > .wp-block-post-content > * {
	margin-block: 0;
}

.upp-main > .wp-block-post-content {
	padding-inline: 0;
}

/* ---------- Header (parts/header.html) ---------- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	margin: 0;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s;
}

/* Frosted ground on a pseudo-element: backdrop-filter on the header itself
   would make it the containing block of the navigation overlay. */
.wp-site-blocks > header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--vcro-header-ground);
	-webkit-backdrop-filter: saturate(1.5) blur(16px);
	backdrop-filter: saturate(1.5) blur(16px);
}

html.vcro-scrolled .wp-site-blocks > header.wp-block-template-part {
	border-bottom-color: var(--wu-line);
}

.vcro-header {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	width: 100%;
	max-width: calc(var(--wp--style--global--wide-size, 1240px) + 2 * var(--wu-gutter));
	height: var(--wu-header-h);
	margin-inline: auto;
	padding-inline: var(--wu-gutter);
}

.vcro-header > * {
	margin-block: 0;
}

.vcro-header > .vcro-logo {
	justify-self: start;
}

.vcro-header .vcro-logo__img {
	height: 56px;
}

.vcro-header > .wp-block-buttons {
	justify-self: end;
}

.vcro-header .wp-block-navigation {
	gap: 30px;
	font-size: 15px;
	font-weight: 500;
}

.vcro-header .wp-block-navigation-item__content {
	color: var(--wu-muted);
	text-decoration: none;
	transition: color 0.2s;
}

.vcro-header .wp-block-navigation-item__content:hover {
	color: var(--wu-text);
	text-decoration: none;
}

.vcro-header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content,
.vcro-header .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wu-text);
}

/* The header button is a core button styled as the primary. */
.vcro-header .wp-block-button__link {
	position: relative;
	isolation: isolate;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: linear-gradient(var(--wu-button-face), var(--wu-button-face)) padding-box, var(--wu-gradient) border-box;
	color: var(--wu-button-text);
	font-size: 14px;
	transition: box-shadow 0.25s var(--wu-ease), transform 0.25s var(--wu-ease), color 0.2s;
}

.vcro-header .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: -1;
	border-radius: inherit;
	background-image: var(--wu-button-hover-face);
	opacity: 0;
	transition: opacity 0.3s var(--wu-ease);
}

.vcro-header .wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 30px -10px rgba(239, 83, 165, 0.6);
	color: #fff;
	text-decoration: none;
}

.vcro-header .wp-block-button__link:hover::before {
	opacity: 1;
}

/* Burger below desktop (core switches at 600px; the house breakpoint is 1025px). */
@media (max-width: 1024.98px) {
	.vcro-header {
		grid-template-columns: 1fr auto auto;
		gap: 12px;
	}

	.vcro-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.vcro-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.vcro-header > .wp-block-navigation {
		order: 3;
	}
}

.vcro-header .wp-block-navigation__responsive-container-open,
.vcro-header .wp-block-navigation__responsive-container-close {
	color: var(--wu-text);
}

/* Full-screen overlay menu, in the page's scheme. */
.vcro-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 20px var(--wu-gutter);
	background: var(--wu-ground) !important;
	background-image: radial-gradient(600px 400px at 100% 0%, var(--wu-glow-red), transparent 70%), radial-gradient(500px 400px at 0% 100%, var(--wu-glow-purple), transparent 70%) !important;
	color: var(--wu-text) !important;
}

.vcro-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 64px;
}

.vcro-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
}

.vcro-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--wu-line);
}

.vcro-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 18px 0;
	color: var(--wu-text);
	font-family: var(--wu-display);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.vcro-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.vcro-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
}

@media (max-width: 420px) {
	.vcro-header .vcro-logo__img {
		height: 42px;
	}

	.vcro-header .wp-block-button__link {
		padding: 9px 14px;
		font-size: 13px;
	}
}

/* ---------- The Scale-up Framework (inc/framework.php) ---------- */

.vcro-fw {
	--fw-h: 300px;
	--fw-y: 30px;
	--fw-gap: 10px;
	--fw-axis: var(--wu-line-strong);
	--fw-label: var(--wu-muted);
	--fw-veil: var(--wu-ground);
	--fw-ink: var(--vcro-ink);
	/* Dark: each block a gradient between two neighbouring stops of the
	   purple to pink run, rising to the brightest at stage 4. */
	--fw-s1: linear-gradient(180deg, #9b3f9a 0%, #61145f 100%);
	--fw-s2: linear-gradient(180deg, #c24a9f 0%, #8e2c86 100%);
	--fw-s3: linear-gradient(180deg, #f27ab8 0%, #ef53a5 100%);
	--fw-s4: linear-gradient(180deg, #ffb3d9 0%, #ff8fc8 100%);
	--fw-lit: drop-shadow(0 18px 36px rgba(239, 83, 165, 0.38));
	position: relative;
	margin: 0;
	color: var(--wu-text);
	font-family: var(--wp--preset--font-family--body);
}

/* Light: flat purple to pink fills, his own colours, on white. */
:root:has(body.scheme-light) .vcro-fw:not(.vcro-fw--dark),
.vcro-fw--light {
	--fw-s1: #61145f;
	--fw-s2: #9b3f9a;
	--fw-s3: #ef53a5;
	--fw-s4: #ff8fc8;
	--fw-lit: drop-shadow(0 16px 28px rgba(97, 20, 95, 0.22));
}

.vcro-fw--light {
	--fw-axis: #dccde1;
	--fw-label: #5e4f66;
	--fw-veil: #fff;
	color: #1a0f1f;
}

.vcro-fw--dark {
	--fw-axis: rgba(255, 255, 255, 0.16);
	--fw-label: #b9a9c4;
	--fw-veil: #120914;
	color: #f7f2f9;
}

.vcro-fw--detailed {
	--fw-h: 500px;
	--fw-gap: 12px;
}

.vcro-fw__plot {
	display: grid;
	grid-template-columns: var(--fw-y) minmax(0, 1fr);
	gap: 8px;
}

/* Vertical axis: a line with an arrow head, the label reading upwards. */
.vcro-fw__y {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.vcro-fw__y::before {
	content: "";
	position: absolute;
	top: 0;
	right: 4px;
	bottom: 0;
	width: 1px;
	background: var(--fw-axis);
}

.vcro-fw__y::after {
	content: "";
	position: absolute;
	top: 0;
	right: 1px;
	width: 7px;
	height: 7px;
	border-top: 1px solid var(--fw-label);
	border-left: 1px solid var(--fw-label);
	transform: rotate(45deg);
	transform-origin: 50% 50%;
}

.vcro-fw__axis-label {
	color: var(--fw-label);
	font-family: var(--wu-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.vcro-fw__y .vcro-fw__axis-label {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.vcro-fw__stages {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--fw-gap);
	align-items: end;
	margin: 0;
	padding: 0 0 12px;
	list-style: none;
}

/* Horizontal axis under the qualities, with an arrow head. */
.vcro-fw__stages::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	background: var(--fw-axis);
}

.vcro-fw__stages::before {
	content: "";
	position: absolute;
	right: 1px;
	bottom: -3px;
	width: 7px;
	height: 7px;
	border-top: 1px solid var(--fw-label);
	border-right: 1px solid var(--fw-label);
	transform: rotate(45deg);
}

.vcro-fw__stage {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 12px;
	min-width: 0;
	transition: filter 0.5s var(--wu-ease);
}

/* Each block's top slopes from its left height to its right height, so the
   four tops read as one rising ramp (his diagram's geometry). */
.vcro-fw__block {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 10px;
	height: calc(var(--fw-h) * var(--r));
	padding: 14px;
	overflow: hidden;
	clip-path: polygon(0 calc((1 - var(--l) / var(--r)) * 100%), 100% 0, 100% 100%, 0 100%);
	will-change: transform;
}

.vcro-fw__stage--1 .vcro-fw__block { background: var(--fw-s1); color: #fff; }
.vcro-fw__stage--2 .vcro-fw__block { background: var(--fw-s2); color: #fff; }
.vcro-fw__stage--3 .vcro-fw__block { background: var(--fw-s3); color: var(--fw-ink); }
.vcro-fw__stage--4 .vcro-fw__block { background: var(--fw-s4); color: var(--fw-ink); }

/* The veil that dims a stage that is not lit (a pseudo-element, so the
   runtime's opacity tweens on the block never fight it). */
.vcro-fw__block::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--fw-veil);
	opacity: 0;
	transition: opacity 0.5s var(--wu-ease);
	pointer-events: none;
}

.vcro-fw__num {
	position: relative;
	font-family: var(--wu-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	opacity: 0.85;
}

.vcro-fw__items {
	position: relative;
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
}

.vcro-fw__quality {
	color: var(--fw-label);
	font-family: var(--wu-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-align: center;
	text-transform: uppercase;
	transition: color 0.4s, opacity 0.4s;
}

.vcro-fw__x {
	padding-left: calc(var(--fw-y) + 8px);
	text-align: center;
}

.vcro-fw__names {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--fw-gap);
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	color: var(--wu-text);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	transition: color 0.4s;
}

.vcro-fw__names li {
	text-wrap: balance;
	transition: opacity 0.4s;
}

.vcro-fw__x > .vcro-fw__axis-label {
	display: block;
	margin-top: 14px;
}

/* Lighting: one stage lit, the others veiled. "all" and "none" veil nothing. */
.vcro-fw[data-stage="1"] .vcro-fw__stage:not(.vcro-fw__stage--1) .vcro-fw__block::after,
.vcro-fw[data-stage="2"] .vcro-fw__stage:not(.vcro-fw__stage--2) .vcro-fw__block::after,
.vcro-fw[data-stage="3"] .vcro-fw__stage:not(.vcro-fw__stage--3) .vcro-fw__block::after,
.vcro-fw[data-stage="4"] .vcro-fw__stage:not(.vcro-fw__stage--4) .vcro-fw__block::after {
	opacity: 0.66;
}

.vcro-fw[data-stage="1"] .vcro-fw__stage--1,
.vcro-fw[data-stage="2"] .vcro-fw__stage--2,
.vcro-fw[data-stage="3"] .vcro-fw__stage--3,
.vcro-fw[data-stage="4"] .vcro-fw__stage--4 {
	filter: var(--fw-lit);
}

.vcro-fw[data-stage="1"] .vcro-fw__stage--1 .vcro-fw__quality,
.vcro-fw[data-stage="2"] .vcro-fw__stage--2 .vcro-fw__quality,
.vcro-fw[data-stage="3"] .vcro-fw__stage--3 .vcro-fw__quality,
.vcro-fw[data-stage="4"] .vcro-fw__stage--4 .vcro-fw__quality {
	color: var(--wu-accent);
}

.vcro-fw[data-stage="1"] .vcro-fw__names li:not([data-n="1"]),
.vcro-fw[data-stage="2"] .vcro-fw__names li:not([data-n="2"]),
.vcro-fw[data-stage="3"] .vcro-fw__names li:not([data-n="3"]),
.vcro-fw[data-stage="4"] .vcro-fw__names li:not([data-n="4"]) {
	opacity: 0.45;
}

/* Phone-only parts, hidden from 768px up (tablet and desktop unchanged). */
.vcro-fw__sname,
.vcro-fw__cards {
	display: none;
}

/*
 * Phones (Steve's rule, 2026-10-12): the staircase stays a staircase. Four
 * bars of equal width side by side, heights stepping 40/60/80/100% of
 * 160px with the slanted tops kept (each top rises 8% across its bar), no
 * text in the bars but the stage number at the base. Under the bars the
 * stage name (two lines at most), then the team qualities as a mono row,
 * the axis labels small. The items move to uniform cards under it.
 */
@media (max-width: 767.98px) {
	.vcro-fw {
		--fw-mh: 160px;
		--fw-gap: 6px;
	}

	.vcro-fw__stage--1 { --ml: 0.32; --mr: 0.4; }
	.vcro-fw__stage--2 { --ml: 0.52; --mr: 0.6; }
	.vcro-fw__stage--3 { --ml: 0.72; --mr: 0.8; }
	.vcro-fw__stage--4 { --ml: 0.92; --mr: 1; }

	.vcro-fw__plot {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	/* The vertical axis becomes a small caption with an up arrow. */
	.vcro-fw__y {
		height: 14px;
		padding-left: 14px;
	}

	.vcro-fw__y::before {
		top: 1px;
		right: auto;
		bottom: 0;
		left: 4px;
	}

	.vcro-fw__y::after {
		top: 1px;
		right: auto;
		left: 1px;
	}

	.vcro-fw__y .vcro-fw__axis-label {
		font-size: 9.5px;
		writing-mode: horizontal-tb;
		transform: none;
	}

	.vcro-fw__stages {
		align-items: start;
		gap: var(--fw-gap);
		padding-bottom: 0;
	}

	/* The base line runs under the bars, the arrow at its right end. */
	.vcro-fw__stages::after {
		top: var(--fw-mh);
		bottom: auto;
	}

	/* No arrow head on phones: at the edge it read as a stray mark over the
	   last bar's corner; the axis label says the direction. */
	.vcro-fw__stages::before {
		display: none;
	}

	.vcro-fw__stage {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: var(--fw-mh) auto auto;
		gap: 0;
	}

	.vcro-fw__block {
		align-self: end;
		justify-content: flex-end;
		width: 100%;
		height: calc(var(--fw-mh) * var(--mr));
		padding: 8px;
		clip-path: polygon(0 calc((1 - var(--ml) / var(--mr)) * 100%), 100% 0, 100% 100%, 0 100%);
	}

	.vcro-fw__items {
		display: none;
	}

	.vcro-fw__num {
		font-size: 10px;
	}

	.vcro-fw__sname {
		display: block;
		margin-top: 10px;
		color: var(--wu-text);
		font-size: 10.5px;
		font-weight: 500;
		line-height: 1.25;
		letter-spacing: -0.01em;
		text-align: center;
		/* Always two lines tall, so the qualities line up as one row. */
		min-height: 2.5em;
		transition: opacity 0.4s;
	}

	.vcro-fw__quality {
		margin-top: 6px;
		font-size: 8.5px;
		letter-spacing: 0.02em;
		overflow-wrap: anywhere;
	}

	.vcro-fw__names {
		display: none;
	}

	.vcro-fw__x {
		padding-left: 0;
	}

	.vcro-fw__x > .vcro-fw__axis-label {
		margin-top: 12px;
		font-size: 9.5px;
	}

	.vcro-fw[data-stage="1"] .vcro-fw__stage:not(.vcro-fw__stage--1) .vcro-fw__sname,
	.vcro-fw[data-stage="2"] .vcro-fw__stage:not(.vcro-fw__stage--2) .vcro-fw__sname,
	.vcro-fw[data-stage="3"] .vcro-fw__stage:not(.vcro-fw__stage--3) .vcro-fw__sname,
	.vcro-fw[data-stage="4"] .vcro-fw__stage:not(.vcro-fw__stage--4) .vcro-fw__sname {
		opacity: 0.45;
	}

	/* Stage cards: same width, padding and minimum height, hairlines
	   between, in stage order. */
	.vcro-fw__cards {
		display: grid;
		/* Every card as tall as the tallest, so all four are one size. */
		grid-auto-rows: 1fr;
		margin: 24px 0 0;
		padding: 0;
		border-top: 1px solid var(--wu-line);
		list-style: none;
	}

	.vcro-fw__card {
		box-sizing: border-box;
		min-height: 116px;
		padding: 16px 14px;
		border-bottom: 1px solid var(--wu-line);
		transition: background-color 0.4s, box-shadow 0.4s;
	}

	.vcro-fw__card-head {
		display: flex;
		align-items: baseline;
		gap: 10px;
		margin: 0;
	}

	.vcro-fw__card-num {
		color: var(--wu-accent);
		font-family: var(--wu-mono);
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 0.1em;
	}

	.vcro-fw__card-name {
		color: var(--wu-text);
		font-family: var(--wu-display);
		font-size: 17px;
		font-weight: 700;
		letter-spacing: -0.01em;
	}

	.vcro-fw__card-items {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin: 12px 0 0;
		padding: 0;
		list-style: none;
	}

	.vcro-fw__card-items li {
		padding: 4px 9px;
		border-radius: 6px;
		background: var(--wu-surface);
		box-shadow: inset 0 0 0 1px var(--wu-line);
		color: var(--wu-text);
		font-size: 13px;
		font-weight: 500;
		line-height: 1.3;
	}

	/* The lit stage lights its card as well as its bar. */
	.vcro-fw[data-stage="1"] .vcro-fw__card--1,
	.vcro-fw[data-stage="2"] .vcro-fw__card--2,
	.vcro-fw[data-stage="3"] .vcro-fw__card--3,
	.vcro-fw[data-stage="4"] .vcro-fw__card--4 {
		background: color-mix(in srgb, var(--wu-accent) 9%, transparent);
		box-shadow: inset 3px 0 0 var(--wu-accent);
	}

	/* "lit": a sequence step shows only its own stage's card. */
	.vcro-fw__cards--lit .vcro-fw__card {
		display: none;
	}

	.vcro-fw[data-stage="1"] .vcro-fw__cards--lit .vcro-fw__card--1,
	.vcro-fw[data-stage="2"] .vcro-fw__cards--lit .vcro-fw__card--2,
	.vcro-fw[data-stage="3"] .vcro-fw__cards--lit .vcro-fw__card--3,
	.vcro-fw[data-stage="4"] .vcro-fw__cards--lit .vcro-fw__card--4 {
		display: block;
	}

	.vcro-fw__cards--lit {
		border-top: 0;
	}

	.vcro-fw__cards--lit .vcro-fw__card {
		border-bottom: 0;
		border-radius: 10px;
	}
}

/* A sequence step's picture: the compact diagram on a quiet card. */
.vcro-fw-card {
	padding: 28px 28px 22px;
	border: 1px solid var(--wu-line);
	border-radius: var(--wu-card-radius);
	background: radial-gradient(120% 90% at 100% 0%, rgba(239, 83, 165, 0.1), transparent 60%), var(--wu-surface);
}

.wu-seq .vcro-fw {
	--fw-h: clamp(140px, calc(100svh - 600px), 250px);
}

@media (max-width: 767.98px) {
	/* Narrow card and panel padding on phones, so the four bars in a
	   sequence step stay wide enough for two-line stage names. */
	.vcro-fw-card {
		padding: 16px 10px 12px;
	}

	body .wu-seq__panel {
		padding: 18px 14px;
	}

	.wu-seq .vcro-fw {
		--fw-gap: 5px;
	}

	.wu-seq .vcro-fw__sname {
		font-size: 10px;
	}

	.wu-seq .vcro-fw__quality {
		font-size: 8px;
		letter-spacing: 0;
	}

}

/* ---------- Glow hero with the framework as its object ---------- */

/* Shorter than a full screen, so the proof strip shows at the fold. */
@media (min-width: 1025px) {
	body .wu-ghero {
		/* min-height is content-box here: plus the 96px padding. */
		min-height: min(calc(100svh - var(--wu-header-h) - 96px), 620px);
		padding-block: 56px 40px;
	}
}

.wu-ghero__object .vcro-fw {
	--fw-h: 340px;
}

@media (min-width: 1025px) {
	.wu-ghero__object {
		padding: 32px 0 0 24px;
	}
}


body .wu-ghero__label {
	gap: 14px;
}

/* ---------- Proof strip right under the hero ---------- */

body .wu-ghero + .wu-stats {
	padding-top: 8px;
}

@media (min-width: 1025px) {
	body .wu-ghero + .wu-stats {
		padding-top: 16px;
	}
}

/* ---------- Sequence: four steps ---------- */

body .wu-seq__steps li {
	font-size: 11px;
}

/* Step numbers in the pink run (the full gradient starts at 1.6:1 here). */
body .wu-seq .wu-seq__num {
	background-image: var(--vcro-wash);
}

/* ---------- Bento: outcome tiles ---------- */

body .wu-tile--l .wu-tile__list li {
	font-size: 16px;
}

/* ---------- Home: the whole framework, large ---------- */

.vcro-fw-section .vcro-framework {
	max-width: 1080px;
	margin-inline: auto;
}

.vcro-fw-section .vcro-fw-section__more {
	margin: 48px 0 0;
	text-align: center;
}

/* ---------- What we do: the stage list beside the sticky diagram ---------- */

.vcro-stages__grid {
	display: grid;
	gap: 48px;
}

@media (min-width: 1025px) {
	.vcro-stages__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: 72px;
		align-items: start;
	}

	.vcro-stages__visual {
		position: sticky;
		top: calc(var(--wu-header-h) + 48px);
	}

	.vcro-stages__visual .vcro-fw--detailed {
		--fw-h: min(470px, calc(100svh - 330px));
	}
}

.vcro-stages__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vcro-stage {
	padding: 36px 0;
	border-top: 1px solid var(--wu-line);
}

.vcro-stage:last-child {
	border-bottom: 1px solid var(--wu-line);
}

@media (min-width: 1025px) {
	.vcro-stage {
		display: flex;
		align-items: center;
		min-height: 52svh;
		padding: 48px 0;
	}
}

.vcro-stage__inner > * {
	margin-block: 0;
}

.vcro-stage__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--wu-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.vcro-stage__num {
	color: var(--wu-accent);
}

.vcro-stage__quality {
	padding: 3px 10px;
	border: 1px solid var(--wu-line-strong);
	border-radius: 999px;
	color: var(--wu-muted);
}

.vcro-stage__title {
	margin-top: 16px !important;
	font-family: var(--wu-display);
	font-size: 30px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.vcro-stage__body {
	max-width: 46ch;
	margin-top: 12px !important;
	color: var(--wu-muted);
}

.vcro-stage__items {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 20px 0 0 !important;
	padding: 0;
	list-style: none;
}

.vcro-stage__items li {
	padding: 6px 12px;
	border-radius: 8px;
	background: var(--wu-surface);
	box-shadow: inset 0 0 0 1px var(--wu-line);
	color: var(--wu-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
}

/* ---------- Closing section on a light page: the pale surface ---------- */

.scheme-light .vcro-contact {
	background: var(--wp--preset--color--surface);
}

.scheme-light .vcro-contact__glows {
	display: none;
}

/* ---------- Enquiry form (Gravity Forms, its own CSS off) ---------- */

.vcro-contact .gform_wrapper {
	margin: 0;
}

.vcro-contact .gform_wrapper form {
	margin: 0;
}

.vcro-contact .gform_fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vcro-contact .gfield {
	grid-column: 1 / -1;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

@media (min-width: 768px) {
	.vcro-contact .gfield--width-half {
		grid-column: span 1;
	}
}

.vcro-contact .gfield_label,
.vcro-contact .gform-field-label {
	display: block;
	margin-bottom: 8px;
	color: var(--wu-text);
	font-size: 14px;
	font-weight: 500;
}

.vcro-contact .gfield_required {
	margin-left: 4px;
	color: var(--wu-accent);
	font-size: 12px;
	font-weight: 400;
}

.vcro-contact .gfield input[type="text"],
.vcro-contact .gfield input[type="email"],
.vcro-contact .gfield input[type="tel"],
.vcro-contact .gfield textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--wu-line-strong);
	border-radius: 10px;
	background: var(--wu-ground);
	color: var(--wu-text);
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.vcro-contact .gfield textarea {
	height: 150px;
	min-height: 110px;
	resize: vertical;
}

.vcro-contact .gfield input:focus,
.vcro-contact .gfield textarea:focus {
	border-color: var(--wu-accent);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wu-accent) 25%, transparent);
}

.vcro-contact .gfield_description,
.vcro-contact .gform_required_legend {
	margin: 0 0 16px;
	color: var(--wu-muted);
	font-size: 13px;
}

.vcro-contact .gfield_error input,
.vcro-contact .gfield_error textarea {
	border-color: #ff7a9c;
}

.vcro-contact .validation_message,
.vcro-contact .gform_validation_errors {
	margin-top: 8px;
	color: #ff9bb5;
	font-size: 14px;
}

:root:has(body.scheme-light) .vcro-contact .validation_message,
:root:has(body.scheme-light) .vcro-contact .gform_validation_errors {
	color: #b0144a;
}

.vcro-contact .gform_validation_errors {
	margin: 0 0 20px;
	padding: 12px 14px;
	border: 1px solid currentColor;
	border-radius: 10px;
}

.vcro-contact .gform_validation_errors h2 {
	margin: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
}

.vcro-contact .gform_footer {
	margin: 24px 0 0;
	padding: 0;
}

.vcro-contact .gform_footer .gform_button,
.vcro-contact .gform_footer input[type="submit"] {
	position: relative;
	padding: 14px 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: linear-gradient(var(--wu-button-face), var(--wu-button-face)) padding-box, var(--wu-gradient) border-box;
	color: var(--wu-button-text);
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: transform 0.25s var(--wu-ease), box-shadow 0.25s var(--wu-ease), background 0.3s;
}

.vcro-contact .gform_footer .gform_button:hover,
.vcro-contact .gform_footer input[type="submit"]:hover {
	transform: translateY(-1px);
	background: var(--wu-button-hover-face) padding-box, var(--wu-gradient) border-box;
	box-shadow: 0 10px 40px -10px rgba(239, 83, 165, 0.55);
	color: #fff;
}

.vcro-contact .gform_confirmation_message {
	padding: 20px 0;
	color: var(--wu-text);
	font-size: 18px;
}

.vcro-contact .gform_ajax_spinner,
.vcro-contact .gform-loader {
	margin-left: 12px;
	vertical-align: middle;
}

.vcro-contact .gform_hidden,
.vcro-contact .gfield--type-honeypot,
.vcro-contact .gform_validation_container {
	display: none !important;
}

.vcro-contact .screen-reader-text,
.vcro-contact .hidden_label .gfield_label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.vcro-fw__stage,
	.vcro-fw__block::after,
	.vcro-fw__quality,
	.vcro-fw__names li,
	.vcro-fw__sname,
	.vcro-fw__card,
	.vcro-header .wp-block-button__link,
	.vcro-header .wp-block-button__link:hover,
	.vcro-contact .gform_footer .gform_button {
		transition: none;
		transform: none;
	}
}

/* Short laptop screens (1280 x 720 measured 1px over): tighter panels so
   the pinned sequence and its step labels fit under the header. */
@media (min-width: 768px) and (max-height: 760px) {
	body .wu-seq__panel {
		padding: 24px;
	}

	.vcro-fw-card {
		padding: 18px 18px 14px;
	}
}