/* GENERATED by build/bio-el/make_css.py - do not edit on the server or in the .css file. */

/* ---------- 01 the breadcrumb ----------
   `biocrumb`, not `crumb`. A shared stylesheet already owns `.crumb` and paints it a cream card, so
   the first build put cream text on a cream box and the trail vanished. Same story for `.moat` below,
   which is a bordered callout elsewhere and boxed a plain text link. Own namespace, own classes. */
.bhp-bio .biocrumb .elementor-widget-container,.bhp-bio .biocrumb{background:none}
.bhp-bio .biocrumb p{margin:0;font-family:var(--body);font-size:12.5px;letter-spacing:.04em;
  color:var(--on-dark-3,rgba(247,242,231,.56))}
.bhp-bio .biocrumb a{color:var(--on-dark-3,rgba(247,242,231,.56));text-decoration:none;
  border-bottom:1px solid rgba(255,176,0,0);transition:color .2s ease,border-color .2s ease}
.bhp-bio .biocrumb a:hover{color:#fff;border-bottom-color:rgba(255,176,0,.7)}
.bhp-bio .biocrumb .sep{margin:0 8px;opacity:.5}
.bhp-bio .biocrumb .here{color:rgba(247,242,231,.82)}

/* ---------- 01 the name ----------
   One line unless it genuinely does not fit. The shared hero splits its tagline into `.ln` blocks,
   which is right for a tagline and wrong for a name: it broke "Dr. Angela McMahon" onto two lines on
   a column with 173px to spare. */
.bhp-bio .bioname .elementor-heading-title{white-space:normal}
.bhp-bio .bioname .ln{display:inline}

/* ---------- 01 the credential chips, the partner card's chip on a dark surface ---------- */
.bhp-bio .biochips.e-con{display:flex;flex-wrap:wrap}
.bhp-bio .biochip .elementor-heading-title{display:inline-block;
  font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:.04em;
  color:var(--gold,#FFB000);background:rgba(255,176,0,.10);
  border:1px solid rgba(255,176,0,.38);border-radius:999px;padding:5px 12px}

/* ---------- 01 the portrait ----------
   A 4:5 frame with the same 14px corner and the same shadow the partner cards use, so the person
   reads as the same object here as in the grid they came from. `object-position` favours the top of
   the frame: these are headshots, and centring one crops the forehead. */
.bhp-bio .bioshot.e-con{border-radius:16px;overflow:hidden;position:relative;
  box-shadow:0 30px 70px rgba(9,13,30,.42);border:1px solid rgba(247,242,231,.14)}
.bhp-bio .bioshot img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  object-position:center 12%}

/* ---------- 02 the credential panel ----------
   The figure, then what she works on, ruled row by row. A figure on its own left 263px of blank cream
   under it, which is the left/right imbalance this page set has already had rejected once. */
/* The card sits at the top of its column and travels with the reader, because a short card beside a
   long bio cannot fill the column and should not pretend to: measured, the quote runs 24% of the row
   height on the longest bio and 100% on the shortest. Sticky turns the space beside the lower half of
   the prose into working space instead of a gap. */
.bhp-bio .bpcol.e-con{align-self:flex-start;position:sticky;top:104px}
.bhp-bio .biorule.e-con{width:34px;min-height:3px;height:3px;background:var(--gold,#FFB000);
  border-radius:2px}
.bhp-bio .bioquote p{margin:0;font-family:var(--disp);font-weight:600;font-style:italic;
  letter-spacing:-.01em;color:var(--navy,#171D3A)}

/* one editorial column, where the person has nothing client-written for a side card */
.bhp-bio .ecol.solo .elementor-widget-text-editor p{max-width:72ch}
.bhp-bio .ecol.solo .shead .elementor-heading-title{max-width:20ch}
.bhp-bio .bioproof.e-con{width:100%;box-shadow:0 18px 44px rgba(23,29,58,.06)}
.bhp-bio .bioproof .biofig .elementor-heading-title{color:var(--gold-deep,#E29C00)}
.bhp-bio .bioproof p{margin:0}
.bhp-bio .bioproof .biosk .elementor-heading-title{color:var(--gold-deep,#E29C00)}
.bhp-bio .biorow.e-con{align-items:center}
.bhp-bio .biorow .elementor-heading-title{color:var(--navy,#171D3A)}
.bhp-bio .biodot.e-con{width:6px;min-height:6px;height:6px;flex:0 0 6px;border-radius:50%;
  background:var(--gold,#FFB000)}

/* ---------- 02 the link out of the prose ---------- */
.bhp-bio .biolink.e-con{display:flex;background:none;border:0;padding:0;border-radius:0}
.bhp-bio .biolink .elementor-widget-button{width:auto;flex:0 0 auto}

/* ---------- 03 the team grid ----------
   The team page pins `.mgrid` to three columns, and these pages carry `bhp-tem` to get the card, so
   they inherited it: nine of the eleven show four people and rendered 3 + 1, stranding a card on its
   own row. That is the exact defect the client had corrected on the team page. The grid takes as many
   columns as it has cards, so the row is always full. */
.bhp-bio .mgrid.four.e-con{grid-template-columns:repeat(4,1fr)}
/* Every breakpoint uses a column count that DIVIDES the card count, so a row is never part empty.
   Four cards go 4 / 2 / 1 and three go 3 / 1: two columns would strand the third, which is the same
   defect as the stranded fourth above, measured at 768px.
   `!important` is not decoration here: the team page's own tablet rules are `!important`, so a plain
   rule loses to them however specific it is. Measured, twice. */
@media (max-width:1100px){
  .bhp-bio .mgrid.four.e-con{grid-template-columns:repeat(2,1fr)!important}
  .bhp-bio .mgrid.e-con:not(.four){grid-template-columns:1fr!important}
}
@media (max-width:600px){.bhp-bio .mgrid.four.e-con{grid-template-columns:1fr!important}}

/* ---------- 02 the editorial column ---------- */
.bhp-bio .erow.topalign.e-con:not(.gaptop){align-items:stretch;margin-block-start:0!important}
.bhp-bio .erow.topalign .ecol .shead.e-con{margin-block-end:16px!important}

/* ---------- responsive ----------
   The two columns stack before the portrait gets too narrow to read as a portrait, and the chips and
   breadcrumb stay on one line for as long as they fit. */
/* The columns stack at Elementor's tablet breakpoint, and a portrait that then takes the full column
   is enormous: measured 960x1200 at 1024px and 836x1045 at 900px. Capped and centred from the point
   it stops sitting beside the copy. */
@media (max-width:1024px){
  /* The card sits at the top of its column and travels with the reader, because a short card beside a
   long bio cannot fill the column and should not pretend to: measured, the quote runs 24% of the row
   height on the longest bio and 100% on the shortest. Sticky turns the space beside the lower half of
   the prose into working space instead of a gap. */
.bhp-bio .bpcol.e-con{align-self:flex-start;position:sticky;top:104px}
.bhp-bio .biorule.e-con{width:34px;min-height:3px;height:3px;background:var(--gold,#FFB000);
  border-radius:2px}
.bhp-bio .bioquote p{margin:0;font-family:var(--disp);font-weight:600;font-style:italic;
  letter-spacing:-.01em;color:var(--navy,#171D3A)}

/* one editorial column, where the person has nothing client-written for a side card */
.bhp-bio .ecol.solo .elementor-widget-text-editor p{max-width:72ch}
.bhp-bio .ecol.solo .shead .elementor-heading-title{max-width:20ch}
  .bhp-bio .bioshot.e-con{max-width:420px;margin-left:auto;margin-right:auto}
}
@media (max-width:767px){
  .bhp-bio .bioshot.e-con{max-width:360px}
  .bhp-bio .biocrumb p{font-size:12px}
  .bhp-bio .bioproof.e-con{padding:24px 22px}
}