/* ════════════════════════════════════════════════════════════════════════
   Leadership / "Our Team" — cinematic scroll-snap pages (Views/leadership.php,
   content/leadership-beats.php). The shared scroll-snap scaffold lives in app.css
   (.cine-*), applied alongside the .leadership-* hooks initCineFilm('leadership')
   queries. This file keeps only the team-roster beat: the nine as ONE scannable
   cinematic grid (replaces nine full-screen picture-beside sections). The accent
   is the cyan thread (#27E1FF) via [data-accent] (tokens.css). ════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   Team roster beat — the nine as ONE scannable cinematic grid. One content beat
   between thesis and the human beat: auto-height, snaps to its top, never traps
   the wheel. .leadership-beat--team overrides the .cine-beat defaults (loaded
   after app.css); the content stays visible regardless of .is-active.
   ════════════════════════════════════════════════════════════════════════ */
.leadership-beat--team{align-items:flex-start;min-height:100svh;height:auto;
  scroll-snap-stop:normal;background:var(--ink-900);}
html.js .leadership-beat--team .leadership-content{opacity:1;transform:none;width:100%;}
.leadership-roster-intro{max-width:60ch;margin-bottom:var(--s-7);}

.leadership-roster{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.6vw,24px);}
@media (max-width:880px){ .leadership-roster{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .leadership-roster{grid-template-columns:1fr;} }

.leadership-card{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--ink-800);border:var(--b-hairline) solid var(--ink-700);border-radius:var(--r-md);
  transition:transform var(--dur) var(--ease-standard),border-color var(--dur) var(--ease-standard),box-shadow var(--dur) var(--ease-standard);}
.leadership-card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;z-index:2;background:var(--ink-700);
  transition:background var(--dur) var(--ease-standard),box-shadow var(--dur) var(--ease-standard);}
/* MD + CEO carry a subtle persistent cyan rule — 'the company’s word' / 'the whole system'. */
.leadership-card:nth-child(1)::before,.leadership-card:nth-child(2)::before{background:rgba(39,225,255,.45);}

.leadership-card-pic{margin:0;overflow:hidden;background:var(--ink-900);}
.leadership-card-pic img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  filter:grayscale(.18);transition:filter var(--dur-slow) var(--ease-standard),transform var(--dur-slow) var(--ease-standard);}

.leadership-card-role{font-family:var(--font-mono);font-size:var(--t-eyebrow);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:var(--s-5) var(--s-5) var(--s-2);}
.leadership-card-name{font:600 var(--t-h3)/1.12 var(--font-display);letter-spacing:-.01em;margin:0 var(--s-5) var(--s-3);}
.leadership-card-name a{color:var(--on-ink-hi);text-decoration:none;transition:color var(--dur) var(--ease-standard);}
.leadership-card-name a:hover{color:var(--accent);}
.leadership-card-name a:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px;}
.leadership-card-owns{font-family:var(--font-mono);font-size:var(--t-caption);letter-spacing:.04em;color:var(--on-ink-hi);
  margin:0 var(--s-5) var(--s-3);padding-top:var(--s-3);border-top:var(--b-hairline) solid var(--ink-700);}
.leadership-card-statement{font-size:var(--t-caption);line-height:1.55;color:var(--on-ink-mid);margin:0 var(--s-5) var(--s-5);}

@media (hover:hover){
  .leadership-card:hover,.leadership-card:focus-within{transform:translateY(-4px);border-color:var(--ink-600);
    box-shadow:0 0 0 1px var(--accent),0 18px 40px rgba(0,0,0,.45);}
  .leadership-card:hover::before,.leadership-card:focus-within::before{background:var(--accent);box-shadow:0 0 12px rgba(39,225,255,.55);}
  .leadership-card:hover .leadership-card-pic img,.leadership-card:focus-within .leadership-card-pic img{filter:none;transform:scale(1.03);}
}

/* Per-card cascade reveal — stagger carried in --lead-delay so hover stays instant. */
html.js .leadership-card{opacity:0;transform:translateY(var(--reveal-y));
  transition:opacity var(--dur-slow) var(--ease-cine) var(--lead-delay,0ms),transform var(--dur-slow) var(--ease-cine) var(--lead-delay,0ms),
             border-color var(--dur) var(--ease-standard),box-shadow var(--dur) var(--ease-standard);}
html.js .leadership-beat--team.is-active .leadership-card{opacity:1;transform:none;}
.leadership-card:nth-child(2){--lead-delay:60ms;}.leadership-card:nth-child(3){--lead-delay:120ms;}
.leadership-card:nth-child(4){--lead-delay:180ms;}.leadership-card:nth-child(5){--lead-delay:240ms;}
.leadership-card:nth-child(6){--lead-delay:300ms;}.leadership-card:nth-child(7){--lead-delay:360ms;}
.leadership-card:nth-child(8){--lead-delay:420ms;}.leadership-card:nth-child(9){--lead-delay:480ms;}
@media (hover:hover){ .leadership-card:hover,.leadership-card:focus-within{--lead-delay:0ms;} }

@media (prefers-reduced-motion:reduce){
  html.js .leadership-card{opacity:1;transform:none;transition:none;}
  .leadership-card-pic img{transition:none;}
}
html.no-motion.is-leadership .leadership-card{opacity:1;transform:none;transition:none;}