/* ===== GLOBAL WRAPPER FOR LARGE DISPLAYS ===== */
.container,
.hero-container,
.case-grid,
.timeline-wrapper,
.footer-container,
.about-container,
.customer-grid {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================================
   1. GLOBAL RESET & THEME
========================================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI',Tahoma,sans-serif;
}

:root{
    --bg-dark:#1a5345;
    --card-green:#243a35;
    --accent-gold:#d4c185;
    --text-white:#fff;
    --btn-orange:#ff9900;
}

body{
    background:var(--bg-dark);
    color:var(--text-white);
    line-height:1.6;
    overflow-x:hidden;
}

/* =========================================
   2. NAVBAR
========================================= */
.navbar{
    position:fixed;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    width:95%;
    max-width:1200px;
    z-index:1000;

    background:rgba(36,58,53,.90);
    backdrop-filter:blur(14px);
    border-radius:100px;
    padding:15px 45px;

    box-shadow:0 15px 35px rgba(0,0,0,.25);
    transition:all .4s ease;
}

.navbar.scrolled{
    background:rgba(36,58,53,.95);
    box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.nav-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.nav-left,.nav-right{
    flex:1;
    display:flex;
    align-items:center;
}
.nav-right{justify-content:flex-end;}

.logo-img{
    height:55px;
    width:auto;
}

.nav-links{
    flex:2;
    display:flex;
    justify-content:center;
    gap:15px;
    list-style:none;
}

.nav-links a{
    color:var(--accent-gold);
    text-decoration:none;
    border:1px solid var(--accent-gold);
    border-radius:20px;
    padding:8px 18px;
    transition:.3s;
}

.nav-links a:hover,
.nav-links a.active{
    background:var(--accent-gold);
    color:var(--card-green);
}

.enquire-btn{
    background:var(--btn-orange);
    color:#fff;
    border:none;
    padding:12px 28px;
    border-radius:50px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}

.enquire-btn:hover{
    transform:scale(1.05);
}

/* =========================================
   3. HERO SECTION
========================================= */
.hero-section{
    min-height:100vh;
    padding:170px 0 80px;

    background:
            linear-gradient(rgba(10,20,18,.35),rgba(10,20,18,.45)),
            url("hero-realestate.jpg") center/cover no-repeat;
}

.hero-container{
    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:flex-start;
    gap:50px;
    padding:0 20px;
}

.hero-text{
    max-width:650px;
    min-height:460px;
    padding:35px;
    border-radius:20px;

    background:linear-gradient(
            to right,
            rgba(10,20,18,.65),
            rgba(10,20,18,.35)
    );

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.hero-top-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.hero-top-graphic{
    width:320px;
    height:auto;
    margin-bottom:18px;
}

.hero-text h1{
    color:var(--accent-gold);
    font-size:2.25rem;
    line-height:1.2;
    margin-bottom:20px;
    text-transform:uppercase;
}

.hero-description,
.hero-footer-text{
    max-width:520px;
    text-align:center;
}

.hero-footer-text{
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid rgba(212,193,133,.25);
}

/* =========================================
   4. MULTI STEP FORM
========================================= */
.form-wrapper{
    flex:0 0 450px;
    background:var(--card-green);
    padding:40px;
    border-radius:30px;
    box-shadow:0 20px 50px rgba(0,0,0,.3);
}

.progress-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:220px;
    margin:0 auto 40px;
}

.circle{
    width:40px;
    height:40px;
    border:2px solid #555;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#888;
    font-weight:bold;
    transition:.3s;
}

.circle.active{
    border-color:var(--accent-gold);
    color:var(--accent-gold);
}

.form-step{display:none;}
.form-step.active{
    display:block;
    animation:slideUp .4s ease;
}

label,.form-label{
    display:block;
    font-size:.85rem;
    color:var(--accent-gold);
    margin-bottom:5px;
    font-weight:600;
}

input,
.form-select,
textarea{
    width:100%;
    padding:15px;
    margin-bottom:20px;
    border:1px solid #555;
    border-radius:10px;
    background:rgba(255,255,255,.05);
    color:#fff;
}

textarea{
    min-height:100px;
    resize:vertical;
}

input:focus,
.form-select:focus,
textarea:focus{
    outline:none;
    border-color:var(--accent-gold);
}

.btn{
    padding:12px 30px;
    border:none;
    border-radius:12px;
    cursor:pointer;
    font-weight:600;
}

.next-btn{background:var(--accent-gold);color:var(--card-green);}
.prev-btn{background:#444;color:#fff;}
.submit-btn{background:var(--btn-orange);color:#fff;}

/* =========================================
   TRUST BAR — REFINED DESIGN
========================================= */

.trust-bar{
    max-width:1100px;
    margin:40px auto 0;

    background:rgba(15,45,38,0.95);
    border:1px solid rgba(212,193,133,0.18);
    border-radius:24px;

    padding:40px 35px; /* more breathing space */

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:28px;
}

/* ---------- SINGLE HEADING ---------- */
.trust-heading{
    width:100%;
    text-align:center;

    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
    font-weight:300;
    color:rgba(255,255,240,0.8);

    padding-bottom:18px;
    border-bottom:1px solid rgba(212,193,133,0.20);
}

/* ---------- STATS ROW ---------- */
.trust-stats{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:28px;
    width:100%;
}

/* stat blocks */
.trust-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    min-width:150px;
}

/* numbers */
.trust-number{
    font-size:2.2rem;
    font-weight:800;
    color:#C5A059;
    line-height:1;
}

/* labels */
.trust-label{
    margin-top:6px;
    font-size:.75rem;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#fff;
    opacity:.9;
}

/* dividers */
.trust-divider{
    width:1px;
    height:38px;
    background:rgba(212,193,133,0.25);
}

/* ---------- MOBILE ---------- */
@media(max-width:700px){
    .trust-stats{
        flex-direction:column;
        gap:18px;
    }

    .trust-divider{
        display:none;
    }
}

/* =========================================
   7. PROCESS SECTION
========================================= */
.process-section{
    padding:100px 20px;
    text-align:center;
}

.timeline-wrapper{
    max-width:1200px;
    margin:60px auto 0;
    position:relative;
}

.timeline-line{
    position:absolute;
    top:50%;
    left:0;
    width:0%;
    height:2px;
    background:repeating-linear-gradient(
            90deg,
            var(--accent-gold),
            var(--accent-gold) 10px,
            transparent 10px,
            transparent 20px
    );
    opacity:.3;
    transition:width 1.5s ease-out;
}

.process-steps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.process-card{
    background:rgba(2,44,34,0.88);
    border:1px solid rgba(197,160,89,0.2);
    border-radius:18px;

    padding:80px 30px 40px;
    min-height:340px;
    text-align:left;

    opacity:1;                 /* ← ALWAYS visible */
    transform:none;             /* ← REMOVE hidden start */

    transition:all .3s ease;
}


.process-card.active{
    opacity:1;
    transform:translateY(0);
}

.step-bg-text{
    position:absolute;
    top:15px;
    left:20px;
    font-size:3rem;
    font-weight:900;
    color:var(--accent-gold);
    opacity:.2;
}

.icon-circle{
    width:70px;
    height:70px;
    background:var(--accent-gold);
    color:var(--bg-dark);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
    font-size:1.5rem;
}

.highlighted-card{
    border-color:var(--accent-gold);
    background:rgba(212,193,133,.08);
    transform:scale(1.05);
}

.engine-badge{
    position:absolute;
    top:-12px;
    left:50%;
    transform:translateX(-50%);
    background:var(--accent-gold);
    color:var(--bg-dark);
    padding:4px 12px;
    border-radius:20px;
    font-size:.7rem;
    font-weight:800;
}

/* =========================================
   8. FOOTER
========================================= */
footer{
    background:var(--card-green);
    padding:60px 20px;
    margin-top:80px;
}

.footer-container{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:40px;
    text-align:center;
}

.footer-column h4{
    color:var(--accent-gold);
    margin-bottom:15px;
}

.social-links{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.social-links a{
    color:#fff;
    text-decoration:none;
}

.copyright{
    text-align:center;
    margin-top:40px;
    opacity:.7;
}

/* =========================================
   9. ANIMATIONS
========================================= */
@keyframes slideUp{
    from{opacity:0;transform:translateY(15px);}
    to{opacity:1;transform:translateY(0);}
}

/* =========================================
   10. RESPONSIVE
========================================= */
@media(max-width:950px){
    .hero-container{
        flex-direction:column;
        align-items:center;
    }

    .nav-links{display:none;}

    .form-wrapper{
        width:100%;
        max-width:550px;
    }

    .case-grid{grid-template-columns:repeat(2,1fr);}
    .process-steps{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:600px){
    .case-grid{grid-template-columns:1fr;}
    .process-steps{grid-template-columns:1fr;}
    .trust-headlines{grid-template-columns:1fr 1fr;}
}
/* =========================================
   PROCESS CARD INTERACTIONS (FIX)
========================================= */

/* hover lift */
.process-card:hover{
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.35);
    border-color: var(--accent-gold);
}

/* keep animation + hover working together */
.process-card.active:hover{
    transform: translateY(-10px) scale(1.02);
}

/* highlighted card stays slightly bigger */
.highlighted-card{
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(212,193,133,0.18);
}

.highlighted-card:hover{
    transform: scale(1.07) translateY(-8px);
}

/* -----------------------------------------
   RADIATING NETWORK ICON EFFECT
----------------------------------------- */
.network-icon{
    position: relative;
    animation: pulse-gold 2s infinite;
}

@keyframes pulse-gold{
    0%{
        box-shadow: 0 0 0 0 rgba(212,193,133,0.45);
    }
    70%{
        box-shadow: 0 0 0 18px rgba(212,193,133,0);
    }
    100%{
        box-shadow: 0 0 0 0 rgba(212,193,133,0);
    }
}
/* =========================================
   CASE STUDIES (PAST WORK)
========================================= */

.case-studies-section{
    padding:80px 20px;
}

.section-header{
    text-align:center;
    margin-bottom:50px;
}

.case-title{
    font-family:'Times New Roman',serif;
    font-size:3.5rem;
    color:var(--accent-gold);
}

.title-underline{
    width:240px;
    height:2px;
    margin:10px auto 0;
    background:var(--accent-gold);
}

.case-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    max-width:1200px;
    margin:50px auto 0;
}

/* ---------- CARD ---------- */
.case-card{
    background:var(--accent-gold);
    height:400px;
    padding:30px;
    position:relative;
    overflow:hidden;

    /* IMPORTANT */
    z-index:1;
    isolation:isolate;

    transition:
            transform .45s ease,
            box-shadow .45s ease;
}

/* hover lift */
.case-card:hover{
    transform:translateY(-12px);
    box-shadow:0 20px 35px rgba(0,0,0,.28);
}

/* ---------- TEXT ---------- */
.case-text-content{
    position:relative;
    z-index:3;
    color:var(--bg-dark);
}

.case-text-content h3{
    margin-bottom:10px;
    font-family:'Times New Roman',serif;
}

/* ---------- IMAGE ---------- */
.case-img{

    bottom:0;
    left:0;
    width:100%;
    max-height:55%;
    object-fit:cover;

    z-index:2;
    transition:transform .6s ease;
}

/* subtle zoom */
.case-card:hover .case-img{
    transform:scale(1.06);
}
/* =========================================
   NAVBAR — FLOATING GLASS
========================================= */
.navbar{
    position:fixed;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    width:95%;
    max-width:1200px;
    z-index:1000;

    /* default state (slightly stronger for readability over hero) */
    background:rgba(36,58,53,0.72);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    border-radius:100px;
    padding:15px 45px;

    box-shadow:0 15px 35px rgba(0,0,0,0.25);
    transition:all .4s ease;
}

/* ----- SCROLL STATE (MORE TRANSPARENT) ----- */
.navbar.scrolled{
    background:rgba(36,58,53,0.50);   /* ← transparent glass */
    box-shadow:0 10px 25px rgba(0,0,0,0.20);
}
/* =========================================
   FORM DROPDOWN VISIBILITY FIX
========================================= */

/* select field */
.form-select{
    appearance:none;
    background:rgba(255,255,255,.05);
    color:#fff;
}

/* dropdown options (CRITICAL FIX) */
.form-select option{
    background:var(--card-green);
    color:#fff;
}

/* disabled placeholder look */
.form-select:invalid{
    color:#bbb;
}

/* =========================================
   HERO HEADING CENTER FIX
========================================= */

.hero-text{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.hero-text h1{
    width:100%;
    text-align:center;
    margin:0 0 20px 0;
}

/* make paragraphs perfectly centered */
.hero-description,
.hero-footer-text{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
/* =========================================
   FORM PROGRESS BAR (CONNECTED STEPS)
========================================= */

.progress-container{
    position:relative;
    width:220px;
    margin:0 auto 40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* LINE BEHIND CIRCLES */
.progress-container::before{
    content:"";
    position:absolute;
    top:50%;
    left:20px;
    right:20px;
    height:2px;
    background:rgba(255,255,255,0.2);
    transform:translateY(-50%);
    z-index:1;
}

/* ACTIVE PROGRESS LINE (optional for JS later) */
.progress-container::after{
    content:"";
    position:absolute;
    top:50%;
    left:20px;
    height:2px;
    width:0%;
    background:var(--accent-gold);
    transform:translateY(-50%);
    z-index:1;
    transition:width .4s ease;
}

/* CIRCLES */
.circle{
    width:40px;
    height:40px;
    border:2px solid #555;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    color:#888;

    background:var(--card-green);
    position:relative;
    z-index:2;
    transition:.3s;
}

.circle.active{
    border-color:var(--accent-gold);
    color:var(--accent-gold);
}
/* =========================================
   FORM BUTTON GROUP
========================================= */

.btn-group{
    display:flex;
    gap:12px;
    margin-top:10px;
}

.btn{
    flex:1;
    padding:12px 20px;
    border:none;
    border-radius:12px;
    cursor:pointer;
    font-weight:600;
    transition:.3s;
}

/* mobile stacking */
@media (max-width:600px){
    .btn-group{
        flex-direction:column;
    }
}
.form-step h4{
    position:relative;
    padding-bottom:12px;
}

.form-step h4::after{
    content:"";
    display:block;
    width:80px;
    height:2px;
    margin:8px auto 0;
    background:var(--accent-gold);
    opacity:.7;
}
/* =========================================
   PREMIUM FORM SPACING SYSTEM
========================================= */

/* FORM WRAPPER breathing room */
.form-wrapper{
    padding:48px 42px;
}

/* ---------- PROGRESS BAR ---------- */
.progress-container{
    margin:0 auto 46px;   /* more space below */
}

/* ---------- STEP HEADINGS ---------- */
.form-step > h4{
    text-align:center !important;
    width:100%;
    margin:0 auto 30px auto;  /* balanced spacing */
    font-size:1.55rem;
    font-weight:600;
    color:var(--accent-gold);
    line-height:1.2;
    position:relative;
}

/* elegant divider */
.form-step > h4::after{
    content:"";
    display:block;
    width:120px;
    height:2px;
    margin:14px auto 0;
    background:var(--accent-gold);
    opacity:.75;
}

/* ---------- LABEL SPACING ---------- */
.form-label,
.form-step label{
    margin-bottom:8px;
    font-size:.9rem;
    letter-spacing:.3px;
}

/* ---------- INPUT RHYTHM ---------- */
input,
.form-select,
textarea{
    margin-bottom:22px;   /* consistent vertical rhythm */
    padding:15px 16px;
}

/* ---------- BUTTON AREA ---------- */
.btn-group{
    margin-top:18px;
    gap:14px;
}

.btn{
    padding:13px 20px;
}

/* ---------- FORM STEP BREATHING ---------- */
.form-step{
    padding-top:2px;
}

/* =========================================
   ABOUT PAGE
========================================= */

.about-hero{
    padding:170px 20px 80px;
    text-align:center;
}

.about-hero h1{
    font-size:3rem;
    color:var(--accent-gold);
    margin-bottom:15px;
}

.divider-gold{
    width:140px;
    height:2px;
    margin:0 auto 20px;
    background:var(--accent-gold);
}

.hero-subtext{
    max-width:700px;
    margin:auto;
    opacity:.9;
}

.about-container{
    max-width:1100px;
    margin:0 auto;
    padding:40px 20px 80px;
}

.editorial-text{
    font-size:1.2rem;
    line-height:1.8;
    text-align:center;
}

.gold-highlight{
    color:var(--accent-gold);
}

.edge-card{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(212,193,133,.2);
    padding:40px;
    border-radius:20px;
    margin-top:50px;
    text-align:center;
}

.edge-icon{
    font-size:2rem;
    color:var(--accent-gold);
    margin-bottom:15px;
}

.dual-city-section{
    display:flex;
    gap:40px;
    margin-top:60px;
    align-items:center;
}

.city-visuals{
    display:flex;
    align-items:center;
    gap:20px;
}

.city-circle{
    width:120px;
    height:120px;
    border-radius:50%;
    border:2px solid var(--accent-gold);
    display:flex;
    align-items:center;
    justify-content:center;
}
/* =========================================
   CUSTOMERS PAGE
========================================= */

.customer-hero{
    padding:170px 20px 80px;
    text-align:center;
}

.customer-grid{
    max-width:1200px;
    margin:0 auto 80px;
    padding:0 20px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}

.customer-card{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(212,193,133,.15);
    border-radius:20px;
    padding:30px;
    transition:.35s;
}

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

.card-icon{
    font-size:1.5rem;
    color:var(--accent-gold);
    margin-bottom:15px;
}

.card-divider{
    width:60px;
    height:2px;
    background:var(--accent-gold);
    margin:12px 0 15px;
}
/* =========================================
   SERVICES PAGE
========================================= */

.services-wrapper{
    max-width:1200px;
    margin:0 auto;
    padding:170px 20px 100px;
}

.services-intro{
    display:flex;
    gap:50px;
    margin-bottom:80px;
    align-items:center;
}

.intro-left{flex:1;}
.intro-right{flex:0 0 350px;}

.main-heading{
    font-family:'Times New Roman',serif;
    font-size:3rem;
    color:var(--accent-gold);
    margin-bottom:12px;
}

.sub-heading{
    font-size:.9rem;
    text-transform:uppercase;
    letter-spacing:2px;
    opacity:.8;
    margin-bottom:25px;
}

.check-list{
    list-style:none;
}

.check-list li{
    margin-bottom:12px;
}

.check-icon{
    color:var(--accent-gold);
    margin-right:10px;
}

.report-image-placeholder{
    height:400px;
    border:2px dashed var(--accent-gold);
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.report-img{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:contain;
}
/* =========================================
   GLOBAL PAGE ANIMATIONS
========================================= */

.fade-in{
    animation:fadeInUp .8s ease forwards;
}

.fade-in-delay{
    animation:fadeInUp 1s ease forwards;
}

@keyframes fadeInUp{
    from{opacity:0;transform:translateY(20px);}
    to{opacity:1;transform:translateY(0);}
}

/* =========================================
   CASE MODAL
========================================= */

.case-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.65);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:all .35s ease;
    z-index:2000;
}

.case-modal.active{
    opacity:1;
    visibility:visible;
}

.case-modal-content{
    background:var(--card-green);
    color:#fff;
    width:min(700px,90%);
    padding:40px 30px;
    border-radius:20px;
    position:relative;
    box-shadow:0 25px 50px rgba(0,0,0,.4);
    animation:slideUp .35s ease;
}

.case-modal-content h3{
    color:var(--accent-gold);
    margin-bottom:15px;
    font-family:'Times New Roman',serif;
}

.case-close{
    position:absolute;
    top:14px;
    right:18px;
    font-size:30px;
    border:none;
    background:none;
    color:var(--accent-gold);
    cursor:pointer;
    line-height:1;
}
/* =========================================
   HERO = SINGLE POSTER LAYOUT
========================================= */

.hero-section{
    position:relative;
    height:100vh;
    min-height:100vh;
    overflow:hidden;

    background:
            url("hero-realestate.jpg") center/cover no-repeat;
}

/* dark cinematic overlay */
.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
            rgba(10,20,18,0.45),
            rgba(10,20,18,0.55)
    );
    z-index:1;
}

.hero-container{
    position:relative;
    z-index:2;
    height:100%;
    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:center;   /* vertical center */
    justify-content:space-between;
    gap:60px;
    padding:0 20px;
}

/* LEFT COLUMN — NO CARD */
.hero-text{
    max-width:620px;
    background:none !important;
    padding:0 !important;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
}

.hero-top-graphic{
    width:300px;
    margin-bottom:20px;
}

.hero-text h1{
    font-size:3rem;
    color:var(--accent-gold);
    margin-bottom:20px;
    text-transform:uppercase;
    line-height:1.15;
}

.hero-description,
.hero-footer-text{
    max-width:560px;
    color:#fff;
    opacity:0.95;
}

.hero-footer-text{
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid rgba(212,193,133,0.25);
}

/* RIGHT COLUMN — ONLY CARD */
.form-wrapper{
    background:rgba(36,58,53,0.65);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    border:1px solid rgba(212,193,133,0.18);
    box-shadow:0 20px 50px rgba(0,0,0,.35);

    flex:0 0 450px;
    border-radius:30px;
}

/* =========================================
   TRUST BAR — INTEGRATED BOTTOM
========================================= */

.trust-gradient{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:150px;
    background:linear-gradient(
            to top,
            rgba(1,34,26,1),
            transparent
    );
    z-index:2;
}

.trust-bar{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    z-index:3;

    background:transparent;
    border-top:1px solid rgba(197,160,89,0.3);

    padding:20px 0 25px;

    display:flex;
    flex-direction:column;
    align-items:center;
}

.trust-heading{
    font-size:13px;
    letter-spacing:2px;
    opacity:.9;
    margin-bottom:15px;
}

.trust-stats{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
}

.trust-item{
    text-align:center;
}

.trust-number{
    font-size:2rem;
    font-weight:800;
    color:#C5A059;
}

.trust-divider{
    width:1px;
    height:35px;
    background:rgba(212,193,133,.25);
}
/* =========================================
   HERO — FINAL COHESIVE VERSION
========================================= */

.hero-section{
    position:relative;
    height:100vh;
    min-height:760px;
    overflow:hidden;

    background:
            linear-gradient(rgba(10,20,18,.45), rgba(10,20,18,.55)),
            url("hero-realestate.jpg") center/cover no-repeat;
}

/* MAIN CONTENT AREA */
.hero-container{
    position:relative;
    z-index:2;

    max-width:1200px;
    height:100%;
    margin:auto;
    padding:140px 20px 170px; /* room for trust bar */

    display:flex;
    align-items:center;   /* vertical center */
    justify-content:space-between;
    gap:60px;
}

/* ---------- LEFT TEXT (NO CARD) ---------- */
.hero-text{
    flex:1;
    max-width:620px;

    background:none !important;
    padding:0 !important;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    text-align:left;
}

.hero-top-graphic{
    width:320px;
    margin-bottom:20px;
}

.hero-text h1{
    font-size:3.2rem;
    line-height:1.15;
    margin-bottom:20px;
    color:var(--accent-gold);
    text-transform:uppercase;
}

.hero-description{
    font-size:1.05rem;
    line-height:1.7;
    max-width:560px;
}

.hero-footer-text{
    margin-top:18px;
    padding-top:14px;
    border-top:1px solid rgba(212,193,133,.25);
}

/* ---------- FORM (ONLY CARD) ---------- */
.form-wrapper{
    flex:0 0 460px;

    background:rgba(36,58,53,0.70);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    border:1px solid rgba(212,193,133,.2);
    border-radius:30px;

    padding:40px;

    box-shadow:0 20px 50px rgba(0,0,0,.35);
}

/* =========================================
   TRUST BAR — INTEGRATED INTO HERO
========================================= */

.trust-gradient{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:150px;
    background:linear-gradient(
            to top,
            rgba(1,34,26,1),
            transparent
    );
    z-index:1;
}

.trust-bar{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;

    background:transparent;
    border-top:1px solid rgba(197,160,89,0.3);

    padding:18px 0 25px;
    z-index:3;
}

.trust-heading{
    text-align:center;
    font-size:13px;
    letter-spacing:2px;
    margin-bottom:14px;
}

.trust-stats{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:28px;
}

.trust-item{
    text-align:center;
    min-width:140px;
}

.trust-number{
    font-size:2rem;
    font-weight:800;
    color:#C5A059;
}

.trust-divider{
    width:1px;
    height:36px;
    background:rgba(212,193,133,.25);
}
/* ---------- LEFT TEXT COLUMN ---------- */
.hero-text{
    flex:1;
    max-width:620px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    /* THIS FIXES CENTERING */
    align-items:center;
    text-align:center;

    margin:0 auto;
}

/* logo */
.hero-top-wrap{
    display:flex;
    justify-content:center;
    width:100%;
}

.hero-top-graphic{
    width:320px;
    margin-bottom:20px;
}

/* heading */
.hero-text h1{
    width:100%;
    font-size:3.2rem;
    line-height:1.15;
    margin-bottom:20px;
    color:var(--accent-gold);
    text-transform:uppercase;
    text-align:center;
}

/* paragraphs perfectly centered */
.hero-description,
.hero-footer-text{
    max-width:560px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}
.trust-bar{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;

    background:transparent;
    border-top:1px solid rgba(197,160,89,0.3);

    padding:18px 0 25px;
    z-index:3;

    /* REMOVE old constraints */
    max-width:none;
    margin:0;
}
.trust-stats{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:28px;
    width:100%;
}
/* =========================================
   HERO CTA ARROW
========================================= */

.cta-arrow{
    color:#C5A059;
    font-weight:700;
    display:inline-block;
    margin-left:6px;

    animation:arrowSlide 1.4s ease-in-out infinite;
}

@keyframes arrowSlide{
    0%{
        transform:translateX(0);
    }
    50%{
        transform:translateX(5px);
    }
    100%{
        transform:translateX(0);
    }
}
.hero-text h1{
    width:100%;
    text-align:center;

    font-family:'Playfair Display', serif;
    font-weight:700;          /* Bold */
    letter-spacing:-0.5px;    /* Premium tighter spacing */

    font-size:3.2rem;
    line-height:1.15;
    margin-bottom:20px;

    color:var(--accent-gold);
    text-transform:uppercase;
}
/* =========================================
   HERO LEFT COLUMN — LUXURY REFINEMENT
========================================= */

.hero-text{
    flex:1;
    max-width:620px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    /* IMPORTANT: LEFT ALIGN */
    align-items:flex-start;
    text-align:left;
}

/* ---------- LOGO ---------- */
/* stays centered while text is left aligned */
.hero-top-wrap{
    width:100%;
    display:flex;
    justify-content:center;
}

.hero-top-graphic{
    max-width:160px;
    width:100%;
    margin-bottom:20px;
}

/* ---------- HEADLINE ---------- */
.hero-heading{
    font-family:'Playfair Display', serif;
    font-weight:700;
    letter-spacing:-0.5px;

    font-size:3.2rem;
    line-height:1.12;
    margin-bottom:20px;

    color:var(--accent-gold);
}

/* ---------- SUBHEADING ---------- */
.hero-description{
    max-width:540px;

    font-size:1.03rem;
    line-height:1.75;

    color:#F2F0E6;          /* warm ivory */
    font-weight:400;        /* lighter contrast */
    text-transform:none;    /* sentence case */
}

/* ---------- CTA ARROW ---------- */
.cta-arrow{
    color:#C5A059;
    font-weight:700;
    display:inline-block;
    margin-left:6px;

    animation:arrowSlide 1.4s ease-in-out infinite;
}

@keyframes arrowSlide{
    0%{ transform:translateX(0); }
    50%{ transform:translateX(5px); }
    100%{ transform:translateX(0); }
}
   CURATED PORTFOLIO — LUXURY GALLERY
/*========================================= */

.case-studies-section{
    padding:100px 20px;
    background:#022c22;
}

/* ---------- SECTION TITLE ---------- */
.case-title{
    text-align:center;
    font-family:'Playfair Display', serif;
    color:#C5A059;
    letter-spacing:2px;
    font-size:3rem;
    text-transform:uppercase;
}

/* ---------- GRID ---------- */
.case-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
    max-width:1200px;
    margin:60px auto 0;
}

/* ---------- CARD ---------- */
.case-card{
    display:flex;
    flex-direction:column;

    background:transparent;
    border:1px solid rgba(197,160,89,0.3);

    border-radius:12px;
    overflow:hidden;

    transition:all .3s ease;
}

.case-card:hover{
    border-color:#C5A059;
    transform:translateY(-5px);
    box-shadow:0 12px 25px rgba(0,0,0,.25);
}

/* ---------- IMAGE (EDGE TO EDGE) ---------- */
.case-img{
    width:100%;
    height:240px;
    object-fit:cover;
    display:block;
}

/* ---------- TEXT AREA ONLY ---------- */
.case-text-content{
    padding:24px;
}

/* title */
.case-text-content h3{
    font-family:'Playfair Display', serif;
    color:#C5A059;
    font-size:1.25rem;
    margin-bottom:10px;
}

/* description */
.case-text-content p{
    font-family:'Inter', sans-serif;
    color:#F2F0E6;
    font-size:0.9rem;
    line-height:1.5;
}
/* =========================================
   TAILORED PROCESS — DARK LUXURY GLASS
========================================= */

.process-section{
    padding:110px 20px;
    text-align:center;
    background:#022c22;
}

.timeline-wrapper{
    max-width:1200px;
    margin:70px auto 0;
    position:relative;
}

/* ---------- CONNECTOR LINE ---------- */
.timeline-line{
    position:absolute;
    top:84px;                 /* aligns EXACT center of icons */
    left:7%;
    width:86%;
    height:1px;
    background:rgba(197,160,89,0.3);
    z-index:0;
}

.process-steps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    position:relative;
    z-index:1;
}

