/* ==========================================================================
   Klaxon — neo-brutalist studio theme, dark-glass edition
   A near-black canvas, frosted glass panels, and neon accent glow — layered
   over the same bold kinetic typography, drag-physics sticker board, and
   real-time ink shader as before. Every "modern" CSS/JS feature here is
   progressively enhanced: remove support and the page still reads correctly,
   just a little quieter.
   ========================================================================== */

/* ── Design tokens ───────────────────────────────────────────────────── */
@property --klx-ang {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}
@property --klx-fill {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 0%;
}

:root {
	/* Dark canvas + glass surfaces */
	--bg: oklch(16% 0.02 264);
	--bg-soft: oklch(21% 0.022 264);
	--bg-deep: oklch(10% 0.014 264);
	--surface: oklch(28% 0.025 264 / 0.5);
	--surface-solid: oklch(22% 0.02 264);
	--line: oklch(82% 0.02 264 / 0.65);
	--line-dim: oklch(45% 0.02 264 / 0.5);
	--line-strong: oklch(97% 0.01 90 / 0.95);

	/* Text on dark */
	--text: oklch(96% 0.015 90);
	--text-soft: oklch(80% 0.02 90);
	--text-dim: oklch(62% 0.02 264);

	/* Neon accents — same brand hues, tuned to glow on black */
	--acid: oklch(90% 0.23 126);
	--acid-glow: oklch(90% 0.23 126 / 0.55);
	--coral: oklch(70% 0.21 22);
	--coral-glow: oklch(70% 0.21 22 / 0.55);
	--blue: oklch(62% 0.19 262);
	--blue-glow: oklch(62% 0.19 262 / 0.55);

	--blur: 18px;
	--lw: 2px;
	--lw-hair: 1.25px;
	--radius: 18px;
	--radius-sm: 10px;
	--ease: cubic-bezier(.16,1,.3,1);
	--ease-bounce: cubic-bezier(.34,1.56,.64,1);
	--display: 'Unbounded', system-ui, sans-serif;
	--body-f: 'Space Grotesk', system-ui, sans-serif;
	--mono: 'Space Mono', ui-monospace, SFMono-Regular, monospace;
	--maxw: 1280px;
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
img, picture { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--body-f);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

/* Subtle grain — fixed, cheap (single blended layer, no JS). Overlay blend
   reads on both the dark canvas and the bright glass panels/glows. */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 500;
	pointer-events: none;
	opacity: .05;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 {
	font-family: var(--display);
	font-weight: 900;
	line-height: .96;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	text-wrap: balance;
	color: var(--text);
}
p { text-wrap: pretty; }

.container { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); }

.eyebrow {
	font-family: var(--mono);
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: .5em;
	color: var(--text-soft);
}
.eyebrow::before { content: ''; width: .6em; height: .6em; background: var(--coral); border-radius: 50%; display: inline-block; box-shadow: 0 0 8px var(--coral-glow); }

/* ── Glass panel utility (class name kept as .stamp from the brutalist v0.1/
   v0.2 build so no template markup needed to change) — frosted translucent
   surface, soft ambient shadow, and a neon glow that steps in on hover/focus.
   Falls back to a plain opaque panel where backdrop-filter isn't supported. ── */
.stamp {
	border: var(--lw) solid var(--line);
	background: var(--surface-solid);
	border-radius: var(--radius);
	/* Beveled "glass catching light" edge: a bright inset highlight along the
	   top, a faint dark inset along the bottom, plus the ambient drop shadow —
	   reads as a real lit edge rather than a flat outline. */
	box-shadow:
		0 12px 30px rgba(0,0,0,.45),
		inset 0 1px 0 rgba(255,255,255,.35),
		inset 0 -1px 0 rgba(0,0,0,.35);
	transition: box-shadow .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.stamp {
		background: var(--surface);
		backdrop-filter: blur(var(--blur));
		-webkit-backdrop-filter: blur(var(--blur));
	}
}
.stamp:hover, .stamp:focus-visible {
	border-color: var(--acid);
	box-shadow:
		0 12px 30px rgba(0,0,0,.45),
		0 0 36px var(--acid-glow),
		inset 0 1px 0 rgba(255,255,255,.4),
		inset 0 -1px 0 rgba(0,0,0,.35);
	transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) { .stamp { transition: none; } }

