/* contact.css */
.contact-hero { --hero-glow: rgba(59,130,246,0.15); }
.contact-meta-badges { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
.cmb-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--text-2); padding: 0.4rem 1rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-full); backdrop-filter: blur(8px); }
.cmb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-500); animation: pulse-dot 2s infinite; }

.contact-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 5rem; align-items: start; }

/* Form Column */
.contact-form-col { }
.cf-title { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; margin-bottom: 0.75rem; }
.cf-sub { font-size: 1rem; color: var(--text-2); line-height: 1.7; margin-bottom: 2rem; }

.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form-group { display: flex; flex-direction: column; gap: 0.45rem; }
.form-group label { font-size: 0.875rem; font-weight: 600; color: var(--text-2); }
.req { color: var(--blue-500); }
.form-group input, .form-group textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--input-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 0.9375rem;
  transition: border-color 0.3s, box-shadow 0.3s;
  outline: none;
  backdrop-filter: blur(8px);
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-3); }
.form-group textarea { resize: vertical; min-height: 140px; }

.select-wrap { position: relative; }
.select-wrap select {
  width: 100%;
  padding: 0.875rem 2.5rem 0.875rem 1rem;
  background: var(--input-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 0.9375rem;
  outline: none;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.select-wrap select:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
.sel-arrow { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }

.form-btn { width: 100%; justify-content: center; padding: 1.1rem; font-size: 1rem; margin-top: 0.25rem; }
.form-success {
  display: none;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.25rem;
  background: rgba(16,185,129,0.07);
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: var(--radius-md);
  animation: pageFadeIn 0.4s ease;
}
.form-success.visible { display: flex; }
.form-success strong { display: block; color: var(--green-400); font-size: 0.9375rem; margin-bottom: 0.2rem; }
.form-success p { font-size: 0.85rem; color: var(--text-2); }

/* Info Column */
.contact-info-col { display: flex; flex-direction: column; gap: 1.5rem; }
.ci-section h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; margin-bottom: 1.1rem; }
.ci-items { display: flex; flex-direction: column; gap: 0.85rem; }
.ci-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.ci-item:hover { border-color: var(--border-blue); transform: translateX(4px); }
.ci-icon-wrap { width: 42px; height: 42px; border-radius: var(--radius-sm); background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.15); display: flex; align-items: center; justify-content: center; color: var(--cic, var(--blue-500)); flex-shrink: 0; }
.ci-item strong { display: block; font-size: 0.78rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.2rem; }
.ci-item a, .ci-item span { font-size: 0.9rem; color: var(--text-2); transition: color 0.2s; }
.ci-item a:hover { color: var(--blue-400); }

.avail-card { padding: 1.25rem 1.5rem; background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.2); border-radius: var(--radius-md); }
.avail-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; font-size: 0.9375rem; font-weight: 700; color: var(--green-400); }
.avail-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--green-500); animation: pulse-dot 2s infinite; }
.avail-card p { font-size: 0.875rem; color: var(--text-2); line-height: 1.65; }

.social-contact h4 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; margin-bottom: 0.85rem; }
.sc-btns { display: flex; gap: 0.75rem; }
.sc-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.25rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 600; color: var(--text-2); transition: all var(--dur-base); }
.sc-btn:hover { background: var(--blue-600); border-color: var(--blue-600); color: #fff; transform: translateY(-2px); }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.faq-item { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--dur-base); }
.faq-item.open { border-color: var(--border-blue); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-base);
}
.faq-q:hover { color: var(--blue-400); }
.faq-arrow { flex-shrink: 0; transition: transform 0.3s; }
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s; padding: 0 1.5rem; font-size: 0.9rem; color: var(--text-2); line-height: 1.75; }
.faq-item.open .faq-a { max-height: 200px; padding: 0 1.5rem 1.25rem; }

@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .faq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .contact-meta-badges { flex-direction: column; align-items: center; }
}