/*
Theme Name: VoxSci Signal
Theme URI: https://thevoxsci.com/
Author: VoxSci
Description: Custom block theme for VoxSci. "Signal from Noise": a scientific-editorial design system built on theme.json, native templates, template parts and reusable patterns. Integrated build: copy bound from FINAL_CONTENT.yaml.
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.4
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: voxsci
Tags: block-theme, full-site-editing, editor-style, custom-colors, wide-blocks, accessibility-ready
*/

/* ==========================================================================
   0. Tokens
   Colour, type and space presets come from theme.json; this layer adds
   layout and motion tokens plus semantic aliases used by components.
   Declared on body (not :root) because WordPress emits the preset custom
   properties on body; aliases declared on :root would resolve to nothing.
   ========================================================================== */

body {
	--vx-ink: var(--wp--preset--color--ink);
	--vx-ink-soft: var(--wp--preset--color--ink-soft);
	--vx-paper: var(--wp--preset--color--paper);
	--vx-paper-bright: var(--wp--preset--color--paper-bright);
	--vx-blue: var(--wp--preset--color--blue);
	--vx-blue-pale: var(--wp--preset--color--blue-pale);
	--vx-orange: var(--wp--preset--color--orange);
	--vx-terracotta: var(--wp--preset--color--terracotta);
	--vx-rule-color: var(--wp--preset--color--rule);
	--vx-muted: var(--wp--preset--color--muted);

	--vx-serif: var(--wp--preset--font-family--serif);
	--vx-sans: var(--wp--preset--font-family--sans);

	--vx-max: 90rem;
	--vx-pad: clamp(1rem, 0.4rem + 3.2vw, 4rem);
	--vx-gutter: clamp(1rem, 0.5rem + 1.6vw, 2rem);
	--vx-header-h: 4.5rem;
	--vx-section-space: var(--wp--preset--spacing--70);

	--vx-rule: 1px solid var(--vx-rule-color);
	--vx-rule-strong: 1px solid var(--vx-ink);

	--vx-micro: 160ms;
	--vx-entrance: 560ms;
	--vx-sequence: 820ms;
	--vx-ease: cubic-bezier(0.2, 0.7, 0.1, 1);

	/* Surface-aware roles. Dark sections redefine these. */
	--vx-surface: var(--vx-paper);
	--vx-text: var(--vx-ink);
	--vx-text-soft: var(--vx-ink-soft);
	--vx-text-muted: var(--vx-muted);
	--vx-line: var(--vx-ink);
	--vx-line-ghost: var(--vx-rule-color);
	--vx-line-grid: rgba(11, 31, 51, 0.12);
	--vx-node-fill: var(--vx-paper);
	--vx-focus: var(--vx-blue);
	--vx-accent-text: var(--vx-terracotta);
}

.is-dark {
	--vx-surface: var(--vx-ink);
	--vx-text: var(--vx-paper);
	--vx-text-soft: #cfd8df;
	--vx-text-muted: var(--vx-rule-color);
	--vx-line: var(--vx-paper);
	--vx-line-ghost: rgba(184, 197, 206, 0.32);
	--vx-line-grid: rgba(184, 197, 206, 0.14);
	--vx-node-fill: var(--vx-ink);
	--vx-focus: var(--vx-orange);
	--vx-accent-text: var(--vx-orange);
	background-color: var(--vx-ink);
	color: var(--vx-paper);
}

/* ==========================================================================
   1. Base
   ========================================================================== */

html {
	scroll-padding-top: 6rem;
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	background: var(--vx-paper);
	color: var(--vx-ink);
	font-feature-settings: "ss01" 0, "kern" 1;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

/* Long unbroken strings (placeholder tokens, URLs, compound terms) wrap
   instead of widening their column. */
:where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, a) {
	overflow-wrap: anywhere;
}

::selection {
	background: var(--vx-orange);
	color: var(--vx-ink);
}

img,
svg,
video,
canvas {
	max-width: 100%;
}

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.vx-main {
	counter-reset: vx-kicker;
}

.vx-main > * {
	margin-block: 0;
}

.is-dark :where(h1, h2, h3, h4, h5, h6) {
	color: var(--vx-paper);
}

.is-dark a:where(:not(.wp-element-button)) {
	color: var(--vx-paper);
	text-decoration-color: var(--vx-orange);
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--vx-micro) ease, text-decoration-color var(--vx-micro) ease;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--vx-focus);
	outline-offset: 3px;
	border-radius: 1px;
}

.skip-link.screen-reader-text:focus {
	background: var(--vx-ink);
	color: var(--vx-paper-bright);
	font-family: var(--vx-sans);
	font-size: 0.9375rem;
	font-weight: 500;
	padding: 0.9rem 1.2rem;
	clip-path: none;
	z-index: 1000;
	top: 0.5rem;
	left: 0.5rem;
	text-decoration: none;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ==========================================================================
   2. Layout primitives
   ========================================================================== */

.vx-section {
	position: relative;
	padding: 0;
}

.vx-wrap {
	max-width: calc(var(--vx-max) + 2 * var(--vx-pad));
	margin-inline: auto;
	padding: var(--vx-section-space) var(--vx-pad);
	box-sizing: border-box;
}

/* Editorial hairline between consecutive paper sections. */
.vx-section:not(.is-dark):not(.vx-segment--2) + .vx-section:not(.is-dark):not(.vx-segment--2) > .vx-wrap {
	background-image: linear-gradient(var(--vx-rule-color), var(--vx-rule-color));
	background-size: calc(100% - 2 * var(--vx-pad)) 1px;
	background-position: center top;
	background-repeat: no-repeat;
}

.vx-page-hero + .vx-section > .vx-wrap,
.vx-jump + .vx-section > .vx-wrap {
	background-image: none !important;
}

/* Grid containers: children are placed explicitly, flow margins removed. */
.vx-section :is(.vx-hero__grid, .vx-split, .vx-points, .vx-pathways, .vx-approach__grid, .vx-principles,
	.vx-work-grid, .vx-cta__grid, .vx-rail-layout, .vx-segment__grid, .vx-contact__grid, .vx-person,
	.vx-service-row, .vx-section-head, .vx-service__head, .vx-service__body, .vx-entry, .vx-footer__inner) > * {
	margin-block: 0;
}

.vx-section .vx-wrap > * + * {
	margin-block-start: 0;
}

/* ==========================================================================
   3. Typography components
   ========================================================================== */

.vx-kicker,
.vx-label {
	font-family: var(--vx-sans);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vx-text-soft);
	margin: 0;
}

.vx-kicker {
	counter-increment: vx-kicker;
	display: flex;
	align-items: center;
	gap: 0;
}

.vx-kicker::before {
	content: counter(vx-kicker, decimal-leading-zero);
	color: var(--vx-accent-text);
	font-variant-numeric: tabular-nums;
	padding-right: 3rem;
	background: linear-gradient(currentColor, currentColor) right 0.9rem center / 1.35rem 1px no-repeat;
}

.vx-kicker--link::before {
	content: none;
}

.vx-kicker--link a {
	color: inherit;
	text-decoration: none;
}

.vx-kicker--link a:hover {
	color: var(--vx-text);
}

h2.vx-label {
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	line-height: 1.4;
}

.vx-display {
	font-size: clamp(2.375rem, 1.25rem + 3.6vw, 4.625rem);
	font-weight: 500;
	line-height: 1.01;
	letter-spacing: -0.042em;
	max-width: 15ch;
	text-wrap: balance;
	margin: 0;
}

.vx-h2,
.vx-section .wp-block-heading.vx-h2 {
	font-size: var(--wp--preset--font-size--title-l);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.032em;
	max-width: 17ch;
	text-wrap: balance;
	margin: 0;
}

.vx-h3 {
	font-size: var(--wp--preset--font-size--title-m);
	letter-spacing: -0.02em;
}

.vx-lead {
	font-family: var(--vx-serif);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--vx-text-soft);
	max-width: 36em;
	text-wrap: pretty;
}

.vx-muted {
	color: var(--vx-text-muted);
	max-width: 38em;
}

.is-dark .vx-muted {
	color: var(--vx-text-soft);
}