/* ── Buttons — glass pill with a neon outline/glow ──────────────────────── */
.btn {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: 1em 1.7em;
	font-family: var(--mono);
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .02em;
	text-transform: uppercase;
	border: var(--lw) solid var(--line);
	border-radius: 999px;
	background: var(--surface-solid);
	color: var(--text);
	cursor: pointer;
	white-space: nowrap;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.3);
	transition: box-shadow .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease), color .25s var(--ease);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.btn { background: var(--surface); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); }
}
.btn--acid { border-color: var(--acid); color: var(--acid); box-shadow: 0 0 22px var(--acid-glow), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.3); }
.btn--coral { border-color: var(--coral); color: var(--coral); box-shadow: 0 0 22px var(--coral-glow), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.3); }
.btn--ghost { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }
.btn--acid:hover { box-shadow: 0 0 34px var(--acid-glow), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.3); }
.btn--coral:hover { box-shadow: 0 0 34px var(--coral-glow), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.3); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* ── Header — glass sticky bar ───────────────────────────────────────────── */
.site-head {
	position: sticky;
	top: 0;
	z-index: 300;
	background: var(--surface-solid);
	border-bottom: var(--lw) solid var(--line);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.site-head { background: var(--surface); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); }
}
.site-head__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 16px;
}
.brand {
	font-family: var(--display);
	font-weight: 900;
	font-size: 1.5rem;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: .5em;
	color: var(--text);
}
.brand__mark {
	width: 34px; height: 34px;
	display: inline-block;
	filter: drop-shadow(0 0 6px var(--acid-glow));
}
.nav__list { display: flex; gap: 28px; align-items: center; }
.nav__list a {
	font-family: var(--mono);
	font-weight: 700;
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	position: relative;
	padding-bottom: 3px;
	color: var(--text-soft);
	transition: color .2s var(--ease);
}
.nav__list a::after {
	content: '';
	position: absolute; left: 0; right: 100%; bottom: 0;
	height: 2px; background: var(--acid);
	box-shadow: 0 0 8px var(--acid-glow);
	transition: right .25s var(--ease);
}
.nav__list a:hover, .nav__list a:focus-visible { color: var(--text); }
.nav__list a:hover::after, .nav__list a:focus-visible::after { right: 0; }
.nav-desktop { display: contents; }
.burger {
	display: none;
	border: var(--lw) solid var(--line);
	background: var(--surface-solid);
	border-radius: var(--radius-sm);
	width: 46px; height: 46px;
	align-items: center; justify-content: center;
	cursor: pointer;
	color: var(--text);
}
.burger svg { width: 20px; height: 20px; }

/* Mobile menu — native <popover>. Zero JS for open/close/light-dismiss. */
#klx-mobile-menu {
	border: var(--lw) solid var(--line);
	border-radius: var(--radius) 0 0 var(--radius);
	margin: 0; padding: 24px;
	background: var(--surface-solid);
	width: min(88vw, 380px);
	inset: 0 0 auto auto;
	position: fixed;
	top: 0; right: 0; left: auto;
	height: 100vh;
	max-height: none;
	box-shadow: -16px 0 48px rgba(0,0,0,.5), 0 0 60px var(--acid-glow), inset 1px 0 0 rgba(255,255,255,.3);
	opacity: 0;
	transform: translateX(24px);
	transition: opacity .28s var(--ease), transform .28s var(--ease), overlay .28s allow-discrete, display .28s allow-discrete;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	#klx-mobile-menu { background: var(--surface); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
}
#klx-mobile-menu:popover-open {
	opacity: 1;
	transform: translateX(0);
}
@starting-style {
	#klx-mobile-menu:popover-open { opacity: 0; transform: translateX(24px); }
}
#klx-mobile-menu::backdrop {
	background: rgb(0 0 0 / .5);
}
.mmenu__close {
	border: var(--lw) solid var(--line);
	background: var(--surface-solid);
	border-radius: var(--radius-sm);
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	margin-left: auto;
	cursor: pointer;
	color: var(--text);
}
.mmenu__list { margin-top: 40px; display: flex; flex-direction: column; gap: 4px; }
.mmenu__list a {
	font-family: var(--display);
	font-weight: 900;
	font-size: 1.6rem;
	text-transform: uppercase;
	padding-block: 10px;
	border-bottom: var(--lw-hair) solid var(--line);
	color: var(--text);
}
@media (prefers-reduced-motion: reduce) {
	#klx-mobile-menu { transition: none; }
}

@media (max-width: 900px) {
	.nav-desktop { display: none; }
	.burger { display: flex; }
}

