/*
 * Section: Differentiators.
 *
 * Loaded only on pages carrying the `differentiators` layout.
 *
 * NOT a card grid, and that is the point. This section normally shares a trade
 * page with `service_list`; if both read as boxes-in-a-grid, the second one
 * stops being read. Everything below is chosen to be structurally distinct:
 *
 *   cards                       differentiators
 *   ------------------------    ---------------------------
 *   four borders per item       one rule between items
 *   equal-height boxes          rows as tall as their copy
 *   3-4 across                  one per row, full width
 *   short summaries             body copy at reading measure
 *   compressed to scan          spaced to read
 *
 * Item count varies from three to eight by trade. Nothing here depends on the
 * count: rows are independent, so three looks composed and eight does not
 * become a wall.
 */


.differentiators__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-5);
}

.differentiators__header {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-3);
	/* The header keeps the measure even though the rows run wider. */
	max-width: var(--sq-measure);
}

.differentiators__header > * {
	margin: 0;
}

.differentiators__heading {
	font-size: var(--sq-text-h2);
	line-height: 0.96;
}


/* =============================================================== ROWS == */

.differentiators__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	/* The stack opens and closes on a heavy rule, like the FAQ. */
	border-top: 3px solid var(--sq-border);
}

.differentiator {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-3);
	margin: 0;
	padding-block: var(--sq-space-5);
	border-bottom: var(--sq-border-width-hair) solid var(--sq-rule);
}

.differentiator:last-child {
	border-bottom: 3px solid var(--sq-border);
}

.differentiator__head {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-2);
}

.differentiator__title {
	margin: 0;
	font-size: var(--sq-text-h3);
	font-weight: var(--sq-weight-semibold);
	line-height: 1.25;
	text-wrap: balance;
}

/*
 * The highlight figure.
 *
 * Display type, set large — this is the one place in the section that competes
 * with the H2 for attention, which is what makes a number worth including.
 * When the field is empty this element is not rendered at all, so there is no
 * empty slot to collapse.
 */
.differentiator__value {
	margin: 0;
	color: var(--sq-accent);
	font-family: var(--sq-font-display);
	font-size: clamp(2.25rem, 1.6rem + 2.7vw, 3.5rem); /* 36 → 56 */
	font-weight: var(--sq-weight-bold);
	letter-spacing: var(--sq-tracking-display);
	line-height: 0.9;
}

/* Body copy is read, so it keeps the measure however wide the row runs. */
.differentiator__body {
	max-width: var(--sq-measure);
}

.differentiator__body > * {
	margin: 0;
}

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


/* ============================================================ NUMBERED ==
 *
 * The numeral is rendered in the template, not by a CSS counter: a counter
 * cannot continue into the team panel, which sits outside the list. Still
 * generated from the loop index, so reordering rows never means renumbering
 * them, and still aria-hidden — the <ol> carries the sequence.
 */

.differentiator__number {
	margin: 0;
	color: var(--sq-fg-muted);
	font-family: var(--sq-font-display);
	font-size: 2.25rem; /* 36 */
	font-weight: var(--sq-weight-bold);
	line-height: 1;
}


/* =============================================================== RULED ==
 *
 * The comp's densest arrangement: two hairline-ruled columns, the numeral
 * inline beside the copy rather than above it, and a heavy rule closing the
 * stack top and bottom. Five or six points fit where the other styles fit two.
 *
 * The numeral is blue here, which is the link colour. It is safe because it is
 * a 26–32px condensed figure with no underline and no pointer affordance, and
 * because it is aria-hidden — nothing announces it as a link. Do not carry the
 * blue into any other numbered style, where the numeral sits above a title and
 * would read as a heading link.
 */

.differentiators--ruled .differentiators__list {
	border-top-width: var(--sq-border-width);
}

/*
 * Two tracks: the numeral on the left spanning the row, title and body stacked
 * to its right. Grid rather than nested flex, so the numeral does not need a
 * wrapper element that only this style would use.
 */
.differentiators--ruled .differentiator {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 0.875rem; /* 14 */
	row-gap: var(--sq-space-2);
	padding-block: var(--sq-space-5); /* 20 */
}