.vx-dev-note {
	font-size: 0.8125rem;
	color: var(--vx-text-muted);
}

/* ==========================================================================
   4. Buttons and actions
   ========================================================================== */

.vx-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.75rem;
}

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
	text-decoration: none;
	transition: background-color var(--vx-micro) ease, color var(--vx-micro) ease, border-color var(--vx-micro) ease;
}

.wp-block-button:not(.is-style-vx-text) .wp-block-button__link::after,
.is-style-vx-text .wp-block-button__link::after,
.vx-row-link a::before,
.wp-block-read-more::after,
.vx-footer__cta a::after {
	content: "";
	flex: none;
	width: 1.05em;
	height: 0.7em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h16M11 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h16M11 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--vx-micro) var(--vx-ease);
}

.wp-block-button__link:hover::after,
.wp-block-button__link:focus-visible::after,
.wp-block-read-more:hover::after,
.vx-footer__cta a:hover::after {
	transform: translateX(4px);
}

.wp-block-button.is-style-vx-text .wp-block-button__link {
	background: transparent;
	color: var(--vx-text);
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	padding: 0.45rem 0;
}

.wp-block-button.is-style-vx-text .wp-block-button__link:hover {
	background: transparent;
	color: var(--vx-blue);
}

.is-dark .wp-block-button.is-style-vx-text .wp-block-button__link:hover {
	color: var(--vx-orange);
}

.wp-block-button.is-style-vx-accent .wp-block-button__link {
	background: var(--vx-orange);
	border-color: var(--vx-orange);
	color: var(--vx-ink);
}

.wp-block-button.is-style-vx-accent .wp-block-button__link:hover,
.wp-block-button.is-style-vx-accent .wp-block-button__link:focus-visible {
	background: var(--vx-paper-bright);
	border-color: var(--vx-paper-bright);
	color: var(--vx-ink);
}

.is-dark .wp-block-button:not([class*="is-style-vx"]) .wp-block-button__link {
	background: var(--vx-paper-bright);
	border-color: var(--vx-paper-bright);
	color: var(--vx-ink);
}

/* ==========================================================================
   5. Header and navigation
   ========================================================================== */

.vx-site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	background: var(--vx-paper);
	transition: box-shadow var(--vx-entrance) ease;
}

.vx-site-header.is-scrolled {
	box-shadow: 0 1px 0 var(--vx-rule-color);
}

.vx-header {
	margin: 0;
}

.vx-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2.5rem);
	max-width: calc(var(--vx-max) + 2 * var(--vx-pad));
	min-height: var(--vx-header-h);
	margin-inline: auto;
	padding-inline: var(--vx-pad);
	box-sizing: border-box;
}

.vx-header__inner > * {
	margin: 0 !important;
}

.vx-brand {
	margin-right: auto !important;
	font-size: 1.3125rem;
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1;
}

.vx-brand a {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: inherit;
	text-decoration: none;
}

.vx-brand a::before {
	content: "";
	width: 1.1em;
	height: 1em;
	flex: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cpath d='M2 18.5 11 2l9 16.5Z' fill='none' stroke='%230B1F33' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M6.5 18.5 11 10.2' stroke='%230B1F33' stroke-width='1.1'/%3E%3Ccircle cx='11' cy='10.2' r='2.3' fill='%23F46A22'/%3E%3C/svg%3E") center / contain no-repeat;
}

.is-dark .vx-brand a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cpath d='M2 18.5 11 2l9 16.5Z' fill='none' stroke='%23F6F3EC' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M6.5 18.5 11 10.2' stroke='%23F6F3EC' stroke-width='1.1'/%3E%3Ccircle cx='11' cy='10.2' r='2.3' fill='%23F46A22'/%3E%3C/svg%3E");
}

.vx-nav {
	font-size: 0.9375rem;
	gap: 0;
}

.vx-nav .wp-block-navigation__container {
	gap: clamp(1rem, 1.6vw, 2rem);
}

.vx-nav .wp-block-navigation-item__content {
	color: var(--vx-ink);
	text-decoration: none;
	padding-block: 0.6rem;
	position: relative;
}

.vx-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.25rem;
	height: 1px;
	background: var(--vx-ink);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--vx-micro) var(--vx-ease);
}

.vx-nav .wp-block-navigation-item__content:hover::after,
.vx-nav .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX(1);
}

.vx-nav .wp-block-navigation-item__content[aria-current="page"]::after {
	transform: scaleX(1);
	background: var(--vx-orange);
	height: 2px;
}

.vx-nav-contact {
	display: none !important;
}

.vx-header__cta .wp-block-button__link {
	padding: 0.7rem 1rem;
	font-size: 0.875rem;
}

.vx-nav .wp-block-navigation__responsive-container-open,
.vx-nav .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	color: var(--vx-ink);
}

@media (max-width: 599px) {
	.vx-nav .wp-block-navigation__responsive-container-open {
		display: inline-flex;
	}
}

.vx-nav .wp-block-navigation__responsive-container-close {
	display: inline-flex;
}

.vx-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--vx-paper) !important;
	color: var(--vx-ink) !important;
	padding: var(--vx-pad);
}

.vx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4.5rem;
	align-items: stretch;
}

.vx-nav .is-menu-open .wp-block-navigation__container {
	gap: 0 !important;
	width: 100%;
	align-items: stretch !important;
	counter-reset: vx-menu;
}

.vx-nav .is-menu-open .wp-block-navigation-item {
	border-top: var(--vx-rule);
	width: 100%;
	counter-increment: vx-menu;
}

.vx-nav .is-menu-open .wp-block-navigation-item:last-child {
	border-bottom: var(--vx-rule);
}

.vx-nav .is-menu-open .wp-block-navigation-item__content {
	font-size: 1.625rem;
	font-weight: 500;
	letter-spacing: -0.02em;
	padding-block: 1rem !important;
	width: 100%;
	display: flex !important;
	align-items: baseline;
	gap: 1rem;
}

.vx-nav .is-menu-open .wp-block-navigation-item__content::before {
	content: counter(vx-menu, decimal-leading-zero);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	color: var(--vx-terracotta);
	font-variant-numeric: tabular-nums;
}

.vx-nav .is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

.vx-nav .is-menu-open .vx-nav-contact {
	display: block !important;
}

@media (max-width: 1099px) {
	.vx-header__cta {
		display: none !important;
	}

	.vx-nav-contact {
		display: block !important;
	}
}

/* ==========================================================================
   6. Footer
   ========================================================================== */

.vx-site-footer {
	margin-top: 0;
}

.vx-footer {
	border-top: 1px solid rgba(184, 197, 206, 0.22);
	margin: 0;
}

.vx-footer__inner {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 2.5rem var(--vx-gutter);
	max-width: calc(var(--vx-max) + 2 * var(--vx-pad));
	margin-inline: auto;
	padding: var(--wp--preset--spacing--60) var(--vx-pad) var(--wp--preset--spacing--50);
	box-sizing: border-box;
}

.vx-footer__brand {
	grid-column: 1 / span 5;
}

.vx-footer__brand .vx-brand {
	font-size: 1.5rem;
}

.vx-footer__positioning {
	margin-top: 1.25rem !important;
	max-width: 30em;
	color: var(--vx-text-soft);
	font-family: var(--vx-serif);
	font-size: 1.0625rem;
	line-height: 1.5;
}

.vx-footer__col:nth-of-type(2) {
	grid-column: 7 / span 3;
}

.vx-footer__col:nth-of-type(3) {
	grid-column: 10 / span 3;
}

.vx-footer__col .vx-label {
	color: var(--vx-text-muted);
	margin-bottom: 1rem;
}

.vx-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vx-footer__links li {
	margin: 0;
}

.vx-footer__links a,
.vx-footer__email a,
.vx-footer__cta a {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	min-height: 44px;
	text-decoration: none;
	color: var(--vx-paper);
}

.vx-footer__links a:hover,
.vx-footer__email a:hover,
.vx-footer__cta a:hover {
	color: var(--vx-orange) !important;
}

.vx-footer__email,
.vx-footer__cta {
	margin: 0 !important;
}

.vx-footer__email a {
	overflow-wrap: anywhere;
}

