@charset "UTF-8";

.contact-section { padding-bottom: 40px; scroll-margin-top: 32px; }
.contact-panel { display: grid; grid-template-columns: minmax(0, 1fr) 174px; gap: 48px; align-items: center; padding: 32px 36px; background: #fff; border: 1px solid #e9e9ed; border-radius: 24px; }
.contact-copy { min-width: 0; }
.contact-kicker { display: flex; align-items: center; gap: 7px; color: var(--secondary); margin: 0 0 13px; font-size: 12px; line-height: 1.5; }
.contact-kicker svg { height: 17px; width: 17px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.contact-copy h2 { margin: 0; font-size: 29px; line-height: 1.35; letter-spacing: -.5px; font-weight: 600; }
.contact-description { margin: 13px 0 0; color: var(--secondary); font-size: 14px; line-height: 1.85; }
.contact-topics { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; padding: 0; margin: 22px 0 0; }
.contact-topics li { padding: 7px 12px; border-radius: 8px; color: #55555d; background: #f5f5f7; font-size: 12px; line-height: 1.5; }
.contact-panel .contact-qr { width: 174px; padding: 10px; }
.contact-panel .contact-qr img { height: 164px; }
.contact-panel .contact-qr > span { font-size: 11px; }

@media (max-width: 900px) {
  .contact-panel { padding: 28px; gap: 30px; grid-template-columns: minmax(0, 1fr) 158px; }
  .contact-panel .contact-qr { width: 158px; }
  .contact-panel .contact-qr img { height: 150px; }
  .contact-copy h2 { font-size: 27px; }
  .contact-description { font-size: 13px; }
}
@media (max-width: 700px) {
  .site-header .nav-follow { display: none; }
  .contact-section { padding-bottom: 31px; }
  .contact-panel { display: flex; flex-direction: column; align-items: stretch; gap: 26px; padding: 26px; border-radius: 20px; }
  .contact-copy h2 { font-size: 26px; }
  .contact-description { font-size: 13px; }
  .contact-topics { gap: 8px; margin-top: 19px; }
  .contact-topics li { padding: 6px 10px; font-size: 11px; }
  .contact-panel .contact-qr { width: 180px; align-self: center; }
  .contact-panel .contact-qr img { height: 174px; }
}
@media (max-width: 360px) {
  .contact-panel { padding: 23px; }
  .contact-description { font-size: 12px; }
}