/* ============================================================
   custom.css — Main page & Footer
   ============================================================ */

/* ── 1. Main ──────────────────────────────────────────────── */
.bhm-main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--hdr-h));
}

@media (min-width: 768px) {
    .bhm-main {
        min-height: calc(100vh - var(--hdr-h-lg));
    }
}

/* ── 2. Viewport — clips items pushed off-screen ─────────── */

/* ── Viewport - fills available width ── */
.bhm-viewport {
   width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1.25rem;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .bhm-viewport {
        padding: 0 0.625rem;  /* mobile padding */
    }
}

/* ── Stage - scales with viewport width, maintains 2:1 aspect ratio ── */
.bhm-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1;
    transform: none !important;
}

/* Desktop: stage uses full available width */
@media (min-width: 768px) {
    .bhm-stage {
        width: 100%;
        aspect-ratio: 2 / 1;
    }

    /* Remove old fixed-width scaling */
    .bhm-viewport {
        height: auto;
    }
}

/* Items now use percentage-based positioning */
.bhm-item {
    position: absolute;
    cursor: pointer;
    z-index: 1;
    will-change: transform, opacity;
    /* Width/height/top/left set by JS as percentages */
}


/* ── 3b. Mobile scroll layout ────────────────────────────── */
.bhm-mobile-list {
    display: none;
}

@media (max-width: 767px) {
    .bhm-main {
        display: block;
        min-height: unset;
        padding-top: 0;
    }

    /* show viewport but don't constrain height */
    .bhm-viewport {
        height: auto;
        overflow: visible;
        display: block;
        padding: 0;
    }

    /* hide the desktop stage on mobile */
    .bhm-stage {
        display: none;
    }

    .bhm-mobile-list {
        display: flex;
        flex-direction: column;
        overflow-y: visible;
        overflow-x: hidden;
        min-height: 100vh;
        padding: 0 10px;
        margin: 0;
        gap: 10px;
        width: 100vw;
        position: relative;
        box-sizing: border-box;
        padding-top: 4.6875rem; /* space from header, matches reference */
    }

    .bhm-mobile-item {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        flex-shrink: 0;
        cursor: pointer;
        position: relative;
        overflow: visible;
        transition: width 0.6s cubic-bezier(0.38, 1, 0.68, 1);
    }

    /* odd = left aligned, small */
    .bhm-mobile-item:nth-child(odd) {
        align-self: flex-start;
        width: calc(50vw - 10px);
        margin: 0 auto 0 0;
    }

    /* even = right aligned, small */
    .bhm-mobile-item:nth-child(even) {
        align-self: flex-end;
        width: calc(50vw - 10px);
        margin: 0 0 0 auto;
    }

    /* active/focused item = full width */
    .bhm-mobile-item.is-active {
        align-self: flex-start !important;
        width: calc(100vw - 20px) !important;
        margin: 0 !important;
    }

    .bhm-mobile-item__img-wrap {
        width: 100%;
        overflow: hidden;
    }

    .bhm-mobile-item__img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        display: block;
    }

    /* labels — always visible, tight to image, stacked on separate lines */
    .bhm-mobile-item__labels {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        margin-top: 0;
        width: 100%;
    }

    .bhm-mobile-item__label,
    .bhm-mobile-item__artist {
        font-family: var(--ff-teko);
        font-size: 1.375rem;
        font-weight: 400;
        line-height: 1;
        text-transform: uppercase;
        color: var(--txt-white);
        background-color: var(--bg-heavy);
        display: inline-block;
        padding: 0.2rem 0.4rem 0.1rem;
        white-space: nowrap;
    }

    .bhm-mobile-item__artist {
        margin-left: 0;
        margin-top: 0;
    }
}

/* ── 4. Items — position set by JS layout ────────────────── */
.bhm-item {
    position: absolute;
    cursor: pointer;
    z-index: 1;
    will-change: transform, opacity;
    transform-origin: center center;
    /* default: reset back to normal */
    transition:
        transform 0.3s cubic-bezier(0.38, 1, 0.68, 1),
        opacity 0.3s cubic-bezier(0.38, 1, 0.68, 1);
}

/* scatter fly-in: no transition while positioning off-screen */
.bhm-item.is-scattering {
    transition: none !important;
}

/* fly-in animation */
.bhm-item.is-scatter-in {
    transition:
        transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.4s linear !important;
}

/* hovered item: same timing as reset */
.bhm-item.is-hovered {
    z-index: 100;
    transition:
        transform 0.3s cubic-bezier(0.38, 1, 0.68, 1),
        opacity 0.3s cubic-bezier(0.38, 1, 0.68, 1) !important;
}

/* resetting item: z-index drops so it goes behind */
.bhm-item.is-resetting {
    z-index: 0 !important;
    transition:
        transform 0.3s cubic-bezier(0.38, 1, 0.68, 1),
        opacity 0.3s cubic-bezier(0.38, 1, 0.68, 1) !important;
}

.bhm-item__inner {
    width: 100%;
    height: 100%;
}

.bhm-item__inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── 5. Hover push — exact expansion, zero gap ────────────── */
/*
  scale(1.25) on each item.

  Edge items use directional transform-origin:
    t1 → transform-origin: left center  (expands RIGHT only, full width * 0.25)
    t5 → transform-origin: right center (expands LEFT only,  full width * 0.25)

  Middle items expand both sides (width * 0.25 / 2 = width * 0.125 each side).

  Push amounts:
    t1 (154px, left-origin):  full right expansion = 154*0.25 = 38px
    t2 (359px, center):       half expansion = 359*0.125 = 45px each side
    t3 (154px, center):       half expansion = 154*0.125 = 19px each side
    t4 (205px, center):       half expansion = 205*0.125 = 26px each side
    t5 (359px, right-origin): full left expansion = 359*0.25 = 90px
*/

.bhm-item[data-id="t1"] {
    transform-origin: left center;
}
.bhm-item[data-id="t5"] {
    transform-origin: right center;
}

/* hover t1 — expands right only, push all right by 38px */
.bhm-stage.hover-t1 .bhm-item[data-id="t1"] {
    transform: scale(1.25);
}
.bhm-stage.hover-t1 .bhm-item[data-id="t2"] {
    transform: translateX(38px);
}
.bhm-stage.hover-t1 .bhm-item[data-id="t3"] {
    transform: translateX(38px);
}
.bhm-stage.hover-t1 .bhm-item[data-id="t4"] {
    transform: translateX(38px);
}
.bhm-stage.hover-t1 .bhm-item[data-id="t5"] {
    transform: translateX(38px);
}

/* hover t2 — expands both sides 45px */
.bhm-stage.hover-t2 .bhm-item[data-id="t1"] {
    transform: translateX(-45px);
}
.bhm-stage.hover-t2 .bhm-item[data-id="t2"] {
    transform: scale(1.25);
}
.bhm-stage.hover-t2 .bhm-item[data-id="t3"] {
    transform: translateX(45px);
}
.bhm-stage.hover-t2 .bhm-item[data-id="t4"] {
    transform: translateX(45px);
}
.bhm-stage.hover-t2 .bhm-item[data-id="t5"] {
    transform: translateX(45px);
}

/* hover t3 — expands both sides 19px */
.bhm-stage.hover-t3 .bhm-item[data-id="t1"] {
    transform: translateX(-19px);
}
.bhm-stage.hover-t3 .bhm-item[data-id="t2"] {
    transform: translateX(-19px);
}
.bhm-stage.hover-t3 .bhm-item[data-id="t3"] {
    transform: scale(1.25);
}
.bhm-stage.hover-t3 .bhm-item[data-id="t4"] {
    transform: translateX(19px);
}
.bhm-stage.hover-t3 .bhm-item[data-id="t5"] {
    transform: translateX(19px);
}

