/* ════════════════════════════════════════════════════════════════
   PREMIUM LAYER v2 — 2026-10-27
   Ink / light section rhythm, signature motion hooks, fixes.
   Everything below is additive; delete this block to roll back.
   Motion classes are only armed when html.sp-motion is present
   (set by js/stucci-upgrade.js, never under reduced motion).
   ════════════════════════════════════════════════════════════════ */

:root {
	--ink: #0B0F14;
	--ink-2: #10151C;
	--ink-3: #161C25;
	--ink-line: rgba(255, 255, 255, 0.08);
	--ink-line-2: rgba(255, 255, 255, 0.14);
	--ink-text: #ECEFF3;
	--ink-muted: #9AA5B1;
	--copper-lit: #D08A55;
	--copper-glow: rgba(208, 138, 85, 0.22);
	--ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 0. Fixes ─────────────────────────────────────────────────── */

/* Footer column headings: the output pass turns <h2> into <p.footer__heading>,
   which dropped the heading styles and left them near-invisible. */
.site-footer__col .footer__heading {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--copper-lit);
	margin: 0 0 1.25rem;
}

/* ── 1. Ink surface — shared by every dark band ─────────────── */

.sp-ink {
	position: relative;
	isolation: isolate;
	background: var(--ink);
	color: var(--ink-muted);
}
.sp-ink::after {
	/* film grain: kills the flat "digital black" look */
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: var(--grain);
	background-size: 180px 180px;
	opacity: 0.05;
	mix-blend-mode: overlay;
}
.sp-ink > * { position: relative; z-index: 1; }
.sp-ink h1, .sp-ink h2, .sp-ink h3, .sp-ink .ds-h1, .sp-ink .ds-h2 { color: #FFFFFF; }
.sp-ink .eyebrow { color: var(--copper-lit); }
.sp-ink .eyebrow::before { background: var(--copper-lit); }
.sp-ink a:not([class]) { color: var(--copper-lit); }
.sp-ink .btn-outline {
	color: #FFFFFF;
	border-color: var(--ink-line-2);
	background: rgba(255, 255, 255, 0.02);
}
.sp-ink .btn-outline:hover {
	color: #FFFFFF;
	border-color: var(--copper-lit);
	background: rgba(208, 138, 85, 0.1);
}
.sp-ink .text-muted, .sp-ink .lead { color: var(--ink-muted); }

/* ── 2. Homepage hero on ink ─────────────────────────────────── */

.home-hero.sp-ink {
	background:
		radial-gradient(70rem 46rem at 78% 30%, rgba(168, 90, 46, 0.20), transparent 62%),
		radial-gradient(40rem 30rem at 8% 100%, rgba(85, 103, 122, 0.16), transparent 70%),
		var(--ink);
	--plane-line: rgba(255, 255, 255, 0.045);
	--plane-weave: rgba(208, 138, 85, 0.05);
	--plane-bloom: rgba(208, 138, 85, 0.10);
	--plane-floor: transparent;
	--plane-vignette: rgba(0, 0, 0, 0.35);
	--plane-mark: rgba(208, 138, 85, 0.55);
	--plane-mark-soft: rgba(154, 165, 177, 0.28);
}
.home-hero.sp-ink::after { background-image: var(--grain); background-size: 180px; opacity: 0.05; mix-blend-mode: overlay; }
.home-hero.sp-ink .eyebrow { color: var(--copper-lit); }
.home-hero.sp-ink .ds-h1 { color: #FFFFFF; }
.home-hero.sp-ink .hero-accent { color: var(--copper-lit); }
.home-hero.sp-ink .hero-accent::after { background: var(--copper-lit); }
.home-hero.sp-ink .positioning { color: #B7C0CA; }
.home-hero.sp-ink .positioning b,
.home-hero.sp-ink .positioning strong { color: #FFFFFF; }
.home-hero.sp-ink .positioning a {
	color: #FFFFFF;
	text-decoration-color: rgba(208, 138, 85, 0.7);
	text-underline-offset: 0.2em;
}
.home-hero.sp-ink .hero-contact,
.home-hero.sp-ink .hero-contact a { color: #C9D0D8; }
.home-hero.sp-ink .hero-contact a:hover { color: #FFFFFF; }
.home-hero.sp-ink .corner-bracket { border-color: rgba(208, 138, 85, 0.45); }
.home-hero.sp-ink .hero-stage__chip {
	background: rgba(16, 21, 28, 0.82);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid var(--ink-line-2);
	color: var(--ink-muted);
	box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
}
.home-hero.sp-ink .hero-stage__chip b { color: var(--copper-lit); }
.home-hero.sp-ink .hero-stage__chip span { color: #FFFFFF; }
.home-hero.sp-ink .hero-stage img { box-shadow: none; }
.home-hero.sp-ink .hero-stage__laptop,
.home-hero.sp-ink .hero-stage__phone,
.home-hero.sp-ink .hero-stage__card { filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55)); }
.home-hero.sp-ink [class*="hero-stage__caption"],
.home-hero.sp-ink .hero-stage figcaption { color: var(--ink-muted); }
.home-hero.sp-ink .hero-stage { transform-style: preserve-3d; will-change: transform; }

@media (min-width: 1024px) {
	.home-hero.sp-ink .ds-h1 { font-size: clamp(3.25rem, 4.3vw, 4.6rem); }
}

/* ── 3. Client marquee ───────────────────────────────────────── */

.sp-marquee {
	background: var(--ink);
	border-top: 1px solid var(--ink-line);
	border-bottom: 1px solid var(--ink-line);
	overflow: hidden;
	padding-block: 1.35rem;
}
.sp-marquee__row { display: flex; align-items: center; gap: 2rem; }
.sp-marquee__label {
	flex: 0 0 auto;
	margin: 0;
	padding-left: max(1.5rem, calc((100vw - var(--wrap)) / 2 + 1.5rem));
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--copper-lit);
	white-space: nowrap;
}
.sp-marquee__viewport {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.sp-marquee__track { display: flex; width: max-content; }
.sp-marquee__list {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sp-marquee__list li {
	display: flex;
	align-items: center;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.05rem, 1.5vw, 1.35rem);
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: #E1E6EB;
	white-space: nowrap;
}
.sp-marquee__list li::after {
	content: "";
	width: 6px;
	height: 6px;
	margin-inline: 2.25rem;
	background: var(--copper-lit);
	transform: rotate(45deg);
	opacity: 0.8;
}
@media (prefers-reduced-motion: no-preference) {
	.sp-marquee__track { animation: spMarquee 48s linear infinite; }
	.sp-marquee:hover .sp-marquee__track { animation-play-state: paused; }
}
@keyframes spMarquee { to { transform: translateX(-50%); } }
@media (max-width: 767.98px) {
	.sp-marquee__row { flex-direction: column; align-items: stretch; gap: 0.75rem; }
	.sp-marquee__label { padding-left: 1.25rem; }
}

/* ── 4. Trust marks on ink — big numerals ────────────────────── */

.trust-marks.sp-ink {
	background: var(--ink-2);
	border: 0;
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
.trust-marks.sp-ink .trust-marks__row { border: 0; gap: 0; }
.trust-marks.sp-ink .trust-marks__row > * { border-color: var(--ink-line) !important; }
.trust-marks.sp-ink .trust-mark b {
	font-family: var(--font-display);
	font-size: clamp(2.75rem, 5vw, 4.25rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 0.9;
	color: #FFFFFF;
	border: 0;
	text-decoration: none;
}
.trust-marks.sp-ink .trust-mark b::after { display: none; }
.trust-marks.sp-ink .trust-mark span,
.trust-marks.sp-ink .trust-marks__loc { color: var(--ink-muted); }
.trust-marks.sp-ink .trust-mark:hover b { color: var(--copper-lit); transition: color 0.4s ease; }

/* ── 5. Selected work ────────────────────────────────────────── */

.sp-work {
	background: #F5F3F0;
	padding-block: clamp(4.5rem, 9vw, 8rem) clamp(3.5rem, 7vw, 6rem);
	overflow: clip;
}
.sp-work__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem 2rem;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.sp-work__head .ds-h2 { font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 0.95; margin: 0; }
.sp-work__count {
	font-family: var(--font-display);
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	color: var(--stucci-text-muted);
	white-space: nowrap;
}
.sp-work__count b { color: var(--stucci-accent); }
.sp-work__rail {
	display: flex;
	gap: clamp(1rem, 2vw, 1.75rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-inline: max(1.25rem, calc((100vw - var(--wrap)) / 2 + 1.5rem));
	padding-bottom: 0.5rem;
	overscroll-behavior-x: contain;
}
.sp-work__rail::-webkit-scrollbar { display: none; }
.sp-card {
	position: relative;
	flex: 0 0 auto;
	width: min(84vw, 34rem);
	scroll-snap-align: start;
	color: var(--stucci-text);
	text-decoration: none;
}
.sp-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 4px;
	background: var(--ink);
	box-shadow: 0 1px 2px rgba(11, 15, 20, 0.06), 0 30px 60px -36px rgba(11, 15, 20, 0.45);
}
.sp-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transform: scale(1.02);
	transition: transform 1.1s var(--ease-expo), filter 0.6s ease;
}
.sp-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(11, 15, 20, 0.55));
	opacity: 0;
	transition: opacity 0.5s ease;
}
.sp-card__view {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.95rem;
	font: 600 0.75rem/1 var(--font-body);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #FFFFFF;
	background: var(--stucci-accent);
	border-radius: 2px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.4s ease, transform 0.5s var(--ease-expo);
}
.sp-card__view svg { width: 0.9rem; height: 0.9rem; }
.sp-card:hover .sp-card__media img,
.sp-card:focus-visible .sp-card__media img { transform: scale(1.07); }
.sp-card:hover .sp-card__media::after,
.sp-card:focus-visible .sp-card__media::after { opacity: 1; }
.sp-card:hover .sp-card__view,
.sp-card:focus-visible .sp-card__view { opacity: 1; transform: none; }
.sp-card__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.1rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(11, 15, 20, 0.12);
}
.sp-card__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.15rem, 1.6vw, 1.4rem);
	letter-spacing: -0.015em;
	line-height: 1.15;
	text-transform: none;
	margin: 0;
}
.sp-card__svc {
	font: 600 0.6875rem/1.2 var(--font-body);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--stucci-accent);
	white-space: nowrap;
}
.sp-card__metric { margin: 0.4rem 0 0; font-size: 0.9375rem; color: var(--stucci-text-muted); }
.sp-card__idx {
	position: absolute;
	left: 1rem;
	top: 1rem;
	z-index: 2;
	font: 600 0.75rem/1 var(--font-display);
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.85);
	mix-blend-mode: difference;
}
.sp-card--end {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 1.25rem;
	width: min(70vw, 22rem);
	padding: 2rem;
	background: var(--ink);
	border-radius: 4px;
	color: #FFFFFF;
	align-self: stretch;
}
.sp-card--end p { margin: 0; color: var(--ink-muted); }
.sp-card--end .sp-card__big {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 2.6vw, 2.25rem);
	line-height: 1;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: #FFFFFF;
}
.sp-work__progress {
	height: 2px;
	margin: 2rem max(1.25rem, calc((100vw - var(--wrap)) / 2 + 1.5rem)) 0;
	background: rgba(11, 15, 20, 0.1);
	overflow: hidden;
}
.sp-work__progress span {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--stucci-accent);
	transform-origin: left center;
	transform: scaleX(var(--p, 0.08));
}

