/* Team · leadership — the leaders' cards (once published), then the studio drawn as a matrix chart beside the four seats
   (partials/team/leadership.php, assets/js/team/leadership.js).
   The chart is an HTML grid of three equal columns with no column gap: your side on the left, the studio in the two on
   the right. Its connectors are the borders of the fork, merge and hang elements, drawn at the centres of the two studio
   columns (25% and 75% of their span) — so they meet the boxes exactly at every width. On phones the studio takes both
   columns and your side moves under the chart. */
.tm-lead__k{margin-bottom:22px}
.tm-lead__people{margin-bottom:var(--bdh-block)}
.tm-lead__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--bdh-gap)}
.tm-lead__grid--1{grid-template-columns:minmax(0,360px)}
.tm-lead__grid--2{grid-template-columns:repeat(2,minmax(0,360px))}
.tm-lead__grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

.tm-lead__split{display:grid;grid-template-columns:minmax(0,5.2fr) minmax(0,6.8fr);gap:var(--bdh-gap-l);align-items:start}

/* ---------- the chart ---------- */
.tm-oc{position:sticky;top:var(--bdh-sticky);margin:0;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--paper);box-shadow:var(--sh-2);overflow:hidden}
.tm-oc__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;min-height:50px;padding:12px 20px;border-bottom:1px solid var(--line-2)}
.tm-oc__t{font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);line-height:1.4}
.tm-oc__tag{display:inline-flex;align-items:center;min-height:24px;padding:2px 10px;border:1px dashed var(--line-3);border-radius:var(--r-pill);
  font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.08em;text-transform:uppercase;line-height:1.35;color:var(--muted)}

.tm-oc__chart{--oc-p:18px;--oc-g:7px;position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:0;
  grid-template-areas:"zone studio studio" ". fork fork" "client eng prac" ". merge merge" ". squad squad" ". hang hang" ". agents agents";
  padding:24px var(--oc-p) 26px}
/* your side: a quieter lane behind the first column, divided from the studio by a dashed rule */
.tm-oc__chart::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;width:calc(var(--oc-p) + (100% - 2 * var(--oc-p)) / 3);background:var(--paper-2);border-right:1px dashed var(--line-3)}
.tm-oc__zone{grid-area:zone;align-self:center;padding:0 var(--oc-g);font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.12em;text-transform:uppercase;line-height:1.3;color:var(--faint)}

.tm-oc__node{position:relative;display:flex;align-items:center;gap:10px;min-width:0;margin:0 var(--oc-g);padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--paper);box-shadow:var(--sh-1);transition:border-color var(--d2) var(--e),box-shadow var(--d2) var(--e)}
.tm-oc__node--studio{grid-area:studio;justify-self:center;min-width:min(260px,62%);background:var(--ink);border-color:var(--ink)}
.tm-oc__node--engagement{grid-area:eng}
.tm-oc__node--practice{grid-area:prac}
/* the two lines' boxes sit side by side: their icon goes above the words, so a long title never meets the edge */
.tm-oc__node--engagement,.tm-oc__node--practice{flex-direction:column;align-items:flex-start;gap:8px}
.tm-oc__node--squad{grid-area:squad;justify-self:center;min-width:min(280px,66%)}
.tm-oc__ic{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--paper-3);color:var(--ink)}
.tm-oc__node--studio .tm-oc__ic{background:var(--on-ink-card);color:var(--on-ink)}
.tm-oc__nb{display:flex;flex-direction:column;gap:3px;min-width:0}
.tm-oc__nb b{font-family:var(--f-h);font-size:.9375rem;font-weight:500;line-height:1.25;color:var(--ink)}
.tm-oc__node--studio .tm-oc__nb b{color:var(--on-ink)}
.tm-oc__nb .tm-oc__kick{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.12em;text-transform:uppercase;line-height:1.3;color:var(--blue-d)}
.tm-oc__nb .tm-oc__sub{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.02em;line-height:1.35;color:var(--faint)}
.tm-oc__node.is-hot{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash)}
.tm-oc__node--studio.is-hot{box-shadow:0 0 0 3px var(--blue-line)}