/* hover t4 — expands both sides 26px */
.bhm-stage.hover-t4 .bhm-item[data-id="t1"] {
    transform: translateX(-26px);
}
.bhm-stage.hover-t4 .bhm-item[data-id="t2"] {
    transform: translateX(-26px);
}
.bhm-stage.hover-t4 .bhm-item[data-id="t3"] {
    transform: translateX(-26px);
}
.bhm-stage.hover-t4 .bhm-item[data-id="t4"] {
    transform: scale(1.25);
}
.bhm-stage.hover-t4 .bhm-item[data-id="t5"] {
    transform: translateX(26px);
}

/* hover t5 — expands left only, push all left by 90px */
.bhm-stage.hover-t5 .bhm-item[data-id="t1"] {
    transform: translateX(-90px);
}
.bhm-stage.hover-t5 .bhm-item[data-id="t2"] {
    transform: translateX(-90px);
}
.bhm-stage.hover-t5 .bhm-item[data-id="t3"] {
    transform: translateX(-90px);
}
.bhm-stage.hover-t5 .bhm-item[data-id="t4"] {
    transform: translateX(-90px);
}
.bhm-stage.hover-t5 .bhm-item[data-id="t5"] {
    transform: scale(1.25);
}

/* ── 6. Floating label (≥1440px) ─────────────────────────── */
.bhm-item-label {
    position: fixed;
    pointer-events: none;
    z-index: 1000;
    display: none;
    font-family: var(--ff-teko);
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--txt-white);
    line-height: 1;
    background-color: var(--bg-heavy);
    padding: 0.25rem 0.4rem 0.1rem;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
}

@media (min-width: 1440px) {
    .bhm-item-label {
        display: block;
    }
    .bhm-item-label.is-visible {
        opacity: 1;
    }
}

/* ── 7. Footer ────────────────────────────────────────────── */
.bhm-footer {
    width: 100%;
    padding: 0.625rem;
    position: relative;
    background-color: var(--bg-primary);
    color: var(--txt-primary);
    overflow-x: hidden;
    font-family: var(--ff-teko);
}

@media (min-width: 768px) {
    .bhm-footer {
        padding: 1.25rem;
        display: flex;
        align-items: flex-end;
    }
    .bhm-footer[data-main-page="true"] {
        margin-top: 12.5rem;
    }
}

/* ── 7a. Footer inner — 12-col grid on desktop ────────────── */
.bhm-footer__inner {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    position: relative;
    z-index: 2;
}

@media (min-width: 768px) {
    .bhm-footer__inner {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto auto;
        gap: 2rem 0;
    }
}

/* ── 7b. Footer logo — col 3/11, row 1 ───────────────────── */
.bhm-footer__logo {
    position: relative;
    width: 100%;
    order: 0;
    margin-top: 0.625rem;
}

/* default: light logo visible, dark logo hidden */
.bhm-footer__logo-light {
    display: block;
    width: 100%;
    height: auto;
}
.bhm-footer__logo-dark {
    display: none;
    width: 0;
    height: 0;
}

/* dark mode: swap */
[data-theme="dark"] .bhm-footer__logo-light {
    display: none;
    width: 0;
    height: 0;
}
[data-theme="dark"] .bhm-footer__logo-dark {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .bhm-footer__logo {
        grid-column: 3 / 11;
        grid-row: 1;
        order: 0;
        margin-top: 0;
    }
}

/* ── 7c. Dark mode toggle — col 1/3, row 2 ───────────────── */
.bhm-footer__dark-mode {
    display: none;
}

@media (min-width: 768px) {
    .bhm-footer__dark-mode {
        display: block;
        grid-column: 1 / 3;
        grid-row: 2;
        align-self: center;
    }
}

.bhm-footer__theme-btn {
    font-size: 1rem;
    line-height: 0.875;
}

@media (min-width: 1024px) {
    .bhm-footer__theme-btn {
        font-size: 1.5rem;
        line-height: 0.75;
    }
}

/* ── 7d. Bottom row ───────────────────────────────────────── */
.bhm-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.625rem; /* space between logo and copyright on mobile */
}

@media (min-width: 768px) {
    .bhm-footer__bottom {
        display: contents;
        margin-top: 0;
    }
}

.bhm-footer__copyright {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--ff-teko);
    color: var(--txt-primary);
    font-size: 1rem;
    font-weight: 400;
    line-height: 0.875;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

@media (min-width: 768px) {
    .bhm-footer__copyright {
        grid-column: 3 / 6;
        grid-row: 2;
        align-self: center;
        transform: translateX(-25%);
        justify-content: center;
    }
}
@media (min-width: 1024px) {
    .bhm-footer__copyright {
        font-size: 1.5rem;
        line-height: 0.75;
        transform: translateX(-16%);
        justify-content: flex-start;
    }
}
@media (min-width: 1440px) {
    .bhm-footer__copyright {
        transform: translateX(0);
    }
}

