/* About Us + WPML translations. All content stays in the existing page editor. */
body.bfi-about {
	--bfa-ink: #10282c;
	--bfa-slate: #2b4448;
	--bfa-muted: #5c6b6d;
	--bfa-green: #127a71;
	--bfa-line: #e9e5de;
	--bfa-cream: #faf9f7;
}
body.bfi-about #page-content { font-family: Poppins, sans-serif; color: var(--bfa-slate); }
body.bfi-about #page-content :is(h1, h2) { color: var(--bfa-ink); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; text-wrap: balance; }
/* Preserve the closing CTA’s original white heading on green. */
body.bfi-about #page-content .bfi-cta .bfi-cta__title { color: #fff; }
body.bfi-about #page-content h1 { font-size: clamp(38px, 4.4vw, 60px); margin: 0 0 28px; }
body.bfi-about #page-content h2 { font-size: clamp(28px, 3.2vw, 42px); margin: 0 auto 40px; max-width: 850px; }
body.bfi-about #page-content :is(.yellow-underline, .long-yellow-underline) { white-space: normal; }
body.bfi-about #page-content > .l-section:not(:has(.bfi-cta)) { padding: 80px 0 !important; }
body.bfi-about #page-content > .l-section > .l-section-h { max-width: 1210px !important; margin-inline: auto; }
/* Replace editor spacer elements with a consistent section rhythm. */
body.bfi-about #page-content > .l-section:not(:has(.bfi-cta)) .w-separator { display: none; }
body.bfi-about #about-us-header { background: linear-gradient(135deg, #faf9f7, #eef8f7) !important; }
body.bfi-about #about-us-header > .l-section-h > .g-cols { align-items: center; gap: 56px; margin: 0; }
body.bfi-about #about-us-header > .l-section-h > .g-cols > .wpb_column { width: calc(50% - 28px); padding: 0; margin: 0; }
body.bfi-about #about-us-header > .l-section-h > .g-cols > .vc_col-sm-12 { display: none; }
body.bfi-about #about-us-header .vc_column-inner { padding: 0 !important; max-width: none !important; }
body.bfi-about #about-us-header .control-img-height { height: auto !important; max-height: none !important; width: 100%; }
body.bfi-about #about-us-header .w-image-h { height: auto !important; }
body.bfi-about #about-us-header img { width: 100%; height: auto !important; max-height: none; object-fit: contain; }
body.bfi-about #about-us-header p { font-size: 16px; line-height: 1.8; margin: 0 0 18px; color: var(--bfa-slate); }
body.bfi-about #about-us-header p:last-child { margin-bottom: 0; }
body.bfi-about #page-content > .l-section:has(.employee) { background: var(--bfa-cream) !important; }
body.bfi-about #page-content .employee { width: auto !important; margin: 0 !important; padding: 0 !important; min-width: 0; }
body.bfi-about #page-content .employee:not(:has(.w-person)) { display: none; }
body.bfi-about #page-content .employee .vc_column-inner { padding: 0 !important; }
@media (max-width: 1024px) {
	body.bfi-about #about-us-header > .l-section-h > .g-cols { gap: 32px; }
	body.bfi-about #about-us-header > .l-section-h > .g-cols > .wpb_column { width: calc(50% - 16px); }
}
@media (max-width: 767px) {
	body.bfi-about #page-content > .l-section:not(:has(.bfi-cta)) { padding: 48px 0 !important; }
	body.bfi-about #page-content > .l-section > .l-section-h { padding-inline: 22px !important; }
	body.bfi-about #page-content h1 { margin-bottom: 24px; }
	body.bfi-about #page-content h2 { margin-bottom: 30px; }
	body.bfi-about #about-us-header > .l-section-h > .g-cols { flex-direction: column; gap: 28px; }
	body.bfi-about #about-us-header > .l-section-h > .g-cols > .wpb_column { width: 100%; }
	body.bfi-about #about-us-header .align-to-right { order: 2; }
	body.bfi-about #about-us-header .w-image { max-width: 360px; margin-inline: auto; }
	body.bfi-about #about-us-header p { font-size: 15px; line-height: 1.8; }
	body.bfi-about .l-section:has(.food-timeline) > .l-section-h > .g-cols { margin: 0; }
	body.bfi-about .l-section:has(.food-timeline) > .l-section-h > .g-cols > .vc_col-sm-1 { display: none; }
	body.bfi-about .l-section:has(.food-timeline) > .l-section-h > .g-cols > .vc_col-sm-10 { width: 100%; margin: 0; }
	body.bfi-about .l-section:has(.food-timeline) .vc_column-inner { padding: 0 !important; }
	body.bfi-about .l-section:has(.employee) > .l-section-h > .g-cols { margin: 0; }
	body.bfi-about .l-section:has(.employee) > .l-section-h > .g-cols > .wpb_column { margin: 0; }
	body.bfi-about .l-section:has(.employee) .vc_column-inner { padding: 0 !important; }
}

