.hsmn-form { max-width: 40rem; }
.hsmn-field { display: block; margin: 0 0 1.25rem; }
.hsmn-field label { display: block; font-weight: 600; margin-bottom: .25rem; }

/* First and last name share a line, at the same 22px column gap the contact
   form uses. They stack rather than squeeze on narrow screens. */
.hsmn-row { display: flex; flex-wrap: wrap; gap: 0 22px; }
.hsmn-row .hsmn-field--half { flex: 1 1 12rem; }

/* A label that is present for screen readers and autofill but not drawn.
   The name and email fields carry their label as a placeholder to match the
   site's contact form; the real label still has to exist. Scoped through
   .hsmn-form so it outranks the .hsmn-field label rule above, whose
   margin-bottom would otherwise leave a stray gap above the field. */
.hsmn-form .hsmn-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* Field chrome copied from the contact form widget's own settings, so the two
   forms match: square corners, a 1px #C8D5DC border, 16px text at #324A6D,
   and Elementor's "md" input size. */
.hsmn-field input[type="text"],
.hsmn-field input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	min-height: 47px;
	padding: 6px 16px;
	font-size: 16px;
	color: #324A6D;
	border: 1px solid #C8D5DC;
	border-radius: 0;
	background-color: #fff;
}

/* Astra turns focused inputs dotted, which reads as damage rather than
   focus and makes an error border look scruffy. Solid, in the theme accent. */
.hsmn-field input[type="text"]:focus,
.hsmn-field input[type="email"]:focus {
	border-style: solid;
	border-color: var(--ast-global-color-6, #1b5e35);
	box-shadow: 0 0 0 1px var(--ast-global-color-6, #1b5e35);
	outline: none;
}

/* Error state, deliberately scoped to .hsmn-validated — a class the form only
   gains once a submit has actually been attempted. Styling :invalid on its own
   would paint every required field red on first paint, telling somebody they
   had done something wrong before they had typed a character. Once the class
   is on, the highlight clears field by field as each one becomes valid. */
.hsmn-form.hsmn-validated .hsmn-field input:invalid {
	border-color: #b3261e;
	box-shadow: 0 0 0 1px #b3261e;
	background-color: #fdf6f5;
}

.hsmn-form.hsmn-validated .hsmn-field input:invalid:focus {
	border-color: #b3261e;
	box-shadow: 0 0 0 2px rgba( 179, 38, 30, .25 );
}

.hsmn-help { display: block; font-size: .875em; opacity: .8; margin-bottom: .35rem; }
.hsmn-required { color: #b3261e; }
.hsmn-form__errors { border-left: 4px solid #b3261e; background: #fdecea; padding: .75rem 1rem; margin: 0 0 1.5rem; }
.hsmn-form__errors ul { margin: 0; padding-left: 1.2rem; }
.hsmn-form--thanks { border-left: 4px solid #1b5e35; background: #eaf6ee; padding: 1rem 1.25rem; }
/* Astra styles every bare <button> as transparent with white text
   (--ast-global-color-5 is #ffffff on this site), which renders the submit
   label white-on-white and effectively invisible until hover. A public form
   cannot depend on the active theme's assumptions about where its buttons
   sit, so this one carries its own colours — drawn from the theme palette
   when it exists, with fallbacks so it stays legible under any theme. */
.hsmn-form .hsmn-submit button {
	background-color: var(--ast-global-color-6, #1b5e35);
	color: #fff;
	border: 1px solid transparent;
	border-radius: 30px;
	padding: .8rem 1.75rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.hsmn-form .hsmn-submit button:hover,
.hsmn-form .hsmn-submit button:focus {
	background-color: var(--ast-global-color-0, #14472a);
	color: #fff;
}

.hsmn-form .hsmn-submit button[disabled],
.hsmn-form .hsmn-submit button[disabled]:hover {
	opacity: .6;
	cursor: default;
	background-color: var(--ast-global-color-6, #1b5e35);
}

/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, but very few skip ones that are merely positioned away. */
.hsmn-hp { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }