/*
 * MiraeLaw Team page — Hero section
 *
 * Styles for the Elementor Hero on the Team page (eyebrow + H1 + intro
 * paragraph on a navy background). Deliberately its own, smaller class set
 * rather than the Home page's .ml-hero-* classes: this Hero's own H1
 * (64px, measured from the source design) does not match the shared
 * --ml-text-h1 clamp() token's computed value at the same viewport
 * (76px) — the Home Hero is a larger, decorated (watermark + stats)
 * treatment, this one is a plain, compact interior-page Hero. Colors and
 * font stacks still reuse existing design-system tokens throughout.
 */

.ml-team-hero-root {
	background: var( --ml-primary );
}

.ml-team-hero-inner {
	max-width: var( --ml-container-width );
	margin: 0 auto;
	padding: var( --ml-spacing-section-lg ) 24px var( --ml-spacing-section-md );
}

.ml-team-hero-eyebrow {
	margin: 0 0 22px;
	font-family: var( --ml-font-mono );
	font-size: var( --ml-text-sm );
	font-weight: 400;
	color: var( --ml-tertiary-light );
}

.ml-team-hero-h1 {
	margin: 0 0 22px;
	font-family: var( --ml-font-heading );
	/* No shared token matches this exact size — the Home Hero's --ml-text-h1
	   clamp(40px,6vw,76px) resolves to 76px at this viewport; this page's
	   Hero is measured at a fixed 64px instead. */
	font-size: 64px;
	font-weight: 600;
	line-height: 1.06;
	color: var( --ml-background );
}

.ml-team-hero-intro {
	margin: 0;
	/* !important: Elementor's own `.e-con > .elementor-widget { max-width:
	   100% }` rule (frontend.min.css) outranks a single class selector on
	   specificity alone regardless of load order — confirmed the same
	   override silently defeats the Home Hero's equivalent .ml-hero-subhead
	   max-width today; fixed here rather than left silently broken. */
	max-width: 720px !important;
	font-family: var( --ml-font-body );
	font-size: 20px;
	font-weight: 400;
	line-height: var( --ml-leading-relaxed );
	color: var( --ml-neutral-200 );
}

@media ( max-width: 768px ) {
	.ml-team-hero-h1 {
		font-size: clamp( 40px, 9vw, 64px );
	}

	.ml-team-hero-intro {
		font-size: var( --ml-text-lg );
	}
}