/* ════════════════════════════════════════════════════
   RED ROSE PROPERTIES — styles.css v4
   World-Best Trending Real Estate | Mobile-First
   ════════════════════════════════════════════════════ */

/* ── TOKENS ────────────────────────────────────────── */
:root {
    /* Primary Colors */
    --gold:       #D4AF37; /* Metallic Gold */
    --gold-rgb:   212, 175, 55;
    --gold-d:     #B8860B;
    --gold-l:     #FFF8E1;
    --gold-glow:  rgba(212, 175, 55, 0.25);
    
    /* Neutral Palette - Light Mode (Anti-Gravity Softness) */
    --bg:         #FFFFFF;
    --bg-alt:     #FAFAFA;
    --bg-card:    rgba(255, 255, 255, 0.8);
    --surface:    rgba(255, 255, 255, 0.7);
    --text:       #0F1115;
    --text-2:     #4B5563;
    --text-3:     #9CA3AF;
    --border:     rgba(0, 0, 0, 0.06);
    
    /* Effects */
    --nav-h:      80px;
    --r:          16px;
    --rx:         32px;
    --ease:       cubic-bezier(0.23, 1, 0.32, 1); /* Anti-gravity ease */
    --t:          0.4s;
    --sh:         0 8px 30px rgba(0,0,0,0.04);
    --sh-lg:      0 20px 50px rgba(0,0,0,0.08);
    --blur:       blur(12px);
}

.dark {
    /* Neutral Palette - Dark Mode (Premium Depth) */
    --bg:         #08090A;
    --bg-alt:     #0D0E10;
    --bg-card:    rgba(22, 24, 28, 0.8);
    --surface:    rgba(8, 9, 10, 0.7);
    --text:       #F3F4F6;
    --text-2:     #9CA3AF;
    --text-3:     #4B5563;
    --border:     rgba(255, 255, 255, 0.08);
    --sh:         0 8px 30px rgba(0,0,0,0.4);
    --sh-lg:      0 20px 50px rgba(0,0,0,0.6);
}

