/* ProMed VAs / PMWEB-VADECK-01 — preview-only, reference-inspired portrait deck.
   DO NOT edit or substitute existing brand art, headshot sprite, or site behavior. */
#page-main .hero-img-grid{
  height:clamp(580px,58vw,742px);
  max-height:none;
  align-self:center;
  min-width:0;
}
#page-main .hero-img-grid .himg-main{
  top:0;right:1%;
  width:92%;
  height:calc(100% - 146px);
  min-height:0;
}
#page-main .hero-img-grid .hero-orbit{
  height:calc(100% - 130px);
  top:3%;right:4%;opacity:.34;
}
#page-main .hero-img-grid .va-profile-deck{
  position:absolute;
  bottom:65px;
  left:50%;
  translate:-50% 0;
  width:min(107%,690px);
  height:328px;
  z-index:7;
  isolation:isolate;
  pointer-events:none;
}
#page-main .va-profile-deck .va-card{
  --deck-angle:0deg;
  position:absolute;
  inset:auto; /* Clear inherited .va-card.pa/.bill top offsets before bottom anchoring. */
  display:block;
  width:clamp(168px,32%,220px);
  height:286px;
  padding:0;
  margin:0;
  border-radius:23px;
  overflow:visible;
  color:var(--n100);
  background:linear-gradient(150deg,#23332e 0%,#141e1b 63%,#101616 100%);
  border:1px solid rgba(216,173,85,.53);
  box-shadow:0 18px 40px rgba(0,0,0,.46),0 0 0 1px rgba(181,138,226,.10) inset;
  transform:rotate(var(--deck-angle));
  transform-origin:center 85%;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease;
  pointer-events:auto;
  backface-visibility:hidden;
  will-change:auto;
}
#page-main .va-profile-deck .va-card.pa{
  --deck-angle:-1deg;
  /* Center by left offset, not translate; float animation owns translate. */
  left:calc(50% - clamp(84px,16%,110px));
  translate:none;
  bottom:31px;
  z-index:13;
}
#page-main .va-profile-deck .va-card.bill{
  --deck-angle:-8deg;
  left:6%;
  bottom:12px;
  z-index:11;
}
#page-main .va-profile-deck .va-card.admin{
  --deck-angle:8deg;
  right:5%;
  bottom:12px;
  z-index:12;
}
#page-main .va-profile-deck .deck-card-inner{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
  border-radius:22px;
  padding:8px 8px 12px;
}
#page-main .va-profile-deck .va-avatar{
  flex:none;
  display:block;
  width:100%;
  height:150px;
  margin:0 0 10px;
  border-radius:16px 16px 7px 7px;
  border:1px solid rgba(216,173,85,.25);
  background-image:url('promed-talent-headshots.webp');
  background-color:#24332e;
  background-repeat:no-repeat;
  background-size:423.3% auto;
  background-position:var(--px) 25%;
  box-shadow:none;
}
#page-main .va-profile-deck .va-copy{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  min-width:0;
  margin:0 3px 6px;
}
#page-main .va-profile-deck .va-name{
  display:block;
  color:#f8f6f1;
  font-size:clamp(.89rem,1.18vw,1.04rem);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
