/* About company chapters: one editorial grid, Basel 400 only, theme tokens only, no element shadows.
   Scale does the work: a full-bleed name, a hairline that draws itself, a ledger of real figures. */
.company-chapters{padding-block:clamp(72px,8vw,128px) 0;scroll-margin-top:112px;--cs-gap:clamp(16px,2vw,32px);}
.company-chapters h2,.company-chapters h3,.company-chapters h4{font-weight:400}
.company-chapters .company-intro{display:grid;grid-template-columns:1.3fr .7fr;gap:7vw;align-items:end;padding:0 0 clamp(64px,8vw,128px)}
.company-chapters .company-intro h2{font-size:clamp(46px,6.4vw,100px);line-height:.98;letter-spacing:-.06em}
.company-chapters .company-intro p{font-size:var(--t-lead);line-height:1.3;max-width:23em;padding-bottom:4px}

.company-story{position:relative;padding:0 0 clamp(72px,9vw,144px)}
.company-story+.company-story{padding-top:clamp(24px,4vw,64px)}

/* masked lines */
.cs-line{display:block;overflow:clip;padding:.02em .06em .1em 0;margin-bottom:-.1em}
.cs-line>span{display:block}

/* head: full-bleed name, self-drawing hairline, brief on a 12-column grid */
.cs-name{margin:0;font-size:clamp(62px,13.6vw,250px);line-height:.84;letter-spacing:-.075em;color:var(--ink);overflow-wrap:normal}
.cs-name .cs-muted{color:var(--muted)}
.cs-rule{display:none} /* 2026-10-09: the self-drawing hairline under the company name is off (owner rule: no decorative hairlines); the name's masked line reveal carries the beat */
.cs-brief{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cs-gap);row-gap:24px;padding-top:clamp(24px,2.2vw,32px)}
.cs-lead{grid-column:1/span 6;margin:0;font-size:clamp(28px,3.3vw,56px);line-height:1;letter-spacing:-.045em;color:var(--ink)}
.cs-about{grid-column:7/span 3;margin:0;font-size:var(--t-body);line-height:1.5;color:var(--muted);max-width:24em}
.cs-fields{grid-column:10/span 3;margin:0;font-size:var(--t-body);line-height:1.5;color:var(--ink)}

