/* =========================================================================
   Studio Variant — Design System
   "Matte Graphite & Machined Light"
   Shared tokens + components. Used by /design and all product screens.
   ========================================================================= */

/* ------------------------------ 1. Tokens ------------------------------- */

:root {
	/* Graphite ramp — matte, never glossy */
	--sv-void: #08090a;
	--sv-graphite-900: #101213;
	--sv-graphite-850: #15181a;
	--sv-graphite-800: #191c1e;
	--sv-graphite-750: #1e2225;
	--sv-graphite-700: #24282b;
	--sv-graphite-600: #2e3337;
	--sv-graphite-500: #3a4045;
	--sv-graphite-400: #4b5257;

	/* Text ramp */
	--sv-mist-500: #5f676c;
	--sv-mist-400: #798186;
	/* Small monospace text (11px) on any graphite surface: 5.9:1 on graphite-900 */
	--sv-mist-350: #8a9298;
	--sv-mist-300: #9aa2a7;
	--sv-mist-200: #c2c8cb;
	--sv-mist-100: #e3e6e7;
	--sv-mist-050: #f1f3f3;
	--sv-paper: #f6f7f7;

	/* Restrained metallic accents.
	   Titanium = commercial / industrial. Brass = creative / bespoke.
	   Equal weight, never used together as a gradient. */
	--sv-titanium: #b9c0c4;
	--sv-titanium-bright: #dfe4e6;
	--sv-titanium-deep: #7d868b;
	--sv-titanium-wash: rgba(185, 192, 196, 0.1);
	--sv-titanium-line: rgba(185, 192, 196, 0.34);

	--sv-brass: #c3a06a;
	--sv-brass-bright: #dcc094;
	--sv-brass-deep: #8d7247;
	--sv-brass-wash: rgba(195, 160, 106, 0.1);
	--sv-brass-line: rgba(195, 160, 106, 0.34);

	/* Semantic */
	--sv-success: #6e9a79;
	--sv-success-wash: rgba(110, 154, 121, 0.12);
	--sv-warning: #c8a04a;
	--sv-warning-wash: rgba(200, 160, 74, 0.12);
	--sv-error: #b85d51;
	--sv-error-wash: rgba(184, 93, 81, 0.12);
	--sv-info: #6d8899;
	--sv-info-wash: rgba(109, 136, 153, 0.12);

	/* Roles */
	--sv-bg: var(--sv-graphite-900);
	--sv-bg-sunken: var(--sv-void);
	--sv-surface: var(--sv-graphite-850);
	--sv-surface-raised: var(--sv-graphite-800);
	--sv-surface-hover: var(--sv-graphite-750);
	--sv-border: var(--sv-graphite-600);
	--sv-border-strong: var(--sv-graphite-500);
	--sv-border-hairline: rgba(255, 255, 255, 0.06);
	--sv-text: var(--sv-mist-050);
	--sv-text-secondary: var(--sv-mist-300);
	--sv-text-muted: var(--sv-mist-400);
	--sv-text-faint: var(--sv-mist-500);

	/* Type */
	--sv-font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
	--sv-font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
	--sv-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

	--sv-display-xl: clamp(2.75rem, 6.2vw, 5.25rem);
	--sv-display-l: clamp(2.25rem, 4.6vw, 3.75rem);
	--sv-display-m: clamp(1.875rem, 3.4vw, 2.75rem);
	--sv-h2: clamp(1.625rem, 2.6vw, 2.25rem);
	--sv-h3: clamp(1.25rem, 1.8vw, 1.5rem);
	--sv-h4: 1.1875rem;
	--sv-body-l: 1.125rem;
	--sv-body: 1rem;
	--sv-body-s: 0.875rem;
	--sv-label: 0.75rem;
	--sv-micro: 0.6875rem;

	/* Spacing — 4px base */
	--sv-1: 4px;
	--sv-2: 8px;
	--sv-3: 12px;
	--sv-4: 16px;
	--sv-5: 24px;
	--sv-6: 32px;
	--sv-7: 48px;
	--sv-8: 64px;
	--sv-9: 96px;
	--sv-10: 128px;
	--sv-11: 160px;

	/* Layout */
	--sv-content: 1280px;
	--sv-wide: 1440px;
	--sv-prose: 68ch;
	--sv-gutter: var(--sv-5);

	/* Precision edges — tight radii only */
	--sv-radius-xs: 2px;
	--sv-radius-sm: 4px;
	--sv-radius-md: 8px;
	--sv-radius-lg: 12px;
	--sv-radius-pill: 999px;

	/* Elevation — matte, no coloured glow */
	--sv-shadow-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.045);
	--sv-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 28px -12px rgba(0, 0, 0, 0.7);
	--sv-shadow-float: 0 2px 6px rgba(0, 0, 0, 0.55), 0 24px 56px -20px rgba(0, 0, 0, 0.8);

	/* Carbon composite weave + fine grain. Very low opacity by design. */
	--sv-texture-carbon: repeating-linear-gradient(
			45deg,
			rgba(255, 255, 255, 0.016) 0 2px,
			rgba(255, 255, 255, 0) 2px 4px
		),
		repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.16) 0 2px, rgba(0, 0, 0, 0) 2px 4px);

	/* Motion */
	--sv-ease-precision: cubic-bezier(0.2, 0.7, 0.2, 1);
	--sv-ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
	--sv-fast: 140ms;
	--sv-base: 240ms;
	--sv-slow: 420ms;

	--sv-focus: 0 0 0 2px var(--sv-graphite-900), 0 0 0 4px var(--sv-titanium-line);
}

/* Light surface variant — used sparingly for contrast sections */
.sv-invert {
	--sv-bg: var(--sv-paper);
	--sv-surface: #ffffff;
	--sv-surface-raised: #ffffff;
	--sv-surface-hover: #eef0f0;
	--sv-border: #d9dcdd;
	--sv-border-strong: #c3c8ca;
	--sv-border-hairline: rgba(0, 0, 0, 0.08);
	--sv-text: #14171a;
	--sv-text-secondary: #4b5257;
	--sv-text-muted: #6b7377;
	--sv-text-faint: #8b9296;
	--sv-titanium: #5f686d;
	--sv-brass: #8d7247;
	--sv-focus: 0 0 0 2px #ffffff, 0 0 0 4px rgba(95, 104, 109, 0.5);
	background: var(--sv-bg);
	color: var(--sv-text);
}

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

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

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

body {
	margin: 0;
	background-color: var(--sv-bg);
	background-image: var(--sv-texture-carbon);
	color: var(--sv-text);
	font-family: var(--sv-font-body);
	font-size: var(--sv-body);
	line-height: 1.65;
	font-feature-settings: "cv05" 1, "ss03" 1;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--sv-titanium-wash);
	color: var(--sv-mist-050);
}

:focus-visible {
	outline: none;
	box-shadow: var(--sv-focus);
	border-radius: var(--sv-radius-xs);
}

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

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

/* ------------------------------ 3. Type -------------------------------- */

.sv-display-xl,
.sv-display-l,
.sv-display-m,
.sv-h2,
.sv-h3,
.sv-h4 {
	font-family: var(--sv-font-display);
	color: var(--sv-text);
	margin: 0;
	text-wrap: balance;
}

.sv-display-xl {
	font-size: var(--sv-display-xl);
	font-weight: 500;
	line-height: 1.01;
	letter-spacing: -0.032em;
}
.sv-display-l {
	font-size: var(--sv-display-l);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.026em;
}
.sv-display-m {
	font-size: var(--sv-display-m);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.022em;
}
.sv-h2 {
	font-size: var(--sv-h2);
	font-weight: 500;
	line-height: 1.14;
	letter-spacing: -0.018em;
}
.sv-h3 {
	font-size: var(--sv-h3);
	font-weight: 500;
	line-height: 1.24;
	letter-spacing: -0.012em;
}
.sv-h4 {
	font-size: var(--sv-h4);
	font-weight: 500;
	line-height: 1.34;
	letter-spacing: -0.008em;
}

.sv-body-l {
	font-size: var(--sv-body-l);
	line-height: 1.6;
	color: var(--sv-text-secondary);
	margin: 0;
}
.sv-body {
	font-size: var(--sv-body);
	line-height: 1.65;
	color: var(--sv-text-secondary);
	margin: 0;
}
.sv-body-s {
	font-size: var(--sv-body-s);
	line-height: 1.6;
	color: var(--sv-text-muted);
	margin: 0;
}

/* Engineering micro-label. The technical voice of the brand. */
.sv-label {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
	margin: 0;
}
.sv-micro {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
	margin: 0;
}

