/* ==========================================================================
   XllenTech Corporate — component styles
   Colour tokens come from theme.json (light values). Dark values are applied
   below for: visitors who chose dark, visitors whose OS prefers dark (unless
   they chose light), and "always dark" components such as the console card.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Theme-mode tokens
   -------------------------------------------------------------------------- */
:root {
	color-scheme: light;
	--xt-grid: rgba(30, 38, 50, .07);
	--xt-glow-a: rgba(132, 196, 20, .18);
	--xt-glow-b: rgba(110, 31, 42, .10);
	--xt-header-bg: rgba(255, 255, 255, .82);
	--xt-card-shadow: 0 1px 2px rgba(10, 13, 18, .04), 0 12px 30px -18px rgba(10, 13, 18, .18);
	--xt-hover-glow: rgba(132, 196, 20, .16);
	--xt-hover-border: rgba(63, 109, 0, .45);
	--xt-mark: rgba(30, 38, 50, .06);
	--xt-mark-stroke: #d3d9e2;
}

/* Dark palette — repeated for each trigger (CSS can't share a block between them). */
:root[data-theme="dark"],
.xt-console, .xt-cta, .xt-service.xt-wide, .xt-compare-after, .xt-force-dark {
	color-scheme: dark;
	--wp--preset--color--base: #0a0d12;
	--wp--preset--color--surface: #11161e;
	--wp--preset--color--raised: #18202b;
	--wp--preset--color--line: #253041;
	--wp--preset--color--muted: #8d99ab;
	--wp--preset--color--contrast: #e9edf3;
	--wp--preset--color--heading: #ffffff;
	--wp--preset--color--accent: #b8f23e;
	--xt-grid: rgba(141, 153, 171, .09);
	--xt-glow-a: rgba(184, 242, 62, .16);
	--xt-glow-b: rgba(110, 31, 42, .18);
	--xt-header-bg: rgba(10, 13, 18, .78);
	--xt-card-shadow: none;
	--xt-hover-glow: rgba(184, 242, 62, .12);
	--xt-hover-border: rgba(184, 242, 62, .45);
	--xt-mark: rgba(37, 48, 65, .55);
	--xt-mark-stroke: #2f3b4e;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--wp--preset--color--base: #0a0d12;
		--wp--preset--color--surface: #11161e;
		--wp--preset--color--raised: #18202b;
		--wp--preset--color--line: #253041;
		--wp--preset--color--muted: #8d99ab;
		--wp--preset--color--contrast: #e9edf3;
		--wp--preset--color--heading: #ffffff;
		--wp--preset--color--accent: #b8f23e;
		--wp--preset--color--light: #10151c;
		--xt-grid: rgba(141, 153, 171, .09);
		--xt-glow-a: rgba(184, 242, 62, .16);
		--xt-glow-b: rgba(110, 31, 42, .18);
		--xt-header-bg: rgba(10, 13, 18, .78);
		--xt-card-shadow: none;
		--xt-hover-glow: rgba(184, 242, 62, .12);
		--xt-hover-border: rgba(184, 242, 62, .45);
		--xt-mark: rgba(37, 48, 65, .55);
		--xt-mark-stroke: #2f3b4e;
	}
}

:root[data-theme="dark"] { --wp--preset--color--light: #10151c; }

:root {
	--xt-base: var(--wp--preset--color--base);
	--xt-surface: var(--wp--preset--color--surface);
	--xt-raised: var(--wp--preset--color--raised);
	--xt-line: var(--wp--preset--color--line);
	--xt-muted: var(--wp--preset--color--muted);
	--xt-text: var(--wp--preset--color--contrast);
	--xt-heading: var(--wp--preset--color--heading);
	--xt-accent: var(--wp--preset--color--accent);
	--xt-ink: var(--wp--preset--color--ink);
	--xt-signal: var(--wp--preset--color--signal);
	--xt-mono: var(--wp--preset--font-family--mono);
	--xt-radius: 14px;
	--xt-ease: cubic-bezier(.2, .7, .2, 1);
	--xt-topbar-h: 40px;
}
/* Re-resolve aliases inside always-dark scopes so they pick up the scoped palette. */
.xt-console, .xt-cta, .xt-service.xt-wide, .xt-compare-after, .xt-force-dark {
	--xt-base: var(--wp--preset--color--base);
	--xt-surface: var(--wp--preset--color--surface);
	--xt-raised: var(--wp--preset--color--raised);
	--xt-line: var(--wp--preset--color--line);
	--xt-muted: var(--wp--preset--color--muted);
	--xt-text: var(--wp--preset--color--contrast);
	--xt-heading: var(--wp--preset--color--heading);
	--xt-accent: var(--wp--preset--color--accent);
	color: var(--xt-text);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .3s var(--xt-ease), color .3s var(--xt-ease); }
::selection { background: var(--xt-signal); color: var(--xt-ink); }
:focus-visible { outline: 2px solid var(--xt-accent); outline-offset: 3px; border-radius: 4px; }

/* Remove root block-gap between header / main / footer */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--xt-topbar-h));
	z-index: 100;
}

.xt-topbar { border-bottom: 1px solid var(--xt-line); }
.xt-topbar > .alignwide { min-height: calc(var(--xt-topbar-h) - 1rem - 1px); align-items: center; }
.xt-topbar p { margin: 0; line-height: 1.4; }
.xt-topbar a { color: var(--xt-text); }

