/* Behavioral health specialty page (v2/behavioral-health-specialty.blade.php). Loaded after style-v2.css. */

/* ============================================================= */
/* Hero — Figma node 8777:68472 (1440 x 833)                      */
/* ============================================================= */
.bh-hero {
  position: relative;
  padding: 42.5px 0 42.33px;
  overflow: hidden;
  /* Clip the visual's overhang sideways only, so the Service dropdown can
     open past the section's bottom edge. */
  overflow-x: clip;
  overflow-y: visible;
  background: linear-gradient(to left, rgba(239, 242, 255, 0.6) 0%, #f9faff 48.866%, rgba(239, 242, 255, 0.3) 98.681%);
}

/* Copy column (622px) + testimonial visual; the form sits 150px below. */
.bh-hero-top {
  position: relative;
  min-height: 474.17px;
  margin-bottom: 150px;
}

.bh-hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  width: 622px;
  max-width: 100%;
}

.bh-hero-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 12px;
  line-height: 9.976px;
  color: var(--c-blue);
  text-align: center;
  white-space: nowrap;
  background: rgba(39, 55, 117, 0.1);
  border-radius: 9.069px;
}

.bh-hero-heading {
  width: 100%;
  margin: 0;
  padding-bottom: 0.605px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 42px;
  line-height: 50.4px;
  color: var(--c-blue);
}

.bh-hero-heading .accent {
  color: var(--c-orange);
}

.bh-hero-lead,
.bh-hero-list li {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  line-height: 28.8px;
  color: var(--c-text);
}

.bh-hero-lead {
  margin: 0;
}

.bh-hero-list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bh-hero-list li {
  position: relative;
  padding-left: 24px;
}

.bh-hero-list li::before {
  content: "";
  position: absolute;
  top: 12.4px;
  left: 9px;
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
}

/* ISO / HIPAA / AAPC — 121 x 55 image windows cropped as in Figma. */
.bh-hero-certs {
  display: flex;
  flex-wrap: wrap;
  gap: 16.197px;
  align-items: center;
  margin-top: 20px; /* 40px from the list, with the column gap */
}

.bh-cert {
  display: flex;
  align-items: center;
  padding: 9.074px;
  background: var(--c-white);
  border-radius: 7.562px;
  filter: drop-shadow(0 0 3.781px rgba(0, 0, 0, 0.1));
  transition: translate 0.3s ease, filter 0.3s ease;
}

.bh-cert:hover {
  translate: 0 -3px;
  filter: drop-shadow(0 6px 10px rgba(39, 55, 117, 0.15));
}

.bh-cert-img {
  position: relative;
  display: block;
  width: 121.053px;
  height: 55.412px;
  overflow: hidden;
}

.bh-cert-img img {
  position: absolute;
  display: block;
  max-width: none;
}

.bh-cert--iso img {
  top: -9.7%;
  left: -4.59%;
  width: 108.84%;
  height: 119.4%;
}

.bh-cert--hipaa img {
  top: -0.7%;
  left: -19.23%;
  width: 122.89%;
  height: 100%;
}

.bh-cert--aapc img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Visual: brain + testimonial cards + review badges ---------- */
/* Figma frame 8777:68546 (760.83 x 575). Every size inside is written as
   N * --u, where --u is 1px at full width and shrinks with the container
   so the collage keeps its proportions on tablets. */
.bh-hero-visual-wrap {
  position: absolute;
  top: -13.5px;
  right: calc(-1 * min(42.83px, var(--page-gutter)));
  width: 760.83px;
  container-type: inline-size;
}

.bh-hero-visual {
  --u: calc(100cqw / 760.83);
  position: relative;
  width: 100%;
  height: calc(575 * var(--u));
}

.bh-hero-brain {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: calc(718 * var(--u));
  height: calc(575 * var(--u));
  overflow: hidden;
  opacity: 0.3;
  pointer-events: none;
}

.bh-hero-brain img {
  position: absolute;
  top: 0.07%;
  left: 0.11%;
  width: 100%;
  max-width: none;
  height: 113.19%;
}

/* Dotted connectors (rotated exactly as the Figma vectors). */
.bh-line {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.bh-line > span {
  position: relative;
  flex: none;
}

.bh-line img {
  position: absolute;
  display: block;
  max-width: none;
  width: auto;
  height: auto;
}

.bh-line--left,
.bh-line--right {
  top: calc(421.03 * var(--u));
  width: calc(93.292 * var(--u));
  height: calc(77.474 * var(--u));
}

.bh-line--left  { left: calc(63.34 * var(--u)); }
.bh-line--right { left: calc(607.34 * var(--u)); }

.bh-line--left > span,
.bh-line--right > span {
  width: calc(82.158 * var(--u));
  height: calc(44.205 * var(--u));
}

.bh-line--left > span  { rotate: 152.14deg; }
.bh-line--right > span { rotate: 27.86deg; scale: 1 -1; }

.bh-line--left img,
.bh-line--right img {
  inset: -6.03% -3.25% 1.29% -0.28%;
  width: calc(100% + 3.53%);
  height: calc(100% + 4.74%);
}

.bh-line--top {
  top: calc(78 * var(--u));
  left: calc(363.2 * var(--u));
  width: calc(37.596 * var(--u));
  height: calc(45.5 * var(--u));
}

.bh-line--top > span {
  width: calc(21.263 * var(--u));
  height: calc(40.226 * var(--u));
  rotate: 27.86deg;
  scale: 1 -1;
}

.bh-line--top img {
  inset: -0.58% -2.08% -6.63% -12.54%;
  width: calc(100% + 14.62%);
  height: calc(100% + 7.21%);
}

/* Cards frame 8777:68548 (673.45 x 348.67) at (45, 124). */
.bh-cards {
  position: absolute;
  top: calc(124 * var(--u));
  left: calc(45 * var(--u));
  z-index: 2;
  width: calc(673.447 * var(--u));
  height: calc(348.671 * var(--u));
}

/* Each card is laid out at the centre-card size (462.8px); the side
   slots are the same card scaled to 0.74 (342.45 / 462.8), as in Figma. */
.bh-tcard {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: calc(13.774 * var(--u));
  align-items: flex-start;
  box-sizing: border-box;
  width: calc(462.796 * var(--u));
  margin: 0;
  padding: calc(33.746 * var(--u)) calc(48.897 * var(--u));
  overflow: hidden;
  background: var(--c-white);
  border: calc(0.689 * var(--u)) solid #f3f4f6;
  border-radius: calc(11.019 * var(--u));
  box-shadow: 0 calc(2 * var(--u)) calc(24 * var(--u)) 0 rgba(0, 0, 0, 0.15);
  transform-origin: 0 0;
  transition:
    transform 0.9s cubic-bezier(0.65, 0, 0.35, 1),
    translate 0.35s ease,
    box-shadow 0.35s ease;
  cursor: pointer;
}

.bh-tcard.is-center {
  z-index: 3;
  transform: translate(calc(105 * var(--u)), 0);
  cursor: default;
}

.bh-tcard.is-left {
  z-index: 1;
  transform: translate(0, calc(45 * var(--u))) scale(0.74);
}

.bh-tcard.is-right {
  z-index: 1;
  transform: translate(calc(331 * var(--u)), calc(45 * var(--u))) scale(0.74);
}

.bh-tcard.is-center:hover {
  translate: 0 calc(-4 * var(--u));
  box-shadow: 0 calc(10 * var(--u)) calc(32 * var(--u)) 0 rgba(39, 55, 117, 0.2);
}

.bh-tcard-quote {
  position: absolute;
  top: calc(26.17 * var(--u));
  width: calc(31.679 * var(--u));
  height: calc(31.679 * var(--u));
  max-width: none;
}

.bh-tcard-quote--open  { left: calc(8.95 * var(--u)); }
.bh-tcard-quote--close { left: calc(401.5 * var(--u)); rotate: 180deg; }

.bh-tcard-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(5.509 * var(--u)) calc(6.887 * var(--u));
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: calc(10 * var(--u));
  line-height: calc(6.871 * var(--u));
  color: var(--c-blue);
  white-space: nowrap;
  background: rgba(39, 55, 117, 0.1);
  border-radius: calc(6.246 * var(--u));
}

.bh-tcard-body {
  display: flex;
  flex-direction: column;
  gap: calc(13.774 * var(--u));
  width: 100%;
  padding-bottom: calc(16.528 * var(--u));
}

.bh-tcard-text {
  margin: 0;
  padding: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: calc(14 * var(--u));
  line-height: calc(22.038 * var(--u));
  color: var(--c-text);
  border: 0;
  quotes: none;
}

.bh-tcard-rating {
  display: flex;
  gap: calc(11.019 * var(--u));
  align-items: center;
}

.bh-tcard-rating > img {
  display: block;
  width: calc(84.344 * var(--u));
  height: calc(13.774 * var(--u));
  max-width: none;
}

.bh-tcard-score {
  display: flex;
  gap: calc(6.887 * var(--u));
  align-items: center;
  height: calc(13.774 * var(--u));
  padding-left: calc(11.708 * var(--u));
  border-left: calc(0.689 * var(--u)) solid #d1d5db;
}

.bh-tcard-score b {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: calc(10 * var(--u));
  line-height: calc(9.642 * var(--u));
  color: var(--c-text);
}

.bh-tcard-verified {
  display: flex;
  gap: calc(2.755 * var(--u));
  align-items: center;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: calc(10 * var(--u));
  line-height: calc(11.019 * var(--u));
  letter-spacing: calc(-0.2066 * var(--u));
  color: #3b82f6;
  white-space: nowrap;
}

.bh-tcard-verified img {
  display: block;
  width: calc(11.019 * var(--u));
  height: calc(11.019 * var(--u));
  max-width: none;
}

.bh-tcard-sep {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: calc(0.689 * var(--u)) solid #e2e8f0;
  opacity: 1;
}

.bh-tcard-author {
  display: flex;
  gap: calc(11.019 * var(--u));
  align-items: center;
  width: 100%;
}

.bh-tcard-avatar {
  position: relative;
  flex: none;
  width: calc(44.076 * var(--u));
  height: calc(44.076 * var(--u));
  overflow: hidden;
  background: #eff6ff;
  border-radius: 50%;
}

.bh-tcard-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.bh-tcard-avatar--logo img {
  position: absolute;
  top: -2.74%;
  left: -0.24%;
  width: 183.45%;
  height: 104.86%;
  object-fit: fill;
}

.bh-tcard-who {
  display: flex;
  flex-direction: column;
  gap: calc(2.755 * var(--u));
  min-width: 0;
}

.bh-tcard-who b {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: calc(12 * var(--u));
  line-height: calc(15.495 * var(--u));
  color: var(--c-blue);
  white-space: nowrap;
}

.bh-tcard-who small {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: calc(10 * var(--u));
  line-height: calc(11.019 * var(--u));
  letter-spacing: calc(0.8264 * var(--u));
  color: var(--c-placeholder);
  text-transform: uppercase;
  opacity: 0.6;
}

/* Pagination dots: 33.73px under the cards frame, centred (+0.28px). */
.bh-dots {
  position: absolute;
  bottom: calc(-33.73 * var(--u));
  left: calc(50% + 0.28 * var(--u));
  display: flex;
  gap: calc(8 * var(--u));
  transform: translateX(-50%);
}

.bh-dot {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  min-width: 6px;
  min-height: 6px;
  padding: 0;
  background: var(--c-placeholder);
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.3s ease, scale 0.3s ease;
}

.bh-dot:hover {
  scale: 1.2;
}

.bh-dot.is-active {
  background: var(--c-blue);
}

.bh-dot:focus-visible {
  outline: 2px solid var(--c-blue) !important;
  outline-offset: 2px;
}

/* Review-site badges (Serchen, Trustpilot, Google). */
.bh-rate {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(9.074 * var(--u));
  background: var(--c-white);
  border-radius: calc(7.562 * var(--u));
  filter: drop-shadow(0 0 calc(3.781 * var(--u)) rgba(0, 0, 0, 0.1));
}

.bh-rate-logo {
  position: relative;
  display: block;
  overflow: hidden;
}

.bh-rate-logo img {
  position: absolute;
  display: block;
  max-width: none;
}

.bh-rate-score {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-weight: 500;
  color: var(--c-text);
  text-align: center;
  white-space: nowrap;
  opacity: 0.8;
}

.bh-rate-score img {
  display: block;
  flex: none;
  max-width: none;
  /* star vector inside its square frame: inset 7.87% 9.62% 14.71% */
  box-sizing: content-box;
}

.bh-rate--serchen {
  top: calc(9 * var(--u));
  left: calc(314 * var(--u));
}

.bh-rate--serchen .bh-rate-logo {
  width: calc(120.356 * var(--u));
  height: calc(31.792 * var(--u));
}

.bh-rate--serchen .bh-rate-logo img {
  top: 4.19%;
  left: 0.21%;
  width: 99.97%;
  height: 90.57%;
}

.bh-rate--serchen .bh-rate-score {
  gap: calc(3.778 * var(--u));
  height: calc(18.134 * var(--u));
  font-size: calc(9.067 * var(--u));
  line-height: calc(18.134 * var(--u));
  letter-spacing: calc(0.1511 * var(--u));
}

.bh-rate--serchen .bh-rate-score img {
  width: calc(9.763 * var(--u));
  height: calc(9.359 * var(--u));
  padding: calc(0.951 * var(--u)) calc(1.163 * var(--u)) calc(1.778 * var(--u));
}

.bh-rate--trustpilot {
  top: calc(498 * var(--u));
  left: calc(14 * var(--u));
  justify-content: center;
  gap: calc(4.848 * var(--u));
  box-sizing: border-box;
  width: calc(143.391 * var(--u));
  height: calc(74 * var(--u));
}

.bh-rate--trustpilot .bh-rate-logo {
  width: calc(110.76 * var(--u));
  height: calc(26.664 * var(--u));
}

.bh-rate--trustpilot .bh-rate-logo img {
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
}

.bh-rate--trustpilot .bh-rate-score {
  gap: calc(4.04 * var(--u));
  height: calc(19.392 * var(--u));
  font-size: calc(9.696 * var(--u));
  line-height: calc(19.392 * var(--u));
  letter-spacing: calc(0.1616 * var(--u));
}

.bh-rate--trustpilot .bh-rate-score img {
  width: calc(10.441 * var(--u));
  height: calc(10.009 * var(--u));
  padding: calc(1.017 * var(--u)) calc(1.244 * var(--u)) calc(1.902 * var(--u));
}

.bh-rate--google {
  top: calc(499 * var(--u));
  left: calc(598 * var(--u));
  gap: calc(4.551 * var(--u));
  width: calc(144.678 * var(--u));
  box-sizing: content-box;
}

.bh-rate--google .bh-rate-logo {
  width: calc(96.479 * var(--u));
  height: calc(29.126 * var(--u));
}

.bh-rate--google .bh-rate-logo img {
  top: -0.69%;
  left: 1.45%;
  width: 97.42%;
  height: 100%;
}

.bh-rate--google .bh-rate-score {
  gap: calc(4.551 * var(--u));
  height: calc(21.844 * var(--u));
  font-size: calc(10.922 * var(--u));
  line-height: calc(21.844 * var(--u));
  letter-spacing: calc(0.182 * var(--u));
}

.bh-rate--google .bh-rate-score img {
  width: calc(11.761 * var(--u));
  height: calc(11.274 * var(--u));
  padding: calc(1.146 * var(--u)) calc(1.401 * var(--u)) calc(2.142 * var(--u));
}

/* ---------- Booking form (reuses the home .booking-form markup) ---------- */
.bh-v2 .bh-hero-form {
  position: relative;
  z-index: 2;
  background: var(--c-white);
  border: 0;
  border-radius: 20px;
  padding: 30px 40px;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.15));
}

.bh-v2 .bh-hero-form .booking-fields {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 1px;
}

.bh-v2 .bh-hero-form .field label {
  margin: 0;
  font-family: var(--font-primary);
  line-height: normal;
  color: var(--c-text);
}

.bh-v2 .bh-hero-form .field input,
.bh-v2 .bh-hero-form .field select {
  width: 100%;
  padding: 0 11px;
  line-height: normal;
}

.bh-v2 .bh-hero-form .field--select {
  position: relative;
}

.bh-v2 .bh-hero-form .field select {
  padding-right: 34px;
  cursor: pointer;
}

/* octicon chevron-up, flipped 180deg as in Figma; 11px from the right edge. */
.bh-select-chevron {
  position: absolute;
  right: 11px;
  bottom: 12px;
  width: 16px;
  height: 16px;
  max-width: none;
  rotate: 180deg;
  pointer-events: none;
  transition: rotate 0.25s ease;
}

.field--select.is-open .bh-select-chevron {
  rotate: 0deg;
}

/* Custom dropdown built by script-v2.js (Figma 8777:95679). The native
   select stays in the form, visually hidden, for validation + submit. */
.bh-v2 .field--select.is-enhanced .bh-select-native {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.bh-select-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 34px 0 11px;
  font-family: var(--font-primary) !important;
  font-size: 14px;
  line-height: normal;
  color: var(--c-text);
  text-align: left;
  background: var(--c-bg-blue);
  border: 1px solid var(--c-light-grey);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bh-select-trigger.is-placeholder {
  color: var(--c-placeholder);
}

.bh-select-trigger:focus-visible,
.field--select.is-open .bh-select-trigger {
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(39, 55, 117, 0.12);
}

.bh-select-trigger.is-invalid {
  border-color: var(--c-orange);
}

.bh-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Panel: white, #e5e7eb border, 10px radius, 21px sides, 10px between rows.
   Rows carry 5px padding (and -10px side margins) for the hover wash, so
   the panel's 14.5px top/bottom padding is 9.5px + 5px. */
.bh-select-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: max-content;
  min-width: 100%;
  max-width: min(612px, calc(100vw - 32px));
  max-height: 597px;
  margin: 0;
  padding: 9.5px 21px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  background: var(--c-white);
  border: 1px solid var(--c-light-grey);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  outline: none;
  visibility: hidden;
  opacity: 0;
  translate: 0 -6px;
  transition: opacity 0.2s ease, translate 0.2s ease, visibility 0s 0.2s;
}

.field--select.is-up .bh-select-list {
  top: auto;
  bottom: calc(40px + 8px); /* 8px above the 40px trigger (the label sits over it) */
  translate: 0 6px;
}

.field--select.is-open .bh-select-list {
  visibility: visible;
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.2s ease, translate 0.2s ease, visibility 0s;
}

.bh-select-option {
  margin: 0 -10px;
  padding: 5px 10px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  color: var(--c-text);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.bh-select-option.is-active {
  color: var(--c-blue);
  background: var(--c-bg-blue);
}

.bh-select-option[aria-selected="true"] {
  font-weight: 500;
  color: var(--c-blue);
}

@media (max-width: 767px) {
  .bh-select-option {
    font-size: 15px;
  }
}

.bh-v2 .bh-hero-form .field input:focus,
.bh-v2 .bh-hero-form .field select:focus {
  box-shadow: 0 0 0 3px rgba(39, 55, 117, 0.12);
}

.bh-v2 .bh-hero-form .booking-submit {
  position: relative;
  overflow: hidden;
  padding: 0 21px;
  font-family: var(--font-primary);
  line-height: 12px;
  border-radius: 60px;
}

/* Light sweep across the button every few seconds. */
.bh-v2 .bh-hero-form .booking-submit::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  translate: -120% 0;
  animation: bh-shine 4.5s 2.4s ease-in-out infinite;
  pointer-events: none;
}

.bh-v2 .booking-response {
  margin: 12px 0 0;
}

/* ============================================================= */
/* Hero animation                                                 */
/* Plays on first paint in pure CSS (no flash while script-v2.js  */
/* loads). Entrances use opacity/translate/scale so the carousel  */
/* slots (transform) and Figma rotations stay intact.             */
/* ============================================================= */
@keyframes bh-rise {
  from { opacity: 0; translate: 0 24px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-pop {
  from { opacity: 0; scale: 0.82; }
  to   { opacity: 1; scale: 1; }
}

@keyframes bh-brain-in {
  from { opacity: 0; scale: 0.9; }
  to   { opacity: 1; scale: 1; }
}

@keyframes bh-breathe {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }
}

/* Animates `top`, not translate: a compositor-only animation on the cards
   left Chrome painting them on stale layers (wrong stacking, and the
   carousel slot changes stopped showing). */
@keyframes bh-card-in {
  from { opacity: 0; top: 48px; }
  to   { opacity: 1; top: 0; }
}

@keyframes bh-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}

