/*
 * Section: Working With Us.
 *
 * Loaded only on pages carrying the `working-with-us` layout.
 *
 * A marked list at reading measure. The square marker is drawn here rather
 * than written into the markup — it is the design system's bullet, it carries
 * nothing the list structure does not, and a literal character in the HTML
 * would be read out before every point.
 *
 * The measure is 72ch, one step wider than the 68ch elsewhere on the page: the
 * points are two sentences each and the marker takes a fixed column out of the
 * line, so the text itself lands back at about the same measure.
 */


.working-with-us__header {
	max-width: 68ch;
}


.working-with-us__intro > * {
	margin: 0;
	text-wrap: pretty;
}

.working-with-us__intro > * + * {
	margin-top: var(--sq-space-4);
}


/* ============================================================= PROMISES == */

.promises {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-5);
	max-width: 72ch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.promises__item {
	display: grid;
	grid-template-columns: 0.625rem minmax(0, 1fr);
	gap: var(--sq-space-4);
	align-items: start;
	margin: 0; /* base.css spaces li + li; the flex gap owns it here */
}

/*
 * The marker. A square, never a tick: these are terms of business, and a tick
 * would frame them as features being claimed rather than commitments being
 * stated. Aligned to the cap height of the first line, not the box.
 */
.promises__item::before {
	content: '';
	width: 0.625rem; /* 10 */
	height: 0.625rem;
	margin-top: 0.5rem;
	background-color: var(--sq-accent);
}

.promises__text {
	margin: 0;
	text-wrap: pretty;
}

.promises__lead {
	font-weight: var(--sq-weight-bold);
}