/**
 * Site V2 — Redesign-specific CSS
 *
 * Loaded on any v2 page (see finpact_media_is_v2_page() in functions.php).
 * All selectors should be scoped under .site-v2 to avoid affecting v1 pages.
 *
 * Usage: .site-v2 .hero { ... }
 */

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
.site-v2 {
	/* Colors */
	--v2-navy: #1B365D;
	--v2-navy-dark: #142A47;
	--v2-gold: #C5A46D;
	--v2-gold-dark: #B19462;
	/* AA-passing darker gold used wherever the gold is rendered as text
	   on a light background (white / cream / sand). The original
	   --v2-gold only reaches 2.4:1 on white which fails WCAG AA body
	   (needs 4.5:1) and AA large (needs 3:1). --v2-gold-text measures
	   5.67:1 on white, 5.38:1 on cream, and 4.81:1 on sand so it clears
	   AA body on all three light backgrounds used in v2. Keep --v2-gold
	   for non-text uses (buttons, borders, icons) and for text on
	   navy/green backgrounds where contrast inverts. */
	--v2-gold-text: #7D6332;
	--v2-green: #2C6E49;
	--v2-green-dark: #235539;
	--v2-cream: #FAF9F5;
	--v2-sand: #F1ECDF;
	--v2-white: #FFFFFF;
	--v2-ink: #1E1B21;
	--v2-muted: #5F5F5F;
	--v2-muted-light: #8A8A8A;
	--v2-hairline: #E8E4DD;

	/* Typography families */
	--v2-font-display: "Lora", Georgia, serif;
	--v2-font-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--v2-font-eyebrow: "Lexend", -apple-system, sans-serif;

	/* H1 hero type scale — four tiers, single source of truth.
	   Tier 1 = homepage hero (apex)
	   Tier 2 = flagship destination pages: About, service detail, success story detail
	   Tier 3 = section index pages: Services, Insights, Contact, Success Stories
	   Tier 4 = blog post / article pages */
	--v2-h1-tier1: clamp(48px, 6vw, 80px);
	--v2-h1-tier2: clamp(44px, 6vw, 64px);
	--v2-h1-tier3: clamp(40px, 5vw, 56px);
	--v2-h1-tier4: clamp(32px, 4.5vw, 48px);

	/* Spacing */
	--v2-section-py-desktop: 96px;
	--v2-section-py-tablet: 80px;
	--v2-section-py-mobile: 64px;
	--header-height: 80px;
	--v2-container-max: 1280px;
	--v2-container-px-desktop: 4rem;
	--v2-container-px-tablet: 3rem;
	--v2-container-px-mobile: 1.25rem;

	/* Radii */
	--v2-radius-button: 5px;
	--v2-radius-card: 12px;
	--v2-radius-card-lg: 20px;

	/* Shadows */
	--v2-shadow-card: 0px 4px 24px rgba(27, 54, 93, 0.06);
	--v2-shadow-card-hover: 0px 8px 32px rgba(27, 54, 93, 0.10);
}

/* =========================================================
   2. BASE WRAPPER
   ========================================================= */
.site-v2 {
	background: var(--v2-cream);
	color: var(--v2-ink);
	font-family: var(--v2-font-body);
	font-size: 17px;
	line-height: 1.6;
}

.site-v2 * {
	box-sizing: border-box;
}

/* =========================================================
   3. SECTION BACKGROUND VARIANTS
   ========================================================= */
.site-v2 .v2-section {
	padding: var(--v2-section-py-desktop) 0;
	position: relative;
}

.site-v2 .v2-section--white { background: var(--v2-white); }
.site-v2 .v2-section--cream { background: var(--v2-cream); }
.site-v2 .v2-section--sand { background: var(--v2-sand); }

.site-v2 .v2-section--navy {
	background: var(--v2-navy);
	color: var(--v2-white);
}

.site-v2 .v2-section--green {
	background: var(--v2-green);
	color: var(--v2-white);
}

@media (max-width: 960px) {
	.site-v2 .v2-section {
		padding: var(--v2-section-py-tablet) 0;
	}
}

@media (max-width: 767px) {
	.site-v2 .v2-section {
		padding: var(--v2-section-py-mobile) 0;
	}
}

/* =========================================================
   4. CONTAINER
   ========================================================= */
.site-v2 .v2-container {
	max-width: var(--v2-container-max);
	margin: 0 auto;
	padding: 0 var(--v2-container-px-desktop);
}

@media (max-width: 960px) {
	.site-v2 .v2-container {
		padding: 0 var(--v2-container-px-tablet);
	}
}

@media (max-width: 767px) {
	.site-v2 .v2-container {
		padding: 0 var(--v2-container-px-mobile);
	}
}

/* =========================================================
   5. TYPOGRAPHY UTILITIES
   ========================================================= */

/* Eyebrow */
.site-v2 .v2-eyebrow {
	font-family: var(--v2-font-eyebrow);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--v2-gold-text);
	margin-bottom: 1.5rem;
	display: inline-block;
}

.site-v2 .v2-eyebrow--navy { color: var(--v2-navy); }
.site-v2 .v2-eyebrow--white { color: rgba(255, 255, 255, 0.7); }

/* Eyebrows inside dark sections invert back to the brand gold —
   contrast is fine on navy/green (5.1:1) and the darker text-gold
   would actually drop below AA there. Covers every navy/green
   section currently in production (the abstract --navy/--green
   utility classes plus the named sections that bake navy in). */
.site-v2 .v2-section--navy .v2-eyebrow,
.site-v2 .v2-section--green .v2-eyebrow,
.site-v2 .v2-service-proof .v2-eyebrow,
.site-v2 .v2-success-story-testimonial .v2-eyebrow,
.site-v2 .v2-success-story-results .v2-eyebrow,
.site-v2 .v2-success-story-outcomes .v2-eyebrow {
	color: var(--v2-gold);
}

/* Display headings */
.site-v2 .v2-display {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
}

/* .v2-display--xl is the homepage hero apex (Tier 1). The other
   display sizes remain page-utility scales unrelated to the H1 tier
   system. */
.site-v2 .v2-display--xl { font-size: var(--v2-h1-tier1); }
.site-v2 .v2-display--lg { font-size: clamp(40px, 5vw, 64px); }
.site-v2 .v2-display--md { font-size: clamp(32px, 4vw, 48px); }
.site-v2 .v2-display--sm { font-size: clamp(24px, 3vw, 36px); }

.site-v2 .v2-section--navy .v2-display,
.site-v2 .v2-section--green .v2-display {
	color: var(--v2-white);
}

/* Italic accent word (JP-Morgan-style) */
.site-v2 .v2-display-accent {
	font-style: italic;
	font-weight: 400;
	color: var(--v2-gold-text);
}

/* On dark section backgrounds the accent reverts to the brand gold
   so it stays readable (the darker text-gold drops below AA on navy).
   Mirrors the .v2-eyebrow dark-section override above. */
.site-v2 .v2-section--navy .v2-display-accent,
.site-v2 .v2-section--green .v2-display-accent,
.site-v2 .v2-service-proof .v2-display-accent,
.site-v2 .v2-success-story-testimonial .v2-display-accent,
.site-v2 .v2-success-story-results .v2-display-accent,
.site-v2 .v2-success-story-outcomes .v2-display-accent {
	color: var(--v2-gold);
}

/* Subhead */
.site-v2 .v2-subhead {
	font-family: var(--v2-font-body);
	font-size: 19px;
	line-height: 1.6;
	color: var(--v2-muted);
	font-weight: 400;
	max-width: 640px;
}

.site-v2 .v2-section--navy .v2-subhead,
.site-v2 .v2-section--green .v2-subhead {
	color: rgba(255, 255, 255, 0.75);
}

/* =========================================================
   6. BUTTONS
   ========================================================= */
.site-v2 .v2-btn {
	display: inline-block;
	padding: 14px 32px;
	border-radius: var(--v2-radius-button);
	font-family: var(--v2-font-eyebrow);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	border: 2px solid transparent;
}

.site-v2 .v2-btn--primary {
	background: var(--v2-green);
	color: var(--v2-white);
	border-color: var(--v2-green);
}

.site-v2 .v2-btn--primary:hover {
	background: var(--v2-green-dark);
	border-color: var(--v2-green-dark);
}

.site-v2 .v2-btn--ghost {
	background: transparent;
	color: var(--v2-navy);
	border-color: var(--v2-navy);
}

.site-v2 .v2-btn--ghost:hover {
	background: rgba(27, 54, 93, 0.08);
}

.site-v2 .v2-section--navy .v2-btn--ghost {
	color: var(--v2-white);
	border-color: var(--v2-white);
}

.site-v2 .v2-section--navy .v2-btn--ghost:hover {
	background: var(--v2-white);
	color: var(--v2-navy);
}

/* =========================================================
   7. LINK UTILITY
   ========================================================= */
.site-v2 .v2-link {
	font-family: var(--v2-font-eyebrow);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--v2-green);
	text-decoration: none;
	border-bottom: 1px solid var(--v2-green);
	padding-bottom: 2px;
	transition: opacity 0.2s ease;
}

.site-v2 .v2-link:hover {
	opacity: 0.7;
}

.site-v2 .v2-link::after {
	content: " →";
}

/* =========================================================
   8. CARD BASE
   ========================================================= */
.site-v2 .v2-card {
	background: var(--v2-white);
	border-radius: var(--v2-radius-card-lg);
	padding: 2.5rem;
	box-shadow: var(--v2-shadow-card);
	transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-v2 .v2-card:hover {
	box-shadow: var(--v2-shadow-card-hover);
}

/* =========================================================
   9. HERO (Phase 2)
   ========================================================= */
/* Homepage hero — hybrid layout:
     • Top: eyebrow + headline centered, full content width
     • Bottom: two-column split — subhead + CTAs on the left (~42%),
       illustration on the right (~58%), centered vertically.
   Distinct from .v2-service-hero, which uses its own two-column
   --has-illustration grid for service detail pages.

   Top padding is intentionally tighter than the .v2-service-hero
   128/96 pattern so the full hero (eyebrow → headline → split row)
   fits on a standard laptop viewport (~900px tall) without the
   illustration getting clipped below the fold. */
.site-v2 .v2-hero {
	padding-top: 72px;
	padding-bottom: 96px;
}

/* Top row — eyebrow + headline centered, spanning the full container
   inner width. Headline caps at 1000px so it stays on 1-2 lines and
   reads as a deliberate centerpiece, not edge-to-edge. */
.site-v2 .v2-hero__top {
	text-align: center;
	margin-bottom: 40px;
}

.site-v2 .v2-hero .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-hero__headline,
.site-v2 .v2-hero h1 {
	max-width: 1000px;
	margin: 0 auto;
}

/* Bottom row — two-column split. CSS Grid with a 42 : 58 fractional
   ratio applied to the remaining inline space (after the 56px gap),
   so the illustration column lands at ~55% of the container inner
   width and the text column at ~40%. align-items: center keeps the
   left text cluster vertically centered against the taller image. */
.site-v2 .v2-hero__split {
	display: grid;
	grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
	column-gap: 56px;
	align-items: center;
}

.site-v2 .v2-hero__content {
	text-align: left;
}

.site-v2 .v2-hero__subhead,
.site-v2 .v2-hero .v2-subhead {
	max-width: none;
	margin: 0 0 32px 0;
}

.site-v2 .v2-hero__ctas {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.site-v2 .v2-hero__visual {
	width: 100%;
}

.site-v2 .v2-hero__image {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 1023px) {
	.site-v2 .v2-hero {
		padding-top: 56px;
		padding-bottom: 80px;
	}
	.site-v2 .v2-hero__top {
		margin-bottom: 32px;
	}
	.site-v2 .v2-hero__split {
		column-gap: 40px;
	}
}

@media (max-width: 767px) {
	.site-v2 .v2-hero {
		padding-top: 48px;
		padding-bottom: 56px;
	}
	.site-v2 .v2-hero__top {
		margin-bottom: 32px;
	}
	/* Collapse the split to a single column: text first, illustration
	   below. The illustration sits at full container width on mobile. */
	.site-v2 .v2-hero__split {
		grid-template-columns: 1fr;
		row-gap: 40px;
	}
	/* Stack CTAs vertically; primary stretches to column width,
	   ghost sits beneath it left-aligned with the subhead. */
	.site-v2 .v2-hero__ctas {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}
	.site-v2 .v2-hero__ctas .v2-btn {
		text-align: center;
	}
}

/* =========================================================
   10. WHO WE SERVE (Phase 3)
   ========================================================= */
/* Flat cream background inherited from .v2-section--cream
   on the section element. (Prior dot-grid wash removed.) */

.site-v2 .v2-who-we-serve__header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}

.site-v2 .v2-who-we-serve__header .v2-eyebrow {
	margin-bottom: 1.25rem;
}

.site-v2 .v2-who-we-serve__header h2 {
	margin: 0;
}

.site-v2 .v2-who-we-serve__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 64px;
}

@media (max-width: 1024px) {
	.site-v2 .v2-who-we-serve__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.site-v2 .v2-who-we-serve__grid {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-top: 40px;
	}
}

/* =========================================================
   11. SOFT CARD (reusable — for Services, Case Studies, Insights)
   ========================================================= */
.site-v2 .fpm-soft-card {
	background: var(--v2-white);
	border-radius: 12px;
	padding: 40px;
	box-shadow:
		0 1px 2px rgba(27, 54, 93, 0.04),
		0 4px 16px rgba(27, 54, 93, 0.05);
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.site-v2 .fpm-soft-card:hover {
	transform: translateY(-2px);
	box-shadow:
		0 2px 4px rgba(27, 54, 93, 0.06),
		0 12px 28px rgba(27, 54, 93, 0.08);
}

@media (max-width: 767px) {
	.site-v2 .fpm-soft-card {
		padding: 28px;
	}
}

.site-v2 .fpm-soft-card__title {
	font-family: var(--v2-font-display);
	font-weight: 500;
	font-size: clamp(22px, 2vw, 24px);
	line-height: 1.2;
	color: var(--v2-navy);
	margin: 0 0 12px 0;
	/* Item 6: reserve 2 lines of height so descriptions across
	   Who We Serve / Services cards start at the same baseline
	   regardless of name length. */
	min-height: 2.4em;
}

@media (max-width: 1024px) {
	.site-v2 .fpm-soft-card__title {
		/* Cards go 2-wide or 1-wide — heights are flexible,
		   drop the reservation so short names don't leave gaps. */
		min-height: 0;
	}
}

.site-v2 .fpm-soft-card__desc {
	font-family: var(--v2-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--v2-ink);
	margin: 0;
}

/* Soft-card flex column — lets fpm-arrow-link hug the card bottom
   (for Services) while leaving shorter cards (Who We Serve) unaffected. */
.site-v2 .fpm-soft-card {
	display: flex;
	flex-direction: column;
}

.site-v2 .fpm-soft-card__eyebrow {
	font-family: var(--v2-font-eyebrow);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--v2-gold-text);
	margin: 0 0 12px 0;
	display: inline-block;
}

/* Featured-card eyebrow floats top-right, out of the content flow,
   so icon/title/desc/link stay aligned with peer cards in the same row. */
.site-v2 .fpm-soft-card--featured .fpm-soft-card__eyebrow {
	position: absolute;
	top: 20px;
	right: 24px;
	margin: 0;
}

.site-v2 .fpm-arrow-link {
	font-family: var(--v2-font-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--v2-green);
	text-decoration: none;
	margin-top: auto;
	padding-top: 20px;
	align-self: flex-start;
}

.site-v2 .fpm-arrow-link::after {
	content: " \2192";
	display: inline-block;
	margin-left: 4px;
	transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-v2 .fpm-arrow-link:hover {
	text-decoration: underline;
}

.site-v2 .fpm-arrow-link:hover::after {
	transform: translateX(4px);
}

.site-v2 .fpm-soft-card--featured {
	position: relative;
	background: #FAF7EE;
	box-shadow:
		0 2px 4px rgba(27, 54, 93, 0.05),
		0 8px 24px rgba(27, 54, 93, 0.07);
}

/* Gold top accent — pseudo-element hugs the card's top border-radius
   so corners stay clean and content doesn't shift vs. peer cards. */
.site-v2 .fpm-soft-card--featured::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--v2-gold);
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}

.site-v2 .fpm-soft-card--featured:hover {
	box-shadow:
		0 4px 8px rgba(27, 54, 93, 0.07),
		0 16px 40px rgba(27, 54, 93, 0.10);
}

/* Soft elevation lift, scoped to the homepage Who We Serve and
   Services cards only. Overrides the shared .fpm-soft-card at-rest
   shadow without affecting insights, success-stories, or services-v2
   grid cards, which intentionally keep the heavier two-layer shadow. */
.site-v2 .v2-who-we-serve__card,
.site-v2 .v2-services__card {
	box-shadow: 0 4px 32px rgba(27, 54, 93, 0.06);
	padding: 28px;
	position: relative;
	z-index: 1;
}

@media (max-width: 767px) {
	.site-v2 .v2-who-we-serve__card,
	.site-v2 .v2-services__card {
		padding: 24px;
	}
}

/* Reserve two lines of title height on Who We Serve cards so the
   gold hairline divider lands at the same baseline across every
   card in a row, even when a name fits on one line. Value covers
   2 text lines at line-height 1.2 plus the ::after divider's
   16/1/16 margin/height/margin so the divider lines up exactly.
   Scoped to WWS only; Services cards keep the shared base. */
.site-v2 .v2-who-we-serve__card .fpm-soft-card__title {
	min-height: 3.8em;
}

/* Hairline gold divider between title and body on Who We Serve
   cards. The 16px margin-bottom collapses with the title's own
   12px to produce the spec'd 16px gap below the rule. */
.site-v2 .v2-who-we-serve__card .fpm-soft-card__title::after {
	content: "";
	display: block;
	width: 32px;
	height: 1px;
	background: var(--v2-gold);
	margin: 16px 0;
}

/* Homepage card hover: gentle lift with a green-tinted shadow,
   layered over the existing soft navy shadow. Scoped to the three
   homepage card families; success-stories/services-v2/insights-archive
   cards keep the shared base hover behavior. */