#page-main .va-profile-deck .va-title{
  display:block;
  color:#d9b7f4;
  font-size:clamp(.74rem,1vw,.87rem);
  line-height:1.24;
  font-weight:600;
  text-wrap:balance;
}
#page-main .va-profile-deck .va-dot{display:none}
#page-main .va-profile-deck .va-experience{
  color:#b7d5c7;
  font-size:.72rem;
  line-height:1.25;
}
#page-main .va-profile-deck .va-tag{
  display:block;
  align-self:center;
  width:max-content;
  max-width:calc(100% - 10px);
  text-align:center;
  padding:5px 10px;
  margin:auto 0 0;
  border:1px solid rgba(181,138,226,.38);
  background:rgba(181,138,226,.15);
  color:#e5c9fa;
  border-radius:30px;
  font-size:.68rem;
  line-height:1.2;
  font-weight:600;
  white-space:normal;
  overflow-wrap:anywhere;
}
#page-main .va-profile-deck .va-card.pa .va-tag{
  border-color:rgba(216,173,85,.44);
  background:rgba(216,173,85,.13);
  color:#f4d792;
}
#page-main .va-profile-deck .va-card.admin .va-tag{
  border-color:rgba(75,196,147,.42);
  background:rgba(7,129,92,.2);
  color:#a3e8c9;
}
@keyframes promed-deck-arrive{
  from{opacity:.7;transform:translateY(15px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
/* Existing cinematic idle levitation stays on card exterior via its translate property.
   New entrance only animates INNER layer to avoid competing for the same transform. */
html.cm-ready:not(.cm-motion-off) #page-main .va-profile-deck .deck-card-inner{
  animation:promed-deck-arrive .68s cubic-bezier(.16,1,.3,1) both;
}
html.cm-ready:not(.cm-motion-off) #page-main .va-profile-deck .va-card.bill .deck-card-inner{animation-delay:.12s}
html.cm-ready:not(.cm-motion-off) #page-main .va-profile-deck .va-card.pa .deck-card-inner{animation-delay:.22s}
html.cm-ready:not(.cm-motion-off) #page-main .va-profile-deck .va-card.admin .deck-card-inner{animation-delay:.32s}
@media(hover:hover) and (pointer:fine){
  html:not(.cm-motion-off) #page-main .va-profile-deck .va-card:hover{
    transform:rotate(0deg) scale(1.045);
    z-index:20;
    border-color:#f1c974;
    box-shadow:0 28px 60px rgba(0,0,0,.54),0 0 22px rgba(216,173,85,.12);
  }
}
@media(min-width:621px) and (max-width:1200px){
  #page-main .hero-img-grid{height:clamp(570px,60vw,650px)}
  #page-main .hero-img-grid .va-profile-deck{width:104%;height:285px}
  #page-main .hero-img-grid .himg-main{height:calc(100% - 120px)}
  #page-main .va-profile-deck .va-card{width:clamp(150px,33%,192px);height:263px}
  #page-main .va-profile-deck .va-card.bill{left:1%}
  #page-main .va-profile-deck .va-card.admin{right:1%}
  #page-main .va-profile-deck .va-card.pa{bottom:21px}
  #page-main .va-profile-deck .va-avatar{height:128px}
}
@media(max-width:900px){
  #page-main .hero-img-grid{display:block;height:610px;max-width:720px;width:100%;margin:0 auto}
  #page-main .hero-img-grid .himg-main{width:93%;right:3%;height:calc(100% - 142px)}
  #page-main .hero-img-grid .va-profile-deck{width:min(96%,630px)}
}
@media(max-width:620px){
  #page-main .hero-img-grid{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    height:auto;
    min-height:0;
    width:100%;
    max-height:none;
    overflow:visible;
    gap:0;
    margin:0 auto;
  }
  #page-main .hero-img-grid .himg-main{
    position:relative;
    inset:auto;
    flex:none;
    width:100%;
    height:clamp(265px,83vw,360px);
    border-radius:24px;
  }
  #page-main .hero-img-grid .hero-orbit{display:none}
  #page-main .hero-img-grid .va-profile-deck{
    position:relative;
    inset:auto;
    left:auto;
    translate:none;
    width:100%;
    min-width:0;
    height:290px;
    display:flex;
    align-items:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-left:12px;
    -webkit-overflow-scrolling:touch;
    padding:0 14px 28px;
    margin:-54px auto 0;
    gap:0;
    isolation:auto;
    pointer-events:auto;
  }
  #page-main .hero-img-grid .va-profile-deck:focus-visible{
    outline:3px solid #e1b866;
    outline-offset:2px;
  }
  #page-main .va-profile-deck .va-card,
  #page-main .va-profile-deck .va-card.pa,
  #page-main .va-profile-deck .va-card.bill,
  #page-main .va-profile-deck .va-card.admin{
    position:relative;
    inset:auto;
    left:auto;
    right:auto;
    bottom:auto;
    translate:none;
    flex:0 0 clamp(168px,51vw,205px);
    width:clamp(168px,51vw,205px);
    height:256px;
    transform:rotate(var(--deck-angle));
    scroll-snap-align:center;
    margin:8px -16px 0 0;
    z-index:auto;
  }
  #page-main .va-profile-deck .va-card.bill{--deck-angle:-4deg;z-index:2}
  #page-main .va-profile-deck .va-card.pa{--deck-angle:0deg;z-index:3}
  #page-main .va-profile-deck .va-card.admin{--deck-angle:4deg;z-index:2;margin-right:0}
  #page-main .va-profile-deck .va-avatar{height:126px}
  #page-main .va-profile-deck .va-name{font-size:.92rem}
  #page-main .va-profile-deck .va-title{font-size:.76rem}
  #page-main .va-profile-deck .va-tag{font-size:.64rem;padding:5px 8px}
  /* Small screens should retain visibility of faces and roles, without idle card movement. */
  html.cm-ready:not(.cm-motion-off) #page-main .va-profile-deck .va-card{animation:none}
}
@media(prefers-reduced-motion:reduce){
  html:not(.cm-motion-opt-in) #page-main .va-profile-deck .deck-card-inner{animation:none!important;opacity:1!important}
  html:not(.cm-motion-opt-in) #page-main .va-profile-deck .va-card{transition:none!important}
}
html.cm-motion-off #page-main .va-profile-deck .deck-card-inner{animation:none!important;opacity:1!important}
html.cm-motion-off #page-main .va-profile-deck .va-card{transition:none!important}


