/* =====================================================================
 * Brink Impact Hero
 * Base styles. Everything colour, size and spacing related is also
 * exposed as an Elementor control, so these are defaults only.
 * ================================================================== */

.bh-hero {
	position: relative;
	display: flex;
	width: 100%;
	background-color: #ffffff;
}

/* ---------- Background layers ----------
   The layers live in their own clipped wrapper. That keeps the rainbow from
   spilling out while still letting an absolutely positioned form overhang the
   bottom of the section. */

.bh-hero__layers {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.bh-hero__layer {
	position: absolute;
	pointer-events: none;
	background-repeat: no-repeat;
}

.bh-hero__layer--photo {
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	z-index: 1;
	background-size: cover;
	background-position: center center;
}

/* The shadow layer is a solid panel sitting over the text column. It casts a
   soft box-shadow off its right edge onto the photo, so the two sides meet in
   a feather instead of a hard seam. Every value is an Elementor control. */
.bh-hero__layer--shadow {
	top: 0;
	left: 0;
	width: 48%;
	height: 100%;
	z-index: 2;
}

.bh-hero__layer--shadow-box {
	background-color: #ffffff;
	box-shadow: 60px 0 90px 30px rgba(255, 255, 255, 0.92);
}

.bh-hero__layer--rainbow {
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 340px;
	z-index: 3;
	background-size: 100% auto;
	background-position: bottom center;
}

/* ---------- Shell ---------- */

.bh-hero__inner {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding: 80px 24px;
}

.bh-hero__content {
	--bh-align: left;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 600px;
	gap: 24px;
	text-align: left;
}

.bh-hero__part {
	min-width: 0;
}

/* Per device visibility, matching Elementor default breakpoints. */
@media (min-width: 1025px) {
	.bh-hide-desktop { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.bh-hide-tablet { display: none !important; }
}
@media (max-width: 767px) {
	.bh-hide-mobile { display: none !important; }
}

/* ---------- Guarantee badge ---------- */

.bh-guarantee {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	justify-content: var(--bh-align, flex-start);
	gap: 22px;
	text-align: left;
}

.bh-guarantee__image {
	flex: 0 0 auto;
	line-height: 0;
}

.bh-guarantee__image img {
	display: block;
	width: 120px;
	height: auto;
}

.bh-guarantee__divider {
	flex: 0 0 1px;
	align-self: stretch;
	width: 1px;
	background-color: #d7dee8;
}

.bh-guarantee__body > * {
	margin: 0;
}

.bh-guarantee__eyebrow {
	display: block;
	color: #2c7cc0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.4;
}

.bh-guarantee__title {
	color: #123c6d;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	margin-bottom: 4px;
}

.bh-guarantee__text {
	color: #3f4a5a;
	font-size: 14px;
	line-height: 1.5;
}

/* ---------- Subtitle ---------- */

.bh-hero__subtitle {
	margin: 0;
	color: #2c7cc0;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.5;
}

/* ---------- Title ---------- */

.bh-hero__title {
	margin: 0;
	color: #123c6d;
	font-size: 68px;
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.02em;
}

.bh-hero__title .bh-highlight,
.bh-hero__title span {
	color: #2c7cc0;
}

/* ---------- Description ---------- */

.bh-hero__description {
	margin: 0;
	color: #3f4a5a;
	font-size: 18px;
	line-height: 1.6;
}

/* ---------- Feature list ---------- */

.bh-features {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bh-features__item {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	justify-content: var(--bh-align, flex-start);
	gap: 12px;
	margin: 0;
}

.bh-features__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: #e4f0fa;
	color: #2c7cc0;
	font-size: 11px;
	line-height: 1;
}

.bh-features__icon svg {
	width: 11px;
	height: 11px;
	fill: currentColor;
}

.bh-features__text {
	color: #2a3444;
	font-size: 16px;
	line-height: 1.5;
}

/* ---------- Button and note ---------- */

.bh-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	justify-content: var(--bh-align, flex-start);
	gap: 18px;
}

.bh-button {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 10px;
	white-space: nowrap;
	padding: 20px 34px;
	border-radius: 10px;
	background-image: linear-gradient(135deg, #2c7cc0 0%, #155a9c 100%);
	color: #ffffff;
	font-size: 17px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 14px 30px -12px rgba(21, 90, 156, 0.65);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.bh-button:hover,
.bh-button:focus {
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 18px 34px -12px rgba(21, 90, 156, 0.75);
}

.bh-button:focus-visible {
	outline: 3px solid #123c6d;
	outline-offset: 3px;
}

.bh-button__icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.bh-button__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.bh-cta__arrow {
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
}

.bh-cta__arrow img {
	display: block;
	width: 52px;
	height: auto;
}

.bh-cta__note {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 200px;
	color: #2a3444;
	font-size: 15px;
	font-style: italic;
	line-height: 1.4;
	text-align: left;
	overflow-wrap: break-word;
}

/* ---------- Review badge ---------- */

.bh-reviews {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border: 1px solid #e6eaf0;
	border-radius: 12px;
	background-color: #ffffff;
	text-decoration: none;
	box-shadow: 0 10px 24px -18px rgba(18, 60, 109, 0.55);
}

.bh-reviews__avatars {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
}

.bh-reviews__avatars img {
	width: 34px;
	height: 34px;
	border: 2px solid #ffffff;
	border-radius: 50%;
	object-fit: cover;
}

.bh-reviews__avatars img + img {
	margin-left: -10px;
}

.bh-reviews__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: left;
}

.bh-reviews__stars {
	display: inline-flex;
	gap: 2px;
	color: #f5b301;
	font-size: 15px;
	line-height: 1;
}

.bh-reviews__stars svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

.bh-reviews__text {
	color: #2a3444;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.bh-reviews__icon {
	display: inline-flex;
	align-items: center;
	margin-left: auto;
	padding-left: 10px;
	color: #2c7cc0;
	font-size: 14px;
	line-height: 1;
}

.bh-reviews__icon svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* ---------- Certification logos ---------- */

.bh-certs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	justify-content: var(--bh-align, flex-start);
	gap: 18px;
}

.bh-certs img {
	display: block;
	width: auto;
	height: 42px;
	object-fit: contain;
}

/* ---------- Form ---------- */

.bh-form {
	padding: 22px 20px;
	border-radius: 14px;
	background-color: #f5f8fc;
	box-shadow: 0 -10px 40px -24px rgba(18, 60, 109, 0.6);
	text-align: left;
}

.bh-form__title {
	margin: 0 0 16px;
	color: #2c7cc0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
}

.bh-form__placeholder {
	display: block;
	padding: 30px 0;
	color: #6b7684;
	text-align: center;
}

/* ---------- Form positioning ----------
   Position itself is set per device by the Elementor control, so the form can
   float free on desktop and sit back in the stack on mobile. The transform is
   always live so Fine Tune X/Y works in either mode. */

.bh-hero__part--form {
	--bh-form-x: 0px;
	--bh-form-y: 0px;
	position: relative;
	transform: translate(var(--bh-form-x), var(--bh-form-y));
}

/* ---------- HubSpot ----------
   Targets the classic v2 embed markup. HubSpot loads its own stylesheet after
   ours, so the overrides that fight its layout rules carry !important. Turn the
   "Override HubSpot Styling" switch off to drop this class and style in HubSpot
   instead. */

.bh-form--hs .hs-form,
.bh-form--hs form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* HubSpot floats its column rows. Flex them instead so the two-up rows in the
   design line up and collapse cleanly on mobile. */
.bh-form--hs .form-columns-1,
.bh-form--hs .form-columns-2,
.bh-form--hs .form-columns-3 {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	max-width: none !important;
	width: 100% !important;
}

.bh-form--hs .form-columns-2 > .hs-form-field {
	flex: 1 1 calc(50% - 7px);
	min-width: 0;
}

.bh-form--hs .form-columns-3 > .hs-form-field {
	flex: 1 1 calc(33.333% - 10px);
	min-width: 0;
}

.bh-form--hs .form-columns-1 > .hs-form-field,
.bh-form--hs .hs-form-field {
	width: 100% !important;
	float: none !important;
	padding: 0 !important;
	margin: 0;
}

.bh-form--hs .hs-form-field > label {
	display: block;
	margin-bottom: 6px;
	color: #123c6d;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.bh-form--hs .hs-form-field > label .hs-form-required {
	margin-left: 2px;
	color: #c8493c;
}

/* HubSpot wraps every control in .input and gives it a negative margin. */
.bh-form--hs .input {
	margin: 0 !important;
}

.bh-form--hs .hs-input {
	width: 100% !important;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid #dde5ef;
	border-radius: 8px;
	background-color: #eef3f9;
	color: #2a3444;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bh-form--hs .hs-input::placeholder {
	color: #93a1b3;
}

.bh-form--hs .hs-input:focus {
	border-color: #2c7cc0;
	box-shadow: 0 0 0 3px rgba(44, 124, 192, 0.15);
	outline: none;
}

.bh-form--hs select.hs-input {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 38px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7684' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px 16px;
	cursor: pointer;
}

.bh-form--hs textarea.hs-input {
	min-height: 120px;
	resize: vertical;
}

/* Checkbox and radio lists */
.bh-form--hs .inputs-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bh-form--hs .inputs-list > li {
	margin-bottom: 6px;
}

.bh-form--hs .hs-form-booleancheckbox-display,
.bh-form--hs .hs-form-checkbox-display,
.bh-form--hs .hs-form-radio-display {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	line-height: 1.45;
}

.bh-form--hs .hs-form-booleancheckbox-display input,
.bh-form--hs .hs-form-checkbox-display input,
.bh-form--hs .hs-form-radio-display input {
	width: auto !important;
	margin-top: 3px;
}

/* Submit */
.bh-form--hs .hs_submit,
.bh-form--hs .actions {
	margin: 4px 0 0;
	padding: 0;
}

.bh-form--hs .hs-button,
.bh-form--hs input[type="submit"].hs-button {
	display: block;
	width: 100%;
	padding: 14px 20px;
	border: 0;
	border-radius: 8px;
	background-color: #c8493c;
	color: #ffffff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.bh-form--hs .hs-button:hover,
.bh-form--hs .hs-button:focus {
	background-color: #b03e32;
}

.bh-form--hs .hs-button:focus-visible {
	outline: 3px solid #123c6d;
	outline-offset: 2px;
}

/* Validation and consent text */
.bh-form--hs .hs-error-msgs {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.bh-form--hs .hs-error-msgs label {
	color: #c8493c;
	font-size: 12px;
	font-weight: 500;
}

.bh-form--hs .hs-input.error,
.bh-form--hs .hs-input.invalid {
	border-color: #c8493c;
	background-color: #fdf3f2;
}

.bh-form--hs .hs-richtext,
.bh-form--hs .legal-consent-container,
.bh-form--hs .hs-field-desc {
	color: #6b7684;
	font-size: 12px;
	line-height: 1.5;
}

.bh-form--hs .submitted-message {
	padding: 20px 0;
	color: #123c6d;
	font-size: 15px;
	text-align: center;
}

@media (max-width: 1024px) {
	.bh-form--hs .form-columns-2 > .hs-form-field,
	.bh-form--hs .form-columns-3 > .hs-form-field {
		flex: 1 1 100%;
	}
}

/* Light normalising for third party form plugins dropped into the widget.
   Delete this block if the form plugin already carries its own styling. */
.bh-form input[type="text"],
.bh-form input[type="email"],
.bh-form input[type="tel"],
.bh-form input[type="number"],
.bh-form select,
.bh-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #dde5ef;
	border-radius: 8px;
	background-color: #eef3f9;
	color: #2a3444;
	font-size: 15px;
	line-height: 1.4;
}

.bh-form label {
	display: block;
	margin-bottom: 6px;
	color: #123c6d;
	font-size: 13px;
	font-weight: 600;
}

.bh-form input[type="submit"],
.bh-form button[type="submit"] {
	width: 100%;
	padding: 14px 20px;
	border: 0;
	border-radius: 8px;
	background-color: #c8493c;
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.bh-form input[type="submit"]:hover,
.bh-form button[type="submit"]:hover {
	background-color: #b03e32;
}

/* Narrow desktop: shrink the type before the layout stacks. */
@media (min-width: 1025px) and (max-width: 1280px) {
	.bh-hero__title {
		font-size: 48px;
	}
	.bh-hero__layer--photo {
		width: 45%;
	}
}

/* ---------- Responsive ----------
   The design has two layouts, desktop and phone. Tablet takes the phone
   layout rather than a squeezed desktop, so this starts at 1024px. Every
   value below is overridable per device in the Elementor panel. */
@media (max-width: 1024px) {
	.bh-hero {
		min-height: 0;
	}

	.bh-hero__inner {
		align-items: flex-start;
		padding: 0 0 40px;
	}

	.bh-hero__content {
		--bh-align: center;
		max-width: 100%;
		text-align: center;
	}

	.bh-hero__layer--photo {
		top: 0;
		right: 0;
		left: 0;
		width: 100%;
		height: 260px;
	}

	.bh-hero__layer--rainbow {
		top: 180px;
		bottom: auto;
		height: 120px;
	}

	/* On mobile the panel sits under the photo and casts upward instead of
	   sideways. Adjust via the Box Shadow control if the photo crop changes. */
	.bh-hero__layer--shadow {
		top: 200px;
		width: 100%;
		height: 160px;
	}

	.bh-hero__layer--shadow-box {
		box-shadow: 0 -40px 60px 20px rgba(255, 255, 255, 0.92);
	}

	.bh-hero__part--guarantee {
		margin-top: 90px;
	}

	.bh-guarantee {
		padding: 12px 14px;
		border-radius: 10px;
		background-color: rgba(255, 255, 255, 0.94);
		text-align: left;
	}

	.bh-hero__title {
		font-size: 32px;
	}

	.bh-hero__description {
		font-size: 16px;
	}

	.bh-features__item {
		justify-content: flex-start;
		text-align: left;
	}

	/* Phone: button, doodle arrow and note stay on one line, the button keeps
	   its size and the note takes whatever is left. */
	.bh-cta {
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		gap: 10px;
	}

	.bh-button {
		flex: 0 1 auto;
		min-width: 0;
		padding: 16px 24px;
		font-size: 15px;
	}

	.bh-cta__arrow {
		flex: 0 0 auto;
	}

	.bh-cta__arrow img {
		width: 38px;
	}

	.bh-cta__note {
		flex: 0 1 auto;
		min-width: 0;
		max-width: 150px;
		font-size: 12px;
		line-height: 1.35;
		text-align: left;
	}

	.bh-certs {
		justify-content: center;
		gap: 14px;
	}

	.bh-certs img {
		height: 34px;
	}
}

/* Tablet refinement: same stacked layout as the phone, just with more room
   to breathe. Sits after the shared block so it wins on 768 to 1024. */
@media (min-width: 768px) and (max-width: 1024px) {
	.bh-hero__inner {
		padding: 0 0 56px;
	}

	.bh-hero__content {
		max-width: 620px;
		margin: 0 auto;
	}

	.bh-hero__layer--photo {
		height: 420px;
	}

	.bh-hero__layer--rainbow {
		top: 320px;
		height: 160px;
	}

	.bh-hero__layer--shadow {
		top: 340px;
		height: 180px;
	}

	.bh-hero__part--guarantee {
		margin-top: 150px;
	}

	.bh-hero__title {
		font-size: 42px;
	}

	.bh-hero__description {
		font-size: 17px;
	}

	.bh-button {
		padding: 18px 30px;
		font-size: 16px;
	}

	.bh-cta__arrow img {
		width: 46px;
	}

	.bh-cta__note {
		max-width: 200px;
		font-size: 14px;
	}

	.bh-certs img {
		height: 40px;
	}
}