/*
 * who-we-serve.css
 * Clients page: "Who we serve" title block (eyebrow + h2 + subtitle),
 * above the 3 vertical/industry cards.
 * Centered per feedback; title weight set to regular (matching the
 * rest of the site's h1/h2 pattern instead of the old bold 600
 * weight); subtitle matches the title's weight.
 * Added 2026-08-25.
 */

.c-who-serve__eyebrow {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-semibold);
	font-size: 13.5px;
	color: var(--color-off-black-text);
	text-align: center;
}

.c-who-serve__title {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-regular);
	font-size: 40px;
	line-height: 120%;
	color: var(--color-off-black-text);
	text-align: center;
	margin: 20px 0;
}

.c-who-serve__body {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-regular);
	font-size: 18px;
	line-height: 140%;
	color: var(--color-off-black-text);
	text-align: center;
}

.wpex-p-15 {
	padding: 8px !important;
}

@media (max-width: 767px) {
	.c-who-serve__title {
		font-size: var(--heading-h1-mobile);
	}
	.c-who-serve__body {
		font-size: 16px;
	}
}


/* "Learn More" buttons on the 5 "Who we serve" vertical cards:
   match the reusable black-pill button style used elsewhere on the
   site (.c-icon-card__button), since vcex_icon_box doesn't expose
   an el_class attribute for its own generated button element --
   target its stable default class directly instead. */
.c-who-we-serve-cards .vcex-icon-box-button {
	background: var(--color-black) !important;
	color: var(--color-white) !important;
	width: 100%;
	max-width: 173px;
	text-align: center;
	justify-content: center;
}

@media (max-width: 767px) {
	.c-who-we-serve-cards .vcex-icon-box-button {
		max-width: 100%;
	}
}

.c-who-we-serve-cards .vcex-icon-box-button .wpex-icon svg {
	fill: var(--color-white) !important;
}


/* "Who we serve" cards: description + bullet list + button currently
   sit indented (aligned with the title, to the right of the icon)
   since they're siblings inside the same flex-row text column as the
   title. Pull them back to the icon's own left edge with a negative
   margin matching icon width (50px) + gap (20px), per Figma. */
@media (min-width: 576px) {
	.c-who-we-serve-cards .vcex-icon-box-content:not(.c-icon-card-grid__grid *):not(.vc_custom_1778016869167 *),
	.c-who-we-serve-cards .vcex-icon-box-button-wrap:not(.c-icon-card-grid__grid *):not(.vc_custom_1778016869167 *) {
		margin-left: -70px;
		width: calc(100% + 70px);
	}
}

.c-who-we-serve-cards .vcex-icon-box-heading {
	font-size: 16px !important;
}

.c-who-we-serve-cards .vcex-icon-box-content {
	margin-top: 20px;
	font-size: 12px !important;
}

.c-who-we-serve-cards .vcex-icon-box-content p,
.c-who-we-serve-cards .vcex-icon-box-content li {
	font-size: 12px !important;
}

.c-who-we-serve-cards .vcex-icon-box-button {
	font-size: 14px !important;
}


/* Remove the theme's default paragraph bottom margin specifically
   within the "Who we serve" cards' description text, per feedback. */
.c-who-we-serve-cards .vcex-icon-box-content p {
	margin-block-end: 0 !important;
}


/* Section wrapper spacing -- moved out of WPBakery's inline css
   attribute per Monika's request (spacing controlled by CSS only,
   not editable in the visual editor). */
.c-who-we-serve {
	padding: 4vw;
	max-width: var(--max-width);
	margin: 0 auto;
}

.c-who-we-serve-cards {
	margin: 0 auto 60px;
	max-width: var(--max-width);
	padding: 0 5px;
}

/* Outer section wrapper (wraps Who We Serve + For Firms + Numbered
   Cards). Moved out of WPBakery's inline css attribute per
   Monika's request. */
.c-who-we-serve-section {
	margin-bottom: 30px;
}

/* Replaces [vcex_spacing size="30px" visibility="hidden-phone"]
   that added desktop-only extra bottom spacing after the cards
   (on top of the 60px margin above). */
@media (min-width: 768px) {
	.c-who-we-serve-cards {
		margin-bottom: 90px;
	}
}

/* Replaces the two [vcex_spacing size="30px" visibility="visible-phone"]
   shortcodes that manually added mobile-only top spacing. */
@media (max-width: 767px) {
	.c-who-we-serve,
	.c-who-we-serve-cards {
		padding-top: 30px;
	}
}


/* Center the last (incomplete) row of the 3-column industry cards
   grid, matching Figma. Total theme's grid uses display:grid with
   1fr columns (justify-content has no effect there), so switch this
   specific grid to flexbox, which naturally centers a short last
   row via justify-content:center. Breakpoint (1024px) matches the
   theme's own lg breakpoint used for --wpex-grid-columns:3. Per
   feedback. */
.c-who-we-serve__grid {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
}

.c-who-we-serve__grid > .vcex-icon-box-one {
	flex: 0 1 100%;
}

@media (min-width: 1024px) {
	.c-who-we-serve__grid > .vcex-icon-box-one {
		flex: 0 1 calc(33.333% - 20px);
	}
}