/* ---------- GLASS CARDS ---------- */
.process-card{
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(197,160,89,0.2);
    border-radius:18px;

    padding:80px 30px 40px;
    min-height:340px;
    text-align:left;

    transition:all .3s ease;
}

.process-card:hover{
    background:rgba(255,255,255,0.06);
    border-color:#C5A059;
    transform:translateY(-5px);
}

/* ---------- ICONS ---------- */

/* standard icons */
.icon-circle{
    width:70px;
    height:70px;
    border:1px solid #C5A059;
    background:transparent;

    color:#C5A059;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 auto 22px;
    font-size:1.4rem;
}

/* ENGINE CARD (card 2) */
.process-card.highlighted-card .icon-circle{
    background:#C5A059;
    border:none;
    color:#022c22;
}

/* remove old scaling */
.highlighted-card{
    transform:none;
    box-shadow:none;
}

/* ---------- TEXT ---------- */
.step-bg-text{
    position:absolute;
    top:14px;
    left:20px;
    font-size:2.8rem;
    font-weight:800;
    color:#C5A059;
    opacity:.15;
}

.step-content h3{
    color:#C5A059;
    font-family:'Playfair Display', serif;
    margin-bottom:10px;
}

.step-content p{
    font-family:'Inter', sans-serif;
    color:#F2F0E6;
    font-size:0.9rem;
    line-height:1.6;
    opacity:.9;
}
/* =========================================
   FOOTER — DARK LUXURY FOUNDATION
========================================= */