/* connectors */
.tm-oc__fork,.tm-oc__merge,.tm-oc__hang{position:relative;display:block;height:38px}
.tm-oc__fork{grid-area:fork}
.tm-oc__merge{grid-area:merge}
.tm-oc__hang{grid-area:hang;height:26px}
.tm-oc__fork::before{content:"";position:absolute;left:50%;top:0;height:50%;border-left:1.5px solid var(--line-3)}
.tm-oc__fork::after{content:"";position:absolute;left:25%;right:25%;top:50%;bottom:0;border:1.5px solid var(--line-3);border-bottom:0;border-radius:6px 6px 0 0}
.tm-oc__merge::before{content:"";position:absolute;left:50%;top:50%;bottom:0;border-left:1.5px solid var(--line-3)}
.tm-oc__merge::after{content:"";position:absolute;left:25%;right:25%;top:0;height:50%;border:1.5px solid var(--line-3);border-top:0;border-radius:0 0 6px 6px}
.tm-oc__hang::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1.5px dashed var(--line-3)}

/* your sponsor, joined to the engagement director by the gate */
.tm-oc__client{grid-area:client;position:relative;display:flex;flex-direction:column;gap:4px;min-width:0;margin:0 calc(var(--oc-p) + var(--oc-g)) 0 var(--oc-g);padding:10px 12px;
  border:1px dashed var(--line-3);border-radius:var(--r);background:var(--paper)}
.tm-oc__client::after{content:"";position:absolute;left:100%;top:50%;width:calc(var(--oc-p) + 2 * var(--oc-g) + 1px);border-top:1.5px dashed var(--blue)}
.tm-oc__client b{font-family:var(--f-h);font-size:.9375rem;font-weight:500;line-height:1.25;color:var(--ink)}
.tm-oc__ck{display:none;font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.tm-oc__gate{display:inline-flex;align-items:center;gap:7px;font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.02em;line-height:1.35;color:var(--blue-d)}
.tm-oc__gd{flex:none;display:inline-block;width:8px;height:8px;transform:rotate(45deg);border:1.5px solid var(--blue);background:var(--paper)}

/* the agents hang off the squad: owned, never accountable */
.tm-oc__agents{grid-area:agents;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;margin:0 var(--oc-g);padding:12px;border:1px dashed var(--line-3);border-radius:var(--r);
  transition:border-color var(--d2) var(--e)}
.tm-oc__agents ul{display:grid;grid-template-columns:repeat(2,max-content);justify-content:center;gap:6px}
.tm-oc__agents li{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 10px;border-radius:var(--r-pill);background:var(--paper-3);font-size:var(--t-xs);line-height:1.3;color:var(--txt)}
.tm-oc__agents li .xt-ico{color:var(--muted)}
.tm-oc__ak{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 8px;text-align:center;font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.1em;text-transform:uppercase;line-height:1.4;color:var(--muted)}
.tm-oc__ak span{letter-spacing:.02em;text-transform:none;color:var(--faint)}
.tm-oc__agents.is-hot{border-color:var(--blue)}

/* ---------- the seats: one spine, a node per seat ---------- */
.tm-seats{position:relative}
.tm-seat{--tm-pt:24px;position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:var(--bdh-gap);row-gap:16px;align-items:start;padding:var(--tm-pt) 0}
.tm-seat::after{content:"";position:absolute;top:0;left:calc(56px + var(--bdh-gap));right:0;height:1px;background:var(--line)}
.tm-seat:first-child::after{display:none}
/* the spine: each seat draws the segment from its node down to the next node */
.tm-seat::before{content:"";position:absolute;left:27px;top:calc(var(--tm-pt) + 28px);width:1px;height:100%;background:var(--line-3);transform-origin:top}
.tm-seat:last-child::before{display:none}
.tm-seat:nth-last-child(2)::before{width:0;background:none;border-left:1px dashed var(--line-3)}

.tm-seat__node{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--paper);border:1px solid var(--line-3);color:var(--ink);
  transition:border-color var(--d2) var(--e),box-shadow var(--d2) var(--e)}
