/**
 * BuildMatrixTech design system — core layer.
 *
 * Tokens, base typography, layout primitives and the components shared by
 * more than one template (cards, section headings, process steps, FAQ,
 * closing CTA, scroll reveal). Page-specific styles live in their own
 * files and are only loaded where needed (see functions.php).
 *
 * Palette "Porcelain & Cobalt": light porcelain surfaces, graphite ink,
 * one cobalt blue for every call to action, and a clinical teal used
 * sparingly as a secondary accent. Dark graphite is reserved for a few
 * emphasis bands (process, closing CTA).
 *
 * Contrast (WCAG 2.2 AA, verified):
 *   ink #101828 / white 17.7:1 · body #3D4A5C / porcelain 8.5:1
 *   muted #5F6B7A / white 5.4:1, / porcelain 5.1:1, / tint 4.9:1
 *   cobalt #2B59D9 / white 5.9:1 · hover #2149B8 7.8:1 · active #1A3B96 10:1
 *   cobalt-bright #3A68E6 (buttons on graphite) / white 4.9:1, vs graphite 3.6:1
 *   teal #0E7C78 / white 5.0:1 · teal-light #7FD6D0 on graphite ≥ 9:1
 */

/* ------------------------------------------------------------------
 * Tokens
 * ---------------------------------------------------------------- */
:root {
	/* Brand */
	--bmx-primary: #2b59d9;
	--bmx-primary-hover: #2149b8;
	--bmx-primary-active: #1a3b96;
	--bmx-primary-bright: #3a68e6;
	--bmx-primary-soft: #eef3fe;
	--bmx-teal: #0e7c78;
	--bmx-teal-soft: #e7f5f4;
	--bmx-accent: #7fd6d0; /* accent on dark graphite */

	/* Neutrals */
	--bmx-ink: #101828;
	--bmx-text: #3d4a5c;
	--bmx-muted: #5f6b7a;
	--bmx-line: #e4e7ec;
	--bmx-line-strong: #d0d5dd;
	--bmx-surface: #f7f8fa;
	--bmx-white: #fff;

	/* Dark graphite (emphasis bands only) */
	--bmx-night: #111a2e;
	--bmx-night-2: #1a2540;
	--bmx-on-dark: #eef2f8;
	--bmx-on-dark-muted: rgba(238, 242, 248, 0.76);
	--bmx-line-dark: rgba(255, 255, 255, 0.12);
	--bmx-link-dark: #a8c1ff;

	/* Feedback */
	--bmx-success: #15803d;
	--bmx-success-soft: #ecfdf3;
	--bmx-error: #b42318;
	--bmx-error-soft: #fef3f2;

	/* Type */
	--bmx-font-display: "Manrope", "Inter", system-ui, sans-serif;
	--bmx-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Shape, depth, motion */
	--bmx-radius-sm: 8px;
	--bmx-radius: 12px;
	--bmx-radius-lg: 16px;
	--bmx-radius-btn: 10px;
	--bmx-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
	--bmx-shadow-md: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 28px -14px rgba(16, 24, 40, 0.16);
	--bmx-shadow-lg: 0 24px 56px -24px rgba(16, 24, 40, 0.28);
	--bmx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--bmx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	/* Layout */
	--bmx-container: 1200px;
	--bmx-gutter: clamp(16px, 4vw, 32px);
	--bmx-section: clamp(56px, 7vw, 104px);
	--bmx-header-h: 68px;
	--bmx-admin-bar: var(--wp-admin--admin-bar--height, 0px);

	/* Graphite emphasis band: cobalt and teal glows */
	--bmx-bg-night:
		radial-gradient(55% 80% at 85% 0%, rgba(43, 89, 217, 0.38), transparent 70%),
		radial-gradient(40% 60% at 0% 100%, rgba(14, 124, 120, 0.22), transparent 70%),
		linear-gradient(180deg, var(--bmx-night) 0%, var(--bmx-night-2) 100%);
	--bmx-dots: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.4px);

	/* Soft navy: the earlier navy direction, lightened, for the hero,
	   page-title band and footer. White text 11.8–14:1, gold 6.5:1+. */
	--bmx-navy: #1b2b4b;
	--bmx-navy-2: #24375f;
	--bmx-gold: #e8ba60;
	--bmx-bg-navy:
		radial-gradient(55% 80% at 88% 0%, rgba(58, 104, 230, 0.32), transparent 70%),
		radial-gradient(40% 60% at 0% 100%, rgba(127, 214, 208, 0.08), transparent 70%),
		linear-gradient(180deg, var(--bmx-navy) 0%, var(--bmx-navy-2) 100%);

	/* Light "porcelain" backdrop (kept for light sections) */
	--bmx-bg-light:
		radial-gradient(60% 80% at 90% 0%, rgba(43, 89, 217, 0.1), transparent 70%),
		radial-gradient(45% 60% at 0% 100%, rgba(14, 124, 120, 0.07), transparent 70%),
		linear-gradient(180deg, #fff 0%, var(--bmx-surface) 100%);
	--bmx-dots-light: radial-gradient(rgba(16, 24, 40, 0.09) 1px, transparent 1.4px);
}

