/* =========================================================================
   Rackline Frame — pallet racking and storage systems
   -------------------------------------------------------------------------
   Design system: a near-black picture frame is fixed around the viewport and
   never moves. Inside it the page is a concrete-paper ground carrying a
   12-column hairline grid, engineering metadata set in mono, display type at
   plan-drawing scale, and a single industrial signal colour used only where
   something is live, current or actionable.

   Rules that hold everywhere:
     - No shadows. The visible hairline IS the structure.
     - No radii. Rolled steel sections are square.
     - One accent. If everything is signal, nothing is.
     - Type does the shouting; colour stays quiet.

   Sections: 1 tokens · 2 base · 3 frame · 4 layout · 5 type · 6 motion
   helpers · 7 components · 8 header · 9 home · 10 inner templates ·
   11 woocommerce · 12 footer · 13 rail · 14 responsive · 15 reduced motion
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens
   ---------------------------------------------------------------------- */

:root {
	/* Ink — the frame, the dark chapters, the footer */
	--ink: #111311;
	--ink-2: #191c19;
	--ink-3: #232722;
	--ink-4: #2e332d;

	/* Paper — poured-concrete greys, the page ground */
	--paper: #d9d9d6;
	--paper-2: #e4e4e2;
	--paper-3: #cecec9;
	--paper-warm: #dbd5c7;
	--white: #f4f4f2;

	/* Signal — hazard orange. Current, live, actionable. Nothing else. */
	--signal: #ff3a1a;
	--signal-deep: #d92c10;
	--signal-soft: rgba(255, 58, 26, 0.12);

	/* Text */
	--text: #141414;
	--muted: #6a6a64;
	--faint: #8f8f88;
	--text-inv: #e8e8e4;
	--muted-inv: #9a9a93;
	--faint-inv: #6f736d;

	/* Hairlines */
	--line: rgba(20, 20, 20, 0.16);
	--line-2: rgba(20, 20, 20, 0.32);
	--line-3: rgba(20, 20, 20, 0.6);
	--line-inv: rgba(232, 232, 228, 0.16);
	--line-inv-2: rgba(232, 232, 228, 0.32);
	--tex: rgba(20, 20, 20, 0.035);
	--tex-inv: rgba(255, 255, 255, 0.03);

	/* Type families */
	--f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	--f-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
	--f-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Type scale — plan-drawing scale, not brochure scale */
	--fs-hero: clamp(3.1rem, 8.6vw, 9.25rem);
	--fs-h1: clamp(2.5rem, 5.9vw, 5.5rem);
	--fs-h2: clamp(2rem, 4.4vw, 4.25rem);
	--fs-h3: clamp(1.15rem, 1.5vw, 1.5rem);
	--fs-h4: clamp(1rem, 1.15vw, 1.1875rem);
	--fs-lead: clamp(1.0625rem, 1.3vw, 1.375rem);
	--fs-body: 1rem;
	--fs-sm: 0.875rem;
	--fs-mono: 0.6875rem;
	--fs-mono-lg: 0.8125rem;

	/* Structure */
	--frame: clamp(9px, 0.85vw, 15px);
	--shell: 1480px;
	--gutter: clamp(1.125rem, 3vw, 4rem);
	--rail-w: 58px;
	--gap: clamp(0.75rem, 1vw, 1.0625rem);
	--chapter: clamp(4.5rem, 10vw, 10.5rem);
	--bracket: 16px;
	--header-h: 74px;

	/* Motion */
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-io: cubic-bezier(0.65, 0, 0.35, 1);
	--dur: 0.55s;
	--dur-fast: 0.25s;
}

/* -------------------------------------------------------------------------
   2. Base
   ---------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

html.has-motion {
	scroll-behavior: auto;
}

html.is-locked,
html.is-locked body {
	overflow: hidden;
}

body {
	margin: 0;
	padding: var(--frame);
	background:
		repeating-linear-gradient(135deg, transparent 0 11px, var(--tex) 11px 12px),
		var(--paper);
	color: var(--text);
	font-family: var(--f-body);
	font-size: var(--fs-body);
	line-height: 1.62;
	font-feature-settings: 'kern' 1, 'liga' 1, 'tnum' 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

figure,
dl,
dd,
h1,
h2,
h3,
h4,
p {
	margin: 0;
}

hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 0;
}

::selection {
	background: var(--signal);
	color: var(--white);
}

:focus-visible {
	outline: 2px solid var(--signal);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: fixed;
	top: calc(var(--frame) + 8px);
	left: calc(var(--frame) + 8px);
	z-index: 200;
	padding: 0.75rem 1.25rem;
	background: var(--signal);
	color: var(--white);
	font-family: var(--f-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
}

/* -------------------------------------------------------------------------
   3. The frame
   -------------------------------------------------------------------------
   Four fixed ink bars. They carry the running metadata: brand on the left,
   the section currently under the reader on the right, scroll progress along
   the bottom. Purely decorative, so pointer events pass straight through.
   ---------------------------------------------------------------------- */

.page-frame {
	position: fixed;
	inset: 0;
	z-index: 120;
	pointer-events: none;
}

.page-frame__bar {
	position: absolute;
	background: var(--ink);
}

.page-frame__bar--t,
.page-frame__bar--b {
	left: 0;
	right: 0;
	height: var(--frame);
}

.page-frame__bar--t { top: 0; }
.page-frame__bar--b { bottom: 0; }

.page-frame__bar--l,
.page-frame__bar--r {
	top: 0;
	bottom: 0;
	width: var(--frame);
	display: flex;
	align-items: center;
	justify-content: center;
}

.page-frame__bar--l { left: 0; }
.page-frame__bar--r { right: 0; }

.page-frame__mark {
	writing-mode: vertical-rl;
	font-family: var(--f-mono);
	font-size: 0.5625rem;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--faint-inv);
	white-space: nowrap;
	user-select: none;
}

.page-frame__bar--l .page-frame__mark {
	transform: rotate(180deg);
}

.page-frame__mark--live {
	color: var(--text-inv);
}

