/* =========================================================
   BRUGHUEN POST DIRECTORY
   COMPONENT CSS
   VERSION 2.2.1
   ========================================================= */

:root {
  --bh-accent: #6f4cff;
  --bh-accent-hover: #5e3df0;
  --bh-accent-soft: #8b72ff;
  --bh-article-accent: #ff9fb1;
  --bh-heading-color: #111633;
  --bh-text-color: #34374d;
  --bh-muted-color: #65697d;
  --bh-font-family: inherit;
  --bh-directory-width: 1180px;
  --bh-directory-background: linear-gradient(180deg, #fbfaff 0%, #f9f7ff 32%, #f8f5ff 66%, #fbfaff 100%);
  --bh-directory-decoration: rgba(111, 76, 255, .026);
  --bh-filter-border: rgba(226, 220, 239, .78);
  --bh-filter-background: rgba(255, 255, 255, .60);
  --bh-filter-shadow: 0 8px 30px rgba(17, 22, 51, .025);
  --bh-filter-button-border: #ded8ed;
  --bh-filter-button-background: rgba(255, 255, 255, .65);
  --bh-filter-button-color: #111633;
  --bh-filter-button-hover-border: rgba(111, 76, 255, .55);
  --bh-filter-button-hover-background: #fff;
  --bh-filter-button-hover-color: #111633;
  --bh-filter-button-active-border: #6f4cff;
  --bh-filter-button-active-background: linear-gradient(135deg, #6f4cff 0%, #7958ff 100%);
  --bh-filter-button-active-color: #fff;
  --bh-filter-button-active-shadow: 0 8px 20px rgba(111, 76, 255, .22);
  --bh-card-background: #fff;
  --bh-card-border: rgba(255, 255, 255, .95);
  --bh-card-shadow: 0 14px 38px rgba(17, 22, 51, .065);
  --bh-card-hover-shadow: 0 20px 48px rgba(17, 22, 51, .11);
  --bh-card-hero-background: linear-gradient(145deg, #ede7ff 0%, #ddd2ff 100%);
  --bh-card-placeholder-background: linear-gradient(145deg, #f1ecff 0%, #ded5ff 100%);
  --bh-card-placeholder-decoration-1: rgba(255, 255, 255, .28);
  --bh-card-placeholder-decoration-2: rgba(111, 76, 255, .08);
  --bh-logo-background: rgba(255, 255, 255, .98);
  --bh-logo-border: rgba(231, 227, 239, .65);
  --bh-logo-shadow: 0 8px 24px rgba(17, 22, 51, .08);
  --bh-tag-background: #eee8ff;
  --bh-tag-color: #6f4cff;
  --bh-tag-more-background: #e9e3f7;
  --bh-tag-more-color: #5e5671;
  --bh-arrow-background: #eee8ff;
  --bh-arrow-color: #6f4cff;
  --bh-arrow-hover-background: #6f4cff;
  --bh-arrow-hover-color: #fff;
  --bh-scroll-indicator-active: #6f4cff;
  --bh-scroll-indicator-inactive: #d9d2ec;
  --bh-show-all-border: rgba(255, 255, 255, .98);
  --bh-show-all-background: linear-gradient(150deg, #fbf9ff 0%, #f5f0ff 100%);
  --bh-show-all-shadow: 0 14px 38px rgba(17, 22, 51, .06);
  --bh-show-all-hover-shadow: 0 20px 48px rgba(17, 22, 51, .10);
  --bh-show-all-blob: rgba(111, 76, 255, .10);
  --bh-show-all-doodle: rgba(111, 76, 255, .65);
  --bh-show-all-icon-background: rgba(255, 255, 255, .88);
  --bh-show-all-icon-color: #6f4cff;
  --bh-show-all-icon-shadow: 0 8px 22px rgba(17, 22, 51, .07);
  --bh-show-all-eyebrow-color: #6f4cff;
  --bh-show-all-cta-background: linear-gradient(90deg, #6f4cff 0%, #7955ff 100%);
  --bh-show-all-cta-color: #fff;
  --bh-show-all-cta-shadow: 0 10px 24px rgba(111, 76, 255, .20);
  --bh-show-all-cta-hover-shadow: 0 13px 30px rgba(111, 76, 255, .28);
  --bh-load-more-background: #6f4cff;
  --bh-load-more-color: #fff;
  --bh-modal-background: #fff;
  --bh-modal-shadow: 0 32px 90px rgba(7, 5, 24, .38);
  --bh-modal-backdrop: rgba(19, 13, 48, .76);
  --bh-modal-close-background: rgba(255, 255, 255, .95);
  --bh-modal-close-color: #111633;
  --bh-modal-close-shadow: 0 8px 22px rgba(17, 22, 51, .14);
  --bh-modal-hero-background: #eee8ff;
  --bh-modal-placeholder-background: linear-gradient(145deg, #f2edff 0%, #ddd3ff 100%);
  --bh-modal-logo-background: #fff;
  --bh-modal-logo-shadow: none;
  --bh-modal-cta-background: linear-gradient(90deg, #6f4cff 0%, #754cff 55%, #6841f5 100%);
  --bh-modal-cta-color: #fff;
  --bh-modal-cta-shadow: 0 12px 30px rgba(111, 76, 255, .24);
  --bh-modal-cta-hover-shadow: 0 16px 34px rgba(111, 76, 255, .30);
}


/* =========================================================
   GLOBAL
   ========================================================= */

.bh-directory,
.bh-directory *,
.bh-preview,
.bh-preview * {
  box-sizing: border-box;
}

.bh-directory [hidden] {
  display: none !important;
}


/* =========================================================
   DIRECTORY
   ========================================================= */

.bh-directory {
  position: relative;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;

  padding:
    30px 20px
    64px;

  overflow: hidden;

  color:
    var(--bh-text-color);

  background:
    var(--bh-directory-background);
}


.bh-directory::before {
  content: "";

  position: absolute;

  right: -150px;
  top: 35%;

  width: 360px;
  height: 320px;

  border-radius: 50%;

  background:
    var(--bh-directory-decoration);

  pointer-events: none;
}


/* =========================================================
   CONTENT WIDTH
   ========================================================= */

.bh-directory >
.bh-directory__header,

.bh-directory >
.bh-directory__filters,

.bh-directory >
.bh-directory__grid,

.bh-directory >
.bh-directory__empty,

.bh-directory >
.bh-directory__more,

.bh-directory >
.bh-directory__groups {
  position: relative;
  z-index: 2;

  width: 100%;

  max-width:
    var(--bh-directory-width);

  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   DIRECTORY HEADER
   ========================================================= */

.bh-directory__header {
  margin-bottom: 28px;
}


.bh-directory__title {
  margin: 0;
  padding: 0;

  color:
    var(--bh-heading-color);

  font-family:
    var(--bh-font-family);

  font-size: 34px;
  line-height: 1.15;
  font-weight: 700;

  letter-spacing: -.025em;
}


/* =========================================================
   FILTERS
   ========================================================= */

.bh-directory__filters {
  display: flex;
  flex-direction: column;

  gap: 14px;

  margin-bottom:
    54px !important;

  padding:
    18px 20px;

  border:
    1px solid
    var(--bh-filter-border);

  border-radius: 22px;

  background:
    var(--bh-filter-background);

  box-shadow:
    var(--bh-filter-shadow);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}


.bh-directory__filter-group {
  display: flex;
  align-items: center;

  gap: 18px;

  min-width: 0;
}


.bh-directory__filter-label {
  flex:
    0 0 105px;

  color:
    var(--bh-heading-color);

  font-family:
    var(--bh-font-family);

  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;

  letter-spacing: .075em;

  text-transform: uppercase;
}


.bh-directory__filter-options {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;
}


.bh-directory__filter-button {
  appearance: none;

  min-height: 40px;

  padding:
    0 17px;

  border:
    1px solid
    var(--bh-filter-button-border);

  border-radius: 999px;

  background:
    var(--bh-filter-button-background);

  color:
    var(--bh-filter-button-color);

  font-family:
    var(--bh-font-family);

  font-size: 14px;
  line-height: 1;
  font-weight: 600;

  cursor: pointer;

  transition:
    color .2s ease,
    background .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}


.bh-directory__filter-button:hover {
  border-color:
    var(--bh-filter-button-hover-border);

  background:
    var(--bh-filter-button-hover-background);

  color:
    var(--bh-filter-button-hover-color);

  transform:
    translateY(-1px);
}


.bh-directory__filter-button.is-active {
  border-color:
    var(--bh-filter-button-active-border);

  background:
    var(--bh-filter-button-active-background);

  color:
    var(--bh-filter-button-active-color);

  box-shadow:
    var(--bh-filter-button-active-shadow);
}


/* =========================================================
   GROUPS
   ========================================================= */

.bh-directory__groups {
  display: flex;
  flex-direction: column;

  gap: 58px;
}


.bh-directory__group {
  position: relative;

  width: 100%;
}


/* =========================================================
   GROUP HEADER
   ========================================================= */

.bh-directory__group-header {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 24px;

  margin-bottom: 20px;
}


.bh-directory__group-heading {
  min-width: 0;
}


.bh-directory__group-title {
  margin: 0;
  padding: 0;

  color:
    var(--bh-heading-color);

  font-family:
    var(--bh-font-family);

  font-size: 30px;
  line-height: 1.1;
  font-weight: 700;

  letter-spacing: -.025em;
}


.bh-directory__group-description {
  margin:
    6px 0 0;

  padding: 0;

  color:
    var(--bh-muted-color);

  font-family:
    var(--bh-font-family);

  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
}


.bh-directory__group-count {
  flex: 0 0 auto;

  padding-bottom: 3px;

  color:
    var(--bh-accent);

  font-family:
    var(--bh-font-family);

  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
}


/* =========================================================
   GRIDS
   ========================================================= */

.bh-directory__group-track {
  width: 100%;
}


.bh-directory__group >
.bh-directory__group-track >
.bh-directory__grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 22px;
}


.bh-directory--single >
.bh-directory__grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 22px;
}


.bh-directory__partner-slot {
  min-width: 0;
}


/* =========================================================
   PARTNER CARD
   ========================================================= */

.bh-post-card {
  position: relative;

  width: 100%;
  min-width: 0;

  height: 100%;
  min-height: 355px;

  overflow: hidden;

  border:
    1px solid
    var(--bh-card-border);

  border-radius: 24px;

  background:
    var(--bh-card-background);

  box-shadow:
    var(--bh-card-shadow);

  transition:
    transform .22s ease,
    box-shadow .22s ease;
}


.bh-post-card:hover {
  transform:
    translateY(-3px);

  box-shadow:
    var(--bh-card-hover-shadow);
}


.bh-post-card__link {
  appearance: none;

  position: relative;

  display: flex;
  flex-direction: column;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  border: 0;

  background:
    transparent;

  color:
    inherit;

  font-family:
    var(--bh-font-family);

  text-align: left;

  cursor: pointer;
}


/* =========================================================
   CARD HERO
   ========================================================= */

.bh-post-card__hero {
  position: relative;

  flex: 0 0 auto;

  width: 100%;
  height: 145px;

  /*
   * Slight overlap with body prevents a sub-pixel
   * rendering seam between hero and white content.
   */
  margin-bottom: -2px;

  overflow: visible;

  background:
    var(--bh-card-hero-background);
}


.bh-post-card__hero-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}


.bh-post-card__hero-placeholder {
  position: absolute;

  inset: 0;

  overflow: hidden;

  background:
    var(--bh-card-placeholder-background);
}


.bh-post-card__hero-placeholder::before {
  content: "";

  position: absolute;

  width: 170px;
  height: 150px;

  right: -40px;
  top: -55px;

  border-radius: 50%;

  background:
    var(--bh-card-placeholder-decoration-1);
}


.bh-post-card__hero-placeholder::after {
  content: "";

  position: absolute;

  width: 140px;
  height: 100px;

  left: -40px;
  bottom: -55px;

  border-radius: 50%;

  background:
    var(--bh-card-placeholder-decoration-2);
}


/* =========================================================
   CARD WAVE
   FIX 1
   ========================================================= */

.bh-post-card__wave {
  position: absolute;

  z-index: 3;

  left: 0;
  bottom: -2px;

  width: calc(100% + 4px);
  height: 52px;

  background:
    var(--bh-card-background);

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 180' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 55 C115 71 188 97 305 94 C435 91 505 47 625 51 C748 55 812 111 1000 84 L1000 180 L0 180 Z'/%3E%3C/svg%3E");

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 180' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 55 C115 71 188 97 305 94 C435 91 505 47 625 51 C748 55 812 111 1000 84 L1000 180 L0 180 Z'/%3E%3C/svg%3E");

  -webkit-mask-repeat:
    no-repeat;

  mask-repeat:
    no-repeat;

  -webkit-mask-position:
    center bottom;

  mask-position:
    center bottom;

  -webkit-mask-size:
    100% 102%;

  mask-size:
    100% 102%;

  pointer-events: none;
}


/* =========================================================
   CARD LOGO
   ========================================================= */

.bh-post-card__logo {
  position: absolute;

  left: 18px;
  bottom: -34px;

  z-index: 4;

  width: max-content;

  min-width: 76px;

  max-width:
    calc(100% - 36px);

  height: 76px;

  display: flex;

  align-items: center;
  justify-content: center;

  padding:
    11px 15px;

  border:
    0px solid
    var(--bh-logo-border);

  border-radius: 18px;

  background:
    var(--bh-logo-background);

  box-shadow:
    var(--bh-logo-shadow);
}


.bh-post-card__logo img {
  display: block;

  width: auto !important;
  height: auto !important;

  max-width:
    150px !important;

  max-height:
    54px !important;

  object-fit:
    contain !important;
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.bh-post-card__content {
  position: relative;

  flex: 1;

  display: flex;
  flex-direction: column;

  min-width: 0;

  padding:
    54px 20px
    20px;

  background:
    var(--bh-card-background);
}


.bh-post-card__title {
  margin:
    0 0 12px;

  padding: 0;

  color:
    var(--bh-heading-color);

  font-family:
    var(--bh-font-family);

  font-size: 18px;
  line-height: 1.22;
  font-weight: 700;

  letter-spacing: -.018em;
}


/* =========================================================
   CARD TAGS
   ========================================================= */

.bh-post-card__terms {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;

  margin-bottom: 15px;
}


.bh-post-card__term {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 27px;
  max-width: 120px;

  padding:
    0 10px;

  overflow: hidden;

  border-radius: 999px;

  background:
    var(--bh-tag-background);

  color:
    var(--bh-tag-color);

  font-family:
    var(--bh-font-family);

  font-size: 11px;
  line-height: 1;
  font-weight: 600;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.bh-post-card__term--more {
  min-width: 27px;

  padding:
    0 8px;

  background:
    var(--bh-tag-more-background);

  color:
    var(--bh-tag-more-color);
}


/* =========================================================
   CARD TEASER
   ========================================================= */

.bh-post-card__teaser {
  display:
    -webkit-box;

  overflow: hidden;

  margin:
    0 42px 0 0;

  padding: 0;

  color:
    var(--bh-text-color);

  font-family:
    var(--bh-font-family);

  font-size: 14px;
  line-height: 1.5;

  -webkit-line-clamp: 2;

  -webkit-box-orient:
    vertical;
}


/* =========================================================
   READ MORE
   ========================================================= */

.bh-post-card__read-more {
  display: inline-block;

  width: max-content;

  margin-top: auto;

  padding-top: 17px;
  padding-right: 48px;

  color:
    var(--bh-accent);

  font-family:
    var(--bh-font-family);

  font-size: 14px;
  line-height: 1.2;
  font-weight: 600;

  transition:
    color .2s ease,
    transform .2s ease;
}


.bh-post-card:hover
.bh-post-card__read-more {
  color:
    var(--bh-accent-hover);

  transform:
    translateX(2px);
}


/* =========================================================
   CARD ARROW
   ========================================================= */

.bh-post-card__arrow {
  position: absolute;

  right: 17px;
  bottom: 17px;

  width: 38px;
  height: 38px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    var(--bh-arrow-background);

  color:
    var(--bh-arrow-color);

  font-size: 20px;
  line-height: 1;

  transition:
    color .2s ease,
    background .2s ease,
    transform .2s ease;
}


.bh-post-card:hover
.bh-post-card__arrow {
  background:
    var(--bh-arrow-hover-background);

  color:
    var(--bh-arrow-hover-color);

  transform:
    translateX(2px);
}


/* =========================================================
   SHOW ALL FEATURE CARD
   ========================================================= */

.bh-directory__show-all-card {
  position: relative;

  min-width: 0;
  min-height: 355px;

  overflow: hidden;

  border:
    1px solid
    var(--bh-show-all-border);

  border-radius: 24px;

  background:
    var(--bh-show-all-background);

  box-shadow:
    var(--bh-show-all-shadow);

  transition:
    transform .22s ease,
    box-shadow .22s ease;
}


.bh-directory__show-all-card:hover {
  transform:
    translateY(-3px);

  box-shadow:
    var(--bh-show-all-hover-shadow);
}


.bh-directory__show-all-button {
  appearance: none;

  position: relative;

  z-index: 1;

  width: 100%;
  height: 100%;

  min-height: 355px;

  display: flex;
  flex-direction: column;

  align-items: flex-start;

  padding: 22px;

  overflow: hidden;

  border: 0;

  background:
    transparent;

  color:
    inherit;

  font-family:
    var(--bh-font-family);

  text-align: left;

  cursor: pointer;
}


.bh-directory__show-all-blob {
  position: absolute;

  z-index: -1;

  right: -30px;
  top: -20px;

  width: 112%;
  height: 112%;

  fill:
    var(--bh-show-all-blob);

  pointer-events: none;
}


.bh-directory__show-all-sparkle {
  position: absolute;

  right: 18px;
  top: 22px;

  width: 38px;
  height: 38px;

  fill: none;

  stroke:
    var(--bh-show-all-doodle);

  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;

  pointer-events: none;
}


.bh-directory__show-all-icon {
  position: relative;

  z-index: 2;

  flex:
    0 0 auto;

  width: 54px;
  height: 54px;

  display: flex;

  align-items: center;
  justify-content: center;

  margin-bottom: 24px;

  border-radius: 17px;

  background:
    var(--bh-show-all-icon-background);

  color:
    var(--bh-show-all-icon-color);

  box-shadow:
    var(--bh-show-all-icon-shadow);
}


.bh-directory__show-all-icon-svg {
  width: 31px;
  height: 31px;

  fill: none;

  stroke: currentColor;

  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.bh-directory__show-all-content {
  position: relative;

  z-index: 2;

  display: flex;
  flex-direction: column;

  align-items: flex-start;

  width: 100%;
}


.bh-directory__show-all-eyebrow {
  margin-bottom: 5px;

  color:
    var(--bh-show-all-eyebrow-color);

  font-family:
    var(--bh-font-family);

  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;

  letter-spacing: .07em;

  text-transform: uppercase;
}


.bh-directory__show-all-title {
  margin-bottom: 9px;

  color:
    var(--bh-heading-color);

  font-family:
    var(--bh-font-family);

  font-size: 20px;
  line-height: 1.16;
  font-weight: 700;

  letter-spacing: -.02em;
}


.bh-directory__show-all-description {
  max-width: 215px;

  margin-bottom: 9px;

  color:
    var(--bh-text-color);

  font-family:
    var(--bh-font-family);

  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
}


.bh-directory__show-all-count {
  color:
    var(--bh-muted-color);

  font-family:
    var(--bh-font-family);

  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
}


.bh-directory__show-all-cta {
  position: relative;

  z-index: 2;

  width: 100%;
  min-height: 48px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-top: auto;

  padding:
    0 18px;

  border-radius: 999px;

  background:
    var(--bh-show-all-cta-background);

  color:
    var(--bh-show-all-cta-color);

  box-shadow:
    var(--bh-show-all-cta-shadow);

  font-family:
    var(--bh-font-family);

  font-size: 14px;
  line-height: 1;
  font-weight: 700;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


.bh-directory__show-all-cta svg {
  width: 21px;
  height: 21px;

  fill: none;

  stroke: currentColor;

  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.bh-directory__show-all-card:hover
.bh-directory__show-all-cta {
  transform:
    translateX(2px);

  box-shadow:
    var(--bh-show-all-cta-hover-shadow);
}


/* =========================================================
   SCROLL INDICATOR
   ========================================================= */

.bh-directory__scroll-indicator {
  display: none;

  width: 100%;

  padding-top: 3px;

  pointer-events: none;
}


.bh-directory__scroll-indicator-markers {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 7px;

  min-height: 8px;
}


.bh-directory__scroll-indicator-marker {
  display: block;

  flex:
    0 0 auto;

  width: 6px;
  height: 6px;

  border-radius: 999px;

  background:
    var(--bh-scroll-indicator-inactive);

  transition:
    width .22s ease,
    background .22s ease;
}


.bh-directory__scroll-indicator-marker.is-active {
  width: 28px;

  background:
    var(--bh-scroll-indicator-active);
}


/* =========================================================
   LOAD MORE / EMPTY
   ========================================================= */

.bh-directory__more {
  margin-top:
    34px !important;

  text-align: center;
}


.bh-directory__more-button {
  appearance: none;

  min-height: 48px;

  padding:
    0 28px;

  border: 0;

  border-radius: 999px;

  background:
    var(--bh-load-more-background);

  color:
    var(--bh-load-more-color);

  font-family:
    var(--bh-font-family);

  font-size: 15px;
  line-height: 1;
  font-weight: 700;

  cursor: pointer;
}


.bh-directory__empty {
  margin: 0;

  padding:
    38px 20px;

  color:
    var(--bh-muted-color);

  font-family:
    var(--bh-font-family);

  font-size: 15px;

  text-align: center;
}


/* =========================================================
   MODAL
   ========================================================= */

html.bh-preview-open,
html.bh-preview-open body {
  overflow:
    hidden !important;
}


.bh-preview {
  width:
    min(
      700px,
      calc(100vw - 64px)
    );

  max-width: 700px;

  max-height:
    calc(100dvh - 142px);

  margin:
    110px auto
    32px;

  padding: 0;

  border: 0;

  border-radius: 30px;

  background:
    var(--bh-modal-background);

  color:
    var(--bh-heading-color);

  /*
   * Vertical scrolling only.
   * Prevents the wave from generating a horizontal scrollbar.
   */
  overflow-x: hidden;
  overflow-y: auto;

  box-shadow:
    var(--bh-modal-shadow);

  overscroll-behavior:
    contain;
}


.bh-preview::backdrop {
  background:
    var(--bh-modal-backdrop);

  backdrop-filter:
    blur(5px);

  -webkit-backdrop-filter:
    blur(5px);
}


.bh-preview__dialog {
  position: relative;

  width: 100%;
  min-height: 100%;

  overflow-x: hidden;

  background:
    var(--bh-modal-background);
}


/* =========================================================
   MODAL CLOSE
   ========================================================= */

.bh-preview__close {
  appearance: none;

  position: absolute;

  right: 18px;
  top: 18px;

  z-index: 20;

  width: 44px;
  height: 44px;

  display: flex;

  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0;

  border: 0;

  border-radius: 50%;

  background:
    var(--bh-modal-close-background);

  color:
    var(--bh-modal-close-color);

  font-family:
    Arial,
    sans-serif;

  font-size: 29px;
  line-height: 1;

  cursor: pointer;

  box-shadow:
    var(--bh-modal-close-shadow);
}


.bh-preview__loading {
  padding:
    90px 30px;

  color:
    var(--bh-text-color);

  font-family:
    var(--bh-font-family);

  font-size: 16px;

  text-align: center;
}


/* =========================================================
   MODAL CARD
   ========================================================= */

.bh-preview-card {
  width: 100%;

  overflow: visible;

  background:
    var(--bh-modal-background);
}


/* =========================================================
   MODAL HERO
   ========================================================= */

.bh-preview-card__hero {
  position: relative;

  /*
   * Hero must sit above the body stacking context,
   * otherwise the lower portion of the logo is covered.
   */
  z-index: 3;

  width: 100%;
  height: 300px;

  overflow: visible;

  background:
    var(--bh-modal-hero-background);
}


.bh-preview-card__hero-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}


.bh-preview-card__hero-placeholder {
  position: absolute;

  inset: 0;

  overflow: hidden;

  background:
    var(--bh-modal-placeholder-background);
}


/* =========================================================
   MODAL ORGANIC WAVE
   FIX 4 + 5 + 6

   - edge-to-edge
   - strongly asymmetric
   - no element wider than the modal
   ========================================================= */

.bh-preview-card__hero::after {
  content: "";

  position: absolute;

  z-index: 4;

  left: 0;
  right: 0;

  bottom: -10px;

  width: 100%;
  height: 48px;

  background:
    var(--bh-modal-background);

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 118 C120 125 210 70 330 62 C455 54 520 92 625 103 C735 116 830 82 1000 72 L1000 200 L0 200 Z'/%3E%3C/svg%3E");

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 118 C120 125 210 70 330 62 C455 54 520 92 625 103 C735 116 830 82 1000 72 L1000 200 L0 200 Z'/%3E%3C/svg%3E");
  
  -webkit-mask-repeat:
    no-repeat;

  mask-repeat:
    no-repeat;

  -webkit-mask-position:
    center bottom;

  mask-position:
    center bottom;

  -webkit-mask-size:
    100% 102%;

  mask-size:
    100% 102%;

  pointer-events: none;
}


/* =========================================================
   MODAL LOGO
   FIX 7
   ========================================================= */

.bh-preview-card__logo {
  position: absolute;

  left: 50%;
  bottom: -55px;

  z-index: 6;

  width: max-content;

  min-width: 150px;
  max-width: 280px;

  height: 128px;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 22px;

  overflow: visible;

  border: 0;

  border-radius:
    24px 24px
    0 0;

  background:
    var(--bh-modal-background);

  transform:
    translateX(-50%);

  box-shadow: none;
}


.bh-preview-card__logo img {
  display: block;

  width: auto;
  height: auto;

  max-width: 220px;
  max-height: 78px;

  object-fit: contain;
}


/* =========================================================
   MODAL BODY
   ========================================================= */

.bh-preview-card__body {
  position: relative;

  /*
   * Body below hero/logo stacking context so it cannot
   * cover the bottom portion of the logo.
   */
  z-index: 1;

  padding:
    40px 48px
    48px;

  background:
    var(--bh-modal-background);
}


.bh-preview-card__title {
  max-width: 560px;

  margin:
    0 0 22px;

  padding: 0;

  color:
    var(--bh-heading-color);

  font-family:
    var(--bh-font-family);

  font-size: 36px;
  line-height: 1.12;
  font-weight: 700;

  letter-spacing: -.03em;
}


/* =========================================================
   MODAL TAGS
   ========================================================= */

.bh-preview-card__tags {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 30px;
}


.bh-preview-card__tag {
  display: inline-flex;

  align-items: center;

  min-height: 36px;

  padding:
    0 15px;

  border-radius: 999px;

  background:
    var(--bh-tag-background);

  color:
    var(--bh-tag-color);

  font-family:
    var(--bh-font-family);

  font-size: 13px;
  line-height: 1;
  font-weight: 600;
}


/* =========================================================
   MODAL DESCRIPTION
   ========================================================= */

.bh-preview-card__description {
  max-width: 590px;

  margin:
    0 0 34px;

  padding: 0;

  color:
    var(--bh-text-color);

  font-family:
    var(--bh-font-family);

  font-size: 17px;
  line-height: 1.65;
}


/* =========================================================
   MODAL CTA
   ========================================================= */

.bh-preview-card__cta {
  width: 100%;
  min-height: 58px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 12px;

  padding:
    0 28px;

  border-radius: 999px;

  background:
    var(--bh-modal-cta-background);

  color:
    var(--bh-modal-cta-color) !important;

  font-family:
    var(--bh-font-family);

  font-size: 17px;
  line-height: 1;
  font-weight: 700;

  text-decoration:
    none !important;

  box-shadow:
    var(--bh-modal-cta-shadow);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


.bh-preview-card__cta:hover {
  transform:
    translateY(-1px);

  box-shadow:
    var(--bh-modal-cta-hover-shadow);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

  .bh-directory {
    padding:
      26px 24px
      58px;
  }


  .bh-directory__filters {
    margin-bottom:
      46px !important;
  }


  .bh-directory--single >
  .bh-directory__grid,

  .bh-directory__group >
  .bh-directory__group-track >
  .bh-directory__grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .bh-post-card,
  .bh-directory__show-all-card {
    min-height: 340px;
  }


  .bh-directory__show-all-button {
    min-height: 340px;
  }


  .bh-preview {
    width:
      min(
        660px,
        calc(100vw - 48px)
      );

    max-width: 660px;

    max-height:
      calc(100dvh - 124px);

    margin:
      100px auto
      24px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  /* =======================================================
     DIRECTORY
     ======================================================= */

  .bh-directory {
    padding:
      20px 0
      48px;
  }


  .bh-directory >
  .bh-directory__header,

  .bh-directory >
  .bh-directory__filters,

  .bh-directory >
  .bh-directory__empty,

  .bh-directory >
  .bh-directory__more,

  .bh-directory >
  .bh-directory__groups {
    width: 100%;
    max-width: none;
  }


  /* =======================================================
     FILTERS
     FIX 8 + 9
     ======================================================= */

  .bh-directory__filters {
    gap: 17px;

    margin:
      0 16px
      43px !important;

    width:
      calc(100% - 32px) !important;

    padding:
      17px 0;

    border: 0;

    border-radius: 0;

    background:
      transparent;

    box-shadow:
      none;

    backdrop-filter:
      none;

    -webkit-backdrop-filter:
      none;
  }


  .bh-directory__filter-group {
    display: block;
  }


  .bh-directory__filter-label {
    display: block;

    margin:
      0 0 8px;

    font-size: 12px;
  }


  .bh-directory__filter-options {
    flex-wrap: nowrap;

    gap: 8px;

    overflow-x: auto;

    /*
     * Extra vertical space prevents WebKit from clipping
     * button edges during its scroll-container repaint.
     */
    margin:
      -4px -16px;

    padding:
      4px 16px
      9px;

    scrollbar-width:
      none;

    -webkit-overflow-scrolling:
      touch;
  }


  .bh-directory__filter-options::-webkit-scrollbar {
    display: none;
  }


  .bh-directory__filter-button {
    flex:
      0 0 auto;

    min-height: 39px;

    padding:
      0 15px;

    font-size: 13px;

    /*
     * Prevent touch browsers from retaining the desktop
     * translateY hover state after tapping.
     */
    transform: none;
  }


  .bh-directory__filter-button:hover {
    transform: none;
  }


  .bh-directory__filter-button.is-active {
    /*
     * Flat mobile active state.
     */
    box-shadow: none;

    transform: none;
  }


  /* =======================================================
     GROUPS
     ======================================================= */

  .bh-directory__groups {
    gap: 48px;
  }


  .bh-directory__group-header {
    align-items: flex-end;

    margin:
      0 16px
      16px;
  }


  .bh-directory__group-title {
    font-size: 26px;
  }


  .bh-directory__group-description {
    margin-top: 4px;

    max-width: 280px;

    font-size: 13px;
    line-height: 1.4;
  }


  .bh-directory__group-count {
    font-size: 12px;

    white-space: nowrap;
  }


  /* =======================================================
     MOBILE CAROUSEL
     ======================================================= */

  .bh-directory__group-track {
    width: 100%;

    overflow: hidden;
  }


  .bh-directory__group >
  .bh-directory__group-track >
  .bh-directory__grid {
    display: grid;

    grid-template-columns: none;

    grid-auto-flow: column;

    grid-auto-columns:
      minmax(
        245px,
        76vw
      );

    gap: 13px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type:
      x mandatory;

    scroll-padding-left:
      16px;

    padding:
      0 16px
      13px;

    scrollbar-width:
      none;

    overscroll-behavior-x:
      contain;

    -webkit-overflow-scrolling:
      touch;
  }


  .bh-directory__group >
  .bh-directory__group-track >
  .bh-directory__grid::-webkit-scrollbar {
    display: none;
  }


  .bh-directory__partner-slot,
  .bh-directory__show-all-card {
    scroll-snap-align: start;
  }


  /* =======================================================
     SCROLL INDICATOR
     ======================================================= */

  .bh-directory__scroll-indicator {
    display: block;

    padding-top: 5px;
  }


  .bh-directory__scroll-indicator[hidden] {
    display:
      none !important;
  }


  /* =======================================================
     PARTNER CARD
     FIX 3
     ======================================================= */

  .bh-post-card {
    min-height: 315px;

    border-radius: 22px;

    box-shadow: none;
  }


  .bh-post-card:hover {
    transform: none;

    box-shadow: none;
  }


  .bh-post-card__hero {
    height: 122px;

    margin-bottom: -2px;
  }


  .bh-post-card__wave {
    bottom: -3px;

    height: 43px;
  }


  .bh-post-card__logo {
    left: 15px;
    bottom: -31px;

    min-width: 68px;

    max-width:
      calc(100% - 30px);

    height: 68px;

    padding:
      9px 12px;

    border-radius: 16px;
  }


  .bh-post-card__logo img {
    max-width:
      130px !important;

    max-height:
      48px !important;
  }


  .bh-post-card__content {
    padding:
      47px 16px
      17px;
  }


  .bh-post-card__title {
    margin-bottom: 10px;

    font-size: 17px;
  }


  .bh-post-card__terms {
    gap: 5px;

    margin-bottom: 12px;
  }


  .bh-post-card__term {
    min-height: 25px;

    max-width: 94px;

    padding:
      0 8px;

    font-size: 10px;
  }


  .bh-post-card__teaser {
    margin-right: 37px;

    font-size: 13px;
    line-height: 1.45;
  }


  .bh-post-card__read-more {
    padding-top: 14px;
    padding-right: 42px;

    font-size: 13px;
  }


  .bh-post-card__arrow {
    right: 13px;
    bottom: 14px;

    width: 34px;
    height: 34px;

    font-size: 17px;
  }


  /* =======================================================
     SHOW ALL CARD
     FIX 3
     ======================================================= */

  .bh-directory__show-all-card,
  .bh-directory__show-all-button {
    min-height: 315px;
  }


  .bh-directory__show-all-card {
    border-radius: 22px;

    box-shadow: none;
  }


  .bh-directory__show-all-card:hover {
    transform: none;

    box-shadow: none;
  }


  .bh-directory__show-all-button {
    padding: 19px;
  }


  .bh-directory__show-all-icon {
    width: 49px;
    height: 49px;

    margin-bottom: 20px;

    border-radius: 15px;
  }


  .bh-directory__show-all-icon-svg {
    width: 28px;
    height: 28px;
  }


  .bh-directory__show-all-sparkle {
    right: 17px;
    top: 19px;

    width: 34px;
    height: 34px;
  }


  .bh-directory__show-all-eyebrow {
    font-size: 10px;
  }


  .bh-directory__show-all-title {
    font-size: 19px;
  }


  .bh-directory__show-all-description {
    max-width: 210px;

    font-size: 12px;
  }


  .bh-directory__show-all-count {
    font-size: 11px;
  }


  .bh-directory__show-all-cta {
    min-height: 46px;

    padding:
      0 16px;

    font-size: 13px;
  }


  /* =======================================================
     SINGLE DIRECTORY
     ======================================================= */

  .bh-directory--single >
  .bh-directory__grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap: 12px;

    padding:
      0 16px;
  }


  .bh-directory--single
  .bh-post-card {
    min-height: 285px;
  }


  /* =======================================================
     MOBILE FULLSCREEN MODAL
     FIX 2
     ======================================================= */

  html.bh-preview-open,
  html.bh-preview-open body {
    width: 100%;
    height: 100%;

    overflow:
      hidden !important;
  }


  /*
   * Fullscreen dialog layer.
   *
   * This continues to completely ignore the site menu/header.
   */
  .bh-preview {
    width: 100vw;
    max-width: none;

    height: 100dvh;
    max-height: 100dvh;

    margin: 0;
    padding: 0;

    border: 0;

    border-radius: 0;

    background:
      transparent;

    overflow: hidden;

    box-shadow: none;

    overscroll-behavior:
      contain;
  }


  .bh-preview::backdrop {
    background:
      var(--bh-modal-backdrop);

    backdrop-filter: none;

    -webkit-backdrop-filter: none;
  }


  /*
   * Visible modal card.
   *
   * The fullscreen dialog remains around it, but the card
   * again has its visual frame and rounded corners.
   */
  .bh-preview__dialog {
    position: relative;

    width:
      calc(100% - 16px);

    height:
      calc(100dvh - 16px);

    min-height:
      calc(100dvh - 16px);

    margin: 8px;

    overflow-x: hidden;
    overflow-y: auto;

    border-radius: 24px;

    background:
      var(--bh-modal-background);

    box-shadow:
      var(--bh-modal-shadow);

    overscroll-behavior:
      contain;
  }


  /* =======================================================
     MOBILE MODAL CLOSE
     ======================================================= */

  .bh-preview__close {
    right: 16px;

    top:
      calc(
        16px +
        env(safe-area-inset-top)
      );

    width: 42px;
    height: 42px;

    font-size: 27px;
  }


  /* =======================================================
     MOBILE MODAL HERO
     ======================================================= */

  .bh-preview-card__hero {
    height: 38dvh;

    min-height: 245px;
    max-height: 340px;
  }


  .bh-preview-card__hero::after {
    height: 48px;
  }


  /* =======================================================
     MOBILE MODAL LOGO
     ======================================================= */

  .bh-preview-card__logo {
    bottom: -42px;

    min-width: 135px;

    max-width:
      calc(100% - 80px);

    height: 104px;

    padding: 17px;

    border-radius:
      20px 20px
      0 0;

    background:
      var(--bh-modal-background);

    box-shadow: none;
  }


  .bh-preview-card__logo img {
    max-width: 185px;
    max-height: 64px;
  }


  /* =======================================================
     MOBILE MODAL BODY
     ======================================================= */

  .bh-preview-card__body {
    min-height:
      calc(
        100dvh -
        min(
          38dvh,
          340px
        )
      );

    padding:
      40px 22px
      calc(
        28px +
        env(safe-area-inset-bottom)
      );

    background:
      var(--bh-modal-background);
  }


  .bh-preview-card__title {
    margin-bottom: 18px;

    font-size: 28px;
    line-height: 1.12;
  }


  .bh-preview-card__tags {
    gap: 6px;

    margin-bottom: 23px;
  }


  .bh-preview-card__tag {
    min-height: 32px;

    padding:
      0 12px;

    font-size: 11px;
  }


  .bh-preview-card__description {
    margin-bottom: 26px;

    font-size: 15px;
    line-height: 1.58;
  }


  .bh-preview-card__cta {
    min-height: 54px;

    padding:
      0 20px;

    font-size: 15px;
  }

}