/* ------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-padding-top: calc(var(--bmx-header-h) + var(--bmx-admin-bar) + 16px);
	-webkit-text-size-adjust: 100%;
}

body {
	color: var(--bmx-text);
	background: var(--bmx-white);
	font-family: var(--bmx-font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	/* clip (not hidden): prevents sideways scroll without turning body
	   into a scroll container, which would break the sticky header. */
	overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--bmx-ink);
	font-family: var(--bmx-font-display);
	text-wrap: balance;
	margin: 0;
}

p {
	margin: 0;
	text-wrap: pretty;
}

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

a {
	color: var(--bmx-primary);
	text-underline-offset: 0.18em;
	transition: color 0.2s var(--bmx-ease);
}

a:hover {
	color: var(--bmx-primary-hover);
}

::selection {
	background: rgba(43, 89, 217, 0.16);
}

/* Template spacing: every layout gap is owned by the components below,
   not by WordPress's default block gap. */
.wp-site-blocks > *,
.bmx-main > *,
.bmx-main > .wp-block-post-content > * {
	margin-block: 0;
}

/* Sticky header: the template-part wrapper is the sticky element, since
   sticky positioning is bounded by the parent box. */
.bmx-header-part {
	position: sticky;
	top: var(--bmx-admin-bar);
	z-index: 100;
}

/* Focus: always visible for keyboard users, never on mouse click. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--bmx-primary);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Beats the parent theme's :where(.wp-site-blocks *:focus) outline,
   which otherwise also draws on mouse clicks. */
.wp-site-blocks *:focus:not(:focus-visible) {
	outline: none;
}

.bmx-on-dark :where(a, button, summary):focus-visible,
.bmx-section--dark :where(a, button, summary):focus-visible,
.bmx-hero :where(a, button):focus-visible,
.bmx-page-title :where(a, button):focus-visible,
.bmx-footer :where(a, button):focus-visible,
.bmx-cta :where(a, button):focus-visible,
.bmx-side-card--dark :where(a, button):focus-visible {
	outline-color: var(--bmx-accent);
}

.wp-site-blocks a,
.wp-site-blocks button {
	-webkit-tap-highlight-color: transparent;
}

.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.screen-reader-text:focus {
	clip: auto;
	width: auto;
	height: auto;
	top: 12px;
	left: 12px;
	z-index: 1000;
	padding: 12px 18px;
	background: var(--bmx-ink);
	color: var(--bmx-white);
	border-radius: var(--bmx-radius-sm);
	text-decoration: none;
}

.bmx-icon {
	width: 1.25em;
	height: 1.25em;
	flex-shrink: 0;
	vertical-align: middle;
}

/* ------------------------------------------------------------------
 * Layout
 * ---------------------------------------------------------------- */
.bmx-container {
	width: 100%;
	max-width: calc(var(--bmx-container) + 2 * var(--bmx-gutter));
	margin-inline: auto;
	padding-inline: var(--bmx-gutter);
	box-sizing: border-box;
}

.bmx-narrow {
	max-width: calc(760px + 2 * var(--bmx-gutter));
}

.bmx-section {
	position: relative;
	padding-block: var(--bmx-section);
}

