/* ==========================================================================
   NIDS People — committee & speaker layouts
   Everything is scoped under .nids-people so nothing leaks into the theme.
   ========================================================================== */

.nids-people{
  --np-accent:#16B8E8;
  --np-accent2:#F58220;
  --np-navy:#0B1E3F;
  --np-radius:18px;
  --np-ink:#1A2333;
  --np-soft:#5A6E8C;
  --np-line:#E3EAF4;
  --np-bg:#F5F8FC;

  position:relative;
  padding:clamp(40px,6vw,80px) clamp(14px,4vw,32px);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--np-ink);
  background:linear-gradient(180deg,#fff 0%,var(--np-bg) 100%);
  text-align:left;
  overflow:hidden;
}
.nids-people *,
.nids-people *::before,
.nids-people *::after{box-sizing:border-box}

.nids-people .np-wrap{max-width:1180px;margin:0 auto}

/* ---------- Header ---------- */
.nids-people .np-head{max-width:760px;margin:0 0 clamp(26px,4vw,44px)}
.nids-people .np-h2{
  font-family:'Sora',sans-serif;font-weight:800;
  font-size:clamp(26px,4.2vw,42px);line-height:1.14;
  color:var(--np-navy);margin:0 0 12px;letter-spacing:-.02em;
}
.nids-people .np-h2::after{
  content:"";display:block;width:0;height:4px;border-radius:3px;margin-top:12px;
  background:linear-gradient(90deg,var(--np-accent),var(--np-accent2));
  transition:width .9s cubic-bezier(.22,.9,.3,1) .2s;
}
.nids-people .np-h2.is-in::after{width:88px}
.nids-people .np-lede{font-size:clamp(14.5px,1.6vw,16.5px);line-height:1.66;color:var(--np-soft);margin:0}
.nids-people .np-empty{
  padding:26px;text-align:center;color:var(--np-soft);
  background:#fff;border:1px dashed var(--np-line);border-radius:var(--np-radius);
}

/* ---------- Tier headings ---------- */
.nids-people .np-tier{margin:0 0 clamp(26px,4vw,46px)}
.nids-people .np-tier-t{
  display:flex;align-items:center;gap:14px;
  font-family:'Sora',sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--np-navy);
  margin:0 0 20px;
}
.nids-people .np-tier-t::after{
  content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--np-line),transparent);
}
.nids-people .np-tier-t span{
  padding:5px 14px;border-radius:99px;font-size:12.5px;
  background:rgba(22,184,232,.10);border:1px solid rgba(22,184,232,.28);
  color:var(--np-navy);white-space:nowrap;
}

/* ---------- Rows ---------- */
.nids-people .np-row{display:grid;gap:clamp(14px,1.8vw,22px)}
.nids-people .np-row-grid{grid-template-columns:repeat(var(--cols,4),1fr)}
.nids-people .np-row-lead{
  grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));
  max-width:940px;   /* keeps two leaders visually paired, not stretched */
}

/* ---------- Card ---------- */
.nids-people .np-card{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--np-line);
  border-radius:var(--np-radius);overflow:hidden;
  text-align:left;padding:0;margin:0;width:100%;
  font:inherit;color:inherit;cursor:default;
  box-shadow:0 1px 2px rgba(11,30,63,.04);
  transition:transform .38s cubic-bezier(.22,.9,.3,1),box-shadow .38s ease,border-color .38s ease;
}
.nids-people button.np-card{cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
/* Hover lift only where hovering is real (desktop pointers). */
@media (hover: hover){
  .nids-people .np-card{transition:transform .38s cubic-bezier(.22,.9,.3,1),box-shadow .38s ease,border-color .38s ease}
  .nids-people .np-card:hover,
  .nids-people .np-card:focus-visible{
    transform:translateY(-8px);
    box-shadow:0 26px 50px -18px rgba(11,30,63,.32), 0 0 0 3px rgba(22,184,232,.14);
    border-color:rgba(22,184,232,.55);
  }
  .nids-people .np-card:hover .np-photo img{transform:scale(1.07)}
  .nids-people .np-card:hover .np-name{color:var(--np-accent2)}
  .nids-people.np-gray .np-card:hover .np-photo img{filter:grayscale(0)}
  .nids-people .np-card:hover .np-more{color:var(--np-accent2)}
  .nids-people .np-card:hover .np-more svg{transform:translateX(5px)}
}
/* Press feedback that works on touch: the card dips when tapped/held. */
.nids-people button.np-card:active{
  transform:scale(.975);
  box-shadow:0 6px 16px -10px rgba(11,30,63,.3);
  border-color:rgba(22,184,232,.5);
}
.nids-people .np-card:focus-visible{outline:3px solid var(--np-accent);outline-offset:3px;transform:translateY(-6px)}

/* Photo */
.nids-people .np-photo{
  position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--np-bg);
}
.nids-people .np-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.22,.9,.3,1),filter .5s ease;
}
/* Optional editorial greyscale */
.nids-people.np-gray .np-photo img{filter:grayscale(1)}

