/* Argenox — white by default with dark cinematic bands; Argenox light blue as the signal colour.
   Tokens first; everything below references them. */

/* Default: white version, Argenox blue ink on white. */
:root {
	--bg: #ffffff;
	--bg-2: #f4f7fa;
	--surface: #ffffff;
	--surface-2: #f4f7fa;
	--border: #e2e8ef;
	--border-2: #c9d5e2;
	--text: #0b1f36;
	--muted: #4c5c70;
	--dim: #5f6d7f;
	--cyan-ink: #006fa6;
	--cyan-soft: rgba(0, 175, 240, 0.08);
	--cyan-line: rgba(0, 121, 179, 0.3);
	--glow: 0 0 24px rgba(0, 175, 240, 0.18);
	--surface-0: rgba(255, 255, 255, 0);
	--header-bg: rgba(255, 255, 255, 0.78);
	--header-bg-solid: rgba(255, 255, 255, 0.96);
	--header-line: rgba(11, 31, 54, 0.08);
	--cyan: #00aff0;
	--navy: #102d4f;
	--card-glass: rgba(255, 255, 255, 0.9);
	--chip-text: #0079b3;
	--lead: #4c5c70;
	color-scheme: light;
}


/* Dark version, and the dark islands (hero, closing panel) in both versions. */
[data-theme="dark"], .island {
	--bg: #05080d;
	--bg-2: #070c13;
	--surface: #0b1119;
	--surface-2: #0f1722;
	--border: #1a2432;
	--border-2: #243246;
	--text: #e7ebef;
	--muted: #8b98a9;
	--dim: #5f6d80;
	--cyan: #00aff0;            /* Argenox light blue */
	--cyan-soft: rgba(0, 175, 240, 0.1);
	--cyan-line: rgba(0, 175, 240, 0.3);
	--glow: 0 0 30px rgba(0, 175, 240, 0.5), 0 0 60px rgba(0, 175, 240, 0.2);
	--navy: #102d4f;            /* Argenox blue */
	--cyan-ink: #00aff0;        /* light blue used as text */
	--surface-0: rgba(11, 17, 25, 0);
	--header-bg: rgba(5, 8, 13, 0.55);
	--header-bg-solid: rgba(5, 8, 13, 0.92);
	--header-line: rgba(255, 255, 255, 0.05);
	--card-glass: rgba(11, 17, 25, 0.82);
	--chip-text: #8fdcfa;
	--lead: #a7b3c2;
	color: var(--muted);
	color-scheme: dark;
}

.island { background-color: var(--bg); }

:root {
	--font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--wrap: 1360px;
	--gutter: clamp(20px, 3.6vw, 52px);
	--section: clamp(64px, 7vw, 96px);
	--radius: 16px;

	/* 4px scale for the canvas pages */
	--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
	--sec-y: clamp(32px, 3.5vw, 48px);        /* a standard section */
	--sec-y-tight: clamp(24px, 2.5vw, 32px);  /* strips and short text-only sections */
	--sec-gap: var(--sp-5);                   /* head block to content */
	--header-h: 73px;                         /* 72px bar + 1px border */
	--grid-gap: 20px;

	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
	margin: 0;
	background: var(--bg);
	color: var(--muted);
	font-family: var(--font);
	font-size: 1.0625rem;
	line-height: 1.6;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
h1, h2, h3 { color: var(--text); font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
h2 { font-size: clamp(2.125rem, 1.4rem + 2.4vw, 3.25rem); line-height: 1.05; }
h3 { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem); line-height: 1.2; }

.accent { display: block; color: var(--cyan-ink); text-shadow: var(--glow); }
.kicker { color: var(--cyan-ink); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--cyan); color: var(--bg); }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.center { display: flex; justify-content: center; margin-top: 32px; }
.sr-only, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; left: 16px; top: 16px; z-index: 100; padding: 12px 16px; background: var(--cyan); color: var(--bg); border-radius: 6px; }

/* ---------- Buttons ---------- */

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 50px; padding: 0 24px;
	border: 1px solid transparent; border-radius: 8px;
	font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em;
	text-decoration: none; white-space: nowrap; cursor: pointer;
	transition: transform 160ms var(--ease-out), background-color 220ms var(--ease-out), box-shadow 300ms var(--ease-out), border-color 220ms var(--ease-out), color 220ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn .arrow { transition: transform 220ms var(--ease-out); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 0.875rem; }
.btn-solid { background: var(--cyan); color: #021019; box-shadow: 0 0 40px rgba(0, 175, 240, 0.35); }
.btn-glow {
	background: var(--cyan-soft); border-color: var(--cyan-line); color: var(--cyan-ink);
	box-shadow: 0 0 40px rgba(0, 175, 240, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
@media (hover: hover) and (pointer: fine) {
	.btn-solid:hover { background: #2ec0f6; box-shadow: 0 0 60px rgba(0, 175, 240, 0.6); }
	.btn-glow:hover { background: rgba(0, 175, 240, 0.18); border-color: rgba(0, 175, 240, 0.6); box-shadow: 0 0 50px rgba(0, 175, 240, 0.4); }
	.btn:hover .arrow { transform: translateX(3px); }
}

/* ---------- Header ---------- */

.site-header {
	position: fixed; inset: 0 0 auto 0; z-index: 50;
	background: var(--header-bg);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	border-bottom: 1px solid var(--header-line);
	transition: background-color 300ms var(--ease-out);
}
.site-header.scrolled, .site-header.menu-open { background: var(--header-bg-solid); }
.header-inner { display: flex; align-items: center; gap: 40px; height: 72px; }
.brand img { width: 132px; height: auto; }
.nav { display: flex; gap: 34px; margin-left: auto; }
.nav a { color: var(--muted); font-size: 0.9375rem; font-weight: 500; text-decoration: none; transition: color 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--text); } }
.nav-toggle { display: none; }

/* ---------- Hero ---------- */

.hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: -1; background: #000; }
.hero-media img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: 62% 45%;
	filter: saturate(1.1) contrast(1.05);
	opacity: 0.95;
	animation: drift 40s var(--ease-in-out) infinite alternate;
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Keep the continuous signal layer quiet near the reading column. */
.hero-canvas--page { z-index: 0; pointer-events: none; opacity: 0.72; mask-image: linear-gradient(90deg, transparent 15%, #000 65%), linear-gradient(0deg, transparent, #000 25%); mask-composite: intersect; }
.page-hero > .wrap { position: relative; z-index: 1; }

.hero-fade {
	position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(5, 8, 13, 0.92) 0%, rgba(5, 8, 13, 0.55) 40%, rgba(5, 8, 13, 0) 70%),
		linear-gradient(0deg, var(--bg) 0%, rgba(5, 8, 13, 0.6) 22%, rgba(5, 8, 13, 0) 50%, rgba(5, 8, 13, 0.5) 100%);
}
.hero-inner { display: flex; flex-direction: column; justify-content: space-between; padding-top: 120px; padding-bottom: clamp(56px, 8vh, 96px); }
.hero-copy { max-width: 980px; margin-top: auto; }
.hero h1 { font-size: clamp(2.5rem, 1.2rem + 4.6vw, 4.75rem); line-height: 1.02; letter-spacing: -0.03em; }
.hero h1 .line { display: block; }
.hero h1 .accent { margin-top: 0.12em; }
.hero-lead { margin-top: 28px; max-width: 34em; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); color: var(--lead); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 40px; }
.status {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 12px 16px; border: 1px solid var(--cyan-line); border-radius: 8px;
	background: rgba(0, 175, 240, 0.06);
	color: var(--chip-text); font-size: 0.875rem; font-weight: 500;
}
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); animation: pulse 2.2s var(--ease-out) infinite; }

/* ---------- Pillars ---------- */

.pillars { padding: 8px 0 0; }
.pillars-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.pillar { display: flex; flex-direction: column; gap: 10px; padding: 32px 0 0; }
.pillar-k { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; }
.pillar-k::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.pillar-v { color: var(--text); font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------- Section heads ---------- */

.head-center { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.head-row h2 { margin-top: 18px; }
.link-arrow { color: var(--cyan-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.link-arrow span { display: inline-block; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover span { transform: translateX(4px); } }

/* ---------- Signal path arc ---------- */

.stack { padding: var(--section) 0 0; position: relative; }
.stack::before {
	content: ""; position: absolute; left: 50%; top: 30%; width: 70vw; height: 60%; transform: translateX(-50%);
	background: radial-gradient(closest-side, rgba(0, 175, 240, 0.08), transparent);
	pointer-events: none;
}
.arc { position: relative; aspect-ratio: 1200 / 560; margin-top: 32px; }
.arc-lines { position: absolute; inset: 0; width: 100%; height: calc(100% * 520 / 560); overflow: visible; }
.arc-base { fill: none; stroke: rgba(0, 175, 240, 0.18); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.arc-flow { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 4 14; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(0, 175, 240, 0.9)); animation: flow 1.6s linear infinite; opacity: 0.85; }
.arc-nodes { position: absolute; inset: 0; }
.node {
	position: absolute; left: var(--x); top: calc(var(--y) * 520 / 560);
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	width: 220px; transform: translate(-50%, -50%); text-align: center;
}
.node-img {
	position: relative; width: clamp(84px, 8.4vw, 124px); aspect-ratio: 1; border-radius: 50%;
	padding: 3px; margin-bottom: 14px;
	background: conic-gradient(from 0deg, rgba(0, 175, 240, 0.9), rgba(0, 175, 240, 0.1) 40%, rgba(0, 175, 240, 0.9));
	box-shadow: 0 0 40px rgba(0, 175, 240, 0.35), 0 0 0 8px rgba(0, 175, 240, 0.05);
	transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}
.node-img img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg); }
.node-name { color: var(--text); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.node-desc { color: var(--muted); font-size: 0.875rem; line-height: 1.4; max-width: 18ch; }
@media (hover: hover) and (pointer: fine) {
	.node:hover .node-img { transform: scale(1.06); box-shadow: 0 0 60px rgba(0, 175, 240, 0.6), 0 0 0 10px rgba(0, 175, 240, 0.08); }
}

/* ---------- Capabilities ---------- */

.solutions { padding: 24px 0 calc(var(--section) * 0.7); }
.sol-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.sol {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
	transition: border-color 250ms var(--ease-out), transform 250ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.sol-media { position: relative; height: clamp(220px, 20vw, 290px); overflow: hidden; }
.sol-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.sol-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--surface-0) 40%, var(--surface) 100%); }
.sol-body { display: flex; flex-direction: column; gap: 14px; padding: 8px 40px 36px; flex: 1; }
.sol-kicker { color: var(--cyan-ink); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.sol-body > p:not(.sol-kicker) { max-width: 44ch; }
.sol-foot {
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	margin-top: auto; padding-top: 22px; border-top: 1px solid var(--border);
	color: var(--text); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
}
.sol-more { color: var(--cyan-ink); letter-spacing: 0.02em; text-transform: none; font-size: 0.875rem; font-weight: 600; }
.sol-more span { display: inline-block; transition: transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
	.sol:hover { border-color: var(--border-2); transform: translateY(-4px); box-shadow: 0 30px 80px -40px rgba(0, 175, 240, 0.35); }
	.sol:hover .sol-media img { transform: scale(1.05); }
	.sol:hover .sol-more span { transform: translateX(4px); }
}
.also { margin-top: 36px; text-align: center; }
.also a { color: var(--text); text-underline-offset: 4px; text-decoration-color: var(--cyan-line); }

/* ---------- Projects ---------- */

.work { padding: calc(var(--section) * 0.7) 0 calc(var(--section) * 0.6); background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 50%, var(--bg) 100%); }
.work-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.proj {
	overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
	transition: border-color 250ms var(--ease-out), transform 250ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.proj-media { height: 240px; overflow: hidden; background: #000; }
.proj-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 600ms var(--ease-out); }
.proj-body { display: flex; flex-direction: column; gap: 8px; padding: 24px 24px 28px; }
.proj-body h3 { font-size: 1.125rem; letter-spacing: 0.06em; text-transform: uppercase; }
.proj-radio { color: var(--cyan-ink); font-size: 0.875rem; font-weight: 500; }
.proj-body p:last-child { font-size: 0.9375rem; line-height: 1.5; }
@media (hover: hover) and (pointer: fine) {
	.proj:hover { border-color: var(--border-2); transform: translateY(-4px); }
	.proj:hover .proj-media img { transform: scale(1.14); }
}
.clients { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 40px; margin-top: 64px; padding: 28px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.clients p { color: var(--dim); font-size: 0.8125rem; letter-spacing: 0.24em; text-transform: uppercase; }
.clients ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 44px; }
.clients li { color: var(--text); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; opacity: 0.8; }

/* ---------- Insights ---------- */

.insights { padding: calc(var(--section) * 0.6) 0 0; }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
a.post { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; transition: border-color 250ms var(--ease-out), transform 250ms var(--ease-out), box-shadow 300ms var(--ease-out); }
.post-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.post-body { display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 28px; }
.post-meta { color: var(--cyan-ink); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.post-title { color: var(--text); font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
@media (hover: hover) and (pointer: fine) {
	a.post:hover { border-color: var(--border-2); transform: translateY(-4px); }
	a.post:hover .post-media img { transform: scale(1.05); }
}

/* ---------- Close ---------- */

.cta { position: relative; isolation: isolate; overflow: hidden; padding: clamp(110px, 12vw, 180px) 0; }
.cta-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 60% at 50% 50%, transparent 30%, var(--bg) 85%); }
.cta-card {
	max-width: 720px; margin: 0 auto; padding: clamp(40px, 5vw, 64px) clamp(24px, 5vw, 64px);
	display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;
	background: var(--card-glass); border: 1px solid var(--border); border-radius: 20px;
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.cta-card h2 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); }
.cta-card p:not(.kicker) { max-width: 36em; }
.cta-card .btn { margin-top: 12px; }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--border); padding: 72px 0 40px; font-size: 0.9375rem; }
.foot-top { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px; }
.foot-brand { grid-column: 1 / -1; margin-bottom: 8px; } /* logo on its own row; five link columns below */
.foot-brand img { width: 132px; }
.foot-brand p { margin-top: 18px; max-width: 32ch; }
.site-footer h2 { color: var(--text); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 8px; }
.site-footer nav, .foot-contact { display: flex; flex-direction: column; gap: 10px; }
.site-footer a { text-decoration: none; transition: color 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .site-footer a:hover { color: var(--cyan-ink); } }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--border); font-size: 0.875rem; }
.foot-legal { display: flex; gap: 24px; }
.credits { margin-top: 18px; color: var(--dim); font-size: 0.75rem; line-height: 1.6; }
.credits a { text-decoration: underline; text-decoration-color: var(--border-2); }

/* ---------- Other pages ---------- */

/* Inner page styles live at the end of this file. */

/* ---------- Motion ---------- */

@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1.5%, 1%); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 175, 240, 0.7); } 70%, 100% { box-shadow: 0 0 0 9px rgba(0, 175, 240, 0); } }
@keyframes flow { to { stroke-dashoffset: -18; } }

.js .reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); }
.js .reveal.in {
	opacity: 1; transform: none; filter: none;
	transition: opacity 900ms var(--ease-out), transform 1000ms var(--ease-out), filter 900ms var(--ease-out);
	transition-delay: calc(var(--i, 0) * 90ms);
}
.js .sol.reveal.in, .js .proj.reveal.in, .js a.post.reveal.in {
	transition: opacity 900ms var(--ease-out), transform 1000ms var(--ease-out), filter 900ms var(--ease-out), border-color 300ms var(--ease-out), box-shadow 400ms var(--ease-out);
	transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0ms, 0ms;
}



/* ---------- Tablet ---------- */

@media (max-width: 1080px) {
	.pillars-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
	.work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.post-grid > a.post:nth-child(3):last-child { display: none; } /* three cards become two; never hide a lone card or the last of a longer list */
	.foot-top { grid-template-columns: 1fr 1fr 1fr; }
	.node { width: 170px; }
	.node-desc { display: none; }
}

@media (max-width: 900px) {
	.nav { display: none; }
	.nav-toggle { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; border: 1px solid var(--border-2); border-radius: 10px; background: transparent; cursor: pointer; }
	.bars, .bars::before, .bars::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text); transition: transform 250ms var(--ease-out); }
	.bars { position: relative; }
	.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
	.bars::before { top: -6px; }
	.bars::after { top: 6px; }
	.menu-open .bars { background: transparent; }
	.menu-open .bars::before { transform: translateY(6px) rotate(45deg); }
	.menu-open .bars::after { transform: translateY(-6px) rotate(-45deg); }
	.menu-open .nav { display: flex; flex-direction: column; gap: 0; position: absolute; top: 72px; left: 0; right: 0; padding: 8px var(--gutter) 24px; background: var(--header-bg-solid); border-bottom: 1px solid var(--border); }
	.menu-open .nav { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
	@starting-style { .menu-open .nav { opacity: 0; transform: translateY(-8px); } }
	.menu-open .nav a { padding: 14px 0; font-size: 1.125rem; color: var(--text); border-bottom: 1px solid var(--border); }

	/* The arc becomes a vertical signal path. */
	.arc { aspect-ratio: auto; margin-top: 48px; }
	.solutions { padding-top: calc(var(--section) * 0.7); }
	.arc-lines { display: none; }
	.arc-nodes { position: relative; display: flex; flex-direction: column; gap: 28px; padding-left: 8px; }
	.arc-nodes::before { content: ""; position: absolute; left: 47px; top: 40px; bottom: 40px; width: 2px; background: repeating-linear-gradient(180deg, var(--cyan) 0 4px, transparent 4px 14px); opacity: 0.6; }
	.node { position: relative; left: auto; top: auto; transform: none; width: auto; display: grid; grid-template-columns: 80px 1fr; grid-template-rows: auto auto; column-gap: 20px; align-items: center; text-align: left; }
	.node-img { width: 80px; margin: 0; grid-row: 1 / 3; }
	.node-name { align-self: end; }
	.node-desc { display: block; align-self: start; max-width: none; }
}

