/*
 * Section: Contact — Figma 4003:3796.
 *
 * Two 560 columns, 80 apart, inside the shared 1200 column, on a photo washed
 * with Night at 85%. The right column is a white 560x558 card holding the form:
 * a 496 measure inside 32 of padding, fields 42 tall on a #F4F7FB ground.
 */

.section-contact {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--ink);
}

.section-contact__media { position: absolute; inset: 0; z-index: -1; }

.section-contact__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--img-focus, 50% 50%);
}

.section-contact__scrim {
	position: absolute;
	inset: 0;
	background: rgba(11 22 40 / 0.85);
}

.section-contact__container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* 560 + 560 */
	align-items: start;
	gap: 6.667%; /* 80 / 1200 */
	width: var(--content);
	max-width: 100%;
	margin-inline: auto;
	padding: 160px 0;
}

.section-contact__label {
	margin: 0 0 32px;
	color: var(--steel);
	font-size: var(--wp--preset--font-size--eyebrow); /* 12 */
	font-weight: 700;
	line-height: 1.333;
	letter-spacing: 0.1em; /* 1.2 on 12 */
	text-transform: uppercase;
}

.section-contact__heading {
	margin: 0;
	color: #fff;
	font-size: var(--wp--preset--font-size--heading-xl); /* 58 */
	font-weight: 700;
	line-height: 1.19; /* 69 */
	letter-spacing: -0.026em; /* -1.52 */
}

.section-contact__body {
	max-width: 80%; /* 448 / 560 */
	margin: 24px 0 0;
	color: rgba(255 255 255 / 0.8);
	font-size: var(--wp--preset--font-size--body); /* 18 */
	font-weight: 600;
	line-height: 1.625; /* 29.25 */
}

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

.section-contact__card {
	min-height: 558px;
	padding: 32px;
	border-radius: 16px;
	background: #fff;
	color: var(--ink);
}

.section-contact__form-title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4; /* 28 */
	letter-spacing: -0.025em; /* -0.5 */
}

/* Harbor rather than Verdigris on the client's note of 2026-10-03: the green
   read as a system success state, and this is the brand speaking to someone who
   has just written in. The heading carries the weight; the sentence under it
   does not need to shout. */
.section-contact__sent {
	margin: 24px 0 0;
	color: var(--harbor);
	/* The reply lands on the section by fragment, so it has to clear the bar
	   that sits over the top of the page. */
	scroll-margin-top: calc(var(--header-height) + 24px);
}

.section-contact__sent-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 700;
	line-height: 1.5;
}

.section-contact__sent-body {
	margin: 6px 0 0;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 400;
	line-height: 1.625;
}

/* The whole section is the scroll target, not just the message inside it. */
.section-contact {
	scroll-margin-top: calc(var(--header-height) + 24px);
}

/* The frame stacks the form's blocks 10 apart, under 24 of space below the
   title, and pads every block after the first by a further 16. */
.contact-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 24px;
}

.contact-form__row {
	margin: 0;
}

.contact-form__row + .contact-form__row {
	padding-top: 16px;
}

.contact-form__row--split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
}

/* Both halves carry the 8 on their right, as in the frame — which is what
   makes the two 240 inputs sit 8 apart inside the 496 measure. */
.contact-form__field {
	display: block;
	padding-right: 8px;
}

.contact-form label {
	display: block;
	margin-bottom: 6px;
	color: var(--slate);
	font-size: var(--wp--preset--font-size--eyebrow); /* 12 */
	font-weight: 600;
	line-height: 1.333; /* 16 */
}

.contact-form input {
	width: 100%;
	height: 42px;
	padding: 0 13px;
	border: 1px solid rgba(11 22 40 / 0.08);
	border-radius: 3.2px;
	background: #f4f7fb;
	color: var(--ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--caption); /* 14 */
	font-weight: 400;
}

.contact-form input::placeholder {
	color: rgba(11 22 40 / 0.5);
}

.contact-form input:focus-visible {
	border-color: var(--harbor);
	outline: 2px solid var(--mars);
	outline-offset: 1px;
}

