/* ==========================================================================
   Nexomark - main stylesheet (no build step; edit directly)
   1. fonts  2. tokens + glass  3. layout + components  4. Duo motion
   ========================================================================== */
@font-face {
	font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap;
	src: url("../fonts/inter-tight-latin-wght.woff2") format("woff2-variations"), url("../fonts/inter-tight-latin-wght.woff2") format("woff2");
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
	font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
	src: url("../fonts/inter-latin-wght.woff2") format("woff2-variations"), url("../fonts/inter-latin-wght.woff2") format("woff2");
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================================
   Liquid Glass design tokens + surfaces  (starter - copy into the theme, rename the lg- prefix if wanted)
   Rules baked in:
   - Text-bearing glass uses a DARK tint >= .62 alpha: it keeps body text >= 4.5:1 even when a bright
     accent blob or the hero sculpture sits behind it (checked with wp_qa.py contrast).
     The tempting rgba(255,255,255,.08) only works for decoration: it drops to ~1.3:1 over cyan.
   - Blur radius is never animated. Animate opacity/transform of layers that have a fixed blur.
   - No backdrop-filter support -> a near-solid surface that still looks intentional.
   ========================================================================== */

@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
	color-scheme: dark;

	/* palette */
	--lg-void: #05070d;
	--lg-midnight: #080b14;
	--lg-navy: #10172a;
	--lg-blue: #5b8cff;
	--lg-cyan: #56e6ff;
	--lg-violet: #9b7cff;
	--lg-ink: #f5f7ff;
	--lg-ink-2: rgb(245 247 255 / .74);   /* secondary text: 4.5:1+ on --glass-2 */
	--lg-ink-3: rgb(245 247 255 / .56);   /* meta / captions >= 18px only */
	--lg-line: rgb(255 255 255 / .10);

	/* glass elevations: 1 = chrome/decor, 2 = text panels, 3 = forms/dense text */
	--glass-1: rgb(16 23 42 / .40);
	--glass-2: rgb(12 17 32 / .62);
	--glass-3: rgb(10 14 26 / .80);
	--glass-solid: rgb(16 23 42 / .96);   /* fallback without backdrop-filter */
	--blur-1: 12px;
	--blur-2: 20px;
	--blur-3: 28px;
	--edge: linear-gradient(140deg, rgb(255 255 255 / .55), rgb(255 255 255 / .08) 34%, rgb(255 255 255 / 0) 58%, rgb(86 230 255 / .30) 100%);
	--shadow-glass: inset 0 1px 0 rgb(255 255 255 / .10), 0 1px 1px rgb(0 0 0 / .4), 0 28px 60px -28px rgb(0 0 0 / .75);

	/* type: one display face + one text face, self-hosted woff2 */
	--font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--step--1: clamp(.83rem, .8rem + .15vw, .92rem);
	--step-0: clamp(1rem, .96rem + .2vw, 1.13rem);
	--step-1: clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
	--step-2: clamp(1.5rem, 1.25rem + 1.1vw, 2.2rem);
	--step-3: clamp(2rem, 1.5rem + 2.4vw, 3.4rem);
	--step-4: clamp(2.6rem, 1.6rem + 4.6vw, 5.6rem);
	--step-5: clamp(3.1rem, 1.4rem + 7.4vw, 8.2rem);   /* hero headline */
	--track-display: -0.035em;

	--r-s: 14px; --r-m: 22px; --r-l: 32px; --r-pill: 999px;
	--gutter: clamp(16px, 4vw, 40px);

	/* motion: input-driven where possible; these are for discrete state changes */
	--ease-out: cubic-bezier(.2, .7, .2, 1);
	--ease-spring: linear(0, 0.046, 0.159, 0.307, 0.465, 0.618, 0.752, 0.863, 0.95, 1.012, 1.052, 1.074, 1.083, 1.082, 1.074, 1.062, 1.049, 1.036, 1.024, 1.014, 1.006, 1, 0.997, 0.994, 0.993, 0.993, 0.994, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 1, 1, 1, 1.001, 1.001, 1.001, 1, 1);
	--ease-spring-soft: linear(0, 0.03, 0.103, 0.201, 0.309, 0.418, 0.521, 0.614, 0.697, 0.767, 0.826, 0.874, 0.912, 0.942, 0.964, 0.981, 0.993, 1.001, 1.006, 1.009, 1.011, 1.011, 1.011, 1.01, 1.009, 1.008, 1.006, 1.005, 1.004, 1.003, 1.003, 1.002, 1.001, 1.001, 1.001, 1, 1, 1, 1, 1, 1);
	--dur-1: 180ms; --dur-2: 320ms; --dur-3: 560ms;

	/* grain kills gradient banding on big dark fields (1 tiny inline SVG, no request) */
	--grain: 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

body {
	margin: 0;
	background:
		radial-gradient(1200px 700px at 78% -10%, rgb(91 140 255 / .16), transparent 60%),
		radial-gradient(900px 600px at -10% 30%, rgb(155 124 255 / .12), transparent 60%),
		var(--lg-midnight);
	color: var(--lg-ink);
	font: 400 var(--step-0)/1.6 var(--font-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
body::before { /* film grain, fixed, never repaints on scroll */
	content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
	background-image: var(--grain); opacity: .05; mix-blend-mode: overlay;
}

.lg-display {
	font-family: var(--font-display); font-weight: 650; letter-spacing: var(--track-display);
	line-height: .98; text-wrap: balance;
}
.lg-eyebrow {
	font: 600 var(--step--1)/1.2 var(--font-text); letter-spacing: .14em; text-transform: uppercase;
	color: var(--lg-cyan);
}
.lg-gradient-text { /* use on 1-3 words, never whole paragraphs */
	background: linear-gradient(100deg, var(--lg-ink) 10%, var(--lg-cyan) 45%, var(--lg-violet) 85%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------------------------------------------------------------- surfaces */
.lg-glass {
	--g: var(--glass-2); --b: var(--blur-2);
	position: relative; isolation: isolate;
	background: var(--glass-solid);
	border-radius: var(--r, var(--r-m));
	box-shadow: var(--shadow-glass);
}
.lg-glass--1 { --g: var(--glass-1); --b: var(--blur-1); }
.lg-glass--3 { --g: var(--glass-3); --b: var(--blur-3); }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.lg-glass {
		background: var(--g);
		-webkit-backdrop-filter: blur(var(--b)) saturate(165%);
		backdrop-filter: blur(var(--b)) saturate(165%);
	}
}

/* specular lens edge: 1px gradient ring, brighter on the light-facing corner */
.lg-glass::before {
	content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	border-radius: inherit; padding: 1px;
	background: var(--edge);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
}
/* pointer-following sheen (desktop): --mx/--my set by duo-motion.js; harmless defaults otherwise */
.lg-glass::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
	background:
		radial-gradient(520px circle at var(--mx, 20%) var(--my, -10%), rgb(255 255 255 / .09), transparent 55%),
		linear-gradient(180deg, rgb(255 255 255 / .06), transparent 30%);
	opacity: var(--sheen, 1);
	transition: opacity var(--dur-2) var(--ease-out);
}

/* optional edge refraction (Chromium renders SVG filters in backdrop-filter; everyone else keeps
   the frosted look). duo-motion.js adds .lg-refract-ok to <html> only where it works.
   Keep it to the nav bar and 1-2 hero chips: it is the most expensive effect on the page. */
.lg-refract-ok .lg-glass--refract {
	-webkit-backdrop-filter: url(#lg-refract) blur(6px) saturate(170%);
	backdrop-filter: url(#lg-refract) blur(6px) saturate(170%);
}

/* ---------------------------------------------------------------- controls */
.lg-btn {
	--bg: var(--lg-ink); --fg: var(--lg-midnight);
	display: inline-flex; align-items: center; gap: .6em; min-height: 48px; padding: 0 1.4em;
	border: 0; border-radius: var(--r-pill); cursor: pointer; text-decoration: none;
	font: 600 var(--step-0)/1 var(--font-text); color: var(--fg); background: var(--bg);
	box-shadow: 0 10px 30px -10px rgb(86 230 255 / .45);
	transform: translate(var(--tx, 0), var(--ty, 0));
	transition: transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-2) var(--ease-out);
}
.lg-btn:hover { box-shadow: 0 14px 40px -10px rgb(86 230 255 / .65); }
.lg-btn--ghost { --bg: transparent; --fg: var(--lg-ink); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28); }
.lg-btn--ghost:hover { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--lg-cyan); outline-offset: 3px; border-radius: 6px;
}
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: .7em 1em; background: var(--lg-ink); color: var(--lg-midnight); border-radius: 10px; }
.skip-link:focus { top: 12px; }

/* ---------------------------------------------------------------- preferences + fallbacks */
@media (max-width: 760px) {
	:root { --blur-1: 10px; --blur-2: 14px; --blur-3: 18px; }  /* cheaper on phones */
}
@media (prefers-reduced-transparency: reduce) {
	.lg-glass, .lg-refract-ok .lg-glass--refract { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
	:root { --glass-1: var(--glass-solid); --glass-2: var(--glass-solid); --lg-ink-2: var(--lg-ink); }
}
@media (forced-colors: active) {
	.lg-glass { border: 1px solid CanvasText; background: Canvas; }
	.lg-glass::before, .lg-glass::after, body::before { display: none; }
	.lg-gradient-text { color: CanvasText; background: none; }
}
@media (prefers-reduced-motion: reduce) {
	.lg-btn { transition: none; transform: none; }
	.lg-glass::after { transition: none; }
}

/* ==========================================================================
   3. Layout + components
   ========================================================================== */
html { scroll-behavior: smooth; scroll-padding-top: 110px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--lg-cyan); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--lg-ink); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 650; letter-spacing: -0.02em; line-height: 1.08; margin: 0 0 .5em; color: var(--lg-ink); text-wrap: balance; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; }
::selection { background: rgb(86 230 255 / .35); color: var(--lg-ink); }
.site { position: relative; z-index: 1; overflow-x: clip; }
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus { clip: auto !important; clip-path: none; height: auto; width: auto; left: 12px; top: 12px; z-index: 100000; padding: 12px 16px; background: var(--lg-ink); color: var(--lg-midnight); border-radius: 10px; }