/* Placeholder when no photograph was supplied */
.nids-people .np-ph{display:grid;place-items:center;color:#fff}
.nids-people .np-ph-init{
  background:linear-gradient(140deg,var(--np-navy),var(--np-accent));
}
.nids-people .np-ph-init span{
  font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(28px,4vw,40px);
  letter-spacing:.04em;
}
.nids-people .np-ph-sil{background:var(--np-bg);color:#9DB0C7}
.nids-people .np-ph-sil svg{width:44%;height:44%}

/* Body */
.nids-people .np-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:5px;flex:1}
.nids-people .np-name{
  font-family:'Sora',sans-serif;font-weight:700;font-size:17px;line-height:1.28;
  color:var(--np-navy);margin:0;letter-spacing:-.01em;
  transition:color .3s ease;
  /* Long names must wrap between words, never mid-word, and never spill out
     of the card. "Okogbenin" should move to the next line whole. */
  overflow-wrap:break-word;word-break:normal;hyphens:none;
  text-wrap:balance;   /* spreads two lines evenly instead of one orphan word */
}
.nids-people .np-capacity{
  margin:0;font-size:13.5px;font-weight:600;line-height:1.45;
  color:var(--np-accent2);
  overflow-wrap:break-word;word-break:normal;text-wrap:pretty;
}
.nids-people .np-prof,
.nids-people .np-org,
.nids-people .np-topic,
.nids-people .np-lmeta{overflow-wrap:break-word;word-break:normal}
.nids-people .np-prof{margin:0;font-size:13.5px;line-height:1.5;color:var(--np-soft)}
.nids-people .np-org{margin:0;font-size:12.5px;line-height:1.5;color:var(--np-soft);opacity:.9}
.nids-people .np-topic{
  margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--np-ink);font-style:italic;
}
.nids-people .np-tag{
  align-self:flex-start;margin-top:6px;font-size:11.5px;font-weight:600;
  padding:4px 10px;border-radius:99px;color:var(--np-navy);
  background:var(--np-bg);border:1px solid var(--np-line);
}
.nids-people .np-more{
  margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:700;color:var(--np-accent);transition:color .3s ease;
}
.nids-people .np-more svg{width:15px;height:15px;transition:transform .3s ease}

