/* #about: "About us". Who runs the tests and that it is emable. Text + product plate on top, four people cards
 * (base .card .lift, initials avatars, no photos), then a strip of four proof points.
 * The plate plays one process once revealed, then holds: 1 the products the team builds arrive, 2 the one-team rail
 * draws through them, 3 Validator lights up as the product that grew out of that work.
 * The drawn end state is the default: without the shell, without JS and with reduced motion it is static. */
#about .ab-top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center}
#about .ab-lead{margin-top:16px;max-width:44ch}
#about .ab-sub{margin-top:12px;font-size:15.5px;line-height:1.6;color:var(--body);max-width:44ch}
#about .ab-cta{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
#about .ab-parent{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;line-height:1.4;color:var(--muted)}
#about .ab-parent img{width:20px;height:20px;flex:none}
#about .ab-parent a{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:#cfd6df;text-underline-offset:4px;transition:text-decoration-color .2s}
#about .ab-parent a:hover{text-decoration-color:var(--ink)}

/* ---------- Plate: what the same team builds and runs ---------- */
#about .ab-plate{position:relative;isolation:isolate;border-radius:20px;border:1px solid #e6ebf1;box-shadow:var(--sh-lg);overflow:hidden;
  background:radial-gradient(55% 60% at 100% 100%,rgba(82,168,212,.10),transparent 70%),radial-gradient(50% 55% at 0% 0%,rgba(246,157,83,.08),transparent 70%),#fff}
#about .ab-plate::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad);z-index:2}
#about .ab-plate::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(12,21,41,.07) 1px,transparent 1.3px) 0 0/24px 24px;
  -webkit-mask-image:radial-gradient(75% 75% at 60% 55%,#000,transparent);mask-image:radial-gradient(75% 75% at 60% 55%,#000,transparent)}
#about .ab-bar{display:flex;align-items:center;gap:8px;padding:13px 18px;background:rgba(248,250,252,.85);border-bottom:1px solid var(--line-soft)}
#about .ab-bar img{width:20px;height:20px;flex:none}
#about .ab-bar span{font-size:14px;font-weight:600;letter-spacing:-.01em}
#about .ab-bar em{margin-left:auto;font-size:12px;font-style:normal;font-weight:500;color:var(--muted);text-align:right}

#about .ab-stack{display:grid;grid-auto-rows:1fr;gap:8px;padding:18px 20px 20px}
#about .ab-p{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:14px;min-width:0;padding:10px 14px 10px 12px;
  border-radius:12px;background:rgba(255,255,255,.88);border:1px solid var(--line-soft)}
/* the one-team rail: a segment from each icon to the next, in the colours of the two rows it joins.
 * z-index 1 lifts it over the next row's background; the icons (z-index 2) cover its ends. */
#about .ab-p:not(:last-child)::after{content:"";position:absolute;z-index:1;left:31px;top:50%;width:2px;height:calc(100% + 8px);border-radius:2px;
  background:linear-gradient(180deg,var(--c),var(--cn));transform-origin:top}
#about .ab-p:nth-child(1){--cn:var(--orange)}#about .ab-p:nth-child(2){--cn:var(--yellow)}
#about .ab-p:nth-child(3){--cn:var(--green)}#about .ab-p:nth-child(4){--cn:var(--blue)}
#about .ab-ic{position:relative;z-index:2;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:color-mix(in srgb,var(--c) 15%,#fff);border:1px solid color-mix(in srgb,var(--c) 30%,#fff)}
#about .ab-ic svg{width:20px;height:20px;fill:none;stroke:var(--ci);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#about .ab-pt{display:grid;gap:2px;min-width:0}
#about .ab-pt b{font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
#about .ab-pt small{font-size:13px;line-height:1.45;color:var(--body)}
#about .ab-cc{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
#about .ab-cc i{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:6px;background:var(--soft);border:1px solid var(--line);
  font-size:12px;font-style:normal;font-weight:600;line-height:1;letter-spacing:.04em;color:var(--green-ink)}

/* Validator: the row the rail leads to, lit with the spectrum border and a soft blue glow */
#about .ab-val{background:#fff;border-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 10%,transparent),0 14px 30px -18px rgba(31,111,156,.45)}
#about .ab-val::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;background:var(--grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
#about .ab-val .ab-pt b{font-size:16px}
#about .ab-here{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;white-space:nowrap;
  background:color-mix(in srgb,var(--blue) 11%,#fff);border:1px solid color-mix(in srgb,var(--blue) 32%,#fff);font-size:12px;font-weight:600;line-height:1;color:var(--blue-ink)}

/* ---------- People ---------- */
#about .ab-people{margin-top:64px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
#about .ab-person{display:flex;flex-direction:column;padding:26px 24px 28px;
  background:radial-gradient(120% 70% at 0% 0%,color-mix(in srgb,var(--c) 9%,transparent),transparent 60%),#fff}
#about .ab-av{position:relative;isolation:isolate;display:grid;place-items:center;width:56px;height:56px;flex:none;border-radius:50%;
  background:linear-gradient(135deg,var(--c),var(--c2))}
#about .ab-av::after{content:"";position:absolute;inset:-5px;z-index:-1;border-radius:50%;background:linear-gradient(135deg,var(--c),var(--c2));filter:blur(10px);opacity:.25}
#about .ab-av-in{display:grid;place-items:center;width:calc(100% - 5px);height:calc(100% - 5px);overflow:hidden;border-radius:50%;background:#fff;
  font-size:17px;font-weight:600;line-height:1;letter-spacing:.01em;color:var(--ink)}
