.projectIntro.version02
{

	box-sizing: border-box;
	position: relative;
	z-index: 100;
	max-width: var(--projectWidth);
	margin-inline: auto;
	margin-top: 160px;
	height: auto;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: auto;
	column-gap: var(--defaultInterval);
	row-gap: 0;
	margin-left: auto;
	margin-bottom: 0;
	margin-right: auto;
}
/* Text column — left side, vertically centered */
.projectIntro.version02 .text
{
	grid-column: 1 / 7;
	grid-row: 1;
	align-self: center;
	padding-bottom: 4rem;
	z-index: 2;
}
/* Image column — right side */
.projectIntro.version02 .hero
{
	grid-column: 6 / 13;
	grid-row: 1;
	position: relative;
	overflow: visible;
	z-index: 1;
	margin-right: calc(var(--defaultInterval) * 2);
}
.projectIntro.version02.has-square-crop .hero
{
	aspect-ratio: 1 / 1;
}
/* Client name is the large display text */ 
.version02 DIV.client 
{
	font-size: clamp(var(--hero-v2-client-size-min), 5vw, var(--hero-v2-client-size-m ax));
	font-weight: 800;
	line-height: 0.93;
	letter-spacing: -0.025em;
	margin-top: 0.4em;
}
/* Headline sits below client as a subtitle */
.projectIntro.version02 .headline
{
	font-size: clamp(var(--hero-v2-headline-size-min), 2vw, var(--hero-v2-headline-size-max));
	font-weight: normal;
	line-height: 1.4;
	margin-top: 1.25em;
}
/* Type label — small caps treatment */
.projectIntro.version02 .type
{
	font-size: clamp(var(--hero-v2-type-size-min), 1.2vw, var(--hero-v2-type-size-max));
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
	opacity: 0.6;
}
.projectIntro.version02 .burns, .projectIntro.version02 .parallaxWrapper, .projectIntro.version02 .imageWrapper, .projectIntro.version02 .mediaWrapper, .projectIntro.version02 .videoPosterFallback
{
	width: 100%;
	height: 100%;
}
.projectIntro.version02 .burns, .projectIntro.version02 .parallaxWrapper
{
	position: relative;
}
.projectIntro.version02 .mediaWrapper
{
	position: absolute;
	inset: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
.projectIntro.version02 .imageWrapper
{
	background-size: cover;
	background-position: center center;
}
.projectIntro.version02 .hero .imageWrapper, .projectIntro.version02 .hero .videoPosterFallback, .projectIntro.version02 .hero .heroVideoElement
{
	position: absolute;
	inset: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
.projectIntro.version02 .hero-img
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Oversize the image by the parallax max-shift so the edges never show on scroll */
.projectIntro.version02 .hero .imageWrapper
{
	inset: -60px 0;
}
/* keep video separate from reveal state */
.projectIntro.version02 .hero .heroVideoElement
{
	display: block;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}
.projectIntro.version02 .mediaWrapper.video-is-ready .heroVideoElement
{
	opacity: 1;
}
.projectIntro.version02 .intro
{
	display: grid;
	width: 100%;
	box-sizing: border-box;
	padding: var(--projInterval);
	line-height: 1;
	grid-template-columns: 40% auto auto auto;
	grid-template-rows: auto;
	grid-template-areas: "launch type client deliverables" "headline introduction introduction introduction";
	grid-row-gap: 15px;
	grid-column-gap: var(--defaultInterval);
}
.projectIntro.version02 .caseStudyBadge
{
	position: absolute;
	top: 0;
	right: calc(var(--defaultInterval) * 2);
	width: 140px;
	pointer-events: none;
	z-index: 10;
	translate: 50% -50%;
	will-change: transform;
	transition: none;
}
.caseStudyBadge IMG
{
	display: block;
	width: 100%;
	height: auto;
	animation: spinBadge 18s linear infinite;
}
@keyframes spinBadge
{
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* Left-edge gradient for text readability */
.projectIntro.version02.has-left-gradient .hero::after
{
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0.6) 0%,
		rgba(255, 255, 255, 0) 16%
	);
}
@media only screen and (max-width: 900px)
{
	.projectIntro.version02.has-left-gradient .hero::after
	{
		display: none;
	}
}

/* ── Tablet (≤900px) ─────────────────────────────────────── */
@media only screen and (max-width: 900px)
{
	.projectIntro.version02
	{
		grid-template-columns: 1fr;
		grid-template-rows: 75vw auto;
		height: auto;
		margin-top: 100px;
		margin-bottom: 0;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	.projectIntro.version02 .text
	{
		grid-column: 1;
		grid-row: 2;
		padding-bottom: 3rem;
		padding-top: 2rem;
		padding-left: calc(var(--defaultInterval)*.5);
		padding-right: calc(var(--defaultInterval)*.5);
		box-sizing: border-box;
		align-self: start;
	}
	.projectIntro.version02 .hero
	{
		grid-column: 1;
		grid-row: 1;
		width: 75vw;
		height: 75vw;
		justify-self: start;
		margin-right: 0;
	}
	.projectIntro.version02 .caseStudyBadge
	{
		right: 25vw;
	}
	.version02 DIV.client
	{
		font-size: clamp(2rem, 6.5vw, 4rem);
	}
	.projectIntro.version02 .intro
	{
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"launch type"
			"headline headline"
			"introduction introduction";
	}
}

/* ── Mobile (≤600px) ─────────────────────────────────────── */
@media only screen and (max-width: 600px)
{
	.projectIntro.version02
	{
		grid-template-rows: 75vw auto;
		margin-top: 80px;
	}
	.projectIntro.version02 .hero
	{
		height: 75vw;
	}
	.version02 DIV.client
	{
		font-size: clamp(1.75rem, 8vw, 3rem);
	}
	.projectIntro.version02 .headline
	{
		font-size: clamp(0.9rem, 3.5vw, 1.4rem);
	}
	.projectIntro.version02 .intro
	{
		grid-template-columns: 1fr;
		grid-template-areas:
			"launch"
			"type"
			"headline"
			"introduction";
	}
	.projectIntro.version02 .caseStudyBadge
	{
		right: 25vw;
		width: 90px;
	}
}