.site-v2 .v2-services__card,
.site-v2 .v2-insights__card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.site-v2 .v2-services__card:hover,
.site-v2 .v2-insights__card:hover {
	transform: translateY(-4px);
	box-shadow:
		0 12px 32px rgba(44, 110, 73, 0.12),
		0 4px 16px rgba(27, 54, 93, 0.05);
}

/* Who We Serve cards are not clickable. Suppress the inherited
   .fpm-soft-card:hover lift (-2px translate + navy shadow change)
   so the card doesn't telegraph interactivity it doesn't have. */
.site-v2 .v2-who-we-serve__card:hover {
	transform: none;
	box-shadow: 0 4px 32px rgba(27, 54, 93, 0.06);
	cursor: default;
}

/* Card illustration at the top of each card. Scoped to the homepage
   Who We Serve / Services cards and the About audience blocks so it
   doesn't bleed onto the shared .fpm-soft-card base used elsewhere. */
.site-v2 .v2-who-we-serve__card .v2-card-illustration,
.site-v2 .v2-services__card .v2-card-illustration,
.site-v2 .v2-about-audience__block .v2-card-illustration {
	display: block;
	width: 96px;
	height: 96px;
	margin: 0 0 24px 0;
}

@media (max-width: 1024px) {
	.site-v2 .v2-who-we-serve__card .v2-card-illustration,
	.site-v2 .v2-services__card .v2-card-illustration,
	.site-v2 .v2-about-audience__block .v2-card-illustration {
		width: 80px;
		height: 80px;
		margin-bottom: 16px;
	}
}

@media (max-width: 767px) {
	.site-v2 .v2-who-we-serve__card .v2-card-illustration,
	.site-v2 .v2-services__card .v2-card-illustration,
	.site-v2 .v2-about-audience__block .v2-card-illustration {
		width: 64px;
		height: 64px;
		margin-bottom: 16px;
	}
}

/* Gold L-bracket in the top-right corner of Services cards.
   Skipped on the featured End-to-End Marketing card because that
   card already carries the gold top accent rule and a floating
   "Full-Service" eyebrow at the same coordinates, which would
   collide or over-decorate. */
.site-v2 .v2-services__card {
	position: relative;
}

.site-v2 .v2-services__card:not(.fpm-soft-card--featured)::before {
	content: "";
	position: absolute;
	top: 20px;
	right: 20px;
	width: 24px;
	height: 24px;
	border-top: 1px solid var(--v2-gold);
	border-right: 1px solid var(--v2-gold);
	pointer-events: none;
}

/* Stretched-link pattern: the existing .fpm-arrow-link anchor stays
   the only semantic link in the markup, but a ::before overlay
   covers the whole card so clicks land anywhere on the surface.
   ::after is already used for the arrow glyph, so the overlay
   lives on ::before. Scoped to .v2-services__card only — insights,
   success-stories, and services-v2 grid also use .fpm-arrow-link
   but handle clickability differently. The card's existing L-bracket
   ::before has pointer-events: none, so it doesn't intercept clicks. */
.site-v2 .v2-services__card {
	cursor: pointer;
}

.site-v2 .v2-services__card .fpm-arrow-link::before {
	content: "";
	position: absolute;
	inset: 0;
}

.site-v2 .v2-services__card .fpm-arrow-link:focus-visible {
	outline: 2px solid var(--v2-green);
	outline-offset: 2px;
}

/* =========================================================
   12. SERVICES (Phase 4)
   ========================================================= */
.site-v2 .v2-services__header {
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
}

.site-v2 .v2-services__header .v2-eyebrow {
	margin-bottom: 1.25rem;
}

.site-v2 .v2-services__header h2 {
	margin: 0;
}

.site-v2 .v2-services__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 64px;
}

@media (max-width: 1024px) {
	.site-v2 .v2-services__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.site-v2 .v2-services__grid {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-top: 40px;
	}
}

/* =========================================================
   13. PHILOSOPHY (Phase 5)
   ========================================================= */
.site-v2 .v2-philosophy {
	position: relative;
	background: radial-gradient(
		ellipse at center,
		#1F3C65 0%,
		var(--v2-navy) 60%,
		#172E4D 100%
	);
	color: var(--v2-cream);
	padding-top: 96px;
	padding-bottom: 96px;
}

.site-v2 .v2-philosophy .v2-container {
	max-width: 1120px;
}

.site-v2 .v2-philosophy__header {
	text-align: center;
	margin-bottom: 96px;
}

.site-v2 .v2-philosophy__header .v2-eyebrow {
	margin-bottom: 1.25rem;
}

.site-v2 .v2-philosophy__header h2 {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--v2-cream);
	font-size: clamp(36px, 5vw, 52px);
	margin: 0;
}

.site-v2 .v2-philosophy__pillars {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 48px;
	row-gap: 48px;
	align-items: start;
}

.site-v2 .v2-philosophy__pillar-number {
	font-family: var(--v2-font-eyebrow);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--v2-gold);
	display: block;
	margin-bottom: 16px;
}

.site-v2 .v2-philosophy__pillar-rule {
	width: 40px;
	height: 2px;
	background: var(--v2-gold);
	border: 0;
	margin: 0 0 24px 0;
}

.site-v2 .v2-philosophy__pillar-statement {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--v2-cream);
	font-size: 1.75rem;
	margin: 0 0 24px 0;
}

.site-v2 .v2-philosophy__pillar-elaboration {
	font-family: var(--v2-font-body);
	font-size: 0.95rem;
	line-height: 1.55;
	color: rgba(250, 249, 245, 0.85);
	margin: 0;
}

@media (max-width: 1023px) {
	.site-v2 .v2-philosophy__pillars {
		grid-template-columns: 1fr;
		row-gap: 64px;
	}

	.site-v2 .v2-philosophy__pillar-elaboration {
		max-width: 640px;
	}
}

@media (max-width: 767px) {
	.site-v2 .v2-philosophy {
		padding-top: 64px;
		padding-bottom: 64px;
	}

	.site-v2 .v2-philosophy__header {
		margin-bottom: 64px;
	}

	.site-v2 .v2-philosophy__pillar-statement {
		font-size: 1.5rem;
	}

	.site-v2 .v2-philosophy__pillars {
		row-gap: 48px;
	}
}

/* =========================================================
   14. TRUST (Phase 6)
   ========================================================= */
.site-v2 .v2-trust__header {
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
}

.site-v2 .v2-trust__header .v2-eyebrow {
	margin-bottom: 1.25rem;
}

.site-v2 .v2-trust__header h2 {
	margin: 0;
}

/* Lead testimonial block */
.site-v2 .v2-trust__lead {
	text-align: center;
	max-width: 960px;
	margin: 48px auto 0;
	padding: 0;
}

/* Firm logo at the top of each testimonial block. Monochrome navy
   treatment via filter — keeps PNGs visually quiet so the quote
   stays the focus. The filter stack approximates #1B365D by killing
   color, then layering a navy tint via sepia + hue-rotate + saturate. */
.site-v2 .v2-trust__logo {
	display: flex;
	justify-content: center;
	align-items: center;
}

.site-v2 .v2-trust__logo-img {
	height: 44px;
	width: auto;
	max-width: 240px;
	object-fit: contain;
	display: block;
	margin: 0 auto 28px;
}

@media (max-width: 767px) {
	.site-v2 .v2-trust__logo-img {
		height: 36px;
	}
}

.site-v2 .v2-trust__quote-mark {
	display: block;
	font-family: var(--v2-font-display);
	font-size: 48px;
	line-height: 1;
	color: var(--v2-gold);
	margin-bottom: 24px;
}

.site-v2 .v2-trust__quote {
	font-family: var(--v2-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 34px;
	line-height: 1.4;
	color: var(--v2-navy);
	margin: 0 auto;
	padding: 0;
	/* Reset the sitewide `blockquote { border-left: 4px solid ... }` rule
	   so the content box is symmetric and centered text sits on the true
	   center line (not offset 2px right by an asymmetric border). */
	border: 0;
	max-width: 65ch;
}

.site-v2 .v2-trust__attribution {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin: 16px 0 0 0;
}

.site-v2 .v2-trust__attribution-role {
	font-family: var(--v2-font-body);
	font-size: 15px;
	font-weight: 400;
	color: rgba(27, 54, 93, 0.7);
}

.site-v2 .v2-trust__attribution-firm {
	font-family: var(--v2-font-body);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--v2-navy);
}

.site-v2 .v2-trust__stats-timeframe {
	display: block;
	text-align: center;
	font-family: var(--v2-font-eyebrow);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(27, 54, 93, 0.55);
	margin-top: 40px;
	margin-bottom: 0;
}

/* Stats row — anchored as a single labeled unit below the timeframe
   eyebrow. Soft navy wash + padding + radius binds the three numbers
   visually without feeling boxed. */
.site-v2 .v2-trust__stats {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 64px;
	max-width: 680px;
	margin: 16px auto 0;
	padding: 28px 40px;
	background: rgba(27, 54, 93, 0.03);
	border-radius: 12px;
}

.site-v2 .v2-trust__stat {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 120px;
}

/* Gold dividers between stats (vertical on row layout) */
.site-v2 .v2-trust__stat + .v2-trust__stat::before {
	content: "";
	position: absolute;
	left: -32px;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 48px;
	background: var(--v2-gold);
	opacity: 0.4;
}

.site-v2 .v2-trust__stat-number {
	font-family: var(--v2-font-display);
	font-size: 48px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
}

/* Symbol prefix/suffix in stat values (+ and x). Green signals
   positive direction across Trust, Proof, and Results contexts.
   Numbers and % stay navy so the figures read as the anchor. */
.site-v2 .fpm-stat-symbol {
	color: var(--v2-green);
}

.site-v2 .v2-trust__stat-label {
	font-family: var(--v2-font-body);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(27, 54, 93, 0.7);
	max-width: 140px;
	text-align: center;
	margin-top: 8px;
}

/* Separator between lead and supporting — hidden now that the
   80px gap below provides clear visual separation on its own. */
.site-v2 .v2-trust__separator {
	display: none;
}

/* Supporting testimonial */
.site-v2 .v2-trust__supporting {
	text-align: center;
	max-width: 720px;
	margin: 80px auto 0;
	padding: 0;
}

.site-v2 .v2-trust__quote--supporting {
	font-size: 22px;
	line-height: 1.5;
	color: rgba(27, 54, 93, 0.88);
}

.site-v2 .v2-trust__attribution--supporting {
	margin-top: 16px;
	gap: 2px;
}

.site-v2 .v2-trust__attribution-name {
	font-family: var(--v2-font-body);
	font-size: 15px;
	font-weight: 500;
	color: var(--v2-navy);
}

.site-v2 .v2-trust__attribution--supporting .v2-trust__attribution-role {
	font-size: 13px;
}

.site-v2 .v2-trust__attribution--supporting .v2-trust__attribution-firm {
	font-size: 14px;
}

/* CTA link */
.site-v2 .v2-trust__cta {
	text-align: center;
	margin-top: 40px;
}

.site-v2 .v2-trust__cta-link {
	/* Inherits .fpm-arrow-link (green, Figtree 500, arrow, underline on hover).
	   Override the flex-bottom alignment since this isn't inside a card. */
	margin-top: 0;
	padding-top: 0;
	align-self: auto;
}

/* Tablet */
@media (max-width: 1024px) {
	.site-v2 .v2-trust__stats {
		gap: 48px;
	}
	.site-v2 .v2-trust__stat + .v2-trust__stat::before {
		left: -24px;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.site-v2 .v2-trust__lead {
		margin-top: 56px;
	}

	.site-v2 .v2-trust__quote-mark {
		font-size: 36px;
		margin-bottom: 16px;
	}

	.site-v2 .v2-trust__quote {
		font-size: 24px;
	}

	.site-v2 .v2-trust__attribution {
		margin-top: 28px;
	}

	.site-v2 .v2-trust__stats {
		flex-direction: column;
		gap: 32px;
		padding: 24px 20px;
	}

	/* Divider flips from vertical to horizontal in column layout */
	.site-v2 .v2-trust__stat + .v2-trust__stat::before {
		left: 50%;
		top: -16px;
		transform: translateX(-50%);
		width: 48px;
		height: 1px;
	}

	.site-v2 .v2-trust__stat-number {
		font-size: 36px;
	}

	.site-v2 .v2-trust__separator {
		margin: 56px auto;
	}

	.site-v2 .v2-trust__quote--supporting {
		font-size: 19px;
	}

	.site-v2 .v2-trust__cta {
		margin-top: 48px;
	}
}

/* =========================================================
   15. INSIGHTS (Phase 7)
   ========================================================= */
.site-v2 .v2-insights__header {
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
}

.site-v2 .v2-insights__header .v2-eyebrow {
	margin-bottom: 1.25rem;
}

.site-v2 .v2-insights__header h2 {
	margin: 0;
}

.site-v2 .v2-insights__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 72px;
}

@media (max-width: 1024px) {
	.site-v2 .v2-insights__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Third card (odd one out in 2-col) centers under the first two. */
	.site-v2 .v2-insights__card:nth-child(3) {
		grid-column: 1 / -1;
		max-width: calc(50% - 12px);
		justify-self: center;
	}
}

@media (max-width: 767px) {
	.site-v2 .v2-insights__grid {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-top: 48px;
	}

	.site-v2 .v2-insights__card:nth-child(3) {
		grid-column: auto;
		max-width: none;
		justify-self: stretch;
	}
}

/* Insights card — override soft-card padding so image bleeds to top edge. */
.site-v2 .v2-insights__card {
	position: relative;
	padding: 0;
	overflow: hidden;
}

.site-v2 .v2-insights__card-image {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--v2-navy);
}

.site-v2 .v2-insights__card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.site-v2 .v2-insights__card-fallback {
	width: 100%;
	height: 100%;
	background: var(--v2-navy);
	color: var(--v2-gold);
	display: flex;
	align-items: center;
	justify-content: center;
}

.site-v2 .v2-insights__card-fallback svg {
	width: 80px;
	height: 80px;
}

.site-v2 .v2-insights__card-body {
	padding: 24px 28px 32px 28px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.site-v2 .v2-insights__card-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--v2-font-eyebrow);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	margin-bottom: 12px;
}

.site-v2 .v2-insights__card-category {
	color: var(--v2-gold-text);
	font-weight: 500;
}

.site-v2 .v2-insights__card-meta-divider {
	color: var(--v2-gold);
	opacity: 0.6;
	font-weight: 400;
}

.site-v2 .v2-insights__card-date {
	color: rgba(27, 54, 93, 0.7);
	font-weight: 400;
}

.site-v2 .v2-insights__card-title {
	font-family: var(--v2-font-display);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.3;
	color: var(--v2-navy);
	margin: 0 0 12px 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(22px * 1.3 * 3);
}

.site-v2 .v2-insights__card-title a {
	color: inherit;
	text-decoration: none;
}

/* Title link overlay makes the whole card clickable. */
.site-v2 .v2-insights__card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.site-v2 .v2-insights__card-link:focus-visible {
	outline: 2px solid var(--v2-green);
	outline-offset: 2px;
}

.site-v2 .v2-insights__card-excerpt {
	font-family: var(--v2-font-body);
	font-size: 15px;
	line-height: 1.55;
	color: var(--v2-ink);
	margin: 0 0 20px 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(15px * 1.55 * 2);
}

.site-v2 .v2-insights__card-readmore {
	margin-top: auto;
	padding-top: 0;
	cursor: pointer;
}

/* Arrow responds to card-level hover: the "Read more" span can't fire
   its own :hover since the title link's ::after overlay intercepts
   pointer events above it. */
.site-v2 .fpm-soft-card:hover .fpm-arrow-link::after {
	transform: translateX(4px);
}

@media (max-width: 767px) {
	.site-v2 .v2-insights__card-title {
		font-size: 20px;
		min-height: calc(20px * 1.3 * 3);
	}
}

.site-v2 .v2-insights__cta {
	text-align: center;
	margin-top: 64px;
}

/* =========================================================
   16. CLOSING CTA (Phase 8)
   ========================================================= */
.site-v2 .v2-closing-cta__content {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.site-v2 .v2-closing-cta__content .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-closing-cta__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: clamp(40px, 5vw, 56px);
	margin: 0 0 24px 0;
}

.site-v2 .v2-closing-cta__subhead {
	font-family: var(--v2-font-body);
	font-size: 18px;
	line-height: 1.6;
	color: rgba(27, 54, 93, 0.85);
	max-width: 540px;
	margin: 0 auto 48px;
}

.site-v2 .v2-closing-cta__button {
	/* Inherits .v2-btn.v2-btn--primary from Phase 1 (gold fill, navy text,
	   gold-dark on hover) — matches hero primary CTA exactly. */
}

@media (max-width: 767px) {
	.site-v2 .v2-closing-cta__subhead {
		font-size: 16px;
	}
}

/* =========================================================
   17. NAV CTA (Polish — Items 1 & 3)
   Scoped under .site-header--v2 so v1 nav is untouched.
   Rules live in site-v2.css (only loaded on v2 preview pages),
   so they never apply elsewhere.
   Hex values hardcoded because --v2-* tokens are scoped to
   .site-v2 on <main>, outside the header's DOM context.
   Colors mirror the green-as-interactive role redistribution:
   #2C6E49 (green) for default, #235539 (green-dark) for hover,
   #FFFFFF (white) text for contrast on the green background.
   ========================================================= */

