/* Page Banner — matches live inner-page hero: black full-width band with teal title
 * Live: .meta-header is black (full bleed), .page-header inner has 0 60px padding,
 * .page-header-content is 1140px wide with a 60×2 teal underline absolute at bottom-left,
 * H1 is Arial 30px / 32px / weight 400 / color rgb(37, 117, 116). */
.page-banner {
	width: 100%;
	box-sizing: border-box;
	background: #000000;
	color: #ffffff;
	padding: 0;
	margin: 0;
}

.page-banner__container {
	position: relative;
	max-width: 1140px;            /* live page-header-content inner width */
	margin: 0 auto;
	padding: 60px 0 30px;          /* matches live's ~123px total banner height */
	text-align: left;
}

/* Live teal underline — 60×2px absolute, sits at bottom-left of the title block.
 * Live places it at bottom: -1px so the bar bleeds 1px below the title row. */
.page-banner__container::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 60px;
	height: 2px;
	background: var(--color-brand);  /* #50C4C3 — matches live rgb(80, 196, 195) */
}

.page-banner__eyebrow {
	margin: 0 0 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 12px;
	color: var(--color-brand);
}

.page-banner__heading {
	margin: 0;
	font-size: 30px;
	line-height: 32px;             /* live exact line-height */
	color: var(--color-brand-dark); /* #257574 — live rgb(37, 117, 116) */
	font-weight: 400;
	font-family: Arial, Helvetica, sans-serif;
}

.page-banner__subheading {
	margin: 0.75rem 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	max-width: 760px;
}

.page-banner.alignwide,
.page-banner.alignfull {
	width: 100%;
}

/* Live breakpoint is 1280 — at ≤1279 the inner content drops 60px outer padding to ~30px */
@media (max-width: 1279px) {
	.page-banner__container {
		max-width: none;
		padding: 60px 30px 30px;
	}
}

@media (max-width: 958px) {
	.page-banner__container {
		padding: 50px 20px 25px;
	}
	.page-banner__heading {
		font-size: 26px;
		line-height: 30px;
	}
}

@media (max-width: 767px) {
	.page-banner__container {
		padding: 40px 16px 20px;
	}
	.page-banner__heading {
		font-size: 24px;
		line-height: 28px;
	}
}

/* /gynaecology/ — live renders THIS page's banner heading in grey rgb(179,179,179).
 * Live is per-page inconsistent (gynaeoncology stays teal); scoped here to match
 * the live /gynaecology/ page exactly without affecting other banners. */
#gynaecology-banner .page-banner__heading {
	color: #b3b3b3;
}

/* Muted variant — /news-events/ archive banner. Live renders this page's title
 * in grey rgb(179,179,179) (same as the /gynaecology/ banner), not teal. */
.page-banner--muted .page-banner__heading {
	color: #b3b3b3;
}

/* /contact-us/ — live has NO black banner here; the map leads, then "Contact Us"
 * shows as a plain heading (white bg, dark-grey rgb(77,77,77)) below the map. */
#contact-heading.page-banner {
	background: transparent;
	color: inherit;
}
#contact-heading .page-banner__heading {
	color: #4d4d4d;
}