.xt-status::before {
	content: "";
	display: inline-block;
	width: 7px; height: 7px;
	margin-right: .55em;
	border-radius: 50%;
	background: var(--xt-signal);
	vertical-align: 1px;
	animation: xt-pulse 2.4s infinite;
}
@keyframes xt-pulse {
	0% { box-shadow: 0 0 0 0 rgba(184, 242, 62, .55); }
	70% { box-shadow: 0 0 0 8px rgba(184, 242, 62, 0); }
	100% { box-shadow: 0 0 0 0 rgba(184, 242, 62, 0); }
}

/* The blur lives on a pseudo-element: backdrop-filter on the header itself would make it
   the containing block for the mobile menu overlay (position:fixed) and trap it inside. */
.xt-header {
	position: relative;
	z-index: 0;
	border-bottom: 1px solid var(--xt-line);
}
.xt-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--xt-header-bg);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	pointer-events: none;
}

/* Logo: light-mode image by default, reversed image in dark mode. */
.xt-logo img { display: block; height: auto; }
.xt-header .wp-block-navigation a { color: var(--xt-text); }
.xt-header .wp-block-navigation a:hover { color: var(--xt-accent); text-decoration: none; }
.xt-header .wp-block-navigation .current-menu-item > a { color: var(--xt-accent); }
/* Mobile menu overlay */
.xt-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.25rem clamp(1rem, 5vw, 2rem) 2rem;
	background: var(--xt-base) !important;
	color: var(--xt-text) !important;
}
.xt-header .wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-close { top: 1.25rem; right: clamp(1rem, 5vw, 2rem); width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--xt-line); border-radius: 10px; color: var(--xt-text); }
.xt-header .wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 4rem !important; align-items: stretch !important; }
.xt-header .wp-block-navigation .is-menu-open .wp-block-navigation__container { width: 100%; align-items: stretch !important; gap: 0 !important; }
.xt-header .wp-block-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { width: 100%; flex-direction: column; align-items: flex-start !important; border-bottom: 1px solid var(--xt-line); padding: .9rem 0; }
.xt-header .wp-block-navigation .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a { font-family: var(--wp--preset--font-family--display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; color: var(--xt-heading); }
.xt-header .wp-block-navigation .is-menu-open .wp-block-navigation__submenu-icon { display: none !important; }
.xt-header .wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container {
	position: static !important;
	width: 100% !important;
	min-width: 0 !important;
	margin: .6rem 0 0 !important;
	padding: 0 0 0 1rem !important;
	border: 0 !important;
	border-left: 2px solid var(--xt-line) !important;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none;
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: .1rem 1rem !important;
}
.xt-header .wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container::before { content: none; }
.xt-header .wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container a { padding: .35rem 0 !important; font-size: var(--wp--preset--font-size--small) !important; color: var(--xt-muted); }
.xt-header .wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container a:hover { background: none; color: var(--xt-accent); }
.xt-header .wp-block-navigation .is-menu-open a[aria-current="page"], .xt-header .wp-block-navigation .is-menu-open .current-menu-item > a { color: var(--xt-accent) !important; }
.xt-header .wp-block-navigation .is-menu-open .wp-block-navigation-item,
.xt-header .wp-block-navigation .is-menu-open .wp-block-navigation-item a { justify-content: flex-start !important; text-align: left !important; align-items: flex-start !important; }
.xt-header .wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { width: 100%; }
@media (max-width: 420px) { .xt-header .wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container { grid-template-columns: 1fr; } }
@media (max-width: 599px) { .xt-header .wp-block-navigation__responsive-container-open:not(.always-shown) { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--xt-line); border-radius: 10px; color: var(--xt-text); } }

/* Theme toggle */
.xt-theme-toggle {
	appearance: none;
	display: inline-grid;
	place-items: center;
	width: 40px; height: 40px;
	padding: 0;
	border: 1px solid var(--xt-line);
	border-radius: 10px;
	background: transparent;
	color: var(--xt-text);
	cursor: pointer;
	transition: border-color .2s var(--xt-ease), color .2s var(--xt-ease), background-color .2s var(--xt-ease);
}
.xt-theme-toggle:hover { border-color: var(--xt-accent); color: var(--xt-accent); }
.xt-theme-toggle svg { width: 18px; height: 18px; grid-area: 1 / 1; transition: transform .4s var(--xt-ease), opacity .3s var(--xt-ease); }
.xt-theme-toggle .xt-icon-sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
:root[data-theme="dark"] .xt-theme-toggle .xt-icon-sun { opacity: 1; transform: none; }
:root[data-theme="dark"] .xt-theme-toggle .xt-icon-moon { opacity: 0; transform: rotate(90deg) scale(.6); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .xt-theme-toggle .xt-icon-sun { opacity: 1; transform: none; }
	:root:not([data-theme="light"]) .xt-theme-toggle .xt-icon-moon { opacity: 0; transform: rotate(90deg) scale(.6); }
}

@media (max-width: 781px) {
	.xt-topbar { display: none; }
	.wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 0px); }
	.xt-header .xt-header-cta { display: none !important; }
	.xt-header-actions { gap: .75rem !important; }
}
@media (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part { top: 0; }
}

/* --------------------------------------------------------------------------
   Shared typography helpers
   -------------------------------------------------------------------------- */
.is-style-xt-eyebrow {
	font-family: var(--xt-mono);
	font-size: var(--wp--preset--font-size--x-small) !important;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--xt-accent);
}
.is-style-xt-eyebrow::before { content: "// "; opacity: .55; white-space: pre; }

