/* ─────────────────────────────────────────────────────────────
   THE LAW CHAIN — /about/

   What replaced a stat tile that said "12+ hours saved per client,
   per week" and "100% UK-based, no outsourcing". No client has ever
   been billed, so the first figure was invented, and the block was
   the hero-metric template the brand's own anti-references reject.
   Removing it and refilling the space are one job: an empty column
   beside the founder story is a worse page, not a more honest one.

   What is drawn instead is the only thing in the business that runs
   for a whole year without the customer doing anything — the
   legal-update chain, which is built, armed and live. A picture of a
   mechanism that exists, in a column that used to hold a number that
   did not.

   Real text, not an image of text: the same rule the enforcement
   timeline and the coverage map follow. A graphic an AI cannot read
   is an argument against the thing we sell.
   ───────────────────────────────────────────────────────────── */

.lawchain {
  background: #0a1628;
  border: 1px solid #1e293b;
  padding: 30px 26px 26px;
  width: 100%;
}

/* No tracked uppercase kicker here. The section above it already opens with
   one ("Our story"), and a second in the same section is the AI-scaffolding
   tell rather than voice. A plain-case standfirst does the same work. */
.lawchain-title {
  color: #ffffff;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 10px;
}

.lawchain-standfirst {
  color: #94a3b8;
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 0 0 24px;
  max-width: 40ch;
}

/* "EU AI Act" broke across a line after the date it belongs to. */
.lawchain-nowrap { white-space: nowrap; }

/* The spine. A list, because it is one — the steps are ordered and a
   screen reader should be told so. The marker is drawn by us. */
.lawchain-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: lawchain;
}

.lawchain-step {
  position: relative;
  padding: 0 0 24px 26px;
}

/* The run of the spine, from the node down to the next node. Drawn on
   the step rather than behind the whole list so the last step simply
   does not have one — no override, nothing to forget. */
.lawchain-step::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 15px;
  bottom: -1px;
  width: 1px;
  background: #1e293b;
}

.lawchain-step:last-child {
  padding-bottom: 0;
}

.lawchain-step:last-child::before {
  display: none;
}

/* The node. Square: the brand has no rounded corner anywhere and a
   circle here would be the one exception on the page. */
.lawchain-step::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 9px;
  height: 9px;
  background: #f59e0b;
}

.lawchain-step-action {
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 4px;
}

.lawchain-step-detail {
  color: #cbd5e1;
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 0;
}

.lawchain-step-detail time {
  color: #fbbf24;
  font-weight: 600;
  white-space: nowrap;
}

.lawchain-foot {
  border-top: 1px solid #1e293b;
  margin-top: 24px;
  padding-top: 18px;
}

.lawchain-foot p {
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
}

.lawchain-foot span {
  color: #f59e0b;
}

/* The steps arrive one after the other, which is the shape of the
   thing being drawn. Every step is fully visible before this runs —
   the animation moves what is already there. A reveal that starts
   from hidden never fires in a headless renderer and ships blank
   (bug: three of four pack images, 2026-08-18). */
@media (prefers-reduced-motion: no-preference) {
  .lawchain-step {
    animation: lawchain-in 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .lawchain-step:nth-child(2) { animation-delay: 90ms; }
  .lawchain-step:nth-child(3) { animation-delay: 180ms; }
  .lawchain-step:nth-child(4) { animation-delay: 270ms; }
}

@keyframes lawchain-in {
  from { opacity: 0.35; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (min-width: 1024px) {
  .lawchain { padding: 34px 30px 30px; }
  .lawchain-title { font-size: 1.5rem; }
}