/* Pinned horizontal mode (desktop, motion allowed) */
html.sp-motion .sp-work.is-pinned .sp-work__rail {
	overflow: visible;
	scroll-snap-type: none;
	will-change: transform;
}
html.sp-motion .sp-work.is-pinned { padding-block: clamp(3rem, 6vh, 5rem); min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 1024px) {
	.sp-card { width: clamp(30rem, 40vw, 40rem); }
}

/* ── 6. Disciplines grid — line draw + pointer light ──────────── */

.discipline-cell {
	position: relative;
	isolation: isolate;
	transition: background-color 0.5s ease;
}
.discipline-cell::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 2px;
	background: var(--stucci-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.7s var(--ease-expo);
	z-index: 1;
}
.discipline-cell::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(22rem 16rem at var(--mx, 50%) var(--my, 50%), rgba(168, 90, 46, 0.075), transparent 70%);
	opacity: 0;
	transition: opacity 0.4s ease;
}
.discipline-cell:hover::before { transform: scaleX(1); }
.discipline-cell:hover::after { opacity: 1; }
.discipline-cell__num { transition: color 0.4s ease, border-color 0.4s ease, background-color 0.4s ease; }
.discipline-cell:hover .discipline-cell__num {
	color: #FFFFFF;
	background: var(--stucci-accent);
	border-color: var(--stucci-accent);
}
.discipline-cell__stat .icon { transition: transform 0.45s var(--ease-expo); }
.discipline-cell:hover .discipline-cell__stat .icon { transform: translateX(6px); }

