/**
 * B Consultants Directory — front-end styles
 * Visual cues from UK B Leaders (Elle Adams profile + directory cards),
 * with B Lab AU yellow (#ffc20e) accents.
 */

:root {
  --sd-bcd-yellow: #ffc20e;
  --sd-bcd-ink: #231f20;
  --sd-bcd-muted: #5c5c5c;
  --sd-bcd-border: #e6e6e6;
  --sd-bcd-soft: #fff8e0;
  --sd-bcd-coral: #fcb5b7;
  --sd-bcd-coral-solid: #f4b6a8;
  --sd-bcd-card-ink: #231f20;
}

/* -------------------------------------------------------------------------
   Single profile (Elle Adams–style: left identity, right details)
   ------------------------------------------------------------------------- */

.sd-bcd-profile {
  color: var(--sd-bcd-ink);
  background: #fff;
}

.sd-bcd-profile__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 0 4rem;
}

.sd-bcd-profile__breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  font-size: 0.875rem;
  margin-bottom: 1.75rem;
  color: var(--sd-bcd-muted);
}

.sd-bcd-profile__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--sd-bcd-ink);
  text-decoration: none;
}

.sd-bcd-profile__back::before {
  content: "←";
  font-weight: 400;
}

.sd-bcd-profile__back:hover {
  text-decoration: underline;
}

.sd-bcd-profile__crumb-trail a {
  color: inherit;
  text-decoration: underline;
}

.sd-bcd-profile__grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.4fr);
  gap: 2.5rem 3rem;
  align-items: start;
}

@media (max-width: 800px) {
  .sd-bcd-profile__grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

.sd-bcd-profile__overview {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.sd-bcd-profile__photo {
  margin: 0;
  overflow: hidden;
  border-radius: 2px;
  background: #f0f0f0;
}

.sd-bcd-profile__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.sd-bcd-profile__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.6rem;
}

.sd-bcd-contact {
  width: 100%;
}

/* The toggle and the no-form fallback link both carry .sd-bcd-profile__button so
   they match Website / LinkedIn above them; only the extras live here. */

.sd-bcd-contact__form {
  margin-top: 0.75rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--sd-bcd-border);
  background: #fff;
}

.sd-bcd-contact__hint {
  font-size: 0.8rem;
  color: var(--sd-bcd-muted);
  margin: 0.5rem 0 0;
}

