/*
Theme Name: INFIMAX Agency
Theme URI: https://infimax.net/
Author: INFIMAX
Author URI: https://infimax.net/
Description: INFIMAX brand theme for a dark, editorial media-intelligence site. Built for WordPress full site editing, with dedicated templates for the homepage, advertisers, publishers and contact, 14 reusable section patterns, and a dependency-free enquiry form.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: infimax-agency
Tags: block-theme, full-site-editing, business, portfolio, one-column, two-columns, wide-blocks, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-width-template, threaded-comments, translation-ready, dark-mode
*/

/* ==========================================================================
   Table of contents
   01. Design token fallbacks (tokens come from theme.json; these are safety nets)
   02. Base and typography
   03. Layout utilities
   04. Text and emphasis
   05. Cards and containers
   06. Eyebrows, indices and figures
   07. Buttons
   08. Header and navigation
   09. Footer
   10. Section rhythm and decoration
   11. Forms
   12. Lists and checklists
   13. Marquee
   14. Inner pages and legal pages
   15. Motion and accessibility
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Design token fallbacks
   -------------------------------------------------------------------------- */
:root {
	--imx-radius-sm: 8px;
	--imx-radius-md: 14px;
	--imx-radius-lg: 20px;
	--imx-radius-xl: 28px;
	--imx-radius-pill: 999px;
	--imx-header-h: 76px;
	--imx-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--imx-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--imx-fast: 140ms var(--imx-ease);
	--imx-base: 240ms var(--imx-ease);
	--imx-slow: 420ms var(--imx-ease-out);
	--imx-navy: #18224b;
	--imx-violet: #6d46e8;
	--imx-violet-deep: #5a37c3;
	--imx-gold: #f4d022;
}

/* --------------------------------------------------------------------------
   02. Base and typography
   -------------------------------------------------------------------------- */
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--imx-header-h) + 16px);
}

body {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* Page-wide ambient glow so the background never reads as flat colour */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(70% 45% at 12% -5%, rgba(109, 70, 232, 0.16) 0%, rgba(8, 8, 15, 0) 62%),
		radial-gradient(50% 40% at 95% 4%, rgba(244, 208, 34, 0.07) 0%, rgba(8, 8, 15, 0) 66%);
}

.wp-site-blocks {
	position: relative;
	z-index: 1;
}

/* Keep outlines and images inside rounded corners */
img,
svg,
video {
	max-width: 100%;
	height: auto;
}

img {
	border-style: none;
}

::selection {
	background: var(--wp--preset--color--violet);
	color: #fff;
}

/* Scrollbars */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--line) transparent;
}

*::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

*::-webkit-scrollbar-track {
	background: var(--wp--preset--color--base);
}

*::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--line);
	border-radius: var(--imx-radius-pill);
	border: 3px solid var(--wp--preset--color--base);
}

*::-webkit-scrollbar-thumb:hover {
	background: var(--wp--preset--color--violet-deep);
}

/* Measure for body copy: keeps long passages readable */
.is-layout-flow > p,
.entry-content > p {
	max-width: 68ch;
}

/* Wrapping guard for long headings and long URLs:
   Unbroken strings can push past their container on narrow screens.
   Allowing breaks anywhere prevents horizontal overflow. */
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
dd {
	overflow-wrap: anywhere;
	word-break: normal;
}

.imx-metric__value,
.imx-stat__value,
.imx-visual__kpi b {
	overflow-wrap: normal;
	word-break: keep-all;
}

.is-layout-flow > p.is-style-lead,
.is-layout-flow > p.imx-lead {
	max-width: 58ch;
}

/* --------------------------------------------------------------------------
   03. Layout utilities
   -------------------------------------------------------------------------- */
.imx-section {
	position: relative;
	padding-block: clamp(4rem, 8vw, 8rem);
}

.imx-section--tight {
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.imx-section--flush-top {
	padding-block-start: 0;
}

.imx-section--flush-bottom {
	padding-block-end: 0;
}

.imx-section--hairline {
	border-top: 1px solid var(--wp--preset--color--line-soft);
}

.imx-stack {
	display: flex;
	flex-direction: column;
}

.imx-stack--xs { gap: 0.5rem; }
.imx-stack--sm { gap: 0.875rem; }
.imx-stack--md { gap: 1.5rem; }
.imx-stack--lg { gap: 2.5rem; }

.imx-center {
	text-align: center;
	margin-inline: auto;
}

.imx-measure-sm { max-width: 46ch; }
.imx-measure-md { max-width: 58ch; }
.imx-measure-lg { max-width: 72ch; }

.imx-aside-rule {
	border-left: 1px solid var(--wp--preset--color--line);
	padding-left: 1.5rem;
}

@media (max-width: 781px) {
	.imx-aside-rule {
		border-left: 0;
		padding-left: 0;
	}
}

/* Card grids, two or three up, collapsing to one column on small screens */
.imx-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.imx-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.imx-grid--4 {
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* Metric grid with hairline dividers */
.imx-grid--metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1px;
	background: var(--wp--preset--color--line-soft);
	border: 1px solid var(--wp--preset--color--line-soft);
	border-radius: var(--imx-radius-lg);
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   04. Text and emphasis
   -------------------------------------------------------------------------- */

/* Headline wrapping: avoids orphan words on the last line.
   text-wrap: balance is a 2023+ CSS feature; older browsers ignore it. */
h1,
h2,
h3,
.imx-lead,
.imx-metric__value,
.imx-quote__text {
	text-wrap: balance;
}

/* Body copy uses pretty wrapping so words are not split at line ends */
p,
li,
dd {
	text-wrap: pretty;
}

.imx-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3);
}

