/* ============================================================
   TRINOVIK LABS — RESPONSIVE PRESENTATION LAYER

   This file is intentionally loaded after main.css, home-2026.css and
   motion-v4.css. All rules are breakpoint-scoped so the approved desktop
   experience at 1025px and above remains unchanged.
   ============================================================ */


/* ============================================================
   01 — MOBILE / NORMAL-FLOW STORY
   ============================================================ */

@media (max-width: 680px) {

	/* Keep oversized decorative layers from creating a clipped page rail. */
	html,
	body,
	.site,
	.site-main {
		max-width: 100%;
	}


	/* --------------------------------------------------------
	   Header
	   -------------------------------------------------------- */

	.site-header.site-header--minimal,
	.site-header.site-header--minimal.is-scrolled {
		padding-inline: 16px;
	}

	.site-header--minimal .site-header__inner {
		gap: 8px;
	}

	.site-header--minimal .site-logo--image {
		flex: 0 1 auto;
		width: clamp(84px, 27vw, 108px);
		min-width: 0;
	}

	.site-header--minimal .site-header__controls {
		flex: 0 0 auto;
		gap: 7px;
	}

	.site-header--minimal .site-header__project-link {
		flex: 0 0 auto;
		gap: 6px;
		min-height: 36px;
		padding: 4px 5px 4px 11px;
		font-size: 10px;
		white-space: nowrap;
	}

	.site-header--minimal .site-header__project-node {
		width: 26px;
		height: 26px;
	}

	.site-header--minimal .menu-toggle {
		flex: 0 0 38px;
		width: 38px;
	}

	.site-header--minimal .menu-toggle::before {
		inset: -4px;
	}

	.site-header--minimal .menu-toggle span {
		width: 27px;
	}

	.site-header--minimal .menu-toggle span:nth-child(2) {
		width: 20px;
		margin-left: 7px;
	}


	/* --------------------------------------------------------
	   Hero — allow short phones to scroll instead of clipping copy.
	   -------------------------------------------------------- */

	.signal-hero--identity-reveal,
	.signal-hero--identity-reveal .signal-hero__inner {
		min-height: max(100svh, 620px);
	}

	.signal-hero--identity-reveal {
		height: auto;
		overflow: clip;
	}

	.signal-hero--identity-reveal .signal-hero__inner {
		padding-top: 74px;
		padding-bottom: 18px;
	}

	.signal-hero--identity-reveal .signal-hero__stage {
		min-height: clamp(245px, 42svh, 360px);
	}

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

	.signal-hero--identity-reveal .signal-hero__message-main h1 {
		width: min(100%, 410px);
		margin-bottom: 16px;
		font-size: clamp(1.65rem, 8.7vw, 2.55rem);
		line-height: .96;
		white-space: normal;
		text-wrap: balance;
	}

	.signal-hero--identity-reveal .signal-hero__message-main > p {
		width: min(100%, 390px);
		font-size: clamp(13px, 3.55vw, 14px);
		line-height: 1.48;
	}

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

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

	.signal-hero--identity-reveal .signal-hero__scroll {
		padding: 7px 4px 7px 10px;
		gap: 9px;
	}

	.signal-hero__scroll-track {
		width: 22px;
		height: 31px;
	}


	/* --------------------------------------------------------
	   Our DNA — same three-part story, readable normal flow.
	   -------------------------------------------------------- */

	.trinovik-method--dna {
		overflow: clip;
	}

	.trinovik-method--dna .method-panel,
	.trinovik-method--dna .method-panel h3,
	.trinovik-method--dna .method-panel h3 span {
		max-width: 100%;
	}

	.trinovik-method--dna .method-panel h3,
	.trinovik-method--dna .method-panel--creative-technology h3 {
		min-height: 0;
		font-size: clamp(3rem, 14vw, 4.45rem);
		line-height: .84;
		letter-spacing: -.07em;
		transform: none;
	}

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

	.trinovik-method--dna .method-panel__secondary {
		transform: none;
	}


	/* --------------------------------------------------------
	   Services — protect long service names and coded visuals.
	   -------------------------------------------------------- */

	.service-generator--2026,
	.service-generator--2026 .service-generator__sticky,
	.service-generator--2026 .service-generator__stage,
	.service-generator--2026 .service-output,
	.service-generator--2026 .service-output__copy {
		max-width: 100%;
	}

	.service-generator--2026 {
		overflow: clip;
	}

	.service-generator--2026 .service-output__copy h3 {
		max-width: 100%;
		font-size: clamp(3rem, 14vw, 4.35rem);
		line-height: .84;
		letter-spacing: -.07em;
	}

	.service-generator--2026
	.service-output--creative-technology
	.service-output__copy h3,
	.service-generator--2026
	.service-output--growth
	.service-output__copy h3 {
		font-size: clamp(2.5rem, 12vw, 3.65rem);
		line-height: .88;
	}

	.service-generator--2026 .service-output__copy h3 span {
		max-width: 100%;
	}

	.service-generator--2026 .service-visual {
		max-width: 100%;
		overflow: clip;
	}

	/* --------------------------------------------------------
	   Selected Work
	   -------------------------------------------------------- */

	.cinema-work,
	.cinema-work__sticky,
	.cinema-work__stage,
	.cinema-project {
		max-width: 100%;
	}

	.cinema-project {
		overflow: clip;
	}

	.cinema-work__intro h2 {
		font-size: clamp(2.35rem, 11vw, 3.9rem);
	}

	.cinema-project__copy h3 {
		max-width: 100%;
		font-size: clamp(2.15rem, 10.2vw, 3.65rem);
		line-height: .94;
		letter-spacing: -.04em;
	}


	/* --------------------------------------------------------
	   Clients, Why Trinovik, closing CTA and footer.
	   -------------------------------------------------------- */

	.client-marquee--2026 .client-marquee__intro--2026 h2 {
		font-size: clamp(2.35rem, 10.8vw, 3.65rem);
	}

	.why-trinovik-2026__copy h2 {
		font-size: clamp(2.45rem, 11vw, 3.8rem);
	}

	.why-trinovik-2026__system {
		width: 100%;
		max-width: 100%;
		overflow: clip;
	}

	.project-convergence--2026 .project-convergence__headline h2 {
		font-size: clamp(3.05rem, 14.2vw, 4.65rem);
	}

	.signal-footer--2026 .signal-footer__services a,
	.signal-footer--2026 .signal-footer__column--office,
	.signal-footer--2026 address {
		min-width: 0;
		overflow-wrap: anywhere;
	}
}