/* plus/minus icon */
.bhm-footer__icon {
    position: relative;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bhm-footer__line-h,
.bhm-footer__line-v {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 1px;
    background: var(--bg-heavy);
    transform-origin: center;
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}
.bhm-footer__line-h {
    transform: translate(-50%, -50%) rotate(0deg);
}
.bhm-footer__line-v {
    transform: translate(-50%, -50%) rotate(90deg);
}
.is-open .bhm-footer__line-v {
    transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
    opacity: 0;
}
@media (min-width: 768px) {
    .bhm-footer__copyright .bhm-footer__icon {
        display: none;
    }
}

/* ── 7e. SNS — col 5/8, row 2 ────────────────────────────── */
.bhm-footer__sns {
    display: flex;
    gap: 0.9375rem;
    list-style: none;
}
.bhm-footer__sns li {
    color: var(--txt-primary);
    font-size: 1rem;
    font-weight: 400;
    line-height: 0.875;
    text-transform: uppercase;
}
@media (min-width: 768px) {
    .bhm-footer__sns {
        grid-column: 5 / 8;
        grid-row: 2;
        align-self: center;
        justify-content: flex-end;
    }
}
@media (min-width: 1024px) {
    .bhm-footer__sns li {
        font-size: 1.5rem;
        line-height: 0.75;
    }
}
@media (min-width: 1440px) {
    .bhm-footer__sns {
        grid-column: 5 / 7;
        justify-content: flex-start;
    }
}

/* ── 7f. Policies — hidden on mobile, shown when copyright is clicked ── */
.bhm-footer__policies {
    display: none; /* hidden by default on mobile */
    flex-direction: column;
    gap: 0.3125rem;
    font-size: 1rem;
    color: var(--gray-400);
    line-height: 0.875;
    font-weight: 400;
    text-transform: uppercase;
}

.bhm-footer__policies.is-open {
    display: flex;
}

.bhm-footer__policies a {
    text-decoration: none;
    color: inherit;
}

@media (min-width: 768px) {
    /* always visible on desktop */
    .bhm-footer__policies {
        display: flex;
        grid-column: 8 / 11;
        grid-row: 2;
        align-self: center;
        justify-self: end;
        color: var(--gray-550);
        flex-direction: row-reverse;
        gap: 0.9375rem;
    }
}

@media (min-width: 1024px) {
    .bhm-footer__policies {
        font-size: 1.5rem;
        line-height: 0.75;
    }
}

/* ── 7g. Family sites — col 11/13, row 2 ─────────────────── */
.bhm-footer__family {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    color: var(--txt-primary);
    position: relative;
    /* mobile: sits above the logo */
    order: -1;
    margin-bottom: 0.3125rem;
}

@media (min-width: 768px) {
    .bhm-footer__family {
        grid-column: 11 / 13;
        grid-row: 2;
        align-self: center;
        justify-self: end;
        align-items: flex-end;
        margin-bottom: 0;
        flex-direction: column-reverse;
        min-width: 7.5rem;
        order: 0;
        width: fit-content;
    }
}

.bhm-footer__family-btn {
    padding: 0;
    font-family: var(--ff-teko);
    font-size: 1rem;
    font-weight: 400;
    line-height: 0.875;
    text-transform: uppercase;
    color: var(--txt-primary);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.125rem;
    z-index: 10;
    position: relative;
}

@media (min-width: 1024px) {
    .bhm-footer__family-btn {
        font-size: 1.5rem;
        line-height: 0.75;
        min-width: 7.125rem;
    }
}

.bhm-footer__family-dropdown {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    position: relative;
    z-index: 10;
    padding-top: 0.3125rem;
}

.bhm-footer__family-dropdown.is-open {
    display: flex;
}

.bhm-footer__family-dropdown a {
    font-family: var(--ff-teko);
    font-size: 1rem;
    font-weight: 400;
    line-height: 0.875;
    text-transform: uppercase;
    color: var(--txt-primary);
    text-decoration: none;
}

@media (min-width: 768px) {
    .bhm-footer__family-dropdown {
        display: none;
        position: absolute;
        bottom: 30px;
        right: 0;
        align-items: flex-end;
        padding-top: 0;
    }
    .bhm-footer__family-dropdown.is-open {
        display: flex;
    }
    .bhm-footer__family-dropdown a {
        white-space: nowrap;
    }
}

@media (min-width: 1024px) {
    .bhm-footer__family-dropdown a {
        font-size: 1.5rem;
        line-height: 0.75;
    }
}

/* ── 7h. Family dim ───────────────────────────────────────── */
.bhm-footer__family-dim {
    display: none;
    position: absolute;
    top: 0;
    left: -100vw;
    width: 200vw;
    height: 6.25rem;
    background: var(--bg-primary);
    z-index: 1;
    pointer-events: none;
}
.bhm-footer__family-dim.is-visible {
    display: block;
    pointer-events: auto;
}

/* ============================================================
   ABOUT — ANNOUNCEMENT (Board / Empty State)
   ============================================================ */

/* ── Board page wrapper ───────────────────────────────────── */
.bhm-board {
    padding: 0.9375rem 0.625rem 1.25rem;
}

.bhm-board h1 {
    color: var(--txt-primary);
    font-family: var(--ff-teko);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 0.75;
    text-transform: uppercase;
    margin-bottom: 0.625rem;
}

@media (min-width: 768px) {
    .bhm-board {
        padding: 1.25rem 0;
    }

    .bhm-board h1 {
        padding: 0.9375rem 1.25rem;
        font-size: 2.25rem;
        line-height: 0.77778;
        margin-bottom: 2.5rem;
    }
}

/* ── Empty state — full page centered ────────────────────── */
.bhm-board-empty-page {
    display: flex;
    flex-direction: column;
    flex: 1; /* fills all space between header and footer */
}

.bhm-board-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1;
}

.bhm-board-empty__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
}

.bhm-board-empty__icon {
    width: 3.625rem;
    height: 3.625rem;
}

.bhm-board-empty__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bhm-board-empty__icon .icon-light {
    display: block;
}

.bhm-board-empty__icon .icon-dark {
    display: none;
}

[data-theme="dark"] .bhm-board-empty__icon .icon-light {
    display: none;
}

[data-theme="dark"] .bhm-board-empty__icon .icon-dark {
    display: block;
}

.bhm-board-empty p {
    font-size: 0.875rem;
    color: var(--txt-primary);
}

@media (min-width: 768px) {
    .bhm-board-empty p {
        font-size: 1.125rem;
    }
}

/* ============================================================
   ABOUT — LABEL INFO PAGE
   ============================================================ */