.imx-eyebrow--mono-inline {
	letter-spacing: 0.14em;
}

.imx-eyebrow::before {
	content: "";
	width: 22px;
	height: 1px;
	background: var(--wp--preset--color--gold);
	flex: none;
}

.imx-eyebrow--plain::before {
	display: none;
}

.imx-eyebrow--gold {
	color: var(--wp--preset--color--gold);
}

.imx-accent {
	color: var(--wp--preset--color--gold);
}

.imx-gradient-text {
	background: linear-gradient(100deg, #ffffff 0%, #cdb8ff 38%, var(--wp--preset--color--gold) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.imx-outline-text {
	color: transparent;
	-webkit-text-stroke: 1px var(--wp--preset--color--line);
	text-stroke: 1px var(--wp--preset--color--line);
}

.imx-lead {
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	line-height: 1.65;
	color: var(--wp--preset--color--ink-2);
	max-width: 58ch;
}

.imx-muted {
	color: var(--wp--preset--color--ink-2);
}

.imx-dim {
	color: var(--wp--preset--color--ink-3);
}

.imx-mono {
	font-family: var(--wp--preset--font-family--mono);
}

.imx-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3);
}

.imx-body-sm {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--wp--preset--color--ink-2);
}

.imx-rule {
	height: 1px;
	background: linear-gradient(90deg, var(--wp--preset--color--line) 0%, rgba(39, 43, 72, 0) 100%);
	border: 0;
}

/* Index prefixes (01 / 02 / 03) */
.imx-index {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--violet);
}

/* --------------------------------------------------------------------------
   05. Cards and containers
   -------------------------------------------------------------------------- */
.imx-card {
	position: relative;
	background: linear-gradient(180deg, rgba(29, 32, 64, 0.55) 0%, rgba(20, 22, 42, 0.65) 100%);
	border: 1px solid var(--wp--preset--color--line-soft);
	border-radius: var(--imx-radius-lg);
	padding: clamp(1.25rem, 2.4vw, 1.75rem);
	transition: border-color var(--imx-base), transform var(--imx-base), background var(--imx-base);
}

.imx-card:hover {
	border-color: rgba(109, 70, 232, 0.55);
	transform: translateY(-3px);
}

.imx-card--flat {
	background: var(--wp--preset--color--base-2);
}

.imx-card--flush {
	padding: 0;
	overflow: hidden;
}

.imx-card--plain {
	background: transparent;
	border-color: var(--wp--preset--color--line);
}

/* Gradient highlight along the top edge */
.imx-card--edge::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	border-radius: var(--imx-radius-lg) var(--imx-radius-lg) 0 0;
	background: linear-gradient(90deg, var(--imx-violet-deep), var(--imx-gold));
	opacity: 0;
	transition: opacity var(--imx-base);
}

.imx-card--edge:hover::before {
	opacity: 1;
}

/* Metric cell (used with .imx-grid--metrics) */
.imx-metric {
	background: var(--wp--preset--color--base-2);
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

.imx-metric__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.75rem, 6vw, 4.25rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.045em;
	background: linear-gradient(160deg, #ffffff 0%, #cdb8ff 55%, var(--wp--preset--color--gold) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	display: block;
}

.imx-metric__label {
	margin-top: 0.75rem;
	white-space: normal;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3);
	line-height: 1.5;
}

/* Icon badge */
.imx-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: none;
	border-radius: 12px;
	background: linear-gradient(150deg, rgba(109, 70, 232, 0.28), rgba(24, 34, 75, 0.5));
	border: 1px solid rgba(109, 70, 232, 0.4);
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9375rem;
	font-weight: 600;
}

.imx-badge--gold {
	background: linear-gradient(150deg, rgba(244, 208, 34, 0.16), rgba(24, 34, 75, 0.4));
	border-color: rgba(244, 208, 34, 0.35);
}

.imx-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--imx-radius-pill);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--ink-2);
	background: rgba(20, 22, 42, 0.6);
}

.imx-chip--live::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--success);
	box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.15);
}

/* Glass panel */
.imx-panel {
	background: rgba(20, 22, 42, 0.72);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--imx-radius-xl);
}

/* Gradient-bordered card */
.imx-gradient-border {
	position: relative;
	background: var(--wp--preset--color--base-2);
	border-radius: var(--imx-radius-xl);
	padding: 1px;
	background-image: linear-gradient(135deg, rgba(109, 70, 232, 0.7), rgba(244, 208, 34, 0.35), rgba(39, 43, 72, 0.2));
}

.imx-gradient-border > * {
	background: var(--wp--preset--color--base-2);
	border-radius: calc(var(--imx-radius-xl) - 1px);
}

/* --------------------------------------------------------------------------
   06. Eyebrows, indices and figures
   -------------------------------------------------------------------------- */
