/* =========================================================
   CONTACT PAGE ADDITIONS
   Page-specific styles for the Contact page only (form, page
   intro hero, query grid). The shared nav / drawer CSS now lives
   in radhe-exchange.css since the header is shared across all
   pages. Loaded AFTER radhe-exchange.css. Same color and font
   tokens as the rest of the site (--teal, --teal-deep, Teko, Work Sans).
   ========================================================= */

/* ===== PAGE INTRO (used on Contact / About / Blog style pages) ===== */
.content-hero{
  background: var(--teal-deep);
  padding: 46px 6vw 40px;
  color: var(--white);
}
.content-hero h1{
  font-size: 44px;
  color: var(--white);
  margin-bottom: 14px;
  max-width: 760px;
}
.content-hero p{
  color: rgba(255,255,255,.85);
  font-size: 16px;
  max-width: 660px;
  margin-bottom: 8px;
}
@media (max-width: 860px){
  .content-hero h1{ font-size: 30px; }
}

/* ===== CONTACT FORM ===== */
.contact-layout{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 860px){
  .contact-layout{ grid-template-columns: 1fr; }
}
.contact-form{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.form-group{ margin-bottom: 18px; }
.form-group label{
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--teal-dark);
  margin-bottom: 6px;
}
.form-group input,
.form-group textarea{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: 'Work Sans', sans-serif;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--white);
}
.form-group input:focus,
.form-group textarea:focus{
  outline: none;
  border-color: var(--teal);
}
.form-group textarea{ resize: vertical; min-height: 130px; }
.form-note{
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
}
.form-success{
  display: none;
  background: var(--teal-pale);
  border-left: 4px solid var(--teal);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 18px;
  font-size: 14px;
  color: var(--teal-dark);
  margin-top: 16px;
}
.form-success.show{ display: block; }

/* ===== QUERY LIST (what support helps with) ===== */
.query-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 860px){
  .query-grid{ grid-template-columns: 1fr; }
}
.query-item{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.query-item .qi-icon{
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--teal-pale);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.query-item .qi-icon svg{
  width: 18px;
  height: 18px;
  stroke: var(--teal-dark);
  fill: none;
  stroke-width: 1.8;
}
.query-item h4{
  font-size: 17px;
  color: var(--teal-deep);
  margin-bottom: 3px;
  font-weight: 600;
}
.query-item p{
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
}


.mobile-experience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

@media (max-width: 860px) {
  .mobile-experience {
    grid-template-columns: 1fr;
    gap: 25px;
  }
}