/* ==========================================================================
   CONTACT PAGE — page-specific styles only.
   Tokens, header, footer, buttons, .field/.underline form styling are all
   inherited from style.css.
========================================================================== */

/* ---------- HERO ---------- */
.contact-page-hero{ padding-top:calc(var(--section-y) + 60px); padding-bottom:30px; text-align:center; }
.contact-page-hero h1{ font-size:clamp(34px,5vw,56px); max-width:760px; margin:18px auto 0; }
.contact-page-hero p{ margin:22px auto 0; max-width:560px; color:var(--text-muted); font-size:18px; line-height:1.65; }
@media (max-width:640px){
  .contact-page-hero{ padding-top:calc(var(--section-y) + 30px); padding-bottom:16px; }
  .contact-page-hero h1{ font-size:clamp(28px, 6vw, 42px); }
  .contact-page-hero p{ font-size:15.5px; }
}

/* ---------- MAIN GRID ---------- */
.contact-main-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:56px;
  align-items:start;
}
@media (max-width:900px){ .contact-main-grid{ grid-template-columns:1fr; gap:44px; } }

/* ---------- INTEREST SIDEBAR ---------- */
.contact-interest h4{
  font-size:12px; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--text-muted); font-weight:500; margin-bottom:16px;
}
.interest-list{ display:flex; flex-wrap:wrap; gap:10px; }
.interest-btn{
  padding:11px 18px; border-radius:999px;
  border:1px solid var(--border); background:var(--bg);
  font-size:13.5px; font-weight:500; color:var(--text);
  transition:background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}
.interest-btn:hover{ transform:translateY(-2px); border-color:rgba(0,91,252,0.3); }
.interest-btn.active{ background:var(--accent1); border-color:transparent; color:#fff; }
@media (max-width:480px){
  .interest-btn{ padding:8px 14px; font-size:12.5px; }
}

.contact-direct{ margin-top:48px; padding-top:36px; border-top:1px solid var(--border); }
.contact-direct-link{
  display:flex; align-items:center; gap:10px;
  font-size:14.5px; font-weight:500; color:var(--text);
  margin-top:14px;
  transition:color .3s ease, gap .3s ease;
}
.contact-direct-link:hover{ color:var(--accent1); gap:14px; }
.contact-direct-icon{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background:var(--bg-secondary); color:var(--accent1);
  display:flex; align-items:center; justify-content:center;
}
.contact-direct-icon svg{ width:16px; height:16px; }
.contact-direct-offices{ margin-top:22px; font-size:14px; color:var(--text-muted); line-height:1.6; }
.contact-direct-offices .label{ display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:6px; }

/* ---------- FORM CARD ---------- */
.contact-form-card{
  border-radius:26px; padding:44px;
  background:var(--bg-secondary);
  border:1px solid var(--border);
  position:relative;
}
@media (max-width:640px){ .contact-form-card{ padding:30px 24px; } }
@media (max-width:480px){
  .contact-form-card{ padding:24px 18px; border-radius:20px; }
  .contact-form-card h3{ font-size:21px; }
}
.contact-form-card h3{ font-size:24px; font-weight:500; }
.contact-form-card > p{ margin-top:10px; font-size:14px; color:var(--text-muted); }
.contact-form-card > p strong{ color:var(--accent1); font-weight:600; }
.contact-form-card form{ margin-top:30px; }
.contact-form-success{ display:none; text-align:center; padding:40px 0; }
.contact-form-success.active{ display:block; }
.contact-form-success svg{ width:52px; height:52px; margin:0 auto 18px; }
.contact-form-success h3{ max-width:none; }
.contact-form-success p{ margin-top:10px; color:var(--text-muted); }