.nxm-container { width: min(1180px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.nxm-container--narrow { width: min(760px, 100% - 2 * var(--gutter)); }
.nxm-section { position: relative; padding-block: clamp(72px, 12vh, 136px); }
.nxm-section--tight { padding-block: clamp(48px, 8vh, 88px); }
.nxm-section--glow::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: radial-gradient(60% 50% at 80% 0%, rgb(91 140 255 / .12), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgb(155 124 255 / .10), transparent 70%);
}
.nxm-sh { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.nxm-sh h2 { font-size: var(--step-4); line-height: 1; letter-spacing: var(--track-display); }
.nxm-sh p:last-child { color: var(--lg-ink-2); font-size: var(--step-1); margin: 0; max-width: 60ch; }
.nxm-sh--center { margin-inline: auto; text-align: center; }
.nxm-lede { font-size: var(--step-1); color: var(--lg-ink-2); max-width: 60ch; }
.nxm-muted { color: var(--lg-ink-2); }

/* ---------------------------------------------------------------- header */
.nxm-header {
	position: fixed; z-index: 60; top: 14px; left: 50%; translate: -50% 0;
	width: min(1180px, calc(100% - 24px)); --r: var(--r-pill);
	display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px;
	transition: background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
body.admin-bar .nxm-header { top: 46px; }
@media (min-width: 783px) { body.admin-bar .nxm-header { top: 46px; } }
@media (max-width: 782px) { body.admin-bar .nxm-header { top: 60px; } }
.nxm-header.is-scrolled { --g: var(--glass-2); }
.nxm-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--lg-ink); text-decoration: none; font: 700 1.16rem/1 var(--font-display); letter-spacing: -0.03em; white-space: nowrap; }
.nxm-brand:hover { color: var(--lg-ink); }
.nxm-brand__mark { width: 26px; height: 26px; flex: none; }
.nxm-brand .custom-logo { max-height: 34px; width: auto; }
.nxm-nav { margin-inline: auto; }
.nxm-menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nxm-menu a { white-space: nowrap; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); color: var(--lg-ink-2); text-decoration: none; font-size: .95rem; font-weight: 500; transition: color var(--dur-1), background-color var(--dur-1); }
.nxm-menu a:hover, .nxm-menu .current-menu-item > a, .nxm-menu .current-menu-ancestor > a, .nxm-menu .current_page_parent > a { color: var(--lg-ink); background: rgb(255 255 255 / .07); }
.nxm-menu .sub-menu { display: none; }
.nxm-header__cta { margin-left: auto; }
.nxm-header .lg-btn { min-height: 42px; font-size: .95rem; padding: 0 1.15em; white-space: nowrap; }
.nxm-menu-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .08); color: var(--lg-ink); cursor: pointer; place-items: center; }
.nxm-menu-toggle svg { width: 22px; height: 22px; }
@media (max-width: 1079px) {
	.nxm-nav { display: none; }
	.nxm-menu-toggle { display: grid; }
	.nxm-header__cta { margin-left: 0; }
}
@media (max-width: 479px) { .nxm-header__cta { display: none; } }

