/* =============================================================================
   Realize3D / ProtonRC
   Light, technical, generous — built on the same design language as the
   UltiMaker site: white and sand grounds, charcoal text, one electric blue,
   IBM Plex Sans Condensed headings, near-square corners.

   The product renders are all shot on black, so they sit on deliberate dark
   panels rather than being faded onto white.
   ========================================================================== */

/* ----------------------------------------------------------------- tokens */

:root {
	/* neutrals */
	--white:       #ffffff;
	--sand-15:     #faf8f6;
	--sand-25:     #f6f3ef;
	--sand-50:     #ede8df;
	--sand:        #dad0c0;
	--metal:       #707070;
	--metal-15:    #eaeaea;
	--metal-30:    #d4d4d4;
	--metal-50:    #b8b8b8;
	--charcoal:    #282828;
	--charcoal-80: #535353;
	--charcoal-60: #7e7e7e;
	--black:       #000000;

	/* surfaces */
	--bg:          var(--white);
	--bg-alt:      var(--sand-15);
	--bg-sand:     var(--sand-25);
	--bg-dark:     var(--charcoal);
	--bg-darker:   #0f0f0f;
	--line:        var(--metal-15);
	--line-strong: var(--metal-30);

	/* text */
	--text:        var(--charcoal);
	--text-strong: var(--black);
	--text-muted:  var(--charcoal-80);
	--text-dim:    var(--charcoal-60);

	/* brand accents — overridden inline from the Customizer */
	--x:  #5b2fd6;   /* KwikJet X */
	--kj: #c41626;   /* KwikJet   */
	--r3: #100aed;   /* Realize3D */

	/* vivid variants for graphics and dark panels, where body-text contrast
	   rules do not apply */
	--x-vivid:  #8b5cf6;
	--kj-vivid: #ef2b3c;
	--r3-vivid: #403bf1;

	--accent:       var(--r3);
	--accent-vivid: var(--r3-vivid);
	/* Water in the diagrams: readable on white, relit for the dark pages. */
	--dg-flow:      var(--r3);
	--accent-soft:  color-mix(in srgb, var(--accent) 8%, var(--white));
	--accent-line:  color-mix(in srgb, var(--accent) 34%, transparent);
	--accent-on:    #ffffff;

	--font-display: "IBM Plex Sans Condensed", "Segoe UI Semibold", system-ui, -apple-system, sans-serif;
	--font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

	--wrap:        1174px;
	--wrap-narrow: 760px;
	--gut:         clamp(1.25rem, 4vw, 3rem);
	--section-y:   clamp(2.8rem, 7vw, 7.9rem);   /* 45px → 126px, as UltiMaker spaces modules */

	--r:    3px;
	--r-lg: 4px;

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur:  0.32s;
}

/* Accent context. */
.accent-x  { --accent: var(--x);  --accent-vivid: var(--x-vivid); }
.accent-kj { --accent: var(--kj); --accent-vivid: var(--kj-vivid); }
.accent-r3 { --accent: var(--r3); --accent-vivid: var(--r3-vivid); }

body.tpl-tpl-kwikjet-x { --accent: var(--x);  --accent-vivid: var(--x-vivid); }
body.tpl-tpl-kwikjet   { --accent: var(--kj); --accent-vivid: var(--kj-vivid); }
body.tpl-tpl-printing  { --accent: var(--r3); --accent-vivid: var(--r3-vivid); }

/* ------------------------------------------------------------------ reset */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
	background: var(--white);
	/*
	 * clip, not hidden: hidden would make the root a scroll container and the
	 * sticky header would have to stick to that instead of the viewport. clip
	 * only clips. Safari before 16 ignores it, which is what body's overflow-x
	 * below is still there for.
	 */
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.1;
	color: var(--text-strong);
	margin: 0 0 0.5em;
	text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-underline-offset: 0.2em; }

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

button { font: inherit; color: inherit; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--accent-on); }
hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

/* ------------------------------------------------------------------ a11y */

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

.skip-link {
	position: absolute;
	left: 50%;
	top: -100px;
	z-index: 200;
	transform: translateX(-50%);
	padding: 0.75rem 1.25rem;
	background: var(--accent);
	color: var(--accent-on);
	font-weight: 600;
	border-radius: 0 0 var(--r) var(--r);
	transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; }

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

.wrap { width: min(var(--wrap), 100% - var(--gut) * 2); margin-inline: auto; }
.wrap--narrow { width: min(var(--wrap-narrow), 100% - var(--gut) * 2); }

.section { padding-block: var(--section-y); position: relative; }
.section--editor { padding-top: 0; }
.section--alt { background: var(--bg-alt); }
.section--sand { background: var(--bg-sand); }

.layout { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 60rem) { .layout--sidebar { grid-template-columns: minmax(0, 1fr) 19rem; } }

/* ---------------------------------------------------------------- pieces */

.eyebrow {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 0.9rem;
}
.eyebrow a { color: inherit; text-decoration: none; }

.sechead { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.sechead--center { margin-inline: auto; text-align: center; }
.sechead__title { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); margin-bottom: 0.45em; }
.sechead__lede { color: var(--text-muted); font-size: clamp(1rem, 0.96rem + 0.3vw, 1.25rem); max-width: 42rem; }
.sechead--center .sechead__lede { margin-inline: auto; }
.sechead__lede em { color: var(--text-strong); font-style: italic; }

/* buttons — square, solid, deliberate */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.7rem 1.35rem;
	border: 1px solid var(--accent);
	border-radius: var(--r);
	background: var(--accent);
	color: var(--accent-on);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover {
	background: color-mix(in srgb, var(--accent) 82%, #000);
	border-color: color-mix(in srgb, var(--accent) 82%, #000);
}
.btn .icon { width: 1.05em; height: 1.05em; }
.btn__arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--ghost { background: transparent; color: var(--accent); border-color: var(--line-strong); }
.btn--ghost:hover { background: transparent; border-color: var(--accent); color: var(--accent); }

.btn--quiet {
	background: transparent; border-color: transparent; color: var(--accent);
	padding-inline: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em;
}
.btn--quiet:hover { background: transparent; border-color: transparent; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.9rem; }
.btn-row--center { justify-content: center; }

.icon { width: 1.5rem; height: 1.5rem; flex: none; }

/* Dark panels: renders on black need a dark ground, so these flip the
   neutrals without touching the accent. */
.on-dark {
	--bg:          var(--bg-darker);
	--line:        rgba(255, 255, 255, 0.14);
	--line-strong: rgba(255, 255, 255, 0.26);
	--text:        #f2f2f2;
	--text-strong: #ffffff;
	--text-muted:  #b9b9b9;
	--text-dim:    #8f8f8f;
	--accent:      var(--accent-vivid);
	--accent-soft: color-mix(in srgb, var(--accent-vivid) 20%, transparent);
	color: var(--text);
	background: var(--bg);
}
.on-dark .btn--ghost { color: var(--text-strong); border-color: var(--line-strong); }
.on-dark .btn--ghost:hover { color: var(--accent); border-color: var(--accent); }

/* brand marks */

.mark { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text-strong); }
.mark__glyph { width: 1.6rem; height: 1.6rem; flex: none; }
.mark__text { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; white-space: nowrap; }

/* Realize3D's mark is grey artwork and stays grey — it is not an accent. */
.mark--r3 .mark__glyph { width: auto; height: 1.45rem; color: var(--metal); }
.mark--r3 .mark__text { color: var(--text-strong); }
.mark--r3 .mark__text em { font-style: normal; color: var(--metal); }
.on-dark .mark--r3 .mark__glyph,
.on-dark .mark--r3 .mark__text em { color: var(--metal-50); }

/* ProtonRC's mark is the red impeller artwork; the wordmark follows it. */
.mark--rc .mark__text em { font-style: normal; color: var(--kj); }
.on-dark .mark--rc .mark__text em { color: var(--kj-vivid); }
.mark__glyph--img { width: 1.8rem; height: auto; }

.mark--head.mark--r3 .mark__glyph { height: 1.4rem; }
.mark--split .mark__glyph--img { width: 2.4rem; }
.mark--split .mark__text { font-size: 1.45rem; }
.mark--foot.mark--r3 .mark__glyph { height: 1.7rem; }
.mark--foot .mark__glyph--img { width: 2.1rem; }
.mark--foot .mark__text { font-size: 1.35rem; }
.mark--phero { margin-bottom: 1.5rem; }

/* ---------------------------------------------------------------- header */

.site-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.site-header.is-stuck { background: rgba(255, 255, 255, 0.98); border-bottom-color: var(--line); }

.site-header__inner {
	width: min(var(--wrap), 100% - var(--gut) * 2);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	min-height: 4.25rem;
}
.site-header__rule { display: none; }

.brand { margin-right: auto; }
.brand__link { display: inline-flex; align-items: center; gap: 0.85rem; text-decoration: none; }
.brand__sep { width: 1px; height: 1.4rem; background: var(--line-strong); }
.custom-logo { max-height: 2.5rem; width: auto; }

@media (max-width: 34rem) { .brand__sep, .brand .mark--sub { display: none; } }

/*
 * Desktop header: brand left, menu centred, cart and account hard right.
 * Three tracks rather than flex, because 1fr auto 1fr centres the middle one
 * against the header itself — the menu does not drift when the brand or the
 * tools change width. Below the nav breakpoint the row is still a flex line,
 * where .brand's auto margin pushes the tools to the right edge.
 */
@media (min-width: 62rem) {
	.site-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
	}
	.brand { margin-right: 0; justify-self: start; }
	.nav-primary { justify-self: center; min-width: 0; }
	.header__tools { justify-self: end; }
}

