/* contact-form — merged from the static build's app.css, source order preserved. */

.demo-contact { position: relative; height: 951px; }
.demo-contact__intro { position: absolute; top: 73px; right: 0; left: 0; text-align: center; }
.demo-contact__intro h1 { margin: 0; font-size: 80px; font-weight: 600; line-height: 80px; }
.demo-contact__intro h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.demo-contact__intro p { width: 575px; margin: 19.4px auto 0; color: rgba(0,0,0,.6); font-size: 18px; line-height: 26px; }
.demo-form { position: absolute; top: 299px; left: 50%; width: 670px; height: 652px; margin: 0; padding: 35.6px 40px 35.9px; border: 1px solid rgba(0,0,0,.1); background-color: #fff; background-image: var(--noise); transform: translateX(-50%); }
.demo-form__grid, .demo-form .gform_fields { display: grid; grid-template-columns: repeat(2,285px); gap: 36.5px 20px; }
.demo-form label, .demo-form .gfield { display: block; }
.demo-form label > span, .demo-form .gfield_label { display: block; height: 30.5px; color: #1a1a1a; font-size: 16px; font-weight: 500; line-height: 19px; }
.demo-form sup { top: 0; color: var(--coral); font-size: inherit; }
.demo-form input, .demo-form textarea { display: block; width: 100%; border: 1px solid rgba(23,60,49,.2); border-radius: 0; outline: none; background: rgba(72,12,8,.1); color: #000; font: 16px var(--font-sans); transition: border-color var(--motion-base), box-shadow var(--motion-base); }
.demo-form input { height: 50px; padding: 0 14px; }
.demo-form textarea { height: 143px; padding: 14px; resize: vertical; }
.demo-form input:focus, .demo-form textarea:focus { border-color: var(--coral); box-shadow: 0 0 0 2px rgba(232,71,59,.12); }
.demo-form__message, .demo-form .gfield--width-full { grid-column: 1 / -1; }
.demo-form > .button, .demo-form .gform_footer .button { width: 590px; height: 50px; margin-top: 60px; border: 0; cursor: pointer; font-size: 18px; line-height: 18px; }
.demo-form > p { width: 590px; margin: 29.4px 0 0; color: #1a1a1a; font-size: 14px; line-height: 16px; }
.demo-form > p a { text-decoration: underline; }


/* ---- split layout -------------------------------------------------------
 * The contact page: a column of copy beside the form rather than under it.
 * Everything here is scoped to the modifier, so the centred layout the other
 * pages use is untouched. */

.demo-contact--split {
	/* Stays positioned: the section draws its own rail lines with absolutely
	   positioned pseudo-elements, and going static detaches them. */
	position: relative;
	height: auto;
	min-height: 0;
	display: grid;
	align-items: start;
	/* 80 -> 610 copy, 690 -> 1360 panel, against the design's 40px rails. */
	grid-template-columns: minmax(0, 530px) 670px;
	justify-content: space-between;
	/* The rails sit at 40; the design insets the content another 40 inside
	   them, so the columns clear the lines on both sides. */
	/* No bottom padding: the strip below carries its own 120 margin, which is
	   the gap the design draws. */
	padding: 80px calc(var(--rail-left) + 40px) 0;
}

.demo-contact--split .demo-contact__intro {
	position: static;
	top: auto;
	right: auto;
	left: auto;
	text-align: left;
}

.demo-contact--split .demo-contact__intro h1 {
	font-size: 60px;
	line-height: 61px;
}

.demo-contact--split .demo-contact__intro > p {
	width: auto;
	max-width: 515px;
	margin: 22px 0 0;
	font-size: 16px;
	line-height: 24px;
}

/* The labelled blocks under the copy: locations, contact info. */
.demo-contact__details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 221px));
	gap: 40px 80px;
	margin-top: 100px;
}

.demo-contact__detail-title {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	line-height: 24px;
}

.demo-contact__detail p {
	margin: 22px 0 0;
	color: #1a1a1a;
	font-size: 16px;
	line-height: 28px;
}

.demo-contact__detail-action {
	min-width: 160px;
	width: 160px;
	min-height: 50px;
	height: 50px;
	margin-top: 22px;
	font-size: 16px;
}

/* ---- the panel ---------------------------------------------------------- */

.demo-contact--split .demo-form {
	position: static;
	top: auto;
	left: auto;
	width: 670px;
	height: auto;
	padding: 40px;
	transform: none;
}

/* The design's field grid inside the panel: two 285 columns, 20 apart. */
.demo-contact--split .demo-form .gform_fields {
	grid-template-columns: repeat(2, minmax(0, 285px));
	column-gap: 20px;
	/* The design's rows are 117 apart: label 19, 8 to the input, input 50,
	   then 40 to the next label. */
	row-gap: 40px;
	justify-content: space-between;
}

.demo-contact--split .demo-form .gfield--width-half { grid-column: span 1; }
.demo-contact--split .demo-form .gfield--width-full { grid-column: 1 / -1; }

.demo-contact--split .demo-form .gfield_label {
	height: auto;
	margin-bottom: 8px;
	font-size: 16px;
	font-weight: 500;
	line-height: 19px;
}

.demo-contact--split .demo-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select) {
	height: 50px;
}

.demo-contact--split .demo-form textarea { height: 143px; }

