/* ============================================================
   TRINOVIK LABS — MOTION SYSTEM V4
   Cinematic transition / interaction layer.

   This file intentionally does not alter approved business copy.
   It only changes presentation, choreography and interaction.
   ============================================================ */

:root {
	--v4-ease-out: cubic-bezier(.16, 1, .3, 1);
	--v4-ease-in-out: cubic-bezier(.76, 0, .24, 1);
	--v4-ease-soft: cubic-bezier(.22, .61, .36, 1);
	--v4-scroll-progress: 0;
	--v4-pointer-x: 50%;
	--v4-pointer-y: 50%;
}

html {
	background: #08080b;
}

html.v4-motion-enabled,
html.v4-motion-enabled body {
	overflow-x: clip;
}

html.v4-motion-enabled body {
	overscroll-behavior-y: none;
}

html.v4-motion-enabled .site {
	isolation: isolate;
}

/* ------------------------------------------------------------
   00 — INTRO / ROUTE TRANSITION
   ------------------------------------------------------------ */

.v4-intro,
.v4-page-transition {
	position: fixed;
	inset: 0;
	pointer-events: none;
}

.v4-intro {
	z-index: 10020;
	display: grid;
	place-items: center;
	background:
		radial-gradient(circle at 50% 46%, rgba(112, 48, 143, .16), transparent 34%),
		linear-gradient(145deg, #050724 0%, #08080b 58%, #030308 100%);
	animation: v4-intro-failsafe 2.8s var(--v4-ease-out) forwards;
}

.v4-intro::before,
.v4-intro::after {
	content: "";
	position: absolute;
	inset: 0;
}

.v4-intro::before {
	background-image:
		linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
	background-size: 74px 74px;
	mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 68%);
	opacity: .6;
}

.v4-intro::after {
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(194, 222, 170, .02) 35%,
		rgba(194, 222, 170, .48) 50%,
		rgba(33, 146, 208, .04) 65%,
		transparent 100%
	);
	transform: translateX(-120%);
	animation: v4-intro-scan 1.25s .24s var(--v4-ease-in-out) both;
}

.v4-intro__mark {
	position: relative;
	z-index: 2;
	width: min(56vw, 420px);
	padding: 30px;
	display: grid;
	place-items: center;
	transform: scale(.93);
	opacity: 0;
	filter: blur(8px);
	animation: v4-intro-mark 1.25s .12s var(--v4-ease-out) both;
}

.v4-intro__mark img {
	display: block;
	width: 100%;
	height: auto;
	filter: brightness(0) invert(1);
}

.v4-intro__orbit,
.v4-intro__orbit::before,
.v4-intro__orbit::after {
	position: absolute;
	left: 50%;
	top: 50%;
	border: 1px solid rgba(255,255,255,.13);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.v4-intro__orbit {
	width: min(70vw, 620px);
	aspect-ratio: 1;
	animation: v4-orbit 12s linear infinite;
}

.v4-intro__orbit::before,
.v4-intro__orbit::after {
	content: "";
}

.v4-intro__orbit::before {
	width: 68%;
	aspect-ratio: 1;
	border-color: rgba(194, 222, 170, .18);
}

.v4-intro__orbit::after {
	width: 126%;
	aspect-ratio: 1;
	border-color: rgba(91, 116, 184, .10);
}

.v4-intro.is-complete,
.v4-intro.is-skip {
	opacity: 0;
	visibility: hidden;
	transition: opacity .7s var(--v4-ease-out), visibility .7s linear;
	animation: none;
}

.v4-page-transition {
	z-index: 10010;
	visibility: hidden;
	background: #07070b;
	clip-path: circle(0% at var(--v4-transition-x, 50%) var(--v4-transition-y, 50%));
	transition: clip-path .72s var(--v4-ease-in-out), visibility 0s .72s;
}

.v4-page-transition::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at var(--v4-transition-x, 50%) var(--v4-transition-y, 50%), rgba(194,222,170,.12), transparent 30%),
		linear-gradient(120deg, rgba(91,116,184,.12), transparent 55%);
}

.v4-page-transition.is-active {
	visibility: visible;
	clip-path: circle(150% at var(--v4-transition-x, 50%) var(--v4-transition-y, 50%));
	transition: clip-path .72s var(--v4-ease-in-out), visibility 0s;
}

@keyframes v4-intro-failsafe {
	0%, 70% { opacity: 1; visibility: visible; }
	100% { opacity: 0; visibility: hidden; }
}

