/**
 * Locations — hero (static dark banner, same treatment as the
 * Ingredient Library slider but without a slide/image since these
 * are text-first, address-first pages).
 */
.locations-page .loc-hero {
	position: relative;
	background: var(--loc-accent);
	padding: 64px 0 56px;
	overflow: hidden;
}

.locations-page .loc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 90% at 85% 0%, rgba(225, 202, 154, .12), transparent 60%);
	pointer-events: none;
}

.locations-page .loc-hero__inner {
	position: relative;
	z-index: 1;
}

.locations-page .loc-hero__overline {
	display: inline-block;
	font-size: 11.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	font-weight: 600;
	margin: 0 0 16px;
}

.locations-page .loc-hero__crumb {
	display: block;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .55);
	margin: 0 0 14px;
}

.locations-page .loc-hero__crumb a {
	color: rgba(255, 255, 255, .8);
	text-decoration: none;
}

.locations-page .loc-hero__crumb a:hover {
	text-decoration: underline;
}

.locations-page .loc-hero__title {
	font-family: var(--loc-serif);
	font-weight: 500;
	font-size: clamp(32px, 4.4vw, 52px);
	line-height: 1.05;
	letter-spacing: -.015em;
	margin: 0 0 14px;
	max-width: 760px;
	color: #fff;
}

.locations-page .loc-hero__lede {
	max-width: 560px;
	font-size: 16.5px;
	color: rgba(255, 255, 255, .82);
	margin: 0;
}

@media (max-width: 640px) {
	.locations-page .loc-hero {
		padding: 44px 0 36px;
	}
}