.hero::before {
	background: linear-gradient(0deg,rgba(1, 33, 90, 0) 0%, rgba(1, 33, 90, 1) 100%);
	content: '';
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.hero h1 strong {
	color: var(--brand-orange);
	position: relative;
}
.hero h1 strong:after {
	display: inline-block;
	content: '';
	width: 95%;
	aspect-ratio: 20.83;
	background: center / cover no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250.273' height='11.596' viewBox='0 0 250.273 11.596'%3E%3Cpath d='M0-7.015s86.449-7.521,250-5.722' transform='translate(0.243 15.822)' fill='none' stroke='%23ff8b00' stroke-width='5.6'/%3E%3C/svg%3E%0A");
	position: absolute;
	bottom: -3px;
	left: 2.5%;
}

/*
 * Listing pages (aanbod, bog, nieuwbouw) carry no text in the hero, so the
 * band is only as tall as the fixed site header plus a little blue below it.
 * The heights follow the header in header.php: its padding and logo height
 * change at md, lg, xl and 2xl. Two classes and !important are needed to beat
 * the !pt/!pb utilities on the section.
 */
.hero.hero--listing {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	height: 136px;
}
@media (min-width: 768px) {
	.hero.hero--listing { height: 156px; }
}
@media (min-width: 1024px) {
	.hero.hero--listing { height: 136px; }
}
@media (min-width: 1280px) {
	.hero.hero--listing { height: 188px; }
}
@media (min-width: 1640px) {
	.hero.hero--listing { height: 259px; }
}