/*
 * Page banner — sub-header for inner pages with breadcrumbs and lead.
 */

.teledom-design .page-banner {
	position: relative;
	background: var(--ink);
	color: var(--paper);
	overflow: hidden;
	padding: 136px 0 85px;
}

.teledom-design .page-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.7));
	z-index: 1;
}

.teledom-design .page-banner img.bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
}

.teledom-design .page-banner .container {
	position: relative;
	z-index: 2;
}

.teledom-design .page-banner h1 {
	color: var(--paper);
	max-width: 18ch;
	font-size: clamp(38px, 5vw, 75px);
}

.teledom-design .page-banner .crumbs {
	display: flex;
	gap: 10px;
	align-items: center;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #a89c80;
	margin-bottom: 26px;
}

.teledom-design .page-banner .crumbs a {
	color: var(--gold-bright);
}

.teledom-design .page-banner .lead {
	font-size: 16px;
	color: #cfc8b8;
	max-width: 54ch;
	margin-top: 20px;
}