:root{--gap:14px;}
*,*::before,*::after{box-sizing:border-box}

.contact{display:flex;justify-content:center;padding:40px 16px 80px;}
.card{
  width:min(980px,94vw);
  margin:0 auto;
  background:var(--color-tertiary);
  border:1px solid rgba(38,59,70,0.25);
  border-radius:16px;
  padding:24px;
  box-shadow:var(--shadow-sm);
}

.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);
  gap:28px;
  align-items:start;
}
.contact-intro{display:flex;flex-direction:column;gap:16px;}
.title{margin:0 0 6px;font-size:36px;font-weight:900;color:var(--color-text);font-family:"Intro Rust";}
.subtitle{margin:0;opacity:.8;color:var(--color-text);}

.contact-info{display:grid;gap:12px;}
.info{
  padding:12px 14px;
  border-radius:14px;
  background:var(--color-secondary);
  border:1px solid rgba(38,59,70,0.18);
}
.info__label{
  display:block;
  font-size:12px;
  letter-spacing:.08em;
  font-family: "Display Bold";
  color:rgba(38,59,70,0.65);
  margin-bottom:6px;
  font-weight:700;
}
.info__value{font-weight:700;color:var(--color-text);}

.contact-tags{display:flex;flex-wrap:wrap;gap:8px;}
.tag{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(38,59,70,0.2);
  background:var(--color-secondary);
  color:var(--color-text);
  font-size:13px;
  font-weight:700;
}

.contact-form{width:100%;}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);}
.field{display:flex;flex-direction:column;gap:8px;margin:0 0 var(--gap);}
.field label{font-weight:700;color:var(--color-text);}
.field input,
.field textarea{
  display:block;
  width:100%;
  padding:12px 14px;
  border-radius:var(--radius-interactive);
  border:1px solid rgba(38,59,70,0.25);
  background:var(--color-secondary);
  color:var(--color-text);
  outline:none;
}
#contactMessage{
  border-radius:20px;
}
.field textarea{min-height:160px;resize:vertical;}

.error{color:var(--color-accent);font-size:14px;min-height:16px;}
.form-note{margin-top:12px;min-height:18px;font-size:14px;}

.link2{color:var(--color-primary);text-decoration:none;}
.link2:hover{color:var(--color-primary-strong);text-decoration:underline;}

.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
}

@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:480px){
  .card{padding:16px;}
  .title{font-size:30px;}
  .field-row{grid-template-columns:1fr;}
}
.field2{border-radius: 20px;}