/* The asterisk beside a required label. aria-hidden in the markup — the input
   carries `required`, which is what assistive tech reads — so this is purely
   the visual cue the copy review asked for. */
.contact-form__required {
	margin-left: 2px;
	color: var(--mars);
}

/* The message under a field the visitor left empty. Written by
   assets/js/contact-form.js; `hidden` until there is something to say, so it
   takes no room in the row until it does. */
.contact-form__error {
	display: block;
	margin-top: 4px;
	color: var(--mars);
	font-size: var(--fs-12); /* 12 */
	font-weight: 600;
	line-height: 1.333; /* 16 */
}

.contact-form input.is-invalid,
.contact-form select.is-invalid {
	border-color: var(--mars);
}

/* The key to the asterisks, under the last field. Sits in the form's own flex
   flow, so the row gaps above and below it are the ones every other row gets. */
.contact-form__legend {
	margin: 0;
	color: var(--slate);
	font-size: var(--fs-12); /* 12 */
	font-weight: 600;
	line-height: 1.333; /* 16 */
}

.contact-form__legend .contact-form__required {
	margin-left: 0;
}

/* hCaptcha draws itself into this box at a fixed 303x78, so the row is sized
   by the widget rather than by the frame. */
.contact-form__captcha {
	margin-top: 4px;
	min-height: 78px;
}

/* Shown in place of the form when a submission was turned away by the captcha:
   the same slot the thank-you uses, in Mars rather than Harbor. */
.section-contact__error {
	margin: 0;
	padding-top: 24px;
	color: var(--mars);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	line-height: 1.625;
}

/* Honeypot: removed from the visual and tab order, not display:none, so
   bots that skip hidden fields still fill it. */
.contact-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.btn--submit {
	justify-content: center;
	width: 100%;
	height: 48px;
	/* The frame gives the button a 72-tall block and sits it 8.37 into it,
	   leaving 15.63 under it before the next gap. */
	margin: 8.37px 0 15.63px;
	border-radius: 7.2px;
	background: var(--harbor);
	color: #fff;
	font-size: var(--fs-12); /* 12 */
	font-weight: 700;
	line-height: 2;
}

.btn--submit:hover,
.btn--submit:focus-visible { background: var(--mars); }

.contact-form__disclaimer {
	margin: 0;
	color: var(--slate);
	font-size: var(--fs-12); /* 12 */
	font-weight: 400;
	line-height: 1.333; /* 16 */
	text-align: center;
}

@media (max-width: 1024px) {
	.section-contact__container {
		grid-template-columns: 1fr;
		gap: 40px;
		padding-block: 72px;
	}

	.section-contact__body {
		max-width: none;
	}

	.section-contact__card {
		min-height: 0;
	}
}

@media (max-width: 782px) {
	.section-contact__card { padding: 24px; }

	.contact-form__row--split { grid-template-columns: 1fr; gap: 16px; }

	.contact-form__field { padding-right: 0; }

}

/* Wide -------------------------------------------------------------------
 *
 * Partners (2258:2642) and the Contact page (2331:4742) run the same section
 * with the heading centred across the full 1200 and a single 728 card under it.
 * The form inside gets the extra width rather than a second column.
 *
 * Every metric is its share of the 1676 frame, so the whole section — card,
 * fields, type — is a scaled copy at any width rather than a fixed block that
 * grows proportionally deeper as the screen narrows.
 */

.section-contact--wide .section-contact__container {
	display: block;
	width: 71.6vw; /* 1200 */

	/* 50 above; below, the frame's own 50 plus the 49 it leaves empty under the
	   card — the section is 980 while its content runs 931. */
	padding: 2.983vw 0 5.907vw;
}

/* The 133 head is the 69 line inside 32 of padding, top and bottom. */
.section-contact--wide .section-contact__heading {
	margin: 0;
	padding-block: 1.909vw; /* 32 */
	font-size: 3.461vw; /* 58 */
	line-height: 1.19; /* 69 */
	letter-spacing: -0.026em; /* -1.52 */
	text-align: center;
}

.section-contact--wide .section-contact__body {
	max-width: 42.25%; /* 507 / 1200 */
}