@keyframes v4-intro-scan {
	0% { transform: translateX(-120%); opacity: 0; }
	20% { opacity: 1; }
	100% { transform: translateX(120%); opacity: 0; }
}

@keyframes v4-intro-mark {
	0% { transform: scale(.93); opacity: 0; filter: blur(8px); }
	65% { opacity: 1; filter: blur(0); }
	100% { transform: scale(1); opacity: 1; filter: blur(0); }
}

@keyframes v4-orbit {
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ------------------------------------------------------------
   01 — GLOBAL CURSOR + SCROLL METER
   ------------------------------------------------------------ */

.v4-cursor {
	position: fixed;
	z-index: 10000;
	left: 0;
	top: 0;
	width: 74px;
	height: 74px;
	margin-left: -37px;
	margin-top: -37px;
	border: 1px solid rgba(255,255,255,.42);
	border-radius: 50%;
	display: grid;
	place-items: center;
	pointer-events: none;
	opacity: 0;
	transform: translate3d(-100px, -100px, 0) scale(.72);
	transition:
		width .38s var(--v4-ease-out),
		height .38s var(--v4-ease-out),
		margin .38s var(--v4-ease-out),
		border-color .3s ease,
		background .3s ease,
		opacity .2s ease,
		transform .15s linear;
	backdrop-filter: blur(2px);
}

.v4-cursor::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #fff;
	transform: translate(-50%, -50%);
	transition: opacity .2s ease, transform .3s var(--v4-ease-out);
}

.v4-cursor__label {
	font-size: 8px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: #fff;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .22s ease, transform .3s var(--v4-ease-out);
}

.v4-cursor.is-visible {
	opacity: 1;
}

.v4-cursor.is-interactive {
	width: 92px;
	height: 92px;
	margin-left: -46px;
	margin-top: -46px;
	background: rgba(8,8,11,.54);
	border-color: rgba(194,222,170,.58);
}

.v4-cursor.is-interactive::before {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0);
}

.v4-cursor.is-interactive .v4-cursor__label {
	opacity: 1;
	transform: translateY(0);
}

.v4-scroll-meter {
	position: fixed;
	z-index: 200;
	right: 11px;
	top: 50%;
	width: 1px;
	height: min(36vh, 300px);
	transform: translateY(-50%);
	background: rgba(255,255,255,.10);
	pointer-events: none;
	mix-blend-mode: difference;
}

.v4-scroll-meter span {
	display: block;
	width: 100%;
	height: 100%;
	background: #fff;
	transform: scaleY(var(--v4-scroll-progress));
	transform-origin: 50% 0;
}

/* ------------------------------------------------------------
   02 — WORD / LINE REVEALS
   ------------------------------------------------------------ */

.v4-reveal-ready {
	overflow: hidden;
}

.v4-reveal-ready .v4-word {
	display: inline-block;
	vertical-align: baseline;
	transform: translate3d(0, 1.15em, 0) rotate(2deg);
	opacity: .02;
	filter: blur(5px);
	transition:
		transform .9s var(--v4-ease-out),
		opacity .72s ease,
		filter .72s ease;
	transition-delay: var(--v4-word-delay, 0ms);
}

.v4-reveal-ready.is-v4-revealed .v4-word {
	transform: translate3d(0, 0, 0) rotate(0);
	opacity: 1;
	filter: blur(0);
}

/* ------------------------------------------------------------
   03 — SECTION CONTINUITY FOUNDATION
   ------------------------------------------------------------ */

html.v4-motion-enabled .signal-hero,
html.v4-motion-enabled .trinovik-method,
html.v4-motion-enabled .service-generator,
html.v4-motion-enabled .service-work-relay,
html.v4-motion-enabled .work-intro-2026,
html.v4-motion-enabled .cinema-work,
html.v4-motion-enabled .client-marquee--2026,
html.v4-motion-enabled .why-trinovik-2026,
html.v4-motion-enabled .insight-scroll--2026,
html.v4-motion-enabled .project-convergence--2026,
html.v4-motion-enabled .signal-footer--2026 {
	--v4-section-progress: 0;
	--v4-enter: 1;
	--v4-exit: 0;
}

/* Shared cinematic edge treatment */
html.v4-motion-enabled .trinovik-method__sticky,
html.v4-motion-enabled .service-generator__sticky,
html.v4-motion-enabled .service-work-relay__sticky,
html.v4-motion-enabled .cinema-work__sticky,
html.v4-motion-enabled .insight-scroll__sticky,
html.v4-motion-enabled .project-convergence__sticky {
	isolation: isolate;
}

