/* ============================================================
   Contact page styles
   ============================================================ */
.contact-header {
  position: relative; overflow: hidden; isolation: isolate;
  color: #fff;
  padding: calc(var(--nav-h) + 64px) 0 52px;
}
.contact-header .contact-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.contact-header::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(118deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.64) 46%, rgba(242,115,31,0.5) 100%);
}
.contact-header .eyebrow { color: #fff; }
.contact-header h1 { color: #fff; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.6rem); margin: 6px 0 16px; }
.contact-header .lead { color: rgba(255,255,255,0.9); }

.contact-layout {
  display: grid;
  grid-template-columns: 1.25fr 0.9fr;
  gap: 36px;
  align-items: start;
}

/* ---- Form ---- */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 40px; }
.form-card h2 { font-size: 1.6rem; margin-bottom: 6px; }
.form-card .form-sub { color: var(--text-soft); margin-bottom: 28px; font-size: 0.96rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.82rem; font-weight: 600; color: var(--ink); letter-spacing: 0.01em; }
.field label .req { color: var(--orange-deep); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 0.96rem; color: var(--ink);
  padding: 13px 15px;
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255,145,76,0.16);
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235A5048' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px; }
.form-actions { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.form-actions .btn { align-self: flex-start; }
.wa-note {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.9rem; color: var(--text-soft);
  padding-top: 16px; border-top: 1px solid var(--line);
}
.wa-note a { color: #128C3E; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.wa-note a svg { width: 16px; height: 16px; }

#formNote {
  display: none;
  align-items: center; gap: 10px;
  background: #E9F9EF; border: 1px solid #BDE9CD; color: #146C3A;
  padding: 13px 16px; border-radius: 12px; font-size: 0.92rem; font-weight: 600;
}
#formNote svg { width: 18px; height: 18px; flex: none; }

/* ---- Contact info ---- */
.info-card {
  background: var(--grad-dark); color: #fff;
  border-radius: var(--r-lg); padding: 36px;
  box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
}
.info-card::after {
  content: ""; position: absolute; width: 240px; height: 240px;
  right: -100px; bottom: -120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,145,76,.32), transparent 70%);
}
.info-card h2 { color: #fff; font-size: 1.4rem; margin-bottom: 6px; }
.info-card .info-sub { color: rgba(255,255,255,0.66); font-size: 0.92rem; margin-bottom: 28px; position: relative; }
.info-list { display: flex; flex-direction: column; gap: 8px; position: relative; }
.info-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.info-row:last-child { border-bottom: none; }
.info-ico {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: rgba(255,145,76,0.16); color: var(--orange);
}
.info-ico svg { width: 20px; height: 20px; }
.info-row .label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); font-weight: 700; }
.info-row .value { font-size: 0.92rem; color: #fff; font-weight: 500; overflow-wrap: anywhere; }
.info-row .value a { color: #fff; }
.info-row .value a:hover { color: var(--orange); }
.info-row .pending { color: var(--orange); }

/* ---- Map ---- */
.map-section { padding-top: 8px; }
.map-frame {
  position: relative;
  height: 360px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  background:
    linear-gradient(0deg, rgba(255,145,76,0.04), rgba(255,145,76,0.04)),
    repeating-linear-gradient(0deg, #FBF2EA 0 39px, #F3E7DB 39px 41px),
    repeating-linear-gradient(90deg, #FBF2EA 0 39px, #F3E7DB 39px 41px),
    #FBF2EA;
}
.map-roads { position: absolute; inset: 0; }
.map-roads span { position: absolute; background: #fff; box-shadow: 0 0 0 1px #EAD9C9; }
.map-roads .h1 { left: 0; right: 0; top: 32%; height: 16px; }
.map-roads .h2 { left: 0; right: 0; top: 68%; height: 22px; }
.map-roads .v1 { top: 0; bottom: 0; left: 24%; width: 18px; }
.map-roads .v2 { top: 0; bottom: 0; left: 62%; width: 14px; transform: skewX(-12deg); }
.map-pin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-100%);
  width: 46px; height: 46px;
  color: var(--orange-deep);
  filter: drop-shadow(0 10px 14px rgba(242,115,31,.4));
}
.map-pin svg { width: 100%; height: 100%; }
.map-pulse { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%,-50%); border-radius: 50%; background: rgba(242,115,31,.25); animation: mapPulse 2.4s ease-out infinite; }
@keyframes mapPulse { 0% { transform: translate(-50%,-50%) scale(.6); opacity: .8; } 100% { transform: translate(-50%,-50%) scale(3); opacity: 0; } }
.map-chip {
  position: absolute; left: 24px; bottom: 24px;
  background: #fff; border: 1px solid var(--line);
  padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow-card);
  display: flex; align-items: center; gap: 10px; font-size: 0.88rem;
}
.map-chip svg { width: 18px; height: 18px; color: var(--orange-deep); flex: none; }
.map-chip .pending { color: var(--orange-deep); font-weight: 700; }

@media (max-width: 880px) {
  .contact-layout { grid-template-columns: 1fr; }
  .form-card { padding: 28px; }
}
@media (max-width: 480px) {
  .form-grid { grid-template-columns: 1fr; }
  .contact-header { padding: calc(var(--nav-h) + 40px) 0 40px; }
  .form-card { padding: 22px; }
  .info-card { padding: 28px 24px; }
  .map-frame { height: 280px; }
}