/* ============================================================
   Vauraa — Contact Us page.
   ============================================================ */
.wrap-legal{ max-width:1080px; margin:0 auto; padding:0 clamp(18px,4vw,44px); }

.page-head{ background:var(--ink-2); color:#fff; padding:40px 0 32px; }
.page-head h1{ font-size:clamp(1.8rem,4vw,2.4rem); font-weight:560; margin-top:8px; }
.page-head p{ color:#C9CEDA; max-width:62ch; margin-top:10px; font-size:0.98rem; }

.contact-page{ padding:40px 0 20px; }

.contact-layout{ display:grid; grid-template-columns:1.3fr 1fr; gap:28px; align-items:start; }
@media (max-width:860px){ .contact-layout{ grid-template-columns:1fr; } }

/* ---- form card ---- */
.contact-form-card{
  background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow);
  padding:clamp(22px,4vw,34px);
}
.ch-title{ font-family:'Fraunces',Georgia,serif; font-size:1.3rem; margin:0 0 6px; }
.ch-sub{ color:var(--ink-soft); font-size:0.9rem; margin:0 0 22px; }

.form-alert{ border-radius:12px; padding:14px 18px; margin-bottom:20px; font-size:0.9rem; background:rgba(155,59,50,0.1); border:1px solid rgba(155,59,50,0.3); color:#9B3B32; }

.contact-form-card .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:24px; }
.contact-form-card .form-grid .field.full{ grid-column:1/-1; }
@media (max-width:560px){ .contact-form-card .form-grid{ grid-template-columns:1fr; } }

.contact-form-card .field{ display:flex; flex-direction:column; gap:6px; }
.contact-form-card .field label{ font-size:0.82rem; font-weight:600; color:var(--ink); }
.contact-form-card .field .hint{ font-size:0.76rem; color:var(--ink-soft); font-weight:400; }
.contact-form-card .field input, .contact-form-card .field textarea{
  font: inherit; font-size:0.92rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:9px; padding:11px 13px; width:100%;
}
.contact-form-card .field input:focus, .contact-form-card .field textarea:focus{
  outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold);
}
.contact-form-card .field textarea{ resize:vertical; min-height:130px; }
.contact-form-card .field.error input, .contact-form-card .field.error textarea{ border-color:#9B3B32; }
.contact-form-card .field .error-msg{ font-size:0.78rem; color:#9B3B32; }

.contact-submit{ width:100%; padding:13px 22px; }

/* ---- success ---- */
.contact-success{ text-align:center; padding:20px 0; }
.contact-success .tick{
  width:56px; height:56px; border-radius:50%; background:rgba(168,122,46,0.14); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin:0 auto 18px;
}
.contact-success h2{ font-size:1.4rem; margin-bottom:10px; }
.contact-success p{ color:var(--ink-soft); max-width:48ch; margin:0 auto; }

/* ---- info sidebar ---- */
.contact-info{ display:flex; flex-direction:column; gap:20px; }
.contact-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
.contact-card{ border:1px solid var(--line); border-radius:12px; padding:16px 18px; background:var(--surface); }
.contact-card .lbl{ font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); }
.contact-card .val{ margin-top:6px; font-weight:500; color:var(--ink); }
.contact-card a{ text-decoration:none; color:var(--ink); }
.contact-card a:hover{ color:var(--gold); }

.callout{
  border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:10px;
  padding:16px 20px; background:var(--surface); font-size:0.9rem; color:var(--ink-soft); line-height:1.5;
}

.contact-foot-note{ font-size:0.9rem; color:var(--ink-soft); margin:34px 0 8px; }
.contact-foot-note a{ color:var(--gold); font-weight:600; }