/* ------------------------------------------------------------
   04 — HERO → DNA HANDOFF
   ------------------------------------------------------------ */

html.v4-motion-enabled .signal-hero {
	isolation: isolate;
}

html.v4-motion-enabled .signal-hero::after {
	content: "";
	position: absolute;
	z-index: 8;
	inset: 0;
	background:
		radial-gradient(circle at var(--v4-pointer-x) var(--v4-pointer-y), rgba(194,222,170,.12), transparent 18%),
		radial-gradient(circle at 50% 44%, rgba(91,116,184,.13), transparent 34%);
	opacity: var(--v4-hero-atmosphere-opacity, .73);
	pointer-events: none;
	mix-blend-mode: screen;
}

html.v4-motion-enabled .signal-hero__inner {
	transform: translate3d(0, var(--v4-exit-y, 0px), 0) scale(var(--v4-exit-scale, 1));
	transform-origin: 50% 58%;
	transition: filter .08s linear;
	filter: blur(var(--v4-exit-blur, 0px));
}

html.v4-motion-enabled .signal-hero__canvas {
	filter: blur(var(--v4-exit-canvas-blur, 0px));
}

html.v4-motion-enabled .signal-hero__bottom {
	opacity: var(--v4-exit-opacity, 1);
	transform: translateY(var(--v4-exit-shift, 0px));
}

html.v4-motion-enabled .trinovik-method__sticky::after {
	content: "";
	position: absolute;
	z-index: 60;
	inset: 0;
	background:
		radial-gradient(circle at 50% 12%, rgba(112,48,143,.18), transparent 28%),
		#08080b;
	opacity: var(--v4-enter-inverse, 0);
	pointer-events: none;
}

html.v4-motion-enabled .trinovik-method__intro,
html.v4-motion-enabled .trinovik-method__top,
html.v4-motion-enabled .trinovik-method__bottom {
	transform: translate3d(0, var(--v4-enter-y-28, 0px), 0);
	opacity: var(--v4-enter-opacity-15, 1);
}

html.v4-motion-enabled .method-signal {
	transform: translateY(-50%) scaleX(var(--v4-enter-scale-82, 1));
	transform-origin: left center;
}

/* ------------------------------------------------------------
   05 — DNA → SERVICES HANDOFF
   ------------------------------------------------------------ */

html.v4-motion-enabled .service-generator__sticky::after {
	content: "";
	position: absolute;
	z-index: 70;
	inset: 0;
	background:
		radial-gradient(circle at 50% 40%, rgba(121,87,206,.16), transparent 35%),
		#f0eee8;
	opacity: var(--v4-enter-inverse, 0);
	pointer-events: none;
}

html.v4-motion-enabled .service-generator__top,
html.v4-motion-enabled .service-generator__intro,
html.v4-motion-enabled .service-generator__bottom {
	transform: translate3d(0, var(--v4-enter-y-24, 0px), 0);
	opacity: var(--v4-enter-opacity-20, 1);
}

html.v4-motion-enabled .service-generator__signal {
	filter: blur(var(--v4-enter-blur-6, 0px));
	transform: translateY(-50%) scaleX(var(--v4-enter-scale-88, 1));
	transform-origin: center;
}

html.v4-motion-enabled .service-output.is-active .service-output__copy {
	animation: v4-service-copy-in .8s var(--v4-ease-out) both;
}

html.v4-motion-enabled .service-output.is-active [data-service-visual] {
	animation: v4-service-visual-in 1s var(--v4-ease-out) both;
}

@keyframes v4-service-copy-in {
	from { opacity: .28; transform: translate3d(-24px, 12px, 0); filter: blur(4px); }
	to { opacity: 1; transform: translate3d(0,0,0); filter: blur(0); }
}

@keyframes v4-service-visual-in {
	from { opacity: .25; transform: translate3d(24px, calc(-50% + var(--visual-y, 0px)), 0) scale(.94); filter: blur(8px); }
	to { opacity: 1; transform: translate3d(var(--visual-x, 0px), calc(-50% + var(--visual-y, 0px)), 0) scale(1); filter: blur(0); }
}

/* ------------------------------------------------------------
   06 — SERVICES → WORK RELAY ENHANCEMENT
   ------------------------------------------------------------ */

