/* ============================================================
   TRINOVIK LABS
   WEBSITE 2026

   Homepage implementation layer.

   NOTE: This stylesheet is enqueued only on the front page,
   so selectors do not depend on WordPress adding a `.home` body class.

   Section order:
   01 Hero
   02 Our DNA
   03 Services
   04 Selected Work
   05 Selected Clients
   06 Why Trinovik Labs
   07 Insights
   08 Start a Project

   ============================================================ */


/* ============================================================
   00 — GLOBAL HOMEPAGE FOUNDATION
   ============================================================ */

:root {
	--tl-page-gutter: clamp(20px, 4vw, 72px);
}


/*
 * Allows anchored sections to clear the fixed header.
 */
section[id] {
	scroll-margin-top: 90px;
}


/*
 * Accessibility utility.
 */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/*
 * Keyboard users must be able to see focus.
 */
a:focus-visible,
button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 5px;
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
	}

}
/* ============================================================
   01 — BRAND REVEAL / HERO
   ============================================================ */


/* ------------------------------------------------------------
   Supporting proposition
   ------------------------------------------------------------ */

.signal-hero--identity-reveal .signal-hero__message {
	width: min(100%, 1000px);
	margin-inline: auto;
}



.signal-hero--identity-reveal
.signal-hero__message-main {
	width: 100%;
}


/* Hero H1 */

.signal-hero--identity-reveal
.signal-hero__message-main
h1 {
	width: min(100%, 900px);

	margin:
		0
		auto
		clamp(18px, 2vw, 25px);

	font-size:
		clamp(
			2rem,
			3.5vw,
			4rem
		);

	line-height: .95;

	letter-spacing: -.045em;

	font-weight: 500;

	text-align: center;
	text-transform: uppercase;

	white-space: normal;

	text-wrap: balance;
}


/* Agency proposition */

.signal-hero--identity-reveal
.signal-hero__message-main
> p {
	width: min(100%, 900px);

	margin:
		0
		auto;

	font-size:
		clamp(
			14px,
			1.15vw,
			17px
		);

	line-height: 1.55;

	color:
		rgba(255, 255, 255, .68);

	text-align: center;

	text-wrap: balance;
}

.signal-hero--identity-reveal
.signal-hero__message-main
> p span {
	display: block;
	white-space: nowrap;
}


/* ------------------------------------------------------------
   CTAs
   ------------------------------------------------------------ */


.signal-hero--identity-reveal
.signal-hero__actions {
	margin-top:
		clamp(
			24px,
			3vw,
			36px
		);

	display: flex;

	justify-content: center;
	align-items: center;

	gap:
		clamp(
			16px,
			2vw,
			28px
		);
}


/* ------------------------------------------------------------
   Hero bottom cue after removing the visible principle labels
   ------------------------------------------------------------ */

.signal-hero--identity-reveal
.signal-hero__bottom {
	justify-content: flex-end;
	padding-top: 0;
	border-top: 0;
}

.signal-hero--identity-reveal
.signal-hero__scroll {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 13px;
	padding: 9px 5px 9px 12px;
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 999px;
	background: rgba(4,4,56,.16);
	color: rgba(255,255,255,.62);
	text-decoration: none;
	transition:
		color .3s ease,
		border-color .3s ease,
		background .3s ease,
		transform .3s ease;
}

.signal-hero--identity-reveal
.signal-hero__scroll:hover,
.signal-hero--identity-reveal
.signal-hero__scroll:focus-visible {
	color: #fff;
	border-color: rgba(255,255,255,.42);
	background: rgba(255,255,255,.08);
	transform: translateY(-2px);
}

.signal-hero--identity-reveal
.signal-hero__scroll:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

.signal-hero__scroll-track {
	position: relative;
	display: grid;
	place-items: start center;
	width: 24px;
	height: 34px;
	padding-top: 5px;
	border-radius: 999px;
	background: rgba(255,255,255,.10);
	overflow: hidden;
}

.signal-hero__scroll-track::before {
	content: "";
	position: absolute;
	top: 7px;
	bottom: 7px;
	left: 50%;
	width: 1px;
	background: linear-gradient(to bottom, rgba(255,255,255,.2), rgba(218,26,207,.8));
	transform: translateX(-50%);
}

.signal-hero__scroll-pulse {
	position: relative;
	z-index: 1;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 9px rgba(233,75,220,.95);
	animation: trinovik-follow-signal 1.7s cubic-bezier(.45,0,.2,1) infinite;
}

@keyframes trinovik-follow-signal {
	0% {
		opacity: 0;
		transform: translateY(0) scale(.65);
	}
	20% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(19px) scale(1);
	}
}


/* ------------------------------------------------------------
   Brand principles
   ------------------------------------------------------------ */


.signal-hero--identity-reveal
.signal-hero__pillars {
	display: flex;

	align-items: center;

	gap:
		clamp(
			20px,
			3vw,
			48px
		);
}



.signal-hero--identity-reveal
.signal-hero__pillars
span {
	white-space: nowrap;
}


/* ------------------------------------------------------------
   Particle stage
   ------------------------------------------------------------ */


.signal-hero--identity-reveal
.signal-hero__stage {
	min-height:
		clamp(
			390px,
			56vh,
			680px
		);
}


/* ------------------------------------------------------------
   Large desktop
   ------------------------------------------------------------ */

@media (min-width: 1440px) {

	
	.signal-hero--identity-reveal
	.signal-hero__message-main
	h1 {
		font-size:
			clamp(
				3rem,
				3.6vw,
				4.4rem
			);
	}

}


/* ------------------------------------------------------------
   Tablet
   ------------------------------------------------------------ */

@media (max-width: 1000px) {

	
	.signal-hero--identity-reveal
	.signal-hero__stage {
		min-height:
			clamp(
				350px,
				51vh,
				540px
			);
	}


	
	.signal-hero--identity-reveal
	.signal-hero__message-main
	> p {
		width: min(100%, 650px);
	}

}


/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media (max-width: 680px) {

	
	.signal-hero--identity-reveal
	.signal-hero__inner {
		padding-top: 82px;
		padding-bottom: 24px;
	}


	
	.signal-hero--identity-reveal
	.signal-hero__stage {
		min-height:
			clamp(
				330px,
				48svh,
				470px
			);
	}


	
	.signal-hero--identity-reveal
	.signal-hero__message-main
	h1 {
		width: min(100%, 420px);

		margin-bottom: 18px;

		font-size:
			clamp(
				1.8rem,
				9vw,
				2.8rem
			);

		line-height: .92;
	}


	
	.signal-hero--identity-reveal
	.signal-hero__message-main
	> p {
		width: min(100%, 390px);

		font-size: 14px;

		line-height: 1.55;
	}

	.signal-hero--identity-reveal
	.signal-hero__message-main
	> p span {
		display: inline;
		white-space: normal;
	}


	
	.signal-hero--identity-reveal
	.signal-hero__actions {
		margin-top: 24px;

		gap: 16px;
	}


	
	.signal-hero--identity-reveal
	.signal-hero__pillars {
		display: none;
	}

}

/* ============================================================
   SERVICES — PAGE LINKS
   Keeps the approved panels intact while making every capability navigable.
   ============================================================ */

.service-generator--2026 .service-output__learn-more {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: clamp(15px, 1.7vw, 22px);
	padding: 9px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--service-accent) 54%, transparent);
	color: rgba(255, 255, 255, .78);
	font-size: 11px;
	line-height: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(24px);
	pointer-events: auto;
	transition: opacity .6s ease .19s, transform .72s cubic-bezier(.2, .8, .2, 1) .19s, color .25s ease, border-color .25s ease;
}

.service-generator--2026 .service-output.is-active .service-output__learn-more {
	opacity: 1;
	transform: translateY(0);
}

.service-generator--2026 .service-output__learn-more > span {
	color: inherit;
}

.service-generator--2026 .service-output__learn-more img {
	display: block;
	width: 22px;
	height: 22px;
	object-fit: contain;
	filter: drop-shadow(0 0 8px color-mix(in srgb, var(--service-accent) 42%, transparent));
	transition: transform .42s cubic-bezier(.2, .8, .2, 1), filter .3s ease;
}

.service-generator--2026 .service-output__learn-more:hover,
.service-generator--2026 .service-output__learn-more:focus-visible {
	color: #fff;
	border-color: var(--service-accent);
	outline: none;
}

.service-generator--2026 .service-output__learn-more:hover img,
.service-generator--2026 .service-output__learn-more:focus-visible img {
	transform: rotate(28deg) scale(1.08);
	filter: drop-shadow(0 0 12px color-mix(in srgb, var(--service-accent) 65%, transparent));
}