@media (min-width: 768px) {
	body.bfi-about #about-us-header > .l-section-h { width: calc(100% - 96px) !important; padding-inline: 0 !important; }
}

/* ── "Our Platform over the Years" timeline ──────────────────────────────
 * Desktop: centred line, milestones alternate left/right, big year across
 * the line from each card. Mobile: one track with the line and icons on the left.
 * The Ultimate Addons markup stays as it is (editable in WPBakery); the header
 * wrappers use display: contents so the year and text can be placed separately.
 * Scroll reveal + line fill come from js/about-timeline.js (the hidden state only
 * applies after the script adds .bfa-tl-ready, so without JS everything shows). */
body.bfi-about #page-content > .l-section:has(.food-timeline) { background: #fff !important; }
body.bfi-about #page-content .food-timeline {
	--tl-axis: 84px;
	--tl-icon: 56px;
	--tl-line: #d7eeeb;
	--tl-teal: #28bdb1;
	--tl-yellow: #ffc400;
	position: relative;
	max-width: 1060px;
	margin: 0 auto !important;
	padding: 0 !important;
}
body.bfi-about #page-content .food-timeline :is(.timeline-line, .timeline-dot, .ult-timeline-arrow) { display: none !important; }
body.bfi-about #page-content .food-timeline .timeline-wrapper {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 64px;
	height: auto !important;
	padding: 16px 0 !important;
	overflow: visible;
}
body.bfi-about #page-content .food-timeline .timeline-wrapper > :not(.timeline-block) { display: none !important; }

/* The line, and its green fill that grows while scrolling. */
body.bfi-about #page-content .food-timeline .timeline-wrapper::before,
body.bfi-about #page-content .food-timeline .timeline-wrapper::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 3px;
	margin-left: -1.5px;
	border-radius: 3px;
	background: var(--tl-line);
	-webkit-mask-image: linear-gradient(transparent, #000 48px, #000 calc(100% - 48px), transparent);
	mask-image: linear-gradient(transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
body.bfi-about #page-content .food-timeline .timeline-wrapper::after {
	background: linear-gradient(var(--bfa-green), var(--tl-teal) 75%, var(--tl-yellow));
	transform-origin: top;
	transform: scaleY(var(--tl-progress, 1));
}

/* One milestone = three columns: [card | icon | year] or [year | icon | card]. */
body.bfi-about #page-content .food-timeline .timeline-block {
	position: relative !important;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--tl-axis) minmax(0, 1fr);
	align-items: center;
	column-gap: 36px;
	float: none !important;
	clear: both;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	box-sizing: border-box;
}
body.bfi-about #page-content .food-timeline :is(.timeline-header-block, .timeline-header) { display: contents !important; }