#about .ab-av-in img{width:100%;height:100%;object-fit:cover}
#about .ab-av-in svg{width:24px;height:24px;fill:none;stroke:var(--body);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#about .ab-name{margin-top:18px;font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.02em}
#about .ab-role{margin-top:6px;display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#about .ab-role::before{content:"";width:14px;height:2px;flex:none;border-radius:2px;background:var(--c)}
#about .ab-line{margin-top:12px;font-size:14.5px;line-height:1.6;color:var(--body)}
#about .ab-li{margin-top:auto;padding-top:16px;align-self:flex-start;font-size:13.5px;font-weight:500;color:var(--blue-ink)}

/* ---------- Proof strip: four facts, thin dividers ---------- */
#about .ab-proof{margin-top:40px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:18px;background:#fff;border:1px solid #e6ebf1;box-shadow:var(--sh)}
#about .ab-proof li{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;column-gap:12px;row-gap:2px;min-width:0;padding:20px 22px}
#about .ab-proof li + li{border-left:1px solid var(--line-soft)}
#about .ab-pi{grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:color-mix(in srgb,var(--c) 14%,#fff);border:1px solid color-mix(in srgb,var(--c) 28%,#fff)}
#about .ab-pi svg{width:18px;height:18px;fill:none;stroke:var(--ci);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#about .ab-proof b{font-size:14.5px;font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
#about .ab-proof small{font-size:13px;line-height:1.45;color:var(--muted)}

/* ---------- Motion (only under the shell's .motion, only once the plate is in) ---------- */
@media (prefers-reduced-motion:no-preference){
  #about .ab-p{transition:opacity .45s ease calc(var(--rd,0s) + .3s + var(--k,0) * .16s),transform .55s var(--ease) calc(var(--rd,0s) + .3s + var(--k,0) * .16s)}
  #about .ab-p:not(:last-child)::after{transition:transform .4s var(--ease) calc(var(--rd,0s) + 1.3s + var(--k,0) * .3s)}
  #about .ab-val{transition:opacity .45s ease calc(var(--rd,0s) + .94s),transform .55s var(--ease) calc(var(--rd,0s) + .94s),box-shadow .6s ease calc(var(--rd,0s) + 2.5s)}
  #about .ab-val::before{transition:opacity .6s ease calc(var(--rd,0s) + 2.5s)}
  #about .ab-val .ab-ic{transition:transform .5s var(--spring) calc(var(--rd,0s) + 2.5s)}
  #about .ab-here{transition:opacity .35s ease calc(var(--rd,0s) + 2.9s),transform .5s var(--spring) calc(var(--rd,0s) + 2.9s)}

  #about:is(.motion *) .rv:not(.is-in) .ab-p{opacity:0;transform:translateX(-10px)}
  #about:is(.motion *) .rv:not(.is-in) .ab-p:not(:last-child)::after{transform:scaleY(0)}
  #about:is(.motion *) .rv:not(.is-in) .ab-val{box-shadow:none}
  #about:is(.motion *) .rv:not(.is-in) .ab-val::before{opacity:0}
  #about:is(.motion *) .rv:not(.is-in) .ab-val .ab-ic{transform:scale(.8)}
  #about:is(.motion *) .rv:not(.is-in) .ab-here{opacity:0;transform:scale(.85)}
}

/* ---------- Laptop and tablet ---------- */
@media (max-width:1080px){
  #about .ab-top{gap:44px}
  #about .ab-proof{grid-template-columns:repeat(2,minmax(0,1fr))}
  #about .ab-proof li:nth-child(3){border-left:0}
  #about .ab-proof li:nth-child(n+3){border-top:1px solid var(--line-soft)}
}
@media (max-width:1000px){
  #about .ab-top{grid-template-columns:1fr;gap:40px}
  #about .ab-lead,#about .ab-sub{max-width:60ch}
  #about .ab-plate{max-width:640px}
}
@media (max-width:900px){#about .ab-people{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:48px}}

/* ---------- Phones: no plate, people in one swipe row, compact proof grid ---------- */
@media (max-width:640px){
  #about .ab-lead{margin-top:12px}
  #about .ab-sub{margin-top:8px;font-size:14.5px;line-height:1.55}
  #about .ab-cta{margin-top:18px;gap:10px 16px}
  #about .ab-plate{display:none}

  #about .ab-people{display:flex;gap:12px;margin:24px calc(var(--gutter) * -1) 0;padding:4px var(--gutter) 14px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  #about .ab-people::-webkit-scrollbar{display:none}
  #about .ab-person{flex:0 0 min(272px,calc(100% - 56px));scroll-snap-align:start;display:grid;grid-template-columns:auto minmax(0,1fr);
    column-gap:12px;align-items:center;padding:16px 18px 18px}
  #about .ab-av{grid-row:span 2;width:44px;height:44px}
  #about .ab-av-in{font-size:14px}
  #about .ab-av-in svg{width:20px;height:20px}
  #about .ab-name{margin:0;align-self:end;font-size:16.5px}
  #about .ab-role{margin:2px 0 0;align-self:start;font-size:12px;letter-spacing:.1em}
  #about .ab-role::before{width:10px}
  #about .ab-line,#about .ab-li{grid-column:1 / -1}
  #about .ab-line{margin-top:10px;font-size:14px;line-height:1.5}

  #about .ab-proof{margin-top:28px;border-radius:16px;box-shadow:none}
  #about .ab-proof li{column-gap:10px;padding:12px}
  #about .ab-pi{grid-row:auto;width:28px;height:28px;border-radius:8px}
  #about .ab-pi svg{width:15px;height:15px}
  #about .ab-proof b{font-size:13px;line-height:1.35;align-self:center}
  #about .ab-proof small{display:none}
}