/**
 * Sterling homepage hero.
 *
 * The container itself (background image, overlay, height, gold rule) is built
 * with Elementor settings so it stays editable in the builder. This file only
 * carries the brand typography, which is design-system level rather than
 * per-page.
 */

/* Specificity note: Elementor's per-page CSS styles
   ".elementor-widget-heading .elementor-heading-title" from the global kit, so
   these rules qualify the widget class to sit above it. */
.elementor-widget-heading.sterling-hero__title .elementor-heading-title {
	margin: 0;
	color: #fff;
	font-family: var(--sterling-display, sans-serif);
	font-size: clamp(2.75rem, 7vw, 5.5rem);
	font-weight: 800;
	line-height: 0.95;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

/* "excellence" sits on its own line in gold, as on the current site. */
.sterling-hero__accent {
	display: block;
	color: var(--sterling-gold, #bd9b51);
}

/* Inner-page banners keep the accent word on the same line: "ABOUT US". */
.sterling-hero__accent--inline {
	display: inline;
}

.elementor-widget-heading.sterling-hero__subtitle .elementor-heading-title {
	margin: 0.75rem 0 0;
	color: #fff;
	font-family: inherit;
	font-size: clamp(1rem, 2vw, 1.375rem);
	font-weight: 600;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: 0.01em;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}