/* =========================================================
   Contact page (/contact/) and the Grow Enquiries form, Retro.
   Swiss is in css/skins/swiss.css. The plugin's own stylesheet
   is all :where(), so these win without a fight.
   ========================================================= */

.gc-contact__grid { display: grid; gap: 0 40px; }
@media (min-width: 980px) {
	.gc-contact__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; }
	.gc-contact__aside { margin-top: 42px; }
}
.gc-contact__window > .inner { padding: 26px clamp(16px, 3vw, 36px) 30px; }

.gc-contact__aside { margin-top: 28px; }
.gc-contact__note { margin: 0 0 26px; padding: 0 0 0 14px; border-left: 2px solid var(--gc-accent); }
body.svc-body .gc-contact__note h2 {
	margin: 0 0 6px;
	font-family: var(--gc-font-label);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gc-accent-2);
}
body.svc-body .gc-contact__note p { margin: 0 0 8px; text-align: left; }
.gc-contact__link { color: var(--gc-accent); }
.gc-contact__missing { margin: 0; }

/* ---------- The form ---------- */
body.gc-contact .gre {
	--gre-accent: var(--gc-accent);
	--gre-ink: var(--gc-ink);
	--gre-muted: var(--gc-ink-muted);
	--gre-bg: #000;
	--gre-border: var(--gc-chrome-dark);
	--gre-radius: 0;
	max-width: none;
}
body.svc-body.gc-contact .gre p { text-align: left; }
body.gc-contact .gre__field { margin-bottom: 18px; }
body.svc-body.gc-contact .gre__field label {
	font-family: var(--gc-font-label);
	font-size: 19px;
	font-weight: 400;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--gc-ink-muted);
}
body.gc-contact .gre__optional { text-transform: none; }
body.svc-body.gc-contact .gre input[type="text"],
body.svc-body.gc-contact .gre input[type="email"],
body.svc-body.gc-contact .gre input[type="tel"],
body.svc-body.gc-contact .gre select,
body.svc-body.gc-contact .gre textarea {
	background: #000;
	color: var(--gc-ink);
	border: 2px solid var(--gc-chrome-dark);
	border-right-color: var(--gc-chrome);
	border-bottom-color: var(--gc-chrome);
	border-radius: 0;
	box-shadow: none;
	font-size: 16px; /* under 16px, iPhones zoom in when the field is tapped */
}
body.svc-body.gc-contact .gre select { appearance: auto; }
body.svc-body.gc-contact .gre input:focus,
body.svc-body.gc-contact .gre select:focus,
body.svc-body.gc-contact .gre textarea:focus { outline: 2px solid var(--gc-accent); outline-offset: 0; }
body.svc-body.gc-contact .gre__privacy { font-size: 14px; color: var(--gc-ink-muted); }

body.svc-body.gc-contact .gre__button {
	padding: 7px 26px;
	background: #ffd400;
	color: #000;
	border: 2px solid #fff;
	border-right-color: #000;
	border-bottom-color: #000;
	border-radius: 0;
	font-family: var(--gc-font-label);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
body.svc-body.gc-contact .gre__button:hover { background: #fff27a; filter: none; }
body.svc-body.gc-contact .gre__button:active { border-color: #000 #fff #fff #000; }

body.gc-contact .gre__notice {
	background: rgba(57, 255, 20, 0.06);
	border: 1px solid var(--gc-accent);
	border-left-width: 4px;
	font-size: 17px;
}
body.svc-body.gc-contact .gre__notice strong {
	font-family: var(--gc-font-label);
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--gc-accent);
}
body.gc-contact .gre__notice--error { border-color: var(--gc-alert); background: rgba(255, 43, 43, 0.08); }