@keyframes bh-draw-up {
  from { opacity: 0; clip-path: inset(100% 0 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes bh-draw-down {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes bh-shine {
  0%, 70% { translate: -120% 0; }
  100%    { translate: 320% 0; }
}

.bh-hero-pill,
.bh-hero-heading,
.bh-hero-lead,
.bh-hero-list li,
.bh-v2 .bh-hero-form {
  animation: bh-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-hero-pill    { animation-delay: 0.05s; }
.bh-hero-heading { animation-delay: 0.15s; }
.bh-hero-lead    { animation-delay: 0.3s; }
.bh-hero-list li:nth-child(1) { animation-delay: 0.38s; }
.bh-hero-list li:nth-child(2) { animation-delay: 0.45s; }
.bh-hero-list li:nth-child(3) { animation-delay: 0.52s; }
.bh-hero-list li:nth-child(4) { animation-delay: 0.59s; }
.bh-hero-list li:nth-child(5) { animation-delay: 0.66s; }
.bh-v2 .bh-hero-form { animation-delay: 0.7s; }

.bh-hero-heading .accent {
  display: inline-block;
  animation: bh-rise 0.8s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-cert {
  animation: bh-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.bh-cert:nth-child(1) { animation-delay: 0.78s; }
.bh-cert:nth-child(2) { animation-delay: 0.88s; }
.bh-cert:nth-child(3) { animation-delay: 0.98s; }

.bh-hero-brain img {
  animation:
    bh-brain-in 1.4s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards,
    bh-breathe 7s 1.5s ease-in-out infinite;
}

.bh-tcard {
  animation: bh-card-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-tcard.is-center { animation-delay: 0.35s; }
.bh-tcard.is-left   { animation-delay: 0.55s; }
.bh-tcard.is-right  { animation-delay: 0.65s; }

.bh-dots {
  animation: bh-pop 0.5s 1.1s ease-out backwards;
}

.bh-rate {
  animation:
    bh-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
    bh-float 5s ease-in-out infinite;
}

.bh-rate--serchen    { animation-delay: 0.9s, 1.5s; }
.bh-rate--trustpilot { animation-delay: 1s, 2.3s; }
.bh-rate--google     { animation-delay: 1.1s, 3.1s; }

.bh-line--left,
.bh-line--right {
  animation: bh-draw-up 0.7s 1.35s ease-out backwards;
}

.bh-line--right { animation-delay: 1.45s; }

.bh-line--top {
  animation: bh-draw-down 0.6s 1.25s ease-out backwards;
}

@media (prefers-reduced-motion: reduce) {
  .bh-hero *,
  .bh-hero *::before,
  .bh-hero *::after {
    animation: none !important;
  }

  .bh-tcard {
    transition: none;
  }
}

/* ============================================================= */
/* Responsive                                                     */
/* ============================================================= */
/* Below 1200px the visual no longer fits beside the copy: stack it. */
@media (max-width: 1199px) {
  .bh-hero {
    padding: 40px 0 48px;
  }

  .bh-hero-top {
    min-height: 0;
    margin-bottom: 56px;
  }

  .bh-hero-copy {
    width: 100%;
  }

  .bh-hero-visual-wrap {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-width: 760.83px;
    margin: 40px auto 0;
  }
}

@media (max-width: 1024px) {
  .bh-v2 .bh-hero-form {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 991px) {
  .bh-v2 .bh-hero-form .booking-fields {
    flex-wrap: wrap;
  }

  .bh-v2 .bh-hero-form .field {
    flex: 1 1 45%;
  }

  .bh-v2 .bh-hero-form .booking-submit {
    width: 100%;
    margin-top: 10px;
  }
}

@media (max-width: 767px) {
  .bh-hero-heading {
    font-size: 32px;
    line-height: 40px;
  }

  .bh-hero-lead,
  .bh-hero-list li {
    font-size: 15px;
    line-height: 26px;
  }

  .bh-hero-list li::before {
    top: 11px;
  }

  .bh-hero-certs {
    gap: 12px;
  }

  /* Phones: a single readable card that cross-fades, badges in a row below. */
  .bh-hero-visual {
    --u: 1px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    height: auto;
    padding: 16px 0 0;
  }

  .bh-hero-brain {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .bh-hero-brain img {
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    transform: translate(-50%, -50%);
  }

  .bh-line {
    display: none;
  }

  .bh-cards {
    position: relative;
    top: auto;
    left: auto;
    display: grid;
    width: 100%;
    height: auto;
    margin-bottom: 44px;
  }

  .bh-tcard,
  .bh-tcard.is-center,
  .bh-tcard.is-left,
  .bh-tcard.is-right {
    position: relative;
    grid-area: 1 / 1;
    width: 100%;
    padding: 30px 26px 26px;
    transform: none;
    transition: opacity 0.6s ease, visibility 0.6s;
  }

  .bh-tcard:not(.is-center) {
    visibility: hidden;
    opacity: 0;
  }

  .bh-tcard-quote {
    top: 18px;
    width: 26px;
    height: 26px;
  }

  .bh-tcard-quote--open  { left: 6px; }
  .bh-tcard-quote--close { right: 6px; left: auto; }

  .bh-tcard-who b {
    white-space: normal;
  }

  .bh-dots {
    bottom: -28px;
  }

  .bh-rate {
    position: relative;
    top: auto;
    left: auto;
  }
}

@media (max-width: 480px) {
  .bh-hero-certs {
    gap: 10px;
  }

  .bh-hero-certs {
    flex-wrap: nowrap;
    width: 100%;
  }

  .bh-cert {
    flex: 1 1 0;
    min-width: 0;
    max-width: 139.2px;
    padding: 6px;
  }

  .bh-cert-img {
    width: 100%;
    height: auto;
    aspect-ratio: 121.053 / 55.412;
  }
}

@media (max-width: 400px) {
  .bh-hero-heading {
    font-size: 28px;
    line-height: 36px;
  }

  .bh-v2 .bh-hero-form .field {
    flex-basis: 100%;
  }

  .bh-tcard-text {
    font-size: 13px;
    line-height: 21px;
  }
}

/* ============================================================= */
/* Why behavioral-health-specific billing — Figma 8777:68680      */
/* (1440 x 989). Cards/connectors are placed from the page centre */
/* (Figma x - 720px), as in the design.                            */
/* ============================================================= */
.bh-why {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  padding: 40px 16px;
  overflow: hidden;
  color: var(--c-white);
  background: radial-gradient(81.04% 138.91% at 70% 30%, #273775 0%, #142048 50%, #0b1431 75%, #01081a 100%);
}

.bh-why-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bh-why-bg img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0.1;
}

.bh-why-head,
.bh-why-stage,
.bh-why-banner {
  position: relative;
  z-index: 1;
}

/* Lead paragraph wraps at the heading's width (width: 0 + min-width: 100%). */
.bh-why-head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: max-content;
  max-width: 100%;
  text-align: center;
}

.bh-why-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 12px;
  line-height: 9.976px;
  color: var(--c-white);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 9.069px;
}

.bh-why-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 32px;
  line-height: 35px;
  color: var(--c-white);
  white-space: nowrap;
}

.bh-why-title .accent {
  color: var(--c-orange);
}

.bh-why-lead {
  width: 0;
  min-width: 100%;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  color: var(--c-white);
}

/* ---------- Stage: puzzle + connectors + feature cards ---------- */
.bh-why-stage {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 486px;
}

.bh-why-connector {
  position: absolute;
  top: 40px;
  display: block;
  height: 328.779px;
  max-width: none;
  pointer-events: none;
}

.bh-why-connector--left {
  left: calc(50% - 279.87px); /* Figma x 442.78, plus the SVG's -1.6% overhang */
  width: 168.298px;
}

.bh-why-connector--right {
  left: calc(50% + 99.63px);
  width: 190.464px;
  transform: scaleX(-1); /* Figma: flipY + rotate(180deg) */
}

.bh-why-cards {
  position: absolute;
  top: 25px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 355px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bh-why-cards--left  { right: calc(50% + 276px); }
.bh-why-cards--right { left: calc(50% + 285px); }

.bh-why-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16.8px 18.8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  border: 0.8px solid #00a3ff;
  border-radius: 16px;
  box-shadow: 0 10px 26px -14px rgba(39, 55, 117, 0.25);
  transition: translate 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
}

.bh-why-card:hover {
  translate: 0 -4px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 14px 30px -12px rgba(0, 163, 255, 0.45);
}

.bh-why-card-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--c-white);
  border-radius: 70px;
}

.bh-why-card-icon img {
  display: block;
  max-width: none;
  margin: 0.4px 0 0 0.4px; /* Figma's +0.2px centre offset */
  transition: scale 0.35s ease;
}

.bh-why-card:hover .bh-why-card-icon img {
  scale: 1.1;
}

.bh-why-card-body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.bh-why-card-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 14px;
  line-height: 18.2px;
  color: var(--c-white);
  text-transform: none;
}

.bh-why-card-text {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 11px;
  line-height: 17.05px;
  color: var(--c-white);
}

/* Puzzle artwork 436 x 486 (image cropped as in Figma: 111.47% wide at -5.73%). */
.bh-why-puzzle {
  position: relative;
  flex: none;
  width: 436px;
  height: 486px;
}

.bh-why-puzzle-art {
  position: absolute;
  top: 0;
  left: -5.73%;
  display: block;
  width: 111.47%;
  max-width: none;
  height: 100%;
}

/* Soft pulse behind the puzzle ring (ring centre is about 218, 170). */
.bh-why-glow {
  position: absolute;
  top: 20px;
  left: 68px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0, 163, 255, 0.45) 0%, rgba(0, 163, 255, 0) 70%);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.bh-why-icon {
  position: absolute;
  width: 30px;
  height: 30px;
}

.bh-why-icon img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  max-width: none;
}

.bh-why-logo {
  position: absolute;
  top: 137px;
  left: 196px;
  display: block;
  width: 43.942px;
  height: 30px;
  max-width: none;
}

.bh-why-puzzle-label {
  position: absolute;
  top: 180px;
  right: 36.93%;
  left: 36.93%;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 10px;
  line-height: 15px;
  color: var(--c-white);
  text-align: center;
}

.bh-why-puzzle-label .accent {
  color: var(--c-orange);
}

/* ---------- Bottom banner ---------- */
.bh-why-banner {
  display: flex;
  gap: 30px;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 1240px;
  padding: 33px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #00a3ff;
  border-radius: 16px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.bh-why-banner-head {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 4px;
  padding-left: 28px;
}

/* The 4px accent rule, drawn as a pseudo-element so it can grow in. */
.bh-why-banner-head::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: #00a3ff;
  transform-origin: top;
}

.bh-why-banner-title {
  width: 342px;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  color: var(--c-orange);
  text-transform: none;
}

.bh-why-banner-text {
  width: 342px;
  max-width: 100%;
  margin: 0;
  padding-top: 12px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  line-height: 19.5px;
  color: var(--c-white);
}

.bh-why-features {
  display: flex;
  flex: 1 1 0;
  gap: 16px;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bh-why-feature {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  min-width: 0;
  text-align: center;
}

.bh-why-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  padding: 1px;
  background: var(--c-white);
  border: 1px solid var(--c-blue);
  border-radius: 9999px;
  transition: scale 0.35s ease, box-shadow 0.35s ease;
}

.bh-why-feature:hover .bh-why-feature-icon {
  scale: 1.08;
  box-shadow: 0 0 0 6px rgba(0, 163, 255, 0.18);
}

.bh-why-feature-icon img {
  display: block;
  max-width: none;
}

.bh-why-feature-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: var(--c-orange);
  white-space: nowrap;
  text-transform: none;
}

.bh-why-feature-text {
  width: 100%;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--c-white);
}

/* ---------- Why section animation ---------- */
/* script-v2.js adds .is-armed (hides the pieces) and .is-in once the
   section scrolls into view, which plays: heading, puzzle + icons,
   connectors drawing out, cards sliding in, then the banner. Without JS
   (or with reduced motion) nothing is hidden. Entrances use `backwards`
   fill so hover translate/scale still work afterwards. */
