/* «О фабрике» (/about/, F1600) — дополняет site.css: те же токены, Onest, кнопки, полосы «как на подвязах» (rib) и вязаная кромка (edge).
   Анимация — только transform/opacity; ничего не скрыто без JS; при prefers-reduced-motion — без движения, содержание то же. */

/* общий модуль появления reveal.js (F1703, S17): классы состояния; после слияния S17 правила — в site.css, здесь убрать */
.ks-rv{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.ks-rv.ks-rv-in{opacity:1;transform:none}

.ab section{padding:88px 0}
/* надзаголовок блока — как на первом экране (в .head у site.css он серый и крупнее) */
.ab .head .kicker{margin-top:0;font-size:14px;color:var(--teal-t)}
.ab-title{padding-top:16px}
.ab-title h1{font-size:clamp(30px,3.6vw,46px)}
.ab-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.ab-cta .acts-pair{display:contents}

/* ── первый экран ── */
.ab .ab-hero{padding:24px 0 72px}
.ab-hero-g{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.ab-hero h1{position:relative;z-index:0;font-size:clamp(34px,4vw,54px);letter-spacing:-.03em;line-height:1.08}
.ab-hero h1 em{font-style:normal;position:relative;white-space:nowrap}
.ab-hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.2em;z-index:-1;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--teal) 0 3px,var(--teal-l) 3px 5px);transform-origin:left;animation:ab-draw .9s cubic-bezier(.2,.7,.2,1) .5s both}
.ab-hero .lead{margin-top:22px;font-size:20px;color:var(--ink2);max-width:560px}
.ab-hero-ph{margin:0;position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/4;width:min(100%,460px);justify-self:end;background:var(--bg);box-shadow:0 30px 60px -30px rgba(26,26,26,.35)}
.ab-hero-ph img{width:100%;height:100%;object-fit:cover;animation:ab-zoom 1.6s cubic-bezier(.2,.7,.2,1) both}
.ab-facts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:56px 0 0;border:1px solid var(--line);border-radius:var(--r)}
.ab-facts div{padding:22px 28px}
.ab-facts div+div{border-left:1px solid var(--line)}
.ab-facts dt{font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.ab-facts dd{margin:4px 0 0;color:var(--mut);font-size:15px}
@keyframes ab-zoom{from{transform:scale(1.08)}to{transform:none}}
@keyframes ab-draw{from{transform:scaleX(0)}to{transform:none}}

/* ── миссия ── */
.ab .ab-mission{background:var(--bg)}
.ab-mission.edge{--edge:var(--bg)}
.ab-mission-g{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.ab-mission h2{font-size:clamp(30px,3.4vw,44px)}
.ab-big{margin-top:20px;font-size:21px;line-height:1.5;color:var(--ink2)}
.ab-offer{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ab-offer li{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 24px 24px;transition:border-color .2s,box-shadow .2s}
.ab-offer li::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(to bottom,var(--ink) 0 2px,#fff 2px 3px,var(--teal) 3px);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.ab-offer li:hover{border-color:var(--line2);box-shadow:0 8px 24px rgba(26,26,26,.06)}
.ab-offer li:hover::before{transform:none}
.ab-num{display:block;font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--teal-t);margin-bottom:14px}
.ab-offer h3{font-size:19px}
.ab-offer p{margin-top:8px;color:var(--mut);font-size:15px}

/* ── история: линия растёт с прокруткой — CSS animation-timeline, без JS; где не поддерживается — линия сразу целиком ── */
.ab-tl-w{position:relative;max-width:1000px;margin:0 auto}
.ab-tl-line{position:absolute;left:50%;top:8px;bottom:8px;width:4px;margin-left:-2px;border-radius:2px;background:var(--teal);transform-origin:top}   /* без вязаной ленты (F3007) */
@supports (animation-timeline:view()){
  .ab-tl-line{animation:ab-grow linear both;animation-timeline:view();animation-range:entry 15% cover 60%}
}
@keyframes ab-grow{from{transform:scaleY(0)}to{transform:none}}
.ab-tl{list-style:none;margin:0;padding:0;display:grid;gap:32px}
.ab-tl-i{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:80px;align-items:center}
.ab-tl-i::before{content:"";position:absolute;left:50%;top:50%;z-index:1;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;
  background:#fff;border:5px solid var(--teal);box-shadow:0 0 0 5px #fff;transition:transform .5s cubic-bezier(.3,1.5,.5,1) .15s}
.ab-tl-date{font-size:clamp(40px,5vw,68px);font-weight:700;letter-spacing:-.04em;line-height:1;text-align:right;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.ab-tl-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px;transition:transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .2s}
.ab-tl-card:hover{box-shadow:0 10px 28px rgba(26,26,26,.07)}
.ab-tl-card h3{font-size:20px}
.ab-tl-card p{margin-top:6px;color:var(--ink2)}
.ab-tl-card img{margin-top:14px;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:10px}   /* 3:4 (F1905) */
.ab-tl-card .more,.ab-stages .more{margin-top:12px;font-size:15px}
.ab-tl-i:nth-child(even) .ab-tl-date{order:2;text-align:left}
.ab-tl-i:nth-child(even) .ab-tl-card{order:1}
/* появление этапа (начальное состояние — только до ks-rv-in): точка «вспыхивает» на линии, карточка выезжает от линии, год — снизу */
.ab-tl-i.ks-rv{transform:none}
.ab-tl-i.ks-rv:not(.ks-rv-in)::before{transform:scale(0)}
.ab-tl-i.ks-rv:not(.ks-rv-in) .ab-tl-card{transform:translateX(-36px)}
.ab-tl-i.ks-rv:not(.ks-rv-in):nth-child(even) .ab-tl-card{transform:translateX(36px)}
.ab-tl-i.ks-rv:not(.ks-rv-in) .ab-tl-date{transform:translateY(24px)}
/* без дат — этапы по порядку */
.ab-stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;counter-reset:ab}
.ab-stages li{counter-increment:ab;border:1px solid var(--line);border-radius:14px;padding:24px}
.ab-stages li::before{content:counter(ab);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:2px solid var(--teal);color:var(--teal-d);font-weight:600;margin-bottom:16px}
.ab-stages .ab-tl-date{font-size:15px;font-weight:600;letter-spacing:0;text-align:left;color:var(--teal-t);margin-bottom:4px}
.ab-stages h3{font-size:19px}
.ab-stages p{margin-top:6px;color:var(--ink2);font-size:15px}
.ab-stages img{margin-top:14px;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:10px}

/* ── производство изнутри: тёмный блок, крупные фото 3:4, подпись объясняет кадр ── */
.ab .ab-inside{background:var(--ink);color:#fff}
.ab-inside.edge{--edge:var(--ink)}
.ab-inside .kicker,.ab-inside .head .kicker{color:var(--teal)}
.ab-inside .head p:not(.kicker){color:var(--on-ink-mut)}
.ab-inside .more{color:var(--teal)}
.ab-inside .more:hover{color:#fff}
.ab-inside :focus-visible{outline-color:var(--teal)}
.ab-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap;margin-bottom:40px}
.ab-head-row .head{margin-bottom:0}
.ab-gal{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.ab-gal figure{margin:0}
.ab-ph{position:relative;display:block;width:100%;padding:0;border:0;border-radius:14px;overflow:hidden;aspect-ratio:3/4;background:var(--photo-bg2);cursor:zoom-in}
.ab-ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.ab-ph:hover img{transform:scale(1.05)}
.ab-gal li.ks-rv:not(.ks-rv-in) .ab-ph img{transform:scale(1.15)}
.ab-zoom{position:absolute;right:12px;bottom:12px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--ink);display:grid;place-items:center;
  opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s}
.ab-zoom svg{width:20px;height:20px}
.ab-ph:hover .ab-zoom,.ab-ph:focus-visible .ab-zoom,.ab-doc:hover .ab-zoom,.ab-doc:focus-visible .ab-zoom{opacity:1;transform:none}
.ab-gal figcaption{margin-top:14px;display:grid;gap:4px}
.ab-gal figcaption .tag{justify-self:start;margin-bottom:4px}
.ab-gal figcaption b{font-weight:600;font-size:17px;line-height:1.3}
.ab-gal figcaption span:not(.tag){color:var(--on-ink-mut);font-size:15px}

/* ── команда ── */
.ab-people{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.ab-people img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:14px;background:var(--bg)}
.ab-people h3{margin-top:14px;font-size:19px}
.ab-role{color:var(--teal-t);font-weight:500;font-size:15px;margin-top:2px}
.ab-people p:not(.ab-role){color:var(--mut);font-size:15px;margin-top:6px}

/* ── награды: документ «лежит» чуть повёрнутым, по нажатию — крупно ── */
.ab-aw{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ab-aw li{display:flex}
.ab-aw article{flex:1;display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px}
.ab-doc{position:relative;display:block;padding:0;border:0;border-radius:8px;overflow:hidden;aspect-ratio:3/4;background:var(--bg);
  box-shadow:0 14px 30px -16px rgba(26,26,26,.5);transform:rotate(-2.5deg);transition:transform .35s cubic-bezier(.2,.7,.2,1);cursor:zoom-in}
.ab-doc:hover,.ab-doc:focus-visible{transform:rotate(0) scale(1.03)}
.ab-doc img{width:100%;height:100%;object-fit:cover}
.ab-doc-n{display:grid;place-items:center;background:var(--teal-bg);color:var(--teal-d);box-shadow:none;transform:none;cursor:default}
.ab-doc-n svg{width:56px;height:56px}
.ab-aw li.ks-rv:not(.ks-rv-in) .ab-doc{transform:rotate(-8deg) translateY(12px)}
.ab-date{display:inline-block;font-size:13px;font-weight:600;color:var(--teal-t);background:var(--teal-bg);border-radius:6px;padding:3px 8px;margin-bottom:10px}
.ab-aw h3{font-size:19px;line-height:1.3}
.ab-aw-t p:not(.ab-date){margin-top:8px;color:var(--ink2);font-size:15px}
.ab-aw .more{margin-top:12px;font-size:15px}

/* ── отзывы ── */
.ab .ab-revs{background:var(--bg)}
.ab-revs.edge{--edge:var(--bg)}
.ab-rev-l{list-style:none;margin:0;padding:0;columns:2;column-gap:20px}
.ab-rev-l li{break-inside:avoid;margin-bottom:20px}
.ab-rev{margin:0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 28px}
.ab-rev::before{content:"\201C";display:block;height:34px;font:700 64px/1 Georgia,serif;color:var(--teal)}
.ab-rev blockquote{margin:0}
.ab-rev blockquote p{font-size:17px;line-height:1.6;color:var(--ink2)}
.ab-rev img{margin-top:14px;width:120px;height:auto;border-radius:8px}
.ab-rev figcaption{margin-top:18px;display:grid;gap:2px}
.ab-rev b{font-weight:600}
.ab-rev figcaption span,.ab-rev small{color:var(--mut);font-size:15px}
.ab-rev small{font-size:13px}

/* ── клиенты и примеры работ: задача → решение → результат ── */
.ab-case-l{list-style:none;margin:0;padding:0;display:grid;gap:24px}
.ab-case{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;align-items:start;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.ab-case:not(:has(.ab-case-ph)){grid-template-columns:minmax(0,1fr)}
.ab-case-ph{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.ab-case-t{padding:28px 28px 28px 0}
.ab-case:not(:has(.ab-case-ph)) .ab-case-t{padding:28px}
.ab-case-h{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.ab-logo{width:64px;height:auto;border-radius:8px;border:1px solid var(--line);background:#fff}
.ab-case h3{font-size:22px}
.ab-case dl{margin:0;display:grid}
.ab-case dl div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.ab-case dt{color:var(--mut);font-size:15px}
.ab-case dd{margin:0}

/* ── финал ── */
.ab .ab-next{padding:24px 0 96px}
.ab-next-g{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 40px;align-items:center;
  background:var(--ink);color:#fff;border-radius:20px;padding:64px 56px 56px}
.ab-next-g::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:linear-gradient(to bottom,var(--teal) 0 4px,#fff 4px 6px,var(--teal) 6px 10px,#fff 10px 12px)}
.ab-next .kicker{color:var(--teal)}
.ab-next h2{font-size:clamp(28px,3vw,40px)}
.ab-next .lead{margin-top:12px;color:var(--on-ink2);font-size:18px}
.ab-next .ab-cta{margin-top:0;justify-content:flex-end}
.ab-next :focus-visible{outline-color:var(--teal)}

/* ── просмотр крупно ── */
.ab-lb{border:0;padding:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;background:rgba(26,26,26,.94);color:#fff;overflow:hidden}
.ab-lb[open]{display:grid;place-items:center}
.ab-lb::backdrop{background:transparent}
.ab-lb figure{margin:0;display:grid;gap:12px;justify-items:center;max-width:min(92vw,900px);padding:72px 64px 24px}
.ab-lb img{max-width:100%;max-height:calc(100dvh - 170px);width:auto;height:auto;border-radius:8px;background:#fff;animation:ab-pop .35s cubic-bezier(.2,.7,.2,1)}
.ab-lb figcaption{text-align:center;color:var(--on-ink2);font-size:15px;max-width:640px}
.ab-lb .ico{position:absolute;background:#fff;color:var(--ink)}
.ab-lb-x{right:16px;top:16px}
.ab-lb-p,.ab-lb-n{top:50%;margin-top:-23px}
.ab-lb-p{left:16px}
.ab-lb-n{right:16px}
.ab-lb[data-single] .ab-lb-p,.ab-lb[data-single] .ab-lb-n{display:none}
html:has(.ab-lb[open]){overflow:hidden}
@keyframes ab-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

@media (hover:none){.ab-zoom{opacity:1;transform:none}}

@media (max-width:1100px){
  .ab-hero-ph{justify-self:center}   /* F1903: ≤ 1100 px — фото по центру под текстом */
  .ab-hero-g,.ab-mission-g,.ab-next-g{grid-template-columns:minmax(0,1fr);gap:40px}
  .ab-next .ab-cta{justify-content:flex-start}
  .ab-gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-people{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ab-aw{grid-template-columns:minmax(0,1fr)}
  .ab-tl-i{column-gap:56px}
}
@media (max-width:700px){
  .ab section{padding:64px 0}
  .ab .ab-hero{padding:12px 0 56px}
  .ab-hero .lead{font-size:17px;margin-top:16px}
  .ab-cta{margin-top:28px}
  .ab-cta .btn{flex:1 1 100%;white-space:normal;text-align:center}
  .ab-hero-ph{border-radius:12px;width:min(100%,300px);justify-self:center}
  .ab-facts{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);margin-top:32px}
  .ab-facts div{padding:16px 18px;display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:12px;align-items:baseline}
  .ab-facts div+div{border-left:0;border-top:1px solid var(--line)}
  .ab-facts dt{font-size:22px}
  .ab-facts dd{margin:0;font-size:14px}
  .ab-big{font-size:18px}
  .ab-offer{grid-template-columns:minmax(0,1fr);gap:12px}
  .ab-offer li{padding:20px 18px}
  /* хронология: линия слева, карточки справа от неё */
  .ab-tl-line{left:19px;margin-left:-5px;width:10px}
  .ab-tl{gap:20px}
  .ab-tl-i{grid-template-columns:minmax(0,1fr);padding-left:48px;row-gap:8px}
  .ab-tl-i::before{left:19px;top:6px;margin:0 0 0 -11px;width:22px;height:22px;border-width:4px}
  .ab-tl-date,.ab-tl-i:nth-child(even) .ab-tl-date{order:0;text-align:left;font-size:30px}
  .ab-tl-i:nth-child(even) .ab-tl-card{order:1}
  .ab-tl-card{padding:18px}
  .ab-tl-i.ks-rv:not(.ks-rv-in) .ab-tl-card,.ab-tl-i.ks-rv:not(.ks-rv-in):nth-child(even) .ab-tl-card{transform:translateX(24px)}
  /* фото — лентой с прокруткой пальцем, следующее выглядывает справа */
  .ab-gal{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 8px;scroll-padding:0 16px;scrollbar-width:none}
  .ab-gal::-webkit-scrollbar{display:none}
  .ab-gal li{scroll-snap-align:start}
  .ab-head-row{margin-bottom:28px}
  .ab-people{grid-template-columns:1fr 1fr;gap:16px 12px}
  .ab-people h3{font-size:17px}
  .ab-aw article{grid-template-columns:96px minmax(0,1fr);gap:16px;padding:18px}
  .ab-rev-l{columns:1}
  .ab-rev{padding:20px}
  .ab-case,.ab-case:not(:has(.ab-case-ph)){grid-template-columns:minmax(0,1fr);gap:0}
  .ab-case-t,.ab-case:not(:has(.ab-case-ph)) .ab-case-t{padding:20px}
  .ab-case dl div{grid-template-columns:minmax(0,1fr);gap:2px}
  .ab .ab-next{padding:8px 0 64px}
  .ab-next-g{padding:44px 20px 28px;border-radius:16px}
  .ab-lb figure{padding:72px 12px 16px}
  .ab-lb-p,.ab-lb-n{top:auto;bottom:16px;margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  .ab-hero-ph img,.ab-hero h1 em::after,.ab-tl-line,.ab-lb img{animation:none}
  .ab-tl-i::before,.ab-tl-date,.ab-tl-card,.ab-ph img,.ab-doc,.ab-zoom,.ab-offer li::before{transition:none}
}

/* D-006: на сенсорном экране — зоны нажатия не меньше 44 px */
@media (pointer:coarse),(max-width:700px){
  .ab-zoom{width:44px;height:44px}
}

.ab-hero .lead{max-width:640px}   /* D-011: строка подзаголовка ≤ 75 знаков */
.ab-next .lead{max-width:640px}   /* D-011 */