/* ——— About page (О компании) ——— */

/* ——— HERO: светлый, с той же mesh-анимацией и кинетической типографикой, что и на главной ——— */
.about-hero{
  position:relative; overflow:hidden;
  min-height:clamp(440px,71vh,680px);
  background:radial-gradient(120% 90% at 50% 4%, #F2F6F7 0%, #EAF6FB 56%, #D9E8ED 100%);
}
.about-hero [data-hero-shader]{
  mask-image:radial-gradient(135% 125% at 50% 46%, #000 62%, rgba(0,0,0,0.6) 84%, transparent 100%);
  -webkit-mask-image:radial-gradient(135% 125% at 50% 46%, #000 62%, rgba(0,0,0,0.6) 84%, transparent 100%);
}
.about-hero [data-hero-shader] canvas{ filter:blur(14px); transform:scale(1.05); }

/* кинетическая типографика IWS — тот же particle-canvas, что собирает IRON WATER на главной */
.about-iws{
  position:absolute; inset:0; z-index:1;
  display:block; width:100%; height:100%;
}
.about-hero-copy{
  position:absolute; z-index:2;
  right:clamp(18px,5vw,72px); bottom:clamp(30px,5vh,60px);
  max-width:520px;
}
.about-hero-copy p{
  font-size:clamp(16px,1.55vw,19.5px); line-height:1.55; color:var(--iw-body); font-weight:600;
}
@media (max-width:820px){
  .about-hero-copy{ left:clamp(18px,5vw,72px); right:clamp(18px,5vw,72px); max-width:none; }
}

/* ——— общий контейнер секций ——— */
.about-section{ padding:clamp(72px,11vh,128px) clamp(18px,5vw,72px); }
.about-inner{ max-width:var(--iw-container); margin:0 auto; }
.about-h2{
  font-weight:800; font-size:clamp(27px,3.6vw,46px); line-height:1.08;
  letter-spacing:-0.025em; text-wrap:balance;
}

/* ——— Digital-эксперты ——— */
.experts{ background:var(--iw-cloud); }
.experts-head{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-bottom:clamp(40px,5vw,64px);
}
.experts-track{
  display:flex; align-items:flex-start; gap:24px;
}
.experts-track > .experts-grid{ flex:1 1 auto; min-width:0; }
.experts-arrow{
  flex:0 0 auto; width:44px; height:44px;
  /* пришпилены к центру фото — не прыгают при листании (высота фото постоянна) */
  margin-top:var(--exp-arrow-top,0);
  display:flex; align-items:center; justify-content:center;
  border:1px solid #B7C0CA; background:transparent; color:#1A2730;
  font-size:18px; cursor:pointer;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.experts-arrow:hover{ background:var(--iw-accent); border-color:var(--iw-accent); color:#fff; }

.experts-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.4vw,34px);
  align-items:start;
}
@media (max-width:900px){ .experts-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .experts-grid{ grid-template-columns:1fr; } }

/* лёгкая «лесенка», как в макете (только на широком экране) */
@media (min-width:901px){
  .experts-grid > .expert:nth-child(2){ margin-top:34px; }
  .experts-grid > .expert:nth-child(3){ margin-top:12px; }
  .experts-grid > .expert:nth-child(4){ margin-top:46px; }
}

.expert{ display:flex; flex-direction:column; }
.expert-photo{
  position:relative; aspect-ratio:3/4; overflow:hidden;
  background:linear-gradient(160deg,#E6ECF1 0%, #D6DEE6 100%);
}
.expert-photo::after{
  content:attr(data-ini);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:clamp(38px,4.4vw,56px); letter-spacing:-0.03em;
  color:rgba(20,37,49,0.14);
}
/* когда есть реальное фото — прячем инициалы-заглушку (иначе просвечивают) */
.expert-photo:has(img)::after{ display:none; }
.expert-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* мета-строка как в карточках проектов: имя прибито к левому краю,
   должность — к правому, на одной базовой линии, с разделительной чертой */
.expert-meta{
  display:flex; align-items:baseline; justify-content:flex-start; gap:14px; flex-wrap:wrap;
  margin-top:16px; padding-top:16px;
  border-top:1px solid rgba(20,37,49,0.14); transition:border-color .4s ease;
}
.expert:hover .expert-meta{ border-top-color:var(--iw-accent); }
.expert-name{ font-weight:700; font-size:16px; letter-spacing:-0.01em; line-height:1.2; }
.expert-role{
  margin-left:auto; text-align:right;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:var(--iw-eyebrow-track);
  text-transform:uppercase; color:var(--iw-label); line-height:1.5;
}

/* ——— Мобильная версия «Digital-эксперты»: горизонтальная лента вместо страниц ———
   На ≤880px стрелок нет, все 20 карточек лежат в одном ряду и листаются пальцем
   вправо. Лента full-bleed: отрицательные margin'ы гасят паддинг секции, поэтому
   карточки уезжают за край экрана, а первая стоит по сетке заголовка.
   Десктоп (>880px) не затрагивается — там прежняя раскладка 4-в-ряд со стрелками. */
@media (max-width:880px){
  .experts-arrow{ display:none; }
  .experts-track{ display:block; }
  .experts-track > .experts-grid{ flex:none; }

  .experts-grid{
    --exp-pad:clamp(18px,5vw,72px);
    display:grid;
    grid-auto-flow:column;
    grid-template-columns:none;
    grid-auto-columns:clamp(190px,62%,300px);
    gap:14px;
    align-items:start;
    margin-inline:calc(-1 * var(--exp-pad));
    padding-inline:var(--exp-pad);
    padding-bottom:4px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scroll-padding-inline-start:var(--exp-pad);
    scrollbar-width:none;
  }
  .experts-grid::-webkit-scrollbar{ display:none; }
  .experts-grid > .expert{ scroll-snap-align:start; }

  /* мышью ленту тянут (js/about.js): на время перетаскивания снимаем снап,
     чтобы он не подтягивал карточку под курсором, и глушим выделение текста */
  .experts-grid.is-dragging{
    scroll-snap-type:none;
    cursor:grabbing;
    user-select:none; -webkit-user-select:none;
  }
  .experts-grid.is-dragging img{ pointer-events:none; }

  /* на узкой карточке имя и должность не помещаются в одну строку — стопкой */
  .experts-grid > .expert .expert-meta{
    display:block; margin-top:12px; padding-top:12px;
  }
  .experts-grid > .expert .expert-role{
    display:block; margin-left:0; text-align:left; margin-top:5px;
  }
}

/* курсор-«рука» только там, где есть настоящая мышь — на тач-экранах он не нужен */
@media (max-width:880px) and (hover:hover) and (pointer:fine){
  .experts-grid{ cursor:grab; }
}

/* ——— Наши достижения ——— */
.ach{ background:var(--iw-surface); border-top:1px solid var(--iw-border); }
.ach .about-h2{ margin-bottom:clamp(40px,5vw,64px); }
.ach-grid{
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:clamp(32px,5vw,90px); row-gap:clamp(26px,3vw,40px);
}
@media (max-width:760px){ .ach-grid{ grid-template-columns:1fr; } }
.ach-item{ display:flex; gap:18px; align-items:flex-start; }
.ach-ico{
  flex:0 0 auto; width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  background:var(--iw-white); color:var(--iw-ink);
}
.ach-ico svg{ width:24px; height:24px; display:block; }
.ach-text{ font-size:14.5px; line-height:1.6; color:var(--iw-body); padding-top:2px; }
.ach-text .accent{ color:var(--iw-accent); font-weight:600; }
a.accent{ text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s ease; }
a.accent:hover{ border-bottom-color:currentColor; }

/* ——— Наши моменты ——— */
.moments{ background:var(--iw-darkest); color:var(--iw-on-dark-bright); }
.moments .about-h2{ color:var(--iw-white); margin-bottom:clamp(36px,4vw,56px); }
.moments-photo{ overflow:hidden; line-height:0; }
.moments-photo img{ display:block; width:100%; height:auto; }

/* ——— CTA card (совпадает с услугами/проектами) ——— */
.cta-card{ background:var(--iw-surface-dark); border:1px solid #2C3D49; padding:clamp(30px,3.4vw,48px); display:flex; flex-direction:column; gap:26px; }
.cta-card p{ font-size:clamp(19px,2.2vw,26px); font-weight:700; line-height:1.3; letter-spacing:-0.015em; }