Блок «Команда юристов» для сайта юрфирмы

<section class="vbkyu">
  <div class="vbkyu-wrap">
    <div class="vbkyu-head">
      <h2 class="vbkyu-h2">Юристы фирмы</h2>
      <p class="vbkyu-lead">Реестр специалистов: специализация, стаж и число завершённых дел. Разверните строку — увидите образование и знаковые дела.</p>
    </div>
    <div class="vbkyu-list" id="vbkyu-list"></div>
  </div>
</section>

<style>
.vbkyu, .vbkyu *, .vbkyu *::before, .vbkyu *::after { box-sizing: border-box; }
.vbkyu {
  --acc: #1d3f6e; --ink: #1b2028; --muted: #5d6672; --line: #dfe3e8; --soft: #f4f6f9;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: var(--soft); color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 80px) 20px;
}
.vbkyu-wrap { max-width: 1000px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbkyu-head { max-width: 44em; margin-bottom: clamp(22px, 3vw, 34px); }
.vbkyu-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; font-weight: 600; letter-spacing: -.02em; margin: 0 0 12px; }
.vbkyu-lead { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; }

.vbkyu-list { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.vbkyu-row { border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1); }
.vbkyu-row:last-child { border-bottom: 0; }
.vbkyu-row.is-in { opacity: 1; transform: none; }
.vbkyu-btn { display: grid; grid-template-columns: 44px minmax(0, 1.5fr) minmax(0, 1.1fr) auto auto; align-items: center; gap: 16px;
  width: 100%; border: 0; margin: 0; -webkit-appearance: none; appearance: none; background: none !important; color: var(--ink) !important;
  cursor: pointer; font: inherit; text-align: left; padding: 16px 22px; transition: background .18s ease; }
.vbkyu-btn:hover { background: var(--soft) !important; }
.vbkyu-btn svg.vbkyu-ava { width: 44px; height: 44px; border-radius: 50%; }
.vbkyu-name { font-family: var(--fh); font-size: 16px; font-weight: 600; }
.vbkyu-spec { font-size: 13.5px; color: var(--acc); font-weight: 500; }
.vbkyu-stat { font-size: 13px; color: var(--muted); white-space: nowrap; }
.vbkyu-btn::after { content: ''; width: 12px; height: 12px; border-right: 2px solid var(--acc); border-bottom: 2px solid var(--acc);
  transform: rotate(45deg) translateY(-2px); transition: transform .3s cubic-bezier(.22,1,.36,1); }
.vbkyu-btn[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
.vbkyu-more { max-height: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.22,1,.36,1); background: var(--soft); }
.vbkyu-more > div { padding: 18px 22px 22px 82px; }
.vbkyu-dl { margin: 0; }
.vbkyu-dl dt { font-size: 11.5px; color: #8a939e; margin-bottom: 3px; }
.vbkyu-dl dd { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 52em; }
.vbkyu-dl dd:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .vbkyu-btn { grid-template-columns: 44px minmax(0, 1fr) auto; row-gap: 4px; }
  .vbkyu-spec { grid-column: 2; }
  .vbkyu-stat { display: none; }
  .vbkyu-more > div { padding-left: 22px; }
}
@media (prefers-reduced-motion: reduce) { .vbkyu-row { opacity: 1 !important; transform: none !important; transition: none !important; } }
</style>