/* ============================================================
   AI SERVICE STORY — COMPACT NORMAL-FLOW PRESENTATION
   Mobile and shallow landscape screens show the completed story as a
   cinematic card. Desktop keeps the full scroll-controlled composition.
   ============================================================ */

@media (max-width: 680px), (max-width: 1024px) and (max-height: 600px) {
	.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: 42px auto 0;
		transform: none !important;
		opacity: .92;
		border: 1px solid rgba(99, 213, 255, .16);
		border-radius: 18px;
	}

	.service-generator--2026 .service-output--ai .ai-story-scene__photo {
		inset: -2%;
		background-position: center;
		transform: scale(1.035) !important;
	}

	.service-generator--2026 .service-output--ai .ai-story-scene__shade {
		background: linear-gradient(90deg, rgba(0, 4, 53, .48), rgba(0, 4, 53, .04));
	}

	.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: 42px auto 0;
		transform: none !important;
		opacity: .92;
		border: 1px solid rgba(218, 105, 255, .16);
		border-radius: 18px;
	}

	.service-generator--2026 .service-output--brand-content .brand-story-scene__photo {
		inset: -2%;
		background-position: center;
		transform: scale(1.03) !important;
	}

	.service-generator--2026 .service-output--brand-content .brand-story-scene__shade {
		background: linear-gradient(90deg, rgba(0, 4, 53, .5), rgba(0, 4, 53, .03));
	}

	.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: 42px auto 0;
		transform: none !important;
		opacity: .92;
		border: 1px solid rgba(126, 113, 255, .16);
		border-radius: 18px;
	}

	.service-generator--2026 .service-output--creative-technology .creative-story-scene__photo {
		inset: -2%;
		background-position: center;
		transform: scale(1.03) !important;
	}

	.service-generator--2026 .service-output--creative-technology .creative-story-scene__shade {
		background: linear-gradient(90deg, rgba(0, 4, 53, .5), rgba(0, 4, 53, .03));
	}

	.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: 42px auto 0;
		transform: none !important;
		opacity: .92;
		border: 1px solid rgba(197, 234, 160, .16);
		border-radius: 18px;
	}

	.service-generator--2026 .service-output--growth .growth-story-scene__photo {
		inset: -2%;
		background-position: center;
		transform: scale(1.03) !important;
	}

	.service-generator--2026 .service-output--growth .growth-story-scene__shade {
		background: linear-gradient(90deg, rgba(0, 4, 53, .52), rgba(0, 4, 53, .03));
	}
}


