/*
 * Customers page (/customers/ + translations) — the Home / Pricing look.
 * Loaded only on this page; every rule starts with body.bfi-customers, so the
 * theme's grid layouts (testimonial cards, logo wall) look the same elsewhere.
 * Texts, photos, logos and videos are unchanged.
 */

body.bfi-customers {
	--bfc-ink: #10282C;
	--bfc-slate: #2B4448;
	--bfc-muted: #5C6B6D;
	--bfc-green: #127A71;
	--bfc-cream: #FAF9F7;
	--bfc-warm: #F5F3F0;
	--bfc-line: #E9E5DE;
	--bfc-line-strong: #D9D3C9;
	--bfc-shadow-sm: 0 1px 2px rgba(16, 40, 44, .06), 0 1px 1px rgba(16, 40, 44, .04);
	--bfc-shadow-md: 0 6px 18px rgba(16, 40, 44, .07), 0 2px 4px rgba(16, 40, 44, .04);
	--bfc-shadow-lg: 0 18px 44px rgba(16, 40, 44, .11), 0 4px 10px rgba(16, 40, 44, .05);
	--bfc-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ── Spacing: calmer section rhythm (the page was ~12,000 px tall) ── */
body.bfi-customers .l-main > .l-section.height_large:not(:has(.clients-logos-container)) {
	padding-top: 88px !important;
	padding-bottom: 88px !important;
}
body.bfi-customers .l-main > .l-section.height_medium {
	padding-top: 40px !important;
	padding-bottom: 40px !important;
}

/* ── Hero: title, lead, rating left; logo wall right ────────────── */
body.bfi-customers .l-section:has(.clients-logos-container) {
	background: linear-gradient(180deg, var(--bfc-cream) 0%, #F3F0EA 100%) !important;
	border-bottom: 1px solid var(--bfc-line);
}
body.bfi-customers .l-section:has(.clients-logos-container) h1 {
	color: var(--bfc-ink);
	text-wrap: balance;
}
body.bfi-customers .bfi-cust-lead {
	max-width: 470px;
	margin: 0 !important;
	color: var(--bfc-slate);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.7;
}
/* Logo wall: white tiles with a thin warm border (the theme lets the wall run past its column, so no mask here) */
body.bfi-customers .header-logos-grid .w-grid-item-h > .w-hwrapper {
	background: #fff !important;
	border: 1px solid var(--bfc-line);
	border-radius: 18px !important;
	box-shadow: var(--bfc-shadow-sm) !important;
	transition: transform .25s var(--bfc-ease), box-shadow .25s var(--bfc-ease);
}
body.bfi-customers .header-logos-grid .w-grid-item:hover .w-grid-item-h > .w-hwrapper {
	transform: translateY(-3px);
	box-shadow: var(--bfc-shadow-md) !important;
}

/* ── "Client Success Stories": title, subtitle, three video cards ── */
body.bfi-customers .bfi-cust-sub {
	max-width: 640px;
	margin: 0 auto !important;
	color: var(--bfc-muted);
	font-size: 17px;
	line-height: 1.7;
	text-align: center;
}
/* Video section: the green of the closing CTA card ("Build your next food-export prospect list") behind
   the title and the video row only (the written testimonials below sit in the same WPBakery section).
   customers-page.js measures where the video row ends (--bfc-band-h) and adds .bfc-video-band; the band is
   a layer under the content, so its dot pattern stops there. Without JS the section keeps its cream look. */
body.bfi-customers .l-section.bfc-video-band {
	background: var(--bfc-cream) !important;
}
body.bfi-customers .l-section.bfc-video-band::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 0;
	height: var(--bfc-band-h);
	background:
		radial-gradient(ellipse 55% 60% at 50% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%),
		radial-gradient(circle, rgba(255, 255, 255, .09) 1px, transparent 1.3px) 0 0 / 22px 22px,
		linear-gradient(180deg, #2f6e4c 0%, #2a6445 100%);
	pointer-events: none;
}
body.bfi-customers .l-section.bfc-video-band > .l-section-h {
	position: relative;
	z-index: 1;
}
/* Light text on green, as in the CTA card */
body.bfi-customers .bfc-video-band h2,
body.bfi-customers .bfc-video-band h2 span {
	color: #fff !important;
}
body.bfi-customers .bfc-video-band .bfi-cust-sub {
	color: #d9e6dc;
}
body.bfi-customers .bfc-video-band .wpb_wrapper:has(> [class*="watch-review-"]) {
	border-color: rgba(255, 255, 255, .14) !important;
	box-shadow: 0 18px 40px rgba(10, 30, 20, .25), 0 4px 10px rgba(10, 30, 20, .12) !important;
}
body.bfi-customers .bfc-video-band .wpb_wrapper:has(> [class*="watch-review-"]:hover) {
	box-shadow: 0 26px 56px rgba(10, 30, 20, .32), 0 6px 14px rgba(10, 30, 20, .14) !important;
}
/* Room between the band's lower edge and the written testimonials */
body.bfi-customers .bfc-video-band .clients-grid {
	margin-top: 56px;
}

/* Video testimonials: each column is one card — video still on top (play button, "Watch video" label), name under it */
body.bfi-customers .wpb_wrapper:has(> [class*="watch-review-"]) {
	height: 100%;
	background: #fff;
	border: 1px solid var(--bfc-line);
	border-radius: 22px;
	overflow: hidden;
	box-shadow: var(--bfc-shadow-sm);
	transition: transform .3s var(--bfc-ease), box-shadow .3s var(--bfc-ease), border-color .3s var(--bfc-ease);
}
body.bfi-customers .wpb_wrapper:has(> [class*="watch-review-"]:hover) {
	transform: translateY(-4px);
	border-color: var(--bfc-line-strong);
	box-shadow: var(--bfc-shadow-lg);
}
body.bfi-customers [class*="watch-review-"] {
	position: relative;
	margin: 0 !important;
	cursor: pointer;
	border-radius: 0 !important;
}
/* The theme's empty ::after on these images (inline, padded) left a blank line under the photo */
body.bfi-customers [class*="watch-review-"]::after {
	display: none !important;
}
body.bfi-customers [class*="watch-review-"] .w-image-h {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: 0 !important;
	isolation: isolate;
}
body.bfi-customers [class*="watch-review-"] img {
	display: block;
	width: 100% !important;
	max-width: none !important;
	aspect-ratio: 16 / 10;
	height: auto;
	object-fit: cover;
	border-radius: 0 !important;
}
/* Soft shade so the white play button and label read on any photo */
body.bfi-customers [class*="watch-review-"] .w-image-h::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(circle at 50% 50%, rgba(16, 40, 44, .28) 0, rgba(16, 40, 44, 0) 34%),
		linear-gradient(180deg, rgba(16, 40, 44, .30) 0%, rgba(16, 40, 44, 0) 32%, rgba(16, 40, 44, 0) 68%, rgba(16, 40, 44, .22) 100%);
	transition: opacity .3s var(--bfc-ease);
	pointer-events: none;
}
/* Play button: the same as the category page hero (.bfi-cpv__play in category-hero-preview.css) —
   yellow disc, white border, soft white ring, dark rounded arrow; brighter yellow + wider ring on hover */
body.bfi-customers [class*="watch-review-"] .w-image-h::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	box-sizing: border-box;
	width: 54px;
	height: 54px;
	border: 4px solid #fff;
	border-radius: 50%;
	background: #F8C83E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7Z' fill='%232B4448' stroke='%232B4448' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50% / 20px 20px no-repeat;
	box-shadow: 0 8px 24px rgba(160, 115, 0, .25), 0 0 0 8px rgba(255, 255, 255, .45);
	transform: translate(-50%, -50%);
	transition: background-color .25s, box-shadow .25s, transform .25s;
	pointer-events: none;
}
body.bfi-customers [class*="watch-review-"]:hover .w-image-h::after {
	background-color: #FFBC0A;
	box-shadow: 0 10px 28px rgba(160, 115, 0, .32), 0 0 0 12px rgba(255, 255, 255, .6);
	transform: translate(-50%, -50%) scale(1.05);
}
/* "Watch video" label (text set per language by class-customers-page.php) */
body.bfi-customers [class*="watch-review-"]::before {
	content: var(--bfc-watch, "Watch video");
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 28px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7Z' fill='%232B4448' stroke='%232B4448' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 11px 50% / 12px 12px no-repeat;
	box-shadow: 0 2px 8px rgba(16, 40, 44, .14);
	color: var(--bfc-ink);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1.2;
	pointer-events: none;
}
/* Name + company inside the card */
body.bfi-customers [class*="watch-review-"] + .wpb_text_column {
	margin: 0 !important;
	padding: 18px 22px 20px;
	text-align: left;
}
body.bfi-customers [class*="watch-review-"] + .wpb_text_column p {
	margin: 0;
	color: var(--bfc-muted);
	font-size: 14px;
	line-height: 1.6;
	text-align: left !important;
}
body.bfi-customers [class*="watch-review-"] + .wpb_text_column a {
	color: var(--bfc-ink);
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
}
body.bfi-customers [class*="watch-review-"] + .wpb_text_column a:hover {
	color: var(--bfc-green);
}