/* 474 of ground each side of the 728 card, which is the frame centring it. */
.section-contact--wide .section-contact__card {
	width: 43.437vw; /* 728 */
	max-width: 100%;
	min-height: 0;
	margin: 0 auto;
	padding: 1.909vw; /* 32 */
	border-radius: 0.955vw; /* 16 */
}

.section-contact--wide .section-contact__form-title {
	padding-top: 0.597vw; /* 10 — the title's 66 block is 10 over two 28 lines */
	color: var(--ink);
	font-size: 1.193vw; /* 20 */
	line-height: 1.4; /* 28 */
	letter-spacing: -0.025em; /* -0.5 */
	text-align: center;
}

/* The form's own 568 -------------------------------------------------------
 *
 * 24 above the first row, then rows of 64 / 80 / 80 / 96 / 144, a 72 block for
 * the button and a 16 line under it: 576 of content in a 568 box. The frame
 * closes the difference by overlapping every pair by 1.333, which is what the
 * negative margin below is.
 */

.section-contact--wide .contact-form {
	gap: 0;
	padding-top: 1.432vw; /* 24 */
}

.section-contact--wide .contact-form__row {
	padding-top: 0.955vw; /* 16 */
	margin-bottom: -0.080vw; /* -1.333 */
}

.section-contact--wide .contact-form__row--split {
	padding-top: 0;
}

/* The select and the textarea are padded both sides. Named rather than
   counted: the standard form gained two selects in the copy review, and
   nth-of-type(4) had meant "the select" only for as long as nothing was
   inserted above it. */
.section-contact--wide .contact-form__row--tall {
	padding-bottom: 0.955vw;
}

.section-contact--wide .contact-form__field {
	padding-right: 0.477vw; /* 8 */
}

.section-contact--wide .contact-form__field:last-child {
	padding-right: 0;
}

.section-contact--wide .contact-form label {
	margin-bottom: 0.358vw; /* 6 — with the 16 line, the label block is 22 */
	font-size: 0.716vw; /* 12 */
	line-height: 1.333; /* 16 */
}

.section-contact--wide .contact-form input,
.section-contact--wide .contact-form select,
.section-contact--wide .contact-form textarea {
	/* Block rather than the default inline-block: on a line box the control sits
	   on the baseline, and the strut's descender - which is a fixed 16px line,
	   not a share of the frame - added 4 under every field once the field itself
	   had scaled below it. */
	display: block;
	padding-inline: 0.776vw; /* 13 */
	border-radius: 0.191vw; /* 3.2 */
	font-size: 0.835vw; /* 14 */
}

.section-contact--wide .contact-form input,
.section-contact--wide .contact-form select {
	height: 2.506vw; /* 42 */
}

.section-contact--wide .contact-form textarea {
	/* Block, not the default inline-block: as an inline box it sits on the
	   line's baseline and the descender space under it added 8 to the row. */
	display: block;
	height: 5.370vw; /* 90 */
	min-height: 0;
	padding-block: 0.656vw; /* 11 */
}

.section-contact--wide .contact-form select {
	padding-right: 2.148vw; /* clear of the chevron */
	background-position: right 0.925vw center; /* 15.5 */
	background-size: 0.806vw 0.656vw; /* 13.5 x 11 */
}

.section-contact--wide .btn--submit {
	height: 2.864vw; /* 48 */

	/* The frame gives the button a 72 block and sits it 8.018 into it; the 1.333
	   overlap comes off the 15.98 left under it. */
	margin: 0.478vw 0 0.874vw;
	border-radius: 0.430vw; /* 7.2 */
	font-size: 0.716vw; /* 12 */
	line-height: 1.432vw; /* 24 */
}

.section-contact--wide .contact-form__disclaimer {
	font-size: 0.716vw; /* 12 */
	line-height: 1.333; /* 16 */
}

/* CONTACT (2331:4573) — the plain treatment -------------------------------
 *
 * The one contact frame with no photo behind it: a flat white ground, the
 * headline in Mars rather than white, and the form inset a second 32 inside the
 * card. That last one is this frame alone — PARTNERS (2258:2675) runs the same
 * 728 card with its form flush at 664, so the inset is scoped here rather than
 * to --wide.
 */

