/* ==========================================================================
   Страница «О компании» — seitn.ru
   Свёрстана по гайду «Ребрендинг 26»:
     шрифт Geist, палитра #ce2731 / #706f6f / #000 / #fff,
     фирменные элементы — рамка из чертёжных линий и красный угол.
   ========================================================================== */

@font-face{
    font-family:'Geist';
    src:url('../fonts/geist/geist-400.woff2') format('woff2');
    font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
    font-family:'Geist';
    src:url('../fonts/geist/geist-500.woff2') format('woff2');
    font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
    font-family:'Geist';
    src:url('../fonts/geist/geist-600.woff2') format('woff2');
    font-weight:600;font-style:normal;font-display:swap;
}

.about-sec{
    /* фирменная палитра */
    --ab-red:#ce2731;
    --ab-gray:#706f6f;
    --ab-black:#000000;
    --ab-white:#ffffff;
    /* производные для поверхностей */
    --ab-soft:#EFEFEF;
    --ab-line:#D5D5D5;
    --ab-tick:#9A9A9A;

    font-family:'Geist',Arial,sans-serif;
    padding:80px 0;
    color:var(--ab-black);
}
.about-sec--soft{background:var(--ab-soft);}
.about-sec--black{background:var(--ab-black);}

/* ---------- Фирменные элементы: чертёжная рамка + красный угол ----------
   Рамка собрана НЕ из замкнутого прямоугольника, а из четырёх линий,
   которые перехлёстывают друг друга за углами — как приводочные метки
   на чертеже (гайд, стр. 15). Перехлёст задаётся --ab-ov.                */
.ab-frame{position:relative;background:var(--ab-white);}
.ab-frame:before{
    content:"";position:absolute;inset:-16px;pointer-events:none;
    background:
        /* горизонтальные линии — во всю ширину увеличенного бокса, т.е. с выносом за углы */
        linear-gradient(var(--ab-tick),var(--ab-tick)) 0 16px/100% 1px no-repeat,
        linear-gradient(var(--ab-tick),var(--ab-tick)) 0 calc(100% - 16px)/100% 1px no-repeat,
        /* вертикальные линии — во всю высоту, с таким же выносом */
        linear-gradient(var(--ab-tick),var(--ab-tick)) 16px 0/1px 100% no-repeat,
        linear-gradient(var(--ab-tick),var(--ab-tick)) calc(100% - 16px) 0/1px 100% no-repeat,
        /* короткие диагональные засечки в местах пересечения */
        linear-gradient(45deg,transparent 46%,var(--ab-tick) 46%,var(--ab-tick) 54%,transparent 54%) 9px 9px/14px 14px no-repeat,
        linear-gradient(45deg,transparent 46%,var(--ab-tick) 46%,var(--ab-tick) 54%,transparent 54%) calc(100% - 9px) 9px/14px 14px no-repeat,
        linear-gradient(45deg,transparent 46%,var(--ab-tick) 46%,var(--ab-tick) 54%,transparent 54%) 9px calc(100% - 9px)/14px 14px no-repeat,
        linear-gradient(45deg,transparent 46%,var(--ab-tick) 46%,var(--ab-tick) 54%,transparent 54%) calc(100% - 9px) calc(100% - 9px)/14px 14px no-repeat;
}
/* Красный угол: L-скоба внутри верхнего правого угла, внешними гранями по линиям рамки.
   Пропорции по гайду — толщина ≈ 0,28 длины плеча. */
.ab-frame:after{
    content:"";position:absolute;top:0;right:0;
    width:46px;height:46px;pointer-events:none;
    border-top:13px solid var(--ab-red);
    border-right:13px solid var(--ab-red);
}
/* красный угол без рамки — для фотографий */
.ab-corner{position:relative;}
.ab-corner:after{
    content:"";position:absolute;top:0;right:0;
    width:40px;height:40px;pointer-events:none;
    border-top:11px solid var(--ab-red);
    border-right:11px solid var(--ab-red);
}

