/* ══════════════════════════
   CONTACT PAGE
   ✓ Availability badge FIRST on mobile
   ✓ 3 contact paths always visible
   ✓ Tap targets 44px min
   ✓ FAQ: aria-expanded on buttons
   ✓ Body copy: 15px, 400, soft/muted
══════════════════════════ */

/* ── AVAILABILITY BANNER — top of page, always visible ── */
.avail-banner {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 14px var(--section-x);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.avail-left { display: flex; align-items: center; gap: 12px; }
.avail-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--phase2);
  flex-shrink: 0; animation: availPulse 2.5s infinite;
}
@keyframes availPulse {
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(126,184,164,0.4)}
  50%{opacity:0.7;box-shadow:0 0 0 5px rgba(126,184,164,0)}
}
.avail-text {
  font-family: var(--f-cond); font-size: 12px; font-weight: 600;
  letter-spacing: 1.5px; color: var(--phase2);
}
.avail-right {
  font-family: var(--f-cond); font-size: 10px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--muted);
}

/* ── CONTACT GRID ── */
.contact-grid {
  display: grid; grid-template-columns: 3fr 2fr; gap: 64px; align-items: start;
}

/* ── CONTACT METHODS ── */
.contact-methods {
  display: flex; flex-direction: column; gap: 1px; background: var(--border); margin-bottom: 36px;
}
.contact-method {
  background: var(--bg); padding: 28px 32px;
  display: flex; gap: 20px; align-items: flex-start;
  transition: background 0.2s; text-decoration: none;
}
.contact-method:hover { background: var(--surface); }
.cm-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border2); font-family: var(--f-display);
  font-size: 18px; color: var(--gold);
}
.cm-icon svg { width: 22px; height: 22px; fill: #25D366; }
.cm-label {
  font-family: var(--f-cond); font-size: 8px; font-weight: 600;
  letter-spacing: 4px; text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
}
.cm-title {
  font-family: var(--f-serif); font-size: 18px; color: var(--ivory); margin-bottom: 5px;
}
.cm-desc { font-size: 14px; font-weight: 400; color: var(--muted); line-height: 1.7; margin-bottom: 12px; }
.cm-link {
  font-family: var(--f-cond); font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--gold);
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
}

/* ── PHASE SELECTOR ── */
.phase-sel-label {
  font-family: var(--f-cond); font-size: 8px; font-weight: 600;
  letter-spacing: 4px; text-transform: uppercase; color: var(--muted); margin-bottom: 14px;
}
.phase-options { display: flex; flex-direction: column; border: 1px solid var(--border); }
.phase-option {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 16px 22px; min-height: 64px; /* 44px+ */
  border-bottom: 1px solid var(--border);
  transition: background 0.15s; text-decoration: none;
}
.phase-option:last-child { border-bottom: none; }
.phase-option:hover { background: var(--surface); }
.po-num {
  font-family: var(--f-display); font-size: 26px; line-height: 1; flex-shrink: 0; margin-top: 2px;
}
.po-name {
  font-family: var(--f-display); font-size: 15px; letter-spacing: 2px;
  color: var(--ivory); margin-bottom: 2px;
}
.po-desc { font-size: 13px; font-weight: 400; color: var(--muted); }

/* ── SIDEBAR ── */
.contact-sidebar {
  display: flex; flex-direction: column; border: 1px solid var(--border);
  position: sticky; top: calc(var(--nav-h) + 20px);
}
.sb-block {
  padding: 22px 24px; border-bottom: 1px solid var(--border); transition: background 0.2s;
}
.sb-block:last-child { border-bottom: none; }
.sb-block:hover { background: var(--surface); }
.sb-label {
  font-family: var(--f-cond); font-size: 7px; font-weight: 600;
  letter-spacing: 4px; text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.sb-value {
  display: block; font-family: var(--f-serif); font-size: 15px;
  color: var(--gold); margin-bottom: 6px; line-height: 1.3; text-decoration: none;
}
a.sb-value:hover { opacity: 0.75; }
.sb-note { font-size: 13px; font-weight: 400; color: var(--muted); line-height: 1.7; }

/* ── FAQ ── */
.faq-section { background: var(--surface); border-top: 1px solid var(--border); }
.faq-list { margin-top: 44px; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%; display: flex; align-items: center;
  justify-content: space-between; gap: 20px;
  padding: 20px 0; background: transparent; border: none;
  cursor: pointer; text-align: left; min-height: 64px; /* 44px+ */
}
.faq-q-text {
  font-family: var(--f-serif); font-size: 16px; color: var(--soft);
  line-height: 1.5; transition: color 0.2s;
}
.faq-item.open .faq-q-text { color: var(--ivory); }
.faq-icon {
  font-family: var(--f-display); font-size: 22px; color: var(--gold);
  flex-shrink: 0; transition: transform 0.25s; line-height: 1;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a {
  max-height: 0; overflow: hidden; transition: max-height 0.4s ease;
  /* ✓ 15px, 400, muted */
  font-size: 15px; font-weight: 400; color: var(--muted); line-height: 1.85;
}
.faq-item.open .faq-a { padding-bottom: 20px; }

/* ══════ RESPONSIVE ══════ */
@media (max-width: 1100px) {
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .contact-sidebar { position: static; }
}
@media (max-width: 640px) {
  .contact-method { flex-direction: column; gap: 14px; padding: 20px; }
  .phase-option { padding: 14px 16px; gap: 14px; }
  .sb-block { padding: 18px 20px; }
  .avail-banner { flex-direction: column; align-items: flex-start; gap: 4px; }
}