/* BJP Contact / Become a Partner page — CreaFide, Figma file
   1xQDeCr07QFZxlMTMZNXxJ:
     desktop "Group 8" 6263:195 (1443x1587)
     mobile  "Group 9" 6263:196 (390x2525)

     form   y0     761   accent band, copy beside the enquiry form
     info   y716   448   "Get in touch with CreaFide™" and the contact card
     why    y1135  452   "Why reach out?" plus three collapsed-border cards

   Those y offsets overlap (761 > 716, and 1164 > 1135) because the export is
   a Group of hand-placed sections rather than an auto-layout frame. Each
   section's own content height is exact — 761, 448 and 452 all reconcile to
   the pixel — so the overlap is placement slop in the file, and the sections
   stack here as they must on a page.

   The 1440 frame uses 80px gutters and caps content at 1280; --bjp-pad-x
   spans that down to the 390 frame's 20px. Tokens live on .bjp-contact; each
   section owns its own geometry. */

.bjp-contact {
	/* --- shared tokens ------------------------------------------------- */
	--bjp-color-text: #231F20;
	--bjp-color-primary: #156082;
	--bjp-color-primary-hover: #0f4a63;
	--bjp-color-accent: #67C7C7;
	--bjp-color-border: #EAECF0;
	/* Contact card and "Why reach out?" band fill. */
	--bjp-color-surface: #F9FAFB;
	/* Input borders are the body colour at 35%, not a flat grey. */
	--bjp-color-field-border: rgba(35, 31, 32, 0.35);
	--bjp-color-error: #B32318;
	--bjp-color-success: #085D3A;
	--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 accent and grey
   bands reach 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-contact.bjp-contact {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.bjp-contact *,
.bjp-contact *::before,
.bjp-contact *::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-contact__container {
	width: 100%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

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

.bjp-contact .bjp-contact__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 16px;
	border: 0;
	border-radius: 8px;
	background: var(--bjp-color-primary);
	color: #ffffff;
	font-family: var(--bjp-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.bjp-contact .bjp-contact__button:hover,
.bjp-contact .bjp-contact__button:focus {
	background: var(--bjp-color-primary-hover);
	color: #ffffff;
}

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

/* ======================================================================
   FORM SECTION — accent band, copy beside the enquiry form
   ====================================================================== */

.bjp-contact-form {
	padding: 80px var(--bjp-pad-x);
	background: var(--bjp-color-accent);
}

/* The frame wraps rather than switching layout: the copy column flexes from a
   256px minimum and the form column is a fixed 970px that may shrink. */
.bjp-contact-form__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 32px;
}

.bjp-contact-form__column {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	min-width: 256px;
}

.bjp-contact-form__heading-group {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 24px;
	align-self: stretch;
}

.bjp-contact-form__title {
	margin: 0;
	font-size: 36px;
	font-weight: 700;
	line-height: 44px;
	color: var(--bjp-color-text);
}

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

.bjp-contact-form__form {
	display: flex;
	flex: 0 1 970px;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	max-width: 100%;
}

/* Name / Company / Email / Phone, two to a row. */
.bjp-contact-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	align-self: stretch;
}

.bjp-contact-form__field {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	align-self: stretch;
}

.bjp-contact-form__label {
	align-self: stretch;
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;
	/* The comp uses pure black for field labels, not the body colour. */
	color: #000000;
}

.bjp-contact-form__input,
.bjp-contact-form__textarea {
	align-self: stretch;
	width: 100%;
	padding: 0 14px;
	border: 1px solid var(--bjp-color-field-border);
	border-radius: 4px;
	background: #ffffff;
	font-family: var(--bjp-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--bjp-color-text);
}

.bjp-contact-form__input {
	height: 50px;
}

.bjp-contact-form__textarea {
	height: 110px;
	padding: 13px 14px;
	resize: vertical;
}

.bjp-contact-form__input:focus,
.bjp-contact-form__textarea:focus {
	outline: 2px solid var(--bjp-color-primary);
	outline-offset: 1px;
	border-color: var(--bjp-color-primary);
}

.bjp-contact-form__input[aria-invalid='true'],
.bjp-contact-form__textarea[aria-invalid='true'] {
	border-color: var(--bjp-color-error);
}

/* The Message label and its textarea are direct children of the 32px column in
   the 1440 frame, so they sit 32px apart there while the six other fields use
   16px. The 390 frame wraps them properly at 16px, which the mobile block
   below restores. Deliberate replication, not an oversight. */
.bjp-contact-form__field--message {
	gap: 32px;
}

.bjp-contact-form__error {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: var(--bjp-color-error);
}

/* Status notices sit above the fields, inside the form column. */
.bjp-contact-form__notice {
	align-self: stretch;
	padding: 16px;
	border-radius: 8px;
	border: 1px solid currentColor;
	background: #ffffff;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

.bjp-contact-form__notice--success {
	color: var(--bjp-color-success);
}

.bjp-contact-form__notice--error {
	color: var(--bjp-color-error);
}

.bjp-contact-form__notice p {
	margin: 0;
}

.bjp-contact-form__notice ul {
	margin: 8px 0 0;
	padding-left: 20px;
}

/* Honeypot: present for bots, gone for people and for screen readers. */
.bjp-contact-form__trap {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ======================================================================
   INFO SECTION — "Get in touch" beside the contact card
   ====================================================================== */

.bjp-contact-info {
	padding: 64px var(--bjp-pad-x);
	background: #ffffff;
}

.bjp-contact-info__inner {
	display: flex;
	align-items: center;
	gap: 64px;
}

.bjp-contact-info__column {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
}

.bjp-contact-info__heading-group {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 24px;
	align-self: stretch;
}

.bjp-contact-info__title {
	margin: 0;
	font-size: 48px;
	font-weight: 700;
	line-height: 60px;
	color: var(--bjp-color-text);
}

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

.bjp-contact-info__cards {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	align-self: stretch;
	flex-wrap: wrap;
}

.bjp-contact-info__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 351px;
	min-width: 256px;
	max-width: 600px;
	padding: 24px;
	border-radius: 16px;
	background: var(--bjp-color-surface);
}

.bjp-contact-info__icon {
	display: block;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	color: var(--bjp-color-accent);
}

.bjp-contact-info__card-text {
	align-self: stretch;
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	color: var(--bjp-color-text);
}

.bjp-contact a.bjp-contact-info__card-value {
	color: inherit;
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-underline-position: from-font;
}

.bjp-contact a.bjp-contact-info__card-value:hover,
.bjp-contact a.bjp-contact-info__card-value:focus {
	color: var(--bjp-color-primary);
}

/* ======================================================================
   WHY REACH OUT — centred heading over three collapsed-border cards
   ====================================================================== */

.bjp-contact-why {
	padding: 80px var(--bjp-pad-x);
	background: var(--bjp-color-surface);
}

.bjp-contact-why__inner {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.bjp-contact-why__head {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 64px;
}

.bjp-contact-why__title {
	margin: 0;
	font-size: 48px;
	font-weight: 700;
	line-height: 60px;
	color: var(--bjp-color-text);
	text-align: center;
}

/* Cards sit edge to edge with their own 1px borders, so the shared edge reads
   as a seam and 40px of padding plus the border gives Figma's 41px inset. */
.bjp-contact-why__cards {
	display: flex;
	align-items: stretch;
	width: 100%;
}

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

.bjp-contact-why__card-inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
}

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

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

/* ======================================================================
   TABLET — the info row stacks before the mobile frame takes over
   ====================================================================== */

@media (max-width: 1200px) {
	.bjp-contact-info__inner {
		gap: 48px;
	}
}

/* ======================================================================
   MOBILE — measured against the 390 frame (6263:196)
   ====================================================================== */

@media (max-width: 1024px) {

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

	/* The 390 frame keeps this heading at 36/44 weight 700, unlike the two
	   headings below it, which drop to 600. */
	.bjp-contact-form__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.bjp-contact-form__form {
		flex: 1 1 auto;
		width: 100%;
	}

	/* One column, and the 390 frame tightens the gap between stacked fields
	   from 32px to 10px. */
	.bjp-contact-form__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	/* Mobile wraps the Message label and textarea properly, at the same 16px
	   the other fields use. */
	.bjp-contact-form__field--message {
		gap: 16px;
	}

	.bjp-contact-form__textarea {
		height: 180px;
	}

	/* --- info --------------------------------------------------------- */

	.bjp-contact-info__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 64px;
	}

	.bjp-contact-info__title {
		font-size: 36px;
		font-weight: 600;
		line-height: 44px;
	}

	.bjp-contact-info__cards {
		flex-direction: column;
	}

	.bjp-contact-info__card {
		width: auto;
		align-self: stretch;
	}

	/* --- why reach out ------------------------------------------------ */

	.bjp-contact-why__head {
		justify-content: flex-start;
	}

	.bjp-contact-why__title {
		font-size: 36px;
		font-weight: 600;
		line-height: 44px;
		text-align: left;
	}

	.bjp-contact-why__cards {
		flex-direction: column;
	}

	.bjp-contact-why__card {
		flex: 0 0 auto;
	}
}