footer{
    position:relative;
    overflow:hidden;

    background:#021f18;
    border-top:1px solid #C5A059;

    padding:70px 20px;
}

/* watermark */
.footer-watermark{
    position:absolute;
    right:40px;
    bottom:20px;
    opacity:0.05;
    pointer-events:none;
}

.footer-watermark img{
    width:300px;
    height:auto;
}

/* layout */
.footer-container{
    max-width:1200px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:40px;

    position:relative;
    z-index:2;
}

/* headings */
.footer-column h4{
    font-family:'Playfair Display', serif;
    color:#C5A059;
    margin-bottom:14px;
    font-size:1.2rem;
}

/* body text */
.footer-column p,
.footer-column a{
    font-family:'Inter', sans-serif;
    color:#F2F0E6;
    font-size:14px;
    line-height:1.7;
    text-decoration:none;
}

.social-links{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.copyright{
    text-align:center;
    margin-top:45px;
    font-family:'Inter', sans-serif;
    font-size:13px;
    color:#F2F0E6;
    opacity:.7;
}

.copyright a{
    color:inherit;
    text-decoration:underline;
    text-underline-offset:2px;
}

.copyright a:hover{
    color:var(--accent-gold);
}
.footer-column p,
.footer-column a{
    font-size:15px;
    line-height:1.8;
}
footer{
    margin-top:0;   /* remove extra space */
}
.timeline-line{
    position:absolute;
    top:108px;              /* PERFECT icon center alignment */
    left:8%;
    width:84%;
    height:1px;
    background:rgba(197,160,89,0.3);
    z-index:0;
}
.process-card{
    background:rgba(255,255,255,0.03);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);

    border:1px solid rgba(197,160,89,0.2);
    border-radius:18px;

    padding:80px 30px 40px;
    min-height:340px;

    position:relative;
    overflow:hidden;
}
.process-card::before{
    content:"";
    position:absolute;
    top:0;
    left:-40%;
    width:80%;
    height:100%;
    background:linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,0.04),
            transparent
    );
    pointer-events:none;
}
.timeline-wrapper{
    position:relative;
    max-width:1200px;
    margin:70px auto 0;
}

