/* ============================================================
   contact.css — contact details + form
   ============================================================ */

.contact-hero{padding:80px 0 0;text-align:center}
.contact-hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(46px,8vw,96px);line-height:1;letter-spacing:-.02em;margin:18px 0 22px}
.contact-hero .lede{font-size:17px;color:var(--fg2);max-width:56ch;margin:0 auto;line-height:1.7}

.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;padding:72px 0 40px;align-items:start}

.cd .cd-h{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg3);padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:0}
.cd-list{margin:0}
.cd-list dt{font-size:12px;letter-spacing:.06em;color:var(--fg3);padding-top:18px}
.cd-list dd{font-size:16px;color:var(--fg);padding:5px 0 18px;border-bottom:1px solid var(--line)}
.cd-list dd a{transition:color .2s}
.cd-list dd a:hover{color:var(--accent)}
.csoc{display:flex;gap:14px;margin-top:26px}
.csoc a{
  font-size:12px;letter-spacing:.06em;color:var(--fg2);
  border:1px solid var(--line2);border-radius:99px;padding:9px 16px;transition:all .2s;
}
.csoc a:hover{border-color:var(--accent);color:var(--accent)}

/* form */
form.contact-form{display:grid;gap:26px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.field{display:flex;flex-direction:column;gap:9px;border-bottom:1px solid var(--line2);padding-bottom:10px;transition:border-color .25s}
.field:focus-within{border-color:var(--accent)}
.field label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg3)}
.field input,.field textarea{
  background:none;border:none;color:var(--fg);font-family:var(--sans);
  font-size:16px;padding:2px 0;resize:vertical;width:100%;
}
.field input::placeholder,.field textarea::placeholder{color:var(--fg3)}
.field input:focus,.field textarea:focus{outline:none}
form.contact-form button{
  justify-self:start;margin-top:6px;background:var(--fg);color:var(--bg);
  border:none;border-radius:99px;padding:16px 34px;cursor:pointer;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  transition:background .25s,transform .25s;font-family:var(--sans);
}
form.contact-form button:hover{background:var(--accent);transform:translateY(-2px)}
form.contact-form button.done{background:var(--accent)}

@media(max-width:820px){
  .contact-grid{grid-template-columns:1fr;gap:48px}
}
@media(max-width:540px){
  .cf-row{grid-template-columns:1fr;gap:26px}
}