/* Контакты — 522:8909: фон #f7f7f7, отступы 100/110, промежуток 20 */
.ct {
  background: var(--paper);
  padding: clamp(56px, 5.2083vw, 100px) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ct__title {
  font-size: clamp(30px, 2.7083vw, 52px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 1px;
  color: #262b31;
}

/* Карта, панель и карточка офиса лежат в одном слое: карточка офиса
   накрывает низ карты (в макете mt 440 при карте 570). */
.ct__wrap { position: relative; height: 570px; width: 100%; }
.ct__map {
  position: absolute;
  inset: 0 auto 0 0;
  width: 1125px;
  max-width: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
}
/* 538:9161 — кадр карты в макете смещён и увеличен */
.ct__map img {
  position: absolute;
  left: -0.02%;
  top: -39.01%;
  width: 108.11%;
  height: 139.09%;
  max-width: none;
  object-fit: cover;
}

.ct__panel {
  color-scheme: dark;
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  width: 524px;
  display: flex;
  flex-direction: column;
}
.ct__tabs { display: flex; gap: 8px; padding-bottom: 16px; height: 54px; }
.ct__tab {
  flex: 1 0 0;
  min-width: 1px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-xl);
  background: #262b31;
  font-family: var(--font-alt);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--cream);
  cursor: pointer;
}
.ct__tab--active { border-color: transparent; color: var(--white); }

.ct__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 58px;
  padding: 11px 17px 11px 17px;
  border: 1px solid #262b31;
  border-radius: var(--r-xl);
  margin-bottom: 20px;
}
.ct__search img { flex: 0 0 16px; }
.ct__search input {
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  font-size: 14px;
  line-height: normal;
  color: rgba(56, 71, 42, 0.9);
}
.ct__search input::placeholder { color: rgba(56, 71, 42, 0.6); }

.ct__districts { display: flex; flex-direction: column; gap: 12px; width: 522px; max-width: 100%; }
.dst {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;                      /* 17 минус 1px обводки внутрь */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-xl);
  background: #262b31;
}
.dst--first { border-color: rgba(255, 255, 255, 0.08); }
.dst__pin { flex: 0 0 16px; margin-top: 2px; }
.dst__body { display: flex; flex-direction: column; }
.dst__name {
  font-family: var(--font-alt);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--white);
}
.dst__note {
  padding-top: 4px;
  font-size: 12px;
  line-height: 19.5px;
  color: var(--cream);
}

/* Карточка офиса 538:9290 — поверх карты, отступ сверху 440 */
.ct__office {
  position: absolute;
  inset-inline-start: 0;
  top: 440px;
  display: flex;
  gap: 24px;
  width: 1125px;
  max-width: 100%;
  height: 130px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-xl);
  background: #262b31;
  color: var(--paper);
}
.ct__office-icon {
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
}
.ct__office-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.ct__office-head { display: flex; align-items: center; gap: clamp(24px, 7.6vw, 146px); }
.ct__office-name {
  font-family: var(--font-alt);
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: var(--paper);
}
.ct__office-addr { font-size: 14px; line-height: 20px; color: var(--paper); }

.ct__facts { display: flex; gap: 16px; padding-top: 16px; }
.fact { width: min(229.5px, 100%); }
.fact dt {
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--paper);
}
.fact dd {
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
  color: var(--paper);
}

@media (max-width: 1439px) {
  .ct__wrap { height: auto; display: flex; flex-direction: column; gap: 20px; }
  .ct__map { position: relative; width: 100%; height: clamp(240px, 40vw, 570px); }
  .ct__panel { position: static; width: 100%; }
  .ct__districts { width: 100%; }
  .ct__office { position: static; width: 100%; height: auto; flex-wrap: wrap; }
  .ct__facts { flex-wrap: wrap; }
  .fact { width: auto; flex: 1 1 180px; }
}
@media (max-width: 599px) {
  .ct__office-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}