.bmx-section--tight {
	padding-block: 0 var(--bmx-section);
}

.bmx-section--surface {
	background: var(--bmx-surface);
}

.bmx-section--surface + .bmx-section--surface {
	padding-top: 0;
}

.bmx-section--dark {
	background: var(--bmx-bg-night);
	color: var(--bmx-on-dark-muted);
	isolation: isolate;
}

.bmx-section--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--bmx-dots);
	background-size: 22px 22px;
	mask-image: radial-gradient(ellipse 70% 80% at 70% 20%, #000 20%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 20%, #000 20%, transparent 75%);
	pointer-events: none;
}

.bmx-section--dark h2,
.bmx-section--dark h3 {
	color: var(--bmx-white);
}

.bmx-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.bmx-grid--2,
	.bmx-grid--3,
	.bmx-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.bmx-grid {
		gap: 24px;
	}

	.bmx-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.bmx-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Heading on one side, content on the other */
.bmx-split {
	display: grid;
	gap: 40px;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 960px) {
	.bmx-split {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: clamp(48px, 6vw, 96px);
		align-items: start;
	}

	.bmx-split--wide {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: center;
	}

	.bmx-split__aside {
		position: sticky;
		top: calc(var(--bmx-header-h) + var(--bmx-admin-bar) + 32px);
	}
}

/* ------------------------------------------------------------------
 * Section headings
 * ---------------------------------------------------------------- */
.bmx-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	color: var(--bmx-teal);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bmx-eyebrow::before {
	content: "";
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.bmx-section--dark .bmx-eyebrow {
	color: var(--bmx-accent);
}

.bmx-section-head {
	max-width: 640px;
}

.bmx-section-head__title {
	font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
	line-height: 1.18;
	letter-spacing: -0.025em;
	font-weight: 700;
}

.bmx-section-head__lead,
.bmx-lead {
	margin-top: 14px;
	font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	line-height: 1.65;
	color: var(--bmx-text);
}

.bmx-section--dark .bmx-section-head__lead {
	color: var(--bmx-on-dark-muted);
}

.bmx-section-head--center {
	margin-inline: auto;
	text-align: center;
}

.bmx-section-head--center .bmx-eyebrow::after {
	content: "";
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

/* Heading on the left, a quiet link on the right */
.bmx-section-top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 40px;
	margin-bottom: clamp(32px, 4vw, 48px);
}

.bmx-section > .bmx-container > .bmx-section-head {
	margin-bottom: clamp(32px, 4vw, 48px);
}

/* Text link with an arrow that nudges forward on hover */
.bmx-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--bmx-primary);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
}

.bmx-link-arrow .bmx-icon {
	width: 1.05em;
	height: 1.05em;
	transition: transform 0.25s var(--bmx-ease);
}

.bmx-link-arrow:hover {
	color: var(--bmx-primary-hover);
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.bmx-link-arrow:hover .bmx-icon {
	transform: translateX(3px);
}

.bmx-split__aside > .bmx-link-arrow {
	margin-top: 24px;
}

/* ------------------------------------------------------------------
 * Cards (services, values, generic). The whole card is the link target
 * via a stretched ::after on the single link inside it.
 * ---------------------------------------------------------------- */
.bmx-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	padding: clamp(22px, 2.4vw, 28px);
	background: var(--bmx-white);
	border: 1px solid var(--bmx-line);
	border-radius: var(--bmx-radius);
	box-sizing: border-box;
	transition: border-color 0.25s var(--bmx-ease), box-shadow 0.25s var(--bmx-ease), transform 0.25s var(--bmx-ease);
}

.bmx-card__icon,
.bmx-tile__icon {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--bmx-primary-soft);
	color: var(--bmx-primary);
	flex-shrink: 0;
}

.bmx-card__icon .bmx-icon,
.bmx-tile__icon .bmx-icon {
	width: 22px;
	height: 22px;
}

.bmx-card__title {
	margin-top: 4px;
	font-size: 1.125rem;
	line-height: 1.35;
	font-weight: 650;
	letter-spacing: -0.01em;
}

