/* "Our Journey" timeline (Company page): zigzag layout, content
   left-aligned near its dot. Three fixes over the previous pass:
   1) The horizontal line (::before on .c-journey-track) was being
      overridden by WPBakery's own .vc_row::before clearfix rule
      (content:""; display:table), which has enough specificity to
      win -- forcing display:block + !important on every property
      here so it actually renders as a line, not a clearfix.
   2) .c-journey-item's fixed height (340px) was too short for the
      longest event text (measured up to 219px), clipping the
      image placeholder -- raised to 480px with matching padding so
      every event has headroom regardless of text length.
   3) The vertical connector was a short in-flow element between
      the year and the dot; moved to position:absolute, running
      the full half-height from the dot to the item's outer edge,
      sitting to the LEFT of the content column (which now has
      padding-left to clear it) instead of stacked above the year. */
.c-journey-track {
	display: flex;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.c-journey-track::-webkit-scrollbar {
	display: none;
}
/* Content (year/text/image) sits flush against the outer edge of
   the item -- flex-start for --top (pinned to the very top),
   flex-end for --bottom (pinned to the very bottom) -- so every
   event's content ends at the same point regardless of how much
   text it has, with the vertical line filling whatever gap remains
   between that content and the center line. 10px gap between the
   year/text/image stack replaces the old per-child margin. */
/* .c-journey-item (the wpb_column) only has ONE direct child in
   WPBakery's own markup (.vc_column-inner, wrapping everything) --
   flex/gap on .c-journey-item itself had no visible effect since
   gap needs multiple flex children to show. The real siblings
   (dot, vline, image, year, text) live two levels down, inside
   .wpb_wrapper, so flex/gap/justify-content/alignment all move
   there instead; .vc_column-inner and .wpb_wrapper get height:100%
   so they fill the item's fixed height for justify-content to work
   against. .c-journey-item itself stays the position:relative
   anchor for the absolutely-positioned dot/vline (still the
   nearest positioned ancestor either way). */
.c-journey-item {
	flex: 0 0 22.22%;
	width: 22.22%;
	height: 480px;
	position: relative;
}
.c-journey-item > .vc_column-inner {
	height: 100%;
}
.c-journey-item > .vc_column-inner > .wpb_wrapper {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	padding: 0 12px 0 32px;
	gap: 10px;
}
.c-journey-item--top > .vc_column-inner > .wpb_wrapper {
	justify-content: flex-start;
}
.c-journey-item--bottom > .vc_column-inner > .wpb_wrapper {
	justify-content: flex-end;
}


.c-journey-item__dot {
	position: absolute !important;
	top: 50%;
	left: 12px;
	transform: translateY(-50%);
	z-index: 2;
	margin: 0 !important;
}
.c-journey-item__dot .vc_empty_space_inner {
	display: block;
	width: 13px;
	height: 13px;
	background: #ffcd00;
	border-radius: 50%;
}
.c-journey-item__vline {
	position: absolute !important;
	left: 19px;
	width: 1px !important;
	z-index: 1;
	margin: 0 !important;
}
.c-journey-item--bottom .c-journey-item__vline {
	top: 50%;
	bottom: 0;
	height: auto !important;
	background: linear-gradient(to bottom, #000000, rgba(0, 0, 0, 0)) !important;
}
.c-journey-item--top .c-journey-item__vline {
	top: 0;
	bottom: 50%;
	height: auto !important;
	background: linear-gradient(to top, #000000, rgba(0, 0, 0, 0)) !important;
}
.c-journey-item__vline .vc_empty_space_inner {
	display: none;
}
/* The horizontal line used to be one absolutely-positioned
   ::before on .c-journey-track spanning left:0/right:0, but inside
   a scrollable container that only spans the visible clientWidth,
   not the full scrollWidth -- so it stopped partway through once
   you scrolled. Drawing it per-item instead (each .c-journey-item
   paints its own edge-to-edge segment) keeps it inside the normal
   flex flow, so every segment scrolls and lines up with the rest
   of that item's content, joining into one continuous line. */
.c-journey-item::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	top: 50% !important;
	height: 1px !important;
	background: #000000 !important;
	transform: translateY(-50%) !important;
	z-index: 1 !important;
}
.c-journey-item__year {
	font-weight: 700;
	font-size: 16px;
}
.c-journey-item__text {
	font-size: 14px;
	color: #56585c;
	max-width: 230px;
}
.c-journey-item__image-placeholder {
	width: 90px;
	border-radius: 8px;
	background: #e5e5e5;
	position: relative;
}
.c-journey-item__image-placeholder .vc_empty_space_inner {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}
.c-journey-item__image-placeholder .vc_empty_space_inner::after {
	content: "IMG";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #999999;
	font-size: 12px;
}


/* Horizontal scroll for the journey track: show ~4.5 events at a
   time on load (each item fixed at 22.22% = 100/4.5 of the
   container width, flex-shrink:0 so it never compresses),
   scrollable natively via overflow-x -- no JS needed. Per
   feedback. */

/* The "Our Journey" section's outer .vc_section has WPBakery's
   theme class .wpex-vc-full-width-section--centered, which extends
   the section's own background full-bleed but keeps its CONTENT
   width-limited and centered (via padding-inline) -- normally used
   when the section itself carries the background color. Here the
   #fbfbfb background lives on the [vc_row] child instead, so that
   row (and its color) got squeezed inside the padding, leaving
   plain white visible on both sides. Remove just that padding,
   scoped to this specific section via :has() so no other section
   using the same theme class elsewhere is affected. */
.wpex-vc-full-width-section--centered:has(.c-journey-track) {
	padding-inline: 0 !important;
}


/* Fade-out overlay on the right edge of the horizontal-scroll
   timeline, matching the Figma reference where the last visible
   event (2026) is shown faded/greyed to hint more content is
   scrollable. The overlay is a ::after on the wrapper ONE LEVEL
   ABOVE .c-journey-track (not inside it), since .c-journey-track
   itself has overflow-x:auto -- a pseudo-element there would be
   part of the scrollable content and drift off with it instead of
   staying fixed at the visible right edge. Scoped via :has() to
   the one wrapper containing this track, not every .wpb_wrapper
   on the site. pointer-events:none so it never blocks scrolling
   or clicks on the content underneath. */
.wpb_wrapper:has(> .c-journey-track) {
	position: relative;
}
.wpb_wrapper:has(> .c-journey-track)::after {
	content: "";
	position: absolute;
	top: 0;
	right: -15px;
	bottom: 0;
	width: 140px;
	background: linear-gradient(to right, rgba(251, 251, 251, 0), rgba(251, 251, 251, 1));
	pointer-events: none;
	z-index: 5;
}

/* ==========================================================
   JOURNEY TIMELINE
   ========================================================== */

.c-journey {
	--journey-content-width: 1440px;
	--journey-gutter: 30px;

	--journey-item-width: 320px;
	--journey-item-height: 540px;

	--journey-axis-y: 270px;
	--journey-axis-x: 18px;

	--journey-dot-size: 14px;
	--journey-image-size: 122px;

	--journey-line-color: #555;
	--journey-vline-color: #777;

	position: relative;
	overflow: visible;
	min-height: calc(var(--journey-item-height) + 60px);
}

.c-journey > .wpb_column::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;

	width: 160px;

	background: linear-gradient(
		to right,
		rgba(251, 251, 251, 0) 0%,
		rgba(251, 251, 251, 0.65) 60%,
		rgba(251, 251, 251, 1) 100%
	);

	pointer-events: none;
	z-index: 50;
}
.c-journey > .wpb_column::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;

	width: 30px;

	background: linear-gradient(
		to right,
		rgba(251, 251, 251, 1) 0%,
		rgba(251, 251, 251, 0) 100%
	);

	pointer-events: none;
	z-index: 50;
}