html.v4-motion-enabled .service-work-relay__sticky::before {
	content: "";
	position: absolute;
	z-index: 9;
	left: 50%;
	top: 50%;
	width: 1px;
	height: 1px;
	border-radius: 50%;
	box-shadow:
		0 0 var(--v4-relay-blur-1, 70px) var(--v4-relay-spread-1, 8px) rgba(194,222,170,.24),
		0 0 var(--v4-relay-blur-2, 120px) var(--v4-relay-spread-2, 18px) rgba(112,48,143,.16);
	opacity: var(--v4-relay-glow-opacity, .35);
	pointer-events: none;
}

html.v4-motion-enabled .service-work-relay__aperture img {
	transform: scale(var(--v4-relay-image-scale, 1.08));
	filter:
		saturate(var(--v4-relay-saturate, .75))
		contrast(var(--v4-relay-contrast, .94));
}

html.v4-motion-enabled .work-intro-2026 {
	position: relative;
	isolation: isolate;
}

html.v4-motion-enabled .work-intro-2026::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0;
	background: linear-gradient(180deg, #70308f 0%, rgba(112,48,143,.22) 22%, transparent 64%);
	opacity: var(--v4-enter-inverse, 0);
	pointer-events: none;
}

html.v4-motion-enabled .work-intro-2026__inner {
	position: relative;
	z-index: 1;
	transform: translate3d(0, var(--v4-enter-y-50, 0px), 0);
	opacity: var(--v4-enter-opacity-15, 1);
}

/* ------------------------------------------------------------
   07 — CINEMATIC WORK DEPTH
   ------------------------------------------------------------ */

html.v4-motion-enabled .cinema-work__sticky::before,
html.v4-motion-enabled .cinema-work__sticky::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

html.v4-motion-enabled .cinema-work__sticky::before {
	z-index: 7;
	background:
		radial-gradient(circle at var(--v4-pointer-x) var(--v4-pointer-y), rgba(255,255,255,.09), transparent 17%),
		radial-gradient(circle at 50% 50%, transparent 45%, rgba(0,0,0,.48) 100%);
	mix-blend-mode: screen;
	opacity: .44;
}

html.v4-motion-enabled .cinema-work__sticky::after {
	z-index: 6;
	box-shadow: inset 0 0 120px rgba(0,0,0,.58);
}

html.v4-motion-enabled .cinema-project__media {
	border-radius: clamp(8px, 1vw, 18px);
	clip-path: inset(0 0 0 0 round clamp(8px, 1vw, 18px));
	box-shadow: 0 30px 100px rgba(0,0,0,.32);
}

html.v4-motion-enabled .cinema-project.is-active .cinema-project__media img {
	animation: v4-project-image-enter 1.25s var(--v4-ease-out) both;
}

html.v4-motion-enabled .cinema-project.is-active .cinema-project__copy h3 > span {
	animation: v4-project-word-enter .85s var(--v4-ease-out) both;
}

html.v4-motion-enabled .cinema-project.is-active .cinema-project__copy h3 > span:nth-child(2) { animation-delay: 45ms; }
html.v4-motion-enabled .cinema-project.is-active .cinema-project__copy h3 > span:nth-child(3) { animation-delay: 90ms; }
html.v4-motion-enabled .cinema-project.is-active .cinema-project__copy h3 > span:nth-child(4) { animation-delay: 135ms; }
html.v4-motion-enabled .cinema-project.is-active .cinema-project__copy h3 > span:nth-child(5) { animation-delay: 180ms; }

@keyframes v4-project-image-enter {
	from { transform: scale(1.075); filter: saturate(.75) contrast(.92) blur(3px); }
	to { transform: scale(1); filter: saturate(1) contrast(1) blur(0); }
}

@keyframes v4-project-word-enter {
	from { transform: translate3d(0, .9em, 0); opacity: 0; filter: blur(3px); }
	to { transform: translate3d(0, 0, 0); opacity: 1; filter: blur(0); }
}

/* ------------------------------------------------------------
   08 — CLIENT WALL INTERACTION
   ------------------------------------------------------------ */

html.v4-motion-enabled .client-marquee--2026 {
	isolation: isolate;
}

