.contact-hero { background: linear-gradient(90deg, rgba(252, 251, 248, .78), rgba(252, 251, 248, .55)), url('../assets/branding/sugarcane-path-cloudy-sky.jpg?v=c02455d33c27-00bdbeec10aa') center / cover no-repeat; }
.contact-photo figcaption { display: block; margin-top: 15px; color: var(--muted); font-size: 12px; line-height: 1.6; letter-spacing: 1.3px; text-align: center; }
.contact-photo figcaption .fa-address-card { color: var(--rust); margin-right: 8px; }
.contact-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 11%; align-items: start; }
.contact-visit, .contact-form-panel { min-width: 0; }
.contact-visit > h2, .contact-form-panel > h2 { font-size: clamp(38px, 3.5vw, 50px); margin: 20px 0; }
.contact-visit h2 em, .contact-form-panel h2 em { color: var(--rust); }
.contact-intro { max-width: 330px; margin-bottom: 31px; font-size: 16px; color: var(--muted); }
.contact-detail { display: flex; gap: 22px; padding: 22px 0; border-top: 1px solid var(--line); }
.contact-detail > i { flex: 0 0 20px; width: 20px; padding-top: 5px; font-size: 17px; text-align: center; color: var(--rust); }
.contact-detail h3 { font-size: 23px; letter-spacing: -.5px; }
.contact-detail p { margin-top: 5px; font-size: 16px; color: var(--muted); }
.contact-details-note { border-top: 1px solid var(--line); padding-top: 18px; }
.contact-form-notice { display: flex; align-items: baseline; gap: 12px; margin: 26px 0; }
.contact-form-notice > i { color: var(--rust); flex-shrink: 0; }
.contact-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-field { min-width: 0; margin-bottom: 23px; }
.contact-field label { display: block; margin-bottom: 10px; font-size: 14px; line-height: 1.5; font-weight: 600; }
.contact-field label span { color: var(--muted); font-size: 14px; font-weight: 400; }
.contact-field input, .contact-field select, .contact-field textarea { width: 100%; min-width: 0; border: 1px solid #97988e; border-radius: 0; background: transparent; padding: 13px 12px; color: var(--ink); font: 16px/1.5 var(--sans); }
.contact-field input, .contact-field select { min-height: 48px; }
.contact-field select { background-color: var(--paper); }
.contact-field textarea { display: block; resize: vertical; min-height: 146px; }
.contact-field input:focus-visible, .contact-field select:focus-visible, .contact-field textarea:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; border-color: var(--rust); }
.contact-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; }
.contact-form-actions button:disabled { cursor: default; opacity: .55; }
.message-preview { margin-top: 30px; padding: 27px; border: 1px solid var(--ink); background: #f2efe8; }
.message-preview[hidden] { display: none; }
.message-preview h3 { margin: 12px 0; font-size: 29px; line-height: 1.12; letter-spacing: -.9px; }
.message-preview h3:focus { outline: none; }
.preview-details { margin: 23px 0; padding-block: 12px; border-block: 1px solid var(--line); }
.preview-details > div { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; padding: 5px 0; font-size: 14px; line-height: 1.6; }
.preview-details dt { color: var(--muted); }
.preview-details dd { margin: 0; overflow-wrap: anywhere; }
.preview-message { font-size: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 800px) {
  .contact-layout { gap: 7%; grid-template-columns: .8fr 1.2fr; }
  .contact-field-row { grid-template-columns: 1fr; gap: 0; }
  .contact-visit > h2, .contact-form-panel > h2 { font-size: 38px; }
  .contact-detail { gap: 15px; }
  .contact-photo figcaption { letter-spacing: .8px; }
  .message-preview { padding: 23px; }
}
@media (max-width: 560px) {
  .contact-layout { grid-template-columns: 1fr; gap: 48px; }
  .contact-visit > h2, .contact-form-panel > h2 { font-size: 42px; }
  .contact-intro { max-width: 340px; }
  .contact-detail { padding-block: 19px; gap: 21px; }
  .contact-form-panel { border-top: 1px solid var(--ink); padding-top: 38px; }
  .message-preview { padding: 22px; }
  .message-preview h3 { font-size: 28px; }
}