/* =========================================================
   BLUSUP MASTER DESIGN SYSTEM
   =========================================================
   This file is the main visual control panel for BluSup,
   BelizeBlue, and future projects.

   HOW THIS WORKS
   - This file loads BEFORE styles.css and any project CSS.
   - Other stylesheets use these values with var(--name).
   - Change a value here, and every file that uses that
     variable will update automatically.

   QUICK GUIDE FOR BACKGROUND CHANGES
   - --bs-page-bg     = fallback page background
                        (usually hidden under the sky gradient)
   - --bs-sky-top     = TOP color of the visible page gradient
   - --bs-sky-bottom  = BOTTOM color of the visible page gradient

   IF YOU WANT TO CHANGE THE VISIBLE SITE BACKGROUND
   - Change --bs-sky-top   (top of gradient)
   - Change --bs-sky-bottom (bottom of gradient)

   SAFE EDITING TIP
   - Change ONE value at a time
   - Save
   - Refresh the page
   ========================================================= */

:root {

    /* =====================================================
       1) TYPOGRAPHY
       -----------------------------------------------------
       Core font used throughout the entire platform.
       ===================================================== */
    --bs-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bs-font-logo: Georgia, 'Times New Roman', serif;
    --bs-font-location: var(--bs-font-sans);


    /* =====================================================
       2) PAGE BACKGROUND SYSTEM
       -----------------------------------------------------
       These control the overall page backdrop.

       IMPORTANT:
       The visible BluSup / BelizeBlue background is mainly
       controlled by the sky gradient below, not by the
       fallback page background.

       TO CHANGE WHAT YOU ACTUALLY SEE:
       - adjust --bs-sky-top
       - adjust --bs-sky-bottom
       ===================================================== */

    /* Top color of the visible site gradient */
    --bs-sky-top: #e6f3fb;

    /* Bottom color of the visible site gradient */
    --bs-sky-bottom: #cfe4f2;

        /* Fallback page background underneath everything */
    --bs-page-bg: var(--bs-sky-bottom);

    /* =====================================================
       3) TEXT COLORS
       -----------------------------------------------------
       These control body text, headings, and softer helper
       text across the platform.
       ===================================================== */

    /* Main body text color */
    --bs-text: #102333;

    /* Heading / strong emphasis text color */
    --bs-text-strong: #071522;

    /* Softer supporting text color */
    --bs-text-soft: #132a3b;


    /* =====================================================
       4) LINE SPACING SYSTEM
       -----------------------------------------------------
       These make global spacing adjustments easier.

       HOW TO USE:
       - Lower number = tighter spacing
       - Higher number = more breathing room
       ===================================================== */

    /* General page text spacing */
    --bs-line-body: 1.18;

    /* Tighter descriptive copy under titles */
    --bs-line-copy: 1.08;

    /* Paragraphs inside cards and panels */
    --bs-line-card: 1.16;

    /* Bullets and short lists */
    --bs-line-list: 1.16;

    /* Section and card headings */
    --bs-line-title: 1.02;

    /* Large display headlines */
    --bs-line-display: 0.95;

    /* Ultra-tight compact UI labels / buttons */
    --bs-line-compact: 1;


    /* =====================================================
       5) BRAND / ACCENT COLORS
       -----------------------------------------------------
       These control the blue accents used throughout the UI.
       ===================================================== */

    /* Main BluSup accent color */
    --bs-accent: #2f6f90;

    /* Darker accent for stronger contrast */
    --bs-accent-dark: #113d59;

    /* Light accent wash for subtle fills */
    --bs-accent-soft: rgba(47, 111, 144, 0.12);

    /* Stronger accent wash for hover / emphasis */
    --bs-accent-soft-strong: rgba(47, 111, 144, 0.18);


    /* =====================================================
       6) CARD SYSTEM
       -----------------------------------------------------
       These control the main frosted card look used across
       BluSup and its projects.
       ===================================================== */

    /* Default card background */
    --bs-card-bg: rgba(255, 255, 255, 0.78);

    /* Slightly stronger card background for hover states */
    --bs-card-bg-strong: rgba(255, 255, 255, 0.9);

    /* Default card border color */
    --bs-card-border: rgba(47, 111, 144, 0.16);

    /* Default card shadow */
    --bs-card-shadow: 0 16px 34px rgba(12, 44, 70, 0.10);

    /* Stronger card shadow for hover states */
    --bs-card-shadow-hover: 0 22px 44px rgba(12, 44, 70, 0.16), 0 0 22px rgba(47, 111, 144, 0.10);


    /* =====================================================
       7) PANELS / INNER SURFACES
       -----------------------------------------------------
       Used for highlight boxes, inner panels, logo panels,
       and secondary surfaces.
       ===================================================== */

    /* Default panel background */
    --bs-panel-bg: rgba(255, 255, 255, 0.66);

    /* Default panel border */
    --bs-panel-border: rgba(47, 111, 144, 0.14);

    /* Slightly stronger panel border */
    --bs-panel-border-strong: rgba(47, 111, 144, 0.18);


    /* =====================================================
       8) BUTTON SYSTEM
       -----------------------------------------------------
       Controls the button look across BluSup and projects.
       ===================================================== */

    /* Default button background */
    --bs-button-bg: linear-gradient(180deg, rgba(248, 252, 255, 0.96) 0%, rgba(217, 231, 240, 0.98) 100%);

    /* Hover button background */
    --bs-button-bg-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(222, 238, 247, 1) 100%);

    /* Softer background for secondary buttons */
    --bs-button-bg-soft: linear-gradient(180deg, rgba(247, 251, 253, 0.90) 0%, rgba(236, 245, 250, 0.96) 100%);

    /* Default button border */
    --bs-button-border: rgba(47, 111, 144, 0.34);

    /* Hover button border */
    --bs-button-border-hover: rgba(47, 111, 144, 0.48);


    /* =====================================================
       9) FORM FIELDS
       -----------------------------------------------------
       Inputs, selects, and textareas.
       ===================================================== */

    /* Default input background */
    --bs-input-bg: rgba(255, 255, 255, 0.78);


    /* =====================================================
       10) SHAPE + LAYOUT
       -----------------------------------------------------
       Shared sizing for corners and page width.
       ===================================================== */

    /* Main card corner rounding */
    --bs-radius-card: 24px;

    /* Pill-style rounding for buttons/chips */
    --bs-radius-pill: 999px;

    /* Maximum content width */
    --bs-content-width: 1240px;
}