.page-frame__progress {
	position: absolute;
	inset: 0 auto 0 0;
	width: 100%;
	background: var(--signal);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

/* -------------------------------------------------------------------------
   4. Layout
   ---------------------------------------------------------------------- */

.site-main {
	display: block;
	min-height: 40vh;
}

.shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

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

.section--tight { padding-top: clamp(2.5rem, 5vw, 4.5rem); }

/* Chapter fields. Alternating grounds are what stop a long page reading as
   one endless white scroll. */
.field--paper { background: transparent; }
.field--paper2 { background: var(--paper-2); }
.field--warm { background: var(--paper-warm); }

.field--ink {
	background: var(--ink);
	color: var(--text-inv);
}

.field--ink .eyebrow,
.field--ink .sec-head__text,
.field--ink .n-card__excerpt {
	color: var(--muted-inv);
}

/* A hairline above a chapter reads as a section break without spending
   another 100px of whitespace on it. */
.rule {
	display: block;
	height: 1px;
	background: var(--line);
	transform-origin: 0 50%;
}

.field--ink .rule {
	background: var(--line-inv);
}

/* Twelve-column guides. Drawn, not implied — the reader can see the system. */
.guides {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.guides__inner {
	width: 100%;
	max-width: var(--shell);
	height: 100%;
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: grid;
	grid-template-columns: repeat(12, 1fr);
}

.guides__inner > span {
	border-left: 1px solid var(--line);
	opacity: 0.55;
}

.guides__inner > span:first-child {
	border-left: 0;
}

.field--ink .guides__inner > span {
	border-left-color: var(--line-inv);
}

@media (max-width: 899px) {
	.guides__inner {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* L-shaped corner brackets. Background layers, so no extra markup. */
.brackets {
	position: relative;
	background-image:
		linear-gradient(var(--line-2), var(--line-2)),
		linear-gradient(var(--line-2), var(--line-2)),
		linear-gradient(var(--line-2), var(--line-2)),
		linear-gradient(var(--line-2), var(--line-2)),
		linear-gradient(var(--line-2), var(--line-2)),
		linear-gradient(var(--line-2), var(--line-2)),
		linear-gradient(var(--line-2), var(--line-2)),
		linear-gradient(var(--line-2), var(--line-2));
	background-repeat: no-repeat;
	background-size:
		var(--bracket) 1px, 1px var(--bracket),
		var(--bracket) 1px, 1px var(--bracket),
		var(--bracket) 1px, 1px var(--bracket),
		var(--bracket) 1px, 1px var(--bracket);
	background-position:
		left top, left top,
		right top, right top,
		left bottom, left bottom,
		right bottom, right bottom;
}

.field--ink .brackets,
.brackets--inv {
	background-image:
		linear-gradient(var(--line-inv-2), var(--line-inv-2)),
		linear-gradient(var(--line-inv-2), var(--line-inv-2)),
		linear-gradient(var(--line-inv-2), var(--line-inv-2)),
		linear-gradient(var(--line-inv-2), var(--line-inv-2)),
		linear-gradient(var(--line-inv-2), var(--line-inv-2)),
		linear-gradient(var(--line-inv-2), var(--line-inv-2)),
		linear-gradient(var(--line-inv-2), var(--line-inv-2)),
		linear-gradient(var(--line-inv-2), var(--line-inv-2));
}

/* -------------------------------------------------------------------------
   5. Typography
   ---------------------------------------------------------------------- */

.display,
.hero__title,
.page-hero__title,
.sec-head__title,
.story__title,
.cta__title,
.p-single__title,
.marquee__item {
	font-family: var(--f-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.028em;
	line-height: 0.88;
	text-wrap: balance;
}

.hero__title {
	font-size: clamp(2.4rem, 12.6cqw, 9.25rem);
	letter-spacing: -0.035em;
	line-height: 0.85;
}

@supports not (font-size: 1cqw) {
	.hero__title { font-size: clamp(2.4rem, 6.4vw, 6rem); }
}

.page-hero__title,
.p-single__title {
	font-size: var(--fs-h1);
}

.sec-head__title,
.story__title,
.cta__title {
	font-size: var(--fs-h2);
}

/* Mono is the utility voice: labels, indices, specs, coordinates. */
.mono,
.eyebrow,
.topbar,
.nav__list,
.crumbs,
.chip,
.p-card__sku,
.p-card__spec-label,
.p-card__spec-value,
.hero-spec__label,
.stat__label,
.n-card__meta,
.step__index,
.cat-card__index,
.cat-card__count,
.story-panel__index,
.site-footer__title,
.spec-table__row dt,
.btn,
.link-arrow {
	font-family: var(--f-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: var(--fs-mono);
	color: var(--muted);
	letter-spacing: 0.24em;
}

.eyebrow__mark {
	width: 7px;
	height: 7px;
	flex: none;
	background: var(--signal);
}

.sec-head__rail,
.story__aside .sec-head__rail,
.cta__copy .sec-head__rail {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-family: var(--f-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--muted);
}

.sec-head__index { color: var(--signal); }

.sec-head__rail .rule {
	flex: none;
	width: clamp(28px, 4vw, 64px);
	background: var(--line-2);
}

.field--ink .sec-head__rail,
.cta .sec-head__rail { color: var(--muted-inv); }

.field--ink .sec-head__rail .rule,
.cta .sec-head__rail .rule { background: var(--line-inv-2); }

.eyebrow--light {
	color: var(--muted-inv);
}

.lead {
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--muted);
	max-width: 46ch;
}

.field--ink .lead {
	color: var(--muted-inv);
}

/* Prose (post/page content) */
.prose {
	font-size: 1.0625rem;
	line-height: 1.75;
	max-width: 70ch;
}

.prose > * + * { margin-top: 1.35em; }

.prose h2,
.prose h3,
.prose h4 {
	font-family: var(--f-display);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin-top: 2.2em;
}

.prose h2 { font-size: clamp(1.6rem, 2.4vw, 2.25rem); }
.prose h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); }
.prose h4 { font-size: 1.125rem; }

.prose a {
	box-shadow: inset 0 -1px 0 var(--line-3);
	transition: box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.prose a:hover {
	color: var(--signal);
	box-shadow: inset 0 -1px 0 var(--signal);
}

.prose ul,
.prose ol {
	padding-left: 1.35em;
}

.prose ul { list-style: none; }
.prose ol { list-style: decimal; }

.prose li + li { margin-top: 0.5em; }

.prose ul > li {
	position: relative;
}

.prose ul > li::before {
	content: '';
	position: absolute;
	left: -1.35em;
	top: 0.72em;
	width: 6px;
	height: 1px;
	background: var(--signal);
}

.prose blockquote {
	border-left: 2px solid var(--signal);
	padding-left: 1.5rem;
	font-size: 1.1875rem;
	line-height: 1.55;
	color: var(--text);
}

.prose img,
.prose figure {
	margin-block: 2.2em;
}

.prose code,
.prose kbd {
	font-family: var(--f-mono);
	font-size: 0.875em;
	background: var(--paper-3);
	padding: 0.15em 0.4em;
}

.prose pre {
	background: var(--ink);
	color: var(--text-inv);
	padding: 1.25rem;
	overflow-x: auto;
	font-family: var(--f-mono);
	font-size: 0.8125rem;
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

.prose th,
.prose td {
	border-bottom: 1px solid var(--line);
	padding: 0.7rem 0.5rem;
	text-align: left;
}

/* -------------------------------------------------------------------------
   6. Motion helpers
   -------------------------------------------------------------------------
   `has-motion` is added by JS only after GSAP is confirmed present, so a
   blocked script leaves every one of these elements fully visible.
   ---------------------------------------------------------------------- */

html.has-motion [data-motion-text],
html.has-motion [data-reveal],
html.has-motion [data-reveal-group],
html.has-motion [data-image-reveal] {
	visibility: hidden;
}

html.has-motion [data-rule] {
	transform: scaleX(0);
	transform-origin: 0 50%;
}

.motion-word-mask {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
}

.motion-word {
	display: inline-block;
	will-change: transform;
}

[data-image-reveal] {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   7. Components
   ---------------------------------------------------------------------- */

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

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 2.25rem;
	min-height: 56px;
	padding: 0 1.375rem;
	font-size: var(--fs-mono);
	font-weight: 500;
	letter-spacing: 0.2em;
	border: 1px solid transparent;
	overflow: hidden;
	isolation: isolate;
	transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
	will-change: transform;
}

/* The wipe: a signal panel that rises through the button on hover. It sits
   behind the label via z-index, never on top of it. */
.btn::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--signal);
	transform: scaleY(0);
	transform-origin: 50% 100%;
	transition: transform 0.42s var(--ease);
}

.btn:hover::before,
.btn:focus-visible::before {
	transform: scaleY(1);
}

.btn__label {
	position: relative;
	z-index: 1;
}

.btn__icon {
	position: relative;
	z-index: 1;
	display: flex;
	transition: transform 0.42s var(--ease);
}

.btn:hover .btn__icon {
	transform: translateX(5px);
}

.btn--primary {
	background: var(--ink);
	color: var(--text-inv);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	color: var(--white);
}

.field--ink .btn--primary,
.hero .btn--primary,
.page-hero .btn--primary {
	background: var(--signal);
	color: var(--white);
}

.field--ink .btn--primary::before,
.hero .btn--primary::before,
.page-hero .btn--primary::before {
	background: var(--white);
}

.field--ink .btn--primary:hover,
.hero .btn--primary:hover,
.page-hero .btn--primary:hover,
.field--ink .btn--primary:focus-visible,
.hero .btn--primary:focus-visible,
.page-hero .btn--primary:focus-visible {
	color: var(--ink);
}

.btn--line {
	border-color: var(--line-2);
	color: var(--text);
}

.btn--line:hover,
.btn--line:focus-visible {
	color: var(--white);
	border-color: var(--signal);
}

.btn--ghost {
	border-color: var(--line-inv-2);
	color: var(--text-inv);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	color: var(--white);
	border-color: var(--signal);
}

.field--ink .btn--line {
	border-color: var(--line-inv-2);
	color: var(--text-inv);
}

.btn--sm {
	min-height: 46px;
	gap: 1.25rem;
	padding: 0 1rem;
}

.btn--xs {
	min-height: 38px;
	gap: 0.875rem;
	padding: 0 0.75rem;
	font-size: 0.625rem;
}

/* Button groups line up on one baseline and wrap as whole units. */
.btn-row,
.hero__actions,
.empty__actions,
.p-single__actions,
.p-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.75rem;
}

/* --- Arrow link ------------------------------------------------------- */

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-size: var(--fs-mono);
	font-weight: 500;
	letter-spacing: 0.2em;
	color: var(--text);
	padding-bottom: 0.4rem;
	background-image: linear-gradient(var(--signal), var(--signal));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 0.42s var(--ease), color var(--dur-fast) var(--ease);
}

.link-arrow svg {
	transition: transform 0.42s var(--ease);
}

a.link-arrow:hover,
a:hover .link-arrow,
a.link-arrow:focus-visible {
	background-size: 100% 1px;
}

a.link-arrow:hover svg,
a:hover .link-arrow svg {
	transform: translateX(5px);
}

.field--ink .link-arrow {
	color: var(--text-inv);
}

.icon.is-flip { transform: rotate(180deg); }

/* --- Icon button ------------------------------------------------------ */

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--line);
	color: inherit;
	transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.icon-btn:hover {
	border-color: var(--signal);
	color: var(--signal);
}

/* --- Chips ------------------------------------------------------------ */

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	border: 1px solid var(--line);
	margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.chip {
	padding: 0.9rem 1.15rem;
	font-family: var(--f-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	border-right: 1px solid var(--line);
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.chip:last-child { border-right: 0; }

.chip:hover {
	background: var(--paper-2);
	color: var(--text);
}

.chip.is-active {
	background: var(--ink);
	color: var(--text-inv);
}

/* --- Section head ----------------------------------------------------- */

.sec-head {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: var(--gutter);
	align-items: end;
	padding-bottom: clamp(1.75rem, 3vw, 2.75rem);
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
	border-bottom: 1px solid var(--line);
}

.field--ink .sec-head {
	border-bottom-color: var(--line-inv);
}

.sec-head__main {
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2vw, 1.75rem);
}

.sec-head__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	padding-bottom: 0.35rem;
}