.site-header--v2 .header-cta .btn {
	font-family: "Lexend", sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 14px 32px;
	border-radius: 5px;
	background: #2C6E49;
	color: #FFFFFF;
	border: 2px solid #2C6E49;
	transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
		border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
		color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header--v2 .header-cta .btn:hover {
	background: #235539;
	border-color: #235539;
	color: #FFFFFF;
}

.site-header--v2 .header-cta-mobile {
	display: none;
}

/* WCAG 2.5.5 / iOS HIG / Material compliance — hamburger gets a
   44×44 minimum tap zone. The 24×16 icon stays visually unchanged
   (justify-content + align-items center it within the larger
   button). Unconditional rule: the button is display: none above
   960px so this only affects mobile/tablet widths where it renders. */
.site-header--v2 .menu-toggle {
	min-width: 44px;
	min-height: 44px;
	align-items: center;
}

@media (max-width: 767px) {
	/* Tighten header horizontal padding on v2 mobile so the logo +
	   mobile CTA + hamburger all fit comfortably on a 375-393px
	   viewport without horizontal overflow. */
	.site-header--v2 .header-inner {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	.site-header--v2 .header-cta-mobile {
		display: inline-flex;
		align-items: center;
		font-family: "Lexend", sans-serif;
		font-size: 11px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		padding: 8px 12px;
		border-radius: 5px;
		background: #2C6E49;
		color: #FFFFFF;
		border: 2px solid #2C6E49;
		text-decoration: none;
		white-space: nowrap;
		transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.site-header--v2 .header-cta-mobile:hover {
		background: #235539;
		border-color: #235539;
		color: #FFFFFF;
	}
}

/* =========================================================
   17b. SERVICES DROPDOWN — V2 NAV
   Hover/focus-driven dropdown on the Services nav item. Injected
   server-side by finpact_media_inject_services_dropdown() in
   functions.php; styled here. Desktop-only reveal (>= 960px);
   on mobile the sub-menu renders as a flat indented list inside
   the hamburger-toggled overlay.
   ========================================================= */

/* Mobile / default: dropdown is collapsed inside the hamburger overlay
   and reveals only when the user taps the Services row (handled by
   services-toggle.js, which sets .is-services-expanded on the parent li). */
.main-navigation .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Services row anchor becomes a flex container so the chevron sits at
   the right edge of the row (tap target spans full row width). */
.main-navigation.toggled .menu-item-has-children > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.services-toggle-chevron {
	display: inline-flex;
	align-items: center;
	color: currentColor;
	transition: transform 0.15s ease-out;
	transform: rotate(0deg);
	flex-shrink: 0;
	margin-left: 12px;
}

.main-navigation.toggled .menu-item-has-children.is-services-expanded > a .services-toggle-chevron {
	transform: rotate(90deg);
}

/* Collapsed state: clip the sub-menu to zero height. max-height +
   opacity transition gives a soft slide-down without measuring
   dynamic heights from JS. 500px is a generous upper bound for the
   "All Services" link + 6 service items. */
.main-navigation.toggled .sub-menu {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	padding: 0 0 0 16px;
	border-left: 2px solid rgba(27, 54, 93, 0.08);
	margin-left: 4px;
	transition: max-height 0.2s ease-out, opacity 0.15s ease-out, padding 0.2s ease-out;
}

.main-navigation.toggled .menu-item-has-children.is-services-expanded > .sub-menu {
	max-height: 500px;
	opacity: 1;
	padding: 8px 0 12px 16px;
}

.main-navigation.toggled .sub-menu a {
	font-size: 16px;
	font-weight: 500;
	padding: 8px 0;
	border-bottom: none;
}

/* "All Services →" is a mobile-only reachability link: needed because
   tapping the Services row toggles the dropdown instead of navigating
   to the index. On desktop the parent link still navigates on click,
   so this row is redundant and hidden. */
.services-dropdown__all {
	display: none;
}

.main-navigation.toggled .services-dropdown__all {
	display: list-item;
}

.main-navigation.toggled .services-dropdown__all > a {
	font-weight: 700;
	color: #1B365D;
}

@media (prefers-reduced-motion: reduce) {
	.main-navigation.toggled .sub-menu,
	.services-toggle-chevron {
		transition: none;
	}
}

@media screen and (min-width: 960px) {
	/* Chevron is a mobile-only affordance — hover takes over here. */
	.services-toggle-chevron {
		display: none;
	}

	/* Parent li becomes positioning context */
	.main-navigation .menu-item-has-children {
		position: relative;
	}

	/* Dropdown panel — hidden by default, revealed on hover / focus-within.
	   Override the parent .main-navigation ul flex layout so items stack
	   vertically inside the dropdown instead of flowing horizontally. */
	.main-navigation .sub-menu {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 240px;
		background: #FAF9F5;
		border: 1px solid rgba(27, 54, 93, 0.08);
		box-shadow: 0 8px 24px rgba(27, 54, 93, 0.10);
		padding: 8px 0;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-4px);
		transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
		z-index: 100;
	}

	/* Reveal on hover OR when focus is anywhere inside the parent li
	   (focus-within handles keyboard nav — tab into Services link
	   auto-opens the dropdown; tab through sub-items keeps it open;
	   tab past auto-closes). */
	.main-navigation .menu-item-has-children:hover > .sub-menu,
	.main-navigation .menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		/* When opening, drop the visibility transition delay so it appears immediately */
		transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
	}

	/* Sub-menu items */
	.main-navigation .sub-menu li {
		margin: 0;
		width: 100%;
	}

	.main-navigation .sub-menu a {
		display: block;
		padding: 10px 20px;
		font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.4;
		color: #1B365D;
		text-decoration: none;
		border-left: 3px solid transparent;
		transition: color 0.15s ease, border-left-color 0.15s ease, background-color 0.15s ease;
	}

	/* Hide the underline indicator used by top-level nav links */
	.main-navigation .sub-menu a::after {
		display: none;
	}

	.main-navigation .sub-menu a:hover,
	.main-navigation .sub-menu a:focus {
		color: #C5A46D;
		border-left-color: #C5A46D;
		background: rgba(197, 164, 109, 0.05);
	}
}

/* =========================================================
   18. ABOUT V2 — HERO (Phase 1)
   ========================================================= */
.site-v2 .v2-about-hero {
	background: var(--v2-cream);
	padding-top: 128px;
	padding-bottom: 96px;
}

.site-v2 .v2-about-hero__copy {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.site-v2 .v2-about-hero .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-about-hero__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: var(--v2-h1-tier2);
	margin: 0 0 32px 0;
}

/* Keep "by design" as a single unit, preventing the italic phrase
   from breaking between its two words. Scoped to this headline so
   single-word accents elsewhere can still wrap naturally if ever
   needed. */
.site-v2 .v2-about-hero__headline .v2-display-accent {
	white-space: nowrap;
}

.site-v2 .v2-about-hero__subhead {
	font-family: var(--v2-font-body);
	font-size: 20px;
	line-height: 1.55;
	color: rgba(27, 54, 93, 0.85);
	max-width: 560px;
	margin: 0 auto;
}

@media (max-width: 767px) {
	.site-v2 .v2-about-hero {
		padding-top: 80px;
		padding-bottom: 64px;
	}
	/* Headline now scales fluidly via the Tier 2 clamp() in the
	   base rule; mobile override is no longer needed. */
	.site-v2 .v2-about-hero__subhead {
		font-size: 17px;
	}
}

/* =========================================================
   19. ABOUT V2 — ORIGIN STORY (Phase 1)
   ========================================================= */
.site-v2 .v2-about-story {
	background-color: var(--v2-white);
	padding-top: 120px;
	padding-bottom: 120px;
}

.site-v2 .v2-about-story__header {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 64px;
}

.site-v2 .v2-about-story__header .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-about-story__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: clamp(32px, 4vw, 44px);
	margin: 0;
}

.site-v2 .v2-about-story__body {
	max-width: 680px;
	margin: 0 auto;
	text-align: left;
}

.site-v2 .v2-about-story__lead {
	font-family: var(--v2-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.45;
	color: var(--v2-navy);
	max-width: 640px;
	margin: 0 auto 32px;
}

.site-v2 .v2-about-story__paragraph {
	font-family: var(--v2-font-body);
	font-size: 18px;
	line-height: 1.7;
	color: var(--v2-ink);
	margin: 0 0 24px 0;
}

.site-v2 .v2-about-story__paragraph:last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.site-v2 .v2-about-story {
		padding-top: 80px;
		padding-bottom: 80px;
	}
	.site-v2 .v2-about-story__header {
		margin-bottom: 40px;
	}
	.site-v2 .v2-about-story__lead {
		font-size: 1.25rem;
	}
	.site-v2 .v2-about-story__paragraph {
		font-size: 16px;
	}
}

/* =========================================================
   20. ABOUT V2 — THE PAIRING (Phase 2 — Section 3)
   ========================================================= */
.site-v2 .v2-about-pairing__header {
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
}

.site-v2 .v2-about-pairing__header .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-about-pairing__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: clamp(32px, 4vw, 44px);
	margin: 0 0 24px 0;
}

.site-v2 .v2-about-pairing__subhead {
	font-family: var(--v2-font-body);
	font-size: 18px;
	line-height: 1.55;
	color: rgba(27, 54, 93, 0.85);
	max-width: 700px;
	margin: 0 auto;
}

/* Two founder cards in a 2-col grid at desktop, stacking 1-col at
   tablet and below. Asymmetric heights are intentional; bios differ
   in length and we don't fight that with min-height. */
.site-v2 .v2-about-pairing__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	max-width: 960px;
	margin: 72px auto 0;
	align-items: start;
}

@media (max-width: 1024px) {
	.site-v2 .v2-about-pairing__cards {
		grid-template-columns: 1fr;
		gap: 56px;
	}
}

.site-v2 .v2-about-pairing__card {
	display: flex;
	flex-direction: column;
	gap: 0;
	background: var(--v2-white);
	border-radius: 8px;
	padding: 32px;
	box-shadow: 0 4px 16px rgba(27, 54, 93, 0.06);
}

.site-v2 .v2-about-pairing__card-photo {
	width: 280px;
	height: 280px;
	overflow: hidden;
	margin: 0 auto 24px;
	border-radius: 8px;
	border: 3px solid var(--v2-green);
}

.site-v2 .v2-about-pairing__card-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 1024px) {
	.site-v2 .v2-about-pairing__card-photo {
		width: 240px;
		height: 240px;
	}
}

.site-v2 .v2-about-pairing__card-identity {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 12px;
}

.site-v2 .v2-about-pairing__card-name {
	font-family: var(--v2-font-display);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.2;
	color: var(--v2-navy);
	margin: 0;
}

.site-v2 .v2-about-pairing__card-role {
	font-family: var(--v2-font-eyebrow);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(27, 54, 93, 0.65);
}

/* Discipline subhead. Editorial gold italic, NOT the new
   interactive green. This is a typography accent, not a CTA. */
.site-v2 .v2-about-pairing__card-discipline {
	font-family: var(--v2-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.4;
	color: var(--v2-gold-text);
	margin: 0 0 20px 0;
}

.site-v2 .v2-about-pairing__card-bio {
	font-family: var(--v2-font-body);
	font-size: 15px;
	line-height: 1.65;
	color: var(--v2-navy);
	margin: 0 0 16px 0;
}

/* Bio paragraph immediately preceding the note gets a slightly
   larger gap so the note reads as separated, not as just another
   bio paragraph. :has() targets the last bio in card order even
   though :last-of-type would resolve to the note's <p>. */
.site-v2 .v2-about-pairing__card-bio:has(+ .v2-about-pairing__card-note) {
	margin-bottom: 20px;
}

/* Personal note: smaller, italicized, slightly muted, visually
   distinct from the bio paragraph above without being a new
   structural element. */
.site-v2 .v2-about-pairing__card-note {
	font-family: var(--v2-font-body);
	font-style: italic;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(27, 54, 93, 0.75);
	margin: 0;
}

/* Closing flourish: 32px gold accent rule centered above the
   italic Lora statement. Matches the v2 system's standard
   pillar/principle rule width for visual through-line. */
.site-v2 .v2-about-pairing__closing-rule {
	width: 32px;
	height: 2px;
	background: var(--v2-gold);
	border: 0;
	margin: 80px auto 24px;
}

.site-v2 .v2-about-pairing__closing {
	font-family: var(--v2-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.4;
	color: var(--v2-navy);
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
	/* Reset sitewide blockquote-esque base (defensive). */
	border: 0;
	padding: 0;
}

@media (max-width: 767px) {
	.site-v2 .v2-about-pairing {
		padding-top: var(--v2-section-py-tablet);
		padding-bottom: var(--v2-section-py-tablet);
	}

	.site-v2 .v2-about-pairing__cards {
		margin-top: 56px;
	}

	.site-v2 .v2-about-pairing__card {
		padding: 24px;
	}

	.site-v2 .v2-about-pairing__card-name {
		font-size: 20px;
	}

	.site-v2 .v2-about-pairing__card-discipline {
		font-size: 17px;
	}

	.site-v2 .v2-about-pairing__closing-rule {
		margin-top: 56px;
	}

	.site-v2 .v2-about-pairing__closing {
		font-size: 18px;
	}
}

/* =========================================================
   21. ABOUT V2 — WHO WE WORK WITH (Phase 2 — Section 5)
   ========================================================= */
/* Flat white background inherited from .v2-section--white on the
   section element. (Prior dot-grid wash removed.) */

.site-v2 .v2-about-audience__header {
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
}

.site-v2 .v2-about-audience__header .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-about-audience__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: clamp(32px, 4vw, 44px);
	margin: 0 0 24px 0;
}

.site-v2 .v2-about-audience__subhead {
	font-family: var(--v2-font-body);
	font-size: 18px;
	line-height: 1.55;
	color: rgba(27, 54, 93, 0.85);
	max-width: 680px;
	margin: 0 auto;
}

.site-v2 .v2-about-audience__list {
	list-style: none;
	padding: 0;
	max-width: 1120px;
	margin: 80px auto 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 24px;
	row-gap: 32px;
	align-items: start;
}

/* Tablet: 3-up cramps the copy, drop to 2-up. Mobile collapses to
   single column further below. */
@media (max-width: 1023px) {
	.site-v2 .v2-about-audience__list {
		grid-template-columns: repeat(2, 1fr);
		max-width: 720px;
		column-gap: 24px;
		row-gap: 32px;
	}
}

/* Soft-card container matching the homepage Who We Serve treatment:
   white background, 12px radius, soft single-layer navy shadow,
   28px internal padding (24px mobile). */
.site-v2 .v2-about-audience__block {
	text-align: left;
	background: var(--v2-white);
	border-radius: 12px;
	padding: 28px;
	box-shadow: 0 4px 32px rgba(27, 54, 93, 0.06);
}

.site-v2 .v2-about-audience__name {
	font-family: var(--v2-font-display);
	font-weight: 500;
	font-size: clamp(22px, 2vw, 24px);
	line-height: 1.2;
	color: var(--v2-navy);
	margin: 0 0 12px 0;
	/* Reserves two title lines plus the ::after divider so descriptors
	   align across every card in a row. Matches the homepage WWS
	   value exactly. */
	min-height: 3.8em;
}

/* Hairline gold divider between title and body, identical to the
   homepage WWS treatment. The 16px margin-bottom collapses with the
   title's own 12px margin-bottom to produce the spec'd 16px gap
   below the rule. */
.site-v2 .v2-about-audience__name::after {
	content: "";
	display: block;
	width: 32px;
	height: 1px;
	background: var(--v2-gold);
	margin: 16px 0;
}

.site-v2 .v2-about-audience__descriptor {
	font-family: var(--v2-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--v2-ink);
	margin: 0;
}

@media (max-width: 767px) {
	.site-v2 .v2-about-audience {
		padding-top: var(--v2-section-py-tablet);
		padding-bottom: var(--v2-section-py-tablet);
	}

	.site-v2 .v2-about-audience__list {
		grid-template-columns: 1fr;
		max-width: 480px;
		margin-top: 56px;
		row-gap: 24px;
	}

	.site-v2 .v2-about-audience__block {
		padding: 24px;
	}
}

/* =========================================================
   22. ABOUT V2 — HOW WE WORK (Phase 3 — Section 6)
   ========================================================= */
.site-v2 .v2-about-how__header {
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
}

.site-v2 .v2-about-how__header .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-about-how__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: clamp(32px, 4vw, 44px);
	margin: 0 0 24px 0;
}

.site-v2 .v2-about-how__subhead {
	font-family: var(--v2-font-body);
	font-size: 18px;
	line-height: 1.55;
	color: rgba(27, 54, 93, 0.85);
	max-width: 680px;
	margin: 0 auto;
}

.site-v2 .v2-about-how__list {
	list-style: none;
	padding: 0;
	max-width: 1120px;
	margin: 80px auto 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 48px;
	row-gap: 48px;
	align-items: start;
}

@media (max-width: 1023px) {
	.site-v2 .v2-about-how__list {
		grid-template-columns: 1fr;
		max-width: 640px;
		row-gap: 64px;
	}
}

.site-v2 .v2-about-how__principle {
	text-align: left;
	background: var(--v2-white);
	border-radius: 8px;
	padding: 32px;
	box-shadow: 0 4px 16px rgba(27, 54, 93, 0.06);
}

.site-v2 .v2-about-how__principle-number {
	font-family: var(--v2-font-eyebrow);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--v2-gold-text);
	display: block;
	margin-bottom: 16px;
}

.site-v2 .v2-about-how__principle-rule {
	width: 32px;
	height: 2px;
	background: var(--v2-gold);
	border: 0;
	margin: 0 0 20px 0;
}

.site-v2 .v2-about-how__principle-headline {
	font-family: var(--v2-font-display);
	font-weight: 500;
	font-size: 1.75rem;
	line-height: 1.3;
	color: var(--v2-navy);
	margin: 0 0 16px 0;
}

.site-v2 .v2-about-how__principle-body {
	font-family: var(--v2-font-body);
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--v2-ink);
	margin: 0;
}

@media (max-width: 767px) {
	.site-v2 .v2-about-how__list {
		margin-top: 56px;
		row-gap: 48px;
	}

	.site-v2 .v2-about-how__principle {
		padding: 24px;
	}

	.site-v2 .v2-about-how__principle-headline {
		font-size: 1.5rem;
	}
}

/* =========================================================
   23. ABOUT V2 — TESTIMONIAL (Phase 3 — Section 7)
   ========================================================= */
.site-v2 .v2-about-testimonial__figure {
	text-align: center;
	max-width: 820px;
	margin: 0 auto;
	padding: 0;
}

.site-v2 .v2-about-testimonial__quote-mark {
	display: block;
	font-family: var(--v2-font-display);
	font-size: 44px;
	line-height: 1;
	color: var(--v2-gold);
	margin: 0 0 32px 0;
}

.site-v2 .v2-about-testimonial__quote {
	font-family: var(--v2-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 28px;
	line-height: 1.4;
	color: var(--v2-navy);
	margin: 0 auto;
	padding: 0;
	/* Reset sitewide blockquote border-left. */
	border: 0;
}

.site-v2 .v2-about-testimonial__attribution {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	margin-top: 48px;
}

.site-v2 .v2-about-testimonial__attribution-name {
	font-family: var(--v2-font-body);
	font-size: 16px;
	font-weight: 500;
	color: var(--v2-navy);
}

.site-v2 .v2-about-testimonial__attribution-role {
	font-family: var(--v2-font-body);
	font-size: 14px;
	font-weight: 400;
	color: rgba(27, 54, 93, 0.7);
}

.site-v2 .v2-about-testimonial__attribution-firm {
	font-family: var(--v2-font-body);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--v2-navy);
}