.nxm-mobile { position: fixed; inset: 0; z-index: 70; display: none; }
.nxm-mobile.is-open { display: block; }
.nxm-mobile__backdrop { position: absolute; inset: 0; background: rgb(5 7 13 / .6); }
.nxm-mobile__panel { position: absolute; inset: 10px; --r: 28px; padding: 18px 18px 28px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }
.nxm-mobile__top { display: flex; align-items: center; justify-content: space-between; }
.nxm-mobile .nxm-menu { flex-direction: column; align-items: stretch; gap: 2px; }
.nxm-mobile .nxm-menu a { font-size: var(--step-1); min-height: 52px; padding: 0 12px; border-radius: 14px; }
.nxm-mobile .lg-btn { justify-content: center; }
@media (prefers-reduced-motion: no-preference) {
	.nxm-mobile.is-open .nxm-mobile__panel { animation: nxm-sheet var(--dur-3) var(--ease-spring-soft) both; }
	@keyframes nxm-sheet { from { transform: translateY(16px) scale(.985); filter: blur(6px); } }
}

/* ---------------------------------------------------------------- breadcrumbs */
.nxm-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 18px; padding: 0; font-size: var(--step--1); color: var(--lg-ink-3); }
.nxm-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--lg-ink-3); }
.nxm-crumbs a { color: var(--lg-ink-2); text-decoration: none; display: inline-block; padding-block: 4px; }
.nxm-crumbs a:hover { color: var(--lg-ink); }
.nxm-crumbs [aria-current] { color: var(--lg-ink-2); display: inline-block; padding-block: 4px; }
.nxm-phero + .nxm-section--tight, .nxm-phero + .nxm-chapters { padding-top: 0; margin-top: -8px; }

/* ---------------------------------------------------------------- interior page hero */
.nxm-phero { position: relative; padding: clamp(132px, 20vh, 196px) 0 clamp(40px, 7vh, 72px); isolation: isolate; }
.nxm-phero::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: radial-gradient(50% 70% at 85% 0%, rgb(91 140 255 / .20), transparent 70%), radial-gradient(40% 60% at 100% 60%, rgb(155 124 255 / .14), transparent 70%), radial-gradient(30% 40% at 70% 20%, rgb(86 230 255 / .10), transparent 70%);
}
.nxm-phero h1 { font-size: var(--step-4); line-height: 1; letter-spacing: var(--track-display); max-width: 18ch; margin: .3em 0 .35em; }
.nxm-phero .nxm-lede { margin-bottom: 1.6em; }
.nxm-phero__art { position: absolute; z-index: -1; right: max(-120px, -6vw); top: 60px; width: min(620px, 52vw); opacity: .9; pointer-events: none; }
.nxm-phero__art img { width: 100%; height: auto; }
@media (max-width: 899px) { .nxm-phero__art { opacity: .35; width: 90vw; right: -30vw; } }
.nxm-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.nxm-note { font-size: var(--step--1); color: var(--lg-ink-3); margin-top: 14px; }

/* ---------------------------------------------------------------- chapter nav (long pages) */
.nxm-chapters { position: sticky; top: 84px; z-index: 40; margin-bottom: 8px; }
body.admin-bar .nxm-chapters { top: 116px; }
.nxm-chapters__inner { --r: var(--r-pill); display: flex; gap: 4px; overflow-x: auto; padding: 6px; scrollbar-width: none; }
.nxm-chapters__inner::-webkit-scrollbar { display: none; }
.nxm-chapters a { flex: none; display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: var(--r-pill); color: var(--lg-ink-2); text-decoration: none; font-size: .9rem; }
.nxm-chapters a:hover, .nxm-chapters a.is-current { color: var(--lg-midnight); background: var(--lg-ink); }