.sec-head__text {
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: var(--muted);
	max-width: 44ch;
}

.sec-head--center {
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
}

.sec-head--center .sec-head__main { align-items: center; }
.sec-head--center .sec-head__aside { align-items: center; }

@media (max-width: 899px) {
	.sec-head {
		grid-template-columns: 1fr;
		align-items: start;
	}
}

/* --- Forms ------------------------------------------------------------ */

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='url'],
input[type='number'],
input[type='search'],
input[type='password'],
input[type='date'],
select,
textarea {
	width: 100%;
	padding: 0.9rem 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--line-2);
	font-family: var(--f-body);
	font-size: 0.9375rem;
	transition: border-color var(--dur-fast) var(--ease);
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}

textarea {
	min-height: 120px;
	resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-bottom-color: var(--signal);
}

::placeholder {
	color: var(--faint);
	opacity: 1;
}

label {
	display: block;
	font-family: var(--f-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 0.15rem;
}

.field--ink label,
.cta label {
	color: var(--muted-inv);
}

.field--ink input,
.field--ink select,
.field--ink textarea,
.cta input,
.cta select,
.cta textarea {
	color: var(--text-inv);
	border-bottom-color: var(--line-inv-2);
}

.field--ink input:focus,
.field--ink textarea:focus,
.cta input:focus,
.cta textarea:focus {
	border-bottom-color: var(--signal);
}

input[type='submit'],
button[type='submit'],
.rkl-inquiry button,
.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 0 1.75rem;
	background: var(--ink);
	color: var(--text-inv);
	font-family: var(--f-mono);
	font-size: var(--fs-mono);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	border: 0;
	width: auto;
	transition: background var(--dur-fast) var(--ease);
}

input[type='submit']:hover,
button[type='submit']:hover,
.rkl-inquiry button:hover,
.wpcf7-submit:hover {
	background: var(--signal);
}

.field--ink input[type='submit'],
.field--ink button[type='submit'],
.cta input[type='submit'],
.cta button[type='submit'],
.cta .rkl-inquiry button {
	background: var(--signal);
	color: var(--white);
}

.cta .rkl-inquiry button:hover {
	background: var(--white);
	color: var(--ink);
}

.inquiry-note {
	font-size: var(--fs-sm);
	color: var(--muted);
	margin-top: 1rem;
}

.cta .inquiry-note,
.field--ink .inquiry-note {
	color: var(--muted-inv);
}

.inquiry-fallback {
	border: 1px solid var(--signal);
	padding: 1.5rem;
	font-size: var(--fs-sm);
}

.inquiry-fallback__title {
	font-family: var(--f-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--signal);
	margin-bottom: 0.75rem;
}

.inquiry-fallback__list { margin-top: 0.75rem; }
.inquiry-fallback__list li { position: relative; padding-left: 1rem; }
.inquiry-fallback__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 6px;
	height: 1px;
	background: var(--signal);
}

/* Search form */
.searchform {
	display: flex;
	align-items: flex-end;
	gap: 1rem;
	width: 100%;
}

.searchform__input { flex: 1; }

.searchform__submit {
	flex: none;
	min-height: 48px;
	padding: 0 1.25rem;
	background: var(--ink);
	color: var(--text-inv);
	font-family: var(--f-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.searchform__submit:hover { background: var(--signal); }

/* --- Media windows ---------------------------------------------------- */

.img-fallback {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background:
		repeating-linear-gradient(135deg, transparent 0 9px, rgba(20, 20, 20, 0.06) 9px 10px),
		var(--paper-3);
}

/* --- Cards: product --------------------------------------------------- */

.p-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

.p-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--paper-2);
	transition: background var(--dur) var(--ease);
}

.p-card:hover { background: var(--white); }

.p-card__media {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--white);
}

.p-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--ease);
}

.p-card:hover .p-card__media img { transform: scale(1.045); }

/* Signal corner marks that only exist while the card is live. */
.p-card__media::after {
	content: '';
	position: absolute;
	inset: 10px;
	pointer-events: none;
	background-image:
		linear-gradient(var(--signal), var(--signal)),
		linear-gradient(var(--signal), var(--signal)),
		linear-gradient(var(--signal), var(--signal)),
		linear-gradient(var(--signal), var(--signal));
	background-repeat: no-repeat;
	background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px;
	background-position: left top, left top, right bottom, right bottom;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity 0.35s var(--ease), transform 0.45s var(--ease);
}

.p-card:hover .p-card__media::after {
	opacity: 1;
	transform: none;
}

.p-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	flex: 1;
	padding: clamp(1.25rem, 2vw, 1.85rem);
}

.p-card__sku {
	font-size: var(--fs-mono);
	color: var(--signal);
	letter-spacing: 0.2em;
}

.p-card__title {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: var(--fs-h3);
	line-height: 1.14;
	letter-spacing: -0.015em;
}

.p-card__specs {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding-top: 0.85rem;
	border-top: 1px solid var(--line);
	font-size: 0.625rem;
}

.p-card__specs li {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	align-items: baseline;
	gap: 0.75rem;
}

.p-card__spec-label { color: var(--faint); }
.p-card__spec-value { color: var(--text); font-weight: 500; }

.p-card__actions {
	margin-top: auto;
	padding-top: 1.25rem;
	align-items: center;
	justify-content: space-between;
}

/* --- Cards: category -------------------------------------------------- */

.cat-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

.cat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--paper);
	overflow: hidden;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* The catalogue art is light product photography on a light ground, so the
   tile gives it a white stage rather than a desaturating filter — grey on grey
   reads as an empty card, which is worse than no card. */
.cat-card__media {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--white);
}

.cat-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--ease);
}

.cat-card:hover { background: var(--ink); color: var(--text-inv); }
.cat-card:hover .cat-card__media img { transform: scale(1.06); }

.cat-card__body {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		'index name go'
		'index count go';
	align-items: center;
	column-gap: 1rem;
	padding: clamp(1.1rem, 1.8vw, 1.5rem);
}

.cat-card__index {
	grid-area: index;
	font-size: var(--fs-mono);
	color: var(--signal);
	letter-spacing: 0.14em;
}

.cat-card__name {
	grid-area: name;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: var(--fs-h4);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.cat-card__count {
	grid-area: count;
	font-size: 0.625rem;
	color: var(--faint);
}

.cat-card:hover .cat-card__count { color: var(--muted-inv); }

.cat-card__go {
	grid-area: go;
	display: flex;
	transition: transform 0.45s var(--ease);
}

.cat-card:hover .cat-card__go { transform: translateX(6px); color: var(--signal); }

/* --- Cards: news ------------------------------------------------------ */

.n-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

.n-card {
	display: flex;
	flex-direction: column;
	background: var(--paper-2);
	transition: background var(--dur) var(--ease);
}

.n-card:hover { background: var(--white); }

.n-card__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--paper-3);
}

.n-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--ease);
}

.n-card:hover .n-card__media img { transform: scale(1.045); }

.n-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	flex: 1;
	padding: clamp(1.25rem, 2vw, 1.85rem);
}

.n-card__meta {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.625rem;
	color: var(--faint);
	letter-spacing: 0.16em;
}

.n-card__title {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: var(--fs-h3);
	line-height: 1.16;
	letter-spacing: -0.015em;
}

.n-card__excerpt {
	font-size: var(--fs-sm);
	color: var(--muted);
	line-height: 1.6;
}

.n-card__body .link-arrow { margin-top: auto; padding-top: 1rem; }

/* News list variant: one row per article, no grid gaps */
.n-grid--list {
	grid-template-columns: 1fr;
}

.n-grid--list .n-card {
	display: grid;
	grid-template-columns: minmax(0, 32%) minmax(0, 1fr);
}

.n-grid--list .n-card__media { aspect-ratio: 4 / 3; height: 100%; }

@media (max-width: 700px) {
	.n-grid--list .n-card { grid-template-columns: 1fr; }
}

/* --- Stats ------------------------------------------------------------ */

.stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

.stat {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--paper);
}

.stat__value {
	font-family: var(--f-display);
	font-weight: 800;
	font-size: clamp(2.25rem, 4vw, 3.75rem);
	line-height: 0.95;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.stat__label {
	font-size: var(--fs-mono);
	color: var(--muted);
	letter-spacing: 0.18em;
}

/* --- Steps ------------------------------------------------------------ */

.steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

.step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: clamp(1.5rem, 2.6vw, 2.5rem);
	background: var(--paper);
	transition: background var(--dur) var(--ease);
}

.step:hover { background: var(--paper-2); }

.step__icon {
	display: flex;
	color: var(--signal);
	margin-bottom: 0.35rem;
}