.sd-bcd-profile__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  padding: 0.76rem 1rem;
  box-sizing: border-box;
  border: 2px solid var(--black, #231f20);
  border-radius: 24px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  background: var(--yellow, #ffc20e);
  color: var(--black, #231f20);
  transition: background-color 0.2s ease;
}

.sd-bcd-profile__button:hover,
.sd-bcd-profile__button:focus-visible {
  background: var(--yellow-dark, #f79428);
  color: var(--black, #231f20);
}

/* Must follow .sd-bcd-profile__button: same specificity, so source order is
   what lets the toggle widen its padding to make room for the arrow. */
.sd-bcd-contact__toggle {
  position: relative;
  /* Matched left and right so the label stays optically centred like the
     Website and LinkedIn buttons, rather than shifting off the arrow. */
  padding-right: 2.6rem;
  padding-left: 2.6rem;
}

.sd-bcd-contact__arrow {
  position: absolute;
  right: 1.15rem;
  top: 50%;
  width: 0.8rem;
  height: 0.8rem;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}

.sd-bcd-contact__toggle[aria-expanded='true'] .sd-bcd-contact__arrow {
  transform: translateY(-50%) rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .sd-bcd-contact__arrow {
    transition: none;
  }
}

.sd-bcd-contact__heading {
  margin: 0 0 0.9rem;
  font-size: 1.1rem;
  line-height: 1.25;
  font-weight: 700;
}

.sd-bcd-profile__name {
  margin: 0.35rem 0 0;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  font-weight: 700;
}

/* The theme scales spans inside headings for its own highlight treatment, so
   the pronouns have to be pulled back to the name's own size. */
.sd-bcd-profile .sd-bcd-profile__name .sd-bcd-profile__pronouns {
  font-size: 1em;
  font-weight: inherit;
  line-height: inherit;
  white-space: nowrap;
}

.sd-bcd-profile__facts {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-size: 1rem;
  line-height: 1.4;
}

/* Label and value share a line and wrap together, so a long company name
   indents under the label rather than starting a new block. */
.sd-bcd-profile__fact {
  display: block;
}

.sd-bcd-profile__fact dt {
  display: inline;
  font-weight: 700;
}

.sd-bcd-profile__fact dd {
  display: inline;
  margin: 0 0 0 0.35rem;
}

/* Right panel: experience, then the bio, then the remaining lists, with rules
   marking the bio off the way B Lab's example profile does. */
.sd-bcd-profile__details {
  /* Named so the bio band can bleed out by exactly this much and land flush
     with the panel edges. */
  --sd-bcd-details-pad: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: var(--sd-bcd-details-pad);
  border: 1px solid var(--sd-bcd-border);
  border-radius: 4px;
}

.sd-bcd-profile__item {
  margin: 0;
}

.sd-bcd-profile__item-title {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

.sd-bcd-profile__item-content {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--sd-bcd-ink);
}

/* Full-width band rather than an inset panel: it bleeds out by the details
   panel's own padding and then re-applies it, so the bio text keeps the same
   left and right edges as the sections above and below instead of stepping in. */
.sd-bcd-profile__bio {
  margin: 0 calc(var(--sd-bcd-details-pad, 1.5rem) * -1);
  padding: 1.5rem var(--sd-bcd-details-pad, 1.5rem);
  background: #fff3cf;
  font-size: 1rem;
  line-height: 1.65;
}

/* Until B Lab tag the experience fields the bio is the only thing in the panel,
   where a band just left thin white strips above and below it. Fill the panel
   instead, so it reads as a deliberate card rather than a misaligned block. */
.sd-bcd-profile__bio:only-child {
  margin: calc(var(--sd-bcd-details-pad, 1.5rem) * -1);
  padding: var(--sd-bcd-details-pad, 1.5rem);
  /* Sits inside the panel's 4px radius and 1px border. */
  border-radius: 3px;
}

.sd-bcd-profile__bio p {
  margin: 0 0 1rem;
}

.sd-bcd-profile__bio p:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   Directory page: header, facet bar + cards
   (page body: .b-consultant-online-directory / .page-id-8364)
   ------------------------------------------------------------------------- */

body.b-consultant-online-directory,
body.page-id-8364,
body.sd-bcd-signup-page,
body.sd-b-consultant-profile {
  --sd-bcd-page-gutter: clamp(1.5rem, 6vw, 5.5rem);
}

/* Centered title + generous vertical padding (mock header) */
body.b-consultant-online-directory .page-header,
body.page-id-8364 .page-header,
body.sd-bcd-signup-page .page-header,
body.sd-b-consultant-profile .page-header {
  text-align: center;
  padding: clamp(3.5rem, 8vw, 6rem) var(--sd-bcd-page-gutter) clamp(2.25rem, 5vw, 3.5rem);
  margin: 0;
  box-sizing: border-box;
}

body.b-consultant-online-directory .page-header h1,
body.page-id-8364 .page-header h1,
body.sd-bcd-signup-page .page-header h1,
body.sd-b-consultant-profile .page-header h1 {
  margin: 0 auto;
  text-align: center;
  max-width: 40rem;
  line-height: 1.15;
  color: var(--black, #231f20);
}

/* Hanging Certified B logo covers a centred title on small screens */
@media (max-width: 900px) {
  body.b-consultant-online-directory .page-header,
  body.page-id-8364 .page-header,
  body.sd-bcd-signup-page .page-header,
  body.sd-b-consultant-profile .page-header {
    text-align: left;
    padding-top: 8.25rem;
    padding-bottom: 1.75rem;
  }

  body.b-consultant-online-directory .page-header > .inner,
  body.page-id-8364 .page-header > .inner,
  body.sd-bcd-signup-page .page-header > .inner,
  body.sd-b-consultant-profile .page-header > .inner {
    min-height: 0 !important;
    justify-content: flex-start;
  }

  body.b-consultant-online-directory .page-header h1,
  body.page-id-8364 .page-header h1,
  body.sd-bcd-signup-page .page-header h1,
  body.sd-b-consultant-profile .page-header h1 {
    margin: 0;
    text-align: left;
    max-width: none;
    font-size: clamp(1.65rem, 7vw, 2.15rem);
  }
}

/* Profile body inherits same side gutter as directory */
body.sd-b-consultant-profile .sd-bcd-profile__inner {
  padding-left: var(--sd-bcd-page-gutter);
  padding-right: var(--sd-bcd-page-gutter);
  max-width: var(--max-width, 1640px);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

body.sd-b-consultant-profile .sd-bcd-profile__name {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

/* Intro copy sits with the title, so the header closes up beneath it */
body.b-consultant-online-directory .page-header:has(+ .sd-bcd-page-intro),
body.page-id-8364 .page-header:has(+ .sd-bcd-page-intro),
body.sd-bcd-signup-page .page-header:has(+ .sd-bcd-page-intro) {
  padding-bottom: 1rem;
}

.sd-bcd-page-intro {
  max-width: 57.5rem;
  margin: 0 auto clamp(2.25rem, 5vw, 3.5rem);
  padding-left: var(--sd-bcd-page-gutter, 1.25rem);
  padding-right: var(--sd-bcd-page-gutter, 1.25rem);
  text-align: center;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--black, #231f20);
  box-sizing: border-box;
}

.sd-bcd-page-intro a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@media (max-width: 900px) {
  .sd-bcd-page-intro {
    text-align: left;
    margin-bottom: 1.75rem;
    font-size: 1rem;
  }
}

/* Sign-up CTA. The theme's .site_button is scoped to its Vue components, so the
   look is reproduced here from the same palette variables rather than reused. */
.sd-bcd-page-intro:has(+ .sd-bcd-cta-row) {
  margin-bottom: 1.25rem;
}

/* Directory Sign up CTA is hidden; card View profile still uses .sd-bcd-cta. */
.sd-bcd-cta-row {
  display: none !important;
}

.sd-bcd-cta {
  display: inline-block;
  padding: 8px 20px;
  /* Keeps the grid track from shrinking to the widest word when the CTA shares
     the title line. */
  white-space: nowrap;
  border: 2px solid var(--black, #231f20);
  border-radius: 24px;
  background-color: var(--yellow, #ffc20e);
  color: var(--black, #231f20);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.sd-bcd-cta:hover,
.sd-bcd-cta:focus-visible {
  background-color: var(--yellow-dark, #f79428);
  color: var(--black, #231f20);
}

/* Empty result set: Grid Builder's message, centred. */
.wpgb-card.wpgb-no-result .wpgb-card-wrapper {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 1.5rem;
  text-align: center;
}

.sd-bcd-filter-reset {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  align-self: center;
  margin: 0.35rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sd-bcd-ink, #231f20);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}

.sd-bcd-filter-reset__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid currentColor;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1;
}

.sd-bcd-filter-reset:hover .sd-bcd-filter-reset__label,
.sd-bcd-filter-reset:focus-visible .sd-bcd-filter-reset__label {
  text-decoration: underline;
}

/* CTA shares the title line once JS has moved it into the header. Equal side
   tracks keep the title centred on the page rather than centred on the space
   left over by the button. */
body.b-consultant-online-directory .page-header:has(> .sd-bcd-cta-row),
body.page-id-8364 .page-header:has(> .sd-bcd-cta-row) {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 1.5rem;
  width: 100%;
  max-width: var(--max-width, 1640px);
  margin-left: auto;
  margin-right: auto;
}

body.b-consultant-online-directory .page-header:has(> .sd-bcd-cta-row) h1,
body.page-id-8364 .page-header:has(> .sd-bcd-cta-row) h1 {
  grid-column: 2;
}

body.b-consultant-online-directory .page-header > .sd-bcd-cta-row,
body.page-id-8364 .page-header > .sd-bcd-cta-row {
  grid-column: 3;
  justify-self: end;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Title is left-aligned and near full width on small screens, so the button
   drops beneath it instead of squeezing alongside. */
@media (max-width: 900px) {
  body.b-consultant-online-directory .page-header:has(> .sd-bcd-cta-row),
  body.page-id-8364 .page-header:has(> .sd-bcd-cta-row) {
    display: block;
  }

  body.b-consultant-online-directory .page-header > .sd-bcd-cta-row,
  body.page-id-8364 .page-header > .sd-bcd-cta-row {
    margin-top: 1.25rem;
  }
}

/* Load More sits under the grid and reuses the sign-up button's look */
body.b-consultant-online-directory main > .wpgb-facet-5,
body.page-id-8364 main > .wpgb-facet-5 {
  display: flex;
  justify-content: center;
  margin: 2rem auto clamp(2.5rem, 5vw, 4rem);
  padding-left: var(--sd-bcd-page-gutter, 1.25rem);
  padding-right: var(--sd-bcd-page-gutter, 1.25rem);
}

/* Grid Builder generates its own button palette per facet, so the site styling
   has to be forced over it. */
.wpgb-facet-5 .wpgb-button.wpgb-load-more {
  padding: 10px 28px !important;
  border: 2px solid var(--black, #231f20) !important;
  border-radius: 24px !important;
  background: var(--yellow, #ffc20e) !important;
  color: var(--black, #231f20) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.wpgb-facet-5 .wpgb-button.wpgb-load-more:hover,
.wpgb-facet-5 .wpgb-button.wpgb-load-more:focus-visible {
  background: var(--yellow-dark, #f79428) !important;
  color: var(--black, #231f20) !important;
}

/* Shared horizontal inset for filters, grid, signup */
body.b-consultant-online-directory main > .wp-block-group.is-layout-grid:has(.wpgb-facet),
body.page-id-8364 main > .wp-block-group.is-layout-grid:has(.wpgb-facet),
body.b-consultant-online-directory main > .wpgb-grid-5,
body.page-id-8364 main > .wpgb-grid-5,
body.b-consultant-online-directory main > .sd-bcd-signup,
body.page-id-8364 main > .sd-bcd-signup,
body.sd-bcd-signup-page main > .sd-bcd-signup {
  width: 100%;
  max-width: var(--max-width, 1640px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sd-bcd-page-gutter);
  padding-right: var(--sd-bcd-page-gutter);
  box-sizing: border-box;
}

/* Facet row: same page-edge inset as mock, underline under filters */
body.b-consultant-online-directory main > .wp-block-group.is-layout-grid:has(.wpgb-facet),
body.page-id-8364 main > .wp-block-group.is-layout-grid:has(.wpgb-facet) {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0.75rem !important;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #dedbda;
  grid-template-columns: none !important;
}

body.b-consultant-online-directory main > .wp-block-group.is-layout-grid:has(.wpgb-facet) > .wpgb-facet,
body.page-id-8364 main > .wp-block-group.is-layout-grid:has(.wpgb-facet) > .wpgb-facet {
  /* Grow to 330px on desktop, but narrow rather than wrap 2+1 on small laptops. */
  flex: 1 1 270px;
  min-width: 0;
  max-width: 330px;
  margin: 0;
}

@media (max-width: 900px) {
  body.b-consultant-online-directory,
  body.page-id-8364,
  body.sd-bcd-signup-page,
  body.sd-b-consultant-profile {
    --sd-bcd-page-gutter: 1.25rem;
  }

  body.b-consultant-online-directory main > .wp-block-group.is-layout-grid:has(.wpgb-facet),
  body.page-id-8364 main > .wp-block-group.is-layout-grid:has(.wpgb-facet) {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.85rem !important;
    padding-top: 0.25rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.25rem;
  }

  body.b-consultant-online-directory main > .wp-block-group.is-layout-grid:has(.wpgb-facet) > .wpgb-facet,
  body.page-id-8364 main > .wp-block-group.is-layout-grid:has(.wpgb-facet) > .wpgb-facet {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .sd-bcd-filter-reset {
    align-self: flex-start;
    margin-top: 0.15rem;
  }

  .sd-bcd-ms__button {
    min-height: 3.15rem;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    background: #fffdf6;
  }

  .sd-bcd-ms.is-open .sd-bcd-ms__button {
    background: var(--sd-bcd-soft);
    border-bottom-color: transparent;
  }

  .sd-bcd-ms__panel {
    max-height: min(18rem, 55vh);
  }

  .sd-bcd-ms__option {
    padding: 0.7rem 1rem;
    font-size: 1rem;
  }
}

/* Hide native multi-select list + legend once custom dropdown is ready */
.wpgb-facet.sd-bcd-ms-ready > fieldset {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.wpgb-facet.sd-bcd-ms-ready {
  position: relative;
}

/* Custom multi-select dropdown (mock style) */
.sd-bcd-ms {
  position: relative;
  width: 100%;
  z-index: 5;
}

.sd-bcd-ms.is-open {
  z-index: 40;
}

.sd-bcd-ms__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 0.9rem;
  margin: 0;
  border: 1px solid #231f20;
  border-radius: 0;
  background: #fff;
  color: #231f20;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

.sd-bcd-ms__button:hover,
.sd-bcd-ms.is-open .sd-bcd-ms__button {
  background: #fff;
}

.sd-bcd-ms__label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sd-bcd-ms__chevron {
  flex: 0 0 auto;
  width: 0.65rem;
  height: 0.65rem;
  border-right: 1.5px solid #231f20;
  border-bottom: 1.5px solid #231f20;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s ease;
}

.sd-bcd-ms.is-open .sd-bcd-ms__chevron {
  transform: rotate(225deg) translateY(-1px);
}

.sd-bcd-ms__panel {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  max-height: 16rem;
  overflow: auto;
  margin: 0;
  padding: 0.35rem 0;
  border: 1px solid #231f20;
  background: #fff;
  box-shadow: 0 8px 18px rgba(35, 31, 32, 0.08);
}

.sd-bcd-ms__option {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  padding: 0.45rem 0.85rem;
  font-size: 0.9rem;
  line-height: 1.35;
  color: #231f20;
  cursor: pointer;
}

.sd-bcd-ms__option:hover {
  background: #fff8e0;
}

.sd-bcd-ms__option input {
  margin: 0.15rem 0.75rem 0 0 !important;
  flex: 0 0 auto;
  accent-color: #231f20;
}

body.page .wpgb-facet .wpgb-facet-title,
.wpgb-facet .wpgb-facet-title.wpgb-sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 0.4rem !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  border: 0 !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sd-bcd-ink);
}

/* Friendlier fallback labels before JS enhances facets */
.wpgb-facet-10:not(.sd-bcd-ms-ready) .wpgb-facet-title,
.wpgb-facet-11:not(.sd-bcd-ms-ready) .wpgb-facet-title,
.wpgb-facet-12:not(.sd-bcd-ms-ready) .wpgb-facet-title {
  font-size: 0.8rem !important;
  color: transparent !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  position: relative !important;
}

.wpgb-facet-10:not(.sd-bcd-ms-ready) .wpgb-facet-title::after,
.wpgb-facet-11:not(.sd-bcd-ms-ready) .wpgb-facet-title::after,
.wpgb-facet-12:not(.sd-bcd-ms-ready) .wpgb-facet-title::after {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sd-bcd-ink);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.wpgb-facet-10:not(.sd-bcd-ms-ready) .wpgb-facet-title::after {
  content: "Impact Topic experience";
}

.wpgb-facet-11:not(.sd-bcd-ms-ready) .wpgb-facet-title::after {
  content: "Industry experience";
}

.wpgb-facet-12:not(.sd-bcd-ms-ready) .wpgb-facet-title::after {
  content: "Location";
}

.wpgb-facet {
  margin-bottom: 0.75rem;
}

.wpgb-facet .wpgb-select,
.wpgb-facet select.wpgb-select {
  min-height: 2.75rem;
  border: 1px solid var(--sd-bcd-ink);
  border-radius: 2px;
  background: #fff;
  color: var(--sd-bcd-ink);
  font-size: 0.95rem;
}

/* Photo on top, name + details in a white block underneath.
   Grid 5 is WPGB metro, which sizes each card to the photo ratio only.
   Override that to a CSS grid so the caption can sit in document flow. */
.wp-grid-builder.wpgb-grid-5.wpgb-enabled .wpgb-viewport,
.wp-grid-builder.wpgb-grid-5.wpgb-enabled .wpgb-metro {
  height: auto !important;
}

.wp-grid-builder.wpgb-grid-5.wpgb-enabled .wpgb-metro {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-columns: unset !important;
  gap: 28px !important;
  padding: 4px 2px 12px;
}

@media (max-width: 1280px) {
  .wp-grid-builder.wpgb-grid-5.wpgb-enabled .wpgb-metro {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1024px) {
  .wp-grid-builder.wpgb-grid-5.wpgb-enabled .wpgb-metro {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .wp-grid-builder.wpgb-grid-5.wpgb-enabled .wpgb-metro {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

.wp-grid-builder.wpgb-grid-5.wpgb-enabled .wpgb-card {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  transform: none !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

/* Empty results: span the full grid so the message sits in the page centre. */
.wp-grid-builder.wpgb-grid-5.wpgb-enabled .wpgb-card.wpgb-no-result {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-height: 6rem;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wp-grid-builder.wpgb-grid-5.wpgb-enabled .wpgb-card:not(.wpgb-no-result),
.wpgb-card.wpgb-card-21,
.wpgb-card.wpgb-card-22,
.wpgb-card.wpgb-post-type-bl_consultant {
  position: relative;
  overflow: visible;
  border-radius: 4px;
  background: #fff;
  border: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 18px rgba(35, 31, 32, 0.12), 0 1px 4px rgba(35, 31, 32, 0.06);
}

.wp-grid-builder.wpgb-grid-5 .wpgb-card:hover,
.wpgb-card.wpgb-card-21:hover,
.wpgb-card.wpgb-card-22:hover,
.wpgb-card.wpgb-post-type-bl_consultant:hover {
  box-shadow: 0 8px 22px rgba(35, 31, 32, 0.14), 0 2px 6px rgba(35, 31, 32, 0.08);
  z-index: auto;
}

.wpgb-card.wpgb-card-21 .wpgb-card-wrapper,
.wpgb-card.wpgb-card-22 .wpgb-card-wrapper,
.wpgb-card.wpgb-card-21 .wpgb-card-inner,
.wpgb-card.wpgb-card-22 .wpgb-card-inner {
  position: relative;
  display: block;
  height: auto !important;
  min-height: 0;
  overflow: hidden;
  border-radius: 4px;
}

.wpgb-card.wpgb-card-21 .wpgb-card-media,
.wpgb-card.wpgb-card-22 .wpgb-card-media,
.wp-grid-builder .wpgb-metro .wpgb-card-21 .wpgb-card-media,
.wp-grid-builder .wpgb-metro .wpgb-card-22 .wpgb-card-media {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: block;
  width: 100%;
  min-height: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.wpgb-card.wpgb-card-21 .wpgb-card-media-thumbnail > a > div,
.wpgb-card.wpgb-card-22 .wpgb-card-media-thumbnail > a > div,
.wpgb-card.wpgb-card-21 .wpgb-card-media img,
.wpgb-card.wpgb-card-22 .wpgb-card-media img,
.wpgb-card.wpgb-card-21 .wpgb-card-media,
.wpgb-card.wpgb-card-22 .wpgb-card-media,
.wpgb-card.wpgb-card-21 .wpgb-card-media-thumbnail,
.wpgb-card.wpgb-card-22 .wpgb-card-media-thumbnail,
.wp-grid-builder.wpgb-grid-5 .wpgb-card .wpgb-card-media-thumbnail,
.wp-grid-builder.wpgb-grid-5 .wpgb-card:hover .wpgb-card-media-thumbnail,
.wp-grid-builder.wpgb-grid-5 .wpgb-card .wpgb-card-media img,
.wp-grid-builder.wpgb-grid-5 .wpgb-card:hover .wpgb-card-media img {
  filter: none !important;
  -webkit-filter: none !important;
  transform: none !important;
  transition: none !important;
}

.wpgb-card.wpgb-card-21 .wpgb-card-media img,
.wpgb-card.wpgb-card-22 .wpgb-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wpgb-card.wpgb-card-21 .wpgb-card-media-overlay,
.wpgb-card.wpgb-card-22 .wpgb-card-media-overlay,
.wpgb-card.wpgb-card-21 .wpgb-card-media-content,
.wpgb-card.wpgb-card-22 .wpgb-card-media-content {
  display: none !important;
}

.wp-grid-builder .wpgb-card a.sd-bcd-card-extras,
.wp-grid-builder .wpgb-card .sd-bcd-card-extras,
.wpgb-card .sd-bcd-card-extras,
a.sd-bcd-card-extras {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 2;
  display: block;
  /* WPGB zeros padding/margin on every card <a>; this selector has to beat that. */
  padding: 16px 18px 20px !important;
  margin: 0 !important;
  pointer-events: auto;
  cursor: pointer;
  background: #fff;
  color: var(--sd-bcd-ink) !important;
  text-decoration: none;
  opacity: 1 !important;
  visibility: visible !important;
  box-sizing: border-box;
}

.wpgb-card .sd-bcd-card-extras:hover,
.wpgb-card .sd-bcd-card-extras:focus-visible,
.wpgb-card:hover .sd-bcd-card-extras {
  background: #fff;
  color: var(--sd-bcd-ink) !important;
  text-decoration: none;
}

.wp-grid-builder.wpgb-grid-5 .wpgb-card .wpgb-card-layer-link {
  pointer-events: none !important;
}

.wpgb-card .sd-bcd-card-extras .sd-bcd-card__name {
  margin: 0 0 0.2rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--sd-bcd-ink) !important;
  opacity: 1 !important;
  text-shadow: none;
}

.wpgb-card .sd-bcd-card-extras .sd-bcd-card__company,
.wpgb-card .sd-bcd-card-extras .sd-bcd-card__location {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.35;
  font-weight: 400;
  color: var(--sd-bcd-ink) !important;
  opacity: 1 !important;
  text-shadow: none;
}

.wpgb-card .sd-bcd-card-extras .sd-bcd-card__company span,
.wpgb-card .sd-bcd-card-extras .sd-bcd-card__location span {
  font-weight: 400;
}

.wpgb-card .sd-bcd-card-extras .sd-bcd-card__bio {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--sd-bcd-ink) !important;
  opacity: 1 !important;
  text-shadow: none;
}

.wpgb-card .sd-bcd-card__cta,
.sd-bcd-card__cta {
  display: inline-block;
  margin-top: 1.2rem !important;
  padding: 6px 16px !important;
  border: 1px solid var(--black, #231f20) !important;
  border-radius: 19px !important;
  background: var(--yellow, #ffc20e) !important;
  color: var(--black, #231f20) !important;
  font-size: 0.78125rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  white-space: nowrap;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: none !important;
}

.wpgb-card .sd-bcd-card__cta:hover,
.wpgb-card .sd-bcd-card__cta:focus-visible,
.sd-bcd-card__cta:hover,
.sd-bcd-card__cta:focus-visible {
  background: var(--yellow, #ffc20e) !important;
  color: var(--black, #231f20) !important;
}

/* Full custom card (if selected in Grid Builder) */
.sd-bcd-card--grid {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  background: #fff;
  color: var(--sd-bcd-ink);
  border: 1px solid var(--sd-bcd-border);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
}

.sd-bcd-card__link {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sd-bcd-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #f0f0f0;
}

.sd-bcd-card__img,
.sd-bcd-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sd-bcd-card__media-placeholder {
  width: 100%;
  height: 100%;
  min-height: 12rem;
  background: #3a3a3a;
}

.sd-bcd-card__body,
.sd-bcd-card__overlay {
  padding: 1rem 1.1rem 1.15rem;
  background: #fff;
}

.sd-bcd-card__name {
  margin: 0 0 0.2rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sd-bcd-ink);
}

.sd-bcd-card__company,
.sd-bcd-card__location {
  margin: 0;
  font-size: 0.95rem;
  color: var(--sd-bcd-ink);
}

.sd-bcd-card__bio {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--sd-bcd-ink);
}

/* -------------------------------------------------------------------------
   Signup block on directory page
   ------------------------------------------------------------------------- */

.sd-bcd-signup {
  margin: 3.5rem 0 2rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--sd-bcd-border);
  border-top: 4px solid var(--sd-bcd-yellow);
  background: #fff;
}

.sd-bcd-signup__inner {
  display: grid;
  grid-template-columns: minmax(280px, 0.92fr) minmax(280px, 1.08fr);
  align-items: stretch;
  min-height: 32rem;
}

.sd-bcd-signup__form {
  padding: 2.25rem 2rem 2.5rem;
}

.sd-bcd-signup__title {
  margin: 0 0 1.25rem;
  font-size: 1.5rem;
}

.sd-bcd-signup__media {
  margin: 0;
  position: relative;
  min-height: 22rem;
  background: #1a1a1a;
}

.sd-bcd-signup__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 38%;
}

@media (min-width: 801px) {
  .sd-bcd-signup__media {
    min-height: 100%;
  }

  .sd-bcd-signup__media img {
    position: absolute;
    inset: 0;
  }
}

@media (max-width: 800px) {
  .sd-bcd-signup__inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .sd-bcd-signup__media {
    min-height: 16rem;
    order: -1;
  }

  .sd-bcd-signup__form {
    padding: 1.5rem 1.25rem 2rem;
    max-width: none;
  }
}

/* Contact Form 7 ships its fields as size="40" / cols="40" with content-box
   sizing and no max-width, which gives them a ~356px intrinsic minimum. In the
   narrow profile column that pushed the whole page wider than the viewport on
   small phones as soon as the contact form was opened. */
.sd-bcd-signup .wpcf7-form-control,
.sd-bcd-contact__form .wpcf7-form-control {
  box-sizing: border-box;
  max-width: 100%;
}

.sd-bcd-signup input.wpcf7-form-control:not([type='submit']),
.sd-bcd-signup select.wpcf7-form-control,
.sd-bcd-signup textarea.wpcf7-form-control,
.sd-bcd-contact__form input.wpcf7-form-control:not([type='submit']),
.sd-bcd-contact__form select.wpcf7-form-control,
.sd-bcd-contact__form textarea.wpcf7-form-control {
  width: 100%;
}

.sd-bcd-signup .wpcf7-submit,
.sd-bcd-contact__form .wpcf7-submit {
  background: var(--sd-bcd-yellow) !important;
  color: var(--sd-bcd-ink) !important;
  border: 0 !important;
  border-radius: 2px !important;
  font-weight: 700 !important;
  padding: 0.75rem 1.35rem !important;
  cursor: pointer;
}

.sd-bcd-signup__fallback {
  color: var(--sd-bcd-muted);
}