/* ---------------------------------------------------------------- cards + grids */
.nxm-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.nxm-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.nxm-service-group + .nxm-service-group { padding-top: 0; }
.nxm-service-group__title { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem); letter-spacing: -0.015em; margin: 0 0 20px; }
.nxm-card { --r: var(--r-m); position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 3vw, 30px); min-height: 100%; }
.nxm-card h3 { margin: 4px 0 2px; }
.nxm-card p { color: var(--lg-ink-2); margin: 0; }
.nxm-card__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: var(--lg-cyan); background: linear-gradient(140deg, rgb(86 230 255 / .16), rgb(155 124 255 / .12)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.nxm-card__icon svg { width: 24px; height: 24px; }
.nxm-card__link { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 8px; color: var(--lg-ink); font-weight: 600; text-decoration: none; }
.nxm-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* whole card clickable */
.nxm-card__link svg { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-spring); }
.nxm-card:hover .nxm-card__link svg { transform: translateX(4px); }
.nxm-card:focus-within { outline: 2px solid var(--lg-cyan); outline-offset: 3px; }

/* bento: services grouped */
.nxm-bento { display: grid; gap: 18px; grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; }
.nxm-bento > * { grid-column: span 2; }
.nxm-bento > .is-wide { grid-column: span 3; }
.nxm-bento > .is-hero { grid-column: span 4; grid-row: span 2; }
.nxm-bento .is-hero { min-height: 360px; overflow: hidden; }
.nxm-bento .is-hero .nxm-bento__art { position: absolute; bottom: -22%; right: -12%; width: min(520px, 62%); height: auto; opacity: .9; z-index: -1; pointer-events: none; }
.nxm-bento .is-hero p, .nxm-bento .is-hero .nxm-tags { max-width: 36ch; }
.nxm-bento .is-hero h3 { font-size: var(--step-2); }
@media (max-width: 999px) { .nxm-bento { grid-template-columns: repeat(2, 1fr); } .nxm-bento > *, .nxm-bento > .is-wide { grid-column: span 1; } .nxm-bento > .is-hero { grid-column: span 2; grid-row: auto; } }
@media (max-width: 599px) { .nxm-bento { grid-template-columns: 1fr; } .nxm-bento > .is-hero { grid-column: auto; } }
.nxm-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 4px 0 0; padding: 0; }
.nxm-tags li { font-size: .8rem; color: var(--lg-ink-2); padding: 4px 10px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }

/* industry tiles */
.nxm-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.nxm-tile { --r: 18px; display: flex; align-items: center; gap: 14px; padding: 16px 18px; min-height: 72px; color: var(--lg-ink); text-decoration: none; font-weight: 600; }
.nxm-tile svg { width: 22px; height: 22px; color: var(--lg-cyan); flex: none; }
.nxm-tile:hover { color: var(--lg-ink); --g: var(--glass-3); }

/* trust ribbon (no logos until real ones exist) */
.nxm-ribbon { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; color: var(--lg-ink-3); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; }
.nxm-ribbon span { display: inline-flex; align-items: center; gap: 10px; }
.nxm-ribbon span + span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lg-blue); opacity: .7; margin-right: 18px; }

/* statement */
.nxm-statement { font: 600 var(--step-3)/1.12 var(--font-display); letter-spacing: -0.03em; max-width: 24ch; }
.nxm-statement em { font-style: normal; color: var(--lg-ink-3); }

/* checks */
.nxm-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.nxm-checks li { position: relative; padding-left: 30px; color: var(--lg-ink-2); }
.nxm-checks li::before { content: ""; position: absolute; left: 0; top: .32em; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--lg-midnight) 0 34%, transparent 36%), linear-gradient(140deg, var(--lg-cyan), var(--lg-violet)); }
.nxm-checks strong { color: var(--lg-ink); }

/* fold panes body */
.nxm-pane { padding: clamp(24px, 4vw, 48px); min-height: 100%; display: flex; flex-direction: column; gap: 14px; }
.nxm-pane h3 { font-size: var(--step-2); }

/* steps (process) */
.nxm-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); counter-reset: step; }
.nxm-steps > li { --r: var(--r-m); counter-increment: step; padding: 26px 24px; position: relative; }
.nxm-steps > li::before { content: counter(step, decimal-leading-zero); display: block; font: 650 var(--step-3)/1 var(--font-display); letter-spacing: -0.04em; margin-bottom: 18px; background: linear-gradient(160deg, var(--lg-ink), rgb(245 247 255 / .25)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nxm-steps h3 { margin-bottom: 6px; }
.nxm-steps p { color: var(--lg-ink-2); margin: 0; }
.nxm-steps .nxm-when { display: inline-block; margin-top: 12px; font-size: .8rem; color: var(--lg-cyan); }

/* sticky storytelling */
.nxm-story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); align-items: start; }
.nxm-story__visual { position: sticky; top: 120px; aspect-ratio: 1; --r: var(--r-l); overflow: hidden; display: grid; place-items: center; }
.nxm-story__visual img { width: 100%; height: 100%; object-fit: cover; }
.nxm-story__label { position: absolute; left: 22px; bottom: 20px; right: 22px; font: 600 var(--step-1)/1.2 var(--font-display); }
.nxm-story__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 14vh, 140px); padding-block: 8vh; }
.nxm-story__steps li { max-width: 46ch; }
.nxm-story__steps .lg-eyebrow { display: block; margin-bottom: 8px; }
.nxm-story__steps p { color: var(--lg-ink-2); }
@media (max-width: 899px) { .nxm-story { grid-template-columns: 1fr; } .nxm-story__visual { position: relative; top: 0; aspect-ratio: 16 / 10; } .nxm-story__steps { gap: 28px; padding-block: 0; } }

/* timeline */
.nxm-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-left: 1px solid var(--lg-line); }
.nxm-timeline li { position: relative; padding: 0 0 28px 28px; }
.nxm-timeline li::before { content: ""; position: absolute; left: -6px; top: .45em; width: 11px; height: 11px; border-radius: 50%; background: var(--lg-cyan); box-shadow: 0 0 0 4px rgb(86 230 255 / .18); }
.nxm-timeline strong { display: block; font-family: var(--font-display); font-size: var(--step-1); margin-bottom: 4px; }
.nxm-timeline p { color: var(--lg-ink-2); margin: 0; }

