@media (max-width: 900px), (max-height: 570px) {
	html[data-scroll-site] {
		--scroll-header: calc(64px + env(safe-area-inset-top, 0px));
		--scroll-footer: calc(72px + env(safe-area-inset-bottom, 0px));
		--scroll-controls: 76px;
		--scroll-gutter: clamp(18px, 4vw, 28px);
	}
	html[data-blue-style][data-scroll-site] #bar,
	html[data-blue-style][data-scroll-site] #bar[data-bar-state] {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-areas: "c1 c2 trust right";
		gap: 4px;
		height: var(--scroll-footer);
		min-height: var(--scroll-footer);
		padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
		background: var(--blue-night-bg, var(--blue-bg));
		border-top: 1px solid var(--line);
		box-sizing: border-box;
	}
	html[data-blue-style][data-scroll-site] #bar::before {
		content: "";
		position: fixed;
		inset: 0 0 auto;
		height: var(--scroll-header);
		background: var(--blue-night-bg, var(--blue-bg));
		border-bottom: 1px solid var(--line);
		pointer-events: none;
	}
	html[data-blue-style][data-scroll-site] #bar .bar-brand {
		position: fixed;
		left: var(--scroll-gutter);
		top: calc(10px + env(safe-area-inset-top, 0px));
		min-height: 44px;
		font-size: 14px;
		letter-spacing: 0.08em;
		gap: 4px;
	}
	html[data-scroll-site] .scroll-utilities {
		top: calc(10px + env(safe-area-inset-top, 0px));
		right: var(--scroll-gutter);
		gap: 16px;
	}
	html[data-blue-style][data-scroll-site] #bar .menu-item,
	html[data-blue-style][data-scroll-site] #bar .scroll-trust {
		width: 100%;
		min-width: 0;
		min-height: 48px;
		margin: 0;
		padding: 8px 4px;
		border: 0;
		border-radius: 6px;
		background: transparent;
		display: flex;
		align-items: center;
		justify-content: center;
		font: 500 14px / 1.2 var(--blue-body);
		letter-spacing: 0;
		text-align: center;
		text-transform: none;
		white-space: normal;
		color: var(--blue-text);
	}
	html[data-blue-style][data-scroll-site]
		#bar
		[data-mobile-label]
		> :not(.scroll-mobile-label) {
		display: none;
	}
	html[data-blue-style][data-scroll-site] #bar .scroll-mobile-label {
		display: block;
		font-size: 14px;
		line-height: 1.2;
		letter-spacing: 0;
		text-transform: none;
	}
	html[data-blue-style][data-scroll-site] #bar [aria-current="true"],
	html[data-blue-style][data-scroll-site] #bar [data-menu="contact"] {
		background: color-mix(in srgb, var(--blue-text) 8%, transparent);
	}
	html[data-scroll-site] .scroll-vertical {
		left: 16px;
		top: calc(
			var(--scroll-header) +
			(
				100dvh -
				var(--scroll-header) -
				var(--scroll-footer) -
				var(--scroll-controls)
			) /
			2
		);
		height: min(32dvh, 224px);
	}
	html[data-scroll-site] .scroll-step {
		width: 32px;
		height: 44px;
	}
	html[data-scroll-site] .scroll-step-label {
		display: none;
	}
	html[data-blue-style][data-scroll-site] .scroll-horizontal {
		left: 50%;
		bottom: var(--scroll-footer);
		width: min(220px, calc(100vw - 88px));
		height: var(--scroll-controls);
		padding: 0 12px 8px;
		box-sizing: border-box;
		background: var(--blue-night-bg, var(--blue-bg));
	}
	html[data-scroll-site] .scroll-arrows {
		gap: 24px;
		margin: 0;
	}
	html[data-scroll-site] .scroll-arrows button {
		width: 44px;
		height: 44px;
	}
	html[data-scroll-site] .scroll-count {
		font-size: 12px;
		letter-spacing: 0.06em;
	}
	html[data-blue-style][data-scroll-site] #section-studio .stage-inner,
	html[data-blue-style][data-scroll-site] #section-realisations .stage-inner,
	html[data-blue-style][data-scroll-site] #section-contact .stage-inner,
	html[data-blue-style][data-scroll-site] .hero-inner {
		position: absolute;
		inset: var(--scroll-header) 0
			calc(var(--scroll-footer) + var(--scroll-controls));
		width: 100%;
		max-width: none;
		height: auto !important;
		max-height: none !important;
		padding: 24px var(--scroll-gutter) 24px 44px !important;
		margin: 0;
		display: flex !important;
		flex-direction: column !important;
		justify-content: safe center !important;
		align-items: center !important;
		gap: 24px !important;
		overflow-y: auto;
		overflow-x: hidden;
		overscroll-behavior: contain;
		scrollbar-width: none;
		box-sizing: border-box;
	}
	html[data-blue-style][data-scroll-site] .stage-inner > * {
		flex-shrink: 0;
		min-width: 0;
	}
	html[data-blue-style][data-scroll-site] .hero-inner {
		bottom: var(--scroll-footer);
		padding-inline: 36px !important;
		gap: 22px !important;
	}
	html[data-blue-style][data-scroll-site] #hero-wordmark-zone {
		width: min(100%, calc(88vw * var(--blue-wordmark-size, 1))) !important;
		height: clamp(100px, 27dvh, 240px) !important;
		flex-shrink: 0;
		margin: 0 !important;
	}
	html[data-scroll-site] #colibri-home {
		left: max(36px, calc(50% - 9rem));
	}
	html[data-blue-style][data-scroll-site] .hero-headline {
		font-size: clamp(22px, 6vw, 30px) !important;
		line-height: 1.25 !important;
	}
	html[data-blue-style][data-scroll-site] #section-realisations .offer-head,
	html[data-blue-style][data-scroll-site] #section-studio .studio-swap {
		width: 100%;
		max-width: 34rem !important;
		gap: 14px !important;
		margin: 0 !important;
		align-items: flex-start !important;
		text-align: left !important;
	}
	html[data-blue-style][data-scroll-site]
		#section-realisations
		.offer-head-title,
	html[data-blue-style][data-scroll-site] #section-studio .stage-title {
		font-size: clamp(28px, 7.4vw, 38px) !important;
		line-height: 1.12 !important;
		text-align: left !important;
	}
	html[data-blue-style][data-scroll-site] #section-realisations .offer-tagline,
	html[data-blue-style][data-scroll-site] #reals-hub-body,
	html[data-blue-style][data-scroll-site] #section-studio .fd-bio-original {
		font-size: 17px !important;
		line-height: 1.55 !important;
		text-align: left !important;
		max-width: 100% !important;
		margin: 0 !important;
	}
	html[data-blue-style][data-scroll-site] #section-studio .stage-founder {
		display: grid !important;
		grid-template-columns: 64px minmax(0, 1fr) !important;
		grid-template-areas: "photo name" "photo role" "bio bio" "links links" !important;
		gap: 8px 16px !important;
		max-width: 100% !important;
		justify-content: stretch !important;
	}
	html[data-blue-style][data-scroll-site]
		#section-studio
		.stage-founder[hidden] {
		display: none !important;
	}
	html[data-blue-style][data-scroll-site] #section-studio .fd-name {
		font-size: clamp(25px, 6vw, 32px) !important;
		white-space: normal;
		text-align: left !important;
	}
	html[data-blue-style][data-scroll-site] #section-studio .fd-role {
		font-size: 14px !important;
		letter-spacing: 0;
		line-height: 1.4;
	}
	html[data-blue-style][data-scroll-site] #section-studio .fd-bio-original {
		margin-top: 14px !important;
	}
	html[data-blue-style][data-scroll-site] #section-studio .fd-linkedin {
		text-align: left !important;
		margin-top: 4px !important;
		line-height: 2;
	}
	html[data-blue-style][data-scroll-site] #section-studio .studio-pills {
		display: none;
	}
	html[data-blue-style][data-scroll-site] #section-studio .studio-meta {
		font-size: 14px !important;
		line-height: 1.5;
		margin: 0 !important;
		text-align: left !important;
	}
	html[data-blue-style][data-scroll-site]
		#page-realisations-hub
		.reals-hub-figure {
		display: flex !important;
		flex-direction: column;
		gap: 24px;
		width: 100% !important;
		height: auto !important;
		padding: 0 !important;
	}
	html[data-blue-style][data-scroll-site] #section-studio .brains-figure,
	html[data-blue-style][data-scroll-site] #page-ia .ia-figure-zone,
	html[data-blue-style][data-scroll-site]
		#page-realisations-hub
		.reals-hub-figure-zone {
		display: block !important;
		width: min(100%, 34rem) !important;
		height: clamp(100px, 18dvh, 160px) !important;
		min-height: 100px;
		flex: 0 0 auto !important;
		margin: 0 !important;
	}
	html[data-blue-style][data-scroll-site] #page-siteweb #work-carousel {
		width: 100% !important;
		max-width: 34rem;
		height: auto !important;
		margin: 0 !important;
	}
	html[data-blue-style][data-scroll-site] #page-siteweb .screen .vp {
		max-height: none !important;
		aspect-ratio: 16 / 10 !important;
	}
	html[data-blue-style][data-scroll-site] #page-siteweb .screen .plate-tag {
		font-size: 12px !important;
		letter-spacing: 0;
		gap: 12px;
		flex-wrap: wrap;
	}
	html[data-blue-style][data-scroll-site] #section-contact .stage-inner {
		bottom: max(20px, env(safe-area-inset-bottom, 0px));
		padding-top: 20px !important;
		padding-right: 24px !important;
		justify-content: flex-start !important;
	}
	html[data-scroll-site][data-blue-audit="true"] #bar {
		height: 0;
		min-height: 0;
		padding: 0;
		border: 0;
	}
	html[data-scroll-site][data-blue-audit="true"] .scroll-trust {
		display: none !important;
	}
	html[data-scroll-site][data-blue-audit="true"] .scroll-utilities {
		right: 72px;
	}
	html[data-scroll-site] .blue-audit-close {
		top: calc(10px + env(safe-area-inset-top, 0px));
		right: 14px;
	}
	html[data-blue-style][data-scroll-site] #section-contact .blue-audit-panel {
		width: 100% !important;
		max-width: 34rem !important;
		height: 100% !important;
		padding: 0 !important;
		text-align: left !important;
	}
	html[data-scroll-site] .blue-editor-overlay,
	html[data-scroll-site] .blue-dialog {
		max-width: calc(100vw - 24px);
		max-height: calc(100dvh - 24px);
		overflow: auto;
	}
}