.step__index {
	position: absolute;
	top: clamp(1.5rem, 2.6vw, 2.5rem);
	right: clamp(1.5rem, 2.6vw, 2.5rem);
	font-size: var(--fs-mono);
	color: var(--faint);
}

.step__title {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: var(--fs-h4);
	text-transform: uppercase;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.step__text {
	font-size: var(--fs-sm);
	color: var(--muted);
	line-height: 1.6;
}

/* --- Spec table ------------------------------------------------------- */

.spec-table {
	border-top: 1px solid var(--line-2);
	padding-top: 1.5rem;
}

.spec-table__title {
	font-family: var(--f-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 1rem;
}

.spec-table__row {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 1rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--line);
}

.spec-table__row dt {
	font-size: var(--fs-mono);
	color: var(--faint);
	letter-spacing: 0.14em;
}

.spec-table__row dd {
	font-size: 0.9375rem;
	font-weight: 500;
}

/* --- Empty states, pagination, breadcrumbs ---------------------------- */

.empty {
	border: 1px solid var(--line);
	padding: clamp(2.5rem, 6vw, 5rem);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}

.empty__code {
	font-family: var(--f-display);
	font-weight: 800;
	font-size: clamp(4rem, 14vw, 11rem);
	line-height: 0.85;
	letter-spacing: -0.04em;
	color: var(--signal);
}

.empty__title {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: var(--fs-h2);
	text-transform: uppercase;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.empty__text {
	color: var(--muted);
	max-width: 52ch;
}

.empty__search { width: min(460px, 100%); }
.empty__actions { justify-content: center; }

.pager {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid var(--line);
	padding-top: 1.5rem;
}

.pager .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	width: fit-content;
}

.pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 48px;
	padding: 0 0.75rem;
	background: var(--paper);
	font-family: var(--f-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.14em;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.pager .page-numbers:hover { background: var(--paper-2); }

.pager .page-numbers.current {
	background: var(--ink);
	color: var(--text-inv);
}

.crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--fs-mono);
	letter-spacing: 0.16em;
	color: var(--faint);
}

.crumbs__item + .crumbs__item::before {
	content: '/';
	margin-right: 0.5rem;
	color: var(--line-2);
}

.crumbs a:hover { color: var(--signal); }
.crumbs [aria-current] { color: var(--text); }

.field--ink .crumbs [aria-current] { color: var(--text-inv); }

/* -------------------------------------------------------------------------
   8. Header, navigation, search
   ---------------------------------------------------------------------- */

.site-header .topbar {
	overflow: hidden;
	max-height: 60px;
	transition: max-height 0.45s var(--ease), opacity 0.3s var(--ease);
}

.site-header.is-condensed .topbar {
	max-height: 0;
	opacity: 0;
}

.topbar {
	background: var(--ink);
	color: var(--muted-inv);
	border-bottom: 1px solid var(--line-inv);
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 38px;
	font-size: 0.625rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.topbar__contacts {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}

.topbar__contacts a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: color var(--dur-fast) var(--ease);
}

.topbar__contacts a:hover { color: var(--signal); }
.topbar__contacts svg { opacity: 0.6; }

@media (max-width: 899px) {
	.topbar__text { display: none; }
	.topbar__inner { justify-content: flex-end; }
	.topbar__contacts { gap: 1rem; }
}

/* The header rides directly under the frame's top bar. Over the ink hero it
   is transparent and light; once it condenses it becomes a paper band. */
.site-header {
	position: relative;
	z-index: 100;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	transition: background 0.45s var(--ease), border-color 0.45s var(--ease), color 0.45s var(--ease);
}

.site-header--sticky {
	position: sticky;
	top: var(--frame);
}

.site-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: clamp(1rem, 3vw, 3rem);
	min-height: var(--header-h);
	transition: min-height 0.45s var(--ease);
}

.site-header.is-condensed .site-header__inner { min-height: 62px; }

/* Inverted state: the header is sitting on top of an ink chapter. It takes an
   ink ground of its own rather than going transparent — a transparent mast is
   unreadable for the handful of pixels where the chapter boundary crosses it,
   and that is exactly where a reader is looking. */
.site-header.is-inverted {
	background: var(--ink);
	border-bottom-color: var(--line-inv);
	color: var(--text-inv);
}

.site-header.is-inverted .icon-btn { border-color: var(--line-inv-2); }
.site-header.is-inverted .brand__mark { background: var(--signal); }
.site-header.is-inverted .brand__tagline { color: var(--muted-inv); }
.site-header.is-inverted .burger__bar { background: var(--text-inv); }

.site-header.is-inverted .btn--primary {
	background: var(--signal);
	color: var(--white);
}

.site-header.is-inverted .btn--primary::before { background: var(--white); }
.site-header.is-inverted .btn--primary:hover { color: var(--ink); }

/* Brand */
.brand {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.brand__type {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.brand__mark {
	width: 12px;
	height: 12px;
	background: var(--signal);
	flex: none;
}

.brand__name {
	font-family: var(--f-display);
	font-weight: 800;
	font-size: 1.3125rem;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	line-height: 1;
}

.brand__tagline {
	font-family: var(--f-mono);
	font-size: 0.5625rem;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--faint);
	padding-left: 1.35rem;
}

.brand__marks img { max-height: 40px; width: auto; }
.brand__logo--light { display: none; }
.site-header.is-inverted .brand__logo--light,
.site-footer .brand__logo--light { display: block; }
.site-header.is-inverted .brand__logo--dark,
.site-footer .brand__logo--dark { display: none; }

/* Primary navigation */
.nav {
	justify-self: center;
}

.nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.2vw, 2.25rem);
}

.nav__list > li { position: relative; }

.nav__list a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.5rem 0;
	font-size: var(--fs-mono);
	font-weight: 500;
	letter-spacing: 0.16em;
	white-space: nowrap;
}

.nav__list > li > a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	width: 100%;
	background: var(--signal);
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform 0.42s var(--ease);
}

.nav__list > li > a:hover::after,
.nav__list > li.current-menu-item > a::after,
.nav__list > li.current-menu-ancestor > a::after {
	transform: scaleX(1);
	transform-origin: 0 50%;
}

.nav__list .submenu {
	position: absolute;
	top: 100%;
	left: -1rem;
	min-width: 244px;
	padding: 0.5rem 0;
	background: var(--paper-2);
	border: 1px solid var(--line);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}

.nav__list > li:hover > .submenu,
.nav__list > li:focus-within > .submenu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.nav__list .submenu a {
	display: block;
	padding: 0.6rem 1rem;
	color: var(--text);
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.nav__list .submenu a:hover {
	background: var(--ink);
	color: var(--text-inv);
}

.menu-link__caret {
	transition: transform 0.35s var(--ease);
	opacity: 0.55;
}

.nav__list > li:hover .menu-link__caret { transform: rotate(180deg); }

/* The disclosure button is a mobile/keyboard affordance; on desktop hover and
   focus-within already open the panel. */
.nav .submenu-toggle { display: none; }

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	justify-self: end;
}

.site-header__cta { flex: none; }

/* Burger */
.burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 46px;
	height: 46px;
	border: 1px solid var(--line);
}

.burger__bar {
	display: block;
	width: 18px;
	height: 1px;
	margin-inline: auto;
	background: var(--text);
	transition: transform 0.35s var(--ease), opacity 0.2s var(--ease);
}

.burger.is-active .burger__bar:first-child { transform: translateY(3px) rotate(45deg); }
.burger.is-active .burger__bar:last-child { transform: translateY(-3px) rotate(-45deg); }

/* Legacy progress bar inside the header is replaced by the frame's bottom
   bar; keep the element harmless if a cached template still prints it. */
.header-progress { display: none; }

/* Search panel */
.search-panel {
	position: sticky;
	top: calc(var(--frame) + var(--header-h));
	z-index: 99;
	background: var(--paper-2);
	border-bottom: 1px solid var(--line);
}

.search-panel__inner {
	display: flex;
	align-items: flex-end;
	gap: 1.5rem;
	padding-block: 1.5rem;
}

.search-panel .searchform { flex: 1; }

/* Mobile navigation */
.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 110;
	visibility: hidden;
}

.mobile-nav.is-open { visibility: visible; }

.mobile-nav__scrim {
	position: absolute;
	inset: 0;
	background: rgba(17, 19, 17, 0.6);
	opacity: 0;
	transition: opacity 0.4s var(--ease);
}

.mobile-nav.is-open .mobile-nav__scrim { opacity: 1; }

.mobile-nav__panel {
	position: absolute;
	top: var(--frame);
	right: var(--frame);
	bottom: var(--frame);
	width: min(420px, calc(100% - var(--frame) * 2));
	display: flex;
	flex-direction: column;
	background: var(--ink);
	color: var(--text-inv);
	transform: translateX(100%);
	transition: transform 0.5s var(--ease);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mobile-nav.is-open .mobile-nav__panel { transform: none; }

.mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--line-inv);
}

.mobile-nav__head .icon-btn { border-color: var(--line-inv-2); }

