/* === Professional bio. single-professional.php only ===
 * Band follows the Bio-AboutExpanded comp: back link top, name block mid,
 * contact row on the floor, photo bottom right. Blue #083558 / grey #BFC7D6
 * from choose_header_bg_clr.
 * Tabs   capability tab bar, real tabs (capability-landing-tabs.js), no pinning
 * Panels About, Case Studies, News & Insights, Recognition, Affiliations, Community
 */

/* --- Band --- */
.hlb-bio-head {
  --hlb-bio-fg: var(--hlb-white);
  --hlb-bio-rule: rgba(255, 255, 255, 0.6);
  --hlb-bio-glow: radial-gradient(50% 50% at 50% 50%, rgba(0, 98, 137, 0.5) 0%, rgba(0, 98, 137, 0) 100%);

  background: var(--hlb-navy);
  color: var(--hlb-bio-fg);
}

.hlb-bio-head--grey {
  --hlb-bio-fg: var(--hlb-navy);
  --hlb-bio-rule: rgba(8, 53, 88, 0.45);
  --hlb-bio-glow: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);

  /* Navy on grey. Hover blue, turquoise line */
  --hlb-link-fg:       var(--hlb-navy);
  --hlb-link-fg-hover: var(--hlb-blue);
  --hlb-link-accent:   var(--hlb-turquoise);
  --hlb-link-focus:    var(--hlb-navy);

  background: #BFC7D6;
}

.hlb-bio-head__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  width: 100%;
  max-width: calc(var(--hlb-container) + (var(--hlb-gutter) * 2));
  min-height: 480px;
  margin: 0 auto;
  padding: 0 var(--hlb-gutter);
}

/* Back link top, name block centered in the space left, contact on the floor */
.hlb-bio-head__text {
  display: flex;
  flex-direction: column;
  padding: 24px 0 44px;
}

/* Comp: small link, not a CTA */
:root .hlb-bio-head .hlb-bio-head__back {
  align-self: flex-start;
  gap: 10px;
  padding-bottom: 4px;
  font-size: 12px;
  letter-spacing: .1em;
}

.hlb-bio-head__id {
  margin-block: auto;
  padding: 40px 0;
}

.hlb-bio .hlb-bio-head .hlb-bio-head__name {
  margin: 0;
  font: 400 34px/1.15 var(--hlb-font-display);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--hlb-bio-fg);
}

/* Pronouns: quiet, one line under the name */
.hlb-bio-head__pronouns,
.hlb-bio-head__pronouns p {
  margin: 0;
  font: 400 15px/1.5 var(--hlb-font-body);
  color: var(--hlb-bio-fg);
}

.hlb-bio-head__pronouns {
  margin-top: 6px;
}

.hlb-bio .hlb-bio-head .hlb-bio-head__title {
  margin: 14px 0 0;
  font: 400 15px/1.4 var(--hlb-font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--hlb-bio-fg);
}

.hlb-bio-head__details,
.hlb-bio-head__details p {
  margin: 0;
  font: 400 15px/1.6 var(--hlb-font-body);
  color: var(--hlb-bio-fg);
}

.hlb-bio-head__details {
  margin-top: 6px;
}

