/* =========================================================================
   Forward Focus Foundation — design system
   Ported 1:1 from the approved Lovable (React/Tailwind) implementation.
   Every rule is namespaced with .ff- so it cannot collide with WordPress,
   Hello Elementor, Elementor, Elementor Pro or third-party plugins.
   ========================================================================= */

:root {
	--ff-rust: #b7410e;
	--ff-black: #000000;
	--ff-charcoal: #555555;
	--ff-grey: #d9d9d9;
	--ff-white: #ffffff;

	--ff-font-display: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif;
	--ff-font-editorial: 'Cormorant Garamond', Georgia, serif;
	--ff-font-body: 'Manrope', system-ui, -apple-system, sans-serif;

	--ff-radius: 1.375rem;
	--ff-radius-sm: 0.5rem;
	--ff-shadow-soft: 0 18px 45px -30px rgba(0, 0, 0, 0.30);
	--ff-shadow-lift: 0 26px 60px -32px rgba(0, 0, 0, 0.38);
	--ff-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------------------------------------------------- */

body.ff-site {
	font-family: var(--ff-font-body);
	font-weight: 400;
	line-height: 1.7;
	color: var(--ff-black);
	background: var(--ff-white);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

body.ff-site ::selection {
	background-color: rgba(183, 65, 14, 0.25);
	color: var(--ff-black);
}

html {
	scroll-behavior: smooth;
}

body.ff-site ::-webkit-scrollbar { width: 8px; }
body.ff-site ::-webkit-scrollbar-track { background: var(--ff-grey); }
body.ff-site ::-webkit-scrollbar-thumb { background: rgba(85, 85, 85, 0.4); border-radius: 4px; }
body.ff-site ::-webkit-scrollbar-thumb:hover { background: rgba(85, 85, 85, 0.7); }

body.ff-site.ff-no-scroll { overflow: hidden; }

/* ---------- Section shells ------------------------------------------ */

.ff-section > .e-con-inner,
.ff-section {
	--ff-fg: var(--ff-black);
}

.ff-section {
	padding: 3.5rem 1.5rem;
}

.ff-section--compact { padding: 2.5rem 1.5rem; }

@media (min-width: 768px) {
	.ff-section { padding: 4.5rem 4rem; }
	.ff-section--compact { padding: 3.25rem 4rem; }
}

@media (min-width: 1024px) {
	.ff-section { padding: 6rem 6rem; }
	.ff-section--compact { padding: 4.5rem 6rem; }
}

.ff-section--flush-top { padding-top: 0; }

@media (min-width: 1024px) {
	.ff-section--tight-bottom { padding-bottom: 3.5rem; }
}

.ff-bg-white { background-color: var(--ff-white); }
.ff-bg-grey { background-color: var(--ff-grey); }

/* Dark ("ink"/charcoal) sections — charcoal #555555 with white type. */
.ff-bg-charcoal {
	background-color: var(--ff-charcoal);
	color: var(--ff-white);
}

.ff-bg-charcoal .ff-display,
.ff-bg-charcoal .ff-heading,
.ff-bg-charcoal h1,
.ff-bg-charcoal h2,
.ff-bg-charcoal h3,
.ff-bg-charcoal h4,
.ff-bg-charcoal .ff-lead,
.ff-bg-charcoal .ff-body,
.ff-bg-charcoal p {
	color: var(--ff-white);
}

.ff-bg-charcoal .ff-body,
.ff-bg-charcoal .ff-list li { color: rgba(255, 255, 255, 0.82); }
.ff-bg-charcoal .ff-meta { color: rgba(255, 255, 255, 0.62); }
.ff-bg-charcoal .ff-rule,
.ff-bg-charcoal .ff-divider { border-color: rgba(255, 255, 255, 0.20); }

.ff-wrap {
	width: 100%;
	max-width: 80rem;
	margin-inline: auto;
}

/* ---------- Typography ---------------------------------------------- */

.ff-display,
.ff-site .ff-display .elementor-heading-title {
	font-family: var(--ff-font-display);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 0.98;
	color: inherit;
}

.ff-editorial,
.ff-site .ff-editorial .elementor-heading-title {
	font-family: var(--ff-font-editorial);
	font-weight: 400;
}

/* Section headline — 3.25rem / 5.375rem / 6rem */
.ff-h-xl .elementor-heading-title { font-size: 3.25rem; line-height: 1; letter-spacing: -0.02em; }
/* Slightly smaller family used by Impact / Leadership / Stories / Partners */
.ff-h-lg .elementor-heading-title { font-size: 3.25rem; line-height: 1; letter-spacing: -0.02em; }
/* Sub-section headline — 2.25 / 3 / 3.5rem */
.ff-h-md .elementor-heading-title { font-size: 2.25rem; line-height: 1.05; letter-spacing: -0.02em; }
/* Card headline */
.ff-h-sm .elementor-heading-title { font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.015em; }
.ff-h-xs .elementor-heading-title { font-size: 1.5rem; line-height: 1.15; }

@media (min-width: 768px) {
	.ff-h-xl .elementor-heading-title { font-size: 5.375rem; }
	.ff-h-lg .elementor-heading-title { font-size: 4.5rem; }
	.ff-h-md .elementor-heading-title { font-size: 3rem; }
	.ff-h-sm .elementor-heading-title { font-size: 2rem; }
	.ff-h-xs .elementor-heading-title { font-size: 1.75rem; }
}

@media (min-width: 1024px) {
	.ff-h-xl .elementor-heading-title { font-size: 6rem; }
	.ff-h-lg .elementor-heading-title { font-size: 5rem; }
	.ff-h-md .elementor-heading-title { font-size: 3.5rem; }
	.ff-h-sm .elementor-heading-title { font-size: 2.5rem; }
	.ff-h-xs .elementor-heading-title { font-size: 2rem; }
}

/* Rust highlight word inside a headline. */
.ff-accent { color: var(--ff-rust); }

/* Small uppercase section label + its 24px rust rule. */
.ff-label .elementor-heading-title,
.ff-label {
	font-family: var(--ff-font-body);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ff-rust);
}

.ff-label::after {
	content: '';
	display: block;
	width: 1.5rem;
	height: 1px;
	margin-top: 0.5rem;
	background: rgba(183, 65, 14, 0.6);
}

.ff-bg-charcoal .ff-label--white,
.ff-label--white .elementor-heading-title { color: var(--ff-white); }
.ff-label--white::after { background: rgba(255, 255, 255, 0.6); }

/* Body copy scales. */
.ff-lead p,
.ff-lead {
	font-size: 1.25rem;
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.9);
}