/* primary nav */

.nav-primary { display: none; }
@media (min-width: 62rem) { .nav-primary { display: block; } }

.menu { display: flex; align-items: center; gap: 0.15rem; list-style: none; margin: 0; padding: 0; }

.menu-link {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 0.8rem;
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--text);
	text-decoration: none;
	border-radius: var(--r);
	position: relative;
	transition: color var(--dur) var(--ease);
}
.menu-link--top::after {
	content: "";
	position: absolute;
	left: 0.8rem; right: 0.8rem; bottom: 0.15rem;
	height: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease);
}
.menu-link:hover { color: var(--accent); }
.menu-link:hover::after,
.current-menu-item > .menu-link::after,
.current-menu-ancestor > .menu-link::after { transform: scaleX(1); }

.menu-item.accent-x  { --accent: var(--x); }
.menu-item.accent-kj { --accent: var(--kj); }
.menu-item.accent-r3 { --accent: var(--r3); }
.menu-item { position: relative; }

.has-submenu > .submenu-toggle {
	background: none; border: 0; padding: 0.3rem; margin-left: -0.45rem;
	cursor: pointer; color: var(--text-dim); display: inline-flex;
}
.has-submenu > .submenu-toggle svg { width: 1rem; height: 1rem; transition: transform var(--dur) var(--ease); }
.has-submenu > .submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-primary .submenu {
	position: absolute; top: 100%; left: 0;
	min-width: 13rem; margin: 0; padding: 0.4rem; list-style: none;
	background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
	box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.3);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}
.nav-primary .menu-item:hover > .submenu,
.nav-primary .menu-item:focus-within > .submenu,
.nav-primary .submenu-toggle[aria-expanded="true"] + .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-primary .submenu .menu-link { width: 100%; }

/* header tools */

.header__tools { display: flex; align-items: center; gap: 0.2rem; }

.tool {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 2.5rem; height: 2.5rem; border-radius: var(--r);
	color: var(--text); text-decoration: none;
	transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.tool:hover { color: var(--accent); background: var(--sand-25); }
.tool .icon { width: 1.25rem; height: 1.25rem; }

.cart-bubble {
	position: absolute; top: 0.3rem; right: 0.25rem;
	min-width: 1.1rem; height: 1.1rem; padding: 0 0.22rem;
	display: grid; place-items: center;
	background: var(--accent); color: var(--accent-on); border-radius: 999px;
	font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; line-height: 1;
}
.cart-bubble.is-empty { display: none; }

.burger { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; background: none; border: 0; cursor: pointer; border-radius: var(--r); }
@media (min-width: 62rem) { .burger { display: none; } }

.burger__box { position: relative; width: 1.25rem; height: 0.75rem; display: block; }
.burger__bar, .burger__box::before, .burger__box::after {
	position: absolute; left: 0; width: 100%; height: 2px; background: var(--text-strong);
	transition: transform var(--dur) var(--ease), opacity 0.2s var(--ease);
}
.burger__bar { top: 50%; transform: translateY(-50%); }
.burger__box::before { content: ""; top: 0; }
.burger__box::after { content: ""; bottom: 0; }
.burger[aria-expanded="true"] .burger__bar { opacity: 0; }
.burger[aria-expanded="true"] .burger__box::before { top: 50%; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__box::after { bottom: auto; top: 50%; transform: rotate(-45deg); }

/* ---------------------------------------------------------------- drawer */

.drawer { position: fixed; inset: 0; z-index: 120; }
.drawer[hidden] { display: none; }

.drawer__scrim {
	position: absolute; inset: 0; border: 0; padding: 0;
	background: rgba(18, 17, 39, 0.4);
	opacity: 0; transition: opacity var(--dur) var(--ease); cursor: default;
}
.drawer.is-open .drawer__scrim { opacity: 1; }

.drawer__panel {
	position: absolute; inset-block: 0; right: 0;
	width: min(22rem, 92vw); padding: 5rem var(--gut) 2rem;
	background: var(--white); border-left: 1px solid var(--line);
	overflow-y: auto; transform: translateX(100%);
	transition: transform var(--dur) var(--ease); z-index: 1;
}
.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__close {
	position: absolute; top: 1rem; right: 1.15rem;
	width: 2.4rem; height: 2.4rem; font-size: 1.5rem; line-height: 1;
	background: none; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer;
}
.drawer__close:hover { border-color: var(--accent); color: var(--accent); }

.menu--drawer { flex-direction: column; align-items: stretch; gap: 0; }
.menu--drawer .menu-item { border-bottom: 1px solid var(--line); }
.menu--drawer .menu-link { padding: 0.95rem 0; font-size: 1.1rem; font-family: var(--font-display); font-weight: 600; }
.menu--drawer .menu-link--top::after { display: none; }
.menu--drawer .has-submenu { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.menu--drawer .submenu {
	grid-column: 1 / -1; list-style: none; margin: 0 0 0.75rem;
	padding-left: 0.9rem; border-left: 1px solid var(--line); display: none;
}
.menu--drawer .submenu-toggle[aria-expanded="true"] + .submenu { display: block; }
.menu--drawer .submenu .menu-link { font-size: 0.98rem; padding: 0.5rem 0; color: var(--text-muted); font-family: var(--font-body); font-weight: 400; }

.drawer__foot { margin-top: 2rem; }
.social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.social a { color: var(--text-muted); font-size: 0.9rem; text-decoration: none; }
.social a:hover { color: var(--accent); }

/* ----------------------------------------------------- front page split */

.split { position: relative; display: grid; }
@media (min-width: 56rem) { .split { grid-template-columns: 1fr 1fr; } }

.split__side {
	position: relative;
	display: flex;
	align-items: flex-end;
	padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 4rem);
	min-height: min(72vh, 42rem);
	overflow: hidden;
	isolation: isolate;
}

/* Left door carries a render, so it is a dark panel. */
.split__side--rc {
	background: var(--bg-darker);
	--text-muted: #c4c4c4;
	--text-dim: #8f8f8f;
}
.split__side--rc .split__title, .split__side--rc .mark__text { color: #fff; }
.split__side--rc .split__lede { color: #c4c4c4; }
.split__side--rc .split__lineage { color: #8f8f8f; }
.split__side--rc .split__kicker { color: var(--x-vivid); }
.split__side--rc .mark--rc .mark__text em { color: var(--kj-vivid); }
.split__side--rc .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.split__side--rc .btn--ghost:hover { color: var(--x-vivid); border-color: var(--x-vivid); }

/* Right door is the printing service. Tesla/UltiMaker treatment: the machine
   photo runs the full width of the panel and the copy sits on a scrim over it,
   rather than the picture being an inset or a washed-out backdrop. */
.split__side--r3 { background: var(--sand-25); }
.split__side--r3 .split__media { position: absolute; inset: 0; z-index: -2; }
.split__side--r3 .split__media .pic,
.split__side--r3 .split__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 1;
}
.split__side--r3::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to right,
		var(--sand-25) 10%,
		color-mix(in srgb, var(--sand-25) 90%, transparent) 40%,
		color-mix(in srgb, var(--sand-25) 45%, transparent) 66%,
		color-mix(in srgb, var(--sand-25) 12%, transparent) 88%,
		transparent);
}
@media (max-width: 56rem) {
	/* Stacked, the copy sits over the photo, so the scrim runs upward instead. */
	.split__side--r3::after {
		background: linear-gradient(
			to top,
			var(--sand-25) 24%,
			color-mix(in srgb, var(--sand-25) 92%, transparent) 58%,
			color-mix(in srgb, var(--sand-25) 60%, transparent) 82%,
			color-mix(in srgb, var(--sand-25) 28%, transparent));
	}
}

/* Both doors carry a full-bleed image behind their copy. */
.split__side .split__media { position: absolute; inset: 0; z-index: -2; }
.split__side .split__media .pic,
.split__side .split__media img { width: 100%; height: 100%; object-fit: cover; }

/* ProtonRC: the render is the point, so it runs edge to edge and the copy sits
   on a gradient over it. */
.split__side--rc .split__media img {
	opacity: 1;
	object-position: 58% 50%;
	transform: scale(1.02);
	transition: transform 1.4s var(--ease);
}
.split__side--rc:hover .split__media img { transform: scale(1.06); }

/* Enough veil to carry the copy, not so much that the boat disappears. */
.split__side--rc::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, #050506 2%, rgba(5, 5, 6, 0.72) 30%, rgba(5, 5, 6, 0.2) 66%, transparent),
		linear-gradient(to right, rgba(5, 5, 6, 0.7), rgba(5, 5, 6, 0.12) 58%, transparent);
}
@media (max-width: 56rem) {
	/* Stacked there is no side-by-side to protect, so let the render breathe. */
	.split__side--rc::after {
		background: linear-gradient(to top, #050506 6%, rgba(5, 5, 6, 0.8) 42%, rgba(5, 5, 6, 0.25) 74%, transparent);
	}
	.split__side--rc { align-items: flex-end; min-height: min(80vh, 40rem); }
}

/* A flex item shrinks to its content, which was strangling the headline. */
.split__body { position: relative; width: 100%; max-width: 32rem; }

.split__side--rc .mark--split { margin-bottom: 1.1rem; }
.split__side--rc .split__kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}
.split__side--rc .split__kicker::before {
	content: "";
	width: 1.75rem;
	height: 2px;
	background: var(--x-vivid);
}
.split__side--rc .split__title {
	font-size: clamp(2rem, 1.1rem + 3.1vw, 3.6rem);
	line-height: 1.02;
	letter-spacing: -0.015em;
	text-wrap: balance;
	margin-bottom: 0.45em;
}
.split__side--rc .split__lede { max-width: 30rem; font-size: 1.02rem; }

.split__kicker {
	font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--accent); margin: 0 0 0.9rem;
}
.split__title { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.9rem); margin-bottom: 0.5em; }
.split__lede { color: var(--text-muted); }
.split__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.8rem; }

