/* mm-headline + mm-lede
   The brand's primary headline-and-paragraph typography pair.
   Used as <h1/h2 class="mm-headline"> + <p class="mm-lede"> across every section. */

.mm-headline {
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.01em;
	font-size: 54px;
}

.mm-lede {
	font-weight: 300;
	line-height: 1.5;
	font-size: 24px;
}

/* Hero h1 sized for above-the-fold. */
.mm-hero-h1 {
	font-size: 69px !important;
	color: #fff;
	line-height: 1.05;
}
@media (max-width: 575px) {
	.mm-hero-h1 { font-size: 48px !important; line-height: 1.05; }
}

/* Lede paragraph size variants. Each variant overrides .mm-lede's 24px. */
.mm-lede-hero {
	font-size: 32px !important;
	margin-top: 24px;
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.85);
}
.mm-lede-lg {
	font-size: 22px !important;
	margin-top: 20px;
	color: rgba(255, 255, 255, 0.85);
}
.mm-lede-md {
	font-size: 18px !important;
	margin-top: 20px;
	color: rgba(255, 255, 255, 0.85);
}
.mm-lede-md-tight {
	font-size: 18px !important;
	margin-top: 24px;
	color: rgba(255, 255, 255, 0.85);
}

/* Wide modifier: removes the readability max-width cap so lede can fill
   wider columns (e.g. col-md-11 hero ledes on case study pages). */
.mm-lede-wide { max-width: none !important; }

/* Callout variant: small uppercase bordered box. */
p.mm-lede.mm-lede-callout {
	font-size: 13px !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.6;
	color: rgba(245, 242, 236, 0.55) !important;
	margin-top: 32px;
	padding: 18px 22px;
	border: 1px solid rgba(245, 242, 236, 0.18);
}