/**
 * Xtheme - the stylesheet.
 *
 * The approved design is the "Chiara e autorevole" mockup. This file carries
 * its FINAL values: the mockup's stylesheet redefined several components in a
 * second layer (orbit, cards, grid from four columns to three, index from a
 * disc to a numeral), and only the last definition of each survives here.
 *
 * Two deliberate departures, both measured:
 * - every secondary grey is one token, #45545d, which reaches 7:1 on all four
 *   light backgrounds; the mockup's greys were 4.57 to 6.06 (AA, not AAA);
 * - brand colours arrive from the plugin as custom properties
 *   (--xplugin-brand, --xplugin-ink, --xplugin-logo-width) instead of one rule
 *   per competence, so a seventh competence needs no CSS.
 *
 * Classes are prefixed (xt- for the theme, xplugin- for the plugin's markup) so
 * nothing here restyles the editor, another plugin or an internal page.
 */

/* ==========================================================================
 * Base, scoped
 * ======================================================================= */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 110px;
}

/* The mockup's sizes assume border-box everywhere; WordPress does not set it.
   Without this a card with min-height 330px and 51px of padding renders at 385,
   and every size in the mockup is off by its own padding. Scoped to the theme's
   and the plugin's components, and at zero specificity, so nothing else on the
   page - a form plugin, the editor chrome - is re-boxed behind its back. */
:where(.xt-utility, .xt-header, .xt-home, .xt-footer, .xt-page-head, .xt-cards, .xplugin-competences, .xplugin-orbit-panel, .xplugin-embed),
:where(.xt-utility, .xt-header, .xt-home, .xt-footer, .xt-page-head, .xt-cards, .xplugin-competences, .xplugin-orbit-panel, .xplugin-embed) *,
:where(.xt-utility, .xt-header, .xt-home, .xt-footer, .xt-page-head, .xt-cards, .xplugin-competences, .xplugin-orbit-panel, .xplugin-embed) *::before,
:where(.xt-utility, .xt-header, .xt-home, .xt-footer, .xt-page-head, .xt-cards, .xplugin-competences, .xplugin-orbit-panel, .xplugin-embed) *::after {
	box-sizing: border-box;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--xt-focus, var(--wp--preset--color--navy));
	outline-offset: 6px;
}

.xt-hero :focus-visible,
.xt-contact :focus-visible,
.xplugin-orbit-panel :focus-visible {
	outline-color: #fff;
}

.xt-container {
	width: min(var(--wp--custom--container), calc(100% - 64px));
	margin-inline: auto;
}

.xt-eyebrow {
	display: block;
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.xt-arrow {
	font-family: Arial, sans-serif;
	line-height: 1;
	font-size: 1.2em;
}

/* Arrows on editable buttons and links are drawn here, not typed in the text:
   a decorative span inside editor-managed content is one careless edit away
   from being read aloud or deleted. The second declaration gives the glyph an
   empty alternative text, so screen readers skip it; browsers without that
   syntax keep the first one. */
.xt-arrow-out .wp-block-button__link::after,
.xt-arrow-out a::after {
	content: "\2197";
	content: "\2197" / "";
	font-family: Arial, sans-serif;
	line-height: 1;
	font-size: 1.2em;
}

.xt-arrow-down .wp-block-button__link::after {
	content: "\2193";
	content: "\2193" / "";
	font-family: Arial, sans-serif;
	line-height: 1;
	font-size: 1.2em;
}

body {
	background-color: var(--xt-canvas, var(--wp--preset--color--white));
}

/* Buttons: theme.json's colours, through two variables the dark theme turns
   light; the variants below override them. */
:root .wp-block-button__link,
:root .wp-element-button {
	background-color: var(--xt-button-bg, var(--wp--preset--color--navy));
	color: var(--xt-button-ink, var(--wp--preset--color--white));
}

/* theme.json's :hover and :focus come out as :root :where(...), weaker than
   the rule above: without this a plain button never changed under the pointer. */
:root :is(.wp-block-button__link, .wp-element-button):is(:hover, :focus-visible) {
	background-color: var(--xt-button-hover, #21465e);
}

/* Buttons: the core button block, in the mockup's two variants. */
.xt-button .wp-block-button__link,
.xt-button-light .wp-block-button__link {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 18px;
	min-height: 50px;
	padding: 12px 23px;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.4;
	transition: background-color 0.18s, transform 0.18s;
}

.xt-button .wp-block-button__link:hover,
.xt-button-light .wp-block-button__link:hover {
	transform: translateY(-2px);
}

.xt-button-light .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--navy);
}

.xt-button-light .wp-block-button__link:hover {
	background: #edf2f5;
	color: var(--wp--preset--color--navy);
}

.xt-quiet-link a,
a.xt-quiet-link {
	display: inline-flex;
	gap: 12px;
	align-items: center;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 7px;
	text-decoration-color: #8298a7;
}

.xt-quiet-link a:hover,
a.xt-quiet-link:hover {
	text-decoration-color: currentColor;
}

/* The wordmark is a white PNG: on light surfaces the site has always shown it
   grey through this filter, and the brief keeps it. */
.xt-logo-grey img,
.xt-header .wp-block-site-logo img {
	filter: var(--xt-logo-filter, brightness(0) invert(0.3333));
}

/* ==========================================================================
 * Utility bar and header
 * ======================================================================= */
.xt-utility {
	background: var(--wp--custom--color--band);
	border-bottom: 1px solid var(--xt-rule, #e5e8eb);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.xt-utility .xt-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 20px;
	padding-block: 8px;
}

.xt-utility p {
	margin: 0;
}

/* The phrase gives up 40px of its basis to the light/dark switch, so the bar
   stays on one line down to the same width as before the switch. */
.xt-utility-label {
	display: block;
	flex: 1 1 440px;
	min-width: 0;
}

.xt-utility-links {
	display: flex;
	align-items: center;
	gap: 24px;
}

.xt-utility-links a {
	color: inherit;
	text-decoration: none;
}

.xt-utility-links a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.xt-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--xt-surface, #fff);
	border-bottom: 1px solid var(--xt-rule, #e7ecef);
}

.xt-header-inner {
	min-height: 84px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	position: relative;
}

.xt-header .wp-block-site-logo img {
	width: 148px;
	height: auto;
	aspect-ratio: 193 / 66;
}

.xt-header .wp-block-navigation {
	gap: 28px;
}

.xt-header .wp-block-navigation-item__content {
	padding-block: 8px;
	border-bottom: 2px solid transparent;
}

.xt-header .wp-block-navigation-item__content:hover {
	border-color: var(--wp--preset--color--ink);
}

.xt-header-actions {
	display: flex;
	align-items: center;
	gap: 28px;
}

.xt-header .wp-block-button__link {
	white-space: nowrap;
}

/* The phone menu: the core overlay paints its own white and black; here it
   takes the page's surface and text, so it follows the dark theme too. The
   selector outweighs the core's (0,5,0) rule by one class: with an equal
   weight the order of the sheets would decide, and a CSS merge reorders them. */
.xt-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background-color: var(--xt-surface, #fff);
	color: var(--wp--preset--color--ink);
}

/* Search: the core block as an icon that opens the field, quiet next to the
   one primary button of the header. */
.xt-header-search .wp-block-search__inside-wrapper {
	gap: 8px;
	padding: 0;
	border: 0;
}

.xt-header-search .wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wp--custom--color--line);
	border-radius: var(--wp--custom--radius);
	background: transparent;
	color: var(--wp--preset--color--ink);
}