/* Numbered section marker, e.g. 01 / CAPABILITIES */
.sv-section-mark {
	display: flex;
	align-items: center;
	gap: var(--sv-3);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
}
.sv-section-mark::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, var(--sv-border-strong), transparent);
}
.sv-section-mark b {
	color: var(--sv-titanium);
	font-weight: 500;
}
.sv-section-mark.is-creator b {
	color: var(--sv-brass);
}

.sv-prose {
	max-width: var(--sv-prose);
	color: var(--sv-text-secondary);
}
.sv-prose p {
	margin: 0 0 var(--sv-4);
}

a {
	color: var(--sv-text);
	text-decoration: none;
}

.sv-link {
	color: var(--sv-text);
	border-bottom: 1px solid var(--sv-titanium-line);
	padding-bottom: 1px;
	transition: border-color var(--sv-fast) var(--sv-ease-precision), color var(--sv-fast);
}
.sv-link:hover {
	border-bottom-color: var(--sv-titanium);
}

/* Directional text link with a rule that extends on hover */
.sv-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sv-2);
	/* Taller touch target without moving the line */
	padding: 4px 0;
	margin: -4px 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sv-text);
}
.sv-link-arrow i {
	display: block;
	width: 20px;
	height: 1px;
	background: var(--sv-titanium);
	transition: width var(--sv-base) var(--sv-ease-precision);
}
.sv-link-arrow:hover i {
	width: 34px;
}
.sv-link-arrow.is-creator i {
	background: var(--sv-brass);
}

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

.sv-container {
	width: 100%;
	max-width: var(--sv-content);
	margin: 0 auto;
	padding: 0 var(--sv-gutter);
}
.sv-container-wide {
	max-width: var(--sv-wide);
}

.sv-section {
	padding: var(--sv-9) 0;
}
.sv-section-tight {
	padding: var(--sv-7) 0;
}

.sv-stack {
	display: flex;
	flex-direction: column;
	gap: var(--sv-4);
}
.sv-stack-lg {
	gap: var(--sv-6);
}
.sv-row {
	display: flex;
	align-items: center;
	gap: var(--sv-3);
	flex-wrap: wrap;
}

.sv-grid {
	display: grid;
	gap: var(--sv-4);
}
.sv-grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sv-grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sv-grid-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Hairline rule with a metallic centre — the core decorative device */
.sv-hairline {
	height: 1px;
	border: 0;
	margin: 0;
	background: linear-gradient(90deg, transparent, var(--sv-titanium-line) 18%, var(--sv-titanium-line) 82%, transparent);
}
.sv-hairline.is-creator {
	background: linear-gradient(90deg, transparent, var(--sv-brass-line) 18%, var(--sv-brass-line) 82%, transparent);
}

/* Machined corner brackets — used on hero frames and featured cards */
.sv-bracket {
	position: relative;
}
.sv-bracket::before,
.sv-bracket::after {
	content: "";
	position: absolute;
	width: 14px;
	height: 14px;
	border-color: var(--sv-titanium-deep);
	border-style: solid;
	pointer-events: none;
}
.sv-bracket::before {
	top: -1px;
	left: -1px;
	border-width: 1px 0 0 1px;
}
.sv-bracket::after {
	bottom: -1px;
	right: -1px;
	border-width: 0 1px 1px 0;
}

/* ---------------------------- 5. Surfaces ------------------------------ */

.sv-panel {
	background-color: var(--sv-surface);
	background-image: var(--sv-texture-carbon);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	box-shadow: var(--sv-shadow-hairline);
	padding: var(--sv-5);
}

.sv-panel-raised {
	background-color: var(--sv-surface-raised);
	background-image: var(--sv-texture-carbon);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	box-shadow: var(--sv-shadow-hairline), var(--sv-shadow-raised);
	padding: var(--sv-5);
}

.sv-panel-sunken {
	background: var(--sv-bg-sunken);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	padding: var(--sv-5);
}

/* --------------------------- 6. Buttons -------------------------------- */

.sv-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sv-2);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	padding: 15px var(--sv-5);
	min-height: 46px;
	border-radius: var(--sv-radius-sm);
	border: 1px solid transparent;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	transition: background-color var(--sv-base) var(--sv-ease-precision),
		border-color var(--sv-base) var(--sv-ease-precision), color var(--sv-base), transform var(--sv-fast);
}
.sv-btn:active {
	transform: translateY(1px);
}

/* Primary — machined titanium. Commercial default. */
.sv-btn-primary {
	background: linear-gradient(180deg, var(--sv-mist-100), var(--sv-titanium));
	color: #14171a;
	border-color: var(--sv-titanium-bright);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.sv-btn-primary:hover {
	background: linear-gradient(180deg, #ffffff, var(--sv-titanium-bright));
}

/* Secondary — graphite with a metallic edge */
.sv-btn-secondary {
	background: var(--sv-graphite-750);
	color: var(--sv-text);
	border-color: var(--sv-border-strong);
	box-shadow: var(--sv-shadow-hairline);
}
.sv-btn-secondary:hover {
	background: var(--sv-graphite-700);
	border-color: var(--sv-titanium-line);
}

/* Outline — quiet, for tertiary placement */
.sv-btn-outline {
	background: transparent;
	color: var(--sv-text);
	border-color: var(--sv-border-strong);
}
.sv-btn-outline:hover {
	border-color: var(--sv-titanium);
	background: var(--sv-titanium-wash);
}

/* Creator — warm brass edge. Equal weight to primary, different temperature. */
.sv-btn-creator {
	background: transparent;
	color: var(--sv-brass-bright);
	border-color: var(--sv-brass-line);
}
.sv-btn-creator:hover {
	background: var(--sv-brass-wash);
	border-color: var(--sv-brass);
}

.sv-btn-ghost {
	background: transparent;
	color: var(--sv-text-secondary);
	border-color: transparent;
	padding-left: var(--sv-3);
	padding-right: var(--sv-3);
}
.sv-btn-ghost:hover {
	color: var(--sv-text);
	background: rgba(255, 255, 255, 0.04);
}

.sv-btn-danger {
	background: transparent;
	color: var(--sv-error);
	border-color: rgba(184, 93, 81, 0.4);
}
.sv-btn-danger:hover {
	background: var(--sv-error-wash);
	border-color: var(--sv-error);
}

.sv-btn-sm {
	min-height: 36px;
	padding: 10px var(--sv-4);
	font-size: var(--sv-micro);
}
.sv-btn-lg {
	min-height: 54px;
	padding: 18px var(--sv-6);
}
.sv-btn-block {
	width: 100%;
}

.sv-btn:disabled,
.sv-btn[aria-disabled="true"] {
	opacity: 0.38;
	cursor: not-allowed;
	transform: none;
}

/* Loading — the scan sweep. Signature motion, reused for all progress. */
.sv-btn.is-loading {
	color: transparent;
	pointer-events: none;
}
.sv-btn.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	width: 40%;
	animation: sv-sweep 1.1s var(--sv-ease-precision) infinite;
}

@keyframes sv-sweep {
	0% {
		transform: translateX(-120%);
	}
	100% {
		transform: translateX(320%);
	}
}

/* ---------------------------- 7. Forms --------------------------------- */

.sv-field {
	display: flex;
	flex-direction: column;
	gap: var(--sv-2);
}

.sv-field > label {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sv-text-secondary);
}
.sv-field .sv-optional {
	color: var(--sv-text-faint);
	text-transform: none;
	letter-spacing: 0.04em;
}

.sv-input,
.sv-textarea,
.sv-select {
	font-family: var(--sv-font-body);
	font-size: var(--sv-body);
	color: var(--sv-text);
	background: var(--sv-graphite-850);
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-sm);
	padding: 13px var(--sv-4);
	width: 100%;
	transition: border-color var(--sv-base) var(--sv-ease-precision), background-color var(--sv-base);
}
.sv-input::placeholder,
.sv-textarea::placeholder {
	color: var(--sv-text-faint);
}
.sv-input:hover,
.sv-textarea:hover,
.sv-select:hover {
	border-color: var(--sv-graphite-400);
}
.sv-input:focus,
.sv-textarea:focus,
.sv-select:focus {
	outline: none;
	border-color: var(--sv-titanium);
	background: var(--sv-graphite-800);
	box-shadow: 0 0 0 3px var(--sv-titanium-wash);
}
.sv-textarea {
	min-height: 132px;
	resize: vertical;
	line-height: 1.6;
}
.sv-select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--sv-text-muted) 50%),
		linear-gradient(135deg, var(--sv-text-muted) 50%, transparent 50%);
	background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: var(--sv-8);
}

.sv-help {
	font-size: var(--sv-body-s);
	color: var(--sv-text-muted);
}