.split__lineage {
	margin: -0.6rem 0 1.1rem;
	font-family: var(--font-mono); font-size: 0.68rem;
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim);
}
.split__seam { display: none; }

/* -------------------------------------------------------- lineup cards */

.lineup { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 52rem) { .lineup { grid-template-columns: 1fr 1fr; } }

.boatcard {
	border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
	background: var(--white);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.boatcard:hover { border-color: var(--line-strong); box-shadow: 0 14px 40px -26px rgba(0, 0, 0, 0.45); }
.boatcard__link { display: block; text-decoration: none; color: inherit; height: 100%; }

.boatcard__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-darker); }
.boatcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.boatcard:hover .boatcard__media img { transform: scale(1.04); }

.boatcard__body { padding: clamp(1.4rem, 2.5vw, 2rem); }
.boatcard__title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-bottom: 0.3em; display: flex; align-items: baseline; gap: 0.5rem; }
.boatcard__model {
	font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.08em;
	color: var(--accent); padding: 0.1rem 0.4rem;
	border: 1px solid var(--accent-line); border-radius: var(--r);
}
.boatcard__tagline { color: var(--text-muted); }

.boatcard__specs {
	list-style: none; margin: 1.4rem 0; padding: 1.15rem 0 0;
	border-top: 1px solid var(--line);
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
	font-size: 0.78rem; color: var(--text-dim); line-height: 1.35;
}
.boatcard__specs strong { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--text-strong); }
.boatcard__specs strong span { font-size: 0.78rem; color: var(--accent); margin-left: 0.15em; }

.boatcard__cta { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: var(--accent); }
.boatcard__cta .icon { width: 1.05rem; height: 1.05rem; transition: transform var(--dur) var(--ease); }
.boatcard:hover .boatcard__cta .icon { transform: translateX(4px); }

/* ------------------------------------------------------------ boat hero */

.bhero {
	position: relative;
	min-height: min(88vh, 50rem);
	display: flex; align-items: flex-end;
	padding-block: clamp(3.5rem, 10vh, 7rem);
	isolation: isolate; overflow: hidden;
	background: var(--bg-darker);
}
.bhero__media { position: absolute; inset: 0; z-index: -2; }
.bhero__media .pic, .bhero__media img { width: 100%; height: 100%; object-fit: cover; }

.bhero__veil {
	position: absolute; inset: 0;
	background: linear-gradient(to top, var(--bg-darker) 5%, rgba(15, 15, 15, 0.86) 38%, rgba(15, 15, 15, 0.5) 66%, rgba(15, 15, 15, 0.12) 88%, transparent);
}
@media (min-width: 58rem) {
	.bhero__veil {
		background:
			linear-gradient(to right, var(--bg-darker) 2%, rgba(15, 15, 15, 0.72) 38%, rgba(15, 15, 15, 0.12) 70%, transparent),
			linear-gradient(to top, var(--bg-darker) 3%, rgba(15, 15, 15, 0.55) 34%, transparent 72%);
	}
}

.bhero__inner { position: relative; width: min(var(--wrap), 100% - var(--gut) * 2); }
.bhero__eyebrow { color: var(--accent-vivid); }
.bhero__title {
	display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.6rem;
	font-size: clamp(2.6rem, 1.4rem + 6vw, 6rem);
	color: #fff; margin-bottom: 0.2em; line-height: 0.98;
}
.bhero__model {
	font-family: var(--font-mono);
	font-size: clamp(0.8rem, 0.7rem + 0.5vw, 1.1rem);
	letter-spacing: 0.12em; color: var(--accent-vivid);
	padding: 0.28rem 0.55rem;
	border: 1px solid color-mix(in srgb, var(--accent-vivid) 55%, transparent);
	border-radius: var(--r); transform: translateY(-0.3em);
}
.bhero__tagline { font-size: clamp(1rem, 0.95rem + 0.5vw, 1.3rem); color: #c4c4c4; max-width: 34rem; }

.bhero__scroll {
	position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
	width: 1.4rem; height: 2.3rem;
	border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px;
	display: grid; place-items: start center; padding-top: 0.4rem;
}
.bhero__scroll span { width: 2px; height: 0.45rem; border-radius: 2px; background: var(--accent-vivid); animation: r3d-scroll 1.8s var(--ease) infinite; }
@keyframes r3d-scroll {
	0%, 100% { opacity: 0; transform: translateY(0); }
	35%      { opacity: 1; }
	80%      { opacity: 0; transform: translateY(0.65rem); }
}
@media (max-width: 52rem) { .bhero__scroll { display: none; } }

/* stats — always on the dark hero */

.stats {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
	gap: clamp(1rem, 3vw, 2.5rem);
	margin: clamp(1.8rem, 4vw, 2.75rem) 0 0;
	padding: 1.4rem 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	max-width: 42rem;
}
.stat { display: flex; flex-direction: column; }
.stat__label {
	order: 2; font-family: var(--font-mono); font-size: 0.7rem;
	letter-spacing: 0.1em; text-transform: uppercase; color: #8f8f8f;
	margin-top: 0.4rem; text-wrap: balance;
}
.stat__value {
	order: 1; margin: 0; display: flex; align-items: baseline; gap: 0.2rem;
	font-family: var(--font-display); font-weight: 600;
	font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); line-height: 1; color: #fff;
}
.stat__unit { font-size: 0.4em; color: var(--accent-vivid); }

/* -------------------------------------------------------- story & pump */

.story, .pump, .pumpfocus, .madehere, .printing-intro, .community, .contactband {
	display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center;
}
@media (min-width: 58rem) {
	.story, .pump, .pumpfocus, .madehere, .printing-intro, .community, .contactband { grid-template-columns: 1fr 1fr; }
	.story--flip .story__text, .pump--flip .pump__text { order: -1; }
	.printing-intro { grid-template-columns: 1.1fr 0.9fr; }
	.community { align-items: start; }
}

.story__body { color: var(--text-muted); max-width: 34rem; }

.story__media, .pump__media, .pumpfocus__media, .madehere__media { margin: 0; }
.story__media img, .pump__media img, .pumpfocus__media img, .madehere__media img {
	border-radius: var(--r-lg); background: var(--bg-darker);
}
.story__media figcaption, .pump__media figcaption, .pumpfocus__media figcaption {
	margin-top: 0.8rem; font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-dim);
}

.timeline { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; }
.timeline li {
	display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem;
	padding: 0.8rem 0 0.8rem 1.25rem;
	border-left: 2px solid var(--line); position: relative; align-items: baseline;
}
.timeline li::before {
	content: ""; position: absolute; left: -5px; top: 1.3rem;
	width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong);
}
.timeline li.is-now { border-left-color: var(--accent); }
.timeline li.is-now::before { background: var(--accent); }
.timeline__date { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent); }
.timeline__label { color: var(--text-muted); font-size: 0.95rem; }
@media (max-width: 36rem) { .timeline li { grid-template-columns: 1fr; gap: 0.15rem; } }