.xt-header-search .wp-block-search__button:hover {
	background: var(--xt-hover, #edf2f5);
}

.xt-header-search .wp-block-search__button svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.xt-header-search .wp-block-search__input {
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--wp--custom--color--line);
	border-radius: var(--wp--custom--radius);
	background: var(--xt-surface, #fff);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
}

/* The open field is a long bar under the header, as wide as the container, on
   a band across the whole page; the header keeps its line. Both are placed on
   .xt-header-inner, the nearest positioned box. The band reaches the edges
   through a spread shadow clipped to its own height: 100vw would add the
   scrollbar's width and a horizontal scroll. It closes on focus out and Esc. */
.xt-header-search:not(.wp-block-search__searchfield-hidden)::before {
	content: "";
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 1;
	height: 80px;
	background: var(--xt-surface, #fff);
	box-shadow:
		0 0 0 100vmax var(--xt-surface, #fff),
		0 1px 0 100vmax var(--xt-rule, #e7ecef);
	clip-path: inset(0 -100vmax -1px);
}

.xt-header-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
	position: absolute;
	top: calc(100% + 16px);
	right: 0;
	left: 0;
	z-index: 2;
	width: auto;
	height: 48px;
	font-size: 1rem;
}

/* The core navigation block switches to its overlay only below 600px, a fixed
   breakpoint. The mockup collapses the menu at 880px, where four links and the
   button no longer fit on one line: the same switch, moved up. */
@media (max-width: 880px) {
	.xt-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	/* 44px targets, as the design system says: the core draws a bare 24px icon. */
	.xt-header :is(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close) {
		min-width: 44px;
		min-height: 44px;
		justify-content: center;
		align-items: center;
	}

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

	/* The menu button closes the header on the right, as on every phone:
	   search, and the contact button where it fits, come before it. */
	.xt-header-actions .wp-block-navigation {
		order: 1;
	}
}

/* ==========================================================================
 * Opening
 * ======================================================================= */
.xt-hero {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--navy);
	color: #fff;
}

.xt-hero::before {
	content: "";
	position: absolute;
	width: 750px;
	height: 750px;
	right: -390px;
	top: -230px;
	border: 1px solid #ffffff0d;
	border-radius: 50%;
	pointer-events: none;
}

.xt-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 34px;
	align-items: center;
	padding-block: 58px 64px;
	min-height: 635px;
}

.xt-hero .xt-eyebrow {
	color: var(--wp--custom--color--on-navy-soft);
	max-width: 480px;
}

.xt-hero h1 {
	color: #fff;
	font-size: clamp(2.5rem, 5.8vw, 4.8rem);
	line-height: 1.08;
	margin: 23px 0 27px;
	text-wrap: balance;
}

.xt-hero-lead {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--wp--custom--color--on-navy);
	max-width: 530px;
}

.xt-hero-actions {
	display: flex;
	align-items: center;
	gap: 27px;
	flex-wrap: wrap;
	margin-top: 34px;
}

.xt-hero-actions p {
	margin: 0;
}

.xt-hero .xt-quiet-link a {
	color: #fff;
}

/* ==========================================================================
 * Competences orbit (markup and behaviour from the plugin)
 * ======================================================================= */
@property --xt-orbit-sweep {
	syntax: "<angle>";
	inherits: false;
	initial-value: 360deg;
}

/* The nodes and the mark arrive and settle. No `filter` here, on purpose: an
   animated blur on this scene - on the nodes, on the mark or on the whole
   orbit - crashes WebKit's page process on load (Safari's engine; Chromium and
   Firefox are fine), while opacity and scale alone never did in 16 loads. */
@keyframes xt-orbit-settle {
	from {
		opacity: 0.3;
		scale: 1.08;
	}
}

@keyframes xt-orbit-draw {
	from {
		--xt-orbit-sweep: 0deg;
	}
}

/* The panel is the container, not the orbit: the planetarium below changes
   the orbit's own proportions, and a container cannot size itself from its
   own query. */
.xplugin-orbit-panel {
	container: xorbit / inline-size;
	min-width: 0;
	width: 100%;
	max-width: 580px;
	justify-self: center;
}

.xplugin-orbit {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: 68px 136px 68px 68px;
	align-items: center;
	align-content: center;
	gap: 12px;
	width: 100%;
	aspect-ratio: 1;
}

.xplugin-orbit__rings {
	position: absolute;
	z-index: -1;
	inset: 14% 16%;
	border: 1px solid #ffffff29;
	border-radius: 50%;
	pointer-events: none;
}

.xplugin-orbit__rings::before,
.xplugin-orbit__rings::after {
	content: "";
	position: absolute;
	inset: 28px;
	border: 1px solid #ffffff17;
	border-radius: 50%;
}

.xplugin-orbit__rings::after {
	inset: 57px;
}

/* A node is a chip on the field. The brand is carried by the group's symbol
   in the brand's own colour; the text sits on the field, white at 11.65:1 on
   the chip and the brand name at 7.62:1, AAA for all six (on the brand
   colours themselves three reached only AA). */
.xplugin-orbit__node {
	--xt-symbol: 22px;
	--xt-symbol-x: 11px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	min-width: 0;
	min-height: 68px;
	padding: 11px 12px 11px calc(var(--xt-symbol-x) + var(--xt-symbol) + 10px);
	background: #ffffff0f;
	color: #fff;
	border: 1px solid #ffffff21;
	border-radius: 12px;
	box-shadow: inset 0 1px 0 #ffffff14, 0 12px 20px -10px #020b12b3;
	text-decoration: none;
	transition: translate 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s;
}

/* The lift is `translate`, not `transform`: it adds to the position the orbit
   gives the node instead of replacing it. With `transform`, a hovered node
   left its place and jumped to the centre, under the group's mark. */
.xplugin-orbit__node:hover {
	translate: 0 -3px;
	border-color: #ffffff47;
}

/* The symbol: a tile in the brand colour, used as it is, with the symbol in
   white on it, as on the brands' own square marks. The shape is a mask, drawn
   inside its box with `contain`, so no symbol is ever stretched; a brand with a
   symbol of its own gets it from the plugin as --xplugin-symbol. */
