/* Contact page: CMS details beside the enquiry form */

.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: start; }
.contact-details .prose > :first-child { margin-top: 0; }
.contact-details__heading, .contact-card__heading { margin: 0 0 16px; font-size: 22px; font-weight: 600; letter-spacing: .08em; color: var(--maroon); }
.contact-details__list li { display: flex; flex-direction: column; padding: 12px 0; border-bottom: 1px solid #d0d0d0; }
.contact-details__list strong { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--maroon); }
.contact-details__list a { color: var(--ink); }

.contact-card { background: var(--grey-card); border-top: 4px solid var(--maroon); border-radius: var(--radius); padding: 28px; scroll-margin-top: 110px; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.contact-field { margin-bottom: 16px; }
.contact-field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; }
.contact-field small { color: var(--muted); font-weight: 400; }
.contact-field__req { color: var(--maroon); margin-left: 2px; }
.contact-field input, .contact-field textarea { width: 100%; padding: 10px 12px; font: inherit; font-size: 15px; color: var(--ink); background: var(--white); border: 1px solid #c4c4c4; border-radius: 4px; transition: border-color .15s, box-shadow .15s; }
.contact-field textarea { resize: vertical; min-height: 140px; }
.contact-field input:focus, .contact-field textarea:focus { outline: none; border-color: var(--maroon); box-shadow: 0 0 0 3px rgba(127, 9, 9, .15); }
.contact-field.has-error input, .contact-field.has-error textarea { border-color: #b42318; }
.contact-field__error { margin: 6px 0 0; color: #b42318; font-size: 13px; }
.contact-form__submit { cursor: pointer; font: inherit; font-size: 14px; font-weight: 500; padding: 10px 28px; }

/* Off-screen rather than display:none, which some bots detect */
.contact-form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.contact-alert { margin-bottom: 18px; padding: 12px 16px; border-radius: 4px; font-size: 15px; }
.contact-alert--success { background: #e6f4ea; color: #1e5631; border-left: 4px solid #2e7d32; }
.contact-alert--error { background: #fdecea; color: #8a1c13; border-left: 4px solid #b42318; }

@media (max-width: 900px) {
    .contact-layout { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 560px) {
    .contact-card { padding: 20px 16px; }
    .contact-form__row { grid-template-columns: 1fr; }
}