.pumpspecs {
	list-style: none; margin: 2rem 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 1px; background: var(--line);
	border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.pumpspecs li { background: var(--white); padding: 1rem 1.1rem; font-size: 0.8rem; color: var(--text-dim); line-height: 1.4; }
.pumpspecs strong { display: block; font-family: var(--font-display); font-size: 1.3rem; color: var(--text-strong); margin-bottom: 0.1rem; }

/* -------------------------------------------------------------- features */

.features {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 1px; background: var(--line);
	border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
@media (min-width: 44rem) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .features { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 68rem) { .features--3 { grid-template-columns: repeat(3, 1fr); } }

.feature { background: var(--white); padding: clamp(1.4rem, 2.5vw, 2rem); transition: background-color var(--dur) var(--ease); }
.feature:hover { background: var(--sand-15); }

.feature__icon {
	display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
	border-radius: var(--r); background: var(--accent-soft); color: var(--accent); margin-bottom: 1.1rem;
}
.feature__title { font-size: 1.1rem; margin-bottom: 0.4em; }
.feature__title a { text-decoration: none; color: inherit; }
.feature__title a:hover { color: var(--accent); }
.feature__body { color: var(--text-muted); font-size: 0.9rem; margin: 0; }
.feature__body + .feature__body { margin-top: 0.9rem; }
.feature__body .btn--quiet + .btn--quiet { margin-left: 1.1rem; }

/* --------------------------------------------------------------- gallery */

.gallery {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.6rem, 1.2vw, 1rem);
}
@media (min-width: 52rem) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 52rem) { .gallery__item--wide { grid-column: span 2; grid-row: span 2; } }

.gallery__btn {
	position: relative; display: block; width: 100%; padding: 0;
	border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
	background: var(--bg-darker); cursor: zoom-in;
	transition: border-color var(--dur) var(--ease);
}
.gallery__btn:hover { border-color: var(--accent-line); }
.gallery__btn img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; transition: transform 0.6s var(--ease); }
.gallery__item--wide .gallery__btn img { height: 100%; }
.gallery__btn:hover img { transform: scale(1.03); }

.gallery__zoom {
	position: absolute; right: 0.65rem; bottom: 0.65rem;
	width: 2rem; height: 2rem; display: grid; place-items: center;
	border-radius: var(--r); background: rgba(255, 255, 255, 0.92); color: var(--charcoal);
	opacity: 0; transform: translateY(4px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.gallery__btn:hover .gallery__zoom, .gallery__btn:focus-visible .gallery__zoom { opacity: 1; transform: translateY(0); }
.gallery__zoom .icon { width: 1rem; height: 1rem; }

/* lightbox */

.lightbox {
	position: fixed; inset: 0; z-index: 150; display: grid; place-items: center;
	padding: clamp(1rem, 4vw, 3rem); background: rgba(10, 10, 10, 0.94);
	opacity: 0; transition: opacity 0.22s var(--ease);
}
.lightbox.is-open { opacity: 1; }
.lightbox__fig { margin: 0; max-width: min(96vw, 84rem); }
.lightbox__img { max-height: 78vh; width: auto; margin-inline: auto; border-radius: var(--r); }
.lightbox__cap { margin-top: 1rem; text-align: center; font-family: var(--font-mono); font-size: 0.8rem; color: #b9b9b9; }
.lightbox__btn {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 2.9rem; height: 2.9rem; display: grid; place-items: center;
	background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--r); cursor: pointer; font-size: 1.35rem; line-height: 1; color: #fff;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.2); }
.lightbox__btn--prev { left: clamp(0.5rem, 2vw, 2rem); }
.lightbox__btn--next { right: clamp(0.5rem, 2vw, 2rem); }
.lightbox__close { top: clamp(0.75rem, 2vw, 1.75rem); right: clamp(0.75rem, 2vw, 1.75rem); transform: none; }

/* ----------------------------------------------------------------- specs */

.spectable { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.spectable th, .spectable td { padding: 0.9rem 0.5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.spectable th { font-weight: 500; color: var(--text-muted); width: 45%; }
.spectable td { font-family: var(--font-mono); font-size: 0.86rem; color: var(--text-strong); }
.spectable tr:hover td { color: var(--accent); }
.spectable__note { margin-top: 1.4rem; font-size: 0.84rem; color: var(--text-dim); }

/* --------------------------------------------------------------- compare */

/*
 * position: relative is load-bearing. The table carries visually-hidden labels,
 * and .screen-reader-text is position: absolute — without a positioned ancestor
 * here their containing block is outside this box, so the scroll container does
 * not clip them and they sit ~440px out, widening the whole document. On a dark
 * boat page that showed up as a white strip down the right-hand side, because
 * the page can be panned past the dark background onto the root element.
 */
.compare-scroll { overflow-x: auto; position: relative; }
.compare { width: 100%; min-width: 38rem; border-collapse: collapse; font-size: 0.93rem; }
.compare th, .compare td { padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--line); text-align: left; }
.compare tbody th { font-weight: 500; color: var(--text-muted); width: 32%; }
.compare tbody td { color: var(--text-strong); }

.compare__head { padding-bottom: 1.4rem !important; vertical-align: bottom; border-bottom: 2px solid var(--line-strong) !important; }
.compare__head.is-current { border-bottom-color: var(--accent) !important; }
.compare__name { display: block; font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--accent); }
.compare__sub {
	display: block; font-family: var(--font-mono); font-size: 0.7rem;
	letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-top: 0.2rem;
}
.compare td.is-current { background: var(--accent-soft); }
.compare tfoot td { border-bottom: 0; padding-top: 1.6rem; }

.tick { display: inline-flex; color: var(--accent); }
.tick .icon { width: 1.2rem; height: 1.2rem; }
.tick--no { color: var(--metal-50); font-family: var(--font-mono); }

/* ------------------------------------------------------------------- buy */

.buycards { display: grid; gap: clamp(1.1rem, 2.5vw, 1.75rem); }
@media (min-width: 48rem) { .buycards { grid-template-columns: 1fr 1fr; } }

.buycard {
	padding: clamp(1.6rem, 3vw, 2.5rem);
	border: 1px solid var(--line); border-radius: var(--r-lg);
	background: var(--white); display: flex; flex-direction: column;
}
.buycard--primary { border-color: var(--accent); border-width: 2px; background: var(--accent-soft); }
.buycard__title { font-size: 1.35rem; }
.buycard__body { color: var(--text-muted); font-size: 0.94rem; }
.buycard .btn { margin-top: auto; align-self: flex-start; }

.ticklist { list-style: none; margin: 1.4rem 0; padding: 0; display: grid; gap: 0.6rem; font-size: 0.9rem; color: var(--text-muted); }
.ticklist li { display: flex; align-items: flex-start; gap: 0.55rem; }
.ticklist .icon { width: 1rem; height: 1rem; color: var(--accent); margin-top: 0.3em; }

.prodstrip {
	list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0;
	display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.prodcard {
	display: grid; gap: 0.8rem; text-decoration: none; color: inherit;
	border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
	background: var(--white); transition: border-color var(--dur) var(--ease);
}
.prodcard:hover { border-color: var(--accent-line); }
.prodcard__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.prodcard__body { padding: 0 1rem 1rem; display: grid; gap: 0.25rem; }
.prodcard__title { font-family: var(--font-display); font-weight: 600; }
.prodcard__price { font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent); }

/* =========================================================================
   Diagrams — jetboat cutaway and jetpump anatomy
   ====================================================================== */

.section--jet { background: var(--sand-15); }

.pumpdiagram { margin: 0; }
.pumpdiagram { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.pumpdiagram__frame {
	overflow-x: auto; overflow-y: hidden; padding-block: 0.5rem;
	scrollbar-width: thin; scrollbar-color: var(--metal-30) transparent;
}
.pumpdiagram__frame::-webkit-scrollbar { height: 6px; }
.pumpdiagram__frame::-webkit-scrollbar-track { background: transparent; }
.pumpdiagram__frame::-webkit-scrollbar-thumb { background: var(--metal-30); border-radius: 999px; }

/* The cutaway is the real CAD plate with the flow animated over it. */
.pumpart { position: relative; margin: 0; min-width: 46rem; color: var(--accent); }
.pumpart__plate { width: 100%; height: auto; display: block; }
.pumpart__flow { position: absolute; inset: 0; width: 100%; height: 100%; }
.pumpart__dims {
	display: flex;
	gap: 1.25rem;
	margin: 0.9rem 0 0;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-dim);
}
.pumpart__dims span::before { content: "— "; color: var(--accent); }

.pumpdiagram__hint {
	display: none; margin: 0.7rem 0 0; font-family: var(--font-mono);
	font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--text-dim); text-align: center;
}
@media (max-width: 48rem) { .pumpdiagram__hint { display: block; } }

/* shared diagram ink */


/* The two flow channels. These are stroked, never filled: an SVG <path> with
   no fill declared defaults to solid black, which paints the whole channel in. */
.dg-guide {
	fill: none !important;
	stroke: var(--dg-flow);
	stroke-width: 3;
	stroke-dasharray: 2 16;
	stroke-linecap: round;
	opacity: 0.4;
}


.dg-callout circle { fill: var(--accent); }
.dg-callout text   { fill: #fff; font-family: var(--font-mono); font-size: 30px; font-weight: 600; text-anchor: middle; }
.dg-leader         { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 6 7; opacity: 0.7; }

/* Flowing water: real particles travelling the duct, staggered along it.
   offset-path keeps them exactly on the centreline of the flow body. */
.dg-drop {
	fill: var(--dg-flow);
	stroke: rgba(255, 255, 255, 0.85);
	stroke-width: 2;
	paint-order: stroke;
	opacity: 0;
	animation: dg-drift 3.4s linear infinite;
}
body.tpl-tpl-kwikjet-x .dg-drop,
body.tpl-tpl-kwikjet .dg-drop,
body.tpl-tpl-jetboats .dg-drop { stroke: rgba(0, 0, 0, 0.55); }

@keyframes dg-drift {
	0%        { offset-distance: 0%;   opacity: 0; }
	8%        { opacity: 0.9; }
	85%       { opacity: 0.9; }
	100%      { offset-distance: 100%; opacity: 0; }
}


/* legend under the boat cutaway */

.jetdiagram__legend { margin-top: clamp(1.75rem, 3.5vw, 3rem); }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.1rem, 2.5vw, 1.75rem); }
@media (min-width: 46rem) { .legend { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .legend { grid-template-columns: repeat(4, 1fr); } }
.legend li { font-size: 0.88rem; color: var(--text-muted); padding-top: 0.9rem; border-top: 2px solid var(--line-strong); }
.legend strong { display: block; font-family: var(--font-display); font-size: 1.05rem; color: var(--text-strong); margin-bottom: 0.3rem; }
.legend__num {
	display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem;
	margin-bottom: 0.6rem; border-radius: 50%; background: var(--accent); color: #fff;
	font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
}

/* pump steps */

.pumpsteps { list-style: none; margin: 0 0 clamp(2.5rem, 5vw, 4.5rem); padding: 0; display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
@media (min-width: 46rem) { .pumpsteps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 76rem) { .pumpsteps { grid-template-columns: repeat(5, 1fr); } }
.pumpstep { padding-top: 1.1rem; border-top: 2px solid var(--line-strong); font-size: 0.88rem; color: var(--text-muted); }
.pumpstep__num {
	display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem;
	margin-bottom: 0.7rem; border-radius: 50%; background: var(--accent); color: #fff;
	font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
}
.pumpstep__title { font-size: 1.05rem; margin-bottom: 0.35em; }
.pumpstep p { margin: 0; }

.pumpfocus__text .sechead { margin-bottom: 1.4rem; }

.areadiagram { margin: 2rem 0 0; }
.areadiagram__svg { width: 100%; height: auto; }
.areastation__ring { fill: color-mix(in srgb, var(--r3) 12%, var(--white)); stroke: var(--charcoal); stroke-width: 1.6; }
.areastation__hub { fill: var(--accent); }
.areastation__label { fill: var(--text-dim); font-family: var(--font-mono); font-size: 14px; }
.areadiagram__arrows path { stroke: var(--metal-50); stroke-width: 1.4; fill: none; stroke-dasharray: 3 3; }
.areadiagram figcaption { margin-top: 0.9rem; font-size: 0.82rem; color: var(--text-dim); line-height: 1.5; }

.pullquote { margin: clamp(2.5rem, 5vw, 4rem) auto 0; max-width: 44rem; text-align: center; border: 0; padding: 0; }
.pullquote p { font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 1.1vw, 1.75rem); line-height: 1.35; color: var(--text-strong); }
.pullquote cite {
	display: block; margin-top: 1.1rem; font-family: var(--font-mono); font-size: 0.74rem;
	font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim);
}

/* -------------------------------------------------------------- printing */

.printer-list {
	list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
	background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.printer-list__item { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.25rem; background: var(--white); }
.printer-list__icon { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: var(--r); background: var(--accent-soft); color: var(--accent); flex: none; }
.printer-list__body strong { display: block; font-family: var(--font-display); font-size: 1.02rem; color: var(--text-strong); }
.printer-list__kind { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }

.printers { display: grid; gap: clamp(1.1rem, 2.5vw, 1.75rem); }
@media (min-width: 56rem) { .printers { grid-template-columns: repeat(3, 1fr); } }

.printer {
	padding: 0; overflow: hidden; display: flex; flex-direction: column;
	border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.printer:hover { border-color: var(--line-strong); box-shadow: 0 14px 40px -28px rgba(0, 0, 0, 0.45); }
.printer__media { background: var(--bg-darker); border-bottom: 1px solid var(--line); }
.printer__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.printer__body { padding: clamp(1.4rem, 2.5vw, 1.9rem); display: flex; flex-direction: column; flex: 1; }
.printer__head { display: flex; gap: 0.9rem; align-items: flex-start; margin-bottom: 1rem; }
.printer__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r); background: var(--accent-soft); color: var(--accent); flex: none; }
.printer__name { font-size: 1.2rem; margin: 0 0 0.1rem; }
.printer__count {
	display: inline-block;
	margin-left: 0.45rem;
	padding: 0.05rem 0.35rem;
	border: 1px solid var(--accent-line);
	border-radius: var(--r);
	font-family: var(--font-mono);
	font-size: 0.7em;
	color: var(--accent);
	vertical-align: 0.15em;
}
.printer__kind { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0; }
.printer__blurb { color: var(--text-muted); font-size: 0.9rem; }
.printer__specs { margin: 1.4rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); display: grid; gap: 0.6rem; }
.printer__specs > div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.82rem; }
.printer__specs dt { color: var(--text-dim); }
.printer__specs dd { margin: 0; font-family: var(--font-mono); color: var(--text-strong); text-align: right; }
@media (max-width: 30rem) {
	.printer__specs > div { flex-direction: column; gap: 0.1rem; }
	.printer__specs dd { text-align: left; }
}