/* ---------- Типографика по гайду ---------- */
.about-sec__head{margin-bottom:44px;}
.about-sec__head h2{
    font-family:'Geist',Arial,sans-serif;font-weight:600;
    font-size:46px;line-height:1.08;letter-spacing:-.01em;
    text-transform:uppercase;color:var(--ab-black);
    margin:0 0 18px;max-width:22ch;
}
.about-sec--black .about-sec__head h2{color:var(--ab-white);}
.about-sec__lead{
    font-family:'Geist',Arial,sans-serif;font-weight:400;
    font-size:18px;line-height:1.55;color:var(--ab-gray);
    max-width:68ch;margin:0;
}
.about-sec--black .about-sec__lead{color:#B0B0B0;}
.ab-eyebrow{
    font-family:'Geist',Arial,sans-serif;font-weight:500;
    font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--ab-red);margin-bottom:14px;
}

/* ---------- Интро ---------- */
.about-intro__text{max-width:72ch;}
.about-intro__text p{
    font-family:'Geist',Arial,sans-serif;font-weight:400;
    font-size:19px;line-height:1.62;color:var(--ab-gray);margin:0 0 20px;
}
.about-intro__text p:last-child{margin-bottom:0;}
.about-intro__text b{color:var(--ab-black);font-weight:500;}

