/* «О компании» (макет «О нас» 264:1883 — десктоп 1470, 369:465 — телефон 393). */

/* ссылка «Назад» под шапкой */
.page-back{margin-left:-3px}

/* первый экран: заголовок и цифры */
.on{padding:138px 0 var(--sec)}
.on__title{max-width:930px;margin-top:71px}
.on__stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--gap);row-gap:40px;margin-top:100px}
.on-stat{display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:184px;padding-right:20px;border-right:1px solid var(--muted)}
.on-stat:first-child{grid-column-start:3}
.on-stat__num{font:300 clamp(44px,4.1vw,60px)/.83 var(--f-head);letter-spacing:-.06em}
.on-stat__text{max-width:190px;color:var(--text);font:500 var(--p)/1.11 var(--f-text);letter-spacing:-.04em}

/* фото на всю ширину */
.on-photo{width:100%}
.on-photo--1{height:clamp(400px,52vw,763px)}
.on-photo--2{height:clamp(300px,38.5vw,566px);margin-top:70px}

/* о компании */
.on-ab__label{margin-bottom:12px}
.on-ab__title{max-width:990px;margin:50px 0 0 calc((100% + var(--gap)) / 3)}
.on-ab__row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--gap);align-items:start;margin-top:70px}
.on-ab__row .lead{grid-column:1/3;max-width:390px;color:#5F5F5F}
.on-ab__row .btn{grid-column:3/5;justify-self:start}
.stair{display:grid;gap:40px;margin-top:70px}
.stair li{display:grid;gap:10px;justify-items:start;margin-left:calc(var(--i, 0) * (100% + var(--gap)) / 6);padding-top:10px;border-top:1px solid var(--on-dark)}
.stair .h3{color:var(--text)}
.stair .lead{max-width:400px;color:#5F5F5F}
.on-ab__end{display:grid;gap:40px;justify-items:start;margin:50px 0 0 calc((100% + var(--gap)) / 3)}
.on-ab__end .h3{max-width:640px;color:var(--ink)}

/* что нас отличает */
.feat__label{margin-bottom:12px}
.feat__title{max-width:840px;margin:50px 0 0 calc((100% + var(--gap)) / 3)}
.feat__list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--gap);row-gap:60px;margin-top:110px}
.feat__list li{grid-column:span 2;display:grid;gap:60px;align-content:start}
.feat__art{width:clamp(180px,17.5vw,257px);height:auto;color:#0029E1}
.feat__list li>div{display:grid;gap:10px}
.feat__list .h3{max-width:260px}
.feat__list .lead{max-width:320px}

/* подход к работе: тёмное фото */
.appr{position:relative;overflow:hidden;background:#151515;color:var(--light)}
.appr .bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.8)}
.appr .h1{max-width:860px;color:var(--light);text-wrap:wrap}
.appr__list{display:grid;gap:20px;margin-top:70px}
.appr__list li{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--gap);align-items:start;min-height:64px}
.appr__n{grid-column:2;color:var(--on-dark-2);font:400 20px/1 var(--f-text);letter-spacing:-.04em}
.appr__t{grid-column:3/-1;justify-self:start;padding-top:10px;border-top:1px solid var(--on-dark-2);font:400 25px/1 var(--f-head);letter-spacing:-.04em}
.appr__end{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--gap);row-gap:30px;margin-top:150px;align-items:start}
.appr__end>.h3{grid-column:1/4;max-width:560px;color:var(--on-dark)}
.appr__note{grid-column:4/-1;display:grid;gap:30px;justify-items:start;max-width:480px}
.appr .appr__note .lead{color:var(--muted)}