.process { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 52rem) { .process { grid-template-columns: repeat(4, 1fr); } }
.process__step { position: relative; padding-top: 2.3rem; border-top: 2px solid var(--line-strong); }
.process__num { position: absolute; top: 0.9rem; left: 0; font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.12em; color: var(--accent); }
.process__title { font-size: 1.08rem; margin-bottom: 0.35em; }
.process__body { color: var(--text-muted); font-size: 0.88rem; margin: 0; }

/* ------------------------------------------------------------- community */

.section--community { background: var(--sand-25); }
.community__links { display: grid; gap: 0.7rem; }

.commcard {
	display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.3rem 1rem;
	padding: 1.25rem 1.4rem; border: 1px solid var(--line); border-radius: var(--r);
	background: var(--white); text-decoration: none; color: inherit;
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.commcard:hover { border-color: var(--accent); transform: translateX(3px); }
.commcard strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--text-strong); }
.commcard span { grid-column: 1; font-size: 0.86rem; color: var(--text-muted); }
.commcard__icon { grid-row: 1 / span 2; grid-column: 2; width: 1.15rem; height: 1.15rem; color: var(--accent); }

/* The e-mail card is not a link — a mailto: opens nothing on a desktop without
   a mail client, so the address is readable and copyable instead. */
.commcard--mail { cursor: default; }
.commcard--mail:hover { border-color: var(--line); transform: none; }
.commcard--mail strong { user-select: all; }

.mailact { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.85rem; }
.mailact__link { font-size: 0.85rem; color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-line); }
.mailact__link:hover { border-color: var(--accent); }

.maillink { user-select: all; }

.mailcopy {
	display: inline-flex; align-items: center;
	padding: 0.2rem 0.6rem; margin-left: 0.5rem;
	border: 1px solid var(--line-strong); border-radius: var(--r);
	background: transparent; color: var(--text-muted);
	font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em;
	text-transform: uppercase; cursor: pointer;
	transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mailcopy:hover { border-color: var(--accent); color: var(--accent); }
.mailact .mailcopy { margin-left: 0; }

/* ------------------------------------------------- legal documents ------ */

/* The lawyer's shortcode returns a long wall of prose with its own headings,
   so it needs a readable measure and a rhythm rather than any decoration. */
.legaldoc { max-width: 42rem; color: var(--text-muted); }
.legaldoc h1, .legaldoc h2, .legaldoc h3, .legaldoc h4 {
	font-family: var(--font-display); color: var(--text-strong);
	margin-top: 2.2rem; margin-bottom: 0.6rem;
}
.legaldoc h1 { font-size: 1.6rem; }
.legaldoc h2 { font-size: 1.3rem; }
.legaldoc h3, .legaldoc h4 { font-size: 1.05rem; }
.legaldoc p, .legaldoc li { font-size: 0.95rem; line-height: 1.7; }
.legaldoc ul, .legaldoc ol { padding-left: 1.2rem; }
.legaldoc li + li { margin-top: 0.3rem; }
.legaldoc a { color: var(--accent); word-break: break-word; }
.legaldoc strong { color: var(--text-strong); }
.legaldoc hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.legaldoc table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 1.2rem 0; }
.legaldoc th, .legaldoc td { border: 1px solid var(--line); padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; }
.legaldoc > :first-child { margin-top: 0; }

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

