/* ==========================================================================
   HIMPEL Contact form — heading and form beside a brand panel with contact details
   --------------------------------------------------------------------------
   Everything is scoped under .himpel-cform (plus the two helper classes the
   overlap effect needs). Nothing targets the theme or any global element —
   including the Formidable rules further down, which only reach the one form
   inside this section.
   ========================================================================== */

.himpel-cform {
	/* Brand tokens, overridden inline when global colours are bound. */
	--himpel-primary: #0b7347;
	--himpel-primary-dark: #095c39;
	--himpel-secondary: #f3f4ea;
	--himpel-white: #ffffff;
	--himpel-dark: #121212;

	position: relative;
	/* Sits above the pinned hero so it can scroll over the top of it. */
	z-index: 2;
	width: 100%;
	background-color: var(--hcf-bg, var(--himpel-white));
	box-sizing: border-box;
}

.himpel-cform *,
.himpel-cform *::before,
.himpel-cform *::after {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Overlap reveal
   Duplicated from himpel-products.css on purpose: the Contact page never loads
   that stylesheet, and the declarations are identical, so a page carrying both
   sections is unaffected.
   -------------------------------------------------------------------------- */
.himpel-overlap-wrap {
	position: relative;
}

.himpel-sticky-host {
	position: sticky;
	top: var(--himpel-sticky-top, 0px);
	z-index: 0;
}

/*
 * himpel-overlap.js re-parents both branches into this wrapper as a plain
 * block, which becomes a direct child of Elementor's flex container. A flex
 * item's default min-width is its content's own minimum, not 0 — Elementor
 * gives its own .elementor-widget children min-width: 0 to prevent exactly
 * this, but a script-inserted wrapper carries no such class. Left alone, the
 * wrapper stayed at its intrinsic desktop width and sat off screen to the
 * right on any viewport narrower than that.
 *
 * .himpel-sticky-host deliberately carries none of this — see himpel-overlap.css.
 */
.himpel-overlap-wrap {
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   Boxed shell
   -------------------------------------------------------------------------- */
.himpel-cform__inner {
	width: 100%;
	max-width: var(--hcf-max, 1340px);
	margin: 0 auto;
	padding: var(--hcf-py-d, 80px) var(--hcf-px-d, 40px);
}

.himpel-cform__grid {
	display: grid;
	grid-template-columns: var(--hcf-cols, 1fr 1.05fr);
	gap: var(--hcf-gap, 48px);
	align-items: stretch;
}

.himpel-cform__col {
	/* A grid item's automatic minimum size is its content's; without this a
	   wide form field could push the column past its share. */
	min-width: 0;
}

/* --------------------------------------------------------------------------
   Heading
   -------------------------------------------------------------------------- */
.himpel-cform__head {
	margin-bottom: var(--hcf-head-gap, 34px);
}

/* The <h2> is the pill itself. */
.himpel-cform__eyebrow {
	display: inline-flex;
	align-items: center;
	margin: 0 0 var(--hcf-gap-eyebrow, 20px);
	padding: 8px 18px;
	border: 1px solid var(--hcf-pill-border, rgba(18, 18, 18, 0.18));
	border-radius: 100px;
	color: var(--hcf-pill-color, var(--himpel-dark));
	font-size: var(--hcf-eyebrow-d, 14px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.himpel-cform__eyebrow::before {
	content: "";
	width: 7px;
	height: 7px;
	margin-right: 9px;
	border-radius: 50%;
	background-color: var(--himpel-primary);
	flex: 0 0 auto;
}

.himpel-cform__title {
	margin: 0;
	padding: 0;
	max-width: var(--hcf-title-mw, 18ch);
	/* Inherits the Liquid theme's H3 typography; only scale and colour here. */
	color: var(--hcf-title-color, var(--himpel-dark));
	font-size: var(--hcf-title-d, 40px);
	font-weight: 600;
	line-height: 1.16;
	letter-spacing: -0.4px;
}

.himpel-cform__notice {
	margin: 0;
	padding: 14px 16px;
	border-radius: 10px;
	background-color: var(--himpel-secondary);
	color: var(--himpel-dark);
	font-size: 14px;
	line-height: 1.5;
}

/* ==========================================================================
   The Formidable form
   --------------------------------------------------------------------------
   Every selector below is prefixed with .himpel-cform, so this restyles the
   one form inside this section and leaves Formidable's own styling — and any
   other form on the site — exactly as it was.
   ========================================================================== */
.himpel-cform__form .frm_forms,
.himpel-cform__form .with_frm_style {
	max-width: 100%;
}

/* Formidable ships its own field spacing; this replaces it inside the
   section so the rhythm matches the rest of the page. */
.himpel-cform__form .frm_form_field {
	margin-bottom: var(--hcf-field-gap, 18px);
}

.himpel-cform__form .frm_form_field > label,
.himpel-cform__form .frm_primary_label {
	display: block;
	margin: 0 0 7px;
	padding: 0;
	color: var(--hcf-label-color, var(--himpel-dark));
	font-size: var(--hcf-label-d, 14px);
	font-weight: 500;
	line-height: 1.3;
}

.himpel-cform__form .frm_required {
	color: var(--himpel-primary);
}

/*
 * Formidable's "hidden" label position keeps the label in the layout but sets
 * visibility: hidden, so a half-width field beside another still lines up.
 * On this form the Last Name field carries it and the label simply vanishes —
 * put it back. Changing that field's Label Position to Top in Formidable does
 * the same thing at the source; this makes the section right either way.
 */
.himpel-cform__form .frm_hidden_container .frm_primary_label {
	visibility: visible;
}

.himpel-cform__form input[type="text"],
.himpel-cform__form input[type="email"],
.himpel-cform__form input[type="tel"],
.himpel-cform__form input[type="url"],
.himpel-cform__form input[type="number"],
.himpel-cform__form input[type="password"],
.himpel-cform__form input[type="search"],
.himpel-cform__form select,
.himpel-cform__form textarea {
	width: 100%;
	padding: var(--hcf-input-pad, 13px 16px);
	border: 1px solid var(--hcf-input-border, rgba(18, 18, 18, 0.16));
	border-radius: var(--hcf-input-radius, 10px);
	background-color: var(--hcf-input-bg, var(--himpel-white));
	color: var(--himpel-dark);
	font-family: inherit;
	font-size: var(--hcf-input-d, 15px);
	line-height: 1.45;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.himpel-cform__form textarea {
	min-height: var(--hcf-textarea-h, 130px);
	resize: vertical;
}

.himpel-cform__form input::placeholder,
.himpel-cform__form textarea::placeholder {
	color: rgba(18, 18, 18, 0.4);
}

/* A ring rather than the browser default outline, so focus reads in the brand
   colour and follows the field's own rounded corners. */
.himpel-cform__form input:focus,
.himpel-cform__form select:focus,
.himpel-cform__form textarea:focus {
	outline: none;
	border-color: var(--himpel-primary);
	box-shadow: 0 0 0 3px rgba(11, 115, 71, 0.14);
}

/* --- Submit: the site's green pill, with the white arrow badge --- */
.himpel-cform__form .frm_submit {
	margin-top: var(--hcf-submit-gap, 24px);
}

/*
 * !important, deliberately.
 *
 * Formidable styles its own submit through
 * `.frm_style_…-style.with_frm_style .frm_submit button` — three classes and a
 * type, which outranks anything this file can reasonably write, and it is what
 * was painting the button blue with an 8px radius. Everything here is scoped
 * inside .himpel-cform__form, so it reaches this one form and no other form on
 * the site.
 *
 * The padding matters as much as the colour: without it the button stayed
 * 35px tall and 164px wide, and the badge below had nowhere to sit but on top
 * of the label and over the corner.
 */
.himpel-cform__form .frm_submit button,
.himpel-cform__form .frm_submit input[type="submit"] {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-height: var(--hcf-btn-h, 50px) !important;
	padding: var(--hcf-btn-pad, 8px 26px) !important;
	border: 1px solid var(--himpel-primary) !important;
	border-radius: 100px !important;
	background: var(--himpel-primary) !important;
	color: var(--himpel-white) !important;
	font-family: inherit !important;
	font-size: var(--hcf-btn-d, 16px) !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease,
		transform 0.25s ease;
}

.himpel-cform__form .frm_submit button:hover,
.himpel-cform__form .frm_submit input[type="submit"]:hover {
	background: var(--himpel-primary-dark) !important;
	border-color: var(--himpel-primary-dark) !important;
	transform: translateY(-2px);
}

.himpel-cform__form .frm_submit button:focus-visible,
.himpel-cform__form .frm_submit input[type="submit"]:focus-visible {
	outline: 2px solid var(--himpel-primary);
	outline-offset: 3px;
}

/*
 * The white arrow badge, to match the buttons elsewhere on the site.
 *
 * Only on a <button>: Formidable can render the submit as an <input>, and a
 * replaced element cannot carry pseudo-elements. That case still gets the
 * green pill, just without the badge — which is why the room for the badge is
 * added here rather than in the shared padding above.
 *
 * 8 + 34 + 16 = the 58px of right padding, so the circle always has its inset
 * and a clear gap from the label however long the label is.
 */
.himpel-cform__form .frm_submit button {
	position: relative !important;
	padding-right: 58px !important;
}

.himpel-cform__form .frm_submit button::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 8px;
	width: 34px;
	height: 34px;
	margin-top: -17px;
	border-radius: 50%;
	background-color: var(--himpel-white);
}

.himpel-cform__form .frm_submit button::after {
	content: "";
	position: absolute;
	top: 50%;
	/* Centred on the circle: 8 inset + 17 half-circle - 7.5 half-arrow. */
	right: 17.5px;
	width: 15px;
	height: 15px;
	margin-top: -7.5px;
	/* Masked, so the arrow takes the brand colour from CSS and stays correct
	   if the green is ever changed. */
	background-color: var(--himpel-primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Formidable's own messages, in the site's colours --- */
.himpel-cform__form .frm_error,
.himpel-cform__form .frm_error_style {
	margin-top: 6px;
	color: var(--hcf-error, #b3261e);
	font-size: 13px;
	line-height: 1.4;
}

.himpel-cform__form .frm_blank_field input,
.himpel-cform__form .frm_blank_field select,
.himpel-cform__form .frm_blank_field textarea {
	border-color: var(--hcf-error, #b3261e);
}

.himpel-cform__form .frm_message,
.himpel-cform__form .frm_success_style {
	padding: 16px 18px;
	border: 1px solid var(--himpel-primary);
	border-radius: var(--hcf-input-radius, 10px);
	background-color: rgba(11, 115, 71, 0.06);
	color: var(--himpel-dark);
	font-size: 15px;
	line-height: 1.55;
}

/* ==========================================================================
   Right — the brand panel, with the detail panel along its bottom edge
   ========================================================================== */
.himpel-cform__figure {
	position: relative;
	min-width: 0;
	min-height: var(--hcf-media-h, 640px);
	border-radius: var(--hcf-radius, 22px);
	/* The panel's own colour when no photo is supplied — the info boxes sit
	   straight on this rather than on a picture. */
	background-color: var(--himpel-primary);
	overflow: hidden;
}

.himpel-cform__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	/* Shows through while the image loads, so the details never sit over a
	   blank hole in the layout. */
	background-color: rgba(18, 18, 18, 0.06);
	background-position: var(--hcf-media-pos, center center);
	background-repeat: no-repeat;
	background-size: cover;
}

/*
 * The details sit straight on the photograph rather than on a panel, so the
 * photograph itself has to carry them: this darkens its lower part, fading out
 * well before the top so the picture is still a picture.
 *
 * It is the figure's ::after, which would paint above the details as the last
 * child — hence the explicit z-index on all three.
 */
.himpel-cform__figure::after {
	content: "";
	position: absolute;
	z-index: 1;
	right: 0;
	bottom: 0;
	left: 0;
	height: var(--hcf-scrim-h, 74%);
	background-image: linear-gradient(
		to top,
		rgba(0, 0, 0, var(--hcf-scrim-op, 0.82)) 0%,
		rgba(0, 0, 0, calc(var(--hcf-scrim-op, 0.82) * 0.62)) 46%,
		transparent 100%
	);
	pointer-events: none;
}

.himpel-cform__info {
	position: absolute;
	z-index: 2;
	right: var(--hcf-info-inset, 32px);
	bottom: var(--hcf-info-inset, 32px);
	left: var(--hcf-info-inset, 32px);
	display: grid;
	grid-template-columns: var(--hcf-info-cols, 1fr 1fr);
	gap: var(--hcf-info-gap, 26px 34px);
	align-items: start;
}

/*
 * Three rows, with exactly four boxes: the email across the top, the two phone
 * numbers side by side under it, and the addresses across the bottom.
 *
 * The :nth-last-child test keeps this to the four-box case; any other number
 * falls back to the plain two-column flow above. Boxes two and three need no
 * rule — they auto-place into the row between the two full-width ones.
 */
.himpel-cform__box:nth-child(1):nth-last-child(4),
.himpel-cform__box:nth-child(1):nth-last-child(4) ~ .himpel-cform__box:nth-last-child(1) {
	grid-column: 1 / -1;
}

.himpel-cform__box {
	min-width: 0;
	color: var(--himpel-white);
}

.himpel-cform__glyph {
	display: block;
	width: var(--hcf-icon, 24px);
	height: var(--hcf-icon, 24px);
	margin-bottom: 10px;
	/* A mask rather than an <img>, so the icon paints white on the panel
	   whatever colour the source file is drawn in. */
	background-color: var(--himpel-white);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: left center;
	mask-position: left center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Without mask support the glyph would paint as a solid white square, so drop
   the fill and show nothing rather than a block. */
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
	.himpel-cform__glyph {
		background-color: transparent;
	}
}

.himpel-cform__box-title {
	margin: 0 0 8px;
	padding: 0;
	color: var(--himpel-white);
	font-size: var(--hcf-btitle-d, 15px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
}

/*
 * A box's copy can be split into columns with ||| — the address uses it to put
 * the two showrooms beside each other rather than one under the other.
 *
 * Flex with a basis rather than a fixed grid, so a box with a single group
 * simply fills the width, and two groups drop to stacked on their own once the
 * box is too narrow to hold them side by side. No breakpoint needed.
 */
.himpel-cform__box-text {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hcf-group-gap, 22px 30px);
	color: var(--himpel-white);
	font-size: var(--hcf-btext-d, 13px);
	font-weight: 400;
	line-height: 1.6;
	opacity: 0.9;
}

.himpel-cform__group {
	flex: 1 1 var(--hcf-group-basis, 220px);
	min-width: 0;
}

.himpel-cform__box-text p {
	margin: 0 0 var(--hcf-para-gap, 10px);
	padding: 0;
}

.himpel-cform__box-text p:last-child {
	margin-bottom: 0;
}

.himpel-cform__box-text strong {
	font-weight: 600;
	opacity: 1;
}

/* Underlined rather than only coloured: on a panel where every word is
   already white, colour alone could not mark a link. */
.himpel-cform__link {
	color: var(--himpel-white);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	transition: color 0.2s ease;
}

/*
 * The panel is a solid brand green now rather than a darkened photo, so the
 * brand green itself is no longer an option for hover — it would all but
 * disappear against its own background. The secondary cream reads clearly
 * against the green and is the tone this plugin already uses for text set on
 * a primary-coloured panel elsewhere (the contact hero's description, for one).
 */
.himpel-cform__link:hover {
	color: var(--hcf-link-hover, var(--himpel-secondary));
	opacity: 1;
}

.himpel-cform__link:focus-visible {
	outline: 2px solid var(--himpel-white);
	outline-offset: 2px;
}

/* ==========================================================================
   Scroll-in animation
   .is-revealing is printed server-side so the pre-animation state exists in
   the first paint; the script removes it once GSAP has seeded the tween.
   ========================================================================== */
.himpel-cform.is-revealing .himpel-cform__head,
.himpel-cform.is-revealing .himpel-cform__form,
.himpel-cform.is-revealing .himpel-cform__figure,
.himpel-cform.is-revealing .himpel-cform__box {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.himpel-cform.is-revealing .himpel-cform__head,
	.himpel-cform.is-revealing .himpel-cform__form,
	.himpel-cform.is-revealing .himpel-cform__figure,
	.himpel-cform.is-revealing .himpel-cform__box {
		opacity: 1;
	}

	.himpel-cform__form .frm_submit button:hover,
	.himpel-cform__form .frm_submit input[type="submit"]:hover {
		transform: none;
	}
}

/* ==========================================================================
   Responsive — breakpoints mirror Elementor's defaults
   ========================================================================== */

/* --- Tablet: up to 1024px --- */
@media (max-width: 1024px) {
	.himpel-cform__inner {
		padding: var(--hcf-py-t, 60px) var(--hcf-px-t, 20px);
	}

	/*
	 * One column here. Side by side, a form and a photo would each get about
	 * 350px, which is too narrow for labelled fields to stay readable.
	 */
	.himpel-cform__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--hcf-gap-t, 40px);
	}

	.himpel-cform__title {
		font-size: var(--hcf-title-t, 32px);
		max-width: 24ch;
	}

	/*
	 * From here down the details sit in normal flow. When there IS a photo
	 * (`:has(.himpel-cform__media)`), the figure reserves a strip of it above
	 * them with padding, so the image grows to hold whatever the copy needs.
	 *
	 * Positioning them against the bottom, as on desktop, only works while the
	 * figure is comfortably taller than they are. Once the columns stack the
	 * details get the full width but the figure does not get any taller, and
	 * at 900px they filled all but 74px of it — which reads as the text being
	 * the panel rather than sitting at the foot of a photograph. Reserving the
	 * strip instead guarantees it whatever the copy does.
	 *
	 * Without a photo the figure is just the solid brand panel, so there is
	 * nothing to reserve room for — the min-height alone keeps it from
	 * collapsing, and the details get their own padding below instead.
	 */
	.himpel-cform__figure {
		min-height: var(--hcf-media-h-t, 560px);
	}

	.himpel-cform__figure:has(.himpel-cform__media) {
		padding-top: var(--hcf-photo-t, 260px);
	}

	/*
	 * Without a photo, the panel's min-height is usually taller than the
	 * details need — stacked to one column they no longer fill it the way
	 * they do beside the form on desktop. Centring them keeps the leftover
	 * space split evenly top and bottom instead of collecting under the last
	 * row, which read as the block being cut off rather than simply short.
	 */
	.himpel-cform__figure:not(:has(.himpel-cform__media)) {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.himpel-cform__media {
		background-position: var(--hcf-media-pos-t, center center);
	}

	/*
	 * Full height, with the fade starting in pixels from the top so the clear
	 * strip stays the same however tall the details make the figure.
	 *
	 * Below that it ramps the same way the desktop one does — clear where the
	 * photograph shows, and only reaching full strength at the very bottom
	 * edge. The middle stop is desktop's 54%-of-the-band, rewritten to measure
	 * from the top of the figure instead of the top of the band.
	 */
	.himpel-cform__figure:has(.himpel-cform__media)::after {
		top: 0;
		height: auto;
		background-image: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0) 0,
			rgba(0, 0, 0, 0) var(--hcf-photo-t, 260px),
			rgba(0, 0, 0, calc(var(--hcf-scrim-op, 0.82) * 0.62))
				calc(54% + var(--hcf-photo-t, 260px) * 0.46),
			rgba(0, 0, 0, var(--hcf-scrim-op, 0.82)) 100%
		);
	}

	/* In flow, but still above the image and the wash — which needs position
	   for the z-index to apply at all. Padded on every side by default, since
	   without a photo there is no reserved strip above to stand in for a top
	   inset; a photo's own figure padding-top already does that job, so its
	   case zeroes this one out instead of doubling it. */
	.himpel-cform__info {
		position: relative;
		right: auto;
		bottom: auto;
		left: auto;
		padding: var(--hcf-info-inset-t, 28px);
	}

	.himpel-cform__figure:has(.himpel-cform__media) .himpel-cform__info {
		padding-top: 0;
	}
}

/* --- Mobile: up to 767px --- */
@media (max-width: 767px) {
	.himpel-cform__inner {
		padding: var(--hcf-py-m, 40px) var(--hcf-px-m, 15px);
	}

	.himpel-cform__grid {
		gap: var(--hcf-gap-m, 30px);
	}

	.himpel-cform__eyebrow {
		margin-bottom: var(--hcf-gap-eyebrow-m, 16px);
		font-size: var(--hcf-eyebrow-m, 13px);
	}

	.himpel-cform__title {
		font-size: var(--hcf-title-m, 26px);
		max-width: 100%;
		line-height: 1.2;
	}

	/* Same technique as tablet, with a shorter strip of photograph — and, with
	   no photo, no reserved strip either; see the tablet breakpoint above. */
	.himpel-cform__figure {
		min-height: var(--hcf-media-h-m, 260px);
		border-radius: var(--hcf-radius-m, 16px);
	}

	.himpel-cform__figure:has(.himpel-cform__media) {
		padding-top: var(--hcf-photo-m, 190px);
	}

	/* See the tablet breakpoint above: no photo means centring the details
	   instead of letting the panel's min-height leave a gap under them. */
	.himpel-cform__figure:not(:has(.himpel-cform__media)) {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.himpel-cform__media {
		background-position: var(--hcf-media-pos-m, center center);
	}

	.himpel-cform__figure:has(.himpel-cform__media)::after {
		background-image: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0) 0,
			rgba(0, 0, 0, 0) var(--hcf-photo-m, 190px),
			rgba(0, 0, 0, calc(var(--hcf-scrim-op, 0.82) * 0.62))
				calc(54% + var(--hcf-photo-m, 190px) * 0.46),
			rgba(0, 0, 0, var(--hcf-scrim-op, 0.82)) 100%
		);
	}

	/*
	 * Two columns here as well. The phone and the email keep the full width —
	 * they are the two a visitor is most likely to act on — while the shorter
	 * pair share a row, which takes a good deal of height out of the block.
	 */
	.himpel-cform__info {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--hcf-info-gap-m, 22px 16px);
		padding: var(--hcf-info-inset-m, 20px);
	}

	.himpel-cform__figure:has(.himpel-cform__media) .himpel-cform__info {
		padding-top: 0;
	}

	/*
	 * A smaller basis so the two showrooms sit beside each other rather than
	 * wrapping: at this width the default 220px could not fit two across, and
	 * stacked they were the tallest thing on the page by some way.
	 */
	.himpel-cform__box-text {
		--hcf-group-basis: 130px;
		gap: 18px 14px;
	}

	.himpel-cform__glyph {
		width: var(--hcf-icon-m, 22px);
		height: var(--hcf-icon-m, 22px);
	}
}

/* Elementor editor: keep the sticky trick out of the preview canvas, where
   the hero and this section are edited in isolation. */
.elementor-editor-active .himpel-sticky-host {
	position: relative;
}