/* ==========================================================================
   MEENA DIGI SOLUTIONS — Contact page
   Loaded after style.css + about.css. Adds the contact-page components:
   channel cards, the inquiry form, next-steps strip.
   ========================================================================== */

/* ---------- Layout ---------- */
.ct-hero{ min-height:52vh; }
.ct-grid{
  width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:0.9fr 1.1fr;
  gap:clamp(36px, 6vw, 80px);
  padding-bottom:clamp(72px, 12vw, 130px);
  align-items:start;
}

/* ---------- Channels ---------- */
.ct-channels{ display:grid; gap:14px; }
.ct-channel{
  display:flex; align-items:center; gap:18px;
  padding:22px 24px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border);
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.ct-channel:hover{ border-color:var(--accent); transform:translateY(-2px); }
.ct-channel-icon{
  flex:none; width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background:var(--glass); border:1px solid var(--border);
  color:var(--accent);
}
.ct-channel-icon svg{ width:20px; height:20px; }
.ct-channel h3{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:0.95rem;
}
.ct-channel p{ color:var(--text-dim); font-size:0.9rem; margin-top:2px; }
.ct-channel .ct-channel-value{ color:var(--text); font-weight:600; font-size:0.98rem; }

.ct-promise{
  margin-top:22px; padding:18px 22px; border-radius:var(--radius);
  border:1px dashed var(--border); color:var(--text-dim); font-size:0.95rem;
}
.ct-promise strong{ color:var(--accent); font-weight:600; }

.ct-meta{ margin-top:26px; color:var(--text-faint); font-size:0.85rem; line-height:1.7; }

/* ---------- Form ---------- */
.ct-form{
  padding:clamp(26px, 4vw, 40px); border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border);
}
.ct-form h2{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.2rem, 2.2vw, 1.6rem);
}
.ct-form-sub{ margin-top:8px; color:var(--text-dim); font-size:0.95rem; }

.ct-field{ margin-top:22px; }
.ct-field label{
  display:block; font-size:0.74rem; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:8px;
}
.ct-field label .ct-req{ color:var(--accent); }
.ct-input{
  width:100%; padding:14px 16px; border-radius:12px;
  background:var(--bg); border:1px solid var(--border);
  color:var(--text); font:inherit; font-size:0.98rem;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ct-input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.ct-input.ct-invalid{ border-color:var(--warm); }
textarea.ct-input{ min-height:120px; resize:vertical; }

.ct-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* selector pills */
.ct-pills{ display:flex; flex-wrap:wrap; gap:8px; }
.ct-pill{
  padding:10px 18px; border-radius:100px;
  border:1px solid var(--border); background:var(--bg);
  font-size:0.86rem; font-weight:600; color:var(--text-dim);
  cursor:pointer; transition:all .3s var(--ease);
}
.ct-pill:hover{ border-color:var(--accent); color:var(--text); }
.ct-pill.is-on{
  background:var(--accent); border-color:var(--accent); color:var(--bg);
}

.ct-actions{ margin-top:28px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.ct-hint{ margin-top:14px; font-size:0.85rem; color:var(--warm); min-height:1.2em; }
.ct-alt{ font-size:0.88rem; color:var(--text-faint); }
.ct-alt a{ color:var(--text-dim); text-decoration:underline; text-underline-offset:3px; }
.ct-alt a:hover{ color:var(--accent); }

/* WhatsApp-flavoured ghost button */
.btn-wa{
  display:inline-flex; align-items:center; gap:10px;
}
.btn-wa svg{ width:18px; height:18px; }

/* ---------- What happens next ---------- */
.ct-next{
  width:var(--container); margin:0 auto;
  padding:clamp(56px, 9vw, 100px) 0 clamp(72px, 12vw, 130px);
  border-top:1px solid var(--border);
}
.ct-steps{
  margin-top:44px; display:grid; grid-template-columns:repeat(3, 1fr);
  gap:18px; counter-reset:ctstep;
}
.ct-step{
  padding:28px 26px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border);
  position:relative;
}
.ct-step::before{
  counter-increment:ctstep; content:'0' counter(ctstep);
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:0.8rem; color:var(--accent); letter-spacing:0.1em;
}
.ct-step h3{
  margin-top:12px; font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; font-size:1.02rem;
}
.ct-step p{ margin-top:8px; color:var(--text-dim); font-size:0.94rem; }

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .ct-grid{ grid-template-columns:1fr; }
  .ct-steps{ grid-template-columns:1fr; }
  .ct-row-2{ grid-template-columns:1fr; }
}