@media (max-height: 570px) and (min-width: 601px) {
	html[data-scroll-site] {
		--scroll-header: calc(56px + env(safe-area-inset-top, 0px));
		--scroll-footer: calc(60px + env(safe-area-inset-bottom, 0px));
		--scroll-controls: 60px;
	}
	html[data-blue-style][data-scroll-site] #section-studio .stage-inner,
	html[data-blue-style][data-scroll-site] #section-realisations .stage-inner {
		gap: 16px !important;
		padding-block: 16px !important;
	}
	html[data-blue-style][data-scroll-site] #page-siteweb .stage-inner,
	html[data-blue-style][data-scroll-site] #page-ia .stage-inner,
	html[data-blue-style][data-scroll-site]
		#page-realisations-hub
		.reals-hub-figure {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
		align-items: center !important;
		gap: 28px !important;
	}
	html[data-blue-style][data-scroll-site] #page-siteweb .screen .vp {
		aspect-ratio: 16 / 8 !important;
	}
	html[data-blue-style][data-scroll-site] .hero-inner {
		gap: 12px !important;
		padding-block: 12px !important;
	}
	html[data-blue-style][data-scroll-site] #hero-wordmark-zone {
		height: 100px !important;
		width: min(70vw, 500px) !important;
	}
	html[data-scroll-site] .scroll-vertical {
		height: 176px;
	}
	html[data-scroll-site] .scroll-arrows button {
		height: 36px;
	}
}

@media (max-width: 360px) {
	html[data-scroll-site] #bar .bar-brand-sep,
	html[data-scroll-site] #bar .bar-word:last-child {
		display: none;
	}
}
@media (max-width: 440px) {
	html[data-scroll-site][data-blue-audit="true"] #bar .bar-brand-sep,
	html[data-scroll-site][data-blue-audit="true"] #bar .bar-word:last-child {
		display: none;
	}
}