/* ==========================================================================
   MaxxedOut — Page header (inner pages)
   ========================================================================== */

.mxo-scope.mxo-phero {
	--s-bg: var(--mx-mist);
	--mx-pad-t: clamp(48px, 6vw, 88px);
	--mx-pad-b: clamp(56px, 6.5vw, 96px);
}
.mxo-scope .mxo-phero__stripes {
	position: absolute;
	right: -40px;
	top: -30%;
	display: flex;
	gap: 22px;
	height: 160%;
	opacity: 0.05;
	pointer-events: none;
}
.mxo-scope .mxo-phero__stripes i {
	display: block;
	width: 70px;
	background: var(--mx-blue);
	transform: skewX(var(--mx-slant));
}
.mxo-scope.mxo-phero.has-img .mxo-phero__stripes { display: none; }

.mxo-scope .mxo-phero__in {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: clamp(40px, 5vw, 80px);
}
.mxo-scope.mxo-phero.has-img .mxo-phero__in {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}
.mxo-scope .mxo-phero__content {
	display: grid;
	justify-items: start;
	gap: 22px;
	max-width: 760px;
}

.mxo-scope .mxo-phero__crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 4px;
	font-size: 15px;
	font-weight: 500;
	color: var(--s-muted);
}
.mxo-scope .mxo-phero__crumbs li {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.mxo-scope .mxo-phero__crumbs li + li::before {
	content: "";
	display: inline-block;
	width: 2px;
	height: 12px;
	margin: 0 10px 0 6px;
	background: var(--mx-steel);
	transform: skewX(var(--mx-slant));
}
.mxo-scope .mxo-phero__crumbs a { transition: color 0.25s var(--mx-ease); }
.mxo-scope .mxo-phero__crumbs a:hover { color: var(--mx-blue); }
.mxo-scope .mxo-phero__crumbs [aria-current] {
	font-weight: 600;
	color: var(--s-ink);
}

.mxo-scope .mxo-phero__title {
	font-size: clamp(36px, 4vw, 60px);
	font-weight: 760;
	font-stretch: 106%;
	line-height: 1.07;
	letter-spacing: -0.03em;
	color: var(--s-ink);
	text-wrap: balance;
}
.mxo-scope .mxo-phero__title em {
	font-style: normal;
	color: var(--mx-blue);
}
.mxo-scope .mxo-phero__text {
	max-width: 56ch;
	font-size: 19px;
	line-height: 1.7;
	color: var(--s-body);
}
.mxo-scope .mxo-phero__actions { padding-top: 6px; gap: 16px 30px; }

.mxo-scope .mxo-phero__media {
	height: clamp(320px, 32vw, 460px);
	clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}

@media (max-width: 1024px) {
	.mxo-scope.mxo-phero.has-img .mxo-phero__in { grid-template-columns: minmax(0, 1fr); }
	.mxo-scope .mxo-phero__media { height: clamp(260px, 50vw, 400px); }
}
@media (max-width: 767px) {
	.mxo-scope.mxo-phero { --mx-pad-t: 32px; --mx-pad-b: 48px; }
	.mxo-scope .mxo-phero__title { font-size: clamp(32px, 9vw, 42px); }
	.mxo-scope .mxo-phero__text { font-size: 17px; }
	.mxo-scope .mxo-phero__media { height: 260px; clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); }
	.mxo-scope .mxo-phero__actions .mxo-btn { width: 100%; }
}