/* ============================================================
 * EMA Case Study Hero — scoped styles
 * Palette is declared on the widget root so the widget is fully
 * self-contained and does not depend on global :root variables.
 * ============================================================ */
.ema-cs-hero{
	--soot:#12110F;
	--cream:#F5EFD9;
	--red:#A01428;
	--gold-bright:#C2A862;
	--display:'Oswald','Arial Narrow',sans-serif;

	background:var(--soot);
	color:var(--cream);
	border-bottom:3px solid var(--soot);
}
.ema-cs-hero *{box-sizing:border-box}

.ema-cs-hero__media{
	width:100%;
	aspect-ratio:21/9;
	background-size:cover;
	background-position:center;
	background-color:var(--soot);
	border-bottom:3px solid var(--soot);
	position:relative;
}
.ema-cs-hero__media::after{
	content:"";
	position:absolute;inset:0;
	background:linear-gradient(180deg, rgba(18,17,15,0) 50%, rgba(18,17,15,.7) 100%);
}
.ema-cs-hero__tag{
	position:absolute;
	top:32px;left:32px;
	background:var(--red);color:var(--cream);
	padding:8px 16px;
	font-family:var(--display);
	font-size:11px;font-weight:700;
	letter-spacing:.24em;text-transform:uppercase;
	z-index:2;
	border:2px solid var(--cream);
}
.ema-cs-hero__content{
	max-width:1280px;margin:0 auto;
	padding:60px 32px 70px;
}
.ema-cs-hero__meta{
	display:inline-flex;align-items:center;gap:14px;
	font-family:var(--display);
	font-size:13px;font-weight:600;
	letter-spacing:.28em;text-transform:uppercase;
	color:var(--gold-bright);
	margin-bottom:24px;
}
.ema-cs-hero__meta::before{
	content:"";width:32px;height:2px;background:var(--gold-bright);
}
.ema-cs-hero__title{
	font-family:var(--display);
	font-weight:700;
	font-size:clamp(48px, 6vw, 96px);
	line-height:.95;letter-spacing:-0.03em;
	text-transform:uppercase;
	color:var(--cream);
	margin:0 0 24px;
	max-width:1080px;
}
.ema-cs-hero__title em{font-style:normal;color:var(--gold-bright)}
.ema-cs-hero__lead{
	font-size:20px;line-height:1.55;
	color:rgba(245,239,217,.85);
	max-width:780px;
	font-weight:400;
	margin:0;
}

@media (max-width:1100px){
	.ema-cs-hero__media{aspect-ratio:16/10}
}
@media (max-width:780px){
	.ema-cs-hero__media{aspect-ratio:4/3}
	.ema-cs-hero__tag{top:16px;left:16px;padding:6px 12px;font-size:10px;letter-spacing:.18em}
	.ema-cs-hero__content{padding:40px 16px 48px}
	.ema-cs-hero__title{font-size:42px}
	.ema-cs-hero__lead{font-size:17px}
}