/* ── Marquee ──────────────────────────────────────────────────────────── */
.marquee {
	border-block: var(--lw) solid var(--line);
	background: var(--bg-deep);
	color: var(--text);
	overflow: hidden;
	white-space: nowrap;
	padding-block: 14px;
}
.marquee__track {
	display: inline-flex;
	gap: 40px;
	animation: klx-marquee 26s linear infinite;
	will-change: transform;
}
.marquee--rev .marquee__track { animation-direction: reverse; }
.marquee__item {
	font-family: var(--display);
	font-weight: 900;
	font-size: clamp(1.1rem, 2.4vw, 1.7rem);
	text-transform: uppercase;
	display: inline-flex; align-items: center; gap: 20px;
}
.marquee__item::after { content: '✷'; color: var(--acid); text-shadow: 0 0 10px var(--acid-glow); }
@keyframes klx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ── Klaxon blast — the theme's namesake effect: an alarm-horn shockwave
   fired from the exact click point when a visitor opens the contact dialog.
   Ring + flash live on their own fixed elements (never the transform on
   <body>/<html>, which would shift the containing block for every other
   fixed element on the page — the progress bar, the custom cursor, etc.).
   JS removes both nodes on animationend; CSS here is just the visual. */
.klx-blast-ring {
	position: fixed;
	top: 0; left: 0;
	width: 24px; height: 24px;
	margin: -12px 0 0 -12px;
	border-radius: 50%;
	border: 3px solid var(--klx-blast-color, var(--acid));
	box-shadow: 0 0 40px var(--klx-blast-glow, var(--acid-glow)), inset 0 0 30px var(--klx-blast-glow, var(--acid-glow));
	pointer-events: none;
	z-index: 900;
	transform: translate(var(--klx-blast-x, 0), var(--klx-blast-y, 0)) scale(1);
	animation: klx-blast-ring .65s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes klx-blast-ring {
	from { opacity: 1; transform: translate(var(--klx-blast-x, 0), var(--klx-blast-y, 0)) scale(1); }
	to   { opacity: 0; transform: translate(var(--klx-blast-x, 0), var(--klx-blast-y, 0)) scale(64); }
}
.klx-blast-flash {
	position: fixed; inset: 0;
	background: var(--klx-blast-color, var(--acid));
	opacity: 0;
	pointer-events: none;
	z-index: 899;
	animation: klx-blast-flash .5s ease-out forwards;
}
@keyframes klx-blast-flash {
	0% { opacity: 0; }
	14% { opacity: .16; }
	100% { opacity: 0; }
}
/* Kick pulse on the button that was actually clicked — a brightness/glow
   punch rather than a transform, so it never fights the magnetic-hover
   translate() already being written to this same element's inline style. */
@keyframes klx-blast-kick {
	0% { filter: brightness(1) saturate(1); }
	30% { filter: brightness(1.9) saturate(1.6); }
	100% { filter: brightness(1) saturate(1); }
}
.klx-kick { animation: klx-blast-kick .45s ease-out; }
@media (prefers-reduced-motion: reduce) {
	.klx-blast-ring, .klx-blast-flash { display: none; }
	.klx-kick { animation: none; }
}

/* ── Magnetic buttons — cursor pull is applied as an inline transform from
   JS (klaxon-fx.js); the spring-back transition is likewise set/cleared
   from JS so it never runs while the pointer is actively dragging the
   button around. Nothing to declare here but the easing is documented in
   the script for anyone tuning it. */

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero {
	position: relative;
	padding-block: clamp(48px, 9vw, 108px) clamp(64px, 10vw, 140px);
	border-bottom: var(--lw) solid var(--line);
	overflow: clip;
}
/* pointer-events:none so the empty space around the (often very tall,
   stacked-word) title doesn't sit above and swallow clicks meant for the
   sticker layer behind it — only the actual interactive CTA links opt back in. */
.hero__inner { position: relative; z-index: 3; pointer-events: none; }
.hero__eyebrow { margin-bottom: 22px; }
.hero__title {
	font-size: clamp(3rem, 10vw, 8rem);
	max-width: 16ch;
	color: var(--text);
	text-shadow: 0 0 40px rgba(0,0,0,.6);
}
.hero__title .ln { display: block; overflow: hidden; }
.hero__title .word {
	display: inline-block;
	transform: translateY(110%);
	transition: transform .7s var(--ease);
}
.hero__title.klx-in .word { transform: translateY(0); }
.hero__sub {
	margin-top: 28px;
	max-width: 46ch;
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	color: var(--text-soft);
	text-shadow: 0 0 20px rgba(0,0,0,.5);
}
.hero__cta { margin-top: 36px; display: flex; gap: 16px; flex-wrap: wrap; pointer-events: auto; }

/* Real-time WebGL ink-diffusion field — the signature centerpiece (klaxon-ink.js).
   Sits behind the sticker layer and the text; the dark page background shows
   through until it boots, and stands in if it never does. */
.klx-ink {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
}
.klx-ink canvas { display: block; width: 100%; height: 100%; }
.klx-ink__fallback {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: none;
}
.klx-ink.is-fallback canvas { display: none; }
.klx-ink.is-fallback .klx-ink__fallback { display: block; }

/* Sticker drag-physics playground — the signature toy. Absolute-positioned
   over the hero; each .sticker is draggable via Pointer Events + Matter.js
   (klaxon-stickers.js). */
.sticker-field {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}
.sticker {
	position: absolute;
	pointer-events: auto;
	touch-action: none;
	cursor: grab;
	user-select: none;
	will-change: transform;
	filter: drop-shadow(0 0 14px rgba(0,0,0,.55)) drop-shadow(0 4px 10px rgba(0,0,0,.5));
}
.sticker:active { cursor: grabbing; }
.sticker img, .sticker svg { display: block; width: 100%; height: 100%; }
.sticker--drag-hint {
	position: absolute;
	font-family: var(--mono);
	font-weight: 700;
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	background: var(--bg-deep);
	color: var(--acid);
	border: var(--lw-hair) solid var(--line);
	border-radius: var(--radius-sm);
	padding: 3px 8px;
	white-space: nowrap;
	opacity: 0;
	transition: opacity .2s;
	pointer-events: none;
}
.sticker:hover .sticker--drag-hint { opacity: 1; }
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
	.sticker--drag-hint { display: none; }
}