.imx-stat-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	background: var(--wp--preset--color--line-soft);
	border: 1px solid var(--wp--preset--color--line-soft);
	border-radius: var(--imx-radius-lg);
	overflow: hidden;
}

.imx-stat {
	flex: 1 1 200px;
	background: var(--wp--preset--color--base-2);
	padding: 1.5rem;
}

.imx-stat__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--wp--preset--color--ink);
	display: block;
}

.imx-stat__label {
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--ink-3);
}

/* Two-up comparison (advertisers vs publishers) */
.imx-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 1.25rem;
}

.imx-split__half {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border: 1px solid var(--wp--preset--color--line-soft);
	border-radius: var(--imx-radius-xl);
	background: linear-gradient(180deg, rgba(29, 32, 64, 0.4) 0%, rgba(13, 14, 27, 0.6) 100%);
}

.imx-split__half--violet {
	border-color: rgba(109, 70, 232, 0.35);
}

.imx-split__half--gold {
	border-color: rgba(244, 208, 34, 0.28);
}

/* Industry benchmark card: a cited third-party figure above the control we apply */
.imx-benchmark__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.25rem, 4.6vw, 3.25rem);
	font-weight: 650;
	line-height: 1;
	letter-spacing: -0.04em;
	background: linear-gradient(150deg, #ffffff 0%, #cdb8ff 58%, var(--wp--preset--color--gold) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.imx-benchmark__label {
	margin-top: 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--wp--preset--color--ink-2);
}

.imx-benchmark__answer {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--line-soft);
}

.imx-benchmark__answer .imx-eyebrow {
	margin-bottom: 0.5rem;
}

.imx-benchmark__answer p {
	color: var(--wp--preset--color--ink);
}

/* --------------------------------------------------------------------------
   07. Buttons
   -------------------------------------------------------------------------- */
.wp-block-button__link {
	transition: background-color var(--imx-fast), color var(--imx-fast), border-color var(--imx-fast), transform var(--imx-fast), box-shadow var(--imx-base);
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 14px 32px -16px rgba(109, 70, 232, 0.9);
}

.wp-block-button__link:active {
	transform: translateY(0);
}

.wp-block-button.is-style-ghost .wp-block-button__link,
.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.is-style-ghost .wp-block-button__link:hover {
	background: rgba(109, 70, 232, 0.14);
	border-color: rgba(109, 70, 232, 0.6);
	box-shadow: none;
}

.wp-block-button.is-style-gold .wp-block-button__link,
.is-style-gold .wp-block-button__link {
	background: var(--wp--preset--color--gold);
	color: #14162a;
	border-color: transparent;
}

.wp-block-button.is-style-gold .wp-block-button__link:hover,
.is-style-gold .wp-block-button__link:hover {
	background: var(--wp--preset--color--gold-soft);
	color: #14162a;
	box-shadow: 0 14px 32px -16px rgba(244, 208, 34, 0.7);
}

.wp-block-button.is-style-link .wp-block-button__link,
.is-style-link .wp-block-button__link {
	background: transparent;
	border: 0;
	padding-inline: 0;
	color: var(--wp--preset--color--gold);
	border-radius: 0;
}

.wp-block-button.is-style-link .wp-block-button__link:hover,
.is-style-link .wp-block-button__link:hover {
	text-decoration: underline;
	box-shadow: none;
	transform: none;
}

/* Text link with trailing arrow */
.imx-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--gold);
	text-decoration: none;
}

.imx-arrow-link::after {
	content: "→";
	transition: transform var(--imx-base);
}

.imx-arrow-link:hover {
	text-decoration: none;
}

.imx-arrow-link:hover::after {
	transform: translateX(4px);
}

/* Spacing when a button row wraps */
.wp-block-buttons {
	gap: 0.875rem;
}

/* --------------------------------------------------------------------------
   08. Header and navigation
   -------------------------------------------------------------------------- */
.imx-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(8, 8, 15, 0.72);
	backdrop-filter: blur(16px) saturate(150%);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	border-bottom: 1px solid transparent;
	transition: background var(--imx-base), border-color var(--imx-base);
}

.imx-header.is-scrolled {
	background: rgba(8, 8, 15, 0.92);
	border-bottom-color: var(--wp--preset--color--line-soft);
}

.imx-header__inner {
	min-height: var(--imx-header-h);
	display: flex;
	align-items: center;
	gap: 2rem;
}

.imx-brand {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0;
	text-decoration: none;
	flex: none;
}

/* The wordmark carries the brand name; the small badge that used to hold the
   initials was removed, so this is now the primary lockup. */
.imx-brand__mark {
	display: inline-block;
	padding: 0.5rem 1rem;
	border-radius: 14px;
	background: linear-gradient(135deg, #18224B 0%, #5A37C3 62%, #F4D022 100%);
	box-shadow: 0 10px 26px -14px rgba(109, 70, 232, 0.9);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.1;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
	/* The gradient ends in gold, which white text would sit on with weak
	   contrast; the shadow restores separation without muddying the mark. */
	text-shadow: 0 1px 3px rgba(8, 8, 15, 0.55);
}

.imx-brand__name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.0625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	line-height: 1;
}

.imx-brand__sub {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3);
}