<script>
(function () {
  /* ── ЮРИСТЫ: photo — адрес фото, пусто — рисуется заглушка с инициалами ── */
  var LAWYERS = [
    { name: 'Алексей Морозов', spec: 'Банкротство физлиц', years: 14, cases: 186, photo: '', c: '#d5dee9',
      edu: 'УрГЮУ, юриспруденция, 2010. Магистратура по гражданскому праву, 2012.',
      note: 'Ведёт сложные дела с оспариванием сделок. В 2023 году добился списания 41 млн ₽ по делу с четырьмя обособленными спорами.' },
    { name: 'Марина Гладкова', spec: 'Банкротство юрлиц', years: 17, cases: 94, photo: '', c: '#e0dbe6',
      edu: 'МГЮА, юриспруденция, 2007. Аттестат арбитражного управляющего, 2014.',
      note: 'Специализируется на защите руководителей от субсидиарной ответственности. Восемь дел завершены отказом в привлечении.' },
    { name: 'Дмитрий Соловьёв', spec: 'Кредитные споры', years: 11, cases: 240, photo: '', c: '#d7e3dd',
      edu: 'СПбГУ, юриспруденция, 2013.',
      note: 'Снижение неустоек, оспаривание условий договоров, споры с коллекторами. Средний размер снижения требований — 38%.' },
    { name: 'Ольга Никитина', spec: 'Исполнительное производство', years: 9, cases: 312, photo: '', c: '#e6dfd5',
      edu: 'КФУ, юриспруденция, 2015. Повышение квалификации по исполнительному праву, 2021.',
      note: 'Снятие арестов, оспаривание действий приставов, возврат незаконно списанных средств. Работает с делами, где долг уже на исполнении.' },
    { name: 'Роман Ефимов', spec: 'Налоговые споры', years: 13, cases: 78, photo: '', c: '#dae0e8',
      edu: 'ВШЭ, юриспруденция, 2011. Дополнительно — налоговое консультирование, 2016.',
      note: 'Досудебное обжалование решений налоговой и представительство в арбитраже. Профильно ведёт дела ИП и малого бизнеса.' },
    { name: 'Ксения Лаврова', spec: 'Семейные и наследственные дела', years: 8, cases: 205, photo: '', c: '#e8dcdc',
      edu: 'РГУП, юриспруденция, 2016.',
      note: 'Раздел имущества при банкротстве супруга, оспаривание брачных договоров, наследственные споры с кредиторами.' }
  ];

  var roots = document.querySelectorAll('.vbkyu');
  for (var i = 0; i < roots.length; i++) init(roots[i]);

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var list = root.querySelector('#vbkyu-list');

    function avatar(c, ini) {
      return '<svg class="vbkyu-ava" viewBox="0 0 44 44" role="img" aria-label="Портрет юриста" focusable="false">' +
        '<circle cx="22" cy="22" r="22" fill="' + c + '"/>' +
        '<text x="22" y="27" text-anchor="middle" font-family="inherit" font-size="14" font-weight="600" fill="#4a5563">' + ini + '<\/text><\/svg>';
    }
    function word(n) { var m = n % 100, k = n % 10; return m > 10 && m < 20 ? 'лет' : k === 1 ? 'год' : k > 1 && k < 5 ? 'года' : 'лет'; }

    list.innerHTML = LAWYERS.map(function (l, i) {
      var ini = l.name.split(' ').map(function (p) { return p.charAt(0); }).join('');
      var pic = l.photo ? '<img class="vbkyu-ava" src="' + l.photo + '" alt="' + l.name + '">' : avatar(l.c, ini);
      return '<div class="vbkyu-row">' +
        '<button type="button" class="vbkyu-btn" aria-expanded="false">' + pic +
        '<span class="vbkyu-name">' + l.name + '<\/span>' +
        '<span class="vbkyu-spec">' + l.spec + '<\/span>' +
        '<span class="vbkyu-stat">' + l.years + ' ' + word(l.years) + ' стажа<\/span>' +
        '<span class="vbkyu-stat">' + l.cases + ' дел<\/span>' +
        '<\/button>' +
        '<div class="vbkyu-more"><div><dl class="vbkyu-dl">' +
        '<dt>Образование<\/dt><dd>' + l.edu + '<\/dd>' +
        '<dt>Практика<\/dt><dd>' + l.note + '<\/dd><\/dl><\/div><\/div><\/div>';
    }).join('');

    var rows = Array.prototype.slice.call(list.querySelectorAll('.vbkyu-row'));
    rows.forEach(function (row) {
      var btn = row.querySelector('.vbkyu-btn'), pane = row.querySelector('.vbkyu-more');
      btn.addEventListener('click', function () {
        var open = btn.getAttribute('aria-expanded') === 'true';
        rows.forEach(function (o) {
          o.querySelector('.vbkyu-btn').setAttribute('aria-expanded', 'false');
          o.querySelector('.vbkyu-more').style.maxHeight = '0px';
        });
        if (!open) { btn.setAttribute('aria-expanded', 'true'); pane.style.maxHeight = pane.scrollHeight + 'px'; }
      });
    });

    if (!('IntersectionObserver' in window)) { rows.forEach(function (r) { r.classList.add('is-in'); }); return; }
    var io = new IntersectionObserver(function (es) {
      es.forEach(function (e) {
        if (!e.isIntersecting) return;
        var i = rows.indexOf(e.target);
        e.target.style.transitionDelay = Math.min(i, 6) * 50 + 'ms';
        e.target.classList.add('is-in');
        io.unobserve(e.target);
      });
    }, { rootMargin: '0px 0px -8% 0px' });
    rows.forEach(function (r) { io.observe(r); });
    setTimeout(function () { rows.forEach(function (r) { r.classList.add('is-in'); }); }, 2500);
  }
})();
</script>

Вставляется целиком в блок T123 «HTML-код». Внутри уже есть стили и скрипт, подключать ничего не нужно.