/* TRUE CONTINUOUS LINE */
.timeline-line{
    position:absolute;
    top:108px;           /* aligned with icon centers */
    left:0;
    width:100%;
    height:1px;
    background:rgba(197,160,89,0.28);
    z-index:0;
}

.process-steps{
    position:relative;
    z-index:1;
}
.process-card{
    background:rgba(2,44,34,0.88); /* hides line behind cards */
}
/* =====================================================
   INDEX PAGE — FINAL STABILITY FIX (SAFE OVERRIDES ONLY)
   NOTE: affects ONLY elements present in index.html
===================================================== */

/* ---------- HERO (lock final alignment) ---------- */
.hero-text{
    align-items:flex-start !important;
    text-align:left !important;
}

.hero-top-wrap{
    width:100%;
    display:flex;
    justify-content:center;
}

.hero-top-graphic{
    max-width:160px;
    margin-bottom:20px;
}

.hero-heading{
    font-family:'Playfair Display', serif;
    font-weight:700;
    letter-spacing:-0.5px;
}

/* ---------- CURATED PORTFOLIO ---------- */
.case-card{
    display:flex !important;
    flex-direction:column !important;
    background:transparent !important;
    border:1px solid rgba(197,160,89,0.3);
    border-radius:12px;
    overflow:hidden;
}