/* ==========================================================
   OUTER WPBAKERY STRUCTURE
   ========================================================== */

.c-journey > .wpb_column > .vc_column-inner {
	padding-left: 0 !important;
	padding-right: 0 !important;
	max-width: var(--max-width);
	margin: 0 auto;
}

.c-journey > .wpb_column > .vc_column-inner > .wpb_wrapper {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;

	width: 100%;

	overflow-x: auto;
	overflow-y: hidden;

	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;

	scrollbar-width: none;
	-ms-overflow-style: none;
}

.c-journey > .wpb_column > .vc_column-inner > .wpb_wrapper::-webkit-scrollbar {
	display: none;
}


/* ==========================================================
   TIMELINE ITEM
   ========================================================== */

.c-journey .c-journey-item {
	flex: 0 0 var(--journey-item-width) !important;
	width: var(--journey-item-width) !important;
	max-width: var(--journey-item-width) !important;

	height: var(--journey-item-height) !important;
	min-height: var(--journey-item-height) !important;

	position: relative;

	margin: 0 !important;
	padding: 0 !important;

	box-sizing: border-box;
}

.c-journey .c-journey-item:first-child {
	margin-left: max(
		var(--journey-gutter),
		calc((100vw - var(--journey-content-width)) / 2)
	) !important;
}

.c-journey .c-journey-item.vc_row {
	margin-left: 0 !important;
	margin-right: 0 !important;
}


/* ==========================================================
   INNER COLUMN
   ========================================================== */

.c-journey .c-journey-item > .wpb_column {
	height: var(--journey-item-height) !important;
	min-height: var(--journey-item-height) !important;
	position: relative;
}

.c-journey .c-journey-item > .wpb_column > .vc_column-inner {
	height: var(--journey-item-height) !important;
	min-height: var(--journey-item-height) !important;
	padding: 0 !important;
}

.c-journey .c-journey-item > .wpb_column > .vc_column-inner > .wpb_wrapper {
	height: var(--journey-item-height) !important;
	min-height: var(--journey-item-height) !important;

	display: flex;
	flex-direction: column;
	align-items: flex-start;

	position: relative;
	box-sizing: border-box;

	padding-left: 35px;
	padding-right: 24px;
}