/* Icon node on the line. */
body.bfi-about #page-content .food-timeline .timeline-icon-block {
	grid-column: 2;
	grid-row: 1;
	position: relative !important;
	inset: auto !important;
	z-index: 1;
	display: grid !important;
	place-items: center;
	float: none !important;
	width: var(--tl-axis) !important;
	height: var(--tl-axis);
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid var(--tl-line);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 10px #fff, 0 12px 28px rgba(16, 40, 44, .09);
	box-sizing: border-box;
	transition: border-color .6s ease, opacity .5s ease, transform .7s cubic-bezier(.34, 1.56, .64, 1);
}
body.bfi-about #page-content .food-timeline :is(.ult-timeline-icon, .ult-just-icon-wrapper, .align-icon, .aio-icon-img) {
	display: grid !important;
	place-items: center;
	position: static !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	width: var(--tl-icon) !important;
	height: var(--tl-icon) !important;
	font-size: 0 !important;
	line-height: 0 !important;
}
body.bfi-about #page-content .food-timeline .aio-icon-img::before,
body.bfi-about #page-content .food-timeline .aio-icon-img::after { display: none !important; }
body.bfi-about #page-content .food-timeline .timeline-icon-block * {
	animation: none !important;
	opacity: 1 !important;
	transform: none !important;
}
body.bfi-about #page-content .food-timeline .img-icon {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	vertical-align: middle;
	width: var(--tl-icon) !important;
	height: var(--tl-icon) !important;
	max-width: none !important;
	object-fit: contain;
}
body.bfi-about #page-content .food-timeline .timeline-block.is-in .timeline-icon-block { border-color: var(--tl-teal); }
body.bfi-about #page-content .food-timeline .timeline-icon-block::after {
	content: '';
	position: absolute;
	inset: -2px;
	border: 2px solid var(--tl-teal);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}
body.bfi-about #page-content .food-timeline.bfa-tl-ready .timeline-block.is-in .timeline-icon-block::after { animation: bfaTlRing 1.4s ease-out .35s 1; }
@keyframes bfaTlRing {
	from { opacity: .7; transform: scale(1); }
	to { opacity: 0; transform: scale(1.55); }
}

/* Year. */
body.bfi-about #page-content .food-timeline .ult-timeline-title {
	grid-row: 1;
	position: relative;
	margin: 0 !important;
	color: var(--bfa-green) !important;
	font-family: Poppins, sans-serif;
	font-size: clamp(44px, 4.6vw, 64px) !important;
	line-height: 1 !important;
	font-weight: 600;
	letter-spacing: -.04em;
	transition: opacity .7s ease, transform .8s cubic-bezier(.22, 1, .36, 1);
}
body.bfi-about #page-content .food-timeline .ult-timeline-title::after {
	content: '';
	display: block;
	width: 52px;
	height: 4px;
	margin-top: 16px;
	border-radius: 4px;
	background: var(--tl-yellow);
}

/* Text card with a small pointer towards the line. */
body.bfi-about #page-content .food-timeline .timeline-item-spt {
	grid-row: 1;
	position: relative;
	margin: 0;
	padding: 28px 32px;
	border: 1px solid var(--bfa-line);
	border-radius: 20px;
	background: var(--bfa-cream);
	box-shadow: 0 1px 2px rgba(16, 40, 44, .04);
	color: var(--bfa-slate) !important;
	font-size: 15px !important;
	line-height: 1.75 !important;
	text-align: left !important;
	transition: opacity .7s ease, transform .9s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, border-color .3s ease;
}
body.bfi-about #page-content .food-timeline .timeline-item-spt::before {
	content: '';
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	border: 1px solid var(--bfa-line);
	background: var(--bfa-cream);
	transform: rotate(45deg);
	transition: border-color .3s ease;
}
body.bfi-about #page-content .food-timeline .timeline-item-spt:hover { border-color: #bfe5e1; box-shadow: 0 18px 40px rgba(16, 40, 44, .08); }
body.bfi-about #page-content .food-timeline .timeline-item-spt:hover::before { border-color: #bfe5e1; }

/* Card on the left, year on the right. */
body.bfi-about #page-content .food-timeline .timeline-post-left .timeline-item-spt { grid-column: 1; }
body.bfi-about #page-content .food-timeline .timeline-post-left .timeline-item-spt::before { right: -8px; border-left: 0; border-bottom: 0; }
body.bfi-about #page-content .food-timeline .timeline-post-left .ult-timeline-title { grid-column: 3; text-align: left !important; }
/* Year on the left, card on the right. */
body.bfi-about #page-content .food-timeline .timeline-post-right .timeline-item-spt { grid-column: 3; }
body.bfi-about #page-content .food-timeline .timeline-post-right .timeline-item-spt::before { left: -8px; border-right: 0; border-top: 0; }
body.bfi-about #page-content .food-timeline .timeline-post-right .ult-timeline-title { grid-column: 1; text-align: right !important; }
body.bfi-about #page-content .food-timeline .timeline-post-right .ult-timeline-title::after { margin-left: auto; }