/* The English courtesy translation above the lawyer's German text. It is
   separated so nobody mistakes one for the other. */
.r3d-en { margin-bottom: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--line-strong); }
.r3d-en__note {
	padding: 0.9rem 1.1rem; margin-bottom: 1.75rem;
	border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r);
	background: var(--sand-15); font-size: 0.88rem; color: var(--text-muted);
}
.r3d-en__note strong { color: var(--text-strong); }

/* IT-Recht's own markup uses <br> runs and inline styles; give it the same
   measure and rhythm as the rest of the page without fighting it. */
.legaldoc .agb_content { font-size: 0.95rem; line-height: 1.7; }
.legaldoc .agb_content a { word-break: break-word; }
.legaldoc #itkanzlei_txt_copyright { margin-top: 2.5rem !important; color: var(--text-dim); }

/* EU harmonised legal guarantee notice. The official graphic may not be
   altered and must be legible at default size, so the theme only frames it:
   a full-width figure on the warranty page, a dialog everywhere else, opened
   from a one-line trigger in the buy box and in the footer. */
.eunotice img { display: block; width: 100%; height: auto; }
.eunotice__img, .eunotice-dialog .eunotice__img {
	display: block; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff;
}
.eunotice-dialog .eunotice__img img { display: block; width: 100%; height: auto; }
.eunotice__img:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.eunotice__links { margin: 0.7rem 0 0; font-size: 0.82rem; color: var(--text-dim); }
.eunotice__links a { color: var(--accent); }

.eunotice--page { margin: 0 0 clamp(2rem, 4vw, 3rem); }
.eunotice--page figcaption { margin: 0; }

.eunotice-trigger {
	display: inline-flex; align-items: center; gap: 0.55rem;
	color: var(--text-muted); text-decoration: none;
}
.eunotice-trigger__icon { width: 1.05rem; height: 1.05rem; flex: none; color: var(--accent); }
.eunotice-trigger__text { color: var(--text); }
.eunotice-trigger__more { color: var(--accent); font-size: 0.9em; }
.eunotice-trigger:hover .eunotice-trigger__text { color: var(--text-strong); text-decoration: underline; text-underline-offset: 0.2em; }

.eunotice-row {
	order: 5; width: 100%; max-width: 34rem; margin: 0 0 1.5rem;
	font-size: 0.85rem;
}
.eunotice-row .eunotice-trigger {
	display: flex; width: 100%; padding: 0.6rem 0.8rem;
	border: 1px solid var(--line); border-radius: var(--r);
}
.eunotice-row .eunotice-trigger__text { flex: 1; }
.eunotice-row .eunotice-trigger:hover { border-color: var(--line-strong); }
.eunotice-row--cart { max-width: none; margin: 1rem 0 0; }
.eunotice-row--catalogue { margin: clamp(1.5rem, 3vw, 2rem) 0 0; }

.footer__eunotice { margin: 0; font-size: 0.8rem; }
.footer__eunotice .eunotice-trigger, .footer__eunotice .eunotice-trigger__text { color: inherit; }
.footer__eunotice .eunotice-trigger__more { display: none; }

/* The withdrawal button's footer link: always there, never in a menu. */
.footer__withdraw { margin: 0; font-size: 0.8rem; }
.footer__withdraw a { color: inherit; }

/* ------------------------------------------------- shop legal bits ------ */

/* PAngV: VAT and shipping under every price. Smaller than the price, never
   hidden. Block-level so it sits under the figure in every layout. */
.pricenote {
	display: block; margin-top: 0.2rem;
	font-family: var(--font-body); font-size: 0.74rem; font-weight: 400; letter-spacing: 0;
	color: var(--text-dim);
}
.pricenote a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Shipping and payment tables, read from the shop settings. */
.shiptable th[scope="row"] { color: var(--text-strong); font-weight: 600; }
.r3d-de-label { font-weight: 400; color: var(--text-dim); font-size: 0.85em; }

/* Download consent at checkout: same weight as the terms checkbox. */
.r3d-consent { margin-top: 0.8rem; font-size: 0.9rem; }

/* The withdrawal function. */
.wdbox { margin: 1.5rem 0; }
/* .legaldoc a would otherwise paint the button label in the button's own colour. */
.legaldoc a.btn--solid, .legaldoc a.btn--solid:hover { color: var(--accent-on); word-break: normal; }
.legaldoc a.btn--ghost { word-break: normal; }
.wdbox__start { margin-top: 0.4rem; }
.wdbox__small { font-size: 0.85rem; color: var(--text-dim); }
.wdform > p { margin: 0 0 1.15rem; }
.wdform > p:last-of-type { margin-bottom: 0; }
.wdform__title { margin-top: 0 !important; }
.wdform__statement { font-size: 0.88rem; color: var(--text-muted); }
.wdform__trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wdbox__errors {
	padding: 0.9rem 1.1rem; margin-bottom: 1.2rem;
	border: 1px solid var(--kj); border-left-width: 3px; border-radius: var(--r);
	color: var(--text-strong); font-size: 0.9rem;
}
.wdbox__errors ul { margin: 0; }
.wdbox__done {
	padding: clamp(1.2rem, 3vw, 1.8rem);
	border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-lg);
	background: var(--sand-15);
}
.wdbox__done h2 { margin-top: 0 !important; }
.wdbox__summary { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.2rem; margin: 1rem 0; font-size: 0.9rem; }
.wdbox__summary dt { color: var(--text-dim); }
.wdbox__summary dd { margin: 0; color: var(--text-strong); overflow-wrap: anywhere; }
@media (max-width: 30rem) { .wdbox__summary { grid-template-columns: 1fr; } .wdbox__summary dd { margin-bottom: 0.4rem; } }
.wdlink-row { margin-top: 1.5rem; }

.eunotice-dialog {
	width: min(46rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem);
	padding: 0; border: 0; border-radius: var(--r);
	background: var(--bg); color: var(--text);
	box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.35);
}
.eunotice-dialog::backdrop { background: rgba(15, 15, 15, 0.6); }
.eunotice-dialog__bar {
	position: sticky; top: 0; z-index: 1;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 0.75rem 1rem; background: var(--bg); border-bottom: 1px solid var(--line);
}
.eunotice-dialog__title { margin: 0; font-family: var(--font-display); font-size: 1rem; color: var(--text-strong); }
.eunotice-dialog__close {
	width: 2.25rem; height: 2.25rem; flex: none;
	border: 1px solid var(--line); border-radius: var(--r); background: transparent;
	font-size: 1.3rem; line-height: 1; color: var(--text); cursor: pointer;
}
.eunotice-dialog__close:hover { border-color: var(--accent); color: var(--accent); }
.eunotice-dialog__body { padding: 1rem; }

/* ------------------------------------------------------------ page heroes */

.phero { padding-block: clamp(4rem, 9vh, 7rem) clamp(1.75rem, 4vw, 3rem); }
.phero--r3 { background: var(--sand-15); }
.phero__title { font-size: clamp(2rem, 1.3rem + 3.4vw, 3.75rem); }
.phero__lede { font-size: clamp(1rem, 0.96rem + 0.5vw, 1.3rem); color: var(--text-muted); max-width: 40rem; }
.phero__search { margin-top: 1.75rem; max-width: 26rem; }
.phero--404 .phero__title { max-width: 20ch; }

.page-feature { margin: 0 0 clamp(2rem, 4vw, 3.5rem); }
.page-feature img { border-radius: var(--r-lg); width: 100%; background: var(--bg-darker); }
.page-feature figcaption { margin-top: 0.8rem; font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-dim); }

/* ------------------------------------------------------------------ blog */

.postgrid { display: grid; gap: clamp(1.1rem, 2.5vw, 1.75rem); }
@media (min-width: 46rem) { .postgrid { grid-template-columns: repeat(2, 1fr); } }

.postcard { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--white); transition: border-color var(--dur) var(--ease); }
.postcard:hover { border-color: var(--line-strong); }
.postcard__link { display: grid; text-decoration: none; color: inherit; height: 100%; }
.postcard__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.postcard__body { padding: clamp(1.25rem, 2.5vw, 1.75rem); display: grid; align-content: start; gap: 0.45rem; }
.postcard__title { font-size: 1.25rem; margin: 0; }
.postcard__excerpt { color: var(--text-muted); font-size: 0.9rem; }
.postcard__more { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.4rem; font-weight: 600; color: var(--accent); font-size: 0.9rem; }
.postcard__more .icon { width: 1rem; height: 1rem; }

.entry__meta { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin: 0; }