.vx-footer__cta a {
	display: inline;
	color: var(--vx-orange) !important;
}

.vx-footer__cta a::after {
	content: none;
}

.vx-footer__base {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(184, 197, 206, 0.22);
	font-size: 0.8125rem;
	color: var(--vx-text-muted);
}

.vx-footer__base p {
	margin: 0;
}

/* ==========================================================================
   7. Home hero + signature visual
   ========================================================================== */

.vx-hero {
	overflow-x: clip;
}

.vx-hero > .vx-wrap {
	padding-top: clamp(1.5rem, 0.5rem + 3vw, 3.5rem);
	padding-bottom: 0;
}

.vx-hero__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--vx-gutter);
	align-items: center;
	min-height: min(calc(100vh - var(--vx-header-h) - 7rem), 46rem);
}

.vx-hero__text {
	grid-column: 1 / span 6;
	position: relative;
	z-index: 2;
	padding-block: 2.5rem;
}

.vx-hero__text > .vx-kicker {
	margin-bottom: 1.75rem !important;
}

.vx-hero__lead {
	margin-top: 1.75rem !important;
	max-width: 31em;
}

.vx-hero__text .vx-actions {
	margin-top: 2.25rem !important;
}

.vx-signal {
	--vx-bleed: max(0px, (100vw - var(--vx-max) - 2 * var(--vx-pad)) / 2);
	grid-column: 7 / -1;
	align-self: stretch;
	position: relative;
	min-height: 32rem;
	margin-right: calc(-1 * (var(--vx-pad) + var(--vx-bleed)));
}

.vx-signal .vx-hero-fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transition: opacity var(--vx-sequence) ease;
}

.vx-signal__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity var(--vx-sequence) ease;
}

.vx-signal.is-live .vx-signal__canvas {
	opacity: 1;
}

.vx-signal.is-live .vx-hero-fallback {
	opacity: 0;
}

.vx-signal__phases {
	position: absolute;
	left: var(--vx-gutter);
	bottom: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vx-muted);
}

.vx-signal__phases li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	transition: color var(--vx-entrance) ease;
}

.vx-signal__phases span {
	font-variant-numeric: tabular-nums;
	opacity: 0.7;
}

.vx-signal__phases li::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border: 1px solid currentColor;
	transition: background-color var(--vx-entrance) ease, border-color var(--vx-entrance) ease;
}

.vx-signal__phases li.is-active,
.vx-signal:not(.is-live) .vx-signal__phases li[data-phase="2"] {
	color: var(--vx-ink);
}

.vx-signal__phases li.is-active::before,
.vx-signal:not(.is-live) .vx-signal__phases li[data-phase="2"]::before {
	background: var(--vx-orange);
	border-color: var(--vx-orange);
}

.vx-hero__paths {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 2.5rem;
	margin-top: 0 !important;
	padding-block: 1.25rem;
	border-top: var(--vx-rule-strong);
	position: relative;
	z-index: 2;
	background: var(--vx-paper);
}

.vx-pathlinks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 2.25rem;
	list-style: none;
	margin: 0 !important;
	padding: 0;
	counter-reset: vx-path;
}

.vx-pathlinks li {
	counter-increment: vx-path;
	margin: 0;
}

.vx-pathlinks a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.6rem;
	min-height: 44px;
	align-items: center;
	color: var(--vx-ink);
	text-decoration: none;
	font-weight: 500;
}

.vx-pathlinks a::before {
	content: counter(vx-path, decimal-leading-zero);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	color: var(--vx-terracotta);
	font-variant-numeric: tabular-nums;
}

.vx-pathlinks a::after {
	content: "";
	width: 0.55rem;
	height: 0.55rem;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: translateY(-0.05rem);
	opacity: 0.55;
	transition: transform var(--vx-micro) var(--vx-ease), opacity var(--vx-micro) ease;
}

.vx-pathlinks a:hover {
	color: var(--vx-blue);
}

.vx-pathlinks a:hover::after {
	transform: translate(2px, -2px);
	opacity: 1;
}

/* ==========================================================================
   8. Split sections (gap, services) and section heads
   ========================================================================== */

.vx-split {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 2rem var(--vx-gutter);
}

.vx-split__aside {
	grid-column: 1 / span 3;
}

.vx-split__main {
	grid-column: 4 / -1;
}

.vx-split--sticky .vx-split__aside {
	grid-column: 1 / span 4;
	position: sticky;
	top: calc(var(--vx-header-h) + 2.5rem);
	align-self: start;
}

.vx-split--sticky .vx-split__main {
	grid-column: 6 / -1;
}

.vx-split__main > .vx-lead {
	margin-top: 2rem !important;
	max-width: 38em;
}

.vx-section-head {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 1.75rem var(--vx-gutter);
	align-items: end;
}

.vx-section-head > .vx-kicker {
	grid-column: 1 / -1;
}

.vx-section-head > .wp-block-heading {
	grid-column: 1 / span 7;
}

.vx-section-head > .vx-lead,
.vx-section-head > .vx-muted {
	grid-column: 8 / -1;
	margin: 0;
}

.vx-section-head--split > .vx-actions {
	grid-column: 8 / -1;
}

.vx-services__intro > * + * {
	margin-top: 1.5rem !important;
}

.vx-services__intro .vx-actions {
	margin-top: 2rem !important;
}

/* ==========================================================================
   9. Visibility gap
   ========================================================================== */

.vx-gap__band {
	margin-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2rem, 1rem + 3vw, 3.5rem) !important;
}

.vx-points {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem var(--vx-gutter);
	counter-reset: vx-point;
}

.vx-point {
	counter-increment: vx-point;
	border-top: var(--vx-rule-strong);
	padding-top: 1.25rem;
}

.vx-point::before,
.vx-principle::before {
	content: counter(vx-point, lower-roman) ".";
	display: block;
	font-family: var(--vx-serif);
	font-style: italic;
	font-size: 1.125rem;
	color: var(--vx-accent-text);
	margin-bottom: 1.25rem;
}

.vx-point__title,
.vx-principle__title {
	font-size: var(--wp--preset--font-size--title-s);
	font-weight: 500;
	letter-spacing: -0.02em;
	margin: 0 0 0.75rem !important;
	max-width: 18ch;
}

.vx-point__body,
.vx-principle__body {
	color: var(--vx-text-muted);
	margin: 0 !important;
	max-width: 34ch;
}

/* ==========================================================================
   10. Services overview (numbered index)
   ========================================================================== */

.vx-service-index {
	counter-reset: vx-service;
	border-bottom: var(--vx-rule);
}

.vx-service-row {
	counter-increment: vx-service;
	position: relative;
	display: grid;
	grid-template-columns: 2.75rem 5.5rem minmax(0, 1fr) auto;
	grid-template-areas:
		"num glyph title link"
		"num glyph summary link";
	column-gap: clamp(1rem, 2vw, 2rem);
	row-gap: 0.4rem;
	align-items: start;
	padding-block: 1.75rem;
	border-top: var(--vx-rule);
}

.vx-service-row::before {
	content: counter(vx-service, decimal-leading-zero);
	grid-area: num;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	font-variant-numeric: tabular-nums;
	color: var(--vx-terracotta);
	padding-top: 0.45rem;
}

.vx-service-row::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 1px;
	background: var(--vx-ink);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--vx-entrance) var(--vx-ease);
}

.vx-service-row:hover::after,
.vx-service-row:focus-within::after {
	transform: scaleX(1);
}

.vx-service-row__glyph {
	grid-area: glyph;
	width: 5.5rem;
	color: var(--vx-ink);
}

.vx-service-row__title {
	grid-area: title;
	font-size: var(--wp--preset--font-size--title-s);
	font-weight: 500;
	letter-spacing: -0.02em;
	margin: 0 !important;
	padding-top: 0.15rem;
}

.vx-service-row__summary {
	grid-area: summary;
	color: var(--vx-text-muted);
	max-width: 40em;
	margin: 0 !important;
}

