.page-hero {
	position: relative;
	background-color: var(--c-brand);
	background-image: url('../images/zebra.webp');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 100% 100%;
	padding-inline: var(--sp-12);
}

.page-hero__inner {
	max-width: var(--container-hero);
	margin-inline: auto;
	padding-block: 8rem;
}

.page-hero__title {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 5rem;
	font-weight: 800;
	line-height: 1;
	color: var(--c-on-brand);
}

.page-hero__shape {
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 63px;
	line-height: 0;
	direction: ltr;
}

.page-hero__shape svg {
	display: block;
	width: 100%;
	height: 100%;
}

.page-hero__shape path {
	fill: var(--c-surface);
}

@media (max-width: 900px) {
	.page-hero { background-image: none; }
	.page-hero__inner { padding-block: var(--sp-16); }
	.page-hero__title { font-size: 3rem; }
	.page-hero__shape { height: 40px; }
}

@media (max-width: 600px) {
	.page-hero { padding-inline: var(--sp-4); }
	.page-hero__title { font-size: 2.25rem; }
}

.page-hero--home .page-hero__inner {
	min-height: 700px;
	padding-block: 8rem 0;
}

.page-hero__intro h1 {
	margin: 0 0 var(--sp-6);
	max-width: 60rem;
	font-family: var(--font-ui);
	font-size: 3.2rem;
	font-weight: 800;
	line-height: 1.156;
	color: var(--c-on-brand);
}

.page-hero__intro p {
	max-width: 52rem;
	margin: 0;
	font-family: var(--font-ui);
	font-size: 1.3rem;
	line-height: 1.23;
	color: var(--c-on-brand);
}

@media (max-width: 900px) {
	.page-hero--home .page-hero__inner { min-height: 0; padding-block: var(--sp-16) var(--sp-24); }
	.page-hero__intro h1 { font-size: 2.25rem; }
	.page-hero__intro p { font-size: 1.125rem; }
}

.page-hero__eyebrow {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 4rem;
	font-weight: 700;
	line-height: 1;
	color: var(--c-on-brand);
}

.page-hero__product-title {
	margin: var(--sp-2) 0 0;
	font-family: var(--font-ui);
	font-size: 2rem;
	font-weight: 900;
	line-height: 1.2;
	color: var(--c-on-brand);
}

.page-hero--product .page-hero__inner {
	padding-block: 6rem 8rem;
}

@media (max-width: 900px) {
	.page-hero__eyebrow { font-size: 2.5rem; }
	.page-hero__product-title { font-size: 1.5rem; }
	.page-hero--product .page-hero__inner { padding-block: var(--sp-12) var(--sp-16); }
}