.entry__content { font-size: 1.05rem; color: var(--text); }
.entry__content > * + * { margin-top: 1.1em; }
.entry__content h2 { font-size: clamp(1.4rem, 1.2rem + 1.1vw, 2rem); margin-top: 2em; }
.entry__content h3 { font-size: 1.25rem; margin-top: 1.7em; }
.entry__content a { color: var(--accent); }
.entry__content img, .entry__content figure { border-radius: var(--r); }
.entry__content blockquote {
	margin: 2em 0; padding-left: 1.4rem; border-left: 3px solid var(--accent);
	color: var(--text-strong); font-family: var(--font-display); font-size: 1.2rem;
}
.entry__content code { font-family: var(--font-mono); font-size: 0.88em; background: var(--sand-25); padding: 0.12em 0.35em; border-radius: 2px; }
.entry__content pre { background: var(--sand-25); padding: 1.2rem; border-radius: var(--r); overflow-x: auto; border: 1px solid var(--line); }
.entry__content table { width: 100%; border-collapse: collapse; }
.entry__content th, .entry__content td { padding: 0.7rem; border-bottom: 1px solid var(--line); text-align: left; }
.entry__content ul, .entry__content ol { padding-left: 1.3em; }
.entry__content li + li { margin-top: 0.35em; }

.entry__tags { margin-top: 2.25rem; font-size: 0.85rem; color: var(--text-dim); }
.postnav { display: flex; justify-content: space-between; gap: 2rem; margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid var(--line); font-weight: 600; }
.postnav a { text-decoration: none; }
.postnav__next { margin-left: auto; text-align: right; }

.nothing { text-align: center; padding-block: 2.5rem; }
.nothing__title { font-size: 1.7rem; }
.nothing__body { color: var(--text-muted); margin-bottom: 1.75rem; }
.nothing .searchform { max-width: 24rem; margin-inline: auto; }
.nothing .btn-row { justify-content: center; }

.pagination { margin-top: 3rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; }
.page-numbers {
	display: grid; place-items: center; min-width: 2.4rem; height: 2.4rem; padding-inline: 0.6rem;
	border: 1px solid var(--line); border-radius: var(--r); text-decoration: none;
	font-family: var(--font-mono); font-size: 0.85rem; color: var(--text);
}
.page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.page-numbers.current { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }

.searchform { display: flex; gap: 0.5rem; }
.searchform__input {
	flex: 1; min-width: 0; padding: 0.7rem 0.9rem; background: var(--white);
	border: 1px solid var(--line-strong); border-radius: var(--r);
	color: var(--text); font: inherit; font-size: 0.95rem;
}
.searchform__input::placeholder { color: var(--text-dim); }
.searchform__input:focus { border-color: var(--accent); outline: none; }
.searchform__submit { display: grid; place-items: center; width: 2.8rem; background: var(--accent); color: var(--accent-on); border: 0; border-radius: var(--r); cursor: pointer; }

.widget { margin-bottom: 2.25rem; }
.widget__title { font-size: 0.85rem; font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.9rem; }
.widget ul { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.widget a { text-decoration: none; color: var(--text-muted); font-size: 0.92rem; }
.widget a:hover { color: var(--accent); }

.comments { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.comments__title { font-size: 1.35rem; }
.comments__list { list-style: none; padding: 0; display: grid; gap: 1.75rem; }
.comments__list ol { list-style: none; padding-left: 1.4rem; margin-top: 1.4rem; display: grid; gap: 1.4rem; }
.comment-meta { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 0.5rem; }
.comment-author img { border-radius: 50%; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	width: 100%; padding: 0.7rem 0.9rem; background: var(--white);
	border: 1px solid var(--line-strong); border-radius: var(--r); color: var(--text); font: inherit;
}
.comment-form .submit {
	padding: 0.7rem 1.35rem; background: var(--accent); color: var(--accent-on);
	border: 0; border-radius: var(--r); font-weight: 600; cursor: pointer;
}

/* WooCommerce lives in assets/css/woocommerce.css, loaded only on shop pages. */

/* ---------------------------------------------------------------- footer */

.site-footer { border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 5rem) 2.25rem; background: var(--sand-15); }

.footer__brands { display: grid; gap: clamp(2.25rem, 4vw, 3.5rem); }
@media (min-width: 56rem) { .footer__brands { grid-template-columns: repeat(3, 1fr); } }

.footer__blurb { color: var(--text-muted); font-size: 0.88rem; margin: 1.1rem 0 1.4rem; max-width: 24rem; }
.footer__heading { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 1.1rem; }

.footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer__menu a { color: var(--text-muted); text-decoration: none; font-size: 0.92rem; }
.footer__menu a:hover { color: var(--accent); }

.footer__address, .contactband__address {
	display: grid; gap: 0.15rem; font-style: normal; color: var(--text-muted); font-size: 0.88rem;
}
.footer__address { margin-bottom: 1.1rem; }
.contactband__address { margin-top: 1.4rem; font-size: 0.95rem; }

.footer__contact { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: 0.35rem; }
.footer__contact a { font-family: var(--font-mono); font-size: 0.88rem; color: var(--accent); text-decoration: none; }
.footer__contact a:hover { text-decoration: underline; }

.contactband__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }

.social--foot { flex-direction: column; gap: 0.55rem; margin-top: 1.1rem; }
.social--foot a { display: inline-flex; align-items: center; gap: 0.4rem; }
.social--foot .icon { width: 0.95rem; height: 0.95rem; }

.footer__bottom {
	margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.75rem; border-top: 1px solid var(--line);
	display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
	font-size: 0.82rem; color: var(--text-dim);
}
.footer__copy { margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.footer__note { color: var(--text-muted); }
.footer__legal { list-style: none; display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0; padding: 0; }
.footer__legal a { color: var(--text-dim); text-decoration: none; }
.footer__legal a:hover { color: var(--accent); }

/* ---------------------------------------------------------------- motion */

.reveal {
	opacity: 0; transform: translateY(14px);
	transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
	transition-delay: calc(var(--i, 0) * 55ms);
}
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.reveal { opacity: 1; transform: none; }
	.bhero__scroll span { animation: none; opacity: 1; }
	.dg-drop { opacity: 0.85 !important; }
}

/* ------------------------------------------------------- colour fallback */

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	:root { --accent-soft: #f2f2f8; --accent-line: #bdbdd8; }
	.areastation__ring { fill: #eef0fe; }
	.bhero__model { border-color: rgba(255, 255, 255, 0.4); }
}


/* The boat hero is a dark panel, so its secondary button cannot use the
   text-safe-on-white accent. */
.bhero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.32); }
.bhero .btn--ghost:hover { color: var(--accent-vivid); border-color: var(--accent-vivid); }


.areastation__ring { fill: color-mix(in srgb, var(--accent) 12%, var(--white)); }

/* =============================================================================
   ProtonRC pages stay dark
   The boats were always shown on black and the renders need it. Realize3D's own
   pages — printing, shop, blog — keep the light UltiMaker treatment.
   ========================================================================== */

/*
 * The root element keeps its own background, and the dark palette below is set
 * on body, so html stayed white. Anything that shows the root — overscroll
 * bounce on iOS, a pinch-zoomed page — flashed white against a black page.
 */