/* Extra-small phones: keep all three header controls on one row. */
@media (max-width: 360px) {
	.site-header.site-header--minimal,
	.site-header.site-header--minimal.is-scrolled {
		padding-inline: 14px;
	}

	.site-header--minimal .site-logo--image {
		width: clamp(78px, 26vw, 94px);
	}

	.site-header--minimal .site-header__project-link {
		font-size: 9px;
		padding-left: 9px;
	}

	.site-header--minimal .site-header__project-node {
		width: 24px;
		height: 24px;
	}

	.site-header--minimal .menu-toggle {
		flex-basis: 34px;
		width: 34px;
	}

	.trinovik-method--dna .method-panel h3,
	.trinovik-method--dna .method-panel--creative-technology h3 {
		font-size: clamp(2.8rem, 13.5vw, 3.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(2.25rem, 11.5vw, 2.8rem);
	}
}


/* ============================================================
   02 — TABLET PORTRAIT FIT
   Preserve the cinematic state transitions; only protect geometry.
   ============================================================ */

@media (min-width: 681px) and (max-width: 1024px) and (min-height: 601px) {
	.trinovik-method--dna .method-panel,
	.service-generator--2026 .service-output__copy,
	.cinema-project__copy {
		max-width: calc(100vw - 2 * var(--page-padding));
	}

	.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.55rem, 7.2vw, 5.4rem);
	}

	.why-trinovik-2026__layout {
		min-width: 0;
	}
}


/* ============================================================
   03 — SHORT TABLET / MOBILE LANDSCAPE

   A 100svh sticky scene cannot safely contain the desktop composition on a
   shallow screen. Use the same semantic order as mobile so every story beat
   remains present and readable. Desktops (1025px+) are excluded.
   ============================================================ */

