/* =====================================================
   Merchant Technologies — Contact Page Stylesheet
   Shares the same design tokens as blog-styles.css so the
   two pages stay visually consistent. If both are loaded on
   the same site, the :root block below is redundant but
   harmless — safe to trim once merged into one file.
===================================================== */

:root{
  --mt-navy-900:      #0B1F3A;
  --mt-navy-700:      #142C4F;
  --mt-blue-600:      #1B4F91;
  --mt-blue-500:      #2563A6;
  --mt-orange-500:    #FF7A29;
  --mt-orange-600:    #E8630F;
  --mt-bg:            #F6F8FB;
  --mt-card-bg:       #FFFFFF;
  --mt-border:        #E4E9F1;
  --mt-text-900:      #1D2939;
  --mt-text-600:      #4A5568;
  --mt-text-400:      #8A94A6;
  --mt-radius:        12px;
  --mt-shadow:        0 4px 18px rgba(11, 31, 58, 0.07);
  --mt-shadow-hover:  0 14px 30px rgba(11, 31, 58, 0.14);
  --mt-font-head:     'Poppins', 'Segoe UI', sans-serif;
  --mt-font-body:     'Inter', 'Segoe UI', sans-serif;
}

.mt-contact *{ box-sizing:border-box; }
.mt-contact{
  font-family:var(--mt-font-body);
  color:var(--mt-text-900);
  background:var(--mt-bg);
}
.mt-contact img{ max-width:100%; display:block; }
.mt-contact a{ text-decoration:none; color:inherit; }
.mt-container{ max-width:1200px; margin:0 auto; padding:0 24px; }

.mt-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mt-orange-500);
  margin-bottom:10px;
}
.mt-eyebrow::before{ content:""; width:26px; height:2px; background:var(--mt-orange-500); display:inline-block; }
.mt-section-title{
  font-family:var(--mt-font-head); font-weight:700;
  font-size:clamp(26px,3vw,38px); line-height:1.2;
  color:var(--mt-navy-900); margin:0 0 12px;
}
.mt-section-sub{ color:var(--mt-text-600); font-size:16px; max-width:640px; line-height:1.6; margin:0; }