@media (max-width: 767px) {
	.site-v2 .v2-about-testimonial {
		padding-top: var(--v2-section-py-tablet);
		padding-bottom: var(--v2-section-py-tablet);
	}

	.site-v2 .v2-about-testimonial__quote-mark {
		font-size: 32px;
		margin-bottom: 20px;
	}

	.site-v2 .v2-about-testimonial__quote {
		font-size: 22px;
	}

	.site-v2 .v2-about-testimonial__attribution {
		margin-top: 32px;
	}
}

/* =========================================================
   24. ABOUT V2 — CLOSING CTA (Phase 3 — Section 8)
   ========================================================= */
.site-v2 .v2-about-closing {
	padding-top: 140px;
	padding-bottom: 140px;
}

.site-v2 .v2-about-closing__content {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.site-v2 .v2-about-closing__content .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-about-closing__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: clamp(38px, 4.5vw, 52px);
	margin: 0 0 24px 0;
}

.site-v2 .v2-about-closing__subhead {
	font-family: var(--v2-font-body);
	font-size: 18px;
	line-height: 1.6;
	color: rgba(27, 54, 93, 0.85);
	max-width: 600px;
	margin: 0 auto 48px;
}

@media (max-width: 767px) {
	.site-v2 .v2-about-closing {
		padding-top: 96px;
		padding-bottom: 96px;
	}

	.site-v2 .v2-about-closing__subhead {
		font-size: 16px;
	}
}

/* =========================================================
   25. CONTACT V2 — HERO (Phase 1 — Section 1)
   ========================================================= */
.site-v2 .v2-contact-hero {
	background: var(--v2-cream);
	padding-top: 120px;
	padding-bottom: 80px;
	text-align: center;
}

.site-v2 .v2-contact-hero__inner {
	max-width: 860px;
	margin: 0 auto;
}

.site-v2 .v2-contact-hero .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-contact-hero__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: var(--v2-h1-tier3);
	margin: 0 0 32px 0;
}

.site-v2 .v2-contact-hero__subhead {
	font-family: var(--v2-font-body);
	font-size: 20px;
	line-height: 1.55;
	color: rgba(27, 54, 93, 0.85);
	max-width: 680px;
	margin: 0 auto;
}

@media (max-width: 767px) {
	.site-v2 .v2-contact-hero {
		padding-top: 80px;
		padding-bottom: 56px;
	}
	.site-v2 .v2-contact-hero__subhead {
		font-size: 17px;
	}
}

/* =========================================================
   26. CONTACT V2 — CONTACT PATHS (Phase 1 — Section 2)
   ========================================================= */
.site-v2 .v2-contact-paths {
	background: var(--v2-white);
	padding-top: 100px;
	padding-bottom: 100px;
}

.site-v2 .v2-contact-paths__inner {
	display: grid;
	grid-template-columns: 60fr 40fr;
	gap: 64px;
	align-items: start;
}

@media (max-width: 1024px) {
	.site-v2 .v2-contact-paths__inner {
		grid-template-columns: 1fr;
		gap: 64px;
	}
}

@media (max-width: 767px) {
	.site-v2 .v2-contact-paths {
		padding-top: 64px;
		padding-bottom: 64px;
	}
}

/* Form column (left, primary) */
.site-v2 .v2-contact-paths__form-rule {
	display: block;
	width: 32px;
	height: 2px;
	background: var(--v2-gold);
	border: 0;
	/* Force-zero margins on all sides except bottom — defensive
	   against browser default `margin-left: auto` on <hr>. */
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 16px;
	margin-left: 0;
}

.site-v2 .v2-contact-paths__form-headline {
	font-family: var(--v2-font-display);
	font-weight: 500;
	font-size: 28px;
	line-height: 1.3;
	color: var(--v2-navy);
	margin: 0 0 16px 0;
}

.site-v2 .v2-contact-paths__form-intro {
	font-family: var(--v2-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--v2-ink);
	max-width: 480px;
	margin: 0 0 32px 0;
}

@media (max-width: 767px) {
	.site-v2 .v2-contact-paths__form-headline {
		font-size: 24px;
	}
	.site-v2 .v2-contact-paths__form-intro {
		font-size: 15px;
	}
}

/* Booking column (right, secondary) — cream-tinted card.
   Sticky on desktop so it stays visible while the longer form
   column scrolls. Falls back to normal flow on tablet/mobile
   where the columns stack and sticky has nothing to anchor. */
.site-v2 .v2-contact-paths__booking-col {
	background: #FAF7EE;
	border-radius: 12px;
	padding: 40px;
	box-shadow:
		0 2px 4px rgba(27, 54, 93, 0.05),
		0 8px 24px rgba(27, 54, 93, 0.07);
	position: sticky;
	top: 100px;
}

@media (max-width: 1024px) {
	.site-v2 .v2-contact-paths__booking-col {
		position: static;
		top: auto;
	}
}

.site-v2 .v2-contact-paths__booking-eyebrow {
	font-family: var(--v2-font-eyebrow);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--v2-gold-text);
	display: inline-block;
	margin-bottom: 12px;
}

.site-v2 .v2-contact-paths__booking-rule {
	width: 32px;
	height: 2px;
	background: var(--v2-gold);
	border: 0;
	margin: 0 0 20px 0;
}

.site-v2 .v2-contact-paths__booking-headline {
	font-family: var(--v2-font-display);
	font-weight: 500;
	font-size: 28px;
	line-height: 1.3;
	color: var(--v2-navy);
	margin: 0 0 16px 0;
}

.site-v2 .v2-contact-paths__booking-body {
	font-family: var(--v2-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--v2-ink);
	margin: 0 0 32px 0;
}

/* Booking button — slightly tighter than the standard v2 primary
   CTA so it visually balances the HubSpot form's Submit button on
   the left (which we can't restyle through its iframe). Both
   buttons now read at quieter, similar weight — fits the
   restrained v2 register. */
.site-v2 .v2-contact-paths__booking-button {
	padding: 12px 24px;
	font-size: 13px;
	letter-spacing: 0.08em;
}

@media (max-width: 767px) {
	.site-v2 .v2-contact-paths__booking-col {
		padding: 28px;
	}
	.site-v2 .v2-contact-paths__booking-headline {
		font-size: 24px;
	}
	.site-v2 .v2-contact-paths__booking-body {
		font-size: 15px;
	}
}

/* =========================================================
   27. CONTACT V2 — HUBSPOT FORM OVERRIDES
   HubSpot's leadin plugin injects the form via JS into
   .v2-contact-paths__form-embed at runtime. !important is
   used liberally because HubSpot's runtime CSS loads after
   site-v2.css and applies inline + class styles that would
   otherwise win on cascade order.
   ========================================================= */

/* Reserve form height so the layout doesn't shift when HubSpot's
   async JS injects the form markup ~2-3s after page load. 740px
   matches the rendered form height at the current field count;
   adjust if fields are added or removed. */
.site-v2 .v2-contact-paths__form-embed {
	min-height: 740px;
}

/* Form container — fill the column, no background or border. */
.site-v2 .v2-contact-paths__form-embed .hbspt-form,
.site-v2 .v2-contact-paths__form-embed .hs-form,
.site-v2 .v2-contact-paths__form-embed form.hs-form {
	max-width: 100% !important;
	background: transparent !important;
	border: 0 !important;
	font-family: var(--v2-font-body) !important;
}

/* Field wrapper — 20px between fields. */
.site-v2 .v2-contact-paths__form-embed .hs-form-field {
	margin-bottom: 20px !important;
}

/* Labels — Lexend uppercase 12px, navy at 70%. The `> label`
   direct-child rule keeps choice labels (inside .inputs-list)
   from inheriting the uppercase treatment. */
.site-v2 .v2-contact-paths__form-embed .hs-form-field > label {
	display: block !important;
	font-family: var(--v2-font-eyebrow) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	color: rgba(27, 54, 93, 0.7) !important;
	margin-bottom: 8px !important;
}

/* Required asterisk in gold, not red. */
.site-v2 .v2-contact-paths__form-embed .hs-form-required {
	color: var(--v2-gold) !important;
	margin-left: 4px !important;
}

/* Text inputs / email / textarea / select. */
.site-v2 .v2-contact-paths__form-embed input.hs-input,
.site-v2 .v2-contact-paths__form-embed input[type="text"].hs-input,
.site-v2 .v2-contact-paths__form-embed input[type="email"].hs-input,
.site-v2 .v2-contact-paths__form-embed input[type="tel"].hs-input,
.site-v2 .v2-contact-paths__form-embed input[type="number"].hs-input,
.site-v2 .v2-contact-paths__form-embed input[type="url"].hs-input,
.site-v2 .v2-contact-paths__form-embed textarea.hs-input,
.site-v2 .v2-contact-paths__form-embed select.hs-input {
	width: 100% !important;
	box-sizing: border-box !important;
	font-family: var(--v2-font-body) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: var(--v2-navy) !important;
	background: var(--v2-white) !important;
	border: 1px solid rgba(27, 54, 93, 0.15) !important;
	border-radius: 6px !important;
	padding: 12px 16px !important;
	transition: border-color 200ms ease, box-shadow 200ms ease !important;
}

/* Focus — navy border + soft navy ring. */
.site-v2 .v2-contact-paths__form-embed input.hs-input:focus,
.site-v2 .v2-contact-paths__form-embed textarea.hs-input:focus,
.site-v2 .v2-contact-paths__form-embed select.hs-input:focus {
	outline: none !important;
	border-color: var(--v2-navy) !important;
	box-shadow: 0 0 0 3px rgba(27, 54, 93, 0.08) !important;
}

/* Textarea sizing. */
.site-v2 .v2-contact-paths__form-embed textarea.hs-input {
	min-height: 120px !important;
	resize: vertical !important;
}

/* Placeholder color — softer navy. */
.site-v2 .v2-contact-paths__form-embed .hs-input::placeholder {
	color: rgba(27, 54, 93, 0.4) !important;
	opacity: 1 !important;
}

/* Checkboxes (Services of interest) — list of inputs. */
.site-v2 .v2-contact-paths__form-embed .inputs-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.site-v2 .v2-contact-paths__form-embed .inputs-list > li {
	margin: 0 0 8px 0 !important;
}

.site-v2 .v2-contact-paths__form-embed .inputs-list label,
.site-v2 .v2-contact-paths__form-embed .hs-form-checkbox-display,
.site-v2 .v2-contact-paths__form-embed .hs-form-radio-display {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	font-family: var(--v2-font-body) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--v2-navy) !important;
	cursor: pointer !important;
}

/* Native checkbox / radio with gold accent when checked. */
.site-v2 .v2-contact-paths__form-embed input[type="checkbox"],
.site-v2 .v2-contact-paths__form-embed input[type="radio"],
.site-v2 .v2-contact-paths__form-embed input[type="checkbox"].hs-input,
.site-v2 .v2-contact-paths__form-embed input[type="radio"].hs-input {
	width: auto !important;
	margin: 0 !important;
	accent-color: var(--v2-green) !important;
	cursor: pointer !important;
}

/* Submit button — v2 primary CTA aesthetic. */
.site-v2 .v2-contact-paths__form-embed .hs-button.primary,
.site-v2 .v2-contact-paths__form-embed .hs-button,
.site-v2 .v2-contact-paths__form-embed input[type="submit"].hs-button,
.site-v2 .v2-contact-paths__form-embed input.hs-button {
	display: inline-block !important;
	width: auto !important;
	font-family: var(--v2-font-eyebrow) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: var(--v2-navy) !important;
	background: var(--v2-green) !important;
	border: none !important;
	border-radius: 6px !important;
	padding: 14px 32px !important;
	cursor: pointer !important;
	transition: background 200ms ease, transform 200ms ease !important;
}

.site-v2 .v2-contact-paths__form-embed .hs-button.primary:hover,
.site-v2 .v2-contact-paths__form-embed .hs-button:hover,
.site-v2 .v2-contact-paths__form-embed input[type="submit"].hs-button:hover,
.site-v2 .v2-contact-paths__form-embed input.hs-button:hover {
	background: var(--v2-green-dark) !important;
	transform: translateY(-1px) !important;
}

/* Submit button wrapper (.hs_submit) — give it some breathing
   room above and ensure it doesn't get full-width treatment. */
.site-v2 .v2-contact-paths__form-embed .hs_submit,
.site-v2 .v2-contact-paths__form-embed .actions {
	margin-top: 8px !important;
	padding: 0 !important;
}

/* Error messages — navy text (not red), gold marker. */
.site-v2 .v2-contact-paths__form-embed .hs-error-msg,
.site-v2 .v2-contact-paths__form-embed .hs-error-msgs label,
.site-v2 .v2-contact-paths__form-embed .hs-main-font-element {
	color: var(--v2-navy) !important;
	font-family: var(--v2-font-body) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	margin-top: 4px !important;
}

.site-v2 .v2-contact-paths__form-embed .hs-form-field input.invalid.error,
.site-v2 .v2-contact-paths__form-embed .hs-form-field textarea.invalid.error {
	border-color: var(--v2-green) !important;
}

/* Submitted-message (success state). */
.site-v2 .v2-contact-paths__form-embed .submitted-message {
	font-family: var(--v2-font-body) !important;
	font-size: 17px !important;
	line-height: 1.6 !important;
	color: var(--v2-navy) !important;
}

/* HubSpot free-tier branding link — subdue without hiding (TOS).
   Targeted by URL pattern so it survives class-name changes. */
.site-v2 .v2-contact-paths__form-embed a[href*="hubspot.com/products/marketing"],
.site-v2 .v2-contact-paths__form-embed a[href*="hubspot.com/products/forms"] {
	display: block !important;
	margin-top: 24px !important;
	text-align: center !important;
	font-family: var(--v2-font-body) !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	color: rgba(27, 54, 93, 0.4) !important;
	opacity: 0.5 !important;
	text-decoration: none !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.site-v2 .v2-contact-paths__form-embed a[href*="hubspot.com/products/marketing"] img,
.site-v2 .v2-contact-paths__form-embed a[href*="hubspot.com/products/forms"] img {
	max-height: 12px !important;
	width: auto !important;
	opacity: 0.5 !important;
	vertical-align: middle !important;
}

/* =========================================================
   28. CONTACT V2 — INFO BLOCK (Phase 1 — Section 3)
   ========================================================= */
.site-v2 .v2-contact-info {
	background: var(--v2-cream);
	padding-top: 100px;
	padding-bottom: 100px;
}

.site-v2 .v2-contact-info__header {
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
}

.site-v2 .v2-contact-info__header .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-contact-info__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: clamp(28px, 3.5vw, 36px);
	margin: 0;
}

.site-v2 .v2-contact-info__list {
	list-style: none;
	padding: 0;
	max-width: 680px;
	margin: 64px auto 0;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.site-v2 .v2-contact-info__block {
	text-align: left;
	/* Equalize block heights on desktop so all four gold accent
	   lines sit on a regular vertical rhythm. The Phone block has
	   two stacked numbers (~93px content) while single-value blocks
	   are ~66px; min-height: 96px gives Phone a few px of slack
	   and pads shorter blocks with whitespace below their value.
	   Removed at <=767px where addresses naturally wrap to 2-3
	   lines and a fixed min-height could overflow or look gappy. */
	min-height: 96px;
}

@media (max-width: 767px) {
	.site-v2 .v2-contact-info__block {
		min-height: 0;
	}
}

.site-v2 .v2-contact-info__rule {
	width: 32px;
	height: 2px;
	background: var(--v2-gold);
	border: 0;
	margin: 0 0 16px 0;
}

.site-v2 .v2-contact-info__label {
	font-family: var(--v2-font-eyebrow);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--v2-gold-text);
	display: block;
	margin-bottom: 8px;
}

.site-v2 .v2-contact-info__value {
	font-family: var(--v2-font-body);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--v2-navy);
	margin: 0;
}

.site-v2 .v2-contact-info__value a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(27, 54, 93, 0.2);
	transition: border-color 0.2s ease;
}

.site-v2 .v2-contact-info__value a:hover {
	border-bottom-color: var(--v2-navy);
}

@media (max-width: 767px) {
	.site-v2 .v2-contact-info {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.site-v2 .v2-contact-info__list {
		margin-top: 40px;
		gap: 32px;
	}
	.site-v2 .v2-contact-info__value {
		font-size: 16px;
	}
}

/* =========================================================
   30. SERVICES V2 INDEX — HERO (Phase 1 — Section 1)
   ========================================================= */
/* Unified index header. Cream background flows continuously into the
   services grid below (grid background switched to cream to match), so
   the section padding-bottom is intentionally tight — header → cards
   read as one visual beat, not two stacked sections. */
.site-v2 .v2-services-hero {
	background: var(--v2-cream);
	padding-top: 128px;
	padding-bottom: 56px;
	text-align: center;
}

.site-v2 .v2-services-hero__inner {
	max-width: 800px;
	margin: 0 auto;
}

.site-v2 .v2-services-hero .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-services-hero__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: var(--v2-h1-tier3);
	margin: 0 0 32px 0;
}

.site-v2 .v2-services-hero__subhead {
	font-family: var(--v2-font-body);
	font-size: 19px;
	line-height: 1.6;
	color: rgba(27, 54, 93, 0.85);
	max-width: 720px;
	margin: 0 auto;
}

@media (max-width: 767px) {
	.site-v2 .v2-services-hero {
		padding-top: 80px;
		padding-bottom: 40px;
	}
	.site-v2 .v2-services-hero__subhead {
		font-size: 17px;
	}
}

/* =========================================================
   31. SERVICES V2 INDEX — SERVICES GRID (Phase 1 — Section 2)
   ========================================================= */
/* Background matches .v2-services-hero (cream) so the unified header
   flows directly into the cards as a continuous surface. Top padding
   is zero — the hero supplies the breathing room above the first row. */
.site-v2 .v2-services-grid {
	background: var(--v2-cream);
	padding-top: 0;
	padding-bottom: 96px;
}