/* ── 7. Process — scrubbed rail ──────────────────────────────── */

.process-grid { position: relative; }
.sp-process-fill {
	position: absolute;
	height: 2px;
	background: var(--stucci-accent);
	transform-origin: left center;
	transform: scaleX(0);
	pointer-events: none;
	z-index: 0;
}
.process-step__num { transition: background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease; }
.process-step.is-lit .process-step__num {
	background: var(--stucci-accent);
	color: #FFFFFF;
	box-shadow: 0 0 0 6px rgba(168, 90, 46, 0.12);
}

/* ── 8. Founder on ink ───────────────────────────────────────── */

.sp-founder.sp-ink { border: 0; }
.sp-founder.sp-ink .founder__media {
	border: 1px solid var(--ink-line-2);
	box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.8);
	background: var(--ink-3);
}
.sp-founder.sp-ink .founder__media .tint,
.sp-founder.sp-ink .founder__media .fade { display: none; }
.sp-founder.sp-ink .founder__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(11, 15, 20, 0.85));
	pointer-events: none;
}
.sp-founder.sp-ink .founder__caption { z-index: 2; }
.sp-founder.sp-ink .founder__caption .role,
.sp-founder.sp-ink .founder__caption .creds { color: var(--copper-lit); }
.sp-founder.sp-ink .founder__caption .name { color: #FFFFFF; }
.sp-founder.sp-ink .founder__media img { will-change: transform; }
.sp-founder.sp-ink .cred-strip > div { border-color: var(--copper-lit); }
.sp-founder.sp-ink .cred-strip b { color: #FFFFFF; }
.sp-founder.sp-ink .cred-title { color: #D9DEE4; }
.sp-founder.sp-ink .cred-detail { color: var(--ink-muted); }
.sp-founder.sp-ink .cred-strip { border-color: var(--ink-line); }
.sp-founder.sp-ink .ds-body-lg { color: #B7C0CA; }
.sp-founder.sp-ink .pull-quote { border-color: var(--copper-lit); }
.sp-founder.sp-ink .pull-quote p { color: #FFFFFF; }
.sp-founder.sp-ink .pull-quote footer { color: var(--ink-muted); }
.sp-founder.sp-ink hr, .sp-founder.sp-ink .divider { border-color: var(--ink-line); }

/* ── 9. Final CTA on ink with a copper horizon ───────────────── */

.cta-band.sp-ink { background: var(--ink); border-top: 1px solid var(--ink-line); }
.cta-band.sp-ink::before {
	background-image:
		linear-gradient(var(--ink-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--ink-line) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(60rem 30rem at 50% 100%, #000, transparent 75%);
	mask-image: radial-gradient(60rem 30rem at 50% 100%, #000, transparent 75%);
}
.cta-band.sp-ink::after {
	background: radial-gradient(56rem 22rem at 50% 115%, rgba(208, 138, 85, 0.38), rgba(168, 90, 46, 0.12) 45%, transparent 72%);
	opacity: 1;
	mix-blend-mode: normal;
}
.cta-band.sp-ink h2 { font-size: clamp(2.5rem, 6vw, 5.25rem); line-height: 0.92; letter-spacing: -0.035em; }
.cta-band.sp-ink .lead { color: #B7C0CA; }
.cta-band.sp-ink .fine { color: var(--ink-muted); letter-spacing: 0.12em; }
.cta-band.sp-ink .btn-inverse {
	background: var(--stucci-accent);
	color: #FFFFFF;
	border-color: var(--stucci-accent);
	padding: 1.15rem 2.25rem;
	box-shadow: 0 18px 40px -16px rgba(208, 138, 85, 0.55);
}
.cta-band.sp-ink .btn-inverse:hover { background: var(--copper-lit); border-color: var(--copper-lit); color: var(--ink); }

/* ── 10. Quick contact on ink ────────────────────────────────── */

.quick-contact.sp-ink { background: var(--ink-2); border-top: 1px solid var(--ink-line); }
.quick-contact.sp-ink .quick-contact__title { color: #FFFFFF; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.05; letter-spacing: -0.02em; }
.quick-contact.sp-ink p { color: #B7C0CA; }
.quick-contact.sp-ink .quick-contact__direct a { color: var(--copper-lit); }
.quick-contact.sp-ink .wpforms-container .wpforms-field-label,
.quick-contact.sp-ink .wpforms-container label { color: #E1E6EB !important; }
.quick-contact.sp-ink .wpforms-container .wpforms-field-sublabel { color: var(--ink-muted) !important; }
.quick-contact.sp-ink .wpforms-container input[type="text"],
.quick-contact.sp-ink .wpforms-container input[type="email"],
.quick-contact.sp-ink .wpforms-container input[type="tel"],
.quick-contact.sp-ink .wpforms-container textarea {
	background: rgba(255, 255, 255, 0.035) !important;
	border: 1px solid var(--ink-line-2) !important;
	color: #FFFFFF !important;
	border-radius: 2px !important;
	transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.quick-contact.sp-ink .wpforms-container input:focus,
.quick-contact.sp-ink .wpforms-container textarea:focus {
	border-color: var(--copper-lit) !important;
	background: rgba(208, 138, 85, 0.06) !important;
	box-shadow: 0 0 0 3px rgba(208, 138, 85, 0.18) !important;
	outline: none;
}
.quick-contact.sp-ink .wpforms-container button[type="submit"] {
	background: var(--stucci-accent) !important;
	border: 0 !important;
	padding: 0.95rem 2rem !important;
	height: auto !important;
	letter-spacing: 0.02em;
}
.quick-contact.sp-ink .wpforms-container button[type="submit"]:hover { background: var(--copper-lit) !important; color: var(--ink) !important; }

/* ── 11. Image clip reveal hook ──────────────────────────────── */

html.sp-motion .sp-line { padding-bottom: 0.04em; }

/* ── 12. Buttons — sheen + arrow nudge ───────────────────────── */

.btn-solid { position: relative; overflow: hidden; isolation: isolate; }
.btn-solid::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform 0.8s var(--ease-expo);
}
.btn-solid:hover::after { transform: translateX(120%); }
.btn-solid .icon, .btn-inverse .icon { transition: transform 0.45s var(--ease-expo); }
.btn-solid:hover .icon, .btn-inverse:hover .icon { transform: translateX(4px); }

/* ── 13. Post cards — slower, richer image hover ─────────────── */

.post-card__media { overflow: hidden; }
.post-card__media img { transition: transform 1s var(--ease-expo); }
.post-card:hover .post-card__media img { transform: scale(1.05); }

/* ── 14. Service pages — card hover consistency ──────────────── */

.svc-card, .value-card, .feature-card, .svc-cap {
	transition: transform 0.6s var(--ease-expo), box-shadow 0.6s var(--ease-expo), border-color 0.4s ease;
}
.svc-card:hover, .value-card:hover, .feature-card:hover, .svc-cap:hover {
	transform: translateY(-4px);
	border-color: rgba(168, 90, 46, 0.45);
	box-shadow: 0 2px 4px rgba(11, 15, 20, 0.04), 0 26px 50px -30px rgba(11, 15, 20, 0.35);
}

/* ── 15. Reduced motion: hard stop ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.sp-marquee__track { animation: none !important; flex-wrap: wrap; }
	.sp-marquee__list[aria-hidden="true"] { display: none; }
	.sp-marquee__viewport { -webkit-mask-image: none; mask-image: none; }
	.sp-marquee__list { flex-wrap: wrap; row-gap: 0.75rem; }
	.sp-card__media img, .btn-solid::after, .discipline-cell::before { transition: none !important; }
}

/* ── 16. Cursor label on work cards ──────────────────────────── */
.sp-cursor {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
	pointer-events: none;
	padding: 0.7rem 1.05rem;
	font: 600 0.6875rem/1 var(--font-body);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #FFFFFF;
	background: var(--stucci-accent);
	border-radius: 999px;
	box-shadow: 0 14px 30px -12px rgba(168, 90, 46, 0.6);
	white-space: nowrap;
}
@media (pointer: fine) {
	html.sp-motion .sp-card__view { display: none; }
	html.sp-motion .sp-work.has-cursor .sp-card { cursor: none; }
}

/* ── 17. Proof as an instrument panel ────────────────────────── */
.trust-marks.sp-ink .trust-mark { position: relative; }
.trust-marks.sp-ink .trust-mark .sp-src {
	display: block;
	margin-top: 0.6rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.6875rem;
	letter-spacing: 0.02em;
	text-transform: none;
	color: #6F7B88;
}
.trust-marks.sp-ink .trust-mark .sp-src::before { content: "// "; color: var(--copper-lit); }

/* ── 18. Cross-page crossfade (supporting browsers, zero JS) ─── */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; }
}

/* ── 19. Proof panel layout: numeral left, label + source stacked ── */
.trust-marks.sp-ink .trust-mark {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 1rem;
	align-items: center;
}
.trust-marks.sp-ink .trust-mark b { grid-row: 1 / span 2; }
.trust-marks.sp-ink .trust-mark > span:not(.sp-src) { align-self: end; }
.trust-marks.sp-ink .trust-mark .sp-src { grid-column: 2; align-self: start; margin-top: 0.35rem; }
@media (max-width: 767.98px) {
	.trust-marks.sp-ink .trust-mark .sp-src { grid-column: 1 / -1; margin-top: 0.6rem; }
}