/* ================================================================
   WEBCRAFT — css/contact.css
   Contact page styles
   ================================================================ */

.contact-layout { display:grid; grid-template-columns:1fr 1.55fr; gap:68px; margin-top:52px; align-items:start }
.ci > p     { color:var(--muted); margin-bottom:36px; font-weight:300 }
.ci h2      { margin-bottom:14px }

/* ── Contact detail items ────────────────────────────────────── */
.cd         { display:flex; gap:14px; margin-bottom:22px; align-items:flex-start; transition:transform var(--t) var(--ease) }
.cd:hover   { transform:translateX(3px) }
.cd-icon    {
  width:44px; height:44px; background:var(--s2); border:1px solid var(--border); border-radius:var(--r2);
  display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0;
  transition:all var(--t) var(--ease);
}
.cd:hover .cd-icon { background:var(--glow); border-color:rgba(200,255,87,.3) }
.cd-lbl     { font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); margin-bottom:3px }
.cd-val     { font-size:.9rem; color:var(--muted) }

/* ── Contact form ────────────────────────────────────────────── */
.cf         { background:var(--s1); border:1px solid var(--border); border-radius:var(--r4); padding:40px; position:relative; overflow:hidden }
.cf::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,255,87,.25) 50%,transparent);
}
.cf h3      { font-size:1.15rem; margin-bottom:26px }
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.fg         { margin-bottom:14px }
.fg label   { display:block; font-size:.68rem; font-weight:600; color:var(--faint); margin-bottom:6px; text-transform:uppercase; letter-spacing:.07em }
.fg input,.fg select,.fg textarea {
  width:100%; padding:10px 13px; background:var(--s2); border:1px solid var(--border);
  border-radius:var(--r1); font-family:'DM Sans',sans-serif; font-size:.9375rem;
  color:var(--text); outline:none; transition:border-color var(--t),box-shadow var(--t); appearance:none;
}
.fg input::placeholder,.fg textarea::placeholder { color:rgba(240,238,232,.18) }
.fg input:focus,.fg select:focus,.fg textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--glow) }
.fg select option { background:var(--s2); color:var(--text) }
.fg textarea      { resize:vertical; min-height:115px }

.f-success       { display:none; text-align:center; padding:40px 0 }
.f-success-check {
  width:56px; height:56px; border-radius:50%; background:var(--glow);
  border:2px solid var(--accent); margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.f-success-check::after {
  content:''; display:block; width:14px; height:8px;
  border-left:2.5px solid var(--accent); border-bottom:2.5px solid var(--accent);
  transform:rotate(-45deg) translateY(-2px);
}
.f-success h3    { margin-bottom:8px }
.f-success p     { color:var(--muted) }

/* ── Next steps ──────────────────────────────────────────────── */
.next-steps      {
  margin-top:36px; padding:24px; background:var(--s2); border:1px solid var(--border);
  border-radius:var(--r3);
}
.ns-title        {
  font-size:.66rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); margin-bottom:18px;
}
.ns-step         { display:flex; align-items:flex-start; gap:14px; margin-bottom:14px }
.ns-step:last-child { margin-bottom:0 }
.ns-dot          {
  width:24px; height:24px; border-radius:50%; background:var(--glow); border:1px solid rgba(200,255,87,.25);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  font-family:'JetBrains Mono',monospace; font-size:.66rem; color:var(--accent); font-weight:700;
}
.ns-text         { font-size:.875rem; color:var(--muted); padding-top:3px; line-height:1.5 }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width:768px) {
  .contact-layout { grid-template-columns:1fr; gap:44px }
  .form-row { grid-template-columns:1fr }
  .cf       { padding:22px 18px }
}
@media (max-width:480px) {
  .contact-layout { grid-template-columns:1fr }
  .form-row       { grid-template-columns:1fr }
  .fg input,
  .fg select,
  .fg textarea    { width:100% }
  .cf             { padding:16px 12px }
}