/* ==========================================================================
   TOPS SAFETY CONTROL — Contact Page Stylesheet
   Depends on mains.css: reuses tokens (--c-*, --f-*, --ease-*), utility
   classes (.container-tops, .eyebrow, .section-title, .section-lead,
   .section-pad, .btn-tops, .side-deco, .cut-both, .reveal, .contact-grid,
   .contact-info-card, .contact-line, .contact-social, .form-floating-tops,
   .map-embed — all already defined in mains.css). This file ONLY adds the
   bigger contact-page treatment: the stat strip, the multi-office switcher,
   and a few proportion tweaks scoped to #contact.
   Load AFTER mains.css.
   ========================================================================== */

#contact.section-pad { padding: 130px 0 140px; }

/* ============================== QUICK STATS ================================ */
.contact-stats {
  display: flex; flex-wrap: wrap;
  margin: 8px 0 56px;
  border-top: 1px solid var(--c-line-light);
  border-bottom: 1px solid var(--c-line-light);
}
.contact-stats .stat {
  flex: 1 1 220px;
  padding: 28px 32px;
  border-right: 1px solid var(--c-line-light);
}
.contact-stats .stat:last-child { border-right: none; }
.contact-stats .stat strong {
  display: block; font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem); color: var(--c-ink); line-height: 1;
  text-transform: uppercase; letter-spacing: 0.01em;
}
.contact-stats .stat strong .accent { color: var(--c-red); }
.contact-stats .stat span {
  display: block; margin-top: 10px; font-family: var(--f-mono); font-size: 0.72rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-steel);
}

/* ============================ OFFICE SWITCHER =============================== */
.contact-office-switch { margin-bottom: 44px; }
.contact-office-switch__head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  margin-bottom: 16px;
}
.contact-office-switch__label {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-steel);
}

.contact-geo-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--c-line-light); border-radius: 30px;
  padding: 9px 18px; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.03em;
  color: var(--c-ink); cursor: pointer; transition: all 0.25s ease;
}
.contact-geo-btn:hover { border-color: var(--c-red); color: var(--c-red); }
.contact-geo-btn i { color: var(--c-red); transition: transform 0.5s linear; }
.contact-geo-btn.is-loading i { animation: contactGeoSpin 0.8s linear infinite; }
@keyframes contactGeoSpin { to { transform: rotate(360deg); } }

.contact-geo-result {
  font-family: var(--f-mono); font-size: 0.76rem; color: var(--c-red);
  margin: 14px 0 0; padding-top: 14px; border-top: 1px dashed var(--c-line-light);
}

.contact-office-tabs { display: flex; flex-wrap: wrap; gap: 12px; }
.contact-office-tab {
  display: flex; align-items: center; gap: 12px;
  flex: 1 1 220px;
  background: var(--c-white); border: 1px solid var(--c-line-light); border-radius: 14px;
  padding: 15px 20px; cursor: pointer; text-align: left;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-office-tab:hover { border-color: var(--c-red); transform: translateY(-2px); }
.contact-office-tab.is-active {
  border-color: var(--c-red); background: var(--c-red);
  box-shadow: 0 18px 34px -18px var(--c-red-glow);
}
.contact-office-tab.is-active strong,
.contact-office-tab.is-active small { color: var(--c-white); }
.contact-office-tab strong {
  display: block; font-family: var(--f-body); font-weight: 600; font-size: 0.94rem; color: var(--c-ink);
}
.contact-office-tab small {
  display: block; margin-top: 3px; font-family: var(--f-mono); font-size: 0.66rem;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--c-steel);
}

.office-tab-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.office-tab-dot--hq { background: #2fbf71; }
.office-tab-dot--soon { background: #e0a72a; }
.contact-office-tab.is-active .office-tab-dot { box-shadow: 0 0 0 3px rgba(255,255,255,0.35); background: var(--c-white); }

/* ============================== OFFICE BADGES ================================ */
.office-badge {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 30px; margin-bottom: 26px;
}
.office-badge--hq { background: rgba(47,191,113,0.16); color: #4ede93; }
.office-badge--soon { background: rgba(224,167,42,0.16); color: #f0bb46; }

.office-panel[hidden] { display: none; }

/* ============================== PROPORTION TWEAKS ============================= */
.contact-grid { gap: 72px; }
.contact-info-card { padding: 52px 42px; }
.map-embed { height: 300px; }

.contact-form-note {
  margin: 16px 2px 0; font-family: var(--f-mono); font-size: 0.72rem;
  color: var(--c-steel); text-transform: none; letter-spacing: 0.01em;
}
.contact-form-note strong { color: var(--c-red); font-weight: 500; }

.contact-message-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 11, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 1200;
}
.contact-message-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}

.contact-message-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 30px));
  width: min(92vw, 460px);
  background: var(--c-white);
  border: 1px solid var(--c-line-light);
  border-left: 5px solid var(--c-red);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(10, 10, 11, 0.2);
  padding: 22px 22px 18px 22px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
  z-index: 1210;
}
.contact-message-box.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%);
}

.contact-message-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex: none;
}
.contact-message-icon.is-error {
  background: rgba(224, 17, 26, 0.1);
  color: var(--c-red);
}
.contact-message-icon.is-success {
  background: rgba(26, 161, 67, 0.12);
  color: #1aa143;
}
.contact-message-icon.is-info {
  background: rgba(19, 20, 22, 0.08);
  color: var(--c-black);
}

.contact-message-content {
  flex: 1;
}
.contact-message-content h4 {
  margin: 0 0 8px;
  color: var(--c-ink);
  font-size: 1.2rem;
  text-transform: none;
  letter-spacing: 0.01em;
}
.contact-message-content p {
  margin: 0;
  color: var(--c-steel);
  font-size: 0.94rem;
  line-height: 1.6;
}

.contact-message-close {
  background: transparent;
  border: none;
  color: var(--c-steel);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.contact-message-close:hover {
  color: var(--c-red);
}

.loading-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: var(--c-white);
  border-radius: 50%;
  animation: contactSpinner 0.8s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}
@keyframes contactSpinner {
  to { transform: rotate(360deg); }
}

@media (max-width: 500px) {
  .contact-stats{ display: none; }
}