/* ============================================================
   СПБ Переезд — comparison (две панели vs, по референсу)
   ============================================================ */

.sp-head--left{text-align:left;max-width:640px;margin-left:0}
.sp-cmp__kicker{font-size:12.5px;font-weight:700;color:var(--brand);letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:12px}

/* сетка двух панелей + vs между ними */
.sp-cmp{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:0}

.sp-cmp__panel{border-radius:var(--r-lg);overflow:hidden}
.sp-cmp__panel--us{background:var(--card);box-shadow:var(--sh-lg);position:relative;z-index:1}
.sp-cmp__panel--them{background:#eef1f6;margin-left:-14px;padding-left:14px}

/* шапка панели */
.sp-cmp__ph{position:relative;display:flex;align-items:center;gap:18px;padding:26px 28px;
  min-height:190px}
.sp-cmp__panel--us .sp-cmp__ph{padding-left:0}
/* фото бригады слева, размытый переход в белое */
.sp-cmp__photo{position:absolute;left:0;top:0;bottom:0;width:52%;background-size:cover;
  background-position:center;-webkit-mask-image:linear-gradient(90deg,#000 55%,transparent);
  mask-image:linear-gradient(90deg,#000 55%,transparent)}
.sp-cmp__panel--us .sp-cmp__brand{margin-left:52%;padding-left:8px}

.sp-cmp__ph--them{padding:26px 28px}
.sp-cmp__avatar{flex:none;width:74px;height:74px;border-radius:50%;background:#dde2ea;
  display:flex;align-items:center;justify-content:center;color:#aab3c2}
.sp-cmp__avatar svg{width:42px;height:42px}

.sp-cmp__name{display:flex;align-items:center;gap:10px;font-family:var(--f-display);
  font-size:22px;font-weight:700;color:var(--ink)}
.sp-cmp__name--them{color:var(--ink-2)}
.sp-cmp__shield{color:var(--brand);display:flex}
.sp-cmp__shield svg{width:26px;height:26px}
.sp-cmp__slogan{font-size:13px;color:var(--ink-3);margin-top:5px}

/* списки критериев */
.sp-cmp__list{list-style:none;margin:0;padding:0}
.sp-cmp__list li{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 28px;border-top:1px solid var(--line-2)}
.sp-cmp__panel--us .sp-cmp__list li{padding-left:28px}
.sp-cmp__crit{font-size:14px;color:var(--ink);font-weight:500}
.sp-cmp__panel--them .sp-cmp__crit{color:var(--ink-2)}
.sp-cmp__val{display:flex;align-items:center;gap:8px;font-size:14px;white-space:nowrap;flex:none}
.sp-cmp__val svg{width:19px;height:19px;flex:none}
.sp-cmp__val--ok{color:var(--ok,#0f9d4f)}
.sp-cmp__val--ok b{color:var(--ok,#0f9d4f);font-weight:600}
.sp-cmp__val--no{color:var(--ink-3)}
.sp-cmp__val--no svg{color:#b9c0cc}

/* VS-кружок */
.sp-cmp__vs{align-self:center;width:52px;height:52px;border-radius:50%;background:var(--brand);
  color:#fff;font-family:var(--f-display);font-weight:700;font-size:16px;display:flex;
  align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(31,95,240,.35);
  position:relative;z-index:3;margin:0 -12px}

/* нижняя плашка */
.sp-cmp__note{display:flex;align-items:center;gap:16px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:18px 24px;margin-top:24px}
.sp-cmp__note-ic{flex:none;width:44px;height:44px;border-radius:11px;background:var(--brand);
  display:flex;align-items:center;justify-content:center}
.sp-cmp__note-ic svg{width:22px;height:22px;stroke:#fff}
.sp-cmp__note-txt{flex:1;font-size:14px;color:var(--ink-3);line-height:1.5}
.sp-cmp__note-txt b{color:var(--ink);font-weight:600}
.sp-cmp__note-link{flex:none;display:flex;align-items:center;gap:12px;text-decoration:none}
.sp-cmp__note-phone{width:44px;height:44px;border-radius:11px;background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;color:var(--brand)}
.sp-cmp__note-phone svg{width:22px;height:22px}
.sp-cmp__note-q{display:block;font-size:13px;color:var(--ink);font-weight:600}
.sp-cmp__note-cta{display:block;font-size:13px;color:var(--brand);font-weight:600}

/* ============ адаптация ============ */
@media(max-width:900px){
  /* панели встают друг под друга, vs — по центру между ними */
  .sp-cmp{grid-template-columns:1fr}
  .sp-cmp__panel--them{margin-left:0;padding-left:0}
  .sp-cmp__panel--us .sp-cmp__brand{margin-left:52%}
  .sp-cmp__vs{margin:-26px auto;order:0}
  .sp-cmp__panel--us{margin-bottom:0}
  .sp-cmp__panel--them{margin-top:0}
}
@media(max-width:540px){
  .sp-cmp__ph,.sp-cmp__ph--them{padding:20px;min-height:0;flex-direction:column;text-align:center;gap:12px}
  .sp-cmp__photo{position:relative;width:100%;height:200px;-webkit-mask-image:none;mask-image:none;
    border-radius:var(--r)}
  .sp-cmp__panel--us .sp-cmp__brand{margin-left:0;padding-left:0}
  .sp-cmp__name{justify-content:center;font-size:19px}
  /* строки: критерий сверху, значение снизу */
  .sp-cmp__list li{flex-direction:column;align-items:flex-start;gap:5px;padding:13px 18px}
  .sp-cmp__val{font-size:14.5px}
  .sp-cmp__note{flex-direction:column;text-align:center;align-items:center}
  .sp-cmp__note-link{flex-direction:column;gap:6px}
}

/* кнопка «Подробнее о нас» */
.sp-cmp__more{text-align:center;margin-top:24px}
.sp-cmp__more .sp-btn svg{width:19px;height:19px;transition:transform var(--dur) var(--ease)}
.sp-cmp__more .sp-btn:hover svg{transform:translateX(3px)}