.bhm-about-page {
    background-color: var(--bg-primary);
    transition: background-color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.bhm-about-page.careers-active {
    background-color: var(--bg-heavy);
}

.bhm-about-page.careers-active .bhm-careers__title,
.bhm-about-page.careers-active .bhm-careers__content,
.bhm-about-page.careers-active .bhm-careers__apply {
    background-color: var(--bg-primary);
    color: var(--txt-primary);
}

/* ── Section / Container ──────────────────────────────────── */
.bhm-about-section {
    width: 100%;
}

.bhm-about-container {
    padding: 0 0.625rem;
}

@media (min-width: 768px) {
    .bhm-about-container {
        padding: 0 1.25rem;
    }
}

/* ── Intro ────────────────────────────────────────────────── */
.bhm-intro {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.bhm-intro__image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.bhm-intro__image img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bhm-intro__text {
    display: flex;
    flex-direction: column;
    padding-bottom: 1.625rem;
}

.bhm-intro__text h2 {
    font-family: var(--ff-teko);
    font-size: 3rem;
    color: var(--txt-primary);
    font-weight: 400;
    line-height: 0.83;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.bhm-intro__space {
    display: block;
    margin-bottom: 0.3125rem;
}

.bhm-intro__text p {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.21;
    margin-bottom: 0.625rem;
    font-family: var(--ff-acumin);
    word-break: keep-all;
    overflow-wrap: break-word;
}

.bhm-intro__text p:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .bhm-intro {
        flex-direction: row;
        gap: 0;
    }

    .bhm-intro__image,
    .bhm-intro__text {
        flex: 1 1;
    }

    .bhm-intro__text h2 {
        font-size: 4rem;
        line-height: 0.84375;
        margin-bottom: 1.875rem;
    }

    .bhm-intro__text p {
        font-size: 1rem;
        line-height: 1.25;
        margin-bottom: 1.25rem;
    }

    .bhm-intro__text-inner {
        padding-left: 1.25rem;
    }
}

@media (min-width: 1440px) {
    .bhm-intro__text h2 {
        font-size: 8rem;
        line-height: 0.81;
        margin-bottom: 3.125rem;
    }

    .bhm-intro__text p {
        font-size: 2rem;
        line-height: 1.19;
    }
}

/* ── Artist section ───────────────────────────────────────── */
.bhm-artist {
    position: relative;
}

.bhm-artist__title {
    position: relative;
    width: 25%;
    aspect-ratio: 1 / 1;
    display: inline-flex;
    padding: 0.625rem;
    background-color: var(--bg-heavy);
    color: var(--txt-white);
    font-family: var(--ff-teko);
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 400;
}

.bhm-artist__list {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    list-style: none;
}

@media (min-width: 768px) {
    .bhm-artist__title {
        width: 25%;
        padding: 1.25rem;
        font-size: 3.125rem;
        line-height: 0.8;
        margin-left: 50%;
    }

    .bhm-artist__list {
        align-items: stretch;
    }
}

@media (min-width: 1440px) {
    .bhm-artist__title {
        width: 16.65%;
        font-size: 4rem;
        line-height: 0.84;
    }
}

/* ── Artist item ──────────────────────────────────────────── */
.bhm-artist-item {
    position: relative;
    width: 75%;
}

.bhm-artist-item__label {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--bg-heavy);
    color: var(--txt-white);
    z-index: 1;
    padding: 0.5rem 0.625rem;
    font-family: var(--ff-teko);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
}

.bhm-artist-item__image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.bhm-artist-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bhm-artist-item__arrow {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0.28875rem;
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--bg-heavy);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bhm-artist-item__arrow img {
    width: 100%;
}

@media (min-width: 768px) {
    .bhm-artist-item {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .bhm-artist-item__label {
        padding: 1.25rem;
        font-size: 2.25rem;
        line-height: 0.7778;
    }

    .bhm-artist-item__inner {
        position: relative;
        width: 83.3%;
        transition: width 0.35s ease;
    }

    .bhm-artist-item__inner:hover {
        width: 100%;
        cursor: pointer;
    }

    .bhm-artist-item__arrow {
        opacity: 0;
        transition: opacity 0.3s ease;
        width: 3.4375rem;
        height: 3.4375rem;
        padding: 0.78125rem;
    }

    .bhm-artist-item__inner:hover .bhm-artist-item__arrow {
        opacity: 1;
    }

    .bhm-artist-item:nth-child(odd) .bhm-artist-item__inner {
        grid-column: 1;
        justify-self: end;
    }

    .bhm-artist-item:nth-child(even) .bhm-artist-item__inner {
        grid-column: 2;
        justify-self: start;
    }
}

@media (min-width: 1440px) {
    .bhm-artist-item__label {
        font-size: 2.5rem;
        line-height: 0.8;
    }

    .bhm-artist-item__arrow {
        width: 4.0625rem;
        height: 4.0625rem;
    }
}

/* ── Careers section ──────────────────────────────────────── */
.bhm-careers {
    position: relative;
    display: grid;
}

.bhm-careers__title,
.bhm-careers__content,
.bhm-careers__apply {
    box-sizing: border-box;
    padding: 0.3125rem;
    background-color: var(--bg-heavy);
    color: var(--txt-white);
    transition:
        background-color 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.bhm-careers__title {
    width: 25%;
    aspect-ratio: 1 / 1;
    font-family: var(--ff-teko);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
}

.bhm-careers__content {
    width: 50%;
    aspect-ratio: 1 / 1;
    font-family: var(--ff-acumin);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.21;
    margin-left: 25%;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.bhm-careers__apply {
    position: relative;
    width: 17%;
    aspect-ratio: 1 / 1;
    font-family: var(--ff-teko);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    margin-left: 75%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    cursor: pointer;
    text-decoration: none;
}

.bhm-careers__apply-icon {
    position: absolute;
    width: 0.875rem;
    height: 0.875rem;
    right: 0.3125rem;
    bottom: 0.3125rem;
    display: block;
}

/* icon-default and icon-white are both absolutely positioned */
.bhm-careers__apply .icon-default,
.bhm-careers__apply .icon-white {
    position: absolute;
    width: 0.875rem;
    height: 0.875rem;
    right: 0.3125rem;
    bottom: 0.3125rem;
}

@media (min-width: 768px) {
    .bhm-careers {
        padding-bottom: 9.375rem;
    }

    .bhm-careers__title,
    .bhm-careers__content {
        padding: 1.25rem;
    }

    .bhm-careers__title {
        width: 25%;
        font-size: 3.125rem;
        line-height: 1.25;
        margin-left: 25%;
    }

    .bhm-careers__content {
        width: 33.3%;
        font-size: 1.5625rem;
        line-height: 1.2;
        margin-left: 50%;
    }

    .bhm-careers__apply {
        padding: 0.625rem;
        width: 15.9%;
        font-size: 2.5rem;
        line-height: 0.8;
        margin-left: 83.3%;
    }

    .bhm-careers__apply-icon {
        width: 1.875rem;
        height: 1.875rem;
        right: 0.625rem;
        bottom: 0.625rem;
    }

    .bhm-careers__apply .icon-default,
    .bhm-careers__apply .icon-white {
        width: 1.875rem;
        height: 1.875rem;
        right: 0.625rem;
        bottom: 0.625rem;
    }
}

@media (min-width: 1440px) {
    .bhm-careers {
        padding-bottom: 12.5rem;
    }

    .bhm-careers__title {
        width: 16.7%;
        font-size: 4rem;
        line-height: 0.84;
        margin-left: 33.3%;
    }

    .bhm-careers__content {
        width: 25%;
        font-size: 2rem;
        line-height: 1.18;
        margin-left: 50%;
    }

    .bhm-careers__apply {
        width: 8.3%;
        font-size: 2.5rem;
        line-height: 0.8;
        margin-left: 75%;
    }
}

/* ============================================================
   ABOUT — ICON SWAPS (theme toggle + careers scroll)
   ============================================================ */

/* Artist arrows: white icon in light mode, dark icon when theme is dark */
.bhm-artist-item__arrow .icon-light {
    display: block;
    width: 100%;
    height: auto;
}

.bhm-artist-item__arrow .icon-dark {
    display: none;
}

[data-theme="dark"] .bhm-artist-item__arrow .icon-light {
    display: none;
}

[data-theme="dark"] .bhm-artist-item__arrow .icon-dark {
    display: block;
    width: 100%;
    height: auto;
}

/*
  Careers APPLY icon follows the APPLY box background:
  - Not scrolled: dark box → link-white.svg
  - Scrolled (careers-active): white box → link.svg
  - Dark mode inverts both (token swap on --bg-heavy / --bg-primary)
*/
.bhm-about-page .bhm-careers__apply .icon-default {
    display: none;
}

.bhm-about-page .bhm-careers__apply .icon-white {
    display: block;
}

.bhm-about-page.careers-active .bhm-careers__apply .icon-default {
    display: block;
}

.bhm-about-page.careers-active .bhm-careers__apply .icon-white {
    display: none;
}

[data-theme="dark"] .bhm-about-page .bhm-careers__apply .icon-default {
    display: block;
}

[data-theme="dark"] .bhm-about-page .bhm-careers__apply .icon-white {
    display: none;
}

[data-theme="dark"]
    .bhm-about-page.careers-active
    .bhm-careers__apply
    .icon-default {
    display: none;
}

[data-theme="dark"]
    .bhm-about-page.careers-active
    .bhm-careers__apply
    .icon-white {
    display: block;
}

.bhm-careers__apply .icon-default,
.bhm-careers__apply .icon-white {
    object-fit: contain;
}

/* ── Footer: scroll on about page simulates dark footer; theme toggle inverts ── */
.bhm-footer.careers-active-footer {
    background-color: var(--bg-heavy);
    color: var(--txt-white);
    transition:
        background-color 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.bhm-footer.careers-active-footer .bhm-footer__logo-light {
    display: none;
    width: 0;
    height: 0;
}

.bhm-footer.careers-active-footer .bhm-footer__logo-dark {
    display: block;
    width: 100%;
    height: auto;
}

.bhm-footer.careers-active-footer .bhm-footer__copyright,
.bhm-footer.careers-active-footer .bhm-footer__sns li,
.bhm-footer.careers-active-footer .bhm-footer__family,
.bhm-footer.careers-active-footer .bhm-footer__family-btn,
.bhm-footer.careers-active-footer .bhm-footer__family-dropdown a,
.bhm-footer.careers-active-footer .bhm-theme-toggle {
    color: var(--txt-white);
}

.bhm-footer.careers-active-footer .bhm-footer__policies {
    color: var(--gray-400);
}

.bhm-footer.careers-active-footer .bhm-footer__line-h,
.bhm-footer.careers-active-footer .bhm-footer__line-v {
    background: var(--txt-white);
}

.bhm-footer.careers-active-footer .bhm-theme-toggle__box {
    background-color: var(--txt-white);
}

.bhm-footer.careers-active-footer .bhm-footer__family-dim {
    background: var(--bg-heavy);
}

/* Dark mode + careers scroll: footer flips back to light (inverted) */
[data-theme="dark"] .bhm-footer.careers-active-footer {
    background-color: var(--bg-heavy);
    color: var(--txt-white);
}

[data-theme="dark"] .bhm-footer.careers-active-footer .bhm-footer__logo-light {
    display: block;
    width: 100%;
    height: auto;
}

[data-theme="dark"] .bhm-footer.careers-active-footer .bhm-footer__logo-dark {
    display: none;
    width: 0;
    height: 0;
}

[data-theme="dark"] .bhm-footer.careers-active-footer .bhm-footer__copyright,
[data-theme="dark"] .bhm-footer.careers-active-footer .bhm-footer__sns li,
[data-theme="dark"] .bhm-footer.careers-active-footer .bhm-footer__family,
[data-theme="dark"] .bhm-footer.careers-active-footer .bhm-footer__family-btn,
[data-theme="dark"]
    .bhm-footer.careers-active-footer
    .bhm-footer__family-dropdown
    a,
[data-theme="dark"] .bhm-footer.careers-active-footer .bhm-theme-toggle {
    color: var(--txt-white);
}

[data-theme="dark"] .bhm-footer.careers-active-footer .bhm-footer__policies {
    color: var(--gray-550);
}

[data-theme="dark"] .bhm-footer.careers-active-footer .bhm-footer__line-h,
[data-theme="dark"] .bhm-footer.careers-active-footer .bhm-footer__line-v {
    background: var(--txt-white);
}

[data-theme="dark"] .bhm-footer.careers-active-footer .bhm-theme-toggle__box {
    background-color: var(--txt-white);
}

[data-theme="dark"] .bhm-footer.careers-active-footer .bhm-footer__family-dim {
    background: var(--bg-heavy);
}

/* ============================================================
   SUB PAGES (artist profile, etc.)
   ============================================================ */

.bhm-sub-page {
    width: 100%;
    background-color: var(--bg-primary);
    color: var(--txt-primary);
}

.bhm-section {
    width: 100%;
}

/* ============================================================
   BTS — PROFILE PAGE
   ============================================================ */

.bhm-profile-page {
    width: 100%;
    max-width: 100%;
    padding: 0 0.625rem;
    margin-bottom: 9.375rem;
    box-sizing: border-box;
}

@media (min-width: 769px) {
    .bhm-profile-page {
        padding: 0 1.25rem;
        margin-bottom: 9.375rem;
    }
}

@media only screen and (max-width: 768px) {
    .bhm-profile-page {
        margin-bottom: 0rem;
    }
}

@media (min-width: 1920px) {
    .bhm-profile-page {
        margin-bottom: 12.5rem;
    }
}

/* ── Top block: banner + bio + SNS ────────────────────────── */
.bhm-profile-top {
    position: relative;
    width: 100%;
    margin-bottom: 3.125rem;
}

.bhm-profile-banner {
    width: calc(100% + 1.25rem);
    overflow: hidden;
    margin: 0 -0.625rem 1.25rem;
}

.bhm-profile-banner__image {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
}

@media (min-width: 1024px) {
    .bhm-profile-banner {
        width: calc(100% + 2.5rem);
        margin: 0 -1.25rem 1.875rem;
        aspect-ratio: 1 / 0.42;
    }

    .bhm-profile-banner__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.bhm-profile-top__artist-info {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.25rem;
    gap: 0.625rem;
}

.bhm-profile-top__artist-info h2 {
    margin: 0;
    color: var(--txt-primary);
    font-family: var(--ff-teko);
    font-size: 3.125rem;
    font-weight: 400;
    line-height: 0.8;
    text-transform: uppercase;
}

/* Bio — Barlow Condensed stands in for Acumin Pro (reference body font) */
.bhm-profile-top__bio {
    margin: 0 0 2.5rem;
    color: var(--txt-primary);
    font-family: var(--ff-acumin);
    font-size: 1rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.25;
    letter-spacing: 0;
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}

.bhm-profile-top__sns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem 1.875rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.bhm-profile-top__sns a {
    position: relative;
    display: inline-block;
    color: var(--txt-primary);
    font-family: var(--ff-teko);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
}

.bhm-profile-top__sns-arrow {
    display: none;
}

.bhm-profile-top__sns-arrow .icon-light {
    display: block;
    width: 100%;
    height: 100%;
}

.bhm-profile-top__sns-arrow .icon-dark {
    display: none;
}

[data-theme="dark"] .bhm-profile-top__sns-arrow .icon-light {
    display: none;
}

[data-theme="dark"] .bhm-profile-top__sns-arrow .icon-dark {
    display: block;
    width: 100%;
    height: 100%;
}

@media (min-width: 1024px) {
    .bhm-profile-top {
        margin-bottom: 6.25rem;
    }

    .bhm-profile-top__artist-info {
        flex-direction: row;
        align-items: flex-end;
        margin-bottom: 1.875rem;
    }

    .bhm-profile-top__artist-info h2 {
        font-size: 6.25rem;
        line-height: 0.8;
    }

    .bhm-profile-top__bio {
        max-width: 76.5rem;
        font-size: 1.5625rem;
        line-height: 1.4;
        margin-bottom: 2.5rem;
    }

    .bhm-profile-top__sns a {
        font-size: 1.875rem;
        line-height: 0.83;
        padding-right: 1.875rem;
    }

    .bhm-profile-top__sns-arrow {
        position: absolute;
        bottom: -0.1875rem;
        right: 0;
        width: 1.5625rem;
        height: 1.5625rem;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .bhm-profile-top__sns a:hover .bhm-profile-top__sns-arrow {
        opacity: 1;
    }
}

@media (min-width: 1920px) {
    .bhm-profile-top__sns {
        gap: 0.625rem 3.4375rem;
    }

    .bhm-profile-top__bio {
        margin-bottom: 1.875rem;
    }
}

/* Dark mode — text uses site tokens (not pure black) */
[data-theme="dark"] .bhm-profile-top__artist-info h2,
[data-theme="dark"] .bhm-profile-top__bio,
[data-theme="dark"] .bhm-profile-top__sns a {
    color: var(--txt-primary);
}

/* ── Members mosaic ───────────────────────────────────────── */
.bhm-members {
    width: 100%;
}

.bhm-members__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.bhm-members__item {
    width: 100%;
}

@media (min-width: 1024px) {
    .bhm-members__grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: minmax(0, auto);
    }

    .bhm-members__item {
        min-width: 0;
    }
}

.bhm-member-item {
    position: relative;
    width: 100%;
}

.bhm-member-item__name,
.bhm-member-item__birth {
    padding: 0.3125rem 1.25rem;
    background-color: var(--bg-black);
    color: var(--txt-white);
    font-family: var(--ff-teko);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    z-index: 1;
}

.bhm-member-item__name {
    position: absolute;
    top: 0;
    left: 0;
}

.bhm-member-item__birth {
    position: absolute;
    bottom: 0;
    right: 0;
    text-transform: capitalize;
}

.bhm-member-item__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.bhm-member-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (min-width: 768px) {
    .bhm-member-item__name,
    .bhm-member-item__birth {
        padding: 0.625rem;
        font-size: 1.875rem;
        line-height: 0.8333;
    }
}

@media (min-width: 1440px) {
    .bhm-member-item__name,
    .bhm-member-item__birth {
        padding: 0.625rem 1.25rem;
        line-height: 0.83;
    }
}


/* TOUR DESIGN  */

/* ============================================================
   BTS — TOUR PAGE
   ============================================================ */

.bhm-tour-page {
    width: 100%;
    max-width: 100%;
    padding: 0 0 3.75rem;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .bhm-tour-page {
        padding-bottom: 6.25rem;
    }
}

@media (min-width: 1920px) {
    .bhm-tour-page {
        padding-bottom: 12.5rem;
    }
}

/* ── Tour header (sticky) ── */
.bhm-tour-header {
    --dropdown-item-opacity: 0.4;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.9375rem 0.625rem 0.625rem;
    background-color: var(--bg-primary);
    opacity: 1;
    transition: background-color var(--t-base), opacity var(--t-base);
    font-family: var(--ff-teko);
}

@media (min-width: 769px) {
    .bhm-tour-header {
        padding: 0.9375rem 1.25rem 0.625rem;
    }
}

@media (min-width: 1024px) {
    .bhm-tour-header {
        flex-direction: row;
        align-items: center;
        gap: 0.625rem;
        padding: .9375rem 1.25rem;
    }
}

/* Sticky state — dark bg, same as discography */
.bhm-tour-header.is-sticky {
    background-color: var(--gray-950);
}

.bhm-tour-header.is-sticky .bhm-tour-header__title,
.bhm-tour-header.is-sticky .bhm-tour-header__dropdown-text {
    color: var(--c-white);
}

.bhm-tour-header.is-sticky .bhm-tour-header__dropdown-icon {
    filter: invert(1);
}

.bhm-tour-header.is-sticky .bhm-tour-header__dropdown-item {
    color: rgba(var(--c-white-rgb), var(--dropdown-item-opacity));
}

.bhm-tour-header.is-sticky .bhm-tour-header__dropdown-item:hover,
.bhm-tour-header.is-sticky .bhm-tour-header__dropdown-item:focus-visible {
    color: var(--c-white);
    background-color: transparent;
}

/* Open state — slight transparency so banner shows through */
.bhm-tour-header.is-open {
    opacity: 0.95;
}

/* ── Title ── */
.bhm-tour-header__title {
    margin: 0;
    font-family: var(--ff-teko);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 0.75;
    letter-spacing: 0.02em;
    color: var(--txt-primary);
    text-transform: uppercase;
}

@media (min-width: 1024px) {
    .bhm-tour-header__title {
        font-size: 2.25rem;
        line-height: 0.7778;
        width: 14.9375rem;
        flex-shrink: 0;
    }
}

/* ── Dropdown wrapper ── */
.bhm-tour-header__dropdown {
    position: static;
    flex: 1;
    min-width: 0;
}

/* ── Dropdown button ── */
.bhm-tour-header__dropdown-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: opacity var(--t-fast);
}

.bhm-tour-header__dropdown-btn:focus-visible {
    outline: 2px solid var(--txt-primary);
    outline-offset: 2px;
    border-radius: 0.125rem;
}

@media (min-width: 1024px) {
    .bhm-tour-header__dropdown-btn {
        gap: 0.625rem;
    }
}

/* ── Dropdown text ── */
.bhm-tour-header__dropdown-text {
    font-family: var(--ff-teko);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 0.75;
    letter-spacing: 0.02em;
    color: var(--txt-primary);
    text-transform: uppercase;
    min-width: 0;
}

@media (min-width: 1024px) {
    .bhm-tour-header__dropdown-text {
        font-size: 2.25rem;
    }
}

/* ── Dropdown icon (filled triangle, matches ibighit select-triangle.svg) ── */
.bhm-tour-header__dropdown-icon {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
    transform: rotate(180deg);
    transition: transform var(--t-fast), filter var(--t-base);
}

.bhm-tour-header__dropdown-icon.is-open {
    transform: rotate(0deg);
}

@media (min-width: 1024px) {
    .bhm-tour-header__dropdown-icon {
        width: 0.875rem;
        height: 0.875rem;
    }
}

/* ── Dropdown list — full width overlay ── */
.bhm-tour-header__dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    margin: 0;
    padding: 0 0.625rem 0.625rem;
    list-style: none;
    background-color: var(--bg-primary);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.625rem);
    transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}

.bhm-tour-header__dropdown-list.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.bhm-tour-header.is-sticky .bhm-tour-header__dropdown-list {
    background-color: var(--gray-950);
}

@media (min-width: 1024px) {
    .bhm-tour-header__dropdown-list {
        padding: 0 1.25rem 1.25rem 16.8125rem;
    }
}

/* ── Dropdown items ── */
.bhm-tour-header__dropdown-item {
    display: block;
    width: 100%;
    background: none;
    border: none;
    font-family: var(--ff-teko);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    color: rgba(var(--c-primary-rgb), var(--dropdown-item-opacity));
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0.125rem 0;
    transition: color var(--t-fast);
}

.bhm-tour-header__dropdown-item:hover,
.bhm-tour-header__dropdown-item:focus-visible {
    outline: none;
    color: rgba(var(--c-primary-rgb), 1);
}

@media (min-width: 1024px) {
    .bhm-tour-header__dropdown-item {
        font-size: 2.25rem;
        line-height: 1;
    }
}

[data-theme="dark"] .bhm-tour-header {
    --dropdown-item-opacity: 0.4;
}

/* Dark mode: header sits on dark bg — invert black SVG arrow to white */
[data-theme="dark"] .bhm-tour-header__dropdown-icon {
    filter: invert(1);
}

/* Dark mode + sticky: same white arrow (no double-invert) */
[data-theme="dark"] .bhm-tour-header.is-sticky .bhm-tour-header__dropdown-icon {
    filter: invert(1);
}

/* ── Tour banner (full-bleed, no side padding — matches ibighit) ── */
.bhm-tour-banner {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.bhm-tour-banner__image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    user-select: none;
}

/* ── Tour list ── */
.bhm-tour-list {
    width: 100%;
    padding: 0 0.625rem;
}

.bhm-tour-list > div {
    border-top: 1px solid var(--txt-tertiary);
}

.bhm-tour-list > div:first-child {
    border-top: 0;
}

.bhm-tour-list > div:last-child {
    border-bottom: 1px solid var(--txt-tertiary);
}

@media (min-width: 1024px) {
    .bhm-tour-list {
        padding: 0;
    }

    .bhm-tour-list > div {
        border-top: 0;
    }

    .bhm-tour-list > div:last-child {
        border-bottom: 0;
    }
}

.bhm-tour-list.is-hidden {
    display: none;
}

/* ── Tour item ── */
.bhm-tour-item {
    position: relative;
    padding: 0.625rem 0;
}

@media (min-width: 1024px) {
    .bhm-tour-item {
        padding: 0.625rem 1.25rem;
    }

    .bhm-tour-item:hover:not(.is-disabled) {
        background-color: var(--gray-950);
    }

    .bhm-tour-item:hover:not(.is-disabled) .bhm-tour-item__date,
    .bhm-tour-item:hover:not(.is-disabled) .bhm-tour-item__city,
    .bhm-tour-item:hover:not(.is-disabled) .bhm-tour-item__venue {
        color: var(--c-white);
    }

    .bhm-tour-item:hover:not(.is-disabled) .bhm-tour-item__btn {
        background-color: var(--bg-primary);
        color: var(--txt-primary);
    }

    /* Dark mode: invert row hover — light bg, dark text, dark buttons */
    [data-theme="dark"] .bhm-tour-item:hover:not(.is-disabled) {
        background-color: var(--bg-heavy);
    }

    [data-theme="dark"] .bhm-tour-item:hover:not(.is-disabled) .bhm-tour-item__date,
    [data-theme="dark"] .bhm-tour-item:hover:not(.is-disabled) .bhm-tour-item__city,
    [data-theme="dark"] .bhm-tour-item:hover:not(.is-disabled) .bhm-tour-item__venue {
        color: var(--gray-950);
    }

    [data-theme="dark"] .bhm-tour-item:hover:not(.is-disabled) .bhm-tour-item__btn {
        background-color: var(--gray-950);
        color: var(--c-white);
    }
}

/* ── Desktop row (hidden on mobile) ── */
.bhm-tour-item__row {
    display: none;
}

@media (min-width: 1024px) {
    .bhm-tour-item__row {
        display: grid;
        grid-template-columns: 14.9375rem 1fr 2fr 9.1875rem;
        align-items: center;
        gap: 0.625rem;
    }

    .bhm-tour-item__row--with-extra {
        grid-template-columns: 14.9375rem 1fr 2fr auto;
    }
}

/* ── Date / City / Venue text ── */
.bhm-tour-item__date,
.bhm-tour-item__city,
.bhm-tour-item__venue {
    font-family: var(--ff-acumin);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--txt-primary);
    text-transform: uppercase;
}

@media (min-width: 1024px) {
    .bhm-tour-item__date,
    .bhm-tour-item__city,
    .bhm-tour-item__venue {
        font-size: 1.5625rem;
    }
}

/* ── Action buttons (desktop) ── */
.bhm-tour-item__action {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.bhm-tour-item__action--with-extra {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* ── Mobile card (hidden on desktop) ── */
.bhm-tour-item__card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

@media (min-width: 1024px) {
    .bhm-tour-item__card {
        display: none;
    }
}

.bhm-tour-item__card-info {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 600;
    color: var(--txt-primary);
}

.bhm-tour-item__card-date,
.bhm-tour-item__card-city,
.bhm-tour-item__card-venue {
    font-family: var(--ff-acumin);
    text-transform: uppercase;
}

.bhm-tour-item__card-action {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 0.5rem;
    margin-left: 1rem;
    width: 6.25rem;
}

.bhm-tour-item__card-action .bhm-tour-item__btn {
    width: 100%;
}

/* ── Buttons ── */
.bhm-tour-item__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 6.25rem;
    padding: 0.3125rem 0;
    font-family: var(--ff-acumin);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--bg-primary);
    background-color: var(--txt-primary);
    border: none;
    cursor: pointer;
    transition: background-color var(--t-fast), color var(--t-fast), opacity var(--t-fast);
}

.bhm-tour-item__btn:hover:not(:disabled) {
    background-color: var(--bg-primary);
    color: var(--txt-primary);
}

.bhm-tour-item__btn:focus-visible {
    outline: 2px solid var(--txt-primary);
    outline-offset: 2px;
}

.bhm-tour-item__btn:disabled {
    cursor: not-allowed;
    opacity: 0.25;
}

@media (min-width: 1024px) {
    .bhm-tour-item__btn {
        width: 9.1875rem;
        padding: 0.3125rem 0;
        font-size: 1.5625rem;
        font-weight: 600;
        line-height: 1.12;
    }
}

/* ── More to come ── */
.bhm-tour-list__more {
    width: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bhm-tour-list__more-text {
    padding: 3.75rem 0.625rem 0;
    font-family: var(--ff-teko);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 0.75;
    text-transform: uppercase;
    color: var(--txt-primary);
}

@media (min-width: 1024px) {
    .bhm-tour-list__more-text {
        padding: 6.25rem 0 0;
        font-size: 2.25rem;
        line-height: 0.78;
    }
}

/* ── Empty state ── */
.bhm-tour-list__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12.5rem;
    padding: 2.5rem 1.25rem;
}

.bhm-tour-list__empty-text {
    margin: 0;
    font-family: var(--ff-teko);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--txt-secondary);
    text-align: center;
}

@media (min-width: 1024px) {
    .bhm-tour-list__empty-text {
        font-size: 1.5rem;
    }
}




/* ============================================================
   AUTH PAGES (Login, Register, Forgot Password, OTP, Reset)
   ============================================================ */

.bhm-auth {
    min-height: 100dvh;
    background-color: var(--bg-primary);
    color: var(--txt-primary);
    display: grid;
}

.bhm-auth__grid {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    min-height: 100dvh;
}

@media (min-width: 1024px) {
    .bhm-auth__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Left: background image ── */
.bhm-auth__image {
    display: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 1024px) {
    .bhm-auth__image {
        display: block;
        position: sticky;
        top: 0;
        height: 100dvh;
        overflow: hidden;
    }
}

.bhm-auth__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Mobile background overlay */
.bhm-auth__bg-mobile {
    position: fixed;
    inset: 0;
    z-index: 0;
}

.bhm-auth__bg-mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.15;
}

.bhm-auth__bg-mobile::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(var(--c-white-rgb), 0.7);
}