.sv-field.is-invalid .sv-input,
.sv-field.is-invalid .sv-textarea,
.sv-field.is-invalid .sv-select {
	border-color: var(--sv-error);
	background: var(--sv-error-wash);
}
.sv-error-text {
	display: flex;
	align-items: center;
	gap: var(--sv-2);
	font-size: var(--sv-body-s);
	color: var(--sv-error);
}

.sv-input:disabled,
.sv-textarea:disabled,
.sv-select:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Radio / checkbox as selectable precision tiles */
.sv-choice {
	display: flex;
	align-items: flex-start;
	gap: var(--sv-3);
	padding: var(--sv-4);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-graphite-850);
	cursor: pointer;
	transition: border-color var(--sv-base) var(--sv-ease-precision), background-color var(--sv-base);
}
.sv-choice:hover {
	border-color: var(--sv-graphite-400);
	background: var(--sv-surface-hover);
}
.sv-choice input {
	margin: 3px 0 0;
	accent-color: var(--sv-titanium);
	flex: none;
}
.sv-choice strong {
	display: block;
	font-family: var(--sv-font-display);
	font-weight: 500;
	color: var(--sv-text);
	font-size: var(--sv-body);
}
.sv-choice span {
	display: block;
	font-size: var(--sv-body-s);
	color: var(--sv-text-muted);
	line-height: 1.5;
}
.sv-choice.is-selected {
	border-color: var(--sv-titanium-line);
	background: var(--sv-titanium-wash);
	box-shadow: inset 2px 0 0 var(--sv-titanium);
}

/* File drop — plain language, no jargon */
.sv-dropzone {
	border: 1px dashed var(--sv-border-strong);
	border-radius: var(--sv-radius-md);
	background: var(--sv-graphite-850);
	padding: var(--sv-7) var(--sv-5);
	text-align: center;
	transition: border-color var(--sv-base) var(--sv-ease-precision), background-color var(--sv-base);
	cursor: pointer;
}
.sv-dropzone:hover,
.sv-dropzone.is-dragover {
	border-color: var(--sv-titanium);
	background: var(--sv-titanium-wash);
}
.sv-dropzone .sv-dropzone-icon {
	width: 34px;
	height: 34px;
	margin: 0 auto var(--sv-3);
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-sm);
	display: grid;
	place-items: center;
	color: var(--sv-titanium);
}

.sv-file-row {
	display: flex;
	align-items: center;
	gap: var(--sv-3);
	padding: var(--sv-3) var(--sv-4);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-graphite-850);
}
.sv-file-row .sv-file-name {
	flex: 1;
	min-width: 0;
	font-size: var(--sv-body-s);
	color: var(--sv-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sv-file-row .sv-file-size {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	color: var(--sv-text-faint);
}

/* Progress — reuses the scan sweep language */
.sv-progress {
	height: 2px;
	background: var(--sv-graphite-700);
	border-radius: var(--sv-radius-pill);
	overflow: hidden;
}
.sv-progress > i {
	display: block;
	height: 100%;
	background: var(--sv-titanium);
}
.sv-progress.is-indeterminate > i {
	width: 34%;
	animation: sv-sweep 1.3s var(--sv-ease-precision) infinite;
}

/* ---------------------------- 8. Badges -------------------------------- */

.sv-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.13em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: var(--sv-radius-xs);
	border: 1px solid var(--sv-border-strong);
	color: var(--sv-text-secondary);
	background: var(--sv-graphite-800);
	white-space: nowrap;
}
.sv-badge-business {
	border-color: var(--sv-titanium-line);
	color: var(--sv-titanium);
	background: var(--sv-titanium-wash);
}
.sv-badge-creator {
	border-color: var(--sv-brass-line);
	color: var(--sv-brass-bright);
	background: var(--sv-brass-wash);
}
.sv-badge-new {
	border-color: rgba(109, 136, 153, 0.4);
	color: var(--sv-info);
	background: var(--sv-info-wash);
}
.sv-badge-reviewing {
	border-color: rgba(200, 160, 74, 0.4);
	color: var(--sv-warning);
	background: var(--sv-warning-wash);
}
.sv-badge-replied {
	border-color: rgba(110, 154, 121, 0.4);
	color: var(--sv-success);
	background: var(--sv-success-wash);
}
.sv-badge-closed {
	color: var(--sv-text-faint);
}
.sv-badge-draft {
	border-style: dashed;
	color: var(--sv-text-muted);
}

/* Filter chips */
.sv-chip {
	appearance: none;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 9px var(--sv-4);
	border-radius: var(--sv-radius-pill);
	border: 1px solid var(--sv-border);
	background: transparent;
	color: var(--sv-text-muted);
	cursor: pointer;
	transition: all var(--sv-base) var(--sv-ease-precision);
}
.sv-chip:hover {
	color: var(--sv-text);
	border-color: var(--sv-graphite-400);
}
.sv-chip[aria-pressed="true"] {
	color: var(--sv-mist-050);
	border-color: var(--sv-titanium);
	background: var(--sv-titanium-wash);
}
.sv-chip[aria-pressed="true"].is-creator {
	border-color: var(--sv-brass);
	background: var(--sv-brass-wash);
	color: var(--sv-brass-bright);
}

/* ----------------------------- 9. Cards -------------------------------- */

.sv-card {
	display: flex;
	flex-direction: column;
	background-color: var(--sv-surface);
	background-image: var(--sv-texture-carbon);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	overflow: hidden;
	box-shadow: var(--sv-shadow-hairline);
	transition: border-color var(--sv-base) var(--sv-ease-precision), transform var(--sv-slow) var(--sv-ease-settle),
		box-shadow var(--sv-slow);
}
.sv-card:hover {
	border-color: var(--sv-titanium-line);
	transform: translateY(-2px);
	box-shadow: var(--sv-shadow-hairline), var(--sv-shadow-raised);
}
.sv-card-body {
	padding: var(--sv-5);
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
	flex: 1;
}
.sv-card-media {
	aspect-ratio: 4 / 3;
	background: var(--sv-void);
	border-bottom: 1px solid var(--sv-border);
	position: relative;
	overflow: hidden;
}

/* Capability card — index number, title, plain-language line */
.sv-capability {
	padding: var(--sv-5);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background-color: var(--sv-surface);
	background-image: var(--sv-texture-carbon);
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
	position: relative;
	transition: border-color var(--sv-base) var(--sv-ease-precision);
}
.sv-capability:hover {
	border-color: var(--sv-titanium-line);
}
.sv-capability .sv-capability-index {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.16em;
	color: var(--sv-titanium-deep);
}

/* Audience path card — For Business / For Creators. Equal weight. */
.sv-path {
	position: relative;
	padding: var(--sv-7) var(--sv-6);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background-color: var(--sv-surface);
	background-image: var(--sv-texture-carbon);
	display: flex;
	flex-direction: column;
	gap: var(--sv-4);
	overflow: hidden;
	transition: border-color var(--sv-slow) var(--sv-ease-precision);
}
.sv-path::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--sv-titanium-line), transparent);
}
.sv-path.is-creator::before {
	background: linear-gradient(90deg, transparent, var(--sv-brass-line), transparent);
}
.sv-path:hover {
	border-color: var(--sv-titanium-line);
}
.sv-path.is-creator:hover {
	border-color: var(--sv-brass-line);
}

/* Process step — problem → process → result */
.sv-step {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: var(--sv-4);
	padding-bottom: var(--sv-6);
	position: relative;
}
.sv-step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 21px;
	top: 44px;
	bottom: 8px;
	width: 1px;
	background: linear-gradient(180deg, var(--sv-border-strong), transparent);
}
.sv-step-marker {
	width: 44px;
	height: 44px;
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-sm);
	display: grid;
	place-items: center;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	color: var(--sv-titanium);
	background: var(--sv-graphite-850);
	flex: none;
}

/* --------------------------- 10. Navigation ---------------------------- */

.sv-nav {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(16, 18, 19, 0.82);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	backdrop-filter: blur(14px) saturate(120%);
	border-bottom: 1px solid var(--sv-border-hairline);
}
.sv-nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sv-5);
	height: 68px;
}
.sv-wordmark {
	font-family: var(--sv-font-display);
	font-weight: 500;
	font-size: 1.0625rem;
	letter-spacing: -0.01em;
	color: var(--sv-text);
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
}
.sv-wordmark em {
	font-style: normal;
	color: var(--sv-text-muted);
	font-weight: 400;
}
.sv-nav-links {
	display: flex;
	align-items: center;
	gap: var(--sv-5);
	list-style: none;
	margin: 0;
	padding: 0;
}
.sv-nav-links a {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
	padding: var(--sv-2) 0;
	position: relative;
	transition: color var(--sv-base);
}
.sv-nav-links a:hover {
	color: var(--sv-text);
}
.sv-nav-links a[aria-current="page"] {
	color: var(--sv-text);
}
.sv-nav-links a[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--sv-titanium);
}
.sv-nav-burger {
	display: none;
	width: 44px;
	height: 44px;
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-sm);
	background: transparent;
	color: var(--sv-text);
	cursor: pointer;
	place-items: center;
}