.differentiators--ruled .differentiator__number {
	grid-column: 1;
	grid-row: 1 / 3;
	/* Fixed, so every title starts on the same left edge whether the figure is
	 * 01 or 16. */
	width: 2rem; /* 32 */
	color: var(--sq-color-blue);
	font-size: 1.625rem; /* 26 */
}

.differentiators--ruled .differentiator__head {
	grid-column: 2;
	grid-row: 1;
}

.differentiators--ruled .differentiator__body {
	grid-column: 2;
	grid-row: 2;
	max-width: none;
}

/* The stack closes on the same heavy rule it opens on. */
.differentiators--ruled .differentiator:last-child {
	border-bottom-width: var(--sq-border-width);
	border-bottom-color: var(--sq-border);
}

.differentiators--ruled .differentiator__title {
	font-size: 1.375rem; /* 22 */
}

.differentiators--ruled .differentiator__body {
	font-size: var(--sq-text-body);
	line-height: 1.5;
}


/* ============================================================== TEAM ==
 *
 * Closes the sequence but is not another row of it — a bordered panel on
 * paper, and the only images in the section. Stacked on mobile; the copy and
 * the faces sit side by side from desktop.
 */

.differentiators__team {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-4);
	padding: var(--sq-space-5);
	border: var(--sq-border-width) solid var(--sq-color-ink);
	border-radius: var(--sq-radius);
	background-color: var(--sq-color-paper);
	color: var(--sq-color-ink);
}

.differentiators__team-text {
	display: flex;
	gap: 0.875rem; /* 14 */
}

.differentiators__team-copy {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-2);
	max-width: 38.75rem; /* 620 */
}

/* The panel is paper on any band, so the numeral takes the light-band blue
 * rather than the role token, which would go white on a dark section. */
.differentiators__team .differentiator__number {
	flex: 0 0 auto;
	width: 2rem; /* 32 */
	color: var(--sq-color-blue);
	font-size: 1.625rem; /* 26 */
}

.differentiators__team .differentiator__title {
	font-size: 1.375rem; /* 22 */
}

.differentiators__team .differentiator__body {
	max-width: none;
	font-size: var(--sq-text-body);
	line-height: 1.5;
}

.team-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sq-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.team-member {
	display: flex;
	flex-direction: column;
	gap: 0.3125rem; /* 5 */
	margin: 0;
	width: 6.125rem; /* 98 */
}

/*
 * The frame is drawn whether or not there is a photo. These sit side by side,
 * so an absent image has to hold its space — the reserved-slot rule. An empty
 * frame is a flat surface, not a hatch: the hatch in the comp is mockup
 * shorthand for "photo goes here", and shipping it would look like a failed
 * image rather than a person whose photo is not up yet.
 */
.team-member__frame {
	display: flex;
	aspect-ratio: 1;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: var(--sq-border-width) solid var(--sq-color-ink);
	background-color: var(--sq-color-surface-sunken);
}

.team-member__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.team-member__name {
	margin: 0;
	font-size: var(--sq-text-label);
	font-weight: var(--sq-weight-bold);
	line-height: 1.2;
}

.team-member__role {
	margin: 0;
	color: var(--sq-color-support);
	font-size: var(--sq-text-label-sm);
	line-height: 1.2;
}


/* ============================================================= DESKTOP == */