.bmx-card__title a,
.bmx-tile__title a,
.bmx-post-card__title a {
	color: inherit;
	text-decoration: none;
}

.bmx-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.bmx-card__text {
	color: var(--bmx-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.bmx-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 8px;
	color: var(--bmx-primary);
	font-size: 0.875rem;
	font-weight: 600;
}

.bmx-card__more .bmx-icon {
	width: 1em;
	height: 1em;
	transition: transform 0.25s var(--bmx-ease);
}

.bmx-card--link:hover,
.bmx-card--link:focus-within {
	border-color: rgba(43, 89, 217, 0.35);
	box-shadow: var(--bmx-shadow-md);
	transform: translateY(-4px);
}

/* Small, purposeful icon motion inside hovered cards */
.bmx-card__icon,
.bmx-tile__icon {
	transition: transform 0.3s var(--bmx-ease), background-color 0.3s var(--bmx-ease), color 0.3s var(--bmx-ease);
}

.bmx-card--link:hover .bmx-card__icon,
.bmx-card--link:hover .bmx-tile__icon {
	transform: translateY(-2px);
	background: var(--bmx-primary);
	color: var(--bmx-white);
}

.bmx-card--link:hover .bmx-card__more,
.bmx-post-card:hover .bmx-post-card__more {
	color: var(--bmx-primary-hover);
}

.bmx-card--link:hover .bmx-card__more .bmx-icon {
	transform: translateX(3px);
}

/* The stretched link shows focus on the whole card instead. */
.bmx-card--link:focus-within {
	outline: 2px solid var(--bmx-primary);
	outline-offset: 2px;
}

.bmx-card__link:focus-visible {
	outline: none;
}

/* ------------------------------------------------------------------
 * Service card (bmx_service_card): a restrained "this is explorable"
 * hover layer on top of the generic .bmx-card--link behaviour above.
 * Normal state stays quiet; only the hovered or keyboard-focused card
 * gains an accent line, a soft cursor-following glow, a slightly deeper
 * shadow, a 3px lift, a raised icon and a nudged arrow. Hover and
 * :focus-within share the same look, so keyboard users get all of it.
 * ---------------------------------------------------------------- */
.bmx-card--service {
	isolation: isolate;
	overflow: hidden;
	transition: border-color 0.3s var(--bmx-ease), box-shadow 0.3s var(--bmx-ease), transform 0.3s var(--bmx-ease), background-color 0.3s var(--bmx-ease);
}

/* Accent line that draws in along the top edge */
.bmx-card--service::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--bmx-primary-bright), var(--bmx-gold));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.4s var(--bmx-ease-out);
}

/* Soft highlight under the cursor (position set by site.js; static
   top-centre tint without JS). Sits behind the content (z-index -1 inside
   the card's own stacking context). */
.bmx-card__glow {
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(43, 89, 217, 0.085), transparent 70%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s var(--bmx-ease);
}

.bmx-card--service .bmx-card__title {
	transition: color 0.3s var(--bmx-ease);
}

.bmx-card--service:hover,
.bmx-card--service:focus-within {
	background-color: #fbfcff;
	border-color: rgba(43, 89, 217, 0.4);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 14px 30px -14px rgba(16, 24, 40, 0.2), 0 2px 10px -4px rgba(43, 89, 217, 0.14);
	transform: translateY(-3px);
}

.bmx-card--service:hover::before,
.bmx-card--service:focus-within::before {
	transform: scaleX(1);
}

.bmx-card--service:hover .bmx-card__glow,
.bmx-card--service:focus-within .bmx-card__glow {
	opacity: 1;
}

.bmx-card--service:hover .bmx-card__title,
.bmx-card--service:focus-within .bmx-card__title {
	color: var(--bmx-primary-hover);
}

.bmx-card--service:hover .bmx-card__icon,
.bmx-card--service:focus-within .bmx-card__icon {
	transform: translateY(-2px) scale(1.05);
	background: var(--bmx-primary);
	color: var(--bmx-white);
	box-shadow: 0 8px 16px -8px rgba(43, 89, 217, 0.55);
}

.bmx-card--service:hover .bmx-card__more,
.bmx-card--service:focus-within .bmx-card__more {
	color: var(--bmx-primary-hover);
}