.xt-lede { color: var(--xt-muted); max-width: 42rem; }
.xt-mono { font-family: var(--xt-mono); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.wp-element-button,
.wp-block-button__link { transition: background-color .2s var(--xt-ease), color .2s var(--xt-ease), border-color .2s var(--xt-ease), transform .2s var(--xt-ease); }
.wp-block-button:not(.is-style-xt-ghost) .wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button__link::after { content: "→"; display: inline-block; margin-left: .5em; transition: transform .2s var(--xt-ease); }
.wp-block-button__link:hover::after { transform: translateX(3px); }

.is-style-xt-ghost .wp-block-button__link {
	background: transparent !important;
	color: var(--xt-heading) !important;
	border: 1px solid var(--xt-line);
}
.is-style-xt-ghost .wp-block-button__link:hover { border-color: var(--xt-accent); color: var(--xt-accent) !important; }
.is-style-xt-ghost .wp-block-button__link::after { content: none; }

/* --------------------------------------------------------------------------
   Grid backdrop (group style)
   -------------------------------------------------------------------------- */
.is-style-xt-grid-bg { position: relative; isolation: isolate; overflow: hidden; }
.is-style-xt-grid-bg::before {
	content: "";
	position: absolute; inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(to right, var(--xt-grid) 1px, transparent 1px),
		linear-gradient(to bottom, var(--xt-grid) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 100%);
	mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 100%);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.xt-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	width: 720px; height: 720px;
	right: -220px; top: -260px;
	background: radial-gradient(circle, var(--xt-glow-a) 0%, var(--xt-glow-b) 40%, transparent 70%);
	pointer-events: none;
}
.xt-hero h1 { text-wrap: balance; }
.xt-hero h1 mark { background: none; }
.xt-hero .xt-lede { font-size: var(--wp--preset--font-size--large); }

.xt-hero-meta { margin-top: var(--wp--preset--spacing--40) !important; }
.xt-hero-meta p {
	margin: 0;
	font-family: var(--xt-mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--xt-muted);
}
.xt-hero-meta p::before { content: "✓ "; color: var(--xt-accent); }

/* --------------------------------------------------------------------------
   Console card
   -------------------------------------------------------------------------- */
.is-style-xt-card {
	background: var(--xt-surface);
	border: 1px solid var(--xt-line);
	border-radius: var(--xt-radius);
	padding: clamp(1.25rem, 2.5vw, 2rem);
	position: relative;
	box-shadow: var(--xt-card-shadow);
	transition: border-color .3s var(--xt-ease), transform .3s var(--xt-ease), background-color .3s var(--xt-ease);
}

.xt-console {
	padding: 0 !important;
	overflow: hidden;
	box-shadow: 0 40px 80px -30px rgba(10, 13, 18, .55), 0 0 0 1px rgba(184, 242, 62, .06);
	font-family: var(--xt-mono);
	font-size: var(--wp--preset--font-size--small);
}
.xt-console > * + *, .xt-console-body > * + * { margin-block-start: 0 !important; }
.xt-console-bar {
	padding: .8rem 1.1rem !important;
	border-bottom: 1px solid var(--xt-line);
	background: var(--xt-raised);
}
.xt-console-bar p { margin: 0; font-size: var(--wp--preset--font-size--x-small); color: var(--xt-muted); }
.xt-console-dots { display: inline-flex; gap: 6px; }
.xt-console-dots::before {
	content: "";
	width: 10px; height: 10px; border-radius: 50%;
	background: #3a4556;
	box-shadow: 16px 0 0 #3a4556, 32px 0 0 #3a4556;
	margin-right: 34px;
}
.xt-console-body { padding: 1.1rem 1.25rem 1.4rem !important; }
.xt-console-row { border-bottom: 1px dashed rgba(141, 153, 171, .16); padding: .7rem 0; }
.xt-console-row:last-child { border-bottom: 0; }
.xt-console-row p { margin: 0; }
.xt-console-row p:first-child { color: var(--xt-muted); }
.xt-ok { color: var(--xt-signal); }
.xt-ok::before { content: "● "; font-size: .7em; vertical-align: 2px; }
.xt-prompt { color: var(--xt-text); margin-top: .8rem !important; }
.xt-prompt::before { content: "$ "; color: var(--xt-signal); }
.xt-prompt::after {
	content: "";
	display: inline-block;
	width: .55em; height: 1.05em;
	margin-left: .2em;
	background: var(--xt-signal);
	vertical-align: -3px;
	animation: xt-blink 1.1s steps(1) infinite;
}
@keyframes xt-blink { 50% { opacity: 0; } }

/* --------------------------------------------------------------------------
   Stats strip
   -------------------------------------------------------------------------- */
.xt-stats { border-top: 1px solid var(--xt-line); border-bottom: 1px solid var(--xt-line); }
.xt-stats .wp-block-column { padding: var(--wp--preset--spacing--40) 0; }
.xt-stats .wp-block-column + .wp-block-column { border-left: 1px solid var(--xt-line); padding-left: var(--wp--preset--spacing--40); }
.xt-stat-num { font-family: var(--wp--preset--font-family--display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--xt-heading); margin: 0; }
.xt-stat-num strong { color: var(--xt-accent); font-weight: 600; }
.xt-stat-label { margin: .5rem 0 0 !important; font-family: var(--xt-mono); font-size: var(--wp--preset--font-size--x-small); color: var(--xt-muted); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 781px) {
	.xt-stats { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 !important; }
	.xt-stats .wp-block-column { padding: 1.25rem 0 !important; }
	.xt-stats .wp-block-column:nth-child(even) { border-left: 1px solid var(--xt-line); padding-left: 1.25rem !important; }
	.xt-stats .wp-block-column:nth-child(n+3) { border-top: 1px solid var(--xt-line); }
	.xt-stats .wp-block-column:nth-child(3) { border-left: 0; }
	.xt-hero-meta { row-gap: .4rem !important; }
	.xt-console-bar p { white-space: nowrap; }
	.xt-console-dots::before { margin-right: 30px; }
}

