/* Contact: a booking panel and a message form, side by side from 1000px.
   Shell and page head come from ../css/styles.css and ../insights/insights.css. Every colour
   is a token, so the form follows the light/dark toggle. */

.contact-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);padding-bottom:var(--s7);}
.contact-panel{border:1px solid var(--line);border-top:4px solid var(--ink);border-radius:var(--r);
  background:var(--bg);padding:var(--s6);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4);}
.contact-panel.is-booking{border-top-color:var(--accent);background:var(--bg-2);}
.contact-panel .num{font:500 0.6875rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.contact-panel h2{font-family:var(--display);font-weight:700;font-size:28px;line-height:1.1;letter-spacing:-0.035em;}
.contact-panel p{color:var(--ink-2);max-width:52ch;margin:0;}
.contact-note{font-size:13px;color:var(--ink-3) !important;}

/* Form ================================================================== */
.contact-form{display:grid;gap:var(--s4);width:100%;}
.field{display:grid;gap:6px;}
.field label{font-size:13px;font-weight:800;color:var(--ink);}
.field .optional{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-left:6px;}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--bg);
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:12px 14px;min-height:48px;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);}
.field textarea{resize:vertical;min-height:140px;line-height:1.55;}
.field select{appearance:none;padding-right:40px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);}
.field textarea::placeholder{color:var(--ink-3);}
/* Only flag a field once the visitor has tried to send; an empty form is not an error. */
.was-validated .field :invalid{border-color:#C8453B;}
.was-validated .field :invalid:focus{box-shadow:0 0 0 3px rgba(200,69,59,0.18);}

.contact-form .button{justify-self:start;border:0;cursor:pointer;font-family:inherit;}
.contact-form .button[disabled]{opacity:.6;cursor:progress;transform:none;box-shadow:none;}

.form-status{margin:0;font-size:14px;font-weight:700;min-height:1px;}
.form-status.is-error{color:#C8453B;}
[data-theme="dark"] .form-status.is-error{color:#FF9B92;}

/* Replaces the form once Formspree has the message. */
.form-done{border-left:4px solid var(--accent);padding:var(--s2) 0 var(--s2) var(--s4);}
.form-done h3{font-family:var(--display);font-size:22px;letter-spacing:-0.03em;margin-bottom:var(--s2);}
.form-done:focus{outline:none;}

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

.contact-email{padding-bottom:var(--s9);color:var(--ink-2);}
.contact-email a{color:var(--ink);font-weight:800;border-bottom:1px solid currentColor;
  display:inline-flex;min-height:32px;align-items:center;}
.contact-email a:hover{color:var(--accent-text);}

@media (min-width:1000px){
  .contact-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;}
  .contact-panel.is-booking{position:sticky;top:calc(82px + var(--s6));}
}