/* ---------- Phone ---------- */

@media (max-width: 680px) {
	.hero-media img { object-position: 70% 40%; }
	.hero-fade { background: linear-gradient(0deg, var(--bg) 0%, rgba(5, 8, 13, 0.85) 40%, rgba(5, 8, 13, 0.3) 75%, rgba(5, 8, 13, 0.6) 100%); }
	.hero-inner { padding-top: 104px; }
	.hero-actions .btn { width: 100%; }
	.kicker { letter-spacing: 0.22em; font-size: 0.75rem; }
	.pillar { padding-top: 24px; }
	.sol-grid { grid-template-columns: 1fr; margin-top: 44px; }
	.sol-body { padding: 4px 24px 28px; }
	.work-grid { grid-template-columns: 1fr; margin-top: 44px; }
	.proj-media { height: 200px; }
	.head-row { flex-direction: column; align-items: flex-start; }
	.post-grid { grid-template-columns: 1fr; }
	.post-grid a.post:last-child { display: flex; }
	.clients ul { gap: 10px 28px; }
	.clients li { font-size: 1.0625rem; }
	.foot-top { grid-template-columns: 1fr 1fr; }
}

/* ---------- Theme switch ---------- */

.logo-on-dark { display: none; }
[data-theme="dark"] .logo-on-light { display: none; }
[data-theme="dark"] .logo-on-dark { display: block; }

.theme-toggle {
	display: grid; place-items: center;
	width: 40px; height: 40px;
	border: 1px solid var(--border-2); border-radius: 10px;
	background: transparent; color: var(--text);
	cursor: pointer;
	transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.theme-toggle:active { transform: scale(0.96); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (hover: hover) and (pointer: fine) {
	.theme-toggle:hover { border-color: var(--cyan-line); background: var(--cyan-soft); }
}
@media (max-width: 900px) {
	.theme-toggle { margin-left: auto; }
	.nav-toggle { margin-left: 0; }
}

/* White version: lighter shadows and cards that read on white. */
:root:not([data-theme="dark"]) .sol, :root:not([data-theme="dark"]) .proj, :root:not([data-theme="dark"]) a.post { box-shadow: 0 1px 2px rgba(11, 31, 54, 0.04); }
@media (hover: hover) and (pointer: fine) {
	:root:not([data-theme="dark"]) .sol:hover, :root:not([data-theme="dark"]) .proj:hover, :root:not([data-theme="dark"]) a.post:hover { box-shadow: 0 24px 60px -30px rgba(11, 31, 54, 0.28); }
}
:root:not([data-theme="dark"]) .stack::before { background: radial-gradient(closest-side, rgba(0, 175, 240, 0.07), transparent); }
:root:not([data-theme="dark"]) .arc-base { stroke: rgba(0, 121, 179, 0.22); }
:root:not([data-theme="dark"]) .node-img { box-shadow: 0 0 30px rgba(0, 175, 240, 0.25), 0 0 0 8px rgba(0, 175, 240, 0.06); }
:root:not([data-theme="dark"]) .clients li { opacity: 0.65; }

/* Theme switch crossfade (View Transitions). */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; animation-timing-function: ease; }


/* =====================================================================
   Inner pages
   ===================================================================== */

.nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"]::after { content: ""; display: block; height: 2px; margin-top: 4px; border-radius: 2px; background: var(--cyan); box-shadow: 0 0 10px rgba(0, 175, 240, 0.7); }

/* ---------- Page hero ---------- */

.page-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(150px, 16vw, 210px) 0 clamp(72px, 8vw, 112px); }
.page-hero-media { position: absolute; inset: 0; z-index: -2; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; animation: drift 40s var(--ease-in-out) infinite alternate; }
.page-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 8, 13, 0.95) 0%, rgba(5, 8, 13, 0.75) 45%, rgba(5, 8, 13, 0.35) 100%), linear-gradient(0deg, var(--bg) 0%, rgba(5, 8, 13, 0) 40%); }
.page-hero-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 70% at 85% 0%, rgba(0, 175, 240, 0.16), transparent 70%); }
.page-hero-glow::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(0, 175, 240, 0.18) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(60% 80% at 90% 10%, #000, transparent 70%); -webkit-mask-image: radial-gradient(60% 80% at 90% 10%, #000, transparent 70%); }
.page-hero-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.page-hero h1 { max-width: 20ch; font-size: clamp(2.375rem, 1.3rem + 3.4vw, 4rem); line-height: 1.04; letter-spacing: -0.03em; }
.page-hero h1 .accent { margin-top: 0.1em; }
.page-lead { max-width: 40em; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); color: var(--lead); }
.page-meta { display: flex; flex-wrap: wrap; gap: 10px; color: var(--lead); font-size: 0.9375rem; }
.page-hero .hero-actions { margin-top: 12px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; color: var(--dim); font-size: 0.875rem; }
.crumbs a { text-decoration: none; color: var(--muted); transition: color 200ms var(--ease-out); }
.crumbs [aria-current] { color: var(--text); }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--cyan-ink); } }

.btn-ghost-light { border-color: rgba(255, 255, 255, 0.22); color: #e7ebef; }
@media (hover: hover) and (pointer: fine) { .btn-ghost-light:hover { border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.05); } }

/* ---------- Chips and ticks ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: 8px 14px; border: 1px solid var(--border-2); border-radius: 999px; color: var(--text); font-size: 0.875rem; font-weight: 500; background: var(--surface); }
.chips li a { text-decoration: none; }
.chips.small li { padding: 5px 12px; font-size: 0.8125rem; }
.tag-strip { padding: 28px 0; border-bottom: 1px solid var(--border); }

.ticks { display: grid; gap: 10px; margin-top: 6px; }
.ticks.cols-2 { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.ticks li { position: relative; padding-left: 22px; color: var(--text); font-size: 0.9375rem; line-height: 1.45; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--cyan); box-shadow: 0 0 8px rgba(0, 175, 240, 0.5); }

/* ---------- Service: steps ---------- */

.steps { padding: 40px 0 0; }
.steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: step; }
.step { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 24px 24px 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); color: var(--cyan-ink); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.2em; margin-bottom: 8px; }
.step-name { color: var(--text); font-size: 1.25rem; font-weight: 700; }
.step-desc { font-size: 0.9375rem; line-height: 1.5; }

/* ---------- Service: capability cards ---------- */

.caps { padding: var(--section) 0 calc(var(--section) * 0.7); }
.cap-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.cap-card {
	position: relative; display: flex; flex-direction: column; gap: 12px;
	padding: 30px 28px 32px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
	transition: border-color 250ms var(--ease-out), transform 250ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.cap-card h3 { font-size: 1.25rem; }
.cap-card > p { font-size: 0.9375rem; line-height: 1.55; }
.cap-dot { width: 34px; height: 34px; border-radius: 10px; margin-bottom: 6px; background: radial-gradient(circle at 50% 50%, var(--cyan) 0 4px, transparent 5px), var(--cyan-soft); border: 1px solid var(--cyan-line); box-shadow: 0 0 24px rgba(0, 175, 240, 0.2); }
@media (hover: hover) and (pointer: fine) {
	.cap-card:hover { border-color: var(--cyan-line); transform: translateY(-3px); box-shadow: 0 24px 60px -36px rgba(0, 175, 240, 0.45); }
}

.proof-band { padding: 0 0 calc(var(--section) * 0.7); }
.related { padding-top: calc(var(--section) * 0.7); }
.work-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; }
.mini-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mini-tags li { padding: 3px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-size: 0.75rem; }

/* ---------- Service: more services ---------- */

.more-services { padding: calc(var(--section) * 0.8) 0; }
.more-services h2 { margin-bottom: 32px; }
.svc-links li a {
	display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) auto; align-items: center; gap: 24px;
	padding: 26px 8px; border-top: 1px solid var(--border); text-decoration: none;
	transition: background-color 250ms var(--ease-out), padding 250ms var(--ease-out);
}
.svc-links li:last-child a { border-bottom: 1px solid var(--border); }
.svc-name { color: var(--text); font-size: clamp(1.25rem, 1rem + 0.7vw, 1.625rem); font-weight: 700; letter-spacing: -0.02em; transition: color 200ms var(--ease-out); }
.svc-sum { font-size: 0.9375rem; }
.svc-links .cap-go { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-2); color: var(--text); transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 250ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
	.svc-links li a:hover { padding-left: 18px; background: var(--cyan-soft); }
	.svc-links li a:hover .svc-name { color: var(--cyan-ink); }
	.svc-links li a:hover .cap-go { background: var(--cyan); border-color: var(--cyan); color: #021019; transform: translateX(4px); }
}

/* ---------- Services overview rows ---------- */

.svc-rows { padding: var(--section) 0 calc(var(--section) * 0.6); }
.svc-rows .wrap { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 104px); }
.svc-row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
.svc-row.flip .svc-media { order: 2; }
.svc-media { display: block; overflow: hidden; border-radius: 20px; aspect-ratio: 4 / 3; border: 1px solid var(--border); background: #000; box-shadow: 0 40px 80px -50px rgba(0, 60, 110, 0.5); }
.svc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.svc-body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.svc-body h2 { font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.75rem); }
.svc-body h2 a { text-decoration: none; }
.svc-body > p:not(.sol-kicker) { max-width: 38em; }
.svc-body .link-arrow { margin-top: 8px; }
@media (hover: hover) and (pointer: fine) { .svc-row:hover .svc-media img { transform: scale(1.04); } }

/* ---------- Projects: case studies ---------- */

.cases { padding: var(--section) 0 calc(var(--section) * 0.5); }
.case {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch;
	margin-top: 32px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
}
.cases .head-center + .case { margin-top: 32px; }
.case.flip .case-media { order: 2; }
.case-media { display: grid; place-items: center; min-height: 420px; padding: 40px; background: radial-gradient(70% 70% at 50% 45%, #ffffff 0%, #eef3f8 100%); }
.case-media img { max-height: 380px; width: auto; mix-blend-mode: multiply; transition: transform 600ms var(--ease-out); }
.case-body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; padding: clamp(32px, 4vw, 56px); }
.case-body h3 { font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem); }
.case-body > p:not(.sol-kicker) { max-width: 40em; }
@media (hover: hover) and (pointer: fine) { .case:hover .case-media img { transform: scale(1.04); } }

/* ---------- Projects: filterable grid ---------- */