/* =========================================================
   11) QUIET PAGE TRANSITIONS
   ---------------------------------------------------------
   Soft fade-in used for context-menu navigation only.
   ========================================================= */

.bs-app-shell {
    will-change: opacity;
}

html.bs-nav-enter .bs-app-shell,
html.bs-nav-prep .bs-app-shell {
    transition: opacity 220ms ease;
}

html.bs-nav-prep .bs-app-shell {
    opacity: 0;
}

@media (pointer: coarse), (max-width: 900px), (prefers-reduced-motion: reduce) {
    .bs-app-shell,
    .bs-hero {
        transition: none !important;
        transform: none !important;
        translate: none !important;
        rotate: none !important;
        will-change: auto !important;
    }

    html.bs-nav-prep .bs-app-shell,
    html.bs-nav-prep .bs-hero {
        opacity: 1 !important;
    }
}


.bs-nav-cover {
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, var(--bs-sky-top) 0%, var(--bs-sky-bottom) 100%);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
}

.bs-nav-cover.active {
    opacity: 1;
}

@media (pointer: coarse), (max-width: 900px) {
    .bs-nav-cover {
        transition: none;
    }
}


/* Shared BluSup section dividers for auto-built Quick Nav */
.bs-app-top-anchor {
    display: block;
    position: relative;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.bs-section-divider,
.bb-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin: 1.25rem 0 1.05rem;
    text-align: center;
    border-radius: 999px;
}

.bs-section-divider::before,
.bs-section-divider::after,
.bb-divider::before,
.bb-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(47,111,144,0.02) 0%, rgba(47,111,144,0.22) 18%, rgba(47,111,144,0.22) 82%, rgba(47,111,144,0.02) 100%);
}

.bs-section-divider > span,
.bb-divider > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    min-height: 38px;
    max-width: min(100%, 680px);
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(47,111,144,0.18);
    background: linear-gradient(180deg, rgba(247,250,253,0.98) 0%, rgba(232,241,248,0.98) 100%);
    color: #204560;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.1;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
    overflow-wrap: anywhere;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

.bs-section-divider[data-bs-nav],
.bb-divider[data-bs-nav] {
    scroll-margin-top: 2px;
}

.bs-section-divider-next {
    cursor: pointer;
    touch-action: manipulation;
}

.bs-section-divider-next > span {
    min-height: 44px;
    border-color: rgba(47,111,144,0.28);
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(229,242,249,0.98) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.96), 0 8px 18px rgba(12,44,70,0.07);
}

.bs-section-divider-next > span::after {
    content: "\2193";
    flex: 0 0 auto;
    color: rgba(47,111,144,0.78);
    font-size: 0.92em;
    line-height: 1;
}

.bs-section-divider-next:hover > span,
.bs-section-divider-next:focus-visible > span {
    border-color: rgba(47,111,144,0.42);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(221,238,247,1) 100%);
    color: #153b56;
    box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 10px 22px rgba(12,44,70,0.10);
}

.bs-section-divider-next:focus-visible {
    outline: 3px solid rgba(47,111,144,0.28);
    outline-offset: 4px;
}

.bs-section-divider-next:active > span {
    transform: translateY(1px);
}

@media (max-width: 700px) {
    .bs-section-divider,
    .bb-divider {
        gap: 0.65rem;
        margin: 1.05rem 0 0.9rem;
    }

    .bs-section-divider > span,
    .bb-divider > span {
        min-height: 38px;
        padding: 0.46rem 0.82rem;
        font-size: 0.78rem;
    }

    .bs-section-divider-next > span {
        min-height: 44px;
    }
}


/* =========================================================
   12) SHARED BLUSUP COMMON HEADER
   ---------------------------------------------------------
   One stable header identity for BS, BB, BH, and generated sites.
   This section replaces the stacked patch rules with one clean source.
   ========================================================= */

.bs-common-brand,
.bs-logo-stage .bs-common-brand,
.bs-app-shell > .bs-common-brand,
a.bs-common-brand.bs-smart-site-back {
    width: min(100%, 760px);
    max-width: calc(100vw - 2rem);
    margin: 0 auto 0.95rem;
    padding: 0;
    display: grid;
    justify-items: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: var(--bs-text-strong);
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
    filter: drop-shadow(0 16px 30px rgba(12, 44, 70, 0.13));
    animation: bsBrandRiseStable 0.72s ease-out both;
    opacity: 1;
    position: relative;
    z-index: 10;
}

.bs-common-brand-wave-wrap {
    display: block;
    line-height: 0;
    width: min(92vw, 549px);
    max-width: 549px;
}

.bs-common-brand-wave {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.bs-common-brand-copy {
    position: absolute;
    left: 55.6%;
    right: 3.8%;
    top: 35%;
    display: grid;
    justify-items: start;
    align-items: center;
    gap: 0.22rem;
    margin: 0;
    padding: 0;
    text-align: left;
    line-height: 1;
    min-width: 0;
    pointer-events: none;
}

.bs-common-brand-name {
    display: block;
    max-width: 100%;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 650;
    letter-spacing: 0.005em;
    color: #07106f;
    font-size: clamp(2rem, 3.45vw, 3.2rem);
    line-height: 0.98;
    white-space: nowrap;
    text-shadow: 0 2px 0 rgba(255,255,255,0.72), 0 10px 24px rgba(12,34,80,0.16);
}

.bs-common-brand-location {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 6.6rem;
    max-width: 100%;
    margin: 0;
    padding: 0.18rem 0.92rem 0.27rem;
    border-radius: 999px;
    border: 1px solid rgba(35,154,214,0.42);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(232,249,255,0.94));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.96), 0 8px 18px rgba(40,128,176,0.10);
    font-family: var(--bs-font-sans);
    font-style: normal;
    font-weight: 750;
    letter-spacing: 0.01em;
    color: #0498df;
    font-size: clamp(0.78rem, 1.16vw, 0.98rem);
    line-height: 1.02;
    white-space: nowrap;
}