.bmx-card--service:hover .bmx-card__more .bmx-icon,
.bmx-card--service:focus-within .bmx-card__more .bmx-icon {
	transform: translateX(4px);
}

.bmx-card--service .bmx-card__icon {
	transition: transform 0.3s var(--bmx-ease), background-color 0.3s var(--bmx-ease), color 0.3s var(--bmx-ease), box-shadow 0.3s var(--bmx-ease);
}

/* Entrance + hover share the 0.3-0.4s range (the generic reveal uses 0.6s,
   which would make the lift feel sluggish). The :hover rule cancels the
   stagger delay so hover-in is immediate. */
.js .bmx-card--service[data-reveal] {
	transition: opacity 0.5s var(--bmx-ease-out), transform 0.4s var(--bmx-ease-out), border-color 0.3s var(--bmx-ease), box-shadow 0.3s var(--bmx-ease), background-color 0.3s var(--bmx-ease);
	transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms, 0ms, 0ms;
}

.js .bmx-card--link.bmx-card--service[data-reveal].is-revealed:hover,
.js .bmx-card--link.bmx-card--service[data-reveal].is-revealed:focus-within {
	transform: translateY(-3px);
	transition-delay: 0ms;
}

/* Touch: no sticky lifted card after a tap; a brief pressed state instead
   gives the tap equivalent feedback. Nothing here is hover-only. */
@media (hover: none) {
	.bmx-card--service:hover,
	.js .bmx-card--link.bmx-card--service[data-reveal].is-revealed:hover {
		transform: none;
	}

	.bmx-card--service:hover .bmx-card__icon {
		transform: none;
	}
}

.bmx-card--service:active {
	background-color: var(--bmx-primary-soft);
	transform: scale(0.985);
}

.js .bmx-card--link.bmx-card--service[data-reveal].is-revealed:active {
	transform: scale(0.985);
}

@media (prefers-reduced-motion: reduce) {
	/* Colour/shadow state changes stay; movement and the cursor glow go. */
	.bmx-card__glow {
		display: none;
	}

	.bmx-card--service::before {
		transform: scaleX(1);
		opacity: 0;
		transition: opacity 0.01ms;
	}

	.bmx-card--service:hover::before,
	.bmx-card--service:focus-within::before {
		opacity: 1;
	}

	.bmx-card--service:hover,
	.bmx-card--service:focus-within,
	.bmx-card--service:active,
	.js .bmx-card--link.bmx-card--service[data-reveal].is-revealed:hover,
	.js .bmx-card--link.bmx-card--service[data-reveal].is-revealed:focus-within,
	.js .bmx-card--link.bmx-card--service[data-reveal].is-revealed:active {
		transform: none !important;
	}

	.bmx-card--service:hover .bmx-card__icon,
	.bmx-card--service:focus-within .bmx-card__icon,
	.bmx-card--service:hover .bmx-card__more .bmx-icon,
	.bmx-card--service:focus-within .bmx-card__more .bmx-icon {
		transform: none !important;
	}
}

/* Compact link tile (industries, 404 links) */
.bmx-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	padding: 22px;
	background: var(--bmx-white);
	border: 1px solid var(--bmx-line);
	border-radius: var(--bmx-radius);
	box-sizing: border-box;
	transition: border-color 0.25s var(--bmx-ease), box-shadow 0.25s var(--bmx-ease), transform 0.25s var(--bmx-ease);
}

.bmx-tile__title {
	font-size: 1.0625rem;
	font-weight: 650;
	letter-spacing: -0.01em;
	line-height: 1.35;
}

.bmx-tile__text {
	color: var(--bmx-muted);
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* Chip link */
.bmx-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid var(--bmx-line);
	border-radius: var(--bmx-radius-sm);
	background: var(--bmx-white);
	color: var(--bmx-ink);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	transition: border-color 0.2s var(--bmx-ease), color 0.2s var(--bmx-ease), background 0.2s var(--bmx-ease);
	box-sizing: border-box;
}

.bmx-chip .bmx-icon {
	width: 18px;
	height: 18px;
	color: var(--bmx-primary);
}

