/* A board member's profile over the board (people.js, 2026-10-13): the
   person's own page, less the site around it, in a sheet that any click
   closes. Loaded only by pages that carry a board. */
.person-dialog{width:min(1120px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 48px);margin:auto;padding:0;border:0;border-radius:var(--radius-md);background:var(--bg);color:var(--text);box-shadow:0 30px 80px rgba(38,0,51,.35);overflow:auto;overscroll-behavior:contain}
.person-dialog::backdrop{background:rgba(38,0,51,.6)}
html:has(.person-dialog[open]){overflow:hidden}
/* The way back stays in view above a long biography. */
.person-bar{position:sticky;top:0;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-6);padding:var(--space-4) var(--space-8);background:var(--bg);border-bottom:1px solid var(--hair)}
.person-close{display:inline-flex;align-items:center;gap:var(--space-2);padding:0;border:0;background:none;font:inherit;font-size:var(--fs-small);font-weight:600;color:var(--plum);cursor:pointer}
.person-close .ar{transform:rotate(180deg)}
.person-close:hover span{text-decoration:underline}
.person-close:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
.person-hint{font-size:var(--fs-small);color:var(--muted)}
.person-slot{padding:var(--space-8)}
/* The sheet's padding is the gutter: the profile lines up under "Back". */
.person-dialog .person-grid{width:auto}
.person-dialog .person-aside{position:static}
.person-dialog .person-name{line-height:1.05}
.person-loading{min-height:40vh;font-size:var(--fs-small);color:var(--muted)}
@media (max-width:640px){
  .person-dialog{width:100%;max-height:100dvh;height:100dvh;border-radius:0}
  .person-bar{padding:var(--space-3) var(--space-4)}
  .person-slot{padding:var(--space-6) var(--space-4)}
}

/* Who We Are's Governance (the user, 2026-10-13): its heading in the middle
   of the page, then everyone on the boards as About's board cards (name,
   role, the opening of their profile), the management teams after them
   under their own heading. Their boards are listed in the profile. */
.gov-head{max-width:46rem;margin:0 auto var(--space-12);text-align:center}
/* Straight after Vision & mission, on the same ground: one section's space
   between them, not two stacked (the user, 2026-10-14: "lots of space
   wasted" between the slogan and this heading). */
.vm-section + .gov-section{padding-top:0}
.gov-head h2::after{content:"";display:block;width:64px;height:4px;margin:14px auto 0;border-radius:2px;background:var(--lime)}
.gov-head .lead{margin-top:var(--space-6);text-align:center;text-wrap:balance}
.gov-sub{margin:var(--space-12) 0 var(--space-8);text-align:center;font-family:var(--font-head);font-size:var(--fs-h3);color:var(--plum)}
/* Enwealth Group and Enwealth Subsidiaries – Board Members (the user,
   2026-10-15): the first straight under the heading, which already leaves
   the space. */
.gov-head + .gov-sub{margin-top:0}
/* The cards small (the user, 2026-10-15: "one is scrolling a lot"): a
   portrait, the name and the role beside it, four to a row; the profile is a
   click away. */
.board-grid.gov-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.gov-grid .board-card{grid-template-columns:5.5rem minmax(0,1fr);gap:var(--space-4);align-items:center;padding:var(--space-4);grid-column:auto}
.gov-grid .board-portrait{border-bottom-width:4px;border-radius:10px}
.gov-grid .board-linkedin{width:28px;height:28px;margin-top:var(--space-2)}
@media (max-width:1080px){.board-grid.gov-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.board-grid.gov-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){
  .board-grid.gov-grid{grid-template-columns:1fr}
  .gov-grid .board-card{grid-template-columns:4.5rem minmax(0,1fr);padding:var(--space-3) 0}
}

/* Profiles rise into place as the reader reaches them (the user,
   2026-10-14; people.js adds .rise only to cards still out of view, and only
   where motion is welcome). Without script every card is simply there. */
.rise{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rise-delay,0ms)}
.rise.is-in{opacity:1;transform:none}
@media print{.rise{opacity:1;transform:none}}