:root {
            --ink: #06111f;
            --panel: #0a1b2d;
            --cream: #f8f3e9;
            --muted: #aab6c4;
            --gold: #e8b461;
            --line: rgba(232, 180, 97, .35)
        }

        * {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth
        }

        body {
            margin: 0;
            background: var(--ink);
            color: var(--cream);
            font-family: "DM Sans", sans-serif;
            overflow-x: hidden
        }

        .site {
            overflow: hidden;
            background: radial-gradient(circle at 90% 5%, #17304d 0, transparent 30rem), var(--ink)
        }

        .navbar {
            min-height: 82px;
            background: rgba(4, 14, 26, .62);
            border-bottom: 1px solid rgba(255, 255, 255, .1);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px)
        }

        .navbar-brand {
            color: var(--cream) !important;
            font-size: 15px;
            letter-spacing: .13em;
            font-weight: 700
        }

        .site-logo {
            width: 42px;
            height: 42px;
            object-fit: contain;
            margin-right: 10px;
            border-radius: 50%;
            background: #fff;
            padding: 2px
        }

        .nav-link {
            color: rgba(248, 243, 233, .9) !important;
            font-size: 15px;
            font-weight: 600;
            letter-spacing: .02em;
            padding: 9px 15px !important
        }

        .nav-link:hover {
            color: var(--gold) !important
        }

        .btn {
            border-radius: 0;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            padding: 12px 21px
        }

        .btn-gold {
            color: #081422;
            background: var(--gold);
            border-color: var(--gold)
        }

        .btn-gold:hover {
            color: #081422;
            background: #f5ce89;
            border-color: #f5ce89
        }

        .btn-ghost {
            color: var(--cream);
            border: 1px solid rgba(248, 243, 233, .48)
        }

        .btn-ghost:hover {
            background: var(--cream);
            color: var(--ink)
        }

        .eyebrow {
            color: var(--gold);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .19em;
            text-transform: uppercase
        }

        .title {
            font-family: "Playfair Display", serif;
            font-size: clamp(2.6rem, 4.7vw, 4.6rem);
            font-weight: 600;
            letter-spacing: -.05em;
            line-height: 1.02
        }

        .title i,
        .hero-title em {
            color: var(--gold);
            font-weight: 500
        }

        .copy {
            color: var(--muted);
            font-size: 16px;
            line-height: 1.75
        }

        .hero,
        .hero .carousel,
        .hero .carousel-inner,
        .hero .carousel-item {
            height: 750px
        }

        .hero-slide {
            height: 100%;
            position: relative;
            background: center/cover
        }

        .hero-slide:before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(4, 13, 24, .96), rgba(4, 13, 24, .82) 37%, rgba(4, 13, 24, .18) 75%)
        }

        .hero-slide:after {
            content: "";
            position: absolute;
            inset: auto 0 0;
            height: 210px;
            background: linear-gradient(transparent, var(--ink))
        }

        .hero-content {
            height: 100%;
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            padding-top: 40px
        }

        .hero-title {
            max-width: 740px;
            font-family: "Playfair Display", serif;
            font-size: clamp(3.2rem, 6.5vw, 6.7rem);
            font-weight: 600;
            line-height: .91;
            letter-spacing: -.065em
        }

        .hero-copy {
            max-width: 490px;
            color: #d3d8df;
            font-size: 16px;
            line-height: 1.7
        }

        .carousel-indicators {
            justify-content: flex-start;
            margin: 0;
            left: max(12px, calc((100vw - 1320px)/2));
            right: auto;
            bottom: 44px;
            gap: 7px
        }

        .carousel-indicators [data-bs-target] {
            width: 44px;
            height: 2px;
            margin: 0;
            border: 0;
            background: rgba(248, 243, 233, .45);
            opacity: 1
        }

        .carousel-indicators .active {
            background: var(--gold)
        }

        .hero-label {
            position: absolute;
            right: 7vw;
            bottom: 46px;
            z-index: 2;
            width: 210px;
            font-size: 11px;
            letter-spacing: .08em;
            text-transform: uppercase
        }

        .hero-label b {
            display: block;
            color: var(--gold);
            font-size: 10px;
            margin-bottom: 6px
        }

        .stats {
            border-block: 1px solid var(--line);
            padding: 27px 0
        }

        .stats b {
            display: block;
            color: var(--gold);
            font: 600 32px/1 "Playfair Display", serif
        }

        .stats span {
            color: var(--muted);
            font-size: 11px;
            letter-spacing: .1em;
            text-transform: uppercase
        }

        .space {
            padding: 130px 0
        }

        .tour-large,
        .tour-small,
        .solution {
            position: relative;
            display: flex;
            align-items: end;
            background: center/cover;
            overflow: hidden
        }

        .tour-large {
            min-height: 560px
        }

        .tour-small {
            min-height: 270px;
            border: 1px solid rgba(255, 255, 255, .13)
        }

        .tour-large:after,
        .tour-small:after,
        .solution:after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 28%, rgba(3, 12, 22, .95) 100%)
        }

        .tour-large:before {
            content: "";
            position: absolute;
            inset: 0;
            border: 1px solid var(--line);
            z-index: 2
        }

        .tour-text {
            position: relative;
            z-index: 3;
            padding: 36px
        }

        .kicker {
            color: var(--gold);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .16em;
            text-transform: uppercase
        }

        .tour-name {
            font: 600 clamp(1.8rem, 3vw, 3.1rem)/1.05 "Playfair Display", serif;
            letter-spacing: -.04em
        }

        .tour-small .tour-text {
            padding: 24px
        }

        .tour-small .tour-name {
            font-size: 1.55rem
        }

        .arrow {
            color: var(--cream);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .11em;
            text-decoration: none;
            text-transform: uppercase
        }

        .arrow span {
            color: var(--gold);
            font-size: 17px;
            margin-left: 7px
        }

        .solutions {
            background: var(--panel);
            border-block: 1px solid rgba(255, 255, 255, .09)
        }

        .solution {
            min-height: 500px;
            border: 1px solid rgba(232, 180, 97, .42);
            transition: .25s
        }

        .solution:hover {
            transform: translateY(-8px);
            border-color: var(--gold)
        }

        .solution .tour-text {
            padding: 32px
        }

        .number {
            color: var(--gold);
            font: 500 20px "Playfair Display", serif
        }

        .solution h3 {
            font: 600 30px/1.05 "Playfair Display", serif;
            letter-spacing: -.035em
        }

        .solution p {
            color: #c0c8d1;
            font-size: 14px;
            line-height: 1.55;
            max-width: 260px
        }

        .principle {
            border-top: 1px solid var(--line);
            padding-top: 20px
        }

        .principle h4 {
            font: 600 24px "Playfair Display", serif
        }

        .principle p {
            color: var(--muted);
            font-size: 14px;
            line-height: 1.65
        }

        .cta {
            min-height: 540px;
            position: relative;
            display: flex;
            align-items: center;
            background: linear-gradient(90deg, rgba(4, 14, 26, .93), rgba(4, 14, 26, .3)), url('images/hero-residence.webp') center/cover
        }

        .cta:after {
            content: "";
            position: absolute;
            inset: 20px;
            border: 1px solid rgba(232, 180, 97, .4)
        }

        .cta .container {
            position: relative;
            z-index: 1
        }

        .contact {
            border-left: 1px solid var(--line);
            padding-left: 30px
        }

        .contact a {
            color: var(--cream);
            font: 600 22px "Playfair Display", serif;
            text-decoration: none
        }

        footer {
            border-top: 1px solid rgba(255, 255, 255, .1);
            color: #8090a1;
            font-size: 11px
        }

        @media(max-width:991px) {
            .navbar {
                min-height: 70px
            }

            .navbar-collapse {
                padding: 15px 0
            }

            .hero,
            .hero .carousel,
            .hero .carousel-inner,
            .hero .carousel-item {
                height: 690px
            }

            .hero-label {
                display: none
            }

            .space {
                padding: 88px 0
            }

            .tour-large {
                min-height: 470px
            }

            .solution {
                min-height: 410px
            }
        }

        @media(max-width:575px) {

            .hero,
            .hero .carousel,
            .hero .carousel-inner,
            .hero .carousel-item {
                height: 640px
            }

            .hero-slide:before {
                background: linear-gradient(90deg, rgba(4, 13, 24, .95), rgba(4, 13, 24, .55))
            }

            .hero-title {
                font-size: 3.3rem
            }

            .title {
                font-size: 2.7rem
            }

            .contact {
                border-left: 0;
                border-top: 1px solid var(--line);
                padding: 25px 0 0
            }
        }

        .tour-demo-btn {
            width: 100%;
            border: 0;
            color: var(--cream);
            text-align: left;
            cursor: pointer
        }

        .tour-demo-btn:hover,
        .tour-demo-btn:focus {
            color: var(--cream)
        }

        main#top {
            display: flex;
            flex-direction: column
        }

        main > section {
            order: 7
        }

        main > #featured-tours,
        main > #solutions,
        main > #commercial {
            display: none
        }

        main > .hero {
            order: 1
        }

        main > .stats-holder {
            order: 2
        }

        main > .all-tours {
            order: 3
        }

        main > #education {
            order: 4
        }

        main > #services {
            order: 5
        }

        main > #contact {
            order: 6
        }

        .listing-hero {
            padding: 170px 0 65px;
            background: radial-gradient(circle at 90% 0, #173a5b 0, transparent 34rem)
        }

        .listing-grid {
            padding: 24px 0 130px
        }

        .tour-card {
            display: block;
            height: 100%;
            overflow: hidden;
            color: var(--cream);
            text-decoration: none;
            background: #0b1c2d;
            border: 1px solid rgba(255, 255, 255, .12);
            transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease
        }

        .tour-card:hover,
        .tour-card:focus-visible {
            color: var(--cream);
            transform: translateY(-7px);
            border-color: var(--gold);
            box-shadow: 0 16px 35px rgba(0, 0, 0, .28)
        }

        .tour-card-image {
            display: block;
            width: 100%;
            aspect-ratio: 4 / 3;
            object-fit: cover;
            background: #13283c
        }

        .tour-card-content {
            padding: 21px 22px 23px
        }

        .tour-card-title {
            margin: 6px 0 0;
            font: 600 1.45rem/1.15 "Playfair Display", serif;
            letter-spacing: -.025em
        }

        .tour-count {
            color: var(--muted);
            font-size: 13px
        }
        /* Compact gallery: keeps the tour list distinct from the main hero. */
        .listing-hero { padding: 68px 0 20px; background: none }
        .listing-hero .title { font-size: clamp(2rem, 3.4vw, 3.3rem); max-width: 680px }
        .listing-hero .copy { font-size: 14px; line-height: 1.6 }
        .listing-grid { padding: 18px 0 88px }
        .listing-grid > .row { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem }
        .tour-card-image { aspect-ratio: 16 / 10 }
        .tour-card-content { padding: 14px 16px 16px }
        .tour-card-title { margin: 0 0 7px; font-size: 1.2rem }
        .tour-card .kicker { font-size: 9px }

        @media (min-width: 992px) {
            .listing-grid > .row > .col-lg-4 { flex: 0 0 auto; width: 25% }
        }

        /* Premium virtual-tour card treatment. */
        .tour-card { position: relative; background: #0a1a2a; border-color: rgba(232, 180, 97, .24); transform: none; box-shadow: 0 14px 32px rgba(0, 0, 0, .16) }
        .tour-card::before { content: "360°"; position: absolute; top: 14px; left: 14px; width: 42px; aspect-ratio: 1; display: grid; place-items: center; color: var(--cream); background: rgba(5, 16, 29, .78); border: 1px solid rgba(248, 243, 233, .55); border-radius: 50%; font: 700 10px "DM Sans", sans-serif; letter-spacing: .02em; z-index: 2 }
        .tour-card-image { transform: scale(1.001); filter: saturate(.88) contrast(1.05) brightness(.88); transition: transform .55s ease, filter .55s ease }
        .tour-card:hover, .tour-card:focus-visible { transform: translateY(-5px); border-color: var(--gold); box-shadow: 0 20px 44px rgba(0, 0, 0, .32) }
        .tour-card:hover .tour-card-image, .tour-card:focus-visible .tour-card-image { transform: scale(1.06); filter: saturate(1) contrast(1.04) brightness(1) }
        .tour-card-content { position: relative; padding: 18px 18px 17px; background: linear-gradient(135deg, #10283d, #091725) }
        .tour-card-content::after { content: "OPEN TOUR  ↗"; display: block; margin-top: 14px; color: var(--gold); font: 700 9px "DM Sans", sans-serif; letter-spacing: .14em; transition: letter-spacing .25s ease }
        .tour-card:hover .tour-card-content::after, .tour-card:focus-visible .tour-card-content::after { letter-spacing: .2em }
        .tour-card .kicker { margin-bottom: 0; color: #d9ae69; font-size: 9px; letter-spacing: .15em }
        .tour-card-title { margin: 0 0 8px; font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.12 }
        @media (max-width: 575px) { .tour-card-content { padding: 16px } .tour-card::before { top: 12px; left: 12px; width: 38px } }

        /* Group the existing tour cards by category. */
        .listing-grid > .row > :nth-child(4), .listing-grid > .row > :nth-child(12) { order: 1 } /* Automotive */
        .listing-grid > .row > :nth-child(3) { order: 2 } /* Real Estate */
        .listing-grid > .row > :nth-child(10) { order: 3 } /* Residential */
        .listing-grid > .row > :nth-child(1), .listing-grid > .row > :nth-child(2), .listing-grid > .row > :nth-child(9), .listing-grid > .row > :nth-child(11) { order: 4 } /* Hospitality */
        .listing-grid > .row > :nth-child(5), .listing-grid > .row > :nth-child(7), .listing-grid > .row > :nth-child(13) { order: 5 } /* Retail */
        .listing-grid > .row > :nth-child(6) { order: 6 } /* Industrial */
        .listing-grid > .row > :nth-child(8) { order: 7 } /* Commercial */

        /* Brand palette derived from logo2.jpeg. */
        :root {
            --ink: #241a24;
            --panel: #342438;
            --cream: #fffdf8;
            --muted: #d8cfda;
            --gold: #f9d25e;
            --berry: #af5c75;
            --leaf: #9bb22c
        }
        body { background: var(--ink) }
        .navbar { background: rgba(36, 26, 36, .78) }
        .site { background: radial-gradient(circle at 90% 5%, #57364f 0, transparent 30rem), var(--ink) }
        .eyebrow, .kicker, .number { color: var(--leaf) }
        .title i, .hero-title em { color: var(--berry) }
        .btn-gold { color: #16200a; background: var(--leaf); border-color: var(--leaf) }
        .btn-gold:hover { color: #33260a; background: var(--gold); border-color: var(--gold) }
        .btn-ghost { border-color: rgba(249, 210, 94, .72) }
        .btn-ghost:hover { background: var(--gold); color: var(--ink) }
        .tour-card { background: #2c2030; border-color: rgba(249, 210, 94, .38) }
        .tour-card-content { background: linear-gradient(135deg, #4a2f45, #291d2d) }
        .tour-card::before { background: rgba(36, 26, 36, .82); border-color: rgba(249, 210, 94, .82) }
        .tour-card .kicker, .tour-card-content::after { color: var(--gold) }

        /* Final logo2 palette: dark base with Google-style logo accents only. */
        :root {
            --ink: #07111f;
            --panel: #0d1b2a;
            --cream: #f7f7f7;
            --muted: #bac6d3;
            --gold: #fabc05;
            --berry: #ea4235;
            --leaf: #34a853;
            --blue: #4e85da;
        }
        body { background: var(--ink) }
        .navbar { background: rgba(7, 17, 31, .82) }
        .site { background: radial-gradient(circle at 90% 5%, #132c48 0, transparent 30rem), var(--ink) }
        .eyebrow, .kicker, .number { color: var(--blue) }
        .title i, .hero-title em { color: var(--berry) }
        .btn-gold { color: #fff; background: var(--leaf); border-color: var(--leaf) }
        .btn-gold:hover { color: #172006; background: var(--gold); border-color: var(--gold) }
        .btn-ghost { color: var(--cream); border-color: var(--blue) }
        .btn-ghost:hover { background: var(--blue); color: #fff }
        .tour-card { background: #0b1928; border-color: rgba(78, 133, 218, .42) }
        .tour-card-content { background: linear-gradient(135deg, #132d49, #091724) }
        .tour-card::before { background: rgba(7, 17, 31, .86); border-color: rgba(250, 188, 5, .88) }
        .tour-card .kicker, .tour-card-content::after { color: var(--gold) }

        /* Three-card virtual-tour gallery: image, category, title, action. */
        .listing-grid > .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem }
        @media (min-width: 992px) {
            .listing-grid > .row > .col-lg-4 { flex: 0 0 auto; width: 33.333333% }
        }
        .tour-card { border-color: rgba(78, 133, 218, .5); box-shadow: 0 16px 34px rgba(0, 0, 0, .22) }
        .tour-card-image { aspect-ratio: 16 / 10; filter: saturate(.9) contrast(1.04) brightness(.92) }
        .tour-card-content { padding: 22px; background: #0d1b2a }
        .tour-card .kicker { color: var(--blue); font-size: 11px; font-weight: 700; letter-spacing: .16em }
        .tour-card-title { margin: 9px 0 0; min-height: 3em; font-size: clamp(1.45rem, 2vw, 1.8rem); line-height: 1.08 }
        .tour-card-content::after { content: "OPEN TOUR  ↗"; display: flex; align-items: center; justify-content: space-between; min-height: 54px; margin-top: 22px; padding: 0 18px; color: #fff; background: var(--leaf); font: 700 12px "DM Sans", sans-serif; letter-spacing: .1em; transition: background .2s ease, color .2s ease, transform .2s ease }
        .tour-card:hover .tour-card-content::after, .tour-card:focus-visible .tour-card-content::after { color: #172006; background: var(--gold); letter-spacing: .1em; transform: translateY(-2px) }

        /* Refined card spacing and action scale. */
        .tour-card { border: 1px solid rgba(78, 133, 218, .58); box-shadow: 0 12px 28px rgba(0, 0, 0, .2) }
        .tour-card:hover, .tour-card:focus-visible { border-color: var(--gold); box-shadow: 0 18px 36px rgba(0, 0, 0, .3) }
        .tour-card-content { padding: 18px 20px 20px; border-top: 1px solid rgba(250, 188, 5, .28) }
        .tour-card .kicker { margin: 0; font-size: 10px; letter-spacing: .13em }
        .tour-card-title { margin: 5px 0 0; min-height: 2.2em; font-size: clamp(1.32rem, 1.75vw, 1.58rem) }
        .tour-card-content::after { min-height: 42px; margin-top: 14px; padding: 0 14px; font-size: 10px; letter-spacing: .08em }
        .tour-card:hover .tour-card-content::after, .tour-card:focus-visible .tour-card-content::after { letter-spacing: .08em; transform: translateY(-1px) }


        /* Compact card action and tighter text rhythm. */
        .tour-card-title { margin-top: 3px; min-height: 0 }
        .tour-card-content::after { min-height: 34px; margin-top: 8px; padding: 0 12px; font-size: 9px; letter-spacing: .06em }
        .tour-card:hover .tour-card-content::after, .tour-card:focus-visible .tour-card-content::after { letter-spacing: .06em }

        /* Normal-width card action; not a full-width bar. */
        .tour-card-title { margin-top: 5px; min-height: 2.2em }
        .tour-card-content::after { display: inline-flex; width: fit-content; min-height: 40px; margin-top: 14px; padding: 0 16px; font-size: 10px; letter-spacing: .08em }
        .tour-card:hover .tour-card-content::after, .tour-card:focus-visible .tour-card-content::after { letter-spacing: .08em }


        /* Brand button states: blue by default, green on hover. */
        .btn-gold { color: #fff; background: var(--blue); border-color: var(--blue) }
        .btn-gold:hover { color: #fff; background: var(--leaf); border-color: var(--leaf) }
        .tour-card-content::after { color: #fff; background: var(--blue) }
        .tour-card:hover .tour-card-content::after, .tour-card:focus-visible .tour-card-content::after { color: #fff; background: var(--leaf) }


        /* Softer tour-card shape and green interaction state. */
        .tour-card { border-radius: 14px }
        .tour-card-image { border-radius: 13px 13px 0 0 }
        .tour-card-content { border-radius: 0 0 13px 13px }
        .tour-card:hover, .tour-card:focus-visible { border-color: var(--leaf) }


        /* Match button corners to the softer card design. */
        .btn { border-radius: 8px }
        .tour-card-content::after { border-radius: 8px }


        /* Full-screen virtual-tour viewer. */
        .tour-modal .modal-content { background: var(--ink); border: 1px solid rgba(78, 133, 218, .5) }
        .tour-modal .modal-header { min-height: 72px; padding-inline: clamp(20px, 4vw, 56px); background: #0d1b2a; border-bottom-color: rgba(78, 133, 218, .35) !important }
        .tour-modal .modal-title { color: var(--cream) !important; font: 600 1.3rem "Playfair Display", serif }
        .tour-modal .modal-body { background: #000 }