/* BJP About page — CreaFide, Figma file 6nopYRo0cJ1REjGqjiQpPv:
     desktop "About - 3" 4028:610   (1440x3925)
     mobile  "Mobile"    4028:1179  (390x7220)

     hero        4028:611  / 4028:1247
     intro       4028:790  / 4028:1440
     problem     4028:806  / 4028:1456
     solution    4028:683  / 4028:1486
     values      4028:748  / 4028:1551
     commitment  4028:836  / 4028:1267

   Every section is 80px top and bottom on both breakpoints; the 1440 frame
   uses 80px gutters and the 390 frame 20px, which is what --bjp-pad-x spans.
   Tokens live on .bjp-about; each section owns its own geometry. */

.bjp-about {
	/* --- shared tokens ------------------------------------------------- */
	--bjp-color-text: #231F20;
	--bjp-color-primary: #156082;
	--bjp-color-primary-hover: #0f4a63;
	--bjp-color-accent: #67C7C7;
	--bjp-color-border: #EAECF0;
	--bjp-font: 'Manrope', -apple-system, Roboto, Helvetica, sans-serif;

	--bjp-pad-x: clamp(20px, 5.5556vw, 80px);

	box-sizing: border-box;
	font-family: var(--bjp-font);
	color: var(--bjp-color-text);
	background: #ffffff;
}

/* Break out of Astra's / Elementor's content container so the hero photo band
   reaches both edges of the viewport. The doubled class raises specificity
   past `.entry-content[data-ast-blocks-layout] > *`, which otherwise forces
   `margin-left: auto` and a content-width max-width onto the wrapper. */