/* ── Testimonial cards (grid, 3 per row) ─────────────────────────── */
body.bfi-customers .clients-grid .w-grid-list {
	align-items: stretch;
}
body.bfi-customers .clients-grid .w-grid-item {
	display: flex;
}
body.bfi-customers .clients-grid .w-grid-item-h {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background: #fff;
	border: 1px solid var(--bfc-line);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--bfc-shadow-sm);
	transition: box-shadow .25s var(--bfc-ease), transform .25s var(--bfc-ease);
}
body.bfi-customers .clients-grid .w-grid-item-h:hover {
	transform: translateY(-3px);
	box-shadow: var(--bfc-shadow-md);
}
body.bfi-customers .clients-grid .testimonial-wrapper-2 {
	display: flex !important;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 0 !important;
}
/* Photo flush with the card top, logo badge overlapping its bottom edge */
body.bfi-customers .clients-grid .testimonial-wrapper-2 > .w-vwrapper:first-child {
	position: relative;
	margin: 0 0 6px !important;
}
body.bfi-customers .clients-grid .company-image,
body.bfi-customers .clients-grid .company-image img {
	border-radius: 0 !important;
}
/* The theme caps the photo at 375 px: on wider phones (390–430 px) it stopped short of the card's right edge */
body.bfi-customers .clients-grid .company-image {
	width: 100% !important;
	max-width: none !important;
}
body.bfi-customers .clients-grid .testimonial-image-wrapper .testimonial-logo {
	border: 1px solid var(--bfc-line);
	border-radius: 14px !important;
	box-shadow: var(--bfc-shadow-md);
	background: #fff;
}
body.bfi-customers .clients-grid .post_title {
	display: block;
	margin: 0 !important;
	padding: 0 24px;
	color: var(--bfc-ink) !important;
	font-size: 19px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
}
body.bfi-customers .clients-grid .post_content {
	flex: 1 0 auto;
	margin: 10px 0 0 !important;
	padding: 0 24px 22px !important;
}
body.bfi-customers .clients-grid .post_content p {
	margin: 0;
	color: var(--bfc-slate) !important;
	font-size: 15.5px !important;
	font-weight: 400 !important;
	line-height: 1.65 !important;
}
/* Author strip pinned to the bottom, in the warm grey of the site */
body.bfi-customers .clients-grid .testimonial-author-wrapper {
	margin-top: auto !important;
	padding: 14px 24px !important;
	background: var(--bfc-warm);
	border-top: 1px solid var(--bfc-line);
}
body.bfi-customers .clients-grid .testimonial-author-wrapper .post_image img {
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	object-fit: cover;
}
body.bfi-customers .clients-grid .us_testimonial_author {
	color: var(--bfc-ink) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
}
body.bfi-customers .clients-grid .us_testimonial_role {
	color: var(--bfc-muted) !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
}