/* ---------- Скачать презентацию ---------- */
.about-dl{margin-top:34px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.about-dl__btn{
    display:inline-flex;align-items:center;gap:12px;
    background:var(--ab-red);color:var(--ab-white);text-decoration:none;
    font-family:'Geist',Arial,sans-serif;font-weight:500;font-size:14px;
    letter-spacing:.09em;text-transform:uppercase;padding:16px 32px;
    transition:background .18s;
}
.about-dl__btn:hover{background:#A81F27;color:var(--ab-white);}
.about-dl__btn svg{width:19px;height:19px;flex:0 0 auto;}
.about-dl__note{
    font-family:'Geist',Arial,sans-serif;font-weight:400;
    font-size:14.5px;color:var(--ab-gray);
}

.about-mission{margin-top:52px;padding:38px 42px;}
.about-mission__text{
    font-family:'Geist',Arial,sans-serif;font-weight:500;
    font-size:25px;line-height:1.38;color:var(--ab-black);
    margin:0;max-width:52ch;
}

/* ---------- Цифры ---------- */
.about-stats{
    display:grid;grid-template-columns:repeat(5,1fr);
    gap:1px;background:var(--ab-line);
    border:1px solid var(--ab-line);margin-top:56px;
}
.about-stat{background:var(--ab-white);padding:30px 26px;}
.about-sec--soft .about-stat{background:var(--ab-soft);}
.about-stat__num{
    font-family:'Geist',Arial,sans-serif;font-weight:600;
    font-size:44px;line-height:1;color:var(--ab-red);
    margin-bottom:12px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.about-stat__cap{
    font-family:'Geist',Arial,sans-serif;font-weight:400;
    font-size:15px;line-height:1.4;color:var(--ab-gray);
}

/* ---------- Направления ---------- */
.about-dirs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ab-line);border:1px solid var(--ab-line);}
.about-dir{
    background:var(--ab-white);padding:32px 30px;
    display:flex;flex-direction:column;gap:14px;
    text-decoration:none;transition:background .18s;
}
.about-dir:hover{background:#FAFAFA;}
.about-dir__ic{width:32px;height:32px;color:var(--ab-red);}
.about-dir__name{
    font-family:'Geist',Arial,sans-serif;font-weight:500;
    font-size:19px;line-height:1.25;text-transform:uppercase;
    letter-spacing:.01em;color:var(--ab-black);
}
.about-dir__desc{
    font-family:'Geist',Arial,sans-serif;font-weight:400;
    font-size:15.5px;line-height:1.5;color:var(--ab-gray);margin:0;
}
.about-dir__more{
    font-family:'Geist',Arial,sans-serif;font-weight:500;
    font-size:13px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--ab-red);margin-top:auto;padding-top:8px;
}
.about-dir:hover .about-dir__more{text-decoration:underline;}

/* ---------- Лицензии ---------- */
.about-lic{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
.about-lic__text p{
    font-family:'Geist',Arial,sans-serif;font-weight:400;
    font-size:17.5px;line-height:1.6;color:var(--ab-gray);margin:0 0 20px;
}
.about-lic__list{list-style:none;margin:0 0 30px;padding:0;}
.about-lic__list li{
    display:flex;align-items:flex-start;gap:12px;
    font-family:'Geist',Arial,sans-serif;font-weight:400;
    font-size:16.5px;line-height:1.5;color:var(--ab-gray);margin:0 0 12px;
}
.about-lic__list li:before{
    content:"";flex:0 0 auto;width:7px;height:7px;margin-top:8px;
    background:var(--ab-red);
}
.about-lic__btn{
    display:inline-block;background:var(--ab-red);color:var(--ab-white);text-decoration:none;
    font-family:'Geist',Arial,sans-serif;font-weight:500;font-size:14px;
    letter-spacing:.09em;text-transform:uppercase;padding:16px 34px;transition:background .18s;
}
.about-lic__btn:hover{background:#A81F27;color:var(--ab-white);}
.about-lic__img{padding:22px;}
.about-lic__img img{width:100%;height:auto;display:block;}

/* ---------- Принципы ---------- */
.about-principles{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 60px;}
.about-principle{display:flex;gap:20px;align-items:flex-start;}
.about-principle__ic{
    flex:0 0 auto;width:46px;height:46px;
    background:var(--ab-white);border:1px solid var(--ab-line);
    display:flex;align-items:center;justify-content:center;
}
.about-principle__ic svg{width:22px;height:22px;color:var(--ab-red);display:block;}
.about-principle h3{
    font-family:'Geist',Arial,sans-serif;font-weight:500;
    font-size:19px;line-height:1.3;text-transform:uppercase;letter-spacing:.01em;
    color:var(--ab-black);margin:0 0 10px;
}
.about-principle p{
    font-family:'Geist',Arial,sans-serif;font-weight:400;
    font-size:16px;line-height:1.55;color:var(--ab-gray);margin:0;
}

/* ---------- Руководство ---------- */
/* grid-auto-rows:1fr — все карточки одной высоты, иначе фото в строках
   кадрируются по-разному и масштаб голов разъезжается */
.about-leaders{display:grid;grid-template-columns:repeat(2,1fr);gap:34px;grid-auto-rows:1fr;}
/* фото — колонка во всю высоту карточки, текст рядом; пустого места не остаётся */
.about-leader{padding:0;display:flex;align-items:stretch;}
.about-leader__photo{flex:0 0 40%;align-self:stretch;}
.about-leader__photo img{
    width:100%;height:100%;object-fit:cover;object-position:center top;
    display:block;filter:grayscale(1);
}
.about-leader__body{
    flex:1 1 auto;min-width:0;padding:32px 34px;
    display:flex;flex-direction:column;justify-content:center;
}
.about-leader__name{
    font-family:'Geist',Arial,sans-serif;font-weight:600;
    font-size:21px;line-height:1.22;color:var(--ab-black);margin:0 0 9px;
}
.about-leader__role{
    font-family:'Geist',Arial,sans-serif;font-weight:500;
    font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--ab-red);line-height:1.45;
}
.about-leader__desc{
    font-family:'Geist',Arial,sans-serif;font-weight:400;
    font-size:16.5px;line-height:1.6;color:var(--ab-gray);margin:0 0 24px;
}
.about-leader__label{
    font-family:'Geist',Arial,sans-serif;font-weight:500;
    font-size:12px;letter-spacing:.11em;text-transform:uppercase;
    color:var(--ab-black);margin:0 0 15px;
}
.about-leader ul{list-style:none;margin:0;padding:0;}
.about-leader ul li{
    display:flex;align-items:flex-start;gap:12px;
    font-family:'Geist',Arial,sans-serif;font-weight:400;
    font-size:15.5px;line-height:1.5;color:var(--ab-gray);margin:0 0 11px;
}
.about-leader ul li:last-child{margin-bottom:0;}
.about-leader ul li:before{
    content:"";flex:0 0 auto;width:6px;height:6px;margin-top:8px;background:var(--ab-red);
}

/* ---------- Руководители проектов ---------- */
.about-pm{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
.about-pm__item{background:var(--ab-white);border:1px solid var(--ab-line);}
.about-pm__ph{display:block;line-height:0;}
.about-pm__item img{
    width:100%;height:auto;aspect-ratio:3/3.5;
    object-fit:cover;object-position:center top;display:block;filter:grayscale(1);
}
.about-pm__body{padding:22px 24px 26px;}
.about-pm__name{
    font-family:'Geist',Arial,sans-serif;font-weight:600;
    font-size:18px;line-height:1.28;color:var(--ab-black);display:block;margin-bottom:6px;
}
.about-pm__role{
    font-family:'Geist',Arial,sans-serif;font-weight:500;
    font-size:12px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--ab-red);display:block;
}

/* ---------- Адаптив ---------- */
@media (max-width:1200px){
    .about-stats{grid-template-columns:repeat(3,1fr);}
    .about-pm{grid-template-columns:repeat(2,1fr);}
    .about-sec__head h2{font-size:38px;}
    /* В две колонки карточка тут становится слишком узкой: текст растягивает её
       по высоте, и фото при растягивании обрезается в узкую полосу.
       Поэтому ниже 1200 — одна колонка, фото остаётся сбоку, но уже не
       растягивается, а держит собственную пропорцию (0,69 — как у исходников,
       то есть кадрирования нет вовсе) и ограничено по ширине, чтобы не
       превысить разрешение оригиналов. */
    .about-leaders{grid-template-columns:1fr;}
    .about-leader__photo{flex:0 0 34%;max-width:340px;align-self:flex-start;}
    .about-leader__photo img{width:100%;height:auto;aspect-ratio:.69;}
    .about-leader__body{padding:26px 30px 30px;}
}
@media (max-width:992px){
    .about-sec{padding:56px 0;}
    .about-sec__head h2{font-size:32px;max-width:none;}
    .about-dirs{grid-template-columns:repeat(2,1fr);}
    .about-lic{grid-template-columns:1fr;gap:38px;}
    .about-principles{grid-template-columns:1fr;gap:30px;}
    .about-stat__num{font-size:36px;}
    .about-mission__text{font-size:21px;}
    .about-intro__text p{font-size:17.5px;}
}
@media (max-width:768px){
    .about-stats{grid-template-columns:repeat(2,1fr);}
    .about-dirs{grid-template-columns:1fr;}
    /* на телефоне фото уходит наверх во всю ширину карточки */
    .about-leader{flex-direction:column;}
    .about-leader__photo{flex:0 0 auto;max-width:none;align-self:stretch;}
    .about-leader__photo img{width:100%;height:auto;aspect-ratio:5/4;}
    .about-leader__body{padding:24px 26px 28px;}
    .about-mission{padding:28px 26px;}
    /* на узких экранах у контейнера маленькие поля — уменьшаем вынос линий,
       иначе засечки срезаются краем экрана */
    .ab-frame:before{inset:-8px;
        background-size:100% 1px,100% 1px,1px 100%,1px 100%,10px 10px,10px 10px,10px 10px,10px 10px;
        background-position:0 8px, 0 calc(100% - 8px), 8px 0, calc(100% - 8px) 0,
                            3px 3px, calc(100% - 3px) 3px, 3px calc(100% - 3px), calc(100% - 3px) calc(100% - 3px);}
    .ab-frame:after{width:34px;height:34px;border-width:10px;}
    .ab-corner:after{width:30px;height:30px;border-width:9px;}
}
@media (max-width:576px){
    .about-sec__head h2{font-size:26px;}
    .about-stats{grid-template-columns:1fr;}
    .about-pm{grid-template-columns:1fr;gap:28px;}
    .about-pm__item img{max-width:320px;margin:0 auto;}
    .about-leader__body{padding:22px 22px 26px;}
    .about-lic__btn{width:100%;text-align:center;}
    .about-lic__img{padding:16px;}
    .about-dl__btn{width:100%;justify-content:center;}
}