/* ============================================================
   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-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;
}
.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 ???? */
.bh-study-panel .te-info-card-inner {
    padding: 40px 36px;
}
@media (max-width: 991px) {
    .bh-study-panel .te-info-card-inner { padding: 32px 24px; }
}
@media (max-width: 767px) {
    .bh-study-panel .te-info-card-inner { padding: 20px 16px; }
    /* 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;
}
/* 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 must NOT poke through the slide-out menu or the preloader overlay.
   The FAB (#tc-chat) is a <body> child while the menu/preloader are trapped inside the
   layout tree, so z-index can't place it cleanly "behind" the overlay (proven on Zonar).
   HIDE the FAB while any overlay is up and restore it the moment the overlay clears.
   Stacking-context-proof (visibility, not z-index).
     • menu open → bh-init.js sets `.active` on .te-body-overlay AND .te-menu-sidebar-area
     • preloader up → #preloader exists without `.loaded` (bh-init adds `.loaded` when done)
   (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 {
    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);
    }
}