.section-contact--plain {
	background: #fff;
}

.section-contact--plain .section-contact__heading {
	color: var(--mars);
}

/* 915 of section: 50 above the 133 head, the 582 card, and 150 under it. The
   --wide default is 99, which is PARTNERS' taller card leaving less room. */
.section-contact--plain .section-contact__container {
	padding-bottom: 8.949vw; /* 150 */
}

/* 4006:7191 — a 664 box, 480 tall, holding the 600 form: 10 above it, 32 either
   side and 32 under. The 10 rides on the form's own 24, and the 480 is what
   makes the card 582 rather than 575 — the frame leaves 6.5 loose at the
   bottom. */
.section-contact--plain .contact-form {
	/* A floor, not a fixed height. The frame's form runs 442 of content inside
	   a 480 box and overruns the 32 under it, which is why this was pinned —
	   but the copy review added the enquiry and property selects, and six rows
	   do not fit in 480. Pinned, they overran the card by 162 and landed on the
	   footer. So 480 is now the least this box can be, and it grows with what
	   is in it; the card carries min-height: 0 and follows. */
	min-height: 28.640vw; /* 480 */
	gap: 0.597vw; /* 10 */
	padding: 2.029vw 1.909vw 1.909vw; /* 10 + 24 / 32 / 32 */
}

/* With the box fixed and the content 28 longer than it, flex would shrink every
   child to fit — it took the button from 48 to 26 and pulled the disclaimer up
   with it. The frame overruns instead, so nothing here gives. */
.section-contact--plain .contact-form > * {
	flex-shrink: 0;
}

/* Rows at 64 / 80 / 80 / 80, ten apart — 4006:7193 at 24, then 98, 188, 278.
   --wide overlaps its pairs by 1.333 to close PARTNERS' taller form into its
   own box; this frame has no such squeeze, so its taller rows give the padding
   back. */
.section-contact--plain .contact-form__row {
	padding-top: 0.955vw; /* 16 */
	margin-bottom: 0;
}

.section-contact--plain .contact-form__row--split {
	padding-top: 0;
}

.section-contact--plain .contact-form__row--tall {
	padding-bottom: 0;
}

/* 6123:4330 sits 1 in from the form's left edge and runs 599 of its 600, in a
   72 block: 8 above it and 16 below. */
.section-contact--plain .btn--submit {
	width: calc(100% - 0.06vw); /* 599 */
	margin: 0.477vw 0 0.955vw 0.06vw; /* 8 / 16, 1 in from the left */
}

@media (max-width: 1024px) {
	.section-contact--plain .section-contact__container {
		padding-bottom: 72px;
	}

	.section-contact--plain .contact-form {
		height: auto;
		gap: 10px;
		padding: 0;
	}

	.section-contact--plain .contact-form__row {
		padding-top: 0;
	}

	.section-contact--plain .btn--submit {
		width: 100%;
		margin: 8px 0 16px;
	}
}

/* Select and textarea share the input's ground and border. */
.contact-form select,
.contact-form textarea {
	width: 100%;
	padding: 0 13px;
	border: 1px solid rgba(11 22 40 / 0.08);
	border-radius: 3.2px;
	background: #f4f7fb;
	color: var(--ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--caption); /* 14 */
	font-weight: 400;
}

.contact-form select {
	height: 42px;
	appearance: none;

	/* The frame's own chevron, inlined so the control keeps one ground. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11' fill='none'%3E%3Cpath d='M4.5 1.5l5 4-5 4' stroke='%230B1628' stroke-opacity='.5' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	padding-right: 36px;
}

.contact-form textarea {
	min-height: 90px;
	padding-block: 11px;

	/* The frame draws a plain box; Chrome's resize grip would sit in the corner
	   of it, and the height is fixed by the frame anyway. */
	resize: none;
}

/* The empty first option is real text, not a placeholder, so it takes the
   control's own colour unless it is called out - the frame greys it. */
.contact-form select:has(option[value=""]:checked) {
	color: rgba(11 22 40 / 0.5);
}