.case-img{
    order:-1;
    width:100%;
    height:240px;
    object-fit:cover;
    display:block;
}

.case-text-content{
    padding:24px;
}

/* ---------- PROCESS SECTION ---------- */

/* clean connector line */
.timeline-wrapper{
    position:relative;
}

.timeline-line{
    position:absolute;
    top:108px;              /* aligned with icon centers */
    left:8%;
    width:84%;
    height:1px;
    background:rgba(197,160,89,0.28);
    z-index:0;
}

/* cards */
.process-steps{
    position:relative;
    z-index:1;
}

.process-card{
    background:rgba(2,44,34,0.88) !important;
    border:1px solid rgba(197,160,89,0.2);
    border-radius:18px;
    padding:80px 30px 40px;
    min-height:340px;
    text-align:left;
    transition:all .3s ease;
}

/* remove unwanted light band effect */
.process-card::before{
    display:none !important;
}

.process-card:hover{
    background:rgba(255,255,255,0.06);
    border-color:#C5A059;
    transform:translateY(-5px);
}

/* icon consistency */
.icon-circle{
    background:transparent;
    border:1px solid #C5A059;
}

.highlighted-card .icon-circle{
    background:#C5A059;
    border:none;
}

.icon-circle i{
    color:#C5A059;
    font-size:1.2rem;
}

/* ---------- FOOTER POLISH ---------- */

footer{
    margin-top:0 !important;
    border-top:1px solid #C5A059;
}

.footer-watermark{
    opacity:0.03;       /* softer luxury feel */
    right:70px;
    bottom:40px;
}
/* ---------- HAMBURGER ---------- */
.hamburger{
    display:none;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
    z-index:1100;
}

.hamburger span{
    width:24px;
    height:2px;
    background:var(--accent-gold);
    transition:.3s;
}
.hero-heading,
.hero-text h1,
.about-hero h1{
    font-size:clamp(1.8rem, 4vw, 3.2rem);
    line-height:1.2;
}

