/**
 * Future Flow — Case Studies Grid
 * Styles are a 1:1 port of the source HTML, scoped under .ffcs and prefixed
 * so nothing leaks into (or is overridden by) the active theme.
 */

.ffcs,
.ffcs *,
.ffcs *::before,
.ffcs *::after {
	box-sizing: border-box;
}

.ffcs {
	/* Palette — overridable from the Elementor Style tab */
	--ffcs-g1: #9CC17E;
	--ffcs-g2: #69A95F;
	--ffcs-g3: #263F2F;
	--ffcs-black: #000;
	--ffcs-light-bg: #fff;
	--ffcs-light-surface: #F7F7F7;
	--ffcs-light-border: #E4E4E4;
	--ffcs-light-muted: rgba(0, 0, 0, .45);
	--ffcs-font-h: 'IBM Plex Sans', sans-serif;
	--ffcs-font-b: 'Nunito Sans', sans-serif;

	--ffcs-cols: 3;
	--ffcs-gap: 20px;
	--ffcs-img-h: 190px;
	--ffcs-card-radius: 12px;

	background: var(--ffcs-light-bg);
	padding: 64px 0 88px;
	font-family: var(--ffcs-font-b);
	position: relative;
}

.ffcs__container {
	max-width: unset;
	margin: 0 !important;
	padding: 0 !important;
}

.ffcs--no-container .ffcs__container {
	max-width: none;
	padding: 0 !important;
}

/* ── Reveal ───────────────────────────────────────────── */
.ffcs .ffcs-r {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .5s cubic-bezier(.4, 0, .2, 1), transform .5s cubic-bezier(.4, 0, .2, 1);
}