/* ==========================================================
   HORIZONTAL TIMELINE LINE
   ========================================================== */

.c-journey .c-journey-item::before {
	content: "";
	position: absolute;

	top: var(--journey-axis-y);
	left: 0;
	right: 0;

	height: 1px;

	background: var(--journey-line-color);

	z-index: 1;
}


/* ==========================================================
   VERTICAL CONNECTOR
   ========================================================== */

.c-journey .c-journey-item > .wpb_column::before {
	content: "";
	position: absolute;

	left: var(--journey-axis-x);

	width: 1px;

	z-index: 2;
}


/* TOP */

.c-journey .c-journey-item--top > .wpb_column::before {
	top: 0;
	bottom: var(--journey-axis-y);

	background: linear-gradient(
		to top,
		rgba(119, 119, 119, 1) 0%,
		rgba(119, 119, 119, 1) 35%,
		rgba(119, 119, 119, 0) 100%
	);
}


/* BOTTOM */

.c-journey .c-journey-item--bottom > .wpb_column::before {
	top: var(--journey-axis-y);
	bottom: 0;

	background: linear-gradient(
		to bottom,
		rgba(119, 119, 119, 1) 0%,
		rgba(119, 119, 119, 1) 35%,
		rgba(119, 119, 119, 0) 100%
	);
}


/* ==========================================================
   YELLOW DOT
   ========================================================== */

.c-journey .c-journey-item > .wpb_column::after {
	content: "";
	position: absolute;

	top: var(--journey-axis-y);
	left: var(--journey-axis-x);

	width: var(--journey-dot-size);
	height: var(--journey-dot-size);

	background: #ffcd00;
	border-radius: 50%;

	transform: translate(-50%, -50%);

	z-index: 4;
}


/* ==========================================================
   TOP CONTENT
   ========================================================== */

.c-journey .c-journey-item--top > .wpb_column > .vc_column-inner > .wpb_wrapper {
	justify-content: flex-start !important;

	padding-top: 20px !important;
	padding-bottom: 290px !important;
}


/* ==========================================================
   BOTTOM CONTENT
   ========================================================== */

.c-journey .c-journey-item--bottom > .wpb_column > .vc_column-inner > .wpb_wrapper {
	justify-content: flex-start !important;

	padding-top: 310px !important;
	padding-bottom: 20px !important;

	padding-left: 56px !important;
	padding-right: 24px !important;
}


/* ==========================================================
   REMOVE DEFAULT WPBAKERY SPACING
   ========================================================== */

.c-journey .c-journey-item .wpb_content_element {
	margin-bottom: 0;
}


/* ==========================================================
   YEAR
   ========================================================== */

.c-journey .c-journey-year {
	font-size: 18px;
	font-weight: 700;
	line-height: 160%;

	margin: 0 0 12px !important;
}


/* ==========================================================
   DESCRIPTION
   ========================================================== */

.c-journey .c-journey-text {
	width: 100%;
	max-width: 230px;

	min-height: 44px;

	font-size: 12px;
	font-weight: 500;
	line-height: 140%; /* 16.8px */

	margin: 0 0 12px !important;
}


/* ==========================================================
   IMAGE
   ========================================================== */

.c-journey .c-journey-image {
	width: var(--journey-image-size) !important;
	height: var(--journey-image-size) !important;

	min-width: var(--journey-image-size) !important;
	min-height: var(--journey-image-size) !important;

	flex: 0 0 var(--journey-image-size);

	margin: 0 !important;
}


/* WPBakery single image wrapper */

.c-journey .c-journey-image .vc_single_image-wrapper {
	display: block !important;

	width: var(--journey-image-size) !important;
	height: var(--journey-image-size) !important;

	max-width: var(--journey-image-size) !important;
}


/* Actual image */

.c-journey .c-journey-image img {
	display: block !important;

	width: var(--journey-image-size) !important;
	height: var(--journey-image-size) !important;

	min-width: var(--journey-image-size) !important;
	min-height: var(--journey-image-size) !important;
	max-width: none !important;

	object-fit: cover;
	object-position: center;
}


/* ==========================================================
   RIGHT EDGE FADE
   ========================================================== */

.c-journey::after {
	content: "";
	position: absolute;

	top: 0;
	right: 0;
	bottom: 0;

	width: 140px;

	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0),
		rgba(255, 255, 255, 0.96)
	);

	pointer-events: none;

	z-index: 20;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1024px) {

	.c-journey .c-journey-item {
		flex-basis: 32% !important;
		width: 32% !important;
		max-width: 32% !important;
	}

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {
	.c-journey {
		min-height: calc(var(--journey-item-height) + 30px);
	}

	.c-journey .c-journey-item {
		flex: 0 0 190px !important;
		width: 190px !important;
		max-width: 190px !important;
	}

	.c-journey > .wpb_column::before {
		width: 24px;
	}

	.c-journey > .wpb_column::after {
		width: 100px;
	}

}