.hero-description,
.hero-subtext,
.about-hero p{
    font-size:clamp(0.95rem, 2vw, 1.1rem);
}
/* MOBILE TIMELINE FIX */
@media (max-width:768px){

    .timeline-line{
        display:none;
    }

    .process-steps{
        display:flex;
        flex-direction:column;
        gap:20px;
    }

    .process-card{
        min-height:auto;
    }
}
/* =========================================
   MOBILE (< 768px)
========================================= */
@media (max-width:768px){

    /* NAV */
    .navbar{
        padding:12px 20px;
        top:10px;
        border-radius:20px;
    }

    .nav-container{
        flex-direction:row;
    }

    .hamburger{
        display:flex;
    }

    .nav-links{
        position:absolute;
        top:calc(100% + 10px);
        left:0;
        width:100%;
        flex-direction:column;
        background:rgba(36,58,53,0.98);
        padding:14px;
        border-radius:16px;
        display:none;
        gap:10px;
        box-shadow:0 14px 28px rgba(0,0,0,.28);
    }

    .nav-links.active{
        display:flex;
    }

    .nav-links li{
        width:100%;
    }

    .nav-links a{
        display:block;
        width:100%;
        padding:12px 14px;
        margin:0;
        border-radius:12px;
        text-align:center;
        line-height:1.25;
    }

    .nav-right{
        display:none;
    }

    /* FOOTER + CARDS STACK */
    .footer-container,
    .customer-grid,
    .case-grid,
    .process-steps,
    .services-intro,
    .dual-city-section{
        display:flex !important;
        flex-direction:column;
    }

    /* FULL WIDTH */
    .hero-container,
    .about-container,
    .customer-grid,
    .case-grid{
        width:100%;
        padding:0 16px;
    }

    .form-wrapper{
        width:100%;
        flex:1;
    }

    .hero-container{
        flex-direction:column;
        gap:30px;
        padding-top:130px;
    }

    .hero-top-graphic{
        width:120px;
    }

    .hero-text{
        align-items:center;
        text-align:center;
    }
}
/* =========================================
   LARGE DESKTOP (> 1440px)
========================================= */
@media (min-width:1441px){

    html{
        font-size:18px;
    }

    .navbar,
    .hero-container,
    .case-grid,
    .timeline-wrapper,
    .footer-container,
    .about-container{
        max-width:1600px;
        margin:0 auto;
    }
}




/* FORM MUST STAY VISIBLE */
.form-wrapper{
    width:100% !important;
    max-width:520px;
    flex:none !important;

    display:block;
    position:relative;
    z-index:5;
}


.hero-container{
    position:relative;
    z-index:1;
}
.form-wrapper{
    margin-bottom:20px;
}
.trust-stats{
    flex-wrap:wrap;
    gap:18px;
}
.hero-text{
    margin-top:0;
    padding-top:0;
}

.hero-top-graphic{
    width:110px;
    margin-bottom:12px;
}

.hero-heading{
    font-size:clamp(1.8rem, 7vw, 2.4rem);
    line-height:1.2;
    margin-bottom:14px;
}
.hero-text{
    align-items:center;
    text-align:center;
}


/* =====================================================
   STICKY MOBILE ENQUIRE BUTTON
===================================================== */

.sticky-mobile-cta{
    display:none;
}

/* MOBILE ONLY */
@media (max-width:768px){

    .sticky-mobile-cta{
        display:flex;
        position:fixed;
        left:0;
        bottom:0;
        width:100%;
        z-index:3000;

        padding:10px 14px;

        background:rgba(36,58,53,0.92);
        backdrop-filter:blur(10px);
        box-shadow:0 -4px 20px rgba(0,0,0,.35);
    }

    .sticky-mobile-cta button{
        width:100%;

        background:var(--btn-orange);
        color:#fff;

        border:none;
        border-radius:12px;

        padding:12px;
        font-weight:700;
        font-size:1rem;

        cursor:pointer;
    }

    /* prevent content being hidden behind button */
    body{
        padding-bottom:70px;
    }
}
/* ===================================
   HERO LOGO SIZE FIX
=================================== */

/* DESKTOP */
@media (min-width:769px){
    .hero-top-graphic{
        width:220px;      /* adjust 200–260 as you like */
        max-width:none;
        margin-bottom:24px;
    }
}

/* MOBILE (keep compact) */
@media (max-width:768px){
    .hero-top-graphic{
        width:110px;
    }
}
/* MOBILE MENU CTA */
.mobile-enquire{
    display:none;
}

@media (max-width:768px){

    .mobile-enquire{
        display:block;
        margin-top:12px;
    }

    .mobile-enquire .enquire-btn{
        width:100%;
        background:var(--btn-orange);
        color:#fff;
        border-radius:30px;
    }

    .nav-right{
        display:none;
    }
}
/* DESKTOP NAV SAFETY */
@media (min-width:769px){
    .nav-links{
        display:flex !important;
        position:static !important;
        flex-direction:row !important;
        background:none !important;
        padding:0 !important;
    }

    .hamburger{
        display:none !important;
    }
}
/* =====================================================
   FINAL RESPONSIVE HERO FIX (HEIGHT + MOBILE SAFE)
   PLACE THIS LAST
===================================================== */

/* ---------- GLOBAL (fix short-height screens) ---------- */
.hero-section{
    min-height:100vh;
    height:auto;              /* prevents squeezing */
}


/* ---------- SHORT HEIGHT SCREENS ---------- */
@media (max-height:780px){

    .trust-bar{
        position:relative !important;
        margin-top:25px;
    }

    .hero-container{
        padding-bottom:30px;
    }
}

/* ---------- MOBILE ---------- */
@media (max-width:768px){

    .hero-section{
        padding-top:110px;
        padding-bottom:20px;
    }

    .hero-container{
        flex-direction:column !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:24px;
        padding:0 16px;
    }

    .hero-text{
        align-items:center !important;
        text-align:center !important;
    }

    .trust-bar{
        position:relative !important;
        margin-top:25px;
    }

}

.hero-section{
    position:relative;
    min-height:100vh;
    height:auto;

    /* KEY FIX */
    overflow:visible;
}
/* ===================================
   SECTION FLOW FIX
=================================== */

.case-studies-section,
.process-section{
    position:relative;
    z-index:2;
}

/* ===================================
   DESKTOP HERO LOCK (FINAL)
=================================== */
@media (min-width:769px){

    .hero-container{
        flex-direction:row !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:60px;
        padding:140px 20px 170px !important;
    }

    .hero-text{
        align-items:flex-start !important;
        text-align:left !important;
    }

    .form-wrapper{
        flex:0 0 460px !important;
        width:auto !important;
        margin:0 !important;
    }
}
/* =========================================
   HERO & TRUST BAR — EXTRA TIGHT VERSION
========================================= */

/* 1️⃣ Navbar → hero spacing (much tighter) */
.hero-container{
    padding: 90px 20px 90px !important;
}

/* 2️⃣ Slightly shorter hero height */
.hero-section{
    min-height: 640px !important;
}

/* 3️⃣ Compact trust bar */
.trust-bar{
    padding: 6px 0 10px !important;
}

.trust-heading{
    margin-bottom: 6px !important;
    font-size: 12px;
}

/* tighten stats row */
.trust-stats{
    gap: 20px !important;
}

/* 4️⃣ Hero → next section (remove dead space) */
.case-studies-section{
    padding-top: 40px !important;
}
.hero-container{
    align-items: flex-start !important;
}
/* =========================================
   HERO → TRUST BAR GAP FIX
========================================= */

/* reduce empty space before trust bar */
.hero-container{
    padding-bottom: 35px !important;   /* was ~90–170 */
}

/* optional: slightly tighter hero composition */
.form-wrapper{
    margin-bottom: 0 !important;
}
.trust-bar{
    padding-top: 8px !important;
}
/* =========================================
   HERO → TRUST BAR REAL FIX
========================================= */

/* Stop vertical centering */
.hero-container{
    align-items: flex-start !important;
    padding-top: 90px !important;
    padding-bottom: 30px !important;
}