.vx-row-link {
	grid-area: link;
	align-self: center;
	margin: 0 !important;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.vx-row-link a {
	display: inline-flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	color: var(--vx-ink);
	text-decoration: none;
}

.vx-row-link a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.vx-row-link a::before {
	transition: transform var(--vx-micro) var(--vx-ease);
}

.vx-service-row:hover .vx-row-link a::before {
	transform: translateX(4px);
}

.vx-service-row:hover .vx-service-row__title {
	color: var(--vx-blue);
}

.vx-service-row .g-signal,
.vx-service .g-signal {
	transition: stroke-width var(--vx-entrance) var(--vx-ease);
}

.vx-service-row:hover .g-signal {
	stroke-width: 3;
}

.vx-service-row:hover .g-tri {
	fill: var(--vx-orange);
	stroke: var(--vx-orange);
}

/* ==========================================================================
   11. Audience pathways (ink)
   ========================================================================== */

.vx-audiences .vx-section-head > .vx-lead {
	color: var(--vx-text-soft);
}

.vx-pathways {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: clamp(3rem, 2rem + 3vw, 5rem) !important;
	border-top: 1px solid rgba(184, 197, 206, 0.3);
}

.vx-pathway {
	padding: 2.25rem clamp(1.25rem, 2.5vw, 2.75rem) 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.vx-pathway:first-child {
	padding-left: 0;
}

.vx-pathway + .vx-pathway {
	border-left: 1px solid rgba(184, 197, 206, 0.3);
}

.vx-pathway > * {
	margin: 0 !important;
}

.vx-pathway__glyph {
	width: 100%;
	max-width: 15rem;
	margin-bottom: 1rem !important;
}

.vx-pathway:nth-child(2) .vx-pathway__glyph {
	--vx-signal-color: #8fb8d6;
}

.vx-pathway:nth-child(3) .vx-pathway__glyph {
	--vx-signal-color: #e8846a;
}

.vx-pathway__label {
	font-family: var(--vx-serif);
	font-style: italic;
	font-size: var(--wp--preset--font-size--title-m);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--vx-paper);
	min-height: 2.2em;
}

.vx-pathway__title {
	font-size: var(--wp--preset--font-size--title-s);
	font-weight: 500;
	letter-spacing: -0.015em;
}

.vx-pathway__title a {
	text-decoration: none;
	background: linear-gradient(var(--vx-orange), var(--vx-orange)) left bottom / 0 1px no-repeat;
	transition: background-size var(--vx-entrance) var(--vx-ease);
}

.vx-pathway__title a:hover,
.vx-pathway__title a:focus-visible {
	background-size: 100% 1px;
}

.vx-pathway__body {
	color: var(--vx-text-soft);
}

/* Signal markers for lists. */
.vx-ticks,
.is-style-vx-ticks {
	list-style: none;
	padding: 0;
	margin: 0;
}

.vx-ticks li,
.is-style-vx-ticks li {
	position: relative;
	padding-left: 1.5rem;
	margin: 0;
	padding-block: 0.45rem;
	border-top: 1px solid var(--vx-line-ghost);
}

.vx-ticks li:last-child,
.is-style-vx-ticks li:last-child {
	border-bottom: 1px solid var(--vx-line-ghost);
}

.vx-ticks li::before,
.is-style-vx-ticks li::before {
	content: "";
	position: absolute;
	left: 0.1rem;
	top: 0.98em;
	width: 0.6rem;
	height: 0.6rem;
	background: var(--vx-accent-text);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 1.5 10.5 6 1.5 10.5Z' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 1.5 10.5 6 1.5 10.5Z' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.vx-pathway .vx-ticks {
	align-self: stretch;
	margin-top: auto !important;
	padding-top: 0.5rem;
	font-size: 0.9375rem;
}

/* ==========================================================================
   12. Approach, philosophy, principles
   ========================================================================== */

.vx-approach__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 3rem var(--vx-gutter);
	align-items: center;
}

.vx-approach__text {
	grid-column: 1 / span 6;
}

.vx-approach__text > .vx-kicker {
	margin-bottom: 1.75rem !important;
}

.vx-approach__text > .vx-lead {
	margin-top: 2rem !important;
}

.vx-approach__figure {
	grid-column: 8 / -1;
}

.vx-principles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem var(--vx-gutter);
	margin-top: clamp(3rem, 2rem + 3vw, 5rem) !important;
	counter-reset: vx-point;
}

.vx-principle {
	counter-increment: vx-point;
	border-top: var(--vx-rule-strong);
	padding-top: 1.25rem;
}

.vx-about-principles .vx-principles {
	margin-top: 2rem !important;
}

/* ==========================================================================
   13. Placeholder slots (portfolio, portraits)
   ========================================================================== */

.vx-work-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--vx-gutter);
	margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem) !important;
}

.vx-slot {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.vx-slot--01 {
	grid-column: 1 / span 7;
	grid-row: span 2;
}

.vx-slot--02,
.vx-slot--03 {
	grid-column: 8 / -1;
}

.vx-slot__frame {
	position: relative;
	display: grid;
	place-items: center;
	flex: 1;
	min-height: 0;
	aspect-ratio: 16 / 10;
	border: var(--vx-rule);
	background-color: var(--vx-paper-bright);
	background-image:
		linear-gradient(var(--vx-line-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--vx-line-grid) 1px, transparent 1px);
	background-size: 2rem 2rem;
	background-position: -1px -1px;
	overflow: hidden;
}

.vx-slot--02 .vx-slot__frame,
.vx-slot--03 .vx-slot__frame {
	aspect-ratio: auto;
}

.vx-slot__frame::before {
	content: "";
	position: absolute;
	inset: 0.75rem;
	pointer-events: none;
	--c: var(--vx-ink-soft);
	background:
		linear-gradient(var(--c), var(--c)) top left / 0.9rem 1px,
		linear-gradient(var(--c), var(--c)) top left / 1px 0.9rem,
		linear-gradient(var(--c), var(--c)) top right / 0.9rem 1px,
		linear-gradient(var(--c), var(--c)) top right / 1px 0.9rem,
		linear-gradient(var(--c), var(--c)) bottom left / 0.9rem 1px,
		linear-gradient(var(--c), var(--c)) bottom left / 1px 0.9rem,
		linear-gradient(var(--c), var(--c)) bottom right / 0.9rem 1px,
		linear-gradient(var(--c), var(--c)) bottom right / 1px 0.9rem;
	background-repeat: no-repeat;
}

.vx-slot__frame::after {
	content: "";
	position: absolute;
	pointer-events: none;
	inset: 50% auto auto 50%;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	transform: translate(-50%, calc(-50% - 2.25rem));
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M4 32 18 5l14 27Z' fill='none' stroke='%23B23F29' stroke-width='1.3' stroke-linejoin='round'/%3E%3Ccircle cx='18' cy='22' r='2.2' fill='%23F46A22'/%3E%3C/svg%3E") center / contain no-repeat;
}

.vx-slot__label {
	position: relative;
	z-index: 1;
	padding: 0.5rem 0.85rem;
	background: var(--vx-paper-bright);
	border: 1px dashed var(--vx-ink-soft);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vx-ink-soft);
	text-align: center;
	max-width: calc(100% - 3rem);
}

.vx-slot__spec {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--vx-muted);
}

.vx-slot__spec span + span::before {
	content: "/";
	padding-inline: 0.6rem;
	color: var(--vx-rule-color);
}

.vx-slot--portrait .vx-slot__frame {
	aspect-ratio: 4 / 5;
}

/* ==========================================================================
   14. Insights preview + post cards
   ========================================================================== */

.vx-insights {
	background: var(--vx-paper-bright);
}

.vx-feature-posts {
	margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem) !important;
}

.vx-post-pair {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 2.5rem var(--vx-gutter);
	list-style: none;
	margin: 0;
	padding: 0;
}

.vx-post-pair > li {
	margin: 0;
}

.vx-post-card {
	border-top: var(--vx-rule-strong);
	padding-top: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	height: 100%;
}

.vx-post-card > * {
	margin: 0 !important;
}

.vx-post-card__meta,
.vx-entry__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1rem;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vx-muted);
}

.vx-post-card__meta > *,
.vx-entry__meta > * {
	margin: 0 !important;
}

.vx-post-card__meta a,
.vx-entry__meta a {
	color: var(--vx-terracotta);
	text-decoration: none;
}