.sv-footer {
	border-top: 1px solid var(--sv-border);
	padding: var(--sv-8) 0 var(--sv-6);
	background: var(--sv-bg-sunken);
}

/* ------------------------- 11. Feedback states ------------------------- */

.sv-alert {
	display: flex;
	gap: var(--sv-3);
	padding: var(--sv-4);
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-sm);
	border-left-width: 2px;
	font-size: var(--sv-body-s);
	color: var(--sv-text-secondary);
	background: var(--sv-graphite-850);
}
.sv-alert-success {
	border-left-color: var(--sv-success);
	background: var(--sv-success-wash);
}
.sv-alert-warning {
	border-left-color: var(--sv-warning);
	background: var(--sv-warning-wash);
}
.sv-alert-error {
	border-left-color: var(--sv-error);
	background: var(--sv-error-wash);
}
.sv-alert-info {
	border-left-color: var(--sv-info);
	background: var(--sv-info-wash);
}

/* Empty state — dignified and honest, never apologetic */
.sv-empty {
	text-align: center;
	padding: var(--sv-9) var(--sv-5);
	border: 1px dashed var(--sv-border-strong);
	border-radius: var(--sv-radius-md);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sv-3);
}
.sv-empty-mark {
	width: 46px;
	height: 46px;
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-sm);
	display: grid;
	place-items: center;
	color: var(--sv-titanium-deep);
	margin-bottom: var(--sv-2);
}

/* Skeleton — scan sweep, not a pulse */
.sv-skeleton {
	position: relative;
	overflow: hidden;
	background: var(--sv-graphite-800);
	border-radius: var(--sv-radius-xs);
}
.sv-skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 45%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
	animation: sv-sweep 1.5s var(--sv-ease-precision) infinite;
}

/* Popup / modal */
.sv-scrim {
	position: fixed;
	inset: 0;
	background: rgba(8, 9, 10, 0.72);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	z-index: 60;
	display: grid;
	place-items: center;
	padding: var(--sv-5);
}
.sv-modal {
	width: min(560px, 100%);
	background-color: var(--sv-graphite-850);
	background-image: var(--sv-texture-carbon);
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-lg);
	box-shadow: var(--sv-shadow-float);
	padding: var(--sv-6);
}

/* Data table / enquiry list */
.sv-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--sv-body-s);
}
.sv-table th {
	text-align: left;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
	font-weight: 500;
	padding: var(--sv-3) var(--sv-4);
	border-bottom: 1px solid var(--sv-border-strong);
}
.sv-table td {
	padding: var(--sv-4);
	border-bottom: 1px solid var(--sv-border);
	color: var(--sv-text-secondary);
}
.sv-table tbody tr {
	transition: background-color var(--sv-fast);
}
.sv-table tbody tr:hover {
	background: var(--sv-surface-hover);
}

/* ---------------------- 12. Hero & CAD-to-real ------------------------- */

.sv-hero {
	position: relative;
	overflow: hidden;
	background: var(--sv-bg-sunken);
	isolation: isolate;
}
/* Measurement grid. Deliberately faint so the headline always wins. */
.sv-hero-grid {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: linear-gradient(to right, rgba(185, 192, 196, 0.045) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(185, 192, 196, 0.045) 1px, transparent 1px);
	background-size: 88px 88px;
	mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 78%);
}
.sv-hero-objects {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
.sv-hero-object {
	position: absolute;
	opacity: 0.5;
}
.sv-hero-object.is-industrial {
	left: -4%;
	bottom: -6%;
	width: min(46%, 520px);
}
.sv-hero-object.is-creative {
	right: -3%;
	top: 4%;
	width: min(38%, 430px);
}
/* Vignette keeps the centre readable over the objects */
.sv-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(ellipse 58% 52% at 50% 48%, rgba(16, 18, 19, 0.88), rgba(16, 18, 19, 0) 72%);
	pointer-events: none;
}

/* CAD wireframe to solid material. Left half wire, right half machined. */
.sv-cad-wire {
	fill: none;
	stroke: var(--sv-titanium);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	opacity: 0.55;
}
.sv-cad-wire-faint {
	fill: none;
	stroke: var(--sv-titanium);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	opacity: 0.22;
}
.sv-cad-solid {
	stroke: none;
}
.sv-cad-wire-brass {
	fill: none;
	stroke: var(--sv-brass);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	opacity: 0.5;
}
.sv-cad-wire-brass-faint {
	fill: none;
	stroke: var(--sv-brass);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	opacity: 0.2;
}

/* ---------------- 13. Cinematic intro — replaceable slot --------------- */

/* A full-screen slot for the finished intro film.
   To install the real film, set a source on the <video data-intro-video>
   element. When a source is present the placeholder below never renders.
   Skippable by tap, click, or any key. Plays once per session. */

.sv-intro {
	position: fixed;
	inset: 0;
	z-index: 90;
	background-color: var(--sv-void);
	display: grid;
	place-items: center;
	overflow: hidden;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.sv-intro[hidden] {
	display: none;
}

/* The film itself, once supplied. Fills the viewport without letterboxing. */
.sv-intro-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--sv-void);
}

/* Beat two: the overlay clears so the real landing lockup can resolve
   underneath it. Nothing is duplicated, so the name cannot jump. */
.sv-intro.is-resolving {
	animation: sv-intro-clear 1000ms var(--sv-ease-settle) forwards;
}
@keyframes sv-intro-clear {
	to {
		background-color: transparent;
	}
}
.sv-intro.is-resolving .sv-intro-frame,
.sv-intro.is-resolving .sv-intro-note {
	opacity: 0;
	transition: opacity 700ms var(--sv-ease-settle);
}

/* Hand-off: the overlay lifts and opens slightly, as if pulling back from
   the wordmark. Only the skip control is still on screen by this point. */
.sv-intro.is-done {
	animation: sv-intro-exit 780ms var(--sv-ease-settle) forwards;
}
@keyframes sv-intro-exit {
	0% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(1.04);
		visibility: hidden;
	}
}

/* ---- Placeholder composition ----
   Deliberately a suggestion of the film, not a recreation of it: three
   process marks resolve into the wordmark. Replaced wholesale by the video. */

.sv-intro-slot {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	text-align: center;
}

/* Faint machined frame marking the reserved film area */
.sv-intro-frame {
	position: absolute;
	inset: clamp(var(--sv-5), 5vh, var(--sv-7)) clamp(var(--sv-5), 5vw, var(--sv-8));
	pointer-events: none;
}
.sv-intro-frame span {
	position: absolute;
	width: 18px;
	height: 18px;
	border: 1px solid var(--sv-graphite-500);
	opacity: 0.8;
}
.sv-intro-frame span:nth-child(1) {
	top: 0;
	left: 0;
	border-width: 1px 0 0 1px;
}
.sv-intro-frame span:nth-child(2) {
	top: 0;
	right: 0;
	border-width: 1px 1px 0 0;
}
.sv-intro-frame span:nth-child(3) {
	bottom: 0;
	left: 0;
	border-width: 0 0 1px 1px;
}
.sv-intro-frame span:nth-child(4) {
	bottom: 0;
	right: 0;
	border-width: 0 1px 1px 0;
}

/* Beat 1 — three processes, each forming a letter */
.sv-intro-processes {
	display: flex;
	align-items: flex-end;
	gap: clamp(var(--sv-5), 5vw, var(--sv-8));
	animation: sv-intro-processes 900ms var(--sv-ease-settle) 1500ms forwards;
}
@keyframes sv-intro-processes {
	to {
		opacity: 0;
		transform: translateY(-10px);
	}
}
.sv-intro-process {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sv-3);
	opacity: 0;
	animation: sv-intro-fade-up 620ms var(--sv-ease-settle) forwards;
}
.sv-intro-process:nth-child(2) {
	animation-delay: 240ms;
}
.sv-intro-process:nth-child(3) {
	animation-delay: 480ms;
}
@keyframes sv-intro-fade-up {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.sv-intro-mark {
	width: clamp(86px, 10vw, 150px);
}
.sv-glyph-svg {
	display: block;
	width: 100%;
	height: auto;
}
.sv-intro-process p {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sv-titanium-deep);
	margin: 0;
}
.sv-intro-process.is-creator p {
	color: var(--sv-brass-deep);
}

/* Beat 2 — the landing lockup itself resolves through the clearing overlay.
   The camera pull-back: 1.07 scale with the blur clearing. */
