/* ==========================================================================
   The banner every inner page shares (2026-09-17)
   Built for the practice-area pages from #1183:3911 (x 24, 1872x286, radius
   30px, rgba(0,0,0,.2) over #3454D1 and the swirl) and now used by every page
   that is not Home, About or a blog post. inc/rd/hero.php renders it.
   ========================================================================== */

/* #1183:3911: x 24, 1872x286, radius 30px; fills rgba(0,0,0,.2) + #3454D1 + the swirl */
.rd-pa-hero {
	position: relative;
	min-height: 286px;
	border-radius: 30px;
	overflow: hidden;
	display: flex;
	align-items: center;
	isolation: isolate;
	background: var(--rd-blue);
}
.rd-pa-hero__img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	z-index: -1;
}
.rd-pa-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .2);
	z-index: -1;
	mix-blend-mode: multiply;
}
/* #1169:399: Roboto 600 60px white, 863 wide, 70px lines; x 316 = 6px inside the column, 82px from the top */
.rd-pa-hero__inner { padding: 73px 0; }
.rd-pa-hero__title {
	max-width: 863px;
	margin-left: 6px;
	font-size: clamp(34px, 1.2rem + 2.6vw, 60px);
	line-height: 1.1667;
	font-weight: 600;
	color: #fff;
	text-wrap: pretty;   /* balance broke "Construction Recruiters / and Executive Search"; the comp fills the first line */
}


/* Practice areas space the band with `.rd-pa-hero + .rd-pa-intro`; the pages that used to draw
   their own banner have nothing designed underneath, so the gap goes here. */
body:not(.rd-page) .rd-hero-band { margin-bottom: 40px; }

@media (max-width: 767px) {
	.rd-pa-hero { min-height: 180px; border-radius: 20px; }
	.rd-pa-hero__inner { padding: 40px 0; }
	.rd-pa-hero__title { margin-left: 0; }
	body:not(.rd-page) .rd-hero-band { margin-bottom: 24px; }
}