.mobile-nav__nav { padding: 0.5rem 0; }

.mobile-nav__list > li { border-bottom: 1px solid var(--line-inv); }

.mobile-nav__list > li { position: relative; }

.mobile-nav__nav a {
	display: block;
	padding: 1.05rem 1.5rem;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.mobile-nav__nav .submenu {
	display: none;
	padding-bottom: 0.5rem;
	border-top: 1px solid var(--line-inv);
}

.mobile-nav__nav .has-sub.is-open .submenu { display: block; }

.mobile-nav__nav .submenu a {
	font-family: var(--f-mono);
	font-size: var(--fs-mono);
	font-weight: 400;
	letter-spacing: 0.16em;
	padding: 0.75rem 1.5rem 0.75rem 2.5rem;
	color: var(--muted-inv);
}

.mobile-nav__nav .submenu-toggle {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	color: var(--text-inv);
}

.mobile-nav__nav .has-sub.is-open > .submenu-toggle svg { transform: rotate(45deg); }
.mobile-nav__nav .submenu-toggle svg { transition: transform 0.3s var(--ease); }

.mobile-nav__nav .menu-link__caret { display: none; }

.mobile-nav__foot {
	margin-top: auto;
	padding: 1.5rem;
	border-top: 1px solid var(--line-inv);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.mobile-nav__contacts {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	font-family: var(--f-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted-inv);
}

.mobile-nav__contacts a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

@media (max-width: 1099px) {
	.nav { display: none; }
	.burger { display: flex; }
	.site-header__cta { display: none; }
}

/* -------------------------------------------------------------------------
   9. Home
   ---------------------------------------------------------------------- */

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

.hero {
	position: relative;
	background: var(--ink);
	color: var(--text-inv);
	overflow: hidden;
}

.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 47%) minmax(0, 53%);
	min-height: min(880px, calc(100svh - var(--frame) * 2 - var(--header-h)));
}

.hero__panel {
	position: relative;
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 3vw, 2.75rem) clamp(2rem, 4vw, 4rem) clamp(2.5rem, 4vw, 3.25rem) var(--gutter);
	margin-left: max(0px, calc((100vw - var(--shell)) / 2));
}

/* Column guides confined to the ink panel, so the type sits on a visible
   drawing grid rather than floating. */
.hero__guides {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	pointer-events: none;
}

.hero__guides span {
	border-left: 1px solid var(--line-inv);
	opacity: 0.6;
}

.hero__guides span:first-child { border-left: 0; }

.hero__rail {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	font-family: var(--f-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--muted-inv);
	padding-bottom: clamp(1.25rem, 3vw, 2.5rem);
}

.hero__rail-index { color: var(--signal); }

.hero__rail .rule {
	flex: 1;
	max-width: 96px;
	background: var(--line-inv-2);
}

.hero__copy {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp(1.1rem, 1.8vw, 1.75rem);
	margin-top: auto;
}

.hero__text {
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--muted-inv);
	max-width: 44ch;
}

.hero__actions { padding-top: 0.5rem; }

/* Spec ribbon: four mono cells on one hairline rule. This is the payload a
   racking buyer scans for, so it sits in the first screen. */
.hero__specs {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--line-inv);
	border-top: 1px solid var(--line-inv);
	margin-top: clamp(1.5rem, 3vw, 2.75rem);
}

.hero-spec {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.15rem 1rem 1rem 0;
	background: var(--ink);
}

.hero-spec__label {
	font-size: 0.5625rem;
	letter-spacing: 0.2em;
	color: var(--faint-inv);
}

.hero-spec__value {
	font-family: var(--f-mono);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--text-inv);
}

.hero__cue {
	position: absolute;
	left: var(--gutter);
	bottom: clamp(1.5rem, 3vw, 2.5rem);
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--f-mono);
	font-size: 0.5625rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--faint-inv);
}

.hero__cue-text { line-height: 1; }

.hero__cue-line {
	display: block;
	width: 46px;
	height: 1px;
	background: var(--line-inv-2);
	overflow: hidden;
	position: relative;
}

.hero__cue-line::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--signal);
	animation: cue 2.6s var(--ease-io) infinite;
}

@keyframes cue {
	0% { transform: translateX(-100%); }
	55%, 100% { transform: translateX(100%); }
}

.is-offscreen .hero__cue-line::after { animation-play-state: paused; }

/* Media half */
.hero__media {
	position: relative;
	overflow: hidden;
	background: var(--ink-2);
}

.hero__img,
.hero__video {
	position: absolute;
	inset: -6% 0;
	width: 100%;
	height: 112%;
	object-fit: cover;
}

.hero__video {
	opacity: 0;
	transition: opacity 0.9s var(--ease);
}

.hero__video.is-ready { opacity: 1; }

/* A hairline seam instead of a gradient: the two halves meet on a drawn
   edge, the way two steel panels do. */
.hero__seam {
	position: absolute;
	inset: 0 auto 0 0;
	width: 1px;
	background: var(--line-inv-2);
	z-index: 2;
}

.hero__readout {
	position: absolute;
	right: clamp(1rem, 2vw, 2rem);
	top: clamp(1rem, 2vw, 2rem);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.75rem;
	background: rgba(17, 19, 17, 0.72);
	backdrop-filter: blur(6px);
	font-family: var(--f-mono);
	font-size: 0.5625rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-inv);
}

.hero__readout::before {
	content: '';
	width: 6px;
	height: 6px;
	background: var(--signal);
	animation: pulse 2s steps(1) infinite;
}

@keyframes pulse {
	0%, 60% { opacity: 1; }
	61%, 100% { opacity: 0.25; }
}

.is-offscreen .hero__readout::before { animation-play-state: paused; }

@media (max-width: 979px) {
	.hero__grid {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.hero__panel {
		margin-left: 0;
		padding: clamp(2rem, 6vw, 3rem) var(--gutter) clamp(3.5rem, 8vw, 4.5rem);
	}

	.hero__copy { margin-top: clamp(2rem, 8vw, 4rem); }
	.hero__media { aspect-ratio: 4 / 3; }
	.hero__img, .hero__video { inset: 0; height: 100%; }
	.hero__seam { inset: 0 0 auto 0; width: auto; height: 1px; }
	.hero__cue { display: none; }
	.hero__guides { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
	.hero__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hero-spec { padding-left: 1rem; }
}

/* --- Marquee ---------------------------------------------------------- */

.marquee {
	position: relative;
	background: var(--signal);
	color: var(--ink);
	overflow: hidden;
	padding-block: clamp(0.85rem, 1.4vw, 1.25rem);
	border-block: 1px solid var(--ink);
}

.marquee__track {
	display: flex;
	width: max-content;
	will-change: transform;
}

.marquee__item {
	font-family: var(--f-display);
	font-weight: 800;
	font-size: clamp(1.75rem, 4.6vw, 4.5rem);
	text-transform: uppercase;
	letter-spacing: -0.03em;
	line-height: 1.05;
	padding-right: 2.5rem;
	white-space: nowrap;
}

/* --- Categories ------------------------------------------------------- */

.section--cats { background: transparent; }

/* --- Story (pinned scroll theatre) ------------------------------------ */

.story {
	position: relative;
	background: var(--ink);
	color: var(--text-inv);
}

.story__pin {
	display: flex;
	align-items: center;
	padding-block: var(--chapter);
	min-height: 0;
}

.story.is-pinned .story__pin {
	min-height: 100svh;
	padding-block: 0;
}

.story__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: center;
	width: 100%;
}

.story__aside {
	display: flex;
	flex-direction: column;
	gap: clamp(1.25rem, 2.2vw, 2rem);
	align-self: center;
}

.story__progress {
	position: relative;
	height: 1px;
	background: var(--line-inv);
	margin-top: 0.75rem;
}

.story__progress-bar {
	position: absolute;
	inset: 0;
	background: var(--signal);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

.story__count {
	font-family: var(--f-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--faint-inv);
}

.story__panels { position: relative; }

.story.is-pinned .story__panels {
	min-height: 22rem;
}

.story.is-pinned .story-panel {
	position: absolute;
	inset: 0;
	align-content: center;
}

.story-panel {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: clamp(1.5rem, 3vw, 3rem);
	align-content: start;
	border-top: 1px solid var(--line-inv);
	padding-top: 1.75rem;
}

.story-panel + .story-panel { margin-top: 2.5rem; }
.story.is-pinned .story-panel + .story-panel { margin-top: 0; }

.story-panel__index {
	font-family: var(--f-display);
	font-weight: 800;
	font-size: clamp(3rem, 7vw, 6.5rem);
	line-height: 0.8;
	letter-spacing: -0.04em;
	color: transparent;
	-webkit-text-stroke: 1px var(--line-inv-2);
	grid-row: span 2;
}

.story-panel__title {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: clamp(1.5rem, 2.6vw, 2.25rem);
	text-transform: uppercase;
	letter-spacing: -0.015em;
	line-height: 1.05;
	margin-bottom: 0.85rem;
}

.story-panel__text {
	font-size: var(--fs-body);
	line-height: 1.65;
	color: var(--muted-inv);
	max-width: 52ch;
}

@media (max-width: 899px) {
	.story__inner { grid-template-columns: 1fr; }
	.story-panel { grid-template-columns: 1fr; row-gap: 0.75rem; }
	.story-panel__index { grid-row: auto; }
}

/* --- Industries (horizontal gallery) ---------------------------------- */

.section--ind {
	overflow: hidden;
}

.ind-track {
	display: flex;
	gap: var(--gap);
	padding-inline: var(--gutter);
	padding-bottom: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.ind-card { scroll-snap-align: start; }

/* Pinned: the motion system drives the track with scroll, so it must be free
   to be wider than its box and must not fight a native scroller. */
.section--ind.is-pinned .ind-track {
	width: max-content;
	overflow: visible;
	scroll-snap-type: none;
	padding-bottom: 0;
}

.ind-card {
	flex: none;
	width: min(680px, 76vw);
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border: 1px solid var(--line);
}

.ind-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--paper-3);
}

.ind-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.field--ink .ind-card {
	background: var(--ink-2);
	border-color: var(--line-inv);
}

.field--ink .ind-card__media { background: var(--ink-3); }
.field--ink .ind-card__body { border-top-color: var(--line-inv); }
.field--ink .ind-card__text { color: var(--muted-inv); }

.ind-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: clamp(1.25rem, 2.2vw, 2rem);
	border-top: 1px solid var(--line);
}