html.sv-intro-resolving .sv-lockup-wrap {
	animation: sv-lockup-resolve 1100ms var(--sv-ease-settle) forwards;
}
@keyframes sv-lockup-resolve {
	from {
		opacity: 0;
		transform: scale(1.07);
		filter: blur(2px);
	}
	to {
		opacity: 1;
		transform: none;
		filter: blur(0);
	}
}
/* "Precision manufacturing" arrives beneath, a beat later */
html.sv-intro-resolving .sv-lockup-sub {
	opacity: 0;
	animation: sv-intro-fade-up 760ms var(--sv-ease-settle) 800ms forwards;
}
/* The supporting line and the calls to action wait for the hand-off, so the
   opening frame holds the name and the strapline alone. */
.sv-dim,
.sv-lockup-actions {
	transition: opacity 700ms var(--sv-ease-settle);
}
html.sv-intro-resolving:not(.sv-intro-done) .sv-dim,
html.sv-intro-resolving:not(.sv-intro-done) .sv-lockup-actions {
	opacity: 0;
}

/* Skip affordance — always available, never shouted */
.sv-intro-skip {
	position: absolute;
	left: 50%;
	bottom: clamp(var(--sv-6), 6vh, var(--sv-8));
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: var(--sv-3);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sv-mist-350);
	background: transparent;
	border: 0;
	padding: var(--sv-3) var(--sv-4);
	cursor: pointer;
	transition: color var(--sv-base);
}
.sv-intro-skip:hover {
	color: var(--sv-titanium);
}
.sv-intro-skip i {
	display: block;
	width: 26px;
	height: 1px;
	background: currentColor;
	opacity: 0.6;
}

/* Quiet note identifying the reserved slot. Removed with the placeholder. */
.sv-intro-note {
	position: absolute;
	top: clamp(var(--sv-5), 5vh, var(--sv-7));
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sv-graphite-400);
	margin: 0;
}

/* Reveal-on-scroll, used site-wide. Restrained: fade plus 12px rise. */
.sv-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--sv-slow) var(--sv-ease-settle), transform var(--sv-slow) var(--sv-ease-settle);
}
.sv-reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (scripting: none) {
	.sv-reveal,
	.sv-door-reveal {
		opacity: 1;
		transform: none;
	}
}

/* --------------------------- 14. Utilities ----------------------------- */

.sv-mono {
	font-family: var(--sv-font-mono);
}
.sv-titanium {
	color: var(--sv-titanium);
}
.sv-brass {
	color: var(--sv-brass);
}
.sv-muted {
	color: var(--sv-text-muted);
}
.sv-center {
	text-align: center;
}
.sv-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.sv-skip-link {
	position: absolute;
	left: var(--sv-4);
	top: -60px;
	z-index: 100;
	background: var(--sv-mist-050);
	color: #14171a;
	padding: var(--sv-3) var(--sv-4);
	border-radius: var(--sv-radius-sm);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	transition: top var(--sv-base);
}
.sv-skip-link:focus {
	top: var(--sv-4);
}

/* ------------------------- 15. Responsive ------------------------------ */

@media (max-width: 1024px) {
	:root {
		--sv-9: 72px;
		--sv-10: 96px;
	}
	.sv-grid-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.sv-grid-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	:root {
		--sv-gutter: var(--sv-4);
		--sv-9: 60px;
	}
	.sv-nav-links {
		display: none;
	}
	.sv-nav-burger {
		display: grid;
	}
	.sv-grid-2,
	.sv-grid-3,
	.sv-grid-4 {
		grid-template-columns: minmax(0, 1fr);
	}
	.sv-hero-object.is-industrial {
		width: 74%;
		bottom: -10%;
		opacity: 0.34;
	}
	.sv-hero-object.is-creative {
		width: 58%;
		top: 2%;
		opacity: 0.3;
	}
	.sv-path {
		padding: var(--sv-6) var(--sv-5);
	}
	.sv-section {
		padding: var(--sv-8) 0;
	}
	/* Tables become stacked records on small screens */
	.sv-table thead {
		display: none;
	}
	.sv-table tr {
		display: block;
		border: 1px solid var(--sv-border);
		border-radius: var(--sv-radius-sm);
		margin-bottom: var(--sv-3);
		padding: var(--sv-2);
	}
	.sv-table td {
		display: flex;
		justify-content: space-between;
		gap: var(--sv-4);
		border: 0;
		padding: var(--sv-2) var(--sv-3);
	}
	.sv-table td::before {
		content: attr(data-label);
		font-family: var(--sv-font-mono);
		font-size: var(--sv-micro);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--sv-text-faint);
	}
}

/* Accessibility: honour reduced motion. The intro resolves instantly. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-delay: 0ms !important;
		transition-duration: 0.001ms !important;
	}
	.sv-reveal {
		opacity: 1;
		transform: none;
	}
	.sv-intro-process,
	.sv-lockup-wrap,
	.sv-lockup-sub,
	.sv-dim,
	.sv-lockup-actions {
		opacity: 1;
		transform: none;
		filter: none;
	}
	.sv-door-sweep {
		display: none;
	}
}

/* ===================== 16. Landing front door ========================== */

/* The homepage is one viewport. It entices; it does not explain.
   Rows: menu bar / centred lockup / dual gateway / process strip. */

.sv-door {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	display: grid;
	grid-template-rows: auto 1fr auto auto;
	overflow: hidden;
	background-color: var(--sv-bg);
	background-image: var(--sv-texture-carbon);
	isolation: isolate;
}
.sv-door > * {
	position: relative;
	z-index: 2;
}

/* ---- Atmosphere. Rich, never busy. ---- */

.sv-door-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

/* Faint measurement grid, masked to the centre so edges stay calm */
.sv-door-grid {
	position: absolute;
	inset: -10%;
	background-image: linear-gradient(to right, rgba(185, 192, 196, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(185, 192, 196, 0.05) 1px, transparent 1px);
	background-size: 96px 96px;
	mask-image: radial-gradient(ellipse 72% 64% at 50% 46%, #000 12%, transparent 76%);
	-webkit-mask-image: radial-gradient(ellipse 72% 64% at 50% 46%, #000 12%, transparent 76%);
}

/* Two partially formed objects emerging from the material.
   Industrial left in titanium, creative right in brass. Each is masked so
   its lower body dissolves back into the graphite rather than sitting on it. */
.sv-door-object {
	position: absolute;
	mask-image: linear-gradient(180deg, #000 34%, rgba(0, 0, 0, 0.45) 68%, transparent 94%);
	-webkit-mask-image: linear-gradient(180deg, #000 34%, rgba(0, 0, 0, 0.45) 68%, transparent 94%);
}
/* Each side also fades toward the middle, so the centre stays clean */
.sv-door-object.is-industrial {
	left: 1%;
	bottom: 20%;
	width: min(17.5%, 252px);
	opacity: 0.95;
	mask-image: linear-gradient(180deg, #000 90%, rgba(0, 0, 0, 0.7) 97%, transparent 100%),
		linear-gradient(90deg, #000 0%, #000 72%, rgba(0, 0, 0, 0.6) 90%, transparent 100%);
	-webkit-mask-image: linear-gradient(180deg, #000 90%, rgba(0, 0, 0, 0.7) 97%, transparent 100%),
		linear-gradient(90deg, #000 0%, #000 72%, rgba(0, 0, 0, 0.6) 90%, transparent 100%);
	mask-composite: intersect;
	-webkit-mask-composite: source-in;
}
.sv-door-object.is-creative {
	right: 1%;
	bottom: 14%;
	width: min(31%, 410px);
	opacity: 0.9;
	mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, 0.62) 84%, transparent 100%),
		linear-gradient(270deg, #000 0%, rgba(0, 0, 0, 0.82) 58%, rgba(0, 0, 0, 0.4) 86%, transparent 100%);
	-webkit-mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, 0.62) 84%, transparent 100%),
		linear-gradient(270deg, #000 0%, rgba(0, 0, 0, 0.82) 58%, rgba(0, 0, 0, 0.4) 86%, transparent 100%);
	mask-composite: intersect;
	-webkit-mask-composite: source-in;
}

/* Deep vignette. Guarantees the lockup always wins. */
.sv-door-vignette {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 52% 46% at 50% 44%, rgba(16, 18, 19, 0.94) 8%, rgba(16, 18, 19, 0) 70%),
		linear-gradient(180deg, rgba(8, 9, 10, 0.72) 0%, rgba(8, 9, 10, 0) 26%),
		linear-gradient(0deg, rgba(8, 9, 10, 0.86) 0%, rgba(8, 9, 10, 0) 34%);
}

/* A single slow inspection sweep. One pass every 16s. Almost subliminal. */
.sv-door-sweep {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: linear-gradient(180deg, transparent, rgba(185, 192, 196, 0.34), transparent);
	animation: sv-door-sweep 16s linear infinite;
}
@keyframes sv-door-sweep {
	0% {
		left: -2%;
		opacity: 0;
	}
	8% {
		opacity: 0.55;
	}
	46% {
		opacity: 0.55;
	}
	60% {
		left: 102%;
		opacity: 0;
	}
	100% {
		left: 102%;
		opacity: 0;
	}
}

/* ---- Menu bar ---- */

.sv-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sv-5);
	height: 76px;
	padding: 0 clamp(var(--sv-4), 4vw, var(--sv-8));
	border-bottom: 1px solid var(--sv-border-hairline);
}
.sv-topbar-mark {
	display: flex;
	align-items: center;
	gap: var(--sv-3);
}
/* Small mark. Hidden on the door itself, where the lockup carries the name. */
.sv-topbar .sv-wordmark {
	font-size: 0.9375rem;
}
/* ---- The SV mark is the menu. One trigger, top left. ---- */

.sv-mark-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sv-3);
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--sv-text-muted);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color var(--sv-base);
}
.sv-mark-btn svg {
	flex: none;
}
/* The approved emblem, as a clean micro icon. It brightens and lifts on
   approach so it reads as the control it is, not as decoration. */
.sv-mark-btn .sv-emblem {
	width: 30px;
	height: 30px;
	display: block;
	overflow: visible;
	transition: filter var(--sv-base), transform var(--sv-base) var(--sv-ease-precision);
}
.sv-mark-btn:hover,
.sv-mark-btn[aria-expanded="true"] {
	color: var(--sv-mist-100);
}
.sv-mark-btn:hover .sv-emblem,
.sv-mark-btn:focus-visible .sv-emblem,
.sv-mark-btn[aria-expanded="true"] .sv-emblem {
	filter: brightness(1.22) drop-shadow(0 0 5px rgba(223, 228, 230, 0.35));
	transform: scale(1.06);
}
.sv-mark-btn:focus-visible {
	outline: 1px solid var(--sv-titanium);
	outline-offset: 4px;
	border-radius: 2px;
}
/* The leading rule extends as the trigger is approached */
.sv-mark-btn i {
	display: block;
	width: 9px;
	height: 1px;
	background: currentColor;
	opacity: 0.55;
	transition: width var(--sv-base) var(--sv-ease-precision), opacity var(--sv-base);
}
.sv-mark-btn:hover i,
.sv-mark-btn[aria-expanded="true"] i {
	width: 20px;
	opacity: 1;
}

/* ---- Slim technical line: the processes themselves, understated ---- */

.sv-technav {
	--tn-pad: clamp(var(--sv-3), 1.1vw, var(--sv-4));
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}
.sv-technav li {
	position: relative;
}
.sv-technav li + li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 8px;
	background: var(--sv-graphite-500);
}
.sv-technav a {
	display: block;
	position: relative;
	padding: var(--sv-3) var(--tn-pad);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-mist-350);
	white-space: nowrap;
	transition: color var(--sv-base);
}
.sv-technav a:hover,
.sv-technav a:focus-visible {
	color: var(--sv-mist-100);
}
/* Precision hover: a measured hairline opens from the centre and a datum
   tick drops from above. Nothing moves, so the line never jitters. */