@media (max-width: 1000px) {
	.service-generator--2026 .service-output__learn-more {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 680px) {
	.service-generator--2026 .service-output__learn-more {
		gap: 10px;
		font-size: 10px;
	}

	.service-generator--2026 .service-output__learn-more img {
		width: 21px;
		height: 21px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.service-generator--2026 .service-output__learn-more,
	.service-generator--2026 .service-output__learn-more img {
		transition-duration: .01ms !important;
	}
}


/* ------------------------------------------------------------
   Very small screens
   ------------------------------------------------------------ */

@media (max-width: 430px) {

	
	.signal-hero--identity-reveal
	.signal-hero__actions {
		flex-direction: column;

		align-items: stretch;

		width: min(100%, 300px);

		margin-inline: auto;
	}


	
	.signal-hero--identity-reveal
	.signal-button {
		width: 100%;
	}


	
	.signal-hero--identity-reveal
	.signal-text-link {
		width: max-content;

		margin-inline: auto;
	}

}


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

@media (prefers-reduced-motion: reduce) {

	
	.signal-hero--identity-reveal
	.signal-hero__scroll-arrow {
		animation: none;
	}

	.signal-hero__scroll-pulse {
		animation: none;
	}

}
/* ============================================================
   01 — HERO / FINAL VIEWPORT TUNING
   ============================================================ */

@media (min-width: 1001px) {

	
	.signal-hero--identity-reveal
	.signal-hero__stage {
		/* Preserve clear space between the particle identity and proposition. */
		min-height: clamp(380px, 52vh, 600px);
	}


	/*
	 * Keep the approved Hero proposition on one line on laptop/desktop.
	 * The rail is intentionally wider than the body-copy measure; mobile
	 * keeps the existing wrapped treatment below 680px.
	 */
	.signal-hero--identity-reveal
	.signal-hero__message {
		width: min(94vw, 1320px);
	}


	
	.signal-hero--identity-reveal
	.signal-hero__message-main
	h1 {
		width: 100%;
		margin-bottom: 16px;
		font-size: clamp(1.75rem, 2.55vw, 2.85rem);
		line-height: .95;
		white-space: nowrap;
		text-wrap: nowrap;
	}


	
	.signal-hero--identity-reveal
	.signal-hero__message-main
	> p {
		line-height: 1.45;
	}


	
	.signal-hero--identity-reveal
	.signal-hero__actions {
		margin-top: 22px;
	}


	
	.signal-hero--identity-reveal
	.signal-hero__bottom {
		margin-top: 24px;
		padding-bottom: 22px;
	}

}
/* ============================================================
   02 — OUR DNA
   ============================================================ */


/* ------------------------------------------------------------
   SECTION FOUNDATION
   ------------------------------------------------------------ */

.trinovik-method--dna {
	--dna-dark: #111214;
	--dna-muted: rgba(17, 18, 20, .46);
	--dna-line: rgba(17, 18, 20, .15);
	--dna-purple: #7957ce;
}


/* ------------------------------------------------------------
   INTRO
   ------------------------------------------------------------ */


.trinovik-method--dna
.trinovik-method__intro p {
	margin-bottom: 14px;

	font-size: 9px;

	font-weight: 600;

	letter-spacing: .2em;

	text-transform: uppercase;

	color: var(--dna-purple);
}



.trinovik-method--dna
.trinovik-method__intro h2 {
	max-width: 560px;

	font-size:
		clamp(
			2rem,
			3vw,
			3.4rem
		);

	line-height: .96;

	letter-spacing: -.045em;
}



.trinovik-method--dna
.trinovik-method__intro h2 span {
	display: block;

	margin-top: 5px;
}


/* ------------------------------------------------------------
   MAIN PRINCIPLE TYPOGRAPHY
   ------------------------------------------------------------ */


.trinovik-method--dna
.method-panel h3 {
	margin: 0;

	font-size:
		clamp(
			5.5rem,
			11vw,
			12rem
		);

	line-height: .72;

	letter-spacing: -.075em;

	font-weight: 500;

	text-transform: uppercase;
}


/* Strategy */

.trinovik-method--dna
.method-panel--strategy h3 {
	color: var(--dna-dark);
}


/* Creative Technology */

.trinovik-method--dna
.method-panel--creative-technology h3 {
	font-size:
		clamp(
			4.5rem,
			9vw,
			9.5rem
		);

	line-height: .72;

	color: var(--dna-purple);

	font-style: italic;
}



.trinovik-method--dna
.method-panel--creative-technology h3 span {
	display: block;

	margin-left:
		clamp(
			40px,
			7vw,
			120px
		);
}


/* Results */

.trinovik-method--dna
.method-panel--results h3 {
	color: var(--dna-dark);
}


/* ------------------------------------------------------------
   SECONDARY COPY
   ------------------------------------------------------------ */


.trinovik-method--dna
.method-panel__secondary {
	margin-top:
		clamp(
			36px,
			4vw,
			58px
		);

	padding-top: 16px;

	border-top:
		1px solid
		var(--dna-line);

	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		minmax(300px, 520px);

	gap:
		clamp(
			30px,
			6vw,
			100px
		);

	align-items: end;
}


/* ------------------------------------------------------------
   FOCUS
   ------------------------------------------------------------ */


.trinovik-method--dna
.method-panel__focus {
	display: flex;

	flex-direction: column;

	align-items: flex-start;

	gap: 9px;
}



.trinovik-method--dna
.method-panel__focus-label {
	font-size: 8px;

	font-weight: 600;

	letter-spacing: .19em;

	text-transform: uppercase;

	color: var(--dna-purple);
}



.trinovik-method--dna
.method-panel__focus-value {
	max-width: 520px;

	font-size:
		clamp(
			9px,
			.85vw,
			12px
		);

	line-height: 1.5;

	letter-spacing: .12em;

	text-transform: uppercase;

	color: var(--dna-muted);
}


/* ------------------------------------------------------------
   SUPPORTING LINE
   ------------------------------------------------------------ */


.trinovik-method--dna
.method-panel__support-line {
	max-width: 520px;

	margin: 0;

	justify-self: end;

	font-size:
		clamp(
			1.45rem,
			2.5vw,
			2.8rem
		);

	line-height: .98;

	letter-spacing: -.04em;

	font-weight: 500;

	text-align: right;

	text-wrap: balance;

	color: var(--dna-dark);
}


/* ------------------------------------------------------------
   NUMBERS
   ------------------------------------------------------------ */


.trinovik-method--dna
.method-panel__number {
	opacity: .82;
}


/* ------------------------------------------------------------
   SIGNAL
   ------------------------------------------------------------ */


.trinovik-method--dna
.method-signal__progress {
	box-shadow:
		0 0 28px
		color-mix(
			in srgb,
			var(--method-accent) 55%,
			transparent
		);
}


/* ------------------------------------------------------------
   BOTTOM BRAND PRINCIPLES
   ------------------------------------------------------------ */


.trinovik-method--dna
.trinovik-method__bottom {
	gap: 12px;
}



.trinovik-method--dna
.trinovik-method__bottom > span:not(
	.trinovik-method__bottom-line
):not(
	.trinovik-method__scroll
) {
	white-space: nowrap;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1000px) {

	
	.trinovik-method--dna
	.method-panel h3 {
		font-size:
			clamp(
				4.5rem,
				12vw,
				8rem
			);
	}


	
	.trinovik-method--dna
	.method-panel--creative-technology h3 {
		font-size:
			clamp(
				3.8rem,
				10vw,
				7rem
			);
	}


	
	.trinovik-method--dna
	.method-panel__secondary {
		grid-template-columns:
			minmax(0, .8fr)
			minmax(280px, 1fr);

		gap: 30px;
	}


	
	.trinovik-method--dna
	.trinovik-method__bottom {
		font-size: 6px;
	}

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 680px) {

	
	.trinovik-method--dna {
		padding-top: 90px;

		padding-bottom: 80px;
	}


	
	.trinovik-method--dna
	.trinovik-method__top {
		margin-bottom: 55px;
	}


	
	.trinovik-method--dna
	.trinovik-method__intro {
		margin-bottom: 80px;
	}


	
	.trinovik-method--dna
	.trinovik-method__intro h2 {
		max-width: 330px;

		font-size:
			clamp(
				2.1rem,
				10vw,
				3rem
			);
	}


	
	.trinovik-method--dna
	.trinovik-method__stage {
		gap: 95px;
	}


	
	.trinovik-method--dna
	.method-panel h3 {
		font-size:
			clamp(
				3.8rem,
				18vw,
				5.5rem
			);

		line-height: .76;
	}


	
	.trinovik-method--dna
	.method-panel--creative-technology h3 {
		font-size:
			clamp(
				3rem,
				14.5vw,
				4.8rem
			);
	}


	
	.trinovik-method--dna
	.method-panel--creative-technology h3 span {
		margin-left: 0;
	}


	
	.trinovik-method--dna
	.method-panel__secondary {
		margin-top: 28px;

		grid-template-columns: 1fr;

		gap: 24px;
	}


	
	.trinovik-method--dna
	.method-panel__support-line {
		justify-self: start;

		max-width: 330px;

		font-size:
			clamp(
				1.6rem,
				7vw,
				2.2rem
			);

		text-align: left;
	}


	
	.trinovik-method--dna
	.method-panel__focus-value {
		max-width: 320px;

		font-size: 9px;
	}


	
	.trinovik-method--dna
	.trinovik-method__bottom-line {
		display: none;
	}


	
	.trinovik-method--dna
	.trinovik-method__bottom {
		flex-wrap: wrap;

		gap:
			8px
			16px;
	}

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

	
	.trinovik-method--dna {
		height: auto;

		padding:
			110px
			var(--page-padding)
			90px;
	}


	
	.trinovik-method--dna
	.trinovik-method__sticky {
		position: relative;

		top: auto;

		height: auto;

		overflow: visible;

		padding: 0;
	}


	
	.trinovik-method--dna
	.trinovik-method__top {
		margin-bottom: 70px;
	}


	
	.trinovik-method--dna
	.trinovik-method__intro {
		position: relative;

		inset: auto;

		margin-bottom: 90px;
	}


	
	.trinovik-method--dna
	.method-signal {
		display: none;
	}


	
	.trinovik-method--dna
	.trinovik-method__stage {
		position: relative;

		inset: auto;

		display: flex;

		flex-direction: column;

		gap: 100px;
	}


	
	.trinovik-method--dna
	.method-panel {
		position: relative;

		inset: auto;

		width: 100%;

		opacity: 1;

		visibility: visible;

		transform: none;
	}


	
	.trinovik-method--dna
	.method-panel.is-active {
		transform: none;
	}


	
	.trinovik-method--dna
	.trinovik-method__bottom {
		position: relative;

		inset: auto;

		margin-top: 90px;
	}


	
	.trinovik-method--dna
	.trinovik-method__scroll {
		display: none;
	}

}

/* ============================================================
   02 — OUR DNA / RIGHT-SIDE VERTICAL PROGRESS REFINEMENT
   Layout-only refinement. Existing scroll/state timing is preserved.
   ============================================================ */

@media (min-width: 681px) {

	/* The section number is already established by page order;
	   keep only the live 01 / 03 counter in the top meta row. */
	.trinovik-method--dna
	.trinovik-method__top {
		justify-content: flex-end;
	}

	/* Move the principle artwork slightly lower so the intro has
	   more breathing room above the oversized state typography. */
	.trinovik-method--dna
	.method-panel {
		top: 54%;
		width: min(82vw, 1260px);
	}

	/* Recompose the old horizontal signal as a right-side rail. */
	.trinovik-method--dna
	.method-signal {
		left: auto;
		right: clamp(34px, 4vw, 72px);
		top: 53%;
		width: 64px;
		height: min(56vh, 500px);
		transform: translateY(-50%);
	}

	.trinovik-method--dna
	.method-signal__track {
		left: 50%;
		right: auto;
		top: 0;
		bottom: 0;
		width: 1px;
		height: auto;
		transform: translateX(-50%);
		background: rgba(17, 18, 20, .16);
	}

	.trinovik-method--dna
	.method-signal__progress {
		left: 0;
		top: 0;
		width: 100%;
		height: 0%;
		background: #70308f;
		box-shadow: 0 0 22px rgba(112, 48, 143, .34);
		transition: background .5s ease;
	}

	.trinovik-method--dna
	.method-signal__node {
		left: 50%;
		width: 44px;
		height: 44px;
		background: #f0eee8;
		border-color: rgba(17, 18, 20, .2);
		color: var(--dna-dark);
	}

	.trinovik-method--dna
	.method-signal__node--01 {
		top: 0%;
	}

	.trinovik-method--dna
	.method-signal__node--02 {
		top: 50%;
	}

	.trinovik-method--dna
	.method-signal__node--03 {
		top: 100%;
	}

	.trinovik-method--dna[data-method-step="0"]
	.method-signal__node--01,
	.trinovik-method--dna[data-method-step="1"]
	.method-signal__node--02,
	.trinovik-method--dna[data-method-step="2"]
	.method-signal__node--03 {
		background: #70308f;
		border-color: #70308f;
		color: #ffffff;
		box-shadow: 0 0 0 5px rgba(112, 48, 143, .09),
			0 0 26px rgba(112, 48, 143, .22);
		transform: translate(-50%, -50%) scale(1.12);
	}

}

@media (min-width: 681px) and (max-height: 760px) {
	.trinovik-method--dna
	.method-panel {
		top: 52.5%;
	}

	.trinovik-method--dna
	.method-signal {
		height: min(50vh, 390px);
	}
}


/* ============================================================
   02 — OUR DNA / UNIFIED PRINCIPLE TYPOGRAPHY
   Visual-only refinement for Strategy / Creative Technology / Results.
   Scroll timing and state logic are unchanged.
   ============================================================ */

.trinovik-method--dna {
	--dna-principle-purple: #70308f;
	--dna-principle-pink: #e800df;
}

.trinovik-method--dna
.method-panel h3,
.trinovik-method--dna
.method-panel--creative-technology h3 {
	font-size:
		clamp(
			5rem,
			9.4vw,
			10.2rem
		);

	line-height: .8;
	letter-spacing: -.065em;
	font-weight: 500;
	font-style: normal;
	font-family: inherit;

	color: transparent;
	background:
		linear-gradient(
			100deg,
			var(--dna-principle-purple) 0%,
			#9a3bb2 48%,
			var(--dna-principle-pink) 100%
		);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Keep Creative Technology as one phrase, but give the two visual
   lines enough air to stop the letterforms touching. */
.trinovik-method--dna
.method-panel--creative-technology h3 span {
	display: block;
	margin-top: .16em;
	margin-left:
		clamp(
			34px,
			5vw,
			88px
		);
}

/*
 * The active panel is vertically centred as one unit. Reserve the height of
 * Creative Technology (two .8em lines plus its .16em line gap) for every
 * principle so the divider and supporting copy stay fixed while states swap.
 */
@media (min-width: 681px) and (prefers-reduced-motion: no-preference) {
	.trinovik-method--dna
	.method-panel h3 {
		position: relative;
		top: clamp(20px, 1.55vw, 28px);
		min-height: 1.76em;
	}

	/* Single-line principles sit lower within the two-line title reserve. */
	.trinovik-method--dna
	.method-panel--strategy h3,
	.trinovik-method--dna
	.method-panel--results h3 {
		transform: translateY(clamp(18px, 2vw, 34px));
	}

	/* Results has a taller support sentence; visually align its divider
	   with the Creative Technology reference state. */
	.trinovik-method--dna
	.method-panel--results
	.method-panel__secondary {
		transform: translateY(clamp(8px, .7vw, 12px));
	}
}

/* Preserve breathing room on shorter laptop screens while still keeping
   every principle title visibly lower than its previous position. */
@media (min-width: 681px) and (max-height: 760px) and (prefers-reduced-motion: no-preference) {
	.trinovik-method--dna
	.method-panel h3 {
		top: clamp(14px, 1.2vw, 20px);
	}
}

@media (max-width: 1000px) {
	.trinovik-method--dna
	.method-panel h3,
	.trinovik-method--dna
	.method-panel--creative-technology h3 {
		font-size:
			clamp(
				4.4rem,
				10.5vw,
				7.8rem
			);
	}
}

@media (max-width: 680px) {
	.trinovik-method--dna
	.method-panel h3,
	.trinovik-method--dna
	.method-panel--creative-technology h3 {
		font-size:
			clamp(
				3.6rem,
				17vw,
				5.2rem
			);
		line-height: .82;
	}

	.trinovik-method--dna
	.method-panel--creative-technology h3 span {
		margin-top: .14em;
		margin-left: 0;
	}
}

/* ============================================================
   03 — SERVICES / WEBSITE 2026
   Four approved capability pillars.
   ============================================================ */

.service-generator--2026 {
	/* Give every service story roughly 1.3 viewports of scroll time.
	   Responsive layouts still switch this section back to normal flow. */
	height: 620vh;
}


.service-generator--2026 .service-generator__sticky,
.service-generator--2026 .service-generator__signal-source,
.service-generator--2026 .service-generator__signal-output {
	background: var(--service-bg);
}


.service-generator--2026 .service-generator__sticky::before {
	background:
		radial-gradient(
			circle at 72% 48%,
			color-mix(
				in srgb,
				var(--service-accent) 20%,
				transparent
			),
			transparent 32%
		),
		radial-gradient(
			circle at 88% 76%,
			rgba(11, 131, 166, .12),
			transparent 30%
		),
		linear-gradient(
			135deg,
			#000435 0%,
			#000050 58%,
			#050526 100%
		);
}


/* ------------------------------------------------------------
   Intro copy
   ------------------------------------------------------------ */

.service-generator--2026 .service-generator__intro {
	top: clamp(125px, 14.5vh, 155px);
	max-width: min(680px, 50vw);
}


.service-generator--2026 .service-generator__intro > p:first-child {
	margin-bottom: 12px;
}


.service-generator--2026 .service-generator__intro h2 {
	margin: 0;

	max-width: 620px;

	font-size:
		clamp(
			1.85rem,
			2.6vw,
			2.9rem
		);

	line-height: 1;
	letter-spacing: -.045em;
	font-weight: 500;
	text-wrap: balance;
}


.service-generator--2026 .service-generator__intro-copy {
	max-width: 620px;
	margin: 14px 0 0 !important;

	font-size:
		clamp(
			14px,
			1vw,
			16px
		) !important;

	line-height: 1.5;
	letter-spacing: 0 !important;
	text-transform: none !important;

	color:
		rgba(255, 255, 255, .72) !important;
}


/* ------------------------------------------------------------
   Service copy
   ------------------------------------------------------------ */

.service-generator--2026 .service-output__copy {
	top: clamp(340px, 43vh, 420px);
	transform: none;
	max-width: min(57vw, 880px);
}


.service-generator--2026 .service-output__copy h3 {
	margin: 0;

	font-size:
		clamp(
			4.6rem,
			7.8vw,
			8.2rem
		);

	line-height: .78;
	letter-spacing: -.082em;
	font-weight: 500;
	text-transform: uppercase;
}


.service-generator--2026 .service-output__copy h3 span {
	display: block;

	color: var(--service-accent);
	font-style: italic;
	font-weight: 400;
}


.service-generator--2026 .service-output__copy h3,
.service-generator--2026 .service-output__detail,
.service-generator--2026 .service-output__tags {
	opacity: 0;
	transform: translateY(34px);

	transition:
		opacity .6s ease,
		transform .78s cubic-bezier(.2, .8, .2, 1);
}


.service-generator--2026 .service-output.is-active .service-output__copy h3,
.service-generator--2026 .service-output.is-active .service-output__detail,
.service-generator--2026 .service-output.is-active .service-output__tags {
	opacity: 1;
	transform: translateY(0);
}


.service-generator--2026 .service-output.is-active .service-output__detail {
	transition-delay: .08s;
}


.service-generator--2026 .service-output.is-active .service-output__tags {
	transition-delay: .14s;
}


.service-generator--2026 .service-output__detail {
	width: min(100%, 680px);
	margin-top: clamp(22px, 2.4vw, 34px);
}


.service-generator--2026 .service-output__headline {
	margin: 0;

	font-size:
		clamp(
			1.15rem,
			1.6vw,
			1.65rem
		);

	line-height: 1.08;
	letter-spacing: -.03em;
	font-weight: 500;
	text-wrap: balance;
}


.service-generator--2026 .service-output__description {
	width: min(100%, 640px);
	margin: 10px 0 0;

	font-size:
		clamp(
			14px,
			1vw,
			16px
		);

	line-height: 1.5;

	color:
		rgba(255, 255, 255, .62);
}


/* ------------------------------------------------------------
   Sub-service labels
   ------------------------------------------------------------ */

.service-generator--2026 .service-output__tags {
	width: min(100%, 760px);
	margin-top: clamp(20px, 2.4vw, 30px);
	padding: 0;
	list-style: none;
}


.service-generator--2026 .service-output__tags li {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	cursor: default;
	will-change: transform;

	padding: 8px 11px;

	border:
		1px solid
		rgba(255, 255, 255, .19);

	border-radius: 999px;

	font-size: 11px;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .1em;

	color:
		rgba(255, 255, 255, .62);

	transition:
		color .28s ease,
		border-color .28s ease,
		background-color .28s ease,
		box-shadow .34s ease,
		transform .34s cubic-bezier(.2, .8, .2, 1);
}


/* ------------------------------------------------------------
   Signal Charge — desktop service-tag interaction
   ------------------------------------------------------------ */

.service-generator--2026 .service-output__tags {
	pointer-events: auto;
}


.service-generator--2026 .service-output__tags li::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;

	background:
		linear-gradient(
			105deg,
			transparent 8%,
			color-mix(
				in srgb,
				var(--service-accent) 9%,
				transparent
			) 32%,
			color-mix(
				in srgb,
				var(--service-accent) 34%,
				transparent
			) 50%,
			color-mix(
				in srgb,
				var(--service-accent) 9%,
				transparent
			) 68%,
			transparent 92%
		);

	transform: translateX(-115%);
	opacity: 0;
	pointer-events: none;
}


.service-generator--2026 .service-output__tags li::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: -2px;
	left: 8px;

	width: 5px;
	height: 5px;
	border-radius: 50%;

	background: var(--service-accent);
	box-shadow:
		0 0 5px var(--service-accent),
		0 0 12px var(--service-accent);

	opacity: 0;
	pointer-events: none;
}


@media (hover: hover) and (pointer: fine) {

	.service-generator--2026 .service-output__tags li:hover {
		color: #fff;
		border-color: var(--service-accent);
		background:
			color-mix(
				in srgb,
				var(--service-accent) 12%,
				transparent
			);
		box-shadow:
			0 7px 24px
			color-mix(
				in srgb,
				var(--service-accent) 22%,
				transparent
			),
			inset 0 0 15px
			color-mix(
				in srgb,
				var(--service-accent) 8%,
				transparent
			);
		transform: translateY(-3px) scale(1.015);
	}


	.service-generator--2026 .service-output__tags li:hover::before {
		opacity: 1;
		animation:
			service-tag-signal-sweep
			1.05s cubic-bezier(.2, .75, .25, 1)
			both;
	}


	.service-generator--2026 .service-output__tags li:hover::after {
		opacity: 1;
		animation:
			service-tag-signal-node
			1.25s cubic-bezier(.35, 0, .2, 1)
			infinite alternate;
	}

}


@keyframes service-tag-signal-sweep {
	0% {
		transform: translateX(-115%);
	}

	100% {
		transform: translateX(115%);
	}
}


@keyframes service-tag-signal-node {
	0% {
		left: 8px;
	}

	100% {
		left: calc(100% - 13px);
	}
}


@media (prefers-reduced-motion: reduce) {

	.service-generator--2026 .service-output__tags li,
	.service-generator--2026 .service-output__tags li::before,
	.service-generator--2026 .service-output__tags li::after {
		animation: none !important;
		transition-duration: .01ms !important;
	}

}


/* ------------------------------------------------------------
   Keep service visuals supportive rather than dominant.
   ------------------------------------------------------------ */

.service-generator--2026 .service-visual {
	width: min(34vw, 500px);
	right: clamp(20px, 4vw, 70px);
	opacity: 0;
}


.service-generator--2026 .service-output.is-active .service-visual {
	opacity: .78;
}


/* ------------------------------------------------------------
   Desktop title fit
   Give each service name enough room without allowing long words
   to collide with the intro or the visual on the right.
   ------------------------------------------------------------ */

@media (min-width: 681px) {

	.service-generator--2026
	.service-output--creative-technology
	.service-output__copy h3 {
		font-size: clamp(4.35rem, 7.15vw, 7.6rem);
	}

	.service-generator--2026
	.service-output--growth
	.service-output__copy h3 {
		font-size: clamp(4.25rem, 6.9vw, 7.35rem);
	}

}


/* ------------------------------------------------------------
   Short desktop/laptop viewports
   Preserve the same scroll-state transition while compressing only
   the static typography/layout geometry.
   ------------------------------------------------------------ */

@media (min-width: 681px) and (max-height: 820px) {

	.service-generator--2026 .service-generator__intro {
		top: clamp(105px, 14vh, 122px);
		max-width: min(620px, 50vw);
	}

	.service-generator--2026 .service-generator__intro h2 {
		font-size: clamp(1.7rem, 2.45vw, 2.45rem);
	}

	.service-generator--2026 .service-generator__intro-copy {
		max-width: 570px;
		margin-top: 10px !important;
		font-size: 13px !important;
		line-height: 1.45;
	}

	.service-generator--2026 .service-output__copy {
		top: clamp(285px, 41.5vh, 330px);
		max-width: min(58vw, 820px);
	}

	.service-generator--2026 .service-output__copy h3 {
		font-size: clamp(3.9rem, 6.5vw, 6.45rem);
	}

	.service-generator--2026
	.service-output--creative-technology
	.service-output__copy h3,
	.service-generator--2026
	.service-output--growth
	.service-output__copy h3 {
		font-size: clamp(3.7rem, 6vw, 5.9rem);
	}

	.service-generator--2026 .service-output__detail {
		margin-top: 16px;
	}

	.service-generator--2026 .service-output__headline {
		font-size: clamp(1.05rem, 1.45vw, 1.35rem);
	}

	.service-generator--2026 .service-output__description {
		font-size: 13px;
		line-height: 1.45;
	}

	.service-generator--2026 .service-output__tags {
		margin-top: 14px;
		gap: 6px;
	}

	.service-generator--2026 .service-output__tags li {
		padding: 6px 9px;
		font-size: 10px;
	}

	.service-generator--2026 .service-visual {
		width: min(31vw, 410px);
	}

}


/* ============================================================
   SERVICES — TABLET
   ============================================================ */

@media (max-width: 1000px) {

	.service-generator--2026 .service-generator__intro {
		max-width: 56vw;
	}


	.service-generator--2026 .service-output__copy {
		max-width: 68vw;
	}


	.service-generator--2026 .service-output__copy h3 {
		font-size:
			clamp(
				4.2rem,
				10vw,
				7rem
			);
	}


	.service-generator--2026 .service-visual {
		width: min(38vw, 420px);
		opacity: .48;
	}

}


/* ============================================================
   SERVICES — MOBILE
   ============================================================ */

@media (max-width: 680px) {

	.service-generator--2026 {
		height: auto;
	}


	.service-generator--2026 .service-generator__intro {
		max-width: none;
	}


	.service-generator--2026 .service-generator__intro h2 {
		font-size:
			clamp(
				2rem,
				9vw,
				3rem
			);
	}


	.service-generator--2026 .service-generator__intro-copy {
		max-width: 430px;
		font-size: 13px !important;
	}


	.service-generator--2026 .service-output {
		min-height: auto;
		padding-bottom: 35px;
	}


	.service-generator--2026 .service-output__copy {
		max-width: none;
	}


	.service-generator--2026 .service-output__copy h3,
	.service-generator--2026 .service-output__detail,
	.service-generator--2026 .service-output__tags {
		opacity: 1;
		transform: none;
	}


	.service-generator--2026 .service-output__copy h3 {
		font-size:
			clamp(
				3.4rem,
				15vw,
				5rem
			);
	}


	.service-generator--2026 .service-output__headline {
		font-size:
			clamp(
				1.4rem,
				6.5vw,
				2rem
			);
	}


	.service-generator--2026 .service-output__description {
		font-size: 13px;
	}


	.service-generator--2026 .service-output__tags {
		gap: 7px;
	}


	.service-generator--2026 .service-output__tags li {
		font-size: 11px;
		padding: 8px 10px;
	}


	.service-generator--2026 .service-visual {
		width: min(100%, 360px);
		margin-top: 42px;
		opacity: .82;
	}

}


/* ============================================================
   SERVICES — REDUCED MOTION
   All essential service copy remains visible without scroll-lock.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

	.service-generator--2026 {
		height: auto;
		padding:
			110px
			var(--page-padding)
			90px;
	}


	.service-generator--2026 .service-generator__sticky {
		position: relative;
		top: auto;
		height: auto;
		overflow: visible;
		padding: 0;
	}


	.service-generator--2026 .service-generator__intro {
		position: relative;
		inset: auto;
		max-width: 680px;
		margin: 60px 0 80px;
	}


	.service-generator--2026 .service-generator__signal {
		display: none;
	}


	.service-generator--2026 .service-generator__stage {
		position: relative;
		inset: auto;
		display: flex;
		flex-direction: column;
		gap: 110px;
	}


	.service-generator--2026 .service-output {
		position: relative;
		inset: auto;
		min-height: 620px;
		opacity: 1;
		visibility: visible;
	}


	.service-generator--2026 .service-output__copy {
		position: relative;
		inset: auto;
		transform: none;
		max-width: 760px;
	}


	.service-generator--2026 .service-output__copy h3,
	.service-generator--2026 .service-output__detail,
	.service-generator--2026 .service-output__tags {
		opacity: 1;
		transform: none;
		transition: none;
	}


	.service-generator--2026 .service-visual {
		position: relative;
		inset: auto;
		width: min(100%, 460px);
		margin: 50px auto 0;
		transform: none;
		opacity: .72;
	}


	.service-generator--2026 .service-generator__bottom {
		position: relative;
		inset: auto;
		margin-top: 90px;
	}


	.service-generator--2026 .service-generator__scroll {
		display: none;
	}

}

/* ============================================================
   04 — SELECTED WORK / 2026 CONTENT LAYER
   Approved section introduction + semantic H3 project titles.
   ============================================================ */

.work-intro-2026 {
	position: relative;
	min-height: clamp(520px, 70svh, 760px);
	padding:
		clamp(120px, 15vh, 170px)
		var(--page-padding)
		clamp(90px, 12vh, 135px);
	/* Creative Director palette: #70308f is the dominant Selected Work field. */
	background:
		linear-gradient(
			120deg,
			rgba(0, 0, 0, .06) 0%,
			rgba(0, 0, 0, .30) 56%,
			rgba(0, 0, 0, .62) 100%
		),
		#70308f;
	color: #f6f3fa;
	overflow: hidden;
}

.work-intro-2026::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			circle at 78% 27%,
			rgba(91, 116, 184, .46),
			transparent 35%
		),
		radial-gradient(
			circle at 16% 82%,
			rgba(112, 48, 143, .30),
			transparent 38%
		);
	pointer-events: none;
}