/* Socials */
.nids-people .np-socs{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.nids-people .np-soc{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  color:var(--np-navy);background:var(--np-bg);border:1px solid var(--np-line);
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.nids-people .np-soc svg{width:15px;height:15px}
.nids-people .np-soc:hover{background:var(--np-navy);color:#fff;transform:translateY(-2px)}

/* Bigger leadership cards */
.nids-people .np-big .np-body{padding:22px 22px 24px}
.nids-people .np-big .np-name{font-size:20px}
.nids-people .np-big .np-capacity{font-size:14.5px}

/* Compact variant used by the marquee */
.nids-people .np-compact{width:230px}
.nids-people .np-compact .np-body{padding:14px 14px 16px}
.nids-people .np-compact .np-name{font-size:15.5px}

/* ==========================================================================
   Committee: list
   ========================================================================== */
.nids-people .np-list{display:flex;flex-direction:column;gap:10px}
.nids-people .np-lrow{
  display:flex;align-items:center;gap:16px;width:100%;
  padding:12px 16px;margin:0;text-align:left;font:inherit;color:inherit;
  background:#fff;border:1px solid var(--np-line);border-radius:14px;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.nids-people button.np-lrow{cursor:pointer;-webkit-appearance:none;appearance:none}
.nids-people .np-lrow:hover{
  transform:translateX(4px);border-color:rgba(22,184,232,.45);
  box-shadow:0 10px 24px -14px rgba(11,30,63,.3);
}
.nids-people .np-lphoto{
  flex:none;width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--np-bg);
}
.nids-people .np-lphoto img{width:100%;height:100%;object-fit:cover;display:block}
.nids-people .np-lphoto.np-ph-init span{font-size:18px}
.nids-people .np-lbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nids-people .np-lmeta{font-size:12.5px;color:var(--np-soft);line-height:1.45}

/* ==========================================================================
   Committee: spotlight
   ========================================================================== */
.nids-people .np-spot{display:grid;gap:18px;margin-bottom:28px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.nids-people .np-spot-card{
  display:flex;gap:20px;align-items:flex-start;padding:22px;
  background:#fff;border:1px solid var(--np-line);border-radius:var(--np-radius);
  box-shadow:0 10px 30px -20px rgba(11,30,63,.4);
}
.nids-people .np-spot-photo{
  flex:none;width:132px;height:132px;border-radius:14px;overflow:hidden;background:var(--np-bg);
}
.nids-people .np-spot-photo img{width:100%;height:100%;object-fit:cover;display:block}
.nids-people .np-spot-photo.np-ph-init span{font-size:34px}
.nids-people .np-spot-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.nids-people .np-spot-bio{font-size:13.5px;line-height:1.6;color:var(--np-soft);margin-top:6px}
.nids-people .np-spot-bio p{margin:0 0 8px}

/* ==========================================================================
   Committee: org chart
   ========================================================================== */
.nids-people .np-org-chart{display:flex;flex-direction:column;gap:34px;align-items:center}
.nids-people .np-org-level{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.nids-people .np-org-connected::before{
  content:"";position:absolute;top:-24px;left:50%;width:2px;height:24px;
  background:linear-gradient(180deg,transparent,var(--np-line));
}
.nids-people .np-org-label{
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--np-soft);
}
.nids-people .np-org-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.nids-people .np-node{
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  width:172px;padding:14px 12px;margin:0;font:inherit;color:inherit;
  background:#fff;border:1px solid var(--np-line);border-radius:14px;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.nids-people button.np-node{cursor:pointer;-webkit-appearance:none;appearance:none}
.nids-people .np-node:hover{transform:translateY(-4px);border-color:var(--np-accent);
  box-shadow:0 12px 26px -16px rgba(11,30,63,.35)}
.nids-people .np-node-photo{width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--np-bg)}
.nids-people .np-node-photo img{width:100%;height:100%;object-fit:cover;display:block}
.nids-people .np-node-photo.np-ph-init span{font-size:20px}
.nids-people .np-node .np-name{font-size:14px}
.nids-people .np-node .np-capacity{font-size:11.5px}

/* ==========================================================================
   Speakers: carousel
   ========================================================================== */
.nids-people .np-car{position:relative;display:flex;align-items:center;gap:8px}
.nids-people .np-car-track{
  display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;padding:6px 2px 14px;flex:1;
  scrollbar-width:thin;scrollbar-color:var(--np-line) transparent;
}
.nids-people .np-car-track::-webkit-scrollbar{height:6px}
.nids-people .np-car-track::-webkit-scrollbar-thumb{background:var(--np-line);border-radius:99px}
.nids-people .np-car-item{flex:0 0 clamp(230px,26vw,280px);scroll-snap-align:start}
.nids-people .np-car-nav{
  flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--np-line);color:var(--np-navy);cursor:pointer;
  box-shadow:0 6px 16px -8px rgba(11,30,63,.4);
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.nids-people .np-car-nav svg{width:19px;height:19px}
.nids-people .np-car-nav:hover{background:var(--np-navy);color:#fff}
.nids-people .np-car-nav:disabled{opacity:.32;cursor:default}
.nids-people .np-car-nav:disabled:hover{background:#fff;color:var(--np-navy)}

/* ==========================================================================
   Speakers: marquee
   ========================================================================== */
.nids-people .np-mq{
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.nids-people .np-mq-track{
  display:flex;gap:16px;width:max-content;
  animation:npScroll var(--speed,40s) linear infinite;
}
.nids-people .np-mq:hover .np-mq-track,
.nids-people .np-mq:focus-within .np-mq-track{animation-play-state:paused}
@keyframes npScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.nids-people .np-mq-item{flex:none}

/* ==========================================================================
   Speakers: stage
   ========================================================================== */
.nids-people .np-stage{display:grid;gap:18px}
.nids-people .np-stage-main{
  display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:24px;align-items:center;
  padding:24px;background:#fff;border:1px solid var(--np-line);
  border-radius:var(--np-radius);box-shadow:0 14px 36px -22px rgba(11,30,63,.45);
}
.nids-people .np-stage-photo{
  width:100%;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:var(--np-bg);
}
.nids-people .np-stage-photo img{width:100%;height:100%;object-fit:cover;display:block}
.nids-people .np-stage-photo.np-ph-init span{font-size:52px}
.nids-people .np-stage-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.nids-people .np-stage-body .np-name{font-size:clamp(21px,2.6vw,28px)}
.nids-people .np-eyebrow{
  align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--np-accent);
  padding:4px 11px;border-radius:99px;
  background:rgba(22,184,232,.10);border:1px solid rgba(22,184,232,.28);
}
.nids-people .np-stage-thumbs{
  display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;
  scrollbar-width:thin;
}
.nids-people .np-thumb{
  flex:none;width:104px;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:10px 8px;margin:0;font:inherit;color:inherit;cursor:pointer;
  background:#fff;border:1px solid var(--np-line);border-radius:13px;
  transition:border-color .28s ease,transform .28s ease,box-shadow .28s ease;
  -webkit-appearance:none;appearance:none;
}
.nids-people .np-thumb span{
  font-size:11.5px;font-weight:600;line-height:1.35;text-align:center;color:var(--np-navy);
}
.nids-people .np-thumb-photo{width:52px;height:52px;border-radius:50%;overflow:hidden;background:var(--np-bg)}
.nids-people .np-thumb-photo img{width:100%;height:100%;object-fit:cover;display:block}
.nids-people .np-thumb-photo.np-ph-init span{font-size:16px}
.nids-people .np-thumb:hover{transform:translateY(-3px);border-color:rgba(22,184,232,.5)}
.nids-people .np-thumb.is-on{
  border-color:var(--np-accent);
  box-shadow:0 0 0 3px rgba(22,184,232,.18);
}

/* ==========================================================================
   Speakers: masonry
   ========================================================================== */
.nids-people .np-masonry{
  display:grid;grid-template-columns:repeat(var(--cols,4),1fr);
  gap:clamp(12px,1.6vw,18px);grid-auto-rows:12px;
}
.nids-people .np-mcard{
  position:relative;overflow:hidden;border-radius:var(--np-radius);
  grid-row:span 21;padding:0;margin:0;border:1px solid var(--np-line);
  font:inherit;color:inherit;background:#fff;text-align:left;
  transition:transform .38s cubic-bezier(.22,.9,.3,1),box-shadow .38s ease;
}
.nids-people button.np-mcard{cursor:pointer;-webkit-appearance:none;appearance:none}
.nids-people .np-mcard.np-tall{grid-row:span 27}
.nids-people .np-mcard:hover{transform:translateY(-5px);box-shadow:0 18px 38px -16px rgba(11,30,63,.35)}
.nids-people .np-mphoto{position:absolute;inset:0;background:var(--np-bg)}
.nids-people .np-mphoto img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.22,.9,.3,1)}
.nids-people .np-mcard:hover .np-mphoto img{transform:scale(1.06)}
.nids-people .np-mbody{
  position:absolute;left:0;right:0;bottom:0;padding:16px 16px 14px;
  background:linear-gradient(180deg,transparent,rgba(6,16,34,.88) 55%);
  color:#fff;
}
.nids-people .np-mbody .np-name{color:#fff;font-size:15.5px}
.nids-people .np-mbody .np-capacity{color:#FFC58A}
.nids-people .np-mbody .np-org{color:rgba(255,255,255,.8)}

/* ==========================================================================
   Speakers: circles
   ========================================================================== */
.nids-people .np-circles{display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,30px);justify-content:center}
.nids-people .np-circ{
  width:150px;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
  padding:0;margin:0;background:none;border:0;font:inherit;color:inherit;
}
.nids-people button.np-circ{cursor:pointer;-webkit-appearance:none;appearance:none}
.nids-people .np-circ-photo{
  width:130px;height:130px;border-radius:50%;overflow:hidden;background:var(--np-bg);
  border:3px solid #fff;box-shadow:0 8px 24px -12px rgba(11,30,63,.5);
  transition:transform .4s cubic-bezier(.34,1.4,.5,1),box-shadow .4s ease;
}
.nids-people .np-circ-photo img{width:100%;height:100%;object-fit:cover;display:block}
.nids-people .np-circ-photo.np-ph-init span{font-size:36px}
.nids-people .np-circ:hover .np-circ-photo{
  transform:translateY(-6px) scale(1.05);
  box-shadow:0 18px 34px -14px rgba(11,30,63,.55);
}
.nids-people .np-circ .np-name{font-size:14.5px}
.nids-people .np-circ .np-capacity{font-size:12px}

/* ==========================================================================
   CTA
   ========================================================================== */
.nids-people .np-cta{margin-top:clamp(24px,3.4vw,38px);display:flex;justify-content:center}
.nids-people .np-btn{
  display:inline-flex;align-items:center;gap:10px;min-height:52px;
  padding:15px 28px;border-radius:12px;text-decoration:none;
  font-family:'Sora',sans-serif;font-weight:700;font-size:15px;color:#fff;
  background:linear-gradient(135deg,var(--np-navy),#12336A);
  box-shadow:0 12px 26px -14px rgba(11,30,63,.7);
  transition:transform .28s ease,box-shadow .28s ease;
}
.nids-people .np-btn svg{width:18px;height:18px;transition:transform .3s ease}
.nids-people .np-btn:hover{transform:translateY(-2px);color:#fff;text-decoration:none}
.nids-people .np-btn:hover svg{transform:translateX(4px)}

/* ==========================================================================
   Modal
   ========================================================================== */
.np-modal{
  position:fixed;inset:0;z-index:99999;display:none;
  align-items:center;justify-content:center;padding:20px;
}
.np-modal.is-open{display:flex}
.np-modal-bg{position:absolute;inset:0;background:rgba(6,16,34,.62);backdrop-filter:blur(3px);
  animation:npFade .3s ease}
.np-modal-box{
  position:relative;width:min(720px,100%);max-height:86vh;overflow:auto;
  background:#fff;border-radius:20px;padding:0;
  box-shadow:0 30px 70px -20px rgba(6,16,34,.6);
  animation:npPop .38s cubic-bezier(.22,.9,.3,1);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
@keyframes npFade{from{opacity:0}to{opacity:1}}
@keyframes npPop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.np-modal-close{
  position:absolute;top:14px;right:14px;z-index:2;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.92);border:1px solid #E3EAF4;color:#0B1E3F;cursor:pointer;
  box-shadow:0 4px 12px -4px rgba(11,30,63,.4);
}
.np-modal-close svg{width:18px;height:18px}
.np-modal-close:hover{background:#0B1E3F;color:#fff}
.np-modal-inner{display:grid;grid-template-columns:minmax(0,260px) 1fr;gap:0}
.np-modal-photo{background:#F5F8FC;min-height:100%}
.np-modal-photo img{width:100%;height:100%;object-fit:cover;display:block;min-height:260px}
.np-modal-photo.np-ph-init{display:grid;place-items:center;min-height:260px;
  background:linear-gradient(140deg,#0B1E3F,#16B8E8);color:#fff}
.np-modal-photo.np-ph-init span{font-family:'Sora',sans-serif;font-weight:700;font-size:52px}
.np-modal-body{padding:28px 28px 30px;display:flex;flex-direction:column;gap:7px;min-width:0}
.np-modal-body h3{
  font-family:'Sora',sans-serif;font-weight:700;font-size:23px;line-height:1.24;
  color:#0B1E3F;margin:0;
}
.np-modal-body .np-capacity{color:#F58220;font-weight:600;font-size:14.5px;margin:0}
.np-modal-body .np-prof,
.np-modal-body .np-org{color:#5A6E8C;font-size:13.5px;margin:0}
.np-modal-body .np-topic{font-style:italic;color:#1A2333;margin:6px 0 0;font-size:14px}
.np-modal-bio{margin-top:12px;font-size:14.5px;line-height:1.68;color:#3C4B60}
.np-modal-bio p{margin:0 0 10px}

/* ==========================================================================
   Reveal animation
   ========================================================================== */
.nids-people [data-rv]{opacity:0}
.nids-people [data-rv].is-in{
  animation:npEnter .8s cubic-bezier(.34,1.28,.5,1) both;
  animation-delay:var(--d,0ms);
}
@keyframes npEnter{
  0%{opacity:0;transform:translateY(34px) scale(.94);filter:blur(7px)}
  60%{filter:blur(0)}
  100%{opacity:1;transform:none;filter:none}
}
/* The card photo settles in with a gentle zoom as the card lands. */
.nids-people [data-rv] .np-photo img,
.nids-people [data-rv] .np-ph{transform:scale(1.12)}
.nids-people [data-rv].is-in .np-photo img,
.nids-people [data-rv].is-in .np-ph{
  animation:npPhotoSettle 1.1s cubic-bezier(.22,.9,.3,1) both;
  animation-delay:var(--d,0ms);
}
@keyframes npPhotoSettle{from{transform:scale(1.12)}to{transform:none}}
/* Animations switched off in settings */
.nids-people.np-noanim [data-rv]{opacity:1;animation:none}
.nids-people.np-noanim [data-rv].is-in{animation:none}
.nids-people.np-noanim [data-rv] .np-photo img,
.nids-people.np-noanim [data-rv] .np-ph{transform:none;animation:none}
.nids-people.np-noanim .np-h2::after{width:88px;transition:none}
.nids-people.np-noanim .np-mq-track{animation:none}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:1100px){
  .nids-people .np-row-grid{grid-template-columns:repeat(min(var(--cols,4),3),1fr)}
  .nids-people .np-masonry{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
  .nids-people .np-row-grid{grid-template-columns:repeat(2,1fr)}
  .nids-people .np-row-lead{grid-template-columns:repeat(2,1fr);max-width:none}
  .nids-people .np-masonry{grid-template-columns:repeat(2,1fr)}
  .nids-people .np-stage-main{grid-template-columns:1fr;gap:18px}
  .nids-people .np-stage-photo{max-width:260px}
  /* The modal is appended to <body>, OUTSIDE .nids-people, so its responsive
     rules must NOT be scoped to .nids-people or they never match. */
  .np-modal-inner{grid-template-columns:1fr !important}
  .np-modal-photo img{max-height:280px}
}
@media(max-width:560px){
  /* Social icons need a 44px target on touch screens, not 32px. */
  .nids-people .np-soc{width:44px;height:44px;border-radius:12px}
  .nids-people .np-soc svg{width:18px;height:18px}
  .nids-people .np-socs{gap:10px}

  /* One column everywhere: two tiny cards side by side are unreadable. */
  .nids-people .np-row-grid,
  .nids-people .np-row-lead{grid-template-columns:1fr}
  .nids-people .np-masonry{grid-template-columns:1fr;grid-auto-rows:auto}
  .nids-people .np-mcard,
  .nids-people .np-mcard.np-tall{grid-row:auto;aspect-ratio:4/3}
  .nids-people .np-card{max-width:none}
  .nids-people .np-spot-card{flex-direction:column;gap:14px}
  .nids-people .np-spot-photo{width:100%;height:auto;aspect-ratio:1/1;max-width:220px}
  .nids-people .np-car-nav{display:none}   /* swipe is the natural gesture here */
  .nids-people .np-car-item{flex-basis:min(78vw,300px)}
  .nids-people .np-btn{width:100%;justify-content:center}
  .np-modal-box{max-height:92vh}
  .np-modal-body{padding:22px 20px 24px}
  /* Mobile modal: a clean vertical card. Photo on top at a sensible ratio,
     name at a readable size that never breaks per-letter, close button clear
     of the content. Unscoped, because the modal lives on <body>. */
  .np-modal-box{width:min(440px,94vw)}
  .np-modal-inner{grid-template-columns:1fr !important}
  .np-modal-photo{aspect-ratio:4/3;min-height:0}
  .np-modal-photo img{width:100%;height:100%;max-height:none;min-height:0;object-fit:cover}
  .np-modal-photo.np-ph-init{min-height:0;aspect-ratio:4/3}
  .np-modal-body h3{font-size:21px;line-height:1.22;overflow-wrap:break-word;word-break:normal;hyphens:none;padding-right:34px}
  .np-modal-body{padding:20px 18px 24px}
  .np-modal-close{top:10px;right:10px;width:34px;height:34px}

  /* ------------------------------------------------------------------
     Names must not be squeezed into narrow columns on a phone.
     The compact layouts below are re-laid-out as full-width rows so a
     long name has the whole screen, instead of wrapping onto 3 lines
     inside a 130px box.
     ------------------------------------------------------------------ */

  /* Circles: photo beside the text, not above it. */
  .nids-people .np-circles{flex-direction:column;gap:10px}
  .nids-people .np-circ{
    width:100%;flex-direction:row;align-items:center;gap:14px;text-align:left;
    padding:10px 14px;background:#fff;border:1px solid var(--np-line);border-radius:14px;
    flex-wrap:wrap;
  }
  .nids-people .np-circ-photo{width:64px;height:64px;flex:none;border-width:2px}
  .nids-people .np-circ-photo.np-ph-init span{font-size:20px}
  /* The name takes all the space left beside the photo, so it wraps at most
     twice instead of stacking into a narrow column. */
  .nids-people .np-circ .np-name{
    flex:1 1 calc(100% - 78px);min-width:0;text-align:left;font-size:16px;
  }
  .nids-people .np-circ .np-capacity{
    flex:1 1 100%;text-align:left;margin-left:78px;margin-top:-4px;
  }
  .nids-people .np-circ:hover .np-circ-photo{transform:none}

  /* Org chart: full-width rows, photo on the left. */
  .nids-people .np-node{
    width:100%;flex-direction:row;align-items:center;gap:14px;text-align:left;
    padding:12px 14px;flex-wrap:wrap;
  }
  .nids-people .np-node-photo{width:56px;height:56px;flex:none}
  .nids-people .np-node-photo.np-ph-init span{font-size:18px}
  .nids-people .np-node .np-name{
    flex:1 1 calc(100% - 70px);min-width:0;text-align:left;font-size:15.5px;
  }
  .nids-people .np-node .np-capacity{
    flex:1 1 100%;text-align:left;font-size:12.5px;margin-left:70px;margin-top:-4px;
  }
  .nids-people .np-org-row{gap:10px;width:100%}
  .nids-people .np-org-chart{gap:26px}

  /* Stage: keep the name inside the card. */
  .nids-people .np-stage-body{min-width:0}
  .nids-people .np-stage-body .np-name{font-size:clamp(19px,5.2vw,24px);min-width:0}

  /* Stage thumbnails: wider, so names are not chopped. */
  .nids-people .np-thumb{width:120px}
  .nids-people .np-thumb span{font-size:12px}

  /* Compact list rows: give the text block real room. */
  .nids-people .np-lrow{gap:12px;padding:12px 14px}
  .nids-people .np-lphoto{width:52px;height:52px}
  .nids-people .np-lrow .np-name{font-size:15.5px}
  /* Social icons inside a list row would steal the width a name needs. */
  .nids-people .np-lrow .np-socs{display:none}

  /* Marquee cards need to be readable, not miniature. */
  .nids-people .np-compact{width:min(72vw,260px)}
  .nids-people .np-compact .np-name{font-size:16px}

  /* Leadership cards drop to the normal size once stacked. */
  .nids-people .np-big .np-name{font-size:18.5px}
  .nids-people .np-big .np-body{padding:18px 18px 20px}
}

@media(max-width:380px){
  .nids-people .np-circ-photo{width:56px;height:56px}
  .nids-people .np-circ .np-name{flex-basis:calc(100% - 70px)}
  .nids-people .np-circ .np-capacity{margin-left:70px}
  .nids-people .np-node-photo{width:50px;height:50px}
  .nids-people .np-node .np-name{flex-basis:calc(100% - 64px)}
  .nids-people .np-node .np-capacity{margin-left:64px}
  .nids-people .np-lphoto{width:48px;height:48px}
  .nids-people .np-name{font-size:15.5px}
  .nids-people .np-big .np-name{font-size:17.5px}
  .nids-people .np-thumb{width:110px}
}

/* ==========================================================================
   Mobile-native committee presentation (v1.4.0)
   On phones the committee is not the desktop grid squeezed into one column.
   Tier rows become horizontal, swipeable, snap-scrolling rails, and cards take
   a compact photo-left shape that reads like a contact row. Distinct from
   desktop by design.
   ========================================================================== */
@media (max-width:560px){

  /* --- Tier rows become horizontal swipe rails --- */
  .nids-people.np-committee .np-row-grid,
  .nids-people.np-committee .np-row-lead{
    display:flex;
    grid-template-columns:none;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:4px 16px 12px;
    margin:0 -16px;               /* bleed to screen edges so it feels swipeable */
    scroll-padding-left:16px;
  }
  .nids-people.np-committee .np-row-grid::-webkit-scrollbar,
  .nids-people.np-committee .np-row-lead::-webkit-scrollbar{display:none}

  /* Each card is a fixed-width snap point that KEEPS the full portrait shape —
     a large photo on top with the details below — so members stay prominent,
     not shrunk into thumbnails. You swipe through full cards like a gallery. */
  .nids-people.np-committee .np-row-grid > .np-card,
  .nids-people.np-committee .np-row-lead > .np-card{
    flex:0 0 74%;
    max-width:340px;
    scroll-snap-align:center;
    display:flex;
    flex-direction:column;
  }
  .nids-people.np-committee .np-card .np-photo{
    width:100%;aspect-ratio:1/1;border-radius:0;
  }
  .nids-people.np-committee .np-card .np-body{padding:16px 16px 18px;gap:5px}
  .nids-people.np-committee .np-card .np-name{font-size:17px}

  /* The leadership row shows a slightly wider hero card, same portrait shape. */
  .nids-people.np-committee .np-row-lead > .np-card.np-big{
    flex-basis:82%;max-width:360px;
  }
  .nids-people.np-committee .np-row-lead .np-big .np-photo{width:100%;height:auto}

  /* Tier heading gets a small "swipe" affordance hint */
  .nids-people.np-committee .np-tier-t{
    display:flex;align-items:center;justify-content:space-between;
  }
  .nids-people.np-committee .np-tier-t::after{
    content:"swipe ›";
    font-family:'Inter',sans-serif;font-size:10.5px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--np-accent);
    opacity:.75;
  }

  /* Staggered mobile entrance: cards rise as the rail scrolls into view */
  .nids-people.np-committee .np-card{will-change:transform}

  /* Press ripple target */
  .nids-people button.np-card{position:relative;overflow:hidden}
}

/* Ripple element (created by JS on tap) */
.nids-people .np-ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(22,184,232,.35), rgba(22,184,232,0) 70%);
  transform:translate(-50%,-50%) scale(0);
  animation:npRipple .55s ease-out forwards;
}
@keyframes npRipple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ==========================================================================
   Accessibility
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  .nids-people [data-rv]{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important}
  .nids-people [data-rv] .np-photo img,
  .nids-people [data-rv] .np-ph{transform:none !important;transition:none !important}
  .nids-people .np-h2::after{width:88px;transition:none}
  .nids-people .np-mq-track{animation:none}
  .nids-people .np-card,
  .nids-people .np-card:hover,
  .nids-people .np-photo img,
  .nids-people .np-circ-photo,
  .nids-people .np-mcard,
  .nids-people .np-lrow,
  .nids-people .np-node{transition:none !important;transform:none !important}
  .np-modal-box,.np-modal-bg{animation:none}
  .nids-people .np-ripple{display:none}
  .nids-people button.np-card:active{transform:none}
}

/* Content must still show if JavaScript never runs */
.nids-people.np-jsoff [data-rv]{opacity:1;transform:none}