.contacts-main {
  padding-top: var(--space-5);
  padding-bottom: calc(var(--space-12) * 2);
}

.contacts-page-container { min-width: 0; }

#location,
#direct-contacts,
#contact-form { scroll-margin-top: 96px; }

.contacts-overview {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(620px, 1.28fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--space-16);
  align-items: stretch;
}

.contacts-overview-copy {
  min-height: 0;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
}

.contacts-overview h1 {
  max-width: 8ch;
  margin: 0;
  font-size: var(--font-size-64);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.contacts-channel-actions {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  padding-top: var(--space-10);
}

.contacts-channel-actions > p {
  margin: 0 0 var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-13);
}

.contacts-channel-actions > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.contacts-channel-actions button {
  min-height: 44px;
  padding: 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 0;
  border-radius: var(--radius-lg);
  color: var(--color-text);
  background: var(--color-surface-muted);
  font: inherit;
  font-size: var(--font-size-14);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: color 150ms var(--ease), background-color 150ms var(--ease);
}

.contacts-channel-actions button:hover {
  color: var(--color-accent);
  background: var(--color-surface-hover);
}

.contacts-social-icon {
  width: 20px;
  height: 20px;
  display: block;
  background: currentColor;
  -webkit-mask: var(--contacts-social-icon) center / contain no-repeat;
  mask: var(--contacts-social-icon) center / contain no-repeat;
}

.contacts-social-telegram { --contacts-social-icon: url("./assets/icons/social/telegram.svg"); }
.contacts-social-vk { --contacts-social-icon: url("./assets/icons/social/vk.svg"); }

.contacts-card-grid {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 152px;
  column-gap: var(--space-4);
  row-gap: var(--space-4);
  align-items: stretch;
}

.contacts-info-card {
  min-height: 0;
  height: 100%;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4) 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.contacts-info-card h2 {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-14);
  font-weight: var(--weight-regular);
}

.contacts-info-card > div {
  min-width: 0;
  max-width: 28ch;
  color: var(--color-text);
  font-size: var(--font-size-20);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  letter-spacing: -0.018em;
  overflow-wrap: anywhere;
}

.contacts-info-card a {
  color: inherit;
  text-decoration: none;
}

.contacts-info-card a:hover { color: var(--color-accent); }

@media (min-width: 1025px) {
  .contacts-info-card > div {
    margin-top: auto;
  }
}

.contacts-location-card {
  margin-top: var(--space-10);
  padding: var(--space-8);
  display: grid;
  gap: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-surface-muted);
}

.contacts-location-heading {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-8);
  align-items: start;
}

.contacts-form-copy h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-40);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.contacts-location-heading p {
  min-width: 0;
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-32);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.contacts-map-rating {
  margin-top: var(--space-2);
  display: inline-flex;
  color: var(--color-text-secondary);
  font-size: var(--font-size-13);
  font-weight: var(--weight-regular);
}

.contacts-map-rating:hover { color: var(--color-accent); }
.contacts-location-heading .ds-button { min-width: 214px; }
.contacts-location-heading .ds-icon { width: 16px; height: 16px; }

.contacts-map-canvas {
  width: calc(100% + var(--space-16));
  min-height: 440px;
  margin: 0 calc(var(--space-8) * -1) calc(var(--space-8) * -1);
  position: relative;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  background:
    linear-gradient(118deg, transparent 0 31%, rgb(255 255 255 / 9%) 31.2% 32.2%, transparent 32.4% 100%),
    linear-gradient(18deg, transparent 0 54%, rgb(255 255 255 / 7%) 54.2% 55.4%, transparent 55.6% 100%),
    var(--color-surface-inverse-muted);
  overflow: hidden;
  animation: contacts-map-arrive 320ms var(--ease) both;
}

.contacts-map-canvas::before {
  position: absolute;
  top: 18%;
  left: 9%;
  color: rgb(255 255 255 / 38%);
  font-size: var(--font-size-12);
  letter-spacing: 0.06em;
  content: "схема города";
}

.contacts-road {
  height: 2px;
  position: absolute;
  display: block;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 24%);
  transform-origin: left center;
}

.contacts-road-one { width: 72%; top: 29%; left: 11%; transform: rotate(9deg); }
.contacts-road-two { width: 58%; top: 63%; left: 20%; transform: rotate(-17deg); }
.contacts-road-three { width: 48%; top: 46%; left: 42%; transform: rotate(82deg); }

.contacts-map-city {
  position: absolute;
  top: 47%;
  left: 55%;
  color: var(--color-text-inverse);
  font-size: var(--font-size-24);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  transform: translate(-50%, -50%);
}

.contacts-form-section {
  margin-top: var(--space-20);
  padding: var(--space-10) var(--space-12);
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 600px);
  gap: var(--space-12);
  align-items: start;
  border-radius: var(--radius-xl);
  background: var(--color-surface-muted);
}

.contacts-form-copy > p {
  max-width: 42ch;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-16);
  line-height: 1.55;
}

.contacts-requisites-link {
  min-height: 44px;
  margin-top: var(--space-6);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-weight: var(--weight-bold);
}

.contacts-requisites-link:hover { color: var(--color-accent); }
.contacts-requisites-link .ds-icon { width: 13px; height: 13px; }

