/* Contact page: matching the Albatross Point site styles. */
.contact-page header {
	position: relative;
	background: var(--cream);
	border-bottom: 1px solid var(--line);
}
.contact-page a.brand { color: inherit; text-decoration: none; }
.contact-intro {
	max-width: 900px;
	margin: 0 auto;
	padding: 66px 6% 48px;
	text-align: center;
}
.contact-intro h1 {
	margin: 15px 0 14px;
	font-size: clamp(42px, 6vw, 68px);
	font-weight: 400;
	line-height: 1;
}
.contact-intro > p:not(.eyebrow) { margin: 0 auto; font-size: 17px; line-height: 1.6; }

.contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr);
	gap: clamp(34px, 6vw, 82px);
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 6% 78px;
	align-items: start;
}
.contact-form-panel { padding: 34px; border: 1px solid var(--line); background: var(--paper); }
.contact-form-panel h2,
.contact-details h2,
.contact-book h2 { margin: 12px 0 24px; font-size: 34px; font-weight: 400; line-height: 1.15; }
.contact-form { display: grid; gap: 19px; }
.contact-form label:not(.contact-trap) { display: grid; gap: 8px; }
.contact-label { font: 10px Arial, sans-serif; letter-spacing: 2px; }
.contact-label em { color: #625e54; font-style: normal; letter-spacing: 1px; }
.contact-form input,
.contact-form textarea {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--line);
	border-radius: 0;
	background: #fffdf8;
	color: var(--ink);
	font: 16px Georgia, "Times New Roman", serif;
}
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--olive); }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible { outline: 3px solid #20231e; outline-offset: 2px; }
.contact-feedback:focus { outline: 3px solid #20231e; outline-offset: 3px; }
.contact-submit { justify-self: start; border: 0; cursor: pointer; }
.contact-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.contact-feedback { margin: 0 0 20px; padding: 14px 16px; font-size: 15px; line-height: 1.5; }
.contact-feedback.is-success { border-left: 3px solid var(--olive); background: #e9eee5; }
.contact-feedback.is-error { border-left: 3px solid #8a1f11; background: #f3e9e3; }

.contact-details { padding-top: 30px; }
.contact-details h2 { margin-bottom: 16px; }
.contact-address { margin: 0 0 8px; font-size: 16px; line-height: 1.6; }
.contact-email { display: inline-block; color: var(--olive); font-size: 16px; }
.contact-map-link { display: block; width: fit-content; margin: 23px 0 14px; color: var(--ink); font: 10px Arial, sans-serif; letter-spacing: 2px; text-decoration: none; }
.contact-map-link:hover { text-decoration: underline; }
.contact-map { height: 330px; border: 1px solid var(--line); background: #e8e4db; }
.contact-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.contact-map-note { margin: 10px 0 0; color: #68665e; font-size: 13px; line-height: 1.5; }
.contact-book { padding: 52px 6%; background: var(--olive); color: #fff; text-align: center; }
.contact-book .eyebrow { color: #e2dfd4; }
.contact-book h2 { margin: 12px 0 23px; }
.contact-book .cta { display: inline-block; border: 1px solid #ddd; background: transparent; color: #fff; }

@media (max-width: 820px) {
	.contact-layout { grid-template-columns: 1fr; }
	.contact-details { padding-top: 0; }
}
@media (max-width: 560px) {
	.contact-intro { padding: 48px 7% 34px; }
	.contact-intro > p:not(.eyebrow) { font-size: 15px; }
	.contact-layout { padding: 0 5% 55px; }
	.contact-form-panel { padding: 24px 19px; }
	.contact-form-panel h2,
	.contact-details h2,
	.contact-book h2 { font-size: 29px; }
	.contact-map { height: 280px; }
	.contact-submit { width: 100%; }
}