/* snap gallery */
.nxm-gallery { display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 420px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; }
.nxm-gallery > * { scroll-snap-align: start; }

/* pricing */
.nxm-plans { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.nxm-plan { --r: var(--r-l); padding: 30px; display: flex; flex-direction: column; gap: 14px; }
.nxm-plan h3 { font-size: var(--step-2); margin: 0; }
.nxm-plan__for { color: var(--lg-ink-2); margin: 0; }
.nxm-plan__price { font: 650 var(--step-2)/1 var(--font-display); }
.nxm-plan__price small { font: 500 var(--step--1)/1 var(--font-text); color: var(--lg-ink-3); }
.nxm-plan .lg-btn { margin-top: auto; justify-content: center; }
.nxm-plan.is-featured { box-shadow: var(--shadow-glass), 0 0 0 1px rgb(86 230 255 / .45), 0 30px 80px -30px rgb(86 230 255 / .35); }

/* faq */
.nxm-faq { display: grid; gap: 10px; }
.nxm-faq details { --r: 18px; padding: 0; }
.nxm-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; font: 600 var(--step-0)/1.35 var(--font-text); color: var(--lg-ink); border-radius: inherit; }
.nxm-faq summary::-webkit-details-marker { display: none; }
.nxm-faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--lg-cyan); border-bottom: 2px solid var(--lg-cyan); transform: rotate(45deg) translateY(-3px); transition: transform var(--dur-2) var(--ease-spring); }
.nxm-faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.nxm-faq .nxm-faq__a { padding: 0 22px 20px; color: var(--lg-ink-2); }
.nxm-faq .nxm-faq__a p:last-child { margin: 0; }

/* conversion band */
.nxm-cta-band { --r: var(--r-l); padding: clamp(32px, 6vw, 72px); display: grid; gap: 28px; grid-template-columns: 1.4fr 1fr; align-items: end; overflow: hidden; }
.nxm-cta-band h2 { font-size: var(--step-4); line-height: 1; letter-spacing: var(--track-display); margin: 0 0 .3em; }
.nxm-cta-band p { color: var(--lg-ink-2); margin: 0; font-size: var(--step-1); }
.nxm-cta-band__art { position: absolute; z-index: -1; right: -12%; top: -40%; width: 60%; opacity: .55; pointer-events: none; }
.nxm-contact-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.nxm-contact-list a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--lg-ink); text-decoration: none; }
.nxm-contact-list svg { width: 18px; height: 18px; color: var(--lg-cyan); }
@media (max-width: 799px) { .nxm-cta-band { grid-template-columns: 1fr; align-items: start; } }

/* ---------------------------------------------------------------- prose (the_content) */
.nxm-prose { font-size: var(--step-0); color: var(--lg-ink-2); }
.nxm-prose > * { max-width: 72ch; }
.nxm-prose > .alignwide { max-width: 1100px; }
.nxm-prose > .alignfull { max-width: none; }
.nxm-prose h2 { font-size: var(--step-2); margin-top: 1.8em; color: var(--lg-ink); }
.nxm-prose h3 { font-size: var(--step-1); margin-top: 1.5em; color: var(--lg-ink); }
.nxm-prose strong { color: var(--lg-ink); }
.nxm-prose li { margin-bottom: .4em; }
.nxm-prose blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--lg-cyan); color: var(--lg-ink); font-size: var(--step-1); }
.nxm-prose img { border-radius: var(--r-m); }
.nxm-prose figcaption { font-size: var(--step--1); color: var(--lg-ink-3); margin-top: 8px; }
.nxm-prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.nxm-prose th, .nxm-prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--lg-line); }
.nxm-prose code { background: rgb(255 255 255 / .08); padding: .1em .4em; border-radius: 6px; font-size: .9em; }
.nxm-prose .wp-block-button__link { display: inline-flex; min-height: 48px; align-items: center; padding: 0 1.4em; border-radius: var(--r-pill); background: var(--lg-ink); color: var(--lg-midnight); text-decoration: none; font-weight: 600; }
.nxm-prose .wp-block-columns { gap: 24px; }
.nxm-prose .wp-block-group.is-style-glass, .nxm-prose .is-style-glass { --r: var(--r-m); padding: clamp(22px, 3vw, 32px); }

/* ---------------------------------------------------------------- blog */
.nxm-post-card { --r: var(--r-m); display: flex; flex-direction: column; overflow: hidden; }
.nxm-post-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(140deg, rgb(91 140 255 / .25), rgb(155 124 255 / .18)); }
.nxm-post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.nxm-post-card__body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.nxm-post-card h2, .nxm-post-card h3 { font-size: var(--step-1); margin: 0; }
.nxm-post-card a { color: var(--lg-ink); text-decoration: none; }
.nxm-post-card a::after { content: ""; position: absolute; inset: 0; }
.nxm-meta { font-size: var(--step--1); color: var(--lg-ink-3); display: flex; flex-wrap: wrap; gap: 6px 14px; }
.nxm-author-box { --r: var(--r-m); display: flex; gap: 18px; align-items: center; padding: 22px; margin-top: 40px; }
.nxm-author-box img { border-radius: 50%; }
.nxm-toc { --r: var(--r-m); padding: 20px 22px; margin: 0 0 32px; }
.nxm-toc ol { margin: 8px 0 0; padding-left: 1.2em; color: var(--lg-ink-2); }
.navigation.pagination { margin-top: 40px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.nav-links .page-numbers { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 12px; color: var(--lg-ink-2); text-decoration: none; box-shadow: inset 0 0 0 1px var(--lg-line); }
.nav-links .page-numbers.current, .nav-links a.page-numbers:hover { color: var(--lg-midnight); background: var(--lg-ink); }
.nxm-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.nxm-filter a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); color: var(--lg-ink-2); text-decoration: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); font-size: .92rem; }
.nxm-filter a[aria-current="page"], .nxm-filter a:hover { color: var(--lg-midnight); background: var(--lg-ink); box-shadow: none; }
.nxm-empty { --r: var(--r-m); padding: 32px; text-align: center; color: var(--lg-ink-2); }