/* Lists. Uncode bullets off */
.hlb-bio-head .hlb-bio-head__offices,
.hlb-bio-head .hlb-bio-head__icons {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.hlb-bio-head__offices li,
.hlb-bio-head__icons li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.hlb-bio-head__offices li::before,
.hlb-bio-head__icons li::before {
  content: none !important;
}

/* Offices in a row, thin rule between. Comp: SAN FRANCISCO: 415... | BOSTON: 617...
   Every item has the rule on its left. The list is pulled left by rule + space
   and clip-path hides that strip, so the first item on each line never shows
   one, however the row wraps */
.hlb-bio-head__offices {
  --hlb-bio-office-gap: 28px;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 12px;
  clip-path: inset(-8px -8px -8px calc(var(--hlb-bio-office-gap) + 1px));
}

.hlb-bio-head .hlb-bio-head__offices {
  margin-left: calc((var(--hlb-bio-office-gap) + 1px) * -1) !important;
}

.hlb-bio-head__offices li {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.hlb-bio-head .hlb-bio-head__offices li {
  padding: 0 var(--hlb-bio-office-gap) !important;
  border-left: 1px solid var(--hlb-bio-rule);
}

/* Back link white on blue */
.hlb-bio-head--blue .hlb-bio-head__back {
  --hlb-arrow-fg: var(--hlb-white);
}

.hlb-bio-head__office {
  font: 400 12px/1.4 var(--hlb-font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hlb-bio-head span.hlb-bio-head__office {
  color: var(--hlb-bio-fg);
}

.hlb-bio-head .hlb-bio-head__phone,
.hlb-bio-head .hlb-bio-head__email {
  font: 500 15px/24px var(--hlb-font-body);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.hlb-bio-head__reach {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: 16px;
}

.hlb-bio-head__icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

:root .hlb-bio-head .hlb-bio-head__icon,
:root .hlb-bio-head .hlb-bio-head__icon:visited {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--hlb-bio-fg);
  text-decoration: none;
  transition: color var(--hlb-speed) var(--hlb-ease);
}

:root .hlb-bio-head--blue .hlb-bio-head__icon:hover {
  color: var(--hlb-mint);
}

:root .hlb-bio-head--grey .hlb-bio-head__icon:hover {
  color: var(--hlb-blue);
}

:root .hlb-bio-head .hlb-bio-head__icon:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Filled icons, one size. Comp: LinkedIn, card, printer */
.hlb-bio-head .hlb-bio-icon {
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Photo. Cutout sits on the band floor, soft glow behind */
.hlb-bio-head__photo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
  padding-top: 32px;
}

.hlb-bio-head__photo img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  max-height: 460px;
  object-fit: contain;
  object-position: bottom center;
  background: var(--hlb-bio-glow);
}

/* --- Tabs: button reset, same as capability-landing.css --- */
:root .hlb-cap-tabs--bio .hlb-cap-tabs__link[role="tab"] {
  flex: 0 0 auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

:root .hlb-cap-tabs--bio .hlb-cap-tabs__link[aria-selected="true"],
:root .hlb-cap-tabs--bio .hlb-cap-tabs__link[aria-selected="true"]:hover {
  background-color: var(--hlb-mint);
  color: var(--hlb-ink);
  text-decoration-color: transparent;
}

/* --- Panels --- */
.hlb-bio__panels {
  padding: 56px var(--hlb-gutter) 112px;
  background: var(--hlb-white);
}

.hlb-bio__panel {
  width: 100%;
  max-width: var(--hlb-container);
  margin-inline: auto;
}

.hlb-bio__panel[hidden] {
  display: none;
}

.hlb-bio__panel:focus-visible {
  outline: 2px solid var(--hlb-navy);
  outline-offset: 8px;
}

/* Text panels read at the capability column width */
.hlb-bio__panel--feeds > :not(h2),
.hlb-bio__panel--entries > :not(h2) {
  max-width: 856px;
}

/* --- About --- */
.hlb-bio-about {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr);
  gap: 80px;
  align-items: start;
}

.hlb-bio .hlb-bio-about__intro,
.hlb-bio .hlb-bio-about__intro p,
.hlb-bio .hlb-bio-about__intro li {
  font: 400 18px/28px var(--hlb-font-body);
  letter-spacing: 0;
  color: var(--hlb-turquoise);
}

.hlb-bio-about__intro {
  --hlb-link-fg:       var(--hlb-turquoise-text);
  --hlb-link-fg-hover: var(--hlb-ink);
}

.hlb-bio .hlb-bio-about__body,
.hlb-bio .hlb-bio-about__body p,
.hlb-bio .hlb-bio-about__body li {
  font: 400 15px/25px var(--hlb-font-body);
  letter-spacing: 0;
  color: var(--hlb-ink);
}

.hlb-bio .hlb-bio-about__body h2,
.hlb-bio .hlb-bio-about__body h3,
.hlb-bio .hlb-bio-about__body h4 {
  margin: 32px 0 12px;
  font: 400 15px/22px var(--hlb-font-display);
  letter-spacing: 0;
  color: var(--hlb-ink);
}

.hlb-bio-about__intro + .hlb-bio-about__body {
  margin-top: 24px;
}

.hlb-bio-about__intro > :first-child,
.hlb-bio-about__body > :first-child {
  margin-top: 0;
}

.hlb-bio-about__intro > :last-child,
.hlb-bio-about__body > :last-child {
  margin-bottom: 0;
}

.hlb-bio-about__side {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.hlb-bio .hlb-bio-side__h {
  margin: 24px 0 5px;
  font: 400 15px/22px var(--hlb-font-display);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--hlb-ink);
}

.hlb-bio .hlb-bio-side__h:first-child {
  margin-top: 0;
}

/* Credentials. Old two-layer navy gradient, one element */
.hlb-bio-creds {
  padding: 50px;
  border-radius: 2px;
  background:
    linear-gradient(101.03deg, rgba(8, 53, 88, 0.75) 0%, #083558 51%, rgba(8, 53, 88, 0.75) 100%),
    linear-gradient(180deg, #083558 0%, rgba(8, 53, 88, 0) 48.91%, #083558 100%),
    var(--hlb-white);
}

.hlb-bio .hlb-bio-creds .hlb-bio-side__h,
.hlb-bio-creds,
.hlb-bio-creds li,
.hlb-bio-creds p {
  color: var(--hlb-white);
}

.hlb-bio-creds li,
.hlb-bio-creds__text,
.hlb-bio-creds__text p {
  font: 400 15px/25px var(--hlb-font-body);
}

.hlb-bio-creds__text p {
  margin: 0;
}

/* Lists in the side boxes. Uncode bullets off */
.hlb-bio-about .hlb-bio-creds__list,
.hlb-bio-about .hlb-bio-caps__list,
.hlb-bio .hlb-bio-feed__list,
.hlb-bio .hlb-bio-entries {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.hlb-bio-creds__list li,
.hlb-bio-caps__list li,
.hlb-bio-feed__list li,
.hlb-bio-entries > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.hlb-bio-creds__list li::before,
.hlb-bio-caps__list li::before,
.hlb-bio-feed__list li::before,
.hlb-bio-entries > li::before {
  content: none !important;
}

/* Capabilities box */
.hlb-bio-caps {
  padding: 50px;
  border: 1px solid #BFC7D6;
  border-radius: 2px;
}

.hlb-bio-caps__list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.hlb-bio-caps__list a {
  font: 400 15px/25px var(--hlb-font-body);
}

/* --- Case studies: site card grid, news-card.css --- */

/* --- News, Insights, Events --- */
.hlb-bio-feed + .hlb-bio-feed {
  margin-top: 56px;
}

.hlb-bio .hlb-bio-feed__h {
  margin: 0 0 8px;
  font: 400 15px/22px var(--hlb-font-display);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--hlb-ink);
}

.hlb-bio-feed__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 16px !important;
}

.hlb-bio-feed__item {
  display: flex;
  flex-direction: column;
}

.hlb-bio-feed__item[hidden] {
  display: none;
}

.hlb-bio-feed__date {
  margin-bottom: 3px;
  font: 400 15px/25px var(--hlb-font-body);
  color: var(--hlb-navy);
}

.hlb-bio .hlb-bio-feed__title {
  align-self: flex-start;
  font: 500 18px/24px var(--hlb-font-body);
  color: var(--hlb-ink);
}

:root .hlb-bio .hlb-bio-feed__more {
  margin: 24px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: 500 13px/1.4 var(--hlb-font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* --- Recognition, Affiliations, Community --- */
.hlb-bio-entries {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hlb-bio .hlb-bio-entry__title,
.hlb-bio .hlb-bio-entry__title p {
  margin: 0;
  font: 500 18px/24px var(--hlb-font-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--hlb-ink);
}

.hlb-bio .hlb-bio-entry__desc,
.hlb-bio .hlb-bio-entry__desc p {
  margin: 5px 0 0;
  font: 400 15px/22px var(--hlb-font-body);
  color: var(--hlb-ink);
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  .hlb-bio-about {
    gap: 48px;
  }
}

/* Stack: photo first, like live */
@media (max-width: 959px) {
  .hlb-bio-head__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .hlb-bio-head__inner {
    min-height: 0;
  }

  .hlb-bio-head__photo {
    order: -1;
    padding-top: 24px;
  }

  .hlb-bio-head__photo img {
    max-height: 380px;
  }

  .hlb-bio-head__text {
    display: contents;
  }

  :root .hlb-bio-head .hlb-bio-head__back {
    order: -2;
    justify-self: start;
    margin-top: 24px;
  }

  .hlb-bio-head__id {
    margin: 0;
    padding: 32px 0 0;
  }

  .hlb-bio-head__contact {
    padding: 28px 0 44px;
  }

  .hlb-bio-about {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 699px) {
  .hlb-bio .hlb-bio-head .hlb-bio-head__name {
    font-size: 28px;
    line-height: 36px;
  }

  /* Offices stack. Every item starts a line, so the clip hides every rule */
  .hlb-bio-head__offices {
    flex-direction: column;
    align-items: flex-start;
  }

  .hlb-bio-head--blue {
    --hlb-bio-glow: radial-gradient(75% 75% at 50% 100%, rgba(0, 98, 137, 0.5) 0%, rgba(0, 98, 137, 0) 100%);
  }

  .hlb-bio-head__reach {
    flex-direction: column;
    align-items: flex-start;
  }

  .hlb-bio__panels {
    padding-top: 40px;
    padding-bottom: 72px;
  }

  /* Side boxes full bleed, like live */
  .hlb-bio-creds,
  .hlb-bio-caps {
    margin-inline: calc(var(--hlb-gutter) * -1);
    padding: 48px var(--hlb-gutter);
    border-radius: 0;
  }

  .hlb-bio-caps {
    border: 0;
    border-top: 1px solid #BFC7D6;
  }
}