/* --------------------------------------------------------------------------
   Services bento
   -------------------------------------------------------------------------- */
.xt-bento { gap: 1rem !important; }
.xt-service { display: flex; flex-direction: column; min-height: 230px; overflow: hidden; }
.xt-service > * { margin-block: 0; }
.xt-service > * + * { margin-block-start: .75rem; }
.xt-service h3 { font-size: var(--wp--preset--font-size--large); }
.xt-service p { color: var(--xt-muted); font-size: var(--wp--preset--font-size--small); }
.xt-service .xt-index { font-family: var(--xt-mono); font-size: var(--wp--preset--font-size--x-small); color: var(--xt-accent); letter-spacing: .08em; }
.xt-service .xt-more { margin-top: auto !important; padding-top: 1rem; font-family: var(--xt-mono); font-size: var(--wp--preset--font-size--x-small); }
.xt-service .xt-more a { color: var(--xt-text); }
.xt-service .xt-more a::after { content: " →"; transition: margin .2s var(--xt-ease); }
.xt-service:hover { border-color: var(--xt-hover-border); transform: translateY(-3px); background: var(--xt-raised); }
.xt-service:hover .xt-more a { color: var(--xt-accent); }
.xt-service:hover .xt-more a::after { margin-left: 4px; }
.xt-service::after {
	content: "";
	position: absolute; inset: auto -40% -60% auto;
	width: 260px; height: 260px;
	background: radial-gradient(circle, var(--xt-hover-glow), transparent 65%);
	opacity: 0; transition: opacity .4s var(--xt-ease);
	pointer-events: none;
}
.xt-service:hover::after { opacity: 1; }

.xt-service.xt-feature { background: linear-gradient(160deg, var(--xt-raised), var(--xt-surface) 60%); }
.xt-service.xt-feature h3 { font-size: var(--wp--preset--font-size--x-large); }
.xt-tags { gap: .4rem !important; margin-top: 1rem !important; }
.xt-tags p {
	margin: 0;
	padding: .2rem .6rem;
	border: 1px solid var(--xt-line);
	border-radius: 999px;
	background: var(--xt-base);
	font-family: var(--xt-mono);
	font-size: .75rem !important;
	color: var(--xt-text) !important;
}

.xt-service.xt-wide { background: var(--wp--preset--gradient--maroon-glow); border-color: rgba(255, 255, 255, .08); min-height: 0; }
.xt-service.xt-wide p { color: rgba(255, 255, 255, .75); }
.xt-service.xt-wide:hover { background: var(--wp--preset--gradient--maroon-glow); }

@media (max-width: 900px) {
	.xt-bento { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.xt-bento > * { grid-column: auto !important; }
	.xt-bento > .xt-feature, .xt-bento > .xt-wide { grid-column: 1 / -1 !important; }
}
@media (max-width: 600px) {
	.xt-bento { grid-template-columns: minmax(0, 1fr) !important; }
}

/* --------------------------------------------------------------------------
   Light band (same in both modes)
   -------------------------------------------------------------------------- */
.xt-light { color: var(--xt-text); border-block: 1px solid var(--xt-line); }
.xt-light :where(h1, h2, h3, h4, h5, h6) { color: var(--xt-heading); }
.xt-light a:where(:not(.wp-element-button)) { color: var(--xt-accent); }
.xt-light .is-style-xt-eyebrow { color: var(--xt-accent); }
.xt-light .xt-lede { color: var(--xt-muted); }

.xt-compare { border-radius: var(--xt-radius); padding: clamp(1.5rem, 3vw, 2.25rem) !important; height: 100%; }
.xt-compare h3 { font-size: var(--wp--preset--font-size--large); }
.xt-compare-before { background: var(--xt-raised); border: 1px solid var(--xt-line); }
.xt-compare-before li { color: var(--xt-muted); }
.xt-compare-after { background: var(--xt-base); border: 1px solid var(--xt-line); box-shadow: 0 30px 60px -25px rgba(10, 13, 18, .55); }
.xt-light .xt-compare-after h3 { color: var(--xt-heading); }
.xt-compare .is-style-xt-eyebrow { color: var(--xt-muted); }
.xt-light .xt-compare-after .is-style-xt-eyebrow { color: var(--xt-signal); }

.is-style-xt-checks,
.xt-crosses { list-style: none; padding-left: 0 !important; }
.is-style-xt-checks li,
.xt-crosses li { position: relative; padding-left: 2rem; margin-bottom: .8rem; }
.is-style-xt-checks li::before,
.xt-crosses li::before {
	position: absolute; left: 0; top: .15em;
	width: 1.3rem; height: 1.3rem;
	display: grid; place-items: center;
	border-radius: 5px;
	font-size: .75rem; font-weight: 700;
}
.is-style-xt-checks li::before { content: "✓"; background: var(--xt-signal); color: var(--xt-ink); }
.xt-crosses li::before { content: "✕"; background: var(--xt-line); color: var(--xt-muted); }

.xt-chips { gap: .5rem !important; }
.xt-chips p {
	margin: 0;
	padding: .45rem .9rem;
	background: var(--xt-base);
	border: 1px solid var(--xt-line);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--xt-heading);
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   Process steps
   -------------------------------------------------------------------------- */
.xt-steps { position: relative; gap: 1rem !important; }
.xt-step { position: relative; padding-top: 2.75rem !important; }
.xt-step::before {
	content: "";
	position: absolute; top: 1.15rem; left: 0; right: -1rem;
	height: 1px;
	background: linear-gradient(to right, var(--xt-accent), var(--xt-line) 30%);
}
.xt-step:last-child::before { right: 0; }
.xt-step::after {
	content: "";
	position: absolute; top: calc(1.15rem - 5px); left: 0;
	width: 11px; height: 11px;
	border-radius: 50%;
	background: var(--xt-base);
	border: 2px solid var(--xt-accent);
}
.xt-step .xt-index { font-family: var(--xt-mono); font-size: var(--wp--preset--font-size--x-small); color: var(--xt-accent); margin: 0; letter-spacing: .08em; }
.xt-step h3 { font-size: var(--wp--preset--font-size--large); margin-top: .5rem; }
.xt-step p:last-child { color: var(--xt-muted); font-size: var(--wp--preset--font-size--small); }
@media (max-width: 900px) {
	.xt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 2rem !important; }
}
@media (max-width: 600px) {
	.xt-steps { grid-template-columns: minmax(0, 1fr) !important; }
}