/* Scroll reveal (only after the script is ready). */
body.bfi-about #page-content .food-timeline.bfa-tl-ready .timeline-block:not(.is-in) .timeline-icon-block { opacity: 0; transform: scale(.4); }
body.bfi-about #page-content .food-timeline.bfa-tl-ready .timeline-block:not(.is-in) .ult-timeline-title { opacity: 0; transform: translateY(24px); }
body.bfi-about #page-content .food-timeline.bfa-tl-ready .timeline-post-left:not(.is-in) .timeline-item-spt { opacity: 0; transform: translateX(-56px); }
body.bfi-about #page-content .food-timeline.bfa-tl-ready .timeline-post-right:not(.is-in) .timeline-item-spt { opacity: 0; transform: translateX(56px); }
body.bfi-about #page-content .food-timeline.bfa-tl-ready .timeline-block.is-in .ult-timeline-title { transition-delay: .15s; }
body.bfi-about #page-content .food-timeline.bfa-tl-ready .timeline-block.is-in .timeline-item-spt { transition-delay: .25s, .25s, 0s, 0s; }

@media (max-width: 899px) {
	body.bfi-about #page-content .food-timeline { --tl-axis: 56px; --tl-icon: 40px; }
	body.bfi-about #page-content .food-timeline .timeline-wrapper { gap: 32px; padding: 0 !important; }
	body.bfi-about #page-content .food-timeline .timeline-wrapper::before,
	body.bfi-about #page-content .food-timeline .timeline-wrapper::after { left: calc(var(--tl-axis) / 2); }
	body.bfi-about #page-content .food-timeline .timeline-block { grid-template-columns: var(--tl-axis) minmax(0, 1fr); column-gap: 16px; row-gap: 12px; align-items: start; }
	body.bfi-about #page-content .food-timeline .timeline-icon-block { grid-column: 1 !important; grid-row: 1 / span 2 !important; box-shadow: 0 0 0 6px #fff, 0 8px 20px rgba(16, 40, 44, .08); }
	body.bfi-about #page-content .food-timeline .timeline-block .ult-timeline-title { grid-column: 2 !important; grid-row: 1 !important; display: flex; align-items: center; min-height: var(--tl-axis); text-align: left !important; font-size: 36px !important; }
	body.bfi-about #page-content .food-timeline .ult-timeline-title::after { display: none; }
	body.bfi-about #page-content .food-timeline .timeline-block .timeline-item-spt { grid-column: 2 !important; grid-row: 2 !important; padding: 20px 20px; border-radius: 16px; font-size: 14px !important; }
	body.bfi-about #page-content .food-timeline .timeline-item-spt::before { display: none; }
	body.bfi-about #page-content .food-timeline.bfa-tl-ready .timeline-block:not(.is-in) .timeline-item-spt { transform: translateY(28px); }
}

@media (prefers-reduced-motion: reduce) {
	body.bfi-about #page-content .food-timeline :is(.timeline-icon-block, .ult-timeline-title, .timeline-item-spt) { transition: none !important; }
	body.bfi-about #page-content .food-timeline .timeline-icon-block::after { display: none; }
}

/* ── "Meet the team" ─────────────────────────────────────────────────────
 * The three WPBakery rows (6 + 5 + 2 people and empty columns) become one
 * centred grid: 7 + 6 on desktop, the last row always centred. Names stay on
 * one line (the theme set max-width: min-content, so every word wrapped).
 * Cards fade up one after another on scroll (js/about-page.js). */