.demo-contact--split .demo-form .gform_footer { padding-top: 60px; }

.demo-contact--split .demo-form .gform_footer .button {
	width: 100%;
	min-width: 0;
	height: 50px;
	min-height: 50px;
	margin: 0;
}

/* ---- the mobile field's country prefix ----------------------------------
 * The design draws +61 in a box against the left edge of the field. Gravity
 * has no prefix control, so it is drawn on the field wrapper and the input is
 * indented to clear it -- which keeps the field Gravity's, untouched. */

.demo-contact--split .demo-form .gfield--type-phone .ginput_container {
	position: relative;
}

.demo-contact--split .demo-form .gfield--type-phone .ginput_container::before {
	content: "+61";
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	width: 50px;
	height: 50px;
	place-items: center;
	border: 1px solid rgba(23, 60, 49, .2);
	color: #1a1a1a;
	font-size: 16px;
	pointer-events: none;
}

.demo-contact--split .demo-form .gfield--type-phone input { padding-left: 64px; }

/* The multi-select is a Chosen control, layered over Chosen's own stylesheet
   (see inc/forms.php). Only the surface is changed here: the field should read
   as the inputs beside it, and carry the design's chevron. */

.demo-contact--split .demo-form .chosen-container {
	width: 100% !important;
	font: 16px var(--font-sans);
}

.demo-contact--split .demo-form .chosen-container .chosen-choices {
	min-height: 50px;
	/* Vertical padding rather than a fixed height: once the chosen services
	   wrap onto a second row the control grows, and without this the first row
	   sits flush against the top edge. */
	padding: 8px 44px 8px 14px;
	border: 1px solid rgba(23, 60, 49, .2);
	border-radius: 0;
	background: rgba(72, 12, 8, .1);
	box-shadow: none;
}

.demo-contact--split .demo-form .chosen-container-active .chosen-choices {
	border-color: var(--coral);
	box-shadow: 0 0 0 2px rgba(232, 71, 59, .14);
}

.demo-contact--split .demo-form .chosen-container .chosen-choices::after {
	content: "";
	position: absolute;
	top: 13px;
	right: 16px;
	width: 24px;
	height: 24px;
	background: url("../../assets/img/chevron-down.svg") center / 24px 24px no-repeat;
	pointer-events: none;
}

.demo-contact--split .demo-form .chosen-container .search-field input {
	height: 32px;
	color: #000;
	font: 16px var(--font-sans);
}

/* A chosen service, as a small removable token; the right padding is the room
   its remove control sits in. */
.demo-contact--split .demo-form .chosen-container .search-choice {
	margin: 3px 6px 3px 0;
	padding: 6px 24px 6px 10px;
	border: 1px solid rgba(72, 12, 8, .18);
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	color: #000;
	font-size: 14px;
	line-height: 18px;
}

/* One remove control per token: the coral × drawn here. Gravity Forms' Chosen
   stylesheet loads after this one and paints its own sprite × on the same link,
   which is where the second cross came from -- the full ancestry is what lets
   `background: none` outrank it. */
.demo-contact--split .demo-form .chosen-container .chosen-choices li.search-choice a.search-choice-close {
	top: 9px;
	right: 8px;
	width: 12px;
	height: 12px;
	background: none;
	color: var(--coral);
}

.demo-contact--split .demo-form .chosen-container .chosen-choices li.search-choice a.search-choice-close::before {
	display: block;
	content: "\00d7";
	font-size: 15px;
	line-height: 12px;
	text-align: center;
}

.demo-contact--split .demo-form .chosen-container .chosen-drop {
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 0;
	background: #fff;
	box-shadow: 0 18px 40px rgba(72, 12, 8, .1);
}

.demo-contact--split .demo-form .chosen-container .chosen-results li {
	padding: 11px 14px;
	line-height: 20px;
}

.demo-contact--split .demo-form .chosen-container .chosen-results li.highlighted {
	background: rgba(72, 12, 8, .06);
	color: inherit;
}

.demo-contact--split .demo-form .chosen-container .chosen-results li.result-selected {
	color: rgba(0, 0, 0, .35);
}

/* Chosen steps aside on touch devices, leaving the browser's own multi-select.
   It cannot be a single closed row there, so it is shown as a short list the
   visitor scrolls -- wearing the same fill and border as the fields above it. */
.demo-contact--split .demo-form select[multiple] {
	width: 100%;
	height: 180px;
	padding: 8px 6px;
	border: 1px solid rgba(23, 60, 49, .2);
	background: rgba(72, 12, 8, .1);
	color: #000;
	font: 16px var(--font-sans);
}

.demo-contact--split .demo-form select[multiple] option {
	padding: 8px 12px;
	line-height: 20px;
}

@media (max-width: 900px) {
	.demo-contact--split {
		grid-template-columns: 1fr;
		gap: 48px;
		padding: 60px 16px 80px;
	}

	.demo-contact--split .demo-contact__intro h1 { font-size: 44px; line-height: 46px; }
	.demo-contact--split .demo-form { width: 100%; padding: 28px 24px; }
	.demo-contact--split .demo-form .gform_fields { grid-template-columns: 1fr; row-gap: 24px; }
	.demo-contact--split .demo-form .gfield--width-half { grid-column: 1 / -1; }
	.demo-contact__details { grid-template-columns: 1fr; margin-top: 48px; gap: 32px; }
}