.ind-card__title {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: var(--fs-h3);
	text-transform: uppercase;
	letter-spacing: -0.015em;
	line-height: 1.1;
}

.ind-card__text {
	font-size: var(--fs-sm);
	color: var(--muted);
	line-height: 1.6;
	max-width: 56ch;
}

/* --- Reel (scroll-scrubbed video) ------------------------------------- */

.reel {
	position: relative;
	background: var(--ink);
	color: var(--text-inv);
}

.reel__stage {
	position: relative;
	height: 100svh;
	overflow: hidden;
}

.reel__video,
.reel__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.reel__poster { z-index: 1; }
.reel__stage.is-live .reel__poster { opacity: 0; }

.reel__scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(90deg, rgba(17, 19, 17, 0.88) 0%, rgba(17, 19, 17, 0.35) 55%, rgba(17, 19, 17, 0.1) 100%);
}

.reel__copy {
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	bottom: clamp(2rem, 6vw, 5rem);
}

.reel__caption {
	font-family: var(--f-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--signal);
}

.reel__title {
	font-family: var(--f-display);
	font-weight: 800;
	font-size: var(--fs-h2);
	text-transform: uppercase;
	line-height: 0.9;
	letter-spacing: -0.03em;
	margin-block: 1rem;
}

.reel__text {
	font-size: var(--fs-lead);
	color: var(--muted-inv);
	max-width: 46ch;
}

.reel__steps {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-top: 2rem;
}

.reel__step {
	position: relative;
	padding-top: 0.85rem;
	font-family: var(--f-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--faint-inv);
	transition: color 0.4s var(--ease);
}

.reel__step::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--line-inv);
}

.reel__step.is-active { color: var(--text-inv); }
.reel__step.is-active::before { background: var(--signal); }

.reel.is-static .reel__stage { height: auto; aspect-ratio: 16 / 9; }

/* --- Closing CTA ------------------------------------------------------ */

.cta {
	position: relative;
	background: var(--ink);
	color: var(--text-inv);
	overflow: hidden;
	padding-block: var(--chapter);
}

.cta__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.cta__img {
	width: 100%;
	height: 112%;
	object-fit: cover;
	position: absolute;
	inset: -6% 0;
	filter: grayscale(1) contrast(1.1);
}

.cta__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(17, 19, 17, 0.95) 0%, rgba(17, 19, 17, 0.86) 45%, rgba(17, 19, 17, 0.7) 100%);
}

.cta__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}

.cta__copy {
	display: flex;
	flex-direction: column;
	gap: clamp(1.25rem, 2vw, 1.75rem);
}

.cta__text {
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--muted-inv);
	max-width: 44ch;
}

.cta__contacts {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line-inv);
	font-family: var(--f-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.cta__contacts li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.cta__contacts a:hover { color: var(--signal); }

.cta__form {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border: 1px solid var(--line-inv-2);
	background: rgba(17, 19, 17, 0.5);
	backdrop-filter: blur(4px);
}

@media (max-width: 899px) {
	.cta__inner { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   10. Inner templates
   ---------------------------------------------------------------------- */

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

.page-hero {
	position: relative;
	background: var(--ink);
	color: var(--text-inv);
	overflow: hidden;
	padding-block: clamp(3rem, 7vw, 6.5rem) clamp(2.5rem, 5vw, 4.5rem);
}

.page-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: end;
}

.page-hero--media .page-hero__inner {
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
}

.page-hero--meta .page-hero__inner {
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
}

/* Engineering metadata, right-aligned against the headline. Keeps a short
   title ("Shop") from leaving half a dark band empty. */
.page-hero__meta {
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 1px solid var(--line-inv);
}

/* Values are set hard against the right edge, which is where the floating
   contact rail lives. Reserve its width so a figure is never read half. */
@media (min-width: 768px) {
	.page-hero__meta { padding-right: var(--rail-w); }
}

.page-hero__meta-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--line-inv);
}

.page-hero__meta-row dt {
	font-family: var(--f-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--faint-inv);
}

.page-hero__meta-row dd {
	margin: 0;
	font-family: var(--f-mono);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--text-inv);
	text-align: right;
}

.page-hero__copy {
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2vw, 1.75rem);
}

.page-hero .crumbs__list { color: var(--faint-inv); }
.page-hero .crumbs [aria-current] { color: var(--text-inv); }
.page-hero .crumbs__item + .crumbs__item::before { color: var(--line-inv-2); }

.page-hero__text {
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--muted-inv);
	max-width: 56ch;
}

.page-hero__figure {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 1px solid var(--line-inv-2);
}

.page-hero__img {
	position: absolute;
	inset: -6% 0;
	width: 100%;
	height: 112%;
	object-fit: cover;
}

@media (max-width: 899px) {
	.page-hero--media .page-hero__inner,
	.page-hero--meta .page-hero__inner { grid-template-columns: 1fr; }
}

/* --- Sidebar layout --------------------------------------------------- */

.layout--sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.layout__side {
	position: sticky;
	top: calc(var(--frame) + var(--header-h) + 1.5rem);
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

@media (max-width: 979px) {
	.layout--sidebar { grid-template-columns: 1fr; }
	.layout__side { position: static; }
}

.widget {
	border-top: 1px solid var(--line-2);
	padding-top: 1.25rem;
}

.widget__title {
	font-family: var(--f-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 1rem;
}

.widget li + li { margin-top: 0.6rem; }
.widget a:hover { color: var(--signal); }

/* Block widgets print their own headings and search form instead of going
   through before_title / searchform.php, so the sidebar has to claim them or
   half the column ends up in someone else's type scale. */
.layout__side .wp-block-heading,
.layout__side .widget > h2:not(.widget__title) {
	font-family: var(--f-mono);
	font-size: var(--fs-mono);
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 1rem;
}

.layout__side .wp-block-latest-posts,
.layout__side .wp-block-latest-comments,
.layout__side .wp-block-categories,
.layout__side .wp-block-archives {
	padding: 0;
	list-style: none;
	font-size: var(--fs-sm);
	line-height: 1.5;
}

.layout__side li + li { margin-top: 0.75rem; }

.layout__side .wp-block-search__inside-wrapper {
	display: flex;
	align-items: stretch;
	gap: 0.75rem;
	border: 0;
}

.layout__side .wp-block-search__input {
	flex: 1;
	min-width: 0;
	border: 0;
	border-bottom: 1px solid var(--line-2);
	border-radius: 0;
	background: transparent;
	padding: 0.65rem 0;
}

.layout__side .wp-block-search__button {
	flex: none;
	margin: 0;
	padding: 0 1rem;
	border: 0;
	border-radius: 0;
	background: var(--ink);
	color: var(--text-inv);
	font-family: var(--f-mono);
	font-size: 0.625rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	transition: background var(--dur-fast) var(--ease);
}

.layout__side .wp-block-search__button:hover { background: var(--signal); }

/* --- Single post ------------------------------------------------------ */

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
}

.tags a {
	display: inline-block;
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--line);
	font-family: var(--f-mono);
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.tags a:hover { border-color: var(--signal); color: var(--signal); }

.post-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.post-nav a {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: clamp(1.25rem, 2.4vw, 2rem);
	background: var(--paper);
	transition: background var(--dur-fast) var(--ease);
}

.post-nav a:hover { background: var(--paper-2); }

.post-nav__prev,
.post-nav__next {
	font-family: var(--f-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--signal);
}

.post-nav__next { text-align: right; }
.post-nav a:last-child { text-align: right; }

@media (max-width: 700px) {
	.post-nav { grid-template-columns: 1fr; }
	.post-nav a:last-child { text-align: left; }
	.post-nav__next { text-align: left; }
}

.page-links {
	display: flex;
	gap: 0.5rem;
	margin-top: 2rem;
	font-family: var(--f-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.14em;
}

/* --- Comments --------------------------------------------------------- */

.comments {
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--line-2);
}

.comments__title {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: var(--fs-h3);
	text-transform: uppercase;
	letter-spacing: -0.015em;
	margin-bottom: 1.75rem;
}

.comments__list li {
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--line);
}