/* --------------------------------------------------------------------------
   Navigation
   --------------------------------------------------------------------------
   Built from plain HTML with our own class names rather than the core
   navigation block, for two reasons:
     1. Core and plugin CSS keep targeting .wp-block-navigation*, which
        overrode the layout and rendered the menu as a bulleted column.
     2. Plain HTML avoids block-attribute escaping, so the URL placeholders survive (the block version produced "http://https://...",
        because esc_url() ran before our replacement filter).
   The mobile menu is a CSS-only disclosure (checkbox + label), so it works
   with JavaScript disabled.
   -------------------------------------------------------------------------- */

.imx-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Grow to fill the space between brand and CTA so the menu sits centred
	   rather than hugging the brand. */
	flex: 1 1 auto;
	min-width: 0;
}

/* Specificity note: inc/critical-css.php is injected via wp_add_inline_style,
   so it comes AFTER this file. Mobile overrides below therefore use
   .imx-header .imx-nav... to outrank the critical block's base rules. */
.imx-header .imx-nav__list {
	display: flex;          /* desktop: horizontal row */
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.imx-nav__list > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.imx-nav__list a {
	display: inline-block;
	padding: 0.5rem 0.85rem;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--wp--preset--color--ink-2);
	text-decoration: none;
	border-radius: var(--imx-radius-pill);
	white-space: nowrap;
	transition: color var(--imx-fast), background-color var(--imx-fast);
}

.imx-nav__list a:hover,
.imx-nav__list a:focus-visible {
	color: var(--wp--preset--color--ink);
	background: rgba(109, 70, 232, 0.16);
	text-decoration: none;
}

/* Current page. Solid fill rather than a tint so it is clearly a location
   indicator and not confused with hover, which stays translucent. */
.imx-nav__list a.is-active,
.imx-nav__list a[aria-current="page"] {
	color: #fff;
	/* Flat brand fill, not the gradient: on a wide word the gradient muddies,
	   and a flat violet keeps white text at a stable contrast. */
	background: var(--wp--preset--color--violet);
	box-shadow: 0 8px 20px -10px rgba(109, 70, 232, 0.9);
}

/* Drives the mobile panel only; hidden while the horizontal menu shows. */
.imx-nav__toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 1px;
	height: 1px;
}

.imx-nav__burger {
	display: none;
}

@media (max-width: 1200px) {
	/* Doubled class name beats the single-class .imx-nav rule in
	   inc/critical-css.php. That block is injected via wp_add_inline_style,
	   so it always comes last and same-specificity rules there would win;
	   raising specificity here keeps the mobile layout independent of
	   source order. */
	/* !important is deliberate and load-bearing here.
	   inc/critical-css.php is injected with wp_add_inline_style, so it always
	   comes after this file; any same-specificity declaration there would win
	   regardless of how specific these selectors are. Marking the mobile
	   layout as important makes it independent of injection order — verified
	   by measurement, since several specificity-only attempts silently lost. */
	/* Pinned to the header's right edge with absolute positioning rather than
	   flex distribution. Flex-based attempts kept falling short of the edge:
	   .imx-header__actions still occupies flex space on mobile even though its
	   button is hidden, and the header's space-between then split the leftover
	   into gaps. Absolute positioning removes that coupling entirely. */
	.imx-nav.imx-nav {
		position: absolute !important;
		top: 50% !important;
		/* 8px from the viewport edge: flush enough to read as "right", with
		   enough breathing room not to look glued to the bezel. */
		right: 8px !important;
		transform: translateY(-50%);
		flex: 0 0 auto !important;
		margin: 0 !important;
		justify-content: flex-end !important;
	}

	.imx-nav.imx-nav .imx-nav__burger {
		display: flex;
		/* Without border-box the 42px is the content box, so padding and the
		   border inflate the button to 64px. */
		box-sizing: border-box;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 42px;
		height: 42px;
		padding: 10px;
		cursor: pointer;
		border: 1px solid var(--wp--preset--color--line);
		border-radius: var(--imx-radius-md);
		background: rgba(20, 22, 42, 0.6);
		transition: border-color var(--imx-fast);
	}

	.imx-nav.imx-nav .imx-nav__burger:hover {
		border-color: rgba(109, 70, 232, 0.6);
	}

	.imx-nav.imx-nav .imx-nav__burger span {
		display: block;
		height: 2px;
		width: 100%;
		border-radius: 2px;
		background: var(--wp--preset--color--ink);
		transition: transform var(--imx-base), opacity var(--imx-fast);
	}

	.imx-nav.imx-nav .imx-nav__toggle:checked ~ .imx-nav__burger span:nth-child(1) {
		transform: translateY(6px) rotate(45deg);
	}

	.imx-nav.imx-nav .imx-nav__toggle:checked ~ .imx-nav__burger span:nth-child(2) {
		opacity: 0;
	}

	.imx-nav.imx-nav .imx-nav__toggle:checked ~ .imx-nav__burger span:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg);
	}

	.imx-nav.imx-nav .imx-nav__list {
		position: absolute;
		top: calc(100% + 0.75rem);
		right: 0;
		z-index: 60;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0.125rem;
		min-width: 240px;
		padding: 0.5rem;
		background: var(--wp--preset--color--surface);
		border: 1px solid var(--wp--preset--color--line);
		border-radius: var(--imx-radius-lg);
		box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.9);
	}

	.imx-nav.imx-nav .imx-nav__toggle:checked ~ .imx-nav__list {
		display: flex;
	}

	.imx-nav__list a {
		padding: 0.75rem 1rem;
		border-radius: var(--imx-radius-md);
		font-size: 1rem;
	}
}