.work-intro-2026__inner {
	position: relative;
	z-index: 1;
	width: min(100%, var(--container));
	margin: 0 auto;
}

.work-intro-2026__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: clamp(55px, 9vh, 100px);
}

.work-intro-2026__meta span {
	font-size: 8px;
	line-height: 1;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(246, 243, 250, .48);
}

.work-intro-2026__content {
	width: min(100%, 1120px);
	padding-top: clamp(55px, 9vh, 100px);
}

.work-intro-2026__content h2 {
	max-width: 1000px;
	margin: 0;
	padding-bottom: .12em;
	font-size: clamp(3.8rem, 7.2vw, 8.3rem);
	font-weight: 400;
	line-height: .98;
	letter-spacing: -.065em;
	text-wrap: balance;
}

/* Preserve the V4 masked word reveal while giving descenders such as
   the "g" in "something" enough room inside the clipping box. */
.work-intro-2026__content h2.v4-reveal-ready {
	padding-bottom: .12em;
}

.work-intro-2026__content p {
	max-width: 710px;
	margin:
		clamp(30px, 4vw, 52px)
		0
		0;
	font-size: clamp(15px, 1.2vw, 19px);
	line-height: 1.55;
	color: rgba(246, 243, 250, .76);
}

.work-intro-2026__cta {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	margin-top: clamp(28px, 4vw, 44px);
	padding: 13px 19px;
	border: 1px solid rgba(246, 243, 250, .28);
	border-radius: 999px;
	font-size: 12px;
	line-height: 1;
	color: #f6f3fa;
	text-decoration: none;
	transition:
		background-color .25s ease,
		color .25s ease,
		border-color .25s ease,
		transform .25s ease;
}

.work-intro-2026__cta:hover {
	background: #f6f3fa;
	border-color: #f6f3fa;
	color: #111214;
	transform: translateY(-2px);
}

/* Project titles are H3 semantically, while retaining the existing cinematic treatment. */
.cinema-project__copy h3 {
	max-width: min(62vw, 920px);
	margin: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: clamp(3.4rem, 5.6vw, 6.8rem);
	font-weight: 300;
	line-height: .88;
	letter-spacing: -.055em;
	text-transform: uppercase;
}

.cinema-project__copy h3 span {
	display: inline-block;
	margin-right: .16em;
	opacity: 0;
	transform: translateY(55px);
	transition:
		opacity .7s ease,
		transform .9s cubic-bezier(.2,.8,.2,1);
}

.cinema-project__copy h3 span:last-child {
	margin-right: 0;
}

.cinema-project.is-active .cinema-project__copy h3 span {
	opacity: 1;
	transform: translateY(0);
}

.cinema-project.is-active .cinema-project__copy h3 span:nth-child(1) {
	transition-delay: .08s;
}

.cinema-project.is-active .cinema-project__copy h3 span:nth-child(2) {
	transition-delay: .14s;
}

.cinema-project.is-active .cinema-project__copy h3 span:nth-child(3) {
	transition-delay: .20s;
}

.cinema-project.is-active .cinema-project__copy h3 span:nth-child(4) {
	transition-delay: .26s;
}

@media (max-width: 1100px) {
	.cinema-project__copy h3 {
		max-width: min(70vw, 760px);
		font-size: clamp(3rem, 7vw, 5.2rem);
		line-height: .89;
	}
}

@media (max-width: 680px) {
	.work-intro-2026 {
		min-height: auto;
		padding:
			105px
			var(--page-padding)
			85px;
	}

	.work-intro-2026__content {
		padding-top: 48px;
	}

	.work-intro-2026__content h2 {
		font-size: clamp(2.8rem, 13vw, 4.5rem);
		line-height: 1;
	}

	.work-intro-2026__content p {
		font-size: 14px;
	}

	.cinema-project__copy h3 {
		max-width: 100%;
		font-size: clamp(2.4rem, 11vw, 4.4rem);
		font-weight: 300;
		line-height: .9;
		letter-spacing: -.045em;
	}

	.cinema-project__copy h3 span {
		margin-right: .14em;
		opacity: 1;
		transform: none;
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.work-intro-2026__cta,
	.cinema-project__copy h3 span {
		transition: none;
	}

	.cinema-project__copy h3 span {
		opacity: 1;
		transform: none;
	}
}
/* ============================================================
   05 — SELECTED CLIENTS / 2026
   Boss-approved copy + simple verified client logo wall.
   One DOM instance per client; movement is handled in home-2026.js.
   ============================================================ */

.client-marquee--2026 {
	--client-gap: clamp(10px, 1vw, 16px);
	--client-card-radius: clamp(18px, 1.6vw, 26px);
	padding:
		clamp(58px, 6vw, 82px)
		0
		clamp(58px, 6vw, 82px);
	background: #eeeae3;
	color: #111214;
}

.client-marquee--2026 .client-marquee__top--compact {
	justify-content: flex-end;
	padding-bottom: 12px;
}


.client-marquee--2026 .client-marquee__intro--2026 {
	width: min(100%, 980px);
	margin:
		clamp(28px, 3.5vw, 46px)
		auto
		0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(20px, 2.2vw, 30px);
	text-align: center;
}

.client-marquee--2026 .client-marquee__intro--2026 h2 {
	max-width: 900px;
	margin: 0;
	font-size: clamp(3.4rem, 6vw, 6.8rem);
	line-height: .9;
	letter-spacing: -.058em;
	text-transform: none;
	font-weight: 450;
	text-wrap: balance;
}

.client-marquee--2026 .client-marquee__intro--2026 > p {
	max-width: 720px;
	margin: 0;
	font-size: clamp(15px, 1.25vw, 19px);
	line-height: 1.55;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(17, 18, 20, .62);
	text-wrap: balance;
}

.client-marquee--2026 .client-marquee__rows--2026 {
	margin-top: clamp(68px, 8vw, 110px);
	gap: var(--client-gap);
}

.client-marquee--2026 .client-marquee__row {
	padding: 3px 0 10px;
	-webkit-mask-image:
		linear-gradient(
			90deg,
			transparent 0,
			#000 3.5%,
			#000 96.5%,
			transparent 100%
		);
	mask-image:
		linear-gradient(
			90deg,
			transparent 0,
			#000 3.5%,
			#000 96.5%,
			transparent 100%
		);
}

/* CSS animation is intentionally disabled here. The 2026 controller
 * continuously recycles the unique cards instead of duplicating logos. */
.client-marquee--2026 .client-marquee__track,
.client-marquee--2026 .client-marquee__row--reverse .client-marquee__track {
	animation: none !important;
	transform: translate3d(0, 0, 0);
	gap: 0;
	will-change: transform;
}

.client-marquee--2026 .client-marquee__group {
	gap: var(--client-gap);
}

.client-marquee--2026 .client-marquee__card {
	flex: 0 0 clamp(245px, 18vw, 340px);
	height: clamp(145px, 11vw, 190px);
	padding: clamp(18px, 1.7vw, 26px);
	border: 1px solid rgba(17, 18, 20, .09);
	border-radius: var(--client-card-radius);
	background: rgba(255, 255, 255, .8);
	box-shadow: 0 12px 34px rgba(31, 24, 45, .035);
	transform: none;
}

.client-marquee--2026 .client-marquee__card::before {
	display: none;
}

.client-marquee--2026 .client-marquee__card:hover {
	transform: translateY(-4px);
	background: rgba(255, 255, 255, .96);
	border-color: rgba(112, 48, 143, .18);
	box-shadow: 0 20px 48px rgba(31, 24, 45, .07);
}

.client-marquee--2026 .client-marquee__logo img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: none !important;
	-webkit-filter: none !important;
	opacity: 1 !important;
	mix-blend-mode: normal;
	transform: scale(1.6);
	transform-origin: center;
}

.client-marquee--2026 .client-marquee__card:hover .client-marquee__logo img {
	filter: none !important;
	-webkit-filter: none !important;
	opacity: 1;
	transform: scale(1.66);
}


@media (max-width: 1000px) {
	.client-marquee--2026 .client-marquee__intro--2026 h2 {
		font-size: clamp(3.1rem, 8vw, 5.4rem);
	}

	.client-marquee--2026 .client-marquee__card {
		flex-basis: clamp(225px, 29vw, 290px);
		height: clamp(138px, 18vw, 172px);
	}
}

@media (max-width: 680px) {
	.client-marquee--2026 {
		padding: 54px 0 58px;
	}

	.client-marquee--2026 .client-marquee__intro--2026 {
		margin-top: 28px;
		gap: 18px;
		padding-inline: 4px;
	}

	.client-marquee--2026 .client-marquee__intro--2026 h2 {
		font-size: clamp(2.65rem, 12vw, 4rem);
		line-height: .92;
	}

	.client-marquee--2026 .client-marquee__intro--2026 > p {
		font-size: 14px;
		line-height: 1.5;
	}

	.client-marquee--2026 .client-marquee__rows--2026 {
		margin-top: 56px;
	}

	.client-marquee--2026 .client-marquee__card {
		flex-basis: 205px;
		height: 128px;
		padding: 14px;
	}

	.client-marquee--2026 .client-marquee__logo img {
	max-width: 100%;
	max-height: 100%;
    }

}

@media (prefers-reduced-motion: reduce) {
	.client-marquee--2026 .client-marquee__row {
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.client-marquee--2026 .client-marquee__row::-webkit-scrollbar {
		display: none;
	}

	.client-marquee--2026 .client-marquee__track {
		transform: none !important;
		will-change: auto;
	}

	.client-marquee--2026 .client-marquee__card,
	.client-marquee--2026 .client-marquee__logo img {
		transition: none;
	}
}

/* ============================================================
   06 — WHY TRINOVIK LABS / 2026
   Trinovik logo constellation with three connected outcome points.
   ============================================================ */

.why-trinovik-2026 {
	position: relative;
	padding:
		clamp(110px, 12vw, 170px)
		var(--page-padding)
		clamp(105px, 12vw, 165px);
	background:
		radial-gradient(
			circle at 84% 18%,
			rgba(112, 48, 143, .40),
			transparent 39%
		),
		radial-gradient(
			circle at 68% 52%,
			rgba(33, 146, 208, .15),
			transparent 34%
		),
		radial-gradient(
			circle at 16% 86%,
			rgba(91, 116, 184, .17),
			transparent 40%
		),
		linear-gradient(
			112deg,
			#060722 0%,
			#090a28 42%,
			#160b2d 72%,
			#250e3c 100%
		);
	color: #f7f4fb;
	overflow: hidden;
}

.why-trinovik-2026::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: linear-gradient(to bottom, rgba(0,0,0,.76), transparent 96%);
}

.why-trinovik-2026__inner {
	position: relative;
	z-index: 1;
	width: min(100%, var(--container));
	margin: 0 auto;
}

.why-trinovik-2026__layout {
	display: grid;
	grid-template-columns: minmax(0, .78fr) minmax(560px, 1.22fr);
	align-items: center;
	gap: clamp(50px, 5vw, 90px);
}

.why-trinovik-2026__copy {
	position: relative;
	z-index: 5;
}

.why-trinovik-2026__eyebrow {
	margin: 0 0 24px;
	font-size: 10px;
	line-height: 1.2;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(247,244,251,.48);
}

.why-trinovik-2026__copy h2 {
	max-width: 760px;
	margin: 0;
	font-size: clamp(3.35rem, 5.25vw, 6.3rem);
	font-weight: 430;
	line-height: .9;
	letter-spacing: -.06em;
	text-wrap: balance;
}

.why-trinovik-2026__copy h2 span {
	display: block;
	margin-top: .08em;
	color: #c2deaa;
	font-style: italic;
	font-weight: 360;
}

.why-trinovik-2026__description {
	max-width: 650px;
	margin: clamp(30px, 3.5vw, 48px) 0 0;
	font-size: clamp(15px, 1.15vw, 18px);
	line-height: 1.62;
	color: rgba(247,244,251,.66);
}

/* ------------------------------------------------------------
   Constellation system
   ------------------------------------------------------------ */

.why-trinovik-2026__system {
	position: relative;
	min-height: clamp(560px, 47vw, 700px);
	isolation: isolate;
}