/* ── RESET ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden;width:100%;font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;scroll-behavior:smooth;transition:background .5s,color .5s}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font:inherit}
ul{list-style:none}
::selection{background:var(--gold);color:#fff}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px}

/* ── CURSOR ────────────────────────────────────────── */
/* ── CURSOR ────────────────────────────────────────── */
#cur-dot,#cur-ring{position:fixed;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:transform .1s, width .3s, height .3s, opacity .3s, background .3s, border .3s;}
#cur-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow: 0 0 15px var(--gold-glow);}
#cur-ring{width:40px;height:40px;border-radius:50%;border:1px solid var(--gold);opacity:.3;transition: transform .15s var(--ease);}
@media(hover:none){#cur-dot,#cur-ring{display:none}}
@media(hover:none){#cur-dot,#cur-ring{display:none}}

/* ── LAYOUT ────────────────────────────────────────── */
.ctr{max-width:1220px;margin:0 auto;padding:0 1.5rem}
.section{padding:6rem 0}
.bg-alt{background:var(--bg-alt)}

/* ── TYPE ──────────────────────────────────────────── */
.eyebrow{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
.h2{font-family:'Cormorant Garamond',serif;font-size:clamp(1.9rem,3.5vw,3.2rem);font-weight:600;line-height:1.12;color:var(--text);margin-bottom:1.2rem}
.h2 em{font-style:italic;color:var(--gold)}
.body-text{font-size:1rem;color:var(--text-2);line-height:1.82;margin-bottom:1rem}
.section-top{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}

/* ── BUTTONS ───────────────────────────────────────── */
.btn-gold{display:inline-flex;align-items:center;gap:.5rem;padding:.85em 2em;border-radius:100px;background:var(--gold);color:#fff;font-weight:600;font-size:.9rem;border:1.5px solid transparent;transition:all var(--t) var(--ease)}
.btn-gold:hover{background:var(--gold-d);transform:translateY(-2px);box-shadow:0 8px 28px var(--gold-glow)}
.btn-gold-outline{display:inline-flex;align-items:center;gap:.5rem;padding:.85em 2em;border-radius:100px;background:transparent;color:var(--gold);border:1.5px solid var(--gold);font-weight:600;font-size:.9rem;transition:all var(--t) var(--ease);cursor:pointer;text-decoration:none}
.btn-gold-outline:hover{background:var(--gold);color:#fff}
.w-full{width:100%;justify-content:center}

/* ── NAVBAR ────────────────────────────────────────── */
/* ── NAVBAR ────────────────────────────────────────── */
#navbar{position:fixed;top:0;left:0;right:0;z-index:900;background:var(--bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-bottom:1px solid var(--border);transition: all var(--t) var(--ease);padding: 0.5rem 0;}
#navbar.scrolled{background:var(--bg);box-shadow:var(--sh);padding: 0.2rem 0; border-bottom: 1px solid var(--border);}
.nav-inner{max-width:1300px;margin:0 auto;padding:0 2rem;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:2rem}
.logo{display:flex;align-items:center;flex-shrink:0;height:60px;transition: transform var(--t) var(--ease);}
.logo:hover{transform: scale(1.05);}
.logo img{height:42px;width:auto;object-fit:contain;transition: height var(--t) var(--ease); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));}
#navbar.scrolled .logo img{height:38px;}
.logo-light { display: block !important; }
.logo-dark { display: none !important; }
.dark .logo-light { display: none !important; }
.dark .logo-dark { display: block !important; }
#nav-menu{display:flex;align-items:center;gap:0.5rem}
.nl{padding:.6em 1.25em;font-size:0.9rem;font-weight:600;color:var(--text);border-radius:100px;transition:all var(--t);position:relative;letter-spacing: 0.02em;}
.nl:hover{color:var(--gold);}
.nl::after{content:'';position:absolute;bottom:0.4rem;left:1.25rem;right:1.25rem;height:2px;background:var(--gold);transform:scaleX(0);transition: transform 0.3s var(--ease);transform-origin: right;}
.nl:hover::after{transform:scaleX(1);transform-origin: left;}
.nl.active{color:var(--gold);}
.nl.active::after{transform:scaleX(1);}
.nl-cta{background:var(--gold);color:#fff!important;padding:.7em 1.8em;margin-left:1rem;box-shadow: 0 4px 15px var(--gold-glow);}
.nl-cta::after{display:none;}
.nl-cta:hover{background:var(--gold-d);transform: translateY(-2px);box-shadow: 0 8px 25px var(--gold-glow);}
/* Logo Logic moved up for specificity */

.nav-end{display:flex;align-items:center;gap:.6rem}
#theme-btn{width:40px;height:40px;border-radius:50%;background:var(--gold-l);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--gold);position:relative;overflow:hidden;transition:background var(--t),color var(--t)}
#theme-btn:hover{background:var(--gold);color:#fff}
.ic-sun,.ic-moon{position:absolute;width:17px;height:17px;transition:opacity .3s,transform .3s}
.ic-sun{opacity:1;transform:rotate(0) scale(1)}
.ic-moon{opacity:0;transform:rotate(-90deg) scale(.5)}
.dark .ic-sun{opacity:0;transform:rotate(90deg) scale(.5)}
.dark .ic-moon{opacity:1;transform:rotate(0) scale(1)}
#ham-btn{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;border-radius:10px;background:var(--gold-l);padding:11px}
#ham-btn span{display:block;height:2px;background:var(--text);border-radius:2px;transition:all .3s}
#ham-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#ham-btn.open span:nth-child(2){opacity:0}
#ham-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── HERO SLIDER ───────────────────────────────────── */
.hero-slider-wrap{position:relative;min-height:100vh;overflow:hidden;padding-top:0;}
.hs-track{position:absolute;inset:0}
.hs-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}
.hs-slide.active{opacity:1;pointer-events:all;z-index:2}
.hs-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 10s linear;transform:scale(1.15);filter:brightness(.5)}
.hs-slide.active .hs-bg{transform:scale(1.02)}
.hs-overlay{position:absolute;inset:0;background: radial-gradient(circle at 30% 50%, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 50%);}

.hs-content{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;padding:0 8vw;max-width:1440px;margin:0 auto;z-index:5;height: 100%;}
.hs-left{display:flex;flex-direction:column;justify-content: center;opacity:0;transform:translateY(40px);transition: all 1s var(--ease) 0.4s;}
.hs-slide.active .hs-left{opacity:1;transform:translateY(0);}

.hs-badge{display:inline-flex;align-items:center;gap:0.6rem;font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);background:rgba(212, 175, 55, 0.1);border:1px solid rgba(212, 175, 55, 0.3);padding:.5rem 1.4rem;border-radius:100px;margin-bottom:1.5rem;align-self:flex-start;backdrop-filter: var(--blur);}
.hs-name{font-family:'Cormorant Garamond',serif;font-size:clamp(3rem,8vw,6rem);font-weight:600;color:#fff;line-height:0.95;margin-bottom:1.5rem;letter-spacing: -0.02em;}
.hs-sub{font-size:clamp(1rem,1.8vw,1.2rem);color:rgba(255,255,255,.8);line-height:1.6;margin-bottom:2.5rem;max-width:540px;font-weight: 300;opacity: 0.9;}
.hs-actions{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}

.hs-form{background:rgba(255,255,255,0.04);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid rgba(255,255,255,0.12);border-radius:24px;padding:2.5rem;box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);opacity:0;transform:translateY(40px);transition: all 1s var(--ease) 0.6s;}
.hs-slide.active .hs-form{opacity:1;transform:translateY(0);}
.dark .hs-form{background:rgba(0,0,0,0.25);border-color:rgba(255,255,255,0.08);}
.hs-form h4{font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:600;color:#fff;margin-bottom:.5rem}
.hs-form p{font-size:.9rem;color:rgba(255,255,255,.6);margin-bottom:1.5rem}
.hs-form .fg{margin-bottom:1.2rem}
.hs-form .fg label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,0.9);margin-bottom:.5rem}
.hs-form .fg input,.hs-form .fg select{width:100%;padding:.85rem 1.2rem;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,0.3);color:#ffffff;font-size:.95rem;font-family:inherit;outline:none;transition: all var(--t);}
.hs-form .fg select option{background: #111113; color: #ffffff;}
.hs-form .fg input:focus,.hs-form .fg select:focus{background:rgba(0,0,0,0.5);border-color:var(--gold);box-shadow: 0 0 0 2px var(--gold-glow);}
.hs-form-btn{width:100%;padding:.78em 1em;border-radius:100px;background:var(--gold);color:#fff;font-weight:700;font-size:.88rem;border:none;cursor:pointer;transition:background var(--t),transform var(--t);margin-top:.25rem}
.hs-actions{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.hs-enquire{display:inline-flex;align-items:center;padding:.85em 2em;border-radius:100px;background:rgba(255,255,255,0.08);color:#fff;font-weight:600;font-size:.9rem;border:1.5px solid rgba(255,255,255,0.2);backdrop-filter:blur(10px);transition:all var(--t) var(--ease)}
.hs-enquire:hover{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.4);transform:translateY(-2px)}
.hs-form-success{display:none;text-align:center;padding:.75rem;background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.3);border-radius:10px;color:#86efac;font-size:.85rem;margin-top:.5rem}

/* Arrows */
.hs-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);transition:background var(--t),border-color var(--t),transform .3s}
.hs-arrow:hover{background:var(--gold);border-color:var(--gold);transform:translateY(-50%) scale(1.08)}
.hs-arrow svg{width:22px}
.hs-prev{left:1.75rem}
.hs-next{right:1.75rem}

/* Dots */
.hs-dots{position:absolute;bottom:3.25rem;right:6vw;z-index:10;display:flex;gap:.5rem}
.hs-dot{width:8px;height:8px;border-radius:100px;background:rgba(255,255,255,.3);border:none;cursor:pointer;transition:background var(--t),width var(--t)}
.hs-dot.active{background:var(--gold);width:28px}

/* Progress bar */
.hs-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.1);z-index:10}
.hs-progress-bar{height:100%;background:var(--gold);width:0;transition:width linear}

/* Brand */
.hs-brand{position:absolute;top:calc(var(--nav-h) + 1.5rem);left:6vw;z-index:10;display:flex;align-items:center;gap:.85rem;opacity:.85}
.hs-logo{height:42px;width:auto}
.hs-brand span{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}