.bs-common-brand:hover,
.bs-common-brand:focus-visible {
    transform: translateY(-1px);
}

/* Common, softer text rhythm across BS, BB, and BH. */
.bs-home-page,
.bs-app-page,
.bs-hero {
    background: linear-gradient(180deg, var(--bs-sky-top) 0%, var(--bs-sky-bottom) 100%);
}

.bs-home-page .bs-app-shell,
.bs-home-shell {
    width: min(calc(100% - 2rem), var(--bs-content-width));
    margin: 0 auto;
    padding: 0.7rem 0 1.25rem;
}

.bs-home-page .bs-logo-stage {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0;
}

.bs-home-page .bs-copy,
.bs-home-copy {
    width: min(100%, 1180px);
    text-align: center;
    margin: 0 auto;
}

.bs-home-page .bs-copy > h1,
.bs-home-copy > h1 {
    max-width: 1050px;
    margin: 0.35rem auto 0.55rem;
    font-family: var(--bs-font-sans);
    font-size: clamp(2.25rem, 4.6vw, 3.8rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
    font-weight: 675;
    color: var(--bs-text-strong);
    text-wrap: balance;
}

.bs-home-page .bs-copy > p,
.bs-home-copy > p,
.bh-site-intro p,
.bb-header .bs-app-copy p,
.bs-app-copy p {
    font-family: var(--bs-font-sans);
    font-weight: 500;
    letter-spacing: -0.012em;
    line-height: 1.28;
    color: var(--bs-text-soft);
    text-wrap: balance;
}

.bs-home-page .bs-copy > p,
.bs-home-copy > p {
    max-width: 1120px;
    font-size: clamp(1.12rem, 1.85vw, 1.34rem);
}

.bs-choice-card strong,
.bs-app-card h2,
.bs-app-card h3,
.bb-section h2,
.bb-hero-card h2,
.bb-tour-card h3,
.bb-mini-card h3,
.bh-showcase-copy h2,
.bh-section-head-row h2,
.bh-listing-card h3,
.bh-category-card h3 {
    font-family: var(--bs-font-sans);
    font-weight: 675;
    letter-spacing: -0.028em;
    line-height: 1.06;
    color: var(--bs-text-strong);
}

.bs-choice-card span:not(.bs-choice-kicker),
.bs-app-card p:not(.bs-app-eyebrow),
.bs-app-card li,
.bb-section p,
.bb-hero-card p,
.bb-tour-card p,
.bh-lead,
.bh-listing-card p,
.bh-category-card p {
    font-weight: 450;
    letter-spacing: -0.01em;
    line-height: 1.35;
}

.bs-choice-kicker,
.bs-app-eyebrow,
.bs-project-kicker,
.bb-divider span,
.bs-divider span {
    font-weight: 700;
    letter-spacing: 0.14em;
}

.bh-page-nav-link,
.bb-btn,
.bs-app-home-link,
.bs-builder-submit {
    font-weight: 675;
    letter-spacing: -0.01em;
}

@media (max-width: 860px) {
    .bs-common-brand,
    .bs-logo-stage .bs-common-brand,
    .bs-app-shell > .bs-common-brand,
    a.bs-common-brand.bs-smart-site-back {
        width: min(100%, calc(100vw - 1rem));
        max-width: calc(100vw - 1rem);
        margin-bottom: 0.72rem;
    }

    .bs-common-brand-wave-wrap {
        width: min(92vw, 500px);
        max-width: 500px;
    }

    .bs-common-brand-copy {
        left: 57.5%;
        right: 2.4%;
        top: 36%;
        gap: 0.16rem;
    }

    .bs-common-brand-name {
        font-size: clamp(1.45rem, 5.4vw, 2.55rem);
        letter-spacing: 0.012em;
    }

    .bs-common-brand-location {
        min-width: 5.4rem;
        padding: 0.14rem 0.68rem 0.22rem;
        font-size: clamp(0.66rem, 2.25vw, 0.88rem);
    }

    .bs-home-page .bs-copy > h1,
    .bs-home-copy > h1 {
        font-size: clamp(2rem, 6.4vw, 3.1rem);
        line-height: 1.04;
    }
}

@media (max-width: 520px) {
    .bs-common-brand-wave-wrap {
        width: min(94vw, 420px);
    }

    .bs-common-brand-copy {
        left: 59.5%;
        right: 1.6%;
        top: 36.5%;
        gap: 0.12rem;
    }

    .bs-common-brand-name {
        font-size: clamp(1.02rem, 6.1vw, 1.66rem);
        letter-spacing: 0.015em;
        line-height: 1;
    }

    .bs-common-brand-location {
        min-width: auto;
        padding: 0.10rem 0.46rem 0.16rem;
        font-size: clamp(0.54rem, 2.65vw, 0.72rem);
    }

    .bs-home-page .bs-app-shell,
    .bs-home-shell {
        width: min(calc(100% - 1.25rem), var(--bs-content-width));
        padding-top: 0.55rem;
    }

    .bs-home-page .bs-copy > h1,
    .bs-home-copy > h1 {
        font-size: clamp(1.65rem, 8vw, 2.4rem);
        letter-spacing: -0.036em;
        line-height: 1.05;
        margin-top: 0.28rem;
    }

    .bs-home-page .bs-copy > p,
    .bs-home-copy > p {
        font-size: 1rem;
        line-height: 1.26;
    }
}

@media (max-width: 380px) {
    .bs-common-brand-copy {
        left: 60.5%;
        right: 1.2%;
        top: 37%;
    }

    .bs-common-brand-name {
        font-size: clamp(0.94rem, 6vw, 1.42rem);
    }

    .bs-common-brand-location {
        font-size: clamp(0.5rem, 2.4vw, 0.64rem);
        padding-left: 0.38rem;
        padding-right: 0.38rem;
    }
}


/* === Common wave header refinement: one position and one readable title system === */
.bs-common-brand,
.bs-logo-stage .bs-common-brand,
.bs-app-shell > .bs-common-brand,
a.bs-common-brand.bs-smart-site-back {
    width: min(100%, 760px);
    margin: 0 auto 0.9rem;
}

.bs-common-brand-copy {
    left: 55.2%;
    right: 3.5%;
    top: 35.4%;
    gap: 0.2rem;
}

.bs-common-brand-name {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0.018em;
    font-size: clamp(2rem, 3.15vw, 3rem);
    line-height: 1.02;
}

.bs-common-brand-location {
    font-family: var(--bs-font-sans);
    font-weight: 700;
    letter-spacing: 0.012em;
}

@media (max-width: 860px) {
    .bs-common-brand-copy {
        left: 59%;
        right: 1.5%;
        top: 35.6%;
    }

    .bs-common-brand-name {
        font-size: clamp(1.25rem, 5.1vw, 2.25rem);
        letter-spacing: 0.02em;
        line-height: 1.02;
    }
}

@media (max-width: 520px) {
    .bs-common-brand-wave-wrap {
        width: min(95vw, 420px);
    }

    .bs-common-brand-copy {
        left: 62%;
        right: 0.7%;
        top: 35.4%;
    }

    .bs-common-brand-name {
        font-size: clamp(0.92rem, 5.55vw, 1.48rem);
        letter-spacing: 0.018em;
    }

    .bs-common-brand-location {
        font-size: clamp(0.5rem, 2.45vw, 0.68rem);
    }
}

/* === BS/BH/BB HEADER + PROGRAM COPY FINAL LOCK 4-26-0950 ===
   One visual standard: title sits in the clear area beside the globe,
   program copy under the wave uses the same readable BluSup typography. */
.bs-common-brand,
.bs-logo-stage .bs-common-brand,
.bs-app-shell > .bs-common-brand,
a.bs-common-brand.bs-smart-site-back {
    width: min(100%, 760px) !important;
    max-width: calc(100vw - 1rem) !important;
    margin: 0 auto 0.92rem !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    position: relative !important;
}

.bs-common-brand-wave-wrap {
    width: min(92vw, 549px) !important;
    max-width: 549px !important;
}

.bs-common-brand-copy {
    left: 53.2% !important;
    right: 4.2% !important;
    top: 36.2% !important;
    transform: none !important;
    display: grid !important;
    justify-items: start !important;
    align-items: center !important;
    gap: 0.2rem !important;
    text-align: left !important;
    min-width: 0 !important;
}

.bs-common-brand-name {
    font-family: Georgia, "Times New Roman", serif !important;
    font-style: italic !important;
    font-weight: 600 !important;
    letter-spacing: 0.012em !important;
    color: #07106f !important;
    font-size: clamp(2rem, 3.2vw, 3rem) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-shadow: 0 2px 0 rgba(255,255,255,0.74), 0 10px 24px rgba(12,34,80,0.15) !important;
}

.bs-common-brand-location {
    justify-self: start !important;
    min-width: 6.6rem !important;
    padding: 0.16rem 0.88rem 0.24rem !important;
    font-family: var(--bs-font-sans) !important;
    font-weight: 700 !important;
    letter-spacing: 0.005em !important;
    font-size: clamp(0.76rem, 1.05vw, 0.94rem) !important;
    line-height: 1.02 !important;
}

body,
body.bs-root-home,
body.bs-app-page,
.bs-app-page,
.bs-root-home,
.bs-home-page {
    background: linear-gradient(180deg, var(--bs-sky-top) 0%, var(--bs-sky-bottom) 100%) !important;
}

.bs-root-home .bs-app-shell,
.bs-app-shell {
    background: transparent !important;
}

.bs-program-copy,
.bs-root-copy,
.bh-site-intro,
.bb-site-intro {
    width: min(100%, 1120px) !important;
    margin: 0.95rem auto 1.05rem !important;
    text-align: center !important;
}

.bs-program-copy h1,
.bs-root-copy > h1,
.bh-site-intro h1,
.bb-site-intro h1 {
    max-width: 980px !important;
    margin: 0 auto 0.52rem !important;
    font-family: var(--bs-font-sans) !important;
    font-size: clamp(2.05rem, 4.15vw, 3.45rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.038em !important;
    font-weight: 650 !important;
    color: var(--bs-text-strong) !important;
    text-wrap: balance !important;
}

.bs-program-copy p,
.bs-root-copy > p,
.bh-site-intro p,
.bb-site-intro p {
    max-width: 1040px !important;
    margin: 0 auto !important;
    font-family: var(--bs-font-sans) !important;
    font-size: clamp(1.04rem, 1.55vw, 1.22rem) !important;
    line-height: 1.28 !important;
    letter-spacing: -0.01em !important;
    font-weight: 460 !important;
    color: var(--bs-text-soft) !important;
    text-wrap: balance !important;
}

.bh-page-nav {
    margin-top: 1.2rem !important;
}

.bb-hero-top {
    margin-top: 1.1rem !important;
}

.bs-choice-card strong,
.bs-app-card h2,
.bs-app-card h3,
.bb-section h2,
.bb-hero-card h2,
.bb-tour-card h3,
.bb-mini-card h3,
.bh-showcase-copy h2,
.bh-section-head-row h2,
.bh-listing-card h3,
.bh-category-card h3 {
    font-family: var(--bs-font-sans) !important;
    font-weight: 650 !important;
    letter-spacing: -0.032em !important;
    line-height: 1.07 !important;
    color: var(--bs-text-strong) !important;
}

.bh-page-nav-link,
.bb-btn,
.bs-app-home-link,
.bs-builder-submit {
    font-family: var(--bs-font-sans) !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em !important;
}

@media (max-width: 860px) {
    .bs-common-brand-wave-wrap {
        width: min(92vw, 500px) !important;
        max-width: 500px !important;
    }

    .bs-common-brand-copy {
        left: 55.2% !important;
        right: 1.8% !important;
        top: 36.4% !important;
        gap: 0.14rem !important;
    }

    .bs-common-brand-name {
        font-size: clamp(1.35rem, 5.5vw, 2.35rem) !important;
        letter-spacing: 0.012em !important;
        line-height: 1 !important;
    }

    .bs-common-brand-location {
        min-width: 5.2rem !important;
        padding: 0.12rem 0.62rem 0.2rem !important;
        font-size: clamp(0.62rem, 2.25vw, 0.84rem) !important;
    }

    .bs-program-copy,
    .bs-root-copy,
    .bh-site-intro,
    .bb-site-intro {
        margin-top: 0.78rem !important;
        margin-bottom: 0.95rem !important;
        width: min(100%, 94vw) !important;
    }

    .bs-program-copy h1,
    .bs-root-copy > h1,
    .bh-site-intro h1,
    .bb-site-intro h1 {
        max-width: 94vw !important;
        font-size: clamp(1.82rem, 7.2vw, 2.85rem) !important;
        line-height: 1.06 !important;
        letter-spacing: -0.032em !important;
    }

    .bs-program-copy p,
    .bs-root-copy > p,
    .bh-site-intro p,
    .bb-site-intro p {
        max-width: 94vw !important;
        font-size: clamp(0.98rem, 4vw, 1.12rem) !important;
        line-height: 1.28 !important;
    }
}

@media (max-width: 520px) {
    .bs-common-brand-wave-wrap {
        width: min(94vw, 420px) !important;
    }

    .bs-common-brand-copy {
        left: 55.8% !important;
        right: 1.2% !important;
        top: 36.6% !important;
    }

    .bs-common-brand-name {
        font-size: clamp(1.02rem, 5.75vw, 1.62rem) !important;
        letter-spacing: 0.012em !important;
    }

    .bs-common-brand-location {
        padding: 0.09rem 0.42rem 0.15rem !important;
        font-size: clamp(0.52rem, 2.55vw, 0.70rem) !important;
    }

    .bs-program-copy h1,
    .bs-root-copy > h1,
    .bh-site-intro h1,
    .bb-site-intro h1 {
        font-size: clamp(1.55rem, 8vw, 2.32rem) !important;
        letter-spacing: -0.032em !important;
        line-height: 1.06 !important;
    }
}


/* === BS/BH/BB HEADER TEXT SIZE + INTRO RHYTHM LOCK 4-26-1012 ===
   Shared sizing pass: bigger logo text, stronger pill, consistent intro rhythm. */
body .bs-common-brand .bs-common-brand-copy {
    left: 51.8% !important;
    top: 36.2% !important;
}

body .bs-common-brand .bs-common-brand-name {
    font-size: clamp(2.35rem, 3.65vw, 3.55rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.018em !important;
    line-height: 1 !important;
}

body .bs-common-brand .bs-common-brand-location {
    min-width: 7.4rem !important;
    padding: 0.2rem 1rem 0.28rem !important;
    font-size: clamp(0.92rem, 1.28vw, 1.15rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.018em !important;
    line-height: 1.02 !important;
}

body .bs-program-copy,
body .bs-root-copy,
body .bs-program-copy.bh-site-intro,
body .bs-program-copy.bb-site-intro {
    width: min(100%, 1120px) !important;
    max-width: 1120px !important;
    margin: 0.88rem auto 1.02rem !important;
    text-align: center !important;
}

body .bs-program-copy h1,
body .bs-root-copy > h1,
body .bs-program-copy.bh-site-intro h1,
body .bs-program-copy.bb-site-intro h1 {
    max-width: 980px !important;
    margin: 0 auto 0.52rem !important;
    font-size: clamp(2.05rem, 4.15vw, 3.45rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.038em !important;
    font-weight: 650 !important;
    color: var(--bs-text-strong) !important;
    text-wrap: balance !important;
}

body .bs-program-copy p,
body .bs-root-copy > p,
body .bs-program-copy.bh-site-intro p,
body .bs-program-copy.bb-site-intro p {
    max-width: 1060px !important;
    margin: 0 auto !important;
    font-size: clamp(1.22rem, 2.05vw, 1.52rem) !important;
    line-height: 1.26 !important;
    letter-spacing: -0.014em !important;
    font-weight: 500 !important;
    color: var(--bs-text-soft) !important;
    text-wrap: balance !important;
}

@media (max-width: 860px) {
    body .bs-common-brand .bs-common-brand-copy {
        left: 52.6% !important;
        top: 36.4% !important;
    }

    body .bs-common-brand .bs-common-brand-name {
        font-size: clamp(1.58rem, 6.25vw, 2.75rem) !important;
        letter-spacing: 0.018em !important;
    }

    body .bs-common-brand .bs-common-brand-location {
        min-width: 5.9rem !important;
        padding: 0.15rem 0.72rem 0.23rem !important;
        font-size: clamp(0.72rem, 2.7vw, 0.96rem) !important;
    }

    body .bs-program-copy,
    body .bs-root-copy,
    body .bs-program-copy.bh-site-intro,
    body .bs-program-copy.bb-site-intro {
        width: min(100%, 94vw) !important;
        max-width: 94vw !important;
        margin: 0.78rem auto 0.95rem !important;
    }

    body .bs-program-copy p,
    body .bs-root-copy > p,
    body .bs-program-copy.bh-site-intro p,
    body .bs-program-copy.bb-site-intro p {
        max-width: 94vw !important;
        font-size: clamp(1.08rem, 4.5vw, 1.30rem) !important;
        line-height: 1.27 !important;
    }
}

@media (max-width: 520px) {
    body .bs-common-brand .bs-common-brand-copy {
        left: 53% !important;
        top: 36.6% !important;
    }

    body .bs-common-brand .bs-common-brand-name {
        font-size: clamp(1.16rem, 6.65vw, 1.95rem) !important;
        letter-spacing: 0.018em !important;
    }

    body .bs-common-brand .bs-common-brand-location {
        padding: 0.11rem 0.5rem 0.17rem !important;
        font-size: clamp(0.58rem, 2.9vw, 0.78rem) !important;
    }
}

/* === APP COMMON HEADER LOCK 4-26-1037 ===
   Apps now use the same wave/title header component as BS, BH, and BB.
   Legacy small app-logo anchors stay in markup for safety but are hidden. */
.bs-app-page .bs-app-shell > .bs-app-logo-back {
    display: none !important;
}

.bs-app-header--common {
    width: 100% !important;
    margin: 0 auto 1rem !important;
    padding: 0 !important;
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.bs-app-header--common .bs-common-brand {
    margin-bottom: 0.7rem !important;
}

.bs-app-header--common .bs-app-copy {
    width: min(100%, 980px) !important;
    margin: 0.25rem auto 0 !important;
    text-align: center !important;
}

.bs-app-header--common .bs-app-copy p {
    max-width: 960px !important;
    margin: 0 auto !important;
    font-family: var(--bs-font-sans) !important;
    font-size: clamp(1.05rem, 1.55vw, 1.28rem) !important;
    line-height: 1.28 !important;
    letter-spacing: -0.012em !important;
    font-weight: 500 !important;
    color: var(--bs-text-soft) !important;
    text-wrap: balance !important;
}

.bs-app-page .bs-app-shell {
    background: transparent !important;
}

@media (max-width: 860px) {
    .bs-app-header--common .bs-app-copy {
        width: min(100%, 94vw) !important;
    }

    .bs-app-header--common .bs-app-copy p {
        max-width: 94vw !important;
        font-size: clamp(1rem, 4.1vw, 1.16rem) !important;
        line-height: 1.27 !important;
    }
}

@media (max-width: 520px) {
    .bs-app-header--common .bs-common-brand {
        margin-bottom: 0.55rem !important;
    }

    .bs-app-header--common .bs-app-copy p {
        font-size: clamp(0.95rem, 4.3vw, 1.08rem) !important;
    }
}

/* === COMMON WAVE HEADER ROOT FIX 4-26-1214 ===
   Root fix: the real shared header must never get stuck hidden.
   The current effect fades and rises as one grouped layer, so the wave
   and title stay visually connected during entry. Duplicate-header cleanup belongs
   in PHP/page-shell structure, not broad opacity hiding. */
@keyframes bsBrandRiseStable {
    0% {
        opacity: 0;
        transform: translate3d(0, 28px, 0) scale(0.985);
    }
    62% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

body .bs-app-shell > .bs-common-brand,
body .bs-logo-stage > .bs-common-brand,
body .bs-app-header--common > .bs-common-brand,
body a.bs-common-brand {
    display: grid !important;
    visibility: visible !important;
    opacity: 1;
    animation: bsBrandRiseStable 0.82s cubic-bezier(0.18, 0.84, 0.28, 1) both !important;
    will-change: transform, opacity;
    background: transparent !important;
    pointer-events: auto !important;
}

body .bs-common-brand .bs-common-brand-wave-wrap,
body .bs-common-brand .bs-common-brand-wave {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body .bs-common-brand .bs-common-brand-copy {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body .bs-common-brand .bs-common-brand-name,
body .bs-common-brand .bs-common-brand-location {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Only suppress true duplicate legacy image logos, not the shared wave header. */
body .bs-common-brand + .bs-app-logo-back,
body .bs-common-brand + .bs-logo-stage,
body .bs-common-brand + .bh-site-home-logo {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (pointer: coarse), (max-width: 900px) {
    body .bs-app-shell > .bs-common-brand,
    body .bs-logo-stage > .bs-common-brand,
    body .bs-app-header--common > .bs-common-brand,
    body a.bs-common-brand {
        animation-duration: 0.72s !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .bs-app-shell > .bs-common-brand,
    body .bs-logo-stage > .bs-common-brand,
    body .bs-app-header--common > .bs-common-brand,
    body a.bs-common-brand {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        will-change: auto !important;
    }
}

/* === WAVE HEADER CENTER / DUPLICATE REVIEW FIX 4-26-1428 ===
   Final override: keep one wave header centered, let long review/app titles wrap safely,
   and stop the logo/title from pushing off the right edge on laptop or mobile. */
body .bs-app-shell {
    overflow-x: hidden !important;
}

body .bs-app-shell > .bs-common-brand,
body .bs-logo-stage > .bs-common-brand,
body .bs-app-header--common > .bs-common-brand,
body a.bs-common-brand {
    width: min(100%, 1120px) !important;
    max-width: calc(100vw - 1rem) !important;
    margin: 0 auto 0.78rem !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

body .bs-common-brand .bs-common-brand-wave-wrap {
    width: min(94vw, 549px) !important;
    max-width: 549px !important;
    margin: 0 auto !important;
    display: block !important;
    line-height: 0 !important;
}

body .bs-common-brand .bs-common-brand-wave {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

body .bs-common-brand .bs-common-brand-copy {
    position: absolute !important;
    left: 51.5% !important;
    right: 1.5rem !important;
    top: 35.8% !important;
    width: auto !important;
    max-width: 520px !important;
    min-width: 0 !important;
    display: grid !important;
    justify-items: start !important;
    align-items: center !important;
    gap: 0.16rem !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

body .bs-common-brand .bs-common-brand-name {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-wrap: balance !important;
    font-size: clamp(1.75rem, 3.05vw, 3.1rem) !important;
    line-height: 0.98 !important;
}

body .bs-common-brand .bs-common-brand-location {
    max-width: 100% !important;
    white-space: nowrap !important;
}

body .bs-app-header--common .bs-common-brand .bs-common-brand-name {
    font-size: clamp(1.65rem, 2.85vw, 2.9rem) !important;
}

body .bs-app-header--common .bs-app-copy {
    margin-top: 0.2rem !important;
}

@media (max-width: 860px) {
    body .bs-app-shell > .bs-common-brand,
    body .bs-logo-stage > .bs-common-brand,
    body .bs-app-header--common > .bs-common-brand,
    body a.bs-common-brand {
        width: min(100%, calc(100vw - 0.75rem)) !important;
        max-width: calc(100vw - 0.75rem) !important;
        margin-bottom: 0.64rem !important;
    }

    body .bs-common-brand .bs-common-brand-wave-wrap {
        width: min(95vw, 500px) !important;
        max-width: 500px !important;
    }

    body .bs-common-brand .bs-common-brand-copy {
        left: 52.4% !important;
        right: 0.55rem !important;
        top: 36.1% !important;
        max-width: 46vw !important;
        gap: 0.12rem !important;
    }

    body .bs-common-brand .bs-common-brand-name,
    body .bs-app-header--common .bs-common-brand .bs-common-brand-name {
        font-size: clamp(1.2rem, 5.35vw, 2.2rem) !important;
        line-height: 0.98 !important;
    }

    body .bs-common-brand .bs-common-brand-location {
        min-width: auto !important;
        padding: 0.12rem 0.58rem 0.2rem !important;
        font-size: clamp(0.62rem, 2.35vw, 0.86rem) !important;
    }
}

@media (max-width: 520px) {
    body .bs-common-brand .bs-common-brand-wave-wrap {
        width: min(96vw, 430px) !important;
    }

    body .bs-common-brand .bs-common-brand-copy {
        left: 53% !important;
        right: 0.35rem !important;
        top: 36.2% !important;
        max-width: 45vw !important;
    }

    body .bs-common-brand .bs-common-brand-name,
    body .bs-app-header--common .bs-common-brand .bs-common-brand-name {
        font-size: clamp(0.98rem, 6.1vw, 1.62rem) !important;
        line-height: 0.98 !important;
    }

    body .bs-common-brand .bs-common-brand-location {
        padding: 0.09rem 0.42rem 0.15rem !important;
        font-size: clamp(0.52rem, 2.6vw, 0.72rem) !important;
    }
}

/* === COMMON WAVE HEADER DESKTOP PAINT GUARD 4-26-1830 ===
   Desktop Chrome/Edge can occasionally fail to repaint the PNG when the shared
   brand header is both filtered and animated. The header keeps the slide-up
   movement, removes the parent compositing filter, and paints the wave as a
   stable CSS background with the decorative img kept as a preloaded backup. */
body .bs-common-brand,
body .bs-app-shell > .bs-common-brand,
body .bs-logo-stage > .bs-common-brand,
body .bs-app-header--common > .bs-common-brand,
body a.bs-common-brand {
    filter: none !important;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    isolation: isolate;
}

body .bs-common-brand .bs-common-brand-wave-wrap {
    position: relative !important;
    display: block !important;
    aspect-ratio: 549 / 303 !important;
    min-height: 1px !important;
    background-image: url('/assets/images/wave.png?v=20260426-paintguard') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    filter: drop-shadow(0 16px 30px rgba(12, 44, 70, 0.13)) !important;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

body .bs-common-brand .bs-common-brand-wave {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    inset: 0 !important;
    object-fit: contain !important;
    opacity: 0.001 !important;
    filter: none !important;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

body .bs-common-brand .bs-common-brand-copy {
    z-index: 2 !important;
}

@media (prefers-reduced-motion: reduce) {
    body .bs-common-brand,
    body .bs-app-shell > .bs-common-brand,
    body .bs-logo-stage > .bs-common-brand,
    body .bs-app-header--common > .bs-common-brand,
    body a.bs-common-brand {
        transform: none !important;
    }
}

/* === COMMON WAVE HEADER FADE-UP RESTORE 4-26-1908 ===
   The wave image, title text, and small description badge now animate as one
   parent layer: fading in while rising from below. This keeps the nice old lift
   without reintroducing the desktop logo/text paint mismatch. */
body .bs-common-brand.bs-brand-paint-ready,
body .bs-app-shell > .bs-common-brand.bs-brand-paint-ready,
body .bs-logo-stage > .bs-common-brand.bs-brand-paint-ready,
body .bs-app-header--common > .bs-common-brand.bs-brand-paint-ready,
body a.bs-common-brand.bs-brand-paint-ready {
    animation-name: bsBrandRiseStable !important;
    animation-duration: 0.82s !important;
    animation-timing-function: cubic-bezier(0.18, 0.84, 0.28, 1) !important;
    animation-fill-mode: both !important;
}

@media (prefers-reduced-motion: reduce) {
    body .bs-common-brand.bs-brand-paint-ready,
    body .bs-app-shell > .bs-common-brand.bs-brand-paint-ready,
    body .bs-logo-stage > .bs-common-brand.bs-brand-paint-ready,
    body .bs-app-header--common > .bs-common-brand.bs-brand-paint-ready,
    body a.bs-common-brand.bs-brand-paint-ready {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        translate: none !important;
        rotate: none !important;
        will-change: auto !important;
    }
}

/* === COMMON WAVE HEADER STAGE LOCK 4-27-0605 ===
   Make the wave/logo stage itself own the image space, then let JS switch to
   the real image once it is fully loaded. Standalone pages that do not run JS
   still keep the CSS-painted wave, so the title can never float alone. */
body .bs-common-brand .bs-common-brand-stage {
    position: relative !important;
    display: block !important;
    width: min(94vw, 549px) !important;
    max-width: 549px !important;
    aspect-ratio: 549 / 303 !important;
    margin: 0 auto !important;
    isolation: isolate !important;
    transform: translate3d(0, 0, 0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

body .bs-common-brand .bs-common-brand-stage::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    background-image: url('/assets/images/wave.png') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    filter: drop-shadow(0 16px 30px rgba(12, 44, 70, 0.13)) !important;
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    pointer-events: none !important;
}

body .bs-common-brand .bs-common-brand-wave-wrap {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    aspect-ratio: auto !important;
    background-image: none !important;
    filter: none !important;
}

body .bs-common-brand .bs-common-brand-wave {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
    opacity: 0.001 !important;
    transform: translate3d(0, 0, 0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

body .bs-common-brand.bs-brand-img-ready .bs-common-brand-stage::before {
    opacity: 0 !important;
}

body .bs-common-brand.bs-brand-img-ready .bs-common-brand-wave-wrap {
    filter: drop-shadow(0 16px 30px rgba(12, 44, 70, 0.13)) !important;
}

body .bs-common-brand.bs-brand-img-ready .bs-common-brand-wave {
    opacity: 1 !important;
}

body .bs-common-brand .bs-common-brand-copy {
    z-index: 3 !important;
}

@media (max-width: 860px) {
    body .bs-common-brand .bs-common-brand-stage {
        width: min(95vw, 500px) !important;
        max-width: 500px !important;
    }
}

@media (max-width: 520px) {
    body .bs-common-brand .bs-common-brand-stage {
        width: min(96vw, 430px) !important;
        max-width: 430px !important;
    }
}

/* === COMMON WAVE HEADER PERMANENT PAINT SOURCE 4-27-0630B ===
   Keep the CSS-painted wave as the visible source even after JS confirms the
   PNG is loaded. This preserves the good synced fade-up animation while
   preventing Chrome/Edge from ever showing logo text without the wave art. */
body .bs-common-brand.bs-brand-img-ready .bs-common-brand-stage::before,
body .bs-app-shell > .bs-common-brand.bs-brand-img-ready .bs-common-brand-stage::before,
body .bs-logo-stage > .bs-common-brand.bs-brand-img-ready .bs-common-brand-stage::before,
body .bs-app-header--common > .bs-common-brand.bs-brand-img-ready .bs-common-brand-stage::before,
body a.bs-common-brand.bs-brand-img-ready .bs-common-brand-stage::before {
    opacity: 1 !important;
}

body .bs-common-brand.bs-brand-img-ready .bs-common-brand-wave,
body .bs-app-shell > .bs-common-brand.bs-brand-img-ready .bs-common-brand-wave,
body .bs-logo-stage > .bs-common-brand.bs-brand-img-ready .bs-common-brand-wave,
body .bs-app-header--common > .bs-common-brand.bs-brand-img-ready .bs-common-brand-wave,
body a.bs-common-brand.bs-brand-img-ready .bs-common-brand-wave {
    opacity: 0.001 !important;
}


/* === COMMON WAVE HEADER GENTLE MAGIC 5-20-2026 ===
   Keep the existing parent fade/rise intact, then let the inner shared logo
   stage make a clear but still gentle water-like drift. Uses individual
   translate/rotate properties so existing transform paint locks do not suppress it. */
/* === BluSup wave-logo magic tuning panel ===
   Change only these custom properties to adjust the shared logo motion.
   - --bs-brand-magic-duration: how long one full rock/float cycle takes.
   - --bs-brand-magic-delay: how long to wait before motion starts; 0s means immediately.
   - --bs-brand-magic-rise-soft: first small lift amount.
   - --bs-brand-magic-rise-peak: highest lift amount.
   - --bs-brand-magic-rise-return: small lift before settling.
   - --bs-brand-magic-rotate-left: gentle counter-clockwise rock.
   - --bs-brand-magic-rotate-right: gentle clockwise rock.
   Keep the numbers small; this should feel like water, not a carnival ride. */
body .bs-common-brand .bs-common-brand-stage {
    --bs-brand-magic-duration: 6.8s;
    --bs-brand-magic-delay: 0s;
    --bs-brand-magic-rise-soft: 1.6px;
    --bs-brand-magic-rise-peak: 4.2px;
    --bs-brand-magic-rise-return: 1.3px;
    --bs-brand-magic-rotate-left: -0.62deg;
    --bs-brand-magic-rotate-right: 0.92deg;
}

@keyframes bsBrandGentleWaveMagic {
    0%, 100% {
        translate: 0 0;
        rotate: 0deg;
    }
    20% {
        translate: 0 calc(-1 * var(--bs-brand-magic-rise-soft, 1.6px));
        rotate: var(--bs-brand-magic-rotate-left, -0.62deg);
    }
    50% {
        translate: 0 calc(-1 * var(--bs-brand-magic-rise-peak, 4.2px));
        rotate: var(--bs-brand-magic-rotate-right, 0.92deg);
    }
    80% {
        translate: 0 calc(-1 * var(--bs-brand-magic-rise-return, 1.3px));
        rotate: calc(var(--bs-brand-magic-rotate-left, -0.62deg) * 0.8);
    }
}

body .bs-common-brand.bs-brand-paint-ready .bs-common-brand-stage,
body .bs-app-shell > .bs-common-brand.bs-brand-paint-ready .bs-common-brand-stage,
body .bs-logo-stage > .bs-common-brand.bs-brand-paint-ready .bs-common-brand-stage,
body .bs-app-header--common > .bs-common-brand.bs-brand-paint-ready .bs-common-brand-stage,
body a.bs-common-brand.bs-brand-paint-ready .bs-common-brand-stage {
    animation: bsBrandGentleWaveMagic var(--bs-brand-magic-duration, 6.8s) ease-in-out var(--bs-brand-magic-delay, 0s) infinite !important;
    transform-origin: 50% 58% !important;
    will-change: translate, rotate !important;
}

@media (prefers-reduced-motion: reduce) {
    body .bs-common-brand.bs-brand-paint-ready .bs-common-brand-stage,
    body .bs-app-shell > .bs-common-brand.bs-brand-paint-ready .bs-common-brand-stage,
    body .bs-logo-stage > .bs-common-brand.bs-brand-paint-ready .bs-common-brand-stage,
    body .bs-app-header--common > .bs-common-brand.bs-brand-paint-ready .bs-common-brand-stage,
    body a.bs-common-brand.bs-brand-paint-ready .bs-common-brand-stage {
        animation: none !important;
        transform: none !important;
        translate: none !important;
        rotate: none !important;
        will-change: auto !important;
    }
}

/* BluSup shared confirm dialog */
.bs-confirm-backdrop{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:1.25rem;background:rgba(15,23,42,.42);backdrop-filter:blur(8px)}
.bs-confirm-backdrop[hidden]{display:none!important}
.bs-confirm-dialog{width:min(420px,100%);border:1px solid rgba(148,163,184,.32);border-radius:24px;background:rgba(255,255,255,.96);box-shadow:0 24px 80px rgba(15,23,42,.26);padding:1.15rem;color:#102033;text-align:left}
.bs-confirm-dialog h2{margin:0;font-size:1.15rem;line-height:1.25;color:#0f172a}
.bs-confirm-dialog p{margin:.65rem 0 0;color:#475569;line-height:1.45}
.bs-confirm-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.65rem;margin-top:1rem}
.bs-confirm-button{border:0;border-radius:999px;padding:.72rem 1rem;font:inherit;font-weight:800;cursor:pointer}
.bs-confirm-button--cancel{background:rgba(15,23,42,.07);color:#0f172a}
.bs-confirm-button--confirm{background:#0f766e;color:#fff;box-shadow:0 12px 24px rgba(15,118,110,.24)}
.bs-confirm-button--danger{background:#b91c1c;color:#fff;box-shadow:0 12px 24px rgba(185,28,28,.22)}
.bs-confirm-button:focus-visible{outline:3px solid rgba(37,99,235,.34);outline-offset:3px}
@media (max-width:560px){.bs-confirm-dialog{border-radius:20px;padding:1rem}.bs-confirm-actions{display:grid;grid-template-columns:1fr;gap:.55rem}.bs-confirm-button{width:100%}}