.bjp-about.bjp-about {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

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

/* Figma's frames are a fixed 1440 with 80px gutters; cap content at that
   1280px column and centre it on wider viewports. */
.bjp-about__container {
	width: 100%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

/* ======================================================================
   BUTTONS — the shared [button]--primary / --secondary components
   ====================================================================== */

.bjp-about a.bjp-about__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 16px;
	border-radius: 8px;
	font-family: var(--bjp-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.bjp-about a.bjp-about__button--primary {
	background: var(--bjp-color-primary);
	border: 0;
	color: #ffffff;
}

.bjp-about a.bjp-about__button--primary:hover,
.bjp-about a.bjp-about__button--primary:focus {
	background: var(--bjp-color-primary-hover);
	color: #ffffff;
}

.bjp-about a.bjp-about__button--secondary {
	background: transparent;
	border: 1px solid var(--bjp-color-text);
	color: var(--bjp-color-text);
}

.bjp-about a.bjp-about__button--secondary:hover,
.bjp-about a.bjp-about__button--secondary:focus {
	background: var(--bjp-color-text);
	color: #ffffff;
}

.bjp-about__arrow {
	display: block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

.bjp-about__arrow--back {
	transform: scaleX(-1);
}

/* ======================================================================
   HERO — node 4028:611 / 4028:1247
   ====================================================================== */

.bjp-about-hero {
	display: flex;
	flex-direction: column;
	background: #ffffff;
}

/* The 1440 frame is a fixed 756 holding 64 + 236 + 64 + 405 of auto-layout
   content, so Figma centres the 13px of overflow and renders the top padding
   at 57.5. Matching the render rather than the nominal 64 keeps the heading
   on the same baseline as the comp. */
.bjp-about-hero__intro {
	display: flex;
	justify-content: center;
	padding: 57.5px var(--bjp-pad-x) 64px;
}

.bjp-about-hero__intro > .bjp-about__container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

/* 82px/-1.64px at 1440, 36px at 390. -1.64px is -0.02em, so the tracking
   holds through the interpolation. */
.bjp-about .bjp-about-hero__heading {
	margin: 0;
	font-family: var(--bjp-font);
	font-size: clamp(36px, 5.6944vw, 82px);
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.02em;
	color: var(--bjp-color-text);
}

.bjp-about-hero__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	width: 100%;
}

.bjp-about .bjp-about-hero__copy {
	margin: 0;
	width: 100%;
	font-family: var(--bjp-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--bjp-color-text);
}

/* The mobile frame carries different body copy to the desktop one; only one
   is ever shown. */
.bjp-about-hero__copy--mobile {
	display: none;
}

.bjp-about-hero__actions {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

/* Full-bleed band. Figma renders the 1200x800 export at 237.04% height,
   pulled to top:-56.12% — cover, focused 40.95% down the image.

   The node is 405px but the 756px hero frame clips its last 6.5px, so 398.5
   is what the comp actually shows and what keeps the intro section on the
   same y as the design. The 390 frame does not clip it. */
.bjp-about-hero__media {
	width: 100%;
	height: 398.5px;
	overflow: hidden;
}

.bjp-about .bjp-about-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center 40.95%;
}

/* ======================================================================
   INTRO — node 4028:790 / 4028:1440, brand statement plus the description
   ====================================================================== */

.bjp-about-intro {
	display: flex;
	justify-content: center;
	padding: 80px var(--bjp-pad-x);
	background: #ffffff;
}

.bjp-about-intro__inner {
	display: flex;
	align-items: stretch;
	gap: 32px;
}

/* 600px statement column, vertically centred against the 184px right column
   (Figma insets it 26px top and bottom). */
.bjp-about-intro__statement-wrap {
	display: flex;
	align-items: center;
	flex: 0 1 600px;
	min-width: 0;
}

.bjp-about .bjp-about-intro__statement {
	margin: 0;
	font-family: var(--bjp-font);
	/* 36px/44px on both frames; -0.72px letter-spacing is -0.02em. */
	font-size: 36px;
	font-weight: 700;
	line-height: 44px;
	letter-spacing: -0.02em;
	color: var(--bjp-color-text);
}

.bjp-about-intro__brand {
	color: var(--bjp-color-accent);
}

/* Two paragraphs now, not a lead line over a stat row, so they sit closer
   together than the 32px the stats needed. */
.bjp-about-intro__column {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1 1 648px;
	min-width: 0;
}

.bjp-about .bjp-about-intro__copy {
	margin: 0;
	font-family: var(--bjp-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--bjp-color-text);
}

.bjp-about .bjp-about-intro__description {
	margin: 0;
	font-family: var(--bjp-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--bjp-color-text);
}

/* ======================================================================
   PROBLEM — node 4028:806 / 4028:1456
   ====================================================================== */

.bjp-about-problem {
	display: flex;
	justify-content: center;
	padding: 80px var(--bjp-pad-x);
	background: #ffffff;
}

.bjp-about-problem__inner {
	display: flex;
	align-items: stretch;
	gap: 32px;
}

/* The copy sits at the top and the CTA at the bottom of a column whose height
   is set by the three 130px rows opposite it. */
.bjp-about-problem__column {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	flex: 0 1 624px;
	min-width: 0;
}

.bjp-about-problem__copy-wrap {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.bjp-about .bjp-about-problem__title {
	margin: 0;
	font-family: var(--bjp-font);
	font-size: 36px;
	font-weight: 700;
	line-height: 44px;
	letter-spacing: -0.02em;
	color: var(--bjp-color-text);
}

.bjp-about .bjp-about-problem__copy {
	margin: 0;
	font-family: var(--bjp-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--bjp-color-text);
}

.bjp-about-problem__actions {
	display: flex;
	align-items: flex-start;
}

/* Three stacked 624x130 rows. Figma's strokes are inside the nodes and the
   rows abut, so the shared edges read as seams rather than collapsing.

   Figma measures its 41px inset from the frame edge with the stroke drawn
   inside it, so border-box padding is 40 plus the 1px border — 41 of padding
   would make each row 132 and push the rest of the page down. */
.bjp-about .bjp-about-problem__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	flex: 1 1 624px;
	min-width: 0;
}

.bjp-about .bjp-about-problem__item {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 130px;
	padding: 40px;
	border: 1px solid var(--bjp-color-border);
	background: #ffffff;
}

.bjp-about-problem__icon {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	color: var(--bjp-color-accent);
}

.bjp-about-problem__label {
	font-family: var(--bjp-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
	color: var(--bjp-color-text);
}

/* ======================================================================
   SOLUTION — node 4028:683 / 4028:1486, five-step carousel
   ====================================================================== */

.bjp-about-solution {
	display: flex;
	justify-content: center;
	padding: 80px var(--bjp-pad-x);
	background: #ffffff;
}

.bjp-about-solution > .bjp-about__container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 48px;
	min-width: 0;
}

.bjp-about-solution__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	width: 100%;
}

.bjp-about-solution__intro {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 0 1 720px;
	min-width: 0;
}

.bjp-about .bjp-about-solution__title {
	margin: 0;
	font-family: var(--bjp-font);
	font-size: 36px;
	font-weight: 700;
	line-height: 44px;
	letter-spacing: -0.02em;
	color: var(--bjp-color-text);
}

.bjp-about .bjp-about-solution__lede {
	margin: 0;
	font-family: var(--bjp-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--bjp-color-text);
}

/* Two 52x44 controls, 16px apart (Figma 4028:689). Prev renders in its
   disabled state in the comp: filled, white glyph, no border. */
.bjp-about-solution__nav {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
}

.bjp-about .bjp-about-solution__nav-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 44px;
	padding: 12px 16px;
	border-radius: 8px;
	cursor: pointer;
}

.bjp-about .bjp-about-solution__nav-button--prev {
	border: 0;
	background: var(--bjp-color-border);
	color: #ffffff;
}

.bjp-about .bjp-about-solution__nav-button--next {
	border: 1px solid var(--bjp-color-border);
	background: #ffffff;
	color: var(--bjp-color-text);
}

.bjp-about .bjp-about-solution__nav-button[disabled] {
	border: 0;
	background: var(--bjp-color-border);
	color: #ffffff;
	cursor: default;
}

/* The step row is 1408px wide inside a 1280px column, so both Figma frames
   clip the fifth card. Bleeding the track to the viewport edge reproduces
   that and leaves the overflow scrollable. */
.bjp-about .bjp-about-solution__steps {
	margin: 0;
	padding: 0 var(--bjp-pad-x) 0 0;
	list-style: none;
	display: flex;
	align-items: flex-start;
	gap: 32px;
	width: 100%;
	margin-right: calc(-1 * var(--bjp-pad-x));
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.bjp-about .bjp-about-solution__steps::-webkit-scrollbar {
	display: none;
}

/* 256px cards. The inactive ones drop 32px so the active card's border box
   overhangs them top and bottom, as in the comp. */
.bjp-about .bjp-about-solution__step {
	margin: 0;
	flex: 0 0 256px;
	padding-top: 32px;
	scroll-snap-align: start;
}

.bjp-about .bjp-about-solution__step.is-active {
	padding-top: 0;
}

.bjp-about-solution__step-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	height: 100%;
}

/* 19 plus the 1px border is Figma's 20px inset. */
.bjp-about-solution__step.is-active .bjp-about-solution__step-inner {
	padding: 19px;
	border: 1px solid var(--bjp-color-border);
	background: #ffffff;
}

/* A 48px box that centres each icon. Icons 03 and 04 export at 36x44 and
   44x44 because Figma insets them inside their 48px frames. */
.bjp-about-solution__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
}