/* Pull content upward slightly */
.hero-text,
.form-wrapper{
    margin-top: 10px;
}

/* DESKTOP HERO FINAL OVERRIDE — SAFE */
@media (min-width:769px){

    .hero-container{
        padding:90px 20px 30px !important;
        align-items:flex-start !important;
    }

    .trust-bar{
        position:absolute !important;
        bottom:0;
    }
}

/* FINAL HERO/TRUST FIX */

.hero-section{
    position:relative;
}

.trust-bar{
    position:absolute !important;
    bottom:0 !important;
    left:0;
    width:100%;
    margin:0 !important;
}
/* =========================================
   EXTRA TIGHT HERO → TRUST SPACING
========================================= */

@media (min-width:769px){

    .hero-container{
        padding-top: 90px !important;
        padding-bottom: 8px !important;   /* ← VERY SMALL GAP */
        align-items:flex-start !important;
    }

    .trust-bar{
        padding-top: 4px !important;
        padding-bottom: 6px !important;
    }
}
/* ===== FINAL HERO HEIGHT FIX ===== */

@media (min-width:769px){

    .hero-section{
        min-height: auto !important;
        height: auto !important;
    }

    .hero-container{
        min-height: unset !important;
        height: auto !important;
        padding: 90px 20px 0px !important;
        align-items: flex-start !important;
    }

    .trust-bar{
        position:absolute !important;
        bottom:0 !important;
    }
}
/* =====================================
   FINAL HERO / TRUST BAR NO-OVERLAP FIX
===================================== */

@media (min-width:769px){

    /* hero must reserve space for trust bar */
    .hero-container{
        padding:90px 20px 110px !important;
        /* 110px = height of trust bar */
    }

    /* trust bar stays attached */
    .trust-bar{
        position:absolute !important;
        bottom:0;
        left:0;
        width:100%;
        padding:6px 0 8px !important;
    }
}
/* =====================================
   MOBILE HERO / TRUST BAR FIX
===================================== */

@media (max-width:768px){

    .hero-section{
        height:auto !important;
        min-height:auto !important;
    }

    .hero-container{
        padding-bottom:20px !important;
    }

    /* 🔥 key fix */
    .trust-bar{
        position:relative !important;
        bottom:auto !important;
        margin-top:20px !important;
    }
}
/* =====================================
   MOBILE FORM CENTER FIX
===================================== */

@media (max-width:768px){

    .hero-container{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;   /* ⭐ key fix */
    }

    .form-wrapper{
        width:100% !important;
        max-width:520px !important;
        margin:0 auto !important;        /* ⭐ force centering */
    }

}
/* =====================================
   FOOTER WATERMARK VISIBILITY FIX
===================================== */

.footer-watermark{
    opacity:0.10 !important;   /* was 0.03 */
}

/* slightly stronger on mobile */
@media (max-width:768px){
    .footer-watermark{
        opacity:0.14 !important;
        width:220px;
        right:20px;
        bottom:20px;
    }
}
/* =====================================
   MOBILE ALIGNMENT FIX (MENU + CTA)
===================================== */

@media (max-width:768px){

    /* make mobile menu match navbar width */
    .nav-links{
        width:95% !important;
        left:50% !important;
        transform:translateX(-50%) !important;
        border-radius:20px;
        padding:14px !important;
        gap:10px !important;
    }

    /* make sticky button match navbar width */
    .sticky-mobile-cta{
        width:95% !important;
        left:50% !important;
        transform:translateX(-50%);
        padding:10px 0 !important;
        border-radius:16px;
    }
}

/* =====================================
   REPORT LEAD MAGNET
===================================== */

.report-cta-banner{
    background:var(--card-green);
    border-top:1px solid rgba(197,160,89,0.3);
    border-bottom:1px solid rgba(197,160,89,0.3);
    padding:64px 20px;
}

.report-cta-inner{
    max-width:800px;
    margin:0 auto;
    text-align:center;
}

.report-cta-inner h2{
    font-family:'Playfair Display', serif;
    color:var(--accent-gold);
    font-size:2rem;
    margin-bottom:14px;
}

.report-cta-inner p{
    color:#F2F0E6;
    line-height:1.8;
    margin-bottom:24px;
}

.intro-right{
    text-align:center;
}

.services-download-btn{
    width:100%;
    margin-top:14px;
}

.report-modal .case-modal-content{
    width:min(450px,92%);
    background:rgba(36,58,53,0.96);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(197,160,89,0.25);
}

.report-modal-title{
    font-family:'Playfair Display', serif;
    color:var(--accent-gold);
    margin-bottom:8px;
}

.report-modal-subtext{
    color:#F2F0E6;
    margin-bottom:18px;
}

.report-modal-form .enquire-btn{
    width:100%;
}

@media (max-width:768px){
    .report-cta-banner{
        padding:44px 16px;
    }

    .report-cta-inner h2{
        font-size:1.65rem;
    }
}

/* =====================================
   SITEMAP PAGE
===================================== */

.sitemap-page{
    min-height:100vh;
    background:var(--bg-dark);
    padding:130px 20px 70px;
}

.sitemap-wrap{
    max-width:800px;
    margin:0 auto;
    text-align:center;
}

.sitemap-wrap h1{
    font-family:'Playfair Display', serif;
    color:var(--accent-gold);
    font-size:2.4rem;
    margin-bottom:10px;
}

.sitemap-wrap p{
    color:#F2F0E6;
    margin-bottom:28px;
}

.sitemap-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:0;
}

.sitemap-list a{
    display:block;
    padding:12px 16px;
    border:1px solid rgba(197,160,89,0.3);
    border-radius:10px;
    color:var(--accent-gold);
    text-decoration:none;
    background:rgba(255,255,255,0.03);
}

.sitemap-list a:hover{
    background:rgba(255,255,255,0.08);
}

/* =====================================
   HERO PROCESS LIST (INDEX)
===================================== */

.hero-process-list{
    width:100%;
    max-width:540px;
    display:flex;
    flex-direction:row;
    align-items:stretch;
    gap:20px;
}

.hero-process-step{
    flex:1;
    min-width:0;
    padding:14px 12px;
    border-top:2px solid var(--accent-gold);
    border-radius:10px;
    background:rgba(255,255,255,0.05);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-right:1px solid rgba(197,160,89,0.2);
    border-bottom:1px solid rgba(197,160,89,0.2);
    border-left:1px solid rgba(197,160,89,0.2);
    text-align:center;
}

.hero-subheading{
    max-width:540px;
    font-size:1.05rem;
    line-height:1.65;
    color:#F2F0E6;
    margin:0 0 16px;
}

.hero-process-number{
    font-family:'Playfair Display', serif;
    font-size:1.3rem;
    color:var(--accent-gold);
    line-height:1;
    margin-bottom:7px;
}

.hero-process-title{
    font-size:.85rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    line-height:1.35;
    color:var(--accent-gold);
    margin:0;
}

@media (max-width:768px){
    .hero-process-list{
        max-width:100%;
        flex-direction:column;
        gap:12px;
    }

    .hero-process-step{
        padding:14px;
        text-align:center;
    }

    .hero-subheading{
        max-width:100%;
        font-size:1rem;
        margin-bottom:12px;
    }
}