.xplugin-orbit__node::before,
.xplugin-orbit__node::after {
	content: "";
	position: absolute;
	top: 50%;
	transition: scale 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.xplugin-orbit__node::before {
	left: var(--xt-symbol-x);
	width: var(--xt-symbol);
	height: var(--xt-symbol);
	margin-top: calc(var(--xt-symbol) / -2);
	border-radius: calc(var(--xt-symbol) * 0.28);
	background: var(--xplugin-brand, var(--wp--preset--color--xifram));
}

.xplugin-orbit__node::after {
	left: calc(var(--xt-symbol-x) + var(--xt-symbol) * 0.18);
	width: calc(var(--xt-symbol) * 0.64);
	height: calc(var(--xt-symbol) * 0.64);
	margin-top: calc(var(--xt-symbol) * -0.32);
	background: #fff;
	mask: var(--xplugin-symbol, url("../images/symbol-mask.png")) center / contain no-repeat;
}

.xplugin-orbit__node:hover::before,
.xplugin-orbit__node:hover::after {
	scale: 1.15;
}

.xplugin-orbit__node strong {
	display: block;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.xplugin-orbit__node small {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
	color: var(--wp--custom--color--on-navy-soft);
}

/* The hub is the group's own mark, painted here from the theme's files: the
   plugin only reserves the place. Symbol above, wordmark below, both the
   originals, on the symbol's own grey. */
.xplugin-orbit__hub {
	grid-row: 2;
	grid-column: 1 / -1;
	justify-self: center;
	width: 136px;
	height: 136px;
	border-radius: 50%;
	background:
		url("../images/xifram-symbol.png") center 17px / 70px 70px no-repeat,
		url("../images/logo-xifram.png") center 91px / 84px auto no-repeat,
		var(--wp--preset--color--xifram);
	box-shadow: 0 12px 36px #051a2855;
}

/* The planetarium: the orbit seen as a plane tilted away from the reader, the
   nodes on three rings a little above it, the pair on each ring opposite, the
   one passing in front a little larger.

   Everything is drawn here from three numbers the plugin's script writes on
   the orbit: --xplugin-phase (an angle) and --xplugin-pointer-x/-y (-1 to 1).
   Without the script they are unset, and the orbit stands at phase 0, level,
   still and readable - which is exactly where the script starts, so nothing
   jumps when it arrives. --xplugin-orbit-active tells the script that this
   block applies: it moves the orbit only then, and repeats none of these
   conditions.

   A node is projected like the rings are drawn: a point of the plane is
   tilted, turned by the pointer, then seen through a perspective at
   --xt-depth radii. Lengths are fractions of the outer radius, so the scene
   scales with the orbit. tests/orbit-geometry.test.cjs reads these values
   from this file and proves, at every phase and pointer position, that no
   node overlaps another, the mark or the edge. */
@media (min-width: 701px) and (prefers-reduced-motion: no-preference) {
	@container xorbit (min-width: 570px) {
		.xplugin-orbit {
			--xplugin-orbit-active: 1;
			--xt-r: 37.5cqw;
			--xt-lift: 0.06;
			--xt-depth: 8;
			--xt-shift: -0.04;
			--xt-front: 0.85;
			--xt-boost: 0.2;
			--xt-tilt: calc(42deg - var(--xplugin-pointer-y, 0) * 1.5deg);
			--xt-yaw: calc(var(--xplugin-pointer-x, 0) * 2deg);
			display: block;
			aspect-ratio: 4 / 3;
		}

		.xplugin-orbit__rings {
			inset: auto;
			left: 50%;
			top: 50%;
			width: calc(var(--xt-r) * 2);
			height: calc(var(--xt-r) * 2);
			margin: calc(var(--xt-r) * -1) 0 0 calc(var(--xt-r) * -1);
			border-color: #ffffff38;
			transform: translateY(calc(var(--xt-shift) * var(--xt-r))) perspective(calc(var(--xt-depth) * var(--xt-r))) rotateY(var(--xt-yaw)) rotateX(var(--xt-tilt));
			mask: conic-gradient(#000 var(--xt-orbit-sweep), #0000 0);
			animation: xt-orbit-draw 1.3s cubic-bezier(0.16, 1, 0.3, 1) backwards;
		}

		/* The three rings the nodes travel on: the outer one, 0.86 and 0.70. */
		.xplugin-orbit__rings::before {
			inset: 7%;
			border-color: #ffffff2b;
		}

		.xplugin-orbit__rings::after {
			inset: 15%;
			border-color: #ffffff2b;
		}

		.xplugin-orbit__node {
			--xt-symbol: 18px;
			--xt-symbol-x: 9px;
			--xt-a: calc(var(--xt-a0) + var(--xplugin-phase, 0rad));
			--xt-sin: sin(var(--xt-a));
			--xt-px: calc(cos(var(--xt-a)) * var(--xt-ring));
			--xt-py: calc(var(--xt-sin) * var(--xt-ring));
			--xt-y1: calc(var(--xt-py) * cos(var(--xt-tilt)) - var(--xt-lift) * sin(var(--xt-tilt)));
			--xt-z1: calc(var(--xt-py) * sin(var(--xt-tilt)) + var(--xt-lift) * cos(var(--xt-tilt)));
			--xt-x2: calc(var(--xt-px) * cos(var(--xt-yaw)) + var(--xt-z1) * sin(var(--xt-yaw)));
			--xt-z2: calc(var(--xt-z1) * cos(var(--xt-yaw)) - var(--xt-px) * sin(var(--xt-yaw)));
			--xt-k: calc(1 / (1 - var(--xt-z2) / var(--xt-depth)));
			--xt-f: clamp(0, (var(--xt-sin) - var(--xt-front)) / (1 - var(--xt-front)), 1);
			--xt-g: calc(1 + var(--xt-boost) * var(--xt-f) * var(--xt-f) * (3 - 2 * var(--xt-f)));
			position: absolute;
			left: 50%;
			top: 50%;
			min-height: 0;
			height: 44px;
			padding: 0 10px 0 calc(var(--xt-symbol-x) + var(--xt-symbol) + 7px);
			gap: 2px;
			white-space: nowrap;
			transform-origin: 0 0;
			transform: translate(calc(var(--xt-x2) * var(--xt-k) * var(--xt-r)), calc((var(--xt-y1) * var(--xt-k) + var(--xt-shift)) * var(--xt-r))) scale(calc(var(--xt-k) * var(--xt-g))) translate(-50%, -50%);
			animation: xt-orbit-settle 1.1s cubic-bezier(0.16, 1, 0.3, 1) calc(0.15s + var(--xt-i) * 70ms) backwards;
		}

		.xplugin-orbit__node strong {
			font-size: 0.8125rem;
			letter-spacing: -0.01em;
		}

		.xplugin-orbit__node small {
			font-size: 0.6875rem;
		}

		/* Position on the ring at phase 0, and the ring: pairs opposite. */
		.xplugin-orbit__node:nth-of-type(1) { --xt-i: 0; --xt-a0: -90deg; --xt-ring: 0.86; }
		.xplugin-orbit__node:nth-of-type(2) { --xt-i: 1; --xt-a0: -30deg; --xt-ring: 0.7; }
		.xplugin-orbit__node:nth-of-type(3) { --xt-i: 2; --xt-a0: 30deg; --xt-ring: 1; }
		.xplugin-orbit__node:nth-of-type(4) { --xt-i: 3; --xt-a0: 90deg; --xt-ring: 0.86; }
		.xplugin-orbit__node:nth-of-type(5) { --xt-i: 4; --xt-a0: 150deg; --xt-ring: 0.7; }
		.xplugin-orbit__node:nth-of-type(6) { --xt-i: 5; --xt-a0: 210deg; --xt-ring: 1; }

		/* The mark stands at the centre, a little above the plane like the nodes.
		   grid-area back to auto: an absolutely positioned grid child that keeps a
		   grid placement is positioned against that grid area, not the orbit. */
		.xplugin-orbit__hub {
			--xt-z1: calc(var(--xt-lift) * cos(var(--xt-tilt)));
			--xt-k: calc(1 / (1 - var(--xt-z1) * cos(var(--xt-yaw)) / var(--xt-depth)));
			grid-area: auto;
			position: absolute;
			left: 50%;
			top: 50%;
			width: 96px;
			height: 96px;
			margin: -48px 0 0 -48px;
			background-position: center 10px, center 61px, 0 0;
			background-size: 46px 46px, 60px auto, auto;
			box-shadow: inset 0 1px 0 #ffffff33, 0 14px 26px -12px #020b12cc;
			transform: translate(calc(var(--xt-z1) * sin(var(--xt-yaw)) * var(--xt-k) * var(--xt-r)), calc((var(--xt-shift) - var(--xt-lift) * sin(var(--xt-tilt)) * var(--xt-k)) * var(--xt-r))) scale(var(--xt-k));
			animation: xt-orbit-settle 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
		}
	}
}

.xplugin-orbit__controls {
	min-height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 6px;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--custom--color--on-navy-soft);
}

.xplugin-orbit__hint {
	display: flex;
	align-items: center;
	gap: 8px;
}

.xplugin-orbit__hint::before {
	content: "\2195";
	font: 1rem Arial, sans-serif;
}

.xplugin-orbit__toggle {
	min-height: 44px;
	padding: 7px 11px;
	color: #e3ebf0;
	background: transparent;
	border: 1px solid #ffffff33;
	border-radius: 5px;
	font: 600 0.75rem Raleway, Arial, sans-serif;
	cursor: pointer;
}

.xplugin-orbit__toggle:hover {
	background: #ffffff0c;
}

.xplugin-orbit__toggle:disabled {
	cursor: default;
	opacity: 0.7;
}

.xplugin-orbit__controls [hidden] {
	display: none;
}

/* ==========================================================================
 * Competences cards (markup from the plugin)
 * ======================================================================= */
.xt-projects {
	background: var(--wp--preset--color--paper);
	padding-block: 84px 86px;
}

.xt-section-heading {
	display: grid;
	grid-template-columns: 1.12fr 1fr;
	align-items: end;
	gap: 90px;
	margin-bottom: 38px;
}

.xt-section-heading .xt-eyebrow {
	margin-bottom: 15px;
}

.xt-section-heading h2 {
	margin: 0;
	max-width: 600px;
}

.xt-section-heading > p {
	margin: 0;
	font-size: 1rem;
	color: var(--wp--preset--color--muted);
	line-height: 1.8;
	max-width: 455px;
	padding-bottom: 3px;
}

.xplugin-competences {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.xplugin-competence {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 330px;
	padding: 26px 27px 25px;
	background: var(--xt-surface, #fff);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	border: 1px solid var(--wp--custom--color--line);
	border-top: 3px solid var(--xplugin-brand, var(--wp--preset--color--navy));
	border-radius: 10px;
	transition: transform 0.18s, box-shadow 0.18s;
}

.xplugin-competence:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 32px #1733480c;
}

.xplugin-competence:target {
	outline: 2px solid var(--xplugin-brand, var(--wp--preset--color--navy));
	outline-offset: 4px;
}

.xplugin-competence__topline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.xplugin-competence__index {
	order: 2;
	flex-shrink: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
}

.xplugin-competence__area {
	font-size: 0.75rem;
	letter-spacing: 0.095em;
	text-transform: uppercase;
	font-weight: 700;
}

.xplugin-competence__brand {
	display: flex;
	align-items: center;
	align-self: var(--xt-logo-plate-align, auto);
	min-height: 64px;
	padding: var(--xt-logo-plate-pad, 0);
	background: var(--xt-logo-plate, transparent);
	border-radius: 6px;
	margin: 0 0 18px;
	line-height: 1;
	font-size: 1.375rem;
}

.xplugin-competence__brand img {
	width: var(--xplugin-logo-width, auto);
	height: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
}

.xplugin-competence__description {
	display: block;
	padding-bottom: 24px;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--wp--preset--color--muted);
}

.xplugin-competence__link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 17px;
	border-top: 1px solid var(--xt-rule, #e8edf0);
	font-size: 0.875rem;
	font-weight: 700;
}

.xplugin-competence__arrow {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 31px;
	height: 31px;
	border: 1px solid var(--wp--custom--color--line);
	border-radius: 50%;
	font-family: Arial, sans-serif;
	line-height: 1;
	transition: background-color 0.18s, border-color 0.18s, color 0.18s;
}

.xplugin-competence:hover .xplugin-competence__arrow {
	background: var(--xplugin-brand);
	border-color: var(--xplugin-brand);
	color: var(--xplugin-ink);
}

.xplugin-competences__note {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 25px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
}

.xplugin-competences__arrow {
	font: 1.1rem Arial, sans-serif;
}

/* ==========================================================================
 * Work with us
 * ======================================================================= */
.xt-careers {
	padding-block: 72px 76px;
	background: var(--xt-surface, #fff);
	scroll-margin-top: 20px;
}

.xt-careers-panel {
	position: relative;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 70px;
	align-items: center;
	padding: 48px 49px;
	border: 1px solid var(--wp--custom--color--line);
	border-radius: 10px;
	background: var(--wp--custom--color--panel);
	overflow: hidden;
}

/* The six competence colours, in order, as the panel's top edge. */
.xt-careers-panel::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 5px;
	background: linear-gradient(
		to right,
		var(--wp--preset--color--privacy) 0 16.666%,
		var(--wp--preset--color--modello) 16.666% 33.333%,
		var(--wp--preset--color--copyright) 33.333% 50%,
		var(--wp--preset--color--compliance) 50% 66.666%,
		var(--wp--preset--color--esg) 66.666% 83.333%,
		var(--wp--preset--color--academix) 83.333% 100%
	);
}

.xt-careers .xt-eyebrow {
	margin-bottom: 17px;
}

.xt-careers h2 {
	margin: 0;
	font-size: clamp(2rem, 3.3vw, 2.875rem);
	max-width: 490px;
}

.xt-careers-intro {
	margin: 21px 0 0;
	font-size: 1rem;
	color: var(--wp--preset--color--muted);
	line-height: 1.8;
	max-width: 470px;
}

.xt-careers-action {
	padding-left: 32px;
	border-left: 1px solid var(--xt-rule, #ccd9e2);
}

.xt-careers-action h3 {
	margin: 0 0 14px;
	font-size: 1.25rem;
	font-weight: 600;
}

.xt-careers-action p {
	margin: 0 0 25px;
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	line-height: 1.8;
	max-width: 320px;
}

/* ==========================================================================
 * Commitment, transparency, certifications
 * ======================================================================= */
.xt-responsibility {
	padding-block: 0 74px;
}

.xt-responsibility-intro {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 30px;
	margin-bottom: 29px;
}

.xt-responsibility h2 {
	margin: 0;
	font-size: 1.875rem;
}

.xt-responsibility-intro p {
	margin: 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

.xt-responsibility-links {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.xt-responsibility-link {
	position: relative;
	padding-top: 22px;
	border-top: 1px solid var(--xt-rule, #bdcbd4);
}

.xt-responsibility-link h3 {
	display: flex;
	justify-content: space-between;
	gap: 15px;
	margin: 0 0 7px;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.xt-responsibility-link h3::after {
	content: "\2197";
	content: "\2197" / "";
	font-family: Arial, sans-serif;
	line-height: 1;
	font-size: 1.2em;
}

.xt-responsibility-link h3 a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

/* The whole box is clickable; the accessible name stays the heading text. */
.xt-responsibility-link h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.xt-responsibility-link:hover h3 a,
.xt-responsibility-link h3 a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 5px;
}

.xt-responsibility-link p {
	margin: 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

.xt-certification-band {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.55fr);
	align-items: center;
	gap: 40px;
	margin-top: 43px;
	padding-top: 35px;
	border-top: 1px solid var(--wp--custom--color--line);
}

.xt-certification-intro .xt-eyebrow {
	margin-bottom: 13px;
}

.xt-certification-intro h3 {
	margin: 0;
	font-size: 1.375rem;
	line-height: 1.35;
	letter-spacing: -0.025em;
	max-width: 330px;
}

.xt-certification-intro .xt-quiet-link {
	margin: 19px 0 0;
}

.xt-certification-intro .xt-quiet-link a {
	font-size: 0.8125rem;
}

.xt-certification-marks {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 26px 42px;
}

.xt-certification-mark {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
	border-radius: 3px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.xt-certification-image {
	display: flex;
	align-items: center;
	height: 88px;
	max-width: 100%;
}

.xt-certification-image img {
	height: auto;
	object-fit: contain;
}

.xt-certification-9001 {
	width: 246px;
}

.xt-certification-27001 {
	width: 84px;
}

.xt-certification-caption {
	display: block;
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

.xt-certification-caption strong {
	display: block;
	margin-bottom: 2px;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.xt-certification-mark:hover strong {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ==========================================================================
 * Contact
 * ======================================================================= */
.xt-contact {
	background: var(--wp--preset--color--navy);
	color: #fff;
	padding-block: 69px 73px;
}

.xt-contact-inner {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 70px;
	align-items: center;
}

.xt-contact .xt-eyebrow {
	color: var(--wp--custom--color--on-navy-soft);
	margin-bottom: 16px;
}

.xt-contact h2 {
	margin: 0;
	color: #fff;
	font-size: clamp(2rem, 3.2vw, 2.8rem);
	max-width: 590px;
}

.xt-contact-text {
	margin: 18px 0 0;
	color: var(--wp--custom--color--on-navy);
	font-size: 1rem;
	max-width: 545px;
}

.xt-contact-actions {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	gap: 23px;
	justify-self: end;
}

.xt-contact-direct {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 0.9375rem;
}

.xt-contact-direct p {
	margin: 0;
}

.xt-contact-direct a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-color: #718b9b;
}

.xt-contact-direct a:hover {
	text-decoration-color: #fff;
}

/* ==========================================================================
 * Footer and legal bar
 * ======================================================================= */
.xt-footer {
	padding-top: 59px;
	background: var(--xt-surface, #fff);
}

.xt-footer-main {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 65px;
	padding-bottom: 41px;
}

.xt-footer .wp-block-site-logo img,
.xt-footer .xt-logo-grey img {
	width: 135px;
	height: auto;
}

.xt-footer-description {
	margin: 15px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	max-width: 260px;
}

.xt-footer h2 {
	margin: 0 0 14px;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0;
}

.xt-footer-links .wp-block-navigation__container {
	gap: 8px;
	font-size: 0.875rem;
	font-weight: 400;
}

.xt-footer a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.xt-footer a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.xt-footer address {
	margin: 0;
	font-style: normal;
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

.xt-map-link a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	margin-top: 8px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-color: #a3b3bd;
}

.xt-footer-bottom {
	display: flex;
	justify-content: space-between;
	gap: 22px;
	padding-block: 22px 25px;
	border-top: 1px solid var(--wp--custom--color--line);
	font-size: 0.75rem;
	color: var(--wp--preset--color--muted);
}

.xt-footer-bottom p {
	margin: 0;
}

.xt-legal-links .wp-block-navigation__container {
	gap: 9px 20px;
	font-size: 0.75rem;
	font-weight: 400;
}

/* Form pages (the form.xifram.it subdomain): content and legal bar only, the
   bar held at the bottom of the viewport on short pages. */
.wp-site-blocks:has(> .xt-page--form) {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

.xt-page--form {
	flex: 1;
}

/* No sticky header on the form pages: nothing to clear above an anchor. */
html:has(.xt-page--form) {
	scroll-padding-top: 0;
}

.xt-page--form-home {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2rem;
	padding-block: clamp(3rem, 8vw, 6rem);
}

/* Legal bar alone: the form templates, or the columns switched off. */
.xt-footer:not(:has(.xt-footer-main)) {
	padding-top: 0;
}

/* ==========================================================================
 * Social links: the core block, restyled to the mockup.
 * ======================================================================= */
.xt-social.wp-block-social-links {
	gap: 8px;
}

/* The core block gives each item a text line box around the link: 40px of
   height around a 28px target in the utility bar. The item is only a frame. */
.xt-social .wp-social-link {
	display: flex;
	padding: 0;
	margin: 0;
	line-height: 0;
}

.xt-footer-brand .xt-social {
	margin-top: 21px;
}

.xt-social .wp-social-link a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 11px;
	border: 1px solid var(--wp--custom--color--line);
	border-radius: var(--wp--custom--radius);
	transition: background-color 0.18s, border-color 0.18s;
}

.xt-social .wp-social-link a:hover {
	background: var(--xt-hover, #edf2f5);
	border-color: #aebec9;
}

.xt-social .wp-social-link svg {
	width: 18px;
	height: 18px;
}

.xt-utility .xt-social {
	gap: 3px;
	padding-left: 14px;
	border-left: 1px solid var(--xt-rule, #d4dde3);
}

.xt-utility .xt-social .wp-social-link a {
	min-width: 28px;
	min-height: 28px;
	padding: 5px;
	border: 0;
	border-radius: 4px;
}

.xt-utility .xt-social .wp-social-link svg {
	width: 15px;
	height: 15px;
}

/* Light and dark switch (plugin markup, shown by its script): drawn as one
   more icon of the social row beside it - same 28px target, same spacing, no
   border. The icon is the scheme on screen, swapped by the dark theme's
   variables. Negative block margins let the target overhang into the bar's
   padding instead of making a text line taller (on a phone the switch shares
   a line with the email); the selector outweighs the flow layout's
   `:last-child { margin-block-end: 0 }`, which otherwise left only the top one. */
.xt-utility .xt-utility-links .xplugin-scheme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	min-height: 28px;
	margin: -5px 0 -5px 3px;
	padding: 5px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

/* Until its script shows it, the switch keeps its place, unseen and out of
   the tab order: appearing later it would push the bar onto a second line
   between 900 and 950px and move the whole page down (CLS 0.42). */
.xt-utility .xt-utility-links .xplugin-scheme-toggle[hidden] {
	visibility: hidden;
}

.xt-utility .xt-utility-links .xplugin-scheme-toggle:hover {
	background: var(--xt-hover, #edf2f5);
}

.xplugin-scheme-toggle svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

.xplugin-scheme-toggle__moon {
	display: var(--xt-scheme-moon, block);
}

.xplugin-scheme-toggle__sun {
	display: var(--xt-scheme-sun, none);
}

/* ==========================================================================
 * Responsive: the mockup's breakpoints, consolidated
 * ======================================================================= */
@media (min-width: 981px) and (max-width: 1150px) {
	.xt-hero h1 {
		font-size: 3.8rem;
	}
}

@media (max-width: 1100px) {
	.xt-header .wp-block-navigation {
		gap: 20px;
	}

	.xt-hero-inner {
		grid-template-columns: 1fr;
	}

	.xt-section-heading {
		gap: 50px;
	}

	.xplugin-competences {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.xt-careers-panel {
		gap: 36px;
		padding: 37px 32px;
	}

	.xt-certification-band {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.xt-certification-marks {
		justify-content: flex-start;
		gap: 30px 55px;
	}

	.xt-footer-main {
		gap: 35px;
	}
}

@media (max-width: 980px) {
	.xt-hero-inner {
		gap: 40px;
		padding-block: 61px 65px;
	}

	.xt-hero h1 {
		font-size: 4rem;
	}

	.xt-hero-lead {
		max-width: 610px;
	}

	.xt-section-heading {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.xt-section-heading > p {
		max-width: 640px;
	}

	.xt-projects {
		padding-block: 68px 74px;
	}

	.xt-careers-panel {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.xt-careers-action {
		padding: 25px 0 0;
		border-left: 0;
		border-top: 1px solid var(--xt-rule, #ccd9e2);
	}

	.xt-careers-action p {
		max-width: 580px;
	}

	.xt-careers-intro {
		max-width: 620px;
	}

	.xt-responsibility-intro {
		display: block;
	}

	.xt-responsibility-intro p {
		margin-top: 12px;
	}

	.xt-contact-inner {
		gap: 35px;
	}
}

@media (max-width: 880px) {
	.xt-header-inner {
		min-height: 78px;
	}

	.xt-header .wp-block-site-logo img {
		width: 137px;
	}

	.xt-contact-inner {
		grid-template-columns: 1fr;
	}

	.xt-contact-actions {
		justify-self: start;
		margin-top: 4px;
	}

	.xt-footer-bottom {
		flex-direction: column;
		gap: 12px;
	}
}

@media (max-width: 700px) {
	.xt-hero-inner {
		gap: 38px;
	}

	.xplugin-orbit {
		aspect-ratio: auto;
		grid-template-rows: auto 124px auto auto;
		gap: 12px;
		max-width: 480px;
		margin-inline: auto;
	}

	.xplugin-orbit__hub {
		width: 124px;
		height: 124px;
		background-position: center 16px, center 82px, 0 0;
		background-size: 62px 62px, 78px auto, auto;
	}

	/* Two chips to a row: a smaller symbol leaves "ComplianceStudio" its line. */
	.xplugin-orbit__node {
		--xt-symbol: 18px;
		height: auto;
		min-height: 72px;
		padding-right: 10px;
	}

	.xplugin-orbit__node strong {
		font-size: 0.875rem;
	}

	.xplugin-orbit__controls {
		display: none;
	}
}

@media (max-width: 600px) {
	.xt-container {
		width: calc(100% - 36px);
	}

	.xt-utility .xt-container {
		padding-block: 7px;
		font-size: 0.6875rem;
	}

	.xt-utility-links {
		gap: 0;
	}

	.xt-utility-phone,
	.xt-utility .xt-social {
		display: none;
	}

	.xt-header-inner {
		min-height: 72px;
	}

	.xt-header .wp-block-site-logo img {
		width: 126px;
	}

	.xt-header-actions .wp-block-buttons {
		display: none;
	}

	.xt-hero-inner {
		padding-block: 43px 44px;
		gap: 34px;
		min-height: 0;
	}

	.xt-hero .xt-eyebrow {
		font-size: 0.6875rem;
		letter-spacing: 0.1em;
		max-width: 300px;
	}

	.xt-hero h1 {
		font-size: clamp(2.5rem, 10.5vw, 3.5rem);
		margin-block: 21px 22px;
	}

	.xt-hero-lead {
		font-size: 1rem;
		line-height: 1.75;
	}

	.xt-hero-actions {
		margin-top: 27px;
		gap: 20px;
	}

	.xt-button .wp-block-button__link,
	.xt-button-light .wp-block-button__link {
		min-height: 49px;
		padding: 12px 18px;
	}

	.xt-projects {
		padding-block: 51px 55px;
	}

	.xt-section-heading {
		gap: 18px;
		margin-bottom: 28px;
	}

	.xt-section-heading h2 {
		font-size: 2rem;
	}

	.xt-section-heading .xt-eyebrow {
		font-size: 0.6875rem;
		margin-bottom: 13px;
	}

	.xplugin-competences {
		grid-template-columns: 1fr;
		gap: 15px;
	}

	.xplugin-competence {
		padding: 23px;
		min-height: 310px;
	}

	.xplugin-competence__topline {
		margin-bottom: 14px;
	}

	.xplugin-competences__note {
		align-items: flex-start;
		font-size: 0.8125rem;
	}

	.xt-careers {
		padding-block: 48px 50px;
	}

	.xt-careers-panel {
		padding: 29px 23px;
		gap: 26px;
	}

	.xt-careers h2 {
		font-size: 2rem;
	}

	.xt-careers-intro {
		margin-top: 17px;
	}

	.xt-careers-action .wp-block-button,
	.xt-careers-action .wp-block-button__link {
		width: 100%;
	}

	.xt-responsibility {
		padding-bottom: 53px;
	}

	.xt-responsibility h2 {
		font-size: 1.75rem;
	}

	.xt-responsibility-intro {
		margin-bottom: 26px;
	}

	.xt-responsibility-links {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.xt-responsibility-link {
		padding-top: 18px;
	}

	.xt-certification-band {
		margin-top: 32px;
		padding-top: 28px;
	}

	.xt-certification-marks {
		gap: 27px;
	}

	.xt-certification-intro h3 {
		font-size: 1.25rem;
	}

	.xt-certification-caption {
		font-size: 0.8125rem;
	}

	.xt-contact {
		padding-block: 49px 54px;
	}

	.xt-contact-inner {
		gap: 25px;
	}

	.xt-contact h2 {
		font-size: 2rem;
	}

	.xt-contact-actions {
		gap: 24px;
	}

	.xt-footer {
		padding-top: 43px;
	}

	.xt-footer-main {
		grid-template-columns: 1fr 1fr;
		gap: 31px 24px;
		padding-bottom: 32px;
	}

	.xt-footer-brand {
		grid-column: 1 / -1;
	}

	.xt-footer-description {
		max-width: 310px;
	}

	.xt-footer-bottom {
		padding-block: 20px 24px;
	}

	.xt-legal-links .wp-block-navigation__container {
		gap: 10px 17px;
	}
}

@media (max-width: 360px) {
	.xt-utility .xt-container {
		justify-content: center;
	}

	.xt-hero-actions {
		align-items: flex-start;
		flex-direction: column;
	}

	.xplugin-orbit__node strong {
		font-size: 0.8125rem;
	}

	.xplugin-orbit__node small {
		font-size: 0.625rem;
	}

	.xt-footer-main {
		grid-template-columns: 1fr;
	}

	.xt-footer-brand {
		grid-column: auto;
	}
}

/* ==========================================================================
 * Internal pages
 *
 * The mockup did not redesign them; they extend its language. A page band as
 * wide as the home's sections with the title centred; under it the text,
 * centred too, in a 50rem column at 18px, about 95 characters a line (the
 * client chose a wider measure over the AAA 80); cards up to the 1220px grid;
 * full-width blocks edge to edge.
 * ======================================================================= */
.xt-page {
	/* Full-width blocks break out of the grid with 100vw, which includes the
	   scrollbar: clip, not hidden, so no scroll container is created. */
	overflow-x: clip;
}

.xt-page-head {
	padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.25rem, 4vw, 3.5rem);
	background: var(--wp--preset--color--paper);
	border-block-end: 1px solid var(--wp--custom--color--line);
}

.xt-page-head .xt-container {
	text-align: center;
}

/* Search field of the results and 404 pages: the core's white frame and its
   outline: none on the field, which beats the theme's focus ring. */
.xt-page-head .wp-block-search__inside-wrapper {
	background: var(--xt-surface, #fff);
	border-color: var(--wp--custom--color--line);
}

.xt-page-head .wp-block-search__input {
	background: transparent;
	color: inherit;
}

.xt-page-head .wp-block-search__inside-wrapper:focus-within {
	outline: 3px solid var(--xt-focus, var(--wp--preset--color--navy));
	outline-offset: 2px;
}

/* text-align does not centre a flex container. */
.xt-page-head .wp-block-buttons {
	justify-content: center;
	margin-block-start: 1.5rem;
}

.xt-page-head h1 {
	max-width: 30ch;
	margin: 0 auto;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.12;
	letter-spacing: -0.035em;
	text-wrap: balance;
	overflow-wrap: break-word;
	hyphens: auto;
}

.xt-page-head .xt-page-eyebrow {
	margin-block-end: 1rem;
}

.xt-page-eyebrow a {
	color: inherit;
}

.xt-page-meta,
.xt-page-lead,
.xt-page-head h1 + p {
	margin-block-start: 1rem;
	color: var(--wp--preset--color--muted);
}

.xt-page-head .wp-block-search {
	max-width: 50rem;
	margin: 1.75rem auto 0;
	text-align: start;
}

.xt-page-body {
	padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(4rem, 7vw, 6rem);
}

/* padding-inline 0: the constrained layout adds the root padding
   (has-global-padding) on top of the grid container, which already keeps the
   text off the viewport's edge. */
.xt-page-body .entry-content,
.xt-page--form-home > .entry-content {
	padding-inline: 0;
	font-size: 1.125rem;
	line-height: 1.7;
}


/* Floats sit at the edges of the text column, not of the grid: the grid's
   edges are far from the words the image belongs to. They clear each other, or
   a left and a right float close together squeeze the text between them into
   a column of three words. On a phone they stop floating. */
.xt-page-body .entry-content > :is(.alignleft, .alignright) {
	clear: both;
}

.xt-page-body .entry-content > .alignleft {
	margin-inline-start: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2));
}

.xt-page-body .entry-content > .alignright {
	margin-inline-end: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2));
}

@media (max-width: 600px) {
	.xt-page-body .entry-content > :is(.alignleft, .alignright) {
		float: none;
		margin-inline: 0;
	}
}

/* Latest posts as a list: a 3:2 thumbnail beside the title. The core block
   sets width: auto on the image, and a lazy image with sizes="auto" is then
   laid out at the core's 3000px placeholder - the browser picks the 1536px
   file and a portrait thumbnail ends up 1400px tall. */
.wp-block-latest-posts:not(.is-grid) > li + li {
	margin-block-start: 1.5rem;
}

.wp-block-latest-posts:not(.is-grid) > li:has(.wp-block-latest-posts__featured-image) {
	display: grid;
	grid-template-columns: 12rem minmax(0, 1fr);
	column-gap: 1.5rem;
	align-items: start;
}

.wp-block-latest-posts:not(.is-grid) > li:has(.wp-block-latest-posts__featured-image) > :not(.wp-block-latest-posts__featured-image) {
	grid-column: 2;
}

.wp-block-latest-posts:not(.is-grid) .wp-block-latest-posts__featured-image {
	grid-row: 1 / span 3;
	margin: 0;
}

.wp-block-latest-posts__featured-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 6px;
}

@media (max-width: 600px) {
	.wp-block-latest-posts:not(.is-grid) > li:has(.wp-block-latest-posts__featured-image) {
		display: block;
	}
}

.xt-page-body .entry-content > .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.xt-page-image {
	margin-block-end: clamp(2rem, 4vw, 3.5rem);
	overflow: hidden;
	border-radius: 10px;
}

.xt-post-nav {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	gap: 1rem 2rem;
	margin-block-start: 4rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--wp--custom--color--line);
	font-weight: 600;
}

/* Cards: the competence cards' frame, without their brand colour. */
.xt-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	height: 100%;
	padding: 0 0 1.5rem;
	overflow: hidden;
	background: var(--xt-surface, var(--wp--preset--color--white));
	border: 1px solid var(--wp--custom--color--line);
	border-radius: 10px;
}

.xt-card > :not(.wp-block-post-featured-image) {
	margin: 0;
	padding-inline: 1.5rem;
}

.xt-card .wp-block-post-featured-image {
	margin: 0 0 0.5rem;
}

/* The card clips its overflow: an outward ring on the image link, which
   touches three edges of the card, would show on one side only. */
.xt-card .wp-block-post-featured-image a:focus-visible {
	outline-offset: -3px;
}

.xt-card:not(:has(.wp-block-post-featured-image)) {
	padding-block-start: 1.5rem;
}

.xt-card-meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.xt-card-title {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
	overflow-wrap: break-word;
	hyphens: auto;
}

.xt-card-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.xt-card-title a:hover {
	text-decoration: underline;
}

.xt-pagination {
	gap: 0.5rem 1rem;
	margin-block-start: 3rem;
	font-weight: 600;
}

/* Reading pages built from core blocks carrying a class: an opening line, side
   by side panels, a grid of document cards, a table of contents. An editor
   keeps the look by editing the block and can reuse it from Advanced ->
   Additional CSS class: xt-lead, xt-panel, xt-docs + xt-doc, xt-toc. */
.entry-content > .xt-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}

.entry-content > .xt-eyebrow + * {
	margin-block-start: 0.75rem;
}

.entry-content .wp-block-column > * {
	margin-block: 0;
}

.entry-content .wp-block-column > * + * {
	margin-block-start: 1rem;
}

.entry-content .xt-panel {
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--wp--custom--color--panel);
	border: 1px solid var(--wp--custom--color--line);
	border-radius: 10px;
}

.entry-content :is(.xt-panel, .xt-doc) :is(h2, h3) {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
}

.entry-content .xt-panel > :is(h2, h3):not(:first-child) {
	margin-block-start: 1.75rem;
}

.xt-doc {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--xt-surface, var(--wp--preset--color--white));
	border: 1px solid var(--wp--custom--color--line);
	border-radius: 10px;
}

.xt-doc > * {
	margin: 0;
}

.xt-doc p {
	font-size: 1rem;
	line-height: 1.6;
}

/* The link to the document sits at the bottom of every card of a row. */
.xt-doc > .wp-block-buttons {
	margin-block-start: auto;
	padding-block-start: 0.5rem;
}

/* Logos of very different proportions, drawn at one height; in the dark
   theme on the same light plate as the brand logos. A real height, not a
   max-height: with width and height both auto the size attributes no longer
   count, the box is empty until the file arrives and the text below jumps
   (CLS 0.065 on a phone). scale-down keeps a smaller logo at its own size. */
.xt-doc .wp-block-image img {
	width: auto;
	max-width: 100%;
	height: 5.5rem;
	object-fit: scale-down;
	object-position: left center;
	padding: var(--xt-logo-plate-pad, 0);
	background: var(--xt-logo-plate, transparent);
	border-radius: 6px;
}

.entry-content > .xt-toc {
	padding: 1.25rem 1.5rem 1.25rem 2.75rem;
	background: var(--wp--custom--color--panel);
	border: 1px solid var(--wp--custom--color--line);
	border-radius: 10px;
	columns: 2 16rem;
	column-gap: 2.5rem;
	font-size: 1rem;
}

.xt-toc li {
	break-inside: avoid;
}

.xt-toc li + li {
	margin-block-start: 0.4rem;
}

/* theme.json sets blockGap to 0, as the mockup resets every margin and declares
   each one. Reading pages get their rhythm back here, explicitly: one step
   between blocks, more between paragraphs, most above a heading. */
.entry-content > * + * {
	margin-block-start: 1.5rem;
}

/* The post-content block always carries entry-content, the home's too: its
   sections declare their own spacing and sit edge to edge. */
.entry-content.xt-home > * {
	margin-block-start: 0;
}

:where(.entry-content) :where(p, li) {
	text-wrap: pretty;
}

.entry-content > p + p {
	margin-block-start: 2.5em;
}

.entry-content > h2,
.entry-content > h3 {
	margin-block-start: 2.5em;
	margin-block-end: 0.6em;
}

:where(.entry-content) :where(p, li, td) {
	text-align: start;
	overflow-wrap: break-word;
}

/* The table stays a table, full column width; a table too wide for the
   column scrolls inside its figure, which the core block already makes a
   scroll container. display: block here made narrow tables shrink to their
   content. */
:where(.entry-content) table {
	border-collapse: collapse;
	inline-size: 100%;
}

:where(.entry-content) :where(th, td) {
	border: 1px solid var(--wp--custom--color--line);
	padding: 0.6em 0.8em;
	vertical-align: top;
}

:where(.entry-content) th {
	background: var(--wp--preset--color--paper);
	font-weight: 700;
}

/* Striped rows, asked by the client (23/09/2026): the eye keeps its row
   across four columns of long cells. */
:where(.entry-content) tbody tr:nth-child(even) {
	background: var(--xt-zebra, #eef3f6);
}

/* ==========================================================================
 * Gravity Forms
 *
 * Colours, sizes and type come from inc/forms.php through the plugin's style
 * settings. Here only what those settings do not reach:
 * - the error red: the plugin's own hue darkened until it reaches AAA on white
 *   and on paper (7.58:1 and 7.05:1, against 5.85:1 for the default);
 * - 16px text in the fields, the size under which iOS zooms the page on focus;
 * - the focus ring in solid navy (13.89:1) instead of navy at 65%;
 * - bold button text, like the theme's buttons.
 * Two classes, so these win over the plugin's single-class defaults whatever
 * the load order.
 * ======================================================================= */
.gform_wrapper.gform-theme--framework {
	--gf-color-danger: var(--wp--custom--color--danger);
	--gf-color-danger-rgb: 161, 36, 8;
	--gf-ctrl-font-size: 1rem;
	--gf-ctrl-outline-color-focus: var(--xt-focus, var(--wp--preset--color--navy));
	--gf-ctrl-btn-font-weight: 700;
}

/* ==========================================================================
 * Embed placeholder (xplugin)
 *
 * Nothing loads from the host until the visitor asks. The placeholder takes
 * the embed's own 16:9 box, growing when its text needs more room on a phone;
 * once loaded, the embed fills the same box. White on navy 13.89:1, secondary
 * text 9.87:1, navy button text on white 13.89:1.
 * ======================================================================= */
.wp-block-embed__wrapper:has(> .xplugin-embed:not(.is-loaded))::before {
	content: none;
}

.xplugin-embed:not(.is-loaded) {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1.25rem, 4vw, 2.5rem);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	border-radius: 10px;
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

.wp-has-aspect-ratio .xplugin-embed:not(.is-loaded) {
	aspect-ratio: 16 / 9;
}

.wp-has-aspect-ratio .xplugin-embed.is-loaded {
	position: absolute;
	inset: 0;
}

.xplugin-embed__notice {
	max-width: 34rem;
}

.xplugin-embed__notice > * {
	margin: 0;
}

.xplugin-embed__notice > * + * {
	margin-block-start: 0.75rem;
}

.xplugin-embed__title {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

.xplugin-embed__text {
	color: var(--wp--custom--color--on-navy);
}

.xplugin-embed a {
	color: var(--wp--preset--color--white);
}

.xplugin-embed :focus-visible {
	outline-color: var(--wp--preset--color--white);
}

.xplugin-embed__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 1.5rem;
}

.xplugin-embed__load {
	min-height: 44px;
	padding: 0.625rem 1.25rem;
	border: 0;
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.xplugin-embed__load:hover {
	background: #edf2f5;
}

/* ==========================================================================
 * Motion and print
 * ======================================================================= */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}

@media print {
	.xt-utility,
	.xt-header,
	.xt-footer,
	.xt-contact,
	.xplugin-orbit-panel {
		display: none;
	}

	/* Browsers do not print backgrounds: white text would print on white. */
	.xt-hero,
	.xt-hero h1,
	.xplugin-embed {
		background: none;
		color: #000;
	}

	.xt-home a::after {
		content: none;
	}

	:where(.entry-content) a::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}
}

/* ==========================================================================
 * Dark theme
 *
 * It follows the device's preference, with no script (the theme ships none).
 * html[data-theme="dark"] and ="light" are the switches a toggle would set;
 * the two blocks hold the same values. Every text colour stays at 7:1 or more
 * on every dark surface, as in the light theme; the six brand colours and the
 * brand logos are never altered. Gravity Forms prints its colours inline with
 * an id selector, from the light palette: they are overridden here, and only
 * here, with !important.
 * ======================================================================= */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--wp--preset--color--ink: #e6edf2;
		--wp--preset--color--muted: #b3c3ce;
		--wp--preset--color--navy: #112f43;
		--wp--preset--color--paper: #0e1f2b;
		--wp--preset--color--white: #ffffff;
		--wp--preset--color--xifram: #555550;
		--wp--preset--color--privacy: #1c5185;
		--wp--preset--color--modello: #a87f51;
		--wp--preset--color--copyright: #764595;
		--wp--preset--color--compliance: #f28c28;
		--wp--preset--color--esg: #779966;
		--wp--preset--color--academix: #30c7b5;
		--wp--custom--color--line: #2c4659;
		--wp--custom--color--band: #0e1d28;
		--wp--custom--color--panel: #15293a;
		--xt-canvas: #0b1822;
		--xt-surface: #112434;
		--xt-rule: #223a4b;
		--xt-hover: #1a3245;
		--xt-focus: #e6edf2;
		--xt-button-bg: #e6edf2;
		--xt-button-ink: #112f43;
		--xt-logo-filter: none;
		--xt-logo-plate: #ffffff;
		--xt-logo-plate-pad: 8px 12px;
		--xt-logo-plate-align: flex-start;
		--xt-zebra: #13283a;
		--xt-scheme-moon: none;
		--xt-scheme-sun: block;
		--xt-button-hover: #c9d6df;
		--wp--custom--color--danger: #ff9b87;
	}

	:root:not([data-theme="light"]) .xt-social.is-style-logos-only .wp-social-link {
		color: var(--wp--preset--color--ink);
	}

	:root:not([data-theme="light"]) .gform_wrapper.gform-theme {
		--gf-color-primary: #e6edf2 !important;
		--gf-color-primary-rgb: 230, 237, 242 !important;
		--gf-color-primary-contrast: #112f43 !important;
		--gf-color-primary-darker: #c9d6df !important;
		--gf-color-primary-lighter: #ffffff !important;
		--gf-color-secondary: #112434 !important;
		--gf-color-secondary-contrast: #e6edf2 !important;
		--gf-color-secondary-darker: #0b1822 !important;
		--gf-color-secondary-lighter: #15293a !important;
		--gf-color-in-ctrl: #0b1822 !important;
		--gf-color-in-ctrl-contrast: #e6edf2 !important;
		--gf-color-in-ctrl-darker: #081219 !important;
		--gf-color-in-ctrl-lighter: #112434 !important;
		--gf-color-in-ctrl-primary: #e6edf2 !important;
		--gf-color-in-ctrl-primary-contrast: #112f43 !important;
		--gf-color-in-ctrl-primary-darker: #c9d6df !important;
		--gf-color-in-ctrl-primary-lighter: #ffffff !important;
		--gf-color-in-ctrl-light: rgba(230, 237, 242, 0.12) !important;
		--gf-color-in-ctrl-light-darker: rgba(179, 195, 206, 0.35) !important;
		--gf-color-in-ctrl-light-lighter: #15293a !important;
		--gf-color-in-ctrl-dark: #b3c3ce !important;
		--gf-color-in-ctrl-dark-darker: #e6edf2 !important;
		--gf-color-in-ctrl-dark-lighter: rgba(230, 237, 242, 0.65) !important;
		--gf-color-out-ctrl-light: rgba(230, 237, 242, 0.12) !important;
		--gf-color-out-ctrl-light-darker: rgba(179, 195, 206, 0.35) !important;
		--gf-color-out-ctrl-light-lighter: #15293a !important;
		--gf-color-out-ctrl-dark: #b3c3ce !important;
		--gf-color-out-ctrl-dark-darker: #e6edf2 !important;
		--gf-color-out-ctrl-dark-lighter: rgba(230, 237, 242, 0.65) !important;
		--gf-ctrl-border-color: #7f96a6 !important;
		--gf-ctrl-label-color-primary: #e6edf2 !important;
		--gf-ctrl-label-color-secondary: #e6edf2 !important;
		--gf-ctrl-btn-border-color-secondary: #7f96a6 !important;
		--gf-ctrl-btn-bg-color-hover-tertiary: #15293a !important;
		--gf-field-pg-steps-number-color: rgba(230, 237, 242, 0.8) !important;
		--gf-ctrl-placeholder-color: #b3c3ce !important;
		--gf-ctrl-label-color-req: #ff9b87 !important;
		--gf-color-danger-rgb: 255, 155, 135 !important;
	}
}

html[data-theme="dark"] {
	color-scheme: dark;
	--wp--preset--color--ink: #e6edf2;
	--wp--preset--color--muted: #b3c3ce;
	--wp--preset--color--navy: #112f43;
	--wp--preset--color--paper: #0e1f2b;
	--wp--preset--color--white: #ffffff;
	--wp--preset--color--xifram: #555550;
	--wp--preset--color--privacy: #1c5185;
	--wp--preset--color--modello: #a87f51;
	--wp--preset--color--copyright: #764595;
	--wp--preset--color--compliance: #f28c28;
	--wp--preset--color--esg: #779966;
	--wp--preset--color--academix: #30c7b5;
	--wp--custom--color--line: #2c4659;
	--wp--custom--color--band: #0e1d28;
	--wp--custom--color--panel: #15293a;
	--xt-canvas: #0b1822;
	--xt-surface: #112434;
	--xt-rule: #223a4b;
	--xt-hover: #1a3245;
	--xt-focus: #e6edf2;
	--xt-button-bg: #e6edf2;
	--xt-button-ink: #112f43;
	--xt-logo-filter: none;
	--xt-logo-plate: #ffffff;
	--xt-logo-plate-pad: 8px 12px;
	--xt-logo-plate-align: flex-start;
	--xt-zebra: #13283a;
	--xt-scheme-moon: none;
	--xt-scheme-sun: block;
	--xt-button-hover: #c9d6df;
	--wp--custom--color--danger: #ff9b87;
}

html[data-theme="dark"] .xt-social.is-style-logos-only .wp-social-link {
	color: var(--wp--preset--color--ink);
}

html[data-theme="dark"] .gform_wrapper.gform-theme {
	--gf-color-primary: #e6edf2 !important;
	--gf-color-primary-rgb: 230, 237, 242 !important;
	--gf-color-primary-contrast: #112f43 !important;
	--gf-color-primary-darker: #c9d6df !important;
	--gf-color-primary-lighter: #ffffff !important;
	--gf-color-secondary: #112434 !important;
	--gf-color-secondary-contrast: #e6edf2 !important;
	--gf-color-secondary-darker: #0b1822 !important;
	--gf-color-secondary-lighter: #15293a !important;
	--gf-color-in-ctrl: #0b1822 !important;
	--gf-color-in-ctrl-contrast: #e6edf2 !important;
	--gf-color-in-ctrl-darker: #081219 !important;
	--gf-color-in-ctrl-lighter: #112434 !important;
	--gf-color-in-ctrl-primary: #e6edf2 !important;
	--gf-color-in-ctrl-primary-contrast: #112f43 !important;
	--gf-color-in-ctrl-primary-darker: #c9d6df !important;
	--gf-color-in-ctrl-primary-lighter: #ffffff !important;
	--gf-color-in-ctrl-light: rgba(230, 237, 242, 0.12) !important;
	--gf-color-in-ctrl-light-darker: rgba(179, 195, 206, 0.35) !important;
	--gf-color-in-ctrl-light-lighter: #15293a !important;
	--gf-color-in-ctrl-dark: #b3c3ce !important;
	--gf-color-in-ctrl-dark-darker: #e6edf2 !important;
	--gf-color-in-ctrl-dark-lighter: rgba(230, 237, 242, 0.65) !important;
	--gf-color-out-ctrl-light: rgba(230, 237, 242, 0.12) !important;
	--gf-color-out-ctrl-light-darker: rgba(179, 195, 206, 0.35) !important;
	--gf-color-out-ctrl-light-lighter: #15293a !important;
	--gf-color-out-ctrl-dark: #b3c3ce !important;
	--gf-color-out-ctrl-dark-darker: #e6edf2 !important;
	--gf-color-out-ctrl-dark-lighter: rgba(230, 237, 242, 0.65) !important;
	--gf-ctrl-border-color: #7f96a6 !important;
	--gf-ctrl-label-color-primary: #e6edf2 !important;
	--gf-ctrl-label-color-secondary: #e6edf2 !important;
	--gf-ctrl-btn-border-color-secondary: #7f96a6 !important;
	--gf-ctrl-btn-bg-color-hover-tertiary: #15293a !important;
	--gf-field-pg-steps-number-color: rgba(230, 237, 242, 0.8) !important;
	--gf-ctrl-placeholder-color: #b3c3ce !important;
	--gf-ctrl-label-color-req: #ff9b87 !important;
	--gf-color-danger-rgb: 255, 155, 135 !important;
}

/* Paper is light: a dark theme, chosen or followed, prints with the light
   text colours. After the dark blocks, and heavier than both. */
@media print {
	:root:root:root {
		color-scheme: light;
		--wp--preset--color--ink: #173348;
		--wp--preset--color--muted: #45545d;
		--xt-canvas: #fff;
		--xt-surface: #fff;
	}
}