.bmx-chip:hover {
	border-color: var(--bmx-primary);
	color: var(--bmx-primary);
	background: var(--bmx-primary-soft);
}

/* ------------------------------------------------------------------
 * Open lists: audience rows and differentiators (no boxes)
 * ---------------------------------------------------------------- */
.bmx-rows,
.bmx-features {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bmx-row {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 20px;
	padding: 28px 0;
	border-top: 1px solid var(--bmx-line);
}

.bmx-row:last-child {
	border-bottom: 1px solid var(--bmx-line);
}

.bmx-row__icon,
.bmx-feature__icon,
.bmx-capability__icon {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--bmx-primary-soft);
	color: var(--bmx-primary);
}

.bmx-row__icon .bmx-icon,
.bmx-feature__icon .bmx-icon,
.bmx-capability__icon .bmx-icon {
	width: 22px;
	height: 22px;
}

.bmx-row__title,
.bmx-feature__title {
	font-size: 1.125rem;
	font-weight: 650;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.bmx-row__text,
.bmx-feature__text {
	margin-top: 8px;
	color: var(--bmx-muted);
	line-height: 1.65;
}

.bmx-row .bmx-link-arrow {
	margin-top: 12px;
}

.bmx-features {
	display: grid;
	gap: 0 40px;
}

@media (min-width: 720px) {
	.bmx-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.bmx-feature {
	padding: 28px 0;
	border-top: 1px solid var(--bmx-line);
}

.bmx-feature__icon {
	margin-bottom: 16px;
}

/* ------------------------------------------------------------------
 * Process steps (dark band)
 * ---------------------------------------------------------------- */
.bmx-steps {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.bmx-step {
	position: relative;
	padding: 24px 0 24px 28px;
	border-left: 1px solid var(--bmx-line-dark);
}

.bmx-step::before {
	content: "";
	position: absolute;
	left: -4px;
	top: 30px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--bmx-accent);
	box-shadow: 0 0 0 4px rgba(127, 214, 208, 0.15);
}

.bmx-step__num {
	display: block;
	margin-bottom: 10px;
	color: var(--bmx-accent);
	font-family: var(--bmx-font-display);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.bmx-step__title {
	font-size: 1.125rem;
	font-weight: 650;
	color: var(--bmx-white);
}

.bmx-step__text {
	margin-top: 8px;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--bmx-on-dark-muted);
}

@media (min-width: 1024px) {
	.bmx-steps {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 28px;
	}

	.bmx-step {
		padding: 28px 0 0;
		border-left: 0;
		border-top: 1px solid var(--bmx-line-dark);
	}

	.bmx-step::before {
		left: 0;
		top: -4px;
	}
}

/* ------------------------------------------------------------------
 * FAQ accordion (native <details>)
 * ---------------------------------------------------------------- */
.bmx-faq {
	border-top: 1px solid var(--bmx-line);
}

.bmx-faq__item {
	border-bottom: 1px solid var(--bmx-line);
}

.bmx-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 0;
	color: var(--bmx-ink);
	font-family: var(--bmx-font-display);
	font-size: 1.0625rem;
	font-weight: 650;
	line-height: 1.45;
	cursor: pointer;
	list-style: none;
}

.bmx-faq__question::-webkit-details-marker {
	display: none;
}

.bmx-faq__question:hover {
	color: var(--bmx-primary);
}

.bmx-faq__icon {
	width: 20px;
	height: 20px;
	color: var(--bmx-primary);
	transition: transform 0.25s var(--bmx-ease);
}

/* Plus becomes minus when open */
.bmx-faq__icon .bmx-icon__v {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 0.3s var(--bmx-ease);
}

.bmx-faq__item[open] .bmx-faq__icon .bmx-icon__v {
	transform: scaleY(0);
}

/* Smooth expand and collapse where the browser supports animating
   <details> content; elsewhere it simply opens and closes. */
@supports selector(::details-content) {
	@media (prefers-reduced-motion: no-preference) {
		.bmx-faq {
			interpolate-size: allow-keywords;
		}

		.bmx-faq__item::details-content {
			block-size: 0;
			overflow: hidden;
			transition: block-size 0.3s var(--bmx-ease), content-visibility 0.3s allow-discrete;
		}

		.bmx-faq__item[open]::details-content {
			block-size: auto;
		}
	}
}

.bmx-faq__answer {
	padding: 0 40px 24px 0;
	color: var(--bmx-text);
	line-height: 1.7;
}

/* Small contact card beside the FAQ */
.bmx-help-card {
	margin-top: 32px;
	padding: 24px;
	border: 1px solid var(--bmx-line);
	border-radius: var(--bmx-radius);
	background: var(--bmx-surface);
}

.bmx-help-card__title {
	color: var(--bmx-ink);
	font-weight: 650;
}

.bmx-help-card__text {
	margin: 6px 0 12px;
	color: var(--bmx-muted);
	font-size: 0.9375rem;
}

.bmx-help-card .bmx-link-arrow {
	word-break: break-word;
}

/* ------------------------------------------------------------------
 * Closing call-to-action panel
 * ---------------------------------------------------------------- */
.bmx-cta {
	position: relative;
	display: grid;
	gap: 28px;
	padding: clamp(32px, 5vw, 64px);
	border-radius: var(--bmx-radius-lg);
	background: var(--bmx-bg-night);
	color: var(--bmx-on-dark-muted);
	overflow: hidden;
	isolation: isolate;
}

.bmx-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--bmx-dots);
	background-size: 22px 22px;
	mask-image: radial-gradient(ellipse 60% 90% at 90% 10%, #000 10%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse 60% 90% at 90% 10%, #000 10%, transparent 70%);
}

