/* ============================================================
   О компании (/about/) — по макету Ксении (Figma KUSN9LuLJQlqEbaUboZRSQ,
   видео 2026-10-07). Размеры в комментариях — значения макета на 1920px.
   Подключается только на about.html (block extra_head).
   ============================================================ */

.ab-wrap{max-width:1360px;margin:0 auto;padding-left:clamp(18px,4vw,44px);padding-right:clamp(18px,4vw,44px);}
.ab-kicker{font-size:12px;font-weight:500;letter-spacing:.2em;color:var(--accent);text-transform:uppercase;margin-bottom:16px;}
/* h2 секций — 52/44px; «От заявки до сопровождения» в макете 44px */
.ab-h2{font-weight:700;font-size:clamp(28px,3.4vw,52px);line-height:1.1;letter-spacing:-.01em;text-transform:uppercase;color:var(--text-strong);margin:0 0 clamp(26px,3vw,40px);}
.ab-h2--sm{font-size:clamp(26px,3vw,44px);}

/* ---------- Шапка: текст + фото офиса ---------- */
.ab-head{padding:clamp(40px,3.6vw,68px) 0 clamp(40px,5.7vw,110px);}
/* Фото 543px (макетные 564 при контейнере 1272 вместо 1320): колонке текста
   остаётся 646px — заголовок встаёт в две строки, как в макете. */
.about-hero{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,28.3vw,543px);gap:clamp(24px,4.3vw,83px);align-items:center;}
.ab-h1{font-weight:700;font-size:clamp(34px,4.4vw,52px);line-height:1.06;letter-spacing:-.015em;text-transform:uppercase;color:var(--text-strong);margin:0 0 clamp(20px,2vw,30px);max-width:13.2em;}
.ab-lead{font-size:clamp(16px,1.5vw,20px);line-height:1.35;color:var(--text-muted);max-width:609px;margin:0;}
.ab-lead + .ab-lead{margin-top:1.35em;}
.about-hero__media{margin:0;}
.about-hero__frame{position:relative;width:100%;aspect-ratio:564/382;overflow:hidden;border-radius:16px;background:var(--bg-soft);}
.about-hero__frame img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;filter:grayscale(1) contrast(1.04);transition:transform .6s ease;}
.about-hero__frame:hover img{transform:scale(1.03);}
@media (max-width:900px){
  .about-hero{grid-template-columns:minmax(0,1fr);gap:26px;}
}
/* «в подборе персонала» связано U+00A0 (|typo) — на телефоне кегль ужимается,
   чтобы связка помещалась в ширину экрана */
@media (max-width:560px){ .ab-h1{font-size:clamp(24px,7.2vw,34px);} }

/* ---------- Цифры: бордовая полоса (214px), числа 64px, подписи 13.5px ---------- */
.ab-stats{background:var(--accent);color:#fff;}
.ab-stats__row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px 28px;padding-top:clamp(36px,4vw,78px);padding-bottom:clamp(36px,4vw,78px);}
.ab-stat{display:flex;align-items:flex-end;gap:25px;}
.ab-stat__num{font-weight:700;font-size:clamp(40px,3.4vw,64px);line-height:.9;}
.ab-stat__lbl{font-size:13.5px;font-weight:500;line-height:1.2;padding-bottom:2px;}
@media (max-width:760px){
  .ab-stats__row{display:grid;grid-template-columns:1fr 1fr;}
  .ab-stat{flex-direction:column;align-items:flex-start;gap:8px;}
}

/* ---------- Секции ---------- */
.ab-sec{padding:clamp(48px,5.4vw,104px) 0;}
.ab-sec--values{padding-top:clamp(48px,3.8vw,72px);}
.ab-sec--gray{background:var(--bg-light);padding:clamp(48px,4.3vw,82px) 0 clamp(44px,3vw,58px);}
.ab-sec--tl{padding:clamp(48px,3vw,58px) 0;}