/* ---------------------------------------------------------------- forms */
.nxm-form { --r: var(--r-l); padding: clamp(22px, 4vw, 40px); display: grid; gap: 18px; }
.nxm-form__row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
@media (max-width: 639px) { .nxm-form__row { grid-template-columns: 1fr; } }
.nxm-field { display: grid; gap: 7px; }
.nxm-field label, .nxm-field legend { font-weight: 600; font-size: .95rem; color: var(--lg-ink); }
.nxm-field .nxm-hint { font-size: .85rem; color: var(--lg-ink-3); }
.nxm-field input:not([type="radio"]):not([type="checkbox"]), .nxm-field select, .nxm-field textarea {
	width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgb(255 255 255 / .18);
	background: rgb(5 7 13 / .55); color: var(--lg-ink); font: inherit; font-size: 1rem;
	transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.nxm-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--lg-cyan) 50%), linear-gradient(135deg, var(--lg-cyan) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.nxm-field select option { background: var(--lg-navy); color: var(--lg-ink); }
.nxm-field textarea { min-height: 130px; resize: vertical; }
.nxm-field input:not([type="radio"]):not([type="checkbox"]):focus, .nxm-field select:focus, .nxm-field textarea:focus { outline: none; border-color: var(--lg-cyan); box-shadow: 0 0 0 3px rgb(86 230 255 / .25); }
.nxm-field [aria-invalid="true"] { border-color: #ff8a8a; }
.nxm-field__error { color: #ffb0b0; font-size: .9rem; }
.nxm-choices { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nxm-choices legend { margin-bottom: 8px; }
.nxm-choices label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); cursor: pointer; font-weight: 500; }
.nxm-choices input { accent-color: var(--lg-cyan); width: 18px; height: 18px; }
.nxm-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--lg-ink-2); }
.nxm-consent input { accent-color: var(--lg-cyan); width: 20px; height: 20px; margin-top: 2px; flex: none; }
.nxm-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.nxm-form__summary { padding: 14px 16px; border-radius: 14px; background: rgb(255 120 120 / .12); box-shadow: inset 0 0 0 1px rgb(255 140 140 / .45); color: var(--lg-ink); }
.nxm-form__summary ul { margin: 6px 0 0; padding-left: 1.2em; }
.nxm-form__summary a { color: #ffd0d0; }
.nxm-form .lg-btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.nxm-contact-grid { display: grid; gap: clamp(24px, 4vw, 48px); grid-template-columns: 1.3fr .9fr; align-items: start; }
@media (max-width: 899px) { .nxm-contact-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- footer */
.nxm-footer { position: relative; z-index: 1; margin-top: clamp(40px, 8vh, 80px); padding: 64px 0 32px; border-top: 1px solid var(--lg-line); background: linear-gradient(180deg, transparent, rgb(5 7 13 / .6)); }
.nxm-footer__grid { display: grid; gap: 32px; grid-template-columns: 1.2fr 2fr repeat(3, 1fr); }
.nxm-footer__services ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.nxm-footer__stack { display: grid; gap: 28px; align-content: start; }
@media (max-width: 1199px) { .nxm-footer__grid { grid-template-columns: repeat(3, 1fr); } .nxm-footer__about, .nxm-footer__services { grid-column: 1 / -1; } .nxm-footer__services ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 999px) { .nxm-footer__grid { grid-template-columns: 1fr 1fr; } .nxm-footer__services ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 519px) { .nxm-footer__grid { grid-template-columns: 1fr; } }
.nxm-footer h2 { font: 600 .82rem/1.2 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--lg-ink-3); margin: 0 0 14px; }
.nxm-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nxm-footer ul a { display: inline-block; padding: 5px 0; color: var(--lg-ink-2); text-decoration: none; font-size: .95rem; }
.nxm-footer ul a:hover { color: var(--lg-ink); }
.nxm-footer__about p { color: var(--lg-ink-2); max-width: 36ch; }
.nxm-socials { display: flex; gap: 8px; margin-top: 16px; }
.nxm-socials a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--lg-ink-2); box-shadow: inset 0 0 0 1px var(--lg-line); }
.nxm-socials svg { width: 18px; height: 18px; }
.nxm-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--lg-line); color: var(--lg-ink-3); font-size: .88rem; }
.nxm-footer__base ul { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.nxm-footer__base ul a { font-size: .88rem; color: var(--lg-ink-3); }

/* ---------------------------------------------------------------- 404 / misc */
.nxm-404 { text-align: center; }
.nxm-404 .nxm-big { font: 700 clamp(5rem, 20vw, 12rem)/.9 var(--font-display); letter-spacing: -0.06em; background: linear-gradient(160deg, var(--lg-ink), rgb(245 247 255 / .15)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nxm-search { display: flex; gap: 8px; max-width: 520px; margin: 24px auto 0; }
.nxm-search input { flex: 1; min-height: 50px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid rgb(255 255 255 / .2); background: rgb(5 7 13 / .55); color: var(--lg-ink); font: inherit; }
.nxm-sitemap { columns: 3 240px; column-gap: 32px; }
.nxm-sitemap section { break-inside: avoid; margin-bottom: 28px; }
.nxm-sitemap h2 { font-size: var(--step-1); }
.nxm-sitemap ul { padding-left: 1.1em; color: var(--lg-ink-2); }
.nxm-sitemap li { margin-bottom: 4px; }
.nxm-sample-flag { display: inline-block; padding: 4px 10px; border-radius: var(--r-pill); background: #ffcf5a; color: #1a1300; font-weight: 700; font-size: .8rem; }
.nxm-icons { position: absolute; width: 0; height: 0; overflow: hidden; }

@media (forced-colors: active) {
	.nxm-card__icon, .nxm-tile svg { color: CanvasText; }
	.nxm-steps > li::before { color: CanvasText; background: none; }
}
@media (prefers-reduced-motion: reduce) {
	.nxm-card__link svg { transition: none; }
}


/* ---------------------------------------------------------------- home extras */
.nxm-intro > p:first-child, .nxm-intro .is-style-lead { font: 600 var(--step-3)/1.12 var(--font-display); letter-spacing: -0.03em; color: var(--lg-ink); max-width: 26ch; }
.nxm-intro > p:first-child + p { font-size: var(--step-1); max-width: 56ch; }
.nxm-compare { min-height: 380px; box-shadow: var(--shadow-glass), inset 0 0 0 1px rgb(255 255 255 / .1); }
.nxm-compare__side { padding: 28px; display: flex; flex-direction: column; justify-content: center; }
.nxm-compare .duo-drag__before { background: linear-gradient(160deg, #161b2a, #0c101c); }
.nxm-compare .duo-drag__after { background: radial-gradient(70% 60% at 20% 20%, rgb(86 230 255 / .28), transparent 70%), linear-gradient(150deg, #22377a, #3a5bd0 55%, #6d58c9); }
.nxm-compare .duo-drag__after .lg-eyebrow { color: var(--lg-ink); }
.nxm-flow { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: flow; }
.nxm-flow li { counter-increment: flow; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgb(5 7 13 / .45); color: var(--lg-ink); font-weight: 500; }
.nxm-flow li::before { content: counter(flow); flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: .8rem; font-weight: 700; background: rgb(255 255 255 / .12); }
.nxm-form__title { font-size: var(--step-2); margin: 0; }
.nxm-footer .nxm-brand { margin-bottom: 14px; }
.nxm-icon { width: 1em; height: 1em; flex: none; }
.duo-fold:not([data-duo]) { --p: 1; }
.wp-block-group.is-style-glass, .wp-block-column.is-style-glass, .wp-block-quote.is-style-glass, .wp-block-details.is-style-glass {
	--r: var(--r-m); position: relative; border-radius: var(--r-m); padding: clamp(22px, 3vw, 32px);
	background: var(--glass-solid); box-shadow: var(--shadow-glass), inset 0 0 0 1px rgb(255 255 255 / .1);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.wp-block-group.is-style-glass, .wp-block-column.is-style-glass, .wp-block-quote.is-style-glass, .wp-block-details.is-style-glass { background: var(--glass-2); -webkit-backdrop-filter: blur(var(--blur-2)) saturate(165%); backdrop-filter: blur(var(--blur-2)) saturate(165%); }
}
.nxm-prose .wp-block-columns { margin-block: 28px; }
.nxm-prose .has-large-font-size { font-size: var(--step-2) !important; }
.nxm-prose .wp-block-separator { border: 0; border-top: 1px solid var(--lg-line); margin: 40px 0; }
.nxm-prose ul.is-style-checks, .nxm-prose ul.nxm-checks { list-style: none; padding: 0; }

/* ==========================================================================
   4. Duo motion (from the liquid-glass skill starter)
   ========================================================================== */
/* ==========================================================================
   Duo Motion - a motion language inspired by the iPhone Duo fold transition (Sept 2026):
   1. continuity, not cuts: things frost over / come into focus instead of sliding or popping
   2. content stays anchored; the frame (hinge, panes, light) moves around it; size never jumps
   3. progress is scrubbed by input (scroll / drag), like the hinge angle, so it is reversible
   4. depth of field + a sheen of light travelling along the hinge
   5. exits frost over and slip into black
   Every effect is driven by one number, --p (0..1), set by CSS scroll timelines where supported
   and by duo-motion.js otherwise. Reduced motion pins --p to 1 (fully open, sharp, static).
   No Apple imagery, device renders, names or SF fonts: this is a motion idea, not a product mock-up.
   ========================================================================== */

/* ----- scroll-driven progress (CSS only, off the main thread). JS fallback sets --p inline. */
@keyframes duo-progress { from { --p: 0; } to { --p: 1; } }

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		html:not(.duo-js-progress) [data-duo="fold"] {      /* fully open by the time it reaches ~40% from the top */
			animation: duo-progress linear both;
			animation-timeline: view();
			animation-range: entry 5% cover 38%;
		}
		html:not(.duo-js-progress) [data-duo="focus"] {     /* sharp while still in the lower third: nobody reads blurry text */
			animation: duo-progress linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 25%;
		}
		html:not(.duo-js-progress) [data-duo="exit"] {
			animation: duo-progress linear both;
			animation-timeline: view();
			animation-range: exit 0% exit 85%;
		}
	}
}

/* ------------------------------------------------------------------ 1. fold (two panes on a hinge) */
.duo-fold {
	--fold: 74deg;
	--ease-p: calc(var(--p) * var(--p) * (3 - 2 * var(--p)));   /* smoothstep: soft start, soft landing */
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	perspective: 1800px;
	perspective-origin: 50% 40%;
}
.duo-fold__pane {
	position: relative;
	min-height: 100%;
	overflow: hidden;
	will-change: transform;
	transform-origin: right center;
	transform: rotateY(calc((1 - var(--ease-p)) * var(--fold)));
	border-radius: var(--r-l) 6px 6px var(--r-l);
}
.duo-fold__pane + .duo-fold__pane {
	transform-origin: left center;
	transform: rotateY(calc((1 - var(--ease-p)) * var(--fold) * -1));
	border-radius: 6px var(--r-l) var(--r-l) 6px;
}
/* frost layer: fixed blur, only its opacity follows --p (cheap). Content under it "comes into focus". */
.duo-frost {
	position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
	background: rgb(5 7 13 / .55);
	-webkit-backdrop-filter: blur(16px) saturate(120%);
	backdrop-filter: blur(16px) saturate(120%);
	opacity: calc(1 - var(--ease-p));
}
/* the hinge: a crease of light that peaks mid-unfold and settles to a hairline */
.duo-fold::after {
	content: ""; position: absolute; z-index: 4; pointer-events: none;
	top: 6%; bottom: 6%; left: 50%; width: 2px; transform: translateX(-50%);
	background: linear-gradient(180deg, transparent, rgb(86 230 255 / .9) 30%, rgb(255 255 255 / .95) 50%, rgb(155 124 255 / .9) 70%, transparent);
	filter: drop-shadow(0 0 10px rgb(86 230 255 / .8));
	opacity: calc(.12 + var(--p) * (1 - var(--p)) * 3.2);
}
@media (max-width: 899px) {   /* phones: the hinge turns horizontal, smaller angle so text stays legible */
	.duo-fold { --fold: 48deg; grid-template-columns: 1fr; perspective-origin: 50% 50%; }
	.duo-fold__pane { transform-origin: center bottom; transform: rotateX(calc((1 - var(--ease-p)) * var(--fold) * -1)); border-radius: var(--r-l) var(--r-l) 6px 6px; }
	.duo-fold__pane + .duo-fold__pane { transform-origin: center top; transform: rotateX(calc((1 - var(--ease-p)) * var(--fold))); border-radius: 6px 6px var(--r-l) var(--r-l); }
	.duo-fold::after { top: 50%; bottom: auto; left: 8%; right: 8%; width: auto; height: 2px; transform: translateY(-50%);
		background: linear-gradient(90deg, transparent, rgb(86 230 255 / .9) 30%, #fff 50%, rgb(155 124 255 / .9) 70%, transparent); }
}

/* ------------------------------------------------------------------ 2. focus pull (headings, short blocks) */
/* blur on text is fine for small elements; for big panels use a .duo-frost layer instead */
[data-duo="focus"] {
	filter: blur(calc((1 - var(--p)) * 9px));
	opacity: calc(.3 + var(--p) * .7);
	transform: translateY(calc((1 - var(--p)) * 14px));
}

/* ------------------------------------------------------------------ 3. frost-to-black exit (hero, chapters) */
[data-duo="exit"] { position: relative; }
[data-duo="exit"] > .duo-exit-veil {
	position: absolute; inset: 0; z-index: 5; pointer-events: none;
	background: var(--lg-void, #05070d);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	opacity: calc(var(--p) * var(--p));     /* stays clear for the first half of the scroll, then slips into black */
}

/* ------------------------------------------------------------------ 4. drag to unfold (before/after, compare) */
[data-duo="drag"] { touch-action: pan-y; cursor: ew-resize; user-select: none; }
[data-duo="drag"]:focus-visible { outline: 2px solid var(--lg-cyan, #56e6ff); outline-offset: 6px; }
.duo-drag { position: relative; overflow: hidden; border-radius: var(--r-l, 32px); }
.duo-drag__before, .duo-drag__after { position: absolute; inset: 0; }
.duo-drag__before { filter: brightness(calc(1 - var(--p) * .55)); }            /* the "old" state dims as you unfold */
.duo-drag__after { clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }   /* the "new" state is revealed, never resized */
.duo-drag__after::after { /* light on the moving edge = the hinge */
	content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--p) * 100%); width: 2px; transform: translateX(-1px);
	background: linear-gradient(180deg, transparent, #fff 50%, transparent); filter: drop-shadow(0 0 8px rgb(86 230 255 / .9));
}
.duo-drag__handle {
	position: absolute; z-index: 6; top: 50%; left: calc(var(--p) * 100%); width: 44px; height: 44px; margin: -22px 0 0 -22px;
	border-radius: 50%; display: grid; place-items: center; pointer-events: none;
	background: rgb(245 247 255 / .92); color: #080b14; box-shadow: 0 8px 30px rgb(0 0 0 / .45);
	opacity: calc(1 - var(--p) * .7);
}

/* tilt cards: --rx/--ry from duo-motion.js (pointer: fine only) */
[data-tilt] {
	transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform var(--dur-3, 560ms) var(--ease-spring-soft, ease-out);
}

/* ------------------------------------------------------------------ 5. page transitions (cross-document) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
	::view-transition-old(root) { animation: duo-frost-out 300ms cubic-bezier(.4, 0, .6, 1) both; }
	::view-transition-new(root) { animation: duo-focus-in 420ms cubic-bezier(.2, .7, .2, 1) 60ms both; }
}
@keyframes duo-frost-out { to { filter: blur(14px) brightness(.35); opacity: 0; } }
@keyframes duo-focus-in { from { filter: blur(14px) brightness(.6); opacity: 0; } }

/* ------------------------------------------------------------------ 6. depth of field for decorative layers */
.duo-dof-far { filter: blur(6px); opacity: .7; }
.duo-dof-mid { filter: blur(2px); }

/* ------------------------------------------------------------------ reduced motion: open, sharp, still */
@media (prefers-reduced-motion: reduce) {
	[data-duo] { --p: 1 !important; animation: none !important; }
	.duo-fold__pane, .duo-fold__pane + .duo-fold__pane { transform: none; }
	[data-duo="focus"] { filter: none; transform: none; opacity: 1; }
	.duo-frost { display: none; }
	[data-tilt] { transform: none; transition: none; }
	[data-duo="exit"] > .duo-exit-veil { opacity: 0; }
	@view-transition { navigation: none; }
}
/* Resting state = finished. Scroll-timeline animations and the JS fallback's inline --p both override
   this, so without either (no JS, old browser) visitors see open, sharp content - never a half-fold. */
[data-duo] { --p: 1; }