@media (min-width: 1024px) {
    .bhm-auth__bg-mobile {
        display: none;
    }
}

/* ── Right: form panel ── */
.bhm-auth__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2.5rem 1.25rem;
    min-height: 100dvh;
    overflow-y: auto;
}

@media (min-width: 768px) {
    .bhm-auth__panel {
        padding: 3.5rem 2.5rem;
    }
}

@media (min-width: 1024px) {
    .bhm-auth__panel {
        padding: 3.5rem 3rem;
    }
}

/* ── Icon ── */
.bhm-auth__icon {
    width: 4.375rem;
    height: 4.375rem;
}

@media (min-width: 768px) {
    .bhm-auth__icon {
        width: 6.25rem;
        height: 6.25rem;
    }
}

.bhm-auth__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ── Heading block ── */
.bhm-auth__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.bhm-auth__title {
    font-family: var(--ff-teko);
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1;
    color: var(--txt-primary);
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .bhm-auth__title {
        font-size: 2rem;
    }
}

.bhm-auth__subtitle {
    font-family: var(--ff-acumin);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--txt-secondary);
    max-width: 28rem;
    text-align: center;
}

@media (min-width: 768px) {
    .bhm-auth__subtitle {
        font-size: 1.25rem;
    }
}

.bhm-auth__subtitle--highlight {
    color: var(--txt-primary);
    font-weight: 600;
}