/* Scroll cue */
.hero-scroll{position:absolute;bottom:1.75rem;left:50%;transform:translateX(-50%);z-index:10;text-align:center;color:rgba(255,255,255,.38);font-size:.63rem;letter-spacing:.18em;text-transform:uppercase}
.scroll-track{width:22px;height:36px;border:1.5px solid rgba(255,255,255,.2);border-radius:12px;margin:0 auto .4rem;position:relative;overflow:hidden}
.scroll-thumb{width:4px;height:9px;background:var(--gold);border-radius:3px;position:absolute;top:5px;left:50%;transform:translateX(-50%);animation:scrollThumb 2s ease infinite}
@keyframes scrollThumb{0%{opacity:1;top:5px}100%{opacity:0;top:20px}}

/* Tablet/mobile hero layout */
@media(max-width:900px){
    .hs-content{grid-template-columns:1fr;padding:0 1.25rem 7rem}
    .hs-form{display:none}
}
@media(max-width:600px){
    .hs-prev{left:.75rem}
    .hs-next{right:.75rem}
    .hs-dots{right:50%;transform:translateX(50%)}
    .hs-brand{display:none}
    .hs-actions{gap:.85rem}
}

/* Unified Hero Content Settings */
.hs-content{grid-template-columns: 1fr 420px; transition: all 1s var(--ease); text-align: left;}
.hs-left { align-items: flex-start; }
.hs-sub { margin-left: 0; margin-right: auto; }
.hs-actions { justify-content: flex-start; }
@media(max-width: 1100px) {
    .hs-content { grid-template-columns: 1fr; text-align: left; }
    .hs-left { align-items: flex-start; max-width: 100%; }
    .hs-sub { margin-left: 0; margin-right: auto; }
    .hs-actions { justify-content: flex-start; }
    .hs-form { display: none; }
}
#navbar .logo-light, #navbar .logo-dark { transition: opacity var(--t) var(--ease); }

.hs-slide.active .hs-badge,
.hs-slide.active .hero-h1,
.hs-slide.active .hs-name,
.hs-slide.active .hs-sub,
.hs-slide.active .hs-actions,
.hs-slide.active .hs-form{opacity:1;transform:none}

/* ── PROJECTS SECTION ────────────────────────────── */
.ps-slider-container{position:relative;margin-top:3rem;padding-bottom:1rem;overflow:hidden}
.ps-track{display:flex;gap:1.5rem;transition:transform .7s var(--ease);padding:.5rem 0}
.ps-slider-container .pc{flex:0 0 calc(33.333% - 1rem);min-width:320px;margin-bottom:1.5rem}
@media(max-width:1100px){ .ps-slider-container .pc{flex:0 0 calc(50% - .75rem)} }
@media(max-width:768px){ .ps-slider-container .pc{flex:0 0 100%} }

.ps-nav{display:flex;justify-content:space-between;align-items:center;margin-top:2.5rem}
.ps-controls{display:flex;gap:.75rem}
.ps-dots{display:flex;gap:.5rem;align-items:center}
.ps-dot{width:8px;height:8px;border-radius:50%;background:var(--border);border:none;cursor:pointer;transition:all .3s}
.ps-dot.active{width:24px;border-radius:10px;background:var(--gold)}

.hidden-proj{display:none}