.site-v2 .v2-services-grid__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 1024px) {
	.site-v2 .v2-services-grid__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.site-v2 .v2-services-grid {
		padding-top: 0;
		padding-bottom: 64px;
	}
	.site-v2 .v2-services-grid__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* Whole-card click target and L-corner bracket come from the
   shared .v2-services__card rules (also on the homepage What We
   Do cards). The arrow-link ::before overlay stretches to cover
   the card; the card's hover lift + green-tinted shadow apply
   from the Phase E homepage card hover rule. */

/* =========================================================
   32. SERVICES V2 INDEX — PHILOSOPHY MOMENT (Phase 1 — Section 3)
   ========================================================= */
.site-v2 .v2-services-philosophy {
	position: relative;
	background: radial-gradient(
		ellipse at center,
		#1F3C65 0%,
		var(--v2-navy) 60%,
		#172E4D 100%
	);
	color: var(--v2-cream);
	padding-top: 120px;
	padding-bottom: 120px;
}

.site-v2 .v2-services-philosophy__inner {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}

.site-v2 .v2-services-philosophy .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-services-philosophy__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--v2-cream);
	font-size: clamp(32px, 4.5vw, 48px);
	margin: 0 0 32px 0;
}

.site-v2 .v2-services-philosophy__body {
	font-family: var(--v2-font-body);
	font-size: 19px;
	line-height: 1.6;
	color: rgba(250, 249, 245, 0.9);
	max-width: 720px;
	margin: 0 auto;
}

@media (max-width: 767px) {
	.site-v2 .v2-services-philosophy {
		padding-top: 80px;
		padding-bottom: 80px;
	}
	.site-v2 .v2-services-philosophy__body {
		font-size: 17px;
	}
}

/* =========================================================
   33. SERVICES V2 INDEX — CLOSING CTA (Phase 1 — Section 4)
   ========================================================= */
.site-v2 .v2-services-closing {
	background: var(--v2-cream);
	padding-top: 96px;
	padding-bottom: 96px;
}

.site-v2 .v2-services-closing__content {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.site-v2 .v2-services-closing__content .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-services-closing__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: clamp(32px, 4.5vw, 48px);
	margin: 0 0 28px 0;
}

.site-v2 .v2-services-closing__body {
	font-family: var(--v2-font-body);
	font-size: 18px;
	line-height: 1.55;
	color: var(--v2-ink);
	max-width: 640px;
	margin: 0 auto 40px;
}

@media (max-width: 767px) {
	.site-v2 .v2-services-closing {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.site-v2 .v2-services-closing__body {
		font-size: 16px;
	}
}

/* =========================================================
   34. SERVICE V2 (singular) — HERO (Phase 2 — Section 1)
   Shared partial styling. Used by all individual service pages
   (financial-content-marketing first, others in Phase 3).
   ========================================================= */
.site-v2 .v2-service-hero {
	background: var(--v2-cream);
	padding-top: 120px;
	padding-bottom: 80px;
	text-align: center;
}

.site-v2 .v2-service-hero__inner {
	max-width: 860px;
	margin: 0 auto;
}

.site-v2 .v2-service-hero .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-service-hero__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: var(--v2-h1-tier2);
	margin: 0 0 32px 0;
}

.site-v2 .v2-service-hero__subhead {
	font-family: var(--v2-font-body);
	font-size: 22px;
	line-height: 1.45;
	color: rgba(27, 54, 93, 0.85);
	max-width: 680px;
	margin: 0 auto;
}

@media (max-width: 767px) {
	.site-v2 .v2-service-hero {
		padding-top: 80px;
		padding-bottom: 56px;
	}
	.site-v2 .v2-service-hero__subhead {
		font-size: 18px;
	}
}

/* Service hero variant with right-side illustration. Currently used
   only on /services-v2/web-development/. Modifier class set by the
   PHP partial when the per-slug array includes an 'illustration' key.
   Two-column layout with vertical centering; mobile stacks with the
   illustration BELOW the text. */
.site-v2 .v2-service-hero--has-illustration {
	padding-top: 128px;
	padding-bottom: 96px;
	text-align: left;
}

.site-v2 .v2-service-hero--has-illustration .v2-service-hero__inner {
	max-width: none;
	margin: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 24px;
	align-items: center;
}

.site-v2 .v2-service-hero--has-illustration .v2-service-hero__subhead {
	margin-left: 0;
	margin-right: 0;
	max-width: 540px;
}

.site-v2 .v2-service-hero--has-illustration .v2-service-hero__media {
	display: block;
}

.site-v2 .v2-service-hero__image {
	display: block;
	width: 100%;
	height: auto;
	background-color: transparent;
}

@media (max-width: 1023px) {
	.site-v2 .v2-service-hero--has-illustration .v2-service-hero__inner {
		grid-template-columns: 1fr;
		row-gap: 48px;
	}
	.site-v2 .v2-service-hero--has-illustration .v2-service-hero__media {
		max-width: 560px;
		margin: 0 auto;
	}
}

@media (max-width: 767px) {
	.site-v2 .v2-service-hero--has-illustration {
		padding-top: 80px;
		padding-bottom: 64px;
	}
}

/* =========================================================
   35. SERVICE V2 — WHY IT MATTERS (Phase 2 — Section 2)
   ========================================================= */
.site-v2 .v2-service-why-it-matters {
	background: var(--v2-white);
	padding-top: 96px;
	padding-bottom: 96px;
}

.site-v2 .v2-service-why-it-matters__header {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 56px;
}

.site-v2 .v2-service-why-it-matters__header .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-service-why-it-matters__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: clamp(32px, 4vw, 44px);
	margin: 0;
}

.site-v2 .v2-service-why-it-matters__body {
	max-width: 720px;
	margin: 0 auto;
	text-align: left;
}

.site-v2 .v2-service-why-it-matters__paragraph {
	font-family: var(--v2-font-body);
	font-size: 18px;
	line-height: 1.7;
	color: rgba(27, 54, 93, 0.85);
	margin: 0 0 32px 0;
}

.site-v2 .v2-service-why-it-matters__paragraph:last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.site-v2 .v2-service-why-it-matters {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.site-v2 .v2-service-why-it-matters__header {
		margin-bottom: 40px;
	}
	.site-v2 .v2-service-why-it-matters__paragraph {
		font-size: 16px;
		margin-bottom: 24px;
	}
}

/* =========================================================
   36. SERVICE V2 — WHAT WE DO (Phase 2 — Section 3)
   ========================================================= */
.site-v2 .v2-service-what-we-do {
	background: var(--v2-cream);
	padding-top: 96px;
	padding-bottom: 96px;
}

.site-v2 .v2-service-what-we-do__header {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 64px;
}

.site-v2 .v2-service-what-we-do__header .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-service-what-we-do__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: clamp(32px, 4vw, 44px);
	margin: 0;
}

.site-v2 .v2-service-what-we-do__grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 24px;
	row-gap: 24px;
}

.site-v2 .v2-service-what-we-do__item {
	text-align: left;
}

.site-v2 .v2-service-what-we-do__rule {
	display: block;
	width: 32px;
	height: 2px;
	background: var(--v2-gold);
	border: 0;
	margin: 0 0 16px 0;
}

.site-v2 .v2-service-what-we-do__title {
	font-family: var(--v2-font-display);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.3;
	color: var(--v2-navy);
	margin: 0 0 12px 0;
}

/* Vertical icon above the gold rule. Only rendered when a deliverable
   includes an 'icon' field (currently web-development). Other services
   skip the icon entirely — gold rule sits at the top of the item. */
.site-v2 .v2-service-what-we-do__icon-wrap {
	display: block;
	margin: 0 0 20px 0;
}

.site-v2 .v2-service-what-we-do__icon {
	display: block;
	width: 80px;
	height: 80px;
	background-color: transparent;
}

@media (max-width: 767px) {
	.site-v2 .v2-service-what-we-do__icon {
		width: 64px;
		height: 64px;
	}
}

.site-v2 .v2-service-what-we-do__desc {
	font-family: var(--v2-font-body);
	font-size: 16px;
	line-height: 1.55;
	color: var(--v2-ink);
	margin: 0;
}

/* Optional closing line beneath the deliverables grid. Renders
   only when the partial's copy data includes a closing_line
   field — supports the "web-development" pattern without
   affecting pages that don't define one. The ::before pseudo
   draws a 60×1px gold accent line that signals the section
   close so the paragraph reads as a deliberate beat, not as
   another grid item. */
.site-v2 .v2-service-what-we-do__closing {
	font-family: var(--v2-font-body);
	font-size: 18px;
	line-height: 1.65;
	color: rgba(27, 54, 93, 0.85);
	max-width: 720px;
	margin: 80px auto 0;
	text-align: center;
}

.site-v2 .v2-service-what-we-do__closing::before {
	content: "";
	display: block;
	width: 60px;
	height: 1px;
	background: var(--v2-gold);
	margin: 0 auto 32px;
}

@media (max-width: 767px) {
	.site-v2 .v2-service-what-we-do__closing {
		font-size: 16px;
		margin-top: 56px;
	}
	.site-v2 .v2-service-what-we-do__closing::before {
		margin-bottom: 24px;
	}
}

@media (max-width: 1024px) {
	.site-v2 .v2-service-what-we-do__grid {
		grid-template-columns: 1fr;
		row-gap: 40px;
	}
}

@media (max-width: 767px) {
	.site-v2 .v2-service-what-we-do {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.site-v2 .v2-service-what-we-do__header {
		margin-bottom: 48px;
	}
	.site-v2 .v2-service-what-we-do__title {
		font-size: 19px;
	}
	.site-v2 .v2-service-what-we-do__desc {
		font-size: 15px;
	}
}

/* =========================================================
   37. SERVICE V2 — HOW WE WORK (Phase 2 — Section 4)
   ========================================================= */
.site-v2 .v2-service-how-we-work {
	background: var(--v2-white);
	padding-top: 96px;
	padding-bottom: 96px;
}

.site-v2 .v2-service-how-we-work__header {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 64px;
}

.site-v2 .v2-service-how-we-work__header .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-service-how-we-work__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: clamp(32px, 4vw, 44px);
	margin: 0;
}

.site-v2 .v2-service-how-we-work__list {
	list-style: none;
	padding: 0;
	max-width: 720px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.site-v2 .v2-service-how-we-work__principle {
	text-align: left;
}

.site-v2 .v2-service-how-we-work__rule {
	display: block;
	width: 32px;
	height: 2px;
	background: var(--v2-gold);
	border: 0;
	margin: 0 0 16px 0;
}

.site-v2 .v2-service-how-we-work__title {
	font-family: var(--v2-font-display);
	font-weight: 500;
	font-size: 24px;
	line-height: 1.3;
	color: var(--v2-navy);
	margin: 0 0 16px 0;
}

.site-v2 .v2-service-how-we-work__body {
	font-family: var(--v2-font-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--v2-ink);
	margin: 0;
}

/* Horizontal 3-column variant. When a service's principles include
   `illustration` slugs (currently web-development only), the section
   gets the --horizontal modifier and renders as a 3-column row with
   illustrations above each step. Mobile stacks vertically. */
.site-v2 .v2-service-how-we-work--horizontal .v2-service-how-we-work__list {
	max-width: 1120px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 24px;
	row-gap: 48px;
	align-items: start;
	gap: 24px;
}

.site-v2 .v2-service-how-we-work--horizontal .v2-service-how-we-work__media {
	display: block;
	width: 100%;
	max-width: 240px;
	margin: 0 0 24px 0;
}

.site-v2 .v2-service-how-we-work--horizontal .v2-service-how-we-work__illustration {
	display: block;
	width: 100%;
	height: auto;
	background-color: transparent;
}

@media (max-width: 1023px) {
	.site-v2 .v2-service-how-we-work--horizontal .v2-service-how-we-work__list {
		grid-template-columns: 1fr;
		max-width: 640px;
		row-gap: 56px;
	}
}

@media (max-width: 767px) {
	.site-v2 .v2-service-how-we-work {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.site-v2 .v2-service-how-we-work__header {
		margin-bottom: 48px;
	}
	.site-v2 .v2-service-how-we-work__list {
		gap: 40px;
	}
	.site-v2 .v2-service-how-we-work__title {
		font-size: 20px;
	}
	.site-v2 .v2-service-how-we-work__body {
		font-size: 15px;
	}
}

/* =========================================================
   38. SERVICE V2 — PROOF (Phase 2 — Section 5)
   Navy background with stats row + single testimonial.
   ========================================================= */
/* Intentional Phase B exception: 120/120 padding (not the standard
   96/96) preserves the dramatic navy moment for this section, matching
   the homepage Trust section's heavier vertical rhythm. Confirmed
   2026-05-22 — do not flag in future Phase B audits. */
.site-v2 .v2-service-proof {
	background: var(--v2-navy);
	color: var(--v2-cream);
	padding-top: 120px;
	padding-bottom: 120px;
}

.site-v2 .v2-service-proof__header {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 64px;
}

.site-v2 .v2-service-proof__header .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-service-proof__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--v2-cream);
	font-size: clamp(32px, 4vw, 44px);
	margin: 0;
}

.site-v2 .v2-service-proof__stats {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
	gap: 40px;
	max-width: 960px;
	margin: 0 auto;
}

.site-v2 .v2-service-proof__stat {
	flex: 1 1 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 16px 0;
	position: relative;
}

/* Vertical gold rule between adjacent stat blocks on desktop.
   Sits in the column gap (half-gap = 20px from each stat's edge).
   Mobile rule below replaces this with a horizontal divider. */
.site-v2 .v2-service-proof__stat + .v2-service-proof__stat::before {
	content: "";
	position: absolute;
	left: -20px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--v2-gold);
	opacity: 0.5;
}

/* Display-scale metric typography. The numeric portion stays cream;
   ornamental symbols ("+", "%", "x") are scaled to ~60% via the
   .fpm-stat-symbol child element rule (which already sets gold color). */
.site-v2 .v2-service-proof__stat-number {
	font-family: var(--v2-font-display);
	font-weight: 400;
	font-size: 80px;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--v2-cream);
}

/* Symbols scale relative to the parent metric so they read as
   ornamental rather than dominant. Color (gold) is set globally
   on .fpm-stat-symbol; size override is scoped to this section. */
.site-v2 .v2-service-proof__stat-number .fpm-stat-symbol {
	font-size: 0.6em;
}

.site-v2 .v2-service-proof__stat-label {
	font-family: var(--v2-font-eyebrow);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(250, 249, 245, 0.8);
	margin-top: 14px;
}

@media (max-width: 1023px) {
	.site-v2 .v2-service-proof__stat-number {
		font-size: 56px;
	}
}

/* Testimonial block */
.site-v2 .v2-service-proof__testimonial {
	text-align: center;
	max-width: 720px;
	margin: 80px auto 0;
	padding: 0;
}

/* Firm logo above the quote — matches the homepage v2-trust__logo
   pattern (44px height, max-width 240px, centered, full color). */
.site-v2 .v2-service-proof__logo {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto 28px;
}

.site-v2 .v2-service-proof__logo-img {
	display: block;
	height: 44px;
	width: auto;
	max-width: 240px;
	object-fit: contain;
}

@media (max-width: 767px) {
	.site-v2 .v2-service-proof__logo-img {
		height: 36px;
	}
}

.site-v2 .v2-service-proof__quote-mark {
	display: block;
	font-family: var(--v2-font-display);
	font-size: 48px;
	line-height: 1;
	color: var(--v2-gold);
	margin-bottom: 16px;
}

.site-v2 .v2-service-proof__quote {
	font-family: var(--v2-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.55;
	color: var(--v2-cream);
	margin: 0 0 24px 0;
	padding: 0;
	/* Reset sitewide blockquote border-left. */
	border: 0;
}

/* Testimonial-only modifier — applied when the partial's copy
   data has no `stats` key. Removes the stats row's footprint
   and bumps the quote font-size so the testimonial fills the
   visual space normally occupied by stats above it. */
.site-v2 .v2-service-proof--testimonial-only .v2-service-proof__testimonial {
	margin-top: 0;
	max-width: 760px;
}

.site-v2 .v2-service-proof--testimonial-only .v2-service-proof__quote {
	font-size: 24px;
}

@media (max-width: 767px) {
	.site-v2 .v2-service-proof--testimonial-only .v2-service-proof__quote {
		font-size: 19px;
	}
}

/* Stats + caption variant — caption acts as the attribution beneath
   the stat row. A thin gold rule above (::before) marks the visual
   transition from stats → credit, matching the testimonial-credit
   treatment used on the other v2 service pages. */
.site-v2 .v2-service-proof__caption {
	font-family: var(--v2-font-eyebrow);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--v2-gold);
	max-width: 640px;
	margin: 40px auto 0;
	text-align: center;
}

.site-v2 .v2-service-proof__caption::before {
	content: "";
	display: block;
	width: 60px;
	height: 1px;
	background: var(--v2-gold);
	margin: 0 auto 24px;
}

@media (max-width: 767px) {
	.site-v2 .v2-service-proof__caption {
		font-size: 12px;
		margin-top: 32px;
	}
}

.site-v2 .v2-service-proof__attribution {
	font-family: var(--v2-font-eyebrow);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--v2-gold);
}

/* Two-line attribution variant — applied automatically when the
   partial's copy passes attribution as an array with name + role
   keys. Single-string attributions render unchanged. */
.site-v2 .v2-service-proof__attribution-name {
	display: block;
	font-size: 15px;
	margin-bottom: 4px;
}

.site-v2 .v2-service-proof__attribution-role {
	display: block;
	font-size: 13px;
}

/* Optional editorial link wrapping the attribution name + role.
   Rendered when the per-slug copy includes 'attribution_url'.
   Inherits the surrounding gold color; subtle brightness lift on hover. */
.site-v2 .v2-service-proof__attribution-link {
	color: inherit;
	text-decoration: none;
	transition: filter 0.2s ease;
}

.site-v2 .v2-service-proof__attribution-link:hover,
.site-v2 .v2-service-proof__attribution-link:focus-visible {
	filter: brightness(1.18);
}

.site-v2 .v2-service-proof__attribution-link:focus-visible {
	outline: 2px solid var(--v2-gold);
	outline-offset: 4px;
}

/* Editorial credit line below the attribution. Treated as a deliberate
   section element (eyebrow label + middle dot + green link) rather than
   fine print. The thin gold rule above echoes the rule pattern used in
   the "What we do" deliverable items. */
