/* MYCELX Leadership page: hero, Management + Board of Directors portrait cards (hover = navy/blue tile + "View Bio"),
   and the bio dialogs (always in the HTML, shown on demand by mx-leadership.js).
   Values marked "reference" are PSD px x 0.72 (the 1440 design); the desktop layout multiplies them by --mx-m via --u (see mx-core.js). */

/* ---------- Hero: navy glow, headline, the seven-person cut-out standing on the bottom edge ---------- */
.mx-lhero{--tw:112%;position:relative;overflow:hidden;isolation:isolate;margin-top:calc(-1 * (var(--mx-hdr-top) + var(--mx-hdr-h)) - env(safe-area-inset-top,0px));
  padding:calc(var(--mx-hdr-top) + var(--mx-hdr-h) + 52px) var(--mx-gutter) calc(var(--tw) * .3638);text-align:center;color:#fff;background:#07151f}
.mx-lhero-bg{position:absolute;inset:0;z-index:-1;transform-origin:50% 100%;background:#07151f url("../img/leadership/leadership-hero-bg.webp") 50% 100%/cover no-repeat}
.mx-lhero-copy{position:relative;z-index:1}
.mx-lhero .mx-eyebrow{color:var(--mx-blue-on-dark)}
.mx-lhero h1{font:700 42px/1.06 var(--mx-font-head);max-width:12em;margin:12px auto 0;color:#fff;letter-spacing:0}
.mx-lhero-team{position:absolute;left:50%;bottom:0;width:var(--tw);max-width:none;margin-left:calc(var(--tw) * -.5);height:auto;transform-origin:50% 100%;pointer-events:none}

/* ---------- People sections ---------- */
.mx-people{padding:64px var(--mx-gutter) 72px;text-align:center;background:#fff}
.mx-people--board{background:#ededed}
.mx-people-head h2{font:700 34px/1.1 var(--mx-font-head);color:var(--mx-navy);margin-top:10px;letter-spacing:0}
.mx-people-list{list-style:none;display:grid;gap:60px;max-width:300px;margin:64px auto 0}
.mx-leader{min-width:0}

/* the card is one real button: tile with the cut-out, then name + title; its accessible name is "Name Title, view bio" */
.mx-card{position:relative;display:block;width:100%;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mx-lead-tile{display:block;position:relative;aspect-ratio:333/349;border-radius:var(--mx-radius-img);background:#efefef}
.mx-people--board .mx-lead-tile{background:#fff}
.mx-lead-tile::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .35s ease;   /* hover state from the PSD: navy at the top glowing to blue at the bottom */
  background:radial-gradient(90% 62% at 50% 100%,rgba(43,118,247,.95),rgba(43,118,247,0) 78%),linear-gradient(180deg,#091824 0%,#0d2140 34%,#1a4690 66%,#2469d8 100%)}
.mx-cut{position:absolute;left:0;bottom:0;width:100%;display:block;pointer-events:none}
.mx-cut img{width:100%;height:auto;transform-origin:50% 100%;clip-path:inset(0 round 0 0 var(--mx-radius-img) var(--mx-radius-img))}   /* head may rise above the tile, the body is cut at its rounded bottom */
.mx-label{position:relative;display:block;margin-top:16px}
.mx-lab{display:block;transition:opacity .3s ease}
.mx-name{display:block;font:700 20px/1.2 var(--mx-font-head);color:var(--mx-blue-text)}
.mx-role{display:block;max-width:15em;margin:6px auto 0;font-size:14px;line-height:1.4;color:var(--mx-grey);text-wrap:balance}
.mx-view{position:absolute;left:0;right:0;top:0;opacity:0;transition:opacity .3s ease;font:700 20px/1.2 var(--mx-font-head);color:var(--mx-blue-text)}
/* hover and keyboard focus swap the name for "View Bio" (hover only where a pointer can hover; touch keeps the name and shows a small hint) */
.mx-card:focus-visible .mx-lead-tile::before{opacity:1}
.mx-card:focus-visible .mx-lab{opacity:0}
.mx-card:focus-visible .mx-view{opacity:1}
@media (hover:hover){
  .mx-card:hover .mx-lead-tile::before{opacity:1}
  .mx-card:hover .mx-lab{opacity:0}
  .mx-card:hover .mx-view{opacity:1}
}
@media (hover:none){
  .mx-view{position:static;opacity:1;margin-top:8px;font-size:14px;text-decoration:underline;text-underline-offset:3px}
  .mx-card:focus-visible .mx-lab{opacity:1}
  .mx-card:focus-visible .mx-view{opacity:1}
}
@media (prefers-reduced-motion:reduce){.mx-lead-tile::before,.mx-lab,.mx-view{transition:none}}

/* ---------- Bio dialogs (hidden until opened) ---------- */
.mx-bio[hidden]{display:none}
.mx-bio{position:fixed;inset:0;z-index:130;display:flex;overflow-y:auto;overscroll-behavior:contain;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mx-bio-panel{position:relative;display:flex;flex-direction:column;width:100%;min-height:100%;margin:auto;background:#fff;overflow:hidden}
.mx-bio-close{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 22px;border:0;border-radius:999px;background:var(--mx-blue);color:#fff;font:400 14px/1 var(--mx-font-body);letter-spacing:.02em;text-transform:uppercase;cursor:pointer;transition:background .25s ease}
.mx-bio-close svg{width:.72em;height:1em;flex:none}
.mx-bio-close:active{background:var(--mx-blue-hover)}
@media (hover:hover){.mx-bio-close:hover{background:var(--mx-blue-hover)}}
@media (prefers-reduced-motion:reduce){.mx-bio-close{transition:none}}
/* stacked layout (mobile + tablet portrait): the close pill floats over the photo and stays reachable while the bio scrolls */
.mx-bio-close{position:sticky;top:12px;align-self:flex-start;margin:12px 0 -56px 12px;z-index:3}
.mx-bio-photo{position:relative;aspect-ratio:5/4;overflow:hidden;background:#efefef}
.mx-bio-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transform-origin:50% 100%}
.mx-bio-text{padding:28px var(--mx-gutter) 44px;text-align:left}
.mx-bio-name{font:700 36px/1.05 var(--mx-font-head);color:#000;letter-spacing:0}
.mx-bio-role{margin-top:12px;font:700 14px/1.35 var(--mx-font-head);letter-spacing:.1em;text-transform:uppercase;color:var(--mx-blue-text)}
.mx-bio-body{margin-top:22px;color:var(--mx-grey)}
.mx-bio-body p{font-size:15px;line-height:1.6;margin:0 0 1.1em;text-wrap:pretty}
.mx-bio-body p:last-child{margin-bottom:0}
.mx-bio-sig{width:min(calc(var(--sw) * .58px),72%);height:auto;margin-top:26px}

/* per-person geometry from the bio artboards: photo left / width as % of the panel, panel height as a fraction of its width, signature width in PSD px */
#mx-bio-connie-mixon{--pl:8.76%;--pw:35.55%;--ph:.5774;--sw:354}
#mx-bio-tom-lamb{--pl:0%;--pw:43.99%;--ph:.6471;--sw:241}
#mx-bio-torben-wetche{--pl:0%;--pw:43.92%;--ph:.6563;--sw:250}
#mx-bio-hal-alper{--pl:.14%;--pw:45.9%;--ph:.6796;--sw:325}
#mx-bio-kimberly-slayton{--pl:8.7%;--pw:34.16%;--ph:.5474;--sw:331}
#mx-bio-jim-weidler{--pl:1.49%;--pw:42.86%;--ph:.6124;--sw:359}
#mx-bio-matthew-goysich{--pl:4.74%;--pw:36.63%;--ph:.6124;--sw:429}

/* ---------- Animation start states ---------- */
.mx-anim :is(.mx-lhero h1,.mx-people h2){visibility:hidden}
.mx-anim .mx-lhero-team{opacity:0}
.mx-anim .mx-cut img{opacity:0}
.mx-anim .mx-lab :is(.mx-name,.mx-role){opacity:0}

/* ---- wide mobile (>= 550px) ---- */
@media (min-width:550px){
  .mx.mx .mx-people-list{max-width:540px;gap:56px 32px;grid-template-columns:repeat(4,minmax(0,1fr))}
  .mx.mx .mx-people--mgmt .mx-leader{grid-column:span 2}
  .mx.mx .mx-people--mgmt .mx-leader:nth-child(5){grid-column:2 / 4}
  .mx.mx .mx-people--board .mx-people-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mx.mx .mx-people--board .mx-leader{grid-column:auto}
  .mx.mx .mx-bio-photo{aspect-ratio:16/10}
}

/* ---- tablet (>= 768px) ---- */
@media (min-width:768px){
  .mx.mx .mx-lhero{--tw:88%;padding-top:calc(var(--mx-hdr-top) + var(--mx-hdr-h) + 72px)}
  .mx.mx .mx-lhero h1{font-size:calc(42px + 22.5*(var(--mx-frame-w) - 390px)/810);margin-top:calc(12px + 4*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-people{padding:104px var(--mx-gutter) 112px}
  .mx.mx .mx-people-head h2{font-size:calc(34px + 30.5*(var(--mx-frame-w) - 390px)/810)}
  .mx.mx .mx-people-list{max-width:720px;gap:72px 24px;margin-top:72px;grid-template-columns:repeat(6,minmax(0,1fr))}
  .mx.mx .mx-people--mgmt .mx-leader{grid-column:span 2}
  .mx.mx .mx-people--mgmt .mx-leader:nth-child(4){grid-column:2 / 4}
  .mx.mx .mx-people--mgmt .mx-leader:nth-child(5){grid-column:4 / 6}
  .mx.mx .mx-people--board .mx-people-list{max-width:520px;gap:72px 32px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .mx.mx .mx-people--board .mx-leader{grid-column:auto}
  .mx.mx .mx-name,.mx.mx .mx-view{font-size:calc(20px + 1.4*(var(--mx-frame-w) - 390px)/810)}
  .mx.mx .mx-role{font-size:15px}
  .mx.mx .mx-bio{padding:48px var(--mx-gutter)}
  .mx.mx .mx-bio-panel{max-width:720px;min-height:0;border:1px solid #dedcdc;border-radius:var(--mx-radius-img);box-shadow:0 24px 64px rgba(9,23,34,.12)}
  .mx.mx .mx-bio-photo{aspect-ratio:16/9}
  .mx.mx .mx-bio-text{padding:36px 48px 56px}
  .mx.mx .mx-bio-name{font-size:44px}
  .mx.mx .mx-bio-role{font-size:16px}
  .mx.mx .mx-bio-body p{font-size:16px}
  .mx.mx .mx-bio-close{margin:16px 0 -60px 16px}
}

/* ---- tablet landscape (>= 1024px): four across on the Board, bio in two columns like the PSD ---- */
@media (min-width:1024px){
  .mx.mx .mx-lhero{--tw:80%}
  .mx.mx .mx-people-list{max-width:900px;gap:72px 28px}
  .mx.mx .mx-people--board .mx-people-list{max-width:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:72px 20px}
  .mx.mx .mx-bio{padding:var(--mx-gutter)}
  .mx.mx .mx-bio-panel{display:grid;grid-template-columns:48.9% minmax(0,1fr);grid-template-rows:auto 1fr;max-width:1160px}
  .mx.mx .mx-bio-panel::before{content:"";grid-column:1 / -1;grid-row:1 / span 2;padding-top:calc(var(--ph) * 100%)}   /* keeps the PSD panel proportion as a minimum height */
  .mx.mx .mx-bio-photo{position:absolute;inset:0;aspect-ratio:auto;background:none;pointer-events:none}
  .mx.mx .mx-bio-photo img{inset:auto;left:var(--pl);bottom:0;width:var(--pw);height:auto;object-fit:fill}
  .mx.mx .mx-bio-close{position:relative;top:auto;grid-column:2;grid-row:1;justify-self:start;margin:calc(var(--mx-bio-top,86px)) 0 0 0}
  .mx.mx .mx-bio-text{grid-column:2;grid-row:2;padding:22px 7% 56px 0}
  .mx.mx .mx-bio-name{font-size:min(50px,4.5vw)}
  .mx.mx .mx-bio-role{font-size:14px;margin-top:10px}
  .mx.mx .mx-bio-body{margin-top:26px}
  .mx.mx .mx-bio-body p{font-size:15px}
  .mx.mx .mx-bio-sig{width:calc(var(--sw) * .5px);margin:14px 0 0 -10px}
}

/* ---- desktop (>= 1200px): the PSD ---- */
@media (min-width:1200px){
  .mx.mx .mx-lhero,.mx.mx .mx-people,.mx.mx .mx-bio{--u:calc(.72px * var(--mx-m))}
  .mx.mx .mx-lhero{--tw:calc(1057px * var(--mx-m));height:calc(857 * var(--u));padding:calc(131 * var(--u)) var(--mx-side) 0}          /* hero 857 PSD px tall; eyebrow 131 px below the page top */
  .mx.mx .mx-lhero .mx-eyebrow{font-size:calc(14.4px * var(--mx-m))}
  .mx.mx .mx-lhero h1{font-size:calc(54px * var(--mx-m));line-height:1.054;max-width:none;margin-top:calc(8px * var(--mx-m))}
  .mx.mx .mx-people{padding:calc(131 * var(--u)) var(--mx-gutter) calc(119 * var(--u))}
  .mx.mx .mx-people--board{padding-bottom:calc(135 * var(--u))}
  .mx.mx .mx-people-head h2{font-size:calc(54px * var(--mx-m));line-height:1.1;margin-top:calc(8px * var(--mx-m))}
  .mx.mx .mx-people-list{width:min(calc(1053 * var(--u)),100%);max-width:none;margin:calc(102 * var(--u)) auto 0;gap:calc(121 * var(--u)) calc(27 * var(--u))}
  .mx.mx .mx-people--board .mx-people-list{width:min(calc(1415 * var(--u)),100%);max-width:none;gap:calc(70 * var(--u)) calc(27.5 * var(--u))}
  .mx.mx .mx-label{margin-top:calc(16 * var(--u))}
  .mx.mx .mx-name,.mx.mx .mx-view{font-size:calc(18px * var(--mx-m))}
  .mx.mx .mx-role{margin-top:calc(8 * var(--u));font-size:calc(11.5px * var(--mx-m));line-height:1.45}
  /* bio: panel 1415 PSD px wide, text column at 692 px, name 75 / title 20 / copy 16 */
  .mx.mx .mx-bio-panel{max-width:calc(1415 * var(--u));border-radius:calc(20 * var(--u))}
  .mx.mx .mx-bio-close{--mx-bio-top:calc(120 * var(--u));min-height:calc(43 * var(--u));padding:0 calc(26 * var(--u));font-size:calc(10.8px * var(--mx-m))}
  .mx.mx .mx-bio-text{padding:calc(24 * var(--u)) calc(110 * var(--u)) calc(70 * var(--u)) 0}
  .mx.mx .mx-bio-name{font-size:min(calc(54px * var(--mx-m)),4.5vw)}
  .mx.mx .mx-bio-role{font-size:calc(14.4px * var(--mx-m));margin-top:calc(10 * var(--u))}
  .mx.mx .mx-bio-body{margin-top:calc(30 * var(--u))}
  .mx.mx .mx-bio-body p{font-size:max(15px,calc(12.6px * var(--mx-m)))}
  .mx.mx .mx-bio-sig{width:calc(var(--sw) * var(--u));margin:calc(12 * var(--u)) 0 0 calc(-16 * var(--u))}
}
@media (pointer:fine) and (min-width:1200px){.mx.mx .mx-bio-close{min-height:calc(43 * var(--u))}}
@media (pointer:coarse){.mx.mx .mx-bio-close{min-height:44px}}