/* --------------------------------------------------------------------------
   09. Footer
   -------------------------------------------------------------------------- */
.imx-footer {
	border-top: 1px solid var(--wp--preset--color--line-soft);
	background: linear-gradient(180deg, rgba(13, 14, 27, 0.4) 0%, rgba(8, 8, 15, 1) 100%);
}

.imx-footer__heading {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3);
	margin-bottom: 1rem;
}

.imx-footer a {
	color: var(--wp--preset--color--ink-2);
	text-decoration: none;
	font-size: 0.9375rem;
	transition: color var(--imx-fast);
}

.imx-footer a:hover {
	color: var(--wp--preset--color--gold);
}

.imx-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.imx-footer__bottom {
	border-top: 1px solid var(--wp--preset--color--line-soft);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--ink-3);
}

/* --------------------------------------------------------------------------
   10. Section rhythm and decoration
   -------------------------------------------------------------------------- */
.imx-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.imx-hero__glow {
	position: absolute;
	z-index: -1;
	inset: -20% -10% auto -10%;
	height: 90%;
	background:
		radial-gradient(45% 55% at 18% 12%, rgba(109, 70, 232, 0.5) 0%, rgba(8, 8, 15, 0) 70%),
		radial-gradient(38% 48% at 82% 0%, rgba(244, 208, 34, 0.16) 0%, rgba(8, 8, 15, 0) 72%);
	filter: blur(8px);
	pointer-events: none;
}

.imx-grid-lines {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(39, 43, 72, 0.4) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(39, 43, 72, 0.4) 1px, transparent 1px);
	background-size: 88px 88px;
	mask-image: radial-gradient(75% 60% at 50% 30%, #000 0%, transparent 78%);
	-webkit-mask-image: radial-gradient(75% 60% at 50% 30%, #000 0%, transparent 78%);
	opacity: 0.55;
}

.imx-noise {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Hero visual: a programmatic data panel instead of stock photography */
.imx-visual {
	position: relative;
	/* Stay inside the parent column: English rows are wider than the Chinese originals and will burst the column if unconstrained */
	max-width: 100%;
	min-width: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--imx-radius-xl);
	background:
		linear-gradient(180deg, rgba(29, 32, 64, 0.75) 0%, rgba(13, 14, 27, 0.9) 100%);
	overflow: hidden;
	box-shadow: 0 40px 90px -50px rgba(90, 55, 195, 0.8);
}

.imx-visual__bar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--line-soft);
	background: rgba(8, 8, 15, 0.5);
}

.imx-visual__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--line);
}

.imx-visual__dot--a { background: rgba(244, 208, 34, 0.8); }
.imx-visual__dot--b { background: rgba(109, 70, 232, 0.8); }
.imx-visual__dot--c { background: rgba(52, 211, 153, 0.8); }

.imx-visual__body {
	padding: clamp(1rem, 2.4vw, 1.5rem);
	display: grid;
	gap: 1rem;
	min-width: 0;
}

.imx-visual__body > * {
	min-width: 0;
}

.imx-visual__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.75rem;
	align-items: center;
	min-width: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	color: var(--wp--preset--color--ink-2);
	overflow-wrap: anywhere;
}

.imx-visual__track {
	height: 6px;
	border-radius: var(--wp--preset--radius--pill, 999px);
	background: rgba(39, 43, 72, 0.6);
	overflow: hidden;
}

.imx-visual__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--imx-violet), var(--imx-gold));
}

.imx-visual__kpis {
	display: grid;
	/* Size columns to their content rather than forcing equal thirds:
	   English labels such as "FRAUD WATCH" are wider than the Chinese originals, so equal thirds clip them. */
	grid-template-columns: repeat(3, minmax(0, auto));
	gap: 1px;
	background: var(--wp--preset--color--line-soft);
	border-top: 1px solid var(--wp--preset--color--line-soft);
}

.imx-visual__kpi {
	background: rgba(13, 14, 27, 0.9);
	padding: 0.9rem 0.75rem;
	text-align: center;
	min-width: 0;
}

.imx-visual__kpi b {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--ink);
}

.imx-visual__kpi span {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.5625rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3);
	overflow-wrap: anywhere;
	display: block;
	margin-top: 0.25rem;
}

/* Trust bar and partner marks */
.imx-logo-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.25rem, 4vw, 3rem);
}

.imx-logo-row span {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3);
	opacity: 0.75;
	transition: color var(--imx-base), opacity var(--imx-base);
	white-space: nowrap;
}

.imx-logo-row span:hover {
	color: var(--wp--preset--color--ink);
	opacity: 1;
}

/* Numbered feature list (oversized 01/02/03) */
.imx-numbered {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--wp--preset--color--line-soft);
}

.imx-numbered__item {
	display: grid;
	grid-template-columns: 84px 1fr;
	gap: 1.5rem;
	padding: clamp(1.25rem, 3vw, 2rem) 0;
	border-bottom: 1px solid var(--wp--preset--color--line-soft);
	align-items: start;
}

.imx-numbered__num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--violet);
	padding-top: 0.35rem;
}

