/*
 * for-firms-section.css
 * Clients page: "For firms that can't afford to be wrong." title
 * (left column) + paragraph (right column), 2-up row.
 * Fixed font-size (was 45px) and weight to match the rest of the
 * site's h1/h2 pattern (40px, regular). Also removed the
 * white-space:nowrap the old text_balance="true" attribute
 * generated, which prevented the title from wrapping at narrower
 * widths and caused it to overflow into the paragraph column.
 * Added 2026-08-25.
 */

.c-for-firms__title.c-for-firms__title,
.c-for-firms__title.c-for-firms__title .vcex-heading-inner {
	font-family: var(--font-primary) !important;
	font-weight: var(--font-weight-regular) !important;
	font-size: 40px !important;
	line-height: 120%;
	white-space: normal !important;
}

@media (max-width: 767px) {
	.c-for-firms__title {
		font-size: var(--heading-h1-mobile) !important;
	}
}


/* Row wrapper (title + subtitle columns). Moved out of WPBakery's
   inline css attribute per Monika's request. */


/* Replaces [vcex_spacing size="40px"] before the title, and the
   title's own padding-left css attribute. */
.c-for-firms-row .c-for-firms__title {
	margin-top: 40px;
	padding-left: 30px;
}

/* Subtitle: replaces [vcex_spacing size="40px"] before it, and its
   own padding-left css attribute. */
.c-for-firms__subtitle {
	margin-top: 40px;
	padding-left: 30px;
}

/* Numbered Cards row wrapper. Moved out of WPBakery's inline css
   attribute per Monika's request. Also replaces the trailing
   [vcex_spacing size="40px" visibility="hidden-phone"] after the
   cards with desktop-only bottom padding. */



/* Unified wrapper for "For firms..." title/subtitle + the 5
   numbered cards. Both used to be separate [vc_row] elements, each
   with their own gray background and full_width="stretch_row" --
   this caused a visible gap/seam between the two backgrounds and
   also conflicted with WPBakery's JS column-width compensation when
   combined with max-width. Now unified under one [vc_row] (no
   stretch_row) containing two [vc_row_inner] blocks, with a single
   shared background via this one wrapper + pseudo-element. */
.c-for-firms-numbered-wrapper {
	position: relative;
	padding-top: 4vw;
	padding-bottom: 30px;
}

.c-for-firms-numbered-wrapper::before {
	content: "";
	display: block !important;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	background-color: #eeeeee;
	z-index: -1;
}

@media (min-width: 768px) {
	.c-for-firms-numbered-wrapper {
		padding-bottom: 70px;
	}
}