/* Rotating "stamp ring" badge — @property-driven conic-gradient spin. */
.spin-badge {
	--klx-ang: 0deg;
	width: 128px; height: 128px;
	border-radius: 50%;
	position: relative;
	display: grid; place-items: center;
	background: var(--surface-solid);
	border: var(--lw) solid var(--line);
	box-shadow: 0 0 30px var(--blue-glow), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.3);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.spin-badge { background: var(--surface); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); }
}
.spin-badge svg { animation: klx-spin 14s linear infinite; width: 100%; height: 100%; position: absolute; inset: 0; }
.spin-badge__core {
	position: relative; z-index: 2;
	font-family: var(--mono); font-weight: 700; font-size: .72rem;
	text-align: center; line-height: 1.3;
	color: var(--text);
}
@keyframes klx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin-badge svg { animation: none; } }

/* ── Sections generic ─────────────────────────────────────────────────── */
.section { padding-block: clamp(56px, 9vw, 120px); border-bottom: var(--lw) solid var(--line); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 48px; flex-wrap: wrap; }
.section-head h2 { font-size: clamp(2.2rem, 5.4vw, 4.2rem); }
.section-head p { max-width: 40ch; color: var(--text-soft); font-size: 1.05rem; }
.tag-no { font-family: var(--mono); font-weight: 700; color: var(--coral); text-shadow: 0 0 10px var(--coral-glow); }

/* ── Bento / services grid ────────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.cap-card {
	container-type: inline-size;
	container-name: cap;
	padding: 28px 24px;
	display: flex; flex-direction: column; gap: 14px;
	transition: filter .25s var(--ease), opacity .25s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.cap-card:nth-of-type(3n+1):hover, .cap-card:nth-of-type(3n+1):focus-visible { border-color: var(--acid); box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 36px var(--acid-glow); }
.cap-card:nth-of-type(3n+2):hover, .cap-card:nth-of-type(3n+2):focus-visible { border-color: var(--coral); box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 36px var(--coral-glow); }
.cap-card:nth-of-type(3n+3):hover, .cap-card:nth-of-type(3n+3):focus-visible { border-color: var(--blue); box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 36px var(--blue-glow); }
.cap-card__icon { width: 40px; height: 40px; }
.cap-card h3 { font-size: 1.35rem; }
.cap-card p { display: none; color: var(--text-soft); font-size: .95rem; }
/* Container query: once a card's own box is wide enough, show the description line. */
@container cap (min-width: 260px) {
	.cap-card p { display: block; }
}
/* :has() spotlight — hovering one card quiets its siblings, no JS. */
.bento:has(.cap-card:hover) .cap-card:not(:hover) { filter: grayscale(.6); opacity: .55; }

