/**
 * Meridian Sections — Pull Quote
 *
 * Figma 526:522. A brand-blue band on the dotted ground carrying a centred yellow
 * eyebrow over one short statement set large and bold.
 *
 * Drawn as "Pull Quote" and named for it, but there is no attribution and no
 * quotation — it is a claim the company makes about itself, so it renders as a
 * paragraph rather than a blockquote. Nothing in it is about industrial work; it
 * carries any one-sentence statement that wants a band to itself.
 */

.md-section.md-pq {
	padding-block: var(--md-section-pt, 3rem) var(--md-section-pb, 3rem); /* 48 / 48 */
	background-color: var(--md-blue, #006bb6);
	color: var(--md-white, #fff);
	text-align: center;
}

/*
 * The same ground as the Stats highlights band (232:61), measured independently and
 * agreeing to the last figure: 20px pitch, 5px dots, contrast climbing from nothing
 * at the top to full strength at the bottom (Δ on the blue channel 4, 7, 9, 11, 12
 * at y = 58…178), which solves to an unwashed ink of about 0.086.
 *
 * Three of the four are not the primitive's defaults. 0deg is "to top", so the wash
 * is clear at the bottom; --md-dot-wash-color has to come off white or the wash
 * bleaches the top of a blue band instead of leaving it blue; and dots need more ink
 * to read on saturated blue than on a near-white tint.
 */
.md-pq.md-dots {
	--md-dot-wash: 0deg;
	--md-dot-wash-color: var(--md-blue, #006bb6);
	--md-dot-size: 2.5px;
	--md-color-dot: rgba(10, 22, 40, 0.085);
}

/*
 * 11px bold uppercase in brand yellow. The fifth 11px eyebrow on the site and the
 * third distinct tracking among them — 0.22em on .md-shead__eyebrow and the Stats
 * eyebrow, 0.18em here and on the Stats divided caption, 0.1818em on the Page Hero
 * filing line. See the README: worth consolidating, not worth doing inside a feature.
 */
.md-pq__eyebrow {
	margin: 0;
	color: var(--md-yellow, #ecdd01);
	font-size: var(--md-text-micro, 0.6875rem); /* 11px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.5; /* 16.5px */
	letter-spacing: 0.18em; /* 1.98px on 11px */
	text-transform: uppercase;
}

/*
 * 20px bold on a 953px measure — narrower than the content column on purpose, so the
 * statement breaks where the comp breaks it rather than running the full width.
 *
 * text-wrap: balance so a two-line statement splits evenly instead of leaving one
 * word on the second line, which is what the comp draws and what a centred block of
 * two lines needs to look deliberate.
 */
.md-pq__text {
	margin: 0;
	margin-inline: auto;
	max-width: var(--md-pq-measure, 59.5625rem); /* 953px */
	color: var(--md-white, #fff);
	font-family: var(--md-font-heading, "Cabin", sans-serif);
	font-size: var(--md-pq-size, 1.25rem); /* 20px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.25; /* 25px on 20px */
	text-wrap: balance;
}

/* Only under an eyebrow, so a statement on its own has no orphaned gap above it. */
.md-pq__eyebrow + .md-pq__text {
	margin-block-start: 1.25rem; /* 20px */
}

/* The statement is a rich editor, so the paragraphs inside are the editor's. */
.md-pq__text > p {
	margin: 0;
}

.md-pq__text > p + p {
	margin-block-start: 1.25rem;
}

/* On this ground a link has to be white and underlined to read as one at all. */
.md-pq__text a {
	color: var(--md-white, #fff);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}