.ff-body p,
.ff-body {
	font-size: 1rem;
	line-height: 1.75;
	color: rgba(0, 0, 0, 0.8);
}

.ff-small p, .ff-small { font-size: 0.875rem; line-height: 1.75; }

.ff-meta {
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.55);
}

@media (min-width: 1024px) {
	.ff-lead p, .ff-lead { font-size: 1.5rem; }
	.ff-body p, .ff-body { font-size: 1.125rem; }
}

.ff-measure { max-width: 680px; }
.ff-measure-sm { max-width: 560px; }

.ff-body a,
.ff-lead a { color: var(--ff-rust); text-decoration: none; }
.ff-body a:hover { color: var(--ff-black); }

/* Rust pull quote / statement */
.ff-quote .elementor-heading-title {
	font-family: var(--ff-font-display);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

/* ---------- Illustrations ------------------------------------------- */

.ff-illustration img {
	width: 90px;
	max-width: 100px;
	max-height: 90px;
	height: auto;
	object-fit: contain;
	margin-bottom: 1rem;
}

@media (min-width: 768px) {
	.ff-illustration img { width: 120px; max-width: 140px; max-height: 120px; margin-bottom: 1.25rem; }
}

@media (min-width: 1024px) {
	.ff-illustration img { width: 160px; max-width: 180px; max-height: 150px; margin-bottom: 1.5rem; }
}

/* ---------- Media --------------------------------------------------- */

.ff-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--ff-radius-sm);
	transition: transform 1s var(--ff-ease);
}

.ff-media:hover img { transform: scale(1.04); }

.ff-media--4x5 img { aspect-ratio: 4 / 5; }
.ff-media--4x3 img { aspect-ratio: 4 / 3; }
.ff-media--16x9 img { aspect-ratio: 16 / 9; }
.ff-media--16x10 img { aspect-ratio: 16 / 10; }
.ff-media--round img { border-radius: var(--ff-radius); }

.ff-focal-basic-needs img { object-position: 62% 45%; }
.ff-focal-bft img { object-position: 52% 45%; }

@media (min-width: 1024px) {
	.ff-focal-basic-needs img { object-position: 55% 42%; }
	.ff-focal-bft img { object-position: 48% 40%; }
}

/* ---------- Buttons and links --------------------------------------- */

.ff-btn .elementor-button,
a.ff-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	border-radius: 1rem;
	background: var(--ff-rust);
	color: var(--ff-white);
	padding: 1rem 1.75rem;
	font-family: var(--ff-font-body);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.ff-btn .elementor-button:hover,
a.ff-btn:hover {
	background: var(--ff-black);
	color: var(--ff-white);
}

.ff-bg-charcoal .ff-btn .elementor-button:hover { background: var(--ff-white); color: var(--ff-black); }

/* Text link with trailing arrow */
.ff-link .elementor-button,
a.ff-link {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--ff-rust);
	font-family: var(--ff-font-body);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.3s ease;
}

.ff-link .elementor-button:hover,
a.ff-link:hover { color: var(--ff-black); background: transparent; }
.ff-bg-charcoal .ff-link .elementor-button:hover { color: var(--ff-white); }