.why-trinovik-2026__system::before {
	content: "";
	position: absolute;
	left: 53%;
	top: 50%;
	width: clamp(360px, 42vw, 650px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background:
		radial-gradient(circle, rgba(112,48,143,.26) 0%, rgba(33,146,208,.10) 36%, transparent 69%);
	filter: blur(18px);
	pointer-events: none;
	z-index: -1;
}

.why-trinovik-2026__orbit-field {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.why-trinovik-2026__ring {
	position: absolute;
	left: 53%;
	top: 50%;
	translate: -50% -50%;
	border-radius: 50%;
	border: 1px solid rgba(115,105,255,.22);
	box-shadow: inset 0 0 30px rgba(112,48,143,.035);
}

.why-trinovik-2026__ring--outer {
	width: 96%;
	height: 76%;
	border-color: rgba(91,116,184,.28);
}

.why-trinovik-2026__ring--mid {
	width: 73%;
	height: 66%;
	border-style: dashed;
	border-color: rgba(112,48,143,.30);
	animation: why-trinovik-ring-drift 28s linear infinite;
}

.why-trinovik-2026__ring--inner {
	width: 51%;
	height: 48%;
	border-color: rgba(33,146,208,.23);
	animation: why-trinovik-ring-drift-reverse 22s linear infinite;
}

.why-trinovik-2026__spark {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #c7a7ff;
	box-shadow:
		0 0 8px rgba(199,167,255,.95),
		0 0 22px rgba(112,48,143,.70);
	animation: why-trinovik-spark 2.8s ease-in-out infinite;
}

.why-trinovik-2026__spark--1 { left: 19%; top: 24%; }
.why-trinovik-2026__spark--2 { right: 9%; top: 41%; animation-delay: .7s; background: #e800df; }
.why-trinovik-2026__spark--3 { left: 37%; bottom: 13%; animation-delay: 1.3s; background: #2192d0; }
.why-trinovik-2026__spark--4 { right: 17%; bottom: 21%; animation-delay: 1.9s; }

.why-trinovik-2026__connections {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow: visible;
	pointer-events: none;
}

.why-trinovik-2026__connections path {
	fill: none;
	stroke: rgba(91,116,184,.54);
	stroke-width: 1.15;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	filter: drop-shadow(0 0 3px rgba(33,146,208,.24));
	transition:
		stroke-dashoffset 1.15s cubic-bezier(.2,.75,.2,1),
		stroke .45s ease;
}

.why-trinovik-2026.is-active .why-trinovik-2026__connections path {
	stroke-dashoffset: 0;
}

.why-trinovik-2026__connections path:nth-child(2) { transition-delay: .08s; }
.why-trinovik-2026__connections path:nth-child(3) { transition-delay: .16s; }

/* ------------------------------------------------------------
   Core Trinovik mark
   ------------------------------------------------------------ */

.why-trinovik-2026__core {
	position: absolute;
	left: 53%;
	top: 50%;
	z-index: 4;
	width: clamp(180px, 18vw, 270px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%) scale(.72) rotate(-5deg);
	display: grid;
	place-items: center;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 50%;
	background:
		radial-gradient(circle at 35% 27%, rgba(255,255,255,.09), transparent 18%),
		radial-gradient(circle, rgba(25,17,71,.86) 0%, rgba(10,10,38,.56) 60%, rgba(10,10,38,.18) 100%);
	box-shadow:
		0 0 0 18px rgba(33,146,208,.025),
		0 0 55px rgba(33,146,208,.20),
		0 0 110px rgba(112,48,143,.22);
	opacity: 0;
	transition:
		transform .85s cubic-bezier(.2,.78,.2,1),
		opacity .55s ease;
}

.why-trinovik-2026__core::before,
.why-trinovik-2026__core::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.why-trinovik-2026__core::before {
	inset: -16%;
	border: 1px solid rgba(112,48,143,.16);
}

.why-trinovik-2026__core::after {
	inset: -31%;
	border: 1px dashed rgba(91,116,184,.14);
}

.why-trinovik-2026__core-halo {
	position: absolute;
	inset: 11%;
	border-radius: 50%;
	background:
		radial-gradient(circle, rgba(232,0,223,.15), rgba(33,146,208,.06) 48%, transparent 72%);
	filter: blur(14px);
	animation: why-trinovik-core-pulse 4.8s ease-in-out infinite;
}

.why-trinovik-2026__core img {
	position: relative;
	z-index: 2;
	width: 68%;
	height: auto;
	display: block;
	filter:
		drop-shadow(0 0 16px rgba(91,116,184,.36))
		drop-shadow(0 0 28px rgba(232,0,223,.16));
}

.why-trinovik-2026.is-active .why-trinovik-2026__core {
	transform: translate(-50%, -50%) scale(1) rotate(0deg);
	opacity: 1;
}

/* ------------------------------------------------------------
   Discipline nodes
   ------------------------------------------------------------ */

.why-trinovik-2026__discipline {
	--node-rgb: 112, 48, 143;
	position: absolute;
	z-index: 5;
	width: clamp(230px, 19vw, 300px);
	min-height: 126px;
	padding: 18px 20px;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	border: 1px solid rgba(var(--node-rgb), .40);
	border-radius: 22px;
	background:
		linear-gradient(120deg, rgba(11,10,30,.82), rgba(25,12,45,.66));
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow:
		0 12px 34px rgba(0,0,0,.14),
		0 0 22px rgba(var(--node-rgb), .06);
	opacity: 0;
	transition:
		transform .9s cubic-bezier(.2,.78,.2,1),
		opacity .55s ease,
		border-color .35s ease,
		background .35s ease,
		box-shadow .35s ease;
}

.why-trinovik-2026__discipline::before {
	content: "";
	position: absolute;
	left: -5px;
	top: 50%;
	width: 8px;
	height: 8px;
	translate: 0 -50%;
	border-radius: 50%;
	background: rgb(var(--node-rgb));
	box-shadow:
		0 0 8px rgba(var(--node-rgb), .95),
		0 0 20px rgba(var(--node-rgb), .62);
}

.why-trinovik-2026__discipline span {
	flex: 0 0 auto;
	padding-top: 3px;
	font-size: 8px;
	letter-spacing: .12em;
	color: rgba(var(--node-rgb), .88);
}

.why-trinovik-2026__discipline-copy {
	display: grid;
	gap: 10px;
	min-width: 0;
}

.why-trinovik-2026__discipline h3 {
	margin: 0;
	font-size: clamp(12px, .95vw, 15px);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: .045em;
}

.why-trinovik-2026__discipline p {
	margin: 0;
	font-size: clamp(11px, .77vw, 13px);
	line-height: 1.45;
	color: rgba(247,244,251,.62);
}

.why-trinovik-2026__discipline--beyond {
	--node-rgb: 194, 222, 170;
	left: 2%;
	top: 5%;
	transform: translate(-52px, -32px);
}

.why-trinovik-2026__discipline--connect {
	--node-rgb: 232, 0, 223;
	right: -1%;
	top: 15%;
	transform: translate(64px, -30px);
}

.why-trinovik-2026__discipline--outcome {
	--node-rgb: 33, 146, 208;
	left: 5%;
	bottom: 3%;
	transform: translate(-42px, 44px);
}

.why-trinovik-2026.is-active .why-trinovik-2026__discipline {
	transform: translate(0, 0);
	opacity: 1;
}

.why-trinovik-2026.is-active .why-trinovik-2026__discipline--connect { transition-delay: .12s; }
.why-trinovik-2026.is-active .why-trinovik-2026__discipline--outcome { transition-delay: .24s; }

.why-trinovik-2026.is-active .why-trinovik-2026__discipline--beyond { animation: why-trinovik-node-float 7.1s ease-in-out 1.0s infinite; }
.why-trinovik-2026.is-active .why-trinovik-2026__discipline--connect { animation: why-trinovik-node-float 6.6s ease-in-out 1.3s infinite reverse; }
.why-trinovik-2026.is-active .why-trinovik-2026__discipline--outcome { animation: why-trinovik-node-float 7.4s ease-in-out 1.6s infinite; }

.why-trinovik-2026__discipline:hover {
	border-color: rgba(var(--node-rgb), .82);
	background: rgba(var(--node-rgb), .12);
	box-shadow:
		0 15px 40px rgba(0,0,0,.18),
		0 0 28px rgba(var(--node-rgb), .20);
}

@keyframes why-trinovik-ring-drift {
	from { rotate: 0deg; }
	to { rotate: 360deg; }
}

@keyframes why-trinovik-ring-drift-reverse {
	from { rotate: 0deg; }
	to { rotate: -360deg; }
}

@keyframes why-trinovik-spark {
	0%, 100% { opacity: .30; scale: .72; }
	50% { opacity: 1; scale: 1.18; }
}

@keyframes why-trinovik-core-pulse {
	0%, 100% { opacity: .60; scale: .94; }
	50% { opacity: 1; scale: 1.06; }
}

@keyframes why-trinovik-node-float {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -8px; }
}

@media (max-width: 1100px) {
	.why-trinovik-2026__layout {
		grid-template-columns: 1fr;
		gap: 58px;
	}

	.why-trinovik-2026__copy {
		max-width: 850px;
	}

	.why-trinovik-2026__system {
		width: min(100%, 860px);
		margin: 0 auto;
		min-height: 590px;
	}
}

@media (max-width: 680px) {
	.why-trinovik-2026 {
		padding:
			88px
			var(--page-padding)
			92px;
	}

	.why-trinovik-2026__copy h2 {
		font-size: clamp(2.8rem, 12vw, 4.25rem);
		line-height: .92;
	}

	.why-trinovik-2026__description {
		font-size: 14px;
		line-height: 1.55;
	}

	.why-trinovik-2026__system {
		display: grid;
		gap: 12px;
		min-height: 0;
		margin-top: 18px;
		padding-top: 270px;
	}

	.why-trinovik-2026__connections {
		display: none;
	}

	.why-trinovik-2026__orbit-field {
		inset: 0 0 auto;
		height: 250px;
	}

	.why-trinovik-2026__system::before {
		left: 50%;
		top: 125px;
		width: 300px;
	}

	.why-trinovik-2026__ring--outer {
		width: 105%;
		height: 70%;
	}

	.why-trinovik-2026__ring--mid {
		width: 80%;
		height: 59%;
	}

	.why-trinovik-2026__ring--inner {
		width: 58%;
		height: 45%;
	}

	.why-trinovik-2026__core {
		width: 138px;
		left: 50%;
		top: 125px;
	}

	.why-trinovik-2026__discipline {
		position: relative;
		inset: auto;
		width: 100%;
		min-height: 0;
		padding: 17px 18px;
		gap: 12px;
		border-radius: 18px;
	}

	.why-trinovik-2026__discipline h3 {
		font-size: 12px;
	}

	.why-trinovik-2026__discipline p {
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.why-trinovik-2026__connections path {
		stroke-dashoffset: 0;
		transition: none;
	}

	.why-trinovik-2026__core,
	.why-trinovik-2026__discipline {
		opacity: 1;
		transition: none;
		animation: none !important;
	}

	.why-trinovik-2026__core {
		transform: translate(-50%, -50%) scale(1);
	}

	.why-trinovik-2026__discipline {
		transform: translate(0, 0);
	}

	.why-trinovik-2026__ring,
	.why-trinovik-2026__spark,
	.why-trinovik-2026__core-halo {
		animation: none !important;
	}
}


/* ============================================================
   07 — INSIGHTS / 2026 CONTENT LAYER
   Boss-approved copy with the existing full-screen story system.
   No fabricated article or performance claims are introduced.
   ============================================================ */

.insight-scroll--2026 {
	--insight-accent: #70308f;
}

.insight-scroll--2026 .insight-scroll__signal-progress {
	stroke: var(--insight-accent);
}

.insight-scroll--2026 .insight-scroll__glow {
	background:
		radial-gradient(
			circle,
			rgba(112, 48, 143, .16),
			transparent 67%
		);
}

.insight-scroll--2026 .insight-scene--intro h2 {
	font-size:
		clamp(
			4.2rem,
			8.3vw,
			9.3rem
		);

	line-height: .79;
	letter-spacing: -.075em;
}

.insight-scroll--2026
.insight-scene--intro
h2 span:nth-child(2) {
	margin-left:
		clamp(
			20px,
			5vw,
			78px
		);
}

.insight-scroll--2026 .insight-scene__accent {
	margin-left:
		clamp(
			42px,
			10vw,
			165px
		) !important;

	color: #70308f;
}

.insight-scroll--2026 .insight-scene__intro-copy {
	max-width: 560px;
	font-size: clamp(1rem, 1.3vw, 1.22rem);
}


/* ------------------------------------------------------------
   Scene 02 — approved topic categories
   ------------------------------------------------------------ */

.insight-scroll--2026 .knowledge-signal--2026 {
	min-height:
		clamp(
			500px,
			58vh,
			650px
		);
}

.insight-scroll--2026
.knowledge-signal--2026
.knowledge-signal__word strong {
	font-size:
		clamp(
			1.9rem,
			3.2vw,
			3.7rem
		);

	line-height: .9;
}

.insight-scroll--2026
.knowledge-signal--2026
.knowledge-signal__word--01 {
	left: 0;
	top: 20%;
}

.insight-scroll--2026
.knowledge-signal--2026
.knowledge-signal__word--02 {
	left: 22%;
	top: 61%;
	transform: none;
	text-align: left;
}

.insight-scroll--2026
.knowledge-signal--2026
.knowledge-signal__word--03 {
	left: 50%;
	top: 7%;
	right: auto;
	bottom: auto;
	transform: translateX(-50%);
	text-align: center;
}

.insight-scroll--2026
.knowledge-signal--2026
.knowledge-signal__word--04 {
	left: auto;
	right: 22%;
	top: 62%;
	bottom: auto;
	text-align: right;
}

.insight-scroll--2026
.knowledge-signal--2026
.knowledge-signal__word--05 {
	left: auto;
	right: 0;
	top: 22%;
	bottom: auto;
	text-align: right;
}

.insight-scroll--2026
.knowledge-signal--2026
.knowledge-signal__core {
	top: 57%;
	width: clamp(135px, 13vw, 195px);
}

.insight-scroll--2026
.knowledge-signal--2026
.knowledge-signal__core-ring {
	border-color: rgba(112, 48, 143, .28);
}

.insight-scroll--2026
.knowledge-signal--2026
.knowledge-signal__core-ring::before {
	background: #70308f;
	box-shadow: 0 0 25px rgba(112, 48, 143, .45);
}

.insight-scroll--2026
.knowledge-signal__copy {
	max-width: 570px;
}


/* ------------------------------------------------------------
   Scene 03 — Insights gateway, not a fabricated article
   ------------------------------------------------------------ */

.insight-scroll--2026 .insight-article--gateway-2026 {
	grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
}

.insight-scroll--2026
.insight-article--gateway-2026
.insight-article__visual {
	background:
		radial-gradient(
			circle at 62% 38%,
			rgba(33, 146, 208, .24),
			transparent 23%
		),
		linear-gradient(
			145deg,
			#15111c,
			#3f2450 48%,
			#0b0a0e
		);
}

.insight-scroll--2026
.insight-article--gateway-2026
.insight-article__core {
	background:
		radial-gradient(
			circle at 32% 27%,
			#fff,
			transparent 9%
		),
		linear-gradient(
			145deg,
			#dcd6f4,
			#5b74b8 38%,
			#70308f 68%,
			#0b0a0e
		);
}

.insight-scroll--2026
.insight-article--gateway-2026
.insight-article__main p {
	max-width: 520px;
	margin: 28px 0 0;
	font-size: clamp(.95rem, 1.1vw, 1.1rem);
	line-height: 1.6;
	color: rgba(245, 241, 250, .62);
}

.insight-scroll--2026
.insight-article--gateway-2026
.insight-article__bottom {
	gap: 24px;
}

.insight-scroll--2026
.insight-article--gateway-2026
.insight-article__bottom > span:first-child {
	max-width: 58%;
	line-height: 1.5;
}

.insight-scroll--2026 .insight-article__link {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: #f5f1fa;
	text-decoration: none;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .12em;
}

.insight-scroll--2026
.insight-article__link
.insight-article__arrow {
	transition:
		transform .25s ease,
		background-color .25s ease,
		color .25s ease;
}

.insight-scroll--2026
.insight-article__link:hover
.insight-article__arrow,
.insight-scroll--2026
.insight-article__link:focus-visible
.insight-article__arrow {
	transform: translate(2px, -2px);
	background: #f5f1fa;
	color: #111214;
}


/* ------------------------------------------------------------
   Tablet
   ------------------------------------------------------------ */

@media (max-width: 1000px) {

	.insight-scroll--2026 .insight-scene--intro h2 {
		font-size:
			clamp(
				4.1rem,
				10.5vw,
				7.3rem
			);
	}

	.insight-scroll--2026
	.insight-article--gateway-2026 {
		grid-template-columns: 1fr 1fr;
	}

}


/* ------------------------------------------------------------
   Mobile — all approved content remains in normal document flow.
   ------------------------------------------------------------ */

@media (max-width: 680px) {

	.insight-scroll--2026 .insight-scene--intro h2 {
		font-size:
			clamp(
				3.15rem,
				14.3vw,
				4.65rem
			);

		line-height: .86;
	}

	.insight-scroll--2026
	.insight-scene--intro
	h2 span:nth-child(2),
	.insight-scroll--2026
	.insight-scene__accent {
		margin-left: 0 !important;
	}

	.insight-scroll--2026 .insight-scene__small span:last-child {
		max-width: 280px;
		line-height: 1.5;
	}

	.insight-scroll--2026 .knowledge-signal--2026 {
		min-height: auto;
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
	}

	.insight-scroll--2026 .knowledge-signal--2026::before,
	.insight-scroll--2026
	.knowledge-signal--2026
	.knowledge-signal__core {
		display: none;
	}

	.insight-scroll--2026
	.knowledge-signal--2026
	.knowledge-signal__meta {
		position: relative;
		inset: auto;
		margin-bottom: 20px;
	}

	.insight-scroll--2026
	.knowledge-signal--2026
	.knowledge-signal__word {
		position: relative;
		inset: auto !important;
		transform: none !important;
		text-align: left !important;
		padding: 18px 0 20px;
		border-top: 1px solid rgba(17,18,20,.13);
	}

	.insight-scroll--2026
	.knowledge-signal--2026
	.knowledge-signal__word--05 {
		border-bottom: 1px solid rgba(17,18,20,.13);
	}

	.insight-scroll--2026
	.knowledge-signal--2026
	.knowledge-signal__word > span {
		margin-bottom: 7px;
	}

	.insight-scroll--2026
	.knowledge-signal--2026
	.knowledge-signal__word strong {
		font-size: clamp(2rem, 10vw, 3rem);
	}

	.insight-scroll--2026 .knowledge-signal__copy {
		margin: 30px 0 0;
	}

	.insight-scroll--2026
	.insight-article--gateway-2026 {
		grid-template-columns: 1fr;
	}

	.insight-scroll--2026
	.insight-article--gateway-2026
	.insight-article__visual {
		min-height: 390px;
	}

	.insight-scroll--2026
	.insight-article--gateway-2026
	.insight-article__content {
		min-height: 430px;
	}

	.insight-scroll--2026
	.insight-article--gateway-2026
	.insight-article__bottom {
		align-items: flex-end;
	}

	.insight-scroll--2026
	.insight-article--gateway-2026
	.insight-article__bottom > span:first-child {
		max-width: 52%;
	}

	.insight-scroll--2026 .insight-article__link > span:first-child {
		display: none;
	}

}


/* ------------------------------------------------------------
   Reduced motion — no scroll-lock dependency for essential copy.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

	.insight-scroll--2026 {
		height: auto;
		padding:
			95px
			var(--page-padding)
			90px;
	}

	.insight-scroll--2026 .insight-scroll__sticky {
		position: relative;
		height: auto;
		overflow: visible;
	}

	.insight-scroll--2026 .insight-scroll__inner {
		width: 100%;
		height: auto;
		padding: 0;
	}

	.insight-scroll--2026 .insight-scroll__top {
		margin-bottom: 70px;
	}

	.insight-scroll--2026 .insight-scroll__stage {
		position: relative;
		inset: auto;
		display: flex;
		flex-direction: column;
		gap: 100px;
	}

	.insight-scroll--2026 .insight-scene {
		position: relative;
		inset: auto;
		padding: 0;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}

	.insight-scroll--2026 .insight-scene--intro h2 span {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.insight-scroll--2026 .insight-scroll__signal,
	.insight-scroll--2026 .insight-scroll__progress {
		display: none;
	}

	.insight-scroll--2026 .knowledge-signal__core-ring,
	.insight-scroll--2026 .knowledge-signal__core-inner,
	.insight-scroll--2026 .insight-article__orbit,
	.insight-scroll--2026 .insight-article__core {
		animation: none;
	}

}

/* ============================================================
   08 — START A PROJECT / 2026 CONTENT LAYER
   Keeps the existing convergence experience while using the
   approved homepage closing CTA and readable supporting copy.
   ============================================================ */

.project-convergence--2026 .project-convergence__headline {
	width: min(72%, 980px);
}

.project-convergence--2026 .project-convergence__headline > p {
	margin-bottom: 20px;
	color: rgba(255,255,255,.52);
}

.project-convergence--2026 .project-convergence__headline h2 {
	font-size:
		clamp(
			4.6rem,
			8.6vw,
			9.4rem
		);

	line-height: .76;
}

.project-convergence--2026 .project-convergence__line--02 {
	margin-left:
		clamp(
			28px,
			6vw,
			95px
		);
}

.project-convergence--2026 .project-convergence__line--03 {
	margin-left:
		clamp(
			8px,
			2.5vw,
			38px
		);
}

.project-convergence--2026 .project-convergence__support {
	max-width: 560px;

	margin:
		clamp(28px, 3vw, 42px)
		0
		0;

	font-size:
		clamp(
			15px,
			1.15vw,
			18px
		);

	line-height: 1.55;

	letter-spacing: 0;
	text-transform: none;

	color: rgba(255,255,255,.68);
}

.project-convergence--2026 .project-convergence__destination {
	left: 79%;

	width:
		clamp(
			175px,
			16vw,
			245px
		);
}

.project-convergence--2026 .project-convergence__cta strong {
	font-size:
		clamp(
			1.55rem,
			2.35vw,
			2.75rem
		);
}

.project-convergence--2026 .project-convergence__bottom {
	gap:
		clamp(
			12px,
			2vw,
			28px
		);
}

.project-convergence--2026
.project-convergence__bottom
span {
	white-space: nowrap;
}


/* ------------------------------------------------------------
   Trinovik colour atmosphere
   Uses only the confirmed supporting palette while preserving
   the existing convergence interaction and timing.
   ------------------------------------------------------------ */

.project-convergence--2026 {
	background: #000435;
}

.project-convergence--2026 .project-convergence__sticky {
	background:
		radial-gradient(
			circle at 72% 48%,
			rgba(112, 48, 143, .34) 0%,
			rgba(112, 48, 143, .16) 20%,
			transparent 46%
		),
		radial-gradient(
			circle at 56% 55%,
			rgba(11, 131, 166, .22) 0%,
			rgba(33, 146, 208, .10) 28%,
			transparent 52%
		),
		linear-gradient(
			118deg,
			#000435 0%,
			#071044 36%,
			#0a3657 66%,
			#3b1252 100%
		);
}

.project-convergence--2026 .project-convergence__glow {
	background:
		radial-gradient(
			circle,
			rgba(33, 146, 208, .24) 0%,
			rgba(11, 131, 166, .16) 30%,
			rgba(112, 48, 143, .10) 48%,
			transparent 70%
		);
}

.project-convergence--2026 .project-convergence__path {
	stroke: rgba(91, 116, 184, .52);
}

.project-convergence--2026 .project-convergence__headline em {
	color: #c2deaa;
	text-shadow: 0 0 42px rgba(194, 222, 170, .10);
}

.project-convergence--2026 .project-convergence__ring--outer {
	border-color: rgba(91, 116, 184, .46);
}

.project-convergence--2026 .project-convergence__ring--outer::before {
	background: #c2deaa;
	box-shadow:
		0 0 12px rgba(194, 222, 170, .72),
		0 0 30px rgba(33, 146, 208, .48);
}

.project-convergence--2026 .project-convergence__ring--inner {
	border-color: rgba(33, 146, 208, .28);
}

.project-convergence--2026 .project-convergence__cta {
	background:
		radial-gradient(
			circle at 32% 27%,
			rgba(255, 255, 255, .94),
			transparent 8%
		),
		linear-gradient(
			145deg,
			#2192d0 0%,
			#0b83a6 34%,
			#70308f 70%,
			#000435 100%
		);

	box-shadow:
		inset -25px -28px 50px rgba(0, 0, 0, .28),
		0 25px 90px rgba(33, 146, 208, .20),
		0 0 95px rgba(112, 48, 143, .16);
}

.project-convergence--2026 .project-convergence__bottom {
	border-top-color: rgba(91, 116, 184, .28);
}

.project-convergence--2026 .project-convergence__bottom-line {
	background: rgba(91, 116, 184, .24);
}


/* ------------------------------------------------------------
   Tablet
   ------------------------------------------------------------ */

@media (max-width: 1000px) {

	.project-convergence--2026 .project-convergence__headline {
		width: min(70%, 720px);
	}

	.project-convergence--2026 .project-convergence__headline h2 {
		font-size:
			clamp(
				4.2rem,
				10.5vw,
				7rem
			);
	}

	.project-convergence--2026 .project-convergence__destination {
		left: 80%;
		width:
			clamp(
				160px,
				20vw,
				215px
			);
	}

	.project-convergence--2026 .project-convergence__support {
		max-width: 470px;
	}

}


/* ------------------------------------------------------------
   Mobile — all approved copy is available without scroll-lock.
   ------------------------------------------------------------ */

@media (max-width: 680px) {

	.project-convergence--2026 .project-convergence__headline {
		width: 100%;
		margin-bottom: 55px;
	}

	.project-convergence--2026 .project-convergence__headline h2 {
		font-size:
			clamp(
				3.45rem,
				15.5vw,
				5rem
			);

		line-height: .8;
	}

	.project-convergence--2026 .project-convergence__line--02,
	.project-convergence--2026 .project-convergence__line--03 {
		margin-left: 10px;
	}

	.project-convergence--2026 .project-convergence__support {
		max-width: 100%;
		margin-top: 28px;
		font-size: 15px;
		line-height: 1.55;
	}

	.project-convergence--2026 .project-convergence__destination {
		width: 168px;
		margin-bottom: 55px;
	}

	.project-convergence--2026
	.project-convergence__bottom
	span:nth-child(-n+3) {
		display: inline;
	}

	.project-convergence--2026 .project-convergence__bottom {
		flex-wrap: wrap;
		row-gap: 10px;
	}

	.project-convergence--2026 .project-convergence__bottom-line {
		display: none;
	}

}


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

@media (prefers-reduced-motion: reduce) {

	.project-convergence--2026 {
		height: auto;
		min-height: 100svh;
	}

	.project-convergence--2026 .project-convergence__sticky {
		position: relative;
		min-height: 100svh;
		height: auto;
	}

	.project-convergence--2026 .project-convergence__line,
	.project-convergence--2026 .project-convergence__destination,
	.project-convergence--2026 .project-convergence__ring {
		transition: none;
		animation: none;
	}

}
/* ============================================================
   09 — FOOTER / WEBSITE 2026
   ============================================================ */

.signal-footer--2026 {
	min-height: auto;

	padding-bottom:
		clamp(
			28px,
			3vw,
			42px
		);
}


/* ------------------------------------------------------------
   BRAND INTRO
   ------------------------------------------------------------ */

.signal-footer--2026
.signal-footer__brand-intro {
	position: relative;

	padding:
		clamp(
			25px,
			3vw,
			42px
		)
		0
		clamp(
			70px,
			9vw,
			125px
		);

	border-bottom:
		1px solid
		rgba(
			255,
			255,
			255,
			.13
		);
}


.signal-footer--2026
.signal-footer__brand-kicker {
	display: flex;

	align-items: center;

	gap:
		14px;

	margin-bottom:
		clamp(
			40px,
			6vw,
			75px
		);
}


.signal-footer--2026
.signal-footer__brand-kicker span {
	font-size:
		8px;

	line-height:
		1;

	letter-spacing:
		.17em;

	text-transform:
		uppercase;

	color:
		rgba(
			255,
			255,
			255,
			.42
		);
}


.signal-footer--2026
.signal-footer__brand-title {
	margin:
		0;

	font-size:
		clamp(
			3.8rem,
			8.2vw,
			9rem
		);

	font-weight:
		500;

	line-height:
		.82;

	letter-spacing:
		-.07em;

	color:
		#f6f3fa;
}


.signal-footer--2026
.signal-footer__brand-tagline {
	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap:
		clamp(
			10px,
			1.4vw,
			20px
		);

	margin:
		clamp(
			30px,
			4vw,
			48px
		)
		0
		0;

	font-size:
		clamp(
			11px,
			1vw,
			14px
		);

	line-height:
		1.4;

	letter-spacing:
		.11em;

	text-transform:
		uppercase;

	color:
		rgba(
			255,
			255,
			255,
			.64
		);
}


.signal-footer--2026
.signal-footer__brand-tagline i {
	font-style:
		normal;

	color:
		rgba(
			255,
			255,
			255,
			.24
		);
}



/* ------------------------------------------------------------
   GRID
   ------------------------------------------------------------ */

.signal-footer--2026
.signal-footer__grid {
	padding-top:
		clamp(
			65px,
			8vw,
			110px
		);

	padding-bottom:
		clamp(
			70px,
			9vw,
			120px
		);
}



/* ------------------------------------------------------------
   SERVICES
   ------------------------------------------------------------ */

.signal-footer--2026
.signal-footer__services a {
	transition:
		color .25s ease,
		transform .25s ease,
		border-color .25s ease;
}


.signal-footer--2026
.signal-footer__services a:hover {
	transform:
		translateX(
			5px
		);
}



/* ------------------------------------------------------------
   NAVIGATION
   ------------------------------------------------------------ */

.signal-footer--2026
.signal-footer__navigation {
	align-items:
		center;
}


.signal-footer--2026
.signal-footer__navigation-left {
	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap:
		clamp(
			18px,
			2.4vw,
			38px
		);
}


.signal-footer--2026
.signal-footer__navigation-left a,
.signal-footer--2026
.signal-footer__navigation-meta a {
	font-size:
		10px;

	line-height:
		1;

	letter-spacing:
		.12em;

	text-transform:
		uppercase;

	color:
		rgba(
			255,
			255,
			255,
			.62
		);

	transition:
		color .25s ease;
}


.signal-footer--2026
.signal-footer__navigation-left a:hover,
.signal-footer--2026
.signal-footer__navigation-meta a:hover {
	color:
		#ffffff;
}


.signal-footer--2026
.signal-footer__navigation-meta {
	display: flex;

	align-items: center;

	gap:
		clamp(
			18px,
			2vw,
			30px
		);

	margin-left:
		auto;
}



/* ------------------------------------------------------------
   BOTTOM
   ------------------------------------------------------------ */

.signal-footer--2026
.signal-footer__bottom {
	display: flex;

	align-items: center;

	justify-content:
		space-between;

	gap:
		30px;
}


.signal-footer--2026
.signal-footer__copyright {
	flex: 0 1 auto;

	margin:
		0;

	font-size:
		9px;

	line-height:
		1.4;

	letter-spacing:
		.1em;

	text-transform:
		uppercase;

	color:
		rgba(
			255,
			255,
			255,
			.38
		);

	white-space:
		nowrap;
}



/* ------------------------------------------------------------
   REMOVE OLD DECORATIVE FOOTER ELEMENTS
   ------------------------------------------------------------ */

.signal-footer--2026
.signal-footer__ghost,

.signal-footer--2026
.signal-footer__coordinates,

.signal-footer--2026
.signal-footer__end,

.signal-footer--2026
.signal-footer__identity,

.signal-footer--2026
.signal-footer__signal {
	display:
		none !important;
}



/* ============================================================
   FOOTER — TABLET
   ============================================================ */

@media (
	max-width:
	1000px
) {

	.signal-footer--2026
	.signal-footer__grid {
		grid-template-columns:
			1fr
			1fr;
	}


	.signal-footer--2026
	.signal-footer__column--services {
		grid-column:
			1 / -1;
	}


	.signal-footer--2026
	.signal-footer__navigation {
		align-items:
			flex-start;

		flex-direction:
			column;

		gap:
			30px;
	}


	.signal-footer--2026
	.signal-footer__navigation-meta {
		margin-left:
			0;
	}

}



/* ============================================================
   FOOTER — MOBILE
   ============================================================ */

@media (
	max-width:
	680px
) {

	.signal-footer--2026
	.signal-footer__brand-intro {
		padding-bottom:
			70px;
	}


	.signal-footer--2026
	.signal-footer__brand-title {
		font-size:
			clamp(
				3.2rem,
				16vw,
				5.3rem
			);
	}


	.signal-footer--2026
	.signal-footer__brand-tagline {
		align-items:
			flex-start;

		flex-direction:
			column;

		gap:
			8px;
	}


	.signal-footer--2026
	.signal-footer__brand-tagline i {
		display:
			none;
	}


	.signal-footer--2026
	.signal-footer__grid {
		grid-template-columns:
			1fr;

		gap:
			55px;
	}


	.signal-footer--2026
	.signal-footer__column--services {
		grid-column:
			auto;
	}


	.signal-footer--2026
	.signal-footer__navigation-left {
		align-items:
			flex-start;

		flex-direction:
			column;

		gap:
			20px;
	}


	.signal-footer--2026
	.signal-footer__navigation-meta {
		align-items:
			flex-start;

		flex-direction:
			column;

		gap:
			18px;
	}


	.signal-footer--2026
	.signal-footer__bottom {
		align-items:
			flex-start;

		flex-direction:
			column;
	}


	.signal-footer--2026
	.signal-footer__copyright {
		max-width:
			280px;

		white-space:
			normal;
	}

}

/* ============================================================
   04 — SELECTED WORK / CREATIVE DIRECTOR COLOUR REFINEMENT
   Keep the existing cinematic interaction and transition logic.
   This layer changes colour treatment only.
   ============================================================ */

/* Carry the #70308f-led intro seamlessly into the sticky project stage. */
.cinema-work,
.cinema-work__sticky {
	background:
		radial-gradient(
			circle at 82% 18%,
			rgba(91, 116, 184, .28),
			transparent 34%
		),
		linear-gradient(
			120deg,
			rgba(0, 0, 0, .08) 0%,
			rgba(0, 0, 0, .34) 58%,
			rgba(0, 0, 0, .66) 100%
		),
		#70308f;
}

/* Tone project imagery into the same purple/blue-violet world without
   reducing the artwork to a colour overlay. */
.cinema-project__wash {
	background:
		linear-gradient(
			90deg,
			rgba(16, 7, 23, .78),
			rgba(112, 48, 143, .18) 48%,
			rgba(91, 116, 184, .08)
		),
		linear-gradient(
			0deg,
			rgba(12, 7, 18, .50),
			transparent 48%
		);
}


/* ============================================================
   SERVICES → SELECTED WORK / SIGNAL RELAY
   Dedicated exit transition only. The internal Services state
   transitions remain controlled by the existing implementation.
   ============================================================ */

.service-work-relay {
	--relay-accent: #c2deaa;
	--relay-purple: 0;
	--relay-network-opacity: 1;
	--relay-core-scale: 1;
	--relay-core-opacity: 1;
	--relay-beam-opacity: 0;
	--relay-aperture-opacity: 0;
	--relay-aperture-scale: 1.04;

	position: relative;
	height: 138svh;
	background: #000435;
	color: #f6f3fa;
}

.service-work-relay__sticky {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(
			circle at 50% 50%,
			rgba(194, 222, 170, .08),
			transparent 27%
		),
		linear-gradient(135deg, #000435 0%, #000050 62%, #050526 100%);
}

.service-work-relay__sticky::after {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0;
	background:
		radial-gradient(
			circle at 78% 25%,
			rgba(91, 116, 184, .32),
			transparent 35%
		),
		linear-gradient(
			120deg,
			rgba(0, 0, 0, .06) 0%,
			rgba(0, 0, 0, .30) 56%,
			rgba(0, 0, 0, .62) 100%
		),
		#70308f;
	opacity: var(--relay-purple);
}

.service-work-relay__atmosphere {
	position: absolute;
	z-index: 0;
	inset: 0;
	background:
		radial-gradient(
			circle at 50% 50%,
			rgba(194, 222, 170, .16),
			transparent 22%
		),
		radial-gradient(
			circle at 70% 70%,
			rgba(11, 131, 166, .10),
			transparent 28%
		);
	opacity: var(--relay-network-opacity);
	pointer-events: none;
}

.service-work-relay__network {
	position: absolute;
	z-index: 2;
	inset: 0;
	opacity: var(--relay-network-opacity);
	pointer-events: none;
}

.service-work-relay__line {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 1px;
	width: 1px;
	background:
		linear-gradient(
			90deg,
			rgba(194, 222, 170, .80),
			rgba(33, 146, 208, .26)
		);
	transform-origin: 0 50%;
	box-shadow: 0 0 18px rgba(194, 222, 170, .12);
}

.service-work-relay__node,
.service-work-relay__core {
	position: absolute;
	left: 50%;
	top: 50%;
	border-radius: 50%;
	pointer-events: none;
}

.service-work-relay__node {
	width: clamp(16px, 1.55vw, 28px);
	aspect-ratio: 1;
	background: var(--relay-accent);
	box-shadow:
		0 0 20px rgba(194, 222, 170, .20),
		0 0 54px rgba(33, 146, 208, .10);
}

.service-work-relay__core {
	z-index: 3;
	width: clamp(42px, 4vw, 72px);
	aspect-ratio: 1;
	background:
		radial-gradient(
			circle at 42% 35%,
			#f6f3fa 0%,
			#c2deaa 22%,
			#2192d0 100%
		);
	opacity: var(--relay-core-opacity);
	transform:
		translate(-50%, -50%)
		scale(var(--relay-core-scale));
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, .16),
		0 0 38px rgba(194, 222, 170, .34),
		0 0 100px rgba(33, 146, 208, .24);
}

.service-work-relay__beam {
	position: absolute;
	z-index: 5;
	left: 50%;
	top: 50%;
	width: 110vw;
	height: 2px;
	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(246, 243, 250, .95) 18%,
			#c2deaa 50%,
			rgba(246, 243, 250, .95) 82%,
			transparent
		);
	opacity: var(--relay-beam-opacity);
	transform:
		translate(-50%, -50%)
		scaleX(0);
	transform-origin: center;
	box-shadow:
		0 0 18px rgba(194, 222, 170, .48),
		0 0 46px rgba(112, 48, 143, .22);
	pointer-events: none;
}

.service-work-relay__aperture {
	position: absolute;
	z-index: 4;
	inset: 0;
	display: grid;
	place-items: center;
	overflow: hidden;
	opacity: var(--relay-aperture-opacity);
	clip-path: inset(49.9% 0 49.9% 0);
	transform: scale(var(--relay-aperture-scale));
	transform-origin: center;
	background:
		radial-gradient(
			circle at 50% 50%,
			rgba(33, 146, 208, .16),
			transparent 28%
		),
		#70308f;
	pointer-events: none;
}

.service-work-relay__aperture img {
	position: relative;
	z-index: 2;
	width: clamp(150px, 18vw, 280px);
	height: auto;
	object-fit: contain;
	filter:
		drop-shadow(0 0 34px rgba(33, 146, 208, .24))
		drop-shadow(0 0 70px rgba(112, 48, 143, .28));
}

.service-work-relay__aperture-wash {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			circle at 50% 50%,
			rgba(246, 243, 250, .05),
			transparent 30%
		),
		linear-gradient(
			120deg,
			rgba(0, 4, 53, .16),
			rgba(112, 48, 143, .08) 54%,
			rgba(91, 116, 184, .10)
		);
}

@media (max-width: 680px) {
	.service-work-relay {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.service-work-relay {
		display: none;
	}
}

/* ============================================================
   09 — FOOTER / TRINOVIK BRAND COLOUR REFINEMENT
   Colour treatment only. Preserve footer structure and behaviour.
   Confirmed supporting palette:
   #5b74b8 / #c2deaa / #70308f / #2192d0 / #0b83a6
   ============================================================ */

.signal-footer--2026 {
	background:
		radial-gradient(
			circle at 72% 35%,
			rgba(112, 48, 143, .18) 0%,
			rgba(112, 48, 143, .08) 24%,
			transparent 48%
		),
		radial-gradient(
			circle at 88% 74%,
			rgba(11, 131, 166, .12) 0%,
			rgba(11, 131, 166, .04) 28%,
			transparent 52%
		),
		linear-gradient(
			118deg,
			#050724 0%,
			#070a2f 42%,
			#0b0a2b 70%,
			#08081f 100%
		);
}

/* Replace the older single purple glow with a calmer branded atmosphere. */
.signal-footer--2026::before {
	width: min(72vw, 1050px);
	height: min(72vw, 1050px);
	left: 72%;
	top: 42%;

	background:
		radial-gradient(
			circle at 46% 42%,
			rgba(33, 146, 208, .12) 0%,
			transparent 38%
		),
		radial-gradient(
			circle at 58% 52%,
			rgba(112, 48, 143, .18) 0%,
			transparent 58%
		);

	filter: blur(62px);
	opacity: .9;
}

.signal-footer--2026 .signal-footer__brand-intro,
.signal-footer--2026 .signal-footer__grid,
.signal-footer--2026 .signal-footer__navigation {
	border-color: rgba(91, 116, 184, .24);
}

.signal-footer--2026 .signal-footer__services a {
	border-color: rgba(91, 116, 184, .16);
}

.signal-footer--2026 .signal-footer__brand-kicker span,
.signal-footer--2026 .signal-footer__label {
	color: rgba(91, 116, 184, .82);
}

.signal-footer--2026 .signal-footer__office-head .signal-footer__label {
	color: #c2deaa;
}

.signal-footer--2026 .signal-footer__office-head > span:last-child {
	color: rgba(194, 222, 170, .5);
}

.signal-footer--2026 .signal-footer__brand-title {
	color: #f7f7fb;
	text-shadow:
		0 0 42px rgba(91, 116, 184, .06);
}

.signal-footer--2026 .signal-footer__brand-tagline {
	color: rgba(247, 247, 251, .68);
}

.signal-footer--2026 .signal-footer__brand-tagline i {
	color: rgba(91, 116, 184, .42);
}

/* Each approved service keeps the same colour identity used earlier on the page. */
.signal-footer--2026 .signal-footer__services a:nth-child(1):hover,
.signal-footer--2026 .signal-footer__services a:nth-child(1):focus-visible {
	color: #2192d0;
	border-color: rgba(33, 146, 208, .46);
}

.signal-footer--2026 .signal-footer__services a:nth-child(2):hover,
.signal-footer--2026 .signal-footer__services a:nth-child(2):focus-visible {
	color: #9c68b4;
	border-color: rgba(112, 48, 143, .56);
}

.signal-footer--2026 .signal-footer__services a:nth-child(3):hover,
.signal-footer--2026 .signal-footer__services a:nth-child(3):focus-visible {
	color: #7890c8;
	border-color: rgba(91, 116, 184, .58);
}

.signal-footer--2026 .signal-footer__services a:nth-child(4):hover,
.signal-footer--2026 .signal-footer__services a:nth-child(4):focus-visible {
	color: #c2deaa;
	border-color: rgba(194, 222, 170, .54);
}

.signal-footer--2026 .signal-footer__column--office h3 {
	color: #f6f7fb;
}

.signal-footer--2026 .signal-footer__registration {
	color: rgba(218, 225, 250, .86);
	text-shadow: 0 0 18px rgba(91, 116, 184, .16);
}

.signal-footer--2026 address {
	color: rgba(246, 247, 252, .84);
	text-shadow: 0 0 22px rgba(91, 116, 184, .12);
}

.signal-footer--2026 .signal-footer__navigation-left a:hover,
.signal-footer--2026 .signal-footer__navigation-left a:focus-visible,
.signal-footer--2026 .signal-footer__navigation-meta a:hover,
.signal-footer--2026 .signal-footer__navigation-meta a:focus-visible {
	color: #c2deaa;
}

.signal-footer--2026 .signal-footer__brand-mark {
	border-color: rgba(91, 116, 184, .54);
	box-shadow:
		0 0 24px rgba(33, 146, 208, .08);
}

.signal-footer--2026 .signal-footer__copyright {
	color: rgba(238, 242, 250, .42);
}

@media (max-width: 680px) {
	.signal-footer--2026 {
		background:
			radial-gradient(
				circle at 72% 28%,
				rgba(112, 48, 143, .16) 0%,
				transparent 44%
			),
			linear-gradient(
				155deg,
				#050724 0%,
				#080a2e 52%,
				#08081f 100%
			);
	}

	.signal-footer--2026::before {
		width: 125vw;
		height: 125vw;
		left: 78%;
		top: 34%;
		opacity: .7;
	}
}

/* ============================================================
   04 — SELECTED WORK / CINEMATIC BRAND BACKGROUND REFINEMENT
   Background treatment only. Preserve project artwork, copy,
   counters, scroll behaviour and all existing transitions.
   Confirmed supporting palette:
   #5b74b8 / #70308f / #0b83a6
   ============================================================ */

.cinema-work,
.cinema-work__sticky {
	background:
		radial-gradient(
			circle at 82% 18%,
			rgba(91, 116, 184, .34) 0%,
			rgba(91, 116, 184, .14) 24%,
			transparent 46%
		),
		radial-gradient(
			circle at 12% 84%,
			rgba(11, 131, 166, .13) 0%,
			transparent 38%
		),
		linear-gradient(
			122deg,
			#050724 0%,
			#170c31 30%,
			#3a1b59 58%,
			#70308f 78%,
			#25113d 100%
		);
}

/* Keep the portfolio image dominant while tying its wash to the
   surrounding Trinovik navy / purple / blue-violet environment. */
.cinema-project__wash {
	background:
		linear-gradient(
			90deg,
			rgba(5, 7, 36, .72) 0%,
			rgba(58, 27, 89, .18) 46%,
			rgba(91, 116, 184, .08) 76%,
			rgba(5, 7, 36, .05) 100%
		),
		linear-gradient(
			0deg,
			rgba(5, 7, 36, .34) 0%,
			transparent 50%
		);
}

@media (max-width: 680px) {
	.cinema-work,
	.cinema-work__sticky {
		background:
			radial-gradient(
				circle at 80% 18%,
				rgba(91, 116, 184, .28) 0%,
				transparent 42%
			),
			linear-gradient(
				150deg,
				#050724 0%,
				#1d1037 46%,
				#4a2468 100%
			);
	}
}

/* ============================================================
   SERVICES — CLEANER PRESENTATION / 2026
   Removes only deprecated technical framing in markup.
   Keeps the current counter at top-right and centers AI & directly
   above AUTOMATION within the existing left content area.
   ============================================================ */

.service-generator--2026 .service-generator__top-counter {
	margin-left: auto;
}

@media (min-width: 681px) {
	.service-generator--2026
	.service-output--ai
	.service-output__copy h3 {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		width: max-content;
		text-align: center;
	}
}



/* ============================================================
   SERVICES — AI NETWORK REFINEMENT / AI → BRAND HANDOFF
   Cleans the AI network geometry and creates the requested
   four-node collapse into the centre core before the next
   service appears.
   ============================================================ */

.service-generator--2026 .service-output--ai .service-visual--social {
	opacity: .84;
}

.service-generator--2026 .service-output--ai .social-network {
	position: relative;
	width: 100%;
	height: 100%;
	transform-origin: 50% 50%;
	transition: transform .56s cubic-bezier(.22, .61, .36, 1);
}

.service-generator--2026 .service-output--ai .social-node,
.service-generator--2026 .service-output--ai .social-line {
	transition:
		all .56s cubic-bezier(.22, .61, .36, 1),
		opacity .44s ease;
}

.service-generator--2026 .service-output--ai .social-node {
	width: 38px;
	height: 38px;
}

.service-generator--2026 .service-output--ai .social-node--01 {
	left: 50%;
	top: 50%;
	width: 76px;
	height: 76px;
	transform: translate(-50%, -50%);
}

.service-generator--2026 .service-output--ai .social-node--02 {
	left: 26%;
	top: 26%;
	transform: translate(-50%, -50%);
}

.service-generator--2026 .service-output--ai .social-node--03 {
	left: 74%;
	top: 24%;
	transform: translate(-50%, -50%);
}

.service-generator--2026 .service-output--ai .social-node--04 {
	left: 28%;
	top: 76%;
	transform: translate(-50%, -50%);
}

.service-generator--2026 .service-output--ai .social-node--05 {
	left: 72%;
	top: 72%;
	transform: translate(-50%, -50%);
}

.service-generator--2026 .service-output--ai .social-line {
	height: 1px;
	opacity: .92;
	transform-origin: left center;
}

.service-generator--2026 .service-output--ai .social-line--01 {
	width: 31%;
	left: 27%;
	top: 31%;
	transform: rotate(29deg);
}

.service-generator--2026 .service-output--ai .social-line--02 {
	width: 32%;
	left: 50%;
	top: 50%;
	transform: rotate(-34deg);
}

.service-generator--2026 .service-output--ai .social-line--03 {
	width: 30%;
	left: 29%;
	top: 68%;
	transform: rotate(-29deg);
}

.service-generator--2026 .service-output--ai .social-line--04 {
	width: 29%;
	left: 50%;
	top: 54%;
	transform: rotate(33deg);
}

.service-generator--2026 .service-output--ai.is-collapsing .social-network {
	transform: scale(.9);
}

.service-generator--2026 .service-output--ai.is-collapsing .social-node--01 {
	transform: translate(-50%, -50%) scale(1.18);
	box-shadow:
		0 0 58px color-mix(
			in srgb,
				var(--service-accent) 72%,
				transparent
		),
		0 0 120px color-mix(
			in srgb,
				var(--service-accent) 26%,
				transparent
		);
}

.service-generator--2026 .service-output--ai.is-collapsing .social-node--02,
.service-generator--2026 .service-output--ai.is-collapsing .social-node--03,
.service-generator--2026 .service-output--ai.is-collapsing .social-node--04,
.service-generator--2026 .service-output--ai.is-collapsing .social-node--05 {
	left: 50%;
	top: 50%;
	opacity: 0;
	transform: translate(-50%, -50%) scale(.28);
}

.service-generator--2026 .service-output--ai.is-collapsing .social-line {
	left: 50%;
	top: 50%;
	width: 0;
	opacity: 0;
	transform: rotate(0deg);
}

.service-generator--2026 .service-output--brand-content .service-visual--brand-story {
	transition: opacity .68s ease;
}

.service-generator--2026.is-transitioning .service-output--brand-content.is-transition-target .service-visual--brand-story,
.service-generator--2026.is-transitioning .service-output--brand-content.is-transition-target .service-output__copy h3,
.service-generator--2026.is-transitioning .service-output--brand-content.is-transition-target .service-output__detail,
.service-generator--2026.is-transitioning .service-output--brand-content.is-transition-target .service-output__tags {
	opacity: 0;
}

/* ============================================================
   FOOTER — COMPACT INFORMATION-FIRST LAYOUT
   The large brand-intro block has been removed. Bring the useful
   service/office grid up immediately and remove the old empty gap.
   ============================================================ */

.signal-footer--2026 {
	padding-top: clamp(48px, 5vw, 72px);
}

.signal-footer--2026 .signal-footer__grid {
	padding-top: 0;
	padding-bottom: clamp(56px, 7vw, 92px);
}

@media (max-width: 680px) {
	.signal-footer--2026 {
		padding-top: 38px;
	}

	.signal-footer--2026 .signal-footer__grid {
		padding-top: 0;
		padding-bottom: 52px;
	}
}


/* ============================================================
   2026 — COMPACT TOP-RIGHT SECTION PROGRESS
   Replaces the old DNA rail, global V4 edge meter and Selected
   Work bottom timeline with one consistent line + counter UI.
   ============================================================ */

.compact-progress-meta {
	display: flex;
	align-items: center;
	gap: 9px !important;
}

.compact-progress {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: clamp(54px, 4.5vw, 78px);
	height: 1px;
	overflow: hidden;
	background: rgba(255, 255, 255, .18);
}

.compact-progress--light {
	background: rgba(17, 18, 20, .18);
}

.compact-progress__fill {
	position: absolute;
	inset: 0 auto 0 0;
	display: block;
	width: 0%;
	height: 100%;
	background: #70308f;
	box-shadow: 0 0 12px rgba(112, 48, 143, .35);
	transform: none !important;
	transition: width .08s linear;
}

/* Our DNA — keep only the compact top-right progress + counter. */
.trinovik-method--dna .trinovik-method__top {
	justify-content: flex-end;
}

.trinovik-method--dna .method-signal {
	display: none !important;
}

/* Services — compact line sits directly before 01 / 04. */
.service-generator--2026 .service-generator__top-counter {
	margin-left: auto;
}

/* Selected Work — compact line sits directly before project count. */
.cinema-work__top > div:last-child.compact-progress-meta {
	gap: 9px;
}

.cinema-work__top .compact-progress {
	margin-right: 2px;
}

/* The old bottom progress timeline has been removed from markup. */
.cinema-work__progress {
	display: none !important;
}

@media (max-width: 680px) {
	.compact-progress {
		width: 44px;
	}

	.compact-progress-meta {
		gap: 7px !important;
	}
}


/* ============================================================
   SELECTED WORK — ONE CONTINUOUS CINEMATIC SECTION
   The centred content introduction is now the first scroll state
   inside the same dark navy → purple project environment.
   ============================================================ */

@media (min-width: 681px) {
	/* 500vh gives the intro its own scroll beat while keeping each of
	   the four project states close to the previous physical duration. */
	.cinema-work {
		height: 500vh;
	}

	.cinema-work__intro {
		--cinema-intro-opacity: 1;
		--cinema-intro-y: 0px;

		position: absolute;
		z-index: 24;
		inset: 0;

		display: grid;
		place-items: center;

		padding:
			clamp(120px, 13vh, 155px)
			var(--page-padding)
			clamp(90px, 10vh, 120px);

		opacity: var(--cinema-intro-opacity);
		transform: translate3d(0, var(--cinema-intro-y), 0);
		will-change: opacity, transform;
		pointer-events: none;
	}

	.cinema-work__intro-content {
		width: min(100%, 1180px);
		margin: 0 auto;
		text-align: center;
	}

	.cinema-work__intro h2 {
		max-width: 1120px;
		margin: 0 auto;
		padding-bottom: .12em;

		font-size: clamp(4rem, 7.1vw, 8.25rem);
		font-weight: 400;
		line-height: .98;
		letter-spacing: -.065em;
		text-wrap: balance;
		color: #f6f3fa;
	}

	/* Keep the cinematic V4 word mask while protecting descenders. */
	.cinema-work__intro h2.v4-reveal-ready {
		padding-bottom: .14em;
	}

	.cinema-work__intro p {
		max-width: 760px;
		margin:
			clamp(30px, 3.5vw, 46px)
			auto
			0;

		font-size: clamp(15px, 1.18vw, 19px);
		line-height: 1.55;
		color: rgba(246, 243, 250, .74);
		text-align: center;
	}

	/* Projects/counter wait until the intro has completed its scroll beat. */
	.cinema-work__stage,
	.cinema-work__top {
		opacity: 0;
		will-change: opacity;
	}
}


@media (max-width: 680px) {
	/* Mobile remains normal document flow: intro first, then all projects. */
	.cinema-work__intro {
		position: relative;
		z-index: 1;
		inset: auto;

		display: block;
		padding: 20px 0 78px;
		opacity: 1 !important;
		transform: none !important;
		pointer-events: auto;
	}

	.cinema-work__intro-content {
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}

	.cinema-work__intro h2 {
		max-width: 100%;
		margin: 0 auto;
		padding-bottom: .12em;
		font-size: clamp(2.8rem, 13vw, 4.6rem);
		font-weight: 400;
		line-height: 1;
		letter-spacing: -.055em;
		text-wrap: balance;
	}

	.cinema-work__intro p {
		max-width: 520px;
		margin: 28px auto 0;
		font-size: 14px;
		line-height: 1.55;
		color: rgba(246, 243, 250, .74);
	}

	.cinema-work__stage,
	.cinema-work__top {
		opacity: 1 !important;
	}
}


/* ============================================================
   SERVICES — AI & AUTOMATION / SCROLL-DRIVEN CINEMATIC STORY
   The photographic clean plate moves into the fingertip contact point.
   Each SVG branch then draws and activates from scroll progress supplied
   by interactions.js. The animation is continuous and fully reversible.
   ============================================================ */

.service-generator--2026 .service-output--ai .service-visual--ai-story {
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	transform: none !important;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
}

.service-generator--2026 .service-output--ai.is-active .service-visual--ai-story {
	opacity: 1;
}

.service-generator--2026 .service-output--ai .service-output__copy {
	text-shadow: 0 2px 24px rgba(0, 4, 53, .62);
}

.ai-story-scene {
	position: absolute;
	inset: 0;
	isolation: isolate;
	background: #000435;
}

.ai-story-scene__photo {
	position: absolute;
	inset: -4%;
	background-image: url("../images/ui/ai-automation-woman-clean.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transform: translate3d(0, var(--ai-hand-y, 54px), 0) scale(1.03);
	transform-origin: 50% 50%;
	will-change: transform;
}

.ai-story-scene__shade {
	position: absolute;
	z-index: 1;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(0, 4, 53, .98) 0%, rgba(0, 4, 53, .82) 32%, rgba(0, 4, 53, .25) 55%, rgba(0, 4, 53, .05) 100%),
		linear-gradient(0deg, rgba(0, 4, 53, .24), transparent 35%, rgba(0, 4, 53, .12));
}

.ai-story {
	position: absolute;
	z-index: 2;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.ai-story__touch {
	opacity: var(--ai-touch, 0);
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(var(--ai-touch, 0));
	filter: url(#aiStoryGlow);
}

.ai-story__touch-ring {
	fill: rgba(32, 158, 255, .12);
	stroke: #82edff;
	stroke-width: 2;
}

.ai-story__touch-core {
	fill: #e9ffff;
	stroke: #86efff;
	stroke-width: 5;
}

.ai-story__stage {
	opacity: var(--ai-stage, 0);
}

.ai-story__stage--1 { --ai-stage: var(--ai-stage-1, 0); }
.ai-story__stage--2 { --ai-stage: var(--ai-stage-2, 0); }
.ai-story__stage--3 { --ai-stage: var(--ai-stage-3, 0); }
.ai-story__stage--4 { --ai-stage: var(--ai-stage-4, 0); }
.ai-story__stage--5 { --ai-stage: var(--ai-stage-5, 0); }
.ai-story__stage--6 { --ai-stage: var(--ai-stage-6, 0); }

.ai-story__edge {
	fill: none;
	stroke: url(#aiStoryLine);
	stroke-width: 2.25;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: calc(1 - var(--ai-stage, 0));
	filter: url(#aiStoryGlow);
}

.ai-story__node {
	opacity: var(--ai-stage, 0);
	filter: url(#aiStoryGlow);
}

.ai-story__node > rect {
	fill: url(#aiStoryCard);
	stroke: #5cd8ff;
	stroke-width: 1.8;
}

.ai-story__icon,
.ai-story__icon path,
.ai-story__icon circle {
	fill: none;
	stroke: #a7f4ff;
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ai-story__icon--list circle {
	fill: #a7f4ff;
	stroke: none;
}

.service-generator--2026 .service-output--ai.is-collapsing .service-visual--ai-story {
	opacity: 0;
	transform: scale(.985) !important;
}

@media (prefers-reduced-motion: reduce) {
	.service-generator--2026 .service-output--ai .service-visual--ai-story {
		position: relative;
		inset: auto;
		width: min(100%, 760px);
		height: auto;
		aspect-ratio: 16 / 9;
		margin: 50px auto 0;
		transform: none !important;
		opacity: .9;
	}

	.ai-story-scene__photo {
		transform: scale(1.03);
	}
}

/* ============================================================
   BRAND & CONTENT — SCROLL-DRIVEN CREATIVE CONSTELLATION
   A clean photographic plate sits behind separately controlled glass
   cards and connecting trails. The complete field converges into the
   stylus before the Creative Technology state takes over.
   ============================================================ */

.service-generator--2026 .service-output--brand-content .service-visual--brand-story {
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	transform: none !important;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
}

.service-generator--2026 .service-output--brand-content.is-active .service-visual--brand-story {
	opacity: 1;
}

.service-generator--2026 .service-output--brand-content .service-output__copy {
	text-shadow: 0 2px 26px rgba(0, 4, 53, .72);
}

.brand-story-scene {
	position: absolute;
	inset: 0;
	isolation: isolate;
	background: #000435;
}

.brand-story-scene__photo {
	position: absolute;
	inset: -3%;
	background-image: url("../images/ui/brand-content-asian-man.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transform: translate3d(0, var(--brand-photo-y, 34px), 0) scale(1.025);
	transform-origin: 50% 50%;
	will-change: transform;
}

.brand-story-scene__shade {
	position: absolute;
	z-index: 1;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(0, 4, 53, .99) 0%, rgba(0, 4, 53, .84) 31%, rgba(0, 4, 53, .28) 53%, rgba(0, 4, 53, .04) 100%),
		linear-gradient(0deg, rgba(0, 4, 53, .3), transparent 42%, rgba(0, 4, 53, .08));
}

.brand-story {
	position: absolute;
	z-index: 2;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.brand-story__touch {
	opacity: var(--brand-touch, 0);
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(var(--brand-touch, 0));
	filter: url(#brandStoryGlow);
}

.brand-story__touch-ring {
	fill: rgba(197, 80, 255, .12);
	stroke: #fa96ff;
	stroke-width: 2;
}

.brand-story__touch-core {
	fill: #fff0ff;
	stroke: #d96cff;
	stroke-width: 5;
}

.brand-story__field {
	transform-box: view-box;
	transform-origin: 1007px 369px;
	transform: scale(var(--brand-field-scale, 1));
	opacity: var(--brand-field-opacity, 1);
	will-change: transform, opacity;
}

.brand-story__stage {
	opacity: var(--brand-stage, 0);
}

.brand-story__stage--1 { --brand-stage: var(--brand-stage-1, 0); }
.brand-story__stage--2 { --brand-stage: var(--brand-stage-2, 0); }
.brand-story__stage--3 { --brand-stage: var(--brand-stage-3, 0); }
.brand-story__stage--4 { --brand-stage: var(--brand-stage-4, 0); }
.brand-story__stage--5 { --brand-stage: var(--brand-stage-5, 0); }
.brand-story__stage--6 { --brand-stage: var(--brand-stage-6, 0); }
.brand-story__stage--7 { --brand-stage: var(--brand-stage-7, 0); }

.brand-story__trail {
	fill: none;
	stroke: url(#brandStoryLine);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: calc(1 - var(--brand-stage, 0));
	filter: url(#brandStoryGlow);
}

.brand-story__card {
	opacity: var(--brand-stage, 0);
	filter:
		drop-shadow(0 0 8px rgba(220, 93, 255, .32))
		drop-shadow(0 0 22px rgba(116, 60, 255, .2));
}

.brand-story__card > rect {
	fill: url(#brandStoryGlass);
	stroke: #d76dff;
	stroke-width: 1.6;
}

.brand-story__image-icon,
.brand-story__chart-ring,
.brand-story__chart-lines,
.brand-story__bubble,
.brand-story__pen-icon,
.brand-story__camera-icon {
	fill: none;
	stroke: #efb1ff;
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.brand-story__image-icon {
	fill: rgba(175, 72, 255, .23);
}

.brand-story__image-sun,
.brand-story__heart,
.brand-story__chart-slice {
	fill: url(#brandStoryAccent);
	stroke: none;
}

.brand-story__swatches rect {
	stroke: rgba(255, 230, 255, .34);
	stroke-width: 1;
}

.brand-story__swatches rect:nth-child(1) { fill: #70308f; }
.brand-story__swatches rect:nth-child(2) { fill: #a64ed1; }
.brand-story__swatches rect:nth-child(3) { fill: #6f5eea; }
.brand-story__swatches rect:nth-child(4) { fill: #313ca5; }
.brand-story__swatches rect:nth-child(5) { fill: #d66bc8; }
.brand-story__swatches rect:nth-child(6) { fill: #f2a2d4; }
.brand-story__swatches rect:nth-child(7) { fill: #9269d8; }
.brand-story__swatches rect:nth-child(8) { fill: #211058; }

.service-generator--2026 .service-output--brand-content.is-converging .brand-story__field {
	opacity: var(--brand-field-opacity, 1);
}

@media (prefers-reduced-motion: reduce) {
	.service-generator--2026 .service-output--brand-content .service-visual--brand-story {
		position: relative;
		inset: auto;
		width: min(100%, 760px);
		height: auto;
		aspect-ratio: 16 / 9;
		margin: 50px auto 0;
		transform: none !important;
		opacity: .9;
	}

	.brand-story-scene__photo {
		transform: scale(1.025);
	}
}

/* ============================================================
   CREATIVE TECHNOLOGY — SCROLL-DRIVEN INTERFACE ASSEMBLY
   The clean portrait is the photographic base. Website, tablet, mobile,
   code and analytics layers construct around the fingertip and collapse
   into the same activation point before Growth & Performance appears.
   ============================================================ */

.service-generator--2026 .service-output--creative-technology .service-visual--creative-story {
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	transform: none !important;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	transition: opacity .68s ease;
}

.service-generator--2026 .service-output--creative-technology.is-active .service-visual--creative-story {
	opacity: 1;
}

.service-generator--2026 .service-output--creative-technology .service-output__copy {
	text-shadow: 0 2px 26px rgba(0, 4, 53, .74);
}

.creative-story-scene {
	position: absolute;
	inset: 0;
	isolation: isolate;
	background: #000435;
}

.creative-story-scene__photo {
	position: absolute;
	inset: -3%;
	background-image: url("../images/ui/creative-technology-woman-clean.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transform: translate3d(0, var(--creative-photo-y, 32px), 0) scale(1.025);
	transform-origin: 50% 50%;
	will-change: transform;
}

.creative-story-scene__shade {
	position: absolute;
	z-index: 1;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(0, 4, 53, .99) 0%, rgba(0, 4, 53, .86) 32%, rgba(0, 4, 53, .3) 54%, rgba(0, 4, 53, .04) 100%),
		linear-gradient(0deg, rgba(0, 4, 53, .32), transparent 44%, rgba(0, 4, 53, .08));
}

.creative-story {
	position: absolute;
	z-index: 2;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.creative-story__touch {
	opacity: var(--creative-touch, 0);
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(var(--creative-touch, 0));
	filter: url(#creativeStoryGlow);
}

.creative-story__touch-ring {
	fill: rgba(111, 95, 255, .13);
	stroke: #b5a1ff;
	stroke-width: 2;
}

.creative-story__touch-core {
	fill: #f3eeff;
	stroke: #8975ff;
	stroke-width: 5;
}

.creative-story__field {
	transform-box: view-box;
	transform-origin: 1040px 301px;
	transform: scale(var(--creative-field-scale, 1));
	opacity: var(--creative-field-opacity, 1);
	will-change: transform, opacity;
}

.creative-story__stage {
	opacity: var(--creative-stage, 0);
}

.creative-story__stage--1 { --creative-stage: var(--creative-stage-1, 0); }
.creative-story__stage--2 { --creative-stage: var(--creative-stage-2, 0); }
.creative-story__stage--3 { --creative-stage: var(--creative-stage-3, 0); }
.creative-story__stage--4 { --creative-stage: var(--creative-stage-4, 0); }
.creative-story__stage--5 { --creative-stage: var(--creative-stage-5, 0); }
.creative-story__stage--6 { --creative-stage: var(--creative-stage-6, 0); }
.creative-story__stage--7 { --creative-stage: var(--creative-stage-7, 0); }

.creative-story__main-frame rect,
.creative-story__device > rect:first-child,
.creative-story__code-card > rect,
.creative-story__analytics-card > rect {
	fill: url(#creativeStoryGlass);
	stroke: #776fff;
	stroke-width: 1.7;
	filter: url(#creativeStoryGlow);
}

.creative-story__main-frame path,
.creative-story__main-frame circle,
.creative-story__main-content path,
.creative-story__analytics-card path,
.creative-story__analytics-card circle {
	fill: none;
	stroke: #a797ff;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.creative-story__main-frame circle {
	fill: #a797ff;
	stroke: none;
}

.creative-story__main-nav rect,
.creative-story__main-content rect,
.creative-story__device rect:not(:first-child) {
	fill: rgba(112, 103, 255, .26);
	stroke: rgba(175, 162, 255, .48);
	stroke-width: 1;
}

.creative-story__code-card path {
	fill: none;
	stroke: url(#creativeStoryAccent);
	stroke-width: 3;
	stroke-linecap: round;
}

.creative-story__device circle {
	fill: #9c8cff;
	filter: url(#creativeStoryGlow);
}

.creative-story__connector {
	fill: none;
	stroke: url(#creativeStoryLine);
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: calc(1 - var(--creative-stage, 0));
	filter: url(#creativeStoryGlow);
}

.creative-story__nodes circle,
.creative-story__signal {
	fill: #a99aff;
	stroke: #ebe5ff;
	stroke-width: 2;
	filter: url(#creativeStoryGlow);
}

.creative-story__signal {
	opacity: var(--creative-signal-opacity, 0);
	transform-box: fill-box;
	will-change: transform;
}

.creative-story__signal--a {
	transform: translate3d(var(--creative-signal-a-x, 0px), var(--creative-signal-a-y, 0px), 0);
}

.creative-story__signal--b {
	transform: translate3d(var(--creative-signal-b-x, 0px), var(--creative-signal-b-y, 0px), 0);
}

@media (prefers-reduced-motion: reduce) {
	.service-generator--2026 .service-output--creative-technology .service-visual--creative-story {
		position: relative;
		inset: auto;
		width: min(100%, 760px);
		height: auto;
		aspect-ratio: 16 / 9;
		margin: 50px auto 0;
		transform: none !important;
		opacity: .9;
	}

	.creative-story-scene__photo {
		transform: scale(1.025);
	}
}

/* ============================================================
   GROWTH & PERFORMANCE — SCROLL-DRIVEN MOMENTUM ENGINE
   Dashboard frames, bars, pies and the performance line build from the
   fingertip. The system then becomes one signal that continues downward
   into the next section.
   ============================================================ */

.service-generator--2026 .service-output--growth .service-visual--growth-story {
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	transform: none !important;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	transition: opacity .68s ease;
}

.service-generator--2026 .service-output--growth.is-active .service-visual--growth-story {
	opacity: 1;
}

.service-generator--2026 .service-output--growth .service-output__copy {
	text-shadow: 0 2px 26px rgba(0, 4, 53, .76);
}

.growth-story-scene {
	position: absolute;
	inset: 0;
	isolation: isolate;
	background: #000435;
}

.growth-story-scene__photo {
	position: absolute;
	inset: -3%;
	background-image: url("../images/ui/growth-performance-woman-clean.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transform: translate3d(0, var(--growth-photo-y, 32px), 0) scale(1.025);
	transform-origin: 50% 50%;
	will-change: transform;
}

.growth-story-scene__shade {
	position: absolute;
	z-index: 1;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(0, 4, 53, .99) 0%, rgba(0, 4, 53, .86) 32%, rgba(0, 4, 53, .31) 55%, rgba(0, 4, 53, .04) 100%),
		linear-gradient(0deg, rgba(0, 4, 53, .34), transparent 44%, rgba(0, 4, 53, .08));
}

.growth-story {
	position: absolute;
	z-index: 2;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.growth-story__touch {
	opacity: var(--growth-touch, 0);
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(var(--growth-touch, 0));
	filter: url(#growthStoryGlow);
}

.growth-story__touch-ring {
	fill: rgba(191, 239, 155, .12);
	stroke: #d7ffac;
	stroke-width: 2;
}

.growth-story__touch-core {
	fill: #f5ffdd;
	stroke: #bfe895;
	stroke-width: 5;
}

.growth-story__field {
	transform-box: view-box;
	transform-origin: 1510px 322px;
	transform: scale(var(--growth-field-scale, 1));
	opacity: var(--growth-field-opacity, 1);
	will-change: transform, opacity;
}

.growth-story__stage {
	opacity: var(--growth-stage, 0);
}

.growth-story__stage--1 { --growth-stage: var(--growth-stage-1, 0); }
.growth-story__stage--2 { --growth-stage: var(--growth-stage-2, 0); }
.growth-story__stage--3 { --growth-stage: var(--growth-stage-3, 0); }
.growth-story__stage--4 { --growth-stage: var(--growth-stage-4, 0); }
.growth-story__stage--5 { --growth-stage: var(--growth-stage-5, 0); }
.growth-story__stage--6 { --growth-stage: var(--growth-stage-6, 0); }
.growth-story__stage--7 { --growth-stage: var(--growth-stage-7, 0); }

.growth-story__main-frame rect,
.growth-story__bar-card > rect,
.growth-story__pie-card > rect,
.growth-story__kpi-card > rect {
	fill: url(#growthStoryGlass);
	stroke: #a8d483;
	stroke-width: 1.6;
	filter: url(#growthStoryGlow);
}

.growth-story__main-frame path,
.growth-story__main-frame circle,
.growth-story__grid path,
.growth-story__bar-card > path,
.growth-story__pie-card > path,
.growth-story__kpi-card > path {
	fill: none;
	stroke: rgba(205, 242, 171, .66);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.growth-story__main-frame circle {
	fill: #c6eda3;
	stroke: none;
}

.growth-story__grid path {
	stroke: rgba(183, 222, 148, .16);
	stroke-width: 1;
}

.growth-story__bars rect {
	fill: url(#growthStoryBars);
	transform-box: fill-box;
	transform-origin: center bottom;
	transform: scaleY(var(--growth-bars-progress, 0));
	filter: url(#growthStoryGlow);
}

.growth-story__pie-track,
.growth-story__kpi-track {
	fill: none;
	stroke: rgba(187, 226, 153, .18);
	stroke-width: 13;
}

.growth-story__pie-value,
.growth-story__kpi-value {
	fill: none;
	stroke: url(#growthStoryLine);
	stroke-width: 13;
	stroke-linecap: round;
	stroke-dasharray: 1;
	filter: url(#growthStoryGlow);
}

.growth-story__pie-value {
	stroke-dashoffset: calc(1 - var(--growth-pie-progress, 0));
	transform: rotate(-90deg);
	transform-box: view-box;
	transform-origin: 1530px 532px;
}

.growth-story__kpi-value {
	stroke-dashoffset: calc(1 - var(--growth-kpi-progress, 0));
	transform: rotate(-90deg);
	transform-box: view-box;
	transform-origin: 1390px 102px;
}

.growth-story__trend-line,
.growth-story__trend-arrow,
.growth-story__connector {
	fill: none;
	stroke: url(#growthStoryLine);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: url(#growthStoryGlow);
}

.growth-story__trend-line {
	stroke-dasharray: 1;
	stroke-dashoffset: calc(1 - var(--growth-trend-progress, 0));
}

.growth-story__trend-arrow {
	opacity: var(--growth-trend-progress, 0);
}

.growth-story__connector {
	stroke-width: 1.7;
	stroke-dasharray: 1;
	stroke-dashoffset: calc(1 - var(--growth-stage, 0));
}

.growth-story__nodes circle,
.growth-story__signal,
.growth-story__exit-signal {
	fill: #c9efa5;
	stroke: #f4ffdf;
	stroke-width: 2;
	filter: url(#growthStoryGlow);
}

.growth-story__signal {
	opacity: var(--growth-signal-opacity, 0);
	transform-box: fill-box;
	will-change: transform;
}

.growth-story__signal--a {
	transform: translate3d(var(--growth-signal-a-x, 0px), var(--growth-signal-a-y, 0px), 0);
}

.growth-story__signal--b {
	transform: translate3d(var(--growth-signal-b-x, 0px), var(--growth-signal-b-y, 0px), 0);
}

.growth-story__exit-signal {
	opacity: var(--growth-exit-opacity, 0);
	transform: translate3d(var(--growth-exit-x, 0px), var(--growth-exit-y, 0px), 0);
	will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
	.service-generator--2026 .service-output--growth .service-visual--growth-story {
		position: relative;
		inset: auto;
		width: min(100%, 760px);
		height: auto;
		aspect-ratio: 16 / 9;
		margin: 50px auto 0;
		transform: none !important;
		opacity: .9;
	}

	.growth-story-scene__photo {
		transform: scale(1.025);
	}
}
/* ============================================================
   08 + 09 — START A PROJECT / FOOTER COLOUR CONTINUITY
   Final visual refinement only.
   Keeps existing layout, copy, scroll behaviour and interactions.
   ============================================================ */

/* ------------------------------------------------------------
   START A PROJECT — bring the closing CTA back into the same
   Trinovik navy / violet / purple world used across the homepage.
   ------------------------------------------------------------ */

.project-convergence--2026 {
	background: #000435;
}

.project-convergence--2026 .project-convergence__sticky {
	background:
		radial-gradient(
			circle at 74% 46%,
			rgba(112, 48, 143, .30) 0%,
			rgba(112, 48, 143, .14) 24%,
			transparent 47%
		),
		radial-gradient(
			circle at 52% 54%,
			rgba(91, 116, 184, .18) 0%,
			rgba(91, 116, 184, .08) 30%,
			transparent 54%
		),
		linear-gradient(
			118deg,
			#000435 0%,
			#050724 38%,
			#10082c 68%,
			#2b103f 100%
		);
}

.project-convergence--2026 .project-convergence__glow {
	background:
		radial-gradient(
			circle,
			rgba(112, 48, 143, .24) 0%,
			rgba(91, 116, 184, .14) 34%,
			rgba(112, 48, 143, .07) 52%,
			transparent 72%
		);
}

.project-convergence--2026 .project-convergence__path {
	stroke: rgba(91, 116, 184, .42);
}

.project-convergence--2026 .project-convergence__ring--outer {
	border-color: rgba(112, 48, 143, .48);
}

.project-convergence--2026 .project-convergence__ring--outer::before {
	background: #c2deaa;
	box-shadow:
		0 0 12px rgba(194, 222, 170, .60),
		0 0 32px rgba(112, 48, 143, .42);
}

.project-convergence--2026 .project-convergence__ring--inner {
	border-color: rgba(91, 116, 184, .32);
}

.project-convergence--2026 .project-convergence__cta {
	background:
		radial-gradient(
			circle at 32% 27%,
			rgba(255, 255, 255, .92),
			transparent 8%
		),
		linear-gradient(
			145deg,
			#5b74b8 0%,
			#3b4d9f 30%,
			#70308f 68%,
			#160b2d 100%
		);

	box-shadow:
		inset -25px -28px 50px rgba(0, 0, 0, .30),
		0 25px 90px rgba(91, 116, 184, .18),
		0 0 95px rgba(112, 48, 143, .20);
}

.project-convergence--2026 .project-convergence__bottom {
	border-top-color: rgba(112, 48, 143, .24);
}

.project-convergence--2026 .project-convergence__bottom-line {
	background: rgba(91, 116, 184, .24);
}

/* ------------------------------------------------------------
   FOOTER — continue naturally from the closing CTA instead of
   switching into a separate blue field.
   ------------------------------------------------------------ */

.signal-footer--2026 {
	background:
		radial-gradient(
			circle at 72% 22%,
			rgba(112, 48, 143, .22) 0%,
			rgba(112, 48, 143, .09) 28%,
			transparent 50%
		),
		radial-gradient(
			circle at 28% 72%,
			rgba(91, 116, 184, .10) 0%,
			transparent 42%
		),
		linear-gradient(
			150deg,
			#050724 0%,
			#080622 48%,
			#16092d 100%
		);
}

.signal-footer--2026::before {
	width: min(70vw, 980px);
	height: min(70vw, 980px);
	left: 74%;
	top: 36%;
	background:
		radial-gradient(
			circle at 46% 42%,
			rgba(91, 116, 184, .11) 0%,
			transparent 40%
		),
		radial-gradient(
			circle at 58% 52%,
			rgba(112, 48, 143, .20) 0%,
			transparent 60%
		);
	filter: blur(66px);
	opacity: .82;
}

.signal-footer--2026 .signal-footer__grid,
.signal-footer--2026 .signal-footer__navigation {
	border-color: rgba(112, 48, 143, .22);
}

.signal-footer--2026 .signal-footer__services a {
	border-color: rgba(91, 116, 184, .15);
}

/* ------------------------------------------------------------
   MALAYSIA-ONLY FOOTER GRID
   Australia is removed in footer.php; this keeps the remaining
   two columns intentionally balanced rather than leaving a gap.
   ------------------------------------------------------------ */

@media (min-width: 1001px) {
	.signal-footer--2026 .signal-footer__grid {
		grid-template-columns:
			minmax(0, 1.15fr)
			minmax(320px, .85fr);
		gap: clamp(70px, 9vw, 150px);
	}

	.signal-footer--2026 .signal-footer__column--office {
		width: min(100%, 430px);
		justify-self: end;
	}
}

@media (max-width: 1000px) {
	.signal-footer--2026 .signal-footer__grid {
		grid-template-columns: 1fr;
	}

	.signal-footer--2026 .signal-footer__column--services {
		grid-column: auto;
	}

	.signal-footer--2026 .signal-footer__column--office {
		width: min(100%, 520px);
	}
}

@media (max-width: 680px) {
	.project-convergence--2026 .project-convergence__sticky {
		background:
			radial-gradient(
				circle at 70% 38%,
				rgba(112, 48, 143, .24) 0%,
				transparent 48%
			),
			linear-gradient(
				155deg,
				#000435 0%,
				#070625 54%,
				#1d0b34 100%
			);
	}

	.signal-footer--2026 {
		background:
			radial-gradient(
				circle at 72% 24%,
				rgba(112, 48, 143, .18) 0%,
				transparent 46%
			),
			linear-gradient(
				155deg,
				#050724 0%,
				#090622 56%,
				#130829 100%
			);
	}
}

/* ============================================================
   08 — START A PROJECT / MIDNIGHT VIOLET + SMOKY BLUE FINAL
   Visual refinement only.
   Keeps the existing convergence layout, copy, animation and
   interaction timing unchanged.
   ============================================================ */

/* ------------------------------------------------------------
   Smaller closing headline
   ------------------------------------------------------------ */

.project-convergence--2026 .project-convergence__headline h2 {
	font-size:
		clamp(
			3.7rem,
			7vw,
			7.4rem
		);

	line-height: .79;
}


/* ------------------------------------------------------------
   Main background atmosphere
   Deep navy → smoky blue → muted violet / purple.
   ------------------------------------------------------------ */

.project-convergence--2026 {
	background: #050724;
}

.project-convergence--2026 .project-convergence__sticky {
	background:
		radial-gradient(
			circle at 43% 50%,
			rgba(91, 116, 184, .28) 0%,
			rgba(45, 70, 114, .17) 24%,
			transparent 48%
		),
		radial-gradient(
			circle at 75% 49%,
			rgba(112, 48, 143, .27) 0%,
			rgba(112, 48, 143, .12) 25%,
			transparent 48%
		),
		radial-gradient(
			circle at 58% 54%,
			rgba(246, 243, 250, .055) 0%,
			transparent 30%
		),
		linear-gradient(
			112deg,
			#050724 0%,
			#08102f 28%,
			#18294c 48%,
			#2d4672 61%,
			#33214f 79%,
			#4a235f 100%
		);
}


/* ------------------------------------------------------------
   Controlled centre illumination — no bright white wash.
   ------------------------------------------------------------ */

.project-convergence--2026 .project-convergence__glow {
	background:
		radial-gradient(
			circle,
			rgba(91, 116, 184, .25) 0%,
			rgba(45, 70, 114, .15) 32%,
			rgba(112, 48, 143, .085) 52%,
			transparent 72%
		);
}


/* ------------------------------------------------------------
   Signal paths
   ------------------------------------------------------------ */

.project-convergence--2026 .project-convergence__path {
	stroke: rgba(91, 116, 184, .38);
}


/* ------------------------------------------------------------
   Preserve the approved lime emphasis.
   ------------------------------------------------------------ */

.project-convergence--2026 .project-convergence__headline em {
	color: #c2deaa;
	text-shadow:
		0 0 34px rgba(194, 222, 170, .085);
}


/* ------------------------------------------------------------
   CTA orbit system
   ------------------------------------------------------------ */

.project-convergence--2026 .project-convergence__ring--outer {
	border-color: rgba(112, 48, 143, .44);
}

.project-convergence--2026 .project-convergence__ring--outer::before {
	background: #c2deaa;
	box-shadow:
		0 0 10px rgba(194, 222, 170, .52),
		0 0 28px rgba(112, 48, 143, .34);
}

.project-convergence--2026 .project-convergence__ring--inner {
	border-color: rgba(91, 116, 184, .34);
}


/* ------------------------------------------------------------
   Start Project sphere
   Darker glass sphere matching the approved mockup.
   ------------------------------------------------------------ */

.project-convergence--2026 .project-convergence__cta {
	background:
		radial-gradient(
			circle at 31% 26%,
			rgba(246, 243, 250, .46),
			transparent 9%
		),
		radial-gradient(
			circle at 40% 34%,
			rgba(91, 116, 184, .30),
			transparent 33%
		),
		linear-gradient(
			145deg,
			#233967 0%,
			#2d4672 28%,
			#4b2d69 54%,
			#70308f 73%,
			#160b2d 100%
		);

	box-shadow:
		inset -24px -28px 50px rgba(0, 0, 0, .30),
		inset 15px 12px 28px rgba(246, 243, 250, .045),
		0 24px 80px rgba(45, 70, 114, .20),
		0 0 72px rgba(112, 48, 143, .17);
}

/* ------------------------------------------------------------
   Supporting UI / dividers
   ------------------------------------------------------------ */

.project-convergence--2026 .project-convergence__bottom {
	border-top-color: rgba(91, 116, 184, .24);
}

.project-convergence--2026 .project-convergence__bottom-line {
	background: rgba(91, 116, 184, .22);
}


/* ------------------------------------------------------------
   Tablet
   ------------------------------------------------------------ */

@media (max-width: 1000px) {

	.project-convergence--2026 .project-convergence__headline h2 {
		font-size:
			clamp(
				3.6rem,
				9.2vw,
				6.15rem
			);
	}

}


/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media (max-width: 680px) {

	.project-convergence--2026 .project-convergence__sticky {
		background:
			radial-gradient(
				circle at 48% 40%,
				rgba(91, 116, 184, .23) 0%,
				transparent 42%
			),
			radial-gradient(
				circle at 76% 65%,
				rgba(112, 48, 143, .22) 0%,
				transparent 45%
			),
			linear-gradient(
				150deg,
				#050724 0%,
				#101a3a 48%,
				#33214f 76%,
				#4a235f 100%
			);
	}

	.project-convergence--2026 .project-convergence__headline h2 {
		font-size:
			clamp(
				3rem,
				13.5vw,
				4.45rem
			);

		line-height: .82;
	}

}