/* ── Stats band ───────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: var(--lw) solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.3); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.stats { background: var(--surface); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); }
}
.stat { padding: 32px 24px; text-align: center; border-right: var(--lw-hair) solid var(--line); }
.stat:last-child { border-right: none; }
.stat__num { font-family: var(--display); font-weight: 900; font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--coral); text-shadow: 0 0 24px var(--coral-glow); }
.stat__label { font-family: var(--mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; color: var(--text-soft); }

/* ── Work grid — CSS subgrid so title/tag/arrow rows align across cards ── */
.work-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.work-card {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	row-gap: 14px;
	text-decoration: none;
}
@supports not (grid-template-rows: subgrid) {
	.work-card { grid-template-rows: auto auto 1fr; }
}
.work-card__media {
	aspect-ratio: 4/3;
	overflow: hidden;
	border: var(--lw) solid var(--line);
	border-radius: var(--radius);
	position: relative;
	box-shadow: 0 10px 30px rgba(0,0,0,.4);
	transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.work-card:hover .work-card__media { border-color: var(--blue); box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 40px var(--blue-glow); }
.work-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.work-card:hover .work-card__media img { transform: scale(1.06) rotate(-1deg); }
.work-card__title { font-family: var(--display); font-weight: 900; font-size: 1.5rem; text-transform: uppercase; color: var(--text); }
.work-card__meta { font-family: var(--mono); font-size: .8rem; color: var(--text-soft); display: flex; justify-content: space-between; }

/* Torn-paper edge via Houdini Paint Worklet — progressive enhancement.
   Base state: plain border (always correct). Once klaxon-fx.js confirms
   CSS.paintWorklet support it adds .klx-paint-ok to <html>, which swaps in the
   masked jagged-edge version. */
.torn { border-bottom: none; position: relative; }
html.klx-paint-ok .torn {
	--klx-seed: 7;
	-webkit-mask-image: paint(torn-edge);
	mask-image: paint(torn-edge);
	mask-mode: alpha;
	padding-bottom: 22px;
}

/* ── Manifesto / scroll-fill statement ────────────────────────────────── */
.statement { background: var(--bg-deep); color: var(--text-soft); }
.statement__text {
	font-family: var(--display);
	font-weight: 900;
	font-size: clamp(1.8rem, 5vw, 3.4rem);
	line-height: 1.12;
	text-transform: uppercase;
	max-width: 20ch;
}
.fill-word {
	--klx-fill: 0%;
	background-image: linear-gradient(var(--acid), var(--acid));
	background-repeat: no-repeat;
	background-size: var(--klx-fill) 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	text-shadow: none;
	filter: drop-shadow(0 0 18px var(--acid-glow));
}
.fill-word__base { color: var(--text-dim); }
@supports (animation-timeline: view()) {
	.fill-word {
		animation: klx-fill linear both;
		animation-timeline: view();
		animation-range: entry 10% cover 60%;
	}
}
@keyframes klx-fill { from { --klx-fill: 0%; } to { --klx-fill: 100%; } }

/* ── Steps / process ──────────────────────────────────────────────────── */
.steps { display: flex; flex-direction: column; gap: 0; }
.step {
	display: grid;
	grid-template-columns: 90px 1fr auto;
	align-items: center;
	gap: 24px;
	padding-block: 30px;
	border-top: var(--lw-hair) solid var(--line);
}
.step:first-child { border-top: none; }
.step__no { font-family: var(--display); font-weight: 900; font-size: 2.6rem; color: transparent; -webkit-text-stroke: 2px var(--line-strong); }
.step__title { font-family: var(--display); font-weight: 900; font-size: clamp(1.3rem, 2.6vw, 2rem); text-transform: uppercase; color: var(--text); }
.step__desc { color: var(--text-soft); margin-top: 6px; max-width: 60ch; }
.step__arrow { width: 32px; height: 32px; transition: transform .3s var(--ease); color: var(--acid); filter: drop-shadow(0 0 6px var(--acid-glow)); }
.step:hover .step__arrow { transform: translateX(8px); }

/* ── Testimonials marquee ─────────────────────────────────────────────── */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quote-card { padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.quote-card p { font-family: var(--body-f); font-size: 1.05rem; color: var(--text); }
.quote-card__who { font-family: var(--mono); font-size: .8rem; text-transform: uppercase; color: var(--text-soft); }

/* ── CTA band ─────────────────────────────────────────────────────────── */
.cta-band { background: var(--bg-deep); color: var(--text); text-align: center; }
.cta-band h2 { font-size: clamp(2.4rem, 7vw, 5.2rem); white-space: pre-line; text-shadow: 0 0 40px var(--coral-glow); }
.cta-band .btn { margin-top: 32px; }

/* Contact dialog — native <dialog>. */
#klx-contact {
	border: var(--lw) solid var(--line);
	border-radius: var(--radius);
	padding: 0;
	width: min(90vw, 480px);
	background: var(--surface-solid);
	box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 60px var(--acid-glow), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.3);
	opacity: 0;
	transform: scale(.94);
	transition: opacity .22s var(--ease), transform .22s var(--ease), overlay .22s allow-discrete, display .22s allow-discrete;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	#klx-contact { background: var(--surface); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); }
}
#klx-contact[open] { opacity: 1; transform: scale(1); }
@starting-style { #klx-contact[open] { opacity: 0; transform: scale(.94); } }
#klx-contact::backdrop { background: rgb(0 0 0 / .55); backdrop-filter: blur(2px); }
.dlg__head { display: flex; justify-content: space-between; align-items: center; padding: 22px 24px; border-bottom: var(--lw-hair) solid var(--line); }
.dlg__head h3 { font-size: 1.3rem; color: var(--text); }
.dlg__body { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.dlg__body input, .dlg__body textarea {
	border: var(--lw) solid var(--line);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	background: var(--bg-deep);
	color: var(--text);
	font-family: var(--body-f);
}
.dlg__body input::placeholder, .dlg__body textarea::placeholder { color: var(--text-dim); }
.dlg__close { border: var(--lw) solid var(--line); border-radius: var(--radius-sm); background: var(--bg-deep); color: var(--text); width: 36px; height: 36px; cursor: pointer; }
.dlg__status { font-family: var(--mono); font-size: .82rem; min-height: 1.2em; margin: 0; }
.dlg__body.is-sending button[type="submit"] { opacity: .6; cursor: wait; }
.dlg__body.is-sent .dlg__status { color: var(--acid); text-shadow: 0 0 10px var(--acid-glow); }
.dlg__body.is-error .dlg__status { color: var(--coral); text-shadow: 0 0 10px var(--coral-glow); }
@media (prefers-reduced-motion: reduce) { #klx-contact { transition: none; } }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-foot { background: var(--bg-deep); color: var(--text-soft); padding-block: 64px 28px; border-top: var(--lw) solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.foot-grid--no-social { grid-template-columns: 2fr 1fr 1fr; }
.foot-grid h4 { font-family: var(--mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--acid); margin-bottom: 16px; text-shadow: 0 0 10px var(--acid-glow); }
.foot-grid a, .foot-grid p { color: var(--text-dim); font-size: .95rem; }
.foot-grid a:hover { color: var(--text); }
.foot-grid ul { display: flex; flex-direction: column; gap: 8px; }
.foot-brand { font-family: var(--display); font-weight: 900; font-size: 2rem; text-transform: uppercase; color: var(--text); }
.foot-bottom { margin-top: 48px; padding-top: 24px; border-top: var(--lw-hair) solid var(--line); display: flex; justify-content: space-between; font-family: var(--mono); font-size: .78rem; color: var(--text-dim); flex-wrap: wrap; gap: 10px; }

/* ── Scroll progress bar ──────────────────────────────────────────────── */
.klx-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; background: var(--acid); box-shadow: 0 0 12px var(--acid-glow); transform-origin: 0 50%; transform: scaleX(0); z-index: 400; }

/* ── Scroll reveals ───────────────────────────────────────────────────── */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: translateY(0); }
/* Motion (motion.dev) drives this via WAAPI when it's loaded — its own
   easing/stagger is the effect, so the CSS transition above is switched off
   to avoid animating the same properties twice. */
html.klx-motion-on [data-reveal] { transition: none; }
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ── Cursor annotation (CSS anchor positioning) ───────────────────────── */
.annote {
	font-family: var(--mono);
	font-weight: 700;
	font-size: .72rem;
	text-transform: uppercase;
	background: var(--bg-deep);
	color: var(--blue);
	border: var(--lw-hair) solid var(--blue);
	box-shadow: 0 0 20px var(--blue-glow);
	padding: 6px 10px;
	border-radius: var(--radius-sm);
	position: absolute;
	top: 8px; right: -18px;
	transform: rotate(4deg);
}
@supports (anchor-name: --a) {
	.hero__sticker-anchor { anchor-name: --klx-anchor; }
	.annote--anchored {
		position: fixed;
		position-anchor: --klx-anchor;
		position-area: top right;
		margin: 0 0 10px 10px;
		top: auto; right: auto; transform: rotate(4deg);
	}
}

/* ── Custom crosshair cursor (fine pointer only) ──────────────────────── */
.klx-cursor { position: fixed; top: 0; left: 0; z-index: 600; pointer-events: none; will-change: transform; }
.klx-cursor__cross {
	width: 22px; height: 22px;
	margin: -11px 0 0 -11px;
	filter: drop-shadow(0 0 6px var(--acid-glow));
}
.klx-cursor__cross::before, .klx-cursor__cross::after {
	content: '';
	position: absolute;
	background: var(--acid);
}
.klx-cursor__cross::before { left: 50%; top: 0; width: 2px; height: 100%; margin-left: -1px; }
.klx-cursor__cross::after { top: 50%; left: 0; height: 2px; width: 100%; margin-top: -1px; }
.klx-cursor__label {
	position: absolute; left: 16px; top: 16px;
	font-family: var(--mono); font-weight: 700; font-size: .68rem; text-transform: uppercase;
	background: var(--bg-deep); color: var(--acid);
	border: var(--lw-hair) solid var(--line);
	border-radius: var(--radius-sm);
	padding: 3px 7px; white-space: nowrap;
	opacity: 0; transition: opacity .15s;
}
.klx-cursor.is-label .klx-cursor__label { opacity: 1; }
body.klx-has-cursor { cursor: none; }
body.klx-has-cursor a, body.klx-has-cursor button, body.klx-has-cursor .sticker { cursor: none; }
@media (pointer: coarse) { .klx-cursor { display: none !important; } body.klx-has-cursor { cursor: auto; } }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
	.bento { grid-template-columns: repeat(2, 1fr); }
	.work-grid { grid-template-columns: repeat(2, 1fr); }
	.foot-grid { grid-template-columns: 1fr 1fr; }
	.quotes { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	.bento { grid-template-columns: 1fr; }
	.work-grid { grid-template-columns: 1fr; }
	.stats { grid-template-columns: repeat(2, 1fr); }
	.stat:nth-child(2) { border-right: none; }
	.stat { border-bottom: var(--lw-hair) solid var(--line); }
	.step { grid-template-columns: 56px 1fr; }
	.step__arrow { display: none; }
	.foot-grid { grid-template-columns: 1fr; }
	.sticker-field { display: none; }
}

/* ── Inner-page hero band ─────────────────────────────────────────────── */
.page-hero { padding-block: clamp(48px, 8vw, 96px) clamp(36px, 6vw, 64px); border-bottom: var(--lw) solid var(--line); }
.page-hero h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); max-width: 20ch; }
.page-hero .meta-line { margin-top: 18px; display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--mono); font-size: .85rem; color: var(--text-soft); }
.page-hero .lede { margin-top: 22px; max-width: 60ch; font-size: 1.15rem; color: var(--text-soft); }