/* ── Form ── */
.bhm-auth__form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Input field ── */
.bhm-auth__field {
    position: relative;
    width: 100%;
}

.bhm-auth__input {
    width: 100%;
    height: 3.4375rem;
    padding: 0 1.25rem;
    font-family: var(--ff-base);
    font-size: 1rem;
    color: var(--txt-primary);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-medium);
    border-radius: 0.5rem;
    outline: none;
    transition: border-color var(--t-base);
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.bhm-auth__input::placeholder {
    color: var(--txt-tertiary);
}

.bhm-auth__input:focus {
    border-color: var(--border-dark);
}

.bhm-auth__input.is-error {
    border-color: #e53935;
}

/* ── Password toggle ── */
.bhm-auth__eye {
    position: absolute;
    top: 50% !important;
    right: 1rem;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--txt-secondary);
    font-size: 1.375rem;
    line-height: 1;
    transition: color var(--t-base);
}

.bhm-auth__eye:hover {
    color: var(--txt-primary);
}

/* ── Error message ── */
.bhm-auth__error {
    display: block;
    margin-top: 0.375rem;
    font-family: var(--ff-base);
    font-size: 0.8125rem;
    color: #e53935;
}

/* ── Forgot password link ── */
.bhm-auth__forgot {
    display: flex;
    justify-content: flex-end;
}