.ff-btn .elementor-button-icon,
.ff-link .elementor-button-icon { transition: transform 0.3s ease; }
.ff-btn .elementor-button:hover .elementor-button-icon,
.ff-link .elementor-button:hover .elementor-button-icon { transform: translateX(4px); }

/* ---------- Cards ---------------------------------------------------- */

.ff-card {
	background: var(--ff-white);
	color: var(--ff-black);
	border-radius: var(--ff-radius-sm);
	padding: 2rem;
}

@media (min-width: 768px) { .ff-card { padding: 2.5rem; } }
@media (min-width: 1024px) { .ff-card { padding: 3rem; } }

.ff-card .ff-display,
.ff-card h3 { color: var(--ff-black); }
.ff-card .ff-body { color: rgba(0, 0, 0, 0.8); }

.ff-card--outline {
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: var(--ff-radius);
}

.ff-rule {
	border-top: 1px solid rgba(0, 0, 0, 0.18);
	padding-top: 2rem;
}

.ff-divider { border-top: 1px solid rgba(0, 0, 0, 0.18); }

/* Simple bordered list used by Our Work / pop-ups. */
.ff-list ul { list-style: none; margin: 0; padding: 0; }
.ff-list li {
	display: flex;
	align-items: center;
	gap: 1rem;
	border-top: 1px solid rgba(0, 0, 0, 0.18);
	padding: 1rem 0;
	font-size: 0.9375rem;
}
.ff-list li:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.18); }
.ff-list li::before {
	content: '';
	width: 1rem;
	height: 1px;
	background: rgba(183, 65, 14, 0.6);
	flex: 0 0 auto;
}
.ff-bg-charcoal .ff-list li { border-color: rgba(255, 255, 255, 0.2); }

/* ---------- Header / navigation -------------------------------------- */

/*
 * Elementor 4.x applies generated flex-container declarations after theme
 * styles.  These structural selectors deliberately outrank those declarations
 * only for header positioning and responsive visibility.  Visual values below
 * remain the approved V3 design.
 */
body.ff-site .elementor-element.ff-header,
body.ff-site .ff-header {
	position: absolute !important;
	inset: 0 0 auto 0;
	z-index: 40;
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	padding: 2rem 1.5rem;
	background: transparent;
	margin: 0 !important;
}

@media (min-width: 768px) {
	.ff-header { padding: 2.5rem 3rem; transform: translateY(5px); }
}

@media (min-width: 1024px) {
	.ff-header { padding: 3rem 5rem; transform: translateY(-23px); }
}

.ff-header__logo img { width: 145px; height: auto; }
@media (min-width: 768px) { .ff-header__logo img { width: 170px; } }
@media (min-width: 1024px) { .ff-header__logo img { width: 205px; } }

body.ff-site .ff-nav,
body.ff-site .elementor-element.ff-nav {
	display: none !important;
}

.ff-nav .elementor-nav-menu,
.ff-nav .e-n-menu,
.ff-nav ul.menu,
.ff-nav ul {
	display: flex;
	align-items: center;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 1024px) {
	body.ff-site .ff-nav,
	body.ff-site .elementor-element.ff-nav { display: block !important; }
	.ff-nav .elementor-nav-menu,
	.ff-nav .e-n-menu,
	.ff-nav ul.menu,
	.ff-nav ul { display: flex !important; flex-direction: row !important; gap: 2.25rem; }
}

.ff-nav .elementor-item,
.ff-nav .e-n-menu-item,
.ff-nav a {
	position: relative;
	display: inline-block;
	padding: 0.25rem 0;
	font-family: var(--ff-font-body);
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.02em;
	color: var(--ff-white);
	text-decoration: none;
	transition: color 0.3s ease;
}

.ff-nav .elementor-item:hover,
.ff-nav .elementor-item.elementor-item-active,
.ff-nav .e-n-menu-item:hover,
.ff-nav a:hover,
.ff-nav .ff-is-active a { color: var(--ff-rust); }

.ff-nav .ff-is-active a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: var(--ff-rust);
}

/* Compact sticky header, revealed once the hero is fully scrolled past. */
body.ff-site .elementor-element.ff-header--sticky,
body.ff-site .ff-header--sticky {
	position: fixed !important;
	inset: 0 0 auto 0;
	z-index: 50;
	height: 58px;
	padding: 0 1.5rem;
	transform: translateY(-100%);
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	background: rgba(0, 0, 0, 0.82);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

@media (min-width: 768px) { .ff-header--sticky { height: 64px; padding: 0 2.5rem; } }
@media (min-width: 1024px) { .ff-header--sticky { height: 68px; padding: 0 3.5rem; transform: translateY(-100%); } }

body.ff-site .elementor-element.ff-header--sticky.ff-is-visible,
body.ff-site .ff-header--sticky.ff-is-visible {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0);
	pointer-events: auto !important;
}