/* --------------------------------------------------------------------------
   CTA band (always dark)
   -------------------------------------------------------------------------- */
.xt-cta { position: relative; isolation: isolate; overflow: hidden; border-radius: 20px; }
.xt-cta::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px);
	background-size: 18px 18px;
	-webkit-mask-image: linear-gradient(105deg, transparent 35%, #000 100%);
	mask-image: linear-gradient(105deg, transparent 35%, #000 100%);
}
.xt-cta p:not(.is-style-xt-eyebrow) { color: rgba(255, 255, 255, .78); }
.xt-cta .is-style-xt-eyebrow { color: #ffd2d8; }
.xt-cta-contact a { color: var(--wp--preset--color--white) !important; font-family: var(--xt-mono); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.xt-footer { border-top: 1px solid var(--xt-line); overflow: hidden; }
.xt-footer h4 { font-family: var(--xt-mono); font-size: var(--wp--preset--font-size--x-small); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--xt-muted); }
.xt-footer-links { list-style: none; padding: 0; margin: 0; }
.xt-footer-links li { margin-bottom: .55rem; font-size: var(--wp--preset--font-size--small); color: var(--xt-text); }
.xt-footer-links a { color: var(--xt-text); font-size: var(--wp--preset--font-size--small); }
.xt-footer-links a:hover { color: var(--xt-accent); text-decoration: none; }
.xt-footer p { font-size: var(--wp--preset--font-size--small); }
.xt-footer-mark {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(4rem, 17vw, 15rem) !important;
	line-height: .8;
	letter-spacing: -.06em;
	text-align: center;
	color: transparent;
	-webkit-text-stroke: 1px var(--xt-mark-stroke);
	user-select: none;
	transform: translateY(18%);
	background: linear-gradient(180deg, var(--xt-mark), transparent 80%);
	-webkit-background-clip: text;
	background-clip: text;
}
.xt-footer-bottom { border-top: 1px solid var(--xt-line); position: relative; z-index: 1; background: var(--xt-base); }
.xt-footer-bottom p { margin: 0; font-family: var(--xt-mono); font-size: var(--wp--preset--font-size--x-small) !important; color: var(--xt-muted); }
.xt-footer-bottom a { color: var(--xt-muted); }

/* --------------------------------------------------------------------------
   Generic content pages
   -------------------------------------------------------------------------- */
.xt-page-head { border-bottom: 1px solid var(--xt-line); }
.wp-block-post-content > :where(p, ul, ol) a { text-decoration: underline; text-underline-offset: 3px; }
.wp-block-post-date, .wp-block-post-terms { font-family: var(--xt-mono); font-size: var(--wp--preset--font-size--x-small); color: var(--xt-muted); }

/* --------------------------------------------------------------------------
   Inner pages
   -------------------------------------------------------------------------- */
.xt-page-hero h1 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); }
.xt-crumbs { font-family: var(--xt-mono); font-size: var(--wp--preset--font-size--x-small); color: var(--xt-muted); margin-bottom: 1.5rem !important; }
.xt-crumbs a { color: var(--xt-muted); }
.xt-crumbs a:hover { color: var(--xt-accent); }

.xt-features .xt-service { min-height: 0; }
.xt-features .xt-service h3 { font-size: var(--wp--preset--font-size--medium); font-weight: 600; }
.xt-light .xt-service { background: var(--xt-base); border-color: var(--xt-line); box-shadow: 0 1px 2px rgba(10, 13, 18, .04); }
.xt-light .xt-service:hover { background: var(--xt-base); border-color: var(--xt-hover-border); }
.xt-light .xt-service h3 { color: var(--xt-heading); }
.xt-light .xt-service p { color: var(--xt-muted); }
.xt-light .xt-service .xt-index { color: var(--xt-accent); }

.xt-light .xt-crosses li { color: var(--xt-muted); }

/* FAQ */
.xt-faqs > * + * { margin-block-start: 0 !important; }
.xt-faq { border-bottom: 1px solid var(--xt-line); padding: 1.15rem 0; }
.xt-faq:first-child { border-top: 1px solid var(--xt-line); }
.xt-faq summary {
	cursor: pointer;
	list-style: none;
	display: flex; justify-content: space-between; gap: 1rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
	color: var(--xt-heading);
}
.xt-faq summary::-webkit-details-marker { display: none; }
.xt-faq summary::after { content: "+"; font-family: var(--xt-mono); color: var(--xt-accent); transition: transform .25s var(--xt-ease); }
.xt-faq[open] summary::after { transform: rotate(45deg); }
.xt-faq p { color: var(--xt-muted); margin: .75rem 0 0; max-width: 60ch; }