.sv-technav a::after {
	content: "";
	position: absolute;
	left: var(--tn-pad);
	right: var(--tn-pad);
	bottom: 7px;
	height: 1px;
	background: var(--sv-titanium);
	transform: scaleX(0);
	transition: transform var(--sv-base) var(--sv-ease-precision);
}
.sv-technav a:hover::after,
.sv-technav a:focus-visible::after {
	transform: scaleX(1);
}
.sv-technav a::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 3px;
	width: 1px;
	height: 0;
	background: var(--sv-titanium-deep);
	transition: height var(--sv-base) var(--sv-ease-precision);
}
.sv-technav a:hover::before,
.sv-technav a:focus-visible::before {
	height: 7px;
}

/* ---- Full-screen menu overlay ---- */

.sv-menu {
	position: fixed;
	inset: 0;
	z-index: 80;
	background: rgba(8, 9, 10, 0.95);
	-webkit-backdrop-filter: blur(20px) saturate(115%);
	backdrop-filter: blur(20px) saturate(115%);
	background-image: var(--sv-texture-carbon);
	display: grid;
	grid-template-rows: auto 1fr auto;
	animation: sv-menu-in var(--sv-base) var(--sv-ease-settle);
}
.sv-menu[hidden] {
	display: none;
}
@keyframes sv-menu-in {
	from {
		opacity: 0;
	}
}
.sv-menu-list {
	list-style: none;
	margin: 0;
	padding: 0 clamp(var(--sv-4), 4vw, var(--sv-8));
	align-self: center;
	width: 100%;
	max-width: var(--sv-content);
	margin-inline: auto;
}
.sv-menu-list li {
	border-top: 1px solid var(--sv-border-hairline);
}
.sv-menu-list li:last-child {
	border-bottom: 1px solid var(--sv-border-hairline);
}
.sv-menu-list a {
	display: flex;
	align-items: baseline;
	gap: var(--sv-4);
	padding: clamp(var(--sv-3), 1.6vh, var(--sv-5)) 0;
	font-family: var(--sv-font-display);
	font-size: clamp(1.5rem, 4.4vw, 2.75rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--sv-text-secondary);
	transition: color var(--sv-base), padding-left var(--sv-base) var(--sv-ease-precision);
}
.sv-menu-list a:hover {
	color: var(--sv-mist-050);
	padding-left: var(--sv-4);
}
.sv-menu-list a > i {
	font-family: var(--sv-font-mono);
	font-style: normal;
	font-size: var(--sv-micro);
	letter-spacing: 0.16em;
	color: var(--sv-titanium-deep);
	flex: none;
	width: 2.4em;
}
.sv-menu-list a.is-creator > i {
	color: var(--sv-brass-deep);
}
/* The index is five destinations. Project Navigator and Start a project
   are the brightest lines in the menu and sit together under one stronger
   rule, without becoming buttons — the menu is a list, not a row of calls
   to action. */
.sv-menu-list li.is-tool {
	border-top-color: var(--sv-border-strong);
}
.sv-menu-list a.is-start,
.sv-menu-list a.is-navigator {
	color: var(--sv-text);
}
.sv-menu-list a.is-start > i,
.sv-menu-list a.is-navigator > i {
	color: var(--sv-titanium);
}

/* ---- The bar's single action: Contact ---- */

.sv-topbar-tools {
	display: flex;
	align-items: center;
	gap: var(--sv-3);
	flex: none;
}
.sv-topbar-tools [aria-current="page"] {
	background: var(--sv-titanium-wash);
	border-color: var(--sv-titanium);
}
.sv-menu-list a > span {
	margin-left: auto;
	font-family: var(--sv-font-body);
	font-size: var(--sv-body-s);
	letter-spacing: 0;
	color: var(--sv-text-faint);
	text-align: right;
	max-width: 34ch;
}

/* ---- Menu chrome: the overlay reads as an instrument panel ---- */

.sv-menu-frame {
	position: absolute;
	inset: clamp(var(--sv-4), 3vh, var(--sv-6)) clamp(var(--sv-4), 3vw, var(--sv-6));
	pointer-events: none;
}
.sv-menu-frame span {
	position: absolute;
	width: 14px;
	height: 14px;
	border: 1px solid var(--sv-graphite-500);
}
.sv-menu-frame span:nth-child(1) {
	top: 0;
	left: 0;
	border-width: 1px 0 0 1px;
}
.sv-menu-frame span:nth-child(2) {
	top: 0;
	right: 0;
	border-width: 1px 1px 0 0;
}
.sv-menu-frame span:nth-child(3) {
	bottom: 0;
	left: 0;
	border-width: 0 0 1px 1px;
}
.sv-menu-frame span:nth-child(4) {
	bottom: 0;
	right: 0;
	border-width: 0 1px 1px 0;
}
.sv-menu-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sv-4);
	height: 76px;
	padding: 0 clamp(var(--sv-6), 6vw, var(--sv-9));
	border-bottom: 1px solid var(--sv-border-hairline);
}
.sv-menu-index {
	margin: 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sv-titanium-deep);
}
.sv-menu-body {
	align-self: center;
	width: 100%;
	max-width: var(--sv-content);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
	gap: clamp(var(--sv-5), 4vw, var(--sv-8));
	align-items: start;
	padding: var(--sv-5) clamp(var(--sv-4), 4vw, var(--sv-8));
}
.sv-menu-body .sv-menu-list {
	padding: 0;
	margin: 0;
	max-width: none;
}
.sv-menu-processes {
	border-left: 1px solid var(--sv-border-hairline);
	padding-left: clamp(var(--sv-4), 2.4vw, var(--sv-6));
}
.sv-menu-processes ul {
	list-style: none;
	margin: var(--sv-3) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.sv-menu-processes a {
	display: flex;
	align-items: baseline;
	gap: var(--sv-3);
	/* 38px touch target; the negative margin keeps the list rhythm */
	padding: 10px 0;
	margin: -2px 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-mist-350);
	transition: color var(--sv-base), padding-left var(--sv-base) var(--sv-ease-precision);
}
.sv-menu-processes a::before {
	content: "";
	flex: none;
	width: 8px;
	height: 1px;
	background: var(--sv-graphite-500);
	transform: translateY(-3px);
	transition: width var(--sv-base) var(--sv-ease-precision), background-color var(--sv-base);
}
.sv-menu-processes a:hover {
	color: var(--sv-mist-100);
}
.sv-menu-processes a:hover::before {
	width: 16px;
	background: var(--sv-titanium);
}