.bmx-cta__title {
	color: var(--bmx-white);
	font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
	line-height: 1.2;
	letter-spacing: -0.025em;
}

.bmx-cta__text {
	margin-top: 12px;
	max-width: 56ch;
	font-size: 1rem;
	line-height: 1.65;
}

.bmx-cta__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.bmx-cta__mail {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--bmx-on-dark);
	font-size: 0.9375rem;
	text-decoration: none;
	word-break: break-word;
}

.bmx-cta__mail:hover {
	color: var(--bmx-white);
	text-decoration: underline;
}

@media (min-width: 900px) {
	.bmx-cta {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 48px;
	}

	.bmx-cta__actions {
		align-items: flex-end;
	}
}

/* A CTA directly after a surface section sits on the same tint. */
.bmx-section--surface + .bmx-section--tight {
	background: var(--bmx-surface);
}

/* ------------------------------------------------------------------
 * Blog article card — text-only editorial card (no images by design)
 * ---------------------------------------------------------------- */
.bmx-post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	padding: clamp(24px, 2.6vw, 32px);
	background: var(--bmx-white);
	border: 1px solid var(--bmx-line);
	border-radius: var(--bmx-radius);
	overflow: hidden;
	transition: border-color 0.25s var(--bmx-ease), box-shadow 0.25s var(--bmx-ease), transform 0.25s var(--bmx-ease);
}

/* A thin brand rule that draws in on hover */
.bmx-post-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: linear-gradient(90deg, var(--bmx-primary), var(--bmx-accent));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s var(--bmx-ease-out);
}

.bmx-post-card:hover::before,
.bmx-post-card:focus-within::before {
	transform: scaleX(1);
}

.bmx-post-card__cat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--bmx-primary);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.bmx-post-card__cat::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 2px;
	background: currentColor;
}

.bmx-post-card__title {
	font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.3125rem);
	line-height: 1.32;
	font-weight: 650;
	letter-spacing: -0.015em;
}

.bmx-post-card__text {
	color: var(--bmx-muted);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.bmx-post-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--bmx-line);
}

.bmx-post-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	color: var(--bmx-muted);
	font-size: 0.8125rem;
}

.bmx-post-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--bmx-primary);
	font-size: 0.875rem;
	font-weight: 600;
}

.bmx-post-card__more .bmx-icon {
	width: 1em;
	height: 1em;
	transition: transform 0.25s var(--bmx-ease);
}

.bmx-post-card:hover .bmx-post-card__more .bmx-icon {
	transform: translateX(3px);
}