.bjp-about .bjp-about-solution__icon img {
	display: block;
}

.bjp-about-solution__meta {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
}

.bjp-about .bjp-about-solution__dot {
	display: block;
	flex: 0 0 auto;
}

.bjp-about-solution__number {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	white-space: nowrap;
	color: var(--bjp-color-text);
}

.bjp-about-solution__rule {
	flex: 1 1 0;
	min-width: 0;
	height: 1px;
	background: var(--bjp-color-border);
}

.bjp-about .bjp-about-solution__step-title {
	margin: 0;
	font-family: var(--bjp-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
	color: var(--bjp-color-text);
}

.bjp-about .bjp-about-solution__step-copy {
	margin: 0;
	font-family: var(--bjp-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--bjp-color-text);
}

/* ======================================================================
   VALUES — node 4028:748 / 4028:1551, three value cards
   ====================================================================== */

.bjp-about-values {
	display: flex;
	justify-content: center;
	padding: 80px var(--bjp-pad-x);
	background: #ffffff;
}

.bjp-about-values > .bjp-about__container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 48px;
}

.bjp-about-values__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	width: 100%;
}

.bjp-about-values__intro {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 0 1 720px;
	min-width: 0;
}

.bjp-about .bjp-about-values__title {
	margin: 0;
	font-family: var(--bjp-font);
	font-size: 36px;
	font-weight: 700;
	line-height: 44px;
	letter-spacing: -0.02em;
	color: var(--bjp-color-text);
}

.bjp-about .bjp-about-values__lede {
	margin: 0;
	font-family: var(--bjp-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--bjp-color-text);
}