.site-v2 .v2-service-proof__credit-rule {
	width: 60px;
	height: 1px;
	background: var(--v2-gold);
	border: 0;
	margin: 24px auto 16px;
}

.site-v2 .v2-service-proof__credit {
	font-family: var(--v2-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--v2-cream);
	text-align: center;
	margin: 0;
}

/* Reuses .v2-eyebrow for the eyebrow pattern; the only override is
   neutralizing the eyebrow's default block-style margin-bottom so it
   sits cleanly inline within the credit line. */
.site-v2 .v2-service-proof__credit-label {
	margin-bottom: 0;
	vertical-align: baseline;
}

.site-v2 .v2-service-proof__credit-separator {
	color: var(--v2-gold);
	margin: 0 8px;
}

/* Cream-text + gold-underline editorial treatment for the link inside
   the navy section. Cream reuses the testimonial body color token
   (var(--v2-cream)); the underline uses var(--v2-gold), separately
   colored via text-decoration-color so the link's hover brightening
   doesn't affect the gold rule under it. */
.site-v2 .v2-service-proof__credit-link {
	color: var(--v2-cream);
	text-decoration: underline;
	text-decoration-color: var(--v2-gold);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: color 0.2s ease, text-decoration-thickness 0.2s ease;
}

.site-v2 .v2-service-proof__credit-link:hover,
.site-v2 .v2-service-proof__credit-link:focus-visible {
	color: #ffffff;
	text-decoration-thickness: 2px;
}

.site-v2 .v2-service-proof__credit-link:focus-visible {
	outline: 2px solid var(--v2-gold);
	outline-offset: 2px;
}

/* Arrow inside the link. Shifts right 3px on hover for a subtle
   directional cue; inline-block + transform prevents layout shift. */
.site-v2 .v2-service-proof__credit-arrow {
	display: inline-block;
	transition: transform 0.2s ease;
}

.site-v2 .v2-service-proof__credit-link:hover .v2-service-proof__credit-arrow,
.site-v2 .v2-service-proof__credit-link:focus-visible .v2-service-proof__credit-arrow {
	transform: translateX(3px);
}

@media (max-width: 767px) {
	.site-v2 .v2-service-proof {
		padding-top: 80px;
		padding-bottom: 80px;
	}
	.site-v2 .v2-service-proof__header {
		margin-bottom: 48px;
	}
	.site-v2 .v2-service-proof__stats {
		flex-direction: column;
		gap: 32px;
	}
	.site-v2 .v2-service-proof__stat-number {
		font-size: 40px;
	}
	/* Vertical divider flips to a small horizontal rule between
	   stacked stats on mobile. */
	.site-v2 .v2-service-proof__stat + .v2-service-proof__stat::before {
		left: 50%;
		top: -16px;
		bottom: auto;
		transform: translateX(-50%);
		width: 40px;
		height: 1px;
	}
	.site-v2 .v2-service-proof__testimonial {
		margin-top: 56px;
	}
	.site-v2 .v2-service-proof__quote {
		font-size: 18px;
	}
	.site-v2 .v2-service-proof__quote-mark {
		font-size: 36px;
	}
}

/* =========================================================
   39. SERVICE V2 — CLOSING CTA (Phase 2 — Section 6)
   ========================================================= */
.site-v2 .v2-service-closing {
	background: var(--v2-cream);
	padding-top: 96px;
	padding-bottom: 96px;
}

.site-v2 .v2-service-closing__content {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.site-v2 .v2-service-closing__content .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-service-closing__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: clamp(32px, 4.5vw, 48px);
	margin: 0 0 28px 0;
}

.site-v2 .v2-service-closing__body {
	font-family: var(--v2-font-body);
	font-size: 18px;
	line-height: 1.55;
	color: var(--v2-ink);
	max-width: 640px;
	margin: 0 auto 40px;
}

@media (max-width: 767px) {
	.site-v2 .v2-service-closing {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.site-v2 .v2-service-closing__body {
		font-size: 16px;
	}
}

/* =========================================================
   40. SUCCESS STORIES V2 INDEX — HERO (Phase 3 — Section 1)
   Mirrors v2-services-hero pattern: cream centered text-only.
   ========================================================= */
.site-v2 .v2-success-stories-hero {
	background: var(--v2-cream);
	padding-top: 120px;
	padding-bottom: 80px;
	text-align: center;
}

.site-v2 .v2-success-stories-hero__inner {
	max-width: 860px;
	margin: 0 auto;
}

.site-v2 .v2-success-stories-hero .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-success-stories-hero__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: var(--v2-h1-tier3);
	margin: 0 0 32px 0;
}

.site-v2 .v2-success-stories-hero__subhead {
	font-family: var(--v2-font-body);
	font-size: 22px;
	line-height: 1.45;
	color: rgba(27, 54, 93, 0.85);
	max-width: 620px;
	margin: 0 auto;
}

@media (max-width: 767px) {
	.site-v2 .v2-success-stories-hero {
		padding-top: 80px;
		padding-bottom: 56px;
	}
	.site-v2 .v2-success-stories-hero__subhead {
		font-size: 18px;
	}
}

/* =========================================================
   41. SUCCESS STORIES V2 INDEX — CASE STUDY GRID (Phase 3 — Section 2)
   3-column desktop, 2-column tablet, 1-column mobile. Each card is a
   single click target via title <a> + ::after overlay (same pattern as
   .v2-services-grid). The Vantage card has no eyebrow — the empty
   eyebrow row is rendered with visibility:hidden so card heights stay
   aligned.
   ========================================================= */
.site-v2 .v2-success-stories {
	background: var(--v2-white);
	padding-top: 100px;
	padding-bottom: 100px;
}

.site-v2 .v2-success-stories__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

@media (max-width: 1024px) {
	.site-v2 .v2-success-stories__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.site-v2 .v2-success-stories {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.site-v2 .v2-success-stories__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

.site-v2 .v2-success-stories__card {
	position: relative;
}

/* Logo wrapper: fixed height keeps the eyebrow/title rows of all
   three cards aligned regardless of logo aspect ratio. */
.site-v2 .v2-success-stories__logo {
	height: 56px;
	margin-bottom: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.site-v2 .v2-success-stories__logo-img {
	max-height: 100%;
	max-width: 140px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Vantage card has no eyebrow. Render the row with visibility:hidden
   so card heights stay aligned across all three. */
.site-v2 .v2-success-stories__eyebrow--placeholder {
	visibility: hidden;
}

.site-v2 .v2-success-stories__card-link {
	color: inherit;
	text-decoration: none;
}

.site-v2 .v2-success-stories__card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.site-v2 .v2-success-stories__card-link:focus-visible {
	outline: 2px solid var(--v2-green);
	outline-offset: 2px;
}

/* =========================================================
   42. SUCCESS STORIES V2 INDEX — CLOSING CTA (Phase 3 — Section 3)
   Mirrors v2-services-closing pattern: cream type-only close
   with primary gold CTA.
   ========================================================= */
.site-v2 .v2-success-stories-closing {
	background: var(--v2-cream);
	padding-top: 100px;
	padding-bottom: 100px;
}

.site-v2 .v2-success-stories-closing__content {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.site-v2 .v2-success-stories-closing__content .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-success-stories-closing__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: clamp(32px, 4.5vw, 48px);
	margin: 0 0 28px 0;
}

.site-v2 .v2-success-stories-closing__body {
	font-family: var(--v2-font-body);
	font-size: 18px;
	line-height: 1.55;
	color: var(--v2-ink);
	max-width: 640px;
	margin: 0 auto 40px;
}

@media (max-width: 767px) {
	.site-v2 .v2-success-stories-closing {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.site-v2 .v2-success-stories-closing__body {
		font-size: 16px;
	}
}

/* =========================================================
   43. SUCCESS STORY V2 — HERO (Phase 3 — Detail § 1)
   Cream centered text + prominent client logo. Mirrors
   v2-services-hero structurally; logo wrapper reuses
   .v2-success-stories__logo with a --hero size modifier.
   ========================================================= */
.site-v2 .v2-success-story-hero {
	background: var(--v2-cream);
	padding-top: 120px;
	padding-bottom: 80px;
	text-align: center;
}

.site-v2 .v2-success-story-hero__inner {
	max-width: 880px;
	margin: 0 auto;
}

.site-v2 .v2-success-story-hero .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-success-story-hero__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: var(--v2-h1-tier2);
	margin: 0 0 32px 0;
}

.site-v2 .v2-success-story-hero__subhead {
	font-family: var(--v2-font-body);
	font-size: 22px;
	line-height: 1.45;
	color: rgba(27, 54, 93, 0.85);
	max-width: 720px;
	margin: 0 auto 48px;
}

@media (max-width: 767px) {
	.site-v2 .v2-success-story-hero {
		padding-top: 80px;
		padding-bottom: 56px;
	}
	.site-v2 .v2-success-story-hero__subhead {
		font-size: 18px;
		margin-bottom: 36px;
	}
}

/* Hero-size logo modifiers — bigger than the index card logo. */
.site-v2 .v2-success-stories__logo--hero {
	height: 96px;
	margin: 0 auto;
	justify-content: center;
}

.site-v2 .v2-success-stories__logo-img--hero {
	max-width: 280px;
}

@media (max-width: 767px) {
	.site-v2 .v2-success-stories__logo--hero {
		height: 72px;
	}
	.site-v2 .v2-success-stories__logo-img--hero {
		max-width: 220px;
	}
}

/* =========================================================
   44. SUCCESS STORY V2 — TESTIMONIAL (Phase 3 — Detail § 2)
   White centered pull quote with gold quote mark, role +
   firm attribution stacked. Lighter visual weight than the
   homepage Trust testimonial — sits between hero and
   challenge as a credibility beat, not the centerpiece.
   ========================================================= */
.site-v2 .v2-success-story-testimonial {
	background: var(--v2-navy);
	color: var(--v2-cream);
	padding-top: 96px;
	padding-bottom: 96px;
}

.site-v2 .v2-success-story-testimonial__figure {
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
}

.site-v2 .v2-success-story-testimonial__quote-mark {
	display: block;
	font-family: var(--v2-font-display);
	font-style: italic;
	font-size: 88px;
	line-height: 0.6;
	color: var(--v2-gold);
	margin-bottom: 16px;
}

.site-v2 .v2-success-story-testimonial__quote {
	font-family: var(--v2-font-display);
	font-weight: 400;
	font-style: italic;
	font-size: clamp(24px, 3vw, 30px);
	line-height: 1.4;
	color: var(--v2-cream);
	margin: 0 0 32px 0;
	letter-spacing: -0.005em;
}

.site-v2 .v2-success-story-testimonial__attribution {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.site-v2 .v2-success-story-testimonial__attribution-role {
	font-family: var(--v2-font-eyebrow);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--v2-cream);
}

.site-v2 .v2-success-story-testimonial__attribution-firm {
	font-family: var(--v2-font-body);
	font-size: 16px;
	color: var(--v2-cream);
}

@media (max-width: 767px) {
	.site-v2 .v2-success-story-testimonial {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.site-v2 .v2-success-story-testimonial__quote-mark {
		font-size: 64px;
	}
}

/* =========================================================
   45. SUCCESS STORY V2 — THE CHALLENGE (Phase 3 — Detail § 3)
   Cream centered header + single body paragraph in a
   centered max-width column.
   ========================================================= */
.site-v2 .v2-success-story-challenge {
	background: var(--v2-cream);
	padding-top: 100px;
	padding-bottom: 100px;
}

.site-v2 .v2-success-story-challenge__header {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 40px;
}

.site-v2 .v2-success-story-challenge__header .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-success-story-challenge__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: clamp(36px, 4.5vw, 52px);
	margin: 0;
}

.site-v2 .v2-success-story-challenge__body {
	max-width: 760px;
	margin: 0 auto;
}

.site-v2 .v2-success-story-challenge__paragraph {
	font-family: var(--v2-font-body);
	font-size: 18px;
	line-height: 1.6;
	color: var(--v2-ink);
	margin: 0;
}

@media (max-width: 767px) {
	.site-v2 .v2-success-story-challenge {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.site-v2 .v2-success-story-challenge__paragraph {
		font-size: 16px;
	}
}

/* =========================================================
   46. SUCCESS STORY V2 — OUR APPROACH (Phase 3 — Detail § 4)
   White centered header + intro paragraph + ordered list
   of bullets, each with a bold lead phrase followed by a
   body sentence. Hairline navy rules between items, gold
   accent rule at the top of the first item.
   ========================================================= */
.site-v2 .v2-success-story-approach {
	background: var(--v2-white);
	padding-top: 100px;
	padding-bottom: 100px;
}

.site-v2 .v2-success-story-approach__header {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 40px;
}

.site-v2 .v2-success-story-approach__header .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-success-story-approach__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: clamp(36px, 4.5vw, 52px);
	margin: 0;
}

.site-v2 .v2-success-story-approach__body {
	max-width: 760px;
	margin: 0 auto;
}

.site-v2 .v2-success-story-approach__intro {
	font-family: var(--v2-font-body);
	font-size: 18px;
	line-height: 1.6;
	color: var(--v2-ink);
	margin: 0 0 32px 0;
}

.site-v2 .v2-success-story-approach__list {
	list-style: none;
	padding: 0;
	margin: 0;
	/* CSS counter drives the "01."–"06." phase markers via the
	   __item-lead::before pseudo below. No partial markup change. */
	counter-reset: fpm-approach-phase;
}

/* Each phase row: 24px vertical padding + a left gutter for the
   timeline treatment (number, gold dot, pale-navy connecting line).
   position: relative anchors the three pseudo-elements that paint
   the gutter against the item box. */
.site-v2 .v2-success-story-approach__item {
	padding: 24px 0 24px 72px;
	border-top: 1px solid rgba(27, 54, 93, 0.1);
	position: relative;
	counter-increment: fpm-approach-phase;
}

.site-v2 .v2-success-story-approach__item:first-child {
	border-top: 1px solid var(--v2-gold);
}

.site-v2 .v2-success-story-approach__item:last-child {
	border-bottom: 1px solid rgba(27, 54, 93, 0.1);
}

/* Vertical connecting line — runs through each item's gutter at
   the dot's horizontal center. First and last items truncate the
   line at the dot center so the visual "starts" at 01 and "ends"
   at 06 (no overhang above or below). */
.site-v2 .v2-success-story-approach__item::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgba(27, 54, 93, 0.15);
	z-index: 0;
}

.site-v2 .v2-success-story-approach__item:first-child::before {
	top: 30px;
}

.site-v2 .v2-success-story-approach__item:last-child::before {
	height: 30px;
	bottom: auto;
}

/* Gold connector dot — sits on the line, covers it visually at the
   phase's vertical anchor point. Aligned with the title baseline. */
.site-v2 .v2-success-story-approach__item::after {
	content: "";
	position: absolute;
	left: 0;
	top: 26px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--v2-gold);
	z-index: 1;
}

/* Phase number label — "01.", "02.", … generated by the CSS counter.
   Sits in the gutter, just right of the dot, vertically aligned with
   the title baseline. */
.site-v2 .v2-success-story-approach__item-lead::before {
	content: counter(fpm-approach-phase, decimal-leading-zero) ".";
	position: absolute;
	left: 24px;
	top: 26px;
	font-family: var(--v2-font-eyebrow);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--v2-gold);
	text-transform: uppercase;
	line-height: 1;
}

.site-v2 .v2-success-story-approach__item-lead {
	font-family: var(--v2-font-body);
	font-size: 17px;
	font-weight: 600;
	color: var(--v2-navy);
}

.site-v2 .v2-success-story-approach__item-body {
	font-family: var(--v2-font-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--v2-ink);
	margin-left: 6px;
}

@media (max-width: 1023px) {
	.site-v2 .v2-success-story-approach__item {
		padding-left: 56px;
	}
	.site-v2 .v2-success-story-approach__item-lead::before {
		left: 20px;
	}
}

@media (max-width: 767px) {
	.site-v2 .v2-success-story-approach {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.site-v2 .v2-success-story-approach__intro,
	.site-v2 .v2-success-story-approach__item-lead,
	.site-v2 .v2-success-story-approach__item-body {
		font-size: 16px;
	}
	.site-v2 .v2-success-story-approach__item {
		padding-left: 40px;
	}
	.site-v2 .v2-success-story-approach__item::after {
		width: 8px;
		height: 8px;
		top: 28px;
	}
	.site-v2 .v2-success-story-approach__item::before {
		left: 3.5px;
	}
	.site-v2 .v2-success-story-approach__item:first-child::before,
	.site-v2 .v2-success-story-approach__item:last-child::before {
		/* keep first/last truncation values aligned with the smaller
		   dot's center on mobile (28 + 4 = 32, was 26 + 5 = 31 → ~30). */
	}
	.site-v2 .v2-success-story-approach__item-lead::before {
		left: 14px;
		font-size: 11px;
		top: 28px;
	}
	.site-v2 .v2-success-story-approach__item-body {
		display: block;
		margin-left: 0;
		margin-top: 4px;
	}
}

/* =========================================================
   47. SUCCESS STORY V2 — THE RESULTS (Phase 3 — Detail § 5)
   Cream 4-card stat grid (4-up desktop, 2x2 tablet, 2x2
   mobile). Big number + label below. Reuses .fpm-stat-symbol
   for gold +/x prefixes — same shared class as homepage
   Trust and Service Proof stats.
   ========================================================= */
/* Navy stats moment — matches the established pattern used by
   .v2-success-story-outcomes (AP Capital) and .v2-service-proof
   (service detail pages). 120/120 padding is the dramatic-navy-moment
   exception, NOT the standard 96/96. */
.site-v2 .v2-success-story-results {
	background: var(--v2-navy);
	color: var(--v2-cream);
	padding-top: 120px;
	padding-bottom: 120px;
}

.site-v2 .v2-success-story-results__header {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 56px;
}

.site-v2 .v2-success-story-results__header .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-success-story-results__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--v2-cream);
	font-size: clamp(36px, 4.5vw, 52px);
	margin: 0;
}

/* Optional intro paragraph between headline and stat grid — cream/off-
   white on the navy section background. Mirrors the visual pattern of
   .v2-success-story-outcomes__intro. */