@media (max-width: 1024px) and (max-height: 600px) {

	/* Neutralise V4 scroll transforms in the normal-flow layout. */
	html.v4-motion-enabled .signal-hero__inner,
	html.v4-motion-enabled .signal-hero__bottom,
	html.v4-motion-enabled .trinovik-method__intro,
	html.v4-motion-enabled .trinovik-method__top,
	html.v4-motion-enabled .trinovik-method__bottom,
	html.v4-motion-enabled .service-generator__top,
	html.v4-motion-enabled .service-generator__intro,
	html.v4-motion-enabled .service-generator__bottom,
	html.v4-motion-enabled .why-trinovik-2026__system {
		transform: none !important;
		filter: none !important;
		opacity: 1 !important;
	}

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

	.service-work-relay {
		display: none !important;
	}


	/* Hero becomes a scrollable opening scene rather than a clipped viewport. */
	.signal-hero--identity-reveal,
	.signal-hero--identity-reveal .signal-hero__inner {
		min-height: 640px;
	}

	.signal-hero--identity-reveal {
		height: auto;
		overflow: clip;
	}

	.signal-hero--identity-reveal .signal-hero__inner {
		padding-top: 74px;
		padding-bottom: 20px;
	}

	.signal-hero--identity-reveal .signal-hero__stage {
		min-height: 255px;
	}


	/* Our DNA */
	.trinovik-method--dna {
		height: auto;
		padding: 82px var(--page-padding) 72px;
		overflow: clip;
	}

	.trinovik-method--dna .trinovik-method__sticky {
		position: relative;
		top: auto;
		height: auto;
		overflow: visible;
		padding: 0;
	}

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

	.trinovik-method--dna .trinovik-method__intro {
		position: relative;
		inset: auto;
		margin-bottom: 60px;
	}

	.trinovik-method--dna .trinovik-method__stage {
		position: relative;
		inset: auto;
		display: flex;
		flex-direction: column;
		gap: 76px;
	}

	.trinovik-method--dna .method-panel,
	.trinovik-method--dna .method-panel.is-active {
		position: relative;
		inset: auto;
		width: 100%;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.trinovik-method--dna .method-panel h3,
	.trinovik-method--dna .method-panel--creative-technology h3 {
		min-height: 0;
		font-size: clamp(3.2rem, 8vw, 5rem);
		line-height: .84;
		transform: none;
	}

	.trinovik-method--dna .method-panel--creative-technology h3 span {
		margin-top: .12em;
		margin-left: clamp(20px, 4vw, 42px);
	}

	.trinovik-method--dna .method-panel__number {
		top: -24px;
		right: 0;
		font-size: clamp(8rem, 24vw, 13rem);
	}

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

	.trinovik-method--dna .trinovik-method__bottom {
		position: relative;
		inset: auto;
		margin-top: 72px;
	}

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


	/* Services */
	.service-generator--2026 {
		height: auto;
		overflow: clip;
	}

	.service-generator--2026 .service-generator__sticky {
		position: relative;
		top: auto;
		height: auto;
		overflow: visible;
		padding: 82px var(--page-padding) 72px;
	}

	.service-generator--2026 .service-generator__intro {
		position: relative;
		inset: auto;
		max-width: 720px;
		margin: 42px 0 66px;
	}

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

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

	.service-generator--2026 .service-output__copy {
		position: relative;
		inset: auto;
		max-width: 720px;
		transform: 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.25rem, 7.4vw, 4.8rem);
	}

	.service-generator--2026 .service-visual {
		position: relative;
		inset: auto;
		width: min(100%, 430px);
		max-width: 100%;
		margin: 34px auto 0;
		opacity: .8;
		transform: none !important;
		overflow: clip;
	}

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


	/* Selected Work */
	.cinema-work {
		height: auto;
		overflow: clip;
	}

	.cinema-work__sticky {
		position: relative;
		top: auto;
		height: auto;
		overflow: visible;
		padding: 82px var(--page-padding) 72px;
	}

	.cinema-work__intro {
		position: relative;
		inset: auto;
		display: block;
		padding: 20px 0 68px;
		opacity: 1 !important;
		transform: none !important;
	}

	.cinema-work__intro h2 {
		font-size: clamp(2.8rem, 7vw, 4.6rem);
	}

	.cinema-work__top {
		position: relative;
		inset: auto;
		margin-bottom: 50px;
		opacity: 1 !important;
	}

	.cinema-work__stage {
		position: relative;
		inset: auto;
		display: flex;
		flex-direction: column;
		gap: 72px;
		opacity: 1 !important;
	}

	.cinema-project,
	.cinema-project.is-active {
		position: relative;
		inset: auto;
		min-height: 520px;
		opacity: 1;
		visibility: visible;
		transform: none;
		overflow: clip;
	}

	.cinema-project__media {
		position: absolute;
		inset: 0;
	}

	.cinema-project__copy {
		left: 24px;
		right: 24px;
		top: auto;
		bottom: 76px;
		max-width: none;
		transform: none;
	}

	.cinema-project__copy h3 {
		font-size: clamp(2.5rem, 6.3vw, 4rem);
	}

	.cinema-project__copy h3 span {
		opacity: 1;
		transform: none;
	}

	/* Why Trinovik */
	.why-trinovik-2026 {
		padding-top: 82px;
		padding-bottom: 78px;
	}

	.why-trinovik-2026__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.why-trinovik-2026__system {
		width: min(100%, 720px);
		min-height: 500px;
		margin-inline: auto;
	}


	/* Closing CTA */
	.project-convergence--2026 {
		height: auto;
		min-height: 640px;
	}

	.project-convergence--2026 .project-convergence__sticky {
		position: relative;
		top: auto;
		height: auto;
		min-height: 640px;
		padding: 82px var(--page-padding) 32px;
	}

	.project-convergence--2026 .project-convergence__inner {
		width: 100%;
		height: auto;
		min-height: 526px;
		padding: 0;
		display: flex;
		flex-direction: column;
	}

	.project-convergence--2026 .project-convergence__headline {
		position: relative;
		inset: auto;
		width: min(68%, 620px);
		margin: auto 0 38px;
		padding-top: 52px;
		transform: none;
	}

	.project-convergence--2026 .project-convergence__headline h2 {
		font-size: clamp(3.1rem, 7.6vw, 5.1rem);
	}

	.project-convergence--2026 .project-convergence__destination {
		position: relative;
		inset: auto;
		width: 150px;
		margin: 0 0 42px auto;
		transform: none;
		opacity: 1;
	}

	.project-convergence--2026 .project-convergence__bottom {
		position: relative;
		inset: auto;
		margin-top: auto;
	}
}