.bhm-auth__forgot a {
    font-family: var(--ff-acumin);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--txt-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--t-base);
}

.bhm-auth__forgot a:hover {
    color: var(--txt-secondary);
}

/* ── Submit button ── */
.bhm-auth__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 3.4375rem;
    padding: 0 1.5rem;
    font-family: var(--ff-teko);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-radius: 0.75rem;
    cursor: pointer;
    border: 1px solid var(--border-black);
    background-color: var(--bg-heavy);
    color: var(--txt-white);
    transition:
        background-color var(--t-base),
        color var(--t-base),
        border-color var(--t-base),
        box-shadow var(--t-base);
}

.bhm-auth__submit:hover:not(:disabled) {
    background-color: var(--bg-primary);
    color: var(--txt-primary);
    box-shadow: 0 4px 16px rgba(var(--c-black-rgb), 0.12);
}

.bhm-auth__submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (min-width: 768px) {
    .bhm-auth__submit {
        height: 3.75rem;
    }
}

/* ── Footer link ── */
.bhm-auth__footer {
    text-align: center;
    font-family: var(--ff-acumin);
    font-size: 1rem;
    color: var(--txt-primary);
    line-height: 1.5;
}

@media (min-width: 768px) {
    .bhm-auth__footer {
        font-size: 1.125rem;
    }
}

