/* ==========================================================================
   Org chart v2 — premium scroll-build interactive chart (corporate.html only)
   Uses the site's existing tokens (--blue, --blue-dim, --ink, --gray-*) from
   css/style.css. No foreign colors/fonts introduced.
   ========================================================================== */

.oc{
  --oc-glow:rgba(24,80,225,.45);
  --oc-ice:rgba(24,80,225,.07);
  --oc-line:rgba(24,80,225,.28);
  display:flex;flex-direction:column;align-items:center;
}

/* ---------- Connectors: fine glowing line with two "molecular" nodes ---------- */
.oc__connector{
  position:relative;width:2px;height:46px;margin:0 auto;
  background:linear-gradient(to bottom,transparent,var(--oc-line) 20%,var(--oc-line) 80%,transparent);
  transform:scaleY(0);transform-origin:top;opacity:0;
  transition:transform 1s var(--ease),opacity 1s var(--ease);
}
.oc__connector.is-revealed{transform:scaleY(1);opacity:1;}
.oc__connector::before,.oc__connector::after{
  content:'';position:absolute;left:50%;width:6px;height:6px;border-radius:50%;
  background:var(--blue);box-shadow:0 0 10px 2px var(--oc-glow);
  transform:translateX(-50%) scale(0);transition:transform .5s var(--ease) .5s;
}
.oc__connector.is-revealed::before,.oc__connector.is-revealed::after{transform:translateX(-50%) scale(1);}
.oc__connector::before{top:24%;}
.oc__connector::after{top:68%;}
.oc__connector--main{height:56px;}

/* ---------- Tier wrapper ---------- */
.oc__tier{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;margin-top:0;}
.oc__tier-label{
  opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease);
  margin-bottom:26px;
}
.oc__tier-label.is-revealed{opacity:1;transform:translateY(0);}

.oc__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;
  width:100%;max-width:1040px;margin:0 auto;
}

/* ---------- Cards ---------- */
.oc-card{
  position:relative;background:var(--white);border:1px solid var(--gray-100);border-radius:16px;
  padding:24px 22px;cursor:pointer;
  opacity:0;transform:translateY(30px) scale(.97);
  transition:
    opacity .75s var(--ease),transform .5s var(--ease),
    box-shadow .4s var(--ease),border-color .4s var(--ease),
    filter .4s var(--ease);
  will-change:transform,opacity;
}
.oc-card.is-revealed{opacity:1;transform:translateY(0) scale(1);}

/* Active (viewport-center) highlight */
.oc-card.is-active{
  border-color:var(--blue);
  box-shadow:0 22px 40px -22px rgba(24,80,225,.35),0 0 0 1px var(--oc-ice);
  transform:translateY(-3px) scale(1.025);
}
.oc-card.is-active .oc-card__name{
  color:var(--ink);text-shadow:0 0 18px var(--oc-glow);
}
.oc-card.is-active .oc-card__role{position:relative;}
.oc-card.is-active .oc-card__role::after{
  content:'';position:absolute;left:0;bottom:-4px;height:1px;width:100%;
  background:linear-gradient(to right,var(--blue),transparent);
  animation:oc-underline .6s var(--ease);
}
@keyframes oc-underline{from{width:0;}to{width:100%;}}

/* Dimmed siblings (revealed but not the active card) */
.oc-card.is-dimmed{opacity:.55;filter:saturate(.85);}
.oc-card.is-dimmed.is-revealed{transform:translateY(0) scale(1);}

.oc-card__name{
  font-size:15.5px;margin:0 0 4px;letter-spacing:-.01em;
  transition:font-size .35s var(--ease),color .35s var(--ease);
}
.oc-card.is-active .oc-card__name{font-size:17px;}
.oc-card__role{font-size:12.5px;color:var(--blue);font-weight:600;margin:0;}

.oc-card__bio-wrap{
  max-height:0;overflow:hidden;
  transition:max-height .5s var(--ease),margin-top .5s var(--ease);
}
.oc-card__bio{
  margin:0;padding-top:12px;border-top:1px solid var(--gray-100);
  color:var(--gray-700);font-size:13px;line-height:1.6;
}
.oc-card__bio p{margin:0;}
.oc-card__bio strong{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gray-900);margin:10px 0 4px;}
.oc-card__bio strong:first-child{margin-top:0;}
.oc-card__bio ul{margin:0 0 6px;padding-left:16px;}
.oc-card__bio li{margin-bottom:2px;}

/* Hover/click reveal: bio-wrap grows open. A generous max-height covers the
   longest content (bio paragraph + Key Responsibilities list combined) without a hard clip. */
.oc-card:hover .oc-card__bio-wrap,
.oc-card:focus-within .oc-card__bio-wrap,
.oc-card.is-expanded .oc-card__bio-wrap{
  max-height:540px;margin-top:12px;
}

/* ---------- CEO card ---------- */
.oc-card--ceo{
  width:min(300px,86vw);text-align:center;
  border-color:var(--blue);box-shadow:0 16px 34px -20px rgba(24,80,225,.3);
}
.oc-card--ceo .oc-card__name{font-size:19px;}
.oc-card--ceo .oc-card__role{font-size:13px;}

/* ---------- Reduced motion: everything fully visible, no scroll-build ---------- */
@media (prefers-reduced-motion:reduce){
  .oc-card,.oc__connector,.oc__tier-label{
    opacity:1 !important;transform:none !important;transition:none !important;
  }
  .oc__connector::before,.oc__connector::after{transform:translateX(-50%) scale(1) !important;}
  .oc-card.is-dimmed{opacity:1 !important;filter:none !important;}
}

/* ---------- Mobile: clean vertical stack, one connector running through ---------- */
@media (max-width:899px){
  .oc__grid{grid-template-columns:1fr;gap:18px;max-width:420px;position:relative;}
  .oc__grid::before{
    content:'';position:absolute;top:0;bottom:0;left:50%;width:2px;
    background:linear-gradient(to bottom,transparent,var(--oc-line) 8%,var(--oc-line) 92%,transparent);
    transform:translateX(-50%);z-index:0;
  }
  .oc-card{z-index:1;}
  .oc__tier{margin-top:8px;}
}