:root {
                /* Palette from logo */
                --tn-primary: #d71c1c;
                --tn-primary-700: #b31212;
                --tn-blue: #2e79e6;
                --tn-dark: #0f1115;
                --tn-muted: #6c757d;
                --tn-bg: #f5f6f8;
                --tn-card: #ffffff;
                --tn-gradient: linear-gradient(135deg, #e42020 0%, #b31212 100%);
                --radius-xl: 18px;
            }

            html,
            body {
                font-family: "Jost", sans-serif;
                color: #1b1f24;
                background: var(--tn-bg);
            }
            h1,
            h2,
            h3,
            h4,
            .tn-heading {
                font-family: "Philosopher", sans-serif;
                letter-spacing: 0.2px;
            }

            /* Top utility bar */
            .topbar {
                background: #111214;
                color: #e9ecef;
                font-size: 0.925rem;
            }
            .topbar a {
                color: #e9ecef;
                text-decoration: none;
            }
            .topbar .sep {
                opacity: 0.5;
                margin: 0 0.75rem;
            }

            /* NAVBAR */
            .navbar {
                --bs-navbar-padding-y: 0.6rem;
                background: #fff;
                box-shadow: 0 6px 24px rgba(15, 17, 21, 0.06);
            }
            .navbar .nav-link {
                font-weight: 600;
                color: #1b1f24;
            }
            .navbar .nav-link:hover,
            .navbar .nav-link:focus {
                color: var(--tn-primary);
            }
            .navbar .btn-cta {
                font-weight: 700;
                letter-spacing: 0.2px;
                border-radius: 999px;
                padding: 0.6rem 1.1rem;
            }
            .btn-primary {
                --bs-btn-bg: var(--tn-primary);
                --bs-btn-border-color: var(--tn-primary);
                --bs-btn-hover-bg: var(--tn-primary-700);
                --bs-btn-hover-border-color: var(--tn-primary-700);
            }
            .btn-outline-primary {
                --bs-btn-color: var(--tn-primary);
                --bs-btn-border-color: var(--tn-primary);
                --bs-btn-hover-bg: var(--tn-primary);
                --bs-btn-hover-border-color: var(--tn-primary);
                --bs-btn-hover-color: #fff;
            }

            /* HERO with background image + dark overlay */
            .hero {
                position: relative;
                overflow: hidden;
                isolation: isolate;
                color: #fff;
                background: #000;
            }
            .hero::before {
                content: "";
                position: absolute;
                inset: 0;
                z-index: -2;
                background: url("/assets/img/hero-bg.webp") center/cover no-repeat fixed;
                transform: scale(1.02);
            }
            .hero::after {
                content: "";
                position: absolute;
                inset: 0;
                z-index: -1;
                background: radial-gradient(1000px 500px at 80% -10%, rgba(46, 121, 230, 0.2), transparent 60%),
                    linear-gradient(180deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.76));
            }
            .hero h1 {
                color: #fff;
                font-size: clamp(1.9rem, 3.2vw + 0.5rem, 3.25rem);
            }
            .hero .lead {
                color: #f1f3f5;
            }
            .hero .badge-hot {
                background: rgba(255, 255, 255, 0.1);
                color: #fff;
                border: 1px solid rgba(255, 255, 255, 0.25);
                border-radius: 999px;
                padding: 0.45rem 0.85rem;
                font-weight: 700;
                font-size: 0.85rem;
            }
            .hero-list li {
                margin-bottom: 0.4rem;
                color: #e9ecef;
            }
            .hero .btn-outline-dark {
                --bs-btn-color: #fff;
                --bs-btn-border-color: #fff;
                --bs-btn-hover-bg: #fff;
                --bs-btn-hover-color: #000;
            }

            /* CARD form */
            .lead-card {
                background: var(--tn-card);
                border: 1px solid #eef0f4;
                border-radius: var(--radius-xl);
                box-shadow: 0 14px 30px rgba(27, 31, 36, 0.14);
            }
            .lead-card .card-header {
                background: var(--tn-gradient);
                color: #fff;
                border-top-left-radius: var(--radius-xl);
                border-top-right-radius: var(--radius-xl);
                padding: 1rem 1.25rem;
            }
            .form-control:focus {
                box-shadow: 0 0 0 0.2rem rgba(215, 28, 28, 0.15);
                border-color: var(--tn-primary);
            }
            .terms small {
                font-size: 0.82rem;
                color: var(--tn-muted);
            }
            .form-check-input:checked {
                background-color: var(--tn-primary);
                border-color: var(--tn-primary);
            }

            /* FOOTER */
            footer {
                background: #0e0f12;
                color: #cbd1d8;
            }
            footer .footer-title {
                font-family: "Philosopher", sans-serif;
                font-weight: 700;
                color: #fff;
                margin-bottom: 1rem;
            }
            footer a {
                color: #cbd1d8;
                text-decoration: none;
            }
            footer a:hover {
                color: #fff;
            }
            .footer-cta {
                background: var(--tn-gradient);
                color: #fff;
                border-radius: var(--radius-xl);
                padding: 24px;
            }

            /* Floating CTA */
            .float-cta {
                position: fixed;
                right: 16px;
                bottom: 16px;
                z-index: 1040;
                display: flex;
                flex-direction: column;
                gap: 0.6rem;
            }
            .float-cta .btn {
                border-radius: 999px;
                box-shadow: 0 14px 26px rgba(0, 0, 0, 0.18);
            }
            .btn-whatsapp {
                background: #22c55e;
                color: #fff;
            }
            .btn-call {
                background: var(--tn-primary);
                color: #fff;
            }

            /* Utilities */
            .shadow-soft {
                box-shadow: 0 10px 26px rgba(15, 17, 21, 0.08);
            }
            .logo {
                max-height: 46px;
            }
            .divider {
                height: 1px;
                background: #e9ecef;
            }
            .rera {
                font-size: 0.9rem;
                color: #aab0b8;
            }

            @media (max-width: 991.98px) {
                .navbar .btn-cta {
                    padding: 0.55rem 0.9rem;
                }
            }
        


        
            /* ===== Scoped styles for Project OVERVIEW ===== */
            .ov-section {
                /* Local palette with safe fallbacks (won't override global) */
                --ov-primary: var(--tn-primary, #d71c1c);
                --ov-primary-700: #b31212;
                --ov-dark: #0f1115;
                --ov-muted: #6c7380;
                --ov-surface: #ffffff;
                --ov-border: #e9edf2;
                --ov-radius: 16px;
                --ov-soft-shadow: 0 14px 32px rgba(15, 17, 21, 0.08);
            }

            .ov-section .ov-kicker {
                font-weight: 700;
                font-size: 0.9rem;
                color: var(--ov-primary);
                background: rgba(215, 28, 28, 0.08);
                border: 1px solid rgba(215, 28, 28, 0.15);
                padding: 0.35rem 0.7rem;
                border-radius: 999px;
            }

            .ov-section .ov-title {
                font-family: "Philosopher", sans-serif;
                letter-spacing: 0.2px;
                margin-bottom: 0.25rem;
            }

            .ov-section .ov-accent {
                color: var(--ov-primary);
            }

            .ov-section .ov-lead {
                font-weight: 500;
            }

            .ov-section .ov-media {
                border: 1px solid var(--ov-border);
                border-radius: var(--ov-radius);
                box-shadow: var(--ov-soft-shadow);
                background: var(--ov-surface);
            }

            .ov-section .ov-rounded {
                border-radius: var(--ov-radius);
            }

            .ov-section .ov-facts .ov-card {
                border: 1px solid var(--ov-border);
                border-radius: 12px;
                background: #fff;
                padding: 14px 16px;
                height: 100%;
                box-shadow: 0 8px 18px rgba(15, 17, 21, 0.05);
            }

            .ov-section .ov-label {
                font-size: 0.8rem;
                text-transform: uppercase;
                letter-spacing: 0.4px;
                color: var(--ov-muted);
                margin-bottom: 4px;
            }

            .ov-section .ov-value {
                font-weight: 700;
                color: #1b1f24;
            }

            @media (max-width: 991.98px) {
                /* Stack: text first on mobile for faster context */
                #overview .row > .col-lg-6:first-child {
                    order: 2;
                }
                #overview .row > .col-lg-6:last-child {
                    order: 1;
                }
            }
        


        
            /* ===== Scoped Styles for Our Projects Section ===== */
            .pr-section {
                --pr-primary: var(--tn-primary, #d71c1c);
                --pr-muted: #6c7380;
                --pr-shadow: 0 10px 26px rgba(15, 17, 21, 0.06);
            }

            .pr-section .pr-kicker {
                font-weight: 700;
                font-size: 0.9rem;
                color: var(--pr-primary);
                background: rgba(215, 28, 28, 0.08);
                border: 1px solid rgba(215, 28, 28, 0.15);
                padding: 0.35rem 0.7rem;
                border-radius: 999px;
            }

            .pr-section .pr-title {
                font-family: "Philosopher", sans-serif;
                letter-spacing: 0.2px;
                font-weight: 700;
            }

            .pr-section .pr-accent {
                color: var(--pr-primary);
            }

            .pr-section .pr-lead {
                color: var(--pr-muted);
                margin-top: 0.5rem;
            }

            .pr-section .pr-card {
                transition:
                    transform 0.35s ease,
                    box-shadow 0.35s ease;
                background: #fff;
            }
            .pr-section .pr-card:hover {
                transform: translateY(-6px);
                box-shadow: var(--pr-shadow);
            }

            .pr-section .pr-card img {
                object-fit: cover;
                transition: transform 0.35s ease;
            }
            .pr-section .pr-card:hover img {
                transform: scale(1.05);
            }
        


        
            /* ===== Scoped styles for Offerings (alt layout) ===== */
            .of-section {
                --of-primary: var(--tn-primary, #d71c1c);
                --of-muted: #6c7380;
                --of-surface: #ffffff;
                --of-border: #e9edf2;
                --of-radius: 16px;
                --of-shadow: 0 14px 32px rgba(15, 17, 21, 0.08);
            }

            .of-section .of-kicker {
                font-weight: 700;
                font-size: 0.9rem;
                color: var(--of-primary);
                background: rgba(215, 28, 28, 0.08);
                border: 1px solid rgba(215, 28, 28, 0.15);
                padding: 0.35rem 0.7rem;
                border-radius: 999px;
            }

            .of-section .of-title {
                font-family: "Philosopher", sans-serif;
                letter-spacing: 0.2px;
            }

            .of-section .of-accent {
                color: var(--of-primary);
            }

            .of-section .of-lead {
                font-weight: 500;
            }

            .of-section .of-media {
                border: 1px solid var(--of-border);
                border-radius: var(--of-radius);
                background: var(--of-surface);
                box-shadow: var(--of-shadow);
            }

            .of-section .of-rounded {
                border-radius: var(--of-radius);
            }

            .of-section .of-list li {
                display: flex;
                align-items: flex-start;
                gap: 0.6rem;
                margin-bottom: 0.55rem;
                color: #1b1f24;
            }
            .of-section .of-list i {
                flex: 0 0 auto;
                font-size: 1.1rem;
                color: var(--of-primary);
                margin-top: 0.15rem;
            }

            @media (max-width: 991.98px) {
                /* Keep text first on mobile for readability */
                #offerings .row > .col-lg-6.order-lg-last {
                    order: 2;
                }
            }
        


        
            /* ===== Scoped styles for Brand Logos ===== */
            .br-section {
                --br-primary: var(--tn-primary, #d71c1c);
                --br-border: #e9edf2;
                --br-muted: #6c7380;
            }

            .br-section .br-kicker {
                font-weight: 700;
                font-size: 0.9rem;
                color: var(--br-primary);
                background: rgba(215, 28, 28, 0.08);
                border: 1px solid rgba(215, 28, 28, 0.15);
                padding: 0.35rem 0.7rem;
                border-radius: 999px;
            }

            .br-section .br-title {
                font-family: "Philosopher", sans-serif;
                letter-spacing: 0.2px;
                margin-bottom: 0.25rem;
            }

            .br-section .br-accent {
                color: var(--br-primary);
            }

            .br-section .br-lead {
                color: var(--br-muted);
            }

            .br-section .br-logo {
                background: #fff;
                border: 1px solid var(--br-border);
                border-radius: 12px;
                padding: 10px;
                transition: all 0.3s ease;
                box-shadow: 0 6px 14px rgba(15, 17, 21, 0.05);
            }
            .br-section .br-logo img {
                transition: all 0.3s ease;
            }
            .br-section .br-logo:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 26px rgba(15, 17, 21, 0.08);
            }
            .br-section .br-logo:hover img {
                filter: grayscale(0%);
                opacity: 1;
            }
        


 
            /* ===== Scoped Styles for High-Yield Section ===== */
            .fy-section {
                --fy-primary: var(--tn-primary, #d71c1c);
                --fy-muted: #6c7380;
                --fy-bg: #ffffff;
                --fy-border: #e9edf2;
                --fy-shadow: 0 10px 26px rgba(15, 17, 21, 0.05);
            }

            .fy-section .fy-kicker {
                font-weight: 700;
                font-size: 0.9rem;
                color: var(--fy-primary);
                background: rgba(215, 28, 28, 0.08);
                border: 1px solid rgba(215, 28, 28, 0.15);
                padding: 0.35rem 0.7rem;
                border-radius: 999px;
            }

            .fy-section .fy-title {
                font-family: "Philosopher", sans-serif;
                letter-spacing: 0.2px;
            }

            .fy-section .fy-accent {
                color: var(--fy-primary);
            }

            .fy-section .fy-lead {
                color: var(--fy-muted);
            }

            .fy-section .fy-card {
                background: var(--fy-bg);
                border: 1px solid var(--fy-border);
                border-radius: 16px;
                padding: 24px 20px;
                text-align: center;
                box-shadow: var(--fy-shadow);
                transition: all 0.3s ease;
                height: 100%;
            }
            .fy-section .fy-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 14px 32px rgba(15, 17, 21, 0.08);
            }

            .fy-section .fy-icon {
                width: 60px;
                height: 60px;
                margin: 0 auto 15px auto;
                border-radius: 50%;
                background: rgba(215, 28, 28, 0.08);
                color: var(--fy-primary);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.6rem;
            }
            .fy-section .fy-card h5 {
                font-weight: 700;
                margin-bottom: 8px;
            }
            .fy-section .fy-card p {
                color: var(--fy-muted);
                margin-bottom: 0;
                font-size: 0.95rem;
            }
        

        
            /* ===== Scoped Styles for Cost Sheet Section ===== */
            .cs-section {
                --cs-primary: var(--tn-primary, #d71c1c);
                --cs-muted: #6c7380;
                --cs-border: #dee2e6;
                --cs-bg: #f8f9fa;
            }

            .cs-section {
                background: #f4f5f6; /* Light grey background */
            }

            .cs-section .cs-kicker {
                font-weight: 700;
                font-size: 0.9rem;
                color: var(--cs-primary);
                background: rgba(215, 28, 28, 0.08);
                border: 1px solid rgba(215, 28, 28, 0.15);
                padding: 0.35rem 0.7rem;
                border-radius: 999px;
            }

            .cs-section .cs-title {
                font-family: "Philosopher", sans-serif;
                letter-spacing: 0.2px;
            }

            .cs-section .cs-accent {
                color: var(--cs-primary);
            }

            .cs-section .cs-lead {
                color: var(--cs-muted);
                font-size: 1rem;
            }

            .cs-section table {
                font-size: 0.95rem;
            }

            .cs-section table th {
                background: #f9fafb;
            }

            .cs-section table td,
            .cs-section table th {
                vertical-align: middle;
                padding: 0.75rem;
            }

            .cs-section table thead th {
                background: var(--cs-primary);
                color: #fff;
                border-color: var(--cs-primary);
            }

            .cs-section .table-secondary {
                background: #f8f9fa !important;
            }

            .cs-section .bg-light {
                background: #f7f7f7 !important;
            }

            .cs-section strong {
                color: var(--cs-primary);
            }
        
        
                
            /* ===== Scoped styles for Gallery Section ===== */
            .gl-section {
                --gl-primary: var(--tn-primary, #d71c1c);
                --gl-muted: #6c7380;
            }

            .gl-section .gl-kicker {
                font-weight: 700;
                font-size: 0.9rem;
                color: var(--gl-primary);
                background: rgba(215, 28, 28, 0.08);
                border: 1px solid rgba(215, 28, 28, 0.15);
                padding: 0.35rem 0.7rem;
                border-radius: 999px;
            }

            .gl-section .gl-title {
                font-family: "Philosopher", sans-serif;
                letter-spacing: 0.2px;
            }
            .gl-section .gl-accent {
                color: var(--gl-primary);
            }
            .gl-section .gl-lead {
                color: var(--gl-muted);
            }

            .gl-section .gl-img {
                border-radius: 12px;
                overflow: hidden;
                position: relative;
                cursor: pointer;
                transition:
                    transform 0.3s ease,
                    box-shadow 0.3s ease;
            }
            .gl-section .gl-img img {
                transition: transform 0.3s ease;
            }
            .gl-section .gl-img:hover img {
                transform: scale(1.08);
            }
            .gl-section .gl-img:hover {
                box-shadow: 0 10px 26px rgba(15, 17, 21, 0.08);
            }

            /* Tabs */
            .gl-section .nav-pills .nav-link {
                border-radius: 999px;
                font-weight: 600;
                color: #333;
                border: 1px solid #dee2e6;
                background: #fff;
                padding: 0.5rem 1.25rem;
            }
            .gl-section .nav-pills .nav-link.active {
                background: var(--gl-primary);
                color: #fff;
                border-color: var(--gl-primary);
            }

            /* Modal */
            .gl-section .modal-content {
                background: rgba(0, 0, 0, 0.85);
                border-radius: 16px;
            }
            .gl-section .modal-img {
                display: block;
                margin: auto;
            }
        


        
            /* ===== Scoped styles for Location & Contact Section ===== */
            .lc-section {
                --lc-primary: var(--tn-primary, #d71c1c);
                --lc-muted: #6c7380;
                --lc-bg: #ffffff;
                --lc-border: #e9edf2;
                --lc-radius: 16px;
                --lc-shadow: 0 12px 26px rgba(15, 17, 21, 0.08);
            }

            .lc-section .lc-kicker {
                font-weight: 700;
                font-size: 0.9rem;
                color: var(--lc-primary);
                background: rgba(215, 28, 28, 0.08);
                border: 1px solid rgba(215, 28, 28, 0.15);
                padding: 0.35rem 0.7rem;
                border-radius: 999px;
            }

            .lc-section .lc-title {
                font-family: "Philosopher", sans-serif;
                letter-spacing: 0.2px;
            }

            .lc-section .lc-accent {
                color: var(--lc-primary);
            }

            .lc-section .lc-lead {
                color: var(--lc-muted);
            }

            .lc-section .lc-map iframe {
                border-radius: var(--lc-radius);
            }

            .lc-section .lc-list li {
                margin-bottom: 0.6rem;
                font-size: 0.95rem;
                color: #1b1f24;
            }
            .lc-section .lc-list i {
                color: var(--lc-primary);
                margin-right: 0.6rem;
                font-size: 1.1rem;
            }

            .lc-section .lc-form {
                border: 1px solid var(--lc-border);
            }
            .lc-section .form-control:focus {
                border-color: var(--lc-primary);
                box-shadow: 0 0 0 0.15rem rgba(215, 28, 28, 0.15);
            }
        
        
            /* ===== Scoped Styles for Layout & Massing Section ===== */
            .lm-section {
                --lm-primary: var(--tn-primary, #d71c1c);
                --lm-muted: #6c7380;
                --lm-shadow: 0 12px 28px rgba(15, 17, 21, 0.08);
            }

            .lm-section .lm-kicker {
                font-weight: 700;
                font-size: 0.9rem;
                color: var(--lm-primary);
                background: rgba(215, 28, 28, 0.08);
                border: 1px solid rgba(215, 28, 28, 0.15);
                padding: 0.35rem 0.7rem;
                border-radius: 999px;
            }

            .lm-section .lm-title {
                font-family: "Philosopher", sans-serif;
                letter-spacing: 0.2px;
            }

            .lm-section .lm-accent {
                color: var(--lm-primary);
            }

            .lm-section .lm-lead {
                color: var(--lm-muted);
            }

            .lm-section .lm-img {
                border-radius: 14px;
                overflow: hidden;
                position: relative;
                cursor: pointer;
                transition:
                    transform 0.35s ease,
                    box-shadow 0.35s ease;
            }
            .lm-section .lm-img img {
                width: 100%;
                height: 420px;
                object-fit: contain;
                transition: transform 0.35s ease;
            }
            .lm-section .lm-img:hover img {
                transform: scale(1.08);
            }
            .lm-section .lm-img:hover {
                box-shadow: var(--lm-shadow);
                transform: translateY(-5px);
            }

            /* Modal */
            .lm-section .modal-content {
                background: rgba(0, 0, 0, 0.85);
                border-radius: 16px;
            }
            .lm-section .modal-img {
                display: block;
                margin: auto;
                max-height: 85vh;
                object-fit: contain;
            }