.contacts-form { width: 100%; max-width: 600px; justify-self: end; display: grid; gap: var(--space-3); }
.contacts-form-row { display: grid; gap: var(--space-3); }
.contacts-form-row-single { grid-template-columns: minmax(0, 1fr); }
.contacts-form .ds-field { align-content: start; }
.contacts-form .ds-field-label small { color: var(--color-text-secondary); font-size: var(--font-size-12); font-weight: var(--weight-regular); }
.contacts-form .ds-field-control { min-width: 0; background: var(--color-surface); }
.contacts-form select.ds-field-control { appearance: auto; }
.contacts-message { height: 88px; min-height: 88px; padding: var(--space-3) var(--space-4); resize: vertical; font: inherit; }

.contacts-consent { min-height: 32px; align-items: flex-start; }
.contacts-consent > input { margin-top: 1px; }

.contacts-form-footer {
  display: grid;
  gap: var(--space-4);
}

.contacts-form-footer .ds-button { width: 100%; min-width: 0; min-height: 54px; }
.contacts-form-footer .contacts-requisites-link {
  margin-top: 0;
  display: none;
  justify-self: start;
}
.contacts-form-footer p { margin: 0; color: var(--color-success); font-size: var(--font-size-13); line-height: 1.4; }
.contacts-form-footer p:empty { display: none; }

@keyframes contacts-map-arrive {
  from { clip-path: inset(0 8% 0 0 round var(--radius-lg)); }
  to { clip-path: inset(0 0 0 0 round var(--radius-lg)); }
}

@media (max-width: 1439px) {
  .contacts-overview { gap: var(--space-12); }
  .contacts-info-card { padding: var(--space-5); }
  .contacts-form-section { padding: var(--space-10); }
}

@media (max-width: 1199px) {
  .contacts-overview { grid-template-columns: minmax(260px, 0.62fr) minmax(540px, 1.38fr); gap: var(--space-8); }
  .contacts-info-card > div { font-size: var(--font-size-20); }
  .contacts-map-canvas { min-height: 380px; }
  .contacts-form-section { grid-template-columns: minmax(240px, 1fr) minmax(0, 600px); gap: var(--space-8); }
}

@media (max-width: 1024px) {
  .contacts-main {
    padding-top: var(--space-4);
    padding-bottom: var(--space-20);
  }

  .contacts-overview {
    margin-top: var(--space-4);
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }

  .contacts-overview h1 { font-size: var(--type-display-size); line-height: 1.02; }
  .contacts-overview-copy { grid-column: 1; grid-row: 1; }
  .contacts-card-grid { grid-column: 1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contacts-channel-actions { grid-column: 1; grid-row: 3; align-self: start; padding-top: 0; }

  .contacts-location-card {
    margin-top: var(--space-8);
    padding: var(--space-6);
  }

  .contacts-location-heading { gap: var(--space-6); }
  .contacts-location-heading p { font-size: var(--type-title-size); }
  .contacts-map-canvas {
    width: calc(100% + var(--space-12));
    min-height: 320px;
    margin-right: calc(var(--space-6) * -1);
    margin-bottom: calc(var(--space-6) * -1);
    margin-left: calc(var(--space-6) * -1);
  }

  .contacts-form-section {
    margin-top: var(--space-16);
    padding: var(--space-6);
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
    gap: var(--space-6);
  }

  .contacts-form { max-width: none; }
}

@media (max-width: 767px) {
  .contacts-main {
    padding-top: var(--space-3);
    padding-bottom: var(--space-8);
  }

  .contacts-overview { margin-top: var(--space-3); gap: var(--space-6); }
  .contacts-overview h1 { max-width: none; font-size: var(--font-size-40); }
  .contacts-channel-actions { padding-top: 0; }
  .contacts-channel-actions > div { gap: var(--space-2); }

  .contacts-card-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: var(--space-3);
  }

  .contacts-info-card {
    min-height: 0;
    height: auto;
    padding: var(--space-4);
  }

  .contacts-info-card > div { max-width: none; font-size: var(--type-subtitle-size); }

  .contacts-location-card {
    margin-top: var(--space-8);
    padding: var(--space-4);
    gap: var(--space-5);
    border-radius: var(--radius-lg);
  }

  .contacts-location-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .contacts-location-heading p { font-size: 16px; }
  .contacts-location-heading .ds-button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding-inline: var(--space-4);
    justify-self: stretch;
  }
  .contacts-map-canvas {
    width: calc(100% + var(--space-8));
    min-height: 240px;
    margin: 0 calc(var(--space-4) * -1) calc(var(--space-4) * -1);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }

  .contacts-map-city { font-size: var(--font-size-20); }

  .contacts-form-section {
    margin-top: var(--space-12);
    padding: var(--space-5);
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    border-radius: var(--radius-lg);
  }

  .contacts-form-copy h2 { font-size: var(--font-size-32); }
  .contacts-requisites-link-desktop { display: none; }
  .contacts-form { width: 100%; max-width: none; justify-self: stretch; }
  .contacts-form-footer {
    height: fit-content;
    align-content: start;
    grid-auto-rows: max-content;
  }
  .contacts-form-footer .contacts-requisites-link-adaptive {
    display: inline-flex;
    justify-self: center;
  }
  .contacts-message { height: 112px; min-height: 112px; }
}

@media (prefers-reduced-motion: reduce) {
  .contacts-map-canvas { animation: none; }
  .contacts-channel-actions button { transition: none; }
}