.ff-header--sticky .ff-header__logo img { width: 125px; }
@media (min-width: 768px) { .ff-header--sticky .ff-header__logo img { width: 135px; } }
@media (min-width: 1024px) { .ff-header--sticky .ff-header__logo img { width: 150px; } }
.ff-header--sticky .ff-nav a { font-size: 14px; }

/* Hamburger */
body.ff-site .ff-burger,
body.ff-site .elementor-element.ff-burger {
	display: flex !important;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 5px;
	width: 2rem;
	height: 2rem;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}

.ff-burger .elementor-icon-wrapper,
.ff-burger a { display: flex; color: var(--ff-white); font-size: 1.5rem; }
.ff-burger .elementor-icon { color: inherit; }

@media (min-width: 1024px) {
	body.ff-site .ff-burger,
	body.ff-site .elementor-element.ff-burger { display: none !important; }
}

/* Full-screen mobile / tablet menu */
body.ff-site .ff-mobile-menu-host,
body.ff-site .elementor-element.ff-mobile-menu-host {
	position: absolute !important;
	inset: 0 auto auto 0;
	width: 0 !important;
	height: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
}

body.ff-site .ff-mobile-menu,
body.ff-site .elementor-element.ff-mobile-menu {
	position: fixed !important;
	inset: 0;
	z-index: 100;
	display: flex !important;
	width: 100vw !important;
	height: 100vh !important;
	height: 100dvh !important;
	background: var(--ff-black);
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

body.ff-site .ff-mobile-menu.ff-is-open,
body.ff-site .elementor-element.ff-mobile-menu.ff-is-open {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transition-delay: 0s;
}

@media (min-width: 1024px) {
	body.ff-site .ff-mobile-menu,
	body.ff-site .elementor-element.ff-mobile-menu,
	body.ff-site .ff-mobile-menu.ff-is-open,
	body.ff-site .elementor-element.ff-mobile-menu.ff-is-open { display: none !important; }
}

.ff-mobile-menu__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2rem 1.5rem;
}

@media (min-width: 768px) { .ff-mobile-menu__bar { padding: 2rem 2.5rem; } }

.ff-mobile-menu__logo img,
.ff-mobile-menu__bar img { width: 145px; height: auto; }
@media (min-width: 768px) { .ff-mobile-menu__bar img { width: 170px; } }

.ff-mobile-menu__close,
.ff-mobile-menu__close .elementor-icon {
	position: relative;
	width: 2rem;
	height: 2rem;
	background: none;
	border: 0;
	cursor: pointer;
}

.ff-mobile-menu__close .elementor-icon { display: flex; align-items: center; justify-content: center; color: var(--ff-white); font-size: 1.5rem; }

.ff-mobile-menu__close::before,
.ff-mobile-menu__close::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.5rem;
	height: 1px;
	background: var(--ff-white);
}

.ff-mobile-menu__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.ff-mobile-menu__close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.ff-mobile-menu .elementor-nav-menu,
.ff-mobile-menu .e-n-menu,
.ff-mobile-menu ul.menu,
.ff-mobile-menu nav ul {
	display: flex !important;
	flex-direction: column !important;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 1.5rem 1.5rem 0;
}

@media (min-width: 768px) { .ff-mobile-menu nav ul { padding-inline: 2.5rem; } }

.ff-mobile-menu .elementor-item,
.ff-mobile-menu .e-n-menu-item,
.ff-mobile-menu nav a {
	font-family: var(--ff-font-body);
	font-weight: 500;
	font-size: 21px;
	letter-spacing: 0.01em;
	color: var(--ff-white);
	text-decoration: none;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

.ff-mobile-menu.ff-is-open .elementor-item,
.ff-mobile-menu.ff-is-open .e-n-menu-item,
.ff-mobile-menu.ff-is-open nav a { opacity: 1; transform: translateY(0); }
.ff-mobile-menu nav a:hover { color: var(--ff-rust); }

/* ---------- Hero ------------------------------------------------------ */

.ff-hero {
	position: relative;
	height: 100vh;
	width: 100%;
	overflow: hidden;
	background: var(--ff-charcoal);
}

.ff-hero__media,
.ff-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ff-hero__media img {
	object-fit: cover;
	object-position: 78% center;
	will-change: transform;
}

@media (min-width: 768px) { .ff-hero__media img { object-position: 68% center; } }
@media (min-width: 1024px) { .ff-hero__media img { object-position: 62% center; } }

/* Lighter grey scrim: strongest left, transparent right (matches approved values). */
.ff-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(85, 85, 85, 0.74) 0%,
		rgba(85, 85, 85, 0.44) 50%,
		rgba(85, 85, 85, 0.10) 100%
	);
}

.ff-hero__scrim--mobile {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		0deg,
		rgba(85, 85, 85, 0.68) 0%,
		rgba(85, 85, 85, 0.28) 50%,
		rgba(85, 85, 85, 0) 100%
	);
}

@media (min-width: 768px) { .ff-hero__scrim--mobile { display: none; } }

