/* The always-printed inline <style> blocks of index.php, in their original
   order, moved out 2026-11-10 so browsers cache them instead of re-parsing
   ~230 KB on every visit. Printed last in <head> by inc/header.php
   ($hb_head_css_last) - the same cascade position the body blocks had.
   url() paths are relative to this file. Edit the rules here. */

/* ---- index.php, was inline <style> at line 513 ---- */

    /* ══════════════════════════════════════════════════════════════════════
       PASSPORT · DEAL ROOM · FINANCE — the three-card band

       Built to the comp at its own proportions. Every length below is
       calc(var(--u) * N), where N is the size in pixels measured on the comp:
       on desktop the band is 850 comp-pixels wide (cards 230 / 374 / 230,
       8 between), on a phone each card is 284. --u is the band's width
       divided by that, through a container unit, so the cards keep the comp's
       exact proportions at every width instead of reflowing at breakpoints.
       Text that would fall below a readable size on a small phone has a px
       floor through max().

       Desktop: Passport | Deal Room | Finance in one row (grid areas).
       Below 1024px: one column, Deal Room first — the DOM order, so a screen
       reader meets them in the same order a phone shows them.

       Four constraints from the rest of the page:
       1. inc/footer.php ends with an iOS GPU guard that forces
          `filter: none !important` on every element under
          `(max-width: 1024px), (hover: none)`. Nothing here depends on
          filter: glows are box-shadows and the artwork carries its own.
       2. css/styles.css sets `body { line-height: 1 }`, hides every <br>
          below 991px and restyles bare h2/p/ul/li/button. Every text
          element here sets its own family, size, line-height and margin, and
          line breaks are block spans.
       3. js/hb-font-size.js (the A-/A+ text control) would scale --u, since
          font-size reads it, and grow the inside of every card past the card.
          #hbTriple is on its list of hosts kept at their authored size.
       4. The Finance card keeps the .hbfe-card class and the data-hbfe-*
          attributes: js/hb-finance-entry.js finds the choice and the start
          button through them. css/hb-finance-entry.css styles .hbfe-card at
          (0,1,0)/(0,1,1); the .hb3 rules here outrank it.
       ══════════════════════════════════════════════════════════════════════ */

    .deal-room-section-container {
        width: 100%;
        padding: 40px 0;
    }
    .hb3-wrap {
        position: relative;
        z-index: 10;
        box-sizing: border-box;
        max-width: 1368px;
        margin: 0 auto;
        padding: 0 24px;
    }
    /* The container. The grid is a separate element inside it so that the
       grid's own gaps can be sized in the container's units. */
    .hb3 { container-type: inline-size; }
    .hb3-grid {
        --u: calc(100cqi / 850);
        display: grid;
        grid-template-columns: minmax(0, 230fr) minmax(0, 374fr) minmax(0, 230fr);
        grid-template-areas: "pp dr fin";
        column-gap: calc(var(--u) * 8);
        align-items: stretch;
    }
    @supports not (container-type: inline-size) {
        .hb3-grid { --u: calc(min(100vw - 48px, 1320px) / 850); }
    }

    /* ── the card ───────────────────────────────────────────────────────── */
    .hb3 .hb3-card {
        position: relative;
        isolation: isolate;
        box-sizing: border-box;
        min-width: 0;
        max-width: none;
        margin: 0;
        overflow: hidden;
        border: max(1px, calc(var(--u) * 1.3)) solid #b8ad6c;
        border-bottom-color: #bcae62;
        border-radius: calc(var(--u) * 7);
        background:
            radial-gradient(120% 60% at 50% 0%, rgba(18, 44, 70, 0.30) 0%, rgba(18, 44, 70, 0) 70%),
            linear-gradient(180deg, #03111c 0%, #020c16 52%, #010a12 100%);
        box-shadow:
            0 0 calc(var(--u) * 7) rgba(214, 186, 104, 0.16),
            0 calc(var(--u) * 10) calc(var(--u) * 26) rgba(0, 0, 0, 0.45);
        color: #e6e9ee;
        font-family: 'DM Sans', 'Lexend', sans-serif;
        font-weight: 400;
        text-align: left;
    }
    .hb3 .hb3-card * { box-sizing: border-box; }
    .hb3 .hb3-card > :not(picture) { position: relative; z-index: 1; }
    .hb3 .hb3-card picture { position: absolute; z-index: 0; display: block; pointer-events: none; }
    .hb3 .hb3-card picture img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
    .hb3-sr {
        position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }

    /* ── gold headline: one metal ramp per line, lit from the top ─────────── */
    .hb3 .hb3-h {
        margin: 0;
        padding: 0;
        font-family: 'Playfair Display', 'Times New Roman', serif;
        font-weight: 800;
        font-style: normal;
        letter-spacing: 0;
        text-transform: uppercase;
        color: #f6d67a;
        scroll-margin-top: 120px;
    }
    .hb3 .hb3-h > span {
        display: block;
        color: #f6d67a;
        background: linear-gradient(180deg, #fbf4bc 0%, #fbf4bc 22%, #fbefb0 46%, #fde59a 60%, #fadb7e 69%, #f8c96a 78%, #efbd56 85%, #d8a33b 91%, #c08a2e 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 calc(var(--u) * 0.8) 0 rgba(48, 28, 2, 0.75));
    }

    /* ── the outlined gold key (Enter Deal Room, Generate Property Passport,
          Start Your Request):
          dark glass, a thin gold rim, white type and a gold arrow ─────────── */
    .hb3 .hb3-line {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5em;
        width: 100%;
        margin: 0;
        padding: 0 calc(var(--u) * 6);
        border: max(1px, calc(var(--u) * 1)) solid #d3b064;
        border-radius: 10px;
        background: linear-gradient(180deg, rgba(18, 36, 58, 0.94) 0%, rgba(7, 17, 31, 0.96) 100%);
        box-shadow:
            inset 0 1px 0 rgba(255, 236, 184, 0.14),
            0 0 calc(var(--u) * 6) rgba(214, 178, 96, 0.20),
            0 calc(var(--u) * 4) calc(var(--u) * 10) rgba(0, 0, 0, 0.35);
        color: #ffffff;
        font-family: 'Manrope', 'DM Sans', sans-serif;
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: 0;
        text-transform: none;
        text-align: center;
        text-shadow: none;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
    }
    .hb3 .hb3-line .hb3-arrow { color: #f1c862; }
    .hb3 .hb3-line:hover {
        border-color: #f0cf7c;
        box-shadow:
            inset 0 1px 0 rgba(255, 236, 184, 0.18),
            0 0 calc(var(--u) * 11) rgba(232, 196, 108, 0.38),
            0 calc(var(--u) * 4) calc(var(--u) * 10) rgba(0, 0, 0, 0.35);
    }
    .hb3 .hb3-line:active { transform: translateY(1px); }
    .hb3 .hb3-arrow {
        flex: 0 0 auto;
        width: 0.95em;
        height: 0.62em;
        overflow: visible;
    }
    .hb3 .hb3-card a:focus-visible,
    .hb3 .hb3-card button:focus-visible {
        outline: 2px solid #8bcbff;
        outline-offset: 3px;
    }

    /* ══ PROPERTY PASSPORT ═══════════════════════════════════════════════ */
    .hb3 .hb3-pp {
        grid-area: pp;
        padding: calc(var(--u) * 10) calc(var(--u) * 7.7) calc(var(--u) * 8.7);
    }
    /* heavy sans capitals in a cream-to-gold ramp, as in the card's design;
       the two lines sit close, with the NFT banner tucked under them */
    .hb3 .hb3-pp .hb3-h {
        margin-left: calc(var(--u) * 6.5);
        font-family: 'Manrope', 'DM Sans', sans-serif;
        font-weight: 800;
        letter-spacing: -0.01em;
        font-size: calc(var(--u) * 22.4);
        line-height: calc(var(--u) * 21.5);
    }
    .hb3 .hb3-pp .hb3-h > span {
        background: linear-gradient(180deg, #fff8de 0%, #fbe9b0 32%, #f3cf72 66%, #d6a144 100%);
        -webkit-background-clip: text;
        background-clip: text;
    }
    /* ── NFT minting banner, under the headline ──────────────────────────
          A gold-rimmed pill: the hex NFT mark, a gold rule, then "NFT minting
          / now available" and the Details & limits link, which opens
          #ppNftInfo (after the Passport modal, further down). Its glint on
          the top rim is a box-shadow, not a filter (constraint 1). */
    .hb3 .hb3-pp-nft {
        display: flex;
        align-items: center;
        min-height: calc(var(--u) * 42);
        margin: calc(var(--u) * 4) calc(var(--u) * 3.5) 0;
        padding: calc(var(--u) * 3) calc(var(--u) * 8) calc(var(--u) * 3) calc(var(--u) * 12);
        border: max(1px, calc(var(--u) * 1.3)) solid #e4bf63;
        border-radius: calc(var(--u) * 7);
        background:
            radial-gradient(70% 120% at 0% 0%, rgba(240, 196, 96, 0.13) 0%, rgba(240, 196, 96, 0) 70%),
            linear-gradient(180deg, #0c1520 0%, #04090f 100%);
        box-shadow:
            0 0 calc(var(--u) * 5) rgba(242, 200, 100, 0.55),
            0 0 calc(var(--u) * 15) rgba(226, 182, 84, 0.22),
            inset 0 0 calc(var(--u) * 9) rgba(240, 198, 98, 0.16),
            inset 0 1px 0 rgba(255, 236, 184, 0.20);
    }
    .hb3 .hb3-pp-nft::before {
        content: '';
        position: absolute;
        top: 0;
        left: 11%;
        width: calc(var(--u) * 4.5);
        height: calc(var(--u) * 4.5);
        border-radius: 50%;
        transform: translate(-50%, -55%);
        background: radial-gradient(circle, #fffdf0 0%, #ffe6a0 38%, rgba(255, 210, 110, 0) 72%);
        box-shadow: 0 0 calc(var(--u) * 4) calc(var(--u) * 1.2) rgba(255, 214, 120, 0.55);
        pointer-events: none;
    }
    .hb3 .hb3-pp-nft-ic {
        display: block;
        flex: 0 0 auto;
        width: calc(var(--u) * 25.5);
        height: calc(var(--u) * 28.5);
        overflow: visible;
        filter: drop-shadow(0 0 calc(var(--u) * 2.5) rgba(242, 196, 90, 0.55));
    }
    .hb3 .hb3-pp-nft-sep {
        flex: 0 0 auto;
        width: max(1px, calc(var(--u) * 1));
        height: calc(var(--u) * 27);
        margin: 0 calc(var(--u) * 9.5);
        background: linear-gradient(180deg, rgba(228, 191, 99, 0.35) 0%, #e4bf63 22%, #e4bf63 78%, rgba(228, 191, 99, 0.35) 100%);
    }
    .hb3 .hb3-pp-nft-tx {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex: 1 1 auto;
        min-width: 0;
    }
    .hb3 .hb3-pp-nft-h {
        margin: 0;
        padding: 0;
        color: #ffffff;
        font-family: 'Montserrat', 'Manrope', sans-serif;
        font-weight: 800;
        font-size: calc(var(--u) * 12.4);
        line-height: calc(var(--u) * 12.2);
        letter-spacing: -0.005em;
        white-space: nowrap;
    }
    .hb3 .hb3-pp-nft-h > span { display: block; color: #ffffff; }
    .hb3 .hb3-pp-nft-h > em {
        display: block;
        font-style: normal;
        color: #f3cf72;
        background: linear-gradient(180deg, #fff3c4 0%, #f8dc8c 40%, #efc35c 72%, #d9a444 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .hb3 .hb3-pp-nft-more {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
        width: auto;
        margin: calc(var(--u) * 2.6) 0 0;
        padding: 0;
        border: 0;
        border-radius: 2px;
        background: none;
        box-shadow: none;
        color: #eac56a;
        font-family: 'DM Sans', 'Lexend', sans-serif;
        font-weight: 500;
        font-size: max(10px, calc(var(--u) * 8.2));
        line-height: 1.2;
        letter-spacing: 0;
        text-transform: none;
        white-space: nowrap;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        transition: color 0.2s ease;
    }
    .hb3 .hb3-pp-nft-more > span {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.18em;
    }
    .hb3 .hb3-pp-nft-more svg { flex: 0 0 auto; width: 0.42em; height: 0.72em; color: #f1ead8; }
    .hb3 .hb3-pp-nft-more:hover { color: #ffdc85; }

    /* the book and report pages, in flow under the banner on desktop (the
       one-column layouts below place them themselves) */
    .hb3 .hb3-pp picture {
        position: relative;
        left: auto;
        top: auto;
        width: calc(var(--u) * 160);
        height: calc(var(--u) * 114.7);
        margin: calc(var(--u) * -1) 0 0 calc(var(--u) * 30.8);
    }
    /* 18.88px, as specified for the design; it only steps down where the
       column is too narrow to hold it (desktop under ~1300px) */
    .hb3 .hb3-pp-desc {
        max-width: none;
        margin: calc(var(--u) * 1) 0 0 calc(var(--u) * 6.5);
        color: #e4e8ee;
        font-size: min(18.88px, calc(var(--u) * 12.6));
        line-height: 1.38;
    }
    .hb3 .hb3-pp-desc span { display: inline; }
    .hb3 .hb3-pp-price {
        display: flex;
        align-items: center;
        height: calc(var(--u) * 34);
        margin-top: calc(var(--u) * 6);
        padding: 0 calc(var(--u) * 6) 0 calc(var(--u) * 5);
        border: max(1px, calc(var(--u) * 1.1)) solid rgba(214, 180, 100, 0.92);
        border-radius: calc(var(--u) * 5.5);
        background: linear-gradient(180deg, rgba(12, 26, 44, 0.92), rgba(4, 11, 21, 0.94));
        box-shadow: inset 0 1px 0 rgba(255, 236, 184, 0.10), inset 0 0 calc(var(--u) * 8) rgba(0, 0, 0, 0.45);
        white-space: nowrap;
    }
    .hb3 .hb3-pp-badge {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: auto;
        height: calc(var(--u) * 22);
        padding: 0 calc(var(--u) * 7);
        border: 1px solid rgba(255, 96, 96, 0.55);
        border-bottom-color: rgba(120, 6, 12, 0.9);
        border-radius: calc(var(--u) * 3.5);
        background: linear-gradient(180deg, #d9171f 0%, #bb0f17 55%, #900a10 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 0 calc(var(--u) * 6) rgba(220, 20, 24, 0.30);
        color: #ffffff;
        font-family: 'Manrope', 'DM Sans', sans-serif;
        font-weight: 700;
        font-size: calc(var(--u) * 9.4);
        line-height: 1;
        letter-spacing: 0;
    }
    .hb3 .hb3-pp-sep {
        flex: 0 0 auto;
        width: max(1px, calc(var(--u) * 1));
        height: calc(var(--u) * 19);
        margin: 0 calc(var(--u) * 6.5);
        background: rgba(255, 255, 255, 0.20);
    }
    /* the struck-out price: the red slash is drawn, not text-decoration, so it
       runs corner to corner like the comp's rather than through the middle */
    .hb3 .hb3-pp-was {
        position: relative;
        flex: 0 0 auto;
        color: #8d95a3;
        font-family: 'Manrope', 'DM Sans', sans-serif;
        font-weight: 700;
        font-size: calc(var(--u) * 12.2);
        line-height: 1;
        text-decoration: none;
    }
    .hb3 .hb3-pp-was::after {
        content: '';
        position: absolute;
        left: -6%;
        right: -14%;
        top: 52%;
        height: max(1.5px, calc(var(--u) * 1.5));
        border-radius: 2px;
        background: #e3202c;
        transform: rotate(-11deg);
    }
    .hb3 .hb3-pp-now {
        flex: 0 0 auto;
        margin-left: auto;
        margin-right: 0;
        color: #f6e7a0;
        background: linear-gradient(180deg, #fff6cf 0%, #fae7a2 38%, #f0cd6c 70%, #d7a447 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-family: 'Manrope', 'DM Sans', sans-serif;
        font-weight: 800;
        font-size: calc(var(--u) * 20.5);
        line-height: 1;
        letter-spacing: -0.02em;
    }
    .hb3 .hb3-pp-go {
        height: calc(var(--u) * 29);
        margin: calc(var(--u) * 7) 0 0;
        border-radius: calc(var(--u) * 5);
        font-size: calc(var(--u) * 10.6);
    }
    .hb3 .hb3-pp-patent {
        margin: calc(var(--u) * 6.5) 0 0;
        color: #c9ced8;
        font-size: calc(var(--u) * 8.3);
        line-height: calc(var(--u) * 10);
        text-align: center;
    }

    /* ══ DEAL ROOM — "From Offer to Closing" ═════════════════════════════
       Built to the card's own design, 624 px wide: --m is one design pixel.
       The brand, headline, line of copy and the vault (with its floor
       reflection) ride together in .hb3-dr-top; the YouTube pill and the key
       sit underneath. On desktop the row is taller than the design, and the
       spare height is shared out above and below the top block. */
    .hb3 .hb3-dr {
        --m: calc(var(--u) * 0.5994);
        grid-area: dr;
        display: flex;
        flex-direction: column;
        padding: calc(var(--m) * 32) calc(var(--m) * 25) calc(var(--m) * 34);
        background:
            radial-gradient(44% 46% at 74% 34%, rgba(196, 18, 32, 0.28) 0%, rgba(196, 18, 32, 0) 72%),
            radial-gradient(60% 40% at 44% 0%, rgba(22, 76, 140, 0.34) 0%, rgba(22, 76, 140, 0) 72%),
            radial-gradient(70% 34% at 50% 100%, rgba(10, 40, 80, 0.30) 0%, rgba(10, 40, 80, 0) 72%),
            linear-gradient(180deg, #011429 0%, #000e1d 52%, #000b18 100%);
    }
    .hb3 .hb3-dr-top {
        min-height: calc(var(--m) * 293);
        margin: auto 0;
    }
    /* the copy paints over the vault's papers, as in the design */
    .hb3 .hb3-dr-top > :not(picture) { position: relative; z-index: 1; }
    .hb3 .hb3-dr-brand {
        display: flex;
        align-items: center;
        gap: calc(var(--m) * 14);
        margin: 0 0 0 calc(var(--m) * 6);
        color: #ffffff;
        font-family: 'Manrope', 'DM Sans', sans-serif;
        font-weight: 800;
        font-size: calc(var(--m) * 25);
        line-height: 1;
        letter-spacing: -0.005em;
    }
    .hb3 .hb3-dr-brand img {
        display: block;
        flex: 0 0 auto;
        width: calc(var(--m) * 38);
        height: calc(var(--m) * 39.4);
        max-width: none;
    }
    .hb3 .hb3-dr-h {
        margin: calc(var(--m) * 17) 0 0;
        padding: 0;
        color: #ffffff;
        font-family: 'Manrope', 'DM Sans', sans-serif;
        font-weight: 800;
        font-style: normal;
        font-size: calc(var(--m) * 52);
        line-height: calc(var(--m) * 51);
        letter-spacing: -0.012em;
        text-transform: none;
        white-space: nowrap;
        scroll-margin-top: 120px;
    }
    .hb3 .hb3-dr-h > span { display: block; }
    .hb3 .hb3-dr-h em {
        font-style: normal;
        color: #eec466;
        background: linear-gradient(180deg, #fff4cc 0%, #f9df98 30%, #edc261 62%, #cc9237 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .hb3 .hb3-dr-sub {
        max-width: calc(var(--m) * 255);
        margin: calc(var(--m) * 13) 0 0;
        color: #d4dae3;
        font-family: 'DM Sans', 'Lexend', sans-serif;
        font-weight: 400;
        font-size: max(13px, calc(var(--m) * 14.6));
        line-height: 1.3;
    }
    .hb3 .hb3-dr-sub span { display: block; }
    /* the vault and its floor reflection; placed against .hb3-dr-top */
    .hb3 .hb3-dr picture {
        left: calc(var(--m) * 244.4);
        top: calc(var(--m) * -12.6);
        width: calc(var(--m) * 360);
        height: calc(var(--m) * 391.3);
    }
    .hb3 .hb3-dr-act {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(var(--m) * 13);
    }
    .hb3 .hb3-yt {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: calc(var(--m) * 10);
        width: auto;
        min-width: calc(var(--m) * 218);
        height: max(28px, calc(var(--m) * 33));
        margin: 0;
        padding: 0 12px;
        border: 1px solid rgba(214, 180, 100, 0.85);
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(10, 22, 38, 0.88), rgba(3, 11, 22, 0.90));
        color: #eef0f3;
        font-family: 'DM Sans', 'Lexend', sans-serif;
        font-weight: 500;
        font-size: max(11.5px, calc(var(--m) * 12.6));
        line-height: 1;
        letter-spacing: 0;
        text-decoration: none;
        white-space: nowrap;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .hb3 .hb3-yt:hover {
        color: #ffffff;
        border-color: rgba(240, 207, 124, 0.95);
        box-shadow: 0 0 calc(var(--m) * 12) rgba(226, 196, 112, 0.25);
    }
    .hb3 .hb3-yt svg {
        flex: 0 0 auto;
        width: calc(var(--m) * 24);
        height: calc(var(--m) * 17);
        margin: 0;
    }
    .hb3 .hb3-dr-cta { width: calc(var(--m) * 318); margin: 0; }
    .hb3 .hb3-dr-cta .hb3-line {
        height: calc(var(--m) * 52);
        border-radius: calc(var(--m) * 10);
        font-size: calc(var(--m) * 21);
    }
    /* drWaitForReadyScreen() holds the key while the ready screen loads */
    .hb3 .dr-hero-cta.is-waiting .hb3-line { opacity: 0.7; cursor: progress; }

    /* ══ FINANCE OR REFINANCE ════════════════════════════════════════════ */
    .hb3 .hb3-fin {
        grid-area: fin;
        padding: calc(var(--u) * 16.1) calc(var(--u) * 10.2) calc(var(--u) * 9.7) calc(var(--u) * 13.7);
    }
    /* same heavy sans capitals and cream-to-gold ramp as the Passport card */
    .hb3 .hb3-fin .hb3-h {
        margin-left: calc(var(--u) * 1);
        font-family: 'Manrope', 'DM Sans', sans-serif;
        font-weight: 800;
        letter-spacing: 0;
        font-size: calc(var(--u) * 16.6);
        line-height: calc(var(--u) * 24);
        white-space: nowrap;
    }
    .hb3 .hb3-fin .hb3-h > span {
        background: linear-gradient(180deg, #fff8de 0%, #fbe9b0 32%, #f3cf72 66%, #d6a144 100%);
        -webkit-background-clip: text;
        background-clip: text;
    }
    .hb3 .hb3-fin-tag {
        margin: calc(var(--u) * 5.4) 0 0 calc(var(--u) * 1);
        color: #e1e7f4;
        font-size: calc(var(--u) * 10.8);
        line-height: calc(var(--u) * 13);
    }
    .hb3 .hb3-opts {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        row-gap: calc(var(--u) * 10);
        margin-top: calc(var(--u) * 14.6);
    }
    .hb3 .hb3-opt {
        display: flex;
        align-items: center;
        width: 100%;
        min-width: 0;
        min-height: calc(var(--u) * 56);
        margin: 0;
        padding: calc(var(--u) * 6) calc(var(--u) * 12) calc(var(--u) * 6) calc(var(--u) * 11.5);
        border: max(1px, calc(var(--u) * 1.1)) solid #3b475b;
        border-radius: calc(var(--u) * 5);
        background: linear-gradient(180deg, #06131f 0%, #030d17 100%);
        color: #faf6f3;
        text-align: left;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }
    .hb3 .hb3-opt:hover { border-color: #6b7891; }
    .hb3 .hb3-opt.on {
        border: max(1px, calc(var(--u) * 1.4)) solid #dcc56a;
        background: linear-gradient(180deg, #3b2b0b 0%, #2b200a 50%, #1f1708 100%);
        box-shadow:
            0 0 calc(var(--u) * 9) rgba(240, 200, 90, 0.32),
            inset 0 0 calc(var(--u) * 14) rgba(255, 214, 110, 0.10);
    }
    .hb3 .hb3-opt-ic {
        display: block;
        flex: 0 0 auto;
        width: calc(var(--u) * 30);
        height: calc(var(--u) * 29);
        margin-right: calc(var(--u) * 14);
        overflow: visible;
    }
    .hb3 .hb3-opt-tx {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-width: 0;
    }
    .hb3 .hb3-opt-tx b {
        display: block;
        color: #faf6f3;
        font-family: 'Manrope', 'DM Sans', sans-serif;
        font-weight: 700;
        font-size: calc(var(--u) * 12.4);
        line-height: 1.1;
        letter-spacing: 0;
        text-transform: none;
    }
    .hb3 .hb3-opt-tx small {
        display: block;
        margin-top: calc(var(--u) * 4.5);
        color: #bdc1c4;
        font-family: 'DM Sans', 'Lexend', sans-serif;
        font-weight: 400;
        font-size: calc(var(--u) * 9.1);
        line-height: 1.2;
    }
    /* the radio mark: an empty ring, or a gold coin with a check when chosen */
    .hb3 .hb3-opt-dot {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: calc(var(--u) * 18);
        height: calc(var(--u) * 18);
        margin: 0 calc(var(--u) * 2.5) 0 calc(var(--u) * 6);
        border: max(1.5px, calc(var(--u) * 2)) solid #a3aad2;
        border-radius: 50%;
    }
    .hb3 .hb3-opt-dot svg { display: none; width: 58%; height: 58%; }
    .hb3 .hb3-opt.on .hb3-opt-dot {
        width: calc(var(--u) * 23);
        height: calc(var(--u) * 23);
        margin-right: 0;
        border: 0;
        background: radial-gradient(circle at 35% 28%, #fff3b2 0%, #f9d86a 34%, #eeb431 72%, #d6941d 100%);
        box-shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 3) rgba(0, 0, 0, 0.55), inset 0 calc(var(--u) * -1) 0 rgba(140, 90, 10, 0.35);
    }
    .hb3 .hb3-opt.on .hb3-opt-dot svg { display: block; }
    .hb3 .hb3-fin-go {
        height: calc(var(--u) * 33);
        margin-top: calc(var(--u) * 13);
        border-radius: calc(var(--u) * 5.5);
        font-size: calc(var(--u) * 12.6);
    }
    .hb3 .hb3-fin-disc {
        margin: calc(var(--u) * 11.5) 0 0;
        color: #c4c8d3;
        font-size: calc(var(--u) * 8);
        line-height: calc(var(--u) * 12);
        text-align: center;
    }
    .hb3 .hb3-fin-disc span { display: block; }
    /* Desktop: the row is as tall as the Passport card (taller since its NFT
       banner). Finance's choices, key and small print ride at the bottom,
       level with the other two keys, and the spare height opens under the
       tagline instead of pooling under the small print. */
    @media (min-width: 1024px) {
        .hb3 .hb3-fin { display: flex; flex-direction: column; }
        .hb3 .hb3-opts { margin-top: auto; padding-top: calc(var(--u) * 14.6); }
    }

    /* ══ ONE COLUMN — tablets and phones ═════════════════════════════════
       The comp's phone layout, measured at a 284px card. Deal Room first,
       then Passport, then Finance. Each card keeps a side-by-side head: the
       headline left, the artwork right; Finance runs its headline on one
       line and puts the two choices next to each other. */
    @media (max-width: 1023.98px) {
        .deal-room-section-container { padding: 26px 0; }
        .hb3-wrap { max-width: 552px; padding: 0 16px; }
        .hb3-grid {
            --u: calc(100cqi / 284);
            grid-template-columns: minmax(0, 1fr);
            grid-template-areas: "dr" "pp" "fin";
            row-gap: calc(var(--u) * 6.5);
        }
        @supports not (container-type: inline-size) {
            .hb3-grid { --u: calc(min(100vw - 32px, 520px) / 284); }
        }
        .hb3 .hb3-card {
            border-radius: calc(var(--u) * 6);
            box-shadow: 0 0 calc(var(--u) * 5) rgba(214, 186, 104, 0.14), 0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(0, 0, 0, 0.45);
        }

        /* ── Deal Room ── the same design on a 284 card; type that would drop
              below a readable size has a px floor, and the vault steps right
              a little so the line of copy has room beside it */
        .hb3 .hb3-dr { --m: calc(var(--u) * 0.4551); }
        .hb3 .hb3-dr picture {
            left: calc(var(--m) * 273);
            top: calc(var(--m) * -6);
            width: calc(var(--m) * 330);
            height: calc(var(--m) * 358.7);
        }
        .hb3 .hb3-dr-sub {
            max-width: calc(var(--m) * 281);
            font-size: max(12.5px, calc(var(--m) * 14.6));
            line-height: 1.38;
        }
        .hb3 .hb3-dr-sub span { display: inline; }
        .hb3 .hb3-dr-act { gap: max(10px, calc(var(--m) * 13)); }
        .hb3 .hb3-yt {
            width: auto;
            min-width: calc(var(--m) * 218);
            height: max(30px, calc(var(--m) * 33));
            padding: 0 14px;
            font-size: max(12px, calc(var(--m) * 12.6));
        }
        .hb3 .hb3-yt svg { width: max(20px, calc(var(--m) * 24)); height: max(14px, calc(var(--m) * 17)); }
        /* the key spans the card, like Start Your Request below it */
        .hb3 .hb3-dr-cta { width: 100%; }
        .hb3 .hb3-dr-cta .hb3-line {
            height: max(44px, calc(var(--m) * 52));
            border-radius: max(9px, calc(var(--m) * 10));
            font-size: max(15px, calc(var(--m) * 21));
        }

        /* ── Passport ── */
        .hb3 .hb3-pp { padding: calc(var(--u) * 7.1) calc(var(--u) * 12.7) calc(var(--u) * 3) calc(var(--u) * 13.4); }
        .hb3 .hb3-pp .hb3-h {
            margin-left: 0;
            font-size: calc(var(--u) * 14);
            line-height: calc(var(--u) * 16.7);
        }
        .hb3 .hb3-pp picture {
            position: absolute;
            left: calc(var(--u) * 147);
            top: calc(var(--u) * 4.3);
            width: calc(var(--u) * 125.5);
            height: calc(var(--u) * 90);
            margin: 0;
        }
        /* the banner keeps to the headline's column, clear of the book */
        .hb3 .hb3-pp-nft {
            max-width: calc(var(--u) * 132);
            min-height: calc(var(--u) * 29);
            margin: calc(var(--u) * 4) 0 0;
            padding: calc(var(--u) * 3) calc(var(--u) * 6) calc(var(--u) * 3) calc(var(--u) * 6.5);
            border-radius: calc(var(--u) * 4.5);
        }
        .hb3 .hb3-pp-nft-ic { width: calc(var(--u) * 16.5); height: calc(var(--u) * 18.4); }
        .hb3 .hb3-pp-nft-sep { height: calc(var(--u) * 18); margin: 0 calc(var(--u) * 5.5); }
        .hb3 .hb3-pp-nft-h { font-size: max(13px, calc(var(--u) * 8.2)); line-height: 1.04; }
        .hb3 .hb3-pp-nft-more { margin-top: calc(var(--u) * 1.6); font-size: max(11px, calc(var(--u) * 5.8)); }
        .hb3 .hb3-pp-desc {
            max-width: calc(var(--u) * 150);
            margin: calc(var(--u) * 4) 0 0;
            font-size: 18.88px;
            line-height: 1.38;
            /* the second line runs onto the passport's spine, as in the comp */
            text-shadow: 0 0 4px rgba(2, 10, 20, 0.9), 0 0 2px rgba(2, 10, 20, 0.9);
        }
        .hb3 .hb3-pp-price {
            width: calc(var(--u) * 182.3);
            height: calc(var(--u) * 23.3);
            min-height: 28px;
            margin: calc(var(--u) * 5.8) 0 0 calc(var(--u) * 1);
            padding-left: calc(var(--u) * 9.6);
            border-radius: calc(var(--u) * 3);
        }
        .hb3 .hb3-pp-badge {
            height: calc(var(--u) * 14.5);
            min-height: 18px;
            padding: 0 calc(var(--u) * 5.5);
            border-radius: calc(var(--u) * 2.8);
            font-size: max(9.5px, calc(var(--u) * 7.2));
        }
        .hb3 .hb3-pp-sep { height: calc(var(--u) * 12); margin: 0 calc(var(--u) * 6); }
        .hb3 .hb3-pp-was { font-size: max(10px, calc(var(--u) * 9.6)); }
        .hb3 .hb3-pp-now { margin: 0 0 0 auto; font-size: calc(var(--u) * 16.5); }
        .hb3 .hb3-pp-go {
            height: max(36px, calc(var(--u) * 19.7));
            margin-top: calc(var(--u) * 5);
            margin-left: calc(var(--u) * 0);
            border-radius: max(9px, calc(var(--u) * 4.5));
            font-size: max(12px, calc(var(--u) * 8.4));
        }
        .hb3 .hb3-pp-patent {
            margin-top: calc(var(--u) * 2);
            font-size: max(9px, calc(var(--u) * 5.6));
            line-height: max(12px, calc(var(--u) * 7));
        }

        /* ── Finance ── */
        .hb3 .hb3-fin { padding: calc(var(--u) * 5.4) calc(var(--u) * 11.3) calc(var(--u) * 3.6) calc(var(--u) * 11.7); }
        .hb3 .hb3-fin .hb3-h {
            margin-left: 0;
            font-size: calc(var(--u) * 12.5);
            line-height: calc(var(--u) * 14);
        }
        .hb3 .hb3-fin .hb3-h > span { display: inline; }
        .hb3 .hb3-fin-tag {
            margin: calc(var(--u) * 2.4) 0 0;
            font-size: max(10px, calc(var(--u) * 7.2));
            line-height: max(13px, calc(var(--u) * 9));
        }
        .hb3 .hb3-opts {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            column-gap: calc(var(--u) * 6.7);
            margin: calc(var(--u) * 6.3) 0 0 calc(var(--u) * -0.3);
        }
        .hb3 .hb3-opt {
            min-height: calc(var(--u) * 26.7);
            padding: calc(var(--u) * 3) calc(var(--u) * 5) calc(var(--u) * 3) calc(var(--u) * 8);
            border-radius: calc(var(--u) * 3.5);
        }
        .hb3 .hb3-opt-ic { width: calc(var(--u) * 14.3); height: calc(var(--u) * 14); margin-right: calc(var(--u) * 8); }
        .hb3 .hb3-opt-tx b { font-size: max(10.5px, calc(var(--u) * 7.6)); }
        .hb3 .hb3-opt-tx small { margin-top: calc(var(--u) * 1.4); font-size: max(8.5px, calc(var(--u) * 6.2)); white-space: nowrap; }
        .hb3 .hb3-opt-dot {
            width: max(12px, calc(var(--u) * 9.5));
            height: max(12px, calc(var(--u) * 9.5));
            margin: 0 0 0 calc(var(--u) * 3);
            border-width: max(1.3px, calc(var(--u) * 1.3));
        }
        .hb3 .hb3-opt.on .hb3-opt-dot { width: max(14px, calc(var(--u) * 10.5)); height: max(14px, calc(var(--u) * 10.5)); }
        .hb3 .hb3-fin-go {
            height: max(44px, calc(var(--u) * 19.7));
            margin-top: calc(var(--u) * 7.7);
            border-radius: max(9px, calc(var(--u) * 4.5));
            font-size: max(15px, calc(var(--u) * 10.4));
        }
        .hb3 .hb3-fin-disc {
            margin-top: calc(var(--u) * 5.5);
            font-size: max(9px, calc(var(--u) * 5.8));
            line-height: max(12px, calc(var(--u) * 7.7));
        }
        .hb3 .hb3-fin-disc span { display: inline; }
        .hb3 .hb3-fin-disc span:last-child { display: block; }
    }
    /* Under 375px the type floors outgrow the comp's proportions: "Already own
       a property" no longer fits beside the ring, and the spaced red line
       would run into the vault's papers, so the vault steps right and the
       line tightens up. */
    @media (max-width: 374.98px) {
        .hb3 .hb3-opt-tx small { white-space: normal; }
    }

    /* ══ PASSPORT ON PHONES (below 768px) ══════════════════════════════════
       Its own spec rather than the comp's proportions: a card that sizes
       itself, between Deal Room and Finance, with its type in px.
         · Full width, the same 16px page edges as Deal Room and Finance.
         · 28px between card borders, above and below it.
         · 16px padding and corner radius; 12px between sections, 8px above
           the patent line.
         · The illustration sits in flow beside the headline, at most 120px
           wide (96px under 360px). It is no longer absolute, so nothing can
           leave the card and the height is automatic.
       Deal Room and Finance keep their dimensions. */
    @media (max-width: 767.98px) {
        .hb3-grid { row-gap: 28px; }
        .hb3 .hb3-pp {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            grid-template-areas:
                "head art"
                "nft nft"
                "desc desc"
                "price price"
                "go go"
                "patent patent";
            align-items: center;
            column-gap: 12px;
            row-gap: 0;
            margin: 0;
            padding: 16px;
            border-radius: 16px;
            /* a lit gold frame, so the card holds its own between Deal Room
               and Finance */
            border: 1.5px solid #d9c06f;
            border-bottom-color: #c9ad5a;
            box-shadow:
                0 0 0 1px rgba(246, 214, 122, 0.10),
                0 0 16px rgba(226, 190, 96, 0.34),
                0 0 34px rgba(226, 190, 96, 0.12),
                0 10px 26px rgba(0, 0, 0, 0.45);
        }
        .hb3 .hb3-pp .hb3-h {
            grid-area: head;
            margin: 0;
            font-size: 26px;
            line-height: 1.1;
        }
        /* The gold is painted across each line's box. Under 360px "PROPERTY"
           (~144px at 26px) is wider than the 132px column beside the 96px
           illustration, and the part outside the box would render as nothing,
           so the box takes the word's width. It still ends short of the
           illustration. */
        .hb3 .hb3-pp .hb3-h > span { width: max-content; }
        .hb3 .hb3-pp picture {
            grid-area: art;
            position: relative;
            left: auto;
            top: auto;
            width: 120px;
            max-width: 120px;
            height: auto;
            margin: 0;
        }
        .hb3 .hb3-pp picture img { height: auto; }
        .hb3 .hb3-pp-nft {
            grid-area: nft;
            max-width: none;
            min-height: 0;
            margin: 12px 0 0;
            padding: 10px 14px 10px 16px;
            border-width: 1.5px;
            border-radius: 12px;
            box-shadow:
                0 0 8px rgba(242, 200, 100, 0.50),
                0 0 22px rgba(226, 182, 84, 0.20),
                inset 0 0 14px rgba(240, 198, 98, 0.14),
                inset 0 1px 0 rgba(255, 236, 184, 0.20);
        }
        .hb3 .hb3-pp-nft::before { width: 7px; height: 7px; box-shadow: 0 0 7px 2px rgba(255, 214, 120, 0.55); }
        .hb3 .hb3-pp-nft-ic { width: 40px; height: 45px; }
        .hb3 .hb3-pp-nft-sep { width: 1px; height: 42px; margin: 0 clamp(10px, 3.4vw, 14px); }
        .hb3 .hb3-pp-nft-h { font-size: clamp(17px, 5vw, 20px); line-height: 1.04; }
        .hb3 .hb3-pp-nft-more { margin-top: 5px; font-size: 14px; }
        .hb3 .hb3-pp-desc {
            grid-area: desc;
            max-width: none;
            margin: 12px 0 0;
            font-size: 18.88px;
            line-height: 1.38;
            text-shadow: none;
        }
        /* the forced break after "custom" is a desktop line; here it wraps */
        .hb3 .hb3-pp-desc span { display: inline; }
        .hb3 .hb3-pp-price {
            grid-area: price;
            flex-wrap: wrap;
            gap: 6px 0;
            width: auto;
            height: auto;
            min-height: 52px;
            margin: 12px 0 0;
            padding: 8px clamp(8px, 2.6vw, 12px);
            border-radius: 12px;
            white-space: normal;
        }
        .hb3 .hb3-pp-badge {
            width: auto;
            height: auto;
            min-height: 32px;
            padding: 0 clamp(6px, 2.5vw, 11px);
            border-radius: 7px;
            font-size: clamp(12px, 3.6vw, 14px);
        }
        .hb3 .hb3-pp-sep { height: 24px; margin: 0 clamp(4px, 2vw, 10px); }
        .hb3 .hb3-pp-was { font-size: clamp(14px, 4.6vw, 18px); }
        .hb3 .hb3-pp-now { margin: 0 0 0 auto; font-size: clamp(22px, 7.6vw, 30px); }
        .hb3 .hb3-pp-go {
            grid-area: go;
            height: auto;
            min-height: 52px;
            margin: 12px 0 0;
            padding: 10px 16px;
            border-radius: 10px;
            font-size: 16px;
            line-height: 1.2;
            white-space: normal;
            text-align: center;
        }
        .hb3 .hb3-pp-patent {
            grid-area: patent;
            margin: 8px 0 0;
            font-size: 12px;
            line-height: 1.4;
        }
    }
    @media (max-width: 359.98px) {
        .hb3 .hb3-pp picture { width: 96px; max-width: 96px; }
    }

    /* AUTOFILL ON THE HERO SEARCH FIELD (#autocomplete).
     *
     * Chrome paints an autofilled input with its own light-blue fill, declared
     * !important in the UA stylesheet, and a UA !important declaration outranks
     * an author one — so no background rule of ours can touch it. An inset
     * box-shadow painted over that fill is the only override, which is what the
     * site-wide `input:-webkit-autofill` rule in css/styles.css:81 does.
     *
     * It loses on this field, in exactly one state. assets/index.css gives
     *   .inputWrapper input:not([type="checkbox"]):not([type="hidden"]):focus
     * a gold OUTER glow with !important — specificity (0,4,1) against the
     * autofill rule's (0,2,1) — so the masking inset shadow is replaced by a
     * glow that covers nothing. Autofill always leaves the field focused, so
     * that is the state every autofill lands in: the blue fill shows through
     * under white autofill text, which is the washed-out, blurry-looking field
     * in the report.
     *
     * Keyed off the id, so it outranks that rule outright rather than by source
     * order, and the gold glow is re-stated alongside the mask so a focused
     * field still reads as focused. */
    #autocomplete:-webkit-autofill {
        -webkit-text-fill-color: #ffffff !important;
        caret-color: #ffffff !important;
        /* Opaque, unlike the field's usual rgba(6, 17, 33, 0.8): a mask has to
           hide the UA fill completely, and over a near-black hero the two are
           indistinguishable. */
        -webkit-box-shadow: inset 0 0 0 1000px #061121 !important;
        box-shadow: inset 0 0 0 1000px #061121 !important;
        background-color: #061121 !important;
        background-image: none !important;
        /* Chrome fades its fill in. A transition this long means the swap never
           arrives, so there is no flash of blue before the mask settles. */
        transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s !important;
    }
    #autocomplete:-webkit-autofill:hover,
    #autocomplete:-webkit-autofill:focus,
    #autocomplete:-webkit-autofill:active {
        -webkit-box-shadow: inset 0 0 0 1000px #061121, 0 0 15px rgba(235, 216, 176, 0.3) !important;
        box-shadow: inset 0 0 0 1000px #061121, 0 0 15px rgba(235, 216, 176, 0.3) !important;
    }
    /* The standard selector, in rules of its own rather than in the lists above:
       one unknown selector invalidates a whole rule, so a browser that predates
       `:autofill` would drop the -webkit- half with it. */
    #autocomplete:autofill {
        -webkit-text-fill-color: #ffffff !important;
        caret-color: #ffffff !important;
        -webkit-box-shadow: inset 0 0 0 1000px #061121 !important;
        box-shadow: inset 0 0 0 1000px #061121 !important;
        background-color: #061121 !important;
        background-image: none !important;
        transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s !important;
    }
    #autocomplete:autofill:hover,
    #autocomplete:autofill:focus,
    #autocomplete:autofill:active {
        -webkit-box-shadow: inset 0 0 0 1000px #061121, 0 0 15px rgba(235, 216, 176, 0.3) !important;
        box-shadow: inset 0 0 0 1000px #061121, 0 0 15px rgba(235, 216, 176, 0.3) !important;
    }


/* ---- index.php, was inline <style> at line 1720 ---- */

    #ppNftInfo {
        width: min(460px, calc(100vw - 32px));
        max-width: none;
        max-height: none;
        margin: auto;
        padding: 0;
        border: 0;
        background: transparent;
        color: #e6e9ee;
        overflow: visible;
    }
    #ppNftInfo::backdrop { background: rgba(1, 6, 12, 0.76); }
    #ppNftInfo .ppnft-card {
        position: relative;
        box-sizing: border-box;
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 22px 22px 20px;
        border: 1.5px solid #d9bd6c;
        border-radius: 16px;
        background:
            radial-gradient(90% 50% at 0% 0%, rgba(240, 196, 96, 0.10) 0%, rgba(240, 196, 96, 0) 70%),
            linear-gradient(180deg, #071624 0%, #020b15 100%);
        box-shadow: 0 0 18px rgba(226, 190, 96, 0.30), 0 20px 50px rgba(0, 0, 0, 0.60);
        font-family: 'DM Sans', 'Lexend', sans-serif;
        font-size: 15px;
        line-height: 1.45;
        text-align: left;
    }
    #ppNftInfo .ppnft-card * { box-sizing: border-box; }
    #ppNftInfo .ppnft-x {
        position: absolute;
        top: 12px;
        right: 12px;
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        margin: 0;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.04);
        color: #c9ced8;
        cursor: pointer;
    }
    #ppNftInfo .ppnft-x:hover { color: #ffffff; border-color: rgba(233, 196, 106, 0.6); }
    #ppNftInfo .ppnft-x svg { width: 14px; height: 14px; }
    #ppNftInfo .ppnft-head { display: flex; align-items: center; gap: 14px; padding-right: 40px; }
    #ppNftInfo .ppnft-head svg { flex: 0 0 auto; width: 44px; height: 49px; }
    #ppNftInfo .ppnft-kicker {
        margin: 0;
        color: #e9c46a;
        font-family: 'Manrope', 'DM Sans', sans-serif;
        font-weight: 800;
        font-size: 11.5px;
        line-height: 1.2;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }
    #ppNftInfo .ppnft-title {
        margin: 3px 0 0;
        padding: 0;
        color: #ffffff;
        font-family: 'Manrope', 'DM Sans', sans-serif;
        font-weight: 800;
        font-size: 24px;
        line-height: 1.1;
        letter-spacing: -0.01em;
        text-transform: none;
    }
    #ppNftInfo .ppnft-sub { margin: 14px 0 0; color: #d4dae3; font-size: 15px; line-height: 1.45; }
    #ppNftInfo .ppnft-h {
        margin: 18px 0 8px;
        padding: 0;
        color: #e9c46a;
        font-family: 'Manrope', 'DM Sans', sans-serif;
        font-weight: 800;
        font-size: 12.5px;
        line-height: 1.2;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    #ppNftInfo ol,
    #ppNftInfo ul { margin: 0; padding: 0; list-style: none; counter-reset: ppnft; }
    #ppNftInfo li {
        position: relative;
        margin: 0;
        padding: 0 0 0 26px;
        color: #e4e8ee;
        font-size: 14.5px;
        line-height: 1.45;
    }
    #ppNftInfo li + li { margin-top: 7px; }
    #ppNftInfo li b { color: #ffffff; font-weight: 700; }
    #ppNftInfo ol li::before {
        counter-increment: ppnft;
        content: counter(ppnft);
        position: absolute;
        left: 0;
        top: 1px;
        display: grid;
        place-items: center;
        width: 18px;
        height: 18px;
        border: 1px solid #d9bd6c;
        border-radius: 50%;
        color: #f3d27a;
        font-family: 'Manrope', 'DM Sans', sans-serif;
        font-weight: 800;
        font-size: 10.5px;
        line-height: 1;
    }
    #ppNftInfo ul li::before {
        content: '';
        position: absolute;
        left: 6px;
        top: 0.62em;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #e9c46a;
    }
    #ppNftInfo ul.ppnft-limits li::before { background: none; border: 1.5px solid #9aa4b5; }
    #ppNftInfo .ppnft-go {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5em;
        width: 100%;
        min-height: 48px;
        margin: 20px 0 0;
        padding: 10px 16px;
        border: 1px solid #d3b064;
        border-radius: 10px;
        background: linear-gradient(180deg, rgba(18, 36, 58, 0.94) 0%, rgba(7, 17, 31, 0.96) 100%);
        box-shadow: inset 0 1px 0 rgba(255, 236, 184, 0.14), 0 0 10px rgba(214, 178, 96, 0.22);
        color: #ffffff;
        font-family: 'Manrope', 'DM Sans', sans-serif;
        font-weight: 800;
        font-size: 16px;
        line-height: 1.2;
        text-transform: none;
        cursor: pointer;
    }
    #ppNftInfo .ppnft-go:hover { border-color: #f0cf7c; box-shadow: inset 0 1px 0 rgba(255, 236, 184, 0.18), 0 0 16px rgba(232, 196, 108, 0.38); }
    #ppNftInfo .ppnft-go svg { width: 0.95em; height: 0.62em; color: #f1c862; }
    #ppNftInfo button:focus-visible { outline: 2px solid #8bcbff; outline-offset: 3px; }


/* ---- index.php, was inline <style> at line 2872 ---- */

    .market-place-header {
        text-align: center;
        padding: 5px 20px 15px 20px;
        position: relative;
        background: transparent;
        max-width: 700px;
        margin: -10px auto 0 auto;
    }

    .stars-bg {
        position: absolute;
        top: -10px;
        left: -20px;
        right: -20px;
        bottom: -10px;
        background-image:
            radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent),
            radial-gradient(2px 2px at 30% 60%, rgba(0, 255, 224, 0.9), transparent),
            radial-gradient(1px 1px at 50% 10%, #fff, transparent),
            radial-gradient(2.5px 2.5px at 70% 30%, rgba(120, 90, 255, 1), transparent),
            radial-gradient(1.5px 1.5px at 90% 80%, #fff, transparent),
            radial-gradient(2px 2px at 20% 80%, rgba(255, 80, 200, 0.9), transparent),
            radial-gradient(1px 1px at 80% 60%, #fff, transparent),
            radial-gradient(2px 2px at 50% 50%, rgba(0, 255, 224, 0.7), transparent),
            radial-gradient(1.5px 1.5px at 15% 90%, rgba(120, 90, 255, 0.8), transparent),
            radial-gradient(2.5px 2.5px at 85% 15%, rgba(255, 80, 200, 0.8), transparent),
            radial-gradient(1px 1px at 40% 90%, #fff, transparent),
            radial-gradient(2px 2px at 60% 85%, rgba(0, 255, 224, 0.6), transparent);
        background-size: 100% 100%;
        opacity: 0.8;
        z-index: 1;
        pointer-events: none;
        animation: stars-twinkle 4s infinite alternate ease-in-out;
        /* Fades out the stars at the edges */
        mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 70%);
        -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 70%);
    }

    .glowing-line {
        height: 2px;
        width: 100%;
        max-width: 600px;
        margin: 10px auto;
        background: linear-gradient(90deg, transparent, rgba(0, 255, 224, 0.8), rgba(120, 90, 255, 1), rgba(255, 80, 200, 0.8), transparent);
        box-shadow: 0 0 15px rgba(0, 255, 224, 0.6), 0 0 25px rgba(120, 90, 255, 0.8), 0 0 15px rgba(255, 80, 200, 0.6);
        position: relative;
        z-index: 2;
        border-radius: 50%;
    }

    .market-title {
        margin: 0;
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 80px;
    }

    .market-logo {
        height: 75px;
        width: auto;
        max-width: 100%;
        filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.1));
        display: block;
    }

    @media (max-width: 768px) {
        .market-logo {
            height: 60px;
        }
    }

    @media (max-width: 480px) {
        .market-logo {
            height: 45px;
        }
    }

    .market-subtitle {
        font-size: clamp(10px, 2.8vw, 16px);
        color: #e2e8f0;
        margin: 0;
        font-weight: 400;
        position: relative;
        z-index: 2;
        text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
        white-space: nowrap;
    }

    @keyframes stars-twinkle {
        0% {
            opacity: 0.4;
            transform: scale(0.98);
        }

        100% {
            opacity: 1;
            transform: scale(1.02);
        }
    }


/* ---- index.php, was inline <style> at line 2977 ---- */

    /* ══════════════════════════════════════════════════════
       HOUSBE – Hero Cards Gold Premium Galaxy Override
       ══════════════════════════════════════════════════════ */
    .houseBe__heroCardWrapper {
        background:
            radial-gradient(ellipse at top left, rgba(235, 216, 176, 0.18) 0%, transparent 55%),
            radial-gradient(ellipse at bottom right, rgba(43, 93, 153, 0.14) 0%, transparent 55%),
            linear-gradient(160deg, rgba(14, 30, 55, 0.88) 0%, rgba(6, 17, 33, 0.80) 100%) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        border-top: 1px solid rgba(235, 216, 176, 0.72) !important;
        border-left: 1px solid rgba(235, 216, 176, 0.50) !important;
        border-right: 1px solid rgba(235, 216, 176, 0.12) !important;
        border-bottom: 1px solid rgba(235, 216, 176, 0.06) !important;
        border-radius: 20px !important;
        isolation: isolate !important;
        box-shadow: 
            3px 5px 0 rgba(195, 145, 35, 0.45),
            4px 7px 8px rgba(0, 0, 0, 0.55),
            0 12px 24px rgba(0, 0, 0, 0.45),
            0 5px 10px rgba(0, 0, 0, 0.32),
            0 20px 40px rgba(0, 0, 0, 0.22),
            0 0 28px rgba(235, 216, 176, 0.32),
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            inset 0 0 18px rgba(235, 216, 176, 0.18) !important;
    }

    .houseBe__heroCardWrapper:hover {
        background:
            radial-gradient(ellipse at top left, rgba(235, 216, 176, 0.25) 0%, transparent 55%),
            radial-gradient(ellipse at bottom right, rgba(43, 93, 153, 0.18) 0%, transparent 55%),
            linear-gradient(160deg, rgba(16, 34, 62, 0.92) 0%, rgba(6, 17, 33, 0.86) 100%) !important;
        border-top-color: rgba(235, 216, 176, 0.92) !important;
        border-left-color: rgba(235, 216, 176, 0.72) !important;
        border-right-color: rgba(235, 216, 176, 0.22) !important;
        border-bottom-color: rgba(235, 216, 176, 0.10) !important;
        box-shadow:
            4px 7px 0 rgba(215, 165, 45, 0.58),
            5px 9px 12px rgba(0, 0, 0, 0.65),
            0 18px 36px rgba(0, 0, 0, 0.55),
            0 8px 16px rgba(0, 0, 0, 0.42),
            0 28px 50px rgba(0, 0, 0, 0.28),
            0 0 36px rgba(235, 216, 176, 0.50),
            inset 0 1px 0 rgba(255, 255, 255, 0.26),
            inset 0 0 26px rgba(235, 216, 176, 0.26) !important;
    }

    .houseBe__heroCardWrapper h3.customFont {
        color: #ebd8b0 !important;
        text-shadow: 0 0 15px rgba(235, 216, 176, 0.8);
    }

    .houseBe__heroCardWrapper .mouse-light {
        background: radial-gradient(circle, rgba(235, 216, 176, 0.15) 0%, rgba(235, 216, 176, 0) 70%) !important;
    }

    .houseBe__heroCardWrapper .leads-btn-premium {
        background: linear-gradient(135deg, #ebd8b0 0%, #d3bf98 100%) !important;
        color: #061121 !important;
        border: 1px solid rgba(235, 216, 176, 0.4) !important;
        border-radius: 30px !important;
        box-shadow: 0 4px 15px rgba(235, 216, 176, 0.2), inset 0 0 10px rgba(235, 216, 176, 0.1) !important;
        transition: all 0.3s ease !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        font-weight: 600 !important;
    }

    .houseBe__heroCardWrapper .leads-btn-premium:hover {
        transform: translateY(-2px) scale(1.02) !important;
        background: linear-gradient(135deg, #f7e6c4 0%, #e0cda7 100%) !important;
        box-shadow: 0 6px 20px rgba(235, 216, 176, 0.35) !important;
        color: #061121 !important;
    }

    /* ── the PAIR of join buttons (Join as an Agent / Join as a Buyer) ────────
       These were clipped by the card on nearly every screen. Each carried
       ~200 characters of inline `!important`, and two declarations in it did
       the damage: `min-width: 180px` and `padding: 12px 25px`. There is no
       global border-box in this project, so that is 180 + 50 + 2 = 232px per
       button — a pair costs 484px with the row's gap, while the card's content
       row is (80vw - 40px)/3 - 30px and only reaches 484px at about a 1750px
       viewport. Measured overflow past the card's right edge: +13px at 1584px,
       +37px at 1424px, +61px at 1264px, +88px at 1084px. .card__buttonWrapper
       has no flex-wrap, so there was nowhere for the second button to go, and
       .houseBe__heroCardWrapper is overflow: hidden, so it was cut off rather
       than merely sticking out. Inline !important also outranks a stylesheet
       !important, so the @media (max-width: 991px) block that shrinks
       .leads-btn-premium to 36px/11px never reached these two either.

       The fix is to let the row WRAP and to stop paying for a min-width the
       labels never needed. No min-width plus fluid side padding takes a button
       from 232px to ~170px, which is what lets a pair sit side by side on a
       laptop card; where even that does not fit, the pair breaks into two
       stacked full-width rows instead of overflowing. */
    .houseBe__heroCardWrapper .join-cta-row {
        display: flex !important;
        /* row + wrap at EVERY width, so the stacking is this rule's decision.
           .card__buttonWrapper picks up `flex-direction: column !important` at
           <=640px elsewhere in the sheet, and in a column `flex-grow` grows the
           HEIGHT — the buttons would stretch instead of widening. */
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 10px;
        width: 100% !important;
        margin: 20px 0 0 !important;
    }
    .houseBe__heroCardWrapper .join-cta {
        /* the base .leads-btn-premium is display:block + margin:0 auto +
           max-width:fit-content — built for ONE centred button, wrong for a pair */
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        /* basis auto = the label's own width, which is what the wrap decision is
           made on, so the pair breaks to two rows exactly when it stops fitting.
           grow 1 then shares whatever line each button lands on — two even
           halves side by side, or one full-width button once they have stacked. */
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        height: 44px !important;
        line-height: 1 !important;
        padding: 0 clamp(12px, 1.1vw, 20px) !important;
        font-size: clamp(11px, 0.95vw, 14px) !important;
        letter-spacing: 0.8px !important;
        white-space: nowrap !important;
        text-align: center !important;
    }
    /* one per row and a little taller, for the tap target */
    @media (max-width: 480px) {
        .houseBe__heroCardWrapper .join-cta { flex: 1 1 100% !important; height: 46px !important; }
    }

    .houseBe__heroCardWrapper .interactive-block i {
        color: #ebd8b0 !important;
        text-shadow: 0 0 8px rgba(235, 216, 176, 0.4);
    }

    /* Mobile / touch: keep the full 3D gold border (GPU-safe 0-blur offset
       so it survives the iOS crash-prevention block at top of file) */
    @media (max-width: 1024px), (hover: none) {
        .houseBe__heroCardWrapper .interactive-block {
            border-top: 1px solid rgba(235, 216, 176, 0.72) !important;
            border-left: 1px solid rgba(235, 216, 176, 0.50) !important;
            border-right: 1px solid rgba(235, 216, 176, 0.18) !important;
            border-bottom: 1px solid rgba(235, 216, 176, 0.10) !important;
            box-shadow:
                3px 5px 0 rgba(195, 145, 35, 0.45),
                5px 8px 0 rgba(0, 0, 0, 0.22) !important;
            transform: none !important;
        }
        .houseBe__heroCardWrapper .interactive-block:hover {
            transform: none !important;
            box-shadow:
                3px 5px 0 rgba(195, 145, 35, 0.45),
                5px 8px 0 rgba(0, 0, 0, 0.22) !important;
        }

        /* PARENT CARD — restore the 3D gold border on mobile/touch.
           Two-class selector beats the GPU block's single .premium-hover-card
           rule; 0-blur offset shadows are GPU-safe for iOS WebKit. */
        .houseBe__heroCardWrapper.premium-hover-card {
            border-top: 1px solid rgba(235, 216, 176, 0.72) !important;
            border-left: 1px solid rgba(235, 216, 176, 0.50) !important;
            border-right: 1px solid rgba(235, 216, 176, 0.18) !important;
            border-bottom: 1px solid rgba(235, 216, 176, 0.10) !important;
            border-radius: 20px !important;
            box-shadow:
                4px 6px 0 rgba(195, 145, 35, 0.48),
                8px 11px 0 rgba(0, 0, 0, 0.28) !important;
            transform: none !important;
        }
        .houseBe__heroCardWrapper.premium-hover-card:hover {
            transform: none !important;
            box-shadow:
                4px 6px 0 rgba(195, 145, 35, 0.48),
                8px 11px 0 rgba(0, 0, 0, 0.28) !important;
        }
    }

    @media (max-width: 640px) {
        .houseBe__heroMainWrapper {
            padding: 40px 16px !important;
        }
        .houseBe__heroCardWrapper {
            height: auto !important;
            padding: 24px 20px 30px 20px !important;
        }
        .housebe__cardContentWrapper p {
            font-size: 14px !important;
            line-height: 1.6 !important;
        }
        .paraWrapper {
            min-height: auto !important;
            margin-bottom: 15px !important;
        }
    }


/* ---- index.php, was inline <style> at line 3832 ---- */

          /* ---- Section head. Mirrors .ohh-head above so the two sections read
                 as a pair; only the hue changes. ---- */
          .omk-head { text-align: center; margin-bottom: 30px; }
          .omk-eyebrow {
            display: inline-flex; align-items: center; gap: 11px;
            font-size: 12.5px; font-weight: 800; letter-spacing: 2.8px;
            text-transform: uppercase; color: #ffc9cd; margin-bottom: 14px;
            line-height: 1.5;
            padding: 7px 18px; border-radius: 50px;
            background: rgba(255, 59, 71, 0.10);
            border: 1px solid rgba(255, 59, 71, 0.38);
            box-shadow: 0 0 22px rgba(255, 45, 58, 0.18);
          }
          .omk-eyebrow::before, .omk-eyebrow::after {
            content: ""; width: 22px; height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 99, 109, .8));
          }
          .omk-eyebrow::after { background: linear-gradient(90deg, rgba(255, 99, 109, .8), transparent); }
          .omk-title {
            color: #fff; font-weight: 600;
            font-size: clamp(24px, 3.2vw, 38px);
            line-height: 1.22; letter-spacing: -0.2px; margin: 0 0 12px;
            text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
          }
          /* The phrase the section turns on, so it carries the ramp and the
             bloom — the red counterpart of .ohh-title b. */
          .omk-title b {
            font-weight: 800;
            background: linear-gradient(180deg, #ffe3e5 0%, #ff8a92 40%, #ff2436 100%);
            -webkit-background-clip: text; background-clip: text;
            -webkit-text-fill-color: transparent; color: #ff6b75;
            filter: drop-shadow(0 0 16px rgba(255, 45, 58, 0.42));
          }
          .omk-sub {
            color: #c2d3e3;
            font-size: clamp(15px, 1.25vw, 17.5px);
            line-height: 1.62; font-weight: 400;
            max-width: 62ch; margin: 0 auto;
          }

          /* ---- The panel. Same geometry as .ohh-row (art column + detail) so
                 it lines up with the rail above instead of sitting on the page
                 as a different shape. ---- */
          .omk-row {
            display: flex; align-items: stretch; min-width: 0;
            position: relative; isolation: isolate; overflow: hidden;
            border-radius: 20px;
            background:
              radial-gradient(ellipse at top left, rgba(255, 59, 71, 0.16) 0%, transparent 55%),
              radial-gradient(ellipse at bottom right, rgba(120, 10, 20, 0.20) 0%, transparent 58%),
              linear-gradient(160deg, #14070a 0%, #080406 55%, #100609 100%);
            border-top: 1px solid rgba(255, 59, 71, 0.62);
            border-left: 1px solid rgba(255, 59, 71, 0.42);
            border-right: 1px solid rgba(255, 59, 71, 0.14);
            border-bottom: 1px solid rgba(255, 59, 71, 0.08);
            box-shadow:
              3px 5px 0 rgba(150, 18, 28, 0.42),
              4px 7px 8px rgba(0, 0, 0, 0.55),
              0 12px 24px rgba(0, 0, 0, 0.45),
              0 0 28px rgba(255, 45, 58, 0.24),
              inset 0 1px 0 rgba(255, 255, 255, 0.10),
              inset 0 0 18px rgba(255, 45, 58, 0.12);
            transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
          }
          .omk-row::after {
            content: ""; position: absolute; inset: 6px;
            border: 1px solid rgba(255, 59, 71, 0.10);
            border-radius: 14px; pointer-events: none; z-index: 4;
          }
          .omk-row:hover {
            transform: translateY(-4px);
            border-top-color: rgba(255, 59, 71, 0.9);
            border-left-color: rgba(255, 59, 71, 0.68);
            box-shadow:
              3px 5px 0 rgba(150, 18, 28, 0.55),
              0 18px 34px rgba(0, 0, 0, 0.5),
              0 0 44px rgba(255, 45, 58, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.14),
              inset 0 0 22px rgba(255, 45, 58, 0.18);
          }

          /* ---- Art column ----
                 Carries only the glow behind the key, no ground of its own: the
                 row's gradient is lighter on the detail side, so any panel fill
                 or edge fade here draws a visible vertical seam down the middle
                 of the card. Letting .omk-row paint straight through removes
                 it. ---- */
          .omk-art {
            flex: 0 0 32%; max-width: 32%; min-width: 0;
            position: relative; display: grid; place-items: center;
            padding: 26px 10px;
            background: radial-gradient(circle at 50% 46%, rgba(255, 45, 58, 0.20) 0%, transparent 64%);
          }

          /* The art carries its own alpha, so it needs no blend mode and no
             mask — see THE ART in the block comment above. The drop-shadow adds
             the bloom that the keyed-out ground used to supply. */
          .omk-art picture { display: block; width: 100%; max-width: 210px; }
          .omk-key-art {
            display: block; width: 100%; height: auto;
            filter: drop-shadow(0 0 26px rgba(255, 45, 58, 0.35));
          }

          /* ---- Detail column ---- */
          .omk-detail {
            flex: 1 1 auto; min-width: 0;
            display: flex; flex-direction: column;
            padding: 24px 26px; gap: 10px;
          }
          .omk-toprow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
          .omk-chip, .omk-flag {
            display: inline-flex; align-items: center; gap: 7px;
            font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px;
            text-transform: uppercase; line-height: 1.5;
            padding: 6px 12px; border-radius: 999px;
          }
          .omk-chip {
            color: #ffd4d7; background: rgba(255, 59, 71, .14);
            border: 1px solid rgba(255, 59, 71, .42);
          }
          .omk-flag {
            color: #cbd5e1; background: rgba(255, 255, 255, .05);
            border: 1px solid rgba(255, 255, 255, .12);
          }
          .omk-name {
            color: #fff; font-size: 22px; font-weight: 800;
            line-height: 1.28; margin: 4px 0 0; letter-spacing: -0.2px;
          }
          .omk-copy {
            color: #a9bccd; font-size: 14.5px; line-height: 1.62;
            margin: 0; max-width: 56ch;
          }
          .omk-foot-row {
            display: flex; align-items: center; justify-content: space-between;
            gap: 14px; flex-wrap: wrap;
            margin-top: auto; padding-top: 16px;
            border-top: 1px solid rgba(255, 59, 71, .16);
          }
          .omk-hint {
            color: #8fa4b8; font-size: 12.5px; line-height: 1.55;
            display: inline-flex; align-items: center; gap: 8px;
          }
          .omk-hint i { color: #ff6b75; }

          /* The trigger. Same plate as the Deal Room hero's go button, minus the
             bar it lives in. */
          .omk-cta {
            display: inline-flex; align-items: center; gap: 11px;
            cursor: pointer; font-family: inherit; white-space: nowrap;
            padding: 13px 20px; border-radius: 11px;
            border: 1px solid rgba(255, 150, 155, 0.55);
            background: linear-gradient(180deg, #ff2436 0%, #e0101f 45%, #a80c17 100%);
            color: #fff; font-size: 11.5px; font-weight: 800;
            letter-spacing: 1.2px; text-transform: uppercase; line-height: 1.5;
            box-shadow:
              inset 0 1px 0 rgba(255, 255, 255, 0.3),
              inset 0 -2px 6px rgba(70, 0, 6, 0.35),
              0 8px 22px rgba(0, 0, 0, 0.45),
              0 0 26px rgba(255, 35, 50, 0.5);
            transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
          }
          .omk-cta:hover { filter: brightness(1.12); transform: translateY(-2px); }
          .omk-cta:active { transform: translateY(1px); }
          .omk-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
          .omk-cta i { font-size: 13px; }

          /* ---- Below 860px a 32% column is unusable, so the panel stacks —
                 same threshold and reasoning as .ohh-row. ---- */
          @media (max-width: 860px) {
            .omk-row { flex-direction: column; }
            .omk-art { flex: 0 0 auto; max-width: 100%; padding: 24px 10px 8px; }
            .omk-key-art { max-width: 168px; }
            .omk-detail { padding: 18px 20px 22px; }
            .omk-name { font-size: 19px; }
          }
          @media (max-width: 560px) {
            .omk-eyebrow { font-size: 11.5px; letter-spacing: 2.4px; padding: 6px 14px; }
            .omk-title { font-size: 24px; }
            .omk-sub { font-size: 14.5px; }
            .omk-key-art { max-width: 140px; }
            .omk-foot-row { gap: 12px; }
            .omk-cta { width: 100%; justify-content: center; }
          }
          @media (prefers-reduced-motion: reduce) {
            .omk-row, .omk-cta { transition: none; }
            .omk-row:hover { transform: none; }
            .omk-cta:hover { transform: none; }
          }
        

/* ---- index.php, was inline <style> at line 4083 ---- */

  .omx-veil {
    position: fixed; inset: 0; z-index: 100001; display: none;
    background: rgba(3, 4, 8, .86);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    padding: 18px; overflow-y: auto;
    font-family: "Nunito", system-ui, -apple-system, sans-serif;
  }
  /* Centred, not top-aligned: at `display: block` the card sat under the site
     header at the top of the viewport. flex + `margin: auto` on the card is the
     pairing that survives a card taller than the veil — `align-items: center`
     alone would push its top edge out of reach above the scroll origin. */
  .omx-veil.is-on { display: flex; }
  .omx-veil * { box-sizing: border-box; }
  /* This page's global h1-h6 rules land dark-on-dark inside an overlay, so the
     colour is reclaimed here. Same fix as .ohx-veil. */
  .omx-veil h1, .omx-veil h2, .omx-veil h3,
  .omx-veil h4, .omx-veil h5, .omx-veil h6 { color: #fff; font-family: inherit; }

  /* The card. Narrow on purpose — it asks one question. */
  .omx {
    position: relative;
    width: 100%; max-width: 440px; margin: auto;
    padding: 24px 24px 22px;
    border-radius: 18px; overflow: hidden;
    background:
      /* Kept light: the art screens over this corner, and a hotter wash here
         turns the key's gold red. */
      radial-gradient(120% 78% at 82% 6%, rgba(255, 45, 58, 0.16) 0%, transparent 60%),
      radial-gradient(90% 60% at 12% 96%, rgba(150, 12, 24, 0.20) 0%, transparent 62%),
      linear-gradient(168deg, #150609 0%, #080406 52%, #0e0507 100%);
    border: 1px solid rgba(255, 59, 71, 0.30);
    box-shadow:
      0 30px 80px rgba(0, 0, 0, 0.75),
      0 0 60px rgba(255, 45, 58, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: omxRise .28s cubic-bezier(.2, .8, .3, 1) both;
  }
  @keyframes omxRise { from { opacity: 0; transform: translateY(14px) scale(.985); } }

  /* Opaque, not a translucent tint: the art now reaches into this corner, and a
     6%-white disc over the lit keyhole read as smudge rather than as a button. */
  .omx-x {
    position: absolute; top: 11px; right: 11px; z-index: 3;
    width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center; font-size: 12px;
    background: rgba(8, 4, 6, .78); border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    color: #e2e8f0; transition: .2s;
  }
  .omx-x:hover { background: rgba(168, 12, 23, .92); border-color: rgba(255, 59, 71, .7); color: #fff; }

  /* Head: the art runs down the right of the WHOLE text column, not just beside
     the heading. That is what the reference draws — the rule, "Great
     opportunity" and its line both stop short of the key rather than running
     under it — and it is why the copy needs no max-width of its own: the column
     it lives in is already the right width. */
  .omx-top { display: flex; align-items: flex-start; gap: 12px; }
  .omx-head { flex: 1 1 auto; min-width: 0; }
  /* 25px against a 440px card: the break is written into the markup as "No
     listings found / in this area", and much above this the first line stops
     fitting the column the art leaves it and wraps to three. Anything that
     widens the art or the type has to be re-checked against that. */
  .omx-title {
    margin: 0 0 13px;
    font-size: 25px; font-weight: 800; line-height: 1.2;
    letter-spacing: -0.4px; color: #fff;
  }
  /* This is the line break — see the note on the markup. */
  .omx-title span { display: block; }

  /* Pulled up and right into the card's padding, as the reference frames it.
     Only the asset's transparent margin crosses the edge — the keyhole's own
     pixels stop about 5px short of the right of the file, so this cannot grow
     much further before .omx's overflow:hidden starts shaving it. */
  .omx-art { flex: 0 0 156px; margin: -8px -6px 0 0; }
  .omx-art picture { display: block; }
  /* Same keyed-out asset as the section — see THE ART above. */
  .omx-key-art {
    display: block; width: 100%; height: auto;
    filter: drop-shadow(0 0 22px rgba(255, 45, 58, 0.42));
  }

  /* Hairline with a lit dot on it, per the reference. Sits inside .omx-head, so
     it ends where the art begins. */
  .omx-rule {
    display: block; position: relative; height: 1px; margin: 0 0 13px;
    background: linear-gradient(90deg, rgba(255, 59, 71, .6) 0%, rgba(255, 59, 71, .22) 68%, transparent 100%);
  }
  .omx-rule::after {
    content: ""; position: absolute; top: 50%; left: 42%;
    width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
    background: #ff2436;
    box-shadow: 0 0 10px rgba(255, 36, 54, .95), 0 0 22px rgba(255, 36, 54, .55);
  }

  .omx-lead {
    margin: 0 0 5px; font-size: 21px; font-weight: 800; line-height: 1.25;
    color: #ff2436; letter-spacing: -0.2px;
    text-shadow: 0 0 22px rgba(255, 36, 54, .35);
  }
  .omx-sub {
    margin: 0; font-size: 14.5px; line-height: 1.52;
    color: #dbe3ec; font-weight: 400;
  }

  /* Primary. The Deal Room plate, full width, white wording. */
  .omx-go {
    width: 100%; display: inline-flex; align-items: center; justify-content: center;
    gap: 10px; cursor: pointer; font-family: inherit;
    margin-top: 18px; padding: 14px 16px; border-radius: 10px;
    border: 1px solid rgba(255, 150, 155, 0.55);
    background: linear-gradient(180deg, #ff2436 0%, #e0101f 45%, #a80c17 100%);
    color: #fff; font-size: 11.5px; font-weight: 800;
    letter-spacing: 1.3px; text-transform: uppercase; line-height: 1.5;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      inset 0 -2px 6px rgba(70, 0, 6, 0.35),
      0 8px 22px rgba(0, 0, 0, 0.45),
      0 0 26px rgba(255, 35, 50, 0.5);
    transition: filter .2s ease, transform .2s ease;
  }
  .omx-go:hover { filter: brightness(1.12); }
  .omx-go:active { transform: translateY(1px); }
  .omx-go i { font-size: 13px; }
  .omx-go .omx-go-key { opacity: .95; }

  /* Dismiss. Reads as red type on the card, which is all the reference gives
     it; the hairline is here only so it has an edge to be clicked at. */
  .omx-not {
    width: 100%; margin-top: 10px; cursor: pointer; font-family: inherit;
    padding: 13px 16px; border-radius: 10px;
    background: transparent; border: 1px solid rgba(255, 59, 71, 0.20);
    color: #ff3b47; font-size: 11.5px; font-weight: 800;
    letter-spacing: 1.3px; text-transform: uppercase; line-height: 1.5;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
  }
  .omx-not:hover { background: rgba(255, 59, 71, .10); border-color: rgba(255, 59, 71, .42); color: #ff6b75; }

  .omx-go:focus-visible, .omx-not:focus-visible, .omx-x:focus-visible {
    outline: 2px solid #fff; outline-offset: 3px;
  }

  @media (max-width: 420px) {
    /* No margin override here — `margin: auto` is what centres the card. */
    .omx { padding: 20px 18px 18px; }
    .omx-title { font-size: 21px; }
    .omx-art { flex-basis: 116px; }
    .omx-lead { font-size: 18px; }
    .omx-sub { font-size: 13.5px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .omx { animation: none; }
    .omx-go, .omx-not, .omx-x { transition: none; }
  }


/* ---- index.php, was inline <style> at line 4356 ---- */


                    /* ══════════════════════════════════════════════════════
                       HOUSBE – Fintech Lead Cards Gold Theme Overrides
                       ══════════════════════════════════════════════════════ */
                    .premium-lead-card {
                        background:
                            radial-gradient(ellipse at top left, rgba(235, 216, 176, 0.18) 0%, transparent 55%),
                            radial-gradient(ellipse at bottom right, rgba(43, 93, 153, 0.14) 0%, transparent 55%),
                            linear-gradient(160deg, rgba(14, 30, 55, 0.88) 0%, rgba(6, 17, 33, 0.80) 100%) !important;
                        backdrop-filter: blur(12px) !important;
                        -webkit-backdrop-filter: blur(12px) !important;
                        border-top: 1px solid rgba(235, 216, 176, 0.72) !important;
                        border-left: 1px solid rgba(235, 216, 176, 0.50) !important;
                        border-right: 1px solid rgba(235, 216, 176, 0.12) !important;
                        border-bottom: 1px solid rgba(235, 216, 176, 0.06) !important;
                        border-radius: 20px !important;
                        padding: 24px !important;
                        margin-bottom: 24px !important;
                        position: relative !important;
                        transition: all 0.3s ease !important;
                        overflow: hidden !important;
                        isolation: isolate !important;
                        box-shadow: 
                            3px 5px 0 rgba(195, 145, 35, 0.45),
                            4px 7px 8px rgba(0, 0, 0, 0.55),
                            0 12px 24px rgba(0, 0, 0, 0.45),
                            0 5px 10px rgba(0, 0, 0, 0.32),
                            0 20px 40px rgba(0, 0, 0, 0.22),
                            0 0 28px rgba(235, 216, 176, 0.32),
                            inset 0 1px 0 rgba(255, 255, 255, 0.18),
                            inset 0 0 18px rgba(235, 216, 176, 0.18) !important;
                    }

                    .premium-lead-card::after {
                        content: '' !important;
                        position: absolute !important;
                        top: 6px !important; 
                        left: 6px !important; 
                        right: 6px !important; 
                        bottom: 6px !important;
                        border: 1px solid rgba(235, 216, 176, 0.1) !important;
                        border-radius: 14px !important;
                        pointer-events: none !important;
                        z-index: 1 !important;
                    }

                    .premium-lead-card:hover {
                        background:
                            radial-gradient(ellipse at top left, rgba(235, 216, 176, 0.25) 0%, transparent 55%),
                            radial-gradient(ellipse at bottom right, rgba(43, 93, 153, 0.18) 0%, transparent 55%),
                            linear-gradient(160deg, rgba(16, 34, 62, 0.92) 0%, rgba(6, 17, 33, 0.86) 100%) !important;
                        border-top-color: rgba(235, 216, 176, 0.92) !important;
                        border-left-color: rgba(235, 216, 176, 0.72) !important;
                        border-right-color: rgba(235, 216, 176, 0.22) !important;
                        border-bottom-color: rgba(235, 216, 176, 0.10) !important;
                        box-shadow:
                            4px 7px 0 rgba(215, 165, 45, 0.58),
                            5px 9px 12px rgba(0, 0, 0, 0.65),
                            0 18px 36px rgba(0, 0, 0, 0.55),
                            0 8px 16px rgba(0, 0, 0, 0.42),
                            0 28px 50px rgba(0, 0, 0, 0.28),
                            0 0 36px rgba(235, 216, 176, 0.50),
                            inset 0 1px 0 rgba(255, 255, 255, 0.26),
                            inset 0 0 26px rgba(235, 216, 176, 0.26) !important;
                        transform: translateY(-5px) !important;
                    }

                    .lead-status-badge {
                        background: rgba(235, 216, 176, 0.1) !important;
                        color: #ebd8b0 !important;
                        border: 1px solid rgba(235, 216, 176, 0.3) !important;
                        box-shadow: 0 0 10px rgba(235, 216, 176, 0.2) !important;
                    }

                    .status-new, .status-looking {
                        background: rgba(235, 216, 176, 0.1) !important;
                        color: #ebd8b0 !important;
                        border-color: rgba(235, 216, 176, 0.3) !important;
                        box-shadow: 0 0 10px rgba(235, 216, 176, 0.2) !important;
                    }

                    .lead-price-main {
                        color: #ebd8b0 !important;
                        text-shadow: 0 0 20px rgba(235, 216, 176, 0.4) !important;
                    }

                    .lead-meta-row i {
                        color: #ebd8b0 !important;
                    }

                    .unlock-lead-shimmer {
                        background: linear-gradient(135deg, #ebd8b0 0%, #d3bf98 100%) !important;
                        color: #061121 !important;
                        border: 1px solid rgba(235, 216, 176, 0.4) !important;
                        border-radius: 30px !important;
                        box-shadow: 
                            0 4px 15px rgba(235, 216, 176, 0.3),
                            inset 0 4px 8px rgba(255, 255, 255, 0.3),
                            inset 0 -4px 8px rgba(0, 0, 0, 0.2) !important;
                        text-shadow: none !important;
                        font-weight: 700 !important;
                        text-transform: uppercase !important;
                        letter-spacing: 1.5px !important;
                        transition: all 0.3s ease !important;
                    }

                    .unlock-lead-shimmer:hover {
                        background: linear-gradient(135deg, #f7e6c4 0%, #e0cda7 100%) !important;
                        box-shadow: 
                            0 6px 20px rgba(235, 216, 176, 0.5),
                            inset 0 4px 8px rgba(255, 255, 255, 0.4),
                            inset 0 -4px 8px rgba(0, 0, 0, 0.2) !important;
                        transform: translateY(-2px) !important;
                        color: #061121 !important;
                    }

                    .leads-section-inner .premium-button-blue {
                        background: linear-gradient(135deg, #ebd8b0 0%, #d3bf98 100%) !important;
                        color: #061121 !important;
                        border: 1px solid rgba(235, 216, 176, 0.4) !important;
                        box-shadow: 0 4px 15px rgba(235, 216, 176, 0.2) !important;
                    }

                    .leads-section-inner .premium-button-blue:hover {
                        background: linear-gradient(135deg, #f7e6c4 0%, #e0cda7 100%) !important;
                        box-shadow: 0 6px 20px rgba(235, 216, 176, 0.35) !important;
                        color: #061121 !important;
                    }

                    .marquee-bar {
                        background: linear-gradient(to right, #081121, #0a1b32, #081121);
                        border: 1px solid rgba(235, 216, 176, 0.4) !important;
                        box-shadow: 0 0 15px rgba(235, 216, 176, 0.2), inset 0 0 10px rgba(235, 216, 176, 0.1) !important;
                    }

                    .marquee-bar .marquee-left {
                        color: #ebd8b0 !important;
                    }

                    .leads-section-inner .leads-btn-premium {
                        background: linear-gradient(135deg, #ebd8b0 0%, #d3bf98 100%) !important;
                        color: #061121 !important;
                        border: 1px solid rgba(235, 216, 176, 0.4) !important;
                        box-shadow: 0 4px 15px rgba(235, 216, 176, 0.2) !important;
                        font-family: 'Outfit', sans-serif !important;
                    }

                    .leads-section-inner .leads-btn-premium:hover {
                        background: linear-gradient(135deg, #f7e6c4 0%, #e0cda7 100%) !important;
                        box-shadow: 0 6px 20px rgba(235, 216, 176, 0.35) !important;
                        color: #061121 !important;
                        transform: translateY(-2px) scale(1.02) !important;
                    }

                    @media (max-width: 991px) {
                        .premium-lead-card {
                            padding: 8px 12px !important;
                            margin-bottom: 10px !important;
                        }
                        .lead-price-main {
                            font-size: 20px !important;
                            margin: 4px 0 !important;
                        }
                        .lead-header {
                            margin-bottom: 8px !important;
                        }
                        .lead-meta-container {
                            gap: 6px !important;
                            margin-bottom: 8px !important;
                        }
                        .lead-meta-row {
                            font-size: 11px !important;
                        }
                        .lead-status-badge {
                            padding: 3px 8px !important;
                            font-size: 9px !important;
                            letter-spacing: 0.5px !important;
                        }
                        .unlock-lead-shimmer {
                            padding: 6px 14px !important;
                            font-size: 11px !important;
                        }
                        .lead-location-id {
                            font-size: 12px !important;
                        }
                        .leads-scroll-wrapper {
                            height: 380px !important;
                        }

                    }
                

/* ---- index.php, was inline <style> at line 4641 ---- */

    /* Golden Galaxy UI for AI Leads Card */
    .premium-ai-leads-card {
        background:
            radial-gradient(ellipse at top left, rgba(235, 216, 176, 0.18) 0%, transparent 55%),
            radial-gradient(ellipse at bottom right, rgba(43, 93, 153, 0.14) 0%, transparent 55%),
            linear-gradient(160deg, rgba(14, 30, 55, 0.88) 0%, rgba(6, 17, 33, 0.80) 100%) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        border-top: 1px solid rgba(235, 216, 176, 0.72) !important;
        border-left: 1px solid rgba(235, 216, 176, 0.50) !important;
        border-right: 1px solid rgba(235, 216, 176, 0.12) !important;
        border-bottom: 1px solid rgba(235, 216, 176, 0.06) !important;
        border-radius: 24px !important;
        padding: 50px 40px !important;
        position: relative !important;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
        overflow: hidden !important;
        isolation: isolate !important;
        transform: translateY(-3px) !important;
        box-shadow: 
            3px 5px 0 rgba(195, 145, 35, 0.45),
            4px 7px 8px rgba(0, 0, 0, 0.55),
            0 12px 24px rgba(0, 0, 0, 0.45),
            0 5px 10px rgba(0, 0, 0, 0.32),
            0 20px 40px rgba(0, 0, 0, 0.22),
            0 0 28px rgba(235, 216, 176, 0.32),
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            inset 0 0 18px rgba(235, 216, 176, 0.18) !important;
    }

    .premium-ai-leads-card:hover {
        transform: translateY(-7px) !important;
        background:
            radial-gradient(ellipse at top left, rgba(235, 216, 176, 0.25) 0%, transparent 55%),
            radial-gradient(ellipse at bottom right, rgba(43, 93, 153, 0.18) 0%, transparent 55%),
            linear-gradient(160deg, rgba(16, 34, 62, 0.92) 0%, rgba(6, 17, 33, 0.86) 100%) !important;
        border-top-color: rgba(235, 216, 176, 0.92) !important;
        border-left-color: rgba(235, 216, 176, 0.72) !important;
        border-right-color: rgba(235, 216, 176, 0.22) !important;
        border-bottom-color: rgba(235, 216, 176, 0.10) !important;
        box-shadow:
            4px 7px 0 rgba(215, 165, 45, 0.58),
            5px 9px 12px rgba(0, 0, 0, 0.65),
            0 18px 36px rgba(0, 0, 0, 0.55),
            0 8px 16px rgba(0, 0, 0, 0.42),
            0 28px 50px rgba(0, 0, 0, 0.28),
            0 0 36px rgba(235, 216, 176, 0.50),
            inset 0 1px 0 rgba(255, 255, 255, 0.26),
            inset 0 0 26px rgba(235, 216, 176, 0.26) !important;
    }

    /* Heading scales down on mobile so "Unlock Exclusive" stays on one line */
    @media (max-width: 575px) {
        .hb-lead-title {
            font-size: 26px !important;
        }
    }

    @media (max-width: 380px) {
        .hb-lead-title {
            font-size: 22px !important;
        }
    }

    /* Golden house-B logo */
    .hb-lead-logo {
        display: flex;
        justify-content: center;
        margin: 0 auto 22px;
    }

    .hb-lead-logo img {
        width: 190px;
        height: auto;
        display: block;
        filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 22px rgba(235, 216, 176, 0.35));
    }

    @media (max-width: 575px) {
        .hb-lead-logo img {
            width: 140px;
        }
    }

    /* Feature chips — golden bordered pills with aligned check icons */
    .hb-lead-features {
        display: flex;
        justify-content: center;
        align-items: stretch;
        gap: 16px;
        flex-wrap: wrap;
        margin: 0 auto 40px;
        max-width: 640px;
    }

    .hb-lead-feature {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: rgba(6, 17, 33, 0.4);
        padding: 10px 18px;
        border-radius: 30px;
        border: 1px solid rgba(235, 216, 176, 0.35);
        line-height: 1;
        transition: border-color 0.3s ease, background 0.3s ease;
    }

    .hb-lead-feature:hover {
        border-color: rgba(235, 216, 176, 0.6);
        background: rgba(6, 17, 33, 0.6);
    }

    .hb-lead-feature i {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #ebd8b0 !important;
        font-size: 16px;
        line-height: 1;
        filter: drop-shadow(0 0 5px rgba(235, 216, 176, 0.5));
    }

    .hb-lead-feature i::before {
        color: #ebd8b0 !important;
    }

    .hb-lead-feature span {
        color: #eaf1f7;
        font-size: 15px;
        font-weight: 500;
        line-height: 1;
        font-family: 'Outfit', sans-serif;
    }

    @media (max-width: 575px) {
        .hb-lead-features {
            flex-direction: column;
            align-items: stretch;
            max-width: 320px;
        }

        .hb-lead-feature {
            justify-content: flex-start;
        }
    }

    .premium-ai-leads-card .leads-btn-premium {
        background: linear-gradient(135deg, #ebd8b0 0%, #d3bf98 100%) !important;
        color: #061121 !important;
        border: 1px solid rgba(235, 216, 176, 0.4) !important;
        box-shadow: 0 4px 15px rgba(235, 216, 176, 0.2), inset 0 0 10px rgba(235, 216, 176, 0.1) !important;
    }

    .premium-ai-leads-card .leads-btn-premium:hover {
        transform: translateY(-2px) scale(1.02) !important;
        background: linear-gradient(135deg, #f7e6c4 0%, #e0cda7 100%) !important;
        box-shadow: 0 6px 20px rgba(235, 216, 176, 0.35) !important;
        color: #061121 !important;
        border-color: rgba(235, 216, 176, 0.6) !important;
    }

    .leadoverlay .closelead-btn {

        position: absolute;

        top: 15px;

        right: 15px;

        width: 36px;

        height: 36px;

        background: rgba(255, 255, 255, 0.1);

        border: 1px solid rgba(255, 255, 255, 0.1);

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        color: #fff !important;

        font-size: 0;

        line-height: 0;

        text-decoration: none;

        cursor: pointer;

        transition: all 0.3s ease;

        z-index: 100;

        backdrop-filter: blur(5px);

    }

    .leadoverlay .closelead-btn svg {

        display: block;

        width: 14px;

        height: 14px;

        flex-shrink: 0;

    }

    .leadoverlay .closelead-btn:hover {

        background: rgba(220, 38, 38, 0.8);

        /* Red background on hover */

        border-color: rgba(220, 38, 38, 0.8);

        transform: rotate(90deg);

        color: #fff !important;

    }


/* ---- index.php, was inline <style> at line 5165 ---- */

/* ============================================================
   Promote Your Property — Premium Section (.hb-promote)
   Mirrors the .hb-expert design system
   ============================================================ */
.hb-promote {
    background:
        radial-gradient(ellipse 800px 500px at 30% 50%, rgba(235, 216, 176, 0.07), transparent 70%),
        linear-gradient(180deg, #071A25 0%, #0B2634 100%);
    padding: 90px 0 0;
    position: relative;
    overflow: hidden;
    margin: 0;
}

.hb-promote::before {
    content: "";
    position: absolute;
    inset: 0;
    /* A texture at 6% opacity: a 36 KB WebP is indistinguishable from the
       426 KB JPEG it replaces (deploy/images/make_variants.py). */
    background-image: url('../../images/opt/joinus-bg-640.webp');
    background-size: cover;
    background-position: center;
    opacity: 0.06;
    z-index: 0;
}

.hb-promote__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: 64px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* LEFT — copy */
.hb-promote__copy {
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hb-promote__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ebd8b0;
    margin-bottom: 20px;
}

.hb-promote__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ebd8b0;
    flex: none;
    box-shadow: 0 0 8px rgba(235, 216, 176, 0.8);
}

.hb-promote__h1 {
    font-size: clamp(34px, 4vw, 58px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    background: linear-gradient(135deg, #ffffff 0%, #ebd8b0 45%, #d3bf98 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 18px;
}

.hb-promote__sub {
    font-size: clamp(15px, 1.7vw, 19px);
    font-weight: 400;
    color: #9FB3C1;
    line-height: 1.65;
    margin: 0 0 34px;
    max-width: 500px;
}

/* Bullets */
.hb-promote__bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 38px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hb-promote__bullet {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    color: #c8dde8;
    line-height: 1.5;
}

.hb-promote__bullet-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(235, 216, 176, 0.22), rgba(235, 216, 176, 0.08));
    border: 1px solid rgba(235, 216, 176, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-top: 1px;
}

.hb-promote__bullet-icon svg {
    width: 12px;
    height: 12px;
    color: #ebd8b0;
}

.hb-promote__bullet strong {
    color: #eaf2f6;
    font-weight: 600;
}

/* CTA row */
.hb-promote__ctas {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.hb-promote__cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 16px 32px;
    font-size: 15px;
    font-weight: 700;
    color: #071a25;
    text-decoration: none;
    background: linear-gradient(135deg, #f4e4ba 0%, #ebd8b0 55%, #d9c190 100%);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 18px rgba(235,216,176,0.28), inset 0 1px 0 rgba(255,255,255,0.5);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
    cursor: pointer;
    border: none;
}

.hb-promote__cta-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0,0,0,0.5), 0 0 28px rgba(235,216,176,0.45), inset 0 1px 0 rgba(255,255,255,0.6);
    color: #071a25;
    text-decoration: none;
}

.hb-promote__cta-primary svg {
    width: 17px; height: 17px;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.hb-promote__cta-primary:hover svg { transform: translateX(4px); }

.hb-promote__cta-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 28px;
    font-size: 15px;
    font-weight: 600;
    color: #ebd8b0;
    text-decoration: none;
    background: transparent;
    border: 1px solid rgba(235, 216, 176, 0.35);
    border-radius: 999px;
    transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.hb-promote__cta-ghost:hover {
    border-color: rgba(235, 216, 176, 0.75);
    background: rgba(235, 216, 176, 0.06);
    color: #fff;
    text-decoration: none;
}

/* Micro stats strip */
.hb-promote__stats {
    display: flex;
    align-items: center;
    gap: 24px;
}

.hb-promote__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hb-promote__stat-num {
    font-size: 21px;
    font-weight: 800;
    color: #ebd8b0;
    letter-spacing: -0.5px;
    line-height: 1;
}

.hb-promote__stat-label {
    font-size: 11px;
    font-weight: 500;
    color: #7a98aa;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.hb-promote__stat-divider {
    width: 1px;
    height: 34px;
    background: rgba(235, 216, 176, 0.2);
    flex: none;
}

/* RIGHT — property image */
.hb-promote__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hb-promote__img-wrap {
    position: relative;
    width: 100%;
}

.hb-promote__img-wrap picture,
.hb-promote__img-wrap img,
.hb-promote__img {
    display: block;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    border-radius: 20px;
    object-fit: cover;
    filter: drop-shadow(0 20px 50px rgba(0,0,0,0.55));
}

/* Gold glow behind image */
.hb-promote__img-glow {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    height: 120px;
    background: radial-gradient(ellipse at center, rgba(235, 216, 176, 0.22) 0%, transparent 70%);
    filter: blur(28px);
    z-index: -1;
    pointer-events: none;
}

/* Floating glass badges */
.hb-promote__badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: rgba(7, 20, 30, 0.72);
    border: 1px solid rgba(235, 216, 176, 0.28);
    border-radius: 12px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
    z-index: 10;
    white-space: nowrap;
}

.hb-promote__badge--tl { top: 28px; left: -10px; }
.hb-promote__badge--br { bottom: 60px; right: -10px; }

.hb-promote__badge-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(235, 216, 176, 0.2), rgba(235, 216, 176, 0.06));
    border: 1px solid rgba(235, 216, 176, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: #ebd8b0;
}

.hb-promote__badge-icon svg { width: 14px; height: 14px; }

.hb-promote__badge-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.hb-promote__badge-title {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
}

.hb-promote__badge-sub {
    font-size: 10.5px;
    color: #9FB3C1;
    line-height: 1.2;
}

/* Responsive */
@media (max-width: 1024px) {
    .hb-promote__inner {
        grid-template-columns: 1fr;
        padding: 0 28px;
        gap: 48px;
    }
    .hb-promote__copy { padding-bottom: 0; }
    .hb-promote__visual { display: none; }
    .hb-promote { padding: 64px 0 60px; }
}

@media (max-width: 640px) {
    .hb-promote { padding: 52px 0 48px; }
    .hb-promote__inner { padding: 0 20px; gap: 36px; }
    .hb-promote__ctas { flex-direction: column; align-items: flex-start; }
    .hb-promote__cta-primary,
    .hb-promote__cta-ghost { width: 100%; justify-content: center; }
    .hb-promote__stats { gap: 16px; flex-wrap: wrap; }
}


/* ---- index.php, was inline <style> at line 5960 ---- */

        .section-trusted .icons-box.style-1.effec-icon {
            background: var(--housbe-glass, rgba(15, 23, 42, 0.4)) !important;
            backdrop-filter: blur(14px) !important;
            -webkit-backdrop-filter: blur(14px) !important;
            border: 1px solid rgba(78, 214, 197, 0.2) !important;
            border-radius: var(--radius-lg, 24px) !important;
            padding: 40px 35px !important;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(78, 214, 197, 0.05) !important;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
        }

        .section-trusted .icons-box.style-1.effec-icon::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(78, 214, 197, 0.4), transparent);
            opacity: 0.6;
            z-index: 1;
        }

        .section-trusted .icons-box.style-1.effec-icon:hover {
            background: var(--housbe-glass-2, rgba(15, 23, 42, 0.6)) !important;
            transform: translateY(-8px) scale(1.01) !important;
            border-color: rgba(78, 214, 197, 0.5) !important;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(78, 214, 197, 0.2) !important;
        }

        .section-trusted .icons-box.style-1.effec-icon .heading {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-bottom: 20px;
            position: relative;
            z-index: 2;
        }

        .section-trusted .icons-box.style-1.effec-icon .heading h5.title a {
            color: #ffffff !important;
            font-size: 22px !important;
            font-weight: 700 !important;
            line-height: 1.3 !important;
            transition: color 0.3s ease;
        }

        .section-trusted .icons-box.style-1.effec-icon:hover .heading h5.title a {
            color: rgba(78, 214, 197, 1) !important;
        }

        .section-trusted .icons-box.style-1.effec-icon p.text-1 {
            color: #ffffff !important;
            font-size: 16px !important;
            line-height: 1.6 !important;
            margin-bottom: 25px !important;
            flex-grow: 1;
            position: relative;
            z-index: 2;
        }

        .section-trusted .icons-box.style-1.effec-icon .tf-icon.allIcon__bgColor {
            background: rgba(78, 214, 197, 0.1) !important;
            border: 1px solid rgba(78, 214, 197, 0.2) !important;
            width: 64px !important;
            height: 64px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 16px !important;
            margin-bottom: 5px;
            transition: all 0.3s ease;
            position: relative;
            z-index: 2;
        }

        .section-trusted .icons-box.style-1.effec-icon:hover .tf-icon.allIcon__bgColor {
            background: rgba(78, 214, 197, 0.2) !important;
            transform: scale(1.1);
        }

        .section-trusted .icons-box.style-1.effec-icon .tf-icon i {
            color: #2a9d8f !important;
            font-size: 26px !important;
        }

        .section-trusted .icons-box.style-1.effec-icon .poperty__priceAndBTNWrapper {
            margin-top: auto;
            position: relative;
            z-index: 2;
        }

        .section-trusted .person {
            right: 130px !important;
            bottom: -105px !important;
            z-index: 3 !important;
        }

        .section-trusted .item {
            right: 20px !important;
            bottom: -104px !important;
            z-index: 1 !important;
        }
    

/* ---- index.php, was inline <style> at line 6418 ---- */

    /* ============================================================
       Live Platform Stats — Premium Redesign
       ============================================================ */
    .section-realty {
        position: relative;
    }

    /* Replace flat black overlay with rich dark-to-transparent gradient */
    .section-realty::after {
        background: linear-gradient(180deg,
            rgba(7, 26, 37, 0.82) 0%,
            rgba(4, 14, 20, 0.72) 50%,
            rgba(7, 26, 37, 0.88) 100%) !important;
    }

    /* Gold radial glow layer above the photo */
    .section-realty::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 1000px 500px at 50% 50%, rgba(235, 216, 176, 0.06), transparent 70%);
        z-index: 1;
        pointer-events: none;
    }

    .hb-stats {
        position: relative;
        z-index: 5;
        padding: 90px 40px 100px;
        max-width: 1280px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 60px;
    }

    /* Header */
    .hb-stats__header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        text-align: center;
        max-width: 680px;
    }

    .hb-stats__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: #ebd8b0;
        margin-bottom: 20px;
    }

    .hb-stats__live-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #4ED6C5;
        box-shadow: 0 0 10px rgba(78, 214, 197, 0.9);
        flex: none;
        animation: statLivePulse 2s ease-in-out infinite;
    }

    @keyframes statLivePulse {
        0%, 100% { box-shadow: 0 0 8px rgba(78, 214, 197, 0.9); transform: scale(1); }
        50% { box-shadow: 0 0 20px rgba(78, 214, 197, 1); transform: scale(1.25); }
    }

    .hb-stats__h2 {
        font-size: clamp(34px, 4vw, 58px);
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -1px;
        background: linear-gradient(135deg, #ffffff 0%, #ebd8b0 45%, #d3bf98 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0 0 18px;
    }

    .hb-stats__sub {
        font-size: 17px;
        color: #9FB3C1;
        line-height: 1.65;
        margin: 0;
        font-weight: 400;
    }

    /* Cards grid */
    .hb-stats__grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        width: 100%;
    }

    .hb-stat-card {
        position: relative;
        background: transparent;
        border-top: 1px solid rgba(235, 216, 176, 0.65);
        border-left: 1px solid rgba(235, 216, 176, 0.42);
        border-right: 1px solid rgba(235, 216, 176, 0.14);
        border-bottom: 1px solid rgba(235, 216, 176, 0.08);
        border-radius: 24px;
        box-shadow:
            3px 5px 0 rgba(195, 145, 35, 0.42),
            0 16px 40px rgba(0, 0, 0, 0.6),
            0 0 24px rgba(235, 216, 176, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.10);
        padding: 36px 28px 32px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        overflow: hidden;
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
    }

    /* Property photo — absolute fill, dimmed */
    .hb-stat-card__bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        z-index: 0;
        opacity: 0.22;
        transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
        border-radius: 24px;
        transform: scale(1.04);
    }

    .hb-stat-card:hover .hb-stat-card__bg {
        opacity: 0.32;
        transform: scale(1.10);
    }

    /* Dark gradient overlay above photo — bottom-heavy so numbers read clearly */
    .hb-stat-card__bg-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        border-radius: 24px;
        background:
            linear-gradient(180deg,
                rgba(7, 20, 30, 0.60) 0%,
                rgba(7, 20, 30, 0.50) 35%,
                rgba(4, 12, 20, 0.80) 75%,
                rgba(3, 10, 18, 0.95) 100%);
        pointer-events: none;
    }

    .hb-stat-card:hover {
        transform: translateY(-8px);
        box-shadow:
            4px 8px 0 rgba(215, 165, 45, 0.55),
            0 28px 55px rgba(0, 0, 0, 0.70),
            0 0 36px rgba(235, 216, 176, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.16);
    }

    /* Gold top accent bar — above the overlay */
    .hb-stat-card::before {
        content: "";
        position: absolute;
        top: 0; left: 20%; right: 20%;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(235, 216, 176, 0.75), transparent);
        border-radius: 0 0 999px 999px;
        z-index: 3;
    }

    /* Corner glow — above overlay */
    .hb-stat-card::after {
        content: "";
        position: absolute;
        top: -40px; right: -40px;
        width: 130px; height: 130px;
        background: radial-gradient(circle, rgba(235, 216, 176, 0.14) 0%, transparent 70%);
        pointer-events: none;
        z-index: 2;
    }

    /* All card content must sit above bg + overlay */
    .hb-stat-card__icon-row,
    .hb-stat-card__num,
    .hb-stat-card__label,
    .hb-stat-card__desc {
        position: relative;
        z-index: 4;
    }

    .hb-stat-card__icon-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 20px;
    }

    .hb-stat-card__icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        background: none;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ebd8b0;
        flex: none;
    }

    .hb-stat-card__icon svg { width: 22px; height: 22px; }

    .hb-stat-card__trend {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.9px;
        color: #6FE3D4;
        background: linear-gradient(135deg, rgba(78, 214, 197, 0.18) 0%, rgba(78, 214, 197, 0.05) 100%);
        border: 1px solid rgba(78, 214, 197, 0.30);
        border-radius: 999px;
        padding: 5px 11px;
        line-height: 1;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.10),
            0 2px 8px rgba(0, 0, 0, 0.22);
    }

    /* pulsing live dot */
    .hb-stat-card__trend::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #4ED6C5;
        box-shadow: 0 0 0 0 rgba(78, 214, 197, 0.55);
        flex: none;
        animation: hbTrendPulse 2s infinite;
    }

    @keyframes hbTrendPulse {
        0%   { box-shadow: 0 0 0 0 rgba(78, 214, 197, 0.55); }
        70%  { box-shadow: 0 0 0 6px rgba(78, 214, 197, 0); }
        100% { box-shadow: 0 0 0 0 rgba(78, 214, 197, 0); }
    }

    /* hide the old inline arrow svg — the dot + label reads cleaner */
    .hb-stat-card__trend svg { display: none; }

    /* mobile: drop the pulse animation (GPU-safe), keep the static dot */
    @media (max-width: 1024px), (hover: none) {
        .hb-stat-card__trend::before { animation: none !important; box-shadow: none !important; }
    }

    .hb-stat-card__num {
        font-size: clamp(38px, 3.5vw, 52px);
        font-weight: 800;
        color: #ebd8b0;
        letter-spacing: -1.5px;
        line-height: 1;
        margin: 0 0 8px;
        font-variant-numeric: tabular-nums;
    }

    .hb-stat-card__label {
        font-size: 13px;
        font-weight: 500;
        color: #7a98aa;
        letter-spacing: 0.3px;
        margin: 0 0 16px;
    }

    .hb-stat-card__desc {
        font-size: 12.5px;
        color: rgba(155, 179, 193, 0.7);
        line-height: 1.5;
        margin: 0;
        border-top: 1px solid rgba(235, 216, 176, 0.10);
        padding-top: 14px;
        width: 100%;
    }

    /* Mobile overrides */
    @media (max-width: 1024px), (hover: none) {
        .hb-stats__grid .hb-stat-card {
            border-top: 1px solid rgba(235, 216, 176, 0.72) !important;
            border-left: 1px solid rgba(235, 216, 176, 0.50) !important;
            border-right: 1px solid rgba(235, 216, 176, 0.18) !important;
            border-bottom: 1px solid rgba(235, 216, 176, 0.08) !important;
            box-shadow:
                3px 5px 0 rgba(195, 145, 35, 0.45),
                0 8px 20px rgba(0, 0, 0, 0.5),
                0 0 16px rgba(235, 216, 176, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
        }
        .hb-stat-card:hover { transform: none; }
    }

    @media (max-width: 900px) {
        .hb-stats__grid { grid-template-columns: repeat(2, 1fr); }
        .hb-stats { padding: 60px 20px 70px; gap: 40px; }
    }

    @media (max-width: 500px) {
        .hb-stats__grid { grid-template-columns: 1fr; }
    }
    

/* ---- index.php, was inline <style> at line 7043 ---- */

        body {
        width: 100%;
        position: relative;
    }

    :root {

            --housbe-bg-0: #071A25;

            --housbe-bg-1: #0B2634;

            --housbe-glass: rgba(255, 255, 255, 0.04);

            --housbe-glass-2: rgba(255, 255, 255, 0.06);

            --housbe-stroke: rgba(255, 255, 255, 0.14);

            --housbe-text: #EAF2F6;

            --housbe-muted: #9FB3C1;

            --housbe-accent: #4ED6C5;

            --housbe-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);

            --radius-lg: 20px;

            --space-3: 16px;

            --space-4: 24px;

            --space-5: 32px;

        }

        .hb-testimonials {

            padding: 100px 20px 100px;

            color: var(--housbe-text);

            background: radial-gradient(1000px 600px at 50% 50%, rgba(235, 216, 176, 0.08), transparent 70%),

                linear-gradient(180deg, var(--housbe-bg-0), var(--housbe-bg-1));

            position: relative;

            z-index: 10;

        }

        .hb-testimonials__header {

            text-align: center;

            max-width: 920px;

            margin: 0 auto 64px;

        }

        .hb-testimonials__header h2 {

            font-size: 36px;

            line-height: 44px;

            letter-spacing: 0.2px;

            margin: 0 0 14px;

            color: #fff !important;

            font-weight: 700;

        }

        .hb-testimonials__header p {

            font-size: 18px;

            line-height: 28px;

            color: var(--housbe-muted);

            margin: 0;

        }

        .hb-brand {

            color: #FFFFFF;

        }

        .hb-carousel {

            position: relative;

            max-width: 100%;

            margin: 0 auto;

        }

        .hb-track {

            display: flex;

            gap: 24px;

            overflow-x: auto; /* Changed from hidden to auto to allow mobile scrolling */

            scroll-snap-type: x mandatory;

            scroll-behavior: smooth;

            padding: 20px 10px 40px;

            -webkit-overflow-scrolling: touch;

            scrollbar-width: none; /* Firefox */

            -ms-overflow-style: none; /* IE and Edge */

        }

        .hb-track::-webkit-scrollbar {

            display: none; /* Keeps the scrollbar hidden visually */

        }

        .hb-card {

            scroll-snap-align: center;

            flex: 0 0 min(520px, 82vw);

            background: var(--housbe-glass);

            border: 1px solid rgba(78, 214, 197, 0.2);

            /* Tiffany accent stroke */

            border-radius: var(--radius-lg);

            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4),

                0 0 20px rgba(78, 214, 197, 0.05);

            /* Soft outer glow */

            backdrop-filter: blur(14px);

            padding: 32px 32px 28px;

            text-align: center;

            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

            position: relative;

            overflow: hidden;

        }

        .hb-card::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            height: 1px;

            background: linear-gradient(90deg, transparent, rgba(78, 214, 197, 0.4), transparent);

            opacity: 0.6;

        }

        .hb-card:hover {

            background: var(--housbe-glass-2);

            transform: translateY(-8px) scale(1.01);

            border-color: rgba(78, 214, 197, 0.5);

            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5),

                0 0 30px rgba(78, 214, 197, 0.2);

            /* Enhanced glow on hover */

        }

        .hb-avatar {

            width: 88px;

            height: 88px;

            border-radius: 50%;

            object-fit: cover;

            display: block;

            margin: 0 auto 16px;

            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);

            border: 2px solid var(--housbe-stroke);

        }

        .hb-name {

            margin: 0;

            font-size: 22px;

            line-height: 28px;

            font-weight: 600;

            color: #fff !important;

        }

        .hb-meta {

            margin-top: 4px;

            font-size: 14px;

            line-height: 20px;

            color: var(--housbe-muted);

        }

        .hb-quote {

            margin: 20px 0 16px;

            font-size: 18px;

            line-height: 28px;

            color: var(--housbe-text);

            font-weight: 400;

        }

        .hb-stars {

            font-size: 16px;

            letter-spacing: 2px;

            color: var(--housbe-accent);

            opacity: 0.95;

        }

        /* arrows */

        .hb-nav {

            position: absolute;

            top: 50%;

            transform: translateY(-50%);

            width: 48px;

            height: 48px;

            border-radius: 999px;

            border: 1px solid rgba(255, 255, 255, 0.16);

            background: rgba(0, 0, 0, 0.3);

            backdrop-filter: blur(10px);

            cursor: pointer;

            display: flex;

            align-items: center;

            justify-content: center;

            z-index: 20;

            transition: all 0.2s;

            padding: 0;

            outline: none;

        }

        .hb-nav:hover {

            background: rgba(0, 0, 0, 0.5);

            border-color: var(--housbe-accent);

        }

        .hb-nav svg {

            width: 20px;

            height: 20px;

            fill: none;

            stroke: #fff;

            stroke-width: 2.5;

            stroke-linecap: round;

            stroke-linejoin: round;

        }

        .hb-nav--left {

            left: -24px;

        }

        .hb-nav--right {

            right: -24px;

        }

        /* dots */

        .hb-dots {

            display: flex;

            justify-content: center;

            gap: 10px;

            margin-top: 0;

        }

        .hb-dot {

            width: 8px;

            height: 8px;

            border-radius: 50%;

            background: rgba(255, 255, 255, 0.2);

            border: none;

            padding: 0;

            cursor: pointer;

            transition: all 0.3s;

        }

        .hb-dot.is-active {
            background: var(--housbe-accent);
            transform: scale(1.2);
            box-shadow: 0 0 10px rgba(78, 214, 197, 0.4);
        }

        .premium-review-card {
            background:
                radial-gradient(ellipse at top left, rgba(235, 216, 176, 0.18) 0%, transparent 55%),
                radial-gradient(ellipse at bottom right, rgba(43, 93, 153, 0.14) 0%, transparent 55%),
                linear-gradient(160deg, rgba(14, 30, 55, 0.88) 0%, rgba(6, 17, 33, 0.80) 100%) !important;
            backdrop-filter: blur(18px) !important;
            -webkit-backdrop-filter: blur(18px) !important;
            border-top: 1px solid rgba(235, 216, 176, 0.72) !important;
            border-left: 1px solid rgba(235, 216, 176, 0.50) !important;
            border-right: 1px solid rgba(235, 216, 176, 0.12) !important;
            border-bottom: 1px solid rgba(235, 216, 176, 0.06) !important;
            border-radius: 20px !important;
            position: relative !important;
            transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
            overflow: hidden !important;
            isolation: isolate !important;
            box-shadow: 
                3px 5px 0 rgba(195, 145, 35, 0.45),
                4px 7px 8px rgba(0, 0, 0, 0.55),
                0 12px 24px rgba(0, 0, 0, 0.45),
                0 5px 10px rgba(0, 0, 0, 0.32),
                0 20px 40px rgba(0, 0, 0, 0.22),
                0 0 28px rgba(235, 216, 176, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.18),
                inset 0 0 18px rgba(235, 216, 176, 0.18) !important;
        }

        .premium-review-card:hover {
            transform: translateY(-10px) scale(1.02) !important;
            background:
                radial-gradient(ellipse at top left, rgba(235, 216, 176, 0.25) 0%, transparent 55%),
                radial-gradient(ellipse at bottom right, rgba(43, 93, 153, 0.18) 0%, transparent 55%),
                linear-gradient(160deg, rgba(16, 34, 62, 0.92) 0%, rgba(6, 17, 33, 0.86) 100%) !important;
            border-top-color: rgba(235, 216, 176, 0.92) !important;
            border-left-color: rgba(235, 216, 176, 0.72) !important;
            border-right-color: rgba(235, 216, 176, 0.22) !important;
            border-bottom-color: rgba(235, 216, 176, 0.10) !important;
            box-shadow:
                4px 7px 0 rgba(215, 165, 45, 0.58),
                5px 9px 12px rgba(0, 0, 0, 0.65),
                0 18px 36px rgba(0, 0, 0, 0.55),
                0 8px 16px rgba(0, 0, 0, 0.42),
                0 28px 50px rgba(0, 0, 0, 0.28),
                0 0 36px rgba(235, 216, 176, 0.50),
                inset 0 1px 0 rgba(255, 255, 255, 0.26),
                inset 0 0 26px rgba(235, 216, 176, 0.26) !important;
        }

        /* Rotating galaxy star particles on premium review cards */
        .premium-review-card::after {
             content: "" !important;
             position: absolute !important;
             top: -50% !important;
             left: -50% !important;
             width: 200% !important;
             height: 200% !important;
             background-image: 
                 radial-gradient(circle, rgba(255, 255, 255, 0.45) 1px, transparent 1px),
                 radial-gradient(circle, rgba(255, 255, 255, 0.25) 1.5px, transparent 1.5px),
                 radial-gradient(circle, rgba(235, 216, 176, 0.25) 1px, transparent 1px) !important;
             background-size: 70px 70px, 105px 105px, 84px 84px !important;
             animation: galaxyRotate 80s infinite linear !important;
             pointer-events: none !important;
             z-index: -1 !important;
             opacity: 0.65 !important;
        }

        /* Premium Shimmer for premium review cards */
        .premium-review-card::before {
             content: "" !important;
             position: absolute !important;
             top: -50% !important;
             left: -50% !important;
             width: 200% !important;
             height: 200% !important;
             background: linear-gradient(
                 to right,
                 rgba(255, 255, 255, 0) 0%,
                 rgba(255, 255, 255, 0.18) 50%,
                 rgba(255, 255, 255, 0) 100%
             ) !important;
             transform: rotate(45deg);
             animation: luxuryCardShimmer 6s infinite linear !important;
             pointer-events: none !important;
             z-index: 2 !important;
        }

        .premium-review-card .hb-name {
            color: #ebd8b0 !important;
            text-shadow: 0 0 8px rgba(235, 216, 176, 0.25) !important;
        }

        .premium-review-card .hb-stars {
            color: #ebd8b0 !important;
            text-shadow: 0 0 5px rgba(235, 216, 176, 0.5) !important;
        }

        .hb-testimonials .leads-btn-premium {
            background: linear-gradient(135deg, #ebd8b0 0%, #d3bf98 100%) !important;
            color: #061121 !important;
            border: 1px solid rgba(235, 216, 176, 0.4) !important;
            box-shadow: 0 4px 15px rgba(235, 216, 176, 0.2), inset 0 0 10px rgba(235, 216, 176, 0.1) !important;
            transition: all 0.3s ease !important;
        }

        .hb-testimonials .leads-btn-premium:hover {
            background: linear-gradient(135deg, #f7e6c4 0%, #e0cda7 100%) !important;
            box-shadow: 0 6px 20px rgba(235, 216, 176, 0.35) !important;
            color: #061121 !important;
            transform: translateY(-2px) scale(1.02) !important;
        }

        @media (max-width: 1280px) {

            .hb-nav--left {

                left: 10px;

            }

            .hb-nav--right {

                right: 10px;

            }

        }

        @media (max-width: 768px) {

            .hb-testimonials {

                padding: 60px 16px 64px;

            }

            .hb-testimonials__header h2 {

                font-size: 30px;

                line-height: 38px;

            }

            .hb-testimonials__header p {

                font-size: 16px;

                line-height: 26px;

            }

            .hb-nav {

                display: none;

            }


            /* swipe only on mobile */

            .hb-track {

                padding-bottom: 30px;

                gap: 16px;

            }

        }
    

/* ---- index.php, was inline <style> at line 7775 ---- */

    /* ============================================================
       Find a Local Real Estate Expert — Premium Redesign
       ============================================================ */
    .hb-expert {
        background:
            radial-gradient(ellipse 900px 500px at 70% 50%, rgba(235, 216, 176, 0.07), transparent 70%),
            linear-gradient(180deg, #071A25 0%, #0B2634 100%);
        padding: 90px 0 0;
        position: relative;
        overflow: hidden;
    }

    /* Subtle background city image — very dark overlay so text is always first */
    .hb-expert::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url('../../images/opt/new-york-city-960.webp');
        background-size: cover;
        background-position: center 60%;
        opacity: 0.07;
        z-index: 0;
    }

    .hb-expert__inner {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 40px;
        display: grid;
        grid-template-columns: 1fr 480px;
        gap: 60px;
        align-items: flex-end;
        position: relative;
        z-index: 2;
    }

    /* LEFT — copy */
    .hb-expert__copy {
        padding-bottom: 80px;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .hb-expert__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: #ebd8b0;
        margin-bottom: 20px;
    }

    .hb-expert__eyebrow-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #ebd8b0;
        flex: none;
        box-shadow: 0 0 8px rgba(235, 216, 176, 0.8);
    }

    .hb-expert__h1 {
        font-size: clamp(36px, 4.5vw, 60px);
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -1px;
        background: linear-gradient(135deg, #ffffff 0%, #ebd8b0 45%, #d3bf98 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0 0 16px;
    }

    .hb-expert__sub {
        font-size: clamp(16px, 1.8vw, 20px);
        font-weight: 400;
        color: #9FB3C1;
        line-height: 1.6;
        margin: 0 0 36px;
        max-width: 520px;
    }

    /* Trust bullets */
    .hb-expert__bullets {
        list-style: none;
        padding: 0;
        margin: 0 0 40px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .hb-expert__bullet {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 15px;
        color: #c8dde8;
        line-height: 1.5;
    }

    .hb-expert__bullet-icon {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(235, 216, 176, 0.22), rgba(235, 216, 176, 0.08));
        border: 1px solid rgba(235, 216, 176, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        margin-top: 1px;
    }

    .hb-expert__bullet-icon svg {
        width: 12px;
        height: 12px;
        color: #ebd8b0;
    }

    .hb-expert__bullet strong {
        color: #eaf2f6;
        font-weight: 600;
    }

    /* CTA row */
    .hb-expert__ctas {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        margin-bottom: 44px;
    }

    .hb-expert__cta-primary {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 16px 32px;
        font-size: 15px;
        font-weight: 700;
        color: #071a25;
        text-decoration: none;
        background: linear-gradient(135deg, #f4e4ba 0%, #ebd8b0 55%, #d9c190 100%);
        border-radius: 999px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 18px rgba(235,216,176,0.28), inset 0 1px 0 rgba(255,255,255,0.5);
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
    }

    .hb-expert__cta-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 32px rgba(0,0,0,0.5), 0 0 28px rgba(235,216,176,0.45), inset 0 1px 0 rgba(255,255,255,0.6);
        color: #071a25;
        text-decoration: none;
    }

    .hb-expert__cta-primary svg {
        width: 17px; height: 17px;
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .hb-expert__cta-primary:hover svg {
        transform: translateX(4px);
    }

    .hb-expert__cta-ghost {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 15px 28px;
        font-size: 15px;
        font-weight: 600;
        color: #ebd8b0;
        text-decoration: none;
        background: transparent;
        border: 1px solid rgba(235, 216, 176, 0.35);
        border-radius: 999px;
        transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
    }

    .hb-expert__cta-ghost:hover {
        border-color: rgba(235, 216, 176, 0.75);
        background: rgba(235, 216, 176, 0.06);
        color: #fff;
        text-decoration: none;
    }

    /* Micro stat strip */
    .hb-expert__stats {
        display: flex;
        align-items: center;
        gap: 28px;
    }

    .hb-expert__stat {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .hb-expert__stat-num {
        font-size: 22px;
        font-weight: 800;
        color: #ebd8b0;
        letter-spacing: -0.5px;
        line-height: 1;
    }

    .hb-expert__stat-label {
        font-size: 11px;
        font-weight: 500;
        color: #7a98aa;
        text-transform: uppercase;
        letter-spacing: 0.8px;
    }

    .hb-expert__stat-divider {
        width: 1px;
        height: 36px;
        background: rgba(235, 216, 176, 0.2);
        flex: none;
    }

    /* RIGHT — person image */
    .hb-expert__visual {
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .hb-expert__person-wrap {
        position: relative;
        width: 100%;
    }

    .hb-expert__person-wrap picture,
    .hb-expert__person-wrap img {
        display: block;
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
        filter: drop-shadow(0 20px 50px rgba(0,0,0,0.6));
    }

    /* Gold glow behind person */
    .hb-expert__person-glow {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 320px;
        height: 280px;
        background: radial-gradient(ellipse, rgba(235, 216, 176, 0.18) 0%, transparent 70%);
        pointer-events: none;
        z-index: -1;
    }

    /* Floating trust badge */
    .hb-expert__badge {
        position: absolute;
        top: 30px;
        left: 0;
        background: linear-gradient(135deg, rgba(11, 38, 52, 0.92), rgba(7, 26, 37, 0.96));
        border-top: 1px solid rgba(235, 216, 176, 0.55);
        border-left: 1px solid rgba(235, 216, 176, 0.35);
        border-right: 1px solid rgba(235, 216, 176, 0.12);
        border-bottom: 1px solid rgba(235, 216, 176, 0.08);
        border-radius: 16px;
        box-shadow: 3px 5px 0 rgba(195, 145, 35, 0.35), 0 12px 28px rgba(0,0,0,0.5);
        padding: 14px 18px;
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 200px;
    }

    .hb-expert__badge-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(235,216,176,0.2), rgba(235,216,176,0.06));
        border: 1px solid rgba(235, 216, 176, 0.35);
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        color: #ebd8b0;
    }

    .hb-expert__badge-icon svg { width: 20px; height: 20px; }

    .hb-expert__badge-text { display: flex; flex-direction: column; gap: 1px; }

    .hb-expert__badge-num {
        font-size: 20px;
        font-weight: 800;
        color: #ebd8b0;
        line-height: 1;
    }

    .hb-expert__badge-label {
        font-size: 11px;
        color: #7a98aa;
        font-weight: 500;
        letter-spacing: 0.5px;
    }

    /* Response time badge */
    .hb-expert__badge2 {
        position: absolute;
        bottom: 80px;
        right: 10px;
        background: linear-gradient(135deg, rgba(11, 38, 52, 0.92), rgba(7, 26, 37, 0.96));
        border-top: 1px solid rgba(235, 216, 176, 0.55);
        border-left: 1px solid rgba(235, 216, 176, 0.35);
        border-right: 1px solid rgba(235, 216, 176, 0.12);
        border-bottom: 1px solid rgba(235, 216, 176, 0.08);
        border-radius: 14px;
        box-shadow: 3px 5px 0 rgba(195, 145, 35, 0.35), 0 10px 24px rgba(0,0,0,0.5);
        padding: 12px 16px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .hb-expert__badge2-dot {
        width: 10px; height: 10px; border-radius: 50%;
        background: #4ED6C5;
        box-shadow: 0 0 10px rgba(78, 214, 197, 0.8);
        flex: none;
        animation: expertPulse 2s ease-in-out infinite;
    }

    @keyframes expertPulse {
        0%, 100% { box-shadow: 0 0 8px rgba(78, 214, 197, 0.8); }
        50% { box-shadow: 0 0 18px rgba(78, 214, 197, 1); }
    }

    .hb-expert__badge2-text {
        display: flex; flex-direction: column; gap: 1px;
    }

    .hb-expert__badge2-title {
        font-size: 13px; font-weight: 700; color: #eaf2f6; line-height: 1;
    }

    .hb-expert__badge2-sub {
        font-size: 11px; color: #7a98aa; font-weight: 500;
    }

    /* Bottom divider line */
    .hb-expert__rule {
        position: absolute;
        bottom: 0; left: 0; right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, rgba(235,216,176,0.25) 30%, rgba(235,216,176,0.25) 70%, transparent 100%);
    }

    /* Mobile */
    .hb-expert--mobile {
        display: none;
        background:
            radial-gradient(ellipse 600px 400px at 50% 30%, rgba(235, 216, 176, 0.07), transparent 70%),
            linear-gradient(180deg, #071A25 0%, #0B2634 100%);
        padding: 50px 20px 40px;
        position: relative;
        overflow: hidden;
    }

    .hb-expert--mobile::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url('../../images/opt/new-york-city-960.webp');
        background-size: cover;
        background-position: center;
        opacity: 0.06;
        z-index: 0;
    }

    .hb-expert--mobile .hb-expert__inner-mob {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .hb-expert--mobile .hb-expert__eyebrow { margin-bottom: 12px; }

    .hb-expert--mobile .hb-expert__h1 { font-size: 32px; margin-bottom: 12px; }

    .hb-expert--mobile .hb-expert__sub { font-size: 15px; margin-bottom: 24px; }

    .hb-expert--mobile .hb-expert__ctas { flex-direction: column; gap: 12px; }

    .hb-expert--mobile .hb-expert__cta-primary,
    .hb-expert--mobile .hb-expert__cta-ghost {
        width: 100%;
        justify-content: center;
    }

    .hb-expert--mobile .hb-expert__stats { justify-content: center; }

    .hb-expert--mobile .hb-expert__person-wrap img {
        max-width: 280px;
        margin: 0 auto;
    }

    @media (max-width: 1024px) {
        .hb-expert { display: none !important; }
        .hb-expert--mobile { display: block !important; }
    }

    @media (min-width: 1025px) {
        .hb-expert--mobile { display: none !important; }
    }
    

/* ---- index.php, was inline <style> at line 8326 ---- */

        .section-opinion {
            background: radial-gradient(1000px 600px at 50% 50%, rgba(235, 216, 176, 0.08), transparent 70%),
                        linear-gradient(180deg, #071A25, #0B2634) !important;
            position: relative;
            overflow: hidden;
        }

        .section-opinion .blog-article-item.style-2 {
            background: linear-gradient(135deg, rgba(6, 17, 33, 0.85) 0%, rgba(14, 30, 55, 0.92) 100%) !important;
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px) !important;
            border-top: 1px solid rgba(235, 216, 176, 0.6) !important;
            border-left: 1px solid rgba(235, 216, 176, 0.4) !important;
            border-right: 1px solid rgba(235, 216, 176, 0.15) !important;
            border-bottom: 1px solid rgba(235, 216, 176, 0.1) !important;
            border-radius: 20px !important;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
            box-shadow:
                3px 5px 0 rgba(195, 145, 35, 0.45),
                4px 7px 8px rgba(0, 0, 0, 0.55),
                0 12px 24px rgba(0, 0, 0, 0.45),
                0 5px 10px rgba(0, 0, 0, 0.32),
                0 20px 40px rgba(0, 0, 0, 0.22),
                0 0 22px rgba(235, 216, 176, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.18),
                inset 0 0 18px rgba(235, 216, 176, 0.18) !important;
            position: relative !important;
            overflow: hidden !important;
            isolation: isolate !important;
        }

        /* Rotating galaxy star particles */
        .section-opinion .blog-article-item.style-2::after {
             content: "" !important;
             position: absolute !important;
             top: -50% !important;
             left: -50% !important;
             width: 200% !important;
             height: 200% !important;
             background-image: 
                 radial-gradient(circle, rgba(255, 255, 255, 0.4) 1px, transparent 1px),
                 radial-gradient(circle, rgba(255, 255, 255, 0.2) 1.5px, transparent 1.5px),
                 radial-gradient(circle, rgba(235, 216, 176, 0.2) 1px, transparent 1px) !important;
             background-size: 70px 70px, 105px 105px, 84px 84px !important;
             animation: galaxyRotate 80s infinite linear !important;
             pointer-events: none !important;
             z-index: 1 !important;
             opacity: 0.55 !important;
        }

        /* Premium Shimmer */
        .section-opinion .blog-article-item.style-2::before {
             content: "" !important;
             position: absolute !important;
             top: -50% !important;
             left: -50% !important;
             width: 200% !important;
             height: 200% !important;
             background: linear-gradient(
                 to right,
                 rgba(255, 255, 255, 0) 0%,
                 rgba(255, 255, 255, 0.12) 50%,
                 rgba(255, 255, 255, 0) 100%
             ) !important;
             transform: rotate(45deg);
             animation: luxuryCardShimmer 6s infinite linear !important;
             pointer-events: none !important;
             z-index: 2 !important;
        }

        .section-opinion .blog-article-item.style-2:hover {
            transform: translateY(-7px) !important;
            background:
                radial-gradient(ellipse at top left, rgba(235, 216, 176, 0.25) 0%, transparent 55%),
                radial-gradient(ellipse at bottom right, rgba(43, 93, 153, 0.18) 0%, transparent 55%),
                linear-gradient(160deg, rgba(16, 34, 62, 0.92) 0%, rgba(6, 17, 33, 0.86) 100%) !important;
            border-top-color: rgba(235, 216, 176, 0.92) !important;
            border-left-color: rgba(235, 216, 176, 0.72) !important;
            border-right-color: rgba(235, 216, 176, 0.22) !important;
            border-bottom-color: rgba(235, 216, 176, 0.10) !important;
            box-shadow:
                4px 7px 0 rgba(215, 165, 45, 0.58),
                5px 9px 12px rgba(0, 0, 0, 0.65),
                0 18px 36px rgba(0, 0, 0, 0.55),
                0 8px 16px rgba(0, 0, 0, 0.42),
                0 28px 50px rgba(0, 0, 0, 0.28),
                0 0 36px rgba(235, 216, 176, 0.50),
                inset 0 1px 0 rgba(255, 255, 255, 0.26),
                inset 0 0 26px rgba(235, 216, 176, 0.26) !important;
        }

        /* Ensure card contents sit above the star/shimmer animation */
        .section-opinion .blog-article-item .image-wrap,
        .section-opinion .blog-article-item .article-content {
            position: relative !important;
            z-index: 4 !important;
            background: transparent !important;
        }

        .section-opinion .blog-article-item .article-content h4.title a {
            color: #ffffff !important;
            transition: color 0.3s ease !important;
        }

        .section-opinion .blog-article-item.style-2:hover .article-content h4.title a {
            color: #ebd8b0 !important;
        }

        .section-opinion .blog-article-item .time p {
            color: rgba(235, 216, 176, 0.75) !important;
        }

        .section-opinion .blog-article-item .time .icons svg path {
            fill: #ebd8b0 !important;
        }

        .section-opinion .blog-article-item .article-content .gradient-text {
            color: #ebd8b0 !important;
            transition: all 0.3s ease !important;
            text-decoration: none !important;
            font-weight: 700 !important;
        }

        .section-opinion .blog-article-item .article-content .gradient-text:hover {
            opacity: 0.8 !important;
            color: #ffffff !important;
        }

        .section-opinion .heading-section {
            text-align: center !important;
            margin-bottom: 50px !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
        }

        .section-opinion .heading-section h2.title {
            font-size: 48px !important;
            line-height: 56px !important;
            font-weight: 800 !important;
            letter-spacing: -1px !important;
            margin: 0 auto !important;
            text-transform: capitalize !important;
            background: linear-gradient(135deg, #ebd8b0 0%, #f7e6c4 50%, #d3bf98 100%) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            text-shadow: 0 4px 15px rgba(235, 216, 176, 0.15) !important;
        }

        @media (max-width: 768px) {
            .section-opinion .heading-section h2.title {
                font-size: 36px !important;
                line-height: 44px !important;
            }
        }

        /* ============================================================
           Blog Cards — scoped to .blog__card
           ============================================================ */
        .blog__card-img-wrap {
            position: relative;
            overflow: hidden;
            border-radius: 14px 14px 0 0;
            margin-bottom: 0 !important;
        }

        /* Force a fixed, cropped image regardless of the uploaded image's aspect ratio.
           High specificity + !important to beat .blog-article-item.style-2 .image-wrap img. */
        .section-opinion .blog__card .blog__card-img-wrap picture,
        .section-opinion .blog__card .blog__card-img-wrap a {
            display: block;
            width: 100%;
            height: 210px;
        }

        .section-opinion .blog__card .blog__card-img-wrap .blog__card-img {
            width: 100% !important;
            height: 210px !important;
            object-fit: cover !important;
            object-position: center !important;
            display: block !important;
            transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .blog__card:hover .blog__card-img {
            transform: scale(1.07);
        }

        .blog__card-category {
            position: absolute;
            top: 12px;
            left: 12px;
            padding: 4px 11px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            color: #071a25;
            background: linear-gradient(135deg, #f4e4ba 0%, #ebd8b0 100%);
            border-radius: 999px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            z-index: 5;
        }

        .blog__card-body {
            padding: 20px 20px 22px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .blog__card-meta-row {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .blog__card-date,
        .blog__card-read {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 12px;
            font-weight: 500;
            color: rgba(235, 216, 176, 0.75);
        }

        .blog__card-date svg,
        .blog__card-read svg {
            width: 13px;
            height: 13px;
            flex: none;
        }

        .blog__card .title a {
            font-size: 16px !important;
            font-weight: 700;
            line-height: 1.45;
            color: #fff !important;
            text-decoration: none;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            transition: color 0.3s ease;
        }

        .blog__card:hover .title a {
            color: #ebd8b0 !important;
        }

        .blog__card-cta {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            align-self: flex-start;
            font-size: 13px;
            font-weight: 700;
            color: #ebd8b0;
            text-decoration: none;
            letter-spacing: 0.2px;
            transition: gap 0.3s ease, color 0.3s ease;
        }

        .blog__card-cta svg {
            width: 15px;
            height: 15px;
            transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .blog__card:hover .blog__card-cta {
            color: #fff;
            gap: 11px;
        }

        .blog__card:hover .blog__card-cta svg {
            transform: translateX(4px);
        }

        @media (max-width: 1024px), (hover: none) {
            .section-opinion .blog__card {
                border-top: 1px solid rgba(235, 216, 176, 0.72) !important;
                border-left: 1px solid rgba(235, 216, 176, 0.50) !important;
                border-right: 1px solid rgba(235, 216, 176, 0.18) !important;
                border-bottom: 1px solid rgba(235, 216, 176, 0.08) !important;
                box-shadow:
                    3px 5px 0 rgba(195, 145, 35, 0.45),
                    0 8px 20px rgba(0, 0, 0, 0.45),
                    0 0 16px rgba(235, 216, 176, 0.20),
                    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
            }
        }
    

/* ---- index.php, was inline <style> at line 9300 ---- */

        @keyframes float-particles {

            0% {

                transform: translateY(0px) translateX(0px) rotate(0deg);

                opacity: 0;

            }

            20% {

                opacity: 1;

            }

            80% {

                opacity: 0.8;

            }

            100% {

                transform: translateY(-50px) translateX(25px) rotate(180deg);

                opacity: 0;

            }

        }

        @keyframes pulse-glow-premium {

            0% {

                box-shadow: 0 0 20px rgba(189, 36, 223, 0.4), 0 0 40px rgba(59, 130, 246, 0.2), 0 10px 30px rgba(0, 0, 0, 0.3);

            }

            50% {

                box-shadow: 0 0 50px rgba(189, 36, 223, 0.8), 0 0 80px rgba(59, 130, 246, 0.5), 0 20px 50px rgba(0, 0, 0, 0.5);

            }

            100% {

                box-shadow: 0 0 20px rgba(189, 36, 223, 0.4), 0 0 40px rgba(59, 130, 246, 0.2), 0 10px 30px rgba(0, 0, 0, 0.3);

            }

        }

        @keyframes shimmer-sweep {

            0% {

                transform: translateX(-150%) skewX(-25deg);

            }

            100% {

                transform: translateX(150%) skewX(-25deg);

            }

        }

        #leaveTaskBtn {

            perspective: 1000px;

            overflow: hidden;

            /* For shimmer */

        }

        #leaveTaskBtn::before,

        #leaveTaskBtn::after {

            content: "✦";

            position: absolute;

            color: white;

            font-size: 8px;

            text-shadow: 0 0 10px white;

            z-index: -1;

            pointer-events: none;

        }

        #leaveTaskBtn::before {

            top: -15px;

            left: 15%;

            animation: float-particles 4s infinite linear;

        }

        #leaveTaskBtn::after {

            bottom: -15px;

            right: 10%;

            animation: float-particles 5s infinite linear 1.5s;

        }

        .btn-shine {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);

            animation: shimmer-sweep 4s infinite linear;

            pointer-events: none;

            z-index: 1;

        }

        #leaveTaskBtn:hover {

            transform: scale(1.08) !important;

            filter: brightness(1.1);

        }

        #leaveTaskBtn:hover .icon-block {

            transform: scale(1.1) rotate(5deg);

            background: rgba(255, 255, 255, 0.35) !important;

            box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);

        }

        #leaveTaskBtn:active {

            transform: scale(0.95) !important;

        }

        /* ============================================================
           TASK WIDGET WRAPPER (the floating "Leave a task" button).
           - Hidden on first load / at the top of the page.
           - Slides up + fades in on a slight scroll.
           ============================================================ */
        #taskWidget {
            position: fixed;
            bottom: 25px;
            left: 50%;
            transform: translateX(-50%) translateY(45px);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            /* BELOW every overlay on this page, above ordinary content.
               At 2000000 this floating CTA painted OVER modals: the Open House
               "Register to attend" sheet (.ohx-veil, 100000), .cdp-modal (99999)
               and even its own #taskLoginModal (10000) all sit under that, so the
               button hovered on top of each of them. One modal had already been
               bumped to 2000001 just to escape it — an arms race the widget was
               always going to win. Nothing on this page sits between 200 and
               10000, so 9000 clears the page and loses to every sheet. */
            z-index: 9000;
            transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        /* Revealed after a slight scroll */
        #taskWidget.tw-visible {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(-50%) translateY(0);
        }

        /* MOBILE OPTIMIZATION */

        @media (max-width: 500px) {

            #taskWidget {
                bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
                max-width: calc(100vw - 20px);
            }

            #leaveTaskBtn {
                box-sizing: border-box;
                max-width: 100%;
                padding: 6px 12px !important;
                gap: 7px !important;
                border-width: 1.5px !important;
            }

            #leaveTaskBtn .icon-block {
                flex: 0 0 auto;
                padding: 6px !important;
                border-radius: 10px !important;
            }

            #leaveTaskBtn .icon-block i {
                font-size: 15px !important;
            }

            #leaveTaskBtn .task-widget-copy {
                flex: 1 1 auto;
                min-width: 0;
            }

            #leaveTaskBtn .btn-text-main,
            #leaveTaskBtn .btn-text-sub {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            #leaveTaskBtn .btn-text-main {
                font-size: 14px !important;
            }

            #leaveTaskBtn .btn-text-sub {
                font-size: 10px !important;
            }

        }

        /* Hide the floating "Leave a Task" button while the account menu is
           open so it doesn't overlap the menu */
        body:has(#header-main .box-user.active) #taskWidget {
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }
    

