/* ==========================================================================
   Shared interior hero block
   One markup, geometry and animation source for every interior page and post.
   ========================================================================== */
.mcdp-hero {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: none;
	height: 560px;
	min-height: 560px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: linear-gradient(90deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)),
		linear-gradient(180deg, rgba(12, 30, 44, .2), rgba(7, 19, 29, .2)),
		linear-gradient(180deg, rgba(22, 36, 47, .8) 0%, #2a4f5b 50%, var(--wp--preset--color--navy, #151f2a) 100%);
}
body:not(.home) .wp-block-post-content > .mcdp-hero:first-child {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 560px;
	min-height: 560px;
	margin: 0;
	padding: 0;
}
body:not(.home) .wp-block-post-content > .mcdp-hero:first-child > *,
body.single-post .mcdp-article > .mcdp-hero > * {
	/* Preserve the content frame's automatic horizontal centering. */
	margin-block: 0;
}
.mcdp-hero__content {
	grid-template-columns: minmax(0, 1fr);
	position: absolute;
	z-index: 2;
	top: 169px;
	left: max(32px, calc((100% - 1248px) / 2));
	box-sizing: border-box;
	display: grid;
	width: min(900px, calc(100% - 64px));
	gap: 28px;
	margin: 0;
}
.mcdp-hero__content > * {
	box-sizing: border-box;
	margin: 0;
}
.mcdp-hero__eyebrow {
	width: max-content;
	max-width: 100%;
	color: var(--wp--preset--color--primary-alt, #6fb0e0);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.mcdp-hero__content h1 {
	width: 900px;
	max-width: 100%;
	color: #fff;
	font-size: 72px;
	line-height: 1.08;
	letter-spacing: -.72px;
	font-weight:600;
}
.mcdp-hero__rule {
	display: block;
	width: 640px;
	max-width: 100%;
	height: 1px;
	background: rgba(255, 255, 255, .4);
}
.mcdp-hero__lede {
	width: 560px;
	max-width: 100%;
	color: #c4d2dc;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.76;
}
.mcdp-hero__meta {
	width: max-content;
	max-width: 100%;
	margin-top: -8px;
	color: var(--wp--preset--color--main-accent, #9fb2c0);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
}
.mcdp-hero--article .mcdp-hero__content {
	top: 155px;
	width: min(820px, calc(100% - 64px));
}
.mcdp-hero--article .mcdp-hero__content h1 {
	width: 820px;
}
@media (min-width: 600px) {
	/* Same position as the absolute layout, but in flow: a four-line title extends
	   the hero below its 560px/530px minimum rather than being cut off. */
	body.single-post .mcdp-article > .mcdp-hero--article {
		height: auto;
		padding: 155px 0 64px !important;
	}
	body.single-post .mcdp-article > .mcdp-hero--article .mcdp-hero__content {
		position: relative;
		top: auto;
	}
}
@media (min-width: 600px) and (max-width: 767px) {
	body.single-post .mcdp-article > .mcdp-hero--article {
		padding-top: 144px !important;
	}
}
.mcdp-hero__motion-ring,
.mcdp-hero__motion-emblem,
.mcdp-hero__ring,
.mcdp-hero__emblem {
	position: absolute;
	z-index: 0;
	pointer-events: none;
}
.mcdp-hero__motion-ring {
	top: -451.42px;
	left: calc(50% + 664.52px);
	width: 370.768px !important;
	height: 370.768px;
	animation: mcdp-vision-ring-opacity 2s linear 1 both,
		mcdp-vision-ring-float var(--mcdp-motion-ambient) ease-in-out infinite,
		mcdp-vision-ring-scale 2.5s linear 1 both;
}
.mcdp-hero__motion-ring img {
	position: absolute;
	top: -20.07%;
	right: -20.07%;
	bottom: -20.07%;
	left: -20.07%;
	display: block;
	width: 140.14%;
	height: 140.14%;
	max-width: none;
}
.mcdp-hero__motion-emblem {
	top: -588.83px;
	left: calc(50% + 400.99px);
	width: 847.346px !important;
	height: 844.679px;
	animation: mcdp-vision-vector-opacity 2s linear 1 both,
		mcdp-vision-vector-float var(--mcdp-motion-ambient) ease-in-out infinite,
		mcdp-vision-vector-scale 2.8s linear 1 both;
}
.mcdp-hero__motion-emblem img {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 584.998px;
	height: 613.985px;
	max-width: none;
	opacity: .4;
	filter: brightness(.4);
	transform: translate(-50%, -50%) rotate(-48.73deg);
}
.mcdp-hero__ring {
	top: 113.9px;
	left: calc(50% + 237.47px);
	width: 393.133px !important;
	height: 393.133px;
}
.mcdp-hero__ring img {
	position: absolute;
	top: -24.6%;
	right: -24.6%;
	bottom: -24.6%;
	left: -24.6%;
	display: block;
	width: 149.2%;
	height: 149.2%;
	max-width: none;
	opacity: .08;
}
.mcdp-hero__emblem {
	top: -31.79px;
	left: calc(50% - 41.95px);
	width: 898.459px !important;
	height: 895.631px;
}
.mcdp-hero__emblem img {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 620.286px;
	height: 651.021px;
	max-width: none;
	/* The SVG already has 50% fill opacity; keep its skyline readable. */
	opacity: .9;
	filter: brightness(.4);
	transform: translate(-50%, -50%) rotate(-48.73deg);
}
@media (prefers-reduced-motion: reduce) {
	.mcdp-hero__motion-ring,
	.mcdp-hero__motion-emblem {
		display: none;
		animation: none !important;
	}
}
@media (max-width: 767px) {
	.mcdp-hero,
	body:not(.home) .wp-block-post-content > .mcdp-hero:first-child {
		height: 540px;
		min-height: 540px;
		padding: 0;
	}
	.mcdp-hero__content,
	.mcdp-hero--article .mcdp-hero__content {
		top: 144px;
		width: calc(100% - 40px);
		gap: 24px;
		left: 20px;
	}
	.mcdp-hero__content h1 {
		width: 100%;
		max-width: 100%;
		font-size: max(42px, min(12.5vw, 56px));
		line-height: 1.08;
		letter-spacing: -.5px;
		overflow-wrap: normal;
	}
	.mcdp-hero__lede, .mcdp-hero__meta,
	.mcdp-hero__rule {
		width: 100%;
		max-width: 100%;
	}
	.mcdp-hero__meta {
		margin-top: -4px;
	}
	.mcdp-hero__motion-ring,
	.mcdp-hero__motion-emblem {
		display: none;
	}
}
@media (max-width: 1024px) {
	/* Fit the rotated mark to compact heroes instead of cropping the desktop
	   artwork off the right edge. Keep the SVG and its ring in proportion. */
	.mcdp-hero {
		--mcdp-hero-art-size: clamp(320px, 68vw, 560px);
		--mcdp-hero-art-right: -24px;
	}
	.mcdp-hero__emblem {
		top: 50%;
		right: var(--mcdp-hero-art-right);
		left: auto;
		width: var(--mcdp-hero-art-size) !important;
		height: calc(var(--mcdp-hero-art-size) * .99685);
		transform: translateY(-50%);
	}
	.mcdp-hero__emblem img {
		width: 69.038%;
		height: 72.688%;
	}
	.mcdp-hero__ring {
		top: 50%;
		right: calc(var(--mcdp-hero-art-right) + var(--mcdp-hero-art-size) * .28122);
		left: auto;
		width: calc(var(--mcdp-hero-art-size) * .43756) !important;
		height: calc(var(--mcdp-hero-art-size) * .43756);
		transform: translateY(-50%);
	}
}
@media (prefers-reduced-motion: no-preference) {
	.mcdp-hero__rule {
		transform-origin: left center;
		animation: mcdp-hero-rule-in var(--mcdp-motion-divider) linear 150ms both;
	}
}
@media (prefers-reduced-motion: reduce) {
	.mcdp-hero__content h1,
	.mcdp-hero__rule {
		animation: none;
	}
}
/* ==========================================================================
   2026-08 Figma refresh — accordions, Partner Insights slider, video lightbox
   ========================================================================== */
/* Compact heroes grow with the heading and supporting copy on every viewport.
   Client-created pages render the template's fallback hero directly in <main>. */
body:not(.home) :is(.wp-block-post-content, body.mcdp-page-uses-default-layout main) > .mcdp-hero--interior:first-child {
	display: flex;
	align-items: center;
	height: auto;
	min-height: 560px;
	/* Figma: content midpoint sits 46.5px below the 560px hero midpoint. */
	padding: 157px 32px 64px !important;
}
.mcdp-hero--interior .mcdp-hero__content {
	position: relative;
	top: auto;
	left: auto;
	width: min(1248px, 100%) !important;
	margin-inline: auto;
}
@media (max-width: 1023px) {
	body:not(.home) :is(.wp-block-post-content, body.mcdp-page-uses-default-layout main) > .mcdp-hero--interior:first-child {
		display: flex;
		align-items: center;
		height: auto;
		min-height: 530px;
		padding: 144px 24px 64px !important;
	}
}
@media (max-width: 599px) {
	body:not(.home) :is(.wp-block-post-content, body.mcdp-page-uses-default-layout main) > .mcdp-hero--interior:first-child {
		height: auto;
		min-height: 480px;
		padding: 140px 20px 56px !important;
	}
	.mcdp-hero--interior .mcdp-hero__content {
		width: 100%;
		max-width: 100%;
	}
}