@media (max-width: 600px) {
	.imx-numbered__item {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}
}

/* Process steps */
.imx-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.25rem;
	counter-reset: step;
}

.imx-step {
	position: relative;
	padding-top: 2.25rem;
}

.imx-step::before {
	counter-increment: step;
	content: counter(step, decimal-leading-zero);
	position: absolute;
	top: 0;
	left: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--gold);
}

.imx-step::after {
	content: "";
	position: absolute;
	top: 0.55rem;
	left: 2.75rem;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, var(--wp--preset--color--line), transparent);
}

/* Quotation */
.imx-quote {
	border-left: 2px solid var(--wp--preset--color--violet);
	padding-left: 1.5rem;
}

.imx-quote__text {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.125rem, 2.2vw, 1.625rem);
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
	max-width: 46ch;
}

.imx-quote__by {
	margin-top: 1rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink-3);
}

/* Annotation card (AI and data points) */
.imx-note {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	padding: 0.875rem 1rem;
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: var(--imx-radius-md);
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink-2);
	background: rgba(13, 14, 27, 0.6);
}

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */
.imx-form {
	display: grid;
	gap: 1rem;
}

.imx-form__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
}

.imx-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.imx-field > label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3);
}

.imx-field input[type="text"],
.imx-field input[type="email"],
.imx-field input[type="url"],
.imx-field input[type="tel"],
.imx-field select,
.imx-field textarea {
	width: 100%;
	padding: 0.8rem 1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink);
	background: rgba(8, 8, 15, 0.6);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--imx-radius-md);
	transition: border-color var(--imx-fast), box-shadow var(--imx-fast), background var(--imx-fast);
	appearance: none;
}

.imx-field textarea {
	min-height: 130px;
	resize: vertical;
}

.imx-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237C82A3' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.5rem;
}

.imx-field select option {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

.imx-field input::placeholder,
.imx-field textarea::placeholder {
	color: #565c7d;
}

.imx-field input:focus,
.imx-field select:focus,
.imx-field textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--violet);
	background: rgba(20, 22, 42, 0.8);
	box-shadow: 0 0 0 4px rgba(109, 70, 232, 0.18);
}

.imx-field input[aria-invalid="true"],
.imx-field textarea[aria-invalid="true"] {
	border-color: var(--wp--preset--color--danger);
}

/* Hidden honeypot field */
.imx-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.imx-form__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	justify-content: space-between;
}

.imx-form__consent {
	font-size: 0.75rem;
	color: var(--wp--preset--color--ink-3);
	max-width: 42ch;
	line-height: 1.6;
}

.imx-form__note {
	font-size: 0.8125rem;
	padding: 0.75rem 1rem;
	border-radius: var(--imx-radius-md);
	border: 1px solid var(--wp--preset--color--line);
	background: rgba(13, 14, 27, 0.7);
}

.imx-form__note--ok {
	border-color: rgba(52, 211, 153, 0.4);
	color: var(--wp--preset--color--success);
}

.imx-form__note--err {
	border-color: rgba(248, 113, 113, 0.4);
	color: var(--wp--preset--color--danger);
}

.imx-form button[type="submit"] {
	justify-self: start;
	padding: 0.85em 1.9em;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 600;
	color: #fff;
	background: var(--wp--preset--color--violet);
	border: 1px solid transparent;
	border-radius: var(--imx-radius-pill);
	cursor: pointer;
	transition: background-color var(--imx-fast), transform var(--imx-fast), box-shadow var(--imx-base);
}

.imx-form button[type="submit"]:hover {
	background: var(--wp--preset--color--violet-deep);
	transform: translateY(-1px);
	box-shadow: 0 14px 32px -16px rgba(109, 70, 232, 0.9);
}

.imx-form button[type="submit"][disabled] {
	opacity: 0.6;
	cursor: progress;
	transform: none;
}

/* Contact detail rows */
.imx-contact-line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 2rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line-soft);
}

.imx-contact-line dt {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3);
	flex: none;
}

.imx-contact-line dd {
	margin: 0;
	text-align: right;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink);
	/* Emails, timings and similar must not break mid-token */
	overflow-wrap: normal;
	word-break: keep-all;
}

/* --------------------------------------------------------------------------
   12. Lists and checklists
   -------------------------------------------------------------------------- */
.imx-checks {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.875rem;
}

.imx-checks li {
	position: relative;
	padding-left: 1.9rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-2);
}

.imx-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.32em;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(109, 70, 232, 0.18);
	border: 1px solid rgba(109, 70, 232, 0.5);
}

.imx-checks li::after {
	content: "";
	position: absolute;
	left: 5.5px;
	top: 0.62em;
	width: 6px;
	height: 3px;
	border-left: 1.6px solid var(--wp--preset--color--gold);
	border-bottom: 1.6px solid var(--wp--preset--color--gold);
	transform: rotate(-45deg);
}

.imx-checks--gold li::before {
	background: rgba(244, 208, 34, 0.14);
	border-color: rgba(244, 208, 34, 0.45);
}

.imx-checks--gold li::after {
	border-color: var(--wp--preset--color--gold-soft);
}

.imx-checks--plain li::marker {
	content: none;
}

/* Definition list */
.imx-kv {
	display: grid;
	gap: 0;
	margin: 0;
}