@keyframes bh-why-rise {
  from { opacity: 0; translate: 0 28px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-why-from-left {
  from { opacity: 0; translate: -48px 0; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-why-from-right {
  from { opacity: 0; translate: 48px 0; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-why-zoom {
  from { opacity: 0; scale: 0.82; }
  to   { opacity: 1; scale: 1; }
}

@keyframes bh-why-pop {
  0%   { opacity: 0; scale: 0.3; }
  70%  { opacity: 1; scale: 1.15; }
  100% { opacity: 1; scale: 1; }
}

@keyframes bh-why-draw {
  from { clip-path: inset(0 0 0 100%); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes bh-why-grow {
  from { scale: 1 0; }
  to   { scale: 1 1; }
}

@keyframes bh-why-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }
}

@keyframes bh-why-pulse {
  0%, 100% { opacity: 0.45; scale: 0.92; }
  50%      { opacity: 0.9;  scale: 1.08; }
}

/* Each puzzle icon lights up in turn (6 icons x 1s = one lap). */
@keyframes bh-why-twinkle {
  0%, 18%, 100% { scale: 1; filter: none; }
  8%            { scale: 1.22; filter: drop-shadow(0 0 6px rgba(120, 200, 255, 0.9)); }
}

.bh-why.is-armed:not(.is-in) :is(
  .bh-why-head > *,
  .bh-why-puzzle-art,
  .bh-why-icon,
  .bh-why-logo,
  .bh-why-puzzle-label,
  .bh-why-connector,
  .bh-why-card,
  .bh-why-banner,
  .bh-why-feature
) {
  opacity: 0;
}

.bh-why.is-in .bh-why-head > * {
  animation: bh-why-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-why.is-in .bh-why-head > :nth-child(2) { animation-delay: 0.1s; }
.bh-why.is-in .bh-why-head > :nth-child(3) { animation-delay: 0.2s; }

.bh-why.is-in .bh-why-puzzle-art {
  animation: bh-why-zoom 0.9s 0.25s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-why.is-in .bh-why-logo,
.bh-why.is-in .bh-why-puzzle-label {
  animation: bh-why-zoom 0.6s 0.7s ease-out backwards;
}

.bh-why.is-in .bh-why-icon {
  animation: bh-why-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: calc(0.8s + var(--i, 0) * 0.1s);
}

.bh-why.is-in .bh-why-connector {
  animation: bh-why-draw 0.8s 1.2s ease-out backwards;
}

.bh-why.is-in .bh-why-cards--left .bh-why-card {
  animation: bh-why-from-left 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-why.is-in .bh-why-cards--right .bh-why-card {
  animation: bh-why-from-right 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-why.is-in .bh-why-card:nth-child(1) { animation-delay: 1.35s; }
.bh-why.is-in .bh-why-card:nth-child(2) { animation-delay: 1.5s; }
.bh-why.is-in .bh-why-card:nth-child(3) { animation-delay: 1.65s; }

.bh-why.is-in .bh-why-banner {
  animation: bh-why-rise 0.8s 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-why.is-in .bh-why-banner-head::before {
  animation: bh-why-grow 0.6s 1s ease-out backwards;
}

.bh-why.is-in .bh-why-feature {
  animation: bh-why-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-why.is-in .bh-why-feature:nth-child(1) { animation-delay: 1s; }
.bh-why.is-in .bh-why-feature:nth-child(2) { animation-delay: 1.1s; }
.bh-why.is-in .bh-why-feature:nth-child(3) { animation-delay: 1.2s; }
.bh-why.is-in .bh-why-feature:nth-child(4) { animation-delay: 1.3s; }

/* Ambient loops: run once revealed (or always when the script never armed it). */
.bh-why:not(.is-armed) .bh-why-puzzle,
.bh-why.is-in .bh-why-puzzle {
  animation: bh-why-float 6s 1.6s ease-in-out infinite;
}

.bh-why:not(.is-armed) .bh-why-glow,
.bh-why.is-in .bh-why-glow {
  animation: bh-why-pulse 4s 1s ease-in-out infinite backwards;
}

.bh-why:not(.is-armed) .bh-why-icon img,
.bh-why.is-in .bh-why-icon img {
  animation: bh-why-twinkle 6s ease-in-out infinite;
  animation-delay: calc(2s + var(--i, 0) * 1s);
}

@media (prefers-reduced-motion: reduce) {
  .bh-why *,
  .bh-why *::before {
    animation: none !important;
  }

  .bh-why-glow {
    opacity: 0.6;
  }
}

/* ---------- Why section responsive ---------- */
/* Below 1300px the 1271px card spread no longer fits: switch to a grid. */
@media (max-width: 1299px) {
  .bh-why-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 436px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    max-width: 1240px;
    height: auto;
  }

  .bh-why-connector {
    display: none;
  }

  .bh-why-cards {
    position: static;
    width: auto;
    margin-top: 25px;
  }

  .bh-why-cards--left  { grid-column: 1; grid-row: 1; }
  .bh-why-puzzle       { grid-column: 2; grid-row: 1; }
  .bh-why-cards--right { grid-column: 3; grid-row: 1; }
}

@media (max-width: 1199px) {
  .bh-why-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .bh-why-banner-title,
  .bh-why-banner-text {
    width: auto;
  }

  .bh-why-features {
    flex-wrap: wrap;
    row-gap: 24px;
  }

  .bh-why-feature {
    flex: 1 1 calc(50% - 8px);
  }

  .bh-why-feature-title {
    white-space: normal;
  }
}

@media (max-width: 991px) {
  .bh-why {
    padding: 40px 20px;
  }

  .bh-why-title {
    font-size: 28px;
    line-height: 34px;
    white-space: normal;
  }

  .bh-why-head {
    width: 100%;
    max-width: 760px;
  }

  .bh-why-lead {
    width: auto;
    min-width: 0;
  }

  .bh-why-stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 760px;
  }

  .bh-why-puzzle {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .bh-why-cards--left,
  .bh-why-cards--right {
    grid-row: 2;
    margin-top: 0;
  }

  .bh-why-cards--left  { grid-column: 1; }
  .bh-why-cards--right { grid-column: 2; }

  .bh-why-card-text {
    font-size: 13px;
    line-height: 19px;
  }
}

@media (max-width: 640px) {
  .bh-why-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .bh-why-cards--left,
  .bh-why-cards--right {
    grid-column: 1;
  }

  .bh-why-cards--right {
    grid-row: 3;
  }

  .bh-why-banner {
    padding: 24px 20px;
  }

  .bh-why-banner-title {
    font-size: 22px;
  }
}

/* The artwork is fixed-size (icons sit on exact px slots), so scale it down. */
@media (max-width: 480px) {
  .bh-why-title {
    font-size: 24px;
    line-height: 30px;
  }

  .bh-why-puzzle {
    zoom: 0.74;
  }

  .bh-why-feature {
    flex-basis: 100%;
  }
}

@media (max-width: 360px) {
  .bh-why-puzzle {
    zoom: 0.64;
  }
}

/* ============================================================= */
/* Our behavioral health billing services (tabs) — Figma 8777:68823 */
/* ============================================================= */
.bh-svc {
  position: relative;
  padding: 60px 0;
  background: var(--c-white);
}

.bh-svc .container-page {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

.bh-svc-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  max-width: 100%;
  text-align: center;
}

.bh-svc-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 12px;
  line-height: 9.976px;
  color: var(--c-blue);
  white-space: nowrap;
  background: rgba(39, 55, 117, 0.1);
  border-radius: 9.069px;
}

.bh-svc-title {
  width: 706px;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 32px;
  line-height: 45px;
  color: var(--c-blue);
}

.bh-svc-title .accent {
  color: var(--c-orange);
}

/* ---------- Tabs ---------- */
.bh-svc-tabs {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

.bh-svc-tab {
  position: relative;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 15px 25px;
  overflow: hidden;
  font-family: var(--font-primary) !important;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--c-text);
  white-space: nowrap;
  background: var(--c-white);
  border: 0;
  border-radius: 12px;
  filter: drop-shadow(0 0 2.5px rgba(0, 0, 0, 0.1));
  cursor: pointer;
  isolation: isolate;
  transition: color 0.3s ease, translate 0.3s ease, filter 0.3s ease;
}

/* "Coding & Charge Capture" hugs its label in Figma; the rest share the row. */
.bh-svc-tab--coding {
  flex: none;
}

/* Active fill: the brand gradient fades in behind the label. */
.bh-svc-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, #273775 29.808%, #fc5d61 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.bh-svc-tab:hover {
  color: var(--c-blue);
  translate: 0 -2px;
  filter: drop-shadow(0 6px 10px rgba(39, 55, 117, 0.14));
}

.bh-svc-tab.is-active {
  color: var(--c-white);
  translate: none;
}

.bh-svc-tab.is-active::before {
  opacity: 1;
}

.bh-svc-tab:focus-visible {
  outline: 2px solid var(--c-blue) !important;
  outline-offset: 3px;
}

/* ---------- Panel ---------- */
.bh-svc-panel {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  background: var(--c-white);
  outline: none;
}

.bh-svc-panel[hidden] {
  display: none;
}

.bh-svc-top {
  display: flex;
  gap: 22px;
  align-items: stretch;
  justify-content: center;
  width: 100%;
}

.bh-svc-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  min-width: 0;
  background: var(--c-white);
  border: 1px solid #edeef4;
  border-radius: 18px;
  filter: drop-shadow(0 3px 6.5px rgba(39, 55, 117, 0.07));
}

.bh-svc-card--main {
  flex: 1 1 0;
  gap: 16px;
  padding: 25px 27px;
}

.bh-svc-card--ai {
  flex: none;
  gap: 10px;
  width: 609px;
  padding: 20px;
}

.bh-svc-card-head {
  display: flex;
  gap: 14px;
  align-items: center;
  width: 100%;
  max-width: 555px;
}

.bh-svc-card-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: #eaf0fc;
  border-radius: 23px;
}

.bh-svc-card-icon--ai {
  background: #ffeae9;
}

.bh-svc-card-icon img {
  display: block;
  max-width: none;
}

.bh-svc-card-title {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  color: var(--c-blue);
  text-transform: none;
}

.bh-svc-bar {
  display: block;
  flex: none;
  width: 46px;
  height: 3px;
  background: var(--c-orange);
  border-radius: 2px;
  transform-origin: left;
}

.bh-svc-card-text {
  width: 100%;
  max-width: 555px;
  margin: 0;
  padding-bottom: 0.595px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  line-height: 20.8px;
  color: var(--c-text);
}

/* Process flow: five 82px steps with chevrons between, spread to 555px. */
.bh-svc-flow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  max-width: 555px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bh-svc-flow-step {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 7.42px;
  align-items: center;
  width: 82px;
}

.bh-svc-flow-step:first-child {
  gap: 8px;
}

.bh-svc-flow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: var(--c-bg-blue);
  border-radius: 12px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.bh-svc-flow-icon img {
  display: block;
  max-width: none;
}

.bh-svc-flow-label {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 12px;
  line-height: 14.85px;
  color: var(--c-text);
  text-align: center;
  white-space: nowrap;
}

.bh-svc-flow-arrow {
  flex: none;
  width: 14px;
  height: 30px;
  padding-top: 16px;
}

.bh-svc-flow-arrow img {
  display: block;
  width: 14px;
  height: 14px;
  max-width: none;
}

/* AI chip cluster: 555 x 154, traces centred on the chip. */
.bh-svc-cluster {
  position: relative;
  width: 555px;
  max-width: 100%;
  height: 154px;
  flex: none;
}

.bh-svc-circuit {
  position: absolute;
  inset: 0;
}

.bh-svc-circuit img {
  position: absolute;
  display: block;
  max-width: none;
}

.bh-svc-circuit-a { top: 33.92px; left: 172.84px; }
.bh-svc-circuit-b { top: 31.6px;  left: 170px; }
.bh-svc-circuit-c { top: 36.26px; left: 255.82px; }
.bh-svc-circuit-d { top: 36.26px; left: 230.4px; }

.bh-svc-chip {
  position: absolute;
  top: 39.19px;
  left: 245px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 60px;
  padding: 1px 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 24px;
  line-height: normal;
  letter-spacing: 0.5px;
  color: var(--c-white);
  background: var(--c-blue);
  border-radius: 13px;
  box-shadow: 0 2px 7px 0 rgba(39, 55, 117, 0.3);
}

.bh-svc-pills {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bh-svc-pill-item {
  position: absolute;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--pill-w, 140px); /* a tab can widen its pills (the view sets --pill-w) */
  padding: 8px 15px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 12px;
  line-height: 13.75px;
  color: var(--c-blue);
  white-space: nowrap;
  background: var(--c-white);
  border: 1px solid var(--c-bg-blue);
  border-radius: 22px;
  box-shadow: 0 6px 16px -10px rgba(39, 55, 117, 0.35);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.bh-svc-pill-item:hover {
  border-color: rgba(252, 93, 97, 0.35);
  box-shadow: 0 10px 20px -10px rgba(39, 55, 117, 0.45);
}

.bh-svc-pill-item img {
  display: block;
  flex: none;
  max-width: none;
}

/* A tab can move its pill rows (the view sets --pill-top / --pill-bottom). */
.bh-svc-pill-item--1 { top: var(--pill-top, 11.41px); left: 0; }
.bh-svc-pill-item--2 { top: var(--pill-top, 11.41px); right: 0; }
.bh-svc-pill-item--3 { bottom: var(--pill-bottom, 10.59px); left: 0; }
.bh-svc-pill-item--4 { bottom: var(--pill-bottom, 10.59px); right: 0; }

.bh-svc-tagline {
  width: 100%;
  max-width: 555px;
  margin: 0;
  padding: 1px 0;
  font-family: var(--font-primary);
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  line-height: normal;
  color: var(--c-blue);
  text-align: center;
}

/* ---------- "What We Verify" panel ---------- */
.bh-svc-verify {
  box-sizing: border-box;
  width: 100%;
  min-height: 205px;
  padding: 22px 28px 26px;
  background: var(--c-white);
  border: 1px solid #e8ebf5;
  border-radius: 18px;
  filter: drop-shadow(0 3px 6.5px rgba(39, 55, 117, 0.07));
}

.bh-svc-verify-head {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 29px;
}

.bh-svc-verify-head img {
  display: block;
  flex: none;
  max-width: none;
}

/* Orange rule centred under the title (title centre is +24px from the row centre). */
.bh-svc-verify-head::after {
  content: "";
  position: absolute;
  top: 37.41px;
  left: calc(50% + 24px);
  width: 46px;
  height: 3px;
  background: var(--c-orange);
  border-radius: 2px;
  translate: -50% 0;
}

.bh-svc-verify-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 24px;
  line-height: normal;
  color: var(--c-blue);
  white-space: nowrap;
  text-transform: none;
}

.bh-svc-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 36px;
  gap: 20px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bh-svc-list-item {
  position: relative;
  display: flex;
  gap: 11px;
  align-items: center;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--c-blue);
}

.bh-svc-list-item img {
  display: block;
  flex: none;
  max-width: none;
}

/* Dividers (Figma lines 98 / 101): a 91px rule after columns 1-3 and a
   181px rule between the rows under columns 1-3, drawn from row 1. */
.bh-svc-list-item:nth-child(-n + 3)::before,
.bh-svc-list-item:nth-child(-n + 3)::after {
  content: "";
  position: absolute;
  background: var(--c-light-grey);
  transform-origin: 0 0;
}

.bh-svc-list-item:nth-child(-n + 3)::before {
  top: 0.41px;
  left: calc(100% - 1.5px);
  width: 1px;
  height: 91px;
}

.bh-svc-list-item:nth-child(-n + 3)::after {
  top: 45.91px;
  left: 47.5px;
  width: 181px;
  height: 1px;
}

/* ---------- Services animation ---------- */
/* Section reveal (script-v2.js .is-armed/.is-in): heading, tabs, then the
   active panel. Switching tabs unhides a panel, which replays its entrance;
   the flow steps, AI chip and pills keep a gentle loop while visible. */
@keyframes bh-svc-rise {
  from { opacity: 0; translate: 0 26px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-svc-pop {
  0%   { opacity: 0; scale: 0.6; }
  70%  { opacity: 1; scale: 1.08; }
  100% { opacity: 1; scale: 1; }
}

@keyframes bh-svc-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes bh-svc-bar {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}

@keyframes bh-svc-rule-x {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}

@keyframes bh-svc-rule-y {
  from { scale: 1 0; }
  to   { scale: 1 1; }
}

/* A highlight walks along the five steps (1s each, 6s lap). */
@keyframes bh-svc-step {
  0%, 20%, 100% { background-color: var(--c-bg-blue); box-shadow: none; translate: 0 0; }
  8%            { background-color: #dfe6ff; box-shadow: 0 0 0 4px rgba(39, 55, 117, 0.1); translate: 0 -3px; }
}

@keyframes bh-svc-arrow {
  0%, 100% { opacity: 1; translate: 0 0; }
  50%      { opacity: 0.45; translate: 3px 0; }
}

@keyframes bh-svc-chip {
  0%, 100% { box-shadow: 0 2px 7px 0 rgba(39, 55, 117, 0.3), 0 0 0 0 rgba(39, 55, 117, 0.35); }
  50%      { box-shadow: 0 2px 7px 0 rgba(39, 55, 117, 0.3), 0 0 0 10px rgba(39, 55, 117, 0); }
}

/* Signal sweeping along the dotted traces. */
@keyframes bh-svc-trace {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0 0;    mask-position: 0 0; }
}

@keyframes bh-svc-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -4px; }
}

.bh-svc.is-armed:not(.is-in) :is(.bh-svc-head > *, .bh-svc-tab, .bh-svc-panel) {
  opacity: 0;
}

.bh-svc.is-in .bh-svc-head > * {
  animation: bh-svc-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-svc.is-in .bh-svc-head > :nth-child(2) { animation-delay: 0.1s; }

.bh-svc.is-in .bh-svc-tab {
  animation: bh-svc-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-svc.is-in .bh-svc-tab:nth-child(1) { animation-delay: 0.15s; }
.bh-svc.is-in .bh-svc-tab:nth-child(2) { animation-delay: 0.22s; }
.bh-svc.is-in .bh-svc-tab:nth-child(3) { animation-delay: 0.29s; }
.bh-svc.is-in .bh-svc-tab:nth-child(4) { animation-delay: 0.36s; }
.bh-svc.is-in .bh-svc-tab:nth-child(5) { animation-delay: 0.43s; }

/* Panel entrance: plays on reveal (.is-in) and whenever a tab is switched
   (script-v2.js reapplies .is-active); --d delays the first reveal until
   the tabs are in. Without the script, .bh-svc is never armed and the
   first panel simply shows. */
.bh-svc-panel { --d: 0s; }
.bh-svc.is-in .bh-svc-panel { --d: 0.35s; }
.bh-svc.is-in .bh-svc-panel.is-switched { --d: 0s; }

.bh-svc.is-in .bh-svc-panel.is-active .bh-svc-card,
.bh-svc.is-in .bh-svc-panel.is-active .bh-svc-verify {
  animation: bh-svc-rise 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-svc.is-in .bh-svc-panel.is-active .bh-svc-card--main { animation-delay: var(--d); }
.bh-svc.is-in .bh-svc-panel.is-active .bh-svc-card--ai   { animation-delay: calc(var(--d) + 0.1s); }
.bh-svc.is-in .bh-svc-panel.is-active .bh-svc-verify     { animation-delay: calc(var(--d) + 0.2s); }

.bh-svc.is-in .bh-svc-panel.is-active .bh-svc-bar {
  animation: bh-svc-bar 0.5s calc(var(--d) + 0.4s) ease-out backwards;
}

.bh-svc.is-in .bh-svc-panel.is-active .bh-svc-flow-step {
  animation: bh-svc-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: calc(var(--d) + 0.45s + var(--s, 0) * 0.1s);
}

.bh-svc.is-in .bh-svc-panel.is-active .bh-svc-flow-arrow {
  animation: bh-svc-fade 0.4s calc(var(--d) + 0.8s) ease-out backwards;
}

.bh-svc.is-in .bh-svc-panel.is-active .bh-svc-chip {
  animation:
    bh-svc-pop 0.55s calc(var(--d) + 0.45s) cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
    bh-svc-chip 2.4s calc(var(--d) + 1.2s) ease-out infinite;
}

.bh-svc.is-in .bh-svc-panel.is-active .bh-svc-circuit img {
  animation: bh-svc-fade 0.6s calc(var(--d) + 0.6s) ease-out backwards;
}

.bh-svc.is-in .bh-svc-panel.is-active .bh-svc-pill-item {
  animation:
    bh-svc-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
    bh-svc-bob 4s ease-in-out infinite;
}

.bh-svc.is-in .bh-svc-panel.is-active .bh-svc-pill-item--1 { animation-delay: calc(var(--d) + 0.7s), calc(var(--d) + 1.4s); }
.bh-svc.is-in .bh-svc-panel.is-active .bh-svc-pill-item--2 { animation-delay: calc(var(--d) + 0.8s), calc(var(--d) + 2.4s); }
.bh-svc.is-in .bh-svc-panel.is-active .bh-svc-pill-item--3 { animation-delay: calc(var(--d) + 0.9s), calc(var(--d) + 1.9s); }
.bh-svc.is-in .bh-svc-panel.is-active .bh-svc-pill-item--4 { animation-delay: calc(var(--d) + 1s), calc(var(--d) + 2.9s); }

.bh-svc.is-in .bh-svc-panel.is-active .bh-svc-tagline {
  animation: bh-svc-fade 0.6s calc(var(--d) + 1.05s) ease-out backwards;
}

.bh-svc.is-in .bh-svc-panel.is-active .bh-svc-list-item {
  animation: bh-svc-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  animation-delay: calc(var(--d) + 0.45s + var(--n, 0) * 0.06s);
}

.bh-svc.is-in .bh-svc-panel.is-active .bh-svc-list-item::after {
  animation: bh-svc-rule-x 0.6s calc(var(--d) + 0.9s) ease-out backwards;
}

.bh-svc.is-in .bh-svc-panel.is-active .bh-svc-list-item::before {
  animation: bh-svc-rule-y 0.6s calc(var(--d) + 0.9s) ease-out backwards;
}

/* Ambient loops on the visible panel (also run without the script). */
.bh-svc:not(.is-armed) .bh-svc-flow-icon,
.bh-svc.is-in .bh-svc-panel.is-active .bh-svc-flow-icon {
  animation: bh-svc-step 6s ease-in-out infinite;
  animation-delay: calc(1.6s + var(--s, 0) * 1s);
}

.bh-svc:not(.is-armed) .bh-svc-flow-arrow img,
.bh-svc.is-in .bh-svc-panel.is-active .bh-svc-flow-arrow img {
  animation: bh-svc-arrow 1.6s ease-in-out infinite;
}

.bh-svc-flow-arrow:nth-child(4) img { animation-delay: 0.2s; }
.bh-svc-flow-arrow:nth-child(6) img { animation-delay: 0.4s; }
.bh-svc-flow-arrow:nth-child(8) img { animation-delay: 0.6s; }

.bh-svc-circuit-a {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0 35%, #000 50%, rgba(0, 0, 0, 0.35) 65% 100%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0 35%, #000 50%, rgba(0, 0, 0, 0.35) 65% 100%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-position: 50% 0;
  mask-position: 50% 0;
}

.bh-svc:not(.is-armed) .bh-svc-circuit-a,
.bh-svc.is-in .bh-svc-panel.is-active .bh-svc-circuit-a {
  animation: bh-svc-trace 2.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bh-svc *,
  .bh-svc *::before,
  .bh-svc *::after {
    animation: none !important;
    transition: none !important;
  }

  .bh-svc-circuit-a {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---------- Services responsive ---------- */
@media (max-width: 1199px) {
  /* Tabs become a swipeable strip; the two top panels stack. */
  .bh-svc-tabs {
    justify-content: flex-start;
    margin: -6px -6px 0;
    padding: 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .bh-svc-tabs::-webkit-scrollbar {
    display: none;
  }

  .bh-svc-tab,
  .bh-svc-tab--coding {
    flex: none;
    scroll-snap-align: center;
  }

  .bh-svc-top {
    flex-direction: column;
  }

  .bh-svc-card--ai {
    width: auto;
    align-items: center;
  }

  .bh-svc-card--ai .bh-svc-card-head,
  .bh-svc-card--ai .bh-svc-bar,
  .bh-svc-card--ai .bh-svc-card-text {
    align-self: flex-start;
  }
}

@media (max-width: 991px) {
  .bh-svc {
    padding: 48px 0;
  }

  .bh-svc-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 16px 26px;
  }

  .bh-svc-list-item {
    min-height: 36px;
  }

  .bh-svc-list-item::before,
  .bh-svc-list-item::after {
    content: none !important;
  }
}

@media (max-width: 767px) {
  .bh-svc-title {
    font-size: 26px;
    line-height: 36px;
  }

  .bh-svc-tab {
    padding: 12px 20px;
    font-size: 16px;
  }

  .bh-svc-card--main,
  .bh-svc-card--ai {
    padding: 22px 20px;
  }

  .bh-svc-card-title,
  .bh-svc-verify-title {
    font-size: 20px;
    line-height: 26px;
  }

  /* Flow wraps into rows; the chevrons only make sense in a single line. */
  .bh-svc-flow {
    flex-wrap: wrap;
    gap: 16px 8px;
    justify-content: center;
  }

  .bh-svc-flow-arrow {
    display: none;
  }

  .bh-svc-verify {
    padding: 22px 20px;
  }

  .bh-svc-verify-head::after {
    top: 33px;
    left: calc(50% + 24px);
  }

  .bh-svc-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Phones: the chip + traces stay centred (clipped), pills drop into a grid. */
@media (max-width: 640px) {
  .bh-svc-cluster {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    height: auto;
    overflow: hidden;
  }

  .bh-svc-circuit {
    position: relative;
    inset: auto;
    left: 50%;
    width: 555px;
    height: 84px;
    translate: -50% 0;
    margin-top: -28px; /* traces start 31px down the 154px box */
  }

  .bh-svc-pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .bh-svc-pill-item {
    position: static;
    width: auto;
    padding: 8px 12px;
    white-space: normal;
  }
}

/* ============================================================= */
/* Subspecialty-focused billing — Figma 8777:69097                 */
/* 3 x 3 cards (400 x 316 at 1240px). The illustration and its     */
/* circle are placed from the card centre, as in Figma.            */
/* ============================================================= */
.bh-sub {
  position: relative;
  padding: 40px 0;
  overflow: hidden;
  background: var(--c-bg-blue);
}

.bh-sub .container-page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

/* Top-right decoration: soft radial glow + a thin tilted ring. */
.bh-sub-deco {
  position: absolute;
  top: -120px;
  right: -210.1px;
  width: 478.105px;
  height: 420px;
  pointer-events: none;
}

.bh-sub-deco-glow {
  position: absolute;
  top: -30px;
  right: -20px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle 415.78px at 126px 126px, rgba(146, 168, 231, 0.35) 0%, rgba(146, 168, 231, 0) 70%);
  border-radius: 210px;
  filter: blur(1px);
}

.bh-sub-deco-ring {
  position: absolute;
  top: 115.14px;
  right: 43.37%;
  left: 4.18%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 151.709px;
}

.bh-sub-deco-ring > span {
  flex: none;
  width: 234.8px;
  height: 122.1px;
  border: 1px solid rgba(39, 55, 117, 0.12);
  border-radius: 86px;
  transform: rotate(-7.56deg) skewX(0.9deg);
}

.bh-sub-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  max-width: 100%;
  text-align: center;
}

.bh-sub-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 12px;
  line-height: 9.976px;
  color: var(--c-blue);
  white-space: nowrap;
  background: rgba(39, 55, 117, 0.1);
  border-radius: 9.069px;
}

.bh-sub-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 32px;
  line-height: 45px;
  color: var(--c-blue);
  white-space: nowrap;
  text-transform: none;
}

.bh-sub-lead {
  width: 834px;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.2px;
  color: var(--c-text);
}

/* ---------- Cards ---------- */
.bh-sub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 20px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bh-sub-card {
  position: relative;
  box-sizing: border-box;
  height: 316px;
  padding: 26px 22px 24px 26px;
  background: var(--c-white);
  border-radius: 18px;
  filter: drop-shadow(0 12px 15px rgba(39, 55, 117, 0.07));
  transition: translate 0.35s ease, filter 0.35s ease;
}

.bh-sub-card:hover {
  translate: 0 -6px;
  filter: drop-shadow(0 18px 22px rgba(39, 55, 117, 0.14));
}

.bh-sub-ellipse {
  position: absolute;
  top: var(--ell-y, 72.41px);
  left: calc(50% + var(--ell-x, 36px));
  display: block;
  width: 143px;
  height: 143px;
  max-width: none;
}

.bh-sub-art {
  position: absolute;
  top: 89.41px;
  left: calc(50% + var(--img-x, 110.5px));
  display: block;
  width: var(--img-w, 149px);
  height: 126px;
  max-width: none;
  transform: translateX(-50%);
  transition: scale 0.4s ease;
}

.bh-sub-card:hover .bh-sub-art {
  scale: 1.07;
}

.bh-sub-card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 185px;
  padding-top: 2px;
}

.bh-sub-num,
.bh-sub-card-title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 18px;
  line-height: 25px;
}

.bh-sub-num {
  color: var(--c-orange);
}

.bh-sub-card-title {
  margin: 0;
  color: var(--c-blue);
  text-transform: none;
}

.bh-sub-card-text {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  line-height: 25px;
  color: var(--c-text);
}

/* ---------- Subspecialty animation ---------- */
/* script-v2.js .is-armed/.is-in: heading rises, cards cascade in row by
   row, then each circle and illustration pops in and keeps a slow bob. */
@keyframes bh-sub-rise {
  from { opacity: 0; translate: 0 32px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-sub-pop {
  0%   { opacity: 0; scale: 0.7; }
  70%  { opacity: 1; scale: 1.06; }
  100% { opacity: 1; scale: 1; }
}

@keyframes bh-sub-circle {
  from { opacity: 0; scale: 0.4; }
  to   { opacity: 1; scale: 1; }
}

@keyframes bh-sub-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

@keyframes bh-sub-breathe {
  0%, 100% { scale: 1; }
  50%      { scale: 1.05; }
}

@keyframes bh-sub-drift {
  0%, 100% { translate: 0 0; }
  50%      { translate: -18px 14px; }
}

@keyframes bh-sub-ring {
  0%, 100% { rotate: 0deg; translate: 0 0; }
  50%      { rotate: -6deg; translate: -10px 8px; }
}

.bh-sub.is-armed:not(.is-in) :is(.bh-sub-head > *, .bh-sub-card, .bh-sub-ellipse, .bh-sub-art) {
  opacity: 0;
}

.bh-sub.is-in .bh-sub-head > * {
  animation: bh-sub-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-sub.is-in .bh-sub-head > :nth-child(2) { animation-delay: 0.1s; }
.bh-sub.is-in .bh-sub-head > :nth-child(3) { animation-delay: 0.2s; }

/* --i is the card index: cards cascade 0.1s apart in reading order. */
.bh-sub.is-in .bh-sub-card {
  --t: calc(0.3s + var(--i, 0) * 0.1s);
  animation: bh-sub-rise 0.7s var(--t) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-sub.is-in .bh-sub-ellipse {
  animation:
    bh-sub-circle 0.6s calc(var(--t) + 0.25s) cubic-bezier(0.2, 0.7, 0.2, 1) backwards,
    bh-sub-breathe 5s calc(var(--t) + 1.2s) ease-in-out infinite;
}

.bh-sub.is-in .bh-sub-art {
  animation:
    bh-sub-pop 0.6s calc(var(--t) + 0.4s) cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
    bh-sub-bob 4.5s calc(var(--t) + 1.2s) ease-in-out infinite;
}

/* Without the script the loops still run. */
.bh-sub:not(.is-armed) .bh-sub-ellipse { animation: bh-sub-breathe 5s ease-in-out infinite; }
.bh-sub:not(.is-armed) .bh-sub-art     { animation: bh-sub-bob 4.5s ease-in-out infinite; }

.bh-sub-deco-glow {
  animation: bh-sub-drift 12s ease-in-out infinite;
}

.bh-sub-deco-ring {
  animation: bh-sub-ring 14s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bh-sub *,
  .bh-sub *::before {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Subspecialty responsive ---------- */
@media (max-width: 1199px) {
  .bh-sub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 20px;
  }
}

@media (max-width: 991px) {
  .bh-sub {
    padding: 48px 0;
  }

  .bh-sub-title {
    font-size: 28px;
    line-height: 38px;
    white-space: normal;
  }
}

@media (max-width: 767px) {
  .bh-sub-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 480px;
  }

  .bh-sub-card {
    height: auto;
    min-height: 316px;
  }
}

/* Phones: keep the text column clear by pinning a smaller illustration right. */
@media (max-width: 480px) {
  .bh-sub-title {
    font-size: 24px;
    line-height: 32px;
  }

  .bh-sub-lead {
    font-size: 15px;
    line-height: 24px;
  }

  .bh-sub-card {
    min-height: 0;
    padding: 24px 20px;
  }

  .bh-sub-card-body {
    width: calc(100% - 128px);
  }

  .bh-sub-ellipse {
    top: 64px;
    right: 6px;
    left: auto;
    width: 116px;
    height: 116px;
  }

  .bh-sub-art {
    top: 80px;
    right: 4px;
    left: auto;
    width: 120px;
    height: auto;
    transform: none;
  }
}

/* ============================================================= */
/* CTA banner — Figma 8777:69182 (1240px, gradient card)          */
/* ============================================================= */
.bh-cta {
  padding: 40px 0;
  background: var(--c-white);
}

.bh-cta-banner {
  position: relative;
  display: flex;
  gap: 40px;
  align-items: center;
  padding: 40px;
  overflow: hidden;
  background: linear-gradient(to right, #273775 29.808%, #fc5d61 100%);
  border: 2px solid var(--c-bg-blue);
  border-radius: 20px;
  box-shadow: 0 2.704px 11.561px 0 var(--c-bg-blue);
  isolation: isolate;
}

/* Light sheen that sweeps across the card now and then. */
.bh-cta-banner::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  translate: -120% 0;
  pointer-events: none;
}

/* Wave: Figma's 786 x 353.9 shape rotated -14.37deg in an 849 x 538 box at (570, -11). */
.bh-cta-wave {
  position: absolute;
  top: calc(-11px + (537.861px - 353.884px) / 2);
  right: calc(-183.23px + (849.232px - 786px) / 2);
  z-index: 0;
  display: block;
  width: 786px;
  height: 353.884px;
  max-width: none;
  rotate: -14.37deg;
  pointer-events: none;
}

.bh-cta-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 1 694px;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
  min-width: 0;
}

.bh-cta-title {
  width: 532px;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 36px;
  line-height: 45px;
  color: var(--c-white);
  text-transform: none;
}

.bh-cta-text {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 26px;
  line-height: 25.2px;
  color: var(--c-white);
}

.bh-cta-actions {
  display: flex;
  gap: 19px;
  align-items: center;
  width: 480px;
  max-width: 100%;
}

.bh-cta-btn {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
  height: 50px;
  padding: 12px 24px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  color: var(--c-white);
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 50px;
  transition: background-color 0.3s ease, color 0.3s ease, translate 0.3s ease, box-shadow 0.3s ease;
}

.bh-cta-btn:hover,
.bh-cta-btn:focus-visible {
  color: var(--c-white);
  text-decoration: none;
  translate: 0 -2px;
}

.bh-cta-btn:focus-visible {
  outline: 2px solid var(--c-white) !important;
  outline-offset: 3px;
}

.bh-cta-btn--primary {
  gap: 20px;
  background: var(--c-orange);
}

.bh-cta-btn--primary:hover {
  background: #f04a4f;
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.45);
}

.bh-cta-btn--ghost {
  gap: 15px;
  border: 1px solid var(--c-white);
}

.bh-cta-btn--ghost:hover,
.bh-cta-btn--ghost:focus-visible {
  color: var(--c-blue);
  background: var(--c-white);
}

.bh-cta-btn-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--c-white);
  border-radius: 9999px;
}

/* Arrow sits at inset 27.5% 22.5% 22.5% of the 20px circle. */
.bh-cta-btn-icon img {
  display: block;
  width: 11px;
  height: 10px;
  max-width: none;
  margin-top: 1px;
  transition: translate 0.3s ease;
}

.bh-cta-btn--primary:hover .bh-cta-btn-icon img {
  translate: 3px 0;
}

.bh-cta-art {
  position: relative;
  z-index: 1;
  display: block;
  flex: none;
  width: 341px;
  height: 272px;
  max-width: none;
  object-fit: cover;
}

/* ---------- CTA animation ---------- */
/* script-v2.js .is-armed/.is-in: the card rises, copy and buttons follow,
   the illustration slides in; then it floats, the wave drifts and a sheen
   crosses the card every few seconds. */
@keyframes bh-cta-card {
  from { opacity: 0; translate: 0 30px; scale: 0.98; }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes bh-cta-rise {
  from { opacity: 0; translate: 0 20px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-cta-art-in {
  from { opacity: 0; translate: 60px 0; rotate: 4deg; }
  to   { opacity: 1; translate: 0 0; rotate: 0deg; }
}

@keyframes bh-cta-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }
}

@keyframes bh-cta-wave {
  0%, 100% { translate: 0 0; rotate: -14.37deg; }
  50%      { translate: -24px 10px; rotate: -12deg; }
}

@keyframes bh-cta-sheen {
  0%, 75% { translate: -120% 0; }
  100%    { translate: 420% 0; }
}

@keyframes bh-cta-nudge {
  0%, 80%, 100% { translate: 0 0; }
  90%           { translate: 3px 0; }
}

.bh-cta.is-armed:not(.is-in) :is(.bh-cta-banner, .bh-cta-copy > *, .bh-cta-art) {
  opacity: 0;
}

.bh-cta.is-in .bh-cta-banner {
  animation: bh-cta-card 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-cta.is-in .bh-cta-copy > * {
  animation: bh-cta-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-cta.is-in .bh-cta-copy > :nth-child(1) { animation-delay: 0.3s; }
.bh-cta.is-in .bh-cta-copy > :nth-child(2) { animation-delay: 0.42s; }
.bh-cta.is-in .bh-cta-copy > :nth-child(3) { animation-delay: 0.54s; }

.bh-cta.is-in .bh-cta-art {
  animation:
    bh-cta-art-in 0.9s 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) backwards,
    bh-cta-float 5s 1.4s ease-in-out infinite;
}

.bh-cta:not(.is-armed) .bh-cta-art {
  animation: bh-cta-float 5s ease-in-out infinite;
}

.bh-cta-wave {
  animation: bh-cta-wave 14s ease-in-out infinite;
}

.bh-cta-banner::after {
  animation: bh-cta-sheen 7s 2s ease-in-out infinite;
}

.bh-cta-btn--primary .bh-cta-btn-icon {
  animation: bh-cta-nudge 3s 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bh-cta *,
  .bh-cta *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- CTA responsive ---------- */
@media (max-width: 991px) {
  .bh-cta-banner {
    gap: 24px;
    padding: 32px;
  }

  .bh-cta-title {
    font-size: 30px;
    line-height: 38px;
  }

  .bh-cta-text {
    font-size: 22px;
    line-height: 28px;
  }

  .bh-cta-art {
    width: 260px;
    height: auto;
  }
}

@media (max-width: 767px) {
  .bh-cta-banner {
    flex-direction: column-reverse;
    align-items: flex-start;
    padding: 28px 22px;
    background: linear-gradient(to bottom right, #273775 29.808%, #fc5d61 100%);
  }

  .bh-cta-copy {
    flex-basis: auto;
    gap: 20px;
    width: 100%;
  }

  .bh-cta-art {
    align-self: center;
    width: 240px;
  }

  .bh-cta-title {
    font-size: 26px;
    line-height: 34px;
  }

  .bh-cta-text {
    font-size: 18px;
    line-height: 26px;
  }
}

@media (max-width: 480px) {
  .bh-cta-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }

  .bh-cta-btn {
    flex: none;
  }
}

/* ============================================================= */
/* Coding services expertise — Figma 8777:69207                    */
/* ============================================================= */
.bh-code {
  padding: 40px 0;
  background: var(--c-white);
}

.bh-code .container-page {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.bh-code-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
}

.bh-code-title {
  max-width: 100%;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 32px;
  line-height: 38.4px;
  color: var(--c-blue);
  white-space: nowrap;
  text-transform: none;
}

.bh-code-title .accent {
  color: var(--c-orange);
}

.bh-code-lead {
  width: 726px;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  line-height: 27px;
  color: var(--c-text);
}

/* Two columns of 150px cards; reading order runs 1-2, 3-4 ... as in Figma. */
.bh-code-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bh-code-card {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  box-sizing: border-box;
  height: 150px;
  padding: 21px;
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid var(--c-light-grey);
  border-radius: 12px;
  isolation: isolate;
  transition: translate 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* The ninth card is centred under the grid at one column's width (610px). */
.bh-code-card--last {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 10px);
}

.bh-code-card:hover {
  translate: 0 -4px;
  border-color: transparent;
  box-shadow: 0 18px 32px -16px rgba(252, 93, 97, 0.45);
}

/* The brand gradient is a layer that fades in, so the background can
   animate. It sits on card 1 by default and follows the pointer: hovering
   another card lights that one and returns card 1 to white. */
.bh-code-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(to right, #273775 29.808%, #fc5d61 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.bh-code-card--featured::before,
.bh-code-card:hover::before {
  opacity: 1;
}

.bh-code-grid:has(.bh-code-card:not(.bh-code-card--featured):hover) .bh-code-card--featured::before {
  opacity: 0;
}

/* Sheen that sweeps across the lit card. */
.bh-code-card::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: 35%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  translate: -120% 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.bh-code-card--featured::after,
.bh-code-card:hover::after {
  opacity: 1;
}

.bh-code-grid:has(.bh-code-card:not(.bh-code-card--featured):hover) .bh-code-card--featured::after {
  opacity: 0;
}

.bh-code-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 80px;
  padding: 0 10px;
}

.bh-code-card--last .bh-code-icon {
  padding: 0;
}

.bh-code-icon img {
  display: block;
  max-width: none;
  transition: scale 0.35s ease, rotate 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
}

.bh-code-card:hover .bh-code-icon img {
  scale: 1.1;
  rotate: -4deg;
}

/* The line icons are drawn for white; give them a white tile on the gradient
   (card 1's icon already has its own dark tile). */
.bh-code-card:not(.bh-code-card--featured):hover .bh-code-icon img {
  border-radius: 10px;
  background-color: var(--c-white);
  box-shadow: 0 0 0 6px var(--c-white);
}

.bh-code-body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.bh-code-card-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;
  color: var(--c-blue);
  white-space: nowrap;
  text-transform: none;
  transition: color 0.35s ease;
}

.bh-code-card-text {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-text);
  opacity: 0.9;
  transition: color 0.35s ease, opacity 0.35s ease;
}

/* Figma's hard breaks in the copy only apply at the full 610px card width. */
@media (max-width: 1199px) {
  .bh-code-br {
    display: none;
  }
}

/* Card 2 is full opacity in Figma. */
.bh-code-card:nth-child(2) .bh-code-card-text {
  opacity: 1;
}

.bh-code-card--featured .bh-code-card-text {
  max-width: 448px;
}

/* White copy on whichever card is lit. */
.bh-code-card--featured :is(.bh-code-card-title, .bh-code-card-text),
.bh-code-card:hover :is(.bh-code-card-title, .bh-code-card-text) {
  color: var(--c-white);
  opacity: 1;
}

.bh-code-grid:has(.bh-code-card:not(.bh-code-card--featured):hover) .bh-code-card--featured .bh-code-card-title {
  color: var(--c-blue);
}

.bh-code-grid:has(.bh-code-card:not(.bh-code-card--featured):hover) .bh-code-card--featured .bh-code-card-text {
  color: var(--c-text);
  opacity: 0.9;
}

/* ---------- Coding animation ---------- */
/* script-v2.js .is-armed/.is-in: heading rises, left-column cards slide
   in from the left and right-column cards from the right (row by row),
   the last card rises; each icon pops once its card lands. */
@keyframes bh-code-rise {
  from { opacity: 0; translate: 0 26px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-code-from-left {
  from { opacity: 0; translate: -44px 0; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-code-from-right {
  from { opacity: 0; translate: 44px 0; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-code-pop {
  0%   { opacity: 0; scale: 0.5; }
  70%  { opacity: 1; scale: 1.12; }
  100% { opacity: 1; scale: 1; }
}

@keyframes bh-code-sheen {
  0%, 70% { translate: -120% 0; }
  100%    { translate: 360% 0; }
}

.bh-code.is-armed:not(.is-in) :is(.bh-code-head > *, .bh-code-card, .bh-code-icon img) {
  opacity: 0;
}

.bh-code.is-in .bh-code-head > * {
  animation: bh-code-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-code.is-in .bh-code-head > :nth-child(2) { animation-delay: 0.1s; }

/* Rows land 0.12s apart; --r is the row, --i the card index (both set in Blade). */
.bh-code.is-in .bh-code-card {
  --t: calc(0.25s + var(--r, 0) * 0.12s);
  animation: bh-code-from-left 0.7s var(--t) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-code.is-in .bh-code-card:nth-child(even) {
  animation-name: bh-code-from-right;
}

.bh-code.is-in .bh-code-card--last {
  animation-name: bh-code-rise;
}

.bh-code.is-in .bh-code-icon img {
  animation: bh-code-pop 0.55s calc(var(--t, 0.25s) + 0.35s) cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.bh-code-card::after {
  animation: bh-code-sheen 6s 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bh-code *,
  .bh-code *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Coding responsive ---------- */
@media (max-width: 1199px) {
  .bh-code-card {
    height: auto;
    min-height: 150px;
  }

  .bh-code-card-title {
    white-space: normal;
  }
}

@media (max-width: 991px) {
  .bh-code-title {
    font-size: 28px;
    line-height: 36px;
    white-space: normal;
  }

  .bh-code-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .bh-code-card--last {
    width: 100%;
  }

  /* One column: everything rises instead of sliding in from the sides. */
  .bh-code.is-in .bh-code-card,
  .bh-code.is-in .bh-code-card:nth-child(even) {
    --t: calc(0.25s + min(var(--i, 0), 6) * 0.08s);
    animation-name: bh-code-rise;
  }
}

@media (max-width: 575px) {
  .bh-code-title {
    font-size: 24px;
    line-height: 32px;
  }

  .bh-code-card {
    gap: 12px;
    padding: 18px 16px;
  }

  .bh-code-icon {
    min-width: 56px;
    padding: 0;
  }

  .bh-code-icon img {
    width: 48px;
    height: auto;
  }

  .bh-code-card--last .bh-code-icon img {
    width: 56px;
  }

  .bh-code-card-title {
    font-size: 18px;
    line-height: 24px;
  }

  .bh-code-card-text {
    font-size: 14px;
    line-height: 22px;
  }
}

/* ============================================================= */
/* Pharmacy billing — Figma 8777:69475 (435px blue panel + content) */
/* ============================================================= */
.bh-pharm {
  padding: 40px 0;
  background: var(--c-white);
}

.bh-pharm-card {
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--c-white);
  border-radius: 20px;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.15);
  isolation: isolate;
}

/* ---------- Left panel ---------- */
.bh-pharm-side {
  position: relative;
  z-index: 2;
  flex: none;
  width: 435px;
  min-height: 590px;
  overflow: hidden;
  background: var(--c-blue);
}

/* Blurred #00A3FF glow: a 243px circle at (280, 58) with a 246px blur margin. */
.bh-pharm-glow {
  position: absolute;
  top: calc(58.41px - 246.4px);
  left: calc(280px - 246.4px);
  display: block;
  width: 735.8px;
  height: 735.8px;
  max-width: none;
  pointer-events: none;
}

.bh-pharm-pills {
  position: absolute;
  top: 26.41px;
  left: 107px;
  display: block;
  width: 222px;
  height: 222px;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

.bh-pharm-side-copy {
  position: absolute;
  top: 294px;
  right: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.bh-pharm-bar {
  display: block;
  width: 48px;
  height: 4px;
  background: var(--c-orange);
  transform-origin: left;
}

.bh-pharm-side-title {
  margin: 0;
  padding-top: 8px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 30px;
  line-height: 37.5px;
  color: var(--c-white);
  text-transform: none;
}

.bh-pharm-side-text {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  line-height: 22.75px;
  color: var(--c-white);
  opacity: 0.9;
}

/* ---------- Right content ---------- */
.bh-pharm-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
  min-width: 0;
  padding: 40px;
}

.bh-pharm-head {
  display: flex;
  flex-direction: column;
  gap: 15.2px;
  align-items: flex-start;
  width: 100%;
}

.bh-pharm-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 12px;
  line-height: 9.976px;
  color: var(--c-blue);
  white-space: nowrap;
  background: rgba(39, 55, 117, 0.1);
  border-radius: 9.069px;
}

.bh-pharm-title {
  margin: 0;
  padding-bottom: 0.585px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 32px;
  line-height: 38.4px;
  color: var(--c-blue);
  text-transform: none;
}

.bh-pharm-lead {
  max-width: 672px;
  margin: 0;
  padding-top: 8.19px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  line-height: 22.4px;
  color: #4b5563;
}

/* Four features split by 1px #E5E7EB rules. */
.bh-pharm-features {
  display: flex;
  gap: 10px;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bh-pharm-feature {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  min-width: 0;
  text-align: center;
}

.bh-pharm-feature + .bh-pharm-feature {
  padding-left: 10px;
}

.bh-pharm-feature + .bh-pharm-feature::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--c-light-grey);
  transform-origin: top;
}

.bh-pharm-feature-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--c-white);
  border-radius: 9999px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.13));
  transition: translate 0.35s ease, filter 0.35s ease;
}

.bh-pharm-feature-icon img {
  display: block;
  max-width: none;
  transition: scale 0.35s ease;
}

.bh-pharm-feature:hover .bh-pharm-feature-icon {
  translate: 0 -4px;
  filter: drop-shadow(0 8px 10px rgba(39, 55, 117, 0.2));
}

.bh-pharm-feature:hover .bh-pharm-feature-icon img {
  scale: 1.12;
}

.bh-pharm-feature-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 16px;
  line-height: 20.8px;
  color: var(--c-blue);
  text-transform: none;
}

.bh-pharm-feature-text {
  width: 100%;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  line-height: 22.4px;
  color: var(--c-text);
}

.bh-pharm-feature:last-child .bh-pharm-feature-text {
  max-width: 138px;
}

/* 250 x 50 pill button (Figma wraps a 3px-radius button in a 60px-radius clip). */
.bh-pharm-btn {
  position: relative;
  display: inline-flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 250px;
  height: 50px;
  padding: 15px 21px;
  overflow: hidden;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  line-height: 12px;
  color: var(--c-white);
  white-space: nowrap;
  text-decoration: none;
  background: var(--c-orange);
  border: 1px solid var(--c-white);
  border-radius: 60px;
  transition: background-color 0.3s ease, translate 0.3s ease, box-shadow 0.3s ease;
}

.bh-pharm-btn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  translate: -120% 0;
  pointer-events: none;
}

.bh-pharm-btn:hover,
.bh-pharm-btn:focus-visible {
  color: var(--c-white);
  text-decoration: none;
  background: #f04a4f;
  translate: 0 -2px;
  box-shadow: 0 12px 22px -12px rgba(252, 93, 97, 0.7);
}

.bh-pharm-btn:focus-visible {
  outline: 2px solid var(--c-blue) !important;
  outline-offset: 3px;
}

.bh-pharm-btn-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--c-white);
  border-radius: 9999px;
}

.bh-pharm-btn-icon img {
  display: block;
  width: 11px;
  height: 10px;
  max-width: none;
  transition: translate 0.3s ease;
}

.bh-pharm-btn:hover .bh-pharm-btn-icon img {
  translate: 3px 0;
}

/* ---------- Pharmacy animation ---------- */
/* script-v2.js .is-armed/.is-in: card rises, the pills drop in over a
   pulsing glow, the panel copy and right-hand heading follow, features
   pop in with their dividers drawing down, then the button. */
@keyframes bh-pharm-rise {
  from { opacity: 0; translate: 0 26px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-pharm-pills-in {
  from { opacity: 0; translate: 0 -30px; scale: 0.85; rotate: -8deg; }
  to   { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; }
}

@keyframes bh-pharm-pop {
  0%   { opacity: 0; scale: 0.5; }
  70%  { opacity: 1; scale: 1.1; }
  100% { opacity: 1; scale: 1; }
}

@keyframes bh-pharm-grow-x {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}

@keyframes bh-pharm-grow-y {
  from { scale: 1 0; }
  to   { scale: 1 1; }
}

@keyframes bh-pharm-float {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50%      { translate: 0 -10px; rotate: 3deg; }
}

@keyframes bh-pharm-glow {
  0%, 100% { opacity: 0.85; scale: 1; }
  50%      { opacity: 1; scale: 1.12; }
}

@keyframes bh-pharm-shine {
  0%, 72% { translate: -120% 0; }
  100%    { translate: 320% 0; }
}

.bh-pharm.is-armed:not(.is-in) :is(
  .bh-pharm-card,
  .bh-pharm-pills,
  .bh-pharm-side-copy > *,
  .bh-pharm-head > *,
  .bh-pharm-feature,
  .bh-pharm-btn
) {
  opacity: 0;
}

.bh-pharm.is-in .bh-pharm-card {
  animation: bh-pharm-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-pharm.is-in .bh-pharm-pills {
  animation:
    bh-pharm-pills-in 1s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) backwards,
    bh-pharm-float 6s 1.3s ease-in-out infinite;
}

.bh-pharm.is-in .bh-pharm-side-copy > * {
  animation: bh-pharm-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-pharm.is-in .bh-pharm-side-copy > :nth-child(1) { animation: bh-pharm-grow-x 0.6s 0.45s ease-out backwards; }
.bh-pharm.is-in .bh-pharm-side-copy > :nth-child(2) { animation-delay: 0.5s; }
.bh-pharm.is-in .bh-pharm-side-copy > :nth-child(3) { animation-delay: 0.6s; }

.bh-pharm.is-in .bh-pharm-head > * {
  animation: bh-pharm-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-pharm.is-in .bh-pharm-head > :nth-child(1) { animation-delay: 0.35s; }
.bh-pharm.is-in .bh-pharm-head > :nth-child(2) { animation-delay: 0.45s; }
.bh-pharm.is-in .bh-pharm-head > :nth-child(3) { animation-delay: 0.55s; }

.bh-pharm.is-in .bh-pharm-feature {
  animation: bh-pharm-rise 0.6s calc(0.7s + var(--i, 0) * 0.12s) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-pharm.is-in .bh-pharm-feature-icon {
  animation: bh-pharm-pop 0.55s calc(0.85s + var(--i, 0) * 0.12s) cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.bh-pharm.is-in .bh-pharm-feature + .bh-pharm-feature::before {
  animation: bh-pharm-grow-y 0.6s calc(0.9s + var(--i, 0) * 0.12s) ease-out backwards;
}

.bh-pharm.is-in .bh-pharm-btn {
  animation: bh-pharm-rise 0.6s 1.25s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

/* Ambient loops (also run when the script never armed the section). */
.bh-pharm:not(.is-armed) .bh-pharm-pills {
  animation: bh-pharm-float 6s ease-in-out infinite;
}

.bh-pharm-glow {
  animation: bh-pharm-glow 6s ease-in-out infinite;
}

.bh-pharm-btn::after {
  animation: bh-pharm-shine 5s 2.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bh-pharm *,
  .bh-pharm *::before,
  .bh-pharm *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Pharmacy responsive ---------- */
@media (max-width: 1199px) {
  .bh-pharm-side {
    width: 360px;
  }

  .bh-pharm-pills {
    left: 69px;
  }

  .bh-pharm-side-title {
    font-size: 26px;
    line-height: 33px;
  }

  .bh-pharm-title {
    font-size: 28px;
    line-height: 34px;
  }

  /* Features go 2 x 2; the vertical rules only make sense in one row. */
  .bh-pharm-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
  }

  .bh-pharm-feature + .bh-pharm-feature {
    padding-left: 0;
  }

  .bh-pharm-feature + .bh-pharm-feature::before {
    content: none;
  }

  .bh-pharm-feature:last-child .bh-pharm-feature-text {
    max-width: none;
  }
}

/* Stack: the blue panel becomes a banner on top. */
@media (max-width: 991px) {
  .bh-pharm-card {
    flex-direction: column;
  }

  .bh-pharm-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    min-height: 0;
    padding: 24px 30px 30px;
  }

  .bh-pharm-glow {
    top: calc(24px - 246.4px);
    left: 50%;
    translate: -50% 0;
  }

  .bh-pharm-pills {
    position: relative;
    top: auto;
    left: auto;
    width: 200px;
    height: 200px;
  }

  .bh-pharm-side-copy {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    margin-top: 16px;
  }
}

@media (max-width: 575px) {
  .bh-pharm-side {
    padding: 20px 20px 26px;
  }

  .bh-pharm-pills {
    width: 170px;
    height: 170px;
  }

  .bh-pharm-side-title {
    font-size: 24px;
    line-height: 31px;
  }

  .bh-pharm-main {
    padding: 28px 20px;
  }

  .bh-pharm-pill {
    white-space: normal;
    line-height: 16px;
  }

  .bh-pharm-title {
    font-size: 24px;
    line-height: 31px;
  }

  .bh-pharm-features {
    grid-template-columns: minmax(0, 1fr);
  }

  .bh-pharm-btn {
    width: 100%;
  }
}

/* ============================================================= */
/* Who we serve — Figma 8777:69540                                  */
/* 430px intro + 2 x 3 care-setting cards, then a pill CTA bar.     */
/* ============================================================= */
.bh-serve {
  position: relative;
  padding: 40px 0;
  overflow: hidden;
  background: var(--c-white);
}

/* Faint orbit rings with dots, bottom-left (Figma x -283.7 from the 1440 frame). */
.bh-serve-orbit {
  position: absolute;
  top: 570.41px;
  left: calc(50% - 720px - 283.7px);
  display: block;
  width: 651.508px;
  height: 654.545px;
  max-width: none;
  pointer-events: none;
}

.bh-serve .container-page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.bh-serve-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* ---------- Intro column ---------- */
.bh-serve-intro {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  width: 430px;
}

.bh-serve-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 12px;
  line-height: 9.976px;
  color: var(--c-blue);
  white-space: nowrap;
  background: rgba(39, 55, 117, 0.1);
  border-radius: 9.069px;
}

.bh-serve-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 32px;
  line-height: 35px;
  color: var(--c-text);
  text-transform: none;
}

.bh-serve-title .accent {
  color: var(--c-orange);
}

.bh-serve-bar {
  display: block;
  width: 48px;
  height: 4px;
  background: var(--c-orange);
  border-radius: 9999px;
  transform-origin: left;
}

.bh-serve-lead {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.2px;
  color: var(--c-text);
}

.bh-serve-keys {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  margin: 0;
  padding: 17.1px 0 0;
  list-style: none;
}

.bh-serve-key {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

/* Circle is as tall as the text beside it (24 + 10 + 20 = 54px), as in Figma. */
.bh-serve-key-icon {
  display: flex;
  flex: none;
  align-items: center;
  align-self: flex-start;
  justify-content: center;
  width: 54px;
  height: 54px;
  background: var(--c-white);
  border-radius: 9999px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.15));
}

.bh-serve-key-icon img {
  display: block;
  max-width: none;
}

.bh-serve-key-body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.bh-serve-key-body strong {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-blue);
}

.bh-serve-key-body span {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--c-text);
}

/* ---------- Care-setting cards ---------- */
.bh-serve-grid {
  display: grid;
  flex: 1 1 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 20px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bh-serve-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  box-sizing: border-box;
  height: 320px;
  padding: 20px;
  overflow: hidden;
  background: rgba(239, 242, 255, 0.28);
  border: 2px solid var(--c-bg-blue);
  border-radius: 10px;
  box-shadow: 0 2.704px 11.561px 0 var(--c-bg-blue);
  transition: translate 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* Figma's inner #EFF2FF glow. */
.bh-serve-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 64px 0 var(--c-bg-blue);
  pointer-events: none;
}

.bh-serve-card:hover {
  translate: 0 -6px;
  border-color: rgba(39, 55, 117, 0.18);
  box-shadow: 0 18px 30px -16px rgba(39, 55, 117, 0.3);
}

.bh-serve-card-art {
  position: relative;
  z-index: 1;
  display: block;
  flex: none;
  width: 152px;
  height: 135px;
  max-width: none;
  transform-origin: 30% 80%;
  transition: scale 0.4s ease;
}

.bh-serve-card:hover .bh-serve-card-art {
  scale: 1.06;
}

.bh-serve-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
}

.bh-serve-card-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: var(--c-text);
  text-transform: none;
}

.bh-serve-card-text {
  margin: 0 0 10px; /* + the 10px gap = Figma's 20px before the link */
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  line-height: 19.2px;
  color: var(--c-text);
}

.bh-serve-card-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-blue);
  text-decoration: none;
}

.bh-serve-card-link:hover,
.bh-serve-card-link:focus-visible {
  color: var(--c-orange);
  text-decoration: none;
}

.bh-serve-card-link img {
  display: block;
  width: 16px;
  height: 16px;
  max-width: none;
  transition: translate 0.3s ease;
}

.bh-serve-card:hover .bh-serve-card-link img {
  translate: 4px 0;
}

/* Whole card is clickable through its link. */
.bh-serve-card-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* ---------- Pill CTA bar ---------- */
.bh-serve-bar-cta {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  overflow: hidden;
  background: var(--c-bg-blue);
  border-radius: 60px;
  box-shadow: 0 2px 15.1px 0 rgba(0, 0, 0, 0.15);
}

.bh-serve-bar-cta-info {
  display: flex;
  flex: 0 1 855px;
  gap: 20px;
  align-items: center;
  min-width: 0;
}

.bh-serve-bar-cta-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 66px;
  height: 66px;
  padding: 15px;
  background: var(--c-white);
  border-radius: 180px;
  box-shadow: 0 0 10.9px 0 rgba(0, 0, 0, 0.11);
}

.bh-serve-bar-cta-icon img {
  display: block;
  width: 42px;
  height: 43px;
  max-width: none;
}

.bh-serve-bar-cta-title {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  color: var(--c-blue);
  white-space: nowrap;
}

.bh-serve-bar-cta-rule {
  flex: none;
  width: 1px;
  height: 40px;
  background: var(--c-placeholder);
}

.bh-serve-bar-cta-text {
  flex: none;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  color: var(--c-text);
  white-space: nowrap;
}

.bh-serve-bar-cta-btn {
  position: relative;
  display: inline-flex;
  flex: none;
  gap: 10px;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 8px 14px;
  overflow: hidden;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 13px;
  line-height: 20.8px;
  color: var(--c-white);
  white-space: nowrap;
  text-decoration: none;
  background: var(--c-orange);
  border-radius: 75px;
  transition: background-color 0.3s ease, translate 0.3s ease, box-shadow 0.3s ease;
}

.bh-serve-bar-cta-btn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 35%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  translate: -120% 0;
  pointer-events: none;
}

.bh-serve-bar-cta-btn:hover,
.bh-serve-bar-cta-btn:focus-visible {
  color: var(--c-white);
  text-decoration: none;
  background: #f04a4f;
  translate: 0 -2px;
  box-shadow: 0 12px 22px -12px rgba(252, 93, 97, 0.7);
}

.bh-serve-bar-cta-btn-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--c-white);
  border-radius: 9999px;
}