.ffcs .ffcs-r.ffcs-v {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ffcs .ffcs-r {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ── Head ─────────────────────────────────────────────── */
.ffcs__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 36px;
	gap: 16px;
	flex-wrap: wrap;
}

.ffcs__head-title {
	font-family: var(--ffcs-font-h);
	font-size: 26px;
	font-weight: 700;
	color: var(--ffcs-black);
	letter-spacing: -.015em;
	margin: 0;
}

.ffcs__head-count {
	font-size: 13px;
	color: var(--ffcs-light-muted);
}

/* ── Filter bar ───────────────────────────────────────── */
.ffcs__filter-bar {
	background: var(--ffcs-light-surface);
	border: 1px solid var(--ffcs-light-border);
	border-radius: 12px;
	padding: 18px 20px;
	margin-bottom: 28px;
}

.ffcs__filter-inner {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.ffcs__search-wrap {
	position: relative;
	flex: 1;
	min-width: 220px;
}

.ffcs__search-wrap svg {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(0, 0, 0, .3);
	pointer-events: none;
}

.ffcs__search {
	width: 100% !important;
    background: #fff;
    border: 1px solid var(--ffcs-light-border) !important;
    border-radius: 8px !important;
    padding: 10px 14px 10px 40px !important;
    font-size: 13.5px;
    color: var(--ffcs-black);
    font-family: var(--ffcs-font-b);
    outline: none;
    transition: border-color .18s !important;
    box-shadow: none;
    margin: 0;
    height: auto;
    line-height: normal;
}

.ffcs__search::placeholder {
	color: rgba(0, 0, 0, .28);
}

.ffcs__search:focus {
	border-color: var(--ffcs-g2);
	box-shadow: none;
	outline: none;
}

.ffcs__pills {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.ffcs__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1px solid var(--ffcs-light-border);
	border-radius: 6px;
	padding: 8px 14px;
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(0, 0, 0, .55);
	cursor: pointer;
	transition: all .18s;
	font-family: var(--ffcs-font-b);
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
}

.ffcs__pill:hover,
.ffcs__pill:focus-visible {
	border-color: rgba(105, 169, 95, .5);
	color: var(--ffcs-black);
	background: rgba(105, 169, 95, .06);
}

.ffcs__pill.is-active {
	background: var(--ffcs-g3);
	border-color: var(--ffcs-g3);
	color: #fff;
}

.ffcs__pill-count {
	background: rgba(0, 0, 0, .06);
	border-radius: 3px;
	padding: 1px 6px;
	font-size: 10px;
	color: rgba(0, 0, 0, .4);
}

.ffcs__pill.is-active .ffcs__pill-count {
	background: rgba(255, 255, 255, .18);
	color: rgba(255, 255, 255, .85);
}

.ffcs__results {
	margin-left: auto;
	font-size: 12px;
	color: var(--ffcs-light-muted);
	white-space: nowrap;
}

/* ── Grid ─────────────────────────────────────────────── */
.ffcs__grid {
	display: grid;
	grid-template-columns: repeat(var(--ffcs-cols), minmax(0, 1fr));
	gap: var(--ffcs-gap);
}

/* ── Card ─────────────────────────────────────────────── */
.ffcs__card {
	background: #fff;
	border: 1px solid var(--ffcs-light-border);
	border-radius: var(--ffcs-card-radius);
	overflow: hidden;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	transition: border-color .22s, transform .22s;
	cursor: pointer;
	color: inherit;
	position: relative;
}

.ffcs__card:hover {
	border-color: rgba(105, 169, 95, .45);
	transform: translateY(-4px);
}

.ffcs__card.ffcs-r:hover {
	transform: translateY(-4px);
}

/* Whole-card link overlay (keeps markup semantics without nesting links) */
.ffcs__card-link {
	position: absolute;
	inset: 0;
	z-index: 2;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
}

.ffcs__card-img,
.ffcs__card-img-ph {
	width: 100%;
	height: var(--ffcs-img-h) !important;
	display: block;
	object-fit: cover !important;
	background: linear-gradient(135deg, #0d1f14, #1a3828);
	margin: 0;
	border-radius: 0 !important;
}

.ffcs__card-img-ph {
	background: linear-gradient(135deg, #0d1f14 0%, #1a3828 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ffcs__card-img-ph svg {
	color: rgba(105, 169, 95, .2);
}

.ffcs__card-body {
	padding: 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.ffcs__card-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: rgba(105, 169, 95, .1);
	border: 1px solid rgba(105, 169, 95, .28);
	border-radius: 4px;
	padding: 3px 8px;
	font-size: 10px;
	font-weight: 700;
	color: var(--ffcs-g3);
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: 10px;
	width: fit-content;
}

.ffcs__card-title {
	font-family: var(--ffcs-font-h);
	font-size: 16px;
	font-weight: 700;
	color: var(--ffcs-black);
	margin: 0 0 8px;
	line-height: 1.25;
	letter-spacing: -.01em;
}

.ffcs__card-title a {
	color: inherit;
	text-decoration: none;
}

.ffcs__card-excerpt {
	font-size: 12.5px;
	color: var(--ffcs-light-muted);
	line-height: 1.65;
	margin-bottom: 14px;
	flex: 1;
}

.ffcs__card-excerpt p {
	margin: 0 0 .6em;
}

.ffcs__card-excerpt p:last-child {
	margin-bottom: 0;
}

.ffcs__card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 14px;
	border-top: 1px solid var(--ffcs-light-border);
	gap: 10px;
}

.ffcs__card-meta--no-border {
	border-top: none;
}

.ffcs__card-location {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11.5px;
	color: var(--ffcs-light-muted);
	min-width: 0;
}

.ffcs__card-location svg {
	color: var(--ffcs-g2);
	flex-shrink: 0;
}

.ffcs__card-arrow {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: rgba(105, 169, 95, .1);
	border: 1px solid rgba(105, 169, 95, .25);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .18s, border-color .18s;
	flex-shrink: 0;
	margin-left: auto;
}

.ffcs__card:hover .ffcs__card-arrow {
	background: var(--ffcs-g2);
	border-color: var(--ffcs-g2);
}

.ffcs__card-arrow svg {
	color: var(--ffcs-g2);
	transition: color .18s;
}

.ffcs__card:hover .ffcs__card-arrow svg {
	color: #fff;
}

/* ── No results ───────────────────────────────────────── */
.ffcs__no-results {
	display: none;
	text-align: center;
	padding: 64px 20px;
	color: var(--ffcs-light-muted);
}

.ffcs__no-results.is-visible {
	display: block;
}

.ffcs__no-results svg {
	margin-bottom: 16px;
	color: rgba(0, 0, 0, .12);
}

.ffcs__no-results p {
	font-size: 15px;
	margin: 0;
}

/* Responsive column counts are printed per-instance by the widget so the
   breakpoints themselves stay configurable (defaults: 860px / 540px). */

/* Elementor editor: never hide cards behind the reveal animation */
.elementor-editor-active .ffcs .ffcs-r,
.elementor-editor-preview .ffcs .ffcs-r {
	opacity: 1;
	transform: none;
}