/* ledger: real figures only, hairline rows, numbers at display scale */
.cs-ledger{margin:clamp(56px,7vw,120px) 0 0;padding:0;border-bottom:1px solid var(--line)}
.cs-ledger>div{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cs-gap);align-items:end;padding:clamp(16px,1.6vw,24px) 0 clamp(16px,1.8vw,32px);border-top:1px solid var(--line);transition:background-color 600ms var(--ease)}
.cs-ledger dt{grid-column:1/span 9;margin:0;font-size:clamp(56px,10.4vw,188px);line-height:.86;letter-spacing:-.07em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.cs-ledger dt .cs-unit{font-size:.26em;letter-spacing:-.01em;vertical-align:.18em;margin-right:.06em;color:var(--muted)}
.cs-ledger dd{grid-column:10/span 3;margin:0;padding-bottom:.4em;font-size:var(--t-body);line-height:1.45;color:var(--muted);max-width:22em;transition:color 400ms var(--ease)}
.cs-ledger>div:hover dd{color:var(--ink)}

/* work: product frame + contribution and an index of cases */
.cs-work{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cs-gap);row-gap:32px;align-items:start;margin-top:clamp(56px,7vw,120px)}
.cs-product{grid-column:1/span 7;display:block;min-width:0;color:inherit}
.company-story-bank .cs-product{grid-column:6/span 7;grid-row:1}
.company-story-bank .cs-contribution{grid-column:1/span 4;grid-row:1}
.cs-product figure{margin:0}
.cs-frame{display:block;overflow:hidden;border-radius:18px;background:color-mix(in srgb,var(--surface,#eef1f7) 70%,transparent);outline:1px solid color-mix(in srgb,var(--ink) 7%,transparent);outline-offset:-1px}
.cs-frame img{display:block;width:100%;height:auto;aspect-ratio:1.4;object-fit:contain;transition:transform 1400ms var(--ease)}
.cs-product:hover .cs-frame img{transform:scale(1.025)}
.cs-product figcaption{margin-top:12px;font-size:var(--t-small);line-height:1.5;color:var(--muted);transition:color 300ms var(--ease)}
.cs-product:hover figcaption{color:var(--ink)}
.cs-product:focus-visible{outline:2px solid var(--ink);outline-offset:8px;border-radius:20px}
.cs-contribution{grid-column:9/span 4;min-width:0;display:flex;flex-direction:column;align-self:stretch}
.cs-contribution h4{margin:0 0 16px;font-family:var(--t-text);font-size:var(--t-lead);line-height:1.3;letter-spacing:0}
.cs-role{margin:0 0 16px;font-size:var(--t-body);line-height:1.4;color:var(--ink)}
.cs-text{margin:0;font-size:var(--t-body);line-height:1.5;color:var(--muted);max-width:29em}
.cs-cases{display:flex;flex-direction:column;margin-top:auto;padding-top:clamp(32px,4vw,64px);border-bottom:1px solid var(--line)}
.cs-cases a{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:8px 0;border-top:1px solid var(--line);font-size:var(--t-lead);letter-spacing:0;color:var(--ink);text-decoration:none;overflow:hidden}
.cs-cases a span{transition:transform 600ms var(--ease)}
.cs-cases a .ui-arrow{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform 600ms var(--ease),opacity 300ms}
.cs-cases a::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:100% 50%;transition:transform 700ms var(--ease)}
.cs-cases a:hover::before,.cs-cases a:focus-visible::before{transform:scaleX(1);transform-origin:0 50%}
.cs-cases a:hover span,.cs-cases a:focus-visible span{transform:translateX(12px)}
.cs-cases a:hover .ui-arrow,.cs-cases a:focus-visible .ui-arrow{transform:translate(3px,-3px) rotate(0deg)}
.cs-cases:hover a:not(:hover) span{opacity:.45;transition:opacity 300ms,transform 600ms var(--ease)}

.company-chapters .company-evidence{margin-top:32px;display:flex;align-items:baseline;justify-content:space-between;gap:8px 32px;flex-wrap:wrap}
.company-chapters .company-evidence>p{font-size:13px;line-height:1.5;color:var(--muted)}
.company-chapters .company-evidence>div{display:flex;gap:8px 32px;flex-wrap:wrap}
.company-chapters .company-evidence a{font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;min-height:44px;display:inline-flex;align-items:center}
.company-chapters .company-evidence a:hover{color:var(--ink)}

/* motion: armed by company-stories.js only, so without script everything is simply visible */
.company-story[data-armed] .cs-line>span{transform:translateY(108%);transition:transform 1200ms var(--ease)}
.company-story[data-armed] .cs-rule{transform:scaleX(0);transition:transform 1600ms cubic-bezier(.7,0,.2,1) 120ms}
.company-story[data-armed] .cs-about,.company-story[data-armed] .cs-fields,.company-story[data-armed] .cs-ledger dd{opacity:0;transform:translateY(14px);transition:opacity 900ms var(--ease),transform 1100ms var(--ease),color 400ms var(--ease)}
.company-story[data-armed] .cs-ledger>div{border-top-color:transparent;transition:border-color 900ms var(--ease)}
.company-story[data-armed] .cs-frame{clip-path:inset(22% 0 0 0 round 18px);transition:clip-path 1500ms cubic-bezier(.7,0,.2,1)}
.company-story[data-armed] .cs-frame img{transform:scale(1.12);transition:transform 1800ms var(--ease)}
.company-story[data-armed] .cs-contribution>*{opacity:0;transform:translateY(18px);transition:opacity 900ms var(--ease),transform 1100ms var(--ease)}
.company-story [data-in] .cs-line>span,.company-story .cs-head[data-in] .cs-line>span,.company-story .cs-ledger>div[data-in] .cs-line>span{transform:none}
.company-story .cs-head[data-in] .cs-rule{transform:none}
.company-story .cs-head[data-in] .cs-about,.company-story .cs-head[data-in] .cs-fields,.company-story .cs-ledger>div[data-in] dd{opacity:1;transform:none}
.company-story .cs-ledger>div[data-in]{border-top-color:var(--line)}
.company-story .cs-work[data-in] .cs-frame{clip-path:inset(0 0 0 0 round 18px)}
.company-story .cs-work[data-in] .cs-frame img{transform:none}
.company-story .cs-work[data-in] .cs-contribution>*{opacity:1;transform:none}
.company-story .cs-head .cs-line:nth-child(2)>span{transition-delay:90ms}
.company-story .cs-lead .cs-line>span{transition-delay:260ms}
.company-story .cs-lead .cs-line:nth-child(2)>span{transition-delay:340ms}
.company-story .cs-head .cs-about{transition-delay:420ms}
.company-story .cs-head .cs-fields{transition-delay:500ms}
.company-story .cs-ledger dd{transition-delay:180ms}
.company-story .cs-contribution>:nth-child(2){transition-delay:80ms}
.company-story .cs-contribution>:nth-child(3){transition-delay:160ms}
.company-story .cs-contribution>:nth-child(4){transition-delay:240ms}
.company-story .cs-work[data-in] .cs-product:hover .cs-frame img{transform:scale(1.025);transition-duration:1400ms}
@media (prefers-reduced-motion:reduce){.company-story *{transition:none!important}}

@media(max-width:1100px){
  .cs-about{grid-column:7/span 6}
  .cs-fields{grid-column:7/span 6}
  .cs-ledger dt{grid-column:1/span 7}
  .cs-ledger dd{grid-column:8/span 5}
  .cs-product,.company-story-bank .cs-product{grid-column:1/span 7}
  .company-story-bank .cs-product{grid-column:6/span 7}
  .cs-contribution{grid-column:8/span 5}
  .company-story-bank .cs-contribution{grid-column:1/span 5}
}
@media(max-width:820px){
  .company-chapters .company-intro{grid-template-columns:1fr;gap:24px;padding:0 0 64px}
  .company-chapters .company-intro h2{font-size:clamp(46px,8.5vw,68px)}
  .company-chapters .company-intro p{font-size:var(--t-lead)}
  .cs-name{font-size:clamp(52px,15.5vw,120px)}
  .cs-brief{grid-template-columns:1fr;row-gap:16px}
  .cs-lead,.cs-about,.cs-fields{grid-column:1/-1}
  .cs-lead{font-size:clamp(28px,7.4vw,40px)}
  .cs-ledger>div{grid-template-columns:1fr;row-gap:8px}
  .cs-ledger dt,.cs-ledger dd{grid-column:1/-1}
  .cs-ledger dt{font-size:clamp(54px,18vw,110px)}
  .cs-ledger dd{padding-bottom:0}
  .cs-work{grid-template-columns:1fr;row-gap:32px}
  .cs-product,.company-story-bank .cs-product,.cs-contribution,.company-story-bank .cs-contribution{grid-column:1/-1;grid-row:auto}
  .company-story-bank .cs-product{grid-row:1}
  .cs-frame{border-radius:14px}
  .cs-cases{padding-top:32px}
}

/* Company and agency compositions share one clear image-to-detail rhythm. */
body[data-page="about"] .agency-projects img{aspect-ratio:1.35;object-fit:contain;object-position:center;background:var(--surface);border-radius:18px}
body[data-page="about"] .agency-projects h3 .ui-arrow{width:24px;height:24px;flex:none;opacity:1}
body[data-page="about"] .career-row .career-logo{object-fit:contain}
@media(max-width:820px){
  body[data-page="about"] .agency-projects img{aspect-ratio:1.48}
}

/* 20 Oct 2026 (owner: «где DFINITY Foundation, там слабо, смотри референсы»). The figures were built as a ledger of
   display-scale numbers with the caption at the row's far end; at the type system's sizes the rows read as a list whose
   captions were stranded across the page. They become one band of key figures, the annual report's device (after the
   information page of son-daven, Awwwards SOTD, in the owner's library): three columns, the number at L, its caption
   right under it, no rules. The chapter reads name, line, facts, work. */
@media (min-width:821px){
 body[data-page="about"] .company-story .cs-ledger:not(#_u){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--cs-gap);row-gap:40px;margin:clamp(64px,7vw,112px) 0 0;padding:0;border:0}
 body[data-page="about"] .company-story .cs-ledger:not(#_u)>div{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:16px;padding:0;border:0;background:none}
 body[data-page="about"] .company-story .cs-ledger:not(#_u) dt{white-space:nowrap}
 body[data-page="about"] .company-story .cs-ledger:not(#_u) dd{grid-column:auto;padding:0;max-width:19em}
 /* the brief stands on the same three columns: the line over the first two, the note and the fields in the third, so
    the right column starts where the third figure does */
 body[data-page="about"] .company-story .cs-brief:not(#_u){grid-template-columns:repeat(3,minmax(0,1fr));row-gap:16px}
 body[data-page="about"] .company-story .cs-lead:not(#_u){grid-column:1/span 2;grid-row:1/span 2}
 body[data-page="about"] .company-story :is(.cs-about,.cs-fields):not(#_u){grid-column:3;max-width:24em}
 body[data-page="about"] .company-story .cs-about:not(#_u){grid-row:1}
 body[data-page="about"] .company-story .cs-fields:not(#_u){grid-row:2}
}

/* 20 Oct 2026 (owner: «во внутренних собрать тоже сюжеты, чтобы была вложена идея»). The industries of the home page
   come back as the companies they were made in: the Web3 chain beside DFINITY, the Fintech coins beside PrivatBank,
   printed in the page's ink (js/one-bit.js: by day its edges in ink and its body in the light greys, by night its fine
   light, as on the home page). The form stands in
   the empty field right of the name, never under copy; js/company-stories.js lets it drift against the type and turn a
   little toward the pointer. Its reveal is an opacity ramp, which the print turns into dots arriving. */
.company-story .cs-head{position:relative}
.cs-form{box-sizing:border-box;padding:3%;pointer-events:none;user-select:none}
.cs-form-body{display:block}
.cs-form img{display:block;width:100%;height:auto}
html.one-bit .company-story .cs-form{filter:url(#one-bit-alpha-tone-ink)}   /* by day the edges in ink and the body in the light greys */
html.one-bit[data-theme=dark] .company-story .cs-form{filter:url(#one-bit-alpha-fine)}
html.one-bit[data-colour=on] .company-story .cs-form{filter:url(#one-bit-alpha-fine-ink-c)}
html.one-bit[data-colour=on][data-theme=dark] .company-story .cs-form{filter:url(#one-bit-alpha-fine-c)}
.company-story[data-armed] .cs-form img{opacity:0;transform:translateY(6%);transition:opacity 1600ms var(--ease) 380ms,transform 1800ms var(--ease) 380ms}
.company-story .cs-head[data-in] .cs-form img{opacity:1;transform:none}
/* the chain hangs in the corner over the note; the coins stand beside the one-line name, as a mark beside a word, and
   reach up into the air between the chapters (clear of the sources at the right). Clearances at 1440: the chain ends
   about 25 px over the note beside the line, the coins about 25 px; the drift stays under them while the note is on
   screen. Below 1101 px the name runs wider, so the coins go to the corner */
@media (min-width:821px){
 .cs-form{position:absolute;right:0;will-change:transform}
 .cs-form-web3{top:-.6vw;width:37vw}
 .cs-form-fintech{top:-7.5vw;right:22vw;width:19vw}
}
@media (min-width:821px) and (max-width:1100px){.cs-form-web3{width:32vw}.cs-form-fintech{top:-8vw;right:0;width:18vw}}
@media (max-width:820px){
 .cs-form{position:relative;margin:clamp(32px,8vw,56px) -2vw 0 auto}
 .cs-form-web3{width:78vw}
 .cs-form-fintech{width:48vw}
}

/* 21 Oct 2026 (the owner: «чтоб была логика, красота»; work/_claude-qa/review-20261021c/scenes-about-cv.md). The third
   industry: the home page's Platforms tray beside «Made together. With Fourmeta.», so the triad comes back whole, each
   form with the company it was made in. The same print and the same arrival as the chain and the coins (js/company-
   stories.js arms it). It stands in the brand's row, right, over the line beside the title and clear of it: by the
   numbers at 1440 (the brand row 45 + 26 px, the section's 90 px top air) the tray's visible body ends about 48 px over
   the line and rises about 60 px into the air above the heading. Phones: in flow after the line, still */
.agency-heading{position:relative}
html.one-bit .agency-heading .cs-form{filter:url(#one-bit-alpha-tone-ink)}
html.one-bit[data-theme=dark] .agency-heading .cs-form{filter:url(#one-bit-alpha-fine)}
html.one-bit[data-colour=on] .agency-heading .cs-form{filter:url(#one-bit-alpha-fine-ink-c)}
html.one-bit[data-colour=on][data-theme=dark] .agency-heading .cs-form{filter:url(#one-bit-alpha-fine-c)}
.agency-publications[data-armed] .agency-heading .cs-form img{opacity:0;transform:translateY(6%);transition:opacity 1600ms cubic-bezier(.16,1,.3,1) 380ms,transform 1800ms cubic-bezier(.16,1,.3,1) 380ms}
.agency-publications .agency-heading[data-in] .cs-form img{opacity:1;transform:none}
@media (min-width:821px){.agency-heading .cs-form-platforms{top:-6vw;width:14vw}}
@media (max-width:820px){.agency-heading .cs-form-platforms{width:56vw;margin-top:8px}}
@media (prefers-reduced-motion:reduce){.agency-heading .cs-form img{transition:none!important}}

/* 21 Oct 2026, the type pass (the owner: «проверь все размеры, отступы»): the sizes these rules lost to older layers
   take their roles (css/type-2026.css), the gaps the 8 px steps. CHF is the figure's unit at the lead size (it was .26 of
   the figure, 25 px; 13 is still its floor on a phone); the case links in one-bit have no plate left, so they lose its
   22 px inset and sit on the column */
html body[data-page=about] .cs-ledger dt .cs-unit:not(#_s):not(#_t){font-family:var(--t-text)!important;font-size:max(13px,var(--t-lead))!important;letter-spacing:0!important}
html body[data-page=about] .company-story .cs-cases:not(#_s){gap:8px}
html.one-bit body[data-page=about] .company-story .cs-cases>a:not(#_s):not(#_t){padding:8px 0!important}