@media (min-width: 61.25em) {

	.differentiators__inner {
		gap: 2.25rem; /* 36 */
	}

	.differentiators__header {
		gap: 0.875rem; /* 14 */
	}

	.differentiators__heading {
		line-height: 0.98;
		letter-spacing: var(--sq-tracking-display);
	}

	.differentiator {
		padding-block: var(--sq-space-7); /* 48 — rows need air to read as rows */
	}

	/*
	 * Two columns: the head is a narrow column, the body a wide one. Not a
	 * grid of equal cells — the two columns do different jobs.
	 */
	.differentiators--alternating .differentiator,
	.differentiators--numbered .differentiator {
		display: grid;
		grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
		gap: var(--sq-space-7);
		align-items: start;
	}

	/*
	 * Alternating: every second row swaps the columns, so the page zigzags
	 * instead of forming two static rails. Ordered explicitly rather than
	 * with direction tricks, so the DOM order still reads head-then-body.
	 */
	.differentiators--alternating .differentiator:nth-child(even) .differentiator__head {
		grid-column: 2;
		grid-row: 1;
	}

	.differentiators--alternating .differentiator:nth-child(even) .differentiator__body {
		grid-column: 1;
		grid-row: 1;
		text-align: right;
	}

	/* Right-aligned copy still needs its measure, pinned to the right edge. */
	.differentiators--alternating .differentiator:nth-child(even) .differentiator__body {
		margin-left: auto;
	}

	/* Numbered stays on one rail — a counted sequence that zigzags is harder
	 * to follow, not easier. The numeral belongs to the head column, so it
	 * moves into it rather than taking a third track. */
	.differentiators--numbered .differentiator {
		grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
		/* The numeral sits directly above its title, so the row gap is tight
		 * while the column gap stays wide. */
		column-gap: var(--sq-space-7);
		row-gap: var(--sq-space-2);
	}

	.differentiators--numbered .differentiator__number {
		grid-column: 1;
		grid-row: 1;
		font-size: 3.5rem; /* 56 */
	}

	.differentiators--numbered .differentiator__head {
		grid-column: 1;
		grid-row: 2;
	}

	.differentiators--numbered .differentiator__body {
		grid-column: 2;
		grid-row: 1 / 3;
	}

	/* Stacked keeps the full width and simply breathes. */
	.differentiators--stacked .differentiator__head {
		max-width: var(--sq-measure);
	}


	/* ------------------------------------------------------------ RULED --
	 *
	 * Two columns of rows, not two columns per row. The 56px column gap is the
	 * comp's; the rows keep their own hairline so the two stacks read as one
	 * ruled list rather than two lists side by side.
	 *
	 * The heavy closing rule goes on whatever is on the final line. With an odd
	 * count that is the last row alone, which also spans — a single half-width
	 * row at the foot reads as a missing item. With an even count it is the
	 * last two, hence the second selector.
	 */
	.differentiators--ruled .differentiators__list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 3.5rem; /* 56 */
	}

	.differentiators--ruled .differentiator {
		column-gap: var(--sq-space-5); /* 20 */
		padding-block: 1.625rem; /* 26 */
	}

	.differentiators--ruled .differentiator:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		max-width: 43.75rem; /* 700 */
	}

	.differentiators--ruled .differentiator:last-child,
	.differentiators--ruled .differentiator:nth-last-child(2):nth-child(odd) {
		border-bottom-width: var(--sq-border-width);
		border-bottom-color: var(--sq-border);
	}

	.differentiators--ruled .differentiator__number {
		width: 2.625rem; /* 42 */
		font-size: 2rem; /* 32 */
	}

	.differentiators--ruled .differentiator__title {
		font-size: 1.625rem; /* 26 */
	}

	.differentiators--ruled .differentiator__body {
		font-size: 1.125rem; /* 18 */
		line-height: var(--sq-leading-relaxed);
	}


	/* ------------------------------------------------------------- TEAM -- */

	.differentiators__team {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 2.5rem; /* 40 */
		align-items: center;
		padding: 1.75rem 1.875rem; /* 28 30 */
	}

	.differentiators__team-text {
		gap: var(--sq-space-5); /* 20 */
	}

	.differentiators__team .differentiator__number {
		width: 2.625rem; /* 42 */
		font-size: 2rem; /* 32 */
	}

	.differentiators__team .differentiator__title {
		font-size: 1.625rem; /* 26 */
	}

	.differentiators__team .differentiator__body {
		font-size: 1.125rem; /* 18 */
		line-height: var(--sq-leading-relaxed);
	}

	.team-list {
		flex-wrap: nowrap;
		gap: 0.875rem; /* 14 */
	}

	.team-member {
		width: 7.25rem; /* 116 */
		gap: 0.4375rem; /* 7 */
	}
}

/*
 * Right-aligned copy is harder to read for long runs, so it is desktop-only
 * and only on the alternating style. Anyone who has asked for less motion has
 * usually also asked for fewer surprises: keep both columns left-aligned.
 */
@media (prefers-reduced-motion: reduce) {
	.differentiators--alternating .differentiator:nth-child(even) .differentiator__body {
		text-align: left;
	}
}