.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
	border-color: var(--harbor);
	outline: 2px solid var(--mars);
	outline-offset: 1px;
}

@media (max-width: 1024px) {
	/* Stacked, the frame's shares stop meaning anything. */
	.section-contact--wide .section-contact__container {
		width: var(--content);
		padding-block: 56px 64px;
	}

	.section-contact--wide .section-contact__heading {
		padding-block: 0 24px;
		font-size: var(--wp--preset--font-size--heading-xl);
	}

	.section-contact--wide .section-contact__card {
		width: 100%;
		margin: 0;
		padding: 24px;
		border-radius: 16px;
	}

	.section-contact--wide .section-contact__form-title {
		padding-top: 0;
		font-size: var(--fs-20, 20px);
	}

	.section-contact--wide .section-contact__body {
		max-width: none;
	}

	.section-contact--wide .contact-form {
		gap: 10px;
		padding-top: 24px;
	}

	.section-contact--wide .contact-form__row,
	.section-contact--wide .contact-form__row--split {
		padding-top: 16px;
		margin-bottom: 0;
	}

	.section-contact--wide .contact-form__row--tall {
		padding-bottom: 0;
	}

	.section-contact--wide .contact-form__field {
		padding-right: 8px;
	}

	.section-contact--wide .contact-form label {
		margin-bottom: 6px;
		font-size: var(--wp--preset--font-size--eyebrow);
	}

	.section-contact--wide .contact-form input,
	.section-contact--wide .contact-form select,
	.section-contact--wide .contact-form textarea {
		padding-inline: 13px;
		border-radius: 3.2px;
		font-size: var(--wp--preset--font-size--caption);
	}

	.section-contact--wide .contact-form input,
	.section-contact--wide .contact-form select {
		height: 42px;
	}

	.section-contact--wide .contact-form textarea {
		height: auto;
		min-height: 90px;
		padding-block: 11px;
	}

	.section-contact--wide .contact-form select {
		padding-right: 36px;
		background-position: right 13px center;
		background-size: 14px 11px;
	}

	.section-contact--wide .btn--submit {
		height: 48px;
		margin: 8px 0 0;
		border-radius: 7.2px;
		font-size: var(--fs-12);
		line-height: 2;
	}

	.section-contact--wide .contact-form__disclaimer {
		font-size: var(--fs-12);
		line-height: 1.333;
	}
}


/* Phone fields ------------------------------------------------------------
 *
 * Last in the file on purpose. Both variants restate the control's size
 * further down than the shared 782 block above - --wide in vw, and again in
 * its own 1024 query - so a rule placed up there is overridden by the time it
 * matters. This is the same weight, read later, which is what makes it win.
 *
 * 16px is the threshold below which iOS Safari zooms the page the moment a
 * field takes focus, and it does not zoom back out on blur: the reader is left
 * part-way through a form they now have to pan sideways to finish. The labels
 * stay at 12 - they are read, not typed into - and 48 gives the control itself
 * a thumb-sized target. It starts at 1024 rather than 782 because an iPad in
 * portrait zooms on focus in exactly the same way a phone does.
 */

@media (max-width: 1024px) {
	.contact-form input,
	.contact-form select,
	.contact-form textarea,
	.section-contact--wide .contact-form input,
	.section-contact--wide .contact-form select,
	.section-contact--wide .contact-form textarea,
	.section-contact--plain .contact-form input,
	.section-contact--plain .contact-form select,
	.section-contact--plain .contact-form textarea {
		font-size: 16px;
	}

	.contact-form input,
	.contact-form select,
	.section-contact--wide .contact-form input,
	.section-contact--wide .contact-form select,
	.section-contact--plain .contact-form input,
	.section-contact--plain .contact-form select {
		height: 48px;
	}

	.contact-form textarea,
	.section-contact--wide .contact-form textarea,
	.section-contact--plain .contact-form textarea {
		height: auto;
		min-height: 104px;
	}

	/* The card was sized to hold a form of fixed-height rows; taller controls
	   need it to follow rather than clip them. */
	.section-contact--plain .contact-form,
	.section-contact__card {
		min-height: 0;
	}
}