/* Officers - organisation chart (family-tree style) */
.oc-intro{margin:-4px 0 22px}
.oc{--ln:#9db8e0;display:flex;flex-direction:column;align-items:center;padding-bottom:10px}
.oc-tier{width:100%;position:relative;padding-top:46px}
.oc-tier:first-child{padding-top:0}
/* trunk line coming down into each tier */
.oc-tier:not(:first-child)::before{content:"";position:absolute;left:50%;top:0;height:46px;width:2px;background:var(--ln);transform:translateX(-1px)}
.oc-label{margin:0 auto 22px;text-align:center;position:relative;z-index:1}
.oc-label span{display:inline-block;padding:7px 20px;border-radius:999px;color:#fff;font-size:.82rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 6px 16px rgba(10,77,162,.2)}
.oc-tier:not(:first-child) .oc-label{margin-top:-14px;transform:translateY(0)}
.oc-label.tone-b span{background:linear-gradient(135deg,#0a4da2,#2f80ed)}
.oc-label.tone-gold span{background:linear-gradient(135deg,#d98a00,#f5a623)}
.oc-label.tone-teal span{background:linear-gradient(135deg,#0b8a9f,#14b8d4)}
.oc-label.tone-purple span{background:linear-gradient(135deg,#6a3fc4,#9a6df0)}
.oc-label.tone-green span{background:linear-gradient(135deg,#0f8a4f,#2fc47a)}

.oc-row{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
/* tree : classic connectors (few cards) */
.oc-tier.tree .oc-row{flex-wrap:nowrap;gap:0}
.oc-tier.tree .oc-cell{position:relative;padding:26px 10px 0;flex:0 1 230px;min-width:0;display:flex}
.oc-tier.tree .oc-cell::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--ln)}
.oc-tier.tree .oc-cell::after{content:"";position:absolute;top:0;left:50%;height:26px;width:2px;background:var(--ln);transform:translateX(-1px)}
.oc-tier.tree .oc-cell:first-child::before{left:50%}
.oc-tier.tree .oc-cell:last-child::before{right:50%}
.oc-tier.tree .oc-cell:only-child::before{display:none}
.oc-tier.tree.top .oc-cell{padding-top:0;flex-basis:300px}
.oc-tier.tree.top .oc-cell::before,.oc-tier.tree.top .oc-cell::after{display:none}
/* the label pill sits on the trunk, then a short drop to the row */
.oc-tier.tree:not(.top) .oc-row::before{content:none}

/* bus : big tiers drawn inside a framed panel */
.oc-tier.bus .oc-row{border:2px solid var(--ln);border-radius:22px;padding:26px 18px 22px;background:linear-gradient(180deg,#f7faff,#fff);display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.oc-tier.bus .oc-cell{display:flex}

.oc-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:22px 16px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;width:100%;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.oc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.oc-card::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--tc,#0a4da2)}
.tone-b{--tc:#0a4da2}.tone-gold{--tc:#f5a623}.tone-teal{--tc:#14b8d4}.tone-purple{--tc:#8a5ce6}.tone-green{--tc:#22b573}
.oc-ph{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:top;border:4px solid #fff;box-shadow:0 0 0 3px var(--tc,#0a4da2),0 8px 18px rgba(10,77,162,.18);flex:none;background:#eaf3ff}
.oc-av{display:grid;place-items:center;font-size:2.2rem;font-weight:800;color:var(--tc,#0a4da2)}
.tone-gold .oc-ph{width:128px;height:128px}
.oc-card h3{font-size:1.02rem;margin:14px 0 4px;color:var(--ink);line-height:1.3;overflow-wrap:anywhere}
.oc-role{margin:0;font-size:.86rem;font-weight:700;color:var(--tc,#0a4da2);overflow-wrap:anywhere}
.oc-sub{margin:2px 0 0;font-size:.82rem;color:var(--muted)}
.oc-acts{margin-top:auto;padding-top:12px;display:grid;gap:6px;width:100%}
.oc-call{display:block;background:var(--sky);border-radius:999px;padding:6px 10px;font-weight:700;font-size:.86rem;color:var(--blue-d)}
.oc-call:hover{background:var(--blue);color:#fff;text-decoration:none}
.oc-more{font-size:.8rem;font-weight:700}

.oc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}

@media (max-width:1000px){
  .oc-tier.tree .oc-row{flex-wrap:wrap;gap:16px}
  .oc-tier.tree .oc-cell{padding:0;flex:0 1 230px}
  .oc-tier.tree .oc-cell::before,.oc-tier.tree .oc-cell::after{display:none}
}
@media (max-width:560px){
  .oc-tier{padding-top:38px}
  .oc-tier:not(:first-child)::before{height:38px}
  .oc-tier.tree .oc-cell{flex:1 1 44%}.oc-tier.tree.top .oc-cell{flex:1 1 100%}
  .oc-tier.bus .oc-row{grid-template-columns:1fr 1fr;gap:10px;padding:18px 10px}
  .oc-card{padding:18px 10px 14px}
  .oc-ph{width:76px;height:76px}.tone-gold .oc-ph{width:104px;height:104px}
  .oc-card h3{font-size:.92rem}
  .oc-call{font-size:.78rem;padding:5px 6px}
  .oc-grid{grid-template-columns:1fr 1fr;gap:10px}
}
@media (max-width:360px){.oc-tier.bus .oc-row,.oc-grid{grid-template-columns:1fr}}