/* ════════════════════════════════════════════════
   THRYD — pages/contact.css
   ════════════════════════════════════════════════ */

/* ── PAGE HERO ───────────────────────────────── */
.contact-hero{
  padding:180px 52px 100px;
  border-bottom:1px solid var(--border);
  position:relative;overflow:hidden;
}
.contact-hero-bg{
  position:absolute;inset:0;
  font-family:var(--display);
  font-size:32vw;line-height:1;
  color:rgba(26,23,20,0.03);
  white-space:nowrap;
  pointer-events:none;user-select:none;
  letter-spacing:-.02em;
  top:50%;transform:translateY(-50%);
  left:-2%;
}
.contact-eyebrow{
  font-family:var(--mono);font-size:9px;
  letter-spacing:.32em;text-transform:uppercase;
  color:var(--rust);display:block;margin-bottom:28px;
  position:relative;
}
.contact-hero-h1{
  font-family:var(--display);
  font-size:clamp(56px,9vw,140px);
  line-height:.88;letter-spacing:.02em;
  text-transform:uppercase;
  position:relative;margin-bottom:28px;
}
.contact-hero-sub{
  font-family:var(--serif);font-style:italic;
  font-weight:300;font-size:clamp(18px,2vw,24px);
  color:var(--ink2);max-width:480px;line-height:1.55;
  position:relative;
}

/* ── MAIN CONTACT GRID ───────────────────────── */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.6fr;
  min-height:70vh;
}
.contact-sidebar{
  padding:80px 52px;
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  gap:64px;
}
.contact-channel{
  display:flex;flex-direction:column;gap:10px;
}
.contact-ch-label{
  font-family:var(--mono);font-size:9px;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted);
}
.contact-ch-value{
  font-family:var(--display);font-size:clamp(18px,2vw,26px);
  letter-spacing:.02em;text-decoration:none;
  color:var(--ink);transition:color .2s;
}
.contact-ch-value:hover{color:var(--rust)}
.contact-ch-note{
  font-family:var(--serif);font-style:italic;
  font-weight:300;font-size:15px;color:var(--muted);
}

/* ── CONTACT FORM ────────────────────────────── */
.contact-form-wrap{
  padding:80px 64px;
}
.contact-form-heading{
  font-family:var(--display);
  font-size:clamp(32px,4vw,56px);
  letter-spacing:.02em;line-height:.9;
  text-transform:uppercase;margin-bottom:48px;
}
.contact-form{
  display:flex;flex-direction:column;gap:0;
}
.form-row{
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  margin-bottom:2px;
}
.form-field{
  display:flex;flex-direction:column;gap:8px;
  margin-bottom:2px;
}
.form-label{
  font-family:var(--mono);font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);
}
.form-input{
  padding:18px 20px;
  background:var(--cream);
  border:1px solid rgba(26,23,20,.12);
  font-family:var(--mono);font-size:12px;
  letter-spacing:.08em;color:var(--ink);
  outline:none;
  transition:border-color .2s;
  width:100%;
}
.form-input::placeholder{color:var(--muted);opacity:.7}
.form-input:focus{border-color:var(--rust)}
textarea.form-input{
  resize:vertical;
  min-height:160px;
}
select.form-input{
  appearance:none;cursor:pointer;
  background-image:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27%3E%3Cpath fill=%27%238C8479%27 d=%27M1 1l5 5 5-5%27/%3E%3C/svg%3E');
  background-repeat:no-repeat;
  background-position:right 18px center;
}
.form-submit{
  margin-top:2px;
  padding:20px 40px;
  background:var(--ink);color:var(--cream);
  border:1px solid var(--ink);
  font-family:var(--mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;
  cursor:none;align-self:flex-start;
  transition:background .2s,border-color .2s;
}
.form-submit:hover{background:var(--rust);border-color:var(--rust)}

/* ── SOCIAL ROW ──────────────────────────────── */
.social-row{
  padding:80px 52px;
  border-top:1px solid var(--border);
  display:flex;align-items:center;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.social-label{
  font-family:var(--mono);font-size:9px;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted);
}
.social-links{
  display:flex;gap:40px;
}
.social-link{
  font-family:var(--display);font-size:18px;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  position:relative;
  transition:color .2s;
}
.social-link::after{
  content:'';position:absolute;left:0;bottom:-2px;
  width:0;height:1px;background:var(--rust);
  transition:width .3s cubic-bezier(.16,1,.3,1);
}
.social-link:hover{color:var(--rust)}
.social-link:hover::after{width:100%}

/* ── RESPONSIVE ──────────────────────────────── */
@media(max-width:900px){
  .contact-hero{padding:140px 24px 80px}
  .contact-grid{grid-template-columns:1fr}
  .contact-sidebar{padding:60px 24px;border-right:none;border-bottom:1px solid var(--border)}
  .contact-form-wrap{padding:60px 24px}
  .form-row{grid-template-columns:1fr}
  .social-row{padding:60px 24px}
}