/* Contact - page-specific styles. Loaded after base.css. */

/* ============ Contact layout ============ */
.contact-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);
  align-items:stretch;   /* both columns share the row height, so they end level */
}

/* ---- Message form ---- */
.form-card{
  background:var(--card);border:1px solid var(--line);border-radius:22px;
  padding:clamp(26px,3vw,38px);
  box-shadow:0 26px 54px -40px rgba(69,58,82,.4);
}
.form-card h2{font-family:var(--serif);font-size:26px;font-weight:600;line-height:1.25}
.form-intro{font-size:14.5px;color:var(--ink-soft);margin-top:8px}
.form-intro a{font-weight:600}
form.contact{margin-top:26px;display:flex;flex-direction:column;gap:18px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.field label .opt{font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-soft);opacity:.8}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:16px;color:var(--ink);
  background:var(--ground);border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;width:100%;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.field textarea{resize:vertical;min-height:132px;line-height:1.6}
.field select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236E6379' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px;
}
.field input::placeholder,.field textarea::placeholder{color:#A99FB4}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:var(--card);
  border-color:var(--peri);box-shadow:0 0 0 3px rgba(194,205,255,.4);
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-card .btn{width:100%;justify-content:center}
.form-foot{font-size:12.5px;color:var(--ink-soft);text-align:center}
.form-result{
  font-size:14.5px;line-height:1.55;border-radius:12px;padding:13px 16px;
  border:1px solid var(--line);background:var(--ground);
}
.form-result[hidden]{display:none}
.form-result.ok{background:var(--mint);border-color:#C4E6D3;color:#2F5D45}
.form-result.err{background:var(--pink);border-color:#F3CFE4;color:#8A3B66}

/* ---- Side column ---- */
.side{display:flex;flex-direction:column;gap:16px;justify-content:space-between}
.info{
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:24px 26px;
}
.info.accent{background:linear-gradient(135deg,var(--lilac) 0%,#DCE3FB 100%);border-color:transparent}
.info h3{
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cta);margin-bottom:12px;
}
.info p{font-size:15px;color:var(--ink-soft);line-height:1.6}
.info .big{
  font-family:var(--serif);font-size:24px;font-weight:600;color:var(--ink);
  text-decoration:none;line-height:1.3;display:inline-block;
}
.info .big:hover{text-decoration:underline}
.info address{font-style:normal;font-size:15.5px;line-height:1.6;color:var(--ink)}
.info .link{display:inline-block;margin-top:10px;font-size:14.5px;font-weight:600;text-decoration:none}
.info .link:hover{text-decoration:underline}
.info .btn{margin-top:14px;width:100%;justify-content:center}
.info ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.info .hrow{
  display:flex;justify-content:space-between;gap:14px;
  font-size:15px;font-variant-numeric:tabular-nums;
}
.info .hrow span:first-child{color:var(--ink-soft)}
.info .hnote{font-size:13.5px;color:var(--ink-soft);margin-top:4px}

/* ---- Map ---- */
.map-band{padding-block:0}
.map-frame{
  position:relative;width:100%;height:clamp(280px,38vw,420px);
  border:0;display:block;filter:saturate(.82);
}

/* ============ Responsive - page ============ */
@media (max-width:960px){
  .contact-grid{grid-template-columns:1fr;gap:clamp(28px,4vw,40px);align-items:start}
  .side{justify-content:flex-start}
}
@media (max-width:640px){
  .field-row{grid-template-columns:1fr}
  .form-card{padding:24px 20px}
}