html.v4-motion-enabled .client-marquee__card {
	transition:
		transform .55s var(--v4-ease-out),
		opacity .4s ease,
		filter .45s ease,
		box-shadow .55s var(--v4-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	html.v4-motion-enabled .client-marquee__row:hover .client-marquee__card {
		opacity: .32;
		filter: saturate(.45) contrast(.9);
	}

	html.v4-motion-enabled .client-marquee__row .client-marquee__card:hover {
		opacity: 1;
		filter: saturate(1) contrast(1);
		transform: translateY(-7px) scale(1.025);
		box-shadow: 0 30px 80px rgba(20, 12, 40, .14);
	}
}

/* ------------------------------------------------------------
   09 — WHY TRINOVIK: QUIET CONNECTED MOMENT
   ------------------------------------------------------------ */

html.v4-motion-enabled .why-trinovik-2026__system {
	transform: translate3d(0, var(--v4-enter-y-38, 0px), 0) scale(var(--v4-enter-scale-92, 1));
	opacity: var(--v4-enter-opacity-08, 1);
}

html.v4-motion-enabled .why-trinovik-2026__connections line {
	stroke-dasharray: 1;
	stroke-dashoffset: var(--v4-enter-inverse, 0);
}

html.v4-motion-enabled .why-trinovik-2026__discipline {
	transition: transform .5s var(--v4-ease-out), background .3s ease, color .3s ease;
}

@media (hover: hover) and (pointer: fine) {
	html.v4-motion-enabled .why-trinovik-2026__discipline:hover {
		transform: scale(1.06);
	}
}

/* ------------------------------------------------------------
   10 — INSIGHTS SCENE DEPTH
   ------------------------------------------------------------ */

html.v4-motion-enabled .insight-scroll__sticky::after {
	content: "";
	position: absolute;
	z-index: 3;
	inset: 0;
	background:
		radial-gradient(circle at var(--v4-pointer-x) var(--v4-pointer-y), rgba(112,48,143,.14), transparent 22%),
		linear-gradient(180deg, rgba(255,255,255,.04), transparent 26%, rgba(0,0,0,.08));
	pointer-events: none;
}

html.v4-motion-enabled .insight-scene.is-active {
	animation: v4-insight-scene-in .85s var(--v4-ease-out) both;
}

@keyframes v4-insight-scene-in {
	from { opacity: .05; filter: blur(8px); transform: scale(.97) translate3d(0, 20px, 0); }
	to { opacity: 1; filter: blur(0); transform: scale(1) translate3d(0, 0, 0); }
}

/* ------------------------------------------------------------
   11 — CONTACT / PROJECT CONVERGENCE FINALE
   ------------------------------------------------------------ */

html.v4-motion-enabled .project-convergence__sticky::after {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 0;
	background:
		radial-gradient(circle at 50% 50%, rgba(194,222,170,.08), transparent var(--v4-convergence-radius, 18%)),
		radial-gradient(circle at 50% 50%, rgba(112,48,143,.12), transparent 56%);
	pointer-events: none;
}

html.v4-motion-enabled .project-convergence__destination {
	filter: drop-shadow(0 0 var(--v4-convergence-shadow, 16px) rgba(194,222,170,.10));
}

html.v4-motion-enabled .project-convergence__cta {
	transition:
		transform .65s var(--v4-ease-out),
		box-shadow .65s var(--v4-ease-out),
		background .4s ease;
}

@media (hover: hover) and (pointer: fine) {
	html.v4-motion-enabled .project-convergence__cta:hover {
		transform: scale(1.045);
		box-shadow: 0 0 0 1px rgba(194,222,170,.35), 0 30px 100px rgba(112,48,143,.25);
	}
}

/* ------------------------------------------------------------
   12 — MAGNETIC TARGETS
   ------------------------------------------------------------ */

html.v4-motion-enabled [data-v4-magnetic] {
	--v4-magnet-x: 0px;
	--v4-magnet-y: 0px;
	transform: translate3d(var(--v4-magnet-x), var(--v4-magnet-y), 0);
	transition: transform .45s var(--v4-ease-out);
	will-change: transform;
}

html.v4-motion-enabled [data-v4-magnetic].is-v4-magnet-active {
	transition-duration: .12s;
}

/* ------------------------------------------------------------
   13 — HEADER MOTION REFINEMENT
   ------------------------------------------------------------ */

html.v4-motion-enabled .site-header--minimal {
	transition:
		background .45s ease,
		backdrop-filter .45s ease,
		transform .5s var(--v4-ease-out),
		border-color .4s ease;
}

html.v4-motion-enabled body.v4-has-scrolled .site-header--minimal {
	background: rgba(7,7,12,.44);
	backdrop-filter: blur(18px) saturate(130%);
	border-bottom: 1px solid rgba(255,255,255,.06);
}

html.v4-motion-enabled body.v4-scroll-down.v4-header-can-hide .site-header--minimal:not(.is-menu-open) {
	transform: translateY(-110%);
}


/* Keep the full-screen navigation attached to the viewport while open.
   The scrolled V4 header blur/transform otherwise creates a containing
   block that can clip the fixed navigation overlay to the header height. */
html.v4-motion-enabled body.menu-open .site-header--minimal,
html.v4-motion-enabled body.v4-has-scrolled.menu-open .site-header--minimal,
html.v4-motion-enabled body.v4-has-scrolled .site-header--minimal.is-menu-open {
	transform: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	background: transparent !important;
	border-color: transparent !important;
}

html.v4-motion-enabled body.menu-open .site-header--minimal .site-nav--overlay {
	top: 0;
	right: 0;
	bottom: auto;
	left: 0;
	width: 100vw;
	height: 100dvh;
	min-height: 100vh;
	max-height: 100dvh;
}

/* ------------------------------------------------------------
   14 — FOOTER ARRIVAL
   ------------------------------------------------------------ */

html.v4-motion-enabled .signal-footer--2026 {
	position: relative;
	isolation: isolate;
}

/* Footer arrival line removed: it created a stray vertical glitch
   between Start a Project and the compact footer. */
html.v4-motion-enabled .signal-footer--2026::after {
	content: none;
}

html.v4-motion-enabled .signal-footer__inner {
	position: relative;
	z-index: 1;
}

/* ------------------------------------------------------------
   15 — DESKTOP CURSOR POLICY
   ------------------------------------------------------------ */

@media (hover: hover) and (pointer: fine) {
	html.v4-motion-enabled body.v4-cursor-ready,
	html.v4-motion-enabled body.v4-cursor-ready a,
	html.v4-motion-enabled body.v4-cursor-ready button,
	html.v4-motion-enabled body.v4-cursor-ready [role="button"] {
		cursor: none !important;
	}
}

/* ------------------------------------------------------------
   16 — TABLET / MOBILE PERFORMANCE & BEHAVIOUR
   ------------------------------------------------------------ */

@media (max-width: 900px) {
	.v4-scroll-meter {
		right: 5px;
		height: 26vh;
	}

	html.v4-motion-enabled .signal-hero__inner {
		transform: translate3d(0, var(--v4-exit-y-mobile, 0px), 0) scale(var(--v4-exit-scale-mobile, 1));
		filter: blur(var(--v4-exit-blur-mobile, 0px));
	}

	html.v4-motion-enabled .cinema-work__sticky::before,
	html.v4-motion-enabled .insight-scroll__sticky::after {
		display: none;
	}
}

@media (hover: none), (pointer: coarse) {
	.v4-cursor {
		display: none !important;
	}

	html.v4-motion-enabled [data-v4-magnetic] {
		transform: none !important;
	}
}

/* ------------------------------------------------------------
   17 — REDUCED MOTION
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.v4-intro,
	.v4-page-transition,
	.v4-cursor,
	.v4-scroll-meter {
		display: none !important;
	}

	html.v4-motion-enabled .signal-hero__inner,
	html.v4-motion-enabled .signal-hero__canvas,
	html.v4-motion-enabled .signal-hero__bottom,
	html.v4-motion-enabled .trinovik-method__intro,
	html.v4-motion-enabled .trinovik-method__top,
	html.v4-motion-enabled .trinovik-method__bottom,
	html.v4-motion-enabled .service-generator__top,
	html.v4-motion-enabled .service-generator__intro,
	html.v4-motion-enabled .service-generator__bottom,
	html.v4-motion-enabled .service-generator__signal,
	html.v4-motion-enabled .work-intro-2026__inner,
	html.v4-motion-enabled .why-trinovik-2026__system,
	html.v4-motion-enabled [data-v4-magnetic] {
		transform: none !important;
		filter: none !important;
		opacity: 1 !important;
	}

	html.v4-motion-enabled .trinovik-method__sticky::after,
	html.v4-motion-enabled .service-generator__sticky::after,
	html.v4-motion-enabled .work-intro-2026::before,
	html.v4-motion-enabled .project-convergence__sticky::after {
		display: none !important;
	}

	.v4-reveal-ready .v4-word {
		transform: none !important;
		opacity: 1 !important;
		filter: none !important;
		transition: none !important;
	}
}