.imx-kv > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line-soft);
	font-size: 0.9375rem;
}

.imx-kv dt {
	color: var(--wp--preset--color--ink-3);
}

.imx-kv dd {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   13. Marquee
   -------------------------------------------------------------------------- */
.imx-marquee {
	position: relative;
	overflow: hidden;
	padding-block: 1.125rem;
	border-top: 1px solid var(--wp--preset--color--line-soft);
	border-bottom: 1px solid var(--wp--preset--color--line-soft);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.imx-marquee__track {
	display: flex;
	width: max-content;
	gap: 3rem;
	animation: imx-marquee 42s linear infinite;
}

.imx-marquee__track > * {
	flex: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3);
	white-space: nowrap;
}

.imx-marquee:hover .imx-marquee__track {
	animation-play-state: paused;
}

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

/* --------------------------------------------------------------------------
   14. Inner pages and legal pages
   -------------------------------------------------------------------------- */
.imx-page-hero {
	padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 4vw, 3.5rem);
	border-bottom: 1px solid var(--wp--preset--color--line-soft);
}

.imx-legal {
	max-width: 74ch;
}

.imx-legal h2 {
	margin-top: 2.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--wp--preset--color--line-soft);
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
}

.imx-legal h3 {
	margin-top: 2rem;
	font-size: 1.125rem;
}

.imx-legal p,
.imx-legal li {
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--wp--preset--color--ink-2);
}

.imx-legal a {
	color: var(--wp--preset--color--gold);
}

.imx-toc {
	list-style: none;
	padding: 0;
	counter-reset: toc;
	display: grid;
	gap: 0.5rem;
}

.imx-toc li {
	counter-increment: toc;
	font-size: 0.875rem;
}

.imx-toc li::before {
	content: counter(toc, decimal-leading-zero) "  ";
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--violet);
	margin-right: 0.5rem;
}

/* 404 */
.imx-404__code {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(5rem, 18vw, 12rem);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.05em;
	background: linear-gradient(150deg, #ffffff 0%, #cdb8ff 45%, var(--wp--preset--color--gold) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* Search results and archives */
.imx-archive-item {
	padding-block: 1.75rem;
	border-bottom: 1px solid var(--wp--preset--color--line-soft);
}

.imx-archive-item h2 {
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
}

.imx-archive-item h2 a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.imx-archive-item h2 a:hover {
	color: var(--wp--preset--color--gold);
}

.imx-meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3);
}

/* --------------------------------------------------------------------------
   15. Motion and accessibility
   -------------------------------------------------------------------------- */

/* Progressive enhancement: everything is fully visible by default.
   Entrance animation only activates once JS has run and added .imx-js to <html>.
   That way content never disappears if the script is blocked, fails, or is disabled. */
.imx-reveal {
	opacity: 1;
	transform: none;
}

.imx-js .imx-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 620ms var(--imx-ease-out), transform 620ms var(--imx-ease-out);
	will-change: opacity, transform;
}

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

:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
	border-radius: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--violet);
	color: #fff;
	border-radius: var(--imx-radius-md);
	text-decoration: none;
	transition: top var(--imx-base);
}

.skip-link:focus {
	top: 1rem;
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.imx-js .imx-reveal {
		opacity: 1;
		transform: none;
	}

	.imx-card:hover,
	.wp-block-button__link:hover {
		transform: none;
	}
}

@media print {
	.imx-header,
	.imx-footer,
	.imx-marquee {
		display: none;
	}

	body {
		background: #fff;
		color: #000;
	}
}

/* --------------------------------------------------------------------------
   16. Class projections for registered block styles
   --------------------------------------------------------------------------
   These classes are registered in inc/block-styles.php and appear in the editor Styles panel.
   Selecting one only adds the class name, so the styling has to live here.
   Without it the option appears broken to non-technical editors.
   Naming convention:
     - Prefixed variants (is-style-imx-card) apply to the block itself.
     - Unprefixed variants (is-style-lead and friends) must cover both the block
       and its inner element, so each selector is written twice below.
   -------------------------------------------------------------------------- */

/* Card */
.wp-block-group.is-style-imx-card,
.is-style-imx-card > .wp-block-group__inner-container {
	position: relative;
	background: linear-gradient(180deg, rgba(29, 32, 64, 0.55) 0%, rgba(20, 22, 42, 0.65) 100%);
	border: 1px solid var(--wp--preset--color--line-soft);
	border-radius: var(--imx-radius-lg);
	padding: clamp(1.25rem, 2.4vw, 1.75rem);
	transition: border-color var(--imx-base), transform var(--imx-base);
}

.wp-block-group.is-style-imx-card:hover {
	border-color: rgba(109, 70, 232, 0.55);
	transform: translateY(-3px);
}

/* Glass panel */
.wp-block-group.is-style-imx-panel {
	background: rgba(20, 22, 42, 0.72);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--imx-radius-xl);
	padding: clamp(1.25rem, 2.4vw, 2rem);
}

/* Section padding */
.wp-block-group.is-style-imx-section {
	padding-block: clamp(4rem, 8vw, 8rem);
}

/* Lead paragraph */
p.is-style-lead,
.is-style-lead > p {
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	line-height: 1.65;
	color: var(--wp--preset--color--ink-2);
	max-width: 58ch;
}