.ff-hero__content {
	position: relative;
	z-index: 10;
	height: 100%;
	display: flex;
	align-items: flex-end;
	padding: 0 1.5rem 14vh;
}

@media (min-width: 768px) {
	.ff-hero__content { align-items: stretch; padding: 0 3rem; }
}

@media (min-width: 1024px) { .ff-hero__content { padding-inline: 4rem; } }

.ff-hero__inner {
	width: 100%;
	max-width: calc(100% - 1.5rem);
	margin-top: 1.25rem;
}

@media (min-width: 768px) {
	.ff-hero__inner {
		max-width: 560px;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		padding-top: 20vh;
		padding-bottom: 10vh;
		margin-top: 0;
	}
}

@media (min-width: 1024px) { .ff-hero__inner { max-width: 720px; padding-top: 19vh; } }

.ff-hero__title .elementor-heading-title {
	font-family: var(--ff-font-display);
	font-weight: 400;
	font-size: 3.75rem;
	line-height: 0.96;
	letter-spacing: -0.02em;
	color: var(--ff-white);
	max-width: 340px;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

@media (min-width: 768px) {
	.ff-hero__title .elementor-heading-title { font-size: 5.375rem; max-width: none; }
}

@media (min-width: 1024px) {
	.ff-hero__title .elementor-heading-title { font-size: 6rem; line-height: 0.93; }
}

.ff-hero__lower { margin-top: auto; }

.ff-hero__text p,
.ff-hero__text {
	margin-top: 1.25rem;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
	max-width: 330px;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

@media (min-width: 768px) { .ff-hero__text, .ff-hero__text p { font-size: 16px; max-width: 440px; margin-top: 1.5rem; } }
@media (min-width: 1024px) { .ff-hero__text, .ff-hero__text p { font-size: 17px; max-width: 540px; margin-top: 2rem; } }

.ff-hero__cta { margin-top: 1.5rem; }
@media (min-width: 1024px) { .ff-hero__cta { margin-top: 2rem; } }

/* ---------- Leadership ------------------------------------------------ */

.ff-profile {
	background: var(--ff-white);
	color: var(--ff-black);
	border-radius: var(--ff-radius-sm);
	padding: 1.5rem;
}

@media (min-width: 768px) { .ff-profile { padding: 2rem; } }
@media (min-width: 1024px) { .ff-profile { padding: 2.5rem; } }

.ff-profile .ff-display,
.ff-profile h3,
.ff-profile p { color: var(--ff-black); }

.ff-profile__portrait img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--ff-radius-sm);
}

.ff-profile__logo img {
	width: 180px;
	height: auto;
	object-fit: contain;
	filter: brightness(0);
	margin-bottom: 1rem;
}

@media (min-width: 768px) { .ff-profile__logo img { width: 240px; } }
@media (min-width: 1024px) { .ff-profile__logo img { width: 280px; } }

.ff-profile__role {
	font-size: 0.875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ff-rust);
}

.ff-profile__linkedin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: var(--ff-black);
	transform: translateX(-10px);
	transition: color 0.3s ease;
}

.ff-profile__linkedin:hover { color: var(--ff-rust); }

/* ---------- Impact ---------------------------------------------------- */

.ff-impact-feature {
	background: var(--ff-grey);
	border-radius: var(--ff-radius-sm);
	padding: 2rem;
}

@media (min-width: 768px) { .ff-impact-feature { padding: 3rem; } }
@media (min-width: 1024px) { .ff-impact-feature { padding: 4rem; } }

.ff-stat .elementor-heading-title {
	font-family: var(--ff-font-display);
	font-size: 4rem;
	line-height: 1;
	color: var(--ff-rust);
}

@media (min-width: 768px) { .ff-stat .elementor-heading-title { font-size: 5rem; } }
@media (min-width: 1024px) { .ff-stat .elementor-heading-title { font-size: 6rem; } }

.ff-stat-label {
	font-size: 0.875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.6);
}

/* ---------- Funding & partnership arrow ------------------------------ */

.ff-arrow-link {
	display: flex;
	align-items: center;
	gap: 1rem;
	color: var(--ff-rust);
}

.ff-arrow-link::before,
.ff-arrow-link::after {
	content: '';
	width: 2rem;
	height: 1px;
	background: var(--ff-rust);
}

/* ---------- Pop-up experiences (Basic Needs / Building Forward Tools) - */