/* ── Featured quote (full-width band between the grids) ──────────── */
body.bfi-customers .l-section:has(.featured-testimonial) {
	background: var(--bfc-cream) !important;
	border-block: 1px solid var(--bfc-line);
}
body.bfi-customers .featured-testimonial .testimonial-content p {
	color: var(--bfc-ink) !important;
	font-size: 24px !important;
	font-weight: 500 !important;
	line-height: 1.55 !important;
	letter-spacing: -.01em;
	text-wrap: pretty;
}
body.bfi-customers .featured-testimonial .post_title {
	color: var(--bfc-green) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
}
body.bfi-customers .featured-testimonial .us_testimonial_role {
	color: var(--bfc-muted) !important;
	font-size: 14px !important;
}
body.bfi-customers .featured-testimonial .company-image-bg {
	background-position: center !important;
	background-size: cover !important;
}
body.bfi-customers .featured-testimonial .testimonial-logo {
	border: 1px solid var(--bfc-line);
	border-radius: 16px !important;
	box-shadow: var(--bfc-shadow-md);
}

/* Full-width rows reach a few px past the screen edge (theme gutters): clip them on this page */
body.bfi-customers .l-main {
	overflow-x: clip;
}

/* ── Tablets and phones ──────────────────────────────────────────── */
/* Below 992 px the logo wall is hidden (WPBakery setting), so the title column takes the full width */
@media (max-width: 991px) {
	body.bfi-customers .l-section:has(.clients-logos-container) .g-cols > .wpb_column:first-child {
		width: 100% !important;
		max-width: 640px;
		flex-basis: 100% !important;
	}
	/* Featured quote: photo on top, quote under it (side by side left the quote in a narrow column) */
	body.bfi-customers .featured-testimonial .w-grid-item-h > .w-hwrapper {
		flex-direction: column !important;
	}
	body.bfi-customers .featured-testimonial .w-grid-item-h > .w-hwrapper > * {
		width: 100% !important;
		max-width: none !important;
	}
	body.bfi-customers .featured-testimonial .company-image-bg {
		min-height: 300px;
	}
}
@media (max-width: 1024px) {
	body.bfi-customers .l-main > .l-section.height_large:not(:has(.clients-logos-container)) {
		padding-top: 64px !important;
		padding-bottom: 64px !important;
	}
	body.bfi-customers .featured-testimonial .testimonial-content p {
		font-size: 21px !important;
	}
}
@media (max-width: 767px) {
	body.bfi-customers .l-main > .l-section.height_large:not(:has(.clients-logos-container)) {
		padding-top: 48px !important;
		padding-bottom: 48px !important;
	}
	body.bfi-customers .l-main > .l-section.height_medium {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}
	body.bfi-customers .bfi-cust-lead,
	body.bfi-customers .bfi-cust-sub {
		font-size: 16px;
	}
	body.bfi-customers .clients-grid .post_title,
	body.bfi-customers .clients-grid .post_content {
		padding-left: 20px;
		padding-right: 20px;
	}
	body.bfi-customers .clients-grid .testimonial-author-wrapper {
		padding: 12px 20px !important;
	}
	body.bfi-customers .featured-testimonial .testimonial-content p {
		font-size: 18px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.bfi-customers * {
		transition: none !important;
	}
}