/* Statement or quote */

.statement {
	margin: 0;
}

.statement--photo {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: center;
}

.statement__photo {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--ink-3);
}

.statement__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 25%;
}

.statement__photo::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 6px;
	background: var(--amber);
}

/* Five short strands in the service swatches: the tube map in miniature. */
.statement__strand {
	display: flex;
	gap: 6px;
	margin-bottom: 32px;
}

.statement__strand i {
	width: 40px;
	height: 6px;
	border-radius: 6px;
	background: var(--oms-colour-one);
}

.statement__strand i:nth-child(2) { background: var(--oms-colour-two); width: 28px; }
.statement__strand i:nth-child(3) { background: var(--oms-colour-three); width: 52px; }
.statement__strand i:nth-child(4) { background: var(--oms-colour-four); width: 20px; }
.statement__strand i:nth-child(5) { background: var(--oms-colour-five); width: 34px; }

.statement__eyebrow {
	margin-bottom: 20px;
}

.statement__quote {
	margin: 0;
	font-family: var(--font-head);
	font-size: clamp(1.75rem, 1rem + 2.4vw, 3rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--heading);
	text-wrap: balance;
}

.statement--long .statement__quote {
	font-size: clamp(1.375rem, 1rem + 1.3vw, 2.125rem);
	line-height: 1.3;
}

.statement__quote p + p {
	margin-top: .6em;
}

.statement__quote p:first-child::before { content: '\201C'; }
.statement__quote p:last-child::after { content: '\201D'; }

.statement__who {
	display: grid;
	gap: 4px;
	margin-top: 32px;
	padding-left: 20px;
	border-left: 4px solid var(--amber);
}

.statement__who strong {
	font-size: 1.125rem;
	color: var(--heading);
}

.statement__who span {
	font-size: .9375rem;
	color: var(--muted);
}

.statement__link {
	margin-top: 28px;
}

.blk--dark .statement__quote,
.blk--dark .statement__who strong { color: #fff; }
.blk--dark .statement__who span { color: var(--on-dark-muted); }
.blk--dark .statement__link { color: #fff; }

@media (max-width: 767px) {
	.statement--photo {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.statement__photo {
		width: 180px;
	}
}

/* The strand already marks the start, so the eyebrow drops its own tick. */
.statement__eyebrow::before { display: none; }
.statement__eyebrow { padding-left: 0; }