/* =============================
   Contact page — Excavators
   ============================= */
:root{
  --container: 1200px;
  --radius: 4px;
  --radius-sm: 4px;

  --ink-900:#111;
  --ink-700:#333;
  --ink-500:#666;
  --line-200:#ececec;

  --green:#22c55e;
  --yellow:#f2a732;
  --bg:#fafafa;
}

body{
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink-900);
}

/* Page wrap aligns with global container */
.contact-wrap{
  background: #fff;
  padding: 28px 0 48px;
}
.contact-wrap .container{
  width: min(var(--container), 92%);
  margin-inline: auto;
}

/* ============ Grid ============ */
.grid-2{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 22px;
}
@media (max-width: 900px){
  .grid-2{ grid-template-columns: 1fr; }
}

/* ============ Cards ============ */
.lead-card,
.benefit-card,
.detail-card{
  background: #fff;
  border: 1px solid var(--line-200);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.lead-card{
  padding: 24px;
}
.benefit-card{
  padding: 20px 22px;
}

/* Details block (two columns) */
.detail-card{
  margin-top: 22px;
  padding: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 900px){
  .detail-card{ grid-template-columns: 1fr; }
}

/* ============ Typography ============ */
.lead-title{
  margin: 0 0 10px;
  font-weight: 800;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: .2px;
}
.lead-sub{
  margin: 0 0 18px;
  color: var(--ink-700);
  line-height: 1.6;
}

.h2{
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
}
.h3{
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 800;
}
.muted{ margin: 0 0 12px; color: var(--ink-500); }

/* ============ Buttons FIX ============ */
.lead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;   /* ensures vertical centering */
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  min-width: 160px;      /* makes them look balanced */
  padding: 0 20px;
  border-radius: 4px;
  border: 1px solid #dcdcdc;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
}

.cta-primary {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.cta-primary:hover { filter: brightness(.96); }

.cta-ghost {
  background: #fff;
  color: #222;
}
.cta-ghost:hover { border-color: #bfbfbf; }

/* WhatsApp icon next to 'Call Now' */
.ico{
  width: 18px; height: 18px; display: inline-block;
  background-repeat: no-repeat; background-size: contain;
}
.ico.whatsapp{ background-image: url('../img/icons/whatsapp.png'); }

/* ============ Benefits ============ */
.benefit-list{
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 12px;
  color: var(--ink-700);
}
.benefit-list .tick{
  color: var(--green); font-weight: 800; margin-right: 8px;
}

/* ============ Details ============ */
.detail-col .field{
  margin: 14px 0 10px;
}
.field .label{
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
}
.pill{
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 14px;
  background: #111; color: #fff; text-decoration: none;
  border-radius: var(--radius-sm);
}

/* Email row removed per request */

.hours{ margin: 4px 0 0; color: var(--ink-700); }

/* choose us */
.why-list{
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 10px;
  color: var(--ink-700);
}
.why-list .dot{ margin-right: 8px; color:#c5c5c5; }

/* ===== Optional: tighten WhatsApp floater radius to 4px too ===== */
.whatsapp-float{
  border-radius: 50%; /* keep round FAB */
}