/* About page, new layout (templates/about-new.php, template-parts/about-new/*).
 * Builds on service-detail-new.css (.ssd sections, cards, bands, timeline, form) and
 * pricing.css (.sbp colours, filled box); only the About-specific parts are here,
 * scoped under .sab.
 * navy #191937 · accent #ff0055 · text #62748a · line #e4e6ef
 */

/* ---------- Banner ---------- */

.sab-banner .sab-eyebrow {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #ff0055;
}

/* ---------- Our story ---------- */

.sab-story {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px 60px;
	margin-bottom: 40px;
}

#site .sab-story h2.vc_custom_heading {
	margin-bottom: 0;
}

.sab-story-text p {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.7;
}

.sab-story-text p:last-child {
	margin-bottom: 0;
}

.sab-story-text .sab-lead {
	font-size: 1.25rem;
	line-height: 1.55;
	color: var(--sbp-navy);
}

@media (min-width: 992px) {
	.sab-story {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		align-items: start;
	}
}

/* ---------- What we do (navy band) ---------- */

.sab-band-group + .sab-band-group {
	margin-top: 40px;
}

#site .sab-band-title {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
}

/* Rule running out to the right of the band name */
.sab-band-title::after {
	content: "";
	flex: 1;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.sab-service {
	display: flex;
	flex-direction: column;
}

#site .sab-service h3 {
	padding-right: 0;
}

#site .sab-service-link {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	margin-top: auto;
	padding-top: 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sbp-navy);
}

.sab-service-link [aria-hidden] {
	color: var(--sbp-accent);
	transition: translate 0.2s;
}

.sab-service:hover .sab-service-link [aria-hidden] {
	translate: 4px 0;
}

/* The whole card is the link's click area */
.sab-service-link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.sab-service:focus-within {
	outline: 2px solid var(--sbp-accent);
	outline-offset: 2px;
}

/* ---------- Our journey ---------- */

.ssd-steps .sab-year {
	margin: 0 0 4px;
	padding-top: 2px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: var(--sbp-accent);
}

#site .sab-journey h3 {
	padding-top: 0;
}

/* ---------- Client results ---------- */

.sab-results {
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
}

.sab-figures {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sab-figures li {
	margin: 0;
	padding: 0 0 0 18px;
	border-left: 3px solid var(--sbp-accent);
	list-style: none;
}

.sab-figures li::before {
	content: none;
}

.sab-results .sab-figure {
	margin: 0 0 8px;
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
}

.sab-figure small {
	font-size: 15px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.75);
}

.sab-figures p:not(.sab-figure) {
	font-size: 15px;
	line-height: 1.6;
}

.sab-quote {
	margin: 0;
	padding: 24px 0 0;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	/* Undo the theme's global blockquote card (white box + shadow) */
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}

.sab-results .sab-quote p {
	margin: 0;
	font-size: 1.2rem;
	font-style: italic;
	line-height: 1.5;
	color: #fff;
}

.sab-quote p::before {
	content: "\201C";
	color: var(--sbp-accent);
}

.sab-quote p::after {
	content: "\201D";
	color: var(--sbp-accent);
}

.sab-quote cite {
	display: block;
	margin-top: 10px;
	font-size: 14px;
	font-style: normal;
	color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 768px) {
	.sab-results {
		grid-template-columns: minmax(0, 1fr);
	}

	.sab-figures {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- Values (four cards) ---------- */

@media (min-width: 768px) {
	.ssd-grid-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.ssd-grid-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------- Work with us ---------- */

.sab-contact {
	margin-top: 0;
}

@media (min-width: 1100px) {
	.ssd-split.has-both .sab-contact {
		position: sticky;
		top: 120px;
	}
}