.ff-popup .dialog-message,
.ff-popup .dialog-widget-content {
	background: var(--ff-white);
	max-height: 100vh;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ff-popup-header {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

@media (min-width: 1024px) { .ff-popup-header { padding: 1rem 4rem; } }

.ff-popup-header__title {
	font-size: 0.875rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ff-black);
}

.ff-popup-section { padding: 3rem 1.25rem; }
@media (min-width: 768px) { .ff-popup-section { padding: 3.5rem 2.5rem; } }
@media (min-width: 1024px) { .ff-popup-section { padding: 5rem 4rem; } }

.ff-popup-section--grey { background: var(--ff-grey); }

/* Five nutrition categories — stacked pyramid, widest at the bottom. */
.ff-pyramid {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 1rem;
}

.ff-pyramid__row {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	width: 100%;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: var(--ff-radius);
	background: var(--ff-white);
	padding: 1.25rem;
	transition: border-color 0.5s ease;
}

.ff-pyramid__row:hover { border-color: rgba(183, 65, 14, 0.4); }

@media (min-width: 768px) {
	.ff-pyramid__row { padding: 1.75rem 2rem; gap: 1.5rem; }
	.ff-pyramid__row:nth-child(1) { width: 100%; }
	.ff-pyramid__row:nth-child(2) { width: 92%; }
	.ff-pyramid__row:nth-child(3) { width: 84%; }
	.ff-pyramid__row:nth-child(4) { width: 76%; }
	.ff-pyramid__row:nth-child(5) { width: 68%; }
}

.ff-pyramid__num {
	font-family: var(--ff-font-display);
	font-size: 1.5rem;
	color: var(--ff-rust);
	line-height: 1;
	flex: 0 0 auto;
	padding-top: 0.25rem;
}

@media (min-width: 768px) { .ff-pyramid__num { font-size: 2.25rem; } }

.ff-pyramid__body h3 {
	font-family: var(--ff-font-display);
	font-size: 1.25rem;
	line-height: 1.2;
	color: var(--ff-black);
}

@media (min-width: 768px) { .ff-pyramid__body h3 { font-size: 1.75rem; } }

.ff-pyramid__body p { font-size: 0.9375rem; line-height: 1.75; color: var(--ff-charcoal); margin-top: 0.5rem; }

.ff-pyramid__icon { width: 56px; height: 56px; object-fit: contain; flex: 0 0 auto; display: none; }
@media (min-width: 640px) { .ff-pyramid__icon { display: block; } }

/* Ten legal modules — selectable toolkit (desktop) / accordion (mobile). */
.ff-modules { display: grid; gap: 2rem; }

@media (min-width: 768px) {
	.ff-modules { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
	.ff-modules__list { grid-column: span 6; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(0, 0, 0, 0.12); border-radius: var(--ff-radius); overflow: hidden; }
	.ff-modules__detail { grid-column: span 6; position: sticky; top: 6rem; }
}

.ff-module-btn {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	text-align: left;
	background: var(--ff-white);
	border: 0;
	padding: 1.25rem;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.ff-module-btn:hover { background: var(--ff-grey); }
.ff-module-btn.ff-is-active { background: var(--ff-rust); color: var(--ff-white); }
.ff-module-btn__num { font-size: 0.75rem; letter-spacing: 0.18em; color: var(--ff-rust); }
.ff-module-btn.ff-is-active .ff-module-btn__num { color: rgba(255, 255, 255, 0.8); }
.ff-module-btn__name { font-family: var(--ff-font-display); font-size: 1.0625rem; line-height: 1.2; }

.ff-modules__detail {
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: var(--ff-radius);
	background: var(--ff-white);
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

@media (min-width: 1024px) { .ff-modules__detail { padding: 2.5rem; } }

.ff-modules__detail img { width: 64px; height: 64px; object-fit: contain; }
.ff-modules__detail h3 { font-family: var(--ff-font-display); font-size: 1.75rem; line-height: 1.1; }

/* Mobile accordion */
.ff-modules__accordion { display: flex; flex-direction: column; gap: 1px; background: rgba(0, 0, 0, 0.12); border-radius: var(--ff-radius); overflow: hidden; }
@media (min-width: 768px) { .ff-modules__accordion { display: none; } }
.ff-modules__accordion > div { background: var(--ff-white); }
.ff-module-toggle { width: 100%; display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: none; border: 0; text-align: left; min-height: 56px; cursor: pointer; }
.ff-module-toggle .ff-module-btn__name { flex: 1; font-size: 1.125rem; }
.ff-module-toggle .ff-plus { color: var(--ff-rust); transition: transform 0.3s ease; }
.ff-module-toggle[aria-expanded="true"] .ff-plus { transform: rotate(45deg); }
.ff-module-panel { display: none; gap: 1rem; padding: 0 1.25rem 1.5rem; }
.ff-module-panel.ff-is-open { display: flex; }
.ff-module-panel img { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; }

/* Progression list */
.ff-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ff-steps li { position: relative; padding-left: 2.5rem; padding-bottom: 2rem; border-left: 1px solid rgba(0, 0, 0, 0.15); }
.ff-steps li:last-child { padding-bottom: 0; border-left-color: transparent; }
.ff-steps li .ff-step-num {
	position: absolute; left: 0; top: 0; transform: translateX(-50%);
	display: flex; align-items: center; justify-content: center;
	width: 1.75rem; height: 1.75rem; border-radius: 999px;
	background: var(--ff-rust); color: var(--ff-white); font-size: 0.7rem;
}
.ff-steps h3 { font-family: var(--ff-font-display); font-size: 1.25rem; line-height: 1.2; }
@media (min-width: 768px) { .ff-steps li { padding-left: 3.5rem; } .ff-steps h3 { font-size: 1.5rem; } }

.ff-blockquote {
	border-left: 2px solid var(--ff-rust);
	padding-left: 1.5rem;
	font-family: var(--ff-font-display);
	font-size: 1.25rem;
	line-height: 1.35;
	max-width: 760px;
}

@media (min-width: 768px) { .ff-blockquote { padding-left: 2rem; font-size: 1.75rem; } }

/* ---------- Back to top ------------------------------------------------ */

.ff-back-to-top {
	position: fixed;
	left: 1.5rem;
	bottom: 1.5rem;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 999px;
	background: var(--ff-white);
	border: 1px solid rgba(0, 0, 0, 0.12);
	box-shadow: var(--ff-shadow-soft);
	color: var(--ff-black);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease, color 0.3s ease;
	cursor: pointer;
}

.ff-back-to-top .elementor-icon-wrapper,
.ff-back-to-top a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: inherit;
}

.ff-back-to-top.ff-is-visible { opacity: 1; pointer-events: auto; }
.ff-back-to-top:hover { color: var(--ff-rust); }

/* ---------- Footer ---------------------------------------------------- */

.ff-footer {
	border-top: 1px solid rgba(0, 0, 0, 0.18);
	padding-top: 2rem;
	margin-top: 6rem;
}

.ff-footer__row {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

@media (min-width: 768px) {
	.ff-footer__row { flex-direction: row; align-items: center; justify-content: space-between; }
}

.ff-footer a,
.ff-footer p { font-size: 0.75rem; color: var(--ff-charcoal); text-decoration: none; }
.ff-footer a:hover { color: var(--ff-rust); }

/* ---------- Scroll reveal (replaces Framer Motion fade-in-up) --------- */

.ff-reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.ff-reveal.ff-is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.ff-reveal { opacity: 1; transform: none; transition: none; }
	html { scroll-behavior: auto; }
}

/* ---------- Elementor editor safety ----------------------------------- */

/* Inside the editor, never hide content behind reveal animations. */
body.elementor-editor-active .ff-reveal,
body.elementor-editor-preview .ff-reveal { opacity: 1; transform: none; }
body.elementor-editor-active .ff-mobile-menu,
body.elementor-editor-preview .ff-mobile-menu { display: none !important; }

/* ---------- Layout grids (mirrors the approved Tailwind grids) -------- */

.ff-grid-2,
.ff-grid-3,
.ff-grid-4,
.ff-grid-8-4,
.ff-grid-4-8,
.ff-grid-7-5 {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 2rem;
	width: 100%;
}

.ff-grid-2 > .e-con-inner,
.ff-grid-3 > .e-con-inner { display: contents; }

@media (min-width: 768px) {
	.ff-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
	.ff-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ff-partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.ff-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
	.ff-grid-3 { gap: 2rem; }
	.ff-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ff-grid-8-4 { grid-template-columns: 2fr 1fr; gap: 3rem; }
	.ff-grid-4-8 { grid-template-columns: 1fr 2fr; gap: 4rem; }
	.ff-grid-7-5 { grid-template-columns: 7fr 5fr; gap: 3.5rem; }
	.ff-grid-2--center { align-items: center; }
	.ff-grid-2--end { align-items: end; }
}

.ff-col { display: flex; flex-direction: column; gap: 1.25rem; }
.ff-wrap > .e-con-inner { max-width: 80rem; margin-inline: auto; }
.ff-wrap-narrow { width: 100%; max-width: 64rem; margin-inline: auto; }
.ff-center { text-align: center; align-items: center; }
.ff-align-end { align-items: flex-start; }
@media (min-width: 1024px) { .ff-align-end { align-items: flex-end; justify-content: flex-end; } }

.ff-stat-block { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 1024px) { .ff-stat-block { text-align: right; } }

.ff-icon img { width: 48px; height: 48px; object-fit: contain; }
.ff-media--contain img { object-fit: contain; height: auto; }

.ff-list--inline .elementor-icon-list-items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem 1.5rem;
}

@media (min-width: 1024px) { .ff-list--inline .elementor-icon-list-items { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---------- Journal (Forward Stories) cards --------------------------- */

.ff-journal-grid .elementor-post {
	border-top: 1px solid rgba(0, 0, 0, 0.18);
	padding-top: 2rem;
}

.ff-journal-grid .elementor-post__thumbnail { border-radius: var(--ff-radius-sm); overflow: hidden; }
.ff-journal-grid .elementor-post__thumbnail img { transition: transform 1s var(--ff-ease); }
.ff-journal-grid .elementor-post:hover .elementor-post__thumbnail img { transform: scale(1.04); }

.ff-journal-grid .elementor-post__title,
.ff-journal-grid .elementor-post__title a {
	font-family: var(--ff-font-display);
	font-size: 1.625rem;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--ff-black);
}

@media (min-width: 768px) { .ff-journal-grid .elementor-post__title { font-size: 2rem; } }

.ff-journal-grid .elementor-post__meta-data { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(0, 0, 0, 0.55); }
.ff-journal-grid .elementor-post__excerpt p { font-size: 1rem; line-height: 1.75; color: rgba(0, 0, 0, 0.8); }
.ff-journal-grid .elementor-post__read-more {
	font-size: 0.875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ff-rust);
}

.ff-article { width: 100%; max-width: 700px; margin-inline: auto; display: flex; flex-direction: column; gap: 1.5rem; }
.ff-article__body p { font-size: 1.0625rem; line-height: 1.8; color: rgba(0, 0, 0, 0.8); }
@media (min-width: 1024px) { .ff-article__body p { font-size: 1.125rem; } }

/* ---------- Module tiles built from Elementor containers -------------- */

.ff-modules__list {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 1px;
	background: rgba(0, 0, 0, 0.12);
	border-radius: var(--ff-radius);
	overflow: hidden;
}

@media (min-width: 768px) { .ff-modules__list { grid-template-columns: 1fr 1fr; } }

.ff-module {
	background: var(--ff-white);
	padding: 1.25rem;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.ff-module:hover { background: var(--ff-grey); }
.ff-module.ff-is-active { background: var(--ff-rust); }
.ff-module.ff-is-active .elementor-heading-title,
.ff-module.ff-is-active p { color: var(--ff-white); }
.ff-module__num .elementor-heading-title { font-size: 0.75rem; letter-spacing: 0.18em; color: var(--ff-rust); }
.ff-module.ff-is-active .ff-module__num .elementor-heading-title { color: rgba(255, 255, 255, 0.8); }
.ff-module__name .elementor-heading-title { font-family: var(--ff-font-display); font-size: 1.0625rem; line-height: 1.2; color: var(--ff-black); }

/* On desktop the copy lives in the sticky detail panel; on mobile it sits
   inside the tile so the section reads as an expandable list. */
@media (min-width: 768px) {
	.ff-module__copy,
	.ff-module__icon { display: none; }
}

@media (max-width: 767px) {
	.ff-modules__detail { display: none; }
	.ff-module__copy { display: none; }
	.ff-module.ff-is-active .ff-module__copy { display: block; }
	.ff-module__icon img { width: 40px; height: 40px; }
}

.ff-step { display: flex; gap: 1rem; position: relative; padding-bottom: 2rem; padding-left: 1rem; border-left: 1px solid rgba(0, 0, 0, 0.15); }
.ff-step:last-of-type { border-left-color: transparent; }
.ff-step-num .elementor-heading-title {
	display: flex; align-items: center; justify-content: center;
	width: 1.75rem; height: 1.75rem; border-radius: 999px;
	background: var(--ff-rust); color: var(--ff-white); font-size: 0.7rem;
}

/* ---------- Pop-up close button --------------------------------------- */

.ff-popup-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 999px;
	background: none;
	color: var(--ff-black);
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.ff-popup-close:hover { background: var(--ff-rust); color: var(--ff-white); border-color: var(--ff-rust); }
.ff-popup-close .elementor-icon-wrapper,
.ff-popup-close a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: inherit; }

body.ff-site :focus-visible {
	outline: 2px solid var(--ff-rust);
	outline-offset: 4px;
}

/* ---------- Contact form ---------------------------------------------- */

.ff-form .elementor-field-label {
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ff-black);
}

.ff-form .elementor-field-textual {
	border-radius: 1rem;
	border: 1px solid rgba(0, 0, 0, 0.25);
	background: var(--ff-white);
	padding: 1rem 1.25rem;
	font-family: var(--ff-font-body);
	font-size: 1rem;
	color: var(--ff-black);
}

.ff-form .elementor-field-textual:focus { border-color: var(--ff-rust); outline: none; }

.ff-form .elementor-button[type="submit"] {
	border-radius: 1rem;
	background: var(--ff-rust);
	color: var(--ff-white);
	padding: 1rem 1.75rem;
	font-size: 0.875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ff-form .elementor-button[type="submit"]:hover { background: var(--ff-black); }
.ff-form-col { width: 100%; }
@media (min-width: 1024px) { .ff-form-col .ff-form { max-width: 560px; margin-left: auto; } }

/* ---------- Footer links ---------------------------------------------- */

.ff-footer__nav { display: flex; flex-wrap: wrap; gap: 1rem; }
@media (min-width: 768px) { .ff-footer__nav { gap: 1.5rem; } }

.ff-footer__link .elementor-button {
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--ff-font-body);
	font-size: 0.75rem;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ff-charcoal);
}

.ff-footer__link .elementor-button:hover { color: var(--ff-rust); background: none; }