.bjp-about-values__actions {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

/* Three 426.67px cards fill the 1280px column exactly, with no gap — the
   strokes are inside the nodes, so the shared edges read as seams. Padding is
   40 plus the 1px border for Figma's 41px inset. */
.bjp-about-values__cards {
	display: flex;
	align-items: stretch;
	width: 100%;
}

.bjp-about-values__card {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	padding: 40px;
	border: 1px solid var(--bjp-color-border);
	background: #ffffff;
}

.bjp-about-values__card-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
}

.bjp-about-values__icon {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	color: var(--bjp-color-accent);
}

.bjp-about .bjp-about-values__card-title {
	margin: 0;
	font-family: var(--bjp-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
	color: var(--bjp-color-text);
}

.bjp-about .bjp-about-values__card-copy {
	margin: 0;
	font-family: var(--bjp-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--bjp-color-text);
}

/* ======================================================================
   COMMITMENT — node 4028:836 / 4028:1267, dark closing CTA
   ====================================================================== */

.bjp-about-commitment {
	display: flex;
	justify-content: center;
	padding: 80px var(--bjp-pad-x);
	background: #ffffff;
}

.bjp-about-commitment__card {
	padding: 40px;
	border-radius: 16px;
	background: var(--bjp-color-text);
}

.bjp-about-commitment__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.bjp-about .bjp-about-commitment__title {
	margin: 0;
	width: 100%;
	font-family: var(--bjp-font);
	/* 44px/55px at 1440, 36px/44px at 390. */
	font-size: clamp(36px, 3.0556vw, 44px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: #ffffff;
}

/* The 185x40 button uses the header's tighter 8/12 padding, not the hero's. */
.bjp-about a.bjp-about-commitment__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 8px;
	background: var(--bjp-color-primary);
	font-family: var(--bjp-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: #ffffff;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.bjp-about a.bjp-about-commitment__button:hover,
.bjp-about a.bjp-about-commitment__button:focus {
	background: var(--bjp-color-primary-hover);
	color: #ffffff;
}

/* ======================================================================
   MOBILE — the 390 frame, 4028:1179
   ====================================================================== */

@media (max-width: 1024px) {

	/* --- hero --------------------------------------------------------- */

	/* The 390 frame leaves a 10px gap below the header (hero starts at y94,
	   header ends at 84), then 32px of frame padding plus the intro block's
	   own 27.5px inset. The photo band butts straight onto the copy, and the
	   frame's 32px of bottom padding is overlapped by the next section in the
	   mockup, so there is nothing to reserve below it. */
	.bjp-about-hero__intro {
		padding: 69.5px var(--bjp-pad-x) 27.5px;
	}

	/* The 390 frame renders the band in full. */
	.bjp-about-hero__media {
		height: 405px;
	}

	.bjp-about-hero__copy--desktop {
		display: none;
	}

	.bjp-about-hero__copy--mobile {
		display: block;
	}

	/* The 390 frame puts 48px between the copy and the buttons, where the
	   1440 frame uses 24. */
	.bjp-about-hero__body {
		gap: 48px;
	}

	/* Both CTAs go full width and stack. */
	.bjp-about-hero__actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.bjp-about a.bjp-about__button {
		width: 100%;
	}

	/* --- intro -------------------------------------------------------- */

	.bjp-about-intro__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}

	.bjp-about-intro__statement-wrap,
	.bjp-about-intro__column {
		flex: 0 0 auto;
	}

	/* --- problem ------------------------------------------------------ */

	.bjp-about-problem__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}

	.bjp-about-problem__column {
		flex: 0 0 auto;
		justify-content: flex-start;
	}

	.bjp-about .bjp-about-problem__list {
		flex: 0 0 auto;
	}

	/* --- solution ----------------------------------------------------- */

	.bjp-about-solution__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.bjp-about-solution__intro {
		flex: 0 0 auto;
		width: 100%;
	}

	/* --- values ------------------------------------------------------- */

	.bjp-about-values__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.bjp-about-values__intro {
		flex: 0 0 auto;
		width: 100%;
	}

	.bjp-about-values__actions {
		width: 100%;
	}

	.bjp-about-values__cards {
		flex-direction: column;
	}

	.bjp-about-values__card {
		flex: 0 0 auto;
	}

	/* --- commitment --------------------------------------------------- */

	.bjp-about .bjp-about-commitment__title {
		line-height: 1.2222;
	}
}