.comments__list .children { padding-left: 1.75rem; }

.comment-form {
	display: grid;
	gap: 1.25rem;
	margin-top: 2rem;
	max-width: 640px;
}

.comment-form .form-submit { margin: 0; }

/* --- Product single --------------------------------------------------- */

.p-single__top {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.p-single__gallery {
	position: relative;
	border: 1px solid var(--line);
	background: var(--paper-2);
	padding: 1px;
}

.p-single__summary {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding-top: 0.5rem;
}

@media (min-width: 768px) {
	.p-single__summary { padding-right: var(--rail-w); }
}

.p-single__sku {
	font-family: var(--f-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--signal);
}

.p-single__short {
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--muted);
	max-width: 52ch;
}

.p-single__highlights {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding-top: 0.5rem;
}

.p-single__highlights li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: var(--fs-sm);
	line-height: 1.55;
}

.p-single__highlights svg {
	flex: none;
	margin-top: 0.15rem;
	color: var(--signal);
}

.p-single__actions { padding-top: 0.75rem; }

.section--p-desc { background: var(--paper-2); }

.p-single__desc-title {
	font-family: var(--f-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 1.5rem;
}

.section--p-inquiry { background: var(--ink); color: var(--text-inv); }

.p-inquiry {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.p-inquiry__title {
	font-family: var(--f-display);
	font-weight: 800;
	font-size: var(--fs-h2);
	text-transform: uppercase;
	line-height: 0.95;
	letter-spacing: -0.03em;
	margin-block: 1rem 0.85rem;
}

.p-inquiry__text {
	color: var(--muted-inv);
	max-width: 48ch;
}

.section--p-inquiry label { color: var(--muted-inv); }

.section--p-inquiry input,
.section--p-inquiry select,
.section--p-inquiry textarea {
	color: var(--text-inv);
	border-bottom-color: var(--line-inv-2);
}

.section--p-inquiry button[type='submit'],
.section--p-inquiry input[type='submit'] {
	background: var(--signal);
	color: var(--white);
}

@media (max-width: 899px) {
	.p-single__top,
	.p-inquiry { grid-template-columns: 1fr; }
}

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

.contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

/* The enquiry form is the conversion path on this page; the floating rail must
   not sit on top of its fields. */
@media (min-width: 768px) {
	.contact { padding-right: var(--rail-w); }
}

.contact__aside {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.contact__list {
	display: grid;
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

.contact__list li {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem;
	background: var(--paper);
}

.contact__icon { color: var(--signal); flex: none; }

.contact__body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.contact__label {
	font-family: var(--f-mono);
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--faint);
}

.contact__value { font-size: 0.9375rem; line-height: 1.5; }
a.contact__value:hover { color: var(--signal); }

.contact__form {
	border: 1px solid var(--line);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--paper-2);
}

.contact__form-title {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: var(--fs-h3);
	text-transform: uppercase;
	letter-spacing: -0.015em;
	margin-bottom: 1.5rem;
}

.contact__map {
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

.contact__map iframe {
	width: 100%;
	min-height: 380px;
	border: 1px solid var(--line);
	filter: grayscale(1) contrast(1.05);
}

@media (max-width: 899px) {
	.contact { grid-template-columns: 1fr; }
}

/* --- Search results --------------------------------------------------- */

.results {
	display: grid;
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

.result {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: clamp(1.25rem, 2.4vw, 2rem);
	background: var(--paper);
	transition: background var(--dur-fast) var(--ease);
}

.result:hover { background: var(--paper-2); }

.result__type {
	font-family: var(--f-mono);
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--signal);
}

.result__title {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: var(--fs-h3);
	text-transform: uppercase;
	letter-spacing: -0.015em;
	line-height: 1.15;
}

.result__text { font-size: var(--fs-sm); color: var(--muted); }

.search-again { margin-top: 2rem; max-width: 480px; }

/* --- 404 -------------------------------------------------------------- */

.section--404 { padding-block: clamp(4rem, 10vw, 9rem); }
.empty--404 { border-color: var(--line-2); }

/* -------------------------------------------------------------------------
   11. WooCommerce surfaces
   ---------------------------------------------------------------------- */

.woocommerce-product-gallery { position: relative; }

.woocommerce-product-gallery__wrapper { margin: 0; }

.woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	display: block;
}

.woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	gap: 1px;
	background: var(--line);
	margin: 1px 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce-product-gallery .flex-control-thumbs li {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

.woocommerce-product-gallery .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity var(--dur-fast) var(--ease);
}

.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; }

.woocommerce-product-gallery__trigger {
	position: absolute;
	z-index: 3;
	right: 12px;
	top: 12px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ink);
	color: var(--text-inv);
	font-size: 0;
}

.woocommerce-product-gallery__trigger::after {
	content: '+';
	font-family: var(--f-mono);
	font-size: 1.25rem;
	line-height: 1;
}

.flex-direction-nav {
	position: absolute;
	inset: auto 0 12px;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 1px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.flex-direction-nav a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 40px;
	background: var(--ink);
	color: var(--text-inv);
	font-family: var(--f-mono);
	font-size: 0;
}