/* ---- Centred lockup ---- */

.sv-lockup-wrap {
	display: grid;
	place-items: center;
	padding: var(--sv-6) clamp(var(--sv-4), 4vw, var(--sv-8));
	text-align: center;
}
.sv-lockup {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(var(--sv-3), 1.6vh, var(--sv-5));
}
/* The emblem above the logotype: one identity system, centred on the
   same axis as the wordmark and the designation plate. */
.sv-lockup-emblem {
	width: clamp(104px, 11.5vw, 168px);
	aspect-ratio: 1 / 1;
	margin-bottom: clamp(2px, 0.6vh, var(--sv-2));
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 14px rgba(185, 192, 196, 0.12));
}
.sv-lockup-emblem .sv-emblem {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.sv-lockup-word {
	font-family: var(--sv-font-display);
	font-weight: 500;
	font-size: clamp(2.5rem, 9vw, 7rem);
	line-height: 0.96;
	letter-spacing: -0.034em;
	color: var(--sv-mist-050);
	margin: 0;
	text-wrap: balance;
}
/* Wide-tracked mono strapline — the automotive-grade register */
.sv-lockup-sub {
	font-family: var(--sv-font-mono);
	font-size: clamp(0.625rem, 1.1vw, 0.8125rem);
	font-weight: 400;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--sv-titanium);
	margin: 0;
	padding-left: 0.42em;
}
/* ---- Drawn logotype. Two layouts from one source. ---- */

.sv-lockup-mark {
	display: block;
	width: min(55vw, 701px);
	margin: 0;
}
.sv-lockup-mark.is-stacked {
	display: none;
	width: min(70vw, 400px);
}
/* The homepage lockup: the official stacked logo beneath the emblem. */
.sv-lockup-mark.is-lockup {
	width: clamp(260px, 40vw, 540px);
}
/* Short desktop viewports: the whole door still fits in one screen. */
@media (min-width: 721px) and (max-height: 780px) {
	.sv-lockup-emblem {
		width: clamp(88px, 9vw, 120px);
	}
	.sv-lockup-mark.is-lockup {
		width: clamp(240px, 34vw, 440px);
	}
	.sv-lockup {
		gap: var(--sv-3);
	}
	/* The emergent objects scale down with the viewport so they clear both
	   the top bar and the gateway cards. */
	.sv-door-object.is-industrial {
		bottom: max(20%, 174px);
		width: min(14.5%, 208px);
	}
	.sv-door-object.is-creative {
		bottom: max(14%, 174px);
		width: min(26%, 340px);
	}
}
.sv-wordmark-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* ---- Designation plate: the strapline as a machined marking ---- */

.sv-designation {
	display: inline-block;
	padding: 1px;
	background: var(--sv-titanium-line);
	clip-path: polygon(
		6px 0,
		calc(100% - 6px) 0,
		100% 6px,
		100% calc(100% - 6px),
		calc(100% - 6px) 100%,
		6px 100%,
		0 calc(100% - 6px),
		0 6px
	);
}
.sv-designation > span {
	display: block;
	padding: 7px 14px 7px calc(14px + 0.34em);
	background: var(--sv-graphite-900);
	clip-path: polygon(
		6px 0,
		calc(100% - 6px) 0,
		100% 6px,
		100% calc(100% - 6px),
		calc(100% - 6px) 100%,
		6px 100%,
		0 calc(100% - 6px),
		0 6px
	);
}

/* ---- Dimension line: the notation is what the dimension measures ---- */

.sv-dim {
	display: flex;
	align-items: center;
	gap: clamp(var(--sv-3), 1.6vw, var(--sv-5));
	width: clamp(300px, 54vw, 680px);
	max-width: 100%;
}
.sv-dim-arm {
	position: relative;
	flex: 1;
	height: 14px;
	color: var(--sv-titanium-line);
}
/* The dimension itself */
.sv-dim-arm::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: currentColor;
}
/* Extension line at the measured extent */
.sv-dim-arm::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: currentColor;
}
.sv-dim-arm:first-child::after {
	left: 0;
}
.sv-dim-arm:last-child::after {
	right: 0;
}
.sv-dim-arm svg {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: var(--sv-titanium);
}
.sv-dim-arm:first-child svg {
	left: 1px;
}
.sv-dim-arm:last-child svg {
	right: 1px;
	transform: translateY(-50%) rotate(180deg);
}

/* Scan, design, manufacture — kept, but set as technical notation */
.sv-lockup-line {
	display: flex;
	align-items: center;
	gap: clamp(var(--sv-3), 1.4vw, var(--sv-5));
	margin: 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sv-text-secondary);
	white-space: nowrap;
}
.sv-lockup-line b {
	font-weight: 400;
	color: var(--sv-titanium-deep);
	margin-right: 0.4em;
}
.sv-lockup-actions {
	display: flex;
	align-items: center;
	gap: var(--sv-3);
	flex-wrap: wrap;
	justify-content: center;
	margin-top: var(--sv-2);
}
.sv-lockup-alt {
	margin: var(--sv-2) 0 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.08em;
	color: var(--sv-text-muted);
	text-align: center;
}
.sv-lockup-alt a {
	/* 24px touch target; the negative margin keeps the line height */
	display: inline-block;
	padding: 5px 0;
	margin: -5px 0;
	color: var(--sv-text-secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.sv-lockup-alt a:hover,
.sv-lockup-alt a:focus-visible {
	color: var(--sv-text);
}
/* Door footer: the location marking and the legal links share one compact
   row, the same height as the original marking so the composition above it
   (lockup, objects, gateway) is unchanged. Two centred rows when narrow. */
.sv-door-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sv-2) clamp(var(--sv-6), 5vw, var(--sv-10));
	border-top: 1px solid var(--sv-border-hairline);
	padding: var(--sv-3) clamp(var(--sv-4), 4vw, var(--sv-8));
	background: rgba(8, 9, 10, 0.5);
}
.sv-door-foot .sv-door-mark {
	border-top: 0;
	padding: 0;
	background: none;
}
.sv-door-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sv-2) 0;
	margin: 0;
}
.sv-door-legal a {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-mist-350);
	text-decoration: none;
	/* Taller touch target without moving the row */
	padding: 6px 0;
	margin: -6px 0;
	transition: color var(--sv-base);
}
.sv-door-legal a + a::before {
	content: "·";
	margin: 0 var(--sv-3);
	color: var(--sv-graphite-500);
}
.sv-door-legal a:hover,
.sv-door-legal a:focus-visible {
	color: var(--sv-text-secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* Tablet widths: the footer wraps to two rows, so the emergent objects
   are lifted to keep clear of the gateway cards (rest and hover). The
   objects are the same size; only their resting height changes. */
@media (min-width: 721px) and (max-width: 1180px) {
	.sv-door-object.is-industrial {
		bottom: max(20%, 228px);
	}
	.sv-door-object.is-creative {
		bottom: max(14%, 222px);
	}
}
@media (max-width: 720px) {
	.sv-door-foot {
		gap: var(--sv-2) var(--sv-4);
		padding: var(--sv-3) var(--sv-4);
	}
	.sv-door-foot .sv-door-mark p {
		letter-spacing: 0.12em;
		text-align: center;
	}
	.sv-door-legal a {
		letter-spacing: 0.1em;
	}
	.sv-door-legal a + a::before {
		margin: 0 var(--sv-2);
	}
}

/* Door content settles in on first paint (the intro hand-off used to gate
   this; without an intro the release happens as soon as the script runs) */
.sv-door-reveal {
	opacity: 0;
	transition: opacity 600ms var(--sv-ease-settle);
}
html.sv-intro-done .sv-door-reveal {
	opacity: 1;
}

/* ---- Dual gateway: commercial and creators, strictly equal ---- */

.sv-gateway {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--sv-border-hairline);
}
.sv-gate {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sv-5);
	padding: clamp(var(--sv-4), 2.6vh, var(--sv-6)) clamp(var(--sv-4), 4vw, var(--sv-8));
	overflow: hidden;
	transition: background-color var(--sv-slow) var(--sv-ease-precision);
}
.sv-gate + .sv-gate {
	border-left: 1px solid var(--sv-border-hairline);
}
/* Accent hairline draws in from the leading edge on hover */
.sv-gate::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 1px;
	width: 0;
	background: var(--sv-titanium);
	transition: width var(--sv-slow) var(--sv-ease-precision);
}
.sv-gate:hover::before {
	width: 100%;
}
.sv-gate.is-creator::before {
	background: var(--sv-brass);
}
.sv-gate:hover {
	background: var(--sv-titanium-wash);
}
.sv-gate.is-creator:hover {
	background: var(--sv-brass-wash);
}
.sv-gate-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.sv-gate-text p {
	margin: 0;
}
.sv-gate-eyebrow {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sv-titanium-deep);
}
.sv-gate.is-creator .sv-gate-eyebrow {
	color: var(--sv-brass-deep);
}
.sv-gate-title {
	font-family: var(--sv-font-display);
	font-size: clamp(1.0625rem, 1.7vw, 1.375rem);
	font-weight: 500;
	letter-spacing: -0.014em;
	color: var(--sv-mist-050);
}
.sv-gate-note {
	font-size: var(--sv-body-s);
	color: var(--sv-text-muted);
}
.sv-gate-arrow {
	flex: none;
	width: 34px;
	height: 34px;
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-sm);
	display: grid;
	place-items: center;
	color: var(--sv-titanium);
	transition: border-color var(--sv-base), transform var(--sv-base) var(--sv-ease-precision);
}
.sv-gate.is-creator .sv-gate-arrow {
	color: var(--sv-brass);
}
.sv-gate:hover .sv-gate-arrow {
	border-color: currentColor;
	transform: translateX(3px);
}