.band--alt .tm-seat__node{background:var(--paper-2)}
.tm-seat:first-child .tm-seat__node{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.tm-seat.is-hot .tm-seat__node{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-wash)}
.tm-seat__head{display:flex;flex-direction:column;gap:6px;min-width:0}
.tm-seat__n{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.12em;color:var(--blue)}
.tm-seat__t{font-family:var(--f-h);font-size:var(--t-h3);font-weight:500;letter-spacing:-.012em;line-height:1.25;color:var(--ink)}
.tm-seat__who{font-size:var(--t-sm);line-height:1.5;color:var(--muted);max-width:44ch}
.tm-seat__faces{margin-top:8px}
.tm-seat__kv{grid-column:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--bdh-gap)}
.tm-seat__kv>div{display:flex;flex-direction:column;gap:8px;min-width:0}
.tm-seat__kv dt{font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);line-height:1.3}
.tm-seat__kv dd{font-size:var(--t-sm);line-height:1.55;color:var(--txt)}

.tm-seat--agents{align-items:start;padding-bottom:0}
.tm-seat--agents .tm-seat__note{padding-top:6px}
.tm-seat--agents .tm-seat__node{border-style:dashed;color:var(--muted)}
.tm-seat__note{font-size:var(--t-sm);line-height:1.6;color:var(--muted);max-width:62ch}
.tm-seat__go{display:flex;width:max-content;max-width:100%;margin-top:6px;min-height:40px}

/* the spine draws in (assets/js/team/leadership.js adds .is-anim, then .is-in on entry) */
.tm-seats.is-anim .tm-seat::before{transform:scaleY(0)}
.tm-seats.is-anim .tm-seat__node{opacity:0;transform:scale(.8)}
.tm-seats.is-anim.is-in .tm-seat::before{transform:none;transition:transform .7s var(--e) calc(var(--i,0) * 140ms + 140ms)}
.tm-seats.is-anim.is-in .tm-seat__node{opacity:1;transform:none;transition:opacity .5s var(--e) calc(var(--i,0) * 140ms),transform .5s var(--e) calc(var(--i,0) * 140ms)}
.tm-seats.is-anim.is-in .tm-seat--agents .tm-seat__node{transition-delay:560ms}

/* below 1181 px the chart needs the full width: it stands above the seats */
@media (max-width:1180px){
  .tm-lead__split{grid-template-columns:minmax(0,1fr);gap:var(--bdh-block)}
  .tm-oc{position:static;width:100%;max-width:680px}
}
@media (max-width:1023px){
  .tm-lead__grid,.tm-lead__grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  /* each answer beside its label */
  .tm-seat__kv{grid-template-columns:minmax(0,1fr);gap:12px}
  .tm-seat__kv>div{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:4px 16px;align-items:baseline}
}
@media (max-width:600px){
  .tm-lead__grid,.tm-lead__grid--2,.tm-lead__grid--3{grid-template-columns:minmax(0,1fr)}
  /* the studio takes both columns; your sponsor moves under the chart */
  .tm-oc__chart{--oc-p:12px;--oc-g:5px;grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:"studio studio" "fork fork" "eng prac" "merge merge" "squad squad" "hang hang" "agents agents" "client client";padding:20px var(--oc-p) 18px}
  .tm-oc__chart::before,.tm-oc__zone,.tm-oc__client::after{display:none}
  .tm-oc__client{margin:18px var(--oc-g) 0;background:var(--paper-2)}
  .tm-oc__ck{display:block}
  .tm-oc__node{padding:10px}
  .tm-oc__node--studio,.tm-oc__node--squad{min-width:0;max-width:100%}
  .tm-oc__bar{padding:12px 16px}
  .tm-seat{--tm-pt:22px;grid-template-columns:44px minmax(0,1fr);column-gap:16px}
  .tm-seat::after{left:60px}
  .tm-seat::before{left:21px;top:calc(var(--tm-pt) + 22px)}
  .tm-seat__node{width:44px;height:44px}
  .tm-seat__node .xt-ico{width:20px;height:20px}
  .tm-seat__kv{gap:16px}
  .tm-seat__kv>div{display:flex;flex-direction:column;gap:6px}
  .tm-seat__go{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .tm-seats.is-anim .tm-seat::before,.tm-seats.is-anim .tm-seat__node{transform:none;opacity:1;transition:none}
  .tm-oc__node,.tm-seat__node,.tm-oc__agents{transition:none}
}