.all-projects { padding-top: calc(var(--section) * 0.6); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.filter {
	padding: 9px 16px; border: 1px solid var(--border-2); border-radius: 999px; background: transparent;
	color: var(--muted); font: inherit; font-size: 0.875rem; font-weight: 500; text-decoration: none; cursor: pointer;
	transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.filter:active { transform: scale(0.97); }
.filter[aria-pressed="true"], .filter[aria-current="page"] { background: var(--cyan); border-color: var(--cyan); color: #021019; box-shadow: 0 0 24px rgba(0, 175, 240, 0.35); }
@media (hover: hover) and (pointer: fine) { .filter:hover:not([aria-pressed="true"]):not([aria-current="page"]) { border-color: var(--cyan-line); color: var(--text); } }
.all-projects .work-grid { margin-top: 32px; }
.proj[hidden] { display: none; }
.grid-empty { margin-top: 32px; text-align: center; }

/* ---------- Contact ---------- */

.contact { padding: calc(var(--section) * 0.7) 0 var(--section); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.form-card, .side-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: clamp(28px, 3.4vw, 44px); }
.form-card { scroll-margin-top: 100px; }
.form-card h2, .side-card h2 { font-size: 1.625rem; margin-bottom: 24px; }
.contact-side { display: flex; flex-direction: column; gap: 20px; }
.form { display: flex; flex-direction: column; gap: 22px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend { color: var(--text); font-size: 0.875rem; font-weight: 600; padding: 0; }
.field legend { margin-bottom: 10px; }
.opt { color: var(--dim); font-weight: 400; }
.field input, .field textarea {
	width: 100%; padding: 14px 16px; border: 1px solid var(--border-2); border-radius: 10px;
	background: var(--bg); color: var(--text); font: inherit; font-size: 1rem;
	transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px var(--cyan-soft); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #d64545; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; }
.choice span {
	display: flex; align-items: center; min-height: 48px; padding: 10px 14px 10px 40px; border: 1px solid var(--border-2); border-radius: 10px;
	color: var(--text); font-size: 0.9375rem; line-height: 1.3;
	transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.choice span::before { content: ""; position: absolute; left: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; border: 2px solid var(--border-2); transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.choice input:checked + span { border-color: var(--cyan); background: var(--cyan-soft); }
.choice input:checked + span::before { border: 4px solid var(--cyan); box-shadow: 0 0 10px rgba(0, 175, 240, 0.6); }
.choice input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn-block { width: 100%; min-height: 56px; }
.form-note { font-size: 0.8125rem; color: var(--dim); text-align: center; }
.notice { margin-bottom: 20px; padding: 14px 16px; border-radius: 10px; font-size: 0.9375rem; }
.notice.ok { background: rgba(31, 170, 110, 0.1); border: 1px solid rgba(31, 170, 110, 0.4); color: var(--text); }
.notice.err { background: rgba(214, 69, 69, 0.08); border: 1px solid rgba(214, 69, 69, 0.45); color: var(--text); }
.next-steps { display: flex; flex-direction: column; gap: 4px; counter-reset: next; }
.next-steps li { position: relative; display: flex; align-items: center; gap: 16px; padding: 12px 0; color: var(--text); }
.next-steps li::before { counter-increment: next; content: counter(next); display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--cyan-line); background: var(--cyan-soft); color: var(--cyan-ink); font-size: 0.875rem; font-weight: 700; }
.contact-list { display: flex; flex-direction: column; gap: 22px; margin: 0; }
.contact-list div { display: grid; grid-template-columns: 70px 1fr; gap: 16px; }
.contact-list dt { color: var(--cyan-ink); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; padding-top: 3px; }
.contact-list dd { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.contact-list dd > a:first-child { color: var(--text); font-size: 1.125rem; font-weight: 600; text-decoration: none; }
.contact-list dd span { font-size: 0.875rem; color: var(--dim); }
.contact-list address { font-style: normal; color: var(--text); line-height: 1.5; }

/* ---------- Blog ---------- */

.blog-list { padding: calc(var(--section) * 0.55) 0 var(--section); }
.blog-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.blog-bar .filters { margin-top: 0; }
.search input {
	width: min(300px, 100%); padding: 11px 16px 11px 40px; border: 1px solid var(--border-2); border-radius: 999px;
	background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b98a9' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px 50% / 16px;
	color: var(--text); font: inherit; font-size: 0.9375rem;
}
.search input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px var(--cyan-soft); }
.blog-grid { margin-top: 36px; }
.post-lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.post-lead .post-media { aspect-ratio: auto; min-height: 340px; }
.post-lead .post-body { justify-content: center; padding: clamp(28px, 3.4vw, 48px); gap: 14px; }
.post-lead .post-title { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); line-height: 1.15; letter-spacing: -0.02em; }
.post-excerpt { color: var(--muted); line-height: 1.6; }
.post-placeholder { display: block; width: 100%; height: 100%; background: #000; }
.post-placeholder img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; filter: saturate(0.6); }
.post-media img { display: block; }
.pagination { margin-top: 48px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pagination .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--border-2); border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 500; }
.pagination .page-numbers.current { background: var(--cyan); border-color: var(--cyan); color: #021019; }

/* ---------- Article ---------- */

.article { width: 100%; max-width: calc(760px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) calc(var(--section) * 0.7); }
.article-figure { margin: -40px 0 48px; overflow: hidden; border-radius: 18px; border: 1px solid var(--border); background: #fff; position: relative; z-index: 2; box-shadow: 0 40px 80px -50px rgba(0, 40, 80, 0.45); }
.article-figure img { width: 100%; height: auto; }
/* Posts without a featured image: give the text the same breathing room under the header band that the figure gives. */
.article > .prose:first-child { padding-top: clamp(40px, 5vw, 64px); }
.page .article, .article:not(.post) { padding-top: 56px; }
.prose { color: var(--text); font-size: 1.125rem; line-height: 1.75; }
.prose > * + * { margin-top: 1.25em; }
.prose h2 { font-size: clamp(1.625rem, 1.3rem + 0.9vw, 2.125rem); margin-top: 2em; line-height: 1.15; }
.prose h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); margin-top: 1.8em; }
.prose p, .prose li { color: var(--muted); }
.prose strong { color: var(--text); }
.prose a { color: var(--cyan-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.5em; }
.prose li::marker { color: var(--cyan-ink); }
.prose blockquote { margin-left: 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--cyan); color: var(--text); font-size: 1.25rem; }
.prose code { padding: 2px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); font-size: 0.9em; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.prose pre { overflow-x: auto; padding: 20px 22px; border-radius: 12px; background: #0b1119; border: 1px solid #1a2432; color: #e7ebef; font-size: 0.9375rem; line-height: 1.6; }
.prose pre code { padding: 0; border: 0; background: none; color: inherit; }
.prose img { border-radius: 12px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.prose th { color: var(--text); }
.article-tags { margin-top: 48px; }
.article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; }
.article-nav a { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font-weight: 600; text-decoration: none; transition: border-color 200ms var(--ease-out), transform 250ms var(--ease-out); }
.article-nav a span { color: var(--cyan-ink); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.article-nav .an-next { grid-column: 2; text-align: right; }
@media (hover: hover) and (pointer: fine) { .article-nav a:hover { border-color: var(--cyan-line); transform: translateY(-2px); } }
.related-posts { padding-top: 0; padding-bottom: calc(var(--section) * 0.6); }

/* ---------- Inner pages: tablet and phone ---------- */

@media (max-width: 1080px) {
	.cap-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.work-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.contact-grid { grid-template-columns: 1fr; }
	.svc-links li a { grid-template-columns: 1fr auto; }
	.svc-sum { display: none; }
}
@media (max-width: 900px) {
	.svc-row, .svc-row.flip, .case, .case.flip { grid-template-columns: 1fr; }
	.svc-row.flip .svc-media, .case.flip .case-media { order: 0; }
	.case-media { min-height: 320px; }
	.case-media img { max-height: 280px; }
	.post-lead { grid-template-columns: 1fr; }
	.post-lead .post-media { min-height: 0; aspect-ratio: 16 / 10; }
	.nav a[aria-current="page"]::after { display: none; }
	.menu-open .nav a[aria-current="page"] { color: var(--cyan-ink); }
}
@media (max-width: 680px) {
	.cap-cards, .steps-grid, .work-grid.cols-3 { grid-template-columns: 1fr; }
	.ticks.cols-2 { grid-template-columns: 1fr; }
	.field-row, .choice-grid { grid-template-columns: 1fr; }
	.blog-bar { flex-direction: column; align-items: stretch; }
	.search input { width: 100%; }
	.article-figure { margin-top: -24px; }
	.article-nav { grid-template-columns: 1fr; }
	.article-nav .an-next { grid-column: auto; text-align: left; }
	.contact-list div { grid-template-columns: 1fr; gap: 6px; }
}

/* White version: the header is a white bar on every page, over dark heroes too. A hairline and a
   soft shadow separate it from the hero; the scrolled state stays white. */
:root:not([data-theme="dark"]) .site-header,
:root:not([data-theme="dark"]) .site-header.scrolled,
:root:not([data-theme="dark"]) .site-header.menu-open {
	background: #ffffff;
	border-bottom-color: var(--border);
	box-shadow: 0 8px 24px -18px rgba(11, 31, 54, 0.35);
	backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* =====================================================================
   Canvas pages: generated fragments in pages/*.html (see dev/canvas_to_theme.py).
   The fragments carry layout only; the look is all here.
   ===================================================================== */

/* ---------- Customer logo marquee (homepage proof strip) ---------- */

.canvas .logo-label { color: var(--muted); font-size: 0.875rem; font-weight: 600; margin-bottom: -8px; }
.logo-marquee {
	position: relative; max-width: 100%; overflow: hidden; outline-offset: 6px; border-radius: 4px;
	display: flex; flex-direction: column; gap: 22px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.logo-rail { display: flex; width: max-content; animation: logo-scroll 48s linear infinite; }
/* Second brick row: drifts the other way, a little slower, and starts half a cycle out of phase. */
.logo-rail[data-row="2"] { animation-direction: reverse; animation-duration: 56s; animation-delay: -28s; }
.logo-marquee:hover .logo-rail, .logo-marquee:focus-within .logo-rail, .logo-marquee:focus-visible .logo-rail { animation-play-state: paused; }
.logo-marquee .logo-track { display: flex; align-items: center; gap: 72px; flex: none; margin: 0; padding: 0 36px; list-style: none; }
.canvas .logo-marquee li { display: flex; align-items: center; justify-content: center; height: 56px; padding: 0; }
.canvas .logo-marquee li::before { content: none; }
.logo-track img { display: block; height: var(--logo-h, 30px); width: auto; filter: grayscale(1); opacity: 0.55; transition: filter 200ms var(--ease-out), opacity 200ms var(--ease-out); }
/* Optical heights: wide wordmarks run a little shorter so every mark reads the same size. */
.logo-track [data-logo="qualcomm"] { --logo-h: 30px; }
.logo-track [data-logo="samsung"] { --logo-h: 22px; }
.logo-track [data-logo="abbott"] { --logo-h: 26px; }
.logo-track [data-logo="lasko"] { --logo-h: 30px; }
.logo-track [data-logo="weatherflow"] { --logo-h: 30px; } /* small PNGs: ~1x, kept near their native size */
.logo-track [data-logo="trago"] { --logo-h: 32px; }
.logo-track [data-logo="nordic"] { --logo-h: 52px; } /* stacked, near-square mark */
.logo-track [data-logo="nordic"] img { opacity: 0.75; } /* the cyan mark greys lighter than the black wordmarks */
.logo-track [data-logo="pax"] { --logo-h: 24px; }
.logo-track [data-logo="gotenna"] { --logo-h: 28px; }
.logo-track [data-logo="skycentrics"] { --logo-h: 36px; }
.logo-track [data-logo="bardy"] { --logo-h: 30px; }
.logo-track li:hover img, .logo-marquee:focus-visible img { filter: none; opacity: 1; }
[data-theme="dark"] .logo-track img { filter: grayscale(1) brightness(1.8); }
[data-theme="dark"] .logo-track li:hover img { filter: brightness(1.6); }
.wordmark { white-space: nowrap; color: #5f6b78; font-size: 1.5rem; line-height: 1; font-weight: 600; letter-spacing: -0.015em; opacity: 1; transition: color 200ms var(--ease-out), opacity 200ms var(--ease-out); }
.logo-track li:hover .wordmark, .logo-marquee:focus-visible .wordmark { color: var(--navy); opacity: 1; }
[data-theme="dark"] .logo-track li:hover .wordmark { color: #fff; }
@keyframes logo-scroll { to { transform: translateX(-50%); } }

@media (max-width: 640px) {
	.logo-marquee .logo-track { gap: 44px; padding: 0 22px; }
	.logo-marquee { gap: 14px; }
	.wordmark { font-size: 1.25rem; }
	.logo-track img { height: calc(var(--logo-h, 30px) * 0.85); }
}

/* ---------- Header: menus ---------- */

.header-inner { gap: 28px; }
.nav { align-items: center; gap: 6px; margin-left: auto; }
.nav-top {
	display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px;
	border: 0; border-radius: 8px; background: none; cursor: pointer;
	color: var(--muted); font: inherit; font-size: 0.9375rem; font-weight: 500; text-decoration: none;
	transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out);
}
.nav-top.is-current { color: var(--text); }
.caret { width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 180ms var(--ease-out); }
.nav-item { position: relative; }
.nav-menu {
	position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px; padding: 8px;
	display: flex; flex-direction: column;
	background: #ffffff; border: 1px solid #e2e8ef; border-radius: 12px;
	box-shadow: 0 24px 60px -24px rgba(11, 31, 54, 0.35);
	opacity: 0; visibility: hidden; transform: translateY(-4px);
	transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 160ms;
}
[data-theme="dark"] .nav-menu { background: #0f1722; border-color: #243246; }
.nav-menu a { display: flex; align-items: center; gap: 12px; padding: 6px 10px 6px 6px; border-radius: 10px; color: #0b1f36; font-size: 0.9375rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color 150ms var(--ease-out); }
/* Menu icons: a tinted tile with a Lucide-style line icon; the label is the accessible name. */
/* Menu icons: a bare stroke in Argenox light blue, navy on hover; no tile. Labels align on the icon's left edge. */
.mi { flex: none; display: grid; place-items: center; width: 24px; height: 24px; color: #00aff0; transition: color 150ms var(--ease-out); }
.mi svg { width: 22px; height: 22px; stroke-width: 2; }
.nav-menu a:hover .mi, .nav-menu a:focus-visible .mi { color: var(--navy); }
[data-theme="dark"] .mi { color: #00aff0; }
[data-theme="dark"] .nav-menu a:hover .mi, [data-theme="dark"] .nav-menu a:focus-visible .mi { color: #fff; }
[data-theme="dark"] .nav-menu a { color: #e7ebef; }
.nav-item.open .nav-menu { opacity: 1; visibility: visible; transform: none; }
.nav-item.open .caret { transform: rotate(225deg); margin-top: 3px; }
@media (hover: hover) and (pointer: fine) {
	.nav-top:hover { color: var(--text); }
	.nav-menu a:hover { background: rgba(0, 175, 240, 0.1); }
	.nav-item:hover .nav-menu { opacity: 1; visibility: visible; transform: none; }
}
.header-actions { display: flex; align-items: center; gap: 6px; }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; color: var(--text); cursor: pointer; }
.search-pop { padding: 0 0 14px; }
.search-pop input { width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid var(--border-2); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; }
.theme-toggle { width: 36px; height: 36px; }
.foot-inline { margin: 0; }
.foot-legal { align-items: center; }

@media (max-width: 1040px) {
	.nav { display: none; }
	.nav-toggle { display: grid; place-items: center; width: 44px; height: 44px; margin-left: 0; border: 1px solid var(--border-2); border-radius: 10px; background: transparent; cursor: pointer; }
	.bars, .bars::before, .bars::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text); transition: transform 250ms var(--ease-out); }
	.bars { position: relative; }
	.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
	.bars::before { top: -6px; }
	.bars::after { top: 6px; }
	.menu-open .bars { background: transparent; }
	.menu-open .bars::before { transform: translateY(6px) rotate(45deg); }
	.menu-open .bars::after { transform: translateY(-6px) rotate(-45deg); }
	.header-actions { margin-left: auto; }
	.menu-open .nav {
		display: flex; flex-direction: column; align-items: stretch; gap: 0;
		position: absolute; top: 72px; left: 0; right: 0; max-height: calc(100svh - 72px); overflow-y: auto;
		padding: 8px var(--gutter) 24px; background: var(--header-bg-solid); border-bottom: 1px solid var(--border);
	}
	.menu-open .nav-top { width: 100%; justify-content: space-between; padding: 0; min-height: 52px; font-size: 1.0625rem; color: var(--text); }
	.nav-menu { position: static; display: none; opacity: 1; visibility: visible; transform: none; min-width: 0; padding: 0 0 8px; border: 0; box-shadow: none; background: transparent; }
	.nav-item.open .nav-menu { display: flex; }
	.nav-menu a, [data-theme="dark"] .nav-menu a { padding: 6px 0; color: var(--muted); }
	.menu-open .nav-menu a { font-size: 1rem; }
	.mi { width: 22px; height: 22px; }
	.mi svg { width: 20px; height: 20px; }
}
@media (max-width: 480px) { .header-cta { padding: 0 12px; } .brand img { width: 112px; } .header-inner { gap: 12px; } }

/* ---------- Sections ---------- */

.canvas .sec { position: relative; padding: var(--sec-y) 0; }
.canvas .sec.is-tight { --sec-gap: var(--sp-5); padding: var(--sec-y-tight) 0; }
.canvas .page-top + .sec.is-tight { padding-top: var(--sec-y-tight); }
.canvas .sec + .sec:not(.island) { border-top: 1px solid var(--border); }
.canvas .wrap { position: relative; }
.canvas .wrap > * + * { margin-top: 0; }
.canvas .wrap:not([style*="display"]) { display: flex; flex-direction: column; gap: var(--sp-5); }
.canvas .sec .wrap > :last-child, .canvas .sec .wrap > :last-child > :last-child { margin-bottom: 0; }
.canvas .h2 + .lead, .canvas .h2 + p, .canvas .h2 + .muted { margin-top: var(--sp-1); } /* kicker to h2 12px, h2 to lead 16px */
.canvas .wrap > .cta-row { margin-top: calc(var(--sp-6) - var(--sec-gap)); } /* buttons sit 32px under the content */
.canvas .h1 { font-size: clamp(2.5rem, 1.3rem + 4vw, 4.5rem); line-height: 1.03; letter-spacing: -0.03em; max-width: 18ch; }
.canvas .h2 { font-size: clamp(1.875rem, 1.2rem + 2.2vw, 3rem); line-height: 1.08; letter-spacing: -0.025em; }
.canvas h3 { font-size: 1.25rem; line-height: 1.25; }
.canvas p { max-width: 62ch; }
.canvas .lead { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.55; }
.canvas .muted { color: var(--muted); font-size: 0.9875rem; line-height: 1.55; }
.canvas .small { font-size: 0.875rem; }
.canvas .strong { color: var(--text); font-weight: 600; }
.canvas .big { color: var(--text); font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.canvas .kick { color: var(--cyan-ink); font-family: var(--font); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.16em; line-height: 1.5; text-transform: uppercase; }
.canvas .lnk, .canvas .wrap a:not(.btn):not(.card):not(.filter) { color: var(--cyan-ink); font-weight: 600; text-decoration: none; }
.canvas .lnk-soon { color: var(--muted); font-weight: 600; }
.canvas ul, .canvas ol { display: grid; gap: 10px; }
.canvas li { position: relative; padding-left: 22px; line-height: 1.5; color: var(--muted); }
.canvas li b { color: var(--text); font-weight: 600; }
.canvas li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--cyan); }

/* Hero band: dark on every page. */
.canvas .page-top { padding-top: clamp(104px, 10vw, 148px); padding-bottom: clamp(48px, 6vw, 88px); overflow: hidden; isolation: isolate; color: var(--lead); background: radial-gradient(60% 90% at 88% 0%, rgba(0, 175, 240, 0.16), transparent 70%), var(--bg); }
.canvas .page-top + .sec { padding-top: var(--sec-y); }
.canvas .page-top .wrap { z-index: 1; }
.canvas .page-top .lead { color: var(--lead); }
.canvas .page-top p:not(.lead):not(.kick):not(.muted) { color: var(--lead); }

/* Photographic page hero: full-bleed photo, brand grade, content anchored bottom-left. Pages without a photo
   yet get the same layout on a navy gradient (.xhero without .has-photo). */
.canvas .page-top.xhero, .page-hero.xhero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(420px, 56vh, 540px); padding: calc(var(--header-h) + clamp(32px, 4vw, 56px)) 0 clamp(40px, 4.5vw, 64px); color: #fff; background: radial-gradient(70% 90% at 85% 15%, rgba(0, 175, 240, 0.22), transparent 60%), linear-gradient(160deg, #0b213c 0%, #050b14 70%); box-shadow: inset 0 -1px 0 rgba(0, 175, 240, 0.22); }
.canvas .page-top.has-photo, .page-hero.has-photo { background: #050b14; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 70% 50%); filter: saturate(0.9) contrast(1.06) brightness(0.92); transform: scale(1.06); transform-origin: var(--pos, 70% 50%); animation: hero-settle 2.2s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards; }
@keyframes hero-settle { to { transform: scale(1); } }
/* Scrim: readable left column, the image breathes on the right, the bottom melts into the page, the top sits under the header. */
.xhero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.has-photo::before { background:
	linear-gradient(90deg, rgba(5, 11, 20, 0.95) 0%, rgba(5, 11, 20, 0.84) 28%, rgba(5, 11, 20, 0.42) 56%, rgba(5, 11, 20, 0.08) 100%),
	linear-gradient(0deg, rgba(5, 11, 20, 0.92) 0%, rgba(5, 11, 20, 0) 42%),
	linear-gradient(180deg, rgba(5, 11, 20, 0.6) 0%, rgba(5, 11, 20, 0) 26%); }
/* Brand grade: pulls every photo toward Argenox navy, with a cyan lift in the highlights. */
.has-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: color; background: radial-gradient(70% 90% at 85% 15%, rgba(0, 175, 240, 0.22), transparent 60%), rgba(16, 45, 79, var(--tint, 0.38)); }
/* No photo yet: a faint dot grid gives the gradient some texture. */
.xhero:not(.has-photo)::before { background-image: radial-gradient(rgba(0, 175, 240, 0.22) 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(80% 100% at 80% 30%, #000 0%, transparent 80%); }
.canvas .xhero .hero-inner, .page-hero.xhero .hero-inner { display: block; padding-top: 0; padding-bottom: 0; /* the homepage hero's .hero-inner padding does not apply here */ position: relative; z-index: 1; width: 100%; } /* margins, not the wrap's flex gap, set the rhythm */
.xhero .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 28px; font-size: 0.8125rem; letter-spacing: 0.02em; color: rgba(231, 238, 245, 0.62); }
.canvas .xhero .wrap .crumbs a:not(.btn):not(.card), .page-hero.xhero .crumbs a { font-weight: 400; color: rgba(231, 238, 245, 0.62); text-decoration: none; transition: color 0.2s; }
.canvas .xhero .wrap .crumbs a:not(.btn):not(.card):hover, .canvas .xhero .wrap .crumbs a:not(.btn):not(.card):focus-visible, .page-hero.xhero .crumbs a:hover, .page-hero.xhero .crumbs a:focus-visible { color: #fff; }
.xhero .crumbs .sep { color: rgba(231, 238, 245, 0.3); }
.xhero .crumbs [aria-current] { color: #fff; }
.page-hero.xhero .h1 { font-size: clamp(2.5rem, 1.3rem + 4vw, 4.5rem); line-height: 1.03; letter-spacing: -0.03em; }
.canvas .xhero .h1, .page-hero.xhero .h1 { color: #fff; max-width: 17ch; text-wrap: balance; text-shadow: 0 2px 24px rgba(5, 11, 20, 0.35); }
.canvas .xhero .lead, .page-hero.xhero .lead { color: #c9d4df; max-width: 54ch; margin-top: 22px; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.55; }
.page-hero.xhero .page-meta { margin-top: 18px; color: rgba(201, 212, 223, 0.8); }
.canvas .xhero .muted { color: rgba(201, 212, 223, 0.8); margin-top: 18px; }
.canvas .xhero .muted a { color: #7fd6f7; }
.xhero .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.xhero .btn-line { border-color: rgba(255, 255, 255, 0.32); color: #fff; backdrop-filter: blur(6px); background: rgba(5, 11, 20, 0.25); }
@media (hover: hover) and (pointer: fine) { .xhero .btn-line:hover { border-color: rgba(255, 255, 255, 0.75); color: #fff; } }

.still { position: absolute; inset: 0; z-index: -1; background: #000; }
.still img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; animation: drift 40s var(--ease-in-out) infinite alternate; }
.still::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 8, 13, 0.92) 0%, rgba(5, 8, 13, 0.55) 45%, rgba(5, 8, 13, 0.1) 100%), linear-gradient(0deg, rgba(5, 8, 13, 0.8) 0%, transparent 40%); }
.is-paused .still img { animation-play-state: paused; }
.has-still, .has-visual { min-height: min(92svh, 860px); display: flex; align-items: flex-end; }
.has-still .wrap, .has-visual .wrap { width: 100%; }
.hero-pause { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; border: 1.5px solid rgba(255, 255, 255, 0.6); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.hero-pause span { display: block; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.hero-pause[aria-pressed="true"] span { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; }

/* Buttons on the page */
.btn-line { border-color: var(--border-2); color: var(--text); background: transparent; }
.island .btn-line { border-color: rgba(255, 255, 255, 0.28); color: #e7ebef; }
@media (hover: hover) and (pointer: fine) {
	.btn-line:hover { border-color: var(--cyan); color: var(--cyan-ink); }
	.island .btn-line:hover { border-color: rgba(255, 255, 255, 0.7); color: #fff; }
}

/* Cards */
.canvas .card {
	display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px;
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: inherit; text-decoration: none;
	transition: border-color 250ms var(--ease-out), transform 250ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.canvas .card-tint { background: var(--surface-2); }
.canvas .card-link h3, .canvas .card-link .h2 { color: var(--text); }
.canvas .card > .strong:last-child, .canvas .card > .lnk { margin-top: auto; padding-top: 8px; color: var(--cyan-ink); }
.canvas .grid { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (hover: hover) and (pointer: fine) {
	.canvas .card-link:hover { border-color: var(--cyan-line); transform: translateY(-3px); box-shadow: 0 24px 60px -36px rgba(0, 121, 179, 0.5); }
}
.canvas .panel { padding: 22px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.canvas .panel-dark { background: var(--navy); border-color: var(--navy); color: #dfe7f0; }
.canvas .panel-dark .kick { color: #7fd6f7; }
.canvas .panel-dark li, .canvas .panel-dark .muted, .canvas .panel-dark p { color: #dfe7f0; }
.canvas .panel-dark h3, .canvas .panel-dark .big { color: #fff; }
.canvas .ruled { border-color: var(--border); }
/* Card icons: a bare Lucide stroke in Argenox light blue, navy when the card is hovered; no tile. */
.ico { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 6px; color: #00aff0; transition: color 150ms var(--ease-out); }
.ico svg { width: 26px; height: 26px; stroke-width: 2; }
.ico:empty { display: none; }
@media (hover: hover) and (pointer: fine) {
	.canvas .card:hover .ico { color: var(--navy); }
	[data-theme="dark"] .canvas .card:hover .ico { color: #fff; }
}

/* Photo cards (Solutions pages): a 16:10 photo, a white badge with the card's icon overlapping the photo edge, then the copy. */
.canvas .card.photo-card { padding: 0; gap: 0; overflow: hidden; transition: border-color 250ms var(--ease-out), transform 700ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 700ms cubic-bezier(0.16, 1, 0.3, 1); }
.canvas .photo-card .card-media { position: relative; margin: 0; aspect-ratio: 16 / 10; background: #0b213c; }
.canvas .photo-card .card-photo { position: absolute; inset: 0; display: block; overflow: hidden; }
.canvas .photo-card .card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1); }
.canvas .photo-card .card-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 11, 20, 0) 55%, rgba(5, 11, 20, 0.35) 100%); pointer-events: none; }
.canvas .photo-card .card-badge { position: absolute; left: 22px; bottom: -22px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; color: #00aff0; box-shadow: 0 6px 18px rgba(16, 45, 79, 0.18); }
.canvas .photo-card .card-badge svg { width: 22px; height: 22px; stroke-width: 2; }
.canvas .photo-card .card-body { display: flex; flex-direction: column; gap: 8px; padding: 36px 24px 26px; }
.canvas .photo-card .card-body > .strong:last-child, .canvas .photo-card .card-body > .lnk { margin-top: auto; padding-top: 8px; color: var(--cyan-ink); }
@media (hover: hover) and (pointer: fine) {
	.canvas .photo-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgba(16, 45, 79, 0.35); }
	.canvas .photo-card:hover .card-media img { transform: scale(1.045); }
}

.chip, .canvas .pill { display: inline-flex; align-items: center; width: fit-content; padding: 6px 12px; border: 1px solid var(--border-2); border-radius: 999px; color: var(--text); font-size: 0.8125rem; font-weight: 500; }
.canvas .pill { margin-top: 4px; }

/* Images: real photos, and a neutral tile until a photo exists */
.img-frame, .img-ph { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; }
.img-frame img { width: 100%; height: 100%; object-fit: cover; }
.img-studio, .img-fit { background: radial-gradient(70% 70% at 50% 45%, #ffffff 0%, #eef3f8 100%); }
.img-studio img, .img-fit img { object-fit: contain; padding: 14px; mix-blend-mode: multiply; }
.img-fit { background: #0b1119; }
.img-fit img { mix-blend-mode: normal; }
.img-ph { background: radial-gradient(60% 80% at 70% 20%, rgba(0, 175, 240, 0.28), transparent 70%), linear-gradient(160deg, #0b213c, #071628); }
.img-ph::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(0, 175, 240, 0.28) 1px, transparent 1px); background-size: 22px 22px; }
.img-portrait { aspect-ratio: 1; }
.play { position: absolute; left: 50%; top: 50%; z-index: 1; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(0, 175, 240, 0.92); }
.play::after { content: ""; position: absolute; left: 21px; top: 16px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #021019; }
.diagram-tile { display: flex; flex-direction: column; gap: 4px; justify-content: center; padding: 18px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; font-size: 0.9375rem; line-height: 1.4; text-align: center; }
.diagram-tile strong { color: var(--cyan-ink); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; }

/* Specs, FAQ, code */
.canvas dl { margin: 0; flex: 1 1 480px; }
.canvas .row { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.canvas .row dt { color: var(--text); font-weight: 600; }
.canvas .row dd { margin: 0; color: var(--muted); }
.role-faq .wrap > div > div { padding: 14px 0; border-bottom: 1px solid var(--border); }
.role-faq .strong { font-size: 1.0625rem; }
.role-faq .muted { margin-top: 8px; }
.canvas pre.code { margin: 0; flex: 1 1 420px; min-width: 0; overflow-x: auto; padding: 22px; border-radius: 14px; background: #0b1119; border: 1px solid #243246; color: #cfe4f5; font: 0.875rem/1.65 ui-monospace, "SF Mono", Menlo, monospace; }

/* Closing band */
.canvas .closing { overflow: hidden; isolation: isolate; color: var(--lead); background: var(--bg); }
.canvas .closing .cta-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: 0.8; }
.canvas .closing .lead, .canvas .closing p { color: var(--lead); }

/* Forms */
.canvas form { min-width: 0; }
.form-hidden { display: contents; }
.hp { position: absolute; left: -9999px; }
.field { display: flex; flex-direction: column; gap: 8px; color: var(--text); font-size: 0.9375rem; font-weight: 600; }
.field input, .field select, .field textarea, .canvas select {
	width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--border-2); border-radius: 10px;
	background: var(--bg); color: var(--text); font: inherit; font-size: 1rem; font-weight: 400;
}
.field input:focus, .field select:focus, .field textarea:focus, .canvas select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px var(--cyan-soft); }
.field [aria-invalid="true"] { border-color: #d64545; }
.canvas fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.canvas legend { margin-bottom: 10px; padding: 0; color: var(--text); font-size: 0.9375rem; font-weight: 600; }
.chk { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 0.9375rem; color: var(--text); }
.chk input { width: 18px; height: 18px; accent-color: var(--cyan); }
.notice { padding: 14px 16px; border-radius: 10px; color: var(--text); }
.notice.ok { background: rgba(31, 170, 110, 0.1); border: 1px solid rgba(31, 170, 110, 0.4); }
.notice.err { background: rgba(214, 69, 69, 0.08); border: 1px solid rgba(214, 69, 69, 0.45); }
.form-status:empty { display: none; }
.canvas [hidden] { display: none !important; }

/* Phone: inline canvas columns stack */
@media (max-width: 760px) {
	.canvas [style*="grid-template-columns"]:not(.grid) { grid-template-columns: minmax(0, 1fr) !important; }
	.canvas [style*="grid-column"] { grid-column: auto !important; }
	.canvas [style*="flex: 1 1"] { flex-basis: 100% !important; }
	.canvas .row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.canvas { --sec-gap: var(--sp-5); --grid-gap: var(--sp-4); }
	.canvas .sec { padding: var(--sec-y) 0; }
	.canvas .sec.is-tight { padding: var(--sec-y-tight) 0; }
	.canvas .page-top { padding-top: 96px; padding-bottom: var(--sp-7); }
	.canvas .page-top + .sec { padding-top: var(--sec-y); }
	.canvas .page-top.xhero, .page-hero.xhero { min-height: 0; padding: calc(var(--header-h) + 28px) 0 36px; }
	.hero-media img { object-position: var(--pos-m, var(--pos, 60% 50%)); }
	.has-photo::before { background: linear-gradient(0deg, rgba(5, 11, 20, 0.97) 0%, rgba(5, 11, 20, 0.88) 42%, rgba(5, 11, 20, 0.45) 70%, rgba(5, 11, 20, 0.8) 100%); }
	.xhero .crumbs { margin-bottom: 20px; }
	.xhero .hero-actions .btn { flex: 1 1 100%; justify-content: center; }
	.canvas .page-top + .sec.is-tight { padding-top: var(--sec-y-tight); }
	.has-still, .has-visual { min-height: 0; }
	/* Dense grids keep two columns on a phone: compact cards, two-up tiles. */
	.canvas .sec .grid-dense, .canvas .sec .grid-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--sp-3) !important; }
	.canvas .grid-dense .card { gap: 6px; padding: var(--sp-4); }
	.canvas .grid-dense .ico { width: 24px; height: 24px; margin-bottom: 2px; }
	.canvas .grid-dense .ico svg { width: 22px; height: 22px; }
	.canvas .grid-dense h3 { font-size: 1rem; line-height: 1.2; }
	.canvas .grid-dense .card p { font-size: 0.8125rem; line-height: 1.4; }
	.canvas .sec .grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--sp-5) var(--sp-4) !important; }
	.canvas .grid-tiles .diagram-tile { padding: 14px 10px; font-size: 0.875rem; }
	.canvas .h1 { max-width: none; }
	.foot-top { grid-template-columns: 1fr 1fr; }
}

/* Page frame: every section starts on the same left edge. */
.canvas .wrap[style*="max-width"] { max-width: calc(var(--wrap) + 2 * var(--gutter)) !important; }
.role-faq .wrap > div { max-width: 860px; }

/* Pictures inside a text-and-picture row sit beside the text. */
.canvas [style*="flex"].img-frame, .canvas [style*="flex"].img-ph { width: auto; min-width: 0; aspect-ratio: auto; min-height: 340px; align-self: stretch; }
.canvas [style*="flex"].img-frame img { position: absolute; inset: 0; }
.img-studio, .img-fit { display: grid; place-items: center; }
.canvas .img-studio img, .canvas .img-fit img { max-width: min(100%, 446px); margin: auto; inset: 0; }

/* Rows of six read as three by two, not four and two. */
@media (min-width: 1000px) {
	.canvas .grid:has(> :nth-child(6):last-child), .canvas [style*="auto-fit"]:has(> .card:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 761px) {
	.canvas form [style*="grid-template-columns"]:has(> .field:nth-child(4):last-child) { grid-template-columns: 1fr 1fr !important; }
	.role-objection .panel { grid-template-columns: 1fr 1fr !important; gap: 20px 48px !important; }
}
@media (max-width: 760px) {
	.role-objection .panel > .kick { display: none; }
	.still::after { background: rgba(5, 8, 13, 0.74); }
	.canvas [style*="flex"].img-frame, .canvas [style*="flex"].img-ph { min-height: 240px; flex-basis: auto !important; width: 100%; }
}

/* Mobile menu is fully opaque, with even rows. */
@media (max-width: 1040px) {
	.menu-open .nav { background: var(--bg); }
	.menu-open .nav a.nav-top, .menu-open .nav .nav-item { border-bottom: 1px solid var(--border); }
	.menu-open .nav-menu a { border-bottom: 0; }
}

/* ---------- Header menus: subtitles ----------
   Each dropdown item keeps its line icon and gains a second line (inc/site-map.php, item[3]).
   Menus with more than seven items open as two columns; the last menu opens from its right edge so it stays
   on narrower desktop screens. The phone and tablet menu stays compact: no subtitles there. */
.nav-menu.has-subs { min-width: 320px; gap: 2px; }
.nav-menu.has-subs a { align-items: flex-start; gap: 12px; padding: 9px 14px 9px 8px; white-space: normal; }
.nav-menu.has-subs .mi { margin-top: 1px; }
.nav-menu .mt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-menu .ml { color: #0b1f36; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.nav-menu .ms { color: #4c5c70; font-size: 0.8125rem; font-weight: 400; line-height: 1.35; white-space: nowrap; }
[data-theme="dark"] .nav-menu .ml { color: #e7ebef; }
[data-theme="dark"] .nav-menu .ms { color: #8b98a9; }
.nav-menu.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 620px; column-gap: 4px; }
.nav > .nav-item:last-child .nav-menu { left: auto; right: 0; }
@media (max-width: 1040px) {
	.nav-menu .ms { display: none; }
	.nav-menu.has-subs a { align-items: center; padding: 6px 0; }
	.nav-menu.has-subs .mi { margin-top: 0; }
	.nav-menu .ml { color: inherit; font-weight: 500; }
	.nav-menu.cols-2 { display: none; min-width: 0; }
	.nav-item.open .nav-menu.cols-2 { display: flex; }
	.nav > .nav-item:last-child .nav-menu { right: auto; }
}

/* ---------- Header: Contact button ----------
   Class names start with hcta (header CTA); the theme already uses .cta for the closing band.
   A white pill with a hairline edge; the colour lives in a small blue arrow chip. No glow. With a mouse, hover
   turns the edge blue, adds a short shadow and nudges the chip forward; press is scale(0.97). */
.btn.hcta { box-shadow: none; gap: 10px; }
.hcta-ic { display: none; }
.hcta-ic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn.hcta-outline {
	padding: 0 5px 0 18px; border: 1px solid rgba(16, 45, 79, 0.16); border-radius: 999px; color: #0b1f36; background: #ffffff;
	box-shadow: 0 1px 2px rgba(11, 31, 54, 0.06);
	transition: transform 160ms var(--ease-out), border-color 200ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.hcta-outline .hcta-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #ffffff; background: linear-gradient(135deg, #00c2ff, #0a84ff); transition: transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
	.btn.hcta-outline:hover { border-color: rgba(0, 121, 179, 0.45); box-shadow: 0 6px 16px -10px rgba(11, 31, 54, 0.35); }
	.btn.hcta-outline:hover .hcta-ic { transform: translateX(2px); }
}
.btn.hcta:active { transform: scale(0.97); }

@media (max-width: 480px) { .btn.hcta-outline { padding-left: 14px; } }

/* ---------- Library and Tools (templates/library-*.php, tools-index.php, tool.php) ----------
   Apple-style: a light grey band, white rounded tiles, text first, the site blue only on what is live. */
.lib-band { padding: var(--sec-y) 0; background: #f5f5f7; }
.lib-band-tight { padding-top: clamp(32px, 4vw, 56px); }
.lib-head { display: flex; flex-direction: column; gap: 12px; max-width: 720px; margin-bottom: clamp(28px, 3.5vw, 48px); }
.lib-head h2, .lib-recent h2 { color: #1d1d1f; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); letter-spacing: -0.035em; }
.lib-sub { color: #6e6e73; font-size: 1.0625rem; }
.lib-topics, .tool-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.lib-topic, .tool-tile {
	display: flex; flex-direction: column; gap: 10px; padding: 30px 30px 26px; border-radius: 28px; background: #ffffff;
	color: inherit; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.lib-topic-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lib-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(180deg, #ffffff, #eef2f6); box-shadow: inset 0 0 0 1px rgba(16, 45, 79, 0.08), 0 6px 14px -8px rgba(11, 31, 54, 0.3); }
.lib-ic .mi { width: 24px; height: 24px; color: #0a84ff; }
.lib-ic-lg { width: 56px; height: 56px; border-radius: 16px; margin-bottom: 8px; }
.lib-ic-lg .mi svg { width: 28px; height: 28px; }
.lib-count { padding: 4px 10px; border-radius: 999px; background: rgba(10, 132, 255, 0.08); color: #0066cc; font-size: 0.8125rem; font-weight: 600; }
.lib-topic-name { color: #1d1d1f; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.022em; line-height: 1.17; }
.lib-topic-desc { color: #6e6e73; font-size: 1rem; line-height: 1.47; }
.lib-topic-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 14px; border-top: 1px solid #edf0f3; }
.lib-topic-list span { overflow: hidden; color: #1d1d1f; font-size: 0.9375rem; text-overflow: ellipsis; white-space: nowrap; }
.lib-topic-list span::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 10px 2px 0; border-radius: 50%; background: #00aff0; vertical-align: middle; }
.lib-topic-go { margin-top: auto; padding-top: 12px; color: #0066cc; font-size: 0.9375rem; font-weight: 600; }
.lib-topic-go span, .guide-go { display: inline-block; transition: transform 220ms var(--ease-out); }
.tool-open { align-self: flex-start; margin-top: auto; }
@media (hover: hover) and (pointer: fine) {
	.lib-topic:hover, .tool-tile:hover, .guide:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 24px 50px -30px rgba(11, 31, 54, 0.35); }
	.lib-topic:hover .lib-topic-go span, .guide:hover .guide-go { transform: translateX(3px); }
	.tool-tile:hover .tool-open { border-color: rgba(0, 121, 179, 0.45); }
	.tool-tile:hover .tool-open .hcta-ic { transform: translateX(2px); }
}

/* Guide cards, on the band or on white */
.lib-recent { padding: var(--sec-y) 0; }
.lib-recent .guide { background: #f5f5f7; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.lib-recent .guide-grid { margin-top: 24px; }
.guide {
	display: flex; flex-direction: column; gap: 10px; min-height: 250px; padding: 26px; border-radius: 24px; background: #ffffff;
	color: inherit; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.guide[hidden] { display: none; }
.guide-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; font-size: 0.8125rem; }
.guide-kind { color: #0066cc; font-weight: 600; }
.guide-time { color: #6e6e73; }
.guide-title { color: #1d1d1f; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.guide-text { color: #6e6e73; font-size: 0.9375rem; line-height: 1.5; }
.guide-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; color: #6e6e73; font-size: 0.8125rem; }
.guide-go { color: #0066cc; font-size: 1.125rem; }
.lib-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.lib-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid rgba(16, 45, 79, 0.12); border-radius: 999px; background: #ffffff; color: #1d1d1f; font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 160ms var(--ease-out); }
.lib-chip span { color: #6e6e73; font-size: 0.8125rem; }
.lib-chip[aria-pressed="true"] { background: #102d4f; border-color: #102d4f; color: #ffffff; }
.lib-chip[aria-pressed="true"] span { color: rgba(255, 255, 255, 0.65); }
.lib-chip:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .lib-chip:not([aria-pressed="true"]):hover { border-color: rgba(0, 121, 179, 0.45); } }
.lib-empty { padding: 40px 0; color: #6e6e73; text-align: center; }
.lib-none { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 640px; padding: 36px; border-radius: 28px; background: #ffffff; }

/* A guide: contents panel beside the text */
.guide-layout { display: grid; grid-template-columns: 280px minmax(0, 760px); justify-content: center; gap: clamp(32px, 4vw, 72px); padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(56px, 6vw, 96px); }
.guide-aside { display: flex; flex-direction: column; gap: 16px; align-self: start; position: sticky; top: calc(var(--header-h, 73px) + 24px); max-height: calc(100vh - var(--header-h, 73px) - 48px); overflow-y: auto; }
.guide-box { padding: 20px 20px 18px; border-radius: 20px; background: #f5f5f7; font-size: 0.875rem; }
.guide-box summary, .guide-box-title { color: #1d1d1f; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.guide-box summary { cursor: pointer; list-style: none; }
.guide-box summary::-webkit-details-marker { display: none; }
.guide-box-title a { color: inherit; text-decoration: none; }
.guide-box ol { display: flex; flex-direction: column; gap: 2px; margin: 12px 0 0; padding: 0; list-style: none; }
.guide-box li a, .guide-box li span { display: block; padding: 6px 10px; border-radius: 10px; color: #4c5c70; line-height: 1.35; text-decoration: none; transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out); }
.guide-box li [aria-current], .guide-box li a.is-active { background: #ffffff; color: #0066cc; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
@media (hover: hover) and (pointer: fine) { .guide-box li a:hover { background: rgba(255, 255, 255, 0.7); color: #1d1d1f; } }
.guide-box-all { display: inline-block; margin: 10px 10px 0; color: #0066cc; font-weight: 600; text-decoration: none; }
.guide-article { min-width: 0; }
.guide-article .prose img { height: auto; border-radius: 14px; }
.guide-article .prose h2, .guide-article .prose h3 { scroll-margin-top: calc(var(--header-h, 73px) + 24px); }
.guide-article .prose figure { margin-left: 0; margin-right: 0; }
.guide-article .prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.guide-article .prose th, .guide-article .prose td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.guide-article .prose th { color: var(--text); font-weight: 600; }
.guide-article .article-tags, .guide-article .article-nav { margin-top: 48px; }
.lib-more { background: #f5f5f7; }
.lib-more .guide { background: #ffffff; }
@media (max-width: 1000px) {
	.guide-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.guide-aside { position: static; max-height: none; overflow: visible; }
	.guide-toc:not([open]) ol { display: none; }
	.guide-topic { display: none; }
}

/* A tool on the band */
.tool-band { padding-top: clamp(32px, 4vw, 56px); }
.tool-note { margin-top: 20px; color: #6e6e73; font-size: 0.875rem; text-align: center; }
.tool-note a { color: #0066cc; }


/* ---------- Error pages (404.php, errors/500.html) ----------
   Light and quick: no photo. The request's path is drawn as a small SVG; a packet travels it and stops
   where the request failed. errors/500.html carries its own copy of these rules. */
.err-hero { padding: calc(var(--header-h, 73px) + clamp(48px, 7vw, 96px)) 0 clamp(48px, 6vw, 80px); background: #ffffff; }
.err-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.err-title { max-width: 18ch; margin-top: 14px; color: #1d1d1f; font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem); line-height: 1.05; letter-spacing: -0.035em; }
.err-lead { max-width: 34em; margin-top: 16px; color: #6e6e73; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); }
.err-diagram { width: min(100%, 760px); margin: clamp(32px, 5vw, 56px) 0 0; }
.err-diagram svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font); }
.err-body { fill: url(#err-body); stroke: rgba(29, 29, 31, 0.13); filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.07)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.06)); }
.err-ic { stroke: #3a4656; stroke-width: 2; }
.err-dot { fill: #3a4656; }
.err-led { fill: #00c27a; }
.err-led-bad { fill: #e5484d; }
.err-lbl { fill: #6e6e73; font-size: 17px; font-weight: 500; }
.err-line { stroke: rgba(29, 29, 31, 0.18); stroke-width: 2; }
.err-line-gone { stroke-dasharray: 2 8; }
.err-break { stroke: #86868b; stroke-width: 2.5; }
.err-missing { fill: #fbfbfd; stroke: rgba(29, 29, 31, 0.28); stroke-width: 1.5; stroke-dasharray: 6 7; }
.err-code { fill: #c7ccd3; font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
.err-ring { fill: none; stroke: #e5484d; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.err-fault { fill: #e5484d; }
.err-fault-mark { stroke: #ffffff; stroke-width: 3; }
.err-pk { fill: url(#err-live); filter: drop-shadow(0 0 6px rgba(0, 160, 255, 0.6)); opacity: 0; }
.err-404 .err-pk { animation: err-pk-404 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.err-500 .err-pk { animation: err-pk-500 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.err-500 .err-ring { animation: err-ring 2.6s ease-out infinite; }
@keyframes err-pk-404 { 0% { transform: translate(150px, 100px); opacity: 0; } 8% { opacity: 1; } 45% { transform: translate(330px, 100px); } 50% { transform: translate(380px, 100px); opacity: 0.2; } 55% { transform: translate(430px, 100px); opacity: 1; } 78% { transform: translate(520px, 100px); opacity: 1; } 86%, 100% { transform: translate(538px, 100px); opacity: 0; } }
@keyframes err-pk-500 { 0% { transform: translate(190px, 100px); opacity: 0; } 8% { opacity: 1; } 70% { transform: translate(560px, 100px); opacity: 1; } 78%, 100% { transform: translate(568px, 100px); opacity: 0; } }
@keyframes err-ring { 0%, 70% { opacity: 0; transform: scale(0.9); } 74% { opacity: 0.7; } 100% { opacity: 0; transform: scale(1.25); } }
.err-search { display: flex; gap: 8px; width: min(100%, 520px); margin-top: clamp(32px, 4vw, 48px); padding: 6px; border: 1px solid #e2e8ef; border-radius: 999px; background: #ffffff; box-shadow: 0 12px 30px -24px rgba(11, 31, 54, 0.4); }
.err-search input { flex: 1; min-width: 0; padding: 0 16px; border: 0; background: none; color: #1d1d1f; font: inherit; font-size: 1rem; }
.err-search input:focus { outline: none; }
.err-search:focus-within { border-color: #0a84ff; box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.12); }
.err-links { padding-top: clamp(40px, 5vw, 64px); }
.err-links .lib-topics { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (max-width: 600px) { .err-lbl { font-size: 26px; } .err-code { font-size: 40px; } }


/* ---------- RTLS live map (solutions/rtls-location; script: assets/js/rtls-map.js) ---------- */
.canvas .loc-sec .loc-wrap { display: flex; flex-direction: column; gap: var(--sp-5); }
.canvas .loc-sec .loc-head { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 760px; }
.canvas .loc-sec .loc-head .h2 { color: #1d1d1f; letter-spacing: -0.035em; }
.canvas .loc-sec .loc-head .lead { color: #6e6e73; }
.canvas .loc-sec .loc-note { color: var(--dim); font-size: 0.8125rem; }

.canvas .loc-sec .loc-key { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; color: #6e6e73; font-size: 0.875rem; }
.canvas .loc-sec .loc-key li { display: inline-flex; align-items: center; gap: 8px; }
.canvas .loc-sec .key { display: inline-block; flex: none; }
.canvas .loc-sec .key-ping { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #0a84ff; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 8px #0a84ff; }
.canvas .loc-sec .key-range { width: 22px; height: 0; border-top: 2px dashed #0a84ff; }
.canvas .loc-sec .key-ceil { width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(#fff, #eceff3); box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.18), 0 3px 6px rgba(0, 0, 0, 0.08); }
.canvas .loc-sec .key-wall { width: 18px; height: 10px; border-radius: 3px; background: linear-gradient(#fff, #eceff3); box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.18), 0 3px 6px rgba(0, 0, 0, 0.08), 0 -3px 0 -1px #c9ced6; }
.canvas .loc-sec .key-gnss { width: 22px; height: 0; border-top: 2px dotted #00b8f5; }

.canvas .loc-sec .loc {
	display: grid; grid-template-columns: minmax(0, 1fr) 300px; overflow: hidden;
	border-radius: 28px; box-shadow: inset 0 0 0 1px rgba(16, 45, 79, 0.06);
	background: radial-gradient(70% 80% at 80% 0%, rgba(0, 175, 240, 0.07), transparent 60%), linear-gradient(180deg, #fbfbfd 0%, #f1f3f6 100%);
}
.canvas .loc-sec .loc-stage { position: relative; min-width: 0; padding: clamp(14px, 2vw, 28px); }
.canvas .loc-sec .loc-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font); }

/* Plan */
.canvas .loc-sec .loc-svg .bldg { fill: #ffffff; stroke: rgba(29, 29, 31, 0.1); filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.06)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05)); }
.canvas .loc-sec .loc-svg .floor-dots { fill: url(#loc-dots); }
.canvas .loc-sec .loc-svg .wall { fill: none; stroke: #c9ced6; stroke-width: 3; stroke-linecap: round; }
.canvas .loc-sec .loc-svg .zone { fill: #0a84ff; opacity: 0; transition: opacity 600ms var(--ease-out); }
.canvas .loc-sec .loc-svg .zone.on { opacity: 0.05; }
.canvas .loc-sec .loc-svg .zlbl { fill: #6e6e73; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; }
.canvas .loc-sec .loc-svg .yard { fill: url(#loc-hatch); stroke: rgba(29, 29, 31, 0.16); stroke-width: 1.25; stroke-dasharray: 5 6; }
.canvas .loc-sec .loc-svg .door { stroke: #0a84ff; stroke-width: 3; stroke-linecap: round; opacity: 0.5; }
.canvas .loc-sec .loc-svg[data-layout="tall"] .zlbl { font-size: 17px; }

/* Anchors and satellites: lit white bodies. */
.canvas .loc-sec .loc-svg .anc-body { fill: url(#loc-body); stroke: rgba(29, 29, 31, 0.14); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.08)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06)); }
.canvas .loc-sec .loc-svg .anc-eye { fill: none; stroke: #3a4656; stroke-width: 1.4; }
.canvas .loc-sec .loc-svg .anc-dot { fill: #3a4656; transition: fill 200ms var(--ease-out); }
.canvas .loc-sec .loc-svg .anc.live .anc-dot { fill: #0a84ff; }
.canvas .loc-sec .loc-svg .sat-ic { fill: none; stroke: #3a4656; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* Tags: the live things, so they carry the signal gradient. */
.canvas .loc-sec .loc-svg .tag-body { fill: url(#loc-live); stroke: #ffffff; stroke-width: 2; filter: drop-shadow(0 6px 10px rgba(10, 132, 255, 0.35)); }
.canvas .loc-sec .loc-svg .tag-ic { fill: none; stroke: #ffffff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.canvas .loc-sec .loc-svg .tag-ic-fill { fill: #ffffff; }
.canvas .loc-sec .loc-svg .tag-name { fill: #1d1d1f; font-size: 11px; font-weight: 600; paint-order: stroke; stroke: rgba(255, 255, 255, 0.9); stroke-width: 4px; stroke-linejoin: round; opacity: 0; transition: opacity 300ms var(--ease-out); }
.canvas .loc-sec .loc-svg .ltag.sel .tag-name { opacity: 1; }
.canvas .loc-sec .loc-svg[data-layout="tall"] .tag-name { font-size: 16px; }
.canvas .loc-sec .loc-svg .ltag { cursor: pointer; }
/* The selected tag's planned route ahead, and every tag's recent trail (it shrinks away while the tag is parked). */
.canvas .loc-sec .loc-svg .ahead { fill: none; stroke: rgba(10, 132, 255, 0.22); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: opacity 400ms var(--ease-out); }
.canvas .loc-sec .loc-svg .ahead.off { opacity: 0; }
.canvas .loc-sec .loc-svg .trail { fill: none; stroke: #0a84ff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.3; }
.canvas .loc-sec .loc-svg .ring { fill: none; stroke: #0a84ff; stroke-width: 1.75; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; opacity: 0; pointer-events: none; }
.canvas .loc-sec .loc-svg .halo { fill: rgba(10, 132, 255, 0.08); stroke: rgba(10, 132, 255, 0.35); stroke-width: 1; stroke-dasharray: 3 3; transition: r 600ms var(--ease-out); }

/* Measurements for the selected tag */
.canvas .loc-sec .loc-svg .range { stroke: #0a84ff; stroke-width: 1.5; stroke-dasharray: 4 5; animation: loc-crawl 900ms linear infinite; }
.canvas .loc-sec .loc-svg .gnss { stroke: #00b8f5; stroke-width: 1.5; stroke-dasharray: 1.5 5; stroke-linecap: round; animation: loc-crawl 1400ms linear infinite; }
@keyframes loc-crawl { to { stroke-dashoffset: -18; } }
.canvas .loc-sec .loc-svg .loc-pill rect { fill: #ffffff; stroke: rgba(10, 132, 255, 0.35); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08)); }
.canvas .loc-sec .loc-svg .loc-pill text { fill: #0a5fc4; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.canvas .loc-sec .loc-svg[data-layout="tall"] .loc-pill text { font-size: 15px; }
.canvas .loc-sec .loc-svg .meas { transition: opacity 300ms var(--ease-out); }
.canvas .loc-sec .loc-svg .meas.off { opacity: 0; }

/* Panel */
.canvas .loc-sec .loc-panel {
	display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 24px 22px;
	background: rgba(255, 255, 255, 0.7); border-left: 1px solid rgba(16, 45, 79, 0.08);
	backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); color: #1d1d1f;
}
.canvas .loc-sec .feed-head { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; }
.canvas .loc-sec .feed-head b { font-weight: 600; }
.canvas .loc-sec .feed-tag { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: rgba(0, 175, 240, 0.12); color: #0079b3; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.canvas .loc-sec .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #00c27a; animation: loc-live-dot 2s var(--ease-out) infinite; }
@keyframes loc-live-dot { 0% { box-shadow: 0 0 0 0 rgba(0, 194, 122, 0.45); } 70%, 100% { box-shadow: 0 0 0 8px rgba(0, 194, 122, 0); } }
.canvas .loc-sec .tag-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0 0 12px; list-style: none; border-bottom: 1px solid rgba(16, 45, 79, 0.08); }
.canvas .loc-sec .tag-btn {
	display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-items: center; width: 100%;
	padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
	transition: background-color 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.canvas .loc-sec .tag-btn:active { transform: scale(0.98); }
.canvas .loc-sec .tag-btn[aria-pressed="true"] { background: #ffffff; box-shadow: 0 6px 16px -10px rgba(16, 45, 79, 0.35), 0 0 0 1px rgba(10, 132, 255, 0.25); }
@media (hover: hover) and (pointer: fine) { .canvas .loc-sec .tag-btn:hover { background: rgba(255, 255, 255, 0.8); } }
.canvas .loc-sec .tag-btn svg { grid-row: 1 / span 2; width: 30px; height: 30px; }
.canvas .loc-sec .tag-btn b { font-size: 0.875rem; font-weight: 600; }
.canvas .loc-sec .tag-btn span { color: #6e6e73; font-size: 0.8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.canvas .loc-sec .tag-btn .zone-now { color: #1d1d1f; }
.canvas .loc-sec .ev-title { color: #6e6e73; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.canvas .loc-sec .ev-list { display: flex; flex-direction: column; margin: -6px 0 0; padding: 0; list-style: none; min-height: 132px; }
.canvas .loc-sec .ev-list li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(16, 45, 79, 0.06); font-size: 0.8125rem; transition: transform 420ms var(--ease-out), opacity 420ms var(--ease-out); }
.canvas .loc-sec .ev-list li.enter { opacity: 0; transform: translateY(-8px); }
.canvas .loc-sec .ev-list time { color: #6e6e73; font-size: 0.75rem; font-variant-numeric: tabular-nums; }

@media (max-width: 960px) {
	.canvas .loc-sec .loc { grid-template-columns: minmax(0, 1fr); }
	.canvas .loc-sec .loc-panel { border-left: 0; border-top: 1px solid rgba(16, 45, 79, 0.08); }
	.canvas .loc-sec .tag-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
}
@media (max-width: 760px) {
	.canvas .loc-sec .loc { border-radius: 22px; }
	.canvas .loc-sec .tag-list { grid-template-columns: 1fr; }
	.canvas .loc-sec .loc-key { font-size: 0.8125rem; }
}

/* The theme's list bullets and grid do not apply inside the map. */
.canvas .loc-sec .loc-key li, .canvas .loc-sec .tag-list li, .canvas .loc-sec .ev-list li { padding-left: 0; }
.canvas .loc-sec .loc-key li::before, .canvas .loc-sec .tag-list li::before, .canvas .loc-sec .ev-list li::before { content: none; }
.canvas .loc-sec .ev-list li { color: #1d1d1f; }

/* Flat security artwork keeps its clean background instead of the photographic scrim. */
.canvas .photo-card .card-media--illustration .card-photo::after { background: none; }

/* ---------- Sitemap page (templates/sitemap.php) ---------- */
.sm-band { padding: var(--sec-y) 0; background: #f5f5f7; }
.sm-band-end { padding-top: 0; }
.sm-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; margin-bottom: clamp(24px, 3vw, 40px); }
.sm-top .lib-head { margin-bottom: 0; }
.sm-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.sm-stats > div { min-width: 118px; padding: 16px 20px; border-radius: 20px; background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); }
.sm-stats dt { color: #6e6e73; font-size: 0.8125rem; }
.sm-stats dd { margin: 2px 0 0; color: #102d4f; font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.sm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-bottom: 24px; }
.sm-search { position: relative; flex: 1 1 320px; max-width: 460px; }
.sm-search svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; color: #6e6e73; transform: translateY(-50%); pointer-events: none; }
.sm-search input { width: 100%; min-height: 48px; padding: 0 16px 0 44px; border: 0; border-radius: 999px; background: #ffffff; color: #1d1d1f; font: inherit; box-shadow: inset 0 0 0 1px rgba(16, 45, 79, 0.1); }
.sm-search input:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }
.sm-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: #ffffff; color: #1d1d1f; font-size: 0.9375rem; font-weight: 500; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(16, 45, 79, 0.1); }
.sm-grid, .sm-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.sm-cols { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.sm-tile, .sm-home { border-radius: 28px; background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); }
.sm-tile { display: flex; flex-direction: column; gap: 14px; padding: 26px 26px 20px; }
.sm-tile > header { display: flex; align-items: center; gap: 14px; }
.sm-tile h3 { flex: 1; margin: 0; color: #1d1d1f; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.022em; }
.sm-home { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 26px; color: inherit; text-decoration: none; transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out); }
.sm-home strong { display: block; color: #1d1d1f; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.022em; }
.sm-home small { color: #6e6e73; font-size: 0.9375rem; }
.sm-home > span:nth-child(2) { flex: 1; }
.sm-arrow { color: #0066cc; font-size: 1.25rem; }
.sm-tree { position: relative; margin: 0; padding: 0 0 0 18px; list-style: none; }
.sm-tree::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 14px; width: 1px; background: #dde3ea; }
.sm-tree li { position: relative; }
.sm-tree li::before { content: ""; position: absolute; left: -14px; top: 19px; width: 10px; height: 1px; background: #dde3ea; }
.sm-tree a { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; margin: 0 -12px; border-radius: 12px; color: #1d1d1f; text-decoration: none; transition: background-color 160ms var(--ease-out); }
.sm-name { font-size: 1rem; font-weight: 500; line-height: 1.4; }
.sm-sub { color: #6e6e73; font-size: 0.875rem; line-height: 1.4; }
.sm-label { margin: 6px 0 0; color: #6e6e73; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.sm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sm-chips a { display: inline-flex; gap: 8px; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: #f5f5f7; color: #1d1d1f; font-size: 0.875rem; font-weight: 500; text-decoration: none; }
.sm-chips span { color: #6e6e73; font-size: 0.8125rem; }
.sm-lib { padding: var(--sec-y) 0; }
.sm-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.sm-topic { padding: 6px 22px; border-radius: 24px; background: #f5f5f7; }
.sm-topic summary { display: flex; align-items: center; gap: 14px; min-height: 68px; cursor: pointer; list-style: none; }
.sm-topic summary::-webkit-details-marker { display: none; }
.sm-topic summary:focus-visible { outline: 2px solid #0a84ff; outline-offset: 4px; border-radius: 16px; }
.sm-topic-name { flex: 1; color: #1d1d1f; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; }
.sm-chev { width: 18px; height: 18px; color: #6e6e73; transition: transform 240ms var(--ease-out); }
.sm-topic[open] .sm-chev { transform: rotate(180deg); }
.sm-topic .sm-tree { margin-bottom: 14px; }
.sm-empty { margin-top: 28px; color: #6e6e73; text-align: center; }
[data-sm-item][hidden], [data-sm-group][hidden] { display: none !important; }
@media (hover: hover) and (pointer: fine) {
	.sm-tree a:hover, .sm-chips a:hover, .sm-jump a:hover { background: #eef2f6; }
	.sm-home:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 24px 50px -30px rgba(11, 31, 54, 0.35); }
}
@media (prefers-reduced-motion: reduce) { .sm-home, .sm-chev { transition: none; } }

/* Page hero signal layers: each page draws its own motif (assets/js/main.js), so let them read against the photos. */
.hero-canvas--page[data-motif] { opacity: 1; mix-blend-mode: screen; }

/* Sensing page: an icon tile on each sensor card */
.canvas .sense-ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 4px; border-radius: 16px; background: linear-gradient(180deg, #ffffff, #eef2f6); box-shadow: inset 0 0 0 1px rgba(16, 45, 79, 0.08), 0 6px 14px -8px rgba(11, 31, 54, 0.3); color: #0a84ff; }
.canvas .sense-ic svg { width: 26px; height: 26px; }

/* ---------- Homepage hero slider ---------- */
.sec.hero-slider { position: relative; display: block; padding: 0 !important; overflow: hidden; }
.hs-track { display: grid; }
.hs-slide { grid-area: 1 / 1; position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: inherit; padding: 128px 0 96px; opacity: 0; visibility: hidden; transform: scale(1.015); transition: opacity 900ms var(--ease-out), transform 1200ms var(--ease-out), visibility 0s linear 900ms; }
.hs-slide.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* The slides share one grid cell, so the hero is as tall as the tallest slide (the HLC slide with its artwork).
   Shorter slides sit at the top on smaller screens, so their text lines up with the HLC slide's, and centred on
   wide screens. */
.hs-slide { align-items: flex-start; }
@media (min-width: 1100px) { .hs-slide { align-items: center; } }
.hs-slide > .wrap { width: 100%; }
.hs-slide .wrap > div > * { transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out); }
.hs-slide:not(.is-active) .wrap > div > * { opacity: 0; transform: translateY(14px); }
.hs-slide.is-active .wrap > div > *:nth-child(2) { transition-delay: 90ms; }
.hs-slide.is-active .wrap > div > *:nth-child(3) { transition-delay: 180ms; }
.hs-slide.is-active .wrap > div > *:nth-child(4) { transition-delay: 270ms; }
.hero-slider .has-visual, .hs-slide { min-height: min(92svh, 860px); }
.hs-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 80% 40%, #0d2a4d 0%, #071425 55%, #05080d 100%); overflow: hidden; }
.hs-glow { position: absolute; width: 52vw; height: 52vw; border-radius: 50%; filter: blur(90px); opacity: 0.55; }
.hs-glow-a { right: -8vw; top: -12vw; background: #0a84ff; animation: hs-float 18s var(--ease-in-out) infinite alternate; }
.hs-glow-b { right: 14vw; bottom: -26vw; width: 40vw; height: 40vw; background: #00c2ff; opacity: 0.32; animation: hs-float 22s var(--ease-in-out) infinite alternate-reverse; }
@keyframes hs-float { to { transform: translate3d(-4vw, 3vw, 0) scale(1.08); } }
.hs-art { --R: 150px; --L: 44px; position: relative; flex: 1 1 380px; display: grid; place-items: center; min-height: 440px; }
.hs-disc { position: absolute; width: calc(var(--R) * 1.84); height: calc(var(--R) * 1.84); border-radius: 50%; background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04) 62%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 40px 90px -30px rgba(0, 40, 110, 0.7); backdrop-filter: blur(6px); }
.hs-art img { position: relative; z-index: 2; width: calc(var(--R) * 1.5); height: auto; filter: drop-shadow(0 28px 34px rgba(0, 0, 0, 0.5)); animation: hs-bob 7s var(--ease-in-out) infinite alternate; }
@keyframes hs-bob { to { transform: translateY(-8px) rotate(-1.2deg); } }
.hs-eq { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.hs-eq i { position: absolute; left: -1.5px; bottom: 0; width: 3px; height: calc(var(--R) + var(--L)); transform-origin: 50% 100%; transform: rotate(calc(var(--i) * 7.5deg)); }
.hs-eq i::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: var(--L); border-radius: 3px; background: linear-gradient(0deg, #0a84ff, #5ac8ff); transform-origin: 50% 100%; animation: hs-eq 1.7s var(--ease-in-out) infinite alternate; }
.hs-eq i:nth-child(3n)::after { animation-duration: 1.15s; }
.hs-eq i:nth-child(3n+1)::after { animation-duration: 2.1s; animation-delay: -0.7s; }
.hs-eq i:nth-child(2n)::after { animation-delay: -1.2s; }
.hs-eq i:nth-child(5n)::after { animation-duration: 1.4s; animation-delay: -0.3s; }
@keyframes hs-eq { from { transform: scaleY(0.14); opacity: 0.55; } to { transform: scaleY(1); opacity: 1; } }
.hs-tag { position: absolute; z-index: 3; right: 2%; top: 8%; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; backdrop-filter: blur(10px); }
.hs-dots { position: absolute; left: 0; right: 0; bottom: 28px; z-index: 5; display: flex; justify-content: center; gap: 10px; }
.hs-dot { position: relative; width: 56px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.hs-dot span { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, 0.28); }
.hs-dot span::after { content: ""; position: absolute; inset: 0; border-radius: 4px; background: #fff; transform: scaleX(0); transform-origin: left; }
.hs-dot.is-active span::after { transform: scaleX(1); }
.hero-slider.is-playing .hs-dot.is-active span::after { transform: scaleX(0); animation: hs-fill var(--hs-ms, 8000ms) linear forwards; }
@keyframes hs-fill { to { transform: scaleX(1); } }
.hs-dot:focus-visible { outline: 2px solid #5ac8ff; outline-offset: 3px; border-radius: 8px; }
.hs-arrow { position: absolute; top: calc(50% + var(--header-h, 73px) / 2); z-index: 5; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; margin-top: -22px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; opacity: 0; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); transition: opacity 260ms var(--ease-out), background-color 200ms var(--ease-out), transform 200ms var(--ease-out); }
/* On wide screens the content is centred with empty margins: the arrows move a quarter of the way into that margin (up to 64px in). */
.hs-arrow-prev { left: clamp(8px, (100vw - var(--wrap) - 2 * var(--gutter)) / 8 + 4px, 64px); transform: translateX(-8px); }
.hs-arrow-next { right: clamp(8px, (100vw - var(--wrap) - 2 * var(--gutter)) / 8 + 4px, 64px); transform: translateX(8px); }
.hero-slider[data-side="left"] .hs-arrow-prev, .hero-slider[data-side="right"] .hs-arrow-next, .hero-slider:focus-within .hs-arrow { opacity: 1; transform: none; }
.hs-arrow:active { transform: scale(0.94) !important; }
.hs-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hs-arrow:focus-visible { outline: 2px solid #5ac8ff; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .hs-arrow:hover { background: rgba(255, 255, 255, 0.26); } }
@media (hover: none) { .hs-arrow { display: none; } }
/* Keep slide text clear of the arrows (8px inset + 44px button + 14px air) when the page gutter is narrower than that. */
@media (hover: hover) and (pointer: fine) { .hero-slider .hs-slide > .wrap { padding-left: max(var(--gutter), calc(66px - max(0px, (100vw - var(--wrap) - 2 * var(--gutter)) / 2))); padding-right: max(var(--gutter), calc(66px - max(0px, (100vw - var(--wrap) - 2 * var(--gutter)) / 2))); } }
@media (max-width: 760px) {
	.hs-slide { min-height: 0; padding: 112px 0 96px; }
	.hs-art { --R: 96px; --L: 30px; min-height: 290px; }
}
@media (prefers-reduced-motion: reduce) { .hs-slide, .hs-slide .wrap > div > *, .hs-glow, .hs-art img, .hs-eq i::after { transition: none !important; animation: none !important; } }

/* Hero slider: animations in the slide that is not showing are paused. */
.hs-slide:not(.is-active) *, .hs-slide:not(.is-active) *::after { animation-play-state: paused !important; }

/* ---------- Problem-section live illustrations (assets/js/problem-visuals.js) ---------- */
.canvas .pv { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.canvas .pv-stage { overflow: hidden; padding: clamp(10px, 1.6vw, 22px); border-radius: 28px; box-shadow: inset 0 0 0 1px rgba(16, 45, 79, 0.06); background: radial-gradient(70% 80% at 80% 0%, rgba(0, 175, 240, 0.07), transparent 60%), linear-gradient(180deg, #fbfbfd 0%, #f1f3f6 100%); }
.canvas .pv-svg { display: block; width: 100%; height: auto; font-family: var(--font); }
.canvas .pv-cap { max-width: none; color: var(--dim); font-size: 0.8125rem; }
.pv-svg .pv-card { fill: #ffffff; stroke: rgba(29, 29, 31, 0.08); filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.06)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05)); }
.pv-svg .pv-h { fill: #1d1d1f; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.pv-svg .pv-sub { fill: #5f6d7f; font-size: 15px; }
.pv-svg .pv-file { fill: #1d1d1f; font-size: 16px; font-weight: 600; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.pv-svg .pv-cell { fill: #eef1f5; stroke: rgba(16, 45, 79, 0.08); transition: fill 200ms ease; }
.pv-svg .pv-cell.used { fill: #cfe3fb; }
.pv-svg .pv-cell.worn { fill: #9aa6b4; }
.pv-svg .pv-cell.live { fill: url(#pv-live); }
.pv-svg .pv-cell.bad { fill: #ff453a; }
.pv-svg .pv-badge { fill: #eef1f5; }
.pv-svg .pv-badge.ok { fill: #e3f6ea; } .pv-svg .pv-badge.bad { fill: #ffe3e1; } .pv-svg .pv-badge.warn { fill: #fff1d6; }
.pv-svg .pv-badge-t { fill: #1d1d1f; font-size: 14px; font-weight: 600; }
.pv-svg .pv-cut-bg { fill: #1d1d1f; }
.pv-svg .pv-cut-t { fill: #ffffff; font-size: 16px; font-weight: 600; }
.pv-svg .pv-chip { fill: #eef1f5; }
.pv-svg .pv-chip.on { fill: url(#pv-live); }
.pv-svg .pv-chip.done { fill: #cfe3fb; }
.pv-svg .pv-chip-t { fill: #1d1d1f; font-size: 14px; font-weight: 600; }
.pv-svg .pv-dev { fill: #eef1f5; stroke: rgba(16, 45, 79, 0.1); transition: fill 250ms ease; }
.pv-svg .pv-dev.live { fill: url(#pv-live); }
.pv-svg .pv-dev.new { fill: #cfe3fb; }
.pv-svg .pv-dev.bad { fill: #ff453a; }
.pv-svg .pv-dev.back { fill: #ffd8a8; }
.pv-svg .pv-led { fill: #30d158; }
.pv-svg .pv-link { stroke: rgba(10, 132, 255, 0.28); stroke-width: 1.5; transition: opacity 300ms ease; }
.pv-svg .pv-link.off { opacity: 0.08; }
.pv-svg .pv-node { fill: #ffffff; stroke: #0a84ff; stroke-width: 3; }
.pv-svg .pv-node.off { fill: #eef1f5; stroke: #c4ccd6; }
.pv-svg .pv-gw { fill: url(#pv-live); }
.pv-svg .pv-pkt { fill: url(#pv-live); stroke: #ffffff; stroke-width: 2.5; filter: drop-shadow(0 2px 4px rgba(10, 132, 255, 0.35)); }
.pv-svg .pv-node.off { stroke: #ff453a; stroke-dasharray: 4 4; fill: #fff3f2; }
.pv-svg .pv-layer { fill: #eef1f5; stroke: rgba(16, 45, 79, 0.1); transition: fill 250ms ease; }
.pv-svg .pv-layer.v0 { fill: #e6e9ee; } .pv-svg .pv-layer.v1 { fill: #edf0f4; } .pv-svg .pv-layer.v2 { fill: #f3f0e9; }
.pv-svg .pv-layer.nox { fill: #e3eefc; stroke: rgba(10, 132, 255, 0.25); }
.pv-svg .pv-layer.live { fill: url(#pv-live); }
.pv-svg .pv-layer.bad { fill: #ffe3e1; stroke: #ff453a; }
.pv-svg .pv-layer-t { fill: #1d1d1f; font-size: 16px; font-weight: 600; }
.pv-svg .pv-layer-v { fill: #5f6d7f; font-size: 14px; }
.pv-svg .pv-seam { fill: #d7dce3; }
.pv-svg .pv-seam.bad { fill: #ff453a; }
.pv-svg .pv-chipbody { fill: #1d2a3a; transition: fill 250ms ease; }
.pv-svg .pv-chipbody.live { fill: url(#pv-live); }
.pv-svg .pv-chip-name { fill: #ffffff; font-size: 16px; font-weight: 600; }
.pv-svg .pv-axis { stroke: rgba(16, 45, 79, 0.15); stroke-width: 1.5; }
.pv-svg .pv-drop { fill: rgba(255, 159, 10, 0.12); }
.pv-svg .pv-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pv-svg .pv-line.bad { stroke: #ff453a; } .pv-svg .pv-line.ok { stroke: #0a84ff; }
.pv-svg .pv-line-t { font-size: 14px; font-weight: 600; }
.pv-svg .pv-line-t.bad { fill: #d70015; } .pv-svg .pv-line-t.ok { fill: #0066cc; }
.pv-svg .pv-mono { fill: #1d1d1f; font-size: 14px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.pv-svg .pv-mono.dim { fill: #8e98a6; } .pv-svg .pv-mono.bad { fill: #d70015; font-weight: 600; } .pv-svg .pv-mono.strong { font-weight: 700; }
.pv-svg .pv-route { fill: none; stroke: rgba(10, 132, 255, 0.35); stroke-width: 2; stroke-dasharray: 4 6; }
.pv-svg .pv-motor { fill: #ffffff; stroke: #1d2a3a; stroke-width: 6; stroke-dasharray: 18 10; }
.pv-svg .pv-motor.spin { animation: pv-spin 1.2s linear infinite; transform-box: fill-box; transform-origin: center; }
.pv-svg .pv-motor.bad { stroke: #ff453a; animation-duration: 0.35s; }
@keyframes pv-spin { to { transform: rotate(360deg); } }
.pv-svg .pv-big { fill: #102d4f; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.pv-svg .pv-wave { fill: none; stroke: #0a84ff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pv-svg .pv-wave.bad { stroke: #ff6a5f; }
.pv-svg .pv-truth { fill: none; stroke: #8e98a6; stroke-width: 2; stroke-dasharray: 5 6; }
.pv-svg .pv-cap-line { stroke: #1d1d1f; stroke-width: 2; stroke-dasharray: 4 4; }
.pv-svg .pv-bar { fill: url(#pv-live); transition: width 120ms linear; }
.pv-svg .pv-bar.bad { fill: #ff453a; }
.pv-svg .pv-tiny { fill: #5f6d7f; font-size: 12px; }
.pv-svg .pv-link.weak { stroke: #ff9f0a; stroke-width: 3; stroke-dasharray: 3 4; }
.pv-svg .pv-pkt.lost { fill: #ff453a; opacity: 0.7; }
@media (prefers-reduced-motion: reduce) { .pv-svg .pv-motor.spin { animation: none; } }

@media (max-width: 699px) { .canvas .pv-stage:has(.pv-wide) { overflow-x: auto; } .canvas .pv-svg.pv-wide { min-width: 640px; } }

/* Trademark notice at the foot of a page */
.canvas .sec.tm-note { padding: 20px 0; }
.canvas .tm-note p { max-width: none; color: var(--dim); font-size: 0.8125rem; line-height: 1.5; }

/* Pop-up form (dialog), e.g. the NoxTLS license enquiry */
.ax-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 24px; background: #ffffff; color: #1d1d1f; box-shadow: 0 40px 80px -20px rgba(11, 31, 54, 0.45); overflow: auto; }
.ax-dialog::backdrop { background: rgba(5, 11, 20, 0.55); backdrop-filter: blur(4px); }
.ax-dialog[open] { animation: ax-dialog-in 260ms var(--ease-out); }
@keyframes ax-dialog-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
.ax-dialog-card { position: relative; display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 4vw, 40px); }
.ax-dialog-card .h2 { font-size: 1.75rem; color: #102d4f; }
.ax-dialog-card .muted { color: #5f6d7f; }
.ax-dialog-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ax-dialog-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.ax-dialog-actions .btn-line { color: #102d4f; border-color: rgba(16, 45, 79, 0.25); }
.ax-dialog-x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #f1f3f6; color: #1d1d1f; font-size: 22px; line-height: 1; cursor: pointer; }
.ax-dialog-x:hover { background: #e4e8ee; }
@media (prefers-reduced-motion: reduce) { .ax-dialog[open] { animation: none; } }
.pv-svg .pv-route.on { stroke: #0a84ff; stroke-dasharray: none; stroke-width: 2.5; }
.pv-svg .pv-route.off { stroke: #ff453a; opacity: 0.5; }
.pv-svg .pv-check { fill: none; stroke: #0a84ff; stroke-width: 3; stroke-dasharray: 14 10; transition: opacity 200ms ease; }
.pv-svg .pv-check.bad { stroke: #ff9f0a; }
.pv-svg .pv-ok-dot { fill: #30d158; } .pv-svg .pv-bad-dot { fill: #ff453a; }
.pv-svg .pv-mark { fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pv-svg .pv-pkt-box { fill: url(#pv-live); }
.pv-svg .pv-lock { fill: none; stroke: #ffffff; stroke-width: 1.8; }
.pv-svg .pv-lock-body { fill: #ffffff; }
.pv-svg .pv-tagbg { fill: #ffffff; stroke: rgba(10, 132, 255, 0.3); }
.pv-svg .pv-lock.dark { stroke: #0066cc; stroke-width: 1.6; } .pv-svg .pv-lock-body.dark { fill: #0066cc; }
.pv-svg .pv-spy { fill: #1d1d1f; }
.pv-svg .pv-spy + text, .pv-svg .pv-spy ~ text { fill: #c7cdd6; }
.pv-svg .pv-mono.small { font-size: 12px; fill: #ffffff; }
.pv-svg .pv-shadow { fill: rgba(16, 45, 79, 0.12); filter: blur(3px); }
.pv-svg .pv-led-blue { fill: #0a84ff; filter: drop-shadow(0 0 3px rgba(10, 132, 255, 0.8)); }
.pv-svg .pv-led-dim { fill: #b9c2cd; }

/* About: team portraits (small originals from the old site, shown round) and the story photo */
.canvas .team-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #00aff0, 0 10px 24px -10px rgba(11, 31, 54, 0.35); }
.canvas .about-photo { max-width: 460px; margin-top: 8px; border-radius: 18px; }
/* Team: four across when there is room, otherwise two by two (never three and one), one column on phones. */
.canvas .grid.team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1080px) { .canvas .grid.team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 559px) { .canvas .grid.team-grid { grid-template-columns: minmax(0, 1fr); } }

/* Supported-OS logo (Zephyr): a light-background and a dark-background version, swapped by theme. */
.os-logo { display: inline-flex; align-items: center; }
.os-logo img { width: auto; height: 54px; }
.os-logo .ol-dark { display: none; }
[data-theme="dark"] .os-logo .ol-light { display: none; }
[data-theme="dark"] .os-logo .ol-dark { display: inline; }
.canvas .row dd.dd-logo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.works-with { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--muted); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.card .os-logo { margin-top: 10px; }

/* Icons on the contact form's help options (single and stepped forms). */
.chk-ico { display: inline-grid; place-items: center; width: 18px; height: 18px; color: #00aff0; flex: none; }
.chk-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Blog sidebar (template-parts/blog-sidebar.php): on posts beside the article, on the blog index beside the grid. */
.post-layout { width: 100%; max-width: calc(1120px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: start; }
.post-layout .article { max-width: none; margin: 0; padding: 0 0 calc(var(--section) * 0.7); }
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
.blog-layout .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blog-aside { display: flex; flex-direction: column; gap: 28px; padding-top: clamp(40px, 5vw, 64px); }
.blog-layout .blog-aside { padding-top: 36px; }
.blog-aside h2 { margin: 0 0 12px; color: var(--text); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.ba-card { padding: 20px; border-radius: 16px; background: var(--surface-2, #f4f6f9); box-shadow: inset 0 0 0 1px var(--border, #e5e5ea); }
.ba-card p { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.ba-sub-form { margin-top: 14px; }
.ba-sub-row { display: flex; gap: 8px; }
.ba-sub-row input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--border-2); border-radius: 10px; background: var(--bg, #fff); color: var(--text); font: inherit; font-size: 0.9375rem; }
.ba-sub-row input:focus { outline: none; border-color: #00aff0; box-shadow: 0 0 0 4px rgba(0, 175, 240, 0.14); }
.ba-sub-row button { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 10px; background: #102d4f; color: #fff; cursor: pointer; transition: background-color 160ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.ba-sub-row button svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .ba-sub-row button:hover { background: #0a84ff; } }
.ba-sub-row button:active { transform: scale(0.96); }
.ba-sub-row button[disabled] { opacity: 0.6; cursor: default; }
.ba-sub-msg { min-height: 0; margin-top: 8px !important; font-size: 0.8125rem !important; }
.ba-sub-msg.ok { color: #1f8a5b !important; }
.ba-sub-msg.err { color: #c03a3a !important; }
.ba-social { display: flex; gap: 8px; }
.ba-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--text); box-shadow: inset 0 0 0 1px var(--border-2); transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; }
.ba-social svg { width: 17px; height: 17px; fill: currentColor; }
@media (hover: hover) and (pointer: fine) { .ba-social a:hover { color: #fff; background: #102d4f; box-shadow: none; } }
.ba-latest { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ba-latest a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.ba-thumb { display: block; width: 64px; height: 48px; overflow: hidden; border-radius: 8px; background: linear-gradient(135deg, #0d4a86, #102d4f); }
.ba-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ba-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ba-text time { color: var(--muted); font-size: 0.75rem; }
.ba-title { color: var(--text); font-size: 0.875rem; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .ba-latest a:hover .ba-title { color: #0a84ff; } }
.ba-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ba-tags a { display: inline-flex; padding: 5px 11px; border-radius: 999px; color: var(--text); font-size: 0.8125rem; text-decoration: none; box-shadow: inset 0 0 0 1px var(--border-2); transition: box-shadow 160ms ease, color 160ms ease; }
.ba-tags a[aria-current="page"] { color: #fff; background: #102d4f; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .ba-tags a:hover { box-shadow: inset 0 0 0 1px #00aff0; color: #0a84ff; } }
.ba-cta { display: flex; flex-direction: column; gap: 10px; background: linear-gradient(160deg, #0b213c, #050b14); box-shadow: none; }
.ba-cta .ba-kick { color: #5ac8ff; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.ba-cta h2 { margin: 0; color: #fff; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; text-transform: none; line-height: 1.3; }
.ba-cta p { color: #c9d4df; font-size: 0.875rem; }
.ba-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 6px; }
.ba-cta .btn { min-height: 40px; padding: 0 16px; font-size: 0.875rem; }
.ba-link { color: #9fdcff; font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.ba-fact { padding-top: 12px; margin-top: 4px !important; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.8125rem !important; }
.ba-fact span { color: #fff; font-weight: 600; margin-right: 6px; }
@media (max-width: 1060px) {
	.post-layout, .blog-layout { grid-template-columns: 1fr; gap: 8px; }
	.blog-aside { padding-top: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px 32px; padding-bottom: 56px; }
	.blog-layout .blog-aside { padding-top: 40px; }
}
@media (max-width: 720px) { .blog-layout .post-grid { grid-template-columns: 1fr; } }

/* Closing band: optional second link and a fact line (used on blog pages). */
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; margin-top: 12px; }
.cta-card .cta-actions .btn { margin-top: 0; }
.cta-link { color: #9fdcff; font-weight: 600; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .cta-link:hover { color: #fff; } }
.cta-fact { margin-top: 20px; color: #9fb3c8; font-size: 0.875rem; }
.cta-fact span { color: #fff; font-weight: 600; margin-right: 6px; }

/* Plain closing card (blog pages): the same dark card, on the page background with no band or starfield. */
.cta.cta-plain { padding: 0 0 clamp(64px, 8vw, 104px); background: none; }
.cta-plain .cta-card { background: linear-gradient(160deg, #0b213c, #050b14); border-color: rgba(255, 255, 255, 0.1); color: #fff; box-shadow: 0 40px 80px -48px rgba(5, 11, 20, 0.6); }
.cta-plain .cta-card h2 { color: #fff; }
.cta-plain .cta-card p:not(.kicker) { color: #c9d4df; }

/* Post header: premium and specific to each post. The featured image, blurred and colour-graded, glows behind
   the title; without an image, a soft aurora of brand blues. Film grain and a hairline of light on top. */
.page-hero--post { background: #050b14; }
.page-hero--post:not(.has-ambient) { background:
	radial-gradient(55% 80% at 82% 0%, rgba(10, 132, 255, 0.34), transparent 62%),
	radial-gradient(38% 60% at 100% 85%, rgba(0, 194, 255, 0.22), transparent 62%),
	radial-gradient(60% 90% at 0% 100%, rgba(16, 45, 79, 0.95), transparent 70%),
	linear-gradient(160deg, #081a30, #050b14 60%); }
.ph-ambient { position: absolute; inset: -12%; z-index: -2; overflow: hidden; }
.ph-ambient img { width: 100%; height: 100%; object-fit: cover; filter: blur(56px) saturate(1.6) brightness(0.95); transform: scale(1.15); }
.page-hero--post .page-hero-glow { background:
	linear-gradient(90deg, rgba(5, 11, 20, 0.88) 0%, rgba(5, 11, 20, 0.55) 45%, rgba(5, 11, 20, 0.06) 100%),
	linear-gradient(0deg, rgba(5, 11, 20, 0.7) 0%, rgba(5, 11, 20, 0) 40%); }
.page-hero--post .page-hero-glow::after { opacity: 0.45; }
.page-hero--post::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.09; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.page-hero--post::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 1; background: linear-gradient(90deg, transparent, rgba(90, 200, 255, 0.55) 30%, rgba(10, 132, 255, 0.55) 70%, transparent); }
.page-hero--post .kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #bfe7ff; font-size: 0.75rem; letter-spacing: 0.16em; }
.page-hero--post .kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, #0a84ff, #00c2ff); box-shadow: 0 0 10px rgba(0, 194, 255, 0.8); }
.page-hero--post h1 { text-shadow: 0 2px 30px rgba(5, 11, 20, 0.45); }
.page-hero--post .page-meta { color: rgba(220, 232, 243, 0.82); }
@media (prefers-reduced-transparency: reduce) { .page-hero--post .kicker { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, 0.12); } }

/* Logged-in visitors (editors reviewing the site): keep the fixed header below the WordPress admin bar. */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } } /* the admin bar scrolls away on small phones */

/* Problem illustrations: a comfortable size on wide screens instead of the full content width. */
.canvas .pv { max-width: 940px; margin-inline: auto; width: 100%; }

/* "How it works" step cards: lift and highlight on hover. */
.canvas .role-how-it-works .card { transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 260ms ease, border-color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
	.canvas .role-how-it-works .card:hover { transform: translateY(-6px); border-color: rgba(0, 175, 240, 0.55); box-shadow: 0 0 0 1px rgba(0, 175, 240, 0.35), 0 24px 48px -28px rgba(0, 60, 120, 0.45); }
	.canvas .role-how-it-works .card:hover .big { color: #0a84ff; }
}
.canvas .role-how-it-works .card .big { transition: color 200ms ease; }

/* Closing bands (canvas pages and the template band): the starfield stays, set in a premium frame:
   deep navy with soft blue and cyan light, a light hairline at the top, fine film grain, and a vignette. */
.canvas .closing.island, .cta.island { background:
	radial-gradient(45% 70% at 88% 12%, rgba(10, 132, 255, 0.32), transparent 65%),
	radial-gradient(40% 60% at 6% 100%, rgba(0, 194, 255, 0.2), transparent 65%),
	radial-gradient(70% 90% at 50% 120%, rgba(16, 45, 79, 0.9), transparent 70%),
	linear-gradient(165deg, #0a1b31 0%, #060d18 55%, #04080f 100%); }
.canvas .closing.island::before, .cta.island::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.canvas .closing.island::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(90, 200, 255, 0.5) 30%, rgba(10, 132, 255, 0.5) 70%, transparent); }
.canvas .closing.island .cta-canvas { opacity: 0.65; mix-blend-mode: screen; }
.canvas .closing.island .h2 { background: linear-gradient(180deg, #ffffff 30%, #bfe3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta.island::after { background: radial-gradient(60% 70% at 50% 50%, transparent 35%, rgba(4, 8, 15, 0.85) 90%); }
.cta.island .cta-card { background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02)); border-color: rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 40px 80px -40px rgba(0, 0, 0, 0.7); }

/* Home "faster and better": copy and a photo side by side. */
.canvas .faster-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.canvas .faster-photo { aspect-ratio: 4 / 3; border-radius: 20px; }
@media (max-width: 900px) { .canvas .faster-top { grid-template-columns: 1fr; } }

/* Home stack diagram: each layer has its own colour, from the hardware (navy) up to the AI (indigo) and the cloud. */
.canvas .stk { --c: 10, 132, 255; position: relative; overflow: hidden; border-color: rgba(var(--c), 0.28); background: linear-gradient(120deg, rgba(var(--c), 0.13), rgba(var(--c), 0.03) 60%), var(--bg); }
.canvas .stk::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: rgb(var(--c)); }
.canvas .stk h3 { color: rgb(var(--c)); }
.canvas .stk-ai { --c: 94, 92, 230; }
.canvas .stk-sec { --c: 10, 132, 255; }
.canvas .stk-net { --c: 0, 160, 220; }
.canvas .stk-os { --c: 22, 70, 130; }
.canvas .stk-cloud { --c: 0, 175, 240; background: linear-gradient(160deg, rgba(10, 132, 255, 0.16), rgba(0, 194, 255, 0.06) 70%), var(--bg); }
@media (hover: hover) and (pointer: fine) { .canvas .stk:hover { border-color: rgba(var(--c), 0.6); box-shadow: 0 18px 40px -26px rgba(var(--c), 0.7); } }
.canvas .stk-tile { border-radius: 12px; }
.canvas .stk-app { background: repeating-linear-gradient(135deg, rgba(16, 45, 79, 0.04) 0 10px, transparent 10px 20px), var(--bg); border: 1.5px dashed rgba(16, 45, 79, 0.25); }
.canvas .stk-hw { background: linear-gradient(135deg, #1a3d66, #102d4f 70%); border: 0; }
.canvas .stk-hw strong { color: #ffffff; }
[data-theme="dark"] .canvas .stk h3 { filter: brightness(1.4); }

/* Home "From the Data to the Cloud": data leaves the device, crosses an encrypted link and reaches the cloud. */
.canvas .d2c { margin: 8px 0 0; max-width: 520px; }
.d2c svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font); }
.d2c-path { fill: none; stroke: url(#d2c-line); stroke-width: 2.5; stroke-dasharray: 2 8; stroke-linecap: round; animation: d2c-dash 1.6s linear infinite; }
@keyframes d2c-dash { to { stroke-dashoffset: -20; } }
.d2c-node rect { fill: #ffffff; stroke: rgba(16, 45, 79, 0.12); filter: drop-shadow(0 14px 22px rgba(0, 60, 120, 0.14)); }
.d2c-cloud rect { fill: url(#d2c-line); stroke: none; }
.d2c-cloud .d2c-ico { stroke: #ffffff; }
.d2c-ico { fill: none; stroke: #0a84ff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.d2c-wave rect { fill: #0a84ff; transform-box: fill-box; transform-origin: 50% 100%; animation: d2c-bar 1.4s ease-in-out infinite alternate; }
.d2c-wave rect:nth-child(2) { animation-delay: -0.3s; } .d2c-wave rect:nth-child(3) { animation-delay: -0.6s; fill: #00c2ff; } .d2c-wave rect:nth-child(4) { animation-delay: -0.9s; } .d2c-wave rect:nth-child(5) { animation-delay: -1.2s; fill: #00c2ff; }
@keyframes d2c-bar { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
.d2c-lock rect { fill: #102d4f; } .d2c-lock path { fill: none; stroke: #102d4f; stroke-width: 2.4; stroke-linecap: round; }
.d2c-pkt { fill: #e6f8ff; filter: drop-shadow(0 0 6px rgba(0, 194, 255, 0.95)); offset-path: path("M92 104 C150 40, 210 40, 260 104 S370 168, 428 104"); offset-rotate: 0deg; animation: d2c-go 2.4s cubic-bezier(0.45, 0, 0.25, 1) infinite; opacity: 0; }
.d2c-pkt:nth-of-type(2) { animation-delay: 0.8s; } .d2c-pkt:nth-of-type(3) { animation-delay: 1.6s; }
@keyframes d2c-go { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.d2c text { fill: var(--muted); font-size: 13px; font-weight: 600; text-anchor: middle; letter-spacing: 0.02em; }
@media (prefers-reduced-motion: reduce) { .d2c-path, .d2c-wave rect, .d2c-pkt { animation: none; } .d2c-pkt { opacity: 0; } }

/* Wireless Product Design: the path from start to launch (#2393) */
.journey { display: flex; flex-direction: column; gap: 4px; }
.journey-map { margin: 0; }
.journey-map svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font); }
.jm-path { fill: none; stroke: url(#jm-line); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 0.1 11; animation: jm-march 1.4s linear infinite; }
@keyframes jm-march { to { stroke-dashoffset: -11.1; } }
.jm-draw { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.js .journey-map .jm-draw { stroke-dashoffset: 1; }
.js .journey-map.in .jm-draw { animation: jm-draw 2.2s var(--ease-in-out) forwards; }
@keyframes jm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.jm-start circle { fill: var(--surface); stroke: #0a84ff; stroke-width: 3; }
.jm-start .jm-core { fill: #0a84ff; stroke: none; }
.jm-start text, .jm-end text { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; fill: var(--muted); }
.jm-stop circle { fill: var(--surface); stroke: var(--c); stroke-width: 3; filter: drop-shadow(0 6px 10px rgba(0, 60, 120, 0.14)); }
.jm-stop text { font-size: 14px; font-weight: 700; fill: var(--c); }
.jm-end path { fill: none; stroke: #e5484d; stroke-width: 5; stroke-linecap: round; }
.jm-end text { fill: #e5484d; }
.jm-halo { fill: rgba(229, 72, 77, 0.12); transform-box: fill-box; transform-origin: center; animation: jm-halo 2.4s var(--ease-out) infinite; }
@keyframes jm-halo { 0% { transform: scale(0.7); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.jm-stop, .jm-end, .jm-start { transform-box: fill-box; transform-origin: center; }
.js .journey-map .jm-stop, .js .journey-map .jm-end { opacity: 0; transform: scale(0.4); }
.js .journey-map.in .jm-stop { animation: jm-pop 0.5s var(--ease-out) var(--d) forwards; }
.js .journey-map.in .jm-end { animation: jm-pop 0.6s var(--ease-out) 2s forwards; }
@keyframes jm-pop { to { opacity: 1; transform: none; } }
.journey-cards { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.canvas .journey-card { box-shadow: inset 0 3px 0 var(--c); }
.canvas .journey-card .kick { display: flex; align-items: center; gap: 8px; color: var(--c); }
.jn { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0; }
@media (max-width: 900px) {
	.journey-map { display: none; }
	.journey-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) { .journey-cards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
	.jm-path, .jm-halo { animation: none; }
	.js .journey-map .jm-draw { stroke-dashoffset: 0; animation: none; }
	.js .journey-map .jm-stop, .js .journey-map .jm-end { opacity: 1; transform: none; animation: none; }
}

/* Radio tiles with icons (#2394) */
.radios { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.radio { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); transition: border-color 160ms ease, transform 200ms var(--ease-out), box-shadow 200ms ease; }
.radio .rb { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c); }
.radio .rb svg { width: 21px; height: 21px; stroke-width: 2; }
.radio b { display: block; color: var(--text); font-size: 0.9375rem; font-weight: 600; line-height: 1.25; }
.radio small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.8125rem; line-height: 1.3; }
@media (hover: hover) and (pointer: fine) {
	.radio:hover { border-color: color-mix(in srgb, var(--c) 45%, transparent); transform: translateY(-2px); box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--c) 70%, transparent); }
}
.canvas .radios li.radio { position: static; margin: 0; padding: 12px 14px; }
.canvas .radios li.radio::before { content: none; }

/* Edge AI: person detection example (#2382). Placeholders: .ph values and the scene in .detect-frame. */
.detect-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px 64px; align-items: center; }
.detect-copy { display: flex; flex-direction: column; gap: var(--sp-3); }
.canvas .detect-copy .kick { color: var(--cyan-ink); }
.detect-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0 0; }
.detect-stats div { padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.detect-stats dt { color: var(--muted); font-size: 0.8125rem; }
.detect-stats dd { margin: 4px 0 0; color: var(--text); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.ph { outline: 1px dashed color-mix(in srgb, var(--cyan) 55%, transparent); outline-offset: 3px; border-radius: 4px; }
.detect { margin: 0; }
.detect-frame { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #1c2126; box-shadow: 0 30px 60px -30px rgba(5, 20, 40, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.detect-scene, .detect-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.detect-scan { position: absolute; left: 0; right: 0; top: 0; height: 30%; background: linear-gradient(to bottom, transparent, rgba(0, 194, 255, 0.16) 85%, rgba(0, 194, 255, 0.7)); animation: dt-scan 3.6s cubic-bezier(0.77, 0, 0.175, 1) infinite; }
@keyframes dt-scan { 0% { transform: translateY(-100%); opacity: 1; } 45% { transform: translateY(340%); opacity: 1; } 55%, 100% { transform: translateY(340%); opacity: 0; } }
.detect-box { position: absolute; left: var(--bx, 38%); top: var(--by, 18%); width: var(--bw, 24%); height: var(--bh, 70%); border: 2px solid #00e0a4; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 24px rgba(0, 224, 164, 0.35); animation: dt-box 3.6s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
.detect-box span { position: absolute; left: -2px; bottom: 100%; margin-bottom: 6px; padding: 3px 8px; border-radius: 6px; background: #00e0a4; color: #04241b; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
@keyframes dt-box { 0%, 40% { opacity: 0; transform: scale(1.18); } 52% { opacity: 1; transform: none; } 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
.detect-hud { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; justify-content: space-between; gap: 8px; color: #e6f2fb; font: 600 0.75rem/1 ui-monospace, "SF Mono", Menlo, monospace; }
.detect-hud span { padding: 6px 9px; border-radius: 8px; background: rgba(5, 12, 22, 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.detect-hud i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #00e0a4; box-shadow: 0 0 0 3px rgba(0, 224, 164, 0.25); }
.detect figcaption { margin-top: 10px; color: var(--muted); font-size: 0.8125rem; }
@media (max-width: 900px) { .detect-wrap { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .detect-stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .detect-stats dd { font-size: 1.125rem; } }
@media (prefers-reduced-motion: reduce) { .detect-scan { display: none; } .detect-box { animation: none; } }
.canvas .wrap.detect-wrap { display: grid; }
.canvas dl.detect-stats { flex: none; }

/* Edge AI: a vibration trace over the machinery photo (#2388); WPD final design photo (#2396). */
.canvas .vib-frame { position: relative; }
.canvas .vib-frame .vib { position: absolute; left: 0; right: 0; bottom: 12%; width: 100%; height: 26%; fill: none; stroke: #00e0ff; stroke-width: 1.6; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(0, 224, 255, 0.8)); stroke-dasharray: 420; stroke-dashoffset: 420; animation: vib-run 2.6s linear infinite; }
@keyframes vib-run { to { stroke-dashoffset: -420; } }
.canvas .final-design { aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .canvas .vib-frame .vib { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; } }

/* Home HLC slide: earbuds, headphones, soundbars, speakers and hearing aids take turns on the disc (#2447). */
.hs-prods { position: relative; z-index: 2; width: calc(var(--R) * 1.84); height: calc(var(--R) * 1.84); animation: hs-bob 7s var(--ease-in-out) infinite alternate; }
.hs-prod { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; opacity: 0; animation: hs-prod 15s var(--ease-in-out) infinite; animation-delay: calc(var(--k) * 3s); }
@keyframes hs-prod { 0% { opacity: 0; transform: scale(0.92); } 4%, 18% { opacity: 1; transform: none; } 23%, 100% { opacity: 0; transform: scale(1.04); } }
.hs-art .hs-prod img { animation: none; filter: none; }
.hs-art .hs-prod.cut img { width: calc(var(--R) * 1.5); height: auto; filter: drop-shadow(0 28px 34px rgba(0, 0, 0, 0.5)); }
.hs-art .hs-prod.bar img { width: calc(var(--R) * 2.3); max-width: none; }
.hs-art .hs-prod.photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; -webkit-mask-image: radial-gradient(circle, #000 52%, transparent 71%); mask-image: radial-gradient(circle, #000 52%, transparent 71%); }
.hs-prod figcaption { position: absolute; left: 50%; bottom: calc(var(--R) * -0.42); transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgba(5, 12, 24, 0.55); border: 1px solid rgba(255, 255, 255, 0.18); color: #e8f4ff; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (prefers-reduced-motion: reduce) { .hs-prods { animation: none; } .hs-prod { animation: none; } .hs-prod[style*="--k: 0"] { opacity: 1; } }

/* Bluetooth and BLE Design hero (#2446): a BlueNox hub with phone, earbuds, watch, sensor and speaker; packets travel both ways on every link. */
.blenet { position: absolute; z-index: 1; right: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); top: calc(50% + var(--header-h) / 2); width: min(520px, 40vw); aspect-ratio: 520 / 420; transform: translateY(-50%); pointer-events: none; }
.blenet .bn-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bn-link { fill: none; stroke: rgba(90, 200, 255, 0.45); stroke-width: 1.4; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; animation: bn-flow 2.4s linear infinite; }
@keyframes bn-flow { to { stroke-dashoffset: -18; } }
.bn-pkt { fill: #e6f8ff; filter: drop-shadow(0 0 6px rgba(0, 194, 255, 0.95)); }
.bn-pkt-in { fill: #7dffcf; filter: drop-shadow(0 0 6px rgba(0, 224, 164, 0.9)); }
.bn-dev, .bn-hub { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translate(-50%, -50%); color: #fff; }
.bn-dev i, .bn-hub i { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: rgba(10, 20, 36, 0.62); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 16px 32px -12px rgba(0, 0, 0, 0.6); animation: bn-float 5s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.bn-dev svg { width: 24px; height: 24px; stroke: #9fdcff; stroke-width: 1.8; }
.bn-dev b, .bn-hub b { font-size: 0.75rem; font-weight: 600; color: #cfe3f5; letter-spacing: 0.01em; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
@keyframes bn-float { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
.bn-hub i { width: 76px; height: 76px; border-radius: 22px; background: linear-gradient(135deg, #0a84ff, #00c2ff); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 40px rgba(0, 194, 255, 0.55); animation: none; }
.bn-hub svg { width: 34px; height: 34px; stroke: #fff; stroke-width: 2; }
.bn-ring { position: absolute; left: 50%; top: 38px; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 24px; border: 1.5px solid rgba(90, 200, 255, 0.7); animation: bn-ring 2.6s ease-out infinite; }
.bn-ring-b { animation-delay: 1.3s; }
@keyframes bn-ring { from { transform: scale(1); opacity: 0.9; } to { transform: scale(2.1); opacity: 0; } }
.bn-lab { position: absolute; transform: translate(-50%, -50%); padding: 3px 8px; border-radius: 999px; background: rgba(5, 12, 24, 0.6); border: 1px solid rgba(90, 200, 255, 0.28); color: #9fdcff; font: 600 0.6875rem/1.2 ui-monospace, "SF Mono", Menlo, monospace; white-space: nowrap; }
@media (max-width: 1100px) { .blenet { display: none; } }
@media (prefers-reduced-motion: reduce) { .bn-link, .bn-dev i, .bn-ring { animation: none; } .bn-pkt { display: none; } }
.blenet { width: min(600px, 44vw); }
.blenet::before { content: ""; position: absolute; inset: -12% -10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(3, 9, 20, 0.72), rgba(3, 9, 20, 0.35) 60%, transparent); }
.bn-link { stroke: rgba(110, 210, 255, 0.8); stroke-width: 1.8; stroke-dasharray: 4 5; }
.bn-pkt { r: 4.5; }
.bn-lab { background: rgba(5, 12, 24, 0.82); }

/* Home HLC slide (#2448): an array of the devices HLC runs in, side by side (replaces the disc and the rotating product). */
.hs-art.hs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); grid-template-areas: "hp hp eb" "hp hp ha" "sb sb sp"; gap: 12px; place-items: stretch; min-height: 0; aspect-ratio: 1.12; max-width: 560px; }
.hg { position: relative; margin: 0; overflow: hidden; border-radius: 18px; background: radial-gradient(120% 90% at 50% 30%, #13284a, #070f1d 75%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 20px 40px -24px rgba(0, 0, 0, 0.7); transition: transform 400ms var(--ease-out), box-shadow 400ms ease; }
.hg-hp { grid-area: hp; } .hg-eb { grid-area: eb; } .hg-ha { grid-area: ha; } .hg-sb { grid-area: sb; } .hg-sp { grid-area: sp; }
.hs-art .hg img { position: absolute; inset: 0; width: 100%; height: 100%; animation: none; filter: none; }
.hs-art .hg.photo img { object-fit: cover; }
.hs-art .hg.cut img { object-fit: contain; padding: 14%; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.55)); }
.hs-art .hg-sb.cut img { padding: 8% 7% 22%; }
.hg figcaption { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(5, 12, 24, 0.62); border: 1px solid rgba(255, 255, 255, 0.16); color: #e8f4ff; font-size: 0.75rem; font-weight: 600; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (hover: hover) and (pointer: fine) { .hg:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(90, 200, 255, 0.45), 0 26px 50px -24px rgba(0, 120, 255, 0.55); } }
.hs-art.hs-grid .hs-tag { right: -6px; top: -14px; }
@media (max-width: 900px) { .hs-art.hs-grid { max-width: 440px; width: 100%; gap: 8px; } .hg figcaption { font-size: 0.6875rem; left: 6px; bottom: 6px; } }
.hg figcaption { z-index: 3; }