body.bfi-about #page-content .l-section:has(.employee) .wpb_wrapper:has(> .g-cols > .employee) {
	--team-cols: 7;
	--team-gap: 22px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px var(--team-gap);
}
body.bfi-about #page-content .l-section:has(.employee) .wpb_wrapper:has(> .g-cols > .employee) > :not(.g-cols) { flex: 0 0 100%; }
body.bfi-about #page-content .l-section:has(.employee) .wpb_wrapper:has(> .g-cols > .employee) > .w-separator { display: none; }
body.bfi-about #page-content .l-section:has(.employee) .wpb_wrapper:has(> .g-cols > .employee) > .wpb_text_column { margin-bottom: 0 !important; }
body.bfi-about #page-content .l-section:has(.employee) .g-cols:has(> .employee) { display: contents !important; }
body.bfi-about #page-content .employee:has(.w-person) {
	flex: 0 0 calc((100% - (var(--team-cols) - 1) * var(--team-gap)) / var(--team-cols));
	max-width: 190px;
}
body.bfi-about #page-content .employee .w-person {
	height: 100%;
	padding: 10px 10px 18px;
	border: 1px solid var(--bfa-line);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 40, 44, .04);
	color: var(--bfa-ink) !important;
	text-align: center !important;
	box-sizing: border-box;
	transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .35s ease, opacity .7s ease;
}
body.bfi-about #page-content .employee .w-person:hover {
	transform: translateY(-6px);
	border-color: #bfe5e1;
	box-shadow: 0 22px 44px rgba(16, 40, 44, .1);
}
body.bfi-about #page-content .employee .w-person-image {
	width: 100%;
	height: auto !important;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 16px;
	background: linear-gradient(160deg, #f3ece3, #e9dfd2);
}
body.bfi-about #page-content .employee .w-person-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: none;
	transition: transform .6s cubic-bezier(.22, 1, .36, 1) !important;
}
body.bfi-about #page-content .employee .w-person:hover .w-person-image img { transform: scale(1.06) !important; }
body.bfi-about #page-content .employee .w-person-content {
	position: static !important;
	opacity: 1 !important;
	transform: none !important;
	padding: 14px 2px 0 !important;
	background: transparent !important;
	color: var(--bfa-ink) !important;
}
body.bfi-about #page-content .employee .w-person-name {
	display: block !important;
	max-width: none !important;
	width: auto !important;
	margin: 0 0 4px !important;
	padding: 0 !important;
	color: var(--bfa-ink) !important;
	font-size: 15px !important;
	line-height: 1.35 !important;
	font-weight: 600;
	letter-spacing: -.01em;
	text-wrap: balance;
}
body.bfi-about #page-content .employee :is(.w-person-name, .w-person-role) { text-align: center !important; }
body.bfi-about #page-content .employee .w-person-role {
	padding: 0 !important;
	color: var(--bfa-green) !important;
	font-size: 12.5px !important;
	line-height: 1.45;
	font-weight: 500;
}

/* Scroll reveal (only after the script is ready). */
body.bfi-about #page-content .bfa-team-ready .employee:not(.is-in) .w-person { opacity: 0; transform: translateY(28px); }
body.bfi-about #page-content .bfa-team-ready .employee.is-in .w-person { transition-delay: var(--team-delay, 0s), var(--team-delay, 0s), 0s, var(--team-delay, 0s); }
body.bfi-about #page-content .bfa-team-ready .employee.is-in .w-person:hover { transition-delay: 0s; }

@media (max-width: 1199px) {
	body.bfi-about #page-content .l-section:has(.employee) .wpb_wrapper:has(> .g-cols > .employee) { --team-cols: 5; }
}
@media (max-width: 767px) {
	body.bfi-about #page-content .l-section:has(.employee) .wpb_wrapper:has(> .g-cols > .employee) { --team-cols: 3; --team-gap: 14px; row-gap: 18px; }
	body.bfi-about #page-content .employee .w-person { padding: 7px 7px 14px; border-radius: 18px; }
	body.bfi-about #page-content .employee .w-person-image { border-radius: 13px; }
	body.bfi-about #page-content .employee .w-person-content { padding-top: 10px !important; }
	body.bfi-about #page-content .employee .w-person-name { font-size: 13.5px !important; }
	body.bfi-about #page-content .employee .w-person-role { font-size: 11.5px !important; }
}
@media (max-width: 479px) {
	body.bfi-about #page-content .l-section:has(.employee) .wpb_wrapper:has(> .g-cols > .employee) { --team-cols: 2; }
}
@media (prefers-reduced-motion: reduce) {
	body.bfi-about #page-content .employee :is(.w-person, .w-person-image img) { transition: none !important; }
}

/* Tablet / small laptop: the sections had no side padding here, so the WPBakery
 * rows' negative margins pushed the page a few pixels wider than the screen. */
@media (min-width: 768px) and (max-width: 1240px) {
	body.bfi-about #page-content > .l-section > .l-section-h { padding-inline: 32px !important; }
}