/* ==========================================================================
   HERO BANNER — Krisala Hiranandani (exact match to reference design v2)
   Fonts   : Playfair Display (headings) + Montserrat (body)
   ========================================================================== */

:root{
    --gold-light:#f0dfa4;
    --gold-dark:#b6903f;
    --gold-mid:#d3ab5e;
    --hero-dark:#24262d;
    --card-dark:#1c1a17;
}

.hero-banner{position:relative;width:100%;overflow:hidden;background:#111}

/* background image */
.hero-banner-bg{position:relative;width:100%;height:100vh;min-height:760px;max-height:1024px;overflow:hidden}
.hero-banner-bg::after{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(8,14,22,.62) 0%,rgba(8,14,22,.08) 30%,rgba(8,14,22,.05) 55%,rgba(4,6,8,.35) 100%)}
.hero-bg-img{width:100%;height:100%;object-fit:cover;display:block}

/* overlay wrapper */
.hero-banner-content{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3}
.hero-grid{height:100%}
.hero-grid .row{height:100%}

/* ---------------- LEFT COLUMN ---------------- */
.hero-left-col{display:block;height:auto;padding-top:112px;padding-bottom:28px}

.hero-text{color:#fff}
.hero-tagline{display:block;text-transform:uppercase;letter-spacing:3.5px;font-size:13px;font-weight:600;color:var(--gold-light);margin-bottom:12px;font-family:Montserrat,Helvetica,sans-serif}
.hero-heading{font-family:"Playfair Display",Georgia,serif;font-size:35px;line-height:1.14;font-weight:700;margin:0 0 16px;letter-spacing:0}
.hero-heading .l1,.hero-heading .l3{display:block;color:#fff}
.hero-heading .l2{display:block;color:var(--gold-light)}
.hero-desc{font-family:Montserrat,Helvetica,sans-serif;font-size:15.5px;line-height:1.6;color:#f2f2f0;max-width:480px;margin-bottom:22px;font-weight:400}

.hero-feature-row{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:26px}
.hero-feature-item{display:flex;flex-direction:column;align-items:center;text-align:center;width:76px}
.hero-feature-icon{width:54px;height:54px;border-radius:50%;border:1.5px solid var(--gold-light);background:rgba(20,20,18,.35);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--gold-light);margin-bottom:8px}
.hero-feature-label{font-family:Montserrat,Helvetica,sans-serif;font-size:12px;line-height:1.3;color:#fff;font-weight:500}

/* price card */
.hero-price-card{position:relative;background:rgba(8,12,10,.68);border:1px solid rgba(255,255,255,.12);border-radius:10px;
    padding:10px 22px;margin-bottom:16px;max-width:480px;width:fit-content;backdrop-filter:blur(2px)}
.hero-price-label{display:inline-block;font-family:Montserrat,Helvetica,sans-serif;font-size:9.5px;letter-spacing:2px;color:var(--gold-light);font-weight:700;border:1.5px solid var(--gold-light);border-radius:5px;padding:5px 16px;margin-bottom:10px}
.hero-price-strip-inner{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hero-price-block{display:flex;align-items:baseline;gap:8px}
.hero-price-value{font-family:Montserrat,Helvetica,sans-serif;font-size:28px;font-weight:700;color:#fff;line-height:1}
.hero-price-value sup{font-size:14px;top:-10px}
.hero-price-onwards{font-family:Montserrat,Helvetica,sans-serif;font-size:13px;font-weight:500;color:#ddd}
.hero-price-divider{width:1px;height:34px;background:rgba(255,255,255,.35)}
.hero-typology-block{font-family:Montserrat,Helvetica,sans-serif;color:#fff;font-size:15px;font-weight:600;line-height:1.35}

/* stats box */
.hero-stats-box{display:flex;align-items:center;background:rgba(6,10,10,.55);border:1px solid rgba(255,255,255,.18);
    border-radius:10px;padding:12px 20px;margin-bottom:16px;max-width:630px;width:fit-content}
.hero-stat-item{display:flex;align-items:center;gap:12px;color:#fff;font-family:Montserrat,Helvetica,sans-serif;font-size:8.5px;font-weight:500;line-height:1.3;padding:0 20px;border-right:1px solid rgba(255,255,255,.28);white-space:nowrap}
.hero-stat-item:last-child{border-right:none}
.hero-stat-item:first-child{padding-left:0}
.hero-stat-icon{width:34px;height:34px;flex-shrink:0;border-radius:50%;border:1.3px solid rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff}

/* limited inventory bar */
.hero-inventory-bar{display:flex;align-items:center;gap:16px;background:rgba(6,10,8,.72);border:1px solid rgba(240,223,164,.3);
    border-radius:10px;padding:12px 18px;max-width:660px;width:fit-content;margin-top:16px}
.hero-inventory-icon{width:42px;height:42px;flex-shrink:0;border-radius:8px;background:rgba(240,223,164,.12);border:1px solid var(--gold-light);
    display:flex;align-items:center;justify-content:center;color:var(--gold-light);font-size:18px}
.hero-inventory-text{display:flex;flex-direction:column;flex:1;font-family:Montserrat,Helvetica,sans-serif}
.hero-inventory-title{color:var(--gold-light);font-size:15px;font-weight:700;margin-bottom:2px}
.hero-inventory-sub{color:#f0f0ee;font-size:12px;font-weight:400}
.hero-brochure-btn{white-space:nowrap;background:transparent;border:1.3px solid var(--gold-light);color:var(--gold-light);
    border-radius:8px;padding:10px 16px;font-family:Montserrat,Helvetica,sans-serif;font-size:13px;font-weight:600}
.hero-brochure-btn:hover{background:rgba(240,223,164,.12)}

/* ---------------- RIGHT COLUMN ---------------- */
.hero-right-col{height:100%;display:flex;align-items:center;justify-content:center}
.hero-right-inner{width:100%;max-width:400px;padding-top:60px}

.hero-form-card{width:100%;background:rgba(28,26,23,.82);border:1px solid rgba(255,255,255,.1);
    border-radius:14px;padding:26px 24px 18px;box-shadow:0 25px 55px rgba(0,0,0,.4);backdrop-filter:blur(6px)}
.hero-form-title{font-family:"Playfair Display",Georgia,serif;font-size:25px;font-weight:700;color:var(--gold-light);margin-bottom:6px}
.hero-form-sub{font-family:Montserrat,Helvetica,sans-serif;font-size:13px;color:#dcdcda;margin-bottom:18px}
.hero-form-card .input-group-custom{position:relative}
.hero-form-card .input-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#7a7a7a;font-size:13px;z-index:2}
.hero-form-card .form-control{padding-left:42px;border-radius:8px;background:#f1efec;border:1px solid #f1efec;
    height:48px;font-size:14px;width:100%;font-family:Montserrat,Helvetica,sans-serif;color:#333}
.hero-form-card .form-control::placeholder{color:#8a8a8a}
.hero-form-card .form-control:focus{border-color:#ccab58;box-shadow:none;background:#fff}

/* phone field with intl-tel-input flag dropdown */
.hero-phone-group .iti{width:100%}
.hero-phone-group .form-control{padding-left:86px;height:48px;border-radius:8px}
.hero-phone-group .iti__selected-flag{background:transparent;padding:0 8px 0 14px}
.hero-phone-group .iti__selected-dial-code{color:#333;font-family:Montserrat,Helvetica,sans-serif;font-size:14px;font-weight:500}
.hero-phone-group .iti__flag-container{border-right:1px solid #ddd8cf}

.hero-submit-btn{width:100%;justify-content:center;background:linear-gradient(90deg,var(--gold-dark),var(--gold-mid) 60%,#e6c67c);
    border:none;border-radius:8px;font-size:15.5px;font-weight:700;padding:14px 20px;color:#fff;font-family:Montserrat,Helvetica,sans-serif;letter-spacing:.2px;margin-top:4px}
.hero-submit-btn:hover{opacity:.92}
.hero-consent{padding-top:14px;justify-content:flex-start;align-items:flex-start;gap:10px}
.hero-consent-icon{color:#9a9a9a;font-size:14px;margin-top:2px;flex-shrink:0}
.hero-consent .inp-txt{font-family:Montserrat,Helvetica,sans-serif;font-size:12px;line-height:1.5;padding-left:0;color:#c9c9c6}

/* secondary buttons under card */
.hero-secondary-row{display:flex;gap:10px;margin-top:14px}
.hero-secondary-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(15,15,15,.78);
    border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:8px;padding:12px 10px;font-family:Montserrat,Helvetica,sans-serif;
    font-size:13px;font-weight:600;text-decoration:none}
.hero-secondary-btn i{font-size:13px}
.hero-secondary-btn:hover{background:rgba(30,30,30,.9);color:#fff}

.hero-callback-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;
    background:#a34e08;border:none;color:#fff;border-radius:8px;padding:14px 20px;font-family:Montserrat,Helvetica,sans-serif;
    font-size:15px;font-weight:700}
.hero-callback-btn:hover{background:#8f4306}

/* ==========================================================================
   TABLET
   ========================================================================== */
@media (max-width:1199px){
    .hero-heading{font-size:38px}
    .hero-right-inner{max-width:340px}
}

@media (max-width:991px){
    .hero-banner-bg{min-height:900px}
    .hero-left-col{padding-top:100px}
    .hero-heading{font-size:30px}
    .hero-desc{font-size:14px;max-width:420px}
    .hero-feature-icon{width:46px;height:46px;font-size:15px}
    .hero-feature-item{width:68px}
    .hero-price-value{font-size:22px}
    .hero-right-inner{max-width:320px;padding-top:20px}
    .hero-form-title{font-size:21px}
    .hero-stats-box{flex-wrap:wrap}
    .hero-stat-item{padding:6px 14px;font-size:11.5px}
}

/* ==========================================================================
   MOBILE — stacked layout
   ========================================================================== */
@media (max-width:767px){
    .hero-banner{position:relative}
    .hero-banner-bg{height:auto;min-height:0;max-height:none}
    .hero-banner-bg::after{background:linear-gradient(180deg,rgba(8,12,18,.62) 0%,rgba(8,12,18,.08) 40%,rgba(8,12,18,.08) 60%,rgba(6,8,10,.55) 100%)}

    .hero-banner-content{position:static;height:auto}
    .hero-grid{height:auto}
    .hero-grid .row{height:auto}

    .hero-banner-bg{height:60vh;min-height:440px;max-height:600px}

    .hero-left-col{position:absolute;top:100px;left:0;width:100%;height:auto;padding:0 18px;z-index:4}
    .hero-heading{font-size:26px;margin-bottom:10px}
    .hero-desc{font-size:13px;margin-bottom:14px}
    .hero-feature-row{gap:10px;margin-bottom:14px}
    .hero-feature-item{width:58px}
    .hero-feature-icon{width:40px;height:40px;font-size:13px;margin-bottom:5px}
    .hero-feature-label{font-size:9px}
    .hero-price-card{padding:12px 14px 14px;max-width:100%}
    .hero-price-value{font-size:19px}
    .hero-stats-box{display:auto}
    .hero-inventory-bar{display:none}

    .hero-right-col{height:auto;display:block;position:relative;margin-top:0;padding:24px 15px 0}
    .hero-right-inner{max-width:100%;padding-top:0;margin:0 auto}
    .hero-form-card{border-radius:16px}
    .hero-secondary-row{flex-direction:column}
}

@media (max-width: 767px) {

    /* Desktop stats hide */
    .hero-stats-desktop {
        display: none !important;
    }

    /* Mobile stats show in ONE ROW */
    .hero-stats-mobile {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch;
        width: 100%;
        margin: 15px 0;
        padding: 0 !important;
    }

    /* Each stat = equal width */
    .hero-stats-mobile .hero-stat-item {
        width: 33.333% !important;
        flex: 0 0 33.333%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        gap: 8px;
        padding: 15px 6px !important;
        border-bottom: none !important;
        border-right: 1px solid rgba(255, 255, 255, 0.20) !important;
        white-space: normal;
        font-size: 11px;
        line-height: 1.35;
    }

    /* Last item right border remove */
    .hero-stats-mobile .hero-stat-item:last-child {
        border-right: none !important;
    }

    .hero-stats-mobile .hero-stat-icon {
        flex-shrink: 0;
    }

    /* Last 3 buttons hide on mobile */
    .hero-secondary-row,
    .hero-callback-btn {
        display: none !important;
    }

}

/* ========================================
   HERO STATS DESKTOP / MOBILE CONTROL
======================================== */

/* Desktop */
.hero-stats-desktop {
    display: flex !important;
}

.hero-stats-mobile {
    display: none !important;
}


/* Mobile only */
@media (max-width: 767px) {

    /* Original stats hide on mobile */
    .hero-stats-desktop {
        display: none !important;
    }

    /* Stats after form show only on mobile */
    .hero-stats-mobile {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch;
        width: 100%;
        margin: 15px 0;
        padding: 0 !important;
    }

    .hero-stats-mobile .hero-stat-item {
        width: 33.333% !important;
        flex: 0 0 33.333%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        gap: 8px;
        padding: 15px 6px !important;
        border-bottom: none !important;
        border-right: 1px solid rgba(255, 255, 255, 0.20) !important;
        white-space: normal;
        font-size: 11px;
        line-height: 1.35;
    }

    .hero-stats-mobile .hero-stat-item:last-child {
        border-right: none !important;
    }

    /* Mobile par last 3 buttons hide */
    .hero-secondary-row,
    .hero-callback-btn {
        display: none !important;
    }
}

/* mobile: nothing extra needed, right col flows naturally after the image */