/* Eyebrow */
p.is-style-eyebrow,
.is-style-eyebrow > p {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3);
}

p.is-style-eyebrow::before,
.is-style-eyebrow > p::before {
	content: "";
	width: 22px;
	height: 1px;
	background: var(--wp--preset--color--gold);
	flex: none;
}

/* Checklist */
ul.is-style-checks,
.is-style-checks > ul {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: 0.875rem;
}

ul.is-style-checks > li,
.is-style-checks > ul > li {
	position: relative;
	padding-left: 1.9rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-2);
}

ul.is-style-checks > li::before,
.is-style-checks > ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.32em;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(109, 70, 232, 0.18);
	border: 1px solid rgba(109, 70, 232, 0.5);
}

ul.is-style-checks > li::after,
.is-style-checks > ul > li::after {
	content: "";
	position: absolute;
	left: 5.5px;
	top: 0.62em;
	width: 6px;
	height: 3px;
	border-left: 1.6px solid var(--wp--preset--color--gold);
	border-bottom: 1.6px solid var(--wp--preset--color--gold);
	transform: rotate(-45deg);
}

/* Gradient text */
.is-style-imx-gradient-text,
h1.is-style-imx-gradient-text,
h2.is-style-imx-gradient-text {
	background: linear-gradient(100deg, #ffffff 0%, #cdb8ff 38%, var(--wp--preset--color--gold) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* Outline text */
.is-style-imx-outline-text {
	color: transparent;
	-webkit-text-stroke: 1px var(--wp--preset--color--line);
}

/* ==========================================================================
   WordPress core layout overrides
   --------------------------------------------------------------------------
   Root cause: WordPress emits
     .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))
       { max-width: var(--wp--style--global--content-size); }
   That selector has 3 classes outside :where() (and :where() adds none), while
   core's own
     .is-layout-constrained > .alignwide { max-width: ...wide-size }
   only has 2. So the constraint always wins and every alignwide block is
   squeezed to contentSize (760px) — which is what forced words to break and
   buttons to wrap.

   Matching the same specificity here (3 classes) plus this stylesheet loading
   after the core rules lets alignwide actually reach wideSize (1240px).
   Deliberately not using !important, so editor customisations still win.
   ========================================================================== */

.is-layout-constrained > .alignwide:not(.alignleft):not(.alignright) {
	max-width: var(--wp--style--global--wide-size, 1240px);
}

/* Core leaves alignleft / alignright unconstrained, but the rule above targets
   them too. Release them explicitly. */
.is-layout-constrained > .alignleft:not(.alignwide):not(.alignright),
.is-layout-constrained > .alignright:not(.alignwide):not(.alignleft) {
	max-width: none;
}

/* --------------------------------------------------------------------------
   Break-word guards
   --------------------------------------------------------------------------
   English words and numbers run much longer than the Chinese copy this layout
   started from. A blanket overflow-wrap: anywhere breaks "hello@infimax.net"
   across lines, clips the "+" off "1,000+" and splits "Book a call" in two.
   Tuned per element type below.
   -------------------------------------------------------------------------- */

/* Figures: never wrap, never split a character */
.imx-metric__value,
.imx-stat__value,
.imx-visual__kpi b,
.imx-benchmark__value,
.imx-404__code {
	overflow-wrap: normal;
	word-break: keep-all;
	white-space: nowrap;
}

/* Unbreakable strings: emails, settlement values, short labels */
.imx-footer a,
.imx-contact-line dd,
.imx-contact-line dd a,
a[href^="mailto:"] {
	overflow-wrap: normal;
	word-break: keep-all;
}

/* Body copy: break between words, never inside one */
p,
li,
dd,
dt,
.imx-body-sm,
.imx-lead,
.imx-quote__text {
	overflow-wrap: break-word;
	word-break: normal;
}

/* Headings: allow wrapping at spaces, never mid-word */
h1, h2, h3, h4, h5, h6,
.imx-eyebrow,
.imx-metric__label,
.imx-benchmark__label,
.imx-visual__row span {
	overflow-wrap: break-word;
	word-break: normal;
}

/* Buttons: widening a button beats wrapping its label */
.wp-block-button__link,
.imx-form button[type="submit"] {
	white-space: nowrap;
}


/* Anchor scroll offset.
   scroll-padding on the root handles this in modern browsers, but
   scroll-margin on the target is more consistently applied, so both are set.
   Without it the sticky header covers the heading you just jumped to. */
[id] {
	/* Hard-coded rather than calc(var(--imx-header-h)): if that variable
	   is missing (stale stylesheet) the whole calc() is invalid and the
	   anchor lands underneath the sticky header. */
	scroll-margin-top: 100px;
}

/* --------------------------------------------------------------------------
   Responsive refinements
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
	.imx-header__actions .wp-block-button {
		display: none;
	}


	.imx-numbered__item {
		grid-template-columns: 64px 1fr;
	}
}

@media (max-width: 781px) {
	:root {
		--imx-header-h: 68px;
	}

	.imx-visual__kpis {
		grid-template-columns: 1fr;
	}

	.imx-visual__kpi {
		text-align: left;
	}

	.imx-contact-line {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}

	.imx-contact-line dd {
		text-align: left;
	}
}