@media (prefers-reduced-motion: reduce) {
	#colibri {
		display: none;
	}
	#colibri-home {
		display: block !important;
	}
}

:root:has(.dom-section.is-active:not(#section-hero)) #colibri,
:root:has(.dom-section.is-active:not(#section-hero)) #colibri-night,
:root:has(.dom-section.is-active:not(#section-hero)) #colibri-home {
	display: none !important;
	pointer-events: none !important;
}

:root:has(#section-realisations.is-active) #stage,
:root:has(#section-studio.is-active) #stage,
:root:has(#section-contact.is-active) #stage {
	display: none !important;
	pointer-events: none !important;
}

#section-realisations .split-figure,
#section-realisations .reals-hub-figure-zone,
#section-realisations .ia-figure-zone,
#section-realisations .site-figure-zone {
	display: none !important;
}
html[data-blue-theme="light"] #bar .menu-item {
	border-color: #0d394638;
	background: transparent;
}
html[data-blue-theme="light"] #bar .menu-item:hover,
html[data-blue-theme="light"] #bar .menu-item:focus-visible {
	border-color: #0d394678;
	background: transparent;
}

@media (max-width: 760px) {
	/* ── Mobile Layout: Vertically Centered Across All Stages ── */
	#section-realisations .stage-inner,
	#section-studio .stage-inner,
	.stage-inner {
		height: 100% !important;
		padding-top: calc(env(safe-area-inset-top, 0px) + 54px) !important;
		padding-bottom: calc(122px + env(safe-area-inset-bottom, 0px)) !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 10px !important;
		box-sizing: border-box !important;
	}
	#section-realisations .reals-hub-figure {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		width: 100% !important;
		height: auto !important;
		justify-content: center !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	#section-realisations .offer-head,
	#section-studio .studio-swap {
		flex: 0 0 auto !important;
		min-height: auto !important;
		height: auto !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
		margin: 0 auto !important;
		width: 100% !important;
		max-width: 360px !important;
		gap: 6px !important;
	}
	#section-realisations .offer-head-title,
	#section-studio .stage-title {
		font-size: clamp(22px, 6vw, 26px) !important;
		font-weight: 600 !important;
		line-height: 1.2 !important;
		margin: 0 !important;
		text-align: center !important;
		color: var(--blue-text) !important;
	}
	#section-realisations .offer-tagline,
	#section-realisations .reals-hub-body,
	#section-studio .lede {
		font-size: clamp(16px, 4.2vw, 17px) !important;
		line-height: 1.4 !important;
		max-width: 330px !important;
		margin: 0 auto !important;
		text-align: center !important;
		color: var(--blue-muted) !important;
	}
	#section-realisations .split-figure {
		display: none !important;
	}
	#section-realisations .reals-arrow {
		top: 55% !important;
	}
	#section-studio .stage-founder {
		display: grid !important;
		grid-template-columns: auto auto !important;
		grid-template-areas:
			"photo name"
			"photo role"
			"bio   bio"
			"links links" !important;
		align-items: center !important;
		justify-content: center !important;
		column-gap: 16px !important;
		row-gap: 4px !important;
		width: 100% !important;
		max-width: 360px !important;
		margin: 0 auto !important;
	}
	#section-studio .stage-founder .ph {
		grid-area: photo !important;
		width: 58px !important;
		height: 58px !important;
		flex: 0 0 58px !important;
		border-radius: 50% !important;
		padding: 0 !important;
		border: 1px solid var(--line-strong) !important;
		overflow: hidden !important;
		align-self: center !important;
	}
	#section-studio .stage-founder .ph img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}
	#section-studio .fd-name {
		grid-area: name !important;
		font-size: clamp(22px, 6vw, 26px) !important;
		font-weight: 600 !important;
		line-height: 1.15 !important;
		margin: 0 !important;
		text-align: left !important;
		color: var(--blue-text) !important;
	}
	#section-studio .fd-role {
		grid-area: role !important;
		font-size: 14px !important;
		letter-spacing: 0.08em !important;
		margin: 0 !important;
		text-align: left !important;
		color: var(--blue-muted) !important;
	}
	#section-studio .fd-bio-original {
		grid-area: bio !important;
		font-size: clamp(16px, 4.2vw, 17px) !important;
		line-height: 1.45 !important;
		max-width: 340px !important;
		margin: 8px auto 0 !important;
		text-align: center !important;
		color: var(--blue-muted) !important;
	}
	#section-studio .fd-linkedin {
		grid-area: links !important;
		font-size: 14px !important;
		margin: 6px 0 0 !important;
		text-align: center !important;
	}
	#section-studio .brains-figure {
		display: none !important;
		height: 0 !important;
		flex: 0 0 0 !important;
		margin: 0 !important;
	}
	#section-studio .studio-meta {
		order: 2 !important;
		flex: 0 0 auto !important;
		margin: 10px auto 0 !important;
		font-size: 14px !important;
		letter-spacing: 0.06em !important;
		opacity: 0.8 !important;
	}
	.microlabel {
		font-size: 11.5px !important;
		letter-spacing: 0.16em !important;
	}

	/* ── Mobile Duo-screens (New Morning style) ── */
	#page-siteweb .stage-inner {
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 8px !important;
		padding-top: calc(env(safe-area-inset-top, 0px) + 52px) !important;
		padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
	}
	#page-siteweb .offer-head {
		text-align: center !important;
		align-self: center !important;
		max-width: 360px !important;
		margin: 0 auto !important;
		gap: 3px !important;
	}
	#page-siteweb .workstage {
		height: auto !important;
		width: 100% !important;
		max-width: 350px !important;
		margin: 2px auto 0 !important;
		position: relative !important;
	}
	#page-siteweb .workstage .wk {
		position: static !important;
		display: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		height: auto !important;
	}
	#page-siteweb .workstage .wk.on {
		display: block !important;
	}
	#page-siteweb .workstage .duoscreens {
		height: auto !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 8px !important;
		align-items: stretch !important;
	}
	#page-siteweb .workstage .duoscreens .screen.a {
		width: 100% !important;
		height: auto !important;
	}
	#page-siteweb .workstage .duoscreens .screen.b {
		position: static !important;
		width: 88% !important;
		margin-left: auto !important;
		bottom: auto !important;
		height: auto !important;
		background: none !important;
	}
	#page-siteweb .workstage .duoscreens .screen.b .vp {
		box-shadow: none !important;
	}
	#page-siteweb .screen .vp {
		aspect-ratio: 16 / 9.5 !important;
		max-height: 105px !important;
		height: auto !important;
		border-radius: 4px !important;
		border: 1px solid rgba(255, 255, 255, 0.2) !important;
	}
	#page-siteweb .screen .plate-tag {
		font-size: 14px !important;
		margin-top: 2px !important;
		letter-spacing: 0.08em !important;
		color: var(--blue-text) !important;
	}
	#page-siteweb .screen .plate-tag a {
		color: var(--blue-accent, #75d9cc) !important;
	}
}

