/*
 * MiraeLaw Areas of Expertise page — Hero section
 *
 * Styles for the Elementor Hero on the Areas of Expertise page (eyebrow +
 * H1 + intro paragraph over a navy watermark, same recipe as the Home and
 * Team Heroes). Deliberately its own class set rather than reusing
 * .ml-hero-* / .ml-team-hero-*: this page's H1 (clamp(38px,5.4vw,64px)) and
 * watermark (clamp(160px,22vw,280px)) don't match either --ml-text-h1 or
 * the Home Hero's own watermark size — same reasoning already established
 * in team-hero.css. Colors reuse existing design-system tokens throughout;
 * only the fluid sizes are new.
 */

.ml-pa-hero-root {
	position: relative;
	overflow: hidden;
	/* z-index (even 0) makes position:relative establish its own stacking
	   context, so the watermark's negative z-index stays local — same
	   technique as home-hero.css's .ml-hero-root. */
	z-index: 0;
	background: var( --ml-primary );
}

.ml-pa-hero-watermark {
	margin: 0;
	font-size: clamp( 160px, 22vw, 280px );
	line-height: 1;
	pointer-events: none;
	user-select: none;
}

.ml-pa-hero-inner {
	max-width: var( --ml-container-width );
	margin: 0 auto;
	padding: clamp( 56px, 8vw, 96px ) 24px;
	position: relative;
}

.ml-pa-hero-eyebrow {
	margin: 0 0 22px;
	font-family: var( --ml-font-mono );
	font-size: var( --ml-text-sm );
	letter-spacing: var( --ml-tracking-wide-plus );
	color: var( --ml-tertiary-light );
}

.ml-pa-hero-h1 {
	margin: 0 0 22px;
	font-family: var( --ml-font-heading );
	font-size: clamp( 38px, 5.4vw, 64px );
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: var( --ml-tracking-tight );
	color: var( --ml-background );
}

.ml-pa-hero-lead {
	margin: 0;
	/* !important: Elementor's own `.e-con > .elementor-widget { max-width:
	   100% }` rule outranks a single class selector on specificity alone —
	   same fix already applied in team-hero.css's .ml-team-hero-intro. */
	max-width: 44em !important;
	font-size: clamp( 17px, 2vw, 20px );
	line-height: var( --ml-leading-relaxed );
	color: var( --ml-neutral-200 );
}

.ml-pa-hero-lead a {
	color: var( --ml-accent-light );
}