/* PMWEB-VADECK-02 — 80%-scale profile deck with >=95% clear hero photograph.
   Shrink portraits, text and badges together with transform scale.
   Preserve outer levitation (translate) and inner staggered reveal.
   Extend photo's grid reserve rather than pushing cards across the photo.
   Do not use CSS scale property: cm-motion-off resets it. */
#page-main .hero-img-grid{
  height:clamp(750px,72vw,850px);
}
#page-main .hero-img-grid .himg-main{
  height:calc(100% - 255px);
}
#page-main .hero-img-grid .va-profile-deck{
  bottom:12px;
}
#page-main .va-profile-deck .va-card{
  transform:rotate(var(--deck-angle)) scale(.8);
}
@media(hover:hover) and (pointer:fine){
  html:not(.cm-motion-off) #page-main .va-profile-deck .va-card:hover{
    transform:rotate(0deg) scale(.836);
  }
}
@media(min-width:621px) and (max-width:1200px){
  #page-main .hero-img-grid{
    height:clamp(705px,74vw,810px);
  }
  #page-main .hero-img-grid .himg-main{
    height:calc(100% - 233px);
  }
  #page-main .hero-img-grid .va-profile-deck{
    bottom:12px;
  }
}
@media(min-width:621px) and (max-width:900px){
  #page-main .hero-img-grid{
    height:clamp(710px,96vw,820px);
  }
  #page-main .hero-img-grid .himg-main{
    height:calc(100% - 233px);
  }
}
@media(max-width:620px){
  #page-main .hero-img-grid{
    height:auto;
  }
  #page-main .hero-img-grid .himg-main{
    height:clamp(265px,83vw,360px);
  }
  #page-main .hero-img-grid .va-profile-deck{
    bottom:auto;
    height:268px;
    margin:-50px auto 0;
  }
  #page-main .va-profile-deck .va-card,
  #page-main .va-profile-deck .va-card.pa,
  #page-main .va-profile-deck .va-card.bill,
  #page-main .va-profile-deck .va-card.admin{
    transform:rotate(var(--deck-angle)) scale(.8);
    margin-right:-30px;
  }
  #page-main .va-profile-deck .va-card.admin{
    margin-right:0;
  }
}


/* PMWEB-VADECK-03 — cohesive close-set trio, approved brand accents unchanged.
   Move only outer cards inward: center card remains the visual anchor.
   No size, photography, photo clearance, z-index or motion changes. */
@media(min-width:1201px){
  #page-main .va-profile-deck .va-card.bill{left:9%}
  #page-main .va-profile-deck .va-card.admin{right:9%}
}
@media(min-width:621px) and (max-width:1200px){
  #page-main .va-profile-deck .va-card.bill{left:8.5%}
  #page-main .va-profile-deck .va-card.admin{right:9%}
}
@media(max-width:620px){
  /* The compact, horizontally swipeable deck is already close-set.
     Use subtle additional overlap without cropping names and badges. */
  #page-main .va-profile-deck .va-card:not(.admin){margin-right:-36px}
}