@media (min-width: 761px) {
	/* ── Desktop Typography & Vertical Balance ── */
	.offer-head-title,
	.stage-title {
		font-size: clamp(1.9rem, 2.6vw, 2.6rem) !important;
		line-height: 1.15 !important;
		letter-spacing: -0.02em !important;
		color: var(--blue-text) !important;
	}
	.offer-tagline,
	.reals-hub-body,
	.stage-open .lede {
		font-size: clamp(1rem, 1.15vw, 1.2rem) !important;
		line-height: 1.5 !important;
		max-width: 44ch !important;
		color: var(--blue-muted) !important;
	}
	.stage-team .fd-name {
		font-size: clamp(2rem, 2.6vw, 2.8rem) !important;
		line-height: 1.15 !important;
		color: var(--blue-text) !important;
	}
	.stage-team .fd-role {
		font-size: clamp(0.75rem, 0.95vw, 0.9rem) !important;
		letter-spacing: 0.14em !important;
		margin: 4px 0 8px !important;
		color: var(--blue-muted) !important;
	}
	.stage-team .fd-bio-original {
		font-size: clamp(1rem, 1.2vw, 1.25rem) !important;
		line-height: 1.55 !important;
		max-width: 46ch !important;
		color: var(--blue-muted) !important;
	}
	.stage-team .fd-linkedin {
		font-size: 0.85rem !important;
		margin-top: 10px !important;
	}
	.stage-team .studio-pills {
		margin-top: 20px !important;
	}
	.stage-team .studio-pill {
		font-size: 14px !important;
		padding: 8px 18px !important;
	}
	.stage-team .sec-foot.studio-meta {
		margin-top: 20px !important;
		font-size: 13px !important;
		color: var(--blue-muted) !important;
	}
	.stage-team {
		grid-template-rows: 1fr auto auto auto 1fr !important;
		row-gap: 8px !important;
		padding-top: calc(env(safe-area-inset-top, 0px) + 72px) !important;
		padding-bottom: calc(136px + env(safe-area-inset-bottom, 0px)) !important;
	}
	.studio-swap {
		min-height: auto !important;
		align-self: center !important;
	}

	/* ── Desktop Duoscreens (New Morning Style) ── */
	#page-siteweb.stage {
		height: 100%;
	}
	#page-siteweb .stage-inner {
		display: grid;
		grid-template-columns: minmax(18rem, 36%) 1fr;
		column-gap: clamp(2rem, 4vw, 3.5rem);
		align-items: center;
		height: 100%;
		max-width: var(--w-wide);
		padding-top: calc(env(safe-area-inset-top, 0px) + 72px) !important;
		padding-bottom: calc(136px + env(safe-area-inset-bottom, 0px)) !important;
	}
	#page-siteweb .offer-head {
		grid-column: 1;
		text-align: left;
		align-self: center;
		max-width: 420px;
	}
	#page-siteweb #work-carousel {
		grid-column: 2;
		align-self: center;
		width: 100%;
		margin: 0;
	}
	.workstage {
		position: relative;
		width: 100%;
		height: min(44vh, 27rem);
	}
	.workstage .wk {
		position: absolute;
		inset: 0;
		opacity: 0;
		visibility: hidden;
		transition:
			opacity 0.45s ease,
			visibility 0.45s ease;
	}
	.workstage .wk.on {
		opacity: 1;
		visibility: visible;
	}
	.workstage .duoscreens {
		position: relative;
		height: 100%;
		min-height: 0;
		display: flex;
		align-items: center;
	}
	.workstage .duoscreens .screen.a {
		width: 62%;
		position: relative;
		z-index: 1;
	}
	.workstage .duoscreens .screen.b {
		position: absolute;
		right: 0;
		bottom: 6%;
		width: 44%;
		z-index: 2;
		background: var(--blue-night-bg, var(--blue-bg, #031321));
		padding: 0;
	}
	.workstage .duoscreens .screen.b .vp {
		box-shadow: -18px -14px 0 0 var(--blue-night-bg, var(--blue-bg, #031321));
		border: 1px solid var(--line-strong, rgba(255, 255, 255, 0.25));
	}
	.screen {
		position: relative;
	}
	.screen .vp {
		overflow: hidden;
		position: relative;
		aspect-ratio: 16 / 10.6;
		border: 1px solid var(--line-strong, rgba(255, 255, 255, 0.25));
		background: #ffffff;
		border-radius: 4px;
	}
	.screen .vp img {
		display: block;
		width: 100%;
		height: auto;
		will-change: transform;
	}
	.screen .plate-tag {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		margin-top: 0.55rem;
		font-size: clamp(0.65rem, 0.85vw, 0.75rem);
		letter-spacing: 0.16em;
		text-transform: uppercase;
		font-weight: 600;
		color: var(--blue-text);
	}
	.screen .plate-tag a {
		color: var(--blue-accent, #75d9cc);
		text-decoration: none;
		text-transform: lowercase;
		letter-spacing: 0.08em;
		border-bottom: 1px solid var(--line-strong, rgba(255, 255, 255, 0.25));
		padding-bottom: 0.15em;
		pointer-events: auto;
	}
	.screen .plate-tag a:hover {
		color: var(--blue-text);
		border-color: var(--blue-text);
	}
}