/* GP (core or Premium's Page Header module) still renders its own featured
   image ahead of this hero — unhooking it in PHP doesn't reach Premium's
   render path, so hide it here too (matches hero-v1.css). */
#SD.page-header-hero-split-grid .page-header-image
{
	display: none;
}

.projectIntro.version02
{

	box-sizing: border-box;
	position: relative;
	z-index: 100;
	max-width: var(--projectWidth);
	margin-inline: auto;
	margin-top: var(--hero-split-grid-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: var(--hero-split-grid-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. Selector was previously
   `.version02 DIV.client` — the actual element is an <h1 class="client">
   (hero-split-grid.php), so that never matched anything; fixed here to `.client`
   with no tag restriction, same as .headline/.type below. Also needs the
   #SD + extra-class specificity bump (like hero-v1.css's H1 fix) since
   this is an h1 and would otherwise be repainted by the sitewide
   `#SD H1` rule (headings.css, SDstandards.css). */
#SD .projectIntro.version02 .text .client
{
	font-family: var(--hero-split-grid-client-family, inherit);
	font-weight: var(--hero-split-grid-client-weight, 800);
	font-style: var(--hero-split-grid-client-style, inherit);
	font-size: var(--hero-split-grid-client-size, clamp(2rem, 5vw, 5.5rem));
	line-height: var(--hero-split-grid-client-line-height, 0.93);
	letter-spacing: var(--hero-split-grid-client-letter-spacing, -0.025em);
	text-transform: var(--hero-split-grid-client-text-transform, inherit);
	color: var(--hero-split-grid-client-color, inherit);
	margin-top: 0.4em;
}
/* Headline sits below client as a subtitle */
.projectIntro.version02 .headline
{
	font-family: var(--hero-split-grid-headline-family, inherit);
	font-weight: var(--hero-split-grid-headline-weight, normal);
	font-style: var(--hero-split-grid-headline-style, inherit);
	font-size: var(--hero-split-grid-headline-size, clamp(1.1rem, 2vw, 2.25rem));
	line-height: var(--hero-split-grid-headline-line-height, 1.4);
	letter-spacing: var(--hero-split-grid-headline-letter-spacing, inherit);
	text-transform: var(--hero-split-grid-headline-text-transform, inherit);
	color: var(--hero-split-grid-headline-color, inherit);
	margin-top: 1.25em;
}
/* Type label — small caps treatment */
.projectIntro.version02 .type
{
	font-family: var(--hero-split-grid-type-family, inherit);
	font-weight: var(--hero-split-grid-type-weight, 600);
	font-style: var(--hero-split-grid-type-style, inherit);
	font-size: var(--hero-split-grid-type-size, clamp(0.8rem, 1.2vw, 1.1rem));
	line-height: var(--hero-split-grid-type-line-height, normal);
	letter-spacing: var(--hero-split-grid-type-letter-spacing, 0.12em);
	text-transform: var(--hero-split-grid-type-text-transform, uppercase);
	color: var(--hero-split-grid-type-color, inherit);
	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;
	}
}

/* ── Desktop (≥1000px) ───────────────────────────────────────
   Nav is fixed top-right and the breadcrumb sits right-aligned under it
   (SDheaderNavRegion.css) -- both float over this hero, which has no
   margin-top of its own to push them clear (--hero-split-grid-margin-top can be set
   to 0 via Design Tokens -> Heroes). The badge's default top:0 + -50% Y
   translate centers the badge exactly on the hero's own top-right corner
   (right: 2 intervals matches .hero's margin-right, so pre-translate the
   badge's box shares the hero's top-right point; the -50%/-50% translate
   then centers the badge ON that point). That's the desired look, and
   it's what Tablet/Mobile below already do -- their breadcrumb sits
   top-LEFT and the container's own margin-top clears it, so straddling
   the hero's top edge is safe there.
   On Desktop it isn't: that edge IS the page's top edge, so a badge
   centered on it would render half above the viewport and half behind
   the opaque nav/breadcrumb. Rather than break the corner-intersection
   (translate: 50% 0, see git history), push the hero's own top-right
   corner down to clear the nav: give .hero a top margin equal to the
   badge's old safe clearance line (mirrors #SD .headerNavRegion
   .site-breadcrumb's desktop `top` formula, SDheaderNavRegion.css, plus
   its rendered line height and one interval) plus the badge's own radius
   (140px badge / 2 = 70px). The badge keeps top:0 + -50%/-50% translate
   (same corner-centering math as Tablet/Mobile) but relative to that
   pushed-down corner, so its visible top edge lands exactly on the old
   safe clearance line while its center still sits precisely on the
   hero's top-right corner. */
@media only screen and (min-width: 1000px)
{
	.projectIntro.version02
	{
		--hero-split-grid-badge-clearance: calc(
			var(--defaultInterval) * 4 + var(--breadcrumb-header-top-gap, 0px) +
			(var(--text-role-breadcrumb-size, 0.875rem) * var(--text-role-breadcrumb-line-height, 1.4)) +
			var(--defaultInterval)
		);
	}
	.projectIntro.version02 .hero
	{
		/* +70px = half the 140px badge, so the badge's centered point
		   (which sits on this corner) keeps its visible top edge at
		   --hero-split-grid-badge-clearance, same as before this change. */
		margin-top: calc(var(--hero-split-grid-badge-clearance) + 70px);
	}
	.projectIntro.version02 .caseStudyBadge
	{
		top: calc(var(--hero-split-grid-badge-clearance) + 70px);
		translate: 50% -50%;
	}
}

/* ── Tablet (≤900px) ─────────────────────────────────────── */
@media only screen and (max-width: 900px)
{
	.projectIntro.version02
	{
		grid-template-columns: 1fr;
		grid-template-rows: 75vw auto;
		height: auto;
		margin-top: max(100px, var(--breadcrumb-mobile-clearance));
		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;
		/* matches the rest of the page's "aligns with logo" left margin
		   (.projectBlock padding-left in project-rows.css), not the bare
		   --defaultInterval -- otherwise this row sits 10px off from
		   every case-study block below it. */
		padding-left: calc(var(--defaultInterval) * 1.5);
		padding-right: calc(var(--defaultInterval) * 1.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-left: calc(var(--defaultInterval) * 1.5);
		margin-right: 0;
	}
	.projectIntro.version02 .caseStudyBadge
	{
		right: 25vw;
	}
	.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: max(80px, var(--breadcrumb-mobile-clearance));
	}
	.projectIntro.version02 .hero
	{
		height: 75vw;
	}
	.projectIntro.version02 .intro
	{
		grid-template-columns: 1fr;
		grid-template-areas:
			"launch"
			"type"
			"headline"
			"introduction";
	}
	.projectIntro.version02 .caseStudyBadge
	{
		right: 25vw;
		width: 90px;
	}
}