/* география (как на главной) */
.geo{position:relative;overflow:hidden;min-height:clamp(760px,70vw,1033px)}
.geo .wrap{position:relative;z-index:1;pointer-events:none}
.geo .wrap a,.geo .wrap .zh-ed{pointer-events:auto}
.geo__label{margin-bottom:12px}
.geo__body{display:flex;flex-direction:column;justify-content:space-between;gap:60px;min-height:clamp(560px,51vw,760px);padding-top:55px}
.geo .h1{max-width:830px}
.geo__lead{max-width:306px;color:#5F5F5F}
.geo__map{position:absolute;left:30.48%;top:clamp(160px,15.9vw,234px);width:126.2%;aspect-ratio:1855/1000}
.geo__map>img{width:100%;height:100%}
.geo__pin{position:absolute;width:1.13%;aspect-ratio:1;margin:-.565% 0 0 -.565%;background:var(--blue);cursor:default;outline:0}
.geo__pin.is-on{background:var(--ink)}
.geo__name{position:absolute;left:0;bottom:calc(100% + 4px);width:max-content;max-width:170px;padding:15px;background:var(--blue);color:var(--light);font:400 20.8px/1.1 var(--f-text);letter-spacing:-.02em;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;pointer-events:none}
.geo__pin.is-on .geo__name,.geo__pin:hover .geo__name,.geo__pin:focus-visible .geo__name{opacity:1;transform:none}
.geo__pin.is-on .geo__name{min-height:137px;min-width:150px}
.geo__regions:hover .geo__pin.is-on:not(:hover) .geo__name{opacity:0}

/* ---------- телефон ---------- */
@media (max-width:900px){
  .on{padding:135px 0 50px}
  .on__title{margin-top:85px}
  .on__stats{grid-template-columns:minmax(0,1fr);row-gap:35px;margin-top:70px}
  .on-stat,.on-stat:first-child{grid-column:1;width:272px;max-width:100%;min-height:142px;gap:30px}
  .on-stat:nth-child(even){width:auto;padding:0 0 0 77px;border-right:0;border-left:1px solid var(--muted)}
  .on-stat__num{font-size:73.5px}
  .on-stat__text{max-width:253px;color:var(--ink);font-size:17px;line-height:1.12}
  .on-photo--1{height:617px}
  .on-photo--2{height:466px;margin-top:50px}

  .on-ab__title{margin:30px 0 0}
  .on-ab__row{grid-template-columns:minmax(0,1fr);row-gap:20px;margin-top:30px}
  .on-ab__row .lead,.on-ab__row .btn{grid-column:1}
  .stair{gap:20px;margin-top:70px}
  .stair li{margin:0;padding-top:15px;max-width:313px}
  .stair li:nth-child(even){max-width:none}
  .stair .h3{font:500 21px/1.05 var(--f-text);letter-spacing:-.04em;color:#5F5F5F}
  .stair .lead{max-width:273px;color:var(--on-dark-2)}
  .on-ab__end{margin:30px 0 0;gap:30px}

  .feat__title{margin:30px 0 0}
  .feat__list{grid-template-columns:minmax(0,1fr);row-gap:30px;margin-top:50px}
  .feat__list li{grid-column:1;gap:35px}
  .feat__list li+li{padding-top:30px;border-top:1px solid var(--muted)}
  .feat__art{width:208px;justify-self:end}

  .appr__list{margin-top:70px}
  .appr__list li{display:flex;align-items:flex-start;gap:15px;min-height:0}
  .appr__n{font-size:15px;padding-top:13px}
  .appr__t{margin-left:auto;text-align:right;font:500 21px/1.05 var(--f-text)}
  .appr__end{grid-template-columns:minmax(0,1fr);row-gap:20px;margin-top:70px}
  .appr__end>.h3,.appr__note{grid-column:1}
  .appr__end>.h3{color:var(--light)}

  .geo{min-height:0;padding-bottom:0}
  .geo__body{min-height:0;gap:20px;padding-top:30px}
  .geo__map{position:relative;left:0;top:0;width:190%;margin:20px 0 0 -10%}
  .geo__name{font-size:14px;padding:8px}
  .geo__pin.is-on .geo__name{min-height:0;min-width:0}
}