/* ── CONTACT PAGE ── */

body { min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden; }

/* ── MAIN ── */
main { flex:1; max-width:860px; margin:0 auto; width:100%; padding:140px 48px 80px; }

/* ── INTRO ── */
.contact-intro { margin-bottom:64px; text-align:center; }
.page-label { font-size:8.5px; letter-spacing:0.28em; text-transform:uppercase; color:#7a6a55; opacity:0.60; margin-bottom:16px; display:block; }
.contact-title { font-size:34px; font-weight:300; color:#3a2e22; letter-spacing:0.04em; line-height:1.25; margin-bottom:20px; }
.contact-subtitle { font-size:12px; line-height:1.9; color:#5a4e40; opacity:0.78; max-width:480px; margin:0 auto; }

/* ── FORM ── */
.contact-form { margin-bottom:72px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.form-group { display:flex; flex-direction:column; gap:8px; }
label { font-size:7.5px; letter-spacing:0.22em; text-transform:uppercase; color:#7a6a55; opacity:0.65; }
input, textarea, select {
  background:transparent; border:none;
  border-bottom:0.7px solid rgba(74,56,40,0.25);
  padding:10px 0; font-family:'Montserrat','Assistant',sans-serif;
  font-size:12px; color:#3a2e22; outline:none; width:100%;
  transition:border-color 0.3s; -webkit-appearance:none; border-radius:0;
}
/* checkbox style is in shared.css */
input:focus, textarea:focus, select:focus { border-bottom-color:rgba(74,56,40,0.70); }
input::placeholder, textarea::placeholder { color:rgba(74,56,40,0.28); font-size:11px; }
textarea { resize:none; height:100px; margin-bottom:20px; }
select { cursor:pointer; }
select option { background:#f0eeea; color:#3a2e22; }
.form-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:32px; }
.submit-btn {
  font-family:'Montserrat','Assistant',sans-serif; font-size:9.5px; letter-spacing:0.22em; text-transform:uppercase;
  color:#4a3828; background:none; border:0.7px solid rgba(74,56,40,0.50);
  padding:12px 40px; border-radius:30px; cursor:pointer; transition:background 0.35s;
}
.submit-btn:hover { background:rgba(74,56,40,0.08); }
.submit-note { font-size:8.5px; color:#7a6a55; opacity:0.55; letter-spacing:0.06em; }
.success-msg { display:none; margin-top:16px; font-size:10px; color:#5a7a55; letter-spacing:0.08em; }
.req { color:#b07a5a; opacity:0.9; }
.field-error { font-size:8.5px; color:#b05a5a; letter-spacing:0.06em; margin-top:4px; display:none; }
.field-error.visible { display:block; }
input.invalid, textarea.invalid { border-bottom-color:rgba(176,90,90,0.6) !important; }

/* ── CONTACT BAR ── */
.contact-bar {
  border-top:0.5px solid rgba(74,56,40,0.12); padding-top:48px;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
}
.contact-card { display:flex; flex-direction:column; align-items:center; gap:12px; text-decoration:none; transition:opacity 0.3s; padding:0 16px; min-width:0; }
.contact-card:hover { opacity:0.65; }
.card-icon { width:44px; height:44px; border:0.7px solid rgba(74,56,40,0.22); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:border-color 0.3s, background 0.3s; }
.contact-card:hover .card-icon { border-color:rgba(74,56,40,0.55); background:rgba(74,56,40,0.05); }
.card-icon svg { width:16px; height:16px; stroke:rgba(74,56,40,0.65); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.card-label { font-size:7.5px; letter-spacing:0.22em; text-transform:uppercase; color:#7a6a55; opacity:0.60; }
.card-value { font-size:9.5px; letter-spacing:0.06em; color:#4a3828; opacity:0.82; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

/* ── FOOTER ── */
footer { border-top:0.5px solid rgba(74,56,40,0.10); padding:24px 48px; display:flex; justify-content:space-between; align-items:center; }
.footer-logo { width:80px; filter:sepia(1) saturate(0.4) brightness(0.55); opacity:0.55; mix-blend-mode:multiply; }
.footer-copy { font-size:8px; letter-spacing:0.12em; color:#7a6a55; opacity:0.50; }

/* ── MOBILE ── */
@media (max-width:767px) {
  main { padding:100px 24px 60px; }
  .contact-title { font-size:26px; }
  .form-row { grid-template-columns:1fr; }
  .form-bottom { flex-direction:column; align-items:flex-start; gap:16px; }
  .contact-bar { grid-template-columns:repeat(2, 1fr); gap:40px 0; }
  .contact-card { padding:0 8px; }
  .card-value { white-space:normal; text-align:center; }
  footer { flex-direction:column; gap:12px; text-align:center; padding:20px 24px; }
}