/* ── Prose (post/page content typography) ─────────────────────────────── */
.prose { max-width: 72ch; font-size: 1.08rem; line-height: 1.7; color: var(--text); }
.prose > * + * { margin-top: 1.3em; }
.prose h2 { font-size: 1.8rem; margin-top: 2em; text-transform: none; }
.prose h3 { font-size: 1.4rem; margin-top: 1.8em; text-transform: none; }
.prose a { text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose strong { font-weight: 700; }
.prose blockquote { border-left: var(--lw) solid var(--coral); padding-left: 20px; font-style: italic; color: var(--text-soft); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose img { border: var(--lw) solid var(--line); border-radius: var(--radius); }
.prose code { font-family: var(--mono); background: var(--bg-deep); color: var(--acid); padding: .15em .4em; border-radius: 4px; }
.single__media { margin-block: 32px; border: var(--lw) solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.single__tags { margin-top: 32px; display: flex; gap: 10px; flex-wrap: wrap; }
.single__tags a { font-family: var(--mono); font-size: .78rem; text-transform: uppercase; padding: 5px 12px; border: var(--lw-hair) solid var(--line); border-radius: 999px; color: var(--text-soft); }
.single__tags a:hover { border-color: var(--acid); color: var(--acid); }
.page-links { font-family: var(--mono); font-size: .85rem; color: var(--text-soft); }

/* ── Pagination ───────────────────────────────────────────────────────── */
.pager, .navigation.pagination { display: flex; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.pager .page-numbers, .navigation.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding-inline: 10px;
	border: var(--lw-hair) solid var(--line);
	border-radius: var(--radius-sm);
	font-family: var(--mono); font-weight: 700; font-size: .85rem;
	background: var(--surface-solid);
	color: var(--text-soft);
}
.pager .page-numbers.current, .navigation.pagination .page-numbers.current { background: var(--bg-deep); border-color: var(--acid); color: var(--acid); box-shadow: 0 0 16px var(--acid-glow); }

/* ── Comments ─────────────────────────────────────────────────────────── */
.comments { margin-top: 24px; }
.comments__title { font-size: 1.6rem; margin-bottom: 24px; color: var(--text); }
.comment-list { display: flex; flex-direction: column; gap: 20px; }
.comment-list .children { margin-top: 20px; padding-left: 28px; border-left: var(--lw-hair) solid var(--line); }
.comment-list article { padding: 18px; background: var(--surface-solid); border: var(--lw-hair) solid var(--line); border-radius: var(--radius); }
.comment-form p { margin-top: 14px; }
.comment-form input, .comment-form textarea {
	width: 100%; border: var(--lw) solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--bg-deep); color: var(--text); font-family: var(--body-f);
}
.comment-form label { font-family: var(--mono); font-size: .78rem; text-transform: uppercase; display: block; margin-bottom: 6px; color: var(--text-soft); }

/* ── Search form ──────────────────────────────────────────────────────── */
.search-form { display: flex; border: var(--lw) solid var(--line); border-radius: 999px; overflow: hidden; }
.search-form__input { flex: 1; border: none; padding: 14px 16px; background: var(--bg-deep); color: var(--text); font-family: var(--mono); }
.search-form__input:focus { outline: none; }
.search-form__input::placeholder { color: var(--text-dim); }
.search-form__submit { border: none; border-left: var(--lw-hair) solid var(--line); background: var(--surface-solid); color: var(--acid); padding: 0 20px; cursor: pointer; font-weight: 700; }

/* ── High contrast / print safety ─────────────────────────────────────── */
@media (prefers-contrast: more) {
	:root { --text-soft: var(--text); --line: var(--line-strong); }
	.stamp, .btn, .work-card__media, .cap-card { border-width: 2px; }
}

/* ── Accessibility: WP core's screen-reader-text / skip-link ─────────────
   WordPress core markup (the skip-link in header.php, and some plugin
   output) assumes the theme styles this class — visually hidden off-screen
   until keyboard-focused, per the standard WP reference implementation. ── */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.skip-link.screen-reader-text:focus {
	background: var(--bg-deep);
	color: var(--acid);
	border: var(--lw) solid var(--acid);
	border-radius: var(--radius-sm);
	box-shadow: 0 0 24px var(--acid-glow);
	clip: auto !important;
	clip-path: none;
	display: block;
	font-family: var(--mono);
	font-weight: 700;
	text-transform: uppercase;
	font-size: .85rem;
	height: auto;
	left: 16px;
	top: 16px;
	padding: 12px 20px;
	width: auto;
	z-index: 700;
}

/* ── WP core content classes (captions, galleries, sticky posts, alignment) —
   editor-authored content relies on the theme styling these; Theme Check
   flags their absence since posts almost always end up using at least one. ── */
.wp-caption { max-width: 100%; }
.wp-caption img { display: block; }
.wp-caption-text { font-family: var(--mono); font-size: .8rem; color: var(--text-soft); margin-top: 8px; text-align: center; }
.gallery-caption { font-family: var(--mono); font-size: .8rem; color: var(--text-soft); text-align: center; }
.bypostauthor { /* intentionally no visual distinction — WP core hook, not used by this design */ }
.sticky { border-left: var(--lw) solid var(--acid); padding-left: 20px; }
.alignleft { float: left; margin: .4em 1.6em 1em 0; }
.alignright { float: right; margin: .4em 0 1em 1.6em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* --- Section dropdown (nav) — theme-agnostic, added --- */
li:has(> .sub-menu){ position: relative; }
.sub-menu{ position:absolute; top:100%; left:0; min-width:210px; margin:12px 0 0; padding:8px; list-style:none; background:rgba(18,18,24,.97); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.14); border-radius:12px; box-shadow:0 26px 60px -26px rgba(0,0,0,.75); display:none; z-index:500; }
li:hover > .sub-menu, li:focus-within > .sub-menu{ display:block; }
.sub-menu li{ margin:0; padding:0; list-style:none; }
.sub-menu a{ display:block; padding:.55em .85em; border-radius:7px; color:#f2f2f5 !important; white-space:nowrap; font-size:.9rem; text-transform:none !important; letter-spacing:normal !important; opacity:1 !important; }
.sub-menu a::before, .sub-menu a::after{ display:none !important; content:none !important; }
.sub-menu a:hover{ background:rgba(255,255,255,.13); color:#fff !important; }