/* ============================================================
   04 — SCALED LAPTOP / MACBOOK ANTI-OVERLAP

   A physically large display can expose a much smaller CSS viewport when
   browser zoom or macOS display scaling is increased. Keep the cinematic
   sticky layout, but never crossfade two full text panels at once in that
   constrained window.
   ============================================================ */

@media (min-width: 681px) and (max-width: 1280px) and (max-height: 820px) and (prefers-reduced-motion: no-preference) {

	/* Inactive scenes become hidden immediately. The incoming scene retains
	   a short cinematic fade, so titles cannot sit on top of one another. */
	.trinovik-method--dna .method-panel {
		transition:
			opacity .26s ease,
			transform .42s cubic-bezier(.2, .8, .2, 1),
			visibility 0s linear;
	}

	.trinovik-method--dna .method-panel.is-active {
		transition:
			opacity .44s ease .06s,
			transform .58s cubic-bezier(.2, .8, .2, 1) .06s,
			visibility 0s linear;
	}

	.service-generator--2026 .service-output {
		transition:
			opacity .26s ease,
			visibility 0s linear;
	}

	.service-generator--2026 .service-output.is-active {
		transition:
			opacity .44s ease .06s,
			visibility 0s linear;
	}

	.cinema-work .cinema-project {
		transition:
			opacity .26s ease,
			transform .48s cubic-bezier(.2, .8, .2, 1),
			visibility 0s linear;
	}

	.cinema-work .cinema-project.is-active {
		transition:
			opacity .48s ease .06s,
			transform .68s cubic-bezier(.2, .8, .2, 1) .06s,
			visibility 0s linear;
	}
}


/* Slightly reduce only the oversized DNA display type in the narrow
   desktop band. The regular desktop and mobile compositions are untouched. */
@media (min-width: 1024px) and (max-width: 1280px) and (max-height: 820px) {
	.trinovik-method--dna .method-panel h3,
	.trinovik-method--dna .method-panel--creative-technology h3 {
		font-size: clamp(4.7rem, 8.6vw, 7rem);
	}
}


/* ============================================================
   05 — REDUCED MOTION SAFETY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.signal-hero__scroll-pulse {
		animation: none !important;
	}
}