/* Image-generated MBK brush assets: transparent WebP, loaded after the layout layers. */
.mbk-hero::before,
.mbk-story__copy::after,
.mbk-project-cta {
	background-image: url('../img/mbk-brush-edge-yellow-v1.webp');
}

.mbk-category span {
	background-image: url('../img/mbk-brush-swipe-yellow-v1.webp');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	min-height: 3.65rem;
	padding: 0.85rem 1.5rem 0.92rem;
}

/* The copy column remains legible at wide desktop resolutions instead of growing into the image. */
.mbk-hero__copy {
	min-width: 0;
	max-width: 35rem;
	padding-right: 2rem;
}

.mbk-hero h1 {
	font-size: clamp(2.4rem, 3vw, 4.55rem);
	line-height: 0.98;
	max-inline-size: 9.8ch;
	overflow-wrap: anywhere;
}

.mbk-preview-hero-image {
	inset: 0 0 0 50%;
	width: 50%;
}

@media (max-width: 920px) {
	.mbk-hero__copy {
	max-width: 100%;
	padding-right: 0;
	}

	.mbk-hero h1 {
	font-size: clamp(2.3rem, 7.5vw, 3.7rem);
	max-inline-size: 12ch;
	}

	.mbk-preview-hero-image {
	left: 0;
	width: 100%;
	}
}

@media (max-width: 680px) {
	.mbk-category span {
	min-height: 3.25rem;
	padding: 0.7rem 1rem 0.82rem;
	}

	.mbk-hero h1 {
	font-size: clamp(2.15rem, 11.5vw, 3.1rem);
	max-inline-size: 11ch;
	}
}