/* Block: Contact. The form on a beige panel, beside it what happens next and the company details.
 * Every Forminator rule is scoped under .contact so the plugin's markup takes on the system here only.
 * --contact-error is a brick red for error text and borders; the system has no error token. */
.contact { --contact-error: #A33A22; }

.contact-title { font-size: var(--fs-h2); max-width: 12em; }
h1.contact-title { font-size: var(--t-closer); line-height: 0.98; letter-spacing: -0.025em; }

.contact-body.b-split {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: start;
}

.contact-form {
	background: var(--beige);
	border-radius: var(--radius-l);
	padding: clamp(24px, 3.4vw, 48px);
}

/* Aside: numbered next steps and the details, set like the promises' small type. */
.contact-aside { display: grid; gap: 56px; padding-inline: clamp(0px, 3vw, 48px); padding-top: 8px; }
.contact-subtitle { font-size: var(--fs-h3); line-height: 1.1; margin-bottom: 20px; }
.contact-next ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--green); }
.contact-next li {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 8px;
	padding: 20px 0;
	border-bottom: 1px solid var(--line);
}
.contact-next .n { font-size: var(--fs-micro); color: var(--ink-soft); padding-top: 0.3em; }
.contact-next .t { font-weight: 400; }
.contact-next .d { margin-top: 4px; font-size: var(--fs-small); color: var(--ink-soft); }

.contact-info address { font-style: normal; display: grid; gap: 6px; }
.contact-info a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; width: fit-content; transition: text-decoration-color .2s; }
.contact-info a:hover { text-decoration-color: currentColor; }
.contact-place { display: grid; }
.contact-hours { margin-top: 10px; }
.contact-reg { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 10px; font-size: var(--fs-small); color: var(--ink-soft); }

/* Photo below the details: the framed treatment of the services block and the case cards
   (496 / 384 frame, photo inset 11cqw / 8cqw, band behind it), here on a neutral beige frame. */
.contact-frame { position: relative; aspect-ratio: 496 / 384; background: var(--beige-deep); border-radius: var(--radius); overflow: hidden; container-type: inline-size; }
.contact-frame .band { --bc: var(--beige); --bl: 34%; --bw: 46%; }
.contact-img { position: absolute; inset: 8cqw 11cqw; width: calc(100% - 22cqw); height: calc(100% - 16cqw); object-fit: cover; border-radius: var(--radius-s); }

/* The form is the target of the header button on this page. */
.contact-form { scroll-margin-top: calc(var(--header-h, 80px) + 16px); }
.contact-privacy { margin: 24px 0 0; font-size: var(--fs-small); color: var(--ink-soft); }
.contact-privacy a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Forminator inside the contact block ---------------------------------- */
.contact .forminator-ui.forminator-custom-form { margin: 0; font-family: var(--sans); color: var(--green); }
.contact .forminator-ui .forminator-row { margin: 0 0 22px; display: block; }
.contact .forminator-ui .forminator-row-last { margin: 32px 0 0; }
.contact .forminator-ui .forminator-col { padding: 0; width: 100%; }
.contact .forminator-ui .forminator-field { display: grid; gap: 8px; }
.contact .forminator-ui .forminator-row-last .forminator-field { justify-items: start; }

.contact .forminator-ui .forminator-label {
	font: 400 var(--fs-small)/1.4 var(--sans);
	color: var(--green);
	margin: 0;
	padding: 0;
}
.contact .forminator-ui .forminator-required { color: var(--ink-soft); }

.contact .forminator-ui .forminator-input,
.contact .forminator-ui .forminator-textarea,
.contact .forminator-ui select,
.contact .forminator-ui .select2-selection--single {
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 13px 16px;
	font: 300 var(--fs-body)/1.4 var(--sans);
	color: var(--green);
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	box-shadow: none;
	transition: border-color .2s, box-shadow .2s;
	-webkit-appearance: none;
	appearance: none;
}
.contact .forminator-ui .forminator-textarea { min-height: 150px; resize: vertical; display: block; }
.contact .forminator-ui select,
.contact .forminator-ui .select2-selection--single {
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6' fill='none' stroke='%23073B30' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 14px;
	cursor: pointer;
}
.contact .forminator-ui .select2-container { width: 100% !important; }
.contact .forminator-ui .select2-selection__rendered { padding: 0; line-height: 1.4; color: var(--green); }
.contact .forminator-ui .select2-selection__placeholder { color: var(--ink-soft); }
.contact .forminator-ui .select2-selection__arrow { display: none; }