.vx-post-card__title,
.vx-entry__title {
	font-family: var(--vx-serif);
	font-weight: 500;
	letter-spacing: -0.012em;
	line-height: 1.14;
	text-wrap: balance;
}

.vx-post-card__title {
	font-size: clamp(1.625rem, 1.15rem + 1.5vw, 2.5rem);
}

.vx-post-pair > li:nth-child(2) .vx-post-card__title {
	font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem);
}

.vx-post-card__title a,
.vx-entry__title a,
.vx-related-item__title a {
	color: var(--vx-ink);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.vx-post-card__title a:hover,
.vx-entry__title a:hover,
.vx-related-item__title a:hover {
	text-decoration-color: var(--vx-orange);
}

.vx-post-card__excerpt,
.vx-entry__excerpt {
	color: var(--vx-text-muted);
	max-width: 38em;
}

.wp-block-post-excerpt__excerpt {
	margin: 0;
}

.wp-block-read-more,
.vx-read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	margin-top: auto !important;
	align-self: flex-start;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vx-ink);
	text-decoration: none;
}

.wp-block-read-more:hover {
	color: var(--vx-blue);
}

/* ==========================================================================
   15. Consultation CTA (ink)
   ========================================================================== */

.vx-cta__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 3rem var(--vx-gutter);
	align-items: center;
}

.vx-cta__text {
	grid-column: 1 / span 7;
}

.vx-cta__title {
	font-size: clamp(2.125rem, 1.3rem + 2.6vw, 3.875rem) !important;
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -0.035em;
	max-width: 15ch;
	text-wrap: balance;
	margin: 0 !important;
}

.vx-cta__text > .vx-lead {
	margin-top: 1.75rem !important;
	color: var(--vx-text-soft);
}

.vx-cta__text > .vx-actions {
	margin-top: 2.25rem !important;
}

.vx-cta__figure {
	grid-column: 8 / -1;
}

/* ==========================================================================
   16. Inner page hero
   ========================================================================== */

.vx-page-hero > .vx-wrap {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 2rem var(--vx-gutter);
	align-items: end;
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
	position: relative;
}

.vx-page-hero > .vx-wrap::after {
	content: "";
	position: absolute;
	left: var(--vx-pad);
	right: var(--vx-pad);
	bottom: 0;
	height: 0.6rem;
	border-bottom: var(--vx-rule-strong);
	background: repeating-linear-gradient(90deg, var(--vx-ink) 0 1px, transparent 1px calc(100% / 24)) left bottom / 100% 0.35rem no-repeat;
	opacity: 0.85;
}

.vx-page-hero__text {
	grid-column: 1 / span 9;
}

.vx-page-hero__text > * + * {
	margin-top: 1.5rem !important;
}

.vx-page-hero__text > .vx-kicker + * {
	margin-top: 1.75rem !important;
}

.vx-page-title,
.vx-page-hero .wp-block-query-title {
	font-size: var(--wp--preset--font-size--title-xl);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.038em;
	max-width: 17ch;
	text-wrap: balance;
}

.vx-page-hero__text > .vx-lead {
	max-width: 34em;
}

.vx-page-hero__figure {
	grid-column: 10 / -1;
	justify-self: end;
	width: min(100%, 12rem);
	padding-bottom: 1.5rem;
}

.vx-page-hero--compact > .vx-wrap {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}

/* ==========================================================================
   17. Services page: rail + detailed sections
   ========================================================================== */

.vx-rail-layout {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 2rem var(--vx-gutter);
}

.vx-rail {
	grid-column: 1 / span 3;
	position: sticky;
	top: calc(var(--vx-header-h) + 2rem);
	align-self: start;
}

.vx-rail .vx-label {
	margin-bottom: 1rem;
}

.vx-rail ol {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--vx-rule);
}

.vx-rail li {
	border-bottom: var(--vx-rule);
}

.vx-rail a {
	display: grid;
	grid-template-columns: 2rem 1fr 0.75rem;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding-block: 0.55rem;
	font-size: 0.875rem;
	line-height: 1.3;
	color: var(--vx-muted);
	text-decoration: none;
	transition: color var(--vx-micro) ease;
}

.vx-rail a span {
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	font-variant-numeric: tabular-nums;
}

.vx-rail a::after {
	content: "";
	width: 0.6rem;
	height: 0.6rem;
	background: var(--vx-orange);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity var(--vx-micro) ease, transform var(--vx-micro) var(--vx-ease);
}

.vx-rail a:hover,
.vx-rail a[aria-current="true"] {
	color: var(--vx-ink);
}

.vx-rail a[aria-current="true"] {
	font-weight: 500;
}

.vx-rail a[aria-current="true"]::after {
	opacity: 1;
	transform: none;
}

.vx-rail-layout__main {
	grid-column: 5 / -1;
}

.vx-service {
	padding-block: 2.75rem 3.25rem;
	border-top: var(--vx-rule);
	scroll-margin-top: calc(var(--vx-header-h) + 1rem);
}

.vx-service:first-child {
	border-top: var(--vx-rule-strong);
	padding-top: 2rem;
}

.vx-service__head {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr) 6rem;
	gap: 1rem var(--vx-gutter);
	align-items: start;
}

.vx-service__num {
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	color: var(--vx-terracotta);
	font-variant-numeric: tabular-nums;
	padding-top: 0.8rem;
}

.vx-service__title {
	font-size: var(--wp--preset--font-size--title-m) !important;
	font-weight: 500;
	letter-spacing: -0.025em;
	max-width: 18ch;
}

.vx-service__glyph {
	width: 6rem;
}

.vx-service__body {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem var(--vx-gutter);
	margin-top: 2rem !important;
	padding-left: calc(3rem + var(--vx-gutter));
}

.vx-facet > * {
	margin: 0 !important;
}

.vx-facet .vx-facet__label + .vx-ticks li:first-child {
	border-top: 0;
	padding-top: 0;
}

.vx-facet .vx-facet__label + .vx-ticks li:first-child::before {
	top: 0.5em;
}

.vx-facet__label,
.vx-section .wp-block-heading.vx-facet__label {
	font-size: 0.75rem !important;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--vx-text-muted);
	padding-bottom: 0.75rem;
	margin-bottom: 0.9rem !important;
	border-bottom: var(--vx-rule);
}

.vx-facet p {
	color: var(--vx-ink-soft);
}

/* ==========================================================================
   18. Who We Help: jump list + segments
   ========================================================================== */

.vx-jump > .vx-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 2.5rem;
	padding-block: 1.25rem;
}

.vx-segment--2 {
	background: var(--vx-paper-bright);
	border-block: var(--vx-rule);
}

.vx-segment__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 2.5rem var(--vx-gutter);
}

.vx-segment__aside {
	grid-column: 1 / span 4;
	position: sticky;
	top: calc(var(--vx-header-h) + 2.5rem);
	align-self: start;
}

.vx-segment__aside > * + * {
	margin-top: 1.25rem !important;
}

.vx-segment__num {
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	color: var(--vx-terracotta);
	font-variant-numeric: tabular-nums;
}

.vx-segment__label,
.vx-section .wp-block-heading.vx-segment__label {
	font-family: var(--vx-serif);
	font-style: italic;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--title-l);
	line-height: 1.04;
	letter-spacing: -0.02em;
	max-width: 11ch;
}

.vx-segment__glyph {
	max-width: 15rem;
	padding-top: 1rem;
}

.vx-segment__main {
	grid-column: 6 / -1;
}

.vx-segment__main > .vx-facet {
	display: grid;
	grid-template-columns: 10rem minmax(0, 1fr);
	gap: 0.75rem var(--vx-gutter);
	padding-block: 1.5rem;
	border-top: var(--vx-rule);
	margin: 0 !important;
}

.vx-segment__main > .vx-facet:first-child {
	border-top: var(--vx-rule-strong);
}

.vx-segment__main .vx-facet__label {
	border: 0 !important;
	padding: 0.3rem 0 0 !important;
	margin: 0 !important;
}

.vx-segment__lead {
	font-family: var(--vx-serif);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	color: var(--vx-ink) !important;
}

.vx-ticks--cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--vx-gutter);
}