html:has(body.tpl-tpl-kwikjet-x),
html:has(body.tpl-tpl-kwikjet),
html:has(body.tpl-tpl-jetboats) { background: #0f0f11; }

body.tpl-tpl-kwikjet-x,
body.tpl-tpl-kwikjet,
body.tpl-tpl-jetboats {
	--white:       #141416;
	--sand-15:     #121214;
	--sand-25:     #17171a;
	--sand-50:     #1d1d21;
	--metal-15:    rgba(255, 255, 255, 0.12);
	--metal-30:    rgba(255, 255, 255, 0.22);
	--metal-50:    rgba(255, 255, 255, 0.40);
	--charcoal:    #e9e9ec;
	--charcoal-80: #b9b9c0;
	--charcoal-60: #8f8f98;

	--bg:          #0f0f11;
	--bg-alt:      #141416;
	--bg-sand:     #17171a;
	--line:        rgba(255, 255, 255, 0.12);
	--line-strong: rgba(255, 255, 255, 0.22);

	--text:        #e9e9ec;
	--text-strong: #ffffff;
	--text-muted:  #b9b9c0;
	--text-dim:    #8f8f98;

	--accent:      var(--accent-vivid);
	--accent-on:   #0f0f11;
	--dg-flow:     #7aa2ff;
	--accent-soft: color-mix(in srgb, var(--accent-vivid) 18%, transparent);
	--accent-line: color-mix(in srgb, var(--accent-vivid) 45%, transparent);

	background: var(--bg);
	color: var(--text);
}

body.tpl-tpl-kwikjet-x .site-header,
body.tpl-tpl-kwikjet .site-header,
body.tpl-tpl-jetboats .site-header { background: rgba(15, 15, 17, 0.88); }

body.tpl-tpl-kwikjet-x .site-header.is-stuck,
body.tpl-tpl-kwikjet .site-header.is-stuck,
body.tpl-tpl-jetboats .site-header.is-stuck { background: rgba(15, 15, 17, 0.97); }

/* Realize3D's mark keeps its grey identity, lifted just enough to read. */
body.tpl-tpl-kwikjet-x .mark--r3 .mark__glyph,
body.tpl-tpl-kwikjet .mark--r3 .mark__glyph,
body.tpl-tpl-jetboats .mark--r3 .mark__glyph,
body.tpl-tpl-kwikjet-x .mark--r3 .mark__text em,
body.tpl-tpl-kwikjet .mark--r3 .mark__text em,
body.tpl-tpl-jetboats .mark--r3 .mark__text em { color: #9a9aa2; }

body.tpl-tpl-kwikjet-x .mark--rc .mark__text em,
body.tpl-tpl-kwikjet .mark--rc .mark__text em,
body.tpl-tpl-jetboats .mark--rc .mark__text em { color: var(--kj-vivid); }

/* The white chip on gallery thumbs would glare here. */
/* The plate ships as black line art on transparency; on the dark pages it is
   inverted to white. Nothing else changes, so there is no second asset. */
body.tpl-tpl-kwikjet-x .pumpart__plate,
body.tpl-tpl-kwikjet .pumpart__plate,
body.tpl-tpl-jetboats .pumpart__plate { filter: invert(1); }

body.tpl-tpl-kwikjet-x .gallery__zoom,
body.tpl-tpl-kwikjet .gallery__zoom,
body.tpl-tpl-jetboats .gallery__zoom { background: rgba(20, 20, 22, 0.9); color: #fff; }

body.tpl-tpl-kwikjet-x .burger__bar, body.tpl-tpl-kwikjet-x .burger__box::before, body.tpl-tpl-kwikjet-x .burger__box::after,
body.tpl-tpl-kwikjet .burger__bar, body.tpl-tpl-kwikjet .burger__box::before, body.tpl-tpl-kwikjet .burger__box::after,
body.tpl-tpl-jetboats .burger__bar, body.tpl-tpl-jetboats .burger__box::before, body.tpl-tpl-jetboats .burger__box::after { background: #fff; }

body.tpl-tpl-kwikjet-x .tool:hover,
body.tpl-tpl-kwikjet .tool:hover,
body.tpl-tpl-jetboats .tool:hover { background: rgba(255, 255, 255, 0.08); }

/* materials list */

.materials {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 1px; background: var(--line);
	border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
@media (min-width: 46rem) { .materials { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .materials { grid-template-columns: repeat(3, 1fr); } }

.material { background: var(--white); padding: clamp(1.4rem, 2.5vw, 2rem); transition: background-color var(--dur) var(--ease); }
.material:hover { background: var(--sand-15); }
.material__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.7rem; }
.material__name { font-size: 1.2rem; margin: 0; }
.material__kind {
	font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em;
	text-transform: uppercase; color: var(--accent);
	border: 1px solid var(--accent-line); border-radius: var(--r);
	padding: 0.1rem 0.4rem; flex: none;
}
.material__body { color: var(--text-muted); font-size: 0.9rem; }
.material__meta { margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); display: grid; gap: 0.6rem; }
.material__meta > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.75rem; font-size: 0.82rem; }
.material__meta dt { color: var(--text-dim); }
.material__meta dd { margin: 0; color: var(--text-strong); }

/* downloads reuse the material card, with a file line instead of a spec list */
.dl__link { text-decoration: none; color: inherit; }
.dl__link:hover { color: var(--accent); }
.dl__meta {
	display: flex; align-items: center; gap: 0.5rem;
	margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line);
	font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--accent);
}
.dl__icon { display: inline-grid; width: 1rem; height: 1rem; }

/* build guides: a cover beside the description, two up */

.guides { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 58rem) { .guides { grid-template-columns: repeat(2, 1fr); } }

.guide {
	display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); align-items: start;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white);
	transition: border-color var(--dur) var(--ease);
}
@media (min-width: 30rem) { .guide { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); } }
.guide:hover { border-color: var(--accent); }

.guide__cover {
	display: block; border-radius: var(--r); overflow: hidden;
	background: var(--bg-darker); border: 1px solid var(--line);
	transition: transform var(--dur) var(--ease);
}
.guide__cover:hover { transform: translateY(-2px); }
.guide__cover img { display: block; width: 100%; height: auto; }

.guide__body { min-width: 0; }
.guide__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; }
.guide__name { font-size: 1.15rem; margin: 0; }
.guide__text { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 1rem; }
.guide__pending { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--text-dim); margin: 0 0 0.6rem; }
.guide__cta { display: inline-flex; align-items: center; gap: 0.5rem; }

/* ---------------------------------------------------- the quote form ----- */

/* Contact Form 7 ships almost no styling of its own, so the fields are dressed
   to match the shop forms: same border, radius, focus colour and rhythm. */

/* The form sits directly under the hero, so it opens tight against it and
   carries an accent edge to read as the main thing on the page. */
.section--quote { padding-top: clamp(1.25rem, 2.5vw, 2rem); }
.section--quote .quoteform { border-top: 2px solid var(--accent); }

.quoteform {
	border: 1px solid var(--line); border-radius: var(--r-lg);
	background: var(--white); padding: clamp(1.4rem, 3vw, 2.25rem);
}
.quoteform .wpcf7-form > p { margin: 0 0 1.15rem; }
.quoteform .wpcf7-form > p:last-of-type { margin-bottom: 0; }

.quoteform label {
	display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.4rem;
}
.quoteform .r3d-hint { display: block; font-size: 0.78rem; color: var(--text-dim); margin-top: 0.15rem; }

.quoteform input[type="text"],
.quoteform input[type="email"],
.quoteform input[type="url"],
.quoteform input[type="tel"],
.quoteform input[type="number"],
.quoteform input[type="date"],
.quoteform select,
.quoteform textarea {
	width: 100%; padding: 0.7rem 0.85rem; min-height: 2.9rem;
	border: 1px solid var(--line-strong); border-radius: var(--r);
	background: var(--white); color: var(--text);
	font-family: var(--font-body); font-size: 0.95rem; line-height: 1.4;
	transition: border-color var(--dur) var(--ease);
}
.quoteform textarea { min-height: 8rem; resize: vertical; }
.quoteform input:focus, .quoteform select:focus, .quoteform textarea:focus {
	outline: none; border-color: var(--accent);
}

/* The file field: a browser default that looks like nothing else on the page,
   boxed so it reads as part of the form. */
.quoteform input[type="file"] {
	width: 100%; padding: 0.7rem 0.85rem;
	border: 1px dashed var(--line-strong); border-radius: var(--r);
	background: var(--sand-15); color: var(--text-muted);
	font-family: var(--font-body); font-size: 0.9rem;
	cursor: pointer;
}
.quoteform input[type="file"]::file-selector-button {
	margin-right: 0.9rem; padding: 0.45rem 0.9rem;
	border: 1px solid var(--accent-line); border-radius: var(--r);
	background: var(--white); color: var(--accent);
	font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; cursor: pointer;
}
.quoteform input[type="file"]:hover { border-color: var(--accent); }

.quoteform .wpcf7-list-item { margin: 0; }
.quoteform .wpcf7-acceptance label,
.quoteform .wpcf7-checkbox label,
.quoteform .wpcf7-radio label {
	display: flex; align-items: flex-start; gap: 0.6rem; margin: 0;
	font-size: 0.88rem; color: var(--text-muted);
}
.quoteform .wpcf7-acceptance input { width: auto; min-height: 0; margin-top: 0.2rem; }

.quoteform input[type="submit"],
.quoteform button[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0.7rem 1.35rem; width: auto; min-height: 0;
	border: 1px solid var(--accent); border-radius: var(--r);
	background: var(--accent); color: var(--accent-on);
	font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.quoteform input[type="submit"]:hover,
.quoteform button[type="submit"]:hover { background: var(--accent-vivid); border-color: var(--accent-vivid); }

.quoteform .wpcf7-spinner { margin-left: 0.7rem; }

/* CF7's own messages. */
.quoteform .wpcf7-response-output {
	margin: 1.4rem 0 0; padding: 0.9rem 1.1rem;
	border: 1px solid var(--line-strong); border-left-width: 3px; border-radius: var(--r);
	font-size: 0.9rem; color: var(--text);
}
.quoteform form.sent .wpcf7-response-output { border-left-color: var(--accent); }
.quoteform form.invalid .wpcf7-response-output,
.quoteform form.failed .wpcf7-response-output { border-left-color: #c0392b; }
.quoteform .wpcf7-not-valid-tip { color: #c0392b; font-size: 0.82rem; margin-top: 0.3rem; }
.quoteform .wpcf7-not-valid { border-color: #c0392b; }

.quoteform__alt { margin: 1.1rem 0 0; font-size: 0.88rem; color: var(--text-dim); }
.quoteform__alt a { color: var(--accent); }