/* Systical — Elementor Pro contact form

   Scoped to the widget classes rather than a section class: Elementor outputs
   `_css_classes` on widgets but not on containers, so a container-level hook
   never reaches the stylesheet. */

.sys-fm__eyebrow {
	margin-bottom: 20px;
}


.sys-fm__eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border-radius: 40px;
	background: #0b0b0b;
	color: #fff;
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
}

.sys-fm__eyebrow .elementor-heading-title::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #9afd0d;
}

/* The heading block does not always sit inside the white card — on the contact
   page it sits on the dark section above it, where a #0b0b0b pill disappears
   into the background. Declared after the base rule, which it matches for
   specificity, and hung off the widget class because container classes never
   reach the stylesheet (see the note at the top). */
.sys-fm__eyebrow--dark .elementor-heading-title {
	background: #141414;
}

.sys-fm__title .elementor-heading-title {
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: clamp(32.5px, 4.2vw, 57.5px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.025em;
}

.sys-fm__sub {
	max-width: 56ch;
	margin: 16px auto 44px;
	font-size: 16px;
	line-height: 1.6;
}

/* ---------- fields ---------- */

.sys-fm__form .elementor-form-fields-wrapper {
	row-gap: 26px;
}

/* Elementor's own label rule is `.elementor-field-group > label`, so this is
   qualified past it rather than matching at the same weight. */
.sys-fm__form .elementor-field-group > label.elementor-field-label {
	display: block;
	margin-bottom: 10px;
	padding: 0;
	color: #0b0b0b;
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.sys-fm__form .elementor-field-group .elementor-field-textual {
	width: 100%;
	min-height: 54px;
	padding: 15px 18px;
	border: 1px solid #e1e3e6;
	border-radius: 12px;
	background: #fff;
	box-shadow: none;
	color: #0b0b0b;
	font-family: Inter, system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.sys-fm__form .elementor-field-group textarea.elementor-field-textual {
	min-height: 140px;
	resize: vertical;
}

.sys-fm__form .elementor-field-group .elementor-field-textual::placeholder {
	color: #9aa0a6;
	opacity: 1;
}

/* Lime edge on focus — the soft ring is what makes it read as active. */
.sys-fm__form .elementor-field-group .elementor-field-textual:focus {
	border-color: #9afd0d;
	box-shadow: 0 0 0 3px rgba(154, 253, 13, 0.28);
	outline: none;
}

/* ---------- choice pills ---------- */

.sys-fm__form .elementor-field-subgroup {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sys-fm__form .elementor-field-subgroup .elementor-field-option {
	position: relative;
	display: flex;
	margin: 0;
	padding: 0;
}

/* Elementor gives inline subgroups a `padding-inline-end: 10px` at the same
   specificity as the rule above and loads after this file, so the reset there
   loses. The row already has a flex `gap`; the extra padding only makes the
   spacing uneven. */
.sys-fm__form .elementor-field-subgroup.elementor-subgroup-inline .elementor-field-option {
	padding-inline-end: 0;
}

/* The native control stays in the DOM — it still carries the value and the
   keyboard behaviour — it is just moved out of sight so the label can be the
   pill. */
.sys-fm__form .elementor-field-subgroup .elementor-field-option input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

/* The `display` is restated below at a higher specificity — see the note
   there. Everything else here is safe at this weight. */
.sys-fm__form .elementor-field-subgroup .elementor-field-option label {
	display: inline-block;
	margin: 0;
	padding: 12px 20px;
	border: 1px solid #d9dbde;
	border-radius: 40px;
	background: #fff;
	color: #0b0b0b;
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* Elementor forces `display: inline` on checkbox, radio and acceptance labels
   at (0,3,1) and its stylesheet loads after this one, so the rule above tied
   and lost. An inline label paints its vertical padding but adds none of it to
   the line box, which left every 38px pill inside a 24px slot and overlapping
   the row beneath it once the group wrapped. Matching Elementor's field-type
   scoping puts this at (0,4,1) and settles it. */
.sys-fm__form .elementor-field-type-checkbox .elementor-field-subgroup .elementor-field-option label,
.sys-fm__form .elementor-field-type-radio .elementor-field-subgroup .elementor-field-option label,
.sys-fm__form .elementor-field-type-acceptance .elementor-field-subgroup .elementor-field-option label {
	display: inline-block;
}

.sys-fm__form .elementor-field-subgroup .elementor-field-option label:hover {
	border-color: #0b0b0b;
}

.sys-fm__form .elementor-field-subgroup .elementor-field-option input:checked + label {
	border-color: #0b0b0b;
	background: #0b0b0b;
	color: #fff;
}

/* Keyboard users get the same lime edge the text fields show. */
.sys-fm__form .elementor-field-subgroup .elementor-field-option input:focus-visible + label {
	border-color: #9afd0d;
	box-shadow: 0 0 0 3px rgba(154, 253, 13, 0.28);
}

/* ---------- submit ---------- */

.sys-fm__form .elementor-field-type-submit {
	/* button_width sets the column, not the button — so the column itself is
	   what needs centring. */
	margin: 14px auto 0;
	display: flex;
	justify-content: center;
}

/* Qualified hard and marked important: Elementor's own button styling sits on
   the widget wrapper and otherwise repaints the label white. */
.sys-fm__form .elementor-form .elementor-field-type-submit button.elementor-button[type="submit"] {
	/* The column is 80% wide (button_width); this makes the button fill it. */
	width: 100%;
	margin: 0 auto;
	padding: 26px 40px;
	border: 0;
	border-radius: 40px;
	background-color: #9afd0d !important;
	color: #0b0b0b !important;
	fill: #0b0b0b !important;
	font-family: Inter, system-ui, sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	transition: background-color 0.22s ease, color 0.22s ease;
}

.sys-fm__form .elementor-form .elementor-field-type-submit button.elementor-button[type="submit"] span,
.sys-fm__form .elementor-form .elementor-field-type-submit button.elementor-button[type="submit"] .elementor-button-text {
	color: #0b0b0b !important;
}

.sys-fm__form .elementor-form .elementor-field-type-submit button.elementor-button[type="submit"]:hover,
.sys-fm__form .elementor-form .elementor-field-type-submit button.elementor-button[type="submit"]:focus {
	background-color: #0b0b0b !important;
	color: #fff !important;
}

.sys-fm__form .elementor-form .elementor-field-type-submit button.elementor-button[type="submit"]:hover span,
.sys-fm__form .elementor-form .elementor-field-type-submit button.elementor-button[type="submit"]:focus span {
	color: #fff !important;
}

.sys-fm__form .elementor-form .elementor-field-type-submit button.elementor-button[type="submit"]:focus-visible {
	outline: 2px solid #0b0b0b;
	outline-offset: 3px;
}

.sys-fm__form .elementor-message {
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
}

/* ---------- responsive ---------- */

@media (max-width: 767px) {
	.sys-fm__form .elementor-form-fields-wrapper {
		row-gap: 20px;
	}

	.sys-fm__sub {
		margin-bottom: 28px;
	}

	.sys-fm__form .elementor-field-subgroup {
		gap: 8px;
	}

	.sys-fm__form .elementor-field-subgroup .elementor-field-option label {
		padding: 10px 16px;
		font-size: 13px;
	}

	.sys-fm__form .elementor-field-group .elementor-field-textual {
		min-height: 50px;
		padding: 13px 16px;
	}

	/* A 24px label in a 26px-padded pill is most of a phone screen, so the
	   submit scales back and takes the full width instead of 80%. */
	.sys-fm__form .elementor-form .elementor-field-type-submit {
		width: 100%;
		margin-top: 10px;
	}

	.sys-fm__form .elementor-form .elementor-field-type-submit button.elementor-button[type="submit"] {
		padding: 18px 24px;
		font-size: 18px;
	}

	.sys-fm__title .elementor-heading-title {
		font-size: clamp(26px, 7.4vw, 34px);
	}

	.sys-fm__sub {
		font-size: 15px;
	}
}