/* ============================================================
   СПБ Переезд — страница «О компании» (page-about.php)
   ============================================================ */

/* --- баннер --- */
.sp-about-hero{background:linear-gradient(135deg,var(--ink),var(--brand-dk));
  color:#fff;padding:110px 0 100px;position:relative;background-size:cover;background-position:center}
.sp-about-hero__overlay{position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(12,22,38,.85),rgba(31,95,240,.55));pointer-events:none}
.sp-about-hero__content{position:relative;z-index:1}
.sp-about-hero h1{font-size:clamp(27px,4vw,44px);font-weight:800;margin:0 0 14px;line-height:1.15}
.sp-about-hero p{font-size:17px;color:rgba(255,255,255,.85);margin:0;max-width:680px;line-height:1.5}

/* --- цифры --- */
.sp-about-nums{padding:44px 0;background:var(--card);border-bottom:1px solid var(--line)}
.sp-about-nums__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.sp-about-num{text-align:center;padding:0 10px}
.sp-about-num__val{font-family:var(--f-display);font-size:clamp(28px,3.4vw,40px);font-weight:800;
  color:var(--brand);line-height:1;letter-spacing:-.02em}
.sp-about-num__label{font-size:13.5px;color:var(--ink-3);margin-top:10px;line-height:1.45}

/* --- текст + руководитель --- */
.sp-about-text{padding:52px 0}
.sp-about-text__grid{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}
.sp-about-dir{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 24px;text-align:center;position:sticky;top:20px}
.sp-about-dir__photo{width:110px;height:110px;border-radius:50%;margin:0 auto 16px;
  background-size:cover;background-position:center;box-shadow:0 6px 20px rgba(31,95,240,.15)}
.sp-about-dir__quote{font-size:14.5px;color:var(--ink-2);line-height:1.6;font-style:italic;
  margin:0 0 16px;border:none;padding:0;background:none}
.sp-about-dir__name{font-family:var(--f-display);font-size:17px;font-weight:700;color:var(--ink)}
.sp-about-dir__role{font-size:12.5px;color:var(--ink-3);margin-top:3px;line-height:1.4}

/* --- принципы --- */
.sp-about-principles{padding:52px 0}
.sp-about-principles__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.sp-about-principle{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 22px;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.sp-about-principle:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
/* шапка карточки: иконка + заголовок */
.sp-about-principle__head{display:flex;align-items:center;gap:12px;margin-bottom:14px;
  padding-bottom:12px;border-bottom:2px solid var(--brand)}
.sp-about-principle__ic{flex:none;width:42px;height:42px;border-radius:11px;
  background:var(--brand-soft);display:flex;align-items:center;justify-content:center}
.sp-about-principle__ic svg{width:21px;height:21px;fill:none;stroke:var(--brand);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sp-about-principle h3{font-size:17px;font-weight:700;color:var(--ink);margin:0}
.sp-about-principle ul{list-style:none;padding:0;margin:0}
.sp-about-principle li{position:relative;padding-left:22px;margin-bottom:11px;
  font-size:13.5px;color:var(--ink-2);line-height:1.5}
.sp-about-principle li:last-child{margin-bottom:0}
.sp-about-principle li::before{content:"";position:absolute;left:0;top:6px;width:12px;height:12px;
  background:no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%231f5ff0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>')}

/* --- CTA --- */
.sp-about-cta{padding:48px 0}
.sp-about-cta__box{display:flex;align-items:center;justify-content:space-between;gap:28px;
  flex-wrap:wrap;background:linear-gradient(135deg,var(--ink),var(--brand-dk));
  color:#fff;border-radius:var(--r-lg);padding:36px 40px;box-shadow:var(--sh-lg)}
.sp-about-cta__box h2{font-size:26px;font-weight:800;margin:0 0 8px;color:#fff}
.sp-about-cta__box p{font-size:15px;color:rgba(255,255,255,.8);margin:0;line-height:1.5}
.sp-about-cta__box .sp-btn svg{width:19px;height:19px;transition:transform var(--dur) var(--ease)}
.sp-about-cta__box .sp-btn:hover svg{transform:translateX(3px)}

/* --- SEO --- */
.sp-about-seo{padding:48px 0;background:var(--bg-2);border-top:1px solid var(--line)}

/* --- адаптив --- */
@media(max-width:980px){
  .sp-about-nums__grid{grid-template-columns:repeat(2,1fr);gap:28px}
  .sp-about-principles__grid{grid-template-columns:repeat(2,1fr)}
  .sp-about-text__grid{grid-template-columns:1fr;gap:28px}
  .sp-about-dir{position:static;max-width:420px;margin:0 auto}
}
@media(max-width:600px){
  .sp-about-hero{padding:54px 0 48px}
  .sp-about-principles__grid{grid-template-columns:1fr}
  .sp-about-cta__box{flex-direction:column;align-items:flex-start;padding:26px 22px;text-align:left}
  .sp-about-cta__box .sp-btn{width:100%;justify-content:center}
  .sp-about-nums{padding:32px 0}
}