:root {
  font-family: var(--app-font);
  color: #182229;
  background: #edf2f3;
  --border: rgba(82, 99, 109, 0.18);
  --muted: #667680;
  --teal: #147b7e;
}

* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: #edf2f3; }
a { -webkit-tap-highlight-color: transparent; }
.contact-main { width: min(100%, 920px); min-height: calc(100vh - 144px); margin: 0 auto; padding: 56px 20px 72px; }
.contact-title { max-width: 650px; margin-bottom: 32px; }
.contact-title p { margin: 0 0 8px; color: var(--teal); font-size: 14px; font-weight: 750; text-transform: uppercase; }
.contact-title h1 { margin: 0 0 12px; color: #172126; font-size: 34px; line-height: 1.2; letter-spacing: 0; }
.contact-title > span { display: block; color: var(--muted); font-size: 15px; line-height: 1.65; }
.contact-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-option { min-height: 220px; display: flex; align-items: flex-start; flex-direction: column; padding: 26px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255, 255, 255, 0.65); box-shadow: 0 14px 36px rgba(43, 59, 67, 0.08); }
.contact-option-icon { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 24px; border-radius: 8px; background: #e3eded; color: var(--teal); font-size: 16px; font-weight: 800; }
.contact-option p { margin: 0 0 6px; color: var(--teal); font-size: 14px; font-weight: 750; text-transform: uppercase; }
.contact-option h2 { margin: 0 0 8px; font-size: 20px; letter-spacing: 0; }
.contact-option div > span { color: var(--muted); font-size: 14px; line-height: 1.55; }
.contact-option > a { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; margin-top: auto; padding: 0 14px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255, 255, 255, 0.7); color: #26353d; font-size: 14px; font-weight: 700; text-decoration: none; }
.contact-option > a.contact-primary { border-color: #172126; background: #172126; color: #fff; }
.contact-option > address { margin-top: auto; color: #26353d; font-size: 14px; font-style: normal; font-weight: 650; line-height: 1.55; }
.contact-note { display: grid; grid-template-columns: 220px 1fr; gap: 24px; margin-top: 14px; padding: 18px 20px; border-left: 3px solid var(--teal); background: rgba(255, 255, 255, 0.4); }
.contact-note strong { font-size: 14px; }
.contact-note span { color: var(--muted); font-size: 14px; line-height: 1.5; }
.contact-footer { width: min(100%, 1180px); min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 auto; padding: 20px 22px; border-top: 1px solid rgba(82, 99, 109, 0.14); color: #718089; font-size: 14px; }
.contact-footer strong { color: #2e3e46; }
.contact-footer a { color: #53636c; font-weight: 650; text-decoration: none; }

@media (max-width: 700px) {
  .contact-main { min-height: calc(100vh - 130px); padding: 34px 14px 52px; }
  .contact-title h1 { font-size: 28px; }
  .contact-options { grid-template-columns: 1fr; }
  .contact-option { min-height: 230px; padding: 20px; }
  .contact-note { grid-template-columns: 1fr; gap: 6px; }
  .contact-footer { min-height: 72px; padding: 18px 16px; }
}

@media (max-width: 420px) {
  .contact-footer { align-items: flex-start; flex-direction: column; }
}