.contact .forminator-ui .forminator-input:hover,
.contact .forminator-ui .forminator-textarea:hover,
.contact .forminator-ui select:hover { border-color: var(--ink-soft); }
.contact .forminator-ui .forminator-input:focus,
.contact .forminator-ui .forminator-textarea:focus,
.contact .forminator-ui select:focus,
.contact .forminator-ui .select2-container--focus .select2-selection--single,
.contact .forminator-ui .select2-container--open .select2-selection--single {
	outline: none;
	border-color: var(--green);
	box-shadow: 0 0 0 1px var(--green);
}

/* Errors: brick border plus a written message, so colour is never the only signal. */
.contact .forminator-ui .forminator-has_error .forminator-input,
.contact .forminator-ui .forminator-has_error .forminator-textarea,
.contact .forminator-ui .forminator-has_error select,
.contact .forminator-ui .forminator-has_error .select2-selection--single { border-color: var(--contact-error); box-shadow: 0 0 0 1px var(--contact-error); }
.contact .forminator-ui .forminator-error-message {
	display: block;
	margin: 2px 0 0;
	padding: 0;
	background: none;
	font-size: 14px;
	color: var(--contact-error);
}
.contact .forminator-ui .forminator-error-message::before { content: none; }

/* Submit: the theme's .btn-primary. */
.contact .forminator-ui .forminator-button-submit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: auto;
	margin: 0;
	padding: 15px 26px;
	border-radius: 999px;
	border: 1px solid var(--green);
	background: var(--green);
	color: var(--beige);
	font: 400 16px/1 var(--sans);
	cursor: pointer;
	box-shadow: none;
	transition: background .2s;
}
.contact .forminator-ui .forminator-button-submit::after {
	content: "";
	width: 14px;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23F5EFEA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.contact .forminator-ui .forminator-button-submit:hover { background: var(--green-tint); }
.contact .forminator-ui .forminator-button-submit:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* Response messages: a small green card for success, brick text on the salmon tint for errors. */
.contact .forminator-ui .forminator-response-message { margin: 0; border-radius: var(--radius-s); font-size: var(--fs-small); }
.contact .forminator-ui .forminator-response-message[aria-hidden="true"],
.contact .forminator-ui .forminator-response-message:empty { display: none; }
.contact .forminator-ui .forminator-response-message.forminator-show,
.contact .forminator-ui .forminator-response-message[aria-hidden="false"] { display: block; padding: 14px 18px; margin-bottom: 24px; }
.contact .forminator-ui .forminator-response-message.forminator-success { background: var(--green); color: var(--beige); }
.contact .forminator-ui .forminator-response-message.forminator-error { background: var(--web-tint); color: var(--contact-error); }
.contact .forminator-ui .forminator-response-message p { margin: 0; color: inherit; }

/* The action comes first: right under a plain hero (heading and intro, no photo) the form is on the first screen.
   The hero gives up its air, the block its top padding and the heading its gap. */
.hero-top--plain:has(+ .contact) .hero { padding-top: max(calc(var(--header-h, 0px) + 32px), 112px); padding-bottom: clamp(40px, 4vw, 56px); }
.hero-top--plain + .contact { padding-top: 0; }
.hero-top--plain + .contact .head { margin-bottom: clamp(24px, 2.5vw, 32px); }

@media (max-width: 900px) {
	.contact-body.b-split { grid-template-columns: 1fr; row-gap: 56px; }
	.contact-aside { padding-inline: 0; }
	.contact-frame { max-width: 560px; }
	.hero-top--plain:has(+ .contact) .hero { padding-top: max(calc(var(--header-h, 0px) + 24px), 104px); padding-bottom: 32px; row-gap: 14px; }
	.hero-top--plain + .contact .head { margin-bottom: 20px; }
}