/* Hubungi Kami (public/hubungi-kami.html) — page-specific layout only.
   Form field/button styling comes from styles.css (.form/.field/.form__msg),
   card/grid utilities are also shared (.card/.grid/.g-2) — this file only adds
   what's unique to this page. */

.muted { color: var(--ink-soft); }

.contact__quick {
  margin-top: 22px; display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap;
}
.contact__quick a {
  font-weight: 700; color: var(--navy); text-decoration: none; font-size: 1.02rem;
}
.contact__quick a:hover { color: var(--teal); }
.contact__quick-note { color: var(--ink-soft); font-size: .88rem; }

.contact__grid {
  display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; align-items: start;
}

.contact__info h3 { color: var(--navy); margin-bottom: 14px; }
.contact__reasons { list-style: none; margin: 0; padding: 0; }
.contact__reasons li {
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .94rem; color: var(--ink-soft);
}
.contact__reasons li:last-child { border-bottom: none; }
.contact__reasons li b { color: var(--ink); }

.contact__note {
  margin-top: 8px; font-size: .84rem; color: var(--gold-ink); background: var(--cream);
  border: 1px dashed var(--gold); border-radius: 10px; padding: 10px 12px;
}
.contact__note a { color: var(--teal); font-weight: 700; }

.contact__check {
  display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; cursor: pointer;
  font-size: .88rem; color: var(--ink-soft);
}
.contact__check input { margin-top: 3px; flex: 0 0 auto; }

/* Honeypot — hidden from people, irresistible to bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 860px) {
  .contact__grid { grid-template-columns: 1fr; }
}