.vx-ticks--cols li:nth-last-child(2):nth-child(odd) {
	border-bottom: 1px solid var(--vx-line-ghost);
}

/* ==========================================================================
   19. About: team
   ========================================================================== */

.vx-team .vx-section-head {
	margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem) !important;
}

.vx-person {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 2rem var(--vx-gutter);
	align-items: start;
}

.vx-person > .vx-slot {
	grid-column: 1 / span 4;
}

.vx-person__text {
	grid-column: 6 / span 6;
	border-top: var(--vx-rule-strong);
	padding-top: 1.5rem;
}

.vx-person__text > * {
	margin: 0 !important;
}

.vx-person__name {
	font-size: var(--wp--preset--font-size--title-l) !important;
	font-weight: 500;
	letter-spacing: -0.03em;
}

.vx-person__role {
	margin-top: 0.75rem !important;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vx-terracotta);
}

.vx-person__bio {
	margin-top: 2rem !important;
	font-family: var(--vx-serif);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
	color: var(--vx-ink-soft);
	max-width: 34em;
}

/* ==========================================================================
   20. Contact
   ========================================================================== */

.vx-contact__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 3rem var(--vx-gutter);
	align-items: start;
}

.vx-form-slot {
	grid-column: 1 / span 7;
	background: var(--vx-paper-bright);
	border: var(--vx-rule-strong);
	padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
}

.vx-form-slot__marker {
	margin: 0 0 2rem !important;
	padding: 0.85rem 1rem;
	border: 1px dashed var(--vx-ink-soft);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vx-ink-soft);
	background: var(--vx-paper);
}

.vx-form-preview fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.vx-form-preview legend {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vx-muted);
	padding: 0;
	margin-bottom: 1.5rem;
}

.vx-form-preview__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--vx-gutter);
}

.vx-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 1.5rem;
}

.vx-field label {
	font-size: 0.875rem;
	font-weight: 500;
}

.vx-field label span {
	font-weight: 400;
	color: var(--vx-muted);
}

.vx-field input,
.vx-field textarea,
.vx-search .wp-block-search__input {
	font: inherit;
	font-size: 1rem;
	color: var(--vx-ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--vx-ink-soft);
	border-radius: 0;
	padding: 0.7rem 0;
	min-height: 44px;
	box-sizing: border-box;
	width: 100%;
}

.vx-field textarea {
	resize: vertical;
	min-height: 7.5rem;
	border: 1px solid var(--vx-ink-soft);
	padding: 0.7rem 0.8rem;
}

.vx-field :disabled {
	cursor: not-allowed;
	opacity: 1;
	-webkit-text-fill-color: var(--vx-muted);
}

.vx-form-preview__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
}

.vx-form-preview__actions button {
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	background: var(--vx-ink);
	color: var(--vx-paper-bright);
	border: 1px solid var(--vx-ink);
	border-radius: 2px;
	padding: 0.95rem 1.35rem;
	min-height: 44px;
	opacity: 0.55;
	cursor: not-allowed;
}

/* Fields from a form plugin dropped into the slot take the same treatment.
   :where() keeps specificity at one class so plugin layout rules still win. */
.vx-form-slot :where(label) {
	font-size: 0.875rem;
	font-weight: 500;
}

.vx-form-slot :where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"]), select, textarea) {
	font: inherit;
	font-size: 1rem;
	color: var(--vx-ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--vx-ink-soft);
	border-radius: 0;
	padding: 0.7rem 0;
	min-height: 44px;
	box-sizing: border-box;
	max-width: 100%;
}

.vx-form-slot :where(textarea) {
	border: 1px solid var(--vx-ink-soft);
	padding: 0.7rem 0.8rem;
}

.vx-form-slot :where(button[type="submit"], input[type="submit"]):not(:disabled) {
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	background: var(--vx-ink);
	color: var(--vx-paper-bright);
	border: 1px solid var(--vx-ink);
	border-radius: 2px;
	padding: 0.95rem 1.35rem;
	min-height: 44px;
	cursor: pointer;
}

.vx-form-preview__note {
	font-size: 0.8125rem;
	color: var(--vx-muted);
	margin: 0;
	max-width: 28em;
}

.vx-contact__aside {
	grid-column: 9 / -1;
	border-top: var(--vx-rule-strong);
	padding-top: 1.25rem;
}

.vx-contact__aside > * {
	margin: 0 !important;
}

.vx-contact__email {
	margin-top: 1rem !important;
	font-size: var(--wp--preset--font-size--title-s);
	font-weight: 500;
	letter-spacing: -0.015em;
}

.vx-contact__email a {
	color: var(--vx-ink);
	overflow-wrap: anywhere;
	text-decoration-color: var(--vx-orange);
}

.vx-contact__figure {
	width: 9rem;
	margin-top: 3rem !important;
}

/* ==========================================================================
   21. Archives, filter, entries, pagination, search
   ========================================================================== */

.vx-archive-section > .vx-wrap {
	padding-top: var(--wp--preset--spacing--50);
}

.vx-page-intro:empty,
.vx-page-intro:not(:has(*)) {
	display: none;
}

.vx-page-intro {
	max-width: 42rem;
	margin-bottom: 2rem !important;
}

.vx-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 2rem;
	padding-bottom: 1rem;
	border-bottom: var(--vx-rule-strong);
}

.vx-filter > * {
	margin: 0 !important;
}

.vx-filter__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vx-filter__terms li {
	margin: 0;
}

.vx-filter__terms a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 0.9375rem;
	color: var(--vx-ink);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.35em;
}

.vx-filter__terms a:hover,
.vx-filter__terms .current-cat a {
	text-decoration-color: var(--vx-orange);
	text-decoration-thickness: 2px;
}

.vx-archive-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vx-archive-list > li {
	margin: 0;
	border-bottom: var(--vx-rule);
}

.vx-entry {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 1rem var(--vx-gutter);
	padding-block: 2rem;
	align-items: start;
}

.vx-entry__meta {
	grid-column: 1 / span 3;
	flex-direction: column;
	padding-top: 0.5rem;
}

.vx-entry__main {
	grid-column: 4 / span 6;
}

.vx-entry__main > * {
	margin: 0 !important;
}

.vx-entry__main > * + * {
	margin-top: 0.9rem !important;
}

.vx-entry__title {
	font-size: var(--wp--preset--font-size--title-m);
}

.vx-entry__media {
	grid-column: 10 / -1;
	margin: 0 !important;
}

.vx-entry__media img {
	border-radius: 2px;
}

body:not(.paged) .vx-archive-list > li:first-child .vx-entry__title {
	font-size: clamp(2rem, 1.3rem + 2.2vw, 3.25rem);
}

body:not(.paged) .vx-archive-list > li:first-child .vx-entry__excerpt {
	font-family: var(--vx-serif);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	color: var(--vx-ink-soft);
}

body:not(.paged) .vx-archive-list > li:first-child .vx-entry__main {
	grid-column: 4 / span 7;
}

.vx-pagination {
	margin-top: 2.5rem !important;
	font-size: 0.9375rem;
	gap: 1rem;
}

.vx-pagination a,
.vx-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	color: var(--vx-ink);
	text-decoration: none;
}

.vx-pagination .page-numbers.current {
	background: var(--vx-ink);
	color: var(--vx-paper-bright);
}

.vx-search {
	max-width: 36rem;
}

.vx-search .wp-block-search__inside-wrapper {
	gap: 0.75rem;
	border: 0;
	padding: 0;
}

.vx-search .wp-block-search__button {
	margin: 0;
	background: var(--vx-ink);
	color: var(--vx-paper-bright);
	border: 1px solid var(--vx-ink);
	border-radius: 2px;
	padding: 0.7rem 1.2rem;
	font-size: 0.9375rem;
	font-weight: 500;
	min-height: 44px;
}

.vx-search .wp-block-search__button:hover {
	background: var(--vx-blue);
	border-color: var(--vx-blue);
}

.vx-404__figure {
	width: min(100%, 16rem);
}

/* ==========================================================================
   22. Single article + prose
   ========================================================================== */

.vx-article__head > .vx-wrap {
	padding-bottom: var(--wp--preset--spacing--50);
	max-width: calc(42rem + 2 * var(--vx-pad));
}