/* Mission */
.xt-mission-wrap { border-top: 1px solid var(--xt-line); padding-top: var(--wp--preset--spacing--50); }
.xt-mission {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.6rem, 3.4vw, 2.75rem);
	line-height: 1.2;
	letter-spacing: -.025em;
	font-weight: 500;
	color: var(--xt-heading);
	max-width: 30ch;
	text-wrap: balance;
}
.xt-mission mark { background: none; }

/* Contact */
.xt-form-card h3 { margin-bottom: 1.5rem; }
.xt-contact-method { min-height: 0 !important; }
.xt-contact-method + .xt-contact-method { margin-top: 1rem !important; }
.xt-contact-method h3 { font-size: var(--wp--preset--font-size--large); word-break: break-word; }
.xt-contact-method h3 a { color: var(--xt-heading); }
.xt-contact-method h3 a:hover { color: var(--xt-accent); text-decoration: none; }
.xt-steps-3 .xt-step::before { right: -1rem; }


/* Navigation dropdown */
.xt-header .wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--xt-surface) !important;
	border: 1px solid var(--xt-line) !important;
	border-radius: 12px;
	padding: .5rem !important;
	min-width: 260px !important;
	box-shadow: 0 24px 50px -20px rgba(10, 13, 18, .35);
	top: calc(100% + .5rem);
}
.xt-header .wp-block-navigation .wp-block-navigation__submenu-container::before { content: ""; position: absolute; inset: -.6rem 0 auto; height: .6rem; }
.xt-header .wp-block-navigation .wp-block-navigation__submenu-container a { padding: .55rem .75rem !important; border-radius: 8px; font-size: var(--wp--preset--font-size--small); }
.xt-header .wp-block-navigation .wp-block-navigation__submenu-container a:hover { background: var(--xt-raised); }
.xt-header .wp-block-navigation .current-menu-ancestor > a,
.xt-header .wp-block-navigation a[aria-current="page"] { color: var(--xt-accent); }

/* --------------------------------------------------------------------------
   Blog — cards
   -------------------------------------------------------------------------- */
.xt-post-card { min-height: 0; }
.xt-post-card .xt-card-img { margin: calc(-1 * clamp(1.25rem, 2.5vw, 2rem)) calc(-1 * clamp(1.25rem, 2.5vw, 2rem)) .5rem !important; overflow: hidden; border-radius: var(--xt-radius) var(--xt-radius) 0 0; border-bottom: 1px solid var(--xt-line); }
.xt-post-card .xt-card-img img { transition: transform .6s var(--xt-ease); }
.xt-post-card:hover .xt-card-img img { transform: scale(1.04); }
.xt-post-card .wp-block-post-title { font-size: var(--wp--preset--font-size--large); line-height: 1.25; }
.xt-post-card .wp-block-post-title a { color: var(--xt-heading); text-decoration: none; }
.xt-post-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--xt-radius); }
.xt-post-card .wp-block-post-excerpt__excerpt { margin: 0; color: var(--xt-muted); font-size: var(--wp--preset--font-size--small); }
.xt-post-card .wp-block-post-excerpt__more-text { display: none; }
.xt-post-card .xt-more { color: var(--xt-text); }
.xt-post-card .xt-more::after { content: " →"; transition: margin .2s var(--xt-ease); }
.xt-post-card:hover .xt-more { color: var(--xt-accent); }
.xt-post-card:hover .xt-more::after { margin-left: 4px; }
.xt-post-card .wp-block-post-terms a { position: relative; z-index: 2; }

.xt-post-meta { font-family: var(--xt-mono); font-size: var(--wp--preset--font-size--x-small); color: var(--xt-muted); align-items: center; }
.xt-post-meta > * { margin: 0 !important; font-size: inherit !important; color: inherit; }
.xt-post-meta > * + *::before { content: "·"; margin-right: .75rem; opacity: .6; }
.xt-post-meta .wp-block-post-terms a { color: var(--xt-accent); text-transform: uppercase; letter-spacing: .06em; }
.xt-post-meta .wp-block-post-terms__separator { opacity: .6; }

.wp-block-query-pagination { font-family: var(--xt-mono); font-size: var(--wp--preset--font-size--small); }
.wp-block-query-pagination a { color: var(--xt-text); }
.wp-block-query-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 2.25rem; height: 2.25rem; border: 1px solid var(--xt-line); border-radius: 8px; margin: 0 .15rem; }
.wp-block-query-pagination .page-numbers.current { background: var(--xt-signal); border-color: var(--xt-signal); color: var(--xt-ink); }

.xt-search { max-width: 34rem; margin-top: 1.5rem !important; }
.xt-search .wp-block-search__input { background: var(--xt-base); color: var(--xt-text); border: 1px solid var(--xt-line); border-radius: 8px; padding: .75rem .95rem; }
.xt-search .wp-block-search__button { margin-left: .5rem; }

/* --------------------------------------------------------------------------
   Blog — single article
   -------------------------------------------------------------------------- */