.bhm-auth__footer a {
    font-weight: 600;
    color: var(--txt-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--t-base);
}

.bhm-auth__footer a:hover {
    color: var(--txt-secondary);
}

/* ── Back link ── */
.bhm-auth__back {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--ff-acumin);
    font-size: 1rem;
    font-weight: 500;
    color: var(--txt-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--t-base);
}

.bhm-auth__back:hover {
    color: var(--txt-secondary);
}

/* ── OTP inputs ── */
.bhm-auth__otp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.bhm-auth__otp-input {
    width: 3.4375rem;
    height: 3.4375rem;
    text-align: center;
    font-family: var(--ff-teko);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--txt-primary);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-medium);
    border-radius: 0.5rem;
    outline: none;
    transition: border-color var(--t-base);
    -webkit-appearance: none;
    appearance: none;
}

.bhm-auth__otp-input:focus {
    border-color: var(--border-dark);
}

.bhm-auth__otp-input.is-error {
    border-color: #e53935;
}

/* ── Timer ── */
.bhm-auth__timer {
    text-align: center;
    font-family: var(--ff-acumin);
    font-size: 1rem;
    color: var(--txt-secondary);
}

.bhm-auth__timer-value {
    color: var(--txt-primary);
    font-weight: 600;
}

.bhm-auth__timer-value--expired {
    color: #e53935;
}

/* ── Resend ── */
.bhm-auth__resend {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.bhm-auth__resend p {
    font-family: var(--ff-base);
    font-size: 0.875rem;
    color: var(--txt-secondary);
}

.bhm-auth__resend-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--ff-acumin);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--txt-primary);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    transition: color var(--t-base);
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bhm-auth__resend-btn:hover:not(:disabled) {
    color: var(--txt-secondary);
}

.bhm-auth__resend-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Lockout banner ── */
.bhm-auth__lockout {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e53935;
    border-radius: 0.5rem;
    background-color: rgba(229, 57, 53, 0.1);
    color: #e53935;
    text-align: center;
    font-family: var(--ff-base);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.bhm-auth__lockout strong {
    display: block;
    margin-bottom: 0.25rem;
}

/* ── Spinner ── */
.bhm-auth__spinner {
    width: 1.25rem;
    height: 1.25rem;
    animation: bhm-spin 0.8s linear infinite;
    flex-shrink: 0;
}

.bhm-auth-theme-toggle {
    position: fixed;
    bottom: 1.25rem;
    left: 1.25rem;
    z-index: 100;
    background-color: var(--bg-primary);
    padding: 0.5rem 0.75rem;
    border-radius: 2rem;
    border: 1px solid var(--border-medium);
    box-shadow: 0 2px 8px rgba(var(--c-black-rgb), 0.1);
}






/* ============================================================
   USER DASHBOARD
   ============================================================ */

.bhm-dashboard {
    padding: 0 0.625rem 6.25rem;
}

@media (min-width: 768px) {
    .bhm-dashboard {
        padding: 0 1.25rem 6.25rem;
    }
}

/* ── Welcome banner ── */
.bhm-dashboard-banner {
    width: calc(100% + 1.25rem);
    margin-left: -0.625rem;
    margin-right: -0.625rem;
    background-color: var(--bg-heavy);
    color: var(--txt-white);
    padding: 2.5rem 0.625rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .bhm-dashboard-banner {
        width: calc(100% + 2.5rem);
        margin-left: -1.25rem;
        margin-right: -1.25rem;
        padding: 3.5rem 1.25rem;
        margin-bottom: 3rem;
    }
}

.bhm-dashboard-banner__title {
    font-family: var(--ff-teko);
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    color: var(--txt-white);
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .bhm-dashboard-banner__title {
        font-size: 3.75rem;
    }
}

.bhm-dashboard-banner__sub {
    font-family: var(--ff-acumin);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
}

@media (min-width: 768px) {
    .bhm-dashboard-banner__sub {
        font-size: 1.25rem;
    }
}

/* ── Stats row ── */
.bhm-dashboard-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .bhm-dashboard-stats {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
        margin-bottom: 3rem;
    }
}

.bhm-dashboard-stat {
    background-color: var(--bg-gray);
    border-radius: 0.75rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bhm-dashboard-stat__label {
    font-family: var(--ff-base);
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--txt-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bhm-dashboard-stat__value {
    font-family: var(--ff-teko);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
    color: var(--txt-primary);
}

@media (min-width: 768px) {
    .bhm-dashboard-stat__value {
        font-size: 2.5rem;
    }
}

.bhm-dashboard-stat__sub {
    font-family: var(--ff-base);
    font-size: 0.75rem;
    color: var(--txt-secondary);
}

/* ── Section heading ── */
.bhm-dashboard-section__title {
    font-family: var(--ff-teko);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    color: var(--txt-primary);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light);
}

@media (min-width: 768px) {
    .bhm-dashboard-section__title {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }
}

/* ── Donations table ── */
.bhm-dashboard-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 0.75rem;
    border: 1px solid var(--border-light);
}

.bhm-dashboard-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--ff-base);
    font-size: 0.9375rem;
}

.bhm-dashboard-table th {
    background-color: var(--bg-gray);
    color: var(--txt-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.875rem 1.25rem;
    text-align: left;
    white-space: nowrap;
}

.bhm-dashboard-table td {
    padding: 1rem 1.25rem;
    color: var(--txt-primary);
    border-top: 1px solid var(--border-light);
    vertical-align: middle;
}

.bhm-dashboard-table tr:hover td {
    background-color: var(--bg-gray-light);
}

/* ── Status badges ── */
.bhm-dashboard-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.bhm-dashboard-badge--pending {
    background-color: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.bhm-dashboard-badge--approved {
    background-color: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.bhm-dashboard-badge--rejected {
    background-color: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

/* ── Empty state ── */
.bhm-dashboard-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 1.25rem;
    text-align: center;
    gap: 0.75rem;
    border: 1px dashed var(--border-medium);
    border-radius: 0.75rem;
}

.bhm-dashboard-empty__title {
    font-family: var(--ff-teko);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--txt-primary);
    text-transform: uppercase;
}

.bhm-dashboard-empty__text {
    font-family: var(--ff-base);
    font-size: 0.9375rem;
    color: var(--txt-secondary);
    max-width: 24rem;
    line-height: 1.6;
}

/* ── Quick links ── */
.bhm-dashboard-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .bhm-dashboard-links {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
}

.bhm-dashboard-link {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    background-color: var(--bg-gray);
    border-radius: 0.75rem;
    text-decoration: none;
    border: 1px solid var(--border-light);
    transition:
        background-color var(--t-base),
        border-color var(--t-base);
}

.bhm-dashboard-link:hover {
    background-color: var(--bg-heavy);
    border-color: var(--bg-heavy);
}

.bhm-dashboard-link:hover .bhm-dashboard-link__title,
.bhm-dashboard-link:hover .bhm-dashboard-link__sub {
    color: var(--txt-white);
}

.bhm-dashboard-link__title {
    font-family: var(--ff-teko);
    font-size: 1.125rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--txt-primary);
    line-height: 1;
    transition: color var(--t-base);
}

.bhm-dashboard-link__sub {
    font-family: var(--ff-base);
    font-size: 0.8125rem;
    color: var(--txt-secondary);
    line-height: 1.4;
    transition: color var(--t-base);
}

/* ── Logout button ── */
.bhm-dashboard-logout {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--border-medium);
    border-radius: 0.5rem;
    background: none;
    font-family: var(--ff-teko);
    font-size: 1.125rem;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--txt-primary);
    cursor: pointer;
    transition:
        background-color var(--t-base),
        border-color var(--t-base),
        color var(--t-base);
}

.bhm-dashboard-logout:hover {
    background-color: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}