/* Search Bar */
.search-bar{display:flex;align-items:stretch;background:rgba(255,255,255,.96);border-radius:100px;padding:.35rem .35rem .35rem 0;box-shadow:0 16px 64px rgba(0,0,0,.22);max-width:760px;margin:0 auto;flex-wrap:wrap;gap:0}
.dark .search-bar{background:rgba(30,25,16,.97)}
.sb-field{display:flex;flex-direction:column;padding:.5rem 1.25rem;flex:1;min-width:120px}
.sb-field label{font-size:.64rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:.2rem}
.sb-field select{font-size:.88rem;font-weight:500;color:var(--text);background:transparent;border:none;outline:none;appearance:none;cursor:pointer;padding:0;font-family:'Inter',sans-serif}
.sb-divider{width:1px;background:var(--border);margin:.5rem 0;flex-shrink:0}
.sb-btn{display:flex;align-items:center;gap:.5rem;background:var(--gold);color:#fff;border-radius:100px;padding:.8rem 1.5rem;font-weight:700;font-size:.9rem;white-space:nowrap;margin:.25rem;transition:background var(--t);flex-shrink:0}
.sb-btn:hover{background:var(--gold-d)}
.sb-btn svg{width:18px;flex-shrink:0}

/* Scroll cue */
.hero-scroll{position:absolute;bottom:1.75rem;left:50%;transform:translateX(-50%);z-index:2;text-align:center;color:rgba(255,255,255,.4);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase}
.scroll-track{width:24px;height:38px;border:1.5px solid rgba(255,255,255,.22);border-radius:12px;margin:0 auto .5rem;position:relative;overflow:hidden}
.scroll-thumb{width:4px;height:10px;background:var(--gold);border-radius:3px;position:absolute;top:6px;left:50%;transform:translateX(-50%);animation:scrollThumb 2s ease infinite}
@keyframes scrollThumb{0%{opacity:1;top:6px}100%{opacity:0;top:22px}}

/* ── MARQUEE ───────────────────────────────────────── */
.marquee-wrap{overflow:hidden;background:var(--bg-alt);border-top: 1px solid var(--border);border-bottom: 1px solid var(--border);padding:1.5rem 0}
.marquee-track{display:flex;gap:0;white-space:nowrap;animation:marquee 40s linear infinite}
.marquee-track span{font-size:1.1rem;font-weight:300;letter-spacing:.05em;text-transform:uppercase;color:var(--text);padding:0 3rem;font-family: 'Cormorant Garamond', serif;}
.marquee-track .mx{color:var(--gold);padding:0 1rem;font-size: 1.5rem;opacity: 0.6;}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-wrap:hover .marquee-track{animation-play-state:paused}

/* ── STATS ─────────────────────────────────────────── */
.stats-section{padding:8rem 0;background:var(--bg)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.stat-card{text-align:center;padding:3.5rem 2rem;border:1px solid var(--border);border-radius:var(--rx);background:var(--bg-card);backdrop-filter: var(--blur);transition:all var(--t) var(--ease);position: relative;overflow: hidden;}
.stat-card::before{content:'';position:absolute;inset:0;background: linear-gradient(135deg, var(--gold-glow) 0%, transparent 100%);opacity: 0;transition: opacity var(--t);}
.stat-card:hover{transform:translateY(-10px);box-shadow:var(--sh-lg);border-color:var(--gold);}
.stat-card:hover::before{opacity: 1;}
.stat-icon{width:64px;height:64px;border-radius:18px;background:var(--gold-l);display:flex;align-items:center;justify-content:center;color:var(--gold);margin:0 auto 1.5rem;transition:all var(--t);position: relative;z-index: 2;}
.stat-icon svg{width:26px}
.stat-card:hover .stat-icon{background:var(--gold);color:#fff;transform: scale(1.1) rotate(5deg);}
.stat-card strong{display:block;font-family:'Cormorant Garamond',serif;font-size:clamp(2.5rem,5vw,3.8rem);font-weight:700;color:var(--text);line-height:1;margin-bottom: 0.5rem;position: relative;z-index: 2;}
.stat-card p{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);position: relative;z-index: 2;}

/* ── ABOUT ─────────────────────────────────────────── */
.about-layout{display:grid;grid-template-columns:1fr 1.12fr;gap:6rem;align-items:center}
.about-img-stack{position:relative;padding: 2rem;}
.img-main{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;border-radius:var(--rx);box-shadow:var(--sh-lg);position: relative;z-index: 2;}
.img-secondary{display:block;position: absolute;bottom: -2rem;right: -2rem;width: 60%;aspect-ratio: 1/1;border-radius: var(--r);border: 4px solid var(--bg);box-shadow: var(--sh-lg);z-index: 3;object-fit: cover;}
.img-badge{position:absolute;bottom:-1.5rem;left: 1.5rem;background:var(--bg-card);backdrop-filter: var(--blur);border-radius:var(--r);padding:1.25rem 1.5rem;display:flex;align-items:center;gap:1.2rem;box-shadow:var(--sh-lg);border:1px solid var(--border);z-index: 4;}
.img-badge img{width:54px;height:auto;flex-shrink:0;}
.img-badge strong{display:block;font-size:1rem;font-weight:700;color:var(--text)}
.img-badge span{font-size:.8rem;color:var(--gold);font-weight:600;letter-spacing:.05em}
.img-years{position:absolute;bottom:2rem;left:2rem;background:var(--gold);color:#fff;border-radius:var(--rx);width: 140px;height: 140px;display: flex;flex-direction: column;justify-content: center;align-items: center;text-align:center;box-shadow:0 15px 35px var(--gold-glow);z-index: 5;}
.yr-num{display:block;font-family:'Cormorant Garamond',serif;font-size:3.5rem;font-weight:700;line-height:1}
.yr-lbl{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.9}
.pullquote{border-left:4px solid var(--gold);padding:1.5rem 0 1.5rem 2rem;margin-bottom:2rem;font-size:1.2rem;color:var(--text);line-height:1.7;font-style:italic;font-family: 'Cormorant Garamond', serif;}
.pillars{display:grid;grid-template-columns: 1fr 1fr;gap:1rem;margin-top:2rem}
.pillar{display:flex;flex-direction: column;align-items:flex-start;gap:1rem;padding:1.5rem;border:1px solid var(--border);border-radius:var(--r);background:var(--bg-card);transition:all var(--t) var(--ease);}
.pillar:hover{border-color:var(--gold);box-shadow:var(--sh);transform: translateY(-5px);}
.pl-ico{width:48px;height:48px;border-radius:12px;background:var(--gold-l);display:flex;align-items:center;justify-content:center;color:var(--gold);flex-shrink:0}
.pl-ico svg{width:22px}
.pillar div strong{display:block;font-size:1rem;font-weight:700;color:var(--text);margin-bottom: 0.25rem;}
.pillar div span{font-size:.85rem;color:var(--text-3);line-height:1.4;}

/* ── FILTER TABS ───────────────────────────────────── */
.filter-tabs{display:flex;gap:.5rem;flex-shrink:0}
.ft{padding:.5em 1.2em;border-radius:100px;font-size:.82rem;font-weight:600;color:var(--text-2);background:var(--bg-card);border:1.5px solid var(--border);transition:all var(--t);cursor:pointer}
.ft:hover,.ft.active{background:var(--gold);color:#fff;border-color:var(--gold)}

/* ── PROJECT CARDS ─────────────────────────────────── */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:0}
.pc{position:relative;border-radius:var(--rx);overflow:hidden;background:var(--bg-card);backdrop-filter: var(--blur);border: 1px solid var(--border);box-shadow:var(--sh);transition:all 0.6s var(--ease);opacity: 1;}
.pc:hover{transform:translateY(-12px);box-shadow:var(--sh-lg);border-color:var(--gold);}
.pc-img{aspect-ratio:4/5;overflow:hidden;position: relative;}
.pc-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pc:hover .pc-img img{transform:scale(1.1)}
.pc-overlay{position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,0.88) 0%, transparent 70%);opacity: 0.7;transition: opacity .4s;}
.pc:hover .pc-overlay{opacity: 0.9;}
.pc-badges{position:absolute;top:1.5rem;left:1.5rem;display:flex;gap:.5rem;flex-wrap:wrap;z-index: 3;}
.badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.5rem 1rem;border-radius:100px;backdrop-filter: var(--blur);}
.badge svg{width:12px;height:12px}
.badge-gold{background:rgba(212, 175, 55, 0.9);color:#fff}
.badge-blue{background:rgba(59, 130, 246, 0.9);color:#fff}
.badge-green{background:rgba(34, 197, 94, 0.9);color:#fff}
.badge-loc{background:rgba(255,255,255,.15);color:#fff;border: 1px solid rgba(255,255,255,0.2);}

.pc-body{padding:2rem;position: relative;z-index: 3;margin-top: -6rem;background: var(--bg-card); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-radius: 0 0 var(--rx) var(--rx); border-top: 1px solid var(--border);}
.pc-body h3{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:600;color:var(--text);margin-bottom:.5rem;line-height:1.1;}
.pc-body p{font-size:.9rem;color:var(--text-2);line-height:1.6;margin-bottom:1.5rem;display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.pc-meta{display:flex;gap:1.5rem;margin-bottom:1.5rem;border-top: 1px solid var(--border);padding-top: 1.2rem;}
.pc-meta span{display:flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:600;color:var(--text-3);text-transform: uppercase;letter-spacing: 0.05em;}
.pc-meta svg{width:15px;height:15px;color: var(--gold);}
.pc-btns{display:flex;gap:.5rem;margin-top:.5rem;align-items:center;}
.pc-cta, .pc-enquire{flex: 1;justify-content: center;display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;font-weight:700;padding:.7rem 1rem;border-radius:100px;transition:all var(--t);white-space:nowrap;}
.pc-cta{color:#fff;background:var(--gold);}
.pc-cta:hover{background:var(--gold-d);transform:translateY(-2px);box-shadow: 0 5px 15px var(--gold-glow);}
.pc-enquire{color:var(--gold);border:1px solid var(--gold);background: transparent;}
.pc-enquire:hover{background:var(--gold);color:#fff;transform: translateY(-2px);}

/* ── SERVICES ──────────────────────────────────────── */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.svc{border-radius:var(--rx);overflow:hidden;border:1px solid var(--border);background:var(--bg-card);backdrop-filter: var(--blur);box-shadow:var(--sh);transition:all .5s var(--ease);position: relative;}
.svc:hover{transform:translateY(-10px);box-shadow:var(--sh-lg);border-color:var(--gold)}
.svc-img{aspect-ratio:3/2;overflow:hidden;position: relative;}
.svc-img::after{content:'';position:absolute;inset:0;background: linear-gradient(0deg, var(--bg-card) 0%, transparent 100%);}
.svc-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.svc:hover .svc-img img{transform:scale(1.1)}
.svc-body{padding:2.5rem;position:relative;margin-top: -3rem;z-index: 2;}
.svc-n{display:block;font-family:'Cormorant Garamond',serif;font-size:4rem;font-weight:700;color:rgba(212, 175, 55, 0.1);line-height:1;margin-bottom:1rem;transition:color var(--t);position: absolute;top: 1rem;right: 2rem;}
.svc:hover .svc-n{color:var(--gold);opacity: 0.2;}
.svc-body h3{font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:600;color:var(--text);margin-bottom:1rem}
.svc-body p{font-size:.95rem;color:var(--text-2);line-height:1.7;margin-bottom: 1.5rem;}
.svc-arrow{width: 44px;height: 44px;display:flex;align-items:center;justify-content:center;border-radius: 50%;border: 1px solid var(--border);color:var(--gold);font-size:1.2rem;transition:all var(--t);background: var(--bg);}
.svc:hover .svc-arrow{background:var(--gold);color:#fff;border-color:var(--gold);transform:translateX(5px)}

/* ── ROI CALCULATOR ────────────────────────────────── */
.calc-layout{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center}
.calc-tips{margin-top:2.5rem;display:flex;flex-direction:column;gap:1.2rem}
.tip{display:flex;align-items:center;gap:1.2rem;padding:1.5rem;border:1px solid var(--border);border-radius:var(--r);background:var(--bg-card);backdrop-filter: var(--blur);box-shadow: var(--sh);}
.tip span{font-size:1.8rem;flex-shrink:0}
.tip p{font-size:.9rem;color:var(--text-2);line-height:1.6;font-weight: 500;}
.calc-card{background:var(--bg-card);backdrop-filter: var(--blur);border:1px solid var(--border);border-radius:var(--rx);padding:3.5rem;box-shadow:var(--sh-lg);position: relative;}
.calc-card::after{content:'';position:absolute; top: -20px; right: -20px; width: 100px; height: 100px; background: var(--gold-glow); border-radius: 50%; filter: blur(40px); z-index: -1;}
.calc-card h3{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:600;color:var(--text);margin-bottom:2.5rem}
.calc-field{margin-bottom:2rem}
.calc-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;font-size:.9rem;color:var(--text-2);font-weight: 600;}
.calc-label strong{font-weight:800;color:var(--gold);font-size: 1.1rem;}
.slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:10px;background:var(--border);outline:none;cursor:pointer;transition: background .3s;}
.slider:hover{background: rgba(212, 175, 55, 0.2);}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--gold);cursor:pointer;box-shadow:0 5px 15px var(--gold-glow);border: 3px solid #fff;transition:transform .2s}
.slider::-webkit-slider-thumb:hover{transform:scale(1.2)}
.slider-marks{display:flex;justify-content:space-between;font-size:.75rem;color:var(--text-3);margin-top:.6rem;font-weight: 700;letter-spacing: 0.05em;}
.calc-results{background:var(--bg-alt);border-radius:var(--r);padding:2rem;margin:2.5rem 0;border:1px solid var(--border);box-shadow: inset 0 2px 10px rgba(0,0,0,0.02);}
.cr-item{display:flex;justify-content:space-between;align-items:center;padding:.8rem 0;font-size:1rem}
.cr-item span{color:var(--text-2);font-weight: 500;}
.cr-item strong{font-weight:700;color:var(--text)}
.cr-sep{height:1px;background:var(--border);margin:.8rem 0}
.cr-main strong{color:var(--gold);font-size:1.8rem;font-family:'Cormorant Garamond',serif;font-weight: 800;}

/* ── WHY SECTION ───────────────────────────────────── */
.why-section{display:grid;grid-template-columns:1fr 1fr}
.why-img{background-size:cover;background-position:center;min-height:580px}
.why-text{background:var(--bg-alt);padding:6rem 4.5rem;display:flex;flex-direction:column;justify-content:center}
.checklist{display:flex;flex-direction:column;gap:.75rem;margin-top:1.25rem}
.checklist li{display:flex;align-items:flex-start;gap:.75rem;font-size:.92rem;color:var(--text-2)}
.checklist li span{width:22px;height:22px;border-radius:50%;background:var(--gold);color:#fff;font-size:.7rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}

/* ── TESTIMONIALS ──────────────────────────────────── */
.testi-section{overflow:hidden}
.testi-carousel{position:relative;overflow:hidden}
.tc-track{display:flex;gap:1.5rem;transition:transform .6s var(--ease)}
.tc-card{flex:0 0 calc(33.333% - 1rem);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rx);padding:2.25rem;box-shadow:var(--sh);transition:border-color var(--t)}
.tc-card:hover{border-color:var(--gold)}
.tc-stars{color:var(--gold);font-size:1rem;margin-bottom:1rem;letter-spacing:.1em}
.tc-card p{font-size:.9rem;color:var(--text-2);line-height:1.8;font-style:italic;margin-bottom:1.5rem}
.tc-author{display:flex;align-items:center;gap:.85rem}
.tc-avatar{width:42px;height:42px;border-radius:50%;background:var(--gold);color:#fff;font-size:.9rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tc-author strong{display:block;font-size:.88rem;font-weight:700;color:var(--text)}
.tc-author span{font-size:.75rem;color:var(--text-3)}
.testi-nav{display:flex;align-items:center;justify-content:center;gap:1.25rem;margin-top:2rem}
.tn-btn{width:42px;height:42px;border-radius:50%;background:var(--bg-card);border:1.5px solid var(--border);font-size:1rem;color:var(--text);transition:all var(--t);display:flex;align-items:center;justify-content:center}
.tn-btn:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.tc-dots{display:flex;gap:.5rem}
.tc-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:background var(--t),transform var(--t);border:none;cursor:pointer}
.tc-dot.active{background:var(--gold);transform:scale(1.3)}

/* ── CONTACT ───────────────────────────────────────── */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.contact-left p{font-size:1rem;color:var(--text-2);line-height:1.8}
.ci-list{margin-top:2rem;display:flex;flex-direction:column;gap:1.25rem}
.ci{display:flex;align-items:flex-start;gap:1rem}
.ci-ico{width:44px;height:44px;border-radius:12px;background:var(--gold-l);display:flex;align-items:center;justify-content:center;color:var(--gold);flex-shrink:0}
.ci-ico svg{width:18px}
.ci strong{display:block;font-size:.82rem;font-weight:700;color:var(--text);margin-bottom:.2rem}
.ci span{font-size:.87rem;color:var(--text-2);line-height:1.6}
.ci a{color:var(--text-2);transition:color var(--t)}
.ci a:hover{color:var(--gold)}
.contact-right{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rx);padding:2.75rem;box-shadow:var(--sh)}
.contact-right h3{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:600;color:var(--text);margin-bottom:1.75rem}
.fg{margin-bottom:1.1rem}
.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.fg label{display:block;font-size:.76rem;font-weight:700;color:var(--text-2);margin-bottom:.38rem;letter-spacing:.05em}
.fg input,.fg select,.fg textarea{width:100%;padding:.78rem 1rem;border:1.5px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);font-size:.87rem;font-family:'Inter',sans-serif;outline:none;appearance:none;transition:border-color var(--t),box-shadow var(--t)}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow)}
.fg textarea{resize:vertical}
#cf-status{font-size:.87rem;color:#16a34a;text-align:center;margin-top:.75rem;min-height:1.4em}

/* ── FOOTER ────────────────────────────────────────── */
.footer{background:#0c0904;color:rgba(255,255,255,.6);padding:5.5rem 0 2rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;padding-bottom:3.5rem;border-bottom:1px solid rgba(255,255,255,.06)}
.footer-logo{height:50px;margin-bottom:1.25rem}
.footer-brand p{font-size:.87rem;color:rgba(255,255,255,.43);line-height:1.7}
.footer-addr{margin-top:.6rem;font-size:.8rem}
.footer-contact-quick{margin-top:1rem;display:flex;flex-direction:column;gap:.4rem}
.footer-contact-quick a{font-size:.82rem;color:rgba(255,255,255,.5);transition:color var(--t)}
.footer-contact-quick a:hover{color:var(--gold)}
.fcol h4{font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:1.1rem}
.fcol ul{display:flex;flex-direction:column;gap:.55rem}
.fcol a{font-size:.85rem;color:rgba(255,255,255,.45);transition:color var(--t)}
.fcol a:hover{color:var(--gold)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:2rem;font-size:.78rem;color:rgba(255,255,255,.28);flex-wrap:wrap;gap:.75rem}
.footer-bottom a{color:rgba(255,255,255,.35);transition:color var(--t)}
.footer-bottom a:hover{color:var(--gold)}
.sep{margin:0 .4rem}
.footer-credit{color:rgba(255,255,255,.22);font-size:.74rem;margin-top:.35rem}
.footer-credit a{color:var(--gold);opacity:.7;font-style:italic}
.footer-credit a:hover{opacity:1}

/* ── FLOATING BUTTONS ──────────────────────────────── */
#wa-btn{position:fixed;bottom:5.5rem;right:1.5rem;z-index:800;width:52px;height:52px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(37,211,102,.35);transition:transform var(--t),box-shadow var(--t)}
#wa-btn:hover{transform:scale(1.1);box-shadow:0 10px 32px rgba(37,211,102,.5)}
#wa-btn svg{width:26px}
#btt{position:fixed;bottom:1.5rem;right:1.5rem;z-index:800;width:48px;height:48px;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px var(--gold-glow);opacity:0;pointer-events:none;transform:translateY(16px);transition:opacity .3s,transform .3s,background var(--t)}
#btt.visible{opacity:1;pointer-events:all;transform:translateY(0)}
#btt:hover{background:var(--gold-d)}
#btt svg{width:18px}

/* ── MOBILE STICKY CTA ─────────────────────────────── */
#mobile-cta{display:none!important;position:fixed;bottom:0;left:0;right:0;z-index:850;background:var(--bg-card);border-top:1px solid var(--border);padding:.7rem 1rem;gap:.6rem;backdrop-filter: blur(10px);}
@media(max-width: 768px) {
    #mobile-cta { display: flex !important; }
}
.mcta-call,.mcta-wa{display:flex;align-items:center;justify-content:center;gap:.4rem;flex:1;padding:.75em .5em;border-radius:10px;font-size:.82rem;font-weight:700}
.mcta-call{background:var(--gold-l);color:var(--gold)}
.mcta-call svg{width:16px}
.mcta-wa{background:#25D366;color:#fff}
.mcta-wa svg{width:16px}
.mcta-enquire{flex:1.5;display:flex;align-items:center;justify-content:center;background:var(--gold);color:#fff;border-radius:10px;font-size:.85rem;font-weight:700;padding:.75em .5em}

/* ── ANIMATIONS ────────────────────────────────────── */
.anim-up{opacity:0;transform:translateY(44px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.anim-left{opacity:0;transform:translateX(-55px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.anim-right{opacity:0;transform:translateX(55px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.anim-up.vis,.anim-left.vis,.anim-right.vis{opacity:1;transform:none}
.anim-up:nth-child(2){transition-delay:.1s}
.anim-up:nth-child(3){transition-delay:.2s}
.anim-up:nth-child(4){transition-delay:.3s}
.anim-up:nth-child(5){transition-delay:.4s}

/* ── TERMS PAGE ────────────────────────────────────── */
.terms-body{padding-top:calc(var(--nav-h) + 3rem);padding-bottom:6rem;max-width:860px;margin:0 auto}
.terms-h1{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,4vw,3.4rem);font-weight:600;color:var(--text);margin-bottom:.5rem}
.terms-body .eyebrow{display:block;margin-bottom:1rem}
.terms-updated{font-size:.82rem;color:var(--text-3);margin-bottom:3rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border)}
.terms-section{margin-bottom:2.75rem}
.terms-section h2{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:600;color:var(--text);margin-bottom:.75rem;display:flex;align-items:center;gap:.75rem}
.terms-section h2 span{width:28px;height:28px;border-radius:50%;background:var(--gold);color:#fff;font-size:.78rem;font-weight:800;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;flex-shrink:0}
.terms-section p,.terms-section li{font-size:.93rem;color:var(--text-2);line-height:1.82}
.terms-section ul{padding-left:1.25rem;margin-top:.5rem;display:flex;flex-direction:column;gap:.4rem}
.terms-section ul li{list-style:disc;list-style-position:inside}

/* ── RESPONSIVE ────────────────────────────────────── */
@media(max-width:1100px){
    .proj-grid,.svc-grid,.stats-grid{grid-template-columns:repeat(2,1fr)}
    .about-layout,.calc-layout,.contact-layout{grid-template-columns:1fr;gap:3rem}
    .about-img-stack,.why-section{display:block}
    .why-img{min-height:340px}
    .why-text{padding:4rem 2.5rem}
    .footer-grid{grid-template-columns:1fr 1fr}
    .img-badge{position:relative; bottom:auto; left:auto; margin: 1rem auto 0; width:100%; max-width: 400px; justify-content: center;}

    /* Mobile Menu Triggered at 1100px for robust tablet layouts */
    :root{--nav-h:62px}
    .nav-inner { gap: 0.5rem; padding: 0 1rem; }
    #navbar{z-index:1000; backdrop-filter: none; -webkit-backdrop-filter: none;}
    .logo { height: 40px; flex-shrink: 1; overflow: hidden; }
    .logo img { height: 32px; }
    .nav-end { gap: 0.4rem; }
    #nav-menu{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;background:var(--bg);flex-direction:column;align-items:flex-start;padding:2.5rem 2rem;gap:0;transform:translateX(110%);transition:transform .4s var(--ease);z-index:1000;overflow-y:auto}
    #nav-menu.open{transform:translateX(0)}
    #nav-menu .nl{width:100%;font-size:1.8rem;font-family:'Cormorant Garamond',serif;font-weight:600;padding:1.2rem 0;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
    #nav-menu .nl::after{content:"→";font-size:1.2rem;color:var(--gold);opacity:0.5;transition:transform .3s;}
    #nav-menu .nl:hover::after{transform:translateX(5px);opacity:1;}
    #nav-menu .nl-cta{background:var(--gold);color:#fff;border-radius:12px;padding:1rem 1.5rem;margin-top:2rem;justify-content:center;font-size:1.1rem;font-family:inherit;}
    #nav-menu .nl-cta::after{content:none}
    #ham-btn{display:flex}
}
@media(max-width:768px){
    .proj-grid,.svc-grid{grid-template-columns:1fr}
    .stats-grid{grid-template-columns:repeat(2,1fr)}
    .fg-row{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr}
    #mobile-cta{display:flex}
    #wa-btn{display:none}/* hide floating wa on mobile, use sticky bar */
    #btt{bottom:5.5rem}
    .why-text{padding:3rem 1.5rem}
    .search-bar{border-radius:var(--r);padding:.5rem}
    .sb-field{padding:.4rem .85rem}
    .sb-divider{display:none}
    .sb-btn{border-radius:10px;width:100%;justify-content:center}
    .tc-card{flex:0 0 calc(100% - 0px)}
    .terms-body{padding-left:1.25rem;padding-right:1.25rem}
    .contact-right{padding:1.75rem}
    .calc-card{padding:1.75rem}
    .img-secondary{display:none}
    .contact-layout{grid-template-columns:1fr}
}
@media(max-width:480px){
    .hero-h1{font-size:2.4rem}
    .stats-grid{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr;gap:2rem}
    .footer-bottom{flex-direction:column;align-items:flex-start}
    .pc-btns{flex-direction: column;}
}

/* ══════════════════════════════════════════════════
   PROJECT DETAIL PAGE STYLES
   ══════════════════════════════════════════════════ */

/* ── Project Hero ─────────────────────────────────── */
.proj-hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden;padding-top:var(--nav-h)}
.proj-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.04);transition:transform 8s ease;filter:brightness(.42)}
.proj-hero:hover .proj-hero-bg{transform:scale(1)}
.proj-hero-overlay{position:absolute;inset:0;background:linear-gradient(170deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.72) 100%)}
.proj-hero-body{position:relative;z-index:2;padding:4rem 6vw 5rem;max-width:860px}
.proj-hero-body .hs-badge{margin-bottom:1rem}
.proj-hero-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2.6rem,6vw,5.2rem);font-weight:600;color:#fff;line-height:1.06;margin-bottom:1rem}
.proj-hero-sub{font-size:clamp(.9rem,1.6vw,1.1rem);color:rgba(255,255,255,.7);max-width:560px;line-height:1.82;margin-bottom:2rem}
.proj-hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.proj-hero-stats{position:absolute;bottom:0;right:6vw;z-index:3;display:flex;gap:0}
.phs{background:rgba(0,0,0,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.1);border-left:1px solid rgba(255,255,255,.08);padding:1.25rem 1.75rem;text-align:center}
.phs:first-child{border-radius:var(--r) 0 0 0}
.phs:last-child{border-radius:0 var(--r) 0 0}
.phs strong{display:block;font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:700;color:var(--gold);line-height:1}
.phs span{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:.3rem;display:block}
@media(max-width:768px){.proj-hero-stats{display:none}}

/* ── Sticky Tabs ──────────────────────────────────── */
.proj-tabs-bar{position:sticky;top:var(--nav-h);z-index:80;background:var(--bg-card);border-bottom:2px solid var(--border);overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
.proj-tabs-bar::-webkit-scrollbar{display:none}
.proj-tabs-inner{display:flex;min-width:max-content;justify-content:center;width:100%;}
.ptab{padding:1rem 1.5rem;font-size:.85rem;font-weight:600;color:var(--text-2);border-bottom:2px solid transparent;margin-bottom:-2px;transition:color var(--t),border-color var(--t);white-space:nowrap}
.ptab.active,.ptab:hover{color:var(--gold);border-color:var(--gold)}

/* ── Two-column project layout ────────────────────── */
.proj-layout{display:grid;grid-template-columns:1fr 360px;gap:3rem;align-items:start;padding:4rem 0}
@media(max-width:1100px){.proj-layout{grid-template-columns:1fr}}

/* ── Overview ─────────────────────────────────────── */
.proj-overview p{font-size:.96rem;color:var(--text-2);line-height:1.88;margin-bottom:1.2rem}
.proj-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:2rem 0;border-top:1px solid var(--border);padding-top:2rem}
@media(max-width:600px){.proj-specs{grid-template-columns:1fr}}
.spec{display:flex;align-items:flex-start;gap:.85rem;padding:1rem 1.1rem;border:1px solid var(--border);border-radius:var(--r);background:var(--bg-card);transition:border-color var(--t)}
.spec:hover{border-color:var(--gold)}
.spec-ico{width:38px;height:38px;border-radius:10px;background:var(--gold-l);display:flex;align-items:center;justify-content:center;color:var(--gold);flex-shrink:0}
.spec-ico svg{width:18px}
.spec strong{display:block;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:.18rem}
.spec span{font-size:.92rem;font-weight:600;color:var(--text)}

/* ── Amenities ────────────────────────────────────── */
.amenities-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:2rem}
@media(max-width:600px){.amenities-grid{grid-template-columns:repeat(2,1fr)}}
.amenity{display:flex;align-items:center;gap:.65rem;padding:.85rem 1rem;border:1px solid var(--border);border-radius:var(--r);background:var(--bg-card);font-size:.84rem;color:var(--text-2);transition:border-color var(--t),color var(--t)}
.amenity:hover{border-color:var(--gold);color:var(--text)}
.amenity svg{width:18px;color:var(--gold);flex-shrink:0}

/* ── Gallery ──────────────────────────────────────── */
.proj-gallery{padding:3rem 0}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem}
.gallery-grid.tall .gi:first-child{grid-row:span 2}
@media(max-width:768px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.gallery-grid{grid-template-columns:1fr}}
.gi{border-radius:var(--r);overflow:hidden;cursor:zoom-in;position:relative}
.gi img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gi:hover img{transform:scale(1.06)}
.gi::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.0);transition:background .3s}
.gi:hover::after{background:rgba(0,0,0,.12)}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.lightbox.open{opacity:1;pointer-events:all}
.lightbox img{max-width:90vw;max-height:88vh;border-radius:var(--r);box-shadow:0 24px 80px rgba(0,0,0,.6);object-fit:contain}
.lb-close{position:absolute;top:1.25rem;right:1.25rem;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:1.2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.lb-close:hover{background:var(--gold)}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.lb-prev:hover,.lb-next:hover{background:var(--gold)}
.lb-prev{left:1rem}
.lb-next{right:1rem}

/* ── Floor Plans ──────────────────────────────────── */
.fp-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.fp-tab{padding:.48em 1.1em;border-radius:100px;font-size:.82rem;font-weight:600;color:var(--text-2);background:var(--bg-card);border:1.5px solid var(--border);transition:all var(--t);cursor:pointer}
.fp-tab.active,.fp-tab:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
.fp-panel{display:none}
.fp-panel.active{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
@media(max-width:768px){.fp-panel.active{grid-template-columns:1fr}}
.fp-img{border-radius:var(--rx);overflow:hidden;background:var(--bg-alt);padding:1.5rem;border:1px solid var(--border)}
.fp-img img{width:100%;object-fit:contain;max-height:340px}
.fp-info h4{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:600;color:var(--text);margin-bottom:1rem}
.fp-list{display:flex;flex-direction:column;gap:.6rem}
.fp-list li{display:flex;justify-content:space-between;align-items:center;padding:.65rem .9rem;border:1px solid var(--border);border-radius:var(--r);background:var(--bg-card);font-size:.88rem}
.fp-list li span{color:var(--text-3)}
.fp-list li strong{color:var(--text);font-weight:600}

/* ── Sidebar card ─────────────────────────────────── */
.proj-sidebar{display:flex;flex-direction:column;gap:1.5rem;position:sticky;top:calc(var(--nav-h) + 4rem)}
.sidebar-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rx);padding:1.75rem;box-shadow:var(--sh)}
.sidebar-card h4{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:600;color:var(--text);margin-bottom:1.1rem}
.sidebar-card .fg{margin-bottom:.75rem}
.sidebar-card .fg label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);margin-bottom:.3rem}
.sidebar-card .fg input,.sidebar-card .fg select{width:100%;padding:.7rem .9rem;border:1.5px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);font-size:.87rem;font-family:'Inter',sans-serif;outline:none;transition:border-color var(--t)}
.sidebar-card .fg input:focus,.sidebar-card .fg select:focus{border-color:var(--gold)}
.sidebar-enq-btn{width:100%;padding:.85em;border-radius:100px;background:var(--gold);color:#fff;font-weight:700;font-size:.9rem;border:none;cursor:pointer;transition:background var(--t),transform var(--t);margin-top:.5rem}
.sidebar-enq-btn:hover{background:var(--gold-d);transform:translateY(-1px)}
.price-tag{text-align:center;padding:1rem 0;border-bottom:1px solid var(--border);margin-bottom:1.25rem}
.price-tag small{font-size:.72rem;color:var(--text-3);display:block;margin-bottom:.25rem}
.price-tag strong{font-family:'Cormorant Garamond',serif;font-size:2rem;color:var(--gold);font-weight:700}
.sidebar-links{display:flex;flex-direction:column;gap:.6rem}
.sidebar-link{display:flex;align-items:center;gap:.65rem;font-size:.87rem;color:var(--text-2);padding:.7rem 1rem;border:1px solid var(--border);border-radius:var(--r);background:var(--bg-card);transition:all var(--t)}
.sidebar-link:hover{color:var(--gold);border-color:var(--gold)}
.sidebar-link svg{width:18px;flex-shrink:0;color:var(--gold)}

/* ── Location Map placeholder ─────────────────────── */
.proj-map{border-radius:var(--rx);overflow:hidden;border:1px solid var(--border);background:var(--bg-alt);min-height:280px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.75rem;color:var(--text-3);font-size:.9rem}
.proj-map svg{width:36px;opacity:.4}

/* ── Back breadcrumb ──────────────────────────────── */
.proj-breadcrumb{padding:1rem 0;font-size:.82rem;color:var(--text-3);display:flex;align-items:center;gap:.5rem}
.proj-breadcrumb a{color:var(--text-3);transition:color var(--t)}
.proj-breadcrumb a:hover{color:var(--gold)}
.proj-breadcrumb span{opacity:.45}
