/* ==========================================================
   Maline Contact v3
   Preserve the earlier Contact UI; only refine the picklists
   and small alignment details.
   ========================================================== */

/* The earlier form layout stays intact. Give the two remaining selects
   a cleaner Maline trigger without changing the rest of the inputs. */
.form-grid .form-field:has(> select){
  position:relative;
}
.form-grid .form-field:has(> select)::after{
  content:"";
  position:absolute;
  right:1.05rem;
  top:calc(50% + .55rem);
  width:.52rem;
  height:.52rem;
  border-right:1.5px solid rgba(17,17,15,.72);
  border-bottom:1.5px solid rgba(17,17,15,.72);
  transform:translateY(-50%) rotate(45deg);
  pointer-events:none;
  transition:transform .2s ease,border-color .2s ease;
}
.form-grid .form-field:has(> select):focus-within::after{
  transform:translateY(-15%) rotate(225deg);
  border-color:#11110f;
}
.form-grid select{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-height:3.85rem;
  padding:.9rem 3rem .9rem 1rem;
  border:1px solid rgba(17,17,15,.18);
  border-radius:.7rem;
  background:
    linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.28));
  color:#11110f;
  font:inherit;
  cursor:pointer;
  box-shadow:none;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.form-grid select:hover{
  border-color:rgba(17,17,15,.4);
  background:#fff;
}
.form-grid select:focus{
  outline:none;
  border-color:#11110f;
  background:#fff;
  box-shadow:0 0 0 3px rgba(17,17,15,.055);
}
.form-grid select:invalid{
  color:rgba(17,17,15,.42);
}
.form-grid select option{
  color:#11110f;
  background:#f6f1e8;
}

/* Keep the three social tags consistent and aligned. */
.contact-social-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.contact-social-tags .tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.35rem;
  text-decoration:none;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.contact-social-tags .tag:hover,
.contact-social-tags .tag:focus-visible{
  background:#11110f;
  color:#f6f1e8;
  border-color:#11110f;
  transform:translateY(-2px);
}

/* With budget/date removed, keep the project fields balanced in the grid. */
.form-grid .form-field:has(#service),
.form-grid .form-field:has(#referral){
  align-self:start;
}

@media(max-width:700px){
  .form-grid select{
    min-height:3.65rem;
  }
}