/* Lead story: larger type, generous padding, a quiet dot-matrix corner */
.bmx-post-card--featured {
	padding: clamp(28px, 4vw, 48px);
	background:
		radial-gradient(circle at 100% 0%, var(--bmx-primary-soft), transparent 45%),
		var(--bmx-white);
}

.bmx-post-card--featured::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 180px;
	height: 140px;
	background: radial-gradient(rgba(43, 89, 217, 0.22) 1px, transparent 1.5px);
	background-size: 14px 14px;
	mask-image: radial-gradient(circle at 100% 0%, #000 20%, transparent 70%);
	-webkit-mask-image: radial-gradient(circle at 100% 0%, #000 20%, transparent 70%);
	pointer-events: none;
}

.bmx-post-card--featured .bmx-post-card__title {
	max-width: 30ch;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
	line-height: 1.2;
	letter-spacing: -0.025em;
}

.bmx-post-card--featured .bmx-post-card__text {
	max-width: 68ch;
	font-size: 1.0625rem;
}

.bmx-posts--count-1 {
	grid-template-columns: minmax(0, 1fr);
}

/* ------------------------------------------------------------------
 * Scroll reveal (only when JS is running; see assets/js/site.js)
 * ---------------------------------------------------------------- */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(15px);
	transition: opacity 0.6s var(--bmx-ease-out), transform 0.6s var(--bmx-ease-out), border-color 0.25s var(--bmx-ease), box-shadow 0.25s var(--bmx-ease);
	transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms, 0ms;
}

.js [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

.js .bmx-card--link[data-reveal].is-revealed:hover,
.js .bmx-tile[data-reveal].is-revealed:hover,
.js .bmx-post-card[data-reveal].is-revealed:hover {
	transform: translateY(-4px);
	transition-delay: 0ms;
}

/* ------------------------------------------------------------------
 * Reduced motion: no transforms, no transitions, instant everything.
 * ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}

	.js [data-reveal] {
		opacity: 1;
		transform: none;
	}

	.bmx-card--link:hover,
	.bmx-tile:hover,
	.bmx-post-card:hover {
		transform: none !important;
	}
}

@media print {
	.bmx-header-part,
	.bmx-footer,
	.bmx-cta,
	.bmx-contact {
		display: none !important;
	}

	.js [data-reveal] {
		opacity: 1;
		transform: none;
	}
}

/* Phones: compact two-up tiles keep long lists (industries) scannable. */
@media (max-width: 639.98px) {
	.bmx-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.bmx-tile {
		padding: 16px;
	}

	.bmx-tile__text {
		font-size: 0.875rem;
	}
}

/* Lead story spans the whole grid row. */
.bmx-posts__lead {
	grid-column: 1 / -1;
}

/* FAQ: answers ease in when a question is opened. */
@media (prefers-reduced-motion: no-preference) {
	.bmx-faq__item[open] .bmx-faq__answer {
		animation: bmx-faq-open 0.35s var(--bmx-ease-out);
	}
}

@keyframes bmx-faq-open {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.bmx-faq__question {
	transition: color 0.25s var(--bmx-ease);
}

/* ------------------------------------------------------------------
 * Decorative dot matrix (hero, page titles, footer)
 * Static CSS by default; upgraded to an interactive canvas by site.js on
 * desktop with a fine pointer (never on touch or reduced motion).
 * ---------------------------------------------------------------- */
.bmx-dots {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: var(--bmx-dots);
	background-size: 22px 22px;
	mask-image: radial-gradient(ellipse var(--drx) var(--dry) at var(--dx) var(--dy), #000 var(--din), transparent var(--dout));
	-webkit-mask-image: radial-gradient(ellipse var(--drx) var(--dry) at var(--dx) var(--dy), #000 var(--din), transparent var(--dout));
}

.bmx-dots.is-live {
	background: none;
	mask-image: none;
	-webkit-mask-image: none;
}

.bmx-dots canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * Nav-bar field: the white CSS dots would be invisible on the light glass
 * anyway, so it only exists once the canvas is live (fine pointer, no
 * reduced motion). Touch and reduced-motion users get a clean, compact bar.
 */
.bmx-dots--bar:not(.is-live) {
	display: none;
}