/**
 * About Us page styles.
 * Reuses shared section primitives from home.css (enqueued as a dependency).
 */

.page-hero {
	padding: 56px 0 72px;
}

.page-hero .kicker {
	margin-bottom: 12px;
}

.page-hero h1 {
	max-width: 760px;
}

.page-hero .lede {
	max-width: 680px;
}

.breadcrumb {
	font-size: 0.82rem;
	color: var(--nc-text-soft);
	margin-bottom: 18px;
}

.breadcrumb a {
	color: var(--nc-blue-dark);
	font-weight: 600;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
	color: var(--nc-navy);
}

.tick-list--loose {
	margin-top: 0;
	max-width: 520px;
}

.tick-list--loose li {
	font-size: 1rem;
	padding: 4px 0;
}

.about-how__title {
	margin-bottom: 8px;
}

.about-how__lede {
	margin-bottom: 10px;
}

.approach-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 10px;
	list-style: none;
	padding: 0;
}

.approach-item {
	display: flex;
	gap: 18px;
	padding: 20px 0;
	border-top: 1px solid var(--nc-line);
}

.approach-item:first-child {
	border-top: none;
}

.approach-num {
	font-family: var(--nc-font-head);
	font-weight: 800;
	color: var(--nc-line-strong);
	font-size: 1.3rem;
	width: 36px;
	flex-shrink: 0;
}

.approach-item h3 {
	margin-bottom: 4px;
	font-size: 1.05rem;
}

.approach-item p {
	color: var(--nc-text-soft);
	font-size: 0.92rem;
}

@media (max-width: 640px) {
	.page-hero {
		padding: 40px 0 48px;
	}
}