.xt-crumbs-row { margin-bottom: 1.25rem !important; }
.xt-crumbs-row > * { margin: 0 !important; }
.xt-crumbs-row .wp-block-post-terms a { color: var(--xt-accent); }
.xt-post-title { font-size: clamp(2.1rem, 4.4vw, 3.5rem) !important; text-wrap: balance; }
.xt-post-meta-lg { font-size: var(--wp--preset--font-size--small); margin-top: 1.5rem !important; }
.xt-post-meta-lg .wp-block-post-author-name { color: var(--xt-heading); font-weight: 500; }

.xt-post-head:has(+ .xt-post-hero-img-wrap .wp-block-post-featured-image) { padding-bottom: calc(var(--wp--preset--spacing--60) + 4rem) !important; }
.xt-post-hero-img-wrap { position: relative; z-index: 1; margin-top: -4rem !important; }
.xt-post-hero-img-wrap:not(:has(.wp-block-post-featured-image)) { display: none; }
.xt-post-hero-img { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--xt-line); box-shadow: 0 40px 80px -40px rgba(10, 13, 18, .45); }

/* Article typography */
.xt-prose { font-size: 1.125rem; line-height: 1.75; }
.xt-prose > * + * { margin-block-start: 1.35em; }
.xt-prose > :where(h2, h3, h4) { margin-block-start: 2.2em; margin-block-end: .2em; scroll-margin-top: 7rem; }
.xt-prose > :where(h2, h3, h4) + * { margin-block-start: .6em; }
.xt-prose h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.xt-prose h3 { font-size: clamp(1.3rem, 2.2vw, 1.55rem); }
.xt-prose h4 { font-size: 1.15rem; }
.xt-prose > p:first-child { font-size: 1.3rem; line-height: 1.6; color: var(--xt-heading); }
.xt-prose a { color: var(--xt-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.xt-prose a:hover { text-decoration-thickness: 2px; }
.xt-prose strong { color: var(--xt-heading); }
.xt-prose :where(ul, ol):not(.is-style-xt-checks) { padding-left: 1.3em; }
.xt-prose li + li { margin-top: .45em; }
.xt-prose ul:not(.is-style-xt-checks) li::marker { color: var(--xt-accent); }
.xt-prose ol li::marker { color: var(--xt-accent); font-family: var(--xt-mono); font-size: .9em; }
.xt-prose blockquote:not(.wp-block-pullquote blockquote) {
	margin-inline: 0;
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var(--xt-signal);
	background: var(--xt-surface);
	border-radius: 0 12px 12px 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.3rem;
	line-height: 1.45;
	color: var(--xt-heading);
}
.xt-prose blockquote p { margin: 0; }
.xt-prose blockquote cite { display: block; margin-top: .75rem; font-family: var(--xt-mono); font-size: var(--wp--preset--font-size--x-small); font-style: normal; color: var(--xt-muted); }
.xt-prose :not(pre) > code { font-family: var(--xt-mono); font-size: .88em; padding: .15em .4em; border-radius: 5px; background: var(--xt-raised); border: 1px solid var(--xt-line); }
.xt-prose .wp-block-code { background: #0d1117 !important; color: #e6edf3; border-color: #253041 !important; overflow-x: auto; font-size: .9rem; line-height: 1.6; }
.xt-prose :where(.wp-block-image, figure) img { border-radius: 12px; }
.xt-prose figcaption, .xt-prose .wp-element-caption { font-family: var(--xt-mono); font-size: var(--wp--preset--font-size--x-small); color: var(--xt-muted); text-align: center; margin-top: .6rem; }
.xt-prose .wp-block-table { overflow-x: auto; }
.xt-prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.xt-prose th, .xt-prose td { border: 1px solid var(--xt-line); padding: .65rem .85rem; text-align: left; }
.xt-prose thead th { background: var(--xt-surface); font-family: var(--xt-mono); font-size: var(--wp--preset--font-size--x-small); text-transform: uppercase; letter-spacing: .05em; color: var(--xt-muted); }
.xt-prose hr { border: 0; border-top: 1px solid var(--xt-line); margin-block: 2.5em; }

/* Article footer */
.xt-post-foot > * + * { margin-block-start: 1.5rem; }
.xt-tag-list { display: flex; flex-wrap: wrap; gap: .4rem; font-size: 0; }
.xt-tag-list a { font-family: var(--xt-mono); font-size: .75rem; padding: .3rem .7rem; border: 1px solid var(--xt-line); border-radius: 999px; color: var(--xt-text); text-decoration: none; }
.xt-tag-list a::before { content: "#"; color: var(--xt-accent); }
.xt-tag-list a:hover { border-color: var(--xt-accent); color: var(--xt-accent); }
.xt-tag-list .wp-block-post-terms__separator { display: none; }

.xt-author-box { display: block; }
.xt-author-box .xt-index { margin: 0 0 .75rem; font-family: var(--xt-mono); font-size: var(--wp--preset--font-size--x-small); color: var(--xt-accent); letter-spacing: .08em; text-transform: uppercase; }
.xt-author-box .wp-block-post-author { align-items: center; gap: 1rem; margin: 0; }
.xt-author-box .wp-block-post-author__avatar img { border-radius: 50%; display: block; }
.xt-author-box .wp-block-post-author__name { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: var(--wp--preset--font-size--large); color: var(--xt-heading); }
.xt-author-box .wp-block-post-author__bio { color: var(--xt-muted); font-size: var(--wp--preset--font-size--small); margin-top: .25rem; }

.xt-post-nav { gap: 1rem !important; }
.xt-post-nav > div:empty { display: none; }
.xt-post-nav .post-navigation-link-previous,
.xt-post-nav .post-navigation-link-next { margin: 0; }
.xt-post-nav a {
	display: flex; flex-direction: column; gap: .35rem;
	height: 100%;
	box-sizing: border-box;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--xt-line);
	border-radius: 12px;
	background: var(--xt-surface);
	color: var(--xt-heading);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none !important;
	transition: border-color .2s var(--xt-ease), transform .2s var(--xt-ease);
}
.xt-post-nav a:hover { border-color: var(--xt-hover-border); transform: translateY(-2px); }
.xt-post-nav .post-navigation-link__label { font-family: var(--xt-mono); font-size: var(--wp--preset--font-size--x-small); font-weight: 400; color: var(--xt-accent); text-transform: uppercase; letter-spacing: .08em; }
.xt-post-nav .post-navigation-link-next { text-align: right; }
.xt-post-nav .post-navigation-link-next a { align-items: flex-end; }
@media (max-width: 600px) { .xt-post-nav { grid-template-columns: 1fr !important; } }

.xt-related { border-top: 1px solid var(--xt-line); background: var(--xt-surface); }
.xt-related .xt-post-card { background: var(--xt-base); }

/* --------------------------------------------------------------------------
   Scroll reveal (only when JS is running; never in the editor)
   -------------------------------------------------------------------------- */
.xt-js .xt-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--xt-ease), transform .8s var(--xt-ease); }
.xt-js .xt-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.xt-js .xt-reveal { opacity: 1; transform: none; }
	html { scroll-behavior: auto; }
}
.wp-block-post-template.is-layout-grid > li { display: flex; }
.wp-block-post-template.is-layout-grid > li > .xt-post-card { flex: 1; }