.flex-direction-nav .flex-prev::after { content: '←'; font-size: 1rem; }
.flex-direction-nav .flex-next::after { content: '→'; font-size: 1rem; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message {
	border: 1px solid var(--line-2);
	border-left: 2px solid var(--signal);
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	font-size: var(--fs-sm);
	list-style: none;
	background: var(--paper-2);
}

.woocommerce-breadcrumb { display: none; }

/* -------------------------------------------------------------------------
   11b. Inquiry plugin surfaces
   -------------------------------------------------------------------------
   The inquiry form is owned by the ZC Inquiry plugin and its stylesheet is
   enqueued after the theme's, so these rules carry the `.rkl-inquiry` wrapper
   the theme adds in order to out-specify it. The form is a conversion surface,
   not a plugin leftover: it gets the same hairline fields, mono labels and
   square actions as the rest of the site.
   ---------------------------------------------------------------------- */

.rkl-inquiry.zc-inquiry-block {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.rkl-inquiry .zc-inquiry-block__intro { margin-bottom: 1.25rem; }
.rkl-inquiry .zc-inquiry-block__intro h2:empty { display: none; }

.rkl-inquiry .zc-inquiry-block__intro h2 {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: var(--fs-h3);
	text-transform: uppercase;
	letter-spacing: -0.015em;
	line-height: 1.1;
	margin: 0 0 0.5rem;
}

.rkl-inquiry .zc-inquiry-form__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 1.5rem;
	margin-bottom: 1.75rem;
}

.rkl-inquiry .zc-inquiry-field { gap: 0.15rem; }

.rkl-inquiry .zc-inquiry-field label {
	font-family: var(--f-mono);
	font-size: var(--fs-mono);
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

.rkl-inquiry .zc-required {
	color: var(--signal);
	margin-left: 0.35rem;
}

.rkl-inquiry .zc-inquiry-field input,
.rkl-inquiry .zc-inquiry-field textarea {
	border: 0;
	border-bottom: 1px solid var(--line-2);
	border-radius: 0;
	padding: 0.9rem 0;
	background: transparent;
	font-family: var(--f-body);
	font-size: 0.9375rem;
	color: inherit;
	transition: border-color var(--dur-fast) var(--ease);
}

.rkl-inquiry .zc-inquiry-field input:focus,
.rkl-inquiry .zc-inquiry-field textarea:focus {
	outline: none;
	border-bottom-color: var(--signal);
}

.rkl-inquiry .zc-inquiry-field textarea { min-height: 118px; }

/* The message field is worth a full row; a half-width box invites one line. */
.rkl-inquiry .zc-inquiry-field:has( textarea ) { grid-column: 1 / -1; }

.rkl-inquiry .zc-file-input {
	border: 1px solid var(--line-2);
	border-radius: 0;
	padding: 0.65rem 0.85rem;
	gap: 0.85rem;
}

.rkl-inquiry .zc-file-input__button {
	border: 1px solid var(--line-2);
	border-radius: 0;
	padding: 0.35rem 0.6rem;
	font-family: var(--f-mono);
	font-size: 0.625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.rkl-inquiry .zc-file-input__name {
	font-family: var(--f-mono);
	font-size: 0.6875rem;
	color: var(--muted);
}

.rkl-inquiry .zc-btn,
.rkl-inquiry .zc-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 0 2rem;
	border: 0;
	border-radius: 0;
	background: var(--ink);
	color: var(--text-inv);
	font-family: var(--f-mono);
	font-size: var(--fs-mono);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.rkl-inquiry .zc-btn:hover,
.rkl-inquiry .zc-btn-primary:hover {
	background: var(--signal);
	color: var(--white);
}

.rkl-inquiry .zc-inquiry-notice {
	border-radius: 0;
	border: 1px solid var(--line-2);
	border-left: 2px solid var(--signal);
	padding: 0.85rem 1rem;
	font-size: var(--fs-sm);
	background: transparent;
}

.rkl-inquiry .zc-inquiry-notice.is-success { border-left-color: var(--ink); }

/* On an ink chapter the same form runs light. */
.field--ink .rkl-inquiry .zc-inquiry-field label,
.cta .rkl-inquiry .zc-inquiry-field label { color: var(--muted-inv); }

.field--ink .rkl-inquiry .zc-inquiry-field input,
.field--ink .rkl-inquiry .zc-inquiry-field textarea,
.cta .rkl-inquiry .zc-inquiry-field input,
.cta .rkl-inquiry .zc-inquiry-field textarea {
	color: var(--text-inv);
	border-bottom-color: var(--line-inv-2);
}

.field--ink .rkl-inquiry .zc-inquiry-field input::placeholder,
.cta .rkl-inquiry .zc-inquiry-field input::placeholder,
.field--ink .rkl-inquiry .zc-inquiry-field textarea::placeholder,
.cta .rkl-inquiry .zc-inquiry-field textarea::placeholder { color: var(--faint-inv); }

.field--ink .rkl-inquiry .zc-btn,
.cta .rkl-inquiry .zc-btn {
	background: var(--signal);
	color: var(--white);
}

.field--ink .rkl-inquiry .zc-btn:hover,
.cta .rkl-inquiry .zc-btn:hover {
	background: var(--white);
	color: var(--ink);
}

.field--ink .rkl-inquiry .zc-file-input,
.cta .rkl-inquiry .zc-file-input { border-color: var(--line-inv-2); }

/* Plugin modal and toast */
.zc-modal__dialog {
	border-radius: 0;
	border: 1px solid var(--line-2);
	background: var(--paper-2);
	padding: clamp(1.25rem, 3vw, 2rem);
}

.zc-modal__backdrop { background: rgba(17, 19, 17, 0.72); }

.zc-modal__close {
	border-radius: 0;
	background: transparent;
	border: 1px solid var(--line);
}

.zc-inquiry-toast__inner {
	border-radius: 0;
	background: var(--ink);
	font-family: var(--f-mono);
	font-size: var(--fs-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.zc-inquiry-toast__icon { border-radius: 0; background: var(--signal); }

@media (max-width: 639px) {
	.rkl-inquiry .zc-inquiry-form__grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   12. Footer
   ---------------------------------------------------------------------- */

.site-footer {
	background: var(--ink);
	color: var(--text-inv);
	border-top: 1px solid var(--line-inv);
}

.site-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
}

/* The contact column is the one block of running text that sits at the right
   edge at the height the floating rail occupies. */
@media (min-width: 768px) {
	.site-footer__col--contact { padding-right: var(--rail-w); }
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-width: 38ch;
}

.site-footer .brand__tagline { color: var(--faint-inv); }

.site-footer__about {
	font-size: var(--fs-sm);
	line-height: 1.65;
	color: var(--muted-inv);
}

.site-footer__title {
	font-size: var(--fs-mono);
	font-weight: 400;
	letter-spacing: 0.22em;
	color: var(--faint-inv);
	margin-bottom: 1.15rem;
}

.site-footer__list li + li,
.site-footer__contacts li + li { margin-top: 0.65rem; }

.site-footer__list a,
.site-footer__contacts a,
.site-footer__contacts span {
	font-size: var(--fs-sm);
	color: var(--muted-inv);
	transition: color var(--dur-fast) var(--ease);
}

.site-footer__list a:hover,
.site-footer__contacts a:hover { color: var(--signal); }

.site-footer__contacts li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.site-footer__contacts svg { flex: none; margin-top: 0.2rem; opacity: 0.5; }

.social {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	background: var(--line-inv);
	border: 1px solid var(--line-inv);
	width: fit-content;
}

.social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: var(--ink);
	color: var(--muted-inv);
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.social__link:hover { background: var(--signal); color: var(--white); }

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.5rem;
	border-top: 1px solid var(--line-inv);
	font-family: var(--f-mono);
	font-size: 0.625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--faint-inv);
}

.site-footer__policy-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.site-footer__policy-list a:hover { color: var(--signal); }

.site-footer__note {
	flex-basis: 100%;
	text-transform: none;
	letter-spacing: 0.06em;
	line-height: 1.6;
	color: var(--faint-inv);
}

@media (max-width: 1099px) {
	.site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 599px) {
	.site-footer__top { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   13. Floating contact rail and QR dialog
   ---------------------------------------------------------------------- */

.rail {
	position: fixed;
	top: 50%;
	z-index: 95;
	transform: translateY(-50%);
}

.rail--right { right: calc(var(--frame) + 12px); }
.rail--left { left: calc(var(--frame) + 12px); }

.rail__list {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--line-2);
	border: 1px solid var(--line-2);
}

.rail__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background: var(--paper-2);
	color: var(--text);
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.rail__btn:hover { background: var(--signal); color: var(--white); }

.rail__tip {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
	padding: 0.45rem 0.65rem;
	background: var(--ink);
	color: var(--text-inv);
	font-family: var(--f-mono);
	font-size: 0.5625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur-fast) var(--ease);
}

.rail--right .rail__tip { right: calc(100% + 8px); }
.rail--left .rail__tip { left: calc(100% + 8px); }

.rail__btn:hover .rail__tip,
.rail__btn:focus-visible .rail__tip { opacity: 1; }

@media (max-width: 767px) {
	.rail--desktop { display: none; }
	.rail { top: auto; bottom: calc(var(--frame) + 12px); transform: none; }
	.rail__list { flex-direction: row; }

	.site-footer__bottom { padding-bottom: 4.5rem; }
}

.qr-modal {
	position: fixed;
	inset: 0;
	z-index: 140;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.qr-modal[hidden] { display: none; }

.qr-modal__scrim {
	position: absolute;
	inset: 0;
	background: rgba(17, 19, 17, 0.72);
}

.qr-modal__dialog {
	position: relative;
	width: min(360px, 100%);
	background: var(--paper-2);
	border: 1px solid var(--line-2);
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

.qr-modal__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 38px;
	height: 38px;
	border-color: transparent;
}

.qr-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
}

.qr-card__title {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 1.125rem;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.qr-card__text { font-size: var(--fs-sm); color: var(--muted); }
.qr-card__img { width: 200px; height: auto; border: 1px solid var(--line); }

/* -------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------
   Grids step 4 → 3 → 2 → 1 by content width, never by device name. Every
   step keeps whole cards: no ghost cells, no reserved holes.
   ---------------------------------------------------------------------- */

@media (max-width: 1099px) {
	.steps,
	.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
	:root { --header-h: 64px; }

	.p-grid,
	.cat-grid,
	.n-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.ind-card { width: min(560px, 84vw); }
}

@media (max-width: 639px) {
	.p-grid,
	.cat-grid,
	.n-grid,
	.steps,
	.stats { grid-template-columns: 1fr; }

	.btn { width: 100%; justify-content: space-between; }
	.p-card__actions .btn,
	.p-card__actions .link-arrow { width: auto; }
	.chips { overflow-x: auto; flex-wrap: nowrap; }
	.chip { white-space: nowrap; }
	.ind-card { width: 86vw; }
}

/* -------------------------------------------------------------------------
   15. Reduced motion and the offscreen guard
   -------------------------------------------------------------------------
   Two separate jobs. The media query makes the page honour an OS preference.
   `.is-offscreen` is set by the observer in motion.js and pauses looping CSS
   animations whose section has left the viewport, so a marquee scrolled far
   away stops costing frames.
   ---------------------------------------------------------------------- */

.is-offscreen .marquee__track,
.is-offscreen .hero__cue-line::after,
.is-offscreen .hero__readout::before {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	/* Anything the motion system would have revealed stays visible. */
	html.has-motion [data-motion-text],
	html.has-motion [data-reveal],
	html.has-motion [data-reveal-group],
	html.has-motion [data-image-reveal] {
		visibility: visible;
	}

	html.has-motion [data-rule] { transform: none; }

	/* One copy of the ribbon, held still, rather than a frozen duplicate. */
	.marquee__track { transform: none !important; }
	.marquee__item + .marquee__item { display: none; }

	.hero__cue-line::after,
	.hero__readout::before { animation: none; }

	.hero__img,
	.hero__video,
	.cta__img,
	.page-hero__img {
		inset: 0;
		height: 100%;
	}
}

/* Motion switched off in theme settings: same guarantees, no JS involved. */
body.motion-none [data-motion-text],
body.motion-none [data-reveal],
body.motion-none [data-reveal-group],
body.motion-none [data-image-reveal] {
	visibility: visible;
}