/* ---- Footer line, treated as a designation marking ---- */

.sv-door-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sv-3);
	border-top: 1px solid var(--sv-border-hairline);
	padding: var(--sv-3) clamp(var(--sv-4), 4vw, var(--sv-8));
	background: rgba(8, 9, 10, 0.5);
}
.sv-door-mark p {
	margin: 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--sv-mist-350);
	padding-left: 0.26em;
}
/* Stamped datum diamond, either side of the marking */
.sv-door-mark i {
	display: block;
	flex: none;
	width: 5px;
	height: 5px;
	border: 1px solid var(--sv-graphite-500);
	transform: rotate(45deg);
}

/* ---- Door responsive ---- */

@media (max-width: 1240px) {
	.sv-technav {
		--tn-pad: var(--sv-2);
	}
	.sv-technav a {
		letter-spacing: 0.1em;
	}
}

@media (max-width: 1024px) {
	.sv-menu-list a > span {
		display: none;
	}
	.sv-menu-body {
		grid-template-columns: minmax(0, 1fr);
	}
	.sv-menu-processes {
		border-left: 0;
		border-top: 1px solid var(--sv-border-hairline);
		padding: var(--sv-4) 0 0;
	}
}

/* Below this the technical line cannot stay legible, so the processes move
   into the menu, where they are always listed in full. */
@media (max-width: 1080px) {
	.sv-technav {
		display: none;
	}
}

/* On the door, the process line shares the bar with Contact. Below 1240px
   the processes move into the menu, where they are always listed in full. */
@media (min-width: 1240px) and (max-width: 1479px) {
	.sv-door-reveal.sv-topbar .sv-technav {
		--tn-pad: var(--sv-2);
	}
}
/* Six processes on one line: tighten the tracking until there is room. */
@media (min-width: 1240px) and (max-width: 1599px) {
	.sv-technav a {
		letter-spacing: 0.09em;
	}
}
@media (max-width: 1239px) {
	.sv-door-reveal.sv-topbar .sv-technav {
		display: none;
	}
}

@media (max-width: 720px) {
	.sv-topbar {
		height: 64px;
	}
	.sv-lockup-mark {
		display: none;
	}
	.sv-lockup-mark.is-stacked,
	.sv-lockup-mark.is-lockup {
		display: block;
	}
	.sv-lockup-mark.is-lockup {
		width: min(76vw, 340px);
	}
	.sv-lockup-emblem {
		width: clamp(84px, 24vw, 112px);
	}
	.sv-menu-head {
		height: 64px;
		padding: 0 clamp(var(--sv-4), 5vw, var(--sv-6));
	}
	.sv-door-mark p {
		letter-spacing: 0.16em;
	}
	.sv-gateway {
		grid-template-columns: minmax(0, 1fr);
	}
	.sv-gate + .sv-gate {
		border-left: 0;
		border-top: 1px solid var(--sv-border-hairline);
	}
	.sv-gate {
		padding: var(--sv-4) var(--sv-4);
	}
	.sv-gate-note {
		display: none;
	}
	.sv-dim {
		width: 100%;
	}
	.sv-lockup-line {
		font-size: 0.5625rem;
		letter-spacing: 0.14em;
		gap: var(--sv-3);
	}
	.sv-designation > span {
		letter-spacing: 0.3em;
		padding: 6px 11px 6px calc(11px + 0.3em);
	}
	/* Objects sit lower and quieter so the lockup owns the centre, but
	   above the stacked gateway cards and the two-row footer */
	.sv-door-object.is-industrial {
		width: 27%;
		left: 2%;
		bottom: max(21%, 300px);
		opacity: 0.4;
	}
	.sv-door-object.is-creative {
		width: 52%;
		right: -15%;
		bottom: max(22%, 300px);
		opacity: 0.3;
	}
	.sv-door-sweep {
		display: none;
	}
}

/* Short viewports: the door stays one screen, so the dimension detail goes
   before anything structural does. */
@media (max-height: 640px) {
	.sv-dim {
		display: none;
	}
	.sv-lockup-mark {
		width: min(64vw, 700px);
	}
}

/* ==========================================================================
   Public preview (PUBLIC_PREVIEW_MODE) — indicator, notes and legal footer
   Preview-only copy is marked [data-preview-only]; commercial copy that
   waits for the full launch is marked [data-preview-hide]. sv.js swaps them
   from the flag in config.js.
   ========================================================================== */
[data-preview-only][hidden],
[data-preview-hide][hidden] {
	display: none !important;
}

/* The top-bar tag: a stamped marking beside the Contact action */
.sv-preview-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	height: 28px;
	padding: 0 10px;
	border: 1px solid var(--sv-border);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--sv-base), border-color var(--sv-base);
}
.sv-preview-tag::before {
	content: "";
	width: 5px;
	height: 5px;
	border: 1px solid var(--sv-titanium);
	transform: rotate(45deg);
}
.sv-preview-tag:hover,
.sv-preview-tag:focus-visible {
	color: var(--sv-text);
	border-color: var(--sv-titanium);
}
.sv-preview-tag b {
	font-weight: 500;
}
@media (max-width: 760px) {
	.sv-preview-tag {
		height: 26px;
		padding: 0 8px;
		letter-spacing: 0.14em;
	}
	.sv-preview-tag b {
		display: none;
	}
}

/* Demonstration notes on the tools and forms: one quiet line, titanium datum */
.sv-preview-note {
	display: flex;
	align-items: flex-start;
	gap: var(--sv-3);
	margin: var(--sv-4) 0;
	padding: var(--sv-3) var(--sv-4);
	border-left: 2px solid var(--sv-titanium);
	background: rgba(185, 192, 196, 0.06);
	font-size: var(--sv-body-s);
	line-height: 1.55;
	color: var(--sv-text-muted);
	max-width: 70ch;
}
.sv-preview-note b {
	display: block;
	margin-bottom: 2px;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sv-text);
	font-weight: 500;
}
.sv-preview-note a {
	color: var(--sv-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Footer: legal links row and the operator line, in the footer's own voice */
.sc-footer-legal {
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sv-2) var(--sv-4);
	margin: 0;
	padding-top: var(--sv-4);
	border-top: 1px solid var(--sv-border-hairline);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.08em;
	color: var(--sv-text-faint);
}
.sc-footer-legal a {
	color: var(--sv-text-muted);
	text-decoration: none;
	/* Taller touch target without moving the row */
	padding: 6px 0;
	margin: -6px 0;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: color var(--sv-base);
}
.sc-footer-legal a:hover,
.sc-footer-legal a:focus-visible {
	color: var(--sv-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.sc-footer-legal .sc-footer-id {
	margin-left: auto;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}
@media (max-width: 760px) {
	.sc-footer-legal .sc-footer-id {
		margin-left: 0;
		flex-basis: 100%;
	}
}