/* Project "at a glance" card (imported case studies) */
.xt-project-facts { margin-block-end: 2.5rem !important; }
.xt-project-facts .is-style-xt-eyebrow { margin: 0 0 .75rem; }
.xt-prose .xt-facts-list { list-style: none; padding: 0 !important; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 2rem; font-size: 1rem; }
.xt-prose .xt-facts-list li { margin: 0; display: flex; flex-direction: column; gap: .15rem; color: var(--xt-heading); }
.xt-prose .xt-facts-list li strong { font-family: var(--xt-mono); font-size: var(--wp--preset--font-size--x-small); font-weight: 400; color: var(--xt-muted); text-transform: uppercase; letter-spacing: .06em; }
.xt-prose .xt-facts-list a { word-break: break-word; }
@media (max-width: 600px) { .xt-prose .xt-facts-list { grid-template-columns: 1fr; } }

/* Client portal link (top bar) */
.xt-portal-link a {
	display: inline-flex; align-items: center; gap: .4em;
	padding: 0 .65rem;
	line-height: 1.6;
	border: 1px solid var(--xt-line);
	border-radius: 999px;
	color: var(--xt-heading) !important;
	text-decoration: none !important;
	transition: border-color .2s var(--xt-ease), color .2s var(--xt-ease);
}
.xt-portal-link a::before { content: ""; width: .55em; height: .65em; border: 1.5px solid currentColor; border-radius: 2px; border-top-width: 3px; opacity: .8; }
.xt-portal-link a::after { content: "↗"; font-size: .9em; opacity: .7; }
.xt-portal-link a:hover { border-color: var(--xt-accent); color: var(--xt-accent) !important; }

/* Menu items shown only in the phone menu overlay (e.g. Home — on desktop the logo links home) */
.xt-header .wp-block-navigation .xt-mobile-only { display: none; }
.xt-header .wp-block-navigation .is-menu-open .xt-mobile-only { display: flex; }

/* --------------------------------------------------------------------------
   Client logos strip
   -------------------------------------------------------------------------- */
.xt-clients-section { border-block: 1px solid var(--xt-line); }
.xt-clients-label { margin-bottom: 1.25rem !important; }
.xt-clients { gap: .75rem !important; }
.xt-clients .xt-client {
	margin: 0;
	height: 76px;
	display: grid;
	place-items: center;
	padding: .75rem 1rem;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--xt-line);
	border-radius: 10px;
	transition: border-color .2s var(--xt-ease), transform .2s var(--xt-ease), box-shadow .2s var(--xt-ease);
}
.xt-clients .xt-client a { display: grid; place-items: center; width: 100%; height: 100%; }
.xt-clients .xt-client img {
	max-width: 100%;
	max-height: 44px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1) contrast(1.05);
	opacity: .72;
	mix-blend-mode: multiply; /* blends white logo backgrounds into the tile */
	transition: filter .25s var(--xt-ease), opacity .25s var(--xt-ease);
}
.xt-clients .xt-client:hover,
.xt-clients .xt-client:focus-within { border-color: var(--xt-hover-border); transform: translateY(-2px); box-shadow: var(--xt-card-shadow); }
.xt-clients .xt-client:hover img,
.xt-clients .xt-client:focus-within img { filter: none; opacity: 1; }
:root[data-theme="dark"] .xt-clients .xt-client { background: #eef1f5; border-color: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .xt-clients .xt-client { background: #eef1f5; border-color: transparent; } }
@media (max-width: 1100px) { .xt-clients { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { .xt-clients { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .xt-clients .xt-client { height: 64px; } .xt-clients .xt-client:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* Project photo galleries (case studies) */
.xt-prose .xt-project-gallery { gap: .75rem !important; margin-block-start: 1rem; }
.xt-prose .xt-project-gallery .wp-block-image img { border-radius: 10px; }
.xt-prose .xt-project-gallery .wp-block-image { border-radius: 10px; overflow: hidden; }