.mt-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px; border-radius:8px; font-weight:600;
  font-size:15px; font-family:var(--mt-font-head);
  border:2px solid transparent; cursor:pointer; transition:all .2s ease;
}
.mt-btn-primary{ background:var(--mt-orange-500); color:#fff; }
.mt-btn-primary:hover{ background:var(--mt-orange-600); transform:translateY(-2px); }
.mt-btn-outline{ background:transparent; border-color:#fff; color:#fff; }
.mt-btn-outline:hover{ background:#fff; color:var(--mt-navy-900); }

/* ---------- Hero ---------- */
.mt-contact-hero{
  background: #f5f8fd url("../img/hero1.jpeg") center top no-repeat;
  padding:120px 0 60px;
  text-align:center;
  color:#033f83;
}
.mt-contact-hero .mt-eyebrow{ justify-content:center; color:var(--mt-orange-500); }
.mt-contact-hero .mt-eyebrow::before{ display:none; }
.mt-contact-hero h1{
  font-family:var(--mt-font-head); font-size:clamp(30px,4vw,44px);
  font-weight:700; margin:0 0 14px;
}
.mt-contact-hero p{ color:#033F83; max-width:560px; margin:0 auto; font-size:16px; line-height:1.6; }
.mt-breadcrumb{ display:flex; justify-content:center; gap:8px; font-size:13px; color:#1B5390; margin-top:18px; }
.mt-breadcrumb a{ color:#000; }
.mt-breadcrumb a:hover{ color:var(--mt-orange-500); }

/* ---------- Quick info cards ---------- */
.mt-info-strip{ margin-top:-46px; position:relative; z-index:2; }
.mt-info-card{
  background:var(--mt-card-bg);
  border:1px solid var(--mt-border);
  border-radius:var(--mt-radius);
  box-shadow:var(--mt-shadow);
  padding:28px 24px;
  height:100%;
  display:flex;
  gap:16px;
  align-items:flex-start;
  transition:transform .25s ease, box-shadow .25s ease;
}
.mt-info-card:hover{ transform:translateY(-6px); box-shadow:var(--mt-shadow-hover); }
.mt-info-icon{
  width:48px; height:48px; flex-shrink:0;
  border-radius:10px;
  background:linear-gradient(135deg, var(--mt-orange-500), var(--mt-orange-600));
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.mt-info-card h4{
  font-family:var(--mt-font-head); font-size:15.5px; font-weight:700;
  color:var(--mt-navy-900); margin:0 0 6px;
}
.mt-info-card p, .mt-info-card a{
  font-size:13.5px; color:var(--mt-text-600); margin:0; line-height:1.55;
  display:block;
}
.mt-info-card a:hover{ color:var(--mt-blue-600); }

/* ---------- Form + map section ---------- */
.mt-contact-main{ padding:90px 0 90px; }
.mt-form-card{
  background:var(--mt-card-bg);
  border:1px solid var(--mt-border);
  border-radius:var(--mt-radius);
  box-shadow:var(--mt-shadow);
  padding:40px;
}
.mt-form-card h3{
  font-family:var(--mt-font-head); font-size:22px; font-weight:700;
  color:var(--mt-navy-900); margin:0 0 6px;
}
.mt-form-card > p{ color:var(--mt-text-600); font-size:14.5px; margin:0 0 28px; }

.mt-field{ margin-bottom:20px; }
.mt-field label{
  display:block; font-family:var(--mt-font-head); font-size:13px;
  font-weight:600; color:var(--mt-navy-900); margin-bottom:8px;
}
.mt-field .mt-form-control{
  width:100%; padding:13px 16px; border-radius:8px;
  border:1px solid var(--mt-border); background:var(--mt-bg);
  font-family:var(--mt-font-body); font-size:14.5px; color:var(--mt-text-900);
  transition:border-color .2s ease, background .2s ease;
}
.mt-field .mt-form-control:focus{
  outline:none; border-color:var(--mt-blue-600); background:#fff;
}
.mt-field textarea.mt-form-control{ resize:vertical; min-height:130px; }
.mt-consent{
  display:flex; align-items:flex-start; gap:10px;
  font-size:13px; color:var(--mt-text-600); margin-bottom:24px;
}
.mt-consent input{ margin-top:3px; }

/* ---------- Map + socials ---------- */
.mt-map-wrap{
  border-radius:var(--mt-radius);
  overflow:hidden;
  box-shadow:var(--mt-shadow);
  border:1px solid var(--mt-border);
  margin-bottom:26px;
}
.mt-map-wrap iframe{ width:100%; height:280px; border:0; display:block; }

.mt-side-card{
  background:var(--mt-card-bg);
  border:1px solid var(--mt-border);
  border-radius:var(--mt-radius);
  box-shadow:var(--mt-shadow);
  padding:28px;
  margin-bottom:26px;
}
.mt-side-card h4{
  font-family:var(--mt-font-head); font-size:16.5px; font-weight:700;
  color:var(--mt-navy-900); margin:0 0 18px;
  padding-bottom:14px; border-bottom:2px solid var(--mt-bg);
  display:flex; align-items:center; gap:8px;
}
.mt-side-card h4::before{ content:""; width:4px; height:16px; background:var(--mt-orange-500); border-radius:2px; }
.mt-hours-row{
  display:flex; justify-content:space-between;
  font-size:13.5px; color:var(--mt-text-600);
  padding:9px 0; border-bottom:1px solid var(--mt-bg);
}
.mt-hours-row:last-child{ border-bottom:none; }
.mt-hours-row span:last-child{ font-weight:600; color:var(--mt-navy-900); }

.mt-social-row{ display:flex; gap:10px; }
.mt-social-row a{
  width:40px; height:40px; border-radius:50%;
  background:var(--mt-bg); color:var(--mt-navy-900);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:600;
  transition:.2s ease;
}
.mt-social-row a:hover{ background:var(--mt-orange-500); color:#fff; transform:translateY(-3px); }

.mt-side-cta{
  background:linear-gradient(135deg, var(--mt-navy-900), var(--mt-blue-600));
  color:#fff; text-align:center; border:none;
}
.mt-side-cta h4{ color:#fff; border-color:rgba(255,255,255,.15); justify-content:center; }
.mt-side-cta h4::before{ display:none; }
.mt-side-cta p{ font-size:13.5px; color:#C7D0E0; line-height:1.6; margin:0 0 18px; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px){
  .mt-info-strip{ margin-top:-30px; }
  .mt-contact-main{ padding:64px 0; }
  .mt-form-card{ padding:30px; }
  .mt-section-title{ font-size:28px; }
}
@media (max-width: 767.98px){
  .mt-contact-hero{ padding:48px 0 70px; }
  .mt-contact-hero h1{ font-size:26px; }
  .mt-info-strip{ margin-top:-40px; }
  .mt-info-card{ flex-direction:column; text-align:center; align-items:center; }
  .mt-form-card{ padding:24px; }
  .mt-form-card h3{ font-size:19px; }
}
@media (max-width: 480px){
  .mt-container{ padding:0 16px; }
  .mt-form-card{ padding:20px; }
  .mt-btn{ width:100%; justify-content:center; }
}