.vx-article__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
}

.vx-article__kicker > * {
	margin: 0 !important;
}

.vx-article__terms {
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.vx-article__terms a {
	color: var(--vx-terracotta);
	text-decoration: none;
}

.vx-article__title {
	font-family: var(--vx-serif);
	font-weight: 500;
	font-size: clamp(2.125rem, 1.4rem + 2.2vw, 3.5rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	max-width: 22ch;
	text-wrap: balance;
	margin-top: 1.75rem !important;
}

.vx-article__dek {
	margin-top: 1.5rem !important;
	font-family: var(--vx-serif);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	color: var(--vx-ink-soft);
	max-width: 36em;
}

.vx-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0;
	margin-top: 2rem !important;
	padding-top: 1rem;
	border-top: var(--vx-rule-strong);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vx-muted);
}

.vx-article__meta > * {
	margin: 0 !important;
	font-size: inherit;
	color: inherit;
}

.vx-article__meta > * + *::before {
	content: "";
	display: inline-block;
	width: 1.5rem;
	height: 1px;
	margin-inline: 0.85rem;
	vertical-align: middle;
	background: var(--vx-rule-color);
}

.vx-article__meta p {
	display: inline;
}

.vx-article__author {
	color: var(--vx-ink) !important;
}

.vx-article__media {
	max-width: calc(80rem + 2 * var(--vx-pad));
	margin: 0 auto var(--wp--preset--spacing--50) !important;
	padding-inline: var(--vx-pad);
	box-sizing: border-box;
}

.vx-prose {
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	line-height: 1.7;
	padding-bottom: var(--wp--preset--spacing--60);
}

.vx-prose > * {
	margin-block: 1.25em 0;
}

.vx-prose > :first-child {
	margin-top: 0;
}

.vx-prose :where(h2) {
	font-size: var(--wp--preset--font-size--title-m);
	margin-top: 2.4em;
	letter-spacing: -0.02em;
}

.vx-prose :where(h3) {
	font-size: var(--wp--preset--font-size--title-s);
	margin-top: 2em;
}

.vx-prose :where(h2, h3) + * {
	margin-top: 0.75em;
}

.vx-prose :where(ul, ol):not(.is-style-vx-ticks) {
	padding-left: 1.25em;
}

.vx-prose :where(ul):not(.is-style-vx-ticks) li::marker {
	color: var(--vx-terracotta);
}

.vx-prose :where(ol) li::marker {
	color: var(--vx-terracotta);
	font-variant-numeric: tabular-nums;
}

.vx-prose li + li {
	margin-top: 0.4em;
}

.vx-prose a {
	color: var(--vx-blue);
}

.vx-prose .wp-block-quote {
	margin-block: 2em;
	color: var(--vx-ink);
}

.vx-prose .wp-block-quote cite,
.vx-prose .wp-block-pullquote cite {
	display: block;
	margin-top: 0.75rem;
	font-family: var(--vx-sans);
	font-style: normal;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vx-muted);
}

.vx-prose .wp-block-pullquote {
	padding: 2rem 0;
	text-align: left;
}

.vx-prose .wp-block-image,
.vx-prose figure {
	margin-block: 2.25em;
}

.vx-prose figcaption,
.vx-prose .wp-element-caption {
	margin-top: 0.75rem;
	padding-top: 0.6rem;
	border-top: var(--vx-rule);
	font-size: 0.8125rem;
	color: var(--vx-muted);
	text-align: left;
}

.vx-prose :where(code):not(pre code) {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.88em;
	background: var(--vx-blue-pale);
	padding: 0.1em 0.35em;
	border-radius: 2px;
}

.vx-prose pre {
	overflow-x: auto;
	border-radius: 2px;
	line-height: 1.55;
}

.vx-prose hr.wp-block-separator {
	margin-block: 3em;
	border: 0;
	border-top: var(--vx-rule);
}

.is-style-vx-callout {
	background: var(--vx-blue-pale);
	border-left: 3px solid var(--vx-blue);
	padding: 1.5rem clamp(1.25rem, 3vw, 2rem);
	position: relative;
}

.is-style-vx-callout > :first-child {
	margin-top: 0;
}

.is-style-vx-callout::before {
	content: "";
	position: absolute;
	top: 1.6rem;
	left: -0.6rem;
	width: 0.9rem;
	height: 0.9rem;
	background: var(--vx-blue);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.vx-article__foot > .vx-wrap {
	max-width: calc(42rem + 2 * var(--vx-pad));
	padding-top: 0;
	padding-bottom: var(--wp--preset--spacing--60);
	background-image: none !important;
}

.vx-article__tags {
	font-size: 0.875rem;
	margin-bottom: 2rem !important;
}

.vx-article__tags a {
	color: var(--vx-ink-soft);
}

.vx-article__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vx-gutter);
	border-top: var(--vx-rule-strong);
	padding-top: 1.25rem;
}

.vx-article__nav > * {
	margin: 0 !important;
	font-size: 0.9375rem;
}

.vx-article__nav .post-navigation-link-next {
	text-align: right;
}

.vx-article__nav a {
	color: var(--vx-ink);
}

.vx-related {
	background: var(--vx-paper-bright);
}

.vx-related .vx-h3 {
	margin-bottom: 2rem !important;
}

.vx-related-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem var(--vx-gutter);
	list-style: none;
	margin: 0;
	padding: 0;
}

.vx-related-item {
	border-top: var(--vx-rule-strong);
	padding-top: 1rem;
}

.vx-related-item > * {
	margin: 0 !important;
}