/* ---------- Ценности: серые плашки 60px, синяя галочка 32px ---------- */
.values-grid{display:flex;flex-direction:column;gap:32px;}
.values-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;}
.values-row--inset{padding:0 5%;}
.value-chip{display:inline-flex;align-items:center;gap:20px;background:var(--bg-light);border-radius:13px;padding:14px 34px 14px 16px;transition:transform .18s ease,box-shadow .18s ease;}
.value-chip:hover{transform:translateY(-2px);box-shadow:0 8px 20px -12px rgba(25,66,127,.45);}
.value-chip__ic{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;flex:none;color:#fff;background:#1A4280;}
.value-chip__ic svg{width:17px;height:17px;}
.value-chip__txt{font-weight:600;font-size:clamp(14px,1.3vw,16.5px);letter-spacing:.02em;text-transform:uppercase;color:var(--text-strong);}
@media (max-width:1080px){
  .values-grid{gap:12px;}
  .values-row,.values-row--inset{justify-content:flex-start;padding:0;gap:12px;}
}

/* ---------- Наш подход: крупные цифры с градиентом, без карточек ---------- */
/* minmax(0,…): длинные казахские слова («ҚАЛЫПТАСТЫРАМЫЗ») не распирают колонки */
.process-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(20px,2.4vw,40px);}
.process-num{display:block;font-weight:700;font-size:clamp(60px,5.2vw,100px);line-height:.8;letter-spacing:-.01em;
  background:linear-gradient(180deg,#9D9D9D 0%,rgba(157,157,157,.12) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:clamp(22px,2.3vw,44px);}
.process-title{display:flex;align-items:center;min-height:2.36em;font-weight:700;font-size:16.5px;line-height:1.18;letter-spacing:.01em;text-transform:uppercase;color:var(--text-strong);margin-bottom:22px;overflow-wrap:break-word;}
.process-desc{font-size:13px;line-height:1.3;color:var(--text-muted);margin:0;max-width:270px;}
@media (max-width:1080px){ .process-grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px;} }
@media (max-width:760px){ .process-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:480px){ .process-grid{grid-template-columns:minmax(0,1fr);} }

/* ---------- История: три года на экране + стрелки (about.js) ---------- */
.tl-carousel{display:grid;grid-template-columns:51px minmax(0,1fr) 51px;gap:clamp(14px,3vw,45px);align-items:start;margin-top:clamp(28px,4vw,80px);}
.tl-arrow{width:51px;height:51px;margin-top:31px;border:none;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s ease,opacity .18s ease;}
.tl-arrow svg{width:22px;height:22px;}
.tl-arrow:hover{background:var(--accent-hover);}
.tl-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.tl-track{display:flex;gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;}
.tl-track::-webkit-scrollbar{display:none;}
.tl-card{flex:0 0 calc((100% - 64px) / 3);scroll-snap-align:start;padding:26px 24px 8px;}
.tl-year{font-weight:700;font-size:clamp(40px,3.3vw,62px);line-height:.9;color:var(--accent);margin-bottom:18px;}
.tl-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;}
.tl-points li{position:relative;padding-left:19px;font-size:14.5px;line-height:1.3;color:var(--text-muted);}
.tl-points li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--accent);}
@media (max-width:1080px){ .tl-card{flex-basis:calc((100% - 32px) / 2);} }
@media (max-width:640px){
  .tl-carousel{grid-template-columns:40px minmax(0,1fr) 40px;gap:8px;}
  .tl-arrow{width:40px;height:40px;margin-top:24px;}
  .tl-card{flex-basis:100%;padding:20px 8px 4px;}
}

/* ---------- CTA: бордовая полоса, текст белый, кнопки с белой обводкой ---------- */
.ab-cta{background:var(--accent);color:#fff;}
.ab-cta__row{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;padding-top:clamp(48px,5.3vw,102px);padding-bottom:clamp(48px,5.3vw,102px);}
.ab-cta__title{flex:1 1 300px;font-weight:700;font-size:clamp(26px,2.9vw,40px);line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;color:#fff;margin:0;max-width:440px;}
.ab-cta__text{flex:0 1 262px;font-size:16px;line-height:1.31;color:#fff;margin:0;max-width:262px;}
.ab-cta__btns{display:flex;gap:13px;flex-wrap:wrap;}
.ab-cta__btn{border:1px solid rgba(255,255,255,.5);border-radius:9px;padding:15px 21px;color:#fff;font-weight:600;font-size:15px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;transition:background .18s ease,color .18s ease,border-color .18s ease;}
.ab-cta__btn--fill{background:var(--accent);}
.ab-cta__btn:hover{background:#fff;color:var(--accent);border-color:#fff;}
@media (max-width:980px){ .ab-cta__text{max-width:520px;} }