/* ── 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; }

/* ── BACKGROUND — the bright model photo sits fixed behind the page;
      the content floats over it as cards (with the shared parallax drift) ── */
.contact-bg {
  position:fixed; inset:0; z-index:-1;
  background:url('../images/about/hero-video-poster.webp') center/cover no-repeat;
}
.contact-bg::after {
  content:''; position:absolute; inset:0;
  background:rgba(240,238,234,0.42);
}
.contact-intro, .contact-form, .contact-bar {
  background:rgba(240,238,234,0.93);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 18px 44px rgba(58,46,34,0.13);
  padding:48px 40px;
}
footer { background:var(--bg); }

/* ── INTRO ── */
.contact-intro { margin-bottom:28px; 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 — centered: label in the middle, fill-in line below it ── */
.contact-form { margin-bottom:28px; }
.form-row { display:grid; grid-template-columns:1fr; gap:22px; margin-bottom:22px; max-width:480px; margin-left:auto; margin-right:auto; }
.form-group { display:block; text-align:center; }
.contact-form > form > .form-group { max-width:480px; margin:0 auto; }
label { font-size:7.5px; letter-spacing:0.22em; text-transform:uppercase; color:#7a6a55; opacity:0.65; display:inline-block; }
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;
  text-align:center; margin-top:10px;
}
/* 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; text-align:center; text-align-last:center; }
select option { background:#f0eeea; color:#3a2e22; }
.form-bottom { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; margin-top:28px; }
.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 — shared .contact-bar/.contact-card component now lives in shared.css ── */

/* ── 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; }
  footer { flex-direction:column; gap:12px; text-align:center; padding:20px 24px; }
}