.site-v2 .v2-success-story-results__intro {
	font-family: var(--v2-font-body);
	font-size: 18px;
	line-height: 1.6;
	color: rgba(250, 249, 245, 0.9);
	max-width: 720px;
	margin: 0 auto 56px;
	text-align: center;
}

.site-v2 .v2-success-story-results__stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

.site-v2 .v2-success-story-results__stat {
	text-align: center;
	padding: 0 8px;
	position: relative;
}

/* Vertical gold rule between adjacent stat cards (desktop only —
   the responsive media queries below collapse the grid to 2×2 where
   vertical rules between every-other-pair would be visually awkward,
   so the rule is dropped at ≤1024px). Matches the pattern used by
   .v2-success-story-outcomes__stat + .v2-success-story-outcomes__stat. */
.site-v2 .v2-success-story-results__stat + .v2-success-story-results__stat::before {
	content: "";
	position: absolute;
	left: -16px;
	top: 8%;
	bottom: 8%;
	width: 1px;
	background: var(--v2-gold);
	opacity: 0.5;
}

.site-v2 .v2-success-story-results__stat-number {
	font-family: var(--v2-font-display);
	font-weight: 400;
	font-size: clamp(40px, 4vw, 56px);
	line-height: 1;
	color: var(--v2-cream);
	display: block;
	margin-bottom: 14px;
	letter-spacing: -0.02em;
}

.site-v2 .v2-success-story-results__stat-label {
	font-family: var(--v2-font-eyebrow);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(250, 249, 245, 0.8);
	display: block;
	line-height: 1.4;
}

/* Optional attribution caption below the stat grid. Mirrors the
   visual pattern used by .v2-success-story-outcomes__attribution
   (60px gold rule above via ::before, gold small-caps eyebrow
   text) — adapted for cream-bg context where gold remains visible
   without needing tonal adjustment. */
.site-v2 .v2-success-story-results__attribution {
	font-family: var(--v2-font-eyebrow);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--v2-gold);
	max-width: 720px;
	margin: 40px auto 0;
	text-align: center;
}

.site-v2 .v2-success-story-results__attribution::before {
	content: "";
	display: block;
	width: 60px;
	height: 1px;
	background: var(--v2-gold);
	margin: 0 auto 24px;
}

@media (max-width: 1024px) {
	.site-v2 .v2-success-story-results__stats {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px 32px;
	}
	/* Drop the vertical rules at 2×2 — they'd appear between rows
	   rather than between adjacent stats and would read as visual
	   noise instead of separators. */
	.site-v2 .v2-success-story-results__stat + .v2-success-story-results__stat::before {
		content: none;
	}
}

@media (max-width: 767px) {
	.site-v2 .v2-success-story-results {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.site-v2 .v2-success-story-results__stats {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 16px;
	}
	.site-v2 .v2-success-story-results__intro {
		font-size: 16px;
		margin-bottom: 40px;
	}
	.site-v2 .v2-success-story-results__attribution {
		font-size: 12px;
		margin-top: 32px;
	}
}

/* =========================================================
   48. SUCCESS STORY V2 — CLOSING CTA (Phase 3 — Detail § 6)
   White type-only close with primary gold CTA. Mirrors
   v2-service-closing pattern.
   ========================================================= */
.site-v2 .v2-success-story-closing {
	background: var(--v2-white);
	padding-top: 100px;
	padding-bottom: 100px;
}

.site-v2 .v2-success-story-closing__content {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.site-v2 .v2-success-story-closing__content .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-success-story-closing__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: clamp(32px, 4.5vw, 48px);
	margin: 0 0 28px 0;
}

.site-v2 .v2-success-story-closing__body {
	font-family: var(--v2-font-body);
	font-size: 18px;
	line-height: 1.55;
	color: var(--v2-ink);
	max-width: 640px;
	margin: 0 auto 40px;
}

@media (max-width: 767px) {
	.site-v2 .v2-success-story-closing {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.site-v2 .v2-success-story-closing__body {
		font-size: 16px;
	}
}

/* =========================================================
   49. LEGAL V2 — HERO (Phase 4 — Section 1)
   Quiet hero: eyebrow + page title + "Last updated" date.
   Cream background, no italic accent on title, no subhead,
   no CTA. Typography is direct — Lora title, Lexend
   updated-date, gold eyebrow.
   ========================================================= */
.site-v2 .v2-legal-hero {
	background: var(--v2-cream);
	padding-top: 96px;
	padding-bottom: 56px;
}

.site-v2 .v2-legal-hero__inner {
	max-width: 720px;
	margin: 0 auto;
}

.site-v2 .v2-legal-hero .v2-eyebrow {
	margin-bottom: 20px;
	display: inline-block;
}

.site-v2 .v2-legal-hero__title {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: clamp(36px, 4.5vw, 52px);
	margin: 0 0 20px 0;
}

.site-v2 .v2-legal-hero__updated {
	font-family: var(--v2-font-eyebrow);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--v2-muted);
	margin: 0;
}

@media (max-width: 767px) {
	.site-v2 .v2-legal-hero {
		padding-top: 72px;
		padding-bottom: 44px;
	}
}

/* =========================================================
   50. LEGAL V2 — BODY CONTENT (Phase 4 — Section 2)
   Narrow reading column rendering the_content() output.
   Targets the typography elements WP emits (h2, h3, p, ul,
   ol, li, a) so post_content renders cleanly without Block
   Editor inline styles. Page ends after the body — no
   closing CTA section follows.
   ========================================================= */
.site-v2 .v2-legal-body {
	background: var(--v2-white);
	padding-top: 56px;
	padding-bottom: 96px;
}

.site-v2 .v2-legal-body__inner {
	max-width: 720px;
	margin: 0 auto;
	font-family: var(--v2-font-body);
	font-size: 17px;
	line-height: 1.7;
	color: var(--v2-ink);
}

.site-v2 .v2-legal-body__inner h2 {
	font-family: var(--v2-font-display);
	font-weight: 500;
	font-size: clamp(24px, 2.5vw, 30px);
	line-height: 1.25;
	color: var(--v2-navy);
	letter-spacing: -0.01em;
	margin: 56px 0 16px 0;
}

.site-v2 .v2-legal-body__inner h2:first-child {
	margin-top: 0;
}

.site-v2 .v2-legal-body__inner h3 {
	font-family: var(--v2-font-display);
	font-weight: 500;
	font-size: clamp(19px, 1.8vw, 22px);
	line-height: 1.3;
	color: var(--v2-navy);
	margin: 32px 0 12px 0;
}

.site-v2 .v2-legal-body__inner p {
	margin: 0 0 18px 0;
}

.site-v2 .v2-legal-body__inner ul,
.site-v2 .v2-legal-body__inner ol {
	margin: 0 0 20px 0;
	padding-left: 1.5rem;
}

.site-v2 .v2-legal-body__inner li {
	margin-bottom: 6px;
	line-height: 1.6;
}

.site-v2 .v2-legal-body__inner a {
	color: var(--v2-green);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.2s ease;
}

.site-v2 .v2-legal-body__inner a:hover {
	color: var(--v2-green-dark);
}

.site-v2 .v2-legal-body__inner strong {
	color: var(--v2-navy);
	font-weight: 600;
}

@media (max-width: 767px) {
	.site-v2 .v2-legal-body {
		padding-top: 40px;
		padding-bottom: 64px;
	}
	.site-v2 .v2-legal-body__inner {
		font-size: 16px;
	}
}

/* Sitemap-columns markup (existing convention from v1 Sitemap
   page) gets v2-scoped equivalents so the future Sitemap v2
   page can use the same .sitemap-columns wrapper unchanged.
   Renders as a 2-column link grid that collapses to 1 column
   at mobile. */
.site-v2 .v2-legal-body__inner .sitemap-columns {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
	margin: 32px 0;
}

.site-v2 .v2-legal-body__inner .sitemap-columns ul {
	list-style: none;
	padding: 0;
	margin: 0 0 24px 0;
}

.site-v2 .v2-legal-body__inner .sitemap-columns li {
	margin-bottom: 8px;
}

.site-v2 .v2-legal-body__inner .sitemap-columns a {
	color: var(--v2-navy);
	text-decoration: none;
	font-weight: 500;
}

.site-v2 .v2-legal-body__inner .sitemap-columns a:hover {
	color: var(--v2-green);
	text-decoration: underline;
}

@media (max-width: 767px) {
	.site-v2 .v2-legal-body__inner .sitemap-columns {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* =========================================================
   51. INSIGHTS V2 — HERO (Phase 4 — Insights § 1)
   Cream centered hero. Same shape as v2-services-hero but
   slightly tighter padding since the chips and post grid
   below need vertical space.
   ========================================================= */
.site-v2 .v2-insights-hero {
	background: var(--v2-cream);
	padding-top: 96px;
	padding-bottom: 56px;
	text-align: center;
}

.site-v2 .v2-insights-hero__inner {
	max-width: 860px;
	margin: 0 auto;
}

.site-v2 .v2-insights-hero .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-insights-hero__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: var(--v2-h1-tier3);
	margin: 0 0 32px 0;
}

.site-v2 .v2-insights-hero__subhead {
	font-family: var(--v2-font-body);
	font-size: 19px;
	line-height: 1.45;
	color: rgba(27, 54, 93, 0.85);
	max-width: 640px;
	margin: 0 auto;
}

@media (max-width: 767px) {
	.site-v2 .v2-insights-hero {
		padding-top: 72px;
		padding-bottom: 40px;
	}
	.site-v2 .v2-insights-hero__subhead {
		font-size: 17px;
	}
}

/* =========================================================
   52. INSIGHTS V2 — CATEGORY CHIPS (Phase 4 — Insights § 2)
   Filter row beneath the hero. "All" + 3 audience-category
   chips. Active state = filled gold pill; inactive = bordered
   navy pill. Wraps on small screens.
   ========================================================= */
.site-v2 .v2-insights-chips {
	background: var(--v2-cream);
	padding-bottom: 40px;
}

.site-v2 .v2-insights-chips__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.site-v2 .v2-insights-chip {
	display: inline-flex;
	align-items: center;
	padding: 9px 18px;
	border-radius: 999px;
	font-family: var(--v2-font-eyebrow);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--v2-navy);
	background: transparent;
	border: 1px solid rgba(27, 54, 93, 0.2);
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.site-v2 .v2-insights-chip:hover {
	background: rgba(27, 54, 93, 0.05);
	border-color: rgba(27, 54, 93, 0.4);
}

.site-v2 .v2-insights-chip--active,
.site-v2 .v2-insights-chip--active:hover {
	background: var(--v2-green);
	color: var(--v2-navy);
	border-color: var(--v2-green);
}

@media (max-width: 767px) {
	.site-v2 .v2-insights-chips {
		padding-bottom: 28px;
	}
	.site-v2 .v2-insights-chip {
		font-size: 11px;
		padding: 8px 14px;
	}
}

/* =========================================================
   53. INSIGHTS V2 — POST GRID + CARD (Phase 4 — Insights § 3)
   3-column desktop, 2-column tablet, 1-column mobile. Whole
   card is wrapped in <a>; inner elements are non-interactive
   (spans/headings/img) to keep the markup valid. Featured
   image is 16:9 via aspect-ratio, object-fit cover.
   ========================================================= */
.site-v2 .v2-insights-grid-section {
	background: var(--v2-cream);
	padding-bottom: 96px;
}

.site-v2 .v2-insights-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

@media (max-width: 1024px) {
	.site-v2 .v2-insights-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.site-v2 .v2-insights-grid-section {
		padding-bottom: 64px;
	}
	.site-v2 .v2-insights-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

.site-v2 .v2-insights-grid__empty {
	font-family: var(--v2-font-body);
	font-size: 17px;
	color: var(--v2-muted);
	text-align: center;
	padding: 48px 0;
	margin: 0;
}

.site-v2 .v2-insights-card {
	display: flex;
	flex-direction: column;
	background: var(--v2-white);
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow:
		0 1px 2px rgba(27, 54, 93, 0.04),
		0 4px 16px rgba(27, 54, 93, 0.05);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.site-v2 .v2-insights-card:hover {
	transform: translateY(-2px);
	box-shadow:
		0 2px 4px rgba(27, 54, 93, 0.06),
		0 12px 28px rgba(27, 54, 93, 0.08);
}

.site-v2 .v2-insights-card:focus-visible {
	outline: 2px solid var(--v2-green);
	outline-offset: 3px;
}

.site-v2 .v2-insights-card__image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--v2-hairline);
}

.site-v2 .v2-insights-card__image img,
.site-v2 .v2-insights-card__image-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.site-v2 .v2-insights-card:hover .v2-insights-card__image img,
.site-v2 .v2-insights-card:hover .v2-insights-card__image-img {
	transform: scale(1.03);
}

.site-v2 .v2-insights-card__body {
	padding: 24px 24px 28px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.site-v2 .v2-insights-card__category {
	font-family: var(--v2-font-eyebrow);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--v2-gold-text);
	margin-bottom: 12px;
	display: inline-block;
}

.site-v2 .v2-insights-card__title {
	font-family: var(--v2-font-display);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.3;
	color: var(--v2-navy);
	letter-spacing: -0.01em;
	margin: 0 0 12px 0;
}

.site-v2 .v2-insights-card__excerpt {
	font-family: var(--v2-font-body);
	font-size: 15px;
	line-height: 1.55;
	color: var(--v2-ink);
	margin: 0 0 16px 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.site-v2 .v2-insights-card__meta {
	font-family: var(--v2-font-eyebrow);
	font-size: 12px;
	font-weight: 500;
	color: var(--v2-muted);
	margin-bottom: 16px;
	margin-top: auto;
}

.site-v2 .v2-insights-card__read-link {
	font-family: var(--v2-font-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--v2-green);
}

.site-v2 .v2-insights-card__read-link::after {
	content: " \2192";
	display: inline-block;
	margin-left: 4px;
	transition: transform 0.2s ease;
}

.site-v2 .v2-insights-card:hover .v2-insights-card__read-link::after {
	transform: translateX(3px);
}

/* =========================================================
   54. INSIGHTS V2 — CLOSING CTA (Phase 4 — Insights § 4)
   White type-only close with primary gold CTA. Mirrors
   v2-services-closing pattern.
   ========================================================= */
.site-v2 .v2-insights-closing {
	background: var(--v2-white);
	padding-top: 100px;
	padding-bottom: 100px;
}

.site-v2 .v2-insights-closing__content {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.site-v2 .v2-insights-closing__content .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-insights-closing__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: clamp(32px, 4.5vw, 48px);
	margin: 0 0 28px 0;
}

.site-v2 .v2-insights-closing__body {
	font-family: var(--v2-font-body);
	font-size: 18px;
	line-height: 1.55;
	color: var(--v2-ink);
	max-width: 640px;
	margin: 0 auto 40px;
}

@media (max-width: 767px) {
	.site-v2 .v2-insights-closing {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.site-v2 .v2-insights-closing__body {
		font-size: 16px;
	}
}

/* =========================================================
   55. SINGLE V2 — POST HERO (Phase 4 — Single § 1)
   Cream centered hero. Eyebrow + Lora title (no italic
   accent — post titles aren't marketing copy) + meta line +
   16:9 featured image at full container width.
   ========================================================= */
.site-v2 .v2-post-hero {
	background: var(--v2-cream);
	padding-top: 80px;
	padding-bottom: 0;
	text-align: center;
}

.site-v2 .v2-post-hero__inner {
	max-width: 800px;
	margin: 0 auto;
	padding-bottom: 48px;
}

.site-v2 .v2-post-hero .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-post-hero__title {
	font-family: var(--v2-font-display);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: var(--v2-h1-tier4);
	margin: 0 0 32px 0;
}

.site-v2 .v2-post-hero__byline {
	font-family: var(--v2-font-eyebrow);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--v2-gold-text);
	margin: 0 0 8px 0;
}

.site-v2 .v2-post-hero__meta {
	font-family: var(--v2-font-eyebrow);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--v2-muted-light);
	margin: 0;
}

.site-v2 .v2-post-hero__image {
	max-width: 1100px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--v2-hairline);
}

.site-v2 .v2-post-hero__image img,
.site-v2 .v2-post-hero__image-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 767px) {
	.site-v2 .v2-post-hero {
		padding-top: 56px;
	}
	.site-v2 .v2-post-hero__inner {
		padding-bottom: 32px;
	}
}

/* =========================================================
   56. SINGLE V2 — ARTICLE LAYOUT (Phase 4 — Single § 2)
   Single-column 720px reading flow. Inline TOC is injected
   into the body content stream (see §58 and the
   finpact_media_inject_inline_toc filter in template-functions.php)
   rather than rendered as a sidebar.
   ========================================================= */
.site-v2 .v2-article-layout {
	background: var(--v2-white);
	padding-top: 64px;
	padding-bottom: 80px;
}

.site-v2 .v2-article-layout__inner {
	display: flex;
	justify-content: center;
}

@media (max-width: 767px) {
	.site-v2 .v2-article-layout {
		padding-top: 40px;
		padding-bottom: 56px;
	}
}

/* =========================================================
   57. SINGLE V2 — ARTICLE BODY TYPOGRAPHY (Phase 4 — Single § 3)
   Reading-column scoped styles for the_content() output.
   Targets the elements WP emits (h2, h3, p, ul, ol, li, a,
   blockquote, img, figure/figcaption, code) so post_content
   renders cleanly without per-block overrides.
   ========================================================= */
.site-v2 .v2-article-body {
	font-family: var(--v2-font-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--v2-ink);
	max-width: 720px;
}

.site-v2 .v2-article-body > *:first-child {
	margin-top: 0;
}

.site-v2 .v2-article-body h2 {
	font-family: var(--v2-font-display);
	font-weight: 500;
	font-size: clamp(24px, 2.4vw, 30px);
	line-height: 1.25;
	color: var(--v2-navy);
	letter-spacing: -0.01em;
	margin: 56px 0 16px 0;
	scroll-margin-top: 96px; /* offset for TOC anchor jumps */
}

.site-v2 .v2-article-body h3 {
	font-family: var(--v2-font-display);
	font-weight: 500;
	font-size: clamp(19px, 1.8vw, 22px);
	line-height: 1.3;
	color: var(--v2-navy);
	margin: 36px 0 12px 0;
	scroll-margin-top: 96px;
}

.site-v2 .v2-article-body p {
	margin: 0 0 18px 0;
}

