/* ─────────────────────────────────────────────────────────────────────────
   Homepage sections. Depends on tokens.css + base.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Hero ───────────────────────────────────────────────────────────────── */

.sm-hero { padding-block: clamp(56px, 6vw, 104px); }

.sm-hero__grid {
	display: grid;
	gap: var(--space-12);
	grid-template-columns: 1fr;
	align-items: center;
}
@media (min-width: 960px) {
	.sm-hero__grid { grid-template-columns: 1.25fr .75fr; gap: var(--space-16); }
}

.sm-hero__copy h1 {
	font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
	max-width: 16ch;
	margin-bottom: var(--space-5);
}
.sm-hero__copy .sm-lead { max-width: 56ch; margin-bottom: 0; }

/* At-a-glance panel — solid tint on navy, never blur (DS: no transparency language). */
.sm-hero__panel {
	background: var(--navy-800);
	border: 1px solid var(--border-on-navy);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
}
.sm-hero__panel-title {
	font-family: var(--font-display);
	font-size: var(--text-caption);
	font-weight: var(--weight-heading);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-on-navy-muted);
	margin: 0 0 var(--space-5);
}

.sm-hero__facts { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.sm-hero__facts li { display: flex; align-items: flex-start; gap: var(--space-3); }
.sm-hero__facts svg { color: var(--green-400); flex: none; margin-top: 2px; }
.sm-hero__facts span { display: flex; flex-direction: column; font-size: var(--text-small); color: var(--text-on-navy-muted); line-height: 1.45; }
.sm-hero__facts strong { font-family: var(--font-display); font-weight: var(--weight-heading); color: #fff; }

.sm-hero__phone {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding-top: var(--space-5);
	border-top: 1px solid var(--border-on-navy);
	width: 100%;
	font-family: var(--font-display);
	font-size: var(--text-small);
	font-weight: var(--weight-heading);
	color: #fff;
}
.sm-hero__phone:hover { color: var(--green-400); text-decoration: none; }
.sm-hero__phone svg { color: var(--green-400); }

/* ── Trade-lane pills, stacked column variant ───────────────────────────── */

.sm-routes--stack { flex-direction: column; align-items: stretch; }
.sm-routes--stack .sm-route { justify-content: flex-start; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); }
.sm-routes--stack .sm-route span:first-child { color: var(--text-muted); }
.sm-routes--stack .sm-route span:last-child { margin-left: auto; font-weight: var(--weight-heading); }

/* ── Industries list ────────────────────────────────────────────────────── */

.sm-industries { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sm-industries li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--border-subtle);
}
.sm-industries li:first-child { border-top: 1px solid var(--border-subtle); }
.sm-industries strong { font-family: var(--font-display); font-size: var(--text-h4); color: var(--text-heading); }
.sm-industries span { font-size: var(--text-small); color: var(--text-muted); }

/* ── Offices grid ───────────────────────────────────────────────────────── */

.sm-offices-grid .sm-office__address { color: var(--text-muted); font-size: var(--text-small); }