/* @generated by Skylit - do not edit */
/**
 * Skylit dev cache — pattern: mhpr-hero
 * Auto-generated on save_post. Do not hand-edit.
 */

.mhpr-hero--alt {
		/* skylit-class-mod: Shorter hero min-height (50vh) | only: .mhpr-hero */
		}
		.mhpr-hero.mhpr-hero--alt {
		--mhpr-hero-min-height: 50vh;
		}
		.mhpr-hero-layout__inner {
		position: relative;
		--mhpr-hero-discover-width: 260px;
		}
		.mhpr-hero {
		--mhpr-hero-min-height: 80vh;
		display: grid;
		grid-template-columns: 1fr;
		background: var(--mhpr-color-navy);
		}
		.mhpr-hero__main {
		position: relative;
		background: var(--mhpr-color-navy);
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-block: var(--mhpr-gap-16);
		padding-inline-start: var(--mhpr-container-inset-inline-start);
		padding-inline-end: var(--mhpr-container-padding);
		overflow: hidden;
		}
		.mhpr-hero__main .mhpr-section-tag {
		margin-bottom: var(--mhpr-gap-5);
		}
		.mhpr-hero__headline {
		color: var(--mhpr-color-white);
		margin-bottom: var(--mhpr-gap-6);
		}
		.mhpr-hero__sub {
		color: var(--mhpr-color-silver);
		max-width: 30rem;
		margin-bottom: var(--mhpr-gap-10);
		}
		.mhpr-hero__ctas {
		display: flex;
		gap: var(--mhpr-gap-5);
		align-items: center;
		flex-wrap: wrap;
		}
		.mhpr-hero__visual {
		position: relative;
		min-height: 280px;
		overflow: hidden;
		}
		.mhpr-hero__image {
		position: relative;
		width: 100%;
		height: 100%;
		min-height: 280px;
		overflow: hidden;
		background: linear-gradient(
		135deg,
		var(--mhpr-color-signal-dark) 0%,
		var(--mhpr-color-navy) 55%,
		var(--mhpr-color-ink) 100%
		);
		}
		.mhpr-hero__image-photo {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		-webkit-mask-image: linear-gradient(
		to right,
		#000 0%,
		#000 80%,
		transparent 100%
		);
		mask-image: linear-gradient(
		to right,
		#000 0%,
		#000 80%,
		transparent 100%
		);
		}
		.mhpr-hero__discover {
		position: absolute !important;
		top: 0;
		right: 0;
		width: 100%;
		max-width: var(--mhpr-hero-discover-width);
		height: 100%;
		background: var(--mhpr-overlay-hero-discover);
		display: flex;
		flex-direction: column;
		padding: var(--mhpr-gap-10) var(--mhpr-gap-8);
		}
		.mhpr-hero__discover .mhpr-section-tag {
		color: var(--mhpr-color-silver);
		margin-bottom: var(--mhpr-gap-8);
		}
		@media (max-width: 768px) {
		.mhpr-hero-layout__inner {
		display: flex;
		flex-direction: column;
		}
		.mhpr-hero__discover {
		position: static !important;
		top: auto;
		right: auto;
		width: 100%;
		max-width: none;
		height: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--mhpr-gap-4) var(--mhpr-gap-8);
		padding: var(--mhpr-gap-4) var(--mhpr-container-padding);
		text-align: center;
		}
		.mhpr-hero__discover .mhpr-section-tag {
		margin: 0;
		flex-shrink: 0;
		font-size: 0.65rem;
		letter-spacing: 0.12em;
		}
		.mhpr-hero__discover .mhpr-hero-discover-links {
		width: auto;
		max-width: 100%;
		}
		}
		@media (min-width: 769px) {
		.mhpr-hero__main {
		padding-block: 5rem;
		}
		.mhpr-hero__visual {
		min-height: 400px;
		}
		.mhpr-hero__image {
		min-height: 400px;
		}
		}
		@media (min-width: 769px) and (max-width: 1024px) {
		.mhpr-hero-layout__inner {
		--mhpr-hero-discover-width: 180px;
		}
		.mhpr-hero__discover {
		padding: var(--mhpr-gap-6) var(--mhpr-gap-4);
		}
		.mhpr-hero__main {
		padding-inline-end: calc(
		var(--mhpr-hero-discover-width) + var(--mhpr-gap-16)
		);
		}
		}
		@media (min-width: 1025px) {
		.mhpr-hero {
		grid-template-columns: 1fr 1fr;
		min-height: var(--mhpr-hero-min-height);
		}
		.mhpr-hero__visual {
		min-height: 100%;
		}
		.mhpr-hero__image {
		min-height: 100%;
		}
		}
		/* skylit-class-mod: Hero in container, discover aside bleeds to viewport edge | only: .mhpr-hero-layout__inner */
		.mhpr-hero-layout__inner.mhpr-hero-layout--aside-bleed {
		--mhpr-hero-bleed-gutter: max(
		0px,
		calc((100% - min(100%, var(--mhpr-container-max))) / 2)
		);
		--mhpr-hero-aside-bleed-overlap: 50px;
		position: relative;
		width: 100%;
		max-width: 100%;
		overflow: hidden;
		background: var(--mhpr-color-navy);
		}
		@media (min-width: 1025px) {
		.mhpr-hero-layout__inner.mhpr-hero-layout--aside-bleed {
		display: grid;
		grid-template-columns:
		var(--mhpr-hero-bleed-gutter)
		minmax(0, min(100%, var(--mhpr-container-max)))
		minmax(0, 1fr);
		align-items: stretch;
		}
		.mhpr-hero-layout__inner.mhpr-hero-layout--aside-bleed > .mhpr-hero {
		grid-column: 2;
		grid-row: 1;
		width: 100%;
		min-width: 0;
		max-width: none;
		}
		.mhpr-hero-layout__inner.mhpr-hero-layout--aside-bleed
		> .mhpr-hero
		.mhpr-hero__main {
		padding-inline-start: var(--mhpr-container-padding);
		}
		.mhpr-hero-layout__inner.mhpr-hero-layout--aside-bleed > .mhpr-hero__discover {
		position: relative !important;
		inset: auto;
		grid-column: 3;
		grid-row: 1;
		top: auto;
		right: auto;
		left: auto;
		bottom: auto;
		width: 100%;
		max-width: 100%;
		height: auto;
		align-self: stretch;
		min-height: 0;
		z-index: 1;
		}
		}
		/* skylit-class-mod: Three-column hero — main, visual, discover inside section | only: .mhpr-hero */
		.mhpr-hero-layout__inner.mhpr-hero-layout--3col {
		background: var(--mhpr-color-navy);
		box-sizing: border-box;
		width: 100%;
		padding-inline: max(
		0px,
		calc((100% - min(100%, var(--mhpr-container-max))) / 2)
		);
		}
		.mhpr-hero.mhpr-hero--3col {
		--mhpr-hero-3col-aside-overlap: 0px;
		width: 100%;
		max-width: var(--mhpr-container-max);
		margin-inline: auto;
		}
		@media (min-width: 769px) {
		.mhpr-hero.mhpr-hero--3col {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(
		--mhpr-hero-discover-width
		);
		}
		.mhpr-hero.mhpr-hero--3col > .mhpr-hero__main {
		padding-inline-start: var(--mhpr-container-padding);
		padding-inline-end: var(--mhpr-container-padding);
		}
		.mhpr-hero.mhpr-hero--3col > .mhpr-hero__visual {
		min-height: 100%;
		}
		.mhpr-hero.mhpr-hero--3col > .mhpr-hero__visual .mhpr-hero__image {
		min-height: 100%;
		}
		.mhpr-hero.mhpr-hero--3col > .mhpr-hero__discover {
		position: relative !important;
		inset: auto;
		top: auto;
		right: auto;
		left: auto;
		bottom: auto;
		width: 100%;
		max-width: none;
		height: auto;
		align-self: stretch;
		margin-inline-start: calc(-1 * var(--mhpr-hero-3col-aside-overlap));
		z-index: 2;
		}
		}
		@media (min-width: 1025px) {
		.mhpr-hero.mhpr-hero--3col {
		min-height: var(--mhpr-hero-min-height);
		}
		}
		@media (max-width: 768px) {
		.mhpr-hero.mhpr-hero--3col {
		display: flex;
		flex-direction: column;
		}
		.mhpr-hero.mhpr-hero--3col > .mhpr-hero__discover {
		position: static !important;
		margin-inline-start: 0;
		width: 100%;
		max-width: none;
		height: auto;
		}
		}
		/* skylit-class-mod: Dark full-width wrapper, hero max-width, discover overlaps image ~100px | only: .mhpr-hero-layout__inner */
		.mhpr-hero-layout__inner.mhpr-hero-layout--aside-overlap {
		--mhpr-hero-aside-overlap: 100px;
		background: var(--mhpr-color-navy);
		}
		@media (min-width: 1025px) {
		.mhpr-hero-layout__inner.mhpr-hero-layout--aside-overlap {
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		width: 100%;
		padding-inline-start: var(--mhpr-container-inset-inline-start);
		padding-inline-end: max(
		var(--mhpr-container-padding),
		calc((100vw - min(100vw, var(--mhpr-container-max))) / 2)
		);
		}
		.mhpr-hero-layout__inner.mhpr-hero-layout--aside-overlap > .mhpr-hero {
		flex: 1 1 auto;
		max-width: var(--mhpr-container-max);
		min-width: 0;
		}
		.mhpr-hero-layout__inner.mhpr-hero-layout--aside-overlap
		> .mhpr-hero
		.mhpr-hero__main {
		padding-inline-end: var(--mhpr-container-padding);
		}
		.mhpr-hero-layout__inner.mhpr-hero-layout--aside-overlap
		> .mhpr-hero__discover {
		position: relative !important;
		top: auto;
		right: auto;
		flex: 0 0 var(--mhpr-hero-discover-width);
		width: var(--mhpr-hero-discover-width);
		max-width: var(--mhpr-hero-discover-width);
		height: auto;
		align-self: stretch;
		margin-inline-start: calc(-1 * var(--mhpr-hero-aside-overlap));
		z-index: 2;
		}
		}
		/* skylit-class-mod: Visual as full-section bg, main half-width ~10% navy overlay | only: .mhpr-hero */
		.mhpr-hero.mhpr-hero--visual-bg {
		position: relative;
		isolation: isolate;
		overflow: hidden;
		}
		@media (min-width: 769px) {
		.mhpr-hero.mhpr-hero--visual-bg > .mhpr-hero__visual {
		position: absolute !important;
		inset: 0;
		min-height: 100%;
		z-index: 0;
		}
		.mhpr-hero.mhpr-hero--visual-bg > .mhpr-hero__visual .mhpr-hero__image {
		min-height: 100%;
		}
		.mhpr-hero.mhpr-hero--visual-bg
		> .mhpr-hero__visual
		.mhpr-hero__image-photo {
		-webkit-mask-image: none;
		mask-image: none;
		}
		.mhpr-hero.mhpr-hero--visual-bg > .mhpr-hero__main {
		position: relative;
		grid-column: 1;
		grid-row: 1;
		z-index: 1;
		align-self: stretch;
		background: color-mix(in srgb, var(--mhpr-color-navy) 10%, transparent);
		}
		}
		@media (min-width: 1025px) {
		.mhpr-hero.mhpr-hero--visual-bg {
		grid-template-columns: 1fr 1fr;
		min-height: 80vh;
		}
		.mhpr-hero.mhpr-hero--visual-bg > .mhpr-hero__main {
		min-height: 80vh;
		}
		}