.bh-serve-bar-cta-btn-icon img {
  display: block;
  width: 11px;
  height: 10px;
  max-width: none;
  transition: translate 0.3s ease;
}

.bh-serve-bar-cta-btn:hover .bh-serve-bar-cta-btn-icon img {
  translate: 3px 0;
}

/* ---------- Who-we-serve animation ---------- */
/* script-v2.js .is-armed/.is-in: intro copy rises, the two key points
   slide in, cards cascade in reading order with their art popping, then
   the CTA bar rises. The orbit turns slowly and the shield pulses. */
@keyframes bh-serve-rise {
  from { opacity: 0; translate: 0 28px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-serve-left {
  from { opacity: 0; translate: -36px 0; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-serve-pop {
  0%   { opacity: 0; scale: 0.7; }
  70%  { opacity: 1; scale: 1.06; }
  100% { opacity: 1; scale: 1; }
}

@keyframes bh-serve-grow {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}

@keyframes bh-serve-spin {
  to { rotate: 360deg; }
}

@keyframes bh-serve-ring {
  0%, 100% { box-shadow: 0 0 10.9px 0 rgba(0, 0, 0, 0.11), 0 0 0 0 rgba(39, 55, 117, 0.25); }
  50%      { box-shadow: 0 0 10.9px 0 rgba(0, 0, 0, 0.11), 0 0 0 10px rgba(39, 55, 117, 0); }
}

@keyframes bh-serve-shine {
  0%, 72% { translate: -120% 0; }
  100%    { translate: 380% 0; }
}

.bh-serve.is-armed:not(.is-in) :is(
  .bh-serve-intro > :not(.bh-serve-keys),
  .bh-serve-key,
  .bh-serve-card,
  .bh-serve-card-art,
  .bh-serve-bar-cta
) {
  opacity: 0;
}

.bh-serve.is-in .bh-serve-intro > :not(.bh-serve-keys) {
  animation: bh-serve-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-serve.is-in .bh-serve-intro > :nth-child(2) { animation-delay: 0.1s; }
.bh-serve.is-in .bh-serve-intro > .bh-serve-bar { animation: bh-serve-grow 0.6s 0.25s ease-out backwards; }
.bh-serve.is-in .bh-serve-intro > :nth-child(4) { animation-delay: 0.3s; }

.bh-serve.is-in .bh-serve-key {
  animation: bh-serve-left 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-serve.is-in .bh-serve-key:nth-child(1) { animation-delay: 0.45s; }
.bh-serve.is-in .bh-serve-key:nth-child(2) { animation-delay: 0.58s; }

.bh-serve.is-in .bh-serve-card {
  --t: calc(0.25s + var(--i, 0) * 0.1s);
  animation: bh-serve-rise 0.7s var(--t) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-serve.is-in .bh-serve-card-art {
  animation: bh-serve-pop 0.6s calc(var(--t) + 0.3s) cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.bh-serve.is-in .bh-serve-bar-cta {
  animation: bh-serve-rise 0.7s 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-serve-orbit {
  animation: bh-serve-spin 90s linear infinite;
}

.bh-serve-bar-cta-icon {
  animation: bh-serve-ring 2.8s 1.5s ease-out infinite;
}

.bh-serve-bar-cta-btn::after {
  animation: bh-serve-shine 5s 2.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bh-serve *,
  .bh-serve *::before,
  .bh-serve *::after,
  .bh-serve-orbit {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Who-we-serve responsive ---------- */
@media (max-width: 1199px) {
  .bh-serve-layout {
    flex-direction: column;
    gap: 32px;
  }

  .bh-serve-intro {
    width: 100%;
    max-width: 720px;
  }

  .bh-serve-grid {
    width: 100%;
  }

  .bh-serve-card {
    height: auto;
    min-height: 320px;
  }

  /* The bar wraps: info on top, button below. */
  .bh-serve-bar-cta {
    flex-wrap: wrap;
    border-radius: 30px;
  }

  .bh-serve-bar-cta-info {
    flex-basis: 100%;
  }

  .bh-serve-bar-cta-title,
  .bh-serve-bar-cta-text {
    white-space: normal;
  }
}

@media (max-width: 767px) {
  .bh-serve-title {
    font-size: 28px;
    line-height: 34px;
  }

  .bh-serve-bar-cta-info {
    flex-wrap: wrap;
    gap: 14px;
  }

  .bh-serve-bar-cta-title {
    flex: 1 1 calc(100% - 86px);
    font-size: 20px;
    line-height: 26px;
  }

  .bh-serve-bar-cta-rule {
    display: none;
  }

  .bh-serve-bar-cta-text {
    flex: 1 1 100%;
  }

  .bh-serve-bar-cta-text br {
    display: none;
  }

  .bh-serve-bar-cta-btn {
    width: 100%;
  }
}

@media (max-width: 575px) {
  .bh-serve-title {
    font-size: 24px;
    line-height: 30px;
  }

  .bh-serve-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .bh-serve-card {
    min-height: 0;
  }

  .bh-serve-bar-cta {
    padding: 20px;
    border-radius: 24px;
  }

  .bh-serve-bar-cta-btn {
    height: auto;
    min-height: 50px;
    white-space: normal;
    text-align: center;
  }
}

/* ============================================================= */
/* Credentialing — Figma 8777:69669                                */
/* 430px intro + a 790px dashboard panel (status, steps, metrics).  */
/* ============================================================= */
.bh-cred {
  padding: 40px 0;
  background: var(--c-white);
}

.bh-cred-layout {
  display: flex;
  gap: 20px;
  align-items: stretch;
}

/* ---------- Intro ---------- */
.bh-cred-intro {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  width: 430px;
}

.bh-cred-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 12px;
  line-height: 9.976px;
  color: var(--c-blue);
  white-space: nowrap;
  background: rgba(39, 55, 117, 0.1);
  border-radius: 9.069px;
}

.bh-cred-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 32px;
  line-height: 35px;
  color: var(--c-blue);
  text-transform: none;
}

.bh-cred-title .accent {
  color: var(--c-orange);
}

.bh-cred-bar {
  display: block;
  width: 48px;
  height: 4px;
  background: var(--c-orange);
  border-radius: 9999px;
  transform-origin: left;
}

.bh-cred-lead {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.2px;
  color: var(--c-text);
}

.bh-cred-keys {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bh-cred-key {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.bh-cred-key-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  background: var(--c-white);
  border-radius: 9999px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
}

.bh-cred-key-icon img {
  display: block;
  max-width: none;
}

.bh-cred-key:hover .bh-cred-key-icon img {
  rotate: 90deg;
  transition: rotate 0.6s ease;
}

/* Title over a rule that ends in a dot (Figma line 129, 315px + 1.69% overhang). */
.bh-cred-key-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  justify-content: center;
  align-self: stretch;
  width: 315px;
  max-width: calc(100% - 70px);
}

.bh-cred-key-body strong {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 16px;
  line-height: 16px;
  color: var(--c-blue);
}

.bh-cred-key:last-child .bh-cred-key-body strong {
  line-height: 20px;
}

.bh-cred-key-line {
  display: block;
  width: calc(100% + 1.69%);
  height: 10.667px;
  max-width: none;
  margin: -5.333px 0;
}

.bh-cred-btn {
  position: relative;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 250px;
  height: 50px;
  padding: 8px 14px;
  overflow: hidden;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  line-height: 20.8px;
  color: var(--c-white);
  white-space: nowrap;
  text-decoration: none;
  background: var(--c-orange);
  border-radius: 75px;
  transition: background-color 0.3s ease, translate 0.3s ease, box-shadow 0.3s ease;
}

.bh-cred-btn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  translate: -120% 0;
  pointer-events: none;
}

.bh-cred-btn:hover,
.bh-cred-btn:focus-visible {
  color: var(--c-white);
  text-decoration: none;
  background: #f04a4f;
  translate: 0 -2px;
  box-shadow: 0 12px 22px -12px rgba(252, 93, 97, 0.7);
}

.bh-cred-btn-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--c-white);
  border-radius: 9999px;
}

.bh-cred-btn-icon img {
  display: block;
  width: 11px;
  height: 10px;
  max-width: none;
  transition: translate 0.3s ease;
}

.bh-cred-btn:hover .bh-cred-btn-icon img {
  translate: 3px 0;
}

/* ---------- Dashboard panel ---------- */
.bh-cred-panel {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 50px;
  align-items: flex-start;
  min-width: 0;
  padding: 20px;
  overflow: hidden;
  background: rgba(239, 242, 255, 0.28);
  border: 2px solid var(--c-bg-blue);
  border-radius: 10px;
  box-shadow: 0 2.704px 11.561px 0 var(--c-bg-blue);
}

.bh-cred-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 64px 0 var(--c-bg-blue);
  pointer-events: none;
}

/* Faded shield + cross, top right (87px box, 30% opacity). */
.bh-cred-watermark {
  position: absolute;
  top: 18.23px;
  right: 28px;
  width: 87px;
  height: 87px;
  opacity: 0.3;
  pointer-events: none;
}

.bh-cred-watermark-shield {
  position: absolute;
  top: 2.26px;
  left: 7.875px;
  display: block;
  width: 71.25px;
  height: 82.482px;
  max-width: none;
}

.bh-cred-watermark-cross {
  position: absolute;
  top: 29px;
  left: 29px;
  display: block;
  width: 30px;
  height: 30px;
  max-width: none;
}

/* Shared white tile (status + metrics). */
.bh-cred-tile {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
  align-items: center;
  box-sizing: border-box;
  height: 90px;
  padding: 17px;
  background: var(--c-white);
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  filter: drop-shadow(0 0 7.5px rgba(0, 0, 0, 0.1));
}

.bh-cred-tile-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--c-white);
  border-radius: 9999px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.15));
}

.bh-cred-tile-icon img {
  display: block;
  max-width: none;
}

.bh-cred-tile-body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 7px;
  align-items: flex-start;
  min-width: 0;
}

.bh-cred-tile-body strong {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--c-text);
  white-space: nowrap;
}

.bh-cred-status .bh-cred-tile-body {
  flex: none;
}

.bh-cred-status-line {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: var(--c-text);
  white-space: nowrap;
}

.bh-cred-status-dot {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  background: var(--c-orange);
  border-radius: 50%;
}

/* Live ping around the status dot. */
.bh-cred-status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-orange);
  border-radius: 50%;
  opacity: 0;
}

/* ---------- Steps ---------- */
.bh-cred-flow {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Gradient timeline with arrowhead behind the numbered badges. */
.bh-cred-timeline {
  position: absolute;
  top: -15.68px;
  right: -4px;
  left: -2px;
  display: block;
  width: calc(100% + 6px);
  height: 21.02px;
  max-width: none;
  pointer-events: none;
}

.bh-cred-steps {
  display: flex;
  gap: 20px;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bh-cred-step {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  box-sizing: border-box;
  min-width: 0;
  height: 258px;
  padding: 17px;
  text-align: center;
  background: var(--c-white);
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.11);
  transition: translate 0.35s ease, box-shadow 0.35s ease;
}

.bh-cred-step:hover {
  translate: 0 -5px;
  box-shadow: 0 14px 24px -12px rgba(39, 55, 117, 0.3);
}

/* Numbered badge sits on the timeline, centred over its card. */
.bh-cred-step-num {
  position: absolute;
  top: -26.77px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;
  color: var(--c-blue);
  background: var(--c-white);
  border: 3px solid var(--c-white);
  border-radius: 31px;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.21));
  translate: -50% 0;
}

.bh-cred-step-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--c-white);
  border-radius: 9999px;
  filter: drop-shadow(0 1px 2.5px rgba(0, 0, 0, 0.18));
  transition: scale 0.35s ease;
}

.bh-cred-step:hover .bh-cred-step-icon {
  scale: 1.08;
}

.bh-cred-step-icon img {
  display: block;
  max-width: none;
}

.bh-cred-step-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 14px;
  line-height: 22.5px;
  color: var(--c-blue);
  text-transform: none;
}

.bh-cred-step-bar {
  display: block;
  flex: none;
  width: 28px;
  height: 4px;
  background: var(--c-orange);
  border-radius: 9999px;
}

.bh-cred-step-text {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 12px;
  line-height: 16.25px;
  color: var(--c-text);
}

/* ---------- Metrics ---------- */
.bh-cred-metrics {
  width: 100%;
}

.bh-cred-metric {
  display: flex;
  flex: 1 1 0;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.bh-cred-metrics-rule {
  flex: none;
  width: 1px;
  height: 45.546px;
  background: var(--c-light-grey);
}

.bh-cred-progress {
  display: flex;
  gap: 7px;
  align-items: center;
  width: 100%;
}

.bh-cred-progress-track {
  position: relative;
  flex: 1 1 0;
  height: 7px;
  overflow: hidden;
  background: #fedfe0;
  border-radius: 28px;
}

.bh-cred-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 78%;
  background: var(--c-orange);
  border-radius: 28px;
  transform-origin: left;
}

.bh-cred-progress-value,
.bh-cred-approval {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: var(--c-text);
  white-space: nowrap;
}

.bh-cred-approval {
  display: inline-flex;
  gap: 7px;
  align-items: center;
}

.bh-cred-approval b {
  font-weight: 700;
  color: var(--c-orange);
}

.bh-cred-approval > span {
  color: var(--c-blue);
}

/* ---------- Credentialing animation ---------- */
/* script-v2.js .is-armed/.is-in: intro rises, the key rules draw out to
   their dots, the status tile drops in, the timeline draws left to right
   as badges pop and step cards rise, then the metrics tile rises while
   the progress bar fills and the numbers count up. */
@keyframes bh-cred-rise {
  from { opacity: 0; translate: 0 26px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-cred-drop {
  from { opacity: 0; translate: 0 -18px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-cred-left {
  from { opacity: 0; translate: -30px 0; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-cred-draw {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes bh-cred-pop {
  0%   { opacity: 0; scale: 0.4; }
  70%  { opacity: 1; scale: 1.15; }
  100% { opacity: 1; scale: 1; }
}

@keyframes bh-cred-grow {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}

@keyframes bh-cred-ping {
  0%        { opacity: 0.6; scale: 1; }
  80%, 100% { opacity: 0; scale: 2.6; }
}

@keyframes bh-cred-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

@keyframes bh-cred-shine {
  0%, 72% { translate: -120% 0; }
  100%    { translate: 320% 0; }
}

/* The badge keeps translate for centring, so it pops on scale only. */
@keyframes bh-cred-badge {
  0%   { opacity: 0; scale: 0.3; }
  70%  { opacity: 1; scale: 1.2; }
  100% { opacity: 1; scale: 1; }
}

.bh-cred.is-armed:not(.is-in) :is(
  .bh-cred-intro > :not(.bh-cred-keys),
  .bh-cred-key,
  .bh-cred-panel,
  .bh-cred-status,
  .bh-cred-timeline,
  .bh-cred-step,
  .bh-cred-step-num,
  .bh-cred-metrics
) {
  opacity: 0;
}

.bh-cred.is-in .bh-cred-intro > :not(.bh-cred-keys) {
  animation: bh-cred-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-cred.is-in .bh-cred-intro > :nth-child(2) { animation-delay: 0.1s; }
.bh-cred.is-in .bh-cred-intro > .bh-cred-bar  { animation: bh-cred-grow 0.6s 0.25s ease-out backwards; }
.bh-cred.is-in .bh-cred-intro > :nth-child(4) { animation-delay: 0.3s; }
.bh-cred.is-in .bh-cred-intro > .bh-cred-btn  { animation-delay: 0.85s; }

.bh-cred.is-in .bh-cred-key {
  animation: bh-cred-left 0.6s calc(0.4s + var(--i, 0) * 0.12s) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-cred.is-in .bh-cred-key-line {
  animation: bh-cred-draw 0.8s calc(0.6s + var(--i, 0) * 0.12s) ease-out backwards;
}

.bh-cred.is-in .bh-cred-panel {
  animation: bh-cred-rise 0.8s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-cred.is-in .bh-cred-status {
  animation: bh-cred-drop 0.6s 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-cred.is-in .bh-cred-timeline {
  animation: bh-cred-draw 1.2s 0.6s cubic-bezier(0.45, 0, 0.2, 1) backwards;
}

.bh-cred.is-in .bh-cred-step {
  animation: bh-cred-rise 0.6s calc(0.7s + var(--s, 0) * 0.22s) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

/* Badges pop as the timeline passes each one. */
.bh-cred.is-in .bh-cred-step-num {
  animation: bh-cred-badge 0.5s calc(0.75s + var(--s, 0) * 0.28s) cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.bh-cred.is-in .bh-cred-step-bar {
  animation: bh-cred-grow 0.5s calc(1s + var(--s, 0) * 0.22s) ease-out backwards;
}

.bh-cred.is-in .bh-cred-metrics {
  animation: bh-cred-rise 0.6s 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-cred.is-in .bh-cred-progress-fill {
  animation: bh-cred-grow 1.4s 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

/* Ambient loops. */
.bh-cred-status-dot::after {
  animation: bh-cred-ping 1.8s ease-out infinite;
}

.bh-cred-watermark {
  animation: bh-cred-float 5s ease-in-out infinite;
}

.bh-cred-btn::after {
  animation: bh-cred-shine 5s 2.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bh-cred *,
  .bh-cred *::before,
  .bh-cred *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Credentialing responsive ---------- */
@media (max-width: 1199px) {
  .bh-cred-layout {
    flex-direction: column;
    gap: 32px;
  }

  .bh-cred-intro {
    width: 100%;
    max-width: 640px;
  }

  /* In a column, flex: 1 1 0 would give the (overflow-hidden) panel a 0 height. */
  .bh-cred-panel {
    flex: none;
  }
}

@media (max-width: 767px) {
  .bh-cred-title {
    font-size: 28px;
    line-height: 34px;
  }

  .bh-cred-panel {
    gap: 28px;
    padding: 16px;
  }

  .bh-cred-watermark {
    display: none;
  }

  /* Steps go 2 x 2; the timeline and badges only work in one row. */
  .bh-cred-timeline,
  .bh-cred-step-num {
    display: none;
  }

  .bh-cred-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .bh-cred-step {
    height: auto;
  }

  .bh-cred-metrics {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 14px;
  }

  .bh-cred-metrics-rule {
    width: 100%;
    height: 1px;
  }
}

@media (max-width: 480px) {
  .bh-cred-title {
    font-size: 24px;
    line-height: 30px;
  }

  .bh-cred-status {
    width: 100%;
  }

  .bh-cred-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .bh-cred-btn {
    width: 100%;
  }
}

/* ============================================================= */
/* Why choose us — Figma 8777:69801                                */
/* Intro (flex) + 695px 2 x 2 card grid with a centred logo badge.  */
/* ============================================================= */
.bh-choose {
  position: relative;
  padding: 40px 0;
  overflow: hidden;
  background: var(--c-white);
}

/* Same faint orbit as "Who we serve", bottom-left. */
.bh-choose-orbit {
  position: absolute;
  top: 250.41px;
  left: calc(50% - 720px - 283.7px);
  display: block;
  width: 651.508px;
  height: 654.545px;
  max-width: none;
  pointer-events: none;
}

.bh-choose .container-page {
  position: relative;
  z-index: 1;
}

.bh-choose-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* ---------- Intro ---------- */
.bh-choose-intro {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
  min-width: 0;
}

.bh-choose-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 12px;
  line-height: 9.976px;
  color: var(--c-blue);
  white-space: nowrap;
  background: rgba(39, 55, 117, 0.1);
  border-radius: 9.069px;
}

.bh-choose-heading {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
}

.bh-choose-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 32px;
  line-height: 35px;
  color: var(--c-blue);
  text-transform: none;
}

.bh-choose-title .accent {
  color: var(--c-orange);
}

.bh-choose-bar {
  display: block;
  width: 48px;
  height: 4px;
  background: var(--c-orange);
  border-radius: 9999px;
  transform-origin: left;
}

.bh-choose-lead {
  width: 471px;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.2px;
  color: var(--c-text);
}

.bh-choose-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 19px;
  align-items: center;
  margin-top: 10px; /* 40px from the copy block */
}

.bh-choose-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 50px;
  padding: 12px 24px;
  overflow: hidden;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 50px;
  transition: background-color 0.3s ease, color 0.3s ease, translate 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.bh-choose-btn:hover,
.bh-choose-btn:focus-visible {
  text-decoration: none;
  translate: 0 -2px;
}

.bh-choose-btn--primary {
  gap: 20px;
  color: var(--c-white);
  background: var(--c-blue);
}

.bh-choose-btn--primary:hover,
.bh-choose-btn--primary:focus-visible {
  color: var(--c-white);
  background: #1d2a5e;
  box-shadow: 0 12px 22px -12px rgba(39, 55, 117, 0.7);
}

.bh-choose-btn--primary::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  translate: -120% 0;
  pointer-events: none;
}

.bh-choose-btn--ghost {
  gap: 15px;
  color: var(--c-orange);
  border: 1px solid var(--c-orange);
}

.bh-choose-btn--ghost:hover,
.bh-choose-btn--ghost:focus-visible {
  color: var(--c-orange);
  background: rgba(252, 93, 97, 0.08);
}

.bh-choose-btn--ghost img {
  display: block;
  width: 20px;
  height: 23.119px;
  max-width: none;
  margin: 0 2px; /* 24px tdesign:secured frame */
}

.bh-choose-btn-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--c-white);
  border-radius: 9999px;
}

.bh-choose-btn-icon img {
  display: block;
  width: 11px;
  height: 10px;
  max-width: none;
  transition: translate 0.3s ease;
}

.bh-choose-btn--primary:hover .bh-choose-btn-icon img {
  translate: 3px 0;
}

/* ---------- Card grid ---------- */
.bh-choose-grid-wrap {
  position: relative;
  flex: none;
  width: 695px;
}

.bh-choose-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bh-choose-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  box-sizing: border-box;
  height: 238px;
  padding: 20px 20px 36px;
  overflow: hidden;
  background: rgba(239, 242, 255, 0.28);
  border: 2px solid var(--c-bg-blue);
  border-radius: 10px;
  box-shadow: 0 2.704px 11.561px 0 var(--c-bg-blue);
  transition: translate 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.bh-choose-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 64px 0 var(--c-bg-blue);
  pointer-events: none;
}

.bh-choose-card:hover {
  translate: 0 -5px;
  border-color: rgba(39, 55, 117, 0.16);
  box-shadow: 0 18px 30px -16px rgba(39, 55, 117, 0.3);
}

/* 60px icon slot; the exports carry 5px of shadow bleed around the circle. */
.bh-choose-icon {
  position: relative;
  z-index: 1;
  flex: none;
  width: 60px;
  height: 60px;
  margin-bottom: 10px; /* 20px to the text, with the gap */
}

.bh-choose-icon-art {
  position: absolute;
  top: -5px;
  left: -5px;
  display: block;
  max-width: none;
}

/* Card 2's orange arc (Figma line 131) sits on the circle's lower right. */
.bh-choose-icon-arc {
  position: absolute;
  top: 34.06px;
  left: 34.23px;
  display: block;
  width: 29px;
  height: 29px;
  max-width: none;
}

.bh-choose-card-title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  color: var(--c-blue);
  text-transform: none;
}

.bh-choose-card-title .accent {
  color: var(--c-orange);
}

.bh-choose-card-text {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  line-height: 19.2px;
  color: var(--c-text);
}

/* Logo badge in the middle of the grid (120px + its ring/shadow bleed). */
.bh-choose-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: block;
  width: 143.4px;
  height: 143.4px;
  max-width: none;
  translate: -50% -50%;
  pointer-events: none;
}

/* ---------- Why-choose animation ---------- */
/* script-v2.js .is-armed/.is-in: intro rises, cards fly in from their
   corners toward the centre, then the badge pops in and keeps spinning
   its gradient ring slowly; the orbit turns in the background. */
@keyframes bh-choose-rise {
  from { opacity: 0; translate: 0 26px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-choose-in {
  from { opacity: 0; translate: var(--from-x, 0) var(--from-y, 0); }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-choose-pop {
  0%   { opacity: 0; scale: 0.3; rotate: -90deg; }
  70%  { opacity: 1; scale: 1.1; rotate: 8deg; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}

@keyframes bh-choose-grow {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}

@keyframes bh-choose-spin {
  to { rotate: 360deg; }
}

@keyframes bh-choose-breathe {
  0%, 100% { scale: 1; }
  50%      { scale: 1.05; }
}

@keyframes bh-choose-shine {
  0%, 72% { translate: -120% 0; }
  100%    { translate: 320% 0; }
}

.bh-choose-card:nth-child(1) { --from-x: -40px; --from-y: -30px; }
.bh-choose-card:nth-child(2) { --from-x: 40px;  --from-y: -30px; }
.bh-choose-card:nth-child(3) { --from-x: -40px; --from-y: 30px; }
.bh-choose-card:nth-child(4) { --from-x: 40px;  --from-y: 30px; }

.bh-choose.is-armed:not(.is-in) :is(.bh-choose-intro > *, .bh-choose-card, .bh-choose-badge) {
  opacity: 0;
}

.bh-choose.is-in .bh-choose-intro > * {
  animation: bh-choose-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-choose.is-in .bh-choose-intro > :nth-child(2) { animation-delay: 0.1s; }
.bh-choose.is-in .bh-choose-intro > :nth-child(3) { animation-delay: 0.2s; }
.bh-choose.is-in .bh-choose-intro > :nth-child(4) { animation-delay: 0.35s; }

.bh-choose.is-in .bh-choose-bar {
  animation: bh-choose-grow 0.6s 0.3s ease-out backwards;
}

.bh-choose.is-in .bh-choose-card {
  animation: bh-choose-in 0.8s calc(0.2s + var(--i, 0) * 0.12s) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

/* Pop in, then the whole badge breathes (the ring gradient reads as a slow glow). */
.bh-choose.is-in .bh-choose-badge {
  animation:
    bh-choose-pop 0.9s 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
    bh-choose-breathe 4s 1.8s ease-in-out infinite;
}

.bh-choose:not(.is-armed) .bh-choose-badge {
  animation: bh-choose-breathe 4s ease-in-out infinite;
}

.bh-choose-orbit {
  animation: bh-choose-spin 90s linear infinite;
}

.bh-choose-btn--primary::after {
  animation: bh-choose-shine 5s 2.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bh-choose *,
  .bh-choose *::after,
  .bh-choose-orbit {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Why-choose responsive ---------- */
@media (max-width: 1199px) {
  .bh-choose-layout {
    flex-direction: column;
    gap: 36px;
  }

  .bh-choose-intro {
    flex: none;
    width: 100%;
  }

  .bh-choose-grid-wrap {
    width: 100%;
    max-width: 695px;
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  .bh-choose-title {
    font-size: 28px;
    line-height: 34px;
  }

  .bh-choose-grid {
    gap: 20px;
  }

  .bh-choose-card {
    height: auto;
    min-height: 220px;
  }

  .bh-choose-badge {
    width: 110px;
    height: 110px;
  }
}

/* Phones: one column; the badge moves above the cards instead of between them. */
@media (max-width: 575px) {
  .bh-choose-title {
    font-size: 24px;
    line-height: 30px;
  }

  .bh-choose-grid-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .bh-choose-badge {
    position: static;
    order: -1;
    width: 100px;
    height: 100px;
    translate: none;
  }

  .bh-choose-grid {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .bh-choose-card {
    min-height: 0;
  }

  .bh-choose-actions,
  .bh-choose-btn {
    width: 100%;
  }
}

/* ============================================================= */
/* Trusted standards — Figma 8777:69902 (1440 x 466, dark band)    */
/* ============================================================= */
.bh-trust {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: center;
  padding: 64px 16px;
  overflow: hidden;
  background: radial-gradient(81.04% 138.91% at 70% 30%, #273775 0%, #142048 50%, #0b1431 75%, #01081a 100%);
}

.bh-trust-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bh-trust-bg img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0.1;
}

/* Soft light that drifts across the band. */
.bh-trust::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: 0;
  width: 30%;
  background: radial-gradient(closest-side, rgba(0, 163, 255, 0.18), transparent);
  translate: -120% 0;
  pointer-events: none;
}

.bh-trust-title,
.bh-trust-logos,
.bh-trust-text {
  position: relative;
  z-index: 1;
}

.bh-trust-title {
  width: 1026px;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 32px;
  line-height: 35px;
  color: var(--c-white);
  text-align: center;
  text-transform: none;
}

/* Logos 60px apart with 1px 40%-white rules (142.8px tall) between them. */
.bh-trust-logos {
  display: flex;
  gap: 60px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bh-trust-logo {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
}

.bh-trust-logo + .bh-trust-logo::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30.5px;
  width: 1px;
  height: 142.814px;
  background: rgba(255, 255, 255, 0.4);
  translate: 0 -50%;
  rotate: 0.45deg; /* Figma's lines sit at 89.55deg */
  transform-origin: center;
}

.bh-trust-logo img {
  display: block;
  max-width: none;
  transition: scale 0.35s ease, filter 0.35s ease;
}

.bh-trust-logo:hover img {
  scale: 1.06;
  filter: drop-shadow(0 0 18px rgba(0, 163, 255, 0.45));
}

.bh-trust-text {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 18px;
  line-height: 25px;
  color: var(--c-white);
  text-align: center;
  white-space: nowrap;
}

/* ---------- Trust animation ---------- */
/* script-v2.js .is-armed/.is-in: title rises, logos pop in one by one as
   their rules draw down, then the line of copy; logos then bob gently in
   turn while a soft light drifts across the band. */
@keyframes bh-trust-rise {
  from { opacity: 0; translate: 0 24px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-trust-pop {
  0%   { opacity: 0; scale: 0.6; }
  70%  { opacity: 1; scale: 1.08; }
  100% { opacity: 1; scale: 1; }
}

@keyframes bh-trust-rule {
  from { scale: 1 0; }
  to   { scale: 1 1; }
}

@keyframes bh-trust-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

@keyframes bh-trust-sweep {
  0%, 20% { translate: -120% 0; }
  100%    { translate: 420% 0; }
}

.bh-trust.is-armed:not(.is-in) :is(.bh-trust-title, .bh-trust-logo, .bh-trust-text) {
  opacity: 0;
}

.bh-trust.is-in .bh-trust-title {
  animation: bh-trust-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-trust.is-in .bh-trust-logo {
  animation: bh-trust-pop 0.6s calc(0.25s + var(--i, 0) * 0.15s) cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

/* The bob is on the image so the dividers (on the li) stay put. */
.bh-trust.is-in .bh-trust-logo img {
  animation: bh-trust-bob 5s calc(1.4s + var(--i, 0) * 0.6s) ease-in-out infinite;
}

.bh-trust:not(.is-armed) .bh-trust-logo img {
  animation: bh-trust-bob 5s calc(var(--i, 0) * 0.6s) ease-in-out infinite;
}

.bh-trust.is-in .bh-trust-logo + .bh-trust-logo::before {
  animation: bh-trust-rule 0.6s calc(0.4s + var(--i, 0) * 0.15s) ease-out backwards;
}

.bh-trust.is-in .bh-trust-text {
  animation: bh-trust-rise 0.7s 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-trust::after {
  animation: bh-trust-sweep 9s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bh-trust,
  .bh-trust *,
  .bh-trust::after,
  .bh-trust *::before {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Trust responsive ---------- */
@media (max-width: 1199px) {
  .bh-trust-logos {
    gap: 40px;
  }

  .bh-trust-logo + .bh-trust-logo::before {
    left: -20.5px;
  }

  .bh-trust-logo img {
    width: auto;
    height: auto;
    max-height: 150px;
    max-width: 150px;
  }

  .bh-trust-text {
    white-space: normal;
  }
}

@media (max-width: 767px) {
  .bh-trust {
    gap: 36px;
    padding: 48px 20px;
  }

  .bh-trust-title {
    font-size: 26px;
    line-height: 32px;
  }

  /* 2 x 2 grid; the rules only work in one row. */
  .bh-trust-logos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
    width: 100%;
    max-width: 420px;
  }

  .bh-trust-logo + .bh-trust-logo::before {
    content: none;
  }

  .bh-trust-logo img {
    max-width: 130px;
    max-height: 130px;
  }

  .bh-trust-text {
    font-size: 16px;
    line-height: 24px;
  }
}

/* ============================================================= */
/* Case studies — Figma 8777:69952 (#1) and 8777:93609 (#2)         */
/* 544px testimonial panel | 349px case copy | outcomes column.     */
/* Per-card geometry (arc, photo frame, quote offset, rule) comes   */
/* from custom properties set inline on .bh-case-card.              */
/* ============================================================= */
.bh-cases {
  padding: 40px 0;
  background: var(--c-white);
}

.bh-cases .container-page {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.bh-case-card {
  position: relative;
  display: flex;
  gap: 30px;
  align-items: stretch;
  padding-right: 20px;
  background: var(--c-white);
  border-radius: 20px;
  filter: drop-shadow(0 4px 9.55px rgba(0, 0, 0, 0.1));
}

/* ---------- Testimonial panel ---------- */
.bh-case-story {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: 544px;
  padding: 34px 48px 36px;
  overflow: hidden;
  background: linear-gradient(to top, #273775 29.688%, #fc5d61 99.881%);
  border-radius: 10px;
}

/* 376 x 321 group: arc, photo (orange base line), quote mark. */
.bh-case-portrait {
  position: relative;
  flex: none;
  width: 376px;
  height: 321px;
}

.bh-case-ring {
  position: absolute;
  top: var(--ring-y, 55px);
  left: var(--ring-x, 191px);
  display: block;
  width: var(--ring-w, 155.023px);
  height: var(--ring-h, 250.726px);
  max-width: none;
  transform-origin: var(--ring-origin, 22px 133px); /* centre of the 266px circle the arc belongs to */
}

.bh-case-photo {
  position: absolute;
  top: 0.41px;
  left: var(--photo-x, 14px);
  box-sizing: border-box;
  width: var(--photo-w, 350px);
  height: 321px;
  overflow: hidden;
  border-bottom: 4px solid var(--c-orange);
}

.bh-case-photo img {
  display: block;
  width: 100%;
  height: calc(100% + 4px); /* Figma crops to the full 321px frame */
  max-width: none;
  object-fit: cover;
  object-position: top;
}

.bh-case-quotes {
  position: absolute;
  top: 41px;
  left: 0;
  display: block;
  width: 75px;
  height: 54px;
  max-width: none;
}

.bh-case-quote {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 448px;
  max-width: 100%;
  margin: var(--quote-top, 36px) 0 0; /* #1 starts at 391px from the top, #2 at 371px */
  color: var(--c-white);
}

.bh-case-author {
  display: flex;
  flex-direction: column;
}

.bh-case-author strong {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 24px;
  line-height: 33.84px;
}

.bh-case-author span,
.bh-case-quote blockquote {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 25.6px;
}

.bh-case-author span {
  font-weight: 400;
}

.bh-case-quote blockquote {
  margin: 0;
  padding: 0;
  font-weight: 500;
  border: 0;
}

/* ---------- Case copy ---------- */
.bh-case-body {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  width: 349px;
  padding: 20px 0;
}

.bh-case-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 12px;
  line-height: 9.976px;
  color: var(--c-blue);
  white-space: nowrap;
  background: rgba(39, 55, 117, 0.1);
  border-radius: 9.069px;
}

.bh-case-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 28px;
  line-height: 35px;
  color: var(--c-text);
  text-transform: none;
}

.bh-case-title .accent {
  color: var(--c-orange);
}

.bh-case-text p {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  line-height: 26.2px;
  color: var(--c-text);
}

.bh-case-text p + p {
  margin-top: 26.2px; /* Figma's blank line between the paragraphs */
}

.bh-case-text strong {
  font-weight: 700;
  color: var(--c-blue);
}

/* ---------- Outcomes ---------- */
.bh-case-outcomes {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  max-width: 275.5px;
  margin-left: -20.5px; /* Figma: 9.5px past the copy column, not the 30px flex gap */
  padding: 66px 0 40px 20.5px;
}

/* 460px #EFF2FF rule (Figma places it 71px down on #1, 135px on #2). */
.bh-case-outcomes::before {
  content: "";
  position: absolute;
  top: var(--rule-top, 71px);
  left: 0;
  width: 1px;
  height: 460px;
  background: var(--c-bg-blue);
  transform-origin: top;
}

.bh-case-outcomes-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 18px;
  line-height: 20px;
  color: var(--c-blue);
  text-transform: capitalize;
}

.bh-case-stats {
  display: flex;
  flex-direction: column;
  gap: 29px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bh-case-stat {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px;
  background: var(--c-bg-blue);
  border-radius: 10px;
  transition: translate 0.35s ease, box-shadow 0.35s ease;
}

.bh-case-stat:hover {
  translate: -4px 0;
  box-shadow: 0 12px 24px -14px rgba(39, 55, 117, 0.35);
}

.bh-case-stat-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  background: rgba(39, 55, 117, 0.1);
  border: 7px solid var(--c-white);
  border-radius: 50px;
}

.bh-case-stat-icon img {
  display: block;
  max-width: none;
}

.bh-case-stat-body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.bh-case-stat-body strong {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 22px;
  line-height: 20px;
  color: var(--c-orange);
  white-space: nowrap;
}

.bh-case-stat-body > span {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  line-height: 25.2px;
  color: var(--c-text);
}

.bh-case-stat:first-child .bh-case-stat-body > span {
  max-width: 155px; /* Figma 151px; +4px so "authorization denials" keeps one line */
}

/* ---------- Case study animation ---------- */
/* script-v2.js .is-armed/.is-in: the card rises; the photo slides up
   out of its orange base line while the arc swings in and the quote mark
   pops; the testimonial, case copy and outcome cards follow and the
   figures count up. The arc then keeps a slow sway. */
@keyframes bh-case-rise {
  from { opacity: 0; translate: 0 26px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-case-photo {
  from { opacity: 0; translate: 0 60px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-case-arc {
  from { opacity: 0; rotate: -70deg; }
  to   { opacity: 1; rotate: 0deg; }
}

@keyframes bh-case-sway {
  0%, 100% { rotate: 0deg; }
  50%      { rotate: 10deg; }
}

@keyframes bh-case-pop {
  0%   { opacity: 0; scale: 0.4; }
  70%  { opacity: 1; scale: 1.12; }
  100% { opacity: 1; scale: 1; }
}

@keyframes bh-case-right {
  from { opacity: 0; translate: 36px 0; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-case-rule {
  from { scale: 1 0; }
  to   { scale: 1 1; }
}

.bh-case.is-armed:not(.is-in) :is(
  .bh-case-card,
  .bh-case-photo img,
  .bh-case-ring,
  .bh-case-quotes,
  .bh-case-quote > *,
  .bh-case-body > *,
  .bh-case-outcomes-title,
  .bh-case-stat
) {
  opacity: 0;
}

.bh-case.is-in .bh-case-card {
  animation: bh-case-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-case.is-in .bh-case-photo img {
  animation: bh-case-photo 0.9s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-case.is-in .bh-case-ring {
  animation:
    bh-case-arc 1s 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) backwards,
    bh-case-sway 7s 1.6s ease-in-out infinite;
}

.bh-case:not(.is-armed) .bh-case-ring {
  animation: bh-case-sway 7s ease-in-out infinite;
}

.bh-case.is-in .bh-case-quotes {
  animation: bh-case-pop 0.6s 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.bh-case.is-in .bh-case-quote > * {
  animation: bh-case-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-case.is-in .bh-case-quote > :nth-child(1) { animation-delay: 0.7s; }
.bh-case.is-in .bh-case-quote > :nth-child(2) { animation-delay: 0.82s; }

.bh-case.is-in .bh-case-body > * {
  animation: bh-case-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-case.is-in .bh-case-body > :nth-child(1) { animation-delay: 0.3s; }
.bh-case.is-in .bh-case-body > :nth-child(2) { animation-delay: 0.4s; }
.bh-case.is-in .bh-case-body > :nth-child(3) { animation-delay: 0.52s; }

.bh-case.is-in .bh-case-outcomes::before {
  animation: bh-case-rule 0.9s 0.45s ease-out backwards;
}

.bh-case.is-in .bh-case-outcomes-title {
  animation: bh-case-right 0.6s 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-case.is-in .bh-case-stat {
  animation: bh-case-right 0.6s calc(0.7s + var(--i, 0) * 0.15s) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-case.is-in .bh-case-stat-icon {
  animation: bh-case-pop 0.5s calc(0.85s + var(--i, 0) * 0.15s) cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

@media (prefers-reduced-motion: reduce) {
  .bh-case *,
  .bh-case *::before {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Case study responsive ---------- */
/* Below 1240px: outcomes move under the copy as a row of three cards. */
@media (max-width: 1239px) {
  .bh-case-card {
    flex-wrap: wrap;
    padding-right: 0;
  }

  .bh-case-body {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding-right: 24px;
  }

  .bh-case-outcomes {
    flex: 1 1 100%;
    max-width: none;
    margin: 0;
    padding: 0 24px 28px;
  }

  .bh-case-outcomes::before {
    content: none;
  }

  .bh-case-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .bh-case-stat {
    gap: 14px;
    padding: 16px;
  }

  .bh-case-stat-body strong {
    font-size: 20px;
    line-height: 24px;
    white-space: normal;
  }
}

@media (max-width: 991px) {
  /* nowrap: in the slider the card has a fixed (stretched) height, and a
     wrapping column would push the outcomes into a second, hidden column. */
  .bh-case-card {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 24px;
  }

  .bh-case-body,
  .bh-case-outcomes {
    flex: none;
  }

  .bh-case-story {
    width: 100%;
    padding: 28px 24px 30px;
  }

  .bh-case-body {
    padding: 0 24px;
  }

  .bh-case-title {
    font-size: 24px;
    line-height: 31px;
  }
}

@media (max-width: 767px) {
  .bh-case-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .bh-case-stat:first-child .bh-case-stat-body > span {
    max-width: none;
  }
}

/* Phones: scale the fixed 376px portrait group down to fit. */
@media (max-width: 480px) {
  .bh-case-portrait {
    zoom: 0.78;
  }

  .bh-case-story {
    padding: 22px 18px 26px;
  }

  .bh-case-quote {
    margin-top: 22px;
  }

  .bh-case-author strong {
    font-size: 20px;
    line-height: 28px;
  }

  .bh-case-author span,
  .bh-case-quote blockquote {
    font-size: 15px;
    line-height: 24px;
  }

  .bh-case-body,
  .bh-case-outcomes {
    padding-right: 18px;
    padding-left: 18px;
  }
}

@media (max-width: 360px) {
  .bh-case-portrait {
    zoom: 0.68;
  }
}

/* ---------- Case studies slider ---------- */
/* One case per slide; the track slides by (100% + gap). The viewport
   bleeds 20px on each side so the card shadows aren't clipped. Slides
   off screen are hidden from assistive tech (aria-hidden, set in Blade
   and by script-v2.js) and faded so the edge of the next one reads as
   "more to come" while sliding. */
.bh-cases-slider {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.bh-cases-viewport {
  margin: -20px;
  padding: 20px;
  overflow: hidden;
  touch-action: pan-y;
}

.bh-cases-track {
  --slide-gap: 40px;
  display: flex;
  gap: var(--slide-gap);
  align-items: stretch; /* every slide as tall as the tallest, so the card doesn't jump */
  translate: calc(var(--slide, 0) * (-100% - var(--slide-gap))) 0;
  transition: translate 0.75s cubic-bezier(0.65, 0, 0.35, 1);
}

.bh-case {
  display: flex;
  flex: 0 0 100%;
  min-width: 0;
  opacity: 0.35;
  transition: opacity 0.6s ease;
}

.bh-case > .bh-case-card {
  flex: 1 1 auto;
  min-width: 0;
}

.bh-case.is-current {
  opacity: 1;
}

.bh-cases-controls {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
}

.bh-cases-arrow {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: var(--c-white);
  border: 1px solid var(--c-light-grey);
  border-radius: 50%;
  box-shadow: 0 6px 16px -10px rgba(39, 55, 117, 0.45);
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, translate 0.3s ease;
}

.bh-cases-arrow img {
  display: block;
  width: 14px;
  height: auto;
  max-width: none;
}

.bh-cases-arrow--prev img {
  rotate: 180deg;
}

.bh-cases-arrow:hover {
  background: var(--c-bg-blue);
  border-color: var(--c-blue);
}

.bh-cases-arrow--prev:hover { translate: -2px 0; }
.bh-cases-arrow--next:hover { translate: 2px 0; }

.bh-cases-arrow:focus-visible,
.bh-cases-dot:focus-visible {
  outline: 2px solid var(--c-blue) !important;
  outline-offset: 3px;
}

.bh-cases-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.bh-cases-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  background: var(--c-placeholder);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: width 0.35s ease, background-color 0.35s ease;
}

.bh-cases-dot.is-active {
  width: 28px;
  background: var(--c-blue);
}

@media (prefers-reduced-motion: reduce) {
  .bh-cases-track,
  .bh-case {
    transition: none;
  }
}

/* ============================================================= */
/* Software integrations — Figma 8777:69997                        */
/* 1240 x 580 hub diagram (positions from the centre, as Figma)    */
/* + benefits bar.                                                  */
/* ============================================================= */
.bh-int {
  padding: 40px 0;
  background: var(--c-white);
}

.bh-int .container-page {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

.bh-int-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  max-width: 100%;
  text-align: center;
}

.bh-int-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 12px;
  line-height: 9.976px;
  color: var(--c-blue);
  white-space: nowrap;
  background: rgba(39, 55, 117, 0.1);
  border-radius: 9.069px;
}

.bh-int-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 32px;
  line-height: 45px;
  color: var(--c-blue);
  white-space: nowrap;
}

.bh-int-lead {
  width: 812px;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.2px;
  color: var(--c-text);
}

/* ---------- Diagram ---------- */
.bh-int-diagram {
  position: relative;
  width: 100%;
  max-width: 1240px;
  height: 580px;
}

/* Dotted connectors with end dots (Figma lines 114/115). */
.bh-int-link {
  position: absolute;
  display: block;
  width: 112.667px;
  height: 10.667px;
  pointer-events: none;
}

.bh-int-link img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

.bh-int-link--left  { top: 146.67px; left: calc(50% - 232.33px); }
.bh-int-link--right { top: 146.67px; left: calc(50% + 117.67px); }
.bh-int-link--down  { top: 317.67px; left: calc(50% - 60.33px); rotate: 90deg; }

/* A pulse of "data" travelling along each connector. */
.bh-int-link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 8%;
  width: 8px;
  height: 8px;
  background: var(--c-orange);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(252, 93, 97, 0.18);
  opacity: 0;
  translate: 0 -50%;
}

/* Hub: 216px halo, 194px dashed ring (navy left half, orange right half). */
.bh-int-hub {
  position: absolute;
  top: 44.59px;
  left: 50%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 216px;
  height: 216px;
  padding: 0 31px 10px;
  text-align: center;
  border-radius: 108px;
  box-shadow: 0 4px 20px 0 rgba(39, 55, 117, 0.12);
  translate: -50% 0;
}

.bh-int-hub::before {
  content: "";
  position: absolute;
  inset: 11px;
  z-index: -1;
  background: #fcfcfe;
  border-radius: 50%;
}

/* Border sides rotated 45deg so top+right read as the right half. */
.bh-int-hub-ring {
  position: absolute;
  inset: 11px;
  border: 2px dashed;
  border-color: var(--c-orange) var(--c-orange) var(--c-blue) var(--c-blue);
  border-radius: 50%;
  rotate: 45deg;
  pointer-events: none;
}

/* Two overlapping rings (navy + orange), 50 x 32. */
.bh-int-hub-mark {
  position: relative;
  display: block;
  flex: none;
  width: 50px;
  height: 32px;
}

.bh-int-hub-mark i {
  position: absolute;
  top: -0.37px;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border: 3px solid var(--c-blue);
  border-radius: 16px;
}

.bh-int-hub-mark i:first-child { left: 0; }
.bh-int-hub-mark i:last-child  { left: 18px; border-color: var(--c-orange); }

.bh-int-hub strong {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 19px;
  line-height: normal;
  color: var(--c-blue);
  white-space: nowrap;
}

.bh-int-hub > span:last-child {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 11.5px;
  line-height: 17.25px;
  color: var(--c-text);
}

/* ---------- Tool cards ---------- */
.bh-int-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  box-sizing: border-box;
  padding: 26px 24px;
  background: var(--c-white);
  border-radius: 20px;
  filter: drop-shadow(0 4px 13px rgba(39, 55, 117, 0.09));
}

.bh-int-card--ehr {
  top: 45px;
  left: 0;
  width: 378px;
  height: 271px;
}

.bh-int-card--clearing {
  top: 45px;
  right: 0;
  width: 378px;
  height: 227px;
}

.bh-int-card--pms {
  top: 385px;
  left: 50%;
  translate: -50% 0;
}

.bh-int-card-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.bh-int-card-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: #eef1fb;
  border-radius: 14px;
}

.bh-int-card-icon img {
  display: block;
  max-width: none;
}

.bh-int-card-title {
  display: flex;
  flex-direction: column;
  gap: 8.25px;
  align-items: flex-start;
}

.bh-int-card-title h3 {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 18px;
  line-height: 23.76px;
  color: var(--c-blue);
  white-space: nowrap;
  text-transform: none;
}

.bh-int-card-title i {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--c-orange);
  border-radius: 2px;
  transform-origin: left;
}

.bh-int-logos {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bh-int-logo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 45px;
  padding: 10px;
  background: var(--c-white);
  border: 1px solid var(--c-bg-blue);
  border-radius: 10px;
  transition: translate 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.bh-int-logo:hover {
  translate: 0 -3px;
  border-color: rgba(39, 55, 117, 0.25);
  box-shadow: 0 10px 18px -12px rgba(39, 55, 117, 0.45);
}

/* Some Figma logos (e.g. Office Ally, 143px) are wider than their tile's
   content box; let them shrink to fit. */
.bh-int-logo img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---------- Benefits bar ---------- */
.bh-int-benefits {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  max-width: 1240px;
  padding: 20px 12px;
  background: var(--c-white);
  border-radius: 18px;
  filter: drop-shadow(0 10px 15px rgba(39, 55, 117, 0.08));
}

.bh-int-benefit {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 0 18px 0 19px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 14px;
  line-height: normal;
  color: var(--c-blue);
  white-space: nowrap;
}

.bh-int-benefit:first-child {
  padding-left: 18px;
}

.bh-int-benefit-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--c-white);
  border-radius: 20px;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.15));
  transition: scale 0.3s ease;
}

.bh-int-benefit:hover .bh-int-benefit-icon {
  scale: 1.12;
}

.bh-int-benefit-icon img {
  display: block;
  max-width: none;
}

.bh-int-benefit-rule {
  flex: none;
  width: 1px;
  height: 43px;
  background: var(--c-light-grey);
}

/* ---------- Integrations animation ---------- */
/* script-v2.js .is-armed/.is-in: heading rises, the hub pops and its
   dashed ring starts turning, connectors draw out from the hub, the
   three cards slide in from their side with logos popping in turn, then
   the benefits bar. Data pulses keep travelling along the connectors. */
@keyframes bh-int-rise {
  from { opacity: 0; translate: 0 26px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-int-hub-in {
  0%   { opacity: 0; scale: 0.5; }
  70%  { opacity: 1; scale: 1.06; }
  100% { opacity: 1; scale: 1; }
}

@keyframes bh-int-spin {
  to { rotate: 405deg; }
}

@keyframes bh-int-draw {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes bh-int-draw-rev {
  from { clip-path: inset(0 0 0 100%); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes bh-int-from-left {
  from { opacity: 0; translate: -40px 0; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-int-from-right {
  from { opacity: 0; translate: 40px 0; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-int-from-below {
  from { opacity: 0; translate: -50% 40px; }
  to   { opacity: 1; translate: -50% 0; }
}

@keyframes bh-int-pop {
  0%   { opacity: 0; scale: 0.6; }
  70%  { opacity: 1; scale: 1.06; }
  100% { opacity: 1; scale: 1; }
}

@keyframes bh-int-grow {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}

/* Pulse runs hub -> card on the side links (left link runs right-to-left). */
@keyframes bh-int-pulse {
  0%   { opacity: 0; left: 8%; }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; left: 88%; }
}

@keyframes bh-int-pulse-rev {
  0%   { opacity: 0; left: 88%; }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; left: 8%; }
}

.bh-int.is-armed:not(.is-in) :is(
  .bh-int-head > *,
  .bh-int-hub,
  .bh-int-link,
  .bh-int-card,
  .bh-int-logo,
  .bh-int-benefits
) {
  opacity: 0;
}

.bh-int.is-in .bh-int-head > * {
  animation: bh-int-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-int.is-in .bh-int-head > :nth-child(2) { animation-delay: 0.1s; }
.bh-int.is-in .bh-int-head > :nth-child(3) { animation-delay: 0.2s; }

.bh-int.is-in .bh-int-hub {
  animation: bh-int-hub-in 0.8s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.bh-int.is-in .bh-int-link--right,
.bh-int.is-in .bh-int-link--down {
  animation: bh-int-draw 0.6s 0.8s ease-out backwards;
}

.bh-int.is-in .bh-int-link--left {
  animation: bh-int-draw-rev 0.6s 0.8s ease-out backwards;
}

.bh-int.is-in .bh-int-card--ehr      { animation: bh-int-from-left 0.7s 1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.bh-int.is-in .bh-int-card--clearing { animation: bh-int-from-right 0.7s 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.bh-int.is-in .bh-int-card--pms      { animation: bh-int-from-below 0.7s 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }

.bh-int.is-in .bh-int-card-title i {
  animation: bh-int-grow 0.5s 1.4s ease-out backwards;
}

.bh-int.is-in .bh-int-logo {
  animation: bh-int-pop 0.5s calc(1.35s + var(--n, 0) * 0.08s) cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.bh-int.is-in .bh-int-benefits {
  animation: bh-int-rise 0.7s 1.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

/* Ambient loops. */
.bh-int-hub-ring {
  animation: bh-int-spin 24s linear infinite;
}

.bh-int-link--right::after,
.bh-int-link--down::after {
  animation: bh-int-pulse 2.4s 2s ease-in-out infinite;
}

.bh-int-link--left::after {
  animation: bh-int-pulse-rev 2.4s 2.4s ease-in-out infinite;
}

.bh-int-link--down::after {
  animation-delay: 2.8s;
}

@media (prefers-reduced-motion: reduce) {
  .bh-int *,
  .bh-int *::after,
  .bh-int *::before {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Integrations responsive ---------- */
/* Below 1240px the fixed diagram no longer fits: hub on top, cards in a
   grid, connectors hidden. */
@media (max-width: 1239px) {
  .bh-int-diagram {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    height: auto;
  }

  .bh-int-link {
    display: none;
  }

  .bh-int-hub {
    position: relative;
    top: auto;
    left: auto;
    grid-column: 1 / -1;
    justify-self: center;
    translate: none;
  }

  .bh-int-card,
  .bh-int-card--ehr,
  .bh-int-card--clearing,
  .bh-int-card--pms {
    position: static;
    width: auto;
    height: auto;
    translate: none;
  }

  .bh-int-card--pms {
    grid-column: 1 / -1;
  }

  .bh-int-logos {
    flex-wrap: wrap;
    gap: 14px;
  }

  .bh-int.is-in .bh-int-card--pms {
    animation-name: bh-int-rise;
  }

  .bh-int-benefits {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 0;
  }
}

@media (max-width: 991px) {
  .bh-int-title {
    font-size: 28px;
    line-height: 36px;
    white-space: normal;
  }

  .bh-int-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 20px;
  }

  .bh-int-benefit,
  .bh-int-benefit:first-child {
    padding: 0;
  }

  .bh-int-benefit-rule {
    display: none;
  }
}

@media (max-width: 767px) {
  .bh-int-diagram {
    grid-template-columns: minmax(0, 1fr);
  }

  .bh-int-card--pms {
    grid-column: auto;
  }

  .bh-int-pill {
    white-space: normal;
    line-height: 16px;
  }
}

@media (max-width: 480px) {
  .bh-int-title {
    font-size: 24px;
    line-height: 31px;
  }

  .bh-int-card {
    padding: 22px 16px;
  }

  .bh-int-logo {
    width: calc(50% - 7px) !important; /* override the Figma tile widths */
  }

  .bh-int-logo img {
    max-width: 100%;
    height: auto;
  }

  .bh-int-benefits {
    grid-template-columns: minmax(0, 1fr);
  }

  .bh-int-benefit {
    white-space: normal;
  }
}

/* ============================================================= */
/* State services — Figma 8777:70109                               */
/* 297px intro card + 903 x 441 map card with state callouts.       */
/* ============================================================= */
.bh-states {
  padding: 40px 0;
  background: var(--c-white);
}

.bh-states .container-page {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

.bh-states-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  max-width: 100%;
  text-align: center;
}

.bh-states-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 12px;
  line-height: 9.976px;
  color: var(--c-blue);
  white-space: nowrap;
  background: rgba(39, 55, 117, 0.1);
  border-radius: 9.069px;
}

.bh-states-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 32px;
  line-height: 45px;
  color: var(--c-blue);
  white-space: nowrap;
}

.bh-states-title .accent {
  color: var(--c-orange);
}

.bh-states-lead {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.2px;
  color: var(--c-text);
  white-space: nowrap;
}

.bh-states-layout {
  display: flex;
  gap: 40px;
  align-items: stretch;
  width: 100%;
  max-width: 1240px;
}

/* Shared soft panel (Figma "Key Impact Highlights"). */
.bh-states-panel {
  position: relative;
  box-sizing: border-box;
  padding: 25px;
  background: rgba(239, 242, 255, 0.28);
  border: 1px solid var(--c-bg-blue);
  border-radius: 16px;
  box-shadow: 0 2.704px 11.561px 0 var(--c-bg-blue);
}

.bh-states-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 64px 0 var(--c-bg-blue);
  pointer-events: none;
}

/* ---------- Intro card ---------- */
.bh-states-intro {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  width: 297px;
}

.bh-states-logo {
  display: block;
  width: 227px;
  height: 37px;
  max-width: 100%;
}

.bh-states-intro-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bh-states-intro-copy h3 {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: var(--c-blue);
  text-transform: none;
}

.bh-states-intro-copy p {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--c-text);
}

.bh-states-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  padding: 8px 14px;
  overflow: hidden;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 13px;
  line-height: 20.8px;
  color: var(--c-white);
  white-space: nowrap;
  text-decoration: none;
  background: var(--c-orange);
  border-radius: 75px;
  transition: background-color 0.3s ease, translate 0.3s ease, box-shadow 0.3s ease;
}

.bh-states-btn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  translate: -120% 0;
  pointer-events: none;
}

.bh-states-btn:hover,
.bh-states-btn:focus-visible {
  color: var(--c-white);
  text-decoration: none;
  background: #f04a4f;
  translate: 0 -2px;
  box-shadow: 0 12px 22px -12px rgba(252, 93, 97, 0.7);
}

.bh-states-btn-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--c-white);
  border-radius: 9999px;
}

.bh-states-btn-icon img {
  display: block;
  width: 11px;
  height: 10px;
  max-width: none;
  transition: translate 0.3s ease;
}

.bh-states-btn:hover .bh-states-btn-icon img {
  translate: 3px 0;
}

/* ---------- Map card ---------- */
.bh-states-map {
  flex: 1 1 0;
  min-width: 0;
  height: 441px;
  padding: 0;
}

/* 646 x 341 frame; the drawing sits at inset -0.01% 3.49% 0.88% 4.18%. */
.bh-states-map-art {
  position: absolute;
  top: 28.41px;
  left: calc(50% - 61.5px);
  width: 646px;
  height: 341px;
  overflow: hidden;
  translate: -50% 0;
  pointer-events: none;
}

.bh-states-map-art img {
  position: absolute;
  top: -0.01%;
  left: 4.18%;
  display: block;
  width: 92.33%;
  height: 99.13%;
  max-width: none;
}

/* Rotated dotted connectors from each state to its callout. */
.bh-states-line {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.bh-states-line > span {
  position: relative;
  flex: none;
}

/* Inline inset: left/top place the SVG, which keeps its own (overhanging) size. */
.bh-states-line img {
  position: absolute;
  display: block;
  width: auto;
  height: auto;
  max-width: none;
}

.bh-states-cards {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bh-states-card {
  position: absolute;
  z-index: 2;
  display: flex;
  gap: 12px;
  align-items: center;
  box-sizing: border-box;
  height: 72px;
  padding: 17px;
  background: var(--c-white);
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  filter: drop-shadow(0 0 7.5px rgba(0, 0, 0, 0.1));
  transition: translate 0.3s ease, filter 0.3s ease;
}

.bh-states-card:hover {
  translate: 0 -3px;
  filter: drop-shadow(0 8px 14px rgba(39, 55, 117, 0.2));
}

.bh-states-card-icon {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--c-blue);
  border-radius: 9999px;
}

.bh-states-card-icon--orange {
  background: var(--c-orange);
}

.bh-states-card-icon img {
  display: block;
  max-width: none;
}

.bh-states-card-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 currentColor;
  color: rgba(39, 55, 117, 0.35);
  opacity: 0;
}

.bh-states-card-icon--orange::after {
  color: rgba(252, 93, 97, 0.4);
}

.bh-states-card-body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 3.25px;
  min-width: 0;
}

.bh-states-card-body strong {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--c-blue);
  white-space: nowrap;
}

/* Linked states: the whole card is clickable through the name link. */
.bh-states-card-link {
  color: inherit;
  text-decoration: none;
}

.bh-states-card-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 12px;
}

.bh-states-card-link:hover,
.bh-states-card-link:focus-visible {
  color: inherit;
  text-decoration: none;
}

.bh-states-card-link:focus-visible {
  outline: none;
}

.bh-states-card-link:focus-visible::before {
  outline: 2px solid var(--c-blue);
  outline-offset: 2px;
}

.bh-states-card:has(.bh-states-card-link) {
  cursor: pointer;
}

.bh-states-card:has(.bh-states-card-link):hover strong {
  color: var(--c-orange);
}

.bh-states-card-body strong {
  transition: color 0.25s ease;
}

.bh-states-card-body > span {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 10px;
  line-height: 12.5px;
  color: var(--c-text);
}

/* ---------- States animation ---------- */
/* script-v2.js .is-armed/.is-in: heading rises, the intro card slides in,
   the map fades up, connectors draw out, callouts pop in turn. Then a
   ripple tours the six state icons one after another. */
@keyframes bh-states-rise {
  from { opacity: 0; translate: 0 26px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-states-left {
  from { opacity: 0; translate: -36px 0; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-states-map-in {
  from { opacity: 0; scale: 0.94; }
  to   { opacity: 1; scale: 1; }
}

@keyframes bh-states-draw {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes bh-states-pop {
  0%   { opacity: 0; scale: 0.6; }
  70%  { opacity: 1; scale: 1.06; }
  100% { opacity: 1; scale: 1; }
}

/* 6 icons x 1s = one tour. */
@keyframes bh-states-ripple {
  0%        { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
  14%, 100% { opacity: 0; box-shadow: 0 0 0 12px currentColor; }
}

@keyframes bh-states-shine {
  0%, 72% { translate: -120% 0; }
  100%    { translate: 320% 0; }
}

.bh-states.is-armed:not(.is-in) :is(
  .bh-states-head > *,
  .bh-states-intro,
  .bh-states-map,
  .bh-states-map-art,
  .bh-states-line,
  .bh-states-card
) {
  opacity: 0;
}

.bh-states.is-in .bh-states-head > * {
  animation: bh-states-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-states.is-in .bh-states-head > :nth-child(2) { animation-delay: 0.1s; }
.bh-states.is-in .bh-states-head > :nth-child(3) { animation-delay: 0.2s; }

.bh-states.is-in .bh-states-intro {
  animation: bh-states-left 0.7s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-states.is-in .bh-states-map {
  animation: bh-states-rise 0.7s 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-states.is-in .bh-states-map-art {
  animation: bh-states-map-in 1s 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-states.is-in .bh-states-line > span {
  animation: bh-states-draw 0.6s calc(1s + var(--i, 0) * 0.1s) ease-out backwards;
}

.bh-states.is-in .bh-states-card {
  animation: bh-states-pop 0.55s calc(1.1s + var(--i, 0) * 0.1s) cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.bh-states-card-icon::after {
  animation: bh-states-ripple 6s calc(2.2s + var(--i, 0) * 1s) ease-out infinite;
}

.bh-states-btn::after {
  animation: bh-states-shine 5s 2.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bh-states *,
  .bh-states *::before,
  .bh-states *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- States responsive ---------- */
/* Below 1240px the absolute callout layout no longer fits the map card:
   the map scales to the card width and callouts become a grid below. */
@media (max-width: 1239px) {
  .bh-states-title,
  .bh-states-lead {
    white-space: normal;
  }

  .bh-states-layout {
    flex-direction: column;
    gap: 24px;
  }

  .bh-states-intro {
    width: auto;
  }

  .bh-states-btn {
    width: auto;
    padding: 8px 28px;
  }

  .bh-states-map {
    flex: none;
    height: auto;
    padding: 24px;
  }

  .bh-states-map-art {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 646px;
    height: auto;
    aspect-ratio: 646 / 341;
    margin: 0 auto;
    translate: none;
  }

  .bh-states-line {
    display: none;
  }

  .bh-states-cards {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
  }

  .bh-states-card {
    position: relative; /* keeps the stretched link inside its own card */
    inset: auto !important;
    width: auto !important;
  }
}

@media (max-width: 767px) {
  .bh-states-title {
    font-size: 26px;
    line-height: 34px;
  }

  .bh-states-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .bh-states-title {
    font-size: 23px;
    line-height: 30px;
  }

  .bh-states-map {
    padding: 16px;
  }

  .bh-states-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .bh-states-btn {
    width: 100%;
  }
}

/* ============================================================= */
/* Payer expertise — Figma 8777:70650 (dashed 1240px frame)         */
/* ============================================================= */
.bh-pay {
  padding: 40px 0;
  background: var(--c-white);
}

.bh-pay-frame {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 20px;
  background: var(--c-white);
  border: 1px dashed var(--c-blue);
  border-radius: 20px;
}

.bh-pay-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 12px;
  line-height: 9.976px;
  color: var(--c-blue);
  white-space: nowrap;
  background: rgba(39, 55, 117, 0.1);
  border-radius: 9.069px;
}

.bh-pay-pill--light {
  color: var(--c-white);
  background: rgba(255, 255, 255, 0.3);
}

.bh-pay-intro {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  width: 452px;
}

.bh-pay-intro--sm {
  width: 315px;
}

.bh-pay-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 32px;
  line-height: 48px;
  color: var(--c-blue);
  text-transform: none;
}

.bh-pay-title--sm {
  font-size: 24px;
  line-height: 35px;
}

.bh-pay-bar {
  display: block;
  flex: none;
  width: 48px;
  height: 4px;
  background: var(--c-orange);
  transform-origin: left;
}

.bh-pay-bar--sm {
  width: 40px;
}

.bh-pay-lead {
  max-width: 448px;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  line-height: 29.25px;
  color: #4b5563;
}

/* ---------- Part 1: logos ---------- */
.bh-pay-top {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 40px 0;
}

.bh-pay-network {
  display: flex;
  flex: 0 1 719px;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.bh-pay-network-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  text-align: center;
  text-transform: none;
  background: linear-gradient(to right, #273775 29.808%, #fc5d61 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bh-pay-logos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: 60px;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bh-pay-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 13px;
  background: var(--c-white);
  border: 1px solid var(--c-light-grey);
  border-radius: 8px;
  transition: translate 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.bh-pay-logo:hover {
  translate: 0 -3px;
  border-color: rgba(39, 55, 117, 0.3);
  box-shadow: 0 10px 18px -12px rgba(39, 55, 117, 0.45);
}

.bh-pay-logo img {
  display: block;
  max-width: 100%;
  height: auto;
}

.bh-pay-logo--more {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  color: var(--c-blue);
  white-space: nowrap;
  background: var(--c-bg-blue);
  border-color: var(--c-bg-blue);
}

.bh-pay-status {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 8px 24px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: var(--c-text);
  text-align: center;
  background: var(--c-bg-blue);
  border-radius: 9999px;
}

.bh-pay-status img {
  display: block;
  flex: none;
}

/* ---------- Part 2: banner ---------- */
.bh-pay-banner {
  position: relative;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 40px;
  overflow: hidden;
  background: radial-gradient(75% 110% at 88% 30%, #273775 0%, #142048 50%, #0b1431 75%, #01081a 100%);
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  isolation: isolate;
}

.bh-pay-banner-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.bh-pay-banner-bg img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0.05;
}

.bh-pay-banner-title {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 18.5px;
  align-items: flex-start;
  box-sizing: border-box;
  width: 237px;
  padding-right: 1px;
  border-right: 1px solid rgba(71, 85, 105, 0.5);
}

.bh-pay-banner-title h3 {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 32px;
  line-height: 36px;
  color: var(--c-white);
  text-transform: none;
}

.bh-pay-steps {
  position: relative;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  height: 198.5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bh-pay-step {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 7px;
  align-items: center;
  width: 110px;
  height: 170px;
  color: var(--c-white);
  text-align: center;
}

.bh-pay-step-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--c-white);
  border-radius: 9999px;
  transition: scale 0.3s ease, box-shadow 0.3s ease;
}

.bh-pay-step:hover .bh-pay-step-icon {
  scale: 1.1;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.15);
}

.bh-pay-step-icon img {
  display: block;
  max-width: none;
}

.bh-pay-step strong {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
}

.bh-pay-step > span:last-child {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 10px;
  line-height: 12.5px;
}

/* Dotted arcs between the step icons (Figma lines 122). */
.bh-pay-step-arc {
  position: absolute;
  top: 10px;
  width: 87px;
  height: 9px;
  pointer-events: none;
}

.bh-pay-step-arc img {
  position: absolute;
  top: -5.55%;
  left: -0.76%;
  display: block;
  max-width: none;
}

.bh-pay-banner-end {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  box-sizing: border-box;
  width: 165px;
  padding: 0 24px 0 25px;
  border-left: 1px solid var(--c-white);
}

.bh-pay-banner-end img {
  display: block;
  width: 50px;
  height: 63px;
  max-width: none;
  margin: -2px;
}

.bh-pay-banner-end p {
  width: 142px;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 12px;
  line-height: 16.25px;
  color: var(--c-white);
  text-align: center;
}

/* ---------- Part 3: orbit + trust ---------- */
.bh-pay-bottom {
  display: flex;
  gap: 70px;
  align-items: flex-start;
  padding: 40px 0;
}

.bh-pay-orbit {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 410px;
  height: 300px;
}

.bh-pay-orbit-ring {
  position: absolute;
  top: calc(50% - 0.09px);
  left: 50%;
  box-sizing: border-box;
  width: 220px;
  height: 220px;
  border: 2px dashed var(--c-light-grey);
  border-radius: 110px;
  translate: -50% -50%;
}

.bh-pay-orbit-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 9999px;
}

.bh-pay-orbit-dot--1 { top: 45.91px; left: 149px; background: var(--c-blue); }
.bh-pay-orbit-dot--2 { top: 45.91px; right: 149px; background: #563e85; }
.bh-pay-orbit-dot--3 { bottom: 45.09px; left: 149px; background: var(--c-orange); }
.bh-pay-orbit-dot--4 { bottom: 45.09px; right: 149px; background: #8f4588; }

.bh-pay-orbit-pills {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bh-pay-orbit-pill {
  position: absolute;
  z-index: 1;
  display: flex;
  gap: 8px;
  align-items: center;
  box-sizing: border-box;
  padding: 8px 16px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  background: var(--c-white);
  border-radius: 50px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.bh-pay-orbit-pill-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
}

.bh-pay-orbit-pill-icon img {
  display: block;
  max-width: none;
}

.bh-pay-orbit-pill--commercial { top: 15.91px; left: -30px; width: 160px; color: var(--c-blue); }
.bh-pay-orbit-pill--medicare   { top: 4.98%; right: -36px; width: 164px; color: #563e85; }
.bh-pay-orbit-pill--medicaid   { top: 73.98%; left: -30px; width: 160px; color: var(--c-orange); }
.bh-pay-orbit-pill--specialty  { top: 73.98%; right: -36px; width: 164px; color: #c64d76; }

.bh-pay-orbit-pill--commercial .bh-pay-orbit-pill-icon { background: #dbeafe; }
.bh-pay-orbit-pill--medicare .bh-pay-orbit-pill-icon   { background: rgba(86, 62, 133, 0.1); }
.bh-pay-orbit-pill--medicaid .bh-pay-orbit-pill-icon   { background: #ffedd5; }
.bh-pay-orbit-pill--specialty .bh-pay-orbit-pill-icon  { background: #f3e8ff; }

.bh-pay-orbit-pill--specialty > span:last-child {
  width: 101px;
}

.bh-pay-orbit-center {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 160px;
  height: 160px;
  padding: 20px;
  background: var(--c-white);
  border: 4px solid var(--c-bg-blue);
  border-radius: 9999px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.bh-pay-orbit-center strong {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 18px;
  line-height: 22.5px;
  letter-spacing: -0.9px;
  color: var(--c-blue);
  text-align: center;
  text-transform: uppercase;
}

.bh-pay-trust {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  box-sizing: border-box;
  min-width: 0;
  height: 300px;
  padding: 48px 20px 48px 21px;
  border-left: 1px solid #f1f5f9;
}

.bh-pay-trust h3 {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-blue);
  text-align: center;
  white-space: nowrap;
  text-transform: none;
}

.bh-pay-avatars {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bh-pay-avatars li {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  padding: 13px;
  background: var(--c-white);
  border: 1px solid var(--c-light-grey);
  border-radius: 46px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
  transition: translate 0.3s ease, border-color 0.3s ease;
}

.bh-pay-avatars li:hover {
  translate: 0 -4px;
  border-color: rgba(39, 55, 117, 0.3);
}

.bh-pay-avatars img {
  display: block;
  max-width: none;
}

.bh-pay-trust p {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 14px;
  line-height: 22.75px;
  color: var(--c-text);
  text-align: center;
}

/* ---------- Payer animation ---------- */
/* script-v2.js .is-armed/.is-in: frame fades in, intro rises, logo tiles
   pop in reading order, banner rises with its steps and arcs following,
   then the orbit: ring spins in, pills fly in from their corners and the
   centre counts to 100+. Loops: ring turns, dots pulse, pills bob. */
@keyframes bh-pay-rise {
  from { opacity: 0; translate: 0 26px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-pay-pop {
  0%   { opacity: 0; scale: 0.6; }
  70%  { opacity: 1; scale: 1.06; }
  100% { opacity: 1; scale: 1; }
}

@keyframes bh-pay-grow {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}

@keyframes bh-pay-draw {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes bh-pay-fly {
  from { opacity: 0; translate: var(--fx, 0) var(--fy, 0); }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-pay-spin {
  to { rotate: 360deg; }
}

@keyframes bh-pay-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

@keyframes bh-pay-dot {
  0%, 100% { scale: 1; }
  50%      { scale: 1.45; }
}

@keyframes bh-pay-glow {
  0%, 100% { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(39, 55, 117, 0.25); }
  50%      { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 14px rgba(39, 55, 117, 0); }
}

.bh-pay-orbit-pill--commercial { --fx: -30px; --fy: -20px; }
.bh-pay-orbit-pill--medicare   { --fx: 30px;  --fy: -20px; }
.bh-pay-orbit-pill--medicaid   { --fx: -30px; --fy: 20px; }
.bh-pay-orbit-pill--specialty  { --fx: 30px;  --fy: 20px; }

.bh-pay.is-armed:not(.is-in) :is(
  .bh-pay-intro > *,
  .bh-pay-network-title,
  .bh-pay-logo,
  .bh-pay-status,
  .bh-pay-banner,
  .bh-pay-banner-title > *,
  .bh-pay-step,
  .bh-pay-step-arc,
  .bh-pay-banner-end,
  .bh-pay-orbit-ring,
  .bh-pay-orbit-pill,
  .bh-pay-orbit-center,
  .bh-pay-trust > *,
  .bh-pay-avatars li
) {
  opacity: 0;
}

.bh-pay.is-in .bh-pay-intro > * {
  animation: bh-pay-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-pay.is-in .bh-pay-intro > :nth-child(2) { animation-delay: 0.1s; }
.bh-pay.is-in .bh-pay-intro > .bh-pay-bar   { animation: bh-pay-grow 0.6s 0.25s ease-out backwards; }
.bh-pay.is-in .bh-pay-intro > :nth-child(4) { animation-delay: 0.3s; }

.bh-pay.is-in .bh-pay-network-title {
  animation: bh-pay-rise 0.6s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-pay.is-in .bh-pay-logo {
  animation: bh-pay-pop 0.5s calc(0.3s + var(--i, 0) * 0.05s) cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.bh-pay.is-in .bh-pay-status {
  animation: bh-pay-rise 0.6s 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-pay.is-in .bh-pay-banner {
  animation: bh-pay-rise 0.8s 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-pay.is-in .bh-pay-banner-title > * {
  animation: bh-pay-rise 0.6s 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-pay.is-in .bh-pay-banner-title > .bh-pay-bar {
  animation: bh-pay-grow 0.6s 1s ease-out backwards;
}

.bh-pay.is-in .bh-pay-step {
  animation: bh-pay-rise 0.6s calc(0.9s + var(--i, 0) * 0.15s) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-pay.is-in .bh-pay-step-arc {
  animation: bh-pay-draw 0.5s calc(1s + var(--i, 0) * 0.15s) ease-out backwards;
}

.bh-pay.is-in .bh-pay-banner-end {
  animation: bh-pay-rise 0.6s 1.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-pay.is-in .bh-pay-orbit-ring {
  animation:
    bh-pay-pop 0.9s 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards,
    bh-pay-spin 40s 1.5s linear infinite;
}

.bh-pay.is-in .bh-pay-orbit-center {
  animation:
    bh-pay-pop 0.7s 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
    bh-pay-glow 3s 1.8s ease-out infinite;
}

.bh-pay.is-in .bh-pay-orbit-pill {
  animation:
    bh-pay-fly 0.7s calc(0.9s + var(--i, 0) * 0.12s) cubic-bezier(0.2, 0.7, 0.2, 1) backwards,
    bh-pay-bob 4.5s calc(2s + var(--i, 0) * 0.5s) ease-in-out infinite;
}

.bh-pay-orbit-dot {
  animation: bh-pay-dot 2.4s ease-in-out infinite;
}

.bh-pay-orbit-dot--2 { animation-delay: 0.6s; }
.bh-pay-orbit-dot--4 { animation-delay: 1.2s; }
.bh-pay-orbit-dot--3 { animation-delay: 1.8s; }

.bh-pay.is-in .bh-pay-trust > * {
  animation: bh-pay-rise 0.6s 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-pay.is-in .bh-pay-trust > p { animation-delay: 1.4s; }

.bh-pay.is-in .bh-pay-avatars li {
  animation: bh-pay-pop 0.5s calc(1s + var(--i, 0) * 0.08s) cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

/* Without the script the orbit loops still run. */
.bh-pay:not(.is-armed) .bh-pay-orbit-ring   { animation: bh-pay-spin 40s linear infinite; }
.bh-pay:not(.is-armed) .bh-pay-orbit-pill   { animation: bh-pay-bob 4.5s calc(var(--i, 0) * 0.5s) ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .bh-pay *,
  .bh-pay *::before,
  .bh-pay *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Payer responsive ---------- */
@media (max-width: 1239px) {
  .bh-pay-top,
  .bh-pay-bottom {
    flex-direction: column;
    gap: 32px;
  }

  .bh-pay-intro,
  .bh-pay-intro--sm {
    width: 100%;
    max-width: 640px;
  }

  .bh-pay-network {
    flex: none;
    width: 100%;
  }

  /* Banner: title on top, steps wrap, arcs hidden. */
  .bh-pay-banner {
    flex-direction: column;
    gap: 28px;
  }

  .bh-pay-banner-title {
    width: auto;
    border-right: 0;
  }

  .bh-pay-steps {
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 28px;
    height: auto;
    width: 100%;
  }

  .bh-pay-step {
    height: auto;
    width: 130px;
  }

  .bh-pay-step-arc {
    display: none;
  }

  .bh-pay-banner-end {
    flex-direction: row;
    width: auto;
    padding: 20px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 0;
  }

  .bh-pay-banner-end p {
    width: auto;
    text-align: left;
  }

  .bh-pay-orbit {
    align-self: center;
  }

  .bh-pay-trust {
    width: 100%;
    height: auto;
    padding: 28px 0 0;
    border-top: 1px solid #f1f5f9;
    border-left: 0;
  }
}

@media (max-width: 767px) {
  .bh-pay-frame {
    padding: 16px;
  }

  .bh-pay-title {
    font-size: 26px;
    line-height: 36px;
  }

  .bh-pay-logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bh-pay-banner {
    padding: 28px 20px;
  }

  .bh-pay-banner-title h3 {
    font-size: 26px;
    line-height: 32px;
  }

  .bh-pay-status {
    border-radius: 16px;
  }
}

/* Phones: scale the fixed 410px orbit down; logos go 2 across. */
@media (max-width: 480px) {
  .bh-pay-top,
  .bh-pay-bottom {
    padding: 24px 0;
  }

  .bh-pay-title {
    font-size: 22px;
    line-height: 32px;
  }

  .bh-pay-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bh-pay-steps {
    gap: 20px 12px;
  }

  .bh-pay-step {
    width: calc(50% - 6px);
  }

  .bh-pay-orbit {
    zoom: 0.72;
  }

  .bh-pay-avatars {
    gap: 8px;
  }

  .bh-pay-avatars li {
    width: 46px;
    height: 46px;
    padding: 10px;
  }

  .bh-pay-avatars img {
    width: 24px;
    height: 24px;
  }

  .bh-pay-trust h3 {
    white-space: normal;
  }
}

@media (max-width: 360px) {
  .bh-pay-orbit {
    zoom: 0.64;
  }
}

/* ============================================================= */
/* Book a consultation — Figma 8777:70826                          */
/* Copy column + 540px form card with a navy→orange 5px border.     */
/* ============================================================= */
.bh-consult {
  position: relative;
  padding: 40px 0;
  background: rgba(239, 242, 255, 0.28);
  box-shadow: 0 2.704px 11.561px 0 var(--c-bg-blue), inset 0 0 64px 0 var(--c-bg-blue);
}

.bh-consult .container-page {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.bh-consult-layout {
  display: flex;
  gap: 40px;
  align-items: stretch;
  justify-content: space-between;
}

/* ---------- Copy ---------- */
.bh-consult-copy {
  display: flex;
  flex: 0 1 640px;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
  min-width: 0;
}

.bh-consult-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 12px;
  line-height: 9.976px;
  color: var(--c-blue);
  white-space: nowrap;
  background: rgba(39, 55, 117, 0.1);
  border-radius: 9.069px;
}

.bh-consult-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 0.605px;
}

.bh-consult-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 42px;
  line-height: 50.4px;
  color: var(--c-blue);
  text-transform: none;
}

.bh-consult-lead {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  line-height: 28.8px;
  color: var(--c-text);
}

.bh-consult-pains {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bh-consult-pains li {
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  line-height: 28.8px;
  color: var(--c-text);
}

.bh-consult-pains img {
  display: block;
  flex: none;
  max-width: none;
}

.bh-consult-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 19px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Gradient dashed outline (Figma's dashed border uses the brand gradient). */
.bh-consult-badge {
  display: flex;
  gap: 12px;
  align-items: center;
  box-sizing: border-box;
  width: 197px;
  height: 90px;
  padding: 17px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--c-text);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='197' height='90'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='0.298' stop-color='%23273775'/%3E%3Cstop offset='1' stop-color='%23FC5D61'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0.5' y='0.5' width='196' height='89' rx='11.5' fill='none' stroke='url(%23g)' stroke-dasharray='4 3'/%3E%3C/svg%3E") no-repeat,
    var(--c-white);
  border-radius: 12px;
  transition: translate 0.3s ease, box-shadow 0.3s ease;
}

.bh-consult-badge:hover {
  translate: 0 -3px;
  box-shadow: 0 12px 22px -14px rgba(39, 55, 117, 0.45);
}

/* Figma sets 111px (overhanging the 17px padding); browsers set Poppins a
   touch wider, so allow 116px to keep Figma's three-line wrap. */
.bh-consult-badge > span:last-child {
  flex: none;
  width: 116px;
  margin-right: -12px;
}

.bh-consult-badge-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--c-white);
  border-radius: 9999px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.15));
}

.bh-consult-badge-icon img {
  display: block;
  max-width: none;
}

/* ---------- Form card ---------- */
/* Gradient border via padding-box/border-box backgrounds; the border layer
   is sized 200% so its position can drift (animated below). */
.bh-consult-card {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  box-sizing: border-box;
  width: 540px;
  padding: 30px 40px;
  background:
    linear-gradient(var(--c-white), var(--c-white)) padding-box,
    linear-gradient(90deg, #273775 15%, #fc5d61 50%, #273775 85%) border-box;
  background-size: 100% 100%, 200% 100%;
  background-position: 0 0, 0 0;
  border: 5px solid transparent;
  border-radius: 40px;
}

.bh-consult-card-title {
  margin: 0;
  font-family: "Montserrat", var(--font-primary);
  font-weight: 700;
  font-size: 30px;
  line-height: 34px;
  color: var(--c-blue);
  text-align: center;
  text-transform: none;
}

.bh-consult-card-title .accent {
  color: var(--c-orange);
}

.bh-consult-card-lead {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  line-height: 21.6px;
  color: var(--c-text);
  text-align: center;
}

.bh-consult-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.bh-consult-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 1px;
}

.bh-consult-field {
  display: flex;
  gap: 10px;
  align-items: center;
  box-sizing: border-box;
  height: 50px;
  margin: 0;
  padding: 8px 14px;
  background: var(--c-white);
  border: 1px solid var(--c-light-grey);
  border-radius: 3px;
  cursor: text;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.bh-consult-field:focus-within {
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(39, 55, 117, 0.12);
}

.bh-consult-field.is-invalid {
  border-color: var(--c-orange);
}

.bh-consult-field img {
  display: block;
  flex: none;
  max-width: none;
  margin: 0 2px;
}

.bh-consult-field img[width="11.6668"] {
  margin: 0 2.2px; /* 16px solar:user-linear frame */
}

.bh-consult-field input {
  flex: 1 1 0;
  min-width: 0;
  padding: 1px 0;
  font-family: var(--font-primary) !important;
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
  color: var(--c-text);
  background: transparent;
  border: 0;
  outline: none;
}

.bh-consult-field input::placeholder {
  color: var(--c-placeholder);
}

.bh-consult-submit {
  position: relative;
  height: 50px;
  padding: 15px 21px;
  overflow: hidden;
  font-family: var(--font-primary) !important;
  font-weight: 500;
  font-size: 16px;
  line-height: 12px;
  color: var(--c-white);
  background: var(--c-blue);
  border: 1px solid var(--c-white);
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, translate 0.3s ease, box-shadow 0.3s ease;
}

.bh-consult-submit::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  translate: -120% 0;
  pointer-events: none;
}

.bh-consult-submit:hover {
  background: #1d2a5e;
  translate: 0 -2px;
  box-shadow: 0 12px 22px -12px rgba(39, 55, 117, 0.7);
}

.bh-consult-submit:disabled {
  cursor: not-allowed;
  opacity: 0.8;
}

.bh-consult-response {
  margin: -8px 0 0;
  padding: 10px 14px;
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.5;
  border-radius: 8px;
}

.bh-consult-response.is-success {
  color: #067647;
  background: #ecfdf3;
}

.bh-consult-response.is-error {
  color: #b42318;
  background: #fef3f2;
}

.bh-consult-note {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  line-height: 28.8px;
  color: var(--c-placeholder);
}

.bh-consult-note img {
  display: block;
  flex: none;
  max-width: none;
  margin: 0 2px;
}

/* ---------- Footer strip ---------- */
.bh-consult-foot {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: center;
}

.bh-consult-foot img {
  display: block;
  flex: none;
  width: 227px;
  height: 37px;
}

.bh-consult-foot p {
  margin: 0;
  padding-left: 40px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  line-height: 28.8px;
  color: var(--c-placeholder);
  border-left: 1px solid var(--c-placeholder);
}

/* ---------- Consultation animation ---------- */
/* script-v2.js .is-armed/.is-in: copy rises, pain points tick in, badges
   pop, the form card slides in and its fields drop in one by one. The
   card's gradient border keeps drifting and the submit button shines. */
@keyframes bh-consult-rise {
  from { opacity: 0; translate: 0 26px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-consult-left {
  from { opacity: 0; translate: -24px 0; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-consult-right {
  from { opacity: 0; translate: 48px 0; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-consult-pop {
  0%   { opacity: 0; scale: 0.7; }
  70%  { opacity: 1; scale: 1.05; }
  100% { opacity: 1; scale: 1; }
}

@keyframes bh-consult-border {
  0%, 100% { background-position: 0 0, 0 0; }
  50%      { background-position: 0 0, 100% 0; }
}

@keyframes bh-consult-shine {
  0%, 72% { translate: -120% 0; }
  100%    { translate: 420% 0; }
}

.bh-consult.is-armed:not(.is-in) :is(
  .bh-consult-pill,
  .bh-consult-head > *,
  .bh-consult-pains li,
  .bh-consult-badge,
  .bh-consult-card,
  .bh-consult-field,
  .bh-consult-submit,
  .bh-consult-foot
) {
  opacity: 0;
}

.bh-consult.is-in .bh-consult-pill,
.bh-consult.is-in .bh-consult-head > * {
  animation: bh-consult-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-consult.is-in .bh-consult-head > :nth-child(1) { animation-delay: 0.1s; }
.bh-consult.is-in .bh-consult-head > :nth-child(2) { animation-delay: 0.2s; }

.bh-consult.is-in .bh-consult-pains li {
  animation: bh-consult-left 0.5s calc(0.35s + var(--i, 0) * 0.08s) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-consult.is-in .bh-consult-badge {
  animation: bh-consult-pop 0.55s calc(0.8s + var(--i, 0) * 0.1s) cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.bh-consult.is-in .bh-consult-card {
  animation:
    bh-consult-right 0.8s 0.25s cubic-bezier(0.2, 0.7, 0.2, 1) backwards,
    bh-consult-border 8s 1.2s ease-in-out infinite;
}

.bh-consult:not(.is-armed) .bh-consult-card {
  animation: bh-consult-border 8s ease-in-out infinite;
}

.bh-consult.is-in .bh-consult-field {
  animation: bh-consult-rise 0.5s calc(0.55s + var(--i, 0) * 0.08s) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-consult.is-in .bh-consult-submit {
  animation: bh-consult-rise 0.5s 1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-consult-submit::after {
  animation: bh-consult-shine 5s 2.5s ease-in-out infinite;
}

.bh-consult.is-in .bh-consult-foot {
  animation: bh-consult-rise 0.7s 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

@media (prefers-reduced-motion: reduce) {
  .bh-consult *,
  .bh-consult *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Consultation responsive ---------- */
@media (max-width: 1199px) {
  .bh-consult-layout {
    flex-direction: column;
    align-items: center;
  }

  .bh-consult-copy {
    flex: none;
    width: 100%;
  }

  .bh-consult-card {
    width: 100%;
    max-width: 540px;
  }
}

@media (max-width: 767px) {
  .bh-consult-title {
    font-size: 30px;
    line-height: 38px;
  }

  .bh-consult-badges {
    justify-content: center;
    align-self: stretch;
  }

  .bh-consult-foot {
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }

  .bh-consult-foot p {
    padding: 14px 0 0;
    border-top: 1px solid var(--c-placeholder);
    border-left: 0;
  }
}

@media (max-width: 480px) {
  .bh-consult-title {
    font-size: 26px;
    line-height: 34px;
  }

  .bh-consult-pill {
    white-space: normal;
    line-height: 16px;
  }

  .bh-consult-card {
    padding: 26px 18px;
    border-radius: 28px;
  }

  .bh-consult-card-title {
    font-size: 26px;
    line-height: 32px;
  }

  .bh-consult-note {
    font-size: 13px;
    line-height: 20px;
  }
}

/* ============================================================= */
/* FAQs — Figma 8777:70985 (518px intro | 660px accordion)          */
/* ============================================================= */
.bh-faq {
  padding: 40px 0;
  background: var(--c-white);
}

.bh-faq-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  justify-content: space-between;
}

/* ---------- Intro ---------- */
.bh-faq-intro {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  width: 518px;
}

.bh-faq-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}

.bh-faq-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 12px;
  line-height: 9.976px;
  color: var(--c-blue);
  white-space: nowrap;
  background: rgba(39, 55, 117, 0.1);
  border-radius: 9.069px;
}

.bh-faq-title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 35px;
  line-height: 48px;
  color: var(--c-blue);
  text-transform: none;
}

.bh-faq-title .accent {
  color: var(--c-orange);
}

.bh-faq-lead {
  max-width: 512px;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  line-height: 29.25px;
  color: var(--c-text);
}

.bh-faq-art {
  display: block;
  width: 518px;
  max-width: 100%;
  height: auto;
}

.bh-faq-pills {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bh-faq-pill-item {
  display: flex;
  gap: 12px;
  align-items: center;
  box-sizing: border-box;
  width: 321px;
  height: 50px;
  padding: 16px 20px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-blue);
  white-space: nowrap;
  background: var(--c-bg-blue);
  border-radius: 5px;
  transition: translate 0.3s ease, box-shadow 0.3s ease;
}

.bh-faq-pill-item:last-child {
  width: 320px;
}

.bh-faq-pill-item:hover {
  translate: 4px 0;
  box-shadow: 0 10px 18px -12px rgba(39, 55, 117, 0.45);
}

.bh-faq-pill-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--c-white);
  border-radius: 9999px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.bh-faq-pill-icon img {
  display: block;
  max-width: none;
}

.bh-faq-note {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding-left: 24px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: var(--c-text);
  border-left: 4px solid var(--c-orange);
}

/* ---------- Accordion ---------- */
.bh-faq-list {
  display: flex;
  flex: 0 1 660px;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 1px;
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.bh-faq-item {
  border-bottom: 1px solid var(--c-bg-blue);
}

.bh-faq-item:last-child {
  border-bottom: 0;
}

.bh-faq-q {
  margin: 0;
}

.bh-faq-q button {
  display: flex;
  gap: 24px;
  align-items: center;
  width: 100%;
  min-height: 55px;
  padding: 8px 20px;
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.bh-faq-q button:focus-visible {
  outline: 2px solid var(--c-blue) !important;
  outline-offset: -2px;
}

.bh-faq-num {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--c-blue);
  background: var(--c-bg-blue);
  border-radius: 40px;
  transition: background-color 0.3s ease, color 0.3s ease, scale 0.3s ease;
}

.bh-faq-q-text {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-text);
  transition: color 0.3s ease;
}

.bh-faq-chevron {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  max-width: none;
  transition: rotate 0.35s ease;
}

.bh-faq-q button:hover .bh-faq-num {
  scale: 1.08;
}

.bh-faq-q button:hover .bh-faq-q-text {
  color: var(--c-blue);
}

.bh-faq-item.is-open .bh-faq-num {
  color: var(--c-orange);
  background: rgba(252, 93, 97, 0.1);
}

.bh-faq-item.is-open .bh-faq-q-text {
  font-weight: 700;
  color: var(--c-text);
}

.bh-faq-item.is-open .bh-faq-chevron {
  rotate: 180deg;
}

/* Height animates via grid rows (0fr -> 1fr). */
.bh-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  background: #ffefef;
  transition: grid-template-rows 0.4s ease;
}

.bh-faq-item.is-open .bh-faq-a {
  grid-template-rows: 1fr;
}

.bh-faq-a-inner {
  min-height: 0;
  overflow: hidden;
}

.bh-faq-a-inner p {
  margin: 32px;
  padding-left: 20px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  line-height: 22.75px;
  color: var(--c-text);
  border-left: 3px solid var(--c-orange);
  opacity: 0;
  translate: 0 -6px;
  transition: opacity 0.3s ease, translate 0.3s ease;
}

.bh-faq-item.is-open .bh-faq-a-inner p {
  opacity: 1;
  translate: 0 0;
  transition-delay: 0.12s;
}

/* ---------- FAQ animation ---------- */
/* script-v2.js .is-armed/.is-in: heading rises, the illustration pops in
   and then floats, pills slide in, the note's rule grows, and the
   accordion rows cascade in. */
@keyframes bh-faq-rise {
  from { opacity: 0; translate: 0 24px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-faq-pop {
  from { opacity: 0; scale: 0.9; }
  to   { opacity: 1; scale: 1; }
}

@keyframes bh-faq-left {
  from { opacity: 0; translate: -30px 0; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes bh-faq-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }
}

.bh-faq.is-armed:not(.is-in) :is(.bh-faq-head > *, .bh-faq-art, .bh-faq-pill-item, .bh-faq-note, .bh-faq-list, .bh-faq-item) {
  opacity: 0;
}

.bh-faq.is-in .bh-faq-head > * {
  animation: bh-faq-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-faq.is-in .bh-faq-head > :nth-child(2) { animation-delay: 0.1s; }
.bh-faq.is-in .bh-faq-head > :nth-child(3) { animation-delay: 0.2s; }

.bh-faq.is-in .bh-faq-art {
  animation:
    bh-faq-pop 0.9s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) backwards,
    bh-faq-float 6s 1.3s ease-in-out infinite;
}

.bh-faq:not(.is-armed) .bh-faq-art {
  animation: bh-faq-float 6s ease-in-out infinite;
}

.bh-faq.is-in .bh-faq-pill-item {
  animation: bh-faq-left 0.6s calc(0.6s + var(--i, 0) * 0.1s) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-faq.is-in .bh-faq-note {
  animation: bh-faq-rise 0.6s 0.95s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-faq.is-in .bh-faq-list {
  animation: bh-faq-rise 0.7s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.bh-faq.is-in .bh-faq-item {
  animation: bh-faq-rise 0.5s calc(0.35s + var(--i, 0) * 0.08s) cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

@media (prefers-reduced-motion: reduce) {
  .bh-faq *,
  .bh-faq *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- FAQ responsive ---------- */
@media (max-width: 1199px) {
  .bh-faq-layout {
    flex-direction: column;
    align-items: stretch;
  }

  .bh-faq-intro {
    width: 100%;
  }

  .bh-faq-list {
    flex: none;
  }
}

@media (max-width: 767px) {
  .bh-faq-title {
    font-size: 28px;
    line-height: 38px;
  }

  .bh-faq-a-inner p {
    margin: 22px 20px;
    padding-left: 16px;
  }

  .bh-faq-q button {
    gap: 16px;
    padding: 10px 16px;
  }
}

@media (max-width: 480px) {
  .bh-faq-title {
    font-size: 24px;
    line-height: 32px;
  }

  .bh-faq-pills {
    width: 100%;
  }

  .bh-faq-pill-item,
  .bh-faq-pill-item:last-child {
    width: 100%;
  }

  .bh-faq-q-text {
    font-size: 15px;
    line-height: 22px;
  }
}

/* ============================================================= */
/* In-copy links to other pages: brand orange with an underline,  */
/* blue on hover. The underline is a border because style-v2.css  */
/* forces a { text-decoration: none !important }.                 */
/* ============================================================= */
.bh-inline-link {
  color: var(--c-orange);
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  transition: color 0.2s ease;
}

.bh-inline-link:hover,
.bh-inline-link:focus-visible {
  color: var(--c-blue);
}