.header-fluid {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}

.header-fluid.site-header__brand,
.header-fluid.brand {
    display: flex;
    gap: 16px;
}

.header-fluid__content {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

.header-fluid__content h1,
.header-fluid__content h2,
.header-fluid__content img {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.header-fluid.is-active .header-fluid__content h1,
.header-fluid.is-active .header-fluid__content h2 {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    background-repeat: no-repeat;
}

.header-fluid__logo-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
}

.header-fluid__logo-wrap img {
    display: block;
}

.header-fluid.is-active .header-fluid__logo-wrap img {
    opacity: 0 !important;
}

.header-fluid__canvas {
    position: absolute;
    z-index: 2;
    opacity: 0;
    pointer-events: auto;
    touch-action: none;
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .header-fluid__canvas {
        display: none !important;
    }

    .header-fluid.is-active .header-fluid__content h1,
    .header-fluid.is-active .header-fluid__content h2 {
        color: inherit !important;
        -webkit-text-fill-color: inherit !important;
        background-image: none !important;
    }

    .header-fluid.is-active .header-fluid__logo-wrap img {
        opacity: 1 !important;
    }
}