/* ============================================================
   NASH STUDIO — contact form
   ============================================================ */

.contact-grid{display:grid;grid-template-columns:minmax(240px,1fr) 1.9fr;gap:clamp(34px,6vw,104px);align-items:start}
.contact-aside{position:sticky;top:96px}

.form{display:block}
.f{margin-bottom:clamp(24px,2.6vw,34px);border:0;padding:0;min-width:0}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px)}

.f label,.f legend{
  display:block;font-family:var(--body);font-weight:600;
  font-size:9.5px;text-transform:uppercase;letter-spacing:.2em;
  color:var(--ink-soft);margin-bottom:10px;line-height:1.7;
}
.req{color:var(--walnut)}
.hint{font-family:var(--body);font-weight:400;font-size:12px;line-height:1.7;color:var(--ink-soft);margin:-4px 0 10px;letter-spacing:.01em}

.f input[type="text"],.f input[type="email"],.f textarea{
  width:100%;background:var(--soft-white);
  border:1px solid var(--rule);border-radius:0;
  font-family:var(--body);font-weight:400;font-size:14px;letter-spacing:.02em;
  color:var(--charcoal);padding:14px 16px;line-height:1.6;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.f textarea{resize:vertical;min-height:150px}
.f input:focus,.f textarea:focus{outline:0;border-color:var(--walnut);background:#fff}
.f input::placeholder,.f textarea::placeholder{color:#A8A29A}

/* Checkboxes and radios */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.radios{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 24px}
/* These are <label>s inside .f, so they must out-specify `.f label` above —
   otherwise display:block wins and the flex gap and alignment never apply. */
.f .check{display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  font-family:var(--body);font-weight:400;font-size:13.5px;letter-spacing:.02em;
  text-transform:none;color:var(--ink-soft);margin:0 0 0;line-height:1.6}
.f .check span{display:block;padding-top:1px}
.f .check input{
  appearance:none;-webkit-appearance:none;
  width:15px;height:15px;flex-shrink:0;margin:3px 0 0;
  border:1px solid var(--rule);background:var(--soft-white);cursor:pointer;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.f .check input[type="radio"]{border-radius:50%}
.f .check input:checked{background:var(--walnut);border-color:var(--walnut);
  box-shadow:inset 0 0 0 3px var(--soft-white)}
.f .check input:focus-visible{outline:2px solid var(--walnut);outline-offset:2px}
.f .check:hover input{border-color:var(--taupe,#8D8378)}

/* Validation */
.err{font-family:var(--body);font-weight:400;font-size:11.5px;letter-spacing:.02em;
  color:#9A3B32;margin-top:7px;display:none;line-height:1.6}
.err.show{display:block}
.f.invalid input,.f.invalid textarea{border-color:#9A3B32}

/* Honeypot */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Submit */
.f-submit{margin-top:clamp(28px,3vw,40px);display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.form-status{font-family:var(--body);font-weight:400;font-size:12.5px;letter-spacing:.02em;color:var(--ink-soft);line-height:1.7;max-width:44ch}
.form-status.ok{color:var(--walnut)}
.form-status.bad{color:#9A3B32}
#submitBtn[disabled]{opacity:.5;cursor:default}
#submitBtn[disabled]:hover{background:var(--charcoal);color:var(--soft-white);border-color:var(--charcoal)}

/* Success panel replaces the form */
.sent{border:1px solid var(--rule);padding:clamp(34px,4vw,58px);text-align:center;background:var(--stone-10)}

@media (max-width:980px){
  .contact-grid{grid-template-columns:1fr}
  .contact-aside{position:static}
}
@media (max-width:620px){
  .f-row{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr}
}