body.project-page {background:#f6f8fb; color:#2a2a2a; font-size:15px;}
.hero-project {position:relative; border-radius:22px; overflow:hidden; height:480px; display:flex; align-items:center; justify-content:center; margin-top:130px; background:#000;}
.hero-project img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.78);}
.hero-overlay {position:absolute; inset:0; background:linear-gradient(130deg,rgba(12,23,54,.75),rgba(18,42,92,.35));}
.hero-content {position:relative; z-index:2; text-align:center; max-width:880px; padding:0 25px;}
.hero-content h1 {color:#fff; font-size:40px; font-weight:700; line-height:1.35; margin-bottom:25px;}
.hero-badges {display:flex; flex-wrap:wrap; justify-content:center; gap:10px;}
.hero-badges span {background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.28); padding:6px 14px; border-radius:30px; font-size:12.5px; backdrop-filter:blur(6px);}
.floating-nav {position:sticky; top:90px; z-index:50; background:#fff; padding:10px 18px; border:1px solid #e5eaf1; border-radius:14px; margin:40px 0 30px 0; box-shadow:0 6px 18px -6px rgba(30,47,77,.08);} 
.floating-nav ul {list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:14px;} 
.floating-nav a {display:block; padding:6px 14px; background:#f0f4f9; border-radius:10px; font-size:13px; color:#2d3e55; text-decoration:none; transition:.25s;} 
.floating-nav a:hover {background:#2d61e9; color:#fff;}
/* Mobile / small viewport optimization for floating section nav
	 - Prevents the chip list from wrapping into many rows (taking half screen)
	 - Turns it into a single horizontal scrollable pill bar with momentum scroll
	 - Keeps sticky positioning for quick access while conserving vertical space */
@media (max-width: 860px){
	.floating-nav {margin:30px 0 22px; padding:10px 14px;}
	.floating-nav a {font-size:12.6px; padding:6px 12px;}
}
@media (max-width: 640px){
	.floating-nav {padding:8px 4px 10px; margin:26px -12px 18px; border-radius:0; border-left:none; border-right:none; box-shadow:0 4px 14px -6px rgba(30,47,77,.08); overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:rgba(120,140,160,.35) transparent;}
	.floating-nav ul {flex-wrap:nowrap; gap:8px; min-width:max-content;}
	.floating-nav a {white-space:nowrap; font-size:12px; padding:6px 11px; background:#f3f6fa;}
	.floating-nav a:focus {outline:2px solid #2d61e9; outline-offset:2px;}
	/* subtle fade edges to hint scroll */
	.floating-nav {position:sticky;}
	.floating-nav:before, .floating-nav:after {content:""; position:absolute; top:0; bottom:0; width:28px; pointer-events:none; z-index:2;}
	.floating-nav:before {right:0; background:linear-gradient(to left,#fff,rgba(255,255,255,0));}
	.floating-nav:after {left:0; background:linear-gradient(to right,#fff,rgba(255,255,255,0));}
	/* Custom scrollbar (WebKit) */
	.floating-nav::-webkit-scrollbar {height:6px;}
	.floating-nav::-webkit-scrollbar-track {background:transparent;}
	.floating-nav::-webkit-scrollbar-thumb {background:rgba(120,140,160,.35); border-radius:3px;}
}
@media (max-width:480px){
	.floating-nav {margin:22px -14px 16px; padding:8px 2px 9px;}
	.floating-nav a {font-size:11.5px; padding:5px 10px;}
}
.section-block {background:#fff; padding:45px 38px; border-radius:22px; margin-bottom:28px; position:relative; box-shadow:0 10px 32px -10px rgba(36,54,97,.08);} 
.section-block h2 {font-size:22px; font-weight:700; margin:0 0 22px 0; color:#1d2d45;} 
.value-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin:25px 0 5px;} 
.value-item {background:#f3f7fc; border:1px solid #e2edf7; padding:18px 16px 14px; border-radius:16px; position:relative; overflow:hidden;} 
.value-item:before {content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 15%,rgba(45,97,233,.18),transparent 60%); opacity:.65;}
.value-item h4 {font-size:14.2px; font-weight:700; color:#234;} .value-item p {font-size:12.8px; line-height:1.7; margin:6px 0 0;}
.highlight-box {background:linear-gradient(145deg,#e9f2ff,#f4f9ff); padding:22px 24px; border:1px solid #d7e8fb; border-radius:18px; margin:25px 0; position:relative;}
.highlight-box:before {content:""; position:absolute; width:120px; height:120px; top:-35px; left:-30px; background:radial-gradient(circle at 65% 35%,rgba(45,97,233,.22),transparent 70%); opacity:.6;}
.data-table {width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid #e3e9f1; border-radius:16px; background:#fff;}
.data-table tr td, .data-table tr th {padding:10px 14px; font-size:13px; line-height:1.6; border-bottom:1px solid #edf1f5;} .data-table tr:last-child td {border-bottom:none;} .data-table tr td:first-child {font-weight:600; color:#233a55; width:38%;}
.badge-pill {display:inline-block; background:#2d61e9; color:#fff; font-size:11px; padding:4px 10px; border-radius:30px; margin-left:6px;}
.compare-table {width:100%; border-collapse:collapse; margin-top:10px;} .compare-table th, .compare-table td {font-size:12.5px; padding:10px 10px; border:1px solid #dfe6ef; text-align:center; line-height:1.5;} .compare-table th {background:#f0f5fa; font-weight:600; color:#1d2d45;}
.unit-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin:25px 0 10px;} .unit-card {background:#fff; border:1px solid #e2e8f1; border-radius:18px; padding:18px 18px 14px; position:relative; box-shadow:0 8px 26px -10px rgba(40,60,92,.08);} .unit-card h4 {font-size:15px; font-weight:700; margin:0 0 4px; color:#20324c;} .unit-card p {font-size:12.6px; line-height:1.6; margin:0 0 8px;} .unit-meta {display:flex; flex-wrap:wrap; gap:6px;} .unit-meta span {background:#f1f5fa; border:1px solid #dfe6ef; padding:4px 9px; font-size:11.5px; border-radius:8px;}
.payment-box {display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin:18px 0;} .payment-plan {background:#f7faff; border:1px solid #dbe8f5; border-radius:16px; padding:18px 18px 14px; position:relative;} .payment-plan h4 {margin:0 0 10px; font-size:14px; font-weight:700; color:#24406a;} .payment-plan ul {list-style:none; padding:0; margin:0;} .payment-plan li {font-size:12.5px; margin:6px 0; line-height:1.6;}
.gallery-flex {display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:15px;} .gallery-item {background:#000; position:relative; border-radius:16px; overflow:hidden; height:180px; cursor:pointer; box-shadow:0 6px 20px -8px rgba(0,0,0,.25);} .gallery-item span {position:absolute; inset:0; display:flex; align-items:flex-end; padding:10px 12px; font-size:12px; color:#fff; background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.05));}

/* --- Enhanced Professional Gallery --- */
.gallery-filter {display:flex; flex-wrap:wrap; gap:10px; margin:5px 0 18px;}
.gallery-filter button {background:#f1f5fa; border:1px solid #dbe4ef; padding:8px 16px; font-size:12.6px; border-radius:30px; cursor:pointer; color:#254056; font-weight:500; transition:.3s; position:relative; overflow:hidden;}
.gallery-filter button.active, .gallery-filter button:hover {background:#2d61e9; color:#fff; border-color:#2d61e9;}
.gallery-grid {display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px;}
.g-item {position:relative; border-radius:18px; overflow:hidden; background:#101828; min-height:180px; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px -10px rgba(30,50,90,.25); border:1px solid #e0e8f3;}
.g-item img {width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.6,.2,1), filter .5s; filter:brightness(.9) saturate(1.05);}
.g-item:focus {outline:2px solid #2d61e9; outline-offset:2px;}
.g-overlay {position:absolute; inset:0; background:linear-gradient(160deg,rgba(10,22,45,.65),rgba(20,50,110,.15)); display:flex; align-items:flex-end; padding:12px 14px; opacity:1; transition:.5s;}
.g-overlay span {color:#fff; font-size:12.8px; font-weight:600; letter-spacing:.2px;}
.g-item:hover img {transform:scale(1.08); filter:brightness(.82) saturate(1.1);} 
.g-item:hover .g-overlay {background:linear-gradient(150deg,rgba(15,35,75,.72),rgba(25,60,128,.25));}
.g-item[data-cat="night"] .g-overlay {background:linear-gradient(150deg,rgba(0,7,25,.75),rgba(30,40,90,.25));}
.g-item[data-cat="progress"] .g-overlay {background:linear-gradient(150deg,rgba(40,25,5,.65),rgba(25,60,128,.15));}
.g-item[data-cat="amenity"] .g-overlay {background:linear-gradient(150deg,rgba(10,40,25,.65),rgba(25,60,128,.15));}
.g-placeholder {background:repeating-linear-gradient(45deg,#eef4fb,#eef4fb 12px,#e2ebf5 12px,#e2ebf5 24px); border:1px dashed #c5d6e6; box-shadow:none; min-height:180px; display:flex; align-items:center; justify-content:center;}
.g-placeholder-inner {text-align:center; padding:16px 14px;}
.g-placeholder-inner strong {display:block; font-size:13px; color:#1d3350; margin-bottom:6px;}
.g-placeholder-inner p {margin:0; font-size:11.5px; line-height:1.6; color:#455e78;}
.g-hidden {pointer-events:none; opacity:0; transform:scale(.92); transition:.38s cubic-bezier(.3,.6,.25,1); position:relative;}
.g-item {transition:.5s cubic-bezier(.3,.6,.25,1);} /* ensure default */
.gallery-grid {--stagger:0;} /* hook for potential future animation */
.gallery-hint {font-size:11.5px; color:#6a7d90; margin:18px 4px 0; text-align:right;}

/* Lightbox Modal */
.g-lightbox-modal {position:fixed; inset:0; background:rgba(8,14,26,.85); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:8000; opacity:0; visibility:hidden; transition:.4s;}
.g-lightbox-modal.open {opacity:1; visibility:visible;}
.g-lb-content {max-width:1180px; width:92%; display:grid; grid-template-columns:1fr 320px; gap:26px; align-items:start;}
.g-lb-image {position:relative; background:#0d1624; border-radius:20px; overflow:hidden; box-shadow:0 15px 38px -12px rgba(0,0,0,.55);}
.g-lb-image img {width:100%; height:100%; object-fit:contain; display:block; background:#0d1624;}
.g-lb-meta {background:linear-gradient(140deg,#162438,#1f3250); border:1px solid #1f3d60; color:#d9e4f2; border-radius:20px; padding:20px 18px 18px; position:relative; box-shadow:0 10px 28px -10px rgba(10,25,50,.6);}
.g-lb-meta h3 {margin:0 0 12px; font-size:16px; font-weight:700; color:#fff;}
.g-lb-meta p {margin:0 0 12px; font-size:12.8px; line-height:1.75;}
.g-lb-close {position:absolute; top:14px; left:14px; background:rgba(255,255,255,.12); border:none; width:42px; height:42px; border-radius:50%; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; backdrop-filter:blur(4px); transition:.3s;}
.g-lb-close:hover {background:rgba(255,255,255,.25);} 
.g-lb-nav {position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none;}
.g-lb-nav button {pointer-events:auto; background:rgba(0,0,0,.35); border:none; width:54px; height:54px; border-radius:50%; color:#fff; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.35s;}
.g-lb-nav button:hover {background:rgba(0,0,0,.55);} 
.g-empty-msg {text-align:center; grid-column:1/-1; padding:40px 20px; font-size:13px; color:#5c6f82; background:#f1f6fb; border:1px dashed #d3e1ef; border-radius:18px;}

@media (max-width: 980px){
	.g-lb-content {grid-template-columns:1fr;}
	.g-lb-meta {order:2;}
}
@media (max-width: 640px){
	.gallery-filter button {font-size:11.5px; padding:7px 14px;}
	.g-item {min-height:160px;}
	.g-lb-close {width:40px; height:40px; font-size:17px;}
	.g-lb-nav button {width:46px; height:46px; font-size:18px;}
}
.metrics-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin:20px 0 5px;} .metric-box {background:#fcfdff; border:1px solid #e3ebf5; padding:18px 16px 14px; border-radius:18px; position:relative;} .metric-box h5 {margin:0 0 8px; font-size:13.5px; font-weight:700; color:#253a55;} .metric-box p {margin:0; font-size:12.4px; line-height:1.7;}
p.intro-text {color:#e9f2ff; font-size:15px; line-height:1.9; max-width:760px; margin:0 auto 28px;}
.persona-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin:20px 0 5px;} .persona {background:#fff; border:1px solid #e4eaf2; padding:18px 16px 14px; border-radius:16px; position:relative;} .persona h4 {font-size:14px; margin:0 0 6px; font-weight:700;} .persona p {font-size:12.6px; line-height:1.65; margin:0;}
.legal-box {background:#fbfcfe; border:1px solid #dee6f1; border-radius:18px; padding:18px 20px; margin-top:20px;}
.faq-accordion {margin-top:10px;} .faq-item {border:1px solid #dfe6ef; background:#fff; border-radius:14px; margin-bottom:10px; overflow:hidden;} .faq-button {width:100%; background:#fff; text-align:right; padding:14px 16px; border:none; outline:none; font-weight:600; font-size:13.5px; color:#1e2f47; display:flex; justify-content:space-between; align-items:center; cursor:pointer;} .faq-button:focus {outline:2px solid #2d61e9;} .faq-panel {max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.25,.6,.25,1); padding:0 16px;} .faq-panel.open {padding:0 16px 14px;} .faq-panel p {font-size:12.8px; line-height:1.7; margin:12px 0 0;}
.cta-box-project {background:linear-gradient(125deg,#1f3d7a,#2d61e9); padding:40px 36px; border-radius:24px; color:#fff; text-align:center; position:relative; overflow:hidden; margin:20px 0 10px;} .cta-box-project:before {content:""; position:absolute; width:300px; height:300px; top:-120px; left:-90px; background:radial-gradient(circle at 60% 40%,rgba(255,255,255,.25),transparent 70%); opacity:.5;} .cta-box-project h3 {margin:0 0 14px; font-size:26px; font-weight:700;} .cta-box-project p {margin:0 0 20px; font-size:14.2px; line-height:1.8;} .cta-btn {background:#fff; color:#1f3d7a; padding:12px 26px; border-radius:14px; font-weight:600; font-size:14px; text-decoration:none; display:inline-block; transition:.3s;} .cta-btn:hover {background:#ffcf4d; color:#1a2952;}
.map-placeholder {background:#eef4fb; border:1px dashed #c6d6e6; padding:30px; border-radius:18px; text-align:center; font-size:13px; color:#456;}
.disclaimer-note {text-align:center; font-size:12px; color:#777; margin:25px 0 10px;}

/* Related Projects Section */
.related-projects {background:#fff; padding:40px 34px; border-radius:22px; box-shadow:0 10px 32px -10px rgba(36,54,97,.08); margin:32px 0 10px;}
.related-projects h2 {font-size:20px; font-weight:700; margin:0 0 22px; color:#1d2d45;}
.related-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px;}
.related-card {background:linear-gradient(140deg,#f5f9ff,#f1f6fd); border:1px solid #dbe6f3; border-radius:18px; padding:16px 16px 14px; position:relative; overflow:hidden; transition:.35s; text-decoration:none; display:block; color:#254;}
.related-card:before {content:""; position:absolute; width:120px; height:120px; top:-40px; right:-35px; background:radial-gradient(circle at 30% 70%,rgba(45,97,233,.15),transparent 70%); opacity:.7;}
.related-card h3 {margin:0 0 8px; font-size:15px; font-weight:700;}
.related-card p {margin:0; font-size:12.4px; line-height:1.6;}
.related-meta {margin-top:10px; display:flex; flex-wrap:wrap; gap:6px;}
.related-meta span {background:#eef4fb; border:1px solid #d9e5f2; font-size:11px; padding:4px 8px; border-radius:10px;}
.related-card:hover {transform:translateY(-4px); box-shadow:0 12px 30px -12px rgba(36,54,97,.25); background:linear-gradient(140deg,#edf4ff,#f8fbff);}

@media (max-width: 820px){
	.related-projects {padding:34px 24px;}
}

/* Luxury (Grand Sapphire) Specific Helpers */
.hero-lux {position:relative; border-radius:26px; overflow:hidden; height:520px; display:flex; align-items:center; justify-content:center; margin-top:130px; background:#0d1220;}
.hero-lux img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.72) saturate(1.15);} 
.hero-lux .hero-overlay {background:linear-gradient(145deg,rgba(10,15,30,.8),rgba(25,40,85,.35));}
.lux-badges {display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:6px;}
.lux-badges span {background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.32); padding:7px 16px; border-radius:40px; font-size:12.2px; letter-spacing:.3px; backdrop-filter:blur(6px);}
.lux-section-accent {background:linear-gradient(140deg,#0f1830,#1f3b78); color:#fff; padding:46px 40px; border-radius:26px; position:relative; overflow:hidden; box-shadow:0 18px 42px -15px rgba(8,20,48,.55); margin-bottom:32px;}
.lux-section-accent:before {content:""; position:absolute; width:380px; height:380px; top:-140px; left:-120px; background:radial-gradient(circle at 60% 40%,rgba(255,255,255,.18),transparent 70%); opacity:.55;}
.lux-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px; margin:25px 0 5px;}
.lux-card {background:linear-gradient(150deg,#182741,#23385f); border:1px solid #2d4a76; padding:20px 18px 16px; border-radius:20px; position:relative; overflow:hidden; color:#d9e4f2; box-shadow:0 10px 32px -12px rgba(12,26,54,.55);} 
.lux-card:before {content:""; position:absolute; width:120px; height:120px; top:-40px; right:-30px; background:radial-gradient(circle at 35% 70%,rgba(75,140,255,.25),transparent 70%); opacity:.6;}
.lux-card h4 {font-size:15px; font-weight:700; margin:0 0 6px; color:#fff;}
.lux-card p {font-size:12.6px; line-height:1.7; margin:0;}
.lux-meta {margin-top:10px; display:flex; flex-wrap:wrap; gap:6px;}
.lux-meta span {background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); padding:5px 10px; font-size:11.2px; border-radius:10px; color:#e6eef7;}
.lux-table caption {caption-side:top; text-align:right; font-weight:600; padding:0 0 8px; color:#1d2d45;}
.lux-highlight {background:linear-gradient(125deg,#e8f1ff,#f6faff); border:1px solid #d5e3f5; padding:22px 24px; border-radius:20px; margin:26px 0; position:relative;}
.lux-highlight:before {content:""; position:absolute; width:140px; height:140px; top:-45px; left:-35px; background:radial-gradient(circle at 55% 45%,rgba(45,97,233,.18),transparent 70%); opacity:.55;}
.architecture-diagram {background:#101c32; border:1px solid #1f3353; border-radius:22px; padding:34px 30px; color:#d0dceb; margin:24px 0 10px; position:relative; overflow:hidden;}
.architecture-diagram:before {content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 25%,rgba(70,120,220,.18),transparent 70%); opacity:.7;}
.architecture-diagram h3 {margin:0 0 14px; font-size:18px; font-weight:700; color:#fff;}
.architecture-diagram ul {margin:0; padding-right:20px; line-height:1.85; font-size:13px;}

@media (max-width: 820px){
	.hero-lux {height:460px;}
	.lux-section-accent {padding:40px 30px;}
	.architecture-diagram {padding:30px 26px;}
}
@media (max-width: 820px){ .hero-content h1 {font-size:30px;} .section-block {padding:38px 26px;} }