/* =====================================
   HERO LEFT ALIGN + CONNECTED PROCESS (DESKTOP)
===================================== */
@media (min-width:769px){
    .hero-text{
        max-width:620px;
        align-items:flex-start !important;
        text-align:left !important;
    }

    .hero-top-wrap{
        width:100%;
        justify-content:flex-start !important;
    }

    .hero-top-graphic{
        width:140px;
        margin-bottom:16px;
    }

    .hero-heading{
        max-width:560px;
        margin-bottom:12px;
        line-height:1.14;
    }

    .hero-subheading{
        max-width:560px;
        margin-bottom:20px;
    }

    .hero-process-list{
        max-width:560px;
        justify-content:flex-start;
        gap:24px;
    }

    .hero-process-step{
        position:relative;
        border-radius:18px;
        padding:16px 14px;
    }

    .hero-process-step:not(:last-child)::after{
        content:"";
        position:absolute;
        top:50%;
        right:-23px;
        width:22px;
        border-top:2px dashed rgba(212,193,133,0.8);
        transform:translateY(-50%);
        pointer-events:none;
    }
}

/* =====================================
   RESEARCH HUB + INSIGHTS CTAS
===================================== */

.insights-nav-btn{
    display:inline-block;
    text-decoration:none;
}

.insight-inline-link{
    display:inline-block;
    margin-top:8px;
    font-size:.78rem;
    letter-spacing:.4px;
    text-transform:uppercase;
    color:#7a5f2f;
    text-decoration:underline;
    text-underline-offset:2px;
}

.insight-inline-link:hover{
    color:#5f481f;
}

.research-hero{
    padding:170px 20px 46px;
}

.research-wrap{
    max-width:1200px;
    margin:0 auto;
}

.research-hero h1{
    font-family:'Playfair Display', serif;
    color:var(--accent-gold);
    font-size:clamp(2rem,4.2vw,3.2rem);
    margin-bottom:14px;
    text-align:center;
}

.research-hero p{
    max-width:860px;
    margin:0 auto;
    text-align:center;
    color:#F2F0E6;
    line-height:1.75;
}

.research-grid-section{
    padding:20px 20px 90px;
}

.research-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
}

.research-card{
    background:rgba(2,44,34,0.88);
    border:1px solid rgba(197,160,89,0.25);
    border-radius:16px;
    padding:22px;
    display:flex;
    flex-direction:column;
}

.research-tag{
    display:inline-block;
    width:max-content;
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--accent-gold);
    border:1px solid rgba(197,160,89,0.35);
    border-radius:999px;
    padding:5px 10px;
    margin-bottom:12px;
}

.research-card h3{
    font-family:'Playfair Display', serif;
    color:var(--accent-gold);
    margin-bottom:10px;
    font-size:1.3rem;
}

.research-card p{
    color:#F2F0E6;
    line-height:1.65;
    margin-bottom:18px;
}

.research-card .enquire-btn{
    width:fit-content;
    margin-top:auto;
}

.insights-modal .case-modal-content{
    width:min(520px,92%);
    border:1px solid rgba(197,160,89,0.3);
    background:rgba(36,58,53,0.96);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.insights-success{
    text-align:center;
}

.insights-success h4{
    font-family:'Playfair Display', serif;
    color:var(--accent-gold);
    margin-bottom:8px;
}

.insights-success p{
    color:#F2F0E6;
    margin-bottom:14px;
}

.insights-success .enquire-btn{
    display:inline-block;
    text-decoration:none;
}

@media (max-width:900px){
    .research-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width:768px){
    .research-hero{
        padding-top:120px;
    }

    .research-card{
        padding:18px;
    }

    .research-card .enquire-btn{
        width:100%;
    }
}

/* =====================================
   CONTACT PAGE FORM
===================================== */

.contact-page-wrap{
    max-width:1200px;
}

.contact-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:26px;
    align-items:start;
}

.contact-form-card,
.contact-direct-card{
    background:rgba(2,44,34,0.88);
    border:1px solid rgba(197,160,89,0.25);
    border-radius:18px;
    padding:26px 22px;
}

.contact-submit-btn{
    display:inline-block;
    width:100%;
    border:none;
    border-radius:50px;
    background:var(--btn-orange);
    color:#fff;
    font-weight:700;
    cursor:pointer;
    padding:12px 28px;
    transition:.3s;
    margin-top:6px;
}

.contact-submit-btn:hover{
    transform:scale(1.02);
}

.contact-form-status{
    min-height:22px;
    margin-top:10px;
    font-size:.92rem;
    color:#F2F0E6;
}

.contact-form-status.error{
    color:#ffb4b4;
}

.contact-form-status.success{
    color:#d4c185;
}

.contact-direct-card h2{
    font-family:'Playfair Display', serif;
    color:var(--accent-gold);
    margin-bottom:12px;
}

.contact-direct-card p{
    color:#F2F0E6;
    line-height:1.7;
    margin-bottom:8px;
}

@media (max-width:900px){
    .contact-grid{
        grid-template-columns:1fr;
    }
}

/* Reduce navbar-to-hero gap by ~1in (96px) */
@media (min-width:769px){
    .hero-container{
        padding:0 20px 110px !important;
    }
}

/* Homepage hero adjustments */
.hero-heading{
    margin-top:-48px !important;
}

@media (min-width:769px){
    .hero-heading{
        font-size:calc(clamp(1.8rem, 4vw, 3.2rem) - 5px) !important;
    }
}

/* =====================================
   Premium UI Refinements
===================================== */

/* 1) Headline: title case instead of all caps */
.hero-heading{
    text-transform:capitalize !important;
}

/* 2) Navbar: remove inactive outlines, keep active/hover affordance */
.nav-links a{
    border:none !important;
    background:transparent !important;
}

.nav-links a:hover,
.nav-links a.active{
    border:1px solid var(--accent-gold) !important;
    background:var(--accent-gold) !important;
    color:var(--card-green) !important;
}

/* 3) Mute Enquire button in navbar to brand gold */
.nav-right .enquire-btn{
    background:var(--accent-gold) !important;
    color:var(--card-green) !important;
    border:1px solid rgba(197,160,89,0.55) !important;
}

.nav-right .enquire-btn:hover{
    filter:brightness(0.95);
}

/* 4) Process steps: remove heavy boxes; keep clean number-led layout */
.hero-process-list{
    border-top:1px solid rgba(212,193,133,0.35) !important;
    padding-top:12px !important;
}

.hero-process-step{
    background:transparent !important;
    border:none !important;
    border-radius:0 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    padding:8px 6px !important;
}

.hero-process-number{
    font-size:1.8rem !important;
    margin-bottom:8px !important;
}

/* remove connector dashes from boxed variant */
.hero-process-step:not(:last-child)::after{
    display:none !important;
}

/* 5) Form labels: smaller uppercase premium style */
.form-label,
.form-step label{
    font-size:0.75rem !important;
    text-transform:uppercase !important;
    letter-spacing:1px !important;
    opacity:0.8 !important;
}

/* =====================================
   Services Page Fixes
===================================== */

.report-image-placeholder{
    background:rgba(255,255,255,0.02);
    overflow:hidden;
}

.report-img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover !important;
    opacity:1 !important;
}

.check-list li{
    display:flex;
    align-items:flex-start;
    gap:8px;
}

.check-icon{
    color:var(--accent-gold) !important;
    font-weight:700;
    font-size:1rem;
    line-height:1.2;
    margin-right:0 !important;
}

.service-cards-container{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:24px;
}

.svc-card{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.svc-img-box{
    width:100%;
    aspect-ratio:1 / 1;
    border-radius:14px;
    overflow:hidden;
}

.svc-img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.svc-label{
    width:100%;
    text-align:center;
    margin-top:10px;
}

@media (max-width:768px){
    .service-cards-container{
        grid-template-columns:1fr;
    }
}