.site-v2 .v2-article-body ul,
.site-v2 .v2-article-body ol {
	margin: 0 0 22px 0;
	padding-left: 1.5rem;
}

.site-v2 .v2-article-body li {
	margin-bottom: 8px;
	line-height: 1.6;
}

.site-v2 .v2-article-body a {
	color: var(--v2-green);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	transition: color 0.2s ease;
}

.site-v2 .v2-article-body a:hover {
	color: var(--v2-green-dark);
}

.site-v2 .v2-article-body strong {
	color: var(--v2-navy);
	font-weight: 600;
}

.site-v2 .v2-article-body blockquote {
	margin: 32px 0;
	padding: 4px 0 4px 24px;
	border-left: 4px solid var(--v2-gold);
	font-family: var(--v2-font-display);
	font-style: italic;
	font-size: clamp(19px, 1.8vw, 22px);
	line-height: 1.4;
	color: var(--v2-navy);
}

.site-v2 .v2-article-body blockquote p {
	margin: 0 0 12px 0;
}

.site-v2 .v2-article-body blockquote p:last-child {
	margin-bottom: 0;
}

.site-v2 .v2-article-body img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 32px 0;
}

.site-v2 .v2-article-body figure {
	margin: 32px 0;
}

.site-v2 .v2-article-body figure img {
	margin: 0 0 12px 0;
}

.site-v2 .v2-article-body figcaption {
	font-family: var(--v2-font-eyebrow);
	font-size: 12px;
	font-weight: 500;
	color: var(--v2-muted);
	text-align: center;
}

.site-v2 .v2-article-body code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.92em;
	background: var(--v2-cream);
	padding: 2px 6px;
	border-radius: 3px;
}

/* Pull-quote utility — opt-in via Gutenberg "additional CSS class"
   field on a quote block. Doesn't retrofit existing posts. */
.site-v2 .v2-article-body .v2-article-pullquote {
	margin: 48px 0;
	padding: 16px 0 16px 28px;
	border-left: 4px solid var(--v2-gold);
	font-family: var(--v2-font-display);
	font-style: italic;
	font-size: clamp(22px, 2.2vw, 28px);
	line-height: 1.35;
	color: var(--v2-navy);
}

@media (max-width: 767px) {
	.site-v2 .v2-article-body {
		font-size: 16px;
	}
	.site-v2 .v2-article-body h2 {
		margin-top: 40px;
	}
}

/* =========================================================
   58. SINGLE V2 — INLINE TOC (Phase 4 — Single § 4)
   Numbered table of contents injected into the_content after
   the Direct Answer section (or after the first h2 if none).
   White ground, gold hairline top + bottom, gold small-caps
   "On this page" eyebrow, gold 01./02./03. number gutter,
   navy link text with gold hover. No sticky behavior, no JS.
   ========================================================= */
.site-v2 .v2-article-body .v2-inline-toc {
	margin: 48px 0;
	padding: 28px 0 32px 0;
	border-top: 1px solid var(--v2-gold);
	border-bottom: 1px solid var(--v2-gold);
}

.site-v2 .v2-article-body .v2-inline-toc__eyebrow {
	display: block;
	margin-bottom: 20px;
	font-family: var(--v2-font-eyebrow);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--v2-gold-text);
}

.site-v2 .v2-article-body .v2-inline-toc__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.site-v2 .v2-article-body .v2-inline-toc__item {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 8px 0;
	margin: 0;
}

.site-v2 .v2-article-body .v2-inline-toc__item + .v2-inline-toc__item {
	border-top: 1px solid var(--v2-hairline);
}

.site-v2 .v2-article-body .v2-inline-toc__number {
	flex: 0 0 auto;
	min-width: 36px;
	font-family: var(--v2-font-eyebrow);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--v2-gold-text);
}

.site-v2 .v2-article-body .v2-inline-toc__link {
	font-family: var(--v2-font-body);
	font-size: 16px;
	line-height: 1.45;
	color: var(--v2-navy);
	text-decoration: none;
	transition: color 0.2s ease;
}

.site-v2 .v2-article-body .v2-inline-toc__link:hover {
	color: var(--v2-gold);
}

@media (max-width: 767px) {
	.site-v2 .v2-article-body .v2-inline-toc {
		margin: 36px 0;
		padding: 22px 0 24px 0;
	}
	.site-v2 .v2-article-body .v2-inline-toc__number {
		min-width: 32px;
	}
	.site-v2 .v2-article-body .v2-inline-toc__link {
		font-size: 15px;
	}
}

/* =========================================================
   59. SINGLE V2 — TAGS DISPLAY (Phase 4 — Single § 5)
   Chip row beneath the article body. Reuses .v2-insights-chip
   styling from §52; this section handles list-spec layout
   and section padding.
   ========================================================= */
.site-v2 .v2-article-tags-section {
	background: var(--v2-white);
	padding-top: 8px;
	padding-bottom: 32px;
}

.site-v2 .v2-article-tags {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 720px;
}

.site-v2 .v2-article-tags__item {
	margin: 0;
}

/* =========================================================
   60. SINGLE V2 — SHARE BAR (Phase 4 — Single § 6)
   Inline label + 3 SVG icon links. No share counts, no JS,
   no third-party tracking — just standard share endpoints
   that open in a new tab.
   ========================================================= */
.site-v2 .v2-article-share {
	background: var(--v2-white);
	padding-top: 16px;
	padding-bottom: 56px;
	border-bottom: 1px solid var(--v2-hairline);
}

.site-v2 .v2-article-share__row {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 720px;
}

.site-v2 .v2-article-share__label {
	font-family: var(--v2-font-eyebrow);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--v2-muted);
}

.site-v2 .v2-article-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--v2-navy);
	text-decoration: none;
	transition: color 0.2s ease, transform 0.2s ease;
}

.site-v2 .v2-article-share__link:hover {
	color: var(--v2-green);
	transform: translateY(-1px);
}

.site-v2 .v2-article-share__link svg {
	display: block;
}

@media (max-width: 767px) {
	.site-v2 .v2-article-share__row {
		gap: 12px;
	}
}

/* =========================================================
   61. SINGLE V2 — RELATED POSTS (Phase 4 — Single § 7)
   Same 3-up grid as the Insights index. Reuses
   .v2-insights-grid + .v2-insights-card from §53. This
   section adds a heading row and section padding.
   ========================================================= */
.site-v2 .v2-article-related {
	background: var(--v2-cream);
	padding-top: 80px;
	padding-bottom: 80px;
}

.site-v2 .v2-article-related__heading {
	font-family: var(--v2-font-display);
	font-weight: 500;
	font-size: clamp(28px, 3vw, 36px);
	line-height: 1.2;
	color: var(--v2-navy);
	letter-spacing: -0.01em;
	margin: 0 0 40px 0;
	text-align: center;
}

@media (max-width: 767px) {
	.site-v2 .v2-article-related {
		padding-top: 56px;
		padding-bottom: 56px;
	}
}

/* =========================================================
   62. SINGLE V2 — CLOSING CTA (Phase 4 — Single § 8)
   Article-aware closing block. Mirrors v2 closing convention.
   ========================================================= */
.site-v2 .v2-article-closing {
	background: var(--v2-white);
	padding-top: 80px;
	padding-bottom: 80px;
}

.site-v2 .v2-article-closing__content {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.site-v2 .v2-article-closing__content .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-article-closing__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: clamp(32px, 4vw, 44px);
	margin: 0 0 24px 0;
}

.site-v2 .v2-article-closing__body {
	font-family: var(--v2-font-body);
	font-size: 17px;
	line-height: 1.55;
	color: var(--v2-ink);
	max-width: 600px;
	margin: 0 auto 32px;
}

@media (max-width: 767px) {
	.site-v2 .v2-article-closing {
		padding-top: 56px;
		padding-bottom: 56px;
	}
	.site-v2 .v2-article-closing__body {
		font-size: 16px;
	}
}

/* =========================================================
   53. SUCCESS STORY V2 — APPROACH OUTCOME LINE
   Italicized outcome sentence appended to each Approach bullet.
   ========================================================= */
.site-v2 .v2-success-story-approach__item-outcome {
	display: block;
	margin-top: 8px;
	font-family: var(--v2-font-body);
	font-style: italic;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(27, 54, 93, 0.75);
}

/* =========================================================
   54. SUCCESS STORY V2 — TESTIMONIAL CREDIT + LIVE-SITE CTA
   Rendered when the data array provides attribution_url +
   attribution_parts. Two elements:
     1. Plain-text credit attribution (name · role · firm)
        with a 60px gold rule above. No anchor.
     2. Outline button below, opens the live-site URL in a new
        tab. Inherits .v2-btn base typography (padding, font,
        letter-spacing, uppercase) and scopes a cream-on-navy
        outline + gold arrow + cream-tint hover here.
   ========================================================= */
.site-v2 .v2-success-story-testimonial__credit-rule {
	width: 60px;
	height: 1px;
	background: var(--v2-gold);
	border: 0;
	margin: 32px auto 16px;
}

.site-v2 .v2-success-story-testimonial__credit {
	font-family: var(--v2-font-eyebrow);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.6;
	color: var(--v2-cream);
	text-align: center;
	margin: 0;
}

.site-v2 .v2-success-story-testimonial__credit-sep {
	color: var(--v2-gold);
	margin: 0 4px;
}

/* CTA button — inherits .v2-btn for padding/font; scoped overrides
   here for the cream-on-navy outline treatment. */
.site-v2 .v2-success-story-testimonial__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 28px;
	background: transparent;
	color: var(--v2-cream);
	border: 1px solid var(--v2-cream);
	/* Override .v2-btn's uppercase text-transform so the domain stays
	   lowercase. The label span re-applies uppercase via a child rule. */
	text-transform: none;
	letter-spacing: 0.08em;
}

.site-v2 .v2-success-story-testimonial__cta:hover,
.site-v2 .v2-success-story-testimonial__cta:focus-visible {
	border-color: var(--v2-gold);
	background: rgba(250, 249, 245, 0.05);
}

.site-v2 .v2-success-story-testimonial__cta:focus-visible {
	outline: 2px solid var(--v2-gold);
	outline-offset: 2px;
}

/* Re-apply uppercase only to the "VISIT" verb so the domain text
   below stays in its native lowercase form. */
.site-v2 .v2-success-story-testimonial__cta-label {
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.site-v2 .v2-success-story-testimonial__cta-domain {
	font-weight: 500;
}

.site-v2 .v2-success-story-testimonial__cta-arrow {
	display: inline-block;
	color: var(--v2-gold);
	transition: transform 0.2s ease;
}

.site-v2 .v2-success-story-testimonial__cta:hover .v2-success-story-testimonial__cta-arrow,
.site-v2 .v2-success-story-testimonial__cta:focus-visible .v2-success-story-testimonial__cta-arrow {
	transform: translateX(3px);
}

/* =========================================================
   55. SUCCESS STORY V2 — OUTCOMES (navy band)
   Sits between Approach and Results/Closing on case studies whose
   per-slug data supplies an 'outcomes' block. 120/120 padding —
   matches the dramatic-navy-moment exception used by .v2-service-proof
   on the SEO and Paid Advertising service-detail pages.
   ========================================================= */
.site-v2 .v2-success-story-outcomes {
	background: var(--v2-navy);
	color: var(--v2-cream);
	padding-top: 120px;
	padding-bottom: 120px;
}

.site-v2 .v2-success-story-outcomes__header {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 32px;
}

.site-v2 .v2-success-story-outcomes__header .v2-eyebrow {
	margin-bottom: 24px;
	color: var(--v2-gold);
}

.site-v2 .v2-success-story-outcomes__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--v2-cream);
	font-size: clamp(32px, 4vw, 44px);
	margin: 0;
}

.site-v2 .v2-success-story-outcomes__intro {
	font-family: var(--v2-font-body);
	font-size: 18px;
	line-height: 1.6;
	color: rgba(250, 249, 245, 0.9);
	max-width: 720px;
	margin: 0 auto 64px;
	text-align: center;
}

.site-v2 .v2-success-story-outcomes__stats {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
	gap: 40px;
	max-width: 960px;
	margin: 0 auto;
}

.site-v2 .v2-success-story-outcomes__stat {
	flex: 1 1 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 16px 0;
	position: relative;
}

/* Vertical gold rule between adjacent stat blocks (desktop only —
   the mobile media query below flips this to a horizontal divider). */
.site-v2 .v2-success-story-outcomes__stat + .v2-success-story-outcomes__stat::before {
	content: "";
	position: absolute;
	left: -20px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--v2-gold);
	opacity: 0.5;
}

.site-v2 .v2-success-story-outcomes__stat-number {
	font-family: var(--v2-font-display);
	font-weight: 400;
	font-size: 80px;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--v2-cream);
}

.site-v2 .v2-success-story-outcomes__stat-number .fpm-stat-symbol {
	font-size: 0.6em;
}

.site-v2 .v2-success-story-outcomes__stat-label {
	font-family: var(--v2-font-eyebrow);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(250, 249, 245, 0.8);
	margin-top: 14px;
}

/* Attribution caption — gold small-caps with a thin 60px gold rule
   above. Same pattern as .v2-service-proof__caption. */
.site-v2 .v2-success-story-outcomes__attribution {
	font-family: var(--v2-font-eyebrow);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--v2-gold);
	max-width: 640px;
	margin: 40px auto 0;
	text-align: center;
}

.site-v2 .v2-success-story-outcomes__attribution::before {
	content: "";
	display: block;
	width: 60px;
	height: 1px;
	background: var(--v2-gold);
	margin: 0 auto 24px;
}

@media (max-width: 1023px) {
	.site-v2 .v2-success-story-outcomes__stat-number {
		font-size: 56px;
	}
}

@media (max-width: 767px) {
	.site-v2 .v2-success-story-outcomes {
		padding-top: 80px;
		padding-bottom: 80px;
	}
	.site-v2 .v2-success-story-outcomes__intro {
		margin-bottom: 48px;
		font-size: 16px;
	}
	.site-v2 .v2-success-story-outcomes__stats {
		flex-direction: column;
		gap: 32px;
	}
	.site-v2 .v2-success-story-outcomes__stat-number {
		font-size: 40px;
	}
	/* Horizontal divider between stacked stats on mobile (replaces
	   the desktop vertical rule). */
	.site-v2 .v2-success-story-outcomes__stat + .v2-success-story-outcomes__stat::before {
		left: 50%;
		top: -16px;
		bottom: auto;
		transform: translateX(-50%);
		width: 40px;
		height: 1px;
	}
	.site-v2 .v2-success-story-outcomes__attribution {
		font-size: 12px;
		margin-top: 32px;
	}
}

/* =========================================================
   56. SUCCESS STORY V2 — EXPLORE LIVE (cream linked references)
   Cream-background section between Outcomes (navy) and Let's Talk
   (cream). Standard 96/96 padding. Renders eyebrow + headline +
   intro paragraph + a vertical list of linked apcapital.ca page
   references. Replaces the prior screenshot gallery — markup and
   class names are retained at the .v2-success-story-the-work*
   namespace so the data-array contract stays stable across case
   studies; the entries shape simply replaced the screenshots shape.
   ========================================================= */
.site-v2 .v2-success-story-the-work {
	background: var(--v2-cream);
	padding-top: 96px;
	padding-bottom: 96px;
}

.site-v2 .v2-success-story-the-work__header {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 32px;
}

.site-v2 .v2-success-story-the-work__header .v2-eyebrow {
	margin-bottom: 24px;
}

.site-v2 .v2-success-story-the-work__headline {
	font-family: var(--v2-font-display);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--v2-navy);
	font-size: clamp(32px, 4vw, 44px);
	margin: 0;
}

.site-v2 .v2-success-story-the-work__intro {
	font-family: var(--v2-font-body);
	font-size: 18px;
	line-height: 1.6;
	color: rgba(27, 54, 93, 0.85);
	max-width: 720px;
	margin: 0 auto 56px;
	text-align: center;
}

.site-v2 .v2-success-story-the-work__entries {
	list-style: none;
	padding: 0;
	margin: 0;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.site-v2 .v2-success-story-the-work__entry {
	text-align: left;
}

/* Linked page name — bold navy with gold underline + gold arrow. */
.site-v2 .v2-success-story-the-work__entry-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--v2-font-body);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
	color: var(--v2-navy);
	text-decoration: underline;
	text-decoration-color: var(--v2-gold);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: color 0.2s ease, text-decoration-thickness 0.2s ease;
}

.site-v2 .v2-success-story-the-work__entry-link:hover,
.site-v2 .v2-success-story-the-work__entry-link:focus-visible {
	color: var(--v2-navy-dark);
	text-decoration-thickness: 2px;
}

.site-v2 .v2-success-story-the-work__entry-link:focus-visible {
	outline: 2px solid var(--v2-gold);
	outline-offset: 4px;
}

.site-v2 .v2-success-story-the-work__entry-arrow {
	display: inline-block;
	color: var(--v2-gold);
	transition: transform 0.2s ease;
}

.site-v2 .v2-success-story-the-work__entry-link:hover .v2-success-story-the-work__entry-arrow,
.site-v2 .v2-success-story-the-work__entry-link:focus-visible .v2-success-story-the-work__entry-arrow {
	transform: translateX(3px);
}

/* URL displayed below the name — muted body, smaller. */
.site-v2 .v2-success-story-the-work__entry-url {
	display: block;
	margin-top: 4px;
	font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
	font-size: 13px;
	color: var(--v2-muted);
	word-break: break-all;
}

/* One-line description below URL — body color, slightly muted. */
.site-v2 .v2-success-story-the-work__entry-desc {
	margin: 8px 0 0 0;
	font-family: var(--v2-font-body);
	font-size: 15px;
	line-height: 1.55;
	color: var(--v2-ink);
}

@media (max-width: 767px) {
	.site-v2 .v2-success-story-the-work {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.site-v2 .v2-success-story-the-work__intro {
		font-size: 16px;
		margin-bottom: 40px;
	}
	.site-v2 .v2-success-story-the-work__entries {
		gap: 28px;
	}
	.site-v2 .v2-success-story-the-work__entry-link {
		font-size: 18px;
	}
	.site-v2 .v2-success-story-the-work__entry-url {
		font-size: 12px;
	}
	.site-v2 .v2-success-story-the-work__entry-desc {
		font-size: 14px;
	}
}