/* ==========================================================================
   Home page sections.
   ========================================================================== */

/* Positioning: qualities in one row, separated by hairlines. */
.qualities {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--s-5) var(--gap);
}
.qualities__item {
	display: grid;
	gap: var(--s-2);
	align-content: start;
	padding-block-start: var(--s-3);
	border-block-start: 1px solid var(--line-light);
}
.qualities__title { font-size: clamp(1.5rem, 1.25rem + 0.6vw, 1.875rem); font-weight: 500; }
.qualities__text { max-width: 36ch; color: var(--c-slate); font-size: var(--fs-small); line-height: 1.65; }

/* Who we advise: columns with vertical hairlines, large serif titles. */
.clients__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--s-5) 0;
}
.clients__item {
	display: grid;
	gap: var(--s-2);
	align-content: start;
	padding-inline: 0 var(--s-4);
}
@media (min-width: 768px) {
	.clients__item {
		padding-inline: var(--s-4);
		border-inline-start: 1px solid var(--line-light);
	}
	.clients__item:first-child { padding-inline-start: 0; border-inline-start: 0; }
}
.clients__title { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem); font-weight: 500; max-width: 16ch; }
.clients__text { max-width: 40ch; color: var(--c-slate); line-height: 1.65; }

/* How we work: stages — components/steps.css, formats row — components/formats.css. */
/* International reach: dark photo section. Both columns carry text → strong shade. */
.reach { --shade-a: 0.92; --shade-b: 0.86; --shade-c: 0.84; --spot-x: 30%; --spot-y: 30%; }
.reach__inner { display: grid; gap: var(--s-6); }
.reach__intro { display: grid; gap: var(--s-4); align-content: start; }
.reach__title { max-width: 11em; }
.reach__lead {
	max-width: 46ch;
	padding-inline-start: var(--s-3);
	border-inline-start: 1px solid var(--c-gold);
	color: var(--c-mist);
	font-size: var(--fs-lead);
	line-height: 1.55;
}
.reach__points { border-block-end: 1px solid var(--line-dark); }
.reach__point {
	display: grid;
	gap: 0.5rem var(--gap);
	padding-block: var(--s-3);
	border-block-start: 1px solid var(--line-dark);
}
.reach__point-title { font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem); font-weight: 500; color: var(--c-white); }
.reach__point-text { color: var(--c-mist); font-size: var(--fs-small); line-height: 1.65; max-width: 48ch; }
@media (min-width: 768px) {
	.reach__point { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: baseline; }
}
@media (min-width: 1024px) {
	.reach__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 8rem); }
}