.vx-related-item__title {
	margin-top: 0.75rem !important;
	font-family: var(--vx-serif);
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* ==========================================================================
   23. SVG system
   ========================================================================== */

.vx-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.vx-svg .g-grid {
	stroke: var(--vx-line-grid);
	stroke-width: 0.75;
}

.vx-svg .g-tick {
	stroke: var(--vx-text-soft);
	stroke-width: 1;
	opacity: 0.6;
}

.vx-svg .g-ghost {
	stroke: var(--vx-line-ghost);
	stroke-width: 1;
}

.vx-svg .g-path {
	stroke: var(--vx-line);
	stroke-width: 1.5;
}

.vx-svg .g-signal {
	stroke: var(--vx-signal-color, var(--vx-orange));
	stroke-width: 2;
}

.vx-svg .g-tri {
	stroke: var(--vx-accent-text);
	stroke-width: 1.5;
	fill: none;
}

.is-dark .vx-svg .g-tri {
	stroke: var(--vx-signal-color, var(--vx-orange));
}

.vx-svg .g-shape {
	fill: none;
}

.vx-svg .g-node {
	fill: var(--vx-node-fill);
	stroke: var(--vx-line);
	stroke-width: 1.1;
}

.vx-svg .g-node.is-solid {
	fill: var(--vx-line);
}

.vx-svg .is-dashed {
	stroke-dasharray: 2 4;
}

.vx-band .g-ghost {
	stroke-width: 1;
}

.vx-band .g-path,
.vx-band .g-signal {
	stroke-width: 1.5;
}

.vx-insights .vx-svg .g-node,
.vx-segment--2 .vx-svg .g-node {
	--vx-node-fill: var(--vx-paper-bright);
}

.vx-hero-fallback .g-ghost {
	stroke-width: 0.8;
}

/* ==========================================================================
   24. Motion (progressive; only when JS has run)
   ========================================================================== */

.js .vx-reveal {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition:
		opacity var(--vx-entrance) var(--vx-ease) var(--vx-delay, 0ms),
		transform var(--vx-entrance) var(--vx-ease) var(--vx-delay, 0ms);
}

.js .vx-reveal.is-visible {
	opacity: 1;
	transform: none;
}

.js .vx-reveal .vx-draw {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 1400ms var(--vx-ease) calc(var(--vx-delay, 0ms) + 200ms);
}

.js .vx-reveal.is-visible .vx-draw {
	stroke-dashoffset: 0;
}

.js .vx-reveal .vx-pop {
	opacity: 0;
	transition: opacity var(--vx-entrance) ease 1300ms;
}

.js .vx-reveal.is-visible .vx-pop {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.js .vx-reveal,
	.js .vx-reveal .vx-pop {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.js .vx-reveal .vx-draw {
		stroke-dashoffset: 0;
		transition: none;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   25. Responsive
   ========================================================================== */

@media (max-width: 1199px) {
	.vx-split--sticky .vx-split__aside {
		grid-column: 1 / span 5;
	}

	.vx-split--sticky .vx-split__main {
		grid-column: 6 / -1;
	}

	.vx-service-row {
		grid-template-columns: 2.25rem 4.5rem minmax(0, 1fr);
		grid-template-areas:
			"num glyph title"
			"num glyph summary"
			"num glyph link";
	}

	.vx-service-row__glyph {
		width: 4.5rem;
	}

	.vx-row-link {
		justify-self: start;
		margin-top: 0 !important;
	}

	.vx-row-link a {
		min-height: 2.25rem;
	}

	.vx-service-row {
		padding-bottom: 1.25rem;
	}

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

	.vx-service__body > .vx-facet--list {
		grid-column: 1 / -1;
	}
}

@media (max-width: 1023px) {
	body {
		--vx-header-h: 4rem;
	}

	.vx-hero__grid {
		min-height: 0;
	}

	.vx-hero__text {
		grid-column: 1 / -1;
		padding-block: 1rem 0;
	}

	.vx-display {
		max-width: 17ch;
	}

	.vx-signal {
		grid-column: 1 / -1;
		min-height: 0;
		aspect-ratio: 16 / 10;
		max-height: 30rem;
		width: calc(100% + 2 * var(--vx-pad));
		margin: 1.5rem calc(-1 * var(--vx-pad)) 0;
	}

	.vx-signal__phases {
		left: var(--vx-pad);
	}

	.vx-split__aside,
	.vx-split__main,
	.vx-split--sticky .vx-split__aside,
	.vx-split--sticky .vx-split__main {
		grid-column: 1 / -1;
		position: static;
	}

	.vx-section-head > .wp-block-heading,
	.vx-section-head > .vx-lead,
	.vx-section-head > .vx-muted,
	.vx-section-head--split > .vx-actions {
		grid-column: 1 / -1;
	}

	.vx-section-head > .vx-lead,
	.vx-section-head > .vx-muted {
		max-width: 38em;
	}

	.vx-pathways {
		grid-template-columns: 1fr;
	}

	.vx-pathway,
	.vx-pathway:first-child {
		display: grid;
		grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
		column-gap: 2.5rem;
		row-gap: 1rem;
		padding: 2.25rem 0;
		align-items: start;
	}

	.vx-pathway + .vx-pathway {
		border-left: 0;
		border-top: 1px solid rgba(184, 197, 206, 0.3);
	}

	.vx-pathway__glyph {
		grid-row: 1 / span 5;
		margin: 0 !important;
	}

	.vx-pathway__label {
		min-height: 0;
	}

	.vx-approach__text,
	.vx-approach__figure,
	.vx-cta__text,
	.vx-cta__figure {
		grid-column: 1 / -1;
	}

	.vx-approach__figure {
		max-width: 32rem;
	}

	.vx-cta__figure {
		max-width: 28rem;
	}

	.vx-page-hero__text {
		grid-column: 1 / span 10;
	}

	.vx-page-hero__figure {
		grid-column: 11 / -1;
		width: 100%;
	}

	.vx-rail {
		grid-column: 1 / -1;
		position: static;
	}

	.vx-rail ol {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--vx-gutter);
	}

	.vx-rail-layout__main {
		grid-column: 1 / -1;
	}

	.vx-segment__aside,
	.vx-segment__main {
		grid-column: 1 / -1;
		position: static;
	}

	.vx-segment__aside {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 10rem;
		align-items: end;
		column-gap: var(--vx-gutter);
	}

	.vx-segment__aside > * + * {
		margin-top: 0 !important;
	}

	.vx-segment__num {
		grid-column: 1 / -1;
	}

	.vx-segment__glyph {
		padding: 0;
	}

	.vx-person > .vx-slot {
		grid-column: 1 / span 5;
	}

	.vx-person__text {
		grid-column: 6 / -1;
	}

	.vx-form-slot,
	.vx-contact__aside {
		grid-column: 1 / -1;
	}

	.vx-entry__meta {
		grid-column: 1 / -1;
		flex-direction: row;
		padding-top: 0;
	}

	.vx-entry__main,
	body:not(.paged) .vx-archive-list > li:first-child .vx-entry__main {
		grid-column: 1 / span 8;
	}

	.vx-entry__media {
		grid-column: 9 / -1;
	}

	.vx-footer__brand {
		grid-column: 1 / -1;
	}

	.vx-footer__col:nth-of-type(2) {
		grid-column: 1 / span 6;
	}

	.vx-footer__col:nth-of-type(3) {
		grid-column: 7 / -1;
	}
}

@media (max-width: 781px) {
	body {
		--vx-section-space: clamp(3.5rem, 2.5rem + 5vw, 5rem);
	}

	.vx-points,
	.vx-principles {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.vx-point__body,
	.vx-principle__body {
		max-width: 40em;
	}

	.vx-pathway,
	.vx-pathway:first-child {
		display: flex;
	}

	.vx-pathway__glyph {
		max-width: 12rem;
	}

	.vx-work-grid {
		grid-template-columns: 1fr;
	}

	.vx-slot--01,
	.vx-slot--02,
	.vx-slot--03 {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.vx-slot--02 .vx-slot__frame,
	.vx-slot--03 .vx-slot__frame {
		aspect-ratio: 16 / 10;
	}

	.vx-post-pair,
	.vx-related-list {
		grid-template-columns: 1fr;
	}

	.vx-page-hero__text {
		grid-column: 1 / -1;
	}

	.vx-page-hero__figure {
		display: none;
	}

	.vx-service__head {
		grid-template-columns: minmax(0, 1fr) 4.5rem;
	}

	.vx-service__num {
		grid-column: 1 / -1;
		padding: 0;
	}

	.vx-service__glyph {
		width: 4.5rem;
	}

	.vx-service__body {
		grid-template-columns: 1fr;
		padding-left: 0;
	}

	.vx-segment__main > .vx-facet {
		grid-template-columns: 1fr;
	}

	.vx-ticks--cols {
		grid-template-columns: 1fr;
	}

	.vx-ticks--cols li:nth-last-child(2):nth-child(odd) {
		border-bottom: 0;
	}

	.vx-person > .vx-slot,
	.vx-person__text {
		grid-column: 1 / -1;
	}

	.vx-person > .vx-slot {
		max-width: 22rem;
	}

	.vx-form-preview__row {
		grid-template-columns: 1fr;
	}

	.vx-entry__main,
	.vx-entry__media,
	body:not(.paged) .vx-archive-list > li:first-child .vx-entry__main {
		grid-column: 1 / -1;
	}

	.vx-article__nav {
		grid-template-columns: 1fr;
	}

	.vx-article__nav .post-navigation-link-next {
		text-align: left;
	}

	.vx-footer__col:nth-of-type(2),
	.vx-footer__col:nth-of-type(3) {
		grid-column: 1 / -1;
	}
}

@media (max-width: 599px) {
	.vx-service-row {
		grid-template-columns: 3.5rem minmax(0, 1fr);
		grid-template-areas:
			"num num"
			"glyph title"
			"summary summary"
			"link link";
		row-gap: 0.75rem;
	}

	.vx-service-row::before {
		padding-top: 0;
	}

	.vx-service-row__glyph {
		width: 3.5rem;
	}

	.vx-service-row__title {
		align-self: center;
	}

	.vx-hero__paths {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}

	.vx-pathlinks {
		flex-direction: column;
	}

	.vx-signal {
		aspect-ratio: 4 / 3;
	}

	.vx-signal__phases {
		gap: 0.4rem 1rem;
		bottom: 0.75rem;
	}

	.vx-rail ol {
		grid-template-columns: 1fr;
	}

	.vx-segment__aside {
		grid-template-columns: minmax(0, 1fr) 6.5rem;
	}

	.vx-kicker::before {
		padding-right: 2.4rem;
		background-size: 1rem 1px;
		background-position: right 0.7rem center;
	}
}