/* ---- index.php, was inline <style> at line 9731 ---- */

        .hide-scrollbar::-webkit-scrollbar {

            display: none;

        }

        .hide-scrollbar {

            -ms-overflow-style: none;

            scrollbar-width: none;

        }

        /* Particles - EXTREME Galaxy Effect */

        .handoff-modal-content {

            position: relative;

            width: 100%;

            max-width: 480px;

            height: 90vh;

            /* Fixed height for inner scroll */

            max-height: 90vh;

            display: flex;

            flex-direction: column;

            overflow: hidden !important;

            /* Clip particles, NO scroll here */

            /* Deep Space Background */

            background: linear-gradient(180deg, #050510 0%, #100520 100%);

            padding: 0;

            /* Padding moved to scroll wrapper */

            border-radius: 24px;

            color: #fff;

            /* Golden Border & Glow */

            border: 2px solid #fcd34d;

            box-shadow: 0 0 30px rgba(252, 211, 77, 0.6), inset 0 0 20px rgba(252, 211, 77, 0.3);

        }

        /* New Scroll Wrapper */

        .handoff-scroll-wrapper {

            overflow-y: auto;

            flex: 1;

            padding: 24px;

            position: relative;

            z-index: 2;

            width: 100%;

            height: 100%;

            /* Hide Scrollbar */

            scrollbar-width: none;

            /* Firefox */

            -ms-overflow-style: none;

            /* IE/Edge */

        }

        .handoff-scroll-wrapper::-webkit-scrollbar {

            display: none;

            /* Chrome/Safari */

        }

        .space-particles {

            position: absolute;

            inset: -50%;

            /* Extend way beyond to allow rotation */

            width: 200%;

            height: 200%;

            pointer-events: none;

            z-index: 0;

            background: transparent;

            animation: galaxy-spin 100s linear infinite;

        }

        /* Generated via box-shadow for EXTREME performance & density */

        .space-particles::before {

            content: '';

            position: absolute;

            top: 50%;

            left: 50%;

            width: 2px;

            height: 2px;

            border-radius: 50%;

            box-shadow:

                -400px -300px 2px white, 300px 400px 3px #00f0ff, -200px 100px 2px white, 150px -250px 3px #ff00ff,

                400px -100px 2px white, -350px 200px 3px #ffd700, 100px 300px 2px white, -500px -400px 3px #00f0ff,

                250px 50px 2px white, -150px -150px 3px #ff00ff, 500px 200px 2px white, -300px 350px 2px white,

                50px -400px 3px #ffd700, 350px -300px 2px white, -450px 50px 3px #00f0ff, 200px 450px 2px white,

                -100px -200px 2px white, 450px 150px 3px #ff00ff, -250px -50px 2px white, 300px -350px 2px white,

                -400px 400px 3px #ffd700, 150px 100px 2px white, -200px -450px 3px #00f0ff, 400px 300px 2px white,

                /* More dense field */

                10px 10px 1px white, -20px 40px 1px white, 50px -30px 1px white, -60px -80px 1px white,

                120px 40px 1px white, -150px 80px 1px white, 200px -120px 1px white, -240px -40px 1px white,

                300px 220px 1px white, -350px -180px 1px white, 400px 60px 1px white, -420px 300px 1px white,

                15px -200px 1px white, -85px 250px 1px white, 130px -350px 1px white, -280px 150px 1px white;

            opacity: 0.9;

        }

        .space-particles::after {

            content: '';

            position: absolute;

            inset: 0;

            background-image:

                radial-gradient(circle at 50% 50%, rgba(20, 100, 255, 0.1), transparent 60%),

                radial-gradient(circle at 20% 30%, rgba(255, 0, 255, 0.15), transparent 50%),

                radial-gradient(circle at 80% 80%, rgba(0, 240, 255, 0.15), transparent 50%),

                /* Bright glowing stars */

                radial-gradient(3px 3px at 100px 100px, #fff, transparent),

                radial-gradient(4px 4px at 300px 400px, #a5f3fc, transparent),

                /* Cyan Star */

                radial-gradient(3px 3px at 500px 200px, #fbcfe8, transparent),

                /* Pink Star */

                radial-gradient(4px 4px at 200px 500px, #fde047, transparent);

            /* Gold Star */

            background-size: 100% 100%, 100% 100%, 100% 100%, 300px 300px, 400px 400px, 350px 350px, 500px 500px;

            animation: galaxy-spin 150s linear infinite reverse;

            mix-blend-mode: screen;

        }

        @keyframes galaxy-spin {

            from {

                transform: rotate(0deg);

            }

            to {

                transform: rotate(360deg);

            }

        }

        /* Tech/Sci-Fi Trace ID Box */

        .trace-id-box {

            background: rgba(16, 185, 129, 0.05);

            border: 1px solid #10b981;

            border-radius: 12px;

            padding: 15px;

            position: relative;

            overflow: hidden;

            display: flex;

            align-items: center;

            gap: 12px;

            box-shadow: 0 0 10px rgba(16, 185, 129, 0.2), inset 0 0 10px rgba(16, 185, 129, 0.1);

        }

        .trace-id-box::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.2), transparent);

            animation: tech-scan 3s infinite linear;

        }

        @keyframes tech-scan {

            0% {

                transform: translateX(-100%);

            }

            100% {

                transform: translateX(100%);

            }

        }

        @media (max-width: 768px) {

            .handoff-modal-content {

                width: 100% !important;

                max-width: 100% !important;

                height: 100% !important;

                max-height: 100vh !important;

                padding: 15px !important;

                border-radius: 0 !important;

                margin: 0 !important;

            }

        }

        .handoff-input::placeholder {

            color: #9ca3af !important;

            /* Slate-400 */

            opacity: 1;

        }

        .handoff-input::-webkit-input-placeholder {

            color: #9ca3af !important;

        }

        .handoff-input::-moz-placeholder {

            color: #9ca3af !important;

        }

        @keyframes fadeSlideIn {

            from {

                opacity: 0;

                transform: translateY(-10px);

            }

            to {

                opacity: 1;

                transform: translateY(0);

            }

        }

        /* Google Places Autocomplete Dropdown - Must be above the handoff modal (z-index: 2000001) */
        .pac-container {
            z-index: 2147483647 !important;
            background-color: #1a1a2e !important;
            border: 1px solid rgba(252, 211, 77, 0.3) !important;
            border-radius: 12px !important;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(252, 211, 77, 0.15) !important;
            margin-top: 6px !important;
            padding: 4px 0 !important;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
            overflow: hidden !important;
        }

        .pac-item {
            background-color: transparent !important;
            border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
            padding: 10px 14px !important;
            color: #e2e8f0 !important;
            font-size: 14px !important;
            cursor: pointer !important;
            transition: background 0.2s ease !important;
            line-height: 1.4 !important;
        }

        .pac-item:first-child {
            border-top: none !important;
        }

        .pac-item:hover,
        .pac-item-selected {
            background: linear-gradient(90deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.1)) !important;
        }

        .pac-item-query {
            color: #fff !important;
            font-weight: 600 !important;
            font-size: 14px !important;
        }

        .pac-item .pac-item-query+span {
            color: rgba(255, 255, 255, 0.5) !important;
            font-size: 13px !important;
        }

        .pac-icon {
            filter: brightness(0) invert(1) !important;
            opacity: 0.6 !important;
        }

        .pac-matched {
            color: #60a5fa !important;
            font-weight: 700 !important;
        }
    

/* ---- index.php, was inline <style> at line 10138 ---- */

        .urgency-btn {

            flex: 1;

            text-align: center;

            padding: 12px;

            cursor: pointer;

            color: rgba(255, 255, 255, 0.6) !important;

            transition: all 0.2s ease;

            font-size: 14px !important;

            font-weight: 500 !important;

            margin: 0 !important;

            display: flex !important;

            /* Ensure flex for centering */

            align-items: center;

            justify-content: center;

        }

        .urgency-btn:hover {

            background: rgba(255, 255, 255, 0.05);

            color: #fff !important;

        }

        .urgency-btn.active {

            background: #3b82f6;

            color: #fff !important;

            font-weight: 600 !important;

            box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);

        }

        /* 2-Step Mobile UI Styles */

        .handoff-step {

            display: block;

            /* Default for desktop */

        }

        .handoff-desktop-only {

            display: block;

        }

        .handoff-mobile-only {

            display: none !important;

        }

        /* Type Selection Buttons (Buying, Renting, etc.) */

        .type-select-btn {

            background: #f3f4f6 !important;

            /* Light gray for inactive */

            border: none !important;

            padding: 8px 24px;

            border-radius: 50px;

            /* Pill shape */

            color: #6b7280 !important;

            /* Dark text */

            font-size: 15px;

            font-weight: 500;

            cursor: pointer;

            transition: all 0.2s;

            margin-right: 8px;

            margin-bottom: 8px;

            box-shadow: none !important;

        }

        .type-select-btn.active {

            background: linear-gradient(90deg, #ea580c 0%, #f97316 100%) !important;

            /* Orange for active */

            color: white !important;

            box-shadow: 0 4px 12px rgba(234, 88, 12, 0.3) !important;

        }

        /* Step 1 Card Specifics for Mobile */

        .step1-card {

            background: #ffffff;

            border-radius: 20px;

            padding: 20px;

            min-height: 220px;

            /* Taller height as requested */

            display: flex;

            flex-direction: column;

            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);

        }

        .step1-label {

            display: block;

            font-size: 16px;

            color: #2c3e50;

            margin-bottom: 12px;

            padding-bottom: 12px;

            font-weight: 500;

            border-bottom: 1px solid #f1f5f9;

        }

        .step1-textarea {

            width: 100%;

            border: none;

            background: transparent !important;

            line-height: 1.6;

            resize: none;

            outline: none;

            font-size: 16px;

            flex-grow: 1;

            color: #000000 !important;

            /* Force black text */

            padding: 0;

            margin-bottom: 15px;

            font-family: inherit;

            -webkit-text-fill-color: #000000 !important;

            opacity: 1 !important;

            z-index: 10;

            min-height: 70px;

            overflow-y: auto;

            /* Hide scrollbar */

            scrollbar-width: none;

            -ms-overflow-style: none;

        }

        .step1-textarea::-webkit-scrollbar {

            display: none;

        }

        .step1-textarea::placeholder {

            color: rgba(0, 0, 0, 0.4) !important;

            -webkit-text-fill-color: rgba(0, 0, 0, 0.4) !important;

            opacity: 1 !important;

        }

        #final_result::-webkit-scrollbar {

            display: none;

        }

        }

        /* Accordion Styles */

        .accordion-header {

            background: rgba(255, 255, 255, 0.05);

            border: 1px solid rgba(255, 255, 255, 0.1);

            padding: 15px20px;

            border-radius: 12px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            cursor: pointer;

            margin-bottom: 12px;

            transition: all 0.3s;

        }

        .accordion-header:hover {

            background: rgba(255, 255, 255, 0.08);

            border-color: rgba(255, 255, 255, 0.2);

        }

        .accordion-content {

            display: block;

            /* Default open on desktop */

        }

        /* Urgency Buttons */

        .urgency-btn {

            flex: 1;

            padding: 8px 5px;

            text-align: center;

            font-size: 14px;

            font-weight: 500;

            cursor: pointer;

            transition: all 0.2s;

            color: rgba(255, 255, 255, 0.4);

            border-right: 1px solid rgba(255, 255, 255, 0.1);

            background: transparent;

            display: flex;

            align-items: center;

            justify-content: center;

            white-space: nowrap;

        }

        .urgency-btn:last-child {

            border-right: none;

        }

        .urgency-btn.active {
            /* background: #3b82f6 !important; Removed to allow inline gradients */
            color: #fff !important;
            border-radius: 10px;
            font-weight: 700;
            border-right: none;
        }

        /* Mobile Breakpoint */

        @media (max-width: 768px) {

            .handoff-modal-content {

                width: 100% !important;

                max-width: 100% !important;

                height: 100vh !important;

                max-height: 100vh !important;

                border-radius: 0 !important;

                margin: 0 !important;

                position: fixed !important;

                top: 0 !important;

                left: 0 !important;

                padding: 15px !important;

            }

            .handoff-step-1 {

                display: block;

            }

            .handoff-step-2 {

                display: none;

            }

            .handoff-desktop-only {

                display: none !important;

            }

            .handoff-mobile-only {

                display: block !important;

            }

            /* Accordion Logic for Mobile - Compact Horizontal Layout */

            .accordion-header {

                margin-bottom: 8px;

                display: flex !important;

                /* Force flex to override .handoff-mobile-only display:block */

                align-items: center;

                justify-content: space-between;

                gap: 12px;

                padding: 10px 15px;

                background: rgba(255, 255, 255, 0.05);

                border: 1px solid rgba(255, 255, 255, 0.1);

                border-radius: 12px;

            }

            .card-icon-part {

                width: 18px;

                display: flex;

                justify-content: center;

                flex-shrink: 0;

            }

            .card-text-part {

                flex: 1;

                min-width: 0;

                /* Prevents text from pushing chevron out */

            }

            .card-chevron-part {

                color: rgba(255, 255, 255, 0.3);

                font-size: 13px;

                flex-shrink: 0;

                margin-left: 5px;

            }

            .accordion-content {

                display: none;

                /* Hidden by default on mobile */

                margin-bottom: 20px;

                padding: 0 10px 10px 10px;

                background: rgba(255, 255, 255, 0.02);

                border: 1px solid rgba(255, 255, 255, 0.05);

                border-top: none;

                margin-top: -12px;

                border-radius: 0 0 12px 12px;

            }

            .accordion-content.open {

                display: block;

                animation: slideDown 0.3s ease-out;

            }

        }

        @keyframes slideDown {

            from {

                opacity: 0;

                transform: translateY(-10px);

            }

            to {

                opacity: 1;

                transform: translateY(0);

            }

        }
    

/* ---- index.php, was inline <style> at line 10967 ---- */

                                #handoff-map {
                                    height: 200px;
                                    transition: height 0.3s ease;
                                    resize: none;
                                    overflow: hidden !important;
                                    position: relative;
                                }
                                #handoff-map.expanded {
                                    height: 450px !important;
                                }
                                /* 3D Map Styles */
                                #handoff-map-3d-wrapper {
                                    display: none;
                                    position: relative;
                                    width: 100%;
                                    border-radius: 12px;
                                    overflow: hidden;
                                    margin-bottom: 8px;
                                    border: 1px solid rgba(139, 92, 246, 0.4);
                                    box-shadow: 0 0 20px rgba(139, 92, 246, 0.2), inset 0 0 20px rgba(139, 92, 246, 0.05);
                                    transition: all 0.4s ease;
                                }
                                #handoff-map-3d-wrapper.active {
                                    display: block;
                                }
                                #handoff-map-3d-wrapper:hover {
                                    box-shadow: 0 0 30px rgba(139, 92, 246, 0.35), inset 0 0 30px rgba(139, 92, 246, 0.08);
                                    border-color: rgba(139, 92, 246, 0.6);
                                }
                                gmp-map-3d {
                                    width: 100%;
                                    height: 350px;
                                    display: block;
                                    border-radius: 12px;
                                }
                                gmp-map-3d.expanded {
                                    height: 550px !important;
                                }
                                .map-dimension-toggle {
                                    display: flex;
                                    gap: 0;
                                    margin-bottom: 10px;
                                    background: rgba(255,255,255,0.06);
                                    border: 1px solid rgba(255,255,255,0.12);
                                    border-radius: 10px;
                                    padding: 3px;
                                    position: relative;
                                    overflow: hidden;
                                }
                                .map-dim-btn {
                                    flex: 1;
                                    padding: 8px 16px;
                                    font-size: 12px;
                                    font-weight: 700;
                                    text-transform: uppercase;
                                    letter-spacing: 1px;
                                    border: none;
                                    border-radius: 8px;
                                    cursor: pointer;
                                    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    gap: 6px;
                                    position: relative;
                                    z-index: 2;
                                    background: transparent;
                                    color: rgba(255,255,255,0.45);
                                }
                                .map-dim-btn.active-2d {
                                    background: linear-gradient(135deg, #3b82f6, #2563eb);
                                    color: #fff;
                                    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4), 0 0 0 1px rgba(59, 130, 246, 0.3);
                                }
                                .map-dim-btn.active-3d {
                                    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
                                    color: #fff;
                                    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4), 0 0 0 1px rgba(139, 92, 246, 0.3);
                                }
                                .map-dim-btn:hover:not(.active-2d):not(.active-3d) {
                                    color: rgba(255,255,255,0.8);
                                    background: rgba(255,255,255,0.08);
                                }
                                /* 3D Map Camera Controls */
                                .map3d-controls {
                                    display: none;
                                    gap: 6px;
                                    flex-wrap: wrap;
                                    margin-top: 8px;
                                    padding: 10px;
                                    background: rgba(139, 92, 246, 0.08);
                                    border: 1px solid rgba(139, 92, 246, 0.2);
                                    border-radius: 10px;
                                }
                                .map3d-controls.visible {
                                    display: flex;
                                }
                                .cam-ctrl-btn {
                                    background: rgba(255,255,255,0.08);
                                    border: 1px solid rgba(255,255,255,0.15);
                                    color: rgba(255,255,255,0.8);
                                    padding: 6px 12px;
                                    border-radius: 8px;
                                    font-size: 11px;
                                    font-weight: 600;
                                    cursor: pointer;
                                    transition: all 0.25s;
                                    display: flex;
                                    align-items: center;
                                    gap: 5px;
                                }
                                .cam-ctrl-btn:hover {
                                    background: rgba(139, 92, 246, 0.25);
                                    border-color: rgba(139, 92, 246, 0.5);
                                    color: #fff;
                                    transform: translateY(-1px);
                                }
                                .cam-ctrl-btn i {
                                    font-size: 12px;
                                    color: #a78bfa;
                                }
                                /* 3D Map Custom Marker Styles */
                                .marker-3d-custom {
                                    position: relative;
                                    cursor: pointer;
                                    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
                                }
                                .marker-3d-custom:hover {
                                    transform: scale(1.15);
                                }
                                .marker-3d-pin {
                                    width: 44px;
                                    height: 44px;
                                    border-radius: 50% 50% 50% 4px;
                                    transform: rotate(-45deg);
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
                                    animation: markerBounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
                                    position: relative;
                                }
                                .marker-3d-pin i {
                                    transform: rotate(45deg);
                                    font-size: 18px;
                                    color: #fff;
                                    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
                                }
                                .marker-3d-pulse {
                                    position: absolute;
                                    bottom: -8px;
                                    left: 50%;
                                    transform: translateX(-50%);
                                    width: 20px;
                                    height: 6px;
                                    background: rgba(0,0,0,0.2);
                                    border-radius: 50%;
                                    animation: markerShadowPulse 2s infinite;
                                }
                                .marker-3d-label {
                                    position: absolute;
                                    top: -32px;
                                    left: 50%;
                                    transform: translateX(-50%);
                                    background: rgba(15, 23, 42, 0.92);
                                    backdrop-filter: blur(8px);
                                    color: #fff;
                                    font-size: 11px;
                                    font-weight: 700;
                                    padding: 4px 10px;
                                    border-radius: 6px;
                                    white-space: nowrap;
                                    border: 1px solid rgba(139, 92, 246, 0.4);
                                    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
                                    pointer-events: none;
                                    opacity: 0;
                                    transition: opacity 0.25s;
                                }
                                .marker-3d-custom:hover .marker-3d-label {
                                    opacity: 1;
                                }
                                @keyframes markerBounceIn {
                                    0% { transform: rotate(-45deg) scale(0) translateY(-30px); opacity: 0; }
                                    60% { transform: rotate(-45deg) scale(1.1) translateY(2px); }
                                    100% { transform: rotate(-45deg) scale(1) translateY(0); opacity: 1; }
                                }
                                @keyframes markerShadowPulse {
                                    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.3; }
                                    50% { transform: translateX(-50%) scale(1.5); opacity: 0.1; }
                                }
                                /* 3D Badge */
                                .badge-3d-glow {
                                    display: inline-flex;
                                    align-items: center;
                                    gap: 4px;
                                    font-size: 9px;
                                    font-weight: 800;
                                    letter-spacing: 1.5px;
                                    text-transform: uppercase;
                                    color: #c4b5fd;
                                    background: rgba(139, 92, 246, 0.15);
                                    border: 1px solid rgba(139, 92, 246, 0.3);
                                    padding: 2px 8px;
                                    border-radius: 4px;
                                    animation: glowPulse3d 3s ease-in-out infinite;
                                }
                                @keyframes glowPulse3d {
                                    0%, 100% { box-shadow: 0 0 4px rgba(139, 92, 246, 0.2); }
                                    50% { box-shadow: 0 0 12px rgba(139, 92, 246, 0.5); }
                                }
                                @media (max-width: 768px) {
                                    #handoff-map {
                                        height: 200px !important;
                                    }
                                    #handoff-map.expanded {
                                        height: 400px !important;
                                    }
                                    gmp-map-3d {
                                        height: 280px;
                                    }
                                    gmp-map-3d.expanded {
                                        height: 450px !important;
                                    }
                                    .map-dim-btn {
                                        padding: 6px 10px;
                                        font-size: 10px;
                                    }
                                    .map3d-controls {
                                        gap: 4px;
                                        padding: 8px;
                                    }
                                    .cam-ctrl-btn {
                                        padding: 5px 8px;
                                        font-size: 10px;
                                    }
                                }

                                /* Map Fullscreen Mode */
                                #handoffMapSection.map-fullscreen-active {
                                    position: fixed !important;
                                    top: 0 !important;
                                    left: 0 !important;
                                    width: 100vw !important;
                                    height: 100dvh !important; /* Fix for mobile address bar */
                                    z-index: 100000 !important;
                                    background: #0f172a !important;
                                    margin: 0 !important;
                                    padding: max(12px, env(safe-area-inset-top)) 12px 12px 12px !important;
                                    box-sizing: border-box !important;
                                    display: flex !important;
                                    flex-direction: column !important;
                                    overflow-y: auto !important;
                                }
                                #handoffMapSection.map-fullscreen-active > * {
                                    flex-shrink: 0 !important;
                                }
                                #handoffMapSection.map-fullscreen-active .map-dimension-toggle,
                                #handoffMapSection.map-fullscreen-active #handoffMapSearch,
                                #handoffMapSection.map-fullscreen-active .map3d-controls {
                                    margin-bottom: 8px !important;
                                }
                                #handoffMapSection.map-fullscreen-active #handoff-map-2d-wrapper,
                                #handoffMapSection.map-fullscreen-active #handoff-map-3d-wrapper {
                                    flex: 1 0 auto !important;
                                    min-height: 40vh !important;
                                    height: auto !important;
                                    margin-bottom: 0 !important;
                                    position: relative !important;
                                }
                                #handoffMapSection.map-fullscreen-active #handoff-map,
                                #handoffMapSection.map-fullscreen-active gmp-map-3d {
                                    position: absolute !important;
                                    top: 0 !important;
                                    left: 0 !important;
                                    right: 0 !important;
                                    bottom: 0 !important;
                                    height: 100% !important;
                                    width: 100% !important;
                                    display: block !important;
                                    margin-bottom: 0 !important;
                                    flex: none !important;
                                }
                                .handoff-fullscreen-back-btn {
                                    display: none;
                                    background: #3b82f6;
                                    color: white;
                                    border: none;
                                    padding: 10px 16px;
                                    border-radius: 8px;
                                    font-size: 14px;
                                    font-weight: 600;
                                    margin-bottom: 10px;
                                    cursor: pointer;
                                    width: fit-content;
                                    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
                                    transition: all 0.3s;
                                }
                                .handoff-fullscreen-back-btn:hover {
                                    background: #2563eb;
                                }
                                #handoffMapSection.map-fullscreen-active .handoff-fullscreen-back-btn {
                                    display: flex !important;
                                    align-items: center !important;
                                    justify-content: center !important;
                                    gap: 8px !important;
                                    flex-shrink: 0 !important;
                                }
                                .fullscreen-toggle-btn {
                                    position: absolute;
                                    top: 10px;
                                    right: 10px;
                                    z-index: 100;
                                    background: rgba(0, 0, 0, 0.6);
                                    color: white;
                                    border: 1px solid rgba(255, 255, 255, 0.2);
                                    border-radius: 8px;
                                    width: 36px;
                                    height: 36px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    cursor: pointer;
                                    backdrop-filter: blur(4px);
                                    transition: all 0.3s;
                                }
                                .fullscreen-toggle-btn:hover {
                                    background: rgba(59, 130, 246, 0.6);
                                    border-color: rgba(59, 130, 246, 0.4);
                                }
                                /* While the map is full screen nothing above it may clip it:
                                   desktop Safari clipped the fixed panel to the modal's rounded
                                   box, so only its middle slice showed and Done / Exit Full
                                   Screen were cut off. The rest of the modal (glow, close X,
                                   scroll arrow) is hidden so it can't float over the map. */
                                #handoffModal.hb-map-fullscreen .handoff-modal-content,
                                #handoffModal.hb-map-fullscreen .handoff-scroll-wrapper {
                                    overflow: visible !important;
                                }
                                #handoffModal.hb-map-fullscreen .handoff-modal-content {
                                    visibility: hidden;
                                }
                                #handoffModal.hb-map-fullscreen #handoffMapSection {
                                    visibility: visible;
                                }
                                /* The map already fills the screen; the expand arrows would only
                                   change a height that is overridden until full screen ends. */
                                #handoffMapSection.map-fullscreen-active .fullscreen-toggle-btn {
                                    display: none !important;
                                }
                            

/* ---- index.php, was inline <style> at line 11892 ---- */

                                    @keyframes cdpFadeIn {
                                        from {
                                            opacity: 0;
                                        }

                                        to {
                                            opacity: 1;
                                        }
                                    }

                                    @keyframes cdpSlideUp {
                                        from {
                                            transform: translateY(20px);
                                            opacity: 0;
                                        }

                                        to {
                                            transform: translateY(0);
                                            opacity: 1;
                                        }
                                    }

                                    .cdp-modal {
                                        display: none;
                                        position: fixed;
                                        top: 0;
                                        left: 0;
                                        width: 100vw;
                                        height: 100vh;
                                        z-index: 99999;
                                        align-items: center;
                                        justify-content: center;
                                        background: rgba(0, 0, 0, 0.6);
                                        backdrop-filter: blur(10px);
                                        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
                                        animation: cdpFadeIn 0.2s ease-out;
                                    }

                                    .cdp-content {
                                        width: 340px;
                                        background: #0b1019;
                                        border: 1px solid rgba(255, 255, 255, 0.08);
                                        border-radius: 20px;
                                        padding: 24px;
                                        color: #fff;
                                        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
                                        position: relative;
                                        overflow: hidden;
                                        animation: cdpSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
                                    }

                                    /* Starry background effect */
                                    .cdp-content::before {
                                        content: '';
                                        position: absolute;
                                        top: 0;
                                        left: 0;
                                        width: 100%;
                                        height: 100%;
                                        background-image: radial-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px), radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px);
                                        background-size: 50px 50px, 30px 30px;
                                        background-position: 0 0, 20px 20px;
                                        opacity: 0.2;
                                        pointer-events: none;
                                    }

                                    .cdp-inner {
                                        position: relative;
                                        z-index: 1;
                                    }

                                    .cdp-header {
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                        margin-bottom: 24px;
                                        padding-right: 4px;
                                    }

                                    .cdp-title {
                                        font-size: 17px;
                                        font-weight: 500;
                                        letter-spacing: 0.3px;
                                        color: #fff;
                                    }

                                    .cdp-close {
                                        background: rgba(255, 255, 255, 0.1);
                                        border: none;
                                        color: rgba(255, 255, 255, 0.7);
                                        width: 28px;
                                        height: 28px;
                                        border-radius: 50%;
                                        cursor: pointer;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        transition: all 0.2s;
                                        font-size: 14px;
                                    }

                                    .cdp-close:hover {
                                        background: rgba(255, 255, 255, 0.2);
                                        color: #fff;
                                    }

                                    .cdp-cal-nav {
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                        margin-bottom: 20px;
                                        padding: 0 4px;
                                    }

                                    .cdp-month-label {
                                        font-size: 15px;
                                        font-weight: 400;
                                        color: #e2e8f0;
                                    }

                                    .cdp-nav-btn {
                                        cursor: pointer;
                                        color: rgba(255, 255, 255, 0.6);
                                        font-size: 14px;
                                        padding: 5px;
                                    }

                                    .cdp-weekdays {
                                        display: grid;
                                        grid-template-columns: repeat(7, 1fr);
                                        margin-bottom: 12px;
                                    }

                                    .cdp-weekday {
                                        text-align: center;
                                        font-size: 12px;
                                        color: rgba(255, 255, 255, 0.5);
                                        font-weight: 400;
                                        text-transform: uppercase;
                                        letter-spacing: 1px;
                                    }

                                    .cdp-grid {
                                        display: grid;
                                        grid-template-columns: repeat(7, 1fr);
                                        row-gap: 8px;
                                        margin-bottom: 24px;
                                    }

                                    .cdp-day {
                                        aspect-ratio: 1;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        font-size: 14px;
                                        color: rgba(255, 255, 255, 0.8);
                                        border-radius: 50%;
                                        cursor: pointer;
                                        transition: all 0.2s;
                                        position: relative;
                                        width: 36px;
                                        height: 36px;
                                        margin: 0 auto;
                                    }

                                    .cdp-day:hover:not(.empty) {
                                        background: rgba(255, 255, 255, 0.08);
                                        color: #fff;
                                    }

                                    .cdp-day.selected {
                                        background: rgba(34, 211, 238, 0.2);
                                        color: #22d3ee;
                                        box-shadow: 0 0 0 1px #22d3ee, 0 0 12px rgba(34, 211, 238, 0.5);
                                        font-weight: 600;
                                        text-shadow: 0 0 8px rgba(34, 211, 238, 0.6);
                                    }

                                    .cdp-day.today {
                                        color: #22d3ee;
                                        font-weight: 600;
                                    }

                                    .cdp-day.empty {
                                        cursor: default;
                                    }

                                    .cdp-datetime-str {
                                        text-align: center;
                                        font-size: 15px;
                                        font-weight: 500;
                                        margin-bottom: 0;
                                        color: rgba(255, 255, 255, 0.95);
                                        padding: 12px 0;
                                        border-top: 1px solid rgba(255, 255, 255, 0.1);
                                        display: flex;
                                        justify-content: center;
                                        gap: 8px;
                                        letter-spacing: 0.5px;
                                    }

                                    .cdp-time-wrap {
                                        position: relative;
                                        height: 110px;
                                        margin-bottom: 24px;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        gap: 15px;
                                    }

                                    .cdp-time-overlay {
                                        position: absolute;
                                        top: 0;
                                        left: 0;
                                        right: 0;
                                        bottom: 0;
                                        pointer-events: none;
                                        background: linear-gradient(to bottom, #0b1019 5%, transparent 40%, transparent 60%, #0b1019 95%);
                                        z-index: 2;
                                    }

                                    .cdp-highlight {
                                        position: absolute;
                                        top: 50%;
                                        left: 0;
                                        right: 0;
                                        height: 40px;
                                        transform: translateY(-50%);
                                        background: linear-gradient(90deg, transparent 10%, rgba(34, 211, 238, 0.08) 30%, rgba(34, 211, 238, 0.08) 70%, transparent 90%);
                                        border-top: 1px solid rgba(34, 211, 238, 0.2);
                                        border-bottom: 1px solid rgba(34, 211, 238, 0.2);
                                        z-index: 0;
                                        box-shadow: 0 0 20px rgba(34, 211, 238, 0.05);
                                    }

                                    .cdp-cols {
                                        display: flex;
                                        gap: 40px;
                                        z-index: 1;
                                        height: 100%;
                                        align-items: center;
                                        justify-content: center;
                                    }

                                    .cdp-col {
                                        width: 40px;
                                        height: 100%;
                                        overflow-y: scroll;
                                        scrollbar-width: none;
                                        padding: 35px 0;
                                        scroll-snap-type: y mandatory;
                                        text-align: center;
                                    }

                                    .cdp-col::-webkit-scrollbar {
                                        display: none;
                                    }

                                    .cdp-item {
                                        height: 40px;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        font-size: 18px;
                                        color: rgba(255, 255, 255, 0.4);
                                        scroll-snap-align: center;
                                        transition: all 0.2s;
                                        font-family: monospace;
                                        letter-spacing: 1px;
                                    }

                                    .cdp-item.active {
                                        color: #fff;
                                        font-size: 22px;
                                        font-weight: 600;
                                        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
                                        transform: scale(1.1);
                                    }

                                    .cdp-ampm-btn {
                                        font-size: 14px;
                                        font-weight: 600;
                                        color: rgba(255, 255, 255, 0.3);
                                        cursor: pointer;
                                        padding: 8px 4px;
                                        transition: all 0.2s;
                                        z-index: 3;
                                    }

                                    .cdp-ampm-btn.active {
                                        color: #fff;
                                        text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
                                    }

                                    .cdp-foot {
                                        display: flex;
                                        gap: 12px;
                                        margin-top: 5px;
                                    }

                                    .cdp-btn {
                                        flex: 1;
                                        height: 48px;
                                        border-radius: 14px;
                                        font-size: 15px;
                                        font-weight: 500;
                                        border: none;
                                        cursor: pointer;
                                        transition: all 0.2s;
                                        letter-spacing: 0.3px;
                                    }

                                    .cdp-btn-can {
                                        background: transparent;
                                        border: 1px solid rgba(255, 255, 255, 0.15);
                                        color: #fff;
                                    }

                                    .cdp-btn-can:hover {
                                        background: rgba(255, 255, 255, 0.05);
                                        border-color: rgba(255, 255, 255, 0.3);
                                    }

                                    .cdp-btn-sub {
                                        background: linear-gradient(90deg, #22d3ee 0%, #0ea5e9 100%);
                                        color: #fff;
                                        box-shadow: 0 0 20px rgba(34, 211, 238, 0.3);
                                        font-weight: 600;
                                        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
                                    }

                                    .cdp-btn-sub:hover {
                                        box-shadow: 0 0 25px rgba(34, 211, 238, 0.5);
                                        transform: translateY(-1px);
                                    }
                                

/* ---- index.php, was inline <style> at line 13806 ---- */

        @media (max-width: 1024px), (hover: none) {
            /* 1. Global High-Specificity Backdrop Filter Kill page-wide */
            html body *,
            html body *::before,
            html body *::after,
            html body [class],
            html body [class]::before,
            html body [class]::after,
            html body [id],
            html body [id]::before,
            html body [id]::after {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }

            /* Explicitly override known classes with backdrop-filter to win specificity cascade */
            .premium-hiaa-card,
            .premium-trusted-card,
            .premium-review-card,
            .blog-article-item,
            .blog-article-item.style-2,
            .deal-room-floating-card,
            .foreclosure-search-card,
            .premium-lead-card,
            .lead-room-card,
            .glass-header,
            .col-sm-12,
            .urgency-btn,
            #chatInterface {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }

            /* These MUST be last to override all previous !important declarations */
            .premium-hover-card,
            .deal-room-floating-card,
            .foreclosure-search-card {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
            }
            .premium-hover-card:hover,
            .deal-room-floating-card:hover {
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
                transform: none !important;
            }
            .premium-hover-card::after,
            .deal-room-card-shimmer,
            .deal-room-card-glow,
            .mouse-light,
            .dr-deco-glow,
            .dr-particles-canvas {
                display: none !important;
            }
            .dr-center-card::before,
            .space-particles,
            .space-particles::before,
            .space-particles::after,
            .stars-bg,
            .shine__divv {
                animation: none !important;
                -webkit-animation: none !important;
            }
            .dr-center-card img {
                filter: none !important;
                -webkit-filter: none !important;
            }
            /* Kill superGlowPulse stacked drop-shadows on map circles */
            .gm-style svg > g > path[stroke="#8b5cf6"],
            .gm-style svg > path[stroke="#8b5cf6"] {
                filter: none !important;
                -webkit-filter: none !important;
                animation: none !important;
                -webkit-animation: none !important;
            }
            /* Kill buttonShimmer on all pseudo-elements */
            .premium-button-style::before,
            .chat-button-compare::before,
            .add-list::before {
                animation: none !important;
                -webkit-animation: none !important;
                display: none !important;
            }
            /* Kill chatInterface backdrop-filter */
            #chatInterface {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }
            /* Kill galaxyRotate & luxuryCardShimmer on all premium cards and stars (keeps them visible but still) */
            .premium-hiaa-card::after,
            .premium-hiaa-card::before,
            .premium-trusted-card::after,
            .premium-trusted-card::before,
            .premium-review-card::after,
            .premium-review-card::before,
            .section-opinion .blog-article-item.style-2::after,
            .section-opinion .blog-article-item.style-2::before,
            .propertyCard__wrapper::after,
            .propertyCard__wrapper::before,
            .feature__propertyCardWrapper::after,
            .feature__propertyCardWrapper::before,
            .card-stars,
            [class*="premium-"][class*="-card"]::after,
            [class*="premium-"][class*="-card"]::before {
                animation: none !important;
                -webkit-animation: none !important;
            }
            .premium-hiaa-card,
            .premium-trusted-card,
            .premium-review-card,
            .section-opinion .blog-article-item.style-2,
            .propertyCard__wrapper,
            .feature__propertyCardWrapper {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                transform: none !important;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
            }
            .premium-hiaa-card:hover,
            .premium-trusted-card:hover,
            .premium-review-card:hover,
            .section-opinion .blog-article-item.style-2:hover,
            .propertyCard__wrapper:hover,
            .feature__propertyCardWrapper:hover {
                transform: none !important;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
            }

            /* Keep the Deal Room card's layered 3D frame visible on mobile. */
            html body .deal-room-section-wrapper .dr-center-card,
            html body .deal-room-section-wrapper .dr-center-card:hover {
                border-top: 1px solid rgba(255, 225, 166, 0.9) !important;
                border-left: 1px solid rgba(235, 216, 176, 0.72) !important;
                border-right: 1px solid rgba(126, 98, 46, 0.72) !important;
                border-bottom: 1px solid rgba(82, 62, 29, 0.9) !important;
                box-shadow:
                    3px 4px 0 rgba(180, 130, 34, 0.72),
                    6px 8px 0 rgba(2, 10, 22, 0.82),
                    0 12px 18px rgba(0, 0, 0, 0.48),
                    inset 1px 1px 0 rgba(255, 244, 218, 0.18),
                    inset -1px -1px 0 rgba(0, 0, 0, 0.42) !important;
            }
        }

        @media (max-width: 991px) {
            .leads-search-input-wrapper {
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                background: rgba(15, 23, 42, 0.75) !important;
                border: 1.5px solid rgba(235, 216, 176, 0.4) !important;
                border-radius: 26px !important;
                padding: 3px 4px 3px 18px !important;
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
                backdrop-filter: blur(12px) !important;
                -webkit-backdrop-filter: blur(12px) !important;
                height: 52px !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }

            /* #lead-query / #lending-query were listed here when they sat inside
               .leads-search-input-wrapper, which drew the box. The opportunity
               boards' search box (#lead-query, .hb-opp-input) draws its own, and
               this rule - background, border and height stripped with !important,
               up to 991px - left it as bare text on a phone. */
            .leads-search-input {
                flex: 1 !important;
                min-width: 0;
                height: 100% !important;
                background: transparent !important;
                border: none !important;
                color: #fff !important;
                font-size: 16px !important;
                padding: 0 8px 0 0 !important;
                margin: 0 !important;
                outline: none !important;
                box-shadow: none !important;
                -webkit-appearance: none !important;
                appearance: none !important;
            }

            .leads-search-input-wrapper .premium-button-style {
                height: 44px !important;
                border-radius: 22px !important;
                padding: 0 20px !important;
                font-size: 11px !important;
                font-weight: 700 !important;
                letter-spacing: 1px !important;
                text-transform: uppercase !important;
                margin: 0 !important;
                white-space: nowrap !important;
                min-width: auto !important;
                background: linear-gradient(135deg, #ebd8b0 0%, #d3bf98 100%) !important;
                color: #061121 !important;
                border: none !important;
                box-shadow: 0 2px 10px rgba(235, 216, 176, 0.2) !important;
            }
        }