/* ============================================================
   Valentra Tax Advisors — Contact Page
   Page-specific styling
   ============================================================ */

.contact-intro{
  padding-bottom:8px;
  text-align:left;
}

.contact-intro .eyebrow{
  justify-content:flex-start;
}

.contact-intro h1{
  max-width:640px;
  margin:0;
  font-size:2.2rem;
}

.contact-intro .lede{
  max-width:560px;
  margin:16px 0 0;
}

/* ============================================================
   Layout
   ============================================================ */

.contact-wrapper{
    padding-top:0;
    padding-bottom:24px;
}

.contact-grid{
    margin-top:12px;
}


.contact-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:32px;
  align-items:stretch;
  margin-top:36px;
}

/* ============================================================
   Contact Form Card
   ============================================================ */

#contactForm{
  background:#fff;
  border:1px solid var(--hairline);
  border-radius:4px;
  padding:38px 40px;
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  box-shadow:0 10px 28px rgba(9,24,54,.06);
  transition:.25s ease;
}

#contactForm:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(9,24,54,.12);
}

#contactForm::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg,var(--gold),var(--signal));
}

/* Elegant inner outline */
#contactForm::after{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(212,160,23,.14);
  border-radius:2px;
  pointer-events:none;
}

.form-title{
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--signal);
  margin:0 0 24px;
}

.field select{
  cursor:pointer;
}

.field textarea{
  resize:vertical;
  min-height:120px;
}

#contactForm .btn-gold{
  width:100%;
  justify-content:center;
  margin-top:auto;
  transition:.25s ease;
}

#contactForm .btn-gold:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(216,158,10,.28);
}

.form-note{
  margin-top:16px;
  font-size:11.5px;
  color:var(--slate);
  text-align:center;
}

/* ============================================================
   Contact Side Card
   ============================================================ */

.contact-side{
  background:linear-gradient(165deg,var(--navy) 0%,var(--navy-soft) 100%);
  color:#fff;
  border-radius:4px;
  padding:38px 36px;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
}

.contact-side::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  top:-90px;
  right:-90px;
  border-radius:50%;
  background:rgba(249,191,29,.06);
}

.contact-side .form-title{
  color:var(--gold);
}

.contact-side .item{
  position:relative;
}

.contact-side .glyph{
  border-radius:6px;
  color:var(--gold);
  transition:.2s ease;
}

.contact-side .glyph svg{
  width:14px;
  height:14px;
}

.contact-side .item:hover .glyph{
  background:var(--gold);
  color:var(--navy);
}

.contact-side a{
  text-decoration:none;
}

.contact-side a:hover{
  color:var(--gold);
}

.field label{
    font-size:10px;
    white-space:nowrap;
}

/* ============================================================
   Map
   ============================================================ */

.map-diagram{
  margin-top:24px;
  flex:1;
  border-radius:4px;
  overflow:hidden;
  filter:grayscale(20%);
}

.map-diagram iframe{
  width:100%;
  height:100%;
  min-height:240px;
  border:0;
}

.side-footnote{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:12.5px;
  line-height:1.6;
  color:#AEB9D1;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width:992px){

  .contact-grid{
    grid-template-columns:1fr;
  }

  #contactForm,
  .contact-side{
    padding:32px 28px;
  }

}

@media (max-width:768px){

  #contactForm,
  .contact-side{
    padding:28px 22px;
  }

  .contact-intro h1{
    font-size:1.9rem;
  }

}

@media (max-width:480px){

  .contact-grid{
    gap:24px;
  }

  #contactForm,
  .contact-side{
    padding:24px 18px;
  }

}