/* ============================================================
   bh-custom.css  �  Blackhawk theme Blazor overrides
   Keep vendor style.css untouched; put all runtime fixes here.
   ============================================================ */

/* ?? Contact info cards ????????????????????????????????????????????????????? */
.bh-contact-info-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 24px 28px;
    height: 100%;
}
.bh-contact-info-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--bh-accent, #ff4d24);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
    color: #fff;
}
.bh-contact-info-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    margin-bottom: 4px;
}
.bh-contact-info-value {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    word-break: break-word;
}
.bh-contact-info-value:hover { color: var(--bh-accent, #ff4d24); }

/* ?? Careers page ??????????????????????????????????????????????????????????? */
.bh-career-details { display: flex; flex-direction: column; gap: 32px; }
.bh-career-detail-block {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 28px 32px;
}
.bh-career-detail-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--bh-accent, #ff4d24);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.bh-career-detail-body {
    color: rgba(255,255,255,0.75);
    font-size: 15px;
    line-height: 1.8;
}
.bh-career-detail-body p { margin-bottom: 10px; }
.bh-career-detail-body p:last-child { margin-bottom: 0; }
/* Plain-text career post formatter (CareerTextFormatter) — subheadings + bullet lists so an
   Indeed-style paste (short header lines, blank-line paragraphs, "-"/"•" requirement lines) reads
   as structured copy instead of one unbroken blob. */
.bh-career-detail-body .career-subhead {
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.3px;
    margin-top: 18px;
    margin-bottom: 8px;
}
.bh-career-detail-body .career-subhead:first-child { margin-top: 0; }
.bh-career-detail-body .career-list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}
.bh-career-detail-body .career-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 6px;
}
.bh-career-detail-body .career-list li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bh-accent, #ff4d24);
}
.bh-file-upload-wrap { display: block; }
.bh-file-input { display: none !important; }
.bh-file-upload-label {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 20px;
    border: 1px dashed rgba(255,255,255,0.25);
    border-radius: 4px;
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.3s, color 0.3s, background 0.3s;
    background: rgba(255,255,255,0.02);
    margin-bottom: 0;
}
.bh-file-upload-label i {
    font-size: 16px;
    color: var(--bh-accent, #ff4d24);
    flex-shrink: 0;
}
.bh-file-upload-label:hover {
    border-color: var(--bh-accent, #ff4d24);
    color: #fff;
    background: rgba(255,255,255,0.04);
}
.bh-file-upload-label.bh-file-selected {
    border-color: rgba(156,206,90,0.6);
    color: #9CCE5A;
}
.bh-file-upload-label.bh-file-selected i { color: #9CCE5A; }
.bh-career-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.bh-career-card .te-info-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.bh-career-card .te-content-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.bh-career-card-icon {
    font-size: 32px;
    color: var(--bh-accent, #ff4d24);
    margin-bottom: 16px;
}

/* Whole-card link (Careers list) — same idiom as .bh-related-card (RespondToLeadView): the entire
   card is a single <a>, no nested "VIEW POSITION" link, hover lift + accent title reads as an
   obvious clickable job post instead of a static text block. Pure CSS transitions only (Blackhawk
   does not use GSAP). */
.bh-job-card {
    text-decoration: none;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 6px 18px rgba(0,0,0,.10);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.bh-job-card:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,0.08);
    border-color: var(--bh-accent, #ff4d24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 30px rgba(0,0,0,0.28);
}
.bh-job-card:hover .te-title-wrapper .title {
    color: var(--bh-accent, #ff4d24);
}
.bh-job-card:hover .bh-career-card-icon {
    color: #fff;
}
.bh-job-card:focus-visible {
    outline: 3px solid var(--bh-accent, #ff4d24);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .bh-job-card { transition: none; }
    .bh-job-card:hover { transform: none; }
}
.bh-job-card-date {
    display: block;
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    margin-bottom: 10px;
}
/* Rate chip: accent lives in the tint + border (non-text), text is near-white for AA on the
   dark card. Was hardcoded orange rgba (two-layer violation + mismatched the accent var); now
   driven by --bh-accent via color-mix, with an rgba fallback for engines without color-mix. */
.bh-job-card-rate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-bottom: 14px;
    padding: 5px 12px;
    border-radius: 4px;
    font-family: "Rajdhani", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.92);
    background: rgba(255,255,255,0.08);
    background: color-mix(in srgb, var(--bh-accent, #ff4d24) 15%, transparent);
    border: 1px solid rgba(255,255,255,0.22);
    border: 1px solid color-mix(in srgb, var(--bh-accent, #ff4d24) 45%, transparent);
}
.bh-job-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 3px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    border-bottom: 2px solid rgba(255,255,255,0.28);
    border-bottom-color: color-mix(in srgb, var(--bh-accent, #ff4d24) 60%, transparent);
    transition: gap .3s ease, color .3s ease, border-bottom-color .3s ease;
}
.bh-job-card:hover .bh-job-card-cta {
    gap: 12px;
    color: var(--bh-accent, #ff4d24);
    border-bottom-color: var(--bh-accent, #ff4d24);
}
.bh-careers-empty {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.bh-careers-empty-icon {
    font-size: 52px;
    color: var(--bh-accent, #ff4d24);
    margin-bottom: 24px;
    opacity: 0.7;
}
.bh-careers-empty h4 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}
.bh-careers-empty p {
    color: rgba(255,255,255,0.80);
    font-size: 15px;
    line-height: 1.75;
}

/* ?? Privacy Policy content ???????????????????????????????????????????????? */
.bh-privacy-content {
    color: rgba(255,255,255,0.75);
    line-height: 1.85;
    font-size: 15px;
}
.bh-privacy-intro {
    font-size: 16px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 32px;
    border-left: 3px solid var(--bh-accent, #ff4d24);
    padding-left: 18px;
}
.bh-privacy-section-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-top: 36px;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}
.bh-privacy-content p {
    margin-bottom: 16px;
}

/* Site details � full-width video */
.bh-site-video-wrap {
    position: relative;
    width: 100%;
    margin: 0 0 0;
    line-height: 0;
}
.bh-site-header-area {
    padding-top: 60px;
}
.bh-site-video-el {
    width: 100%;
    max-height: 75vh;
    object-fit: contain;
    background: #000;
    display: block;
}
.bh-site-video-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

/* ?? Clinic contact info card ??????????????????????????????????????????????? */
.bh-site-contact-card {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 28px 32px;
    margin-top: 32px;
}
.bh-site-contact-item {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 220px;
}
.bh-site-contact-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bh-accent, #ff4d24);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
    color: #fff;
}
.bh-site-contact-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bh-site-contact-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
}
.bh-site-contact-value {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
}
.bh-site-contact-value:hover {
    color: var(--bh-accent, #ff4d24);
}

/* ?? Clinic gallery card � hover overlay ????????????????????????????????????? */
.bh-gallery-card .image {
    position: relative;
    overflow: hidden;
}
.bh-gallery-card .image img {
    transition: transform 0.45s ease;
}
.bh-gallery-card .image:hover img {
    transform: scale(1.06);
}
.bh-gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-size: 28px;
    color: #fff;
}
.bh-gallery-card .image:hover .bh-gallery-overlay {
    opacity: 1;
}

/* ?? Magnific gallery overrides � BH dark skin ?????????????????????????????????? */
.bh-gallery-mfp .mfp-image-holder .mfp-close,
.bh-gallery-mfp .mfp-arrow {
    color: #fff;
}
.bh-gallery-mfp .mfp-counter {
    color: rgba(255,255,255,0.6);
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
}

/* ?? Bootstrap datepicker � BH dark theme skin ????????????????????????????? */
.datepicker {
    background: #1a1e2e !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 4px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
    padding: 8px !important;
    font-family: "Rajdhani", sans-serif !important;
    z-index: 9999 !important;
}

/* Header row: prev / month+year title / next */
.datepicker table tr th {
    color: rgba(255,255,255,0.55) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    background: transparent !important;
    border: none !important;
    padding: 6px 4px !important;
}
.datepicker table tr th.datepicker-switch {
    color: #ffffff !important;
    font-size: 13px !important;
    letter-spacing: 1.5px !important;
}
.datepicker table tr th.prev,
.datepicker table tr th.next {
    color: var(--bh-accent, #ff4d24) !important;
    font-size: 16px !important;
}
.datepicker table tr th.prev:hover,
.datepicker table tr th.next:hover,
.datepicker table tr th.datepicker-switch:hover {
    background: rgba(255,255,255,0.06) !important;
    color: #ffffff !important;
    border-radius: 3px !important;
}

/* Day cells */
.datepicker table tr td {
    background: transparent !important;
    color: rgba(255,255,255,0.75) !important;
    border: none !important;
    border-radius: 3px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 5px !important;
    transition: background 0.15s, color 0.15s !important;
}
.datepicker table tr td:hover,
.datepicker table tr td.focused {
    background: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
    cursor: pointer !important;
}

/* Today highlight */
.datepicker table tr td.today,
.datepicker table tr td.today:hover {
    background: rgba(156,206,90,0.15) !important;
    color: #9CCE5A !important;
    font-weight: 700 !important;
}

/* Selected date */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.highlighted {
    background: var(--bh-accent, #ff4d24) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

/* Disabled / out-of-range */
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover,
.datepicker table tr td.old,
.datepicker table tr td.new {
    color: rgba(255,255,255,0.2) !important;
    background: transparent !important;
    cursor: default !important;
}

/* Month / year picker spans */
.datepicker table tr td span {
    background: transparent !important;
    color: rgba(255,255,255,0.75) !important;
    border-radius: 3px !important;
}
.datepicker table tr td span:hover,
.datepicker table tr td span.focused {
    background: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
    background: var(--bh-accent, #ff4d24) !important;
    color: #ffffff !important;
    text-shadow: none !important;
}
.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
    color: rgba(255,255,255,0.2) !important;
    background: transparent !important;
}

/* Dropdown arrow tip */
.datepicker.dropdown-menu { background: #1a1e2e !important; }
.datepicker:before,
.datepicker:after { border-bottom-color: rgba(255,255,255,0.1) !important; }

/* ?? Widen Bootstrap container for large screens ????????????? */
@media (min-width: 1200px) {
    .container { max-width: 1280px; }
}
@media (min-width: 1400px) {
    .container { max-width: 1480px; }
}
@media (min-width: 1600px) {
    .container { max-width: 1560px; }
}

/* ?? Sticky footer � body flex column, page content grows to fill viewport ?? */
html, body {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.bh-page-section {
    flex: 1 0 auto;
}
footer.footer {
    flex-shrink: 0;
}

/* ?? Inner page sections (no hero banner) ???????????????????? */
.bh-page-section {
    padding-top: 120px;
    padding-bottom: 80px;
}

@media (max-width: 767px) {
    .bh-page-section {
        padding-top: 90px;
        padding-bottom: 40px;
    }

    .bh-page-section > .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ?? Study details ???????????????????????????????????????????? */

/* ?? Hero header ????????????????????????????????????????????? */
.bh-study-hero {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.bh-study-hero-title {
    font-size: 52px;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
}
@media (max-width: 991px) { .bh-study-hero-title { font-size: 38px; } }
@media (max-width: 767px) { .bh-study-hero-title { font-size: 28px; } }

.bh-study-hero-desc {
    font-size: 16px;
    line-height: 1.75;
    color: rgba(255,255,255,0.75);
    max-width: 780px;
    margin: 0;
}

/* ?? Badge pills ????????????????????????????????????????????? */
.bh-study-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.bh-study-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 5px 14px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 3px;
    color: rgba(255,255,255,0.85);
}

.bh-study-badge.recruiting   { color: #9CCE5A; border-color: #9CCE5A; }
.bh-study-badge.coming-soon  { color: #ff4d24; border-color: #ff4d24; }
.bh-study-badge.closed       { color: rgba(255,255,255,0.35); border-color: rgba(255,255,255,0.2); }
.bh-study-badge.compensation { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.35); }

/* ?? Section divider ????????????????????????????????????????? */
.bh-study-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin: 60px 0;
}

/* ?? Form + FAQ panels � use te-info-card style-2 as base ???? */
/* ⭐ 2026-10-03 (Marcos: "too much left/right padding", inputs were ~238px wide at 390px): the vendor .te-info-card ALREADY pads 40px, and this
   inner padding stacked on top of it (40 + 16 = 56px a side on a phone, 76px on desktop). The card now owns ONE padding: 32px on desktop,
   24px 16px at <=576px - and the page gutter around it is 16px (below). Same for the FAQ / conversation cards that share the class. */
.bh-study-panel.te-info-card { padding: 0; }
.bh-study-panel .te-info-card-inner {
    padding: 32px;
}
@media (max-width: 576px) {
    .bh-study-panel .te-info-card-inner { padding: 24px 16px; }
    .bh-page-section:has(.bh-study-panel) > .container { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 767px) {
    /* tighten the row gap between the two stacked panels */
    .bh-study-panel-row {
        --bs-gutter-y: 12px;
    }
}

.bh-panel-title {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 8px;
    line-height: 1.2;
}

.bh-panel-desc {
    font-size: 14px;
    color: rgba(255,255,255,0.65);
    margin: 0 0 28px;
    line-height: 1.7;
}

/* ?? 3D flip form � base rules (Zonar only � must be ported for BH) ?? */
/* These classes only exist in zonar/css/style.css; BH style.css has none.
   Scoped under .bh-form-wrap so they never leak to other BH components.  */

.bh-form-wrap .content-inner {
    position: relative;
    width: 100%;
    color: #fff;
    perspective: 1000px;
    backface-visibility: hidden;
    transition: .9s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 2;
}

.bh-form-wrap .content-inner > * {
    backface-visibility: hidden;
    transition: .9s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Flip trigger */
.bh-form-wrap .content-inner.vis-con-form .content-front {
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
}
.bh-form-wrap .content-inner.vis-con-form .content-back {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
}

/* Front face � natural flow, drives the card height */
.bh-form-wrap .content-inner .content-front,
.bh-form-wrap .content-inner .content-back {
    width: 100%;
    backface-visibility: hidden;
    background: transparent;
    padding: 0;
}

.bh-form-wrap .content-front {
    position: relative;
    z-index: 1;
}
.bh-form-wrap .content-front::before { display: none; } /* remove Zonar sidebar strip */

/* Back face � overlays front, hidden until flip */
.bh-form-wrap .content-inner .content-back {
    position: absolute;
    left: 0;
    top: 0;
    height: auto;
    min-height: 100%;
    z-index: 2;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    overflow: visible;
    background: transparent;
}
.bh-form-wrap .content-back.no-push {
    position: absolute;
}

/* Clip the back form inside the card boundary.
   .te-info-card is outside the 3D transform chain so overflow:hidden works here. */
.bh-form-wrap .te-info-card {
    overflow: hidden;
}

/* cf-inner � the form row wrapper */
.bh-form-wrap .cf-inner {
    display: block;
    float: left;
    width: 100%;
}

/* ?? 3D flip form � re-anchor from Zonar absolute to BH column ?? */
/* The form component uses .study-apply-wrapper.content-inner which
   Zonar positions absolutely within its full-page layout.
   Inside a BH card column we need it in normal flow.              */
.bh-form-wrap .study-apply-wrapper.content-inner {
    position: relative !important;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    min-height: 0 !important;
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* Front face � natural flow, drives wrapper height */
.bh-form-wrap .study-apply-wrapper .content-front {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: .9s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.bh-form-wrap .study-apply-wrapper .content-front::before {
    display: none !important;
}

/* Back face � position:absolute, overlays the front when flipped.
   The wrapper grows via JS min-height after the flip completes.
   no-push keeps it hidden and out of flow until flipped. */
.bh-form-wrap .study-apply-wrapper .content-back {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: .9s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 2;
}
.bh-form-wrap .study-apply-wrapper .content-back.no-push {
    visibility: hidden;
    pointer-events: none;
}

/* Flip trigger */
.bh-form-wrap .study-apply-wrapper.vis-con-form .content-front {
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
}
.bh-form-wrap .study-apply-wrapper.vis-con-form .content-back {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
}

/* ?? BH donation-page form skin ??????????????????????????????? */
/* All inputs/selects in both front and back forms               */
.bh-form-wrap input,
.bh-form-wrap select,
.bh-form-wrap textarea {
    width: 100%;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 0 !important;           /* BH donation style: sharp corners */
    color: #fff !important;
    padding: 14px 16px !important;
    margin-bottom: 16px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
    -webkit-appearance: none;
    appearance: none;
}

.bh-form-wrap input::placeholder,
.bh-form-wrap textarea::placeholder {
    color: rgba(255,255,255,0.38) !important;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bh-form-wrap input:focus,
.bh-form-wrap select:focus,
.bh-form-wrap textarea:focus {
    background: rgba(255,255,255,0.08) !important;
    border-color: #FF4D24 !important;
    box-shadow: none !important;
}

/* Row spacing between input pairs */
.bh-form-wrap .row { margin-bottom: 0; }

/* -- DOB calendar-picker trigger button (ADA review 2026-07-04) -- same rationale as Zonar
   (see zonar-custom.css): #dob-input is readonly but focus-opens bootstrap-datepicker by
   default — this button is the visible, keyboard-operable discoverability affordance. */
.bh-form-wrap .tc-dob-wrap {
    position: relative;
}
.bh-form-wrap .tc-dob-wrap input#dob-input {
    padding-right: 46px !important;
}
.bh-form-wrap .tc-dob-trigger {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-size: 15px;
    cursor: pointer;
    z-index: 2;
    transition: color 0.2s;
}
.bh-form-wrap .tc-dob-trigger:hover,
.bh-form-wrap .tc-dob-trigger:focus-visible {
    color: #FF4D24;
}
.bh-form-wrap .tc-dob-trigger:focus-visible {
    outline: 2px solid #FF4D24;
    outline-offset: 2px;
}

/* Close (X) on the screening flip — real <button>, UA chrome reset elsewhere, so restore a visible keyboard focus ring (WCAG 2.4.7). */
.bh-form-wrap .close-contact_form:focus-visible {
    outline: 2px solid #FF4D24;
    outline-offset: 2px;
}

/* Pre-submit "Apply Now" button � full width, BH red */
.bh-form-wrap .pre-submit-btn {
    width: 100% !important;
    background: #FF4D24 !important;
    border: none !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 16px 24px !important;
    margin-top: 8px !important;
    cursor: pointer;
    transition: background 0.2s;
    display: block;
}
.bh-form-wrap .pre-submit-btn:hover { background: #e03a12 !important; }
.bh-form-wrap .pre-submit-btn span  { pointer-events: none; }

/* Submit Application button � same treatment */
.bh-form-wrap .submit-btn {
    width: 100% !important;
    background: #FF4D24 !important;
    border: none !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 16px 24px !important;
    margin-top: 8px !important;
    cursor: pointer;
    transition: background 0.2s;
    display: block;
}
.bh-form-wrap .submit-btn:hover { background: #e03a12 !important; }

/* Screening question inner wrapper */
.bh-form-wrap .screening-form-inner {
    position: relative;
    width: 100%;
}
.bh-form-wrap .question-form {
    position: relative !important;
}
.bh-form-wrap .question-form .question-group p {
    color: rgba(255,255,255,0.78);
    font-size: 14px;
    margin-bottom: 8px;
    line-height: 1.6;
}

/* Hide utility � used by Blazor to toggle questions vs confirmation */
.bh-form-wrap .hidden {
    display: none !important;
}

/* Select dropdown arrow colour fix */
.bh-form-wrap select option { background: #1a1a1a; color: #fff; }

/* Close (�) button */
.bh-form-wrap .content-back .close-contact_form {
    position: absolute;
    top: -150px;
    right: 0;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    font-size: 16px;
    cursor: pointer;
    z-index: 20;
    transition: background 0.2s, color 0.2s;
    visibility: hidden;
    pointer-events: none;
}
.bh-form-wrap .study-apply-wrapper.vis-con-form .close-contact_form {
    visibility: visible;
    pointer-events: auto;
}
.bh-form-wrap .content-back .close-contact_form:hover {
    background: #FF4D24;
    color: #fff;
}
/* ⭐ 2026-10-03 LANDING: "THANK YOU / Your application is in" is part of the same centred stack as the card below it, and the "Apply" eyebrow that
   sat above it (it labels the FORM) is gone once the form is. Only the lines inside the card's content wrapper change; the email note keeps its own alignment. */
.te-content-wrapper:has(.confirmation-wrapper:not(.hidden)) > .short-title-wrapper { display: none; }
.te-content-wrapper:has(.confirmation-wrapper:not(.hidden)) > :is(.bh-panel-title, .bh-panel-desc) { text-align: center; }
/* Hide X when confirmation screen is active */
.bh-form-wrap .screening-form-inner:has(.confirmation-wrapper:not(.hidden)) ~ .close-contact_form,
.bh-form-wrap .close-contact_form:has(~ .screening-form-inner .confirmation-wrapper:not(.hidden)) {
    display: none;
}

/* Confirmation / success screen */
.bh-form-wrap .confirmation-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
}
.bh-form-wrap .confirmation-wrapper .icon-ok {
    font-size: 72px;
    margin-bottom: 24px;
    display: block;
}
.bh-form-wrap .confirmation-wrapper .icon-ok::before { color: #9CCE5A; }
.bh-form-wrap .application-confirmation {
    color: rgba(255,255,255,0.9);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1.5px;
    line-height: 1.6;
    text-transform: uppercase;
    max-width: 380px;
}

/* ValidationSummary / ValidationMessage */
.bh-form-wrap .validation-message,
.bh-form-wrap .validation-errors {
    color: #f28b82;
    font-size: 12px;
    margin-top: -10px;
    margin-bottom: 8px;
}

/* jQuery Validate label.error � both forms */
.bh-form-wrap label.error {
    color: #f28b82;
    font-size: 12px;
    display: block;
    margin-top: 2px;
    margin-bottom: 10px;
}
.bh-form-wrap input[type=text] ~ label.error {
    margin-top: -12px;
}

/* ?? Benefits subtitle fix � remove orphaned link colour ??????? */
.bh-benefits-subtitle {
    color: rgba(255,255,255,0.65) !important;
    font-size: 15px;
    margin-top: 8px;
    margin-bottom: 0;
}

/* ?? Benefits grid � uses te-info-card style-2 natively ??????? */
.te-info-card.style-2 .te-content-wrapper .title {
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.te-info-card.style-2 .te-content-wrapper .desc {
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    line-height: 1.75;
}

/* Remove dead bh-benefits-list / bh-benefit-* rules */
.bh-benefits-list  { display: none; }  /* superseded by card grid */

/* ?? Hero video background ?????????????????????????????????? */

/* Hero height = native 16:9 ratio of full viewport width, capped at 55vh.
   Because the container IS 16:9, the video fills it exactly � no cropping,
   no black bars, no zoom. */
.slider-area {
    overflow: unset;
}

.slider-area.style-1 {
    height: min(56.25vw, 68vh);
    overflow: clip;
}

.slider-area .te-video-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.slider-area .te-video-bg video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    will-change: transform;
}

/* Dark overlay � anchored to the video wrapper, not to any slide */
.slider-area .te-video-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

/* Neutralize the old free-standing overlay divs � overlay is now on te-video-bg::after */
.slider-area > .te-slider-overlay,
.slider-area .te-single-slider .te-slider-overlay {
    display: none;
}

/* Slides fill the slider-area height exactly */
.slider-area .te-single-slider {
    min-height: 100%;
    height: 100%;
}

/* Hero text � roughly 1/4 down the hero */
.slider-area .te-single-slider .te-slider-container {
    padding-top: clamp(100px, 22vh, 180px);
    padding-bottom: 30px;
    align-items: flex-start;
}
@media only screen and (max-width: 991px) {
    .slider-area .te-single-slider .te-slider-container {
        padding-top: clamp(80px, 18vh, 150px);
        padding-bottom: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .slider-area.style-1 {
        height: auto;
    }

    .slider-area .te-single-slider .te-slider-container {
        padding-top: clamp(60px, 12vh, 100px);
        padding-bottom: 40px;
    }
}

/* Slider wrapper and its children sit above video + overlay.
   Slick's internal divs must also propagate the fixed height. */
.slider-area .te-slider-wrapper,
.slider-area .te-slider-wrapper .slick-list,
.slider-area .te-slider-wrapper .slick-track,
.slider-area .te-slider-wrapper .slick-slide,
.slider-area .te-slider-wrapper .slick-slide > div {
    position: relative;
    height: 100%;
    z-index: 2;
}

/* ?? Sidebar flex layout � contact block pinned to bottom ?????? */
.te-menu-sidebar-area .te-menu-sidebar-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
}

.te-menu-sidebar-area .bh-sidebar-flex {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.te-menu-sidebar-area .bh-sidebar-bottom {
    margin-top: auto;
    padding-top: 0;
}

.bh-sidebar-divider {
    border: none;
    border-top: 2px solid var(--bh-accent, #ff4d24);
    margin: 20px 0 0 0;
    opacity: 1;
}

/* ?? Sidebar footer ?????????????????????????????????????? */
.bh-sidebar-footer {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.bh-sidebar-footer p {
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
    font-family: "Rajdhani", sans-serif;
}

.bh-sidebar-footer a {
    color: var(--bh-accent, #ff4d24);
    text-decoration: none;
    font-weight: 600;
}

.bh-sidebar-footer a:hover {
    color: #ffffff;
}

/* ?? Clinical study card meta line ????????????????????????? */
.te-study-meta {
    font-size: 12px;
    font-family: "Rajdhani", sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 12px;
    display: block;
}

/* read-btn (APPLY NOW + CHECK STUDIES) � white text, green arrow, all blue on hover */
.read-btn a,
a.read-btn {
    color: #ffffff !important;
    transition: color 0.3s;
}
.read-btn a i,
a.read-btn i {
    color: var(--bh-accent, #9CCE5A) !important;
    transition: color 0.3s;
}
.read-btn a:hover,
a.read-btn:hover {
    color: var(--bh-dark, #625df5) !important;
}
.read-btn a:hover i,
a.read-btn:hover i {
    color: var(--bh-dark, #625df5) !important;
}

/* Card footer: apply-now left, status right */
.te-study-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}

/* Study status badge */
.bh-study-status {
    font-size: 10px;
    font-family: "Rajdhani", sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.bh-status-recruiting { color: #9CCE5A; }
.bh-status-coming     { color: #ff4d24; }
.bh-status-closed     { color: rgba(255,255,255,0.35); }
.bh-status-other      { color: rgba(255,255,255,0.4); }

/* Section description text under h2 titles */
.te-section-desc-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
    margin-top: 12px;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

/* ?? CEO video card ????????????????????????????????????????? */
.bh-ceo-video-card {
    position: relative;
    width: 100%;
    height: 530px;
    display: block;
    padding-right: 0;
    border-radius: 4px;
    overflow: hidden;
}

.bh-ceo-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
    border-radius: 4px;
    background: #0a0a0a;
}

@media (max-width: 991px) {
    .bh-ceo-video-card { height: 420px; }
}

@media (max-width: 767px) {
    .bh-ceo-video-card { height: min(90vw, 420px); }
}

.bh-ceo-play-btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    top: auto;
    right: auto;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--bh-accent, #9CCE5A);
    border: 2px solid #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    transition: background 0.3s, transform 0.2s;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.45);
}

.bh-ceo-play-btn i {
    color: #ffffff;
    margin-left: 3px;
}

.bh-ceo-play-btn:hover {
    background: var(--bh-dark, #625df5);
    transform: translateX(-50%) scale(1.12);
}

.bh-ceo-play-btn.bh-playing {
    background: rgba(0,0,0,0.5);
}

/* ?? Footer "Powered by" line ??????????????????????????????? */
.bh-footer-poweredby {
    margin-top: 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    font-family: "Rajdhani", sans-serif;
}

/* Higher specificity than vendor .footer-bottom-area .te-copyright-text p a */
.footer-bottom-area .te-copyright-text .bh-footer-poweredby a {
    color: var(--bh-accent, #ff4d24);
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
}

.footer-bottom-area .te-copyright-text .bh-footer-poweredby a:hover {
    color: #ffffff;
}

/* ?? Contact map ???????????????????????????????????????????? */
.bh-contact-map {
    width: 100%;
    height: 100%;
    min-height: 520px;
    border-radius: 4px;
    overflow: hidden;
    padding-right: 24px;
}

@media (max-width: 1199px) {
    .bh-contact-map { padding-right: 0; }
}

@media (max-width: 767px) {
    .bh-contact-map { min-height: 320px; }
    .bh-sponsor-ticker-wrap { margin-top: 8px; margin-bottom: 48px; }
    #sponsors .btn-wrapper { text-align: center; }
    .bh-footer-poweredby { display: none; }
}

#sponsors .te-section-title {
    margin-top: 65px;
}

/* Add breathing room to the form side */
.appointment-area .te-post-comments-form.style-2 {
    padding-left: 24px;
}

@media (max-width: 1199px) {
    .appointment-area .te-post-comments-form.style-2 { padding-left: 0; }
}

.bh-map-popup {
    background: var(--bh-dark, #14203A);
    color: #ffffff;
    font-family: "Rajdhani", sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 2px;
    white-space: nowrap;
}

/* Google Maps info-window chrome overrides */
.gm-style .gm-style-iw-c {
    background: var(--bh-dark, #14203A) !important;
    padding: 0 !important;
    border-radius: 2px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6) !important;
}
.gm-style .gm-style-iw-d { overflow: hidden !important; }
.gm-style .gm-style-iw-t::after { background: var(--bh-dark, #14203A) !important; }
.gm-style .gm-ui-hover-effect { display: none !important; }

/* ?? Contact form success message ?????????????????????????? */
.bh-contact-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 48px 24px;
    text-align: center;
}

.bh-contact-success i {
    font-size: 52px;
    color: var(--bh-accent, #ff4d24);
}

.bh-contact-success p {
    color: rgba(255, 255, 255, 0.8);
    font-family: "Rajdhani", sans-serif;
    font-size: 18px;
    font-weight: 500;
    margin: 0;
}

/* ?? Sponsor logo ticker ???????????????????????????????????? */
.brand-slider-area.style-2 {
    background: #ffffff;
}

.brand-slider-area.style-2 .te-section-title .short-title,
.brand-slider-area.style-2 .te-section-title .short-title-wrapper::before,
.brand-slider-area.style-2 .te-section-title .short-title-wrapper::after {
    color: #14203A;
}

.brand-slider-area.style-2 .te-section-desc-text {
    color: rgba(20, 32, 58, 0.7);
}

.bh-sponsor-ticker-wrap {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.bh-sponsor-ticker {
    display: flex;
    align-items: center;
    gap: 48px;
    width: max-content;
    animation: bh-ticker-scroll 28s linear infinite;
}

.bh-sponsor-ticker:hover {
    animation-play-state: paused;
}

.bh-sponsor-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
}

.bh-sponsor-item img {
    max-height: 52px;
    max-width: 140px;
    width: auto;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 0.3s;
}

.bh-sponsor-item img:hover {
    opacity: 1;
}

@keyframes bh-ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ?? Google review avatar fallback ????????????????????????? */
.bh-review-avatar-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bh-accent, #ff4d24);
    color: #fff;
    font-family: "Rajdhani", sans-serif;
    font-weight: 700;
    font-size: 22px;
    border-radius: 50%;
}

/* Ensure avatar image fills the circle */
.te-testimonial-card .te-user-info .image {
    overflow: hidden;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Review date � replaces the "99" quote icon, top-right of card */
.bh-review-date {
    font-family: "Rajdhani", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
}

/* ?? Team card video play button ???????????????????????????? */
.te-team-card .image {
    position: relative;
}

/* Fill the circle correctly without distortion */
.te-team-card.style-2 .bh-team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    display: block;
}

/* Keep overflow hidden so hover scale stays clipped to the circle */
.te-team-card.style-2 .bh-team-image {
    overflow: hidden;
}

/* Profile link � invisible to layout so .image sits in .image-wrapper exactly as before */
.te-team-card.style-2 .bh-team-image-link {
    display: contents;
    cursor: pointer;
}

/* Outer wrapper is the anchor point for the play button */
.te-team-card.style-2 .bh-team-image-wrapper {
    position: relative;
}

.bh-team-play-btn {
    position: absolute;
    bottom: 55px;
    right: 58px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bh-accent, #ff4d24);
    border: 2px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 12px;
    text-decoration: none;
    z-index: 10;
    transition: background 0.3s, transform 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.45);
}

.bh-team-play-btn i {
    margin-left: 2px;
}

.bh-team-play-btn:hover {
    background: var(--bh-dark, #14203A);
    transform: scale(1.12);
    color: #ffffff;
}

/* Profile link � inherit white, orange on hover */
.te-team-card .te-content-wrapper .content .title a {
    color: inherit;
    text-decoration: none;
}
.te-team-card .te-content-wrapper .content .title a:hover {
    color: var(--bh-accent, #ff4d24);
}

/* ?? Team video popup container ????????????????????????????? */
.bh-team-video-popup {
    background: #000;
    padding: 0;
    max-width: 900px;
    width: 90vw;
    margin: 0 auto;
    position: relative;
}

.bh-team-video-inner {
    width: 100%;
}

/* ============================================================
   Brand color overrides � vendor style.css hardcodes #ff4d24;
   these rules use higher specificity to pull those elements
   into the brand variable system via --bh-accent / --bh-highlight.
   ============================================================ */

/* Global anchor + button base color */
a,
button {
    color: #ffffff;
}
a:hover,
a:focus,
button:hover {
    color: var(--bh-dark, #625df5);
}
a:focus {
    color: var(--bh-dark, #625df5);
}

/* Header top bar background */
.header-top {
    background-color: var(--bh-dark, #625df5);
}

/* ?? Header mobile logo + hamburger inset */
@media (max-width: 767px) {
    .te-sticky-logo   { margin-left:  25px; }
    .te-mobile-menu-bar { margin-right: 20px; }
}

/* Header call button icon circle */
.te-header-btn .te-call-btn .icon {
    background-color: var(--bh-accent, #9CCE5A);
}
.te-header-btn .te-call-btn .call-info a:hover {
    color: var(--bh-accent, #9CCE5A);
}

/* Theme button (primary CTA) */
.te-theme-btn,
.wp-block-loginout a,
input.te-theme-btn {
    background-color: var(--bh-accent, #ff4d24);
    border-color: var(--bh-accent, #ff4d24);
    color: #241f1f;
}
.te-theme-btn.style-2,
.wp-block-loginout a.style-2,
input.te-theme-btn.style-2 {
    color: var(--bh-accent, #ff4d24);
    background-color: transparent;
}
.te-theme-btn.style-2:hover,
.wp-block-loginout a.style-2:hover,
input.te-theme-btn.style-2:hover {
    background-color: var(--bh-accent, #ff4d24);
    border-color: var(--bh-accent, #ff4d24);
}

/* Hero slider � short title (phone number line) */
.slider-area .te-single-slider .te-slider-content-wrapper .te-slider-content .te-slider-short-title,
.slider-area .te-single-slider .te-slider-content-wrapper .te-slider-content .te-slider-short-title a {
    color: var(--bh-accent, #ff4d24);
}

/* Hero slider � title highlighted spans */
.slider-area .te-single-slider .te-slider-content-wrapper .te-slider-content .te-slider-title span {
    color: var(--bh-highlight, #9CCE5A);
}

/* Theme button hover � dark navy instead of jarring white */
.te-theme-btn:hover,
.wp-block-loginout a:hover,
input.te-theme-btn:hover {
    color: #ffffff;
    background-color: var(--bh-dark, #14203A);
    border-color: var(--bh-dark, #14203A);
}
.te-theme-btn:focus,
.wp-block-loginout a:focus,
input.te-theme-btn:focus {
    color: #ffffff;
}

/* Testimonial / section slider nav arrows */
.te-slider-btn-wrapper .te-slider-nav {
    background-color: var(--bh-accent, #ff4d24);
    border-color: var(--bh-accent, #ff4d24);
}

/* ?? Study cards � equal height, text wraps, footer pinned to bottom ??????? */
#clinical-studies .row > [class*="col-"] {
    display: flex;
}
#clinical-studies .te-info-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}
#clinical-studies .te-info-card .te-info-card-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
}
#clinical-studies .te-info-card .te-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}
#clinical-studies .te-info-card .content {
    flex: 1;
    align-items: flex-start;
}
#clinical-studies .te-study-card-footer {
    margin-top: auto;
}
.te-slider-btn-wrapper .te-slider-nav:hover {
    background-color: var(--bh-dark, #14203A);
    border-color: var(--bh-dark, #14203A);
    color: #ffffff;
}

/* Location card date / phone badge */
.te-post-card .image .te-post-date {
    background-color: var(--bh-accent, #ff4d24);
}

.bh-team-video-inner video {
    width: 100%;
    display: block;
}

.bh-team-video-mfp .mfp-content {
    max-width: 900px;
}

/* Blackhawk-styled close button */
.bh-team-video-mfp .mfp-close {
    width: 44px;
    height: 44px;
    line-height: 44px;
    background: var(--bh-accent, #ff4d24);
    color: #ffffff;
    font-size: 20px;
    border-radius: 0;
    opacity: 1;
    top: -44px;
    right: 0;
    padding: 0;
    text-align: center;
    transition: background 0.3s;
}

.bh-team-video-mfp .mfp-close:hover {
    background: var(--bh-dark, #14203A);
    opacity: 1;
}

/* ============================================================
   Study Filter Bar � Blackhawk skin
   Overrides the Zonar-default rules with BH design tokens:
   navy bg � #ff4d24 accent � Rajdhani � sharp corners
   ============================================================ */

.study-filter-bar {
    width: 100%;
    margin-bottom: 32px;
}

.study-filter-bar-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
    background: #0d1526;
    border-left: 3px solid #ff4d24;
    padding: 16px 22px;
}

.study-filter-bar-inner .study-filter-search {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
}

.study-filter-bar-inner .study-filter-search input {
    width: 100%;
    box-sizing: border-box;
    display: block;
}

.study-filter-bar-inner .study-filter-count {
    flex: 0 0 auto;
}

.study-filter-bar-inner .study-filter-dropdowns {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
}

.study-filter-bar-inner .study-filter-select-wrap {
    flex: 0 0 auto;
}

.study-filter-bar-inner .study-filter-select-wrap select {
    min-width: 148px;
    width: auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.study-filter-search i {
    display: none;
}

/* Search field */
.study-filter-search input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    color: #fff;
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 11px 14px;
    transition: outline 0.15s, background 0.2s;
}

.study-filter-search input::placeholder {
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
}

.study-filter-search input:focus {
    background: rgba(255, 255, 255, 0.09) !important;
    border: 1px solid #ff4d24 !important;
    outline: none !important;
    box-shadow: none !important;
}

.study-filter-search i {
    color: rgba(255, 255, 255, 0.35);
    font-size: 12px;
}

/* Count widget */
.study-filter-count-number {
    font-family: "Rajdhani", sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #ff4d24;
}

.study-filter-count-label {
    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
}

.study-filter-select-wrap {
    position: relative;
}

/* Dropdown selects */
.study-filter-select-wrap select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    color: #fff;
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 11px 34px 11px 14px;
    min-width: 155px;
    transition: background 0.2s;
    cursor: pointer;
}

.study-filter-select-wrap select:focus {
    background: rgba(255, 255, 255, 0.09) !important;
    border: 1px solid #ff4d24 !important;
    outline: none !important;
    box-shadow: none !important;
}

.study-filter-select-wrap select option {
    background: #0d1526;
    color: #fff;
}

.study-filter-select-wrap select option:checked,
.study-filter-select-wrap select option:hover {
    background: #ff4d24;
    color: #fff;
}

.study-filter-select-wrap i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    pointer-events: none;
}

/* Back to Team button � center on mobile */
@media (max-width: 767px) {
    .bh-back-btn-wrapper {
        display: flex;
        justify-content: center;
    }
}

/* Mobile stacking � inherits Zonar breakpoint, just reskins */
@media (max-width: 680px) {
    .study-filter-bar-inner {
        flex-wrap: wrap;
        padding: 12px 16px;
    }

    .study-filter-bar-inner .study-filter-search {
        flex: 1 1 auto;
    }

    .study-filter-bar-inner .study-filter-dropdowns {
        flex: 0 0 100%;
        flex-wrap: wrap;
    }

    .study-filter-bar-inner .study-filter-select-wrap {
        flex: 1 1 auto;
    }

    .study-filter-bar-inner .study-filter-select-wrap select {
        width: 100%;
        min-width: 0;
    }
}

/* ?? Section title alignment ???????????????????????????????? */
/* Desktop: left-align regardless of justify-content-center / text-center */
.te-section-title.justify-content-center,
.te-section-title.text-center {
    justify-content: flex-start !important;
    text-align: left !important;
}
.te-section-title.justify-content-center *,
.te-section-title.text-center * {
    text-align: left !important;
}

/* Mobile: restore center alignment */
@media only screen and (max-width: 767px) {
    .te-section-title.justify-content-center,
    .te-section-title.text-center,
    .te-section-title {
        justify-content: center !important;
        text-align: center !important;
    }
    .te-section-title.justify-content-center *,
    .te-section-title.text-center *,
    .te-section-title * {
        text-align: center !important;
    }

    /* CEO section � mobile fixes */
    #about .btn-wrapper {
        text-align: center;
    }

    #about .te-section-desc p {
        text-align: justify !important;
        padding: 0 8px;
    }
}

/* ?? Post card layout tweaks (locations section only) ?????? */
#locations .te-post-card .content-wrapper {
    margin-top: -20px;
}

#locations .te-post-card .image .te-post-date {
    bottom: 0px;
}

/* Chat FAB and the language pill (#tc-lang, injected by tc-translate.js) must NOT poke
   through the slide-out menu or the preloader overlay.
     • menu open → the menu (.te-body-overlay / .te-menu-sidebar-area) is nested inside the
       layout/Routes tree, so z-index alone can't place the FAB/pill "behind" it (proven on
       Zonar) — both are <body> children in the root stacking context, outside that nesting.
     • preloader up → #preloader is itself a <body> sibling of #tc-chat/#tc-lang with a much
       higher z-index (9999999 vs 99990 here), so plain z-order already stacks it above them;
       this clause is a belt-and-suspenders guard so the FAB/pill can never show through the
       preloader's transparent background or the gaps between its sliding bars.
   Either way: HIDE both while any overlay is up and restore them the moment it clears.
   Stacking-context-proof (visibility, not z-index).
   Signals: bh-init.js sets `.active` on .te-body-overlay AND .te-menu-sidebar-area when the
   menu opens, and adds `.loaded` to #preloader when the preload finishes.
   (Override here — never edit vendor style.css.) */
body:has(.te-body-overlay.active) .tc-chat-launch,
body:has(.te-menu-sidebar-area.active) .tc-chat-launch,
body:has(#preloader:not(.loaded)) .tc-chat-launch,
body:has(.te-body-overlay.active) .tc-lang,
body:has(.te-menu-sidebar-area.active) .tc-lang,
body:has(#preloader:not(.loaded)) .tc-lang {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ?? Preloader ??????????????????????????????????????????????????????????????? */
#preloader {
    /* position/z-index already set by style.css */
    background: transparent;
}
.bh-preloader-bars {
    display: flex;
    width: 100%;
    height: 100%;
}
.bh-preloader-bar {
    flex: 1;
    height: 100%;
    background: var(--bh-dark, #14203A);
    transform-origin: bottom center;
    transform: scaleY(1);
    transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}
.bh-preloader-bar:nth-child(1) { transition-delay: 0.0s; }
.bh-preloader-bar:nth-child(2) { transition-delay: 0.08s; }
.bh-preloader-bar:nth-child(3) { transition-delay: 0.16s; }
.bh-preloader-bar:nth-child(4) { transition-delay: 0.24s; }
#preloader.loaded .bh-preloader-bar {
    transform-origin: top center;
    transform: scaleY(0);
}

/* ?? Nav transition overlay (Blazor internal routing) ???????????????????????? */
#bh-nav-transition {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 99999999;
    display: flex;
    pointer-events: none;
    visibility: hidden;
}
#bh-nav-transition.bh-nt-covering {
    pointer-events: all;
    visibility: visible;
}
.bh-nt-col {
    flex: 1;
    background: var(--bh-dark, #14203A);
    transform: scaleY(0);
    transform-origin: bottom center;
    transition: transform 0.45s cubic-bezier(0.77, 0, 0.175, 1);
}
/* Covering: columns slide UP from bottom to full height */
#bh-nav-transition.bh-nt-covering .bh-nt-col {
    transform: scaleY(1);
    transform-origin: bottom center;
}
#bh-nav-transition.bh-nt-covering .bh-nt-col:nth-child(1) { transition-delay: 0s;    }
#bh-nav-transition.bh-nt-covering .bh-nt-col:nth-child(2) { transition-delay: 0.06s; }
#bh-nav-transition.bh-nt-covering .bh-nt-col:nth-child(3) { transition-delay: 0.12s; }
#bh-nav-transition.bh-nt-covering .bh-nt-col:nth-child(4) { transition-delay: 0.18s; }
/* Revealing: columns slide UP away from top � scaleY(1) baseline then shrink to 0 */
#bh-nav-transition.bh-nt-revealing .bh-nt-col {
    transform: scaleY(0);
    transform-origin: top center;
}
#bh-nav-transition.bh-nt-revealing .bh-nt-col:nth-child(1) { transition-delay: 0s;    }
#bh-nav-transition.bh-nt-revealing .bh-nt-col:nth-child(2) { transition-delay: 0.06s; }
#bh-nav-transition.bh-nt-revealing .bh-nt-col:nth-child(3) { transition-delay: 0.12s; }
#bh-nav-transition.bh-nt-revealing .bh-nt-col:nth-child(4) { transition-delay: 0.18s; }

/* Spinner � visible on arrival from a nav-link click, while the new page renders */
.bh-nt-spinner {
    position: fixed;
    top: 50%; left: 50%;
    width: 64px; height: 64px;
    margin: -32px 0 0 -32px;
    z-index: 100000000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-out;
}
#bh-nav-transition.bh-nt-show-spinner .bh-nt-spinner { opacity: 1; }
#bh-nav-transition.bh-nt-revealing .bh-nt-spinner   { opacity: 0; }
.bh-nt-spinner svg {
    width: 100%; height: 100%;
    animation: bhSpinRotate 1.1s linear infinite;
}
.bh-nt-spinner svg circle {
    stroke: var(--bh-accent, #ff4d24);
    stroke-linecap: round;
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    animation: bhSpinDash 1.4s ease-in-out infinite;
    transform-origin: center;
}
@keyframes bhSpinRotate { to { transform: rotate(360deg); } }
@keyframes bhSpinDash {
    0%   { stroke-dasharray: 1, 200;   stroke-dashoffset: 0;    }
    50%  { stroke-dasharray: 90, 150;  stroke-dashoffset: -35;  }
    100% { stroke-dasharray: 90, 150;  stroke-dashoffset: -125; }
}

/* Study-detail "Now {status} {condition} Volunteers at {locations}" heading block */
.bh-study-additional-title {
    margin-bottom: 0;
}
.bh-study-additional-title h2.title {
    font-size: 35px;
}

/* -- Cookie consent banner (Blackhawk skin) ---------------------------------------- */
.bh-cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9997;  /* below nav-transition overlay and chat FAB */
    background: var(--bh-dark, #14203A);
    border-top: 2px solid var(--bh-accent, #ff4d24);
    padding: 14px 0;
}
.bh-cookie-consent__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 24px;
}
.bh-cookie-consent__text {
    flex: 1 1 260px;
    margin: 0;
    font-size: 14px;
    font-family: "Rajdhani", sans-serif;
    color: rgba(255, 255, 255, 0.80);
    line-height: 1.6;
}
.bh-cookie-consent__link {
    color: var(--bh-accent, #ff4d24);
    text-decoration: underline;
    white-space: nowrap;
}
.bh-cookie-consent__link:hover { color: #ffffff; }
.bh-cookie-consent__actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.bh-cookie-consent__btn {
    font-family: "Rajdhani", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 10px 22px;
    border: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    line-height: 1;
}
.bh-cookie-consent__btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}
.bh-cookie-consent__btn--accept {
    background: var(--bh-accent, #ff4d24);
    color: #ffffff;
}
.bh-cookie-consent__btn--accept:hover {
    background: #c9350e;
    color: #ffffff;
}
.bh-cookie-consent__btn--decline {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.20);
}
.bh-cookie-consent__btn--decline:hover {
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff;
}
@media (max-width: 767px) {
    .bh-cookie-consent__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    /* In column mode flex-basis is the MAIN (vertical) axis — reset it so the
       text doesn't claim 260px of height and leave a tall void above the buttons. */
    .bh-cookie-consent__text { flex: 0 0 auto; }
    .bh-cookie-consent__actions { width: 100%; }
    .bh-cookie-consent__btn { flex: 1; text-align: center; }
}

/* -- Cookie consent a11y fixes (ADA review 2026-06-12) -------------------------------- */
/* WCAG 1.4.3: white-on-orange was ~2.6:1; dark text on the accent is ~10:1. */
.bh-cookie-consent__btn--accept { color: #1a1a1a; }
.bh-cookie-consent__btn--accept:hover { background: #ff6a47; color: #1a1a1a; }
@media (max-width: 767px) {
    /* Keep the Decline button reachable above the fixed chat FAB on small screens. */
    body:has(#tc-cookie-banner:not([hidden])) .tc-chat-launch { bottom: 150px; }
}

/* -- Related Studies list (RespondToLeadView) — relocated 2026-07-06 -------------------
   Moved here from RespondToLeadView.razor.css: the Portal never loads the Blazor
   CSS-isolation bundle (no TrialCatcherPortal.styles.css link in App.razor), so every
   rule in that .razor.css was dead code and never reached the browser. Reuses the
   native dark te-info-card style-2 shell. Card markup never includes native
   .te-info-card's optional ".icon" element (an 85x85 bordered box meant to hold a
   category image) — the .icon{display:none} guard below is defensive against a future
   copy-paste reintroducing it. */
.bh-related-studies { margin-top: 4px; }

.bh-related-note {
    font-size: 13px;
    color: #6b7280;             /* dark-grey — legible on the light bh-page-section */
    margin: 4px 0 10px;
    line-height: 1.6;
}

.bh-related-list {
    display: grid;
    grid-template-columns: 1fr;   /* default: matches the studies col being full-width below its real stacking point */
    gap: 28px;   /* was 16px — too tight between cards in a row */
}
@media (min-width: 1200px) {
    /* 2-up only from xl (was ≥992px). From 992px the studies col is half-width
       (col-lg-6 col-md-12), but between 992–1199 that half is too narrow for two
       readable cards — parity with the Zonar fix (Chief, 2026-07-07). One card per
       row there; exactly 2-up needs xl width. */
    .bh-related-list { grid-template-columns: repeat(2, 1fr); }
}

/* whole-card link — reuses .te-info-card (bg #111) at a tighter list padding. No
   overflow:hidden here (removed 2026-07-06) — nothing in this card floats
   anymore, and overflow:hidden was silently clipping the blurb mid-line
   whenever real content (e.g. a 2-line title) pushed a card past min-height.
   The line-clamp on .desc below is the only place overflow:hidden should
   live — the card itself must be free to grow past min-height. */
.bh-related-card {
    display: block;
    padding: 28px 26px;
    min-height: 255px;  /* bumped back up 2026-07-06 for breathing room (was 215px) — safe now that overflow:hidden is gone, so no clipping regardless of min-height. Grid row-stretch (align-items:stretch default) still equalizes cards within a row — this is just a floor. */
    text-decoration: none;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0,0,0,.10);
    transition: transform .3s ease, box-shadow .3s ease;
}
.bh-related-card .icon { display: none; }
.bh-related-card .te-info-card-inner {
    padding: 0;
    gap: 0;
    align-items: flex-start;
}

/* keep native uppercase, force white title (no inner <a> to inherit from) */
.bh-related-card .te-title-wrapper .title {
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
    text-align: left;
    transition: color .3s ease;
}

/* Sex · age meta line — scoped override beats the global .te-study-meta above */
.bh-related-card .te-study-meta {
    font-size: 11px;
    font-family: "Rajdhani", sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.6);
    margin-bottom: 10px;
}
.bh-related-card .te-study-meta span:first-child {
    color: var(--bh-accent, #9CCE5A);   /* sex accent */
}

/* content is centred by base .te-info-card outside #clinical-studies — re-left-align */
.bh-related-card .content {
    align-items: flex-start;
    gap: 0;
    margin-bottom: 0;
    text-align: left;
}
/* REMOVED 2026-07-06: the 4-line -webkit-line-clamp trio was verified present
   and correctly declared here, yet blurbs kept slicing a partial 5th line at
   the card's bottom edge. Audited for a competing rule that could silently
   reset `display` (the one thing that would defeat the clamp): found
   `.te-info-card .content .desc` (style.css) and `.te-info-card.style-2
   .te-content-wrapper .desc` (this file, for the Benefits grid — coincidentally
   matches our card since it reuses te-info-card/style-2) — both are MORE
   specific than `.bh-related-card .desc`, but neither declares display/
   overflow/line-clamp, so they only win on cosmetic properties (line-height
   1.75 vs our 1.7), not the clamp mechanics. No confirmed display-resetting
   collision found. Since Zonar showed the identical slicing symptom with
   ZERO competing rules on its equivalent selector, the leading suspect is a
   stale served CSS bundle rather than a real override here either (this app's
   cache-buster is the DLL's last-write time, which a CSS-only incremental
   build may not bump). Fix is removal: full text always renders, grid
   row-stretch still equalizes rows. */
.bh-related-card .desc {
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    line-height: 1.7;
    text-align: left;
    margin: 0;
}

/* Compensation pill — Rajdhani accent, matches BH status/badge idiom */
.bh-related-comp {
    display: inline-block;
    margin-top: 14px;
    padding: 5px 12px;
    border-radius: 4px;
    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--bh-accent, #9CCE5A);
    background: rgba(156,206,90,0.12);
    border: 1px solid rgba(156,206,90,0.35);
}

/* Hover: lift + accent title — extends native te-info-card accent behaviour */
.bh-related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.28);
}
.bh-related-card:hover .te-title-wrapper .title {
    color: var(--bh-accent, #9CCE5A);
}

.bh-related-card:focus-visible {
    outline: 3px solid var(--bh-accent, #9CCE5A);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .bh-related-card { transition: none; }
    .bh-related-card:hover { transform: none; }
}

/* Row gutter ≥992px between the related-studies grid and the conversation panel.
   6rem (96px, previous value) read as two divorced columns; 3rem (48px) is the
   same as the gx-5 md default, kept explicit here so it's easy to find/tune.
   Row selector confirmed from RespondToLeadView.razor: <div class="row gx-5
   gy-4 bh-study-panel-row ...">. */
@media (min-width: 992px) {
    .bh-study-panel-row {
        --bs-gutter-x: 3rem;
    }
}

/* Conversation card top-alignment fudge REMOVED 2026-07-06 — obsolete now that
   both columns get an identical twin heading block (.bh-related-studies /
   short-title-wrapper / bh-related-note, reused verbatim on both sides — see
   RespondToLeadView.razor). They top-align naturally under their own headings;
   no offset needed. */

/* Anchor-study hero (RespondToLeadView) — page-scoped compression, parity with
   the Zonar fix above. .bh-page-section (120px/80px) and .bh-study-divider
   (60px top+bottom) are SHARED classes used by other Blackhawk pages
   (ClinicalStudiesView, ClinicalStudyDetailsView) — never touch them globally;
   scope via a page-only wrapper class + a unique class on just the first
   divider (the one between the hero and the related-studies/conversation row). */
.bh-respond-section {
    padding-top: 50px;
    padding-bottom: 60px;
}
.bh-respond-hero-divider {
    margin: 16px 0 20px;
}

/* ── Focal-point treatment (designer spec, 2026-07-06) ─────────────────────
   Conversation card reads as the page's focal point; study cards recede.
   .bh-conversation-card is a NEW class added only to the two conversation-card
   instances (RespondToLeadView.razor) — .bh-study-panel is shared with the FAQ
   panel, so scoping through .bh-conversation-card keeps this off the FAQ card. */

/* Lever 1 — conversation card: inset top accent bar (brand accent) + deep
   ambient shadow, scoped under .bh-respond-section so it never leaks to any
   other page reusing .te-info-card. */
.bh-respond-section .bh-conversation-card.te-info-card {
    box-shadow: inset 0 3px 0 0 var(--bh-accent, #9CCE5A), 0 22px 52px -16px rgba(0,0,0,.55);
    border: 1px solid color-mix(in srgb, var(--bh-accent, #9CCE5A) 20%, transparent);
}

/* Lever 2 — quiet study cards. Hover state (further up this file) is untouched. */
.bh-respond-section .bh-related-card {
    box-shadow: 0 2px 10px rgba(0,0,0,.22);
}
.bh-respond-section .bh-related-card .te-title-wrapper .title {
    color: rgba(255,255,255,.82);
}

/* Lever 3 — send button glow (enabled state only; .rl-btn-send is the real,
   verified class on the Blackhawk Send button). */
.bh-conversation-card .rl-btn-send:not([disabled]) {
    box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--bh-accent, #9CCE5A) 50%, transparent);
    transition: box-shadow .15s ease, transform .15s ease;
}
.bh-conversation-card .rl-btn-send:not([disabled]):hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--bh-accent, #9CCE5A) 62%, transparent);
}
@media (prefers-reduced-motion: reduce) {
    .bh-conversation-card .rl-btn-send:not([disabled]) { transition: none; }
    .bh-conversation-card .rl-btn-send:not([disabled]):hover { transform: none; }
}

/* Lever 4 — one-time settle glow; gated behind prefers-reduced-motion so it
   never fires for users who've asked to reduce motion. */
@media (prefers-reduced-motion: no-preference) {
    .bh-conversation-card {
        animation: bh-focus-settle 1.4s ease-out 1 both;
    }
}
@keyframes bh-focus-settle {
    0% {
        box-shadow: inset 0 3px 0 0 var(--bh-accent, #9CCE5A), 0 0 0 7px color-mix(in srgb, var(--bh-accent, #9CCE5A) 16%, transparent), 0 22px 52px -16px rgba(0,0,0,.55);
    }
    100% {
        box-shadow: inset 0 3px 0 0 var(--bh-accent, #9CCE5A), 0 0 0 0 transparent, 0 22px 52px -16px rgba(0,0,0,.55);
    }
}