PageSourceSearch

https://5379-wellburn-drive-delta.netlify.app/

html 5379-wellburn-drive-delta.netlify.app collected 2026-10-03 10:23:21 UTC 169,968 bytes, 1,580 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>5379 Wellburn Drive</title>
7    
7<script src="https://cdn.tailwindcss.com"></script>
7
8    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
9    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/pannellum.css"/>
10    
10<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/pannellum.js"></script>
10
11    <style>
12        :root { --brand: #f97316; }
13        body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #020617; color: #f8fafc; overflow-x: hidden; }
14        .glass-panel { background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); }
15        .tab-content { display: none; }
16        .tab-content.active { display: block; animation: fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
17        @keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
18        @keyframes sun-flare-main { 0% { opacity: 0.3; transform: scale(1) translate(-20%, -20%); } 50% { opacity: 0.7; transform: scale(1.15) translate(-15%, -15%); } 100% { opacity: 0.3; transform: scale(1) translate(-20%, -20%); } }
19        .sun-flare-main { position: absolute; top: -10%; left: -10%; width: 70%; height: 70%; background: radial-gradient(circle at center, rgba(255,255,255,0.5) 0%, rgba(251,191,36,0.2) 30%, rgba(249,115,22,0.05) 50%, transparent 70%); filter: blur(70px); animation: sun-flare-main 12s infinite ease-in-out; pointer-events: none; z-index: 10; }
20        .tab-btn { color: #64748b; border-bottom: 2px solid transparent; transition: all 0.3s; cursor: pointer; }
21        .tab-btn.active { color: var(--brand); border-color: var(--brand); }
22        .mobile-gallery-scrollbar::-webkit-scrollbar { height: 6px; display: block; }
23        .mobile-gallery-scrollbar::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 10px; }
24        .mobile-gallery-scrollbar::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 10px; }
25        .scrollbar-hide::-webkit-scrollbar { display: none; }
26        .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
27        #lightbox { display: none; position: fixed; inset: 0; background: rgba(2, 6, 23, 0.98); backdrop-filter: blur(12px); z-index: 1000; flex-direction: column; align-items: center; justify-content: center; padding: 0.75rem; }
28        #lightbox.active { display: flex; animation: fade-in-up 0.3s ease-out; }
29        .lightbox-control { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; padding: 0.75rem; border-radius: 1rem; transition: all 0.2s; cursor: pointer; backdrop-filter: blur(8px); }
30        .lightbox-control:hover { background: rgba(255, 255, 255, 0.2); border-color: var(--brand); }
31    </style>
32</head>
33<body>
34    <div id="lightbox" onclick="if(event.target === this) closeLightbox()">
35        <button onclick="closeLightbox()" class="absolute top-4 right-4 sm:top-8 sm:right-8 lightbox-control z-[1100]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2.5" stroke="currentColor" class="w-5 h-5 sm:w-6 sm:h-6"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /></svg></button>
36        <button id="lightbox-prev" onclick="changeLightbox(-1)" class="absolute left-2 sm:left-8 top-1/2 -translate-y-1/2 lightbox-control z-[1100]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2.5" stroke="currentColor" class="w-5 h-5 sm:w-6 sm:h-6"><path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /></svg></button>
37        <button id="lightbox-next" onclick="changeLightbox(1)" class="absolute right-2 sm:right-8 top-1/2 -translate-y-1/2 lightbox-control z-[1100]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2.5" stroke="currentColor" class="w-5 h-5 sm:w-6 sm:h-6"><path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg></button>
38        <div id="lightbox-badge" class="absolute top-4 left-4 sm:top-8 sm:left-8 px-3 py-1.5 sm:px-4 sm:py-2 bg-orange-600 text-white font-black text-[9px] sm:text-xs uppercase tracking-widest rounded-xl shadow-2xl flex items-center gap-2 z-[1100]" style="display: none;">
39            <span>🌐</span> 360° Interactive Panorama
40        </div>
41        <img id="lightbox-img" src="" class="max-w-full max-h-[82vh] object-contain shadow-2xl rounded-2xl border border-white/5">
42        <div id="lightbox-pano" class="w-[96vw] sm:w-[90vw] max-w-5xl h-[75vh] sm:h-[80vh] rounded-2xl overflow-hidden shadow-2xl border border-white/10" style="display: none;"></div>
43        <div class="mt-4 sm:mt-6 text-[10px] font-black uppercase tracking-widest text-slate-500" id="lightbox-counter">0 / 0</div>
44    </div>
45
46    <div class="h-[65vh] md:h-[80vh] w-full relative overflow-hidden">
47        <div class="sun-flare-main"></div>
48        <img src="images/gallery/img_0.jpg" fetchpriority="high" decoding="async" class="w-full h-full object-cover">
49        <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/20 to-transparent"></div>
50        <div class="absolute bottom-12 left-0 w-full px-6 md:px-12 max-w-[1400px] mx-auto right-0 flex flex-wrap items-end justify-between gap-6">
51            <div class="space-y-4">
52                
53                <h1 class="text-[clamp(1.5rem,4vw,4.5rem)] font-black text-white uppercase tracking-tighter leading-[1.1]">5379 Wellburn Drive</h1>
54                <div class="flex items-center gap-6 text-slate-400 font-bold uppercase tracking-[0.2em] text-xs md:text-sm"><span>Delta</span><span class="opacity-20">|</span><span class="text-white">5 BED • 4.5 BATH • 2623 SQFT</span></div>
55            </div>
56            <div class="p-4 md:p-6 glass-panel rounded-3xl border border-white/10 hidden md:flex"><img src="images/logo.jpg" class="h-16 object-contain"></div>
57        </div>
58    </div>
59
60    <div class="max-w-[1440px] mx-auto px-6 md:px-12 pt-12 md:pt-20 pb-32">
61        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 md:gap-20">
62            <div class="lg:col-span-8">
63                <div class="flex justify-start md:justify-center gap-6 md:gap-12 overflow-x-auto border-b border-white/5 py-6 mb-8 scrollbar-hide">
64                    <div onclick="switchTab('gallery')" id="btn-gallery" class="tab-btn active whitespace-nowrap px-2 py-2 text-[11px] font-black uppercase tracking-[0.2em]">Gallery</div>
65                    <div onclick="switchTab('floorplan')" id="btn-floorplan" class="tab-btn whitespace-nowrap px-2 py-2 text-[11px] font-black uppercase tracking-[0.2em]">Floor Plan</div>
66                    <div onclick="switchTab('interactive')" id="btn-interactive" class="tab-btn whitespace-nowrap px-2 py-2 text-[11px] font-black uppercase tracking-[0.2em]">Interactive</div>
67                    
68                    <div onclick="switchTab('map')" id="btn-map" class="tab-btn whitespace-nowrap px-2 py-2 text-[11px] font-black uppercase tracking-[0.2em]">Location &amp; Map</div>
69                </div>
70
71                <div id="gallery" class="tab-content active">
72                    <!-- Website Fast Scroller & Slideshow Controller Ribbon -->
73                    <div class="w-full mb-6">
74                        <div class="bg-slate-900/90 backdrop-blur-xl border border-white/10 rounded-3xl p-4 md:p-5 shadow-2xl space-y-3">
75                            <div class="flex flex-wrap items-center justify-between gap-3 px-1">
76                                <div class="flex items-center gap-2.5">
77                                    <span id="export-status-dot" class="w-2.5 h-2.5 rounded-full animate-ping" style="background-color: #f97316"></span>
78                                    <div class="flex flex-col">
79                                        <span id="export-status-title" class="text-[11px] font-black uppercase tracking-wider text-white">Slideshow Mode (2s Auto-Play)</span>
80                                        <span id="export-status-sub" class="text-[9px] font-mono text-slate-400">Auto-advancing every 2 seconds</span>
81                                    </div>
82                                </div>
83                                <div class="flex items-center gap-2">
84                                    <button id="export-play-btn" type="button" onclick="toggleExportSlideshowPlay()" class="text-[10px] font-black uppercase px-3 py-1.5 rounded-xl border transition-all cursor-pointer" style="background-color: #f9731620; color: #f97316; border-color: #f9731640;">
85                                        ⏸ Pause
86                                    </button>
87                                    <button type="button" onclick="toggleExportThumbStrip()" class="text-[10px] font-bold px-3 py-1.5 rounded-xl border uppercase transition-all cursor-pointer" style="background-color: #f9731615; color: #f97316; border-color: #f9731630;">
88                                        Thumbnails ▼
89                                    </button>
90                                    <button type="button" onclick="setExportSlide(0)" class="text-[10px] font-bold text-slate-400 hover:text-white bg-slate-800/80 px-2.5 py-1.5 rounded-xl border border-white/5 uppercase transition-colors cursor-pointer">
91                                        First ⬆
92                                    </button>
93                                    <button type="button" onclick="setExportSlide(GALLERY_IMAGES.length - 1)" class="text-[10px] font-bold text-slate-400 hover:text-white bg-slate-800/80 px-2.5 py-1.5 rounded-xl border border-white/5 uppercase transition-colors cursor-pointer">
94                                        Last ⬇
95                                    </button>
96                                </div>
97                            </div>
98
99                            <!-- 2-Second Timer Progress Bar -->
100                            <div id="export-timer-track" class="w-full bg-slate-950 h-1.5 rounded-full overflow-hidden border border-white/5 relative">
101                                <div id="export-timer-bar" class="h-full rounded-full transition-all duration-75" style="width: 0%; background-color: #f97316; box-shadow: 0 0 10px #f9731680"></div>
102                            </div>
103
104                            <!-- Horizontal Slider / Range Bar -->
105                            <div class="relative flex items-center gap-2.5 px-1 pt-1 pb-1">
106                                <button type="button" onclick="changeExportSlide(-1)" class="w-8 h-8 rounded-xl bg-slate-800 border border-white/10 text-slate-200 active:scale-95 flex items-center justify-center text-xs font-bold shrink-0 transition-all hover:bg-slate-700 cursor-pointer">
107                                    ◀
108                                </button>
109                                <div class="relative flex-grow flex items-center h-8">
110                                    <input id="export-slider-input" type="range" min="0" max="53" value="
1100" oninput="setExportSlide(parseInt(this.value, 10))" class="w-full h-3 bg-slate-800 border border-white/10 rounded-lg appearance-none cursor-pointer focus:outline-none" style="accent-color: #f97316">
111                                </div>
112                                <button type="button" onclick="changeExportSlide(1)" class="w-8 h-8 rounded-xl bg-slate-800 border border-white/10 text-slate-200 active:scale-95 flex items-center justify-center text-xs font-bold shrink-0 transition-all hover:bg-slate-700 cursor-pointer">
113                                    ▶
114                                </button>
115                                <div id="export-slide-badge" class="shrink-0 px-3 py-1.5 rounded-xl text-xs font-mono font-black min-w-[65px] text-center border shadow-md" style="background-color: #f9731615; border-color: #f9731635; color: #f97316">
116                                    #1 <span class="text-slate-500 text-[10px]">/ 54</span>
117                                </div>
118                            </div>
119
120                            <!-- Collapsible Thumbnail Strip -->
121                            <div id="export-thumb-strip" class="flex gap-2.5 overflow-x-auto py-3 px-1 scrollbar-thin mt-2 border-t border-white/5" style="display: none;">
122                                
123                                    <button type="button" onclick="setExportSlide(0)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer scale-105 shadow-xl" style="border-color: #f97316; box-shadow: 0 0 15px #f9731640">
124                                        <img src="images/gallery/img_0.jpg" loading="lazy" class="w-full h-full object-cover">
125                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">1</span>
126                                    </button>
127                                
128                                    <button type="button" onclick="setExportSlide(1)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
129                                        <img src="images/gallery/img_1.jpg" loading="lazy" class="w-full h-full object-cover">
130                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">2</span>
131                                    </button>
132                                
133                                    <button type="button" onclick="setExportSlide(2)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
134                                        <img src="images/gallery/img_2.jpg" loading="lazy" class="w-full h-full object-cover">
135                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">3</span>
136                                    </button>
137                                
138                                    <button type="button" onclick="setExportSlide(3)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
139                                        <img src="images/gallery/img_3.jpg" loading="lazy" class="w-full h-full object-cover">
140                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">4</span>
141                                    </button>
142                                
143                                    <button type="button" onclick="setExportSlide(4)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
144                                        <img src="images/gallery/img_4.jpg" loading="lazy" class="w-full h-full object-cover">
145                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">5</span>
146                                    </button>
147                                
148                                    <button type="button" onclick="setExportSlide(5)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
149                                        <img src="images/gallery/img_5.jpg" loading="lazy" class="w-full h-full object-cover">
150                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">6</span>
151                                    </button>
152                                
153                                    <button type="button" onclick="setExportSlide(6)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
154                                        <img src="images/gallery/img_6.jpg" loading="lazy" class="w-full h-full object-cover">
155                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">7</span>
156                                    </button>
157                                
158                                    <button type="button" onclick="setExportSlide(7)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
159                                        <img src="images/gallery/img_7.jpg" loading="lazy" class="w-full h-full object-cover">
160                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">8</span>
161                                    </button>
162                                
163                                    <button type="button" onclick="setExportSlide(8)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
164                                        <img src="images/gallery/img_8.jpg" loading="lazy" class="w-full h-full object-cover">
165                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">9</span>
166                                    </button>
167                                
168                                    <button type="button" onclick="setExportSlide(9)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
169                                        <img src="images/gallery/img_9.jpg" loading="lazy" class="w-full h-full object-cover">
170                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">10</span>
171                                    </button>
172                                
173                                    <button type="button" onclick="setExportSlide(10)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
174                                        <img src="images/gallery/img_10.jpg" loading="lazy" class="w-full h-full object-cover">
175                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">11</span>
176                                    </button>
177                                
178                                    <button type="button" onclick="setExportSlide(11)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
179                                        <img src="images/gallery/img_11.jpg" loading="lazy" class="w-full h-full object-cover">
180                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">12</span>
181                                    </button>
182                                
183                                    <button type="button" onclick="setExportSlide(12)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
184                                        <img src="images/gallery/img_12.jpg" loading="lazy" class="w-full h-full object-cover">
185                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">13</span>
186                                    </button>
187                                
188                                    <button type="button" onclick="setExportSlide(13)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
189                                        <img src="images/gallery/img_13.jpg" loading="lazy" class="w-full h-full object-cover">
190                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">14</span>
191                                    </button>
192                                
193                                    <button type="button" onclick="setExportSlide(14)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
194                                        <img src="images/gallery/img_14.jpg" loading="lazy" class="w-full h-full object-cover">
195                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">15</span>
196                                    </button>
197                                
198                                    <button type="button" onclick="setExportSlide(15)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
199                                        <img src="images/gallery/img_15.jpg" loading="lazy" class="w-full h-full object-cover">
200                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">16</span>
201                                    </button>
202                                
203                                    <button type="button" onclick="setExportSlide(16)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
204                                        <img src="images/gallery/img_16.jpg" loading="lazy" class="w-full h-full object-cover">
205                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">17</span>
206                                    </button>
207                                
208                                    <button type="button" onclick="setExportSlide(17)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
209                                        <img src="images/gallery/img_17.jpg" loading="lazy" class="w-full h-full object-cover">
210                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">18</span>
211                                    </button>
212                                
213                                    <button type="button" onclick="setExportSlide(18)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
214                                        <img src="images/gallery/img_18.jpg" loading="lazy" class="w-full h-full object-cover">
215                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">19</span>
216                                    </button>
217                                
218                                    <button type="button" onclick="setExportSlide(19)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
219                                        <img src="images/gallery/img_19.jpg" loading="lazy" class="w-full h-full object-cover">
220                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">20</span>
221                                    </button>
222                                
223                                    <button type="button" onclick="setExportSlide(20)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
224                                        <img src="images/gallery/img_20.jpg" loading="lazy" class="w-full h-full object-cover">
225                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">21</span>
226                                    </button>
227                                
228                                    <button type="button" onclick="setExportSlide(21)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
229                                        <img src="images/gallery/img_21.jpg" loading="lazy" class="w-full h-full object-cover">
230                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">22</span>
231                                    </button>
232                                
233                                    <button type="button" onclick="setExportSlide(22)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
234                                        <img src="images/gallery/img_22.jpg" loading="lazy" class="w-full h-full object-cover">
235                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">23</span>
236                                    </button>
237                                
238                                    <button type="button" onclick="setExportSlide(23)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
239                                        <img src="images/gallery/img_23.jpg" loading="lazy" class="w-full h-full object-cover">
240                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">24</span>
241                                    </button>
242                                
243                                    <button type="button" onclick="setExportSlide(24)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
244                                        <img src="images/gallery/img_24.jpg" loading="lazy" class="w-full h-full object-cover">
245                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">25</span>
246                                    </button>
247                                
248                                    <button type="button" onclick="setExportSlide(25)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
249                                        <img src="images/gallery/img_25.jpg" loading="lazy" class="w-full h-full object-cover">
250                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">26</span>
251                                    </button>
252                                
253                                    <button type="button" onclick="setExportSlide(26)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
254                                        <img src="images/gallery/img_26.jpg" loading="lazy" class="w-full h-full object-cover">
255                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">27</span>
256                                    </button>
257                                
258                                    <button type="button" onclick="setExportSlide(27)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
259                                        <img src="images/gallery/img_27.jpg" loading="lazy" class="w-full h-full object-cover">
260                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">28</span>
261                                    </button>
262                                
263                                    <button type="button" onclick="setExportSlide(28)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
264                                        <img src="images/gallery/img_28.jpg" loading="lazy" class="w-full h-full object-cover">
265                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">29</span>
266                                    </button>
267                                
268                                    <button type="button" onclick="setExportSlide(29)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
269                                        <img src="images/gallery/img_29.jpg" loading="lazy" class="w-full h-full object-cover">
270                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">30</span>
271                                    </button>
272                                
273                                    <button type="button" onclick="setExportSlide(30)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
274                                        <img src="images/gallery/img_30.jpg" loading="lazy" class="w-full h-full object-cover">
275                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">31</span>
276                                    </button>
277                                
278                                    <button type="button" onclick="setExportSlide(31)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
279                                        <img src="images/gallery/img_31.jpg" loading="lazy" class="w-full h-full object-cover">
280                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">32</span>
281                                    </button>
282                                
283                                    <button type="button" onclick="setExportSlide(32)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
284                                        <img src="images/gallery/img_32.jpg" loading="lazy" class="w-full h-full object-cover">
285                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">33</span>
286                                    </button>
287                                
288                                    <button type="button" onclick="setExportSlide(33)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
289                                        <img src="images/gallery/img_33.jpg" loading="lazy" class="w-full h-full object-cover">
290                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">34</span>
291                                    </button>
292                                
293                                    <button type="button" onclick="setExportSlide(34)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
294                                        <img src="images/gallery/img_34.jpg" loading="lazy" class="w-full h-full object-cover">
295                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">35</span>
296                                    </button>
297                                
298                                    <button type="button" onclick="setExportSlide(35)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
299                                        <img src="images/gallery/img_35.jpg" loading="lazy" class="w-full h-full object-cover">
300                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">36</span>
301                                    </button>
302                                
303                                    <button type="button" onclick="setExportSlide(36)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
304                                        <img src="images/gallery/img_36.jpg" loading="lazy" class="w-full h-full object-cover">
305                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">37</span>
306                                    </button>
307                                
308                                    <button type="button" onclick="setExportSlide(37)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
309                                        <img src="images/gallery/img_37.jpg" loading="lazy" class="w-full h-full object-cover">
310                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">38</span>
311                                    </button>
312                                
313                                    <button type="button" onclick="setExportSlide(38)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
314                                        <img src="images/gallery/img_38.jpg" loading="lazy" class="w-full h-full object-cover">
315                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">39</span>
316                                    </button>
317                                
318                                    <button type="button" onclick="setExportSlide(39)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
319                                        <img src="images/gallery/img_39.jpg" loading="lazy" class="w-full h-full object-cover">
320                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">40</span>
321                                    </button>
322                                
323                                    <button type="button" onclick="setExportSlide(40)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
324                                        <img src="images/gallery/img_40.jpg" loading="lazy" class="w-full h-full object-cover">
325                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">41</span>
326                                    </button>
327                                
328                                    <button type="button" onclick="setExportSlide(41)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
329                                        <img src="images/gallery/img_41.jpg" loading="lazy" class="w-full h-full object-cover">
330                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">42</span>
331                                    </button>
332                                
333                                    <button type="button" onclick="setExportSlide(42)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
334                                        <img src="images/gallery/img_42.jpg" loading="lazy" class="w-full h-full object-cover">
335                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">43</span>
336                                    </button>
337                                
338                                    <button type="button" onclick="setExportSlide(43)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
339                                        <img src="images/gallery/img_43.jpg" loading="lazy" class="w-full h-full object-cover">
340                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">44</span>
341                                    </button>
342                                
343                                    <button type="button" onclick="setExportSlide(44)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
344                                        <img src="images/gallery/img_44.jpg" loading="lazy" class="w-full h-full object-cover">
345                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">45</span>
346                                    </button>
347                                
348                                    <button type="button" onclick="setExportSlide(45)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
349                                        <img src="images/gallery/img_45.jpg" loading="lazy" class="w-full h-full object-cover">
350                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">46</span>
351                                    </button>
352                                
353                                    <button type="button" onclick="setExportSlide(46)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
354                                        <img src="images/gallery/img_46.jpg" loading="lazy" class="w-full h-full object-cover">
355                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">47</span>
356                                    </button>
357                                
358                                    <button type="button" onclick="setExportSlide(47)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
359                                        <img src="images/gallery/img_47.jpg" loading="lazy" class="w-full h-full object-cover">
360                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">48</span>
361                                    </button>
362                                
363                                    <button type="button" onclick="setExportSlide(48)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
364                                        <img src="images/gallery/img_48.jpg" loading="lazy" class="w-full h-full object-cover">
365                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">49</span>
366                                    </button>
367                                
368                                    <button type="button" onclick="setExportSlide(49)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
369                                        <img src="images/gallery/img_49.jpg" loading="lazy" class="w-full h-full object-cover">
370                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">50</span>
371                                    </button>
372                                
373                                    <button type="button" onclick="setExportSlide(50)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
374                                        <img src="images/gallery/img_50.jpg" loading="lazy" class="w-full h-full object-cover">
375                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">51</span>
376                                    </button>
377                                
378                                    <button type="button" onclick="setExportSlide(51)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
379                                        <img src="images/gallery/img_51.jpg" loading="lazy" class="w-full h-full object-cover">
380                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">52</span>
381                                    </button>
382                                
383                                    <button type="button" onclick="setExportSlide(52)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
384                                        <img src="images/gallery/img_52.jpg" loading="lazy" class="w-full h-full object-cover">
385                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">53</span>
386                                    </button>
387                                
388                                    <button type="button" onclick="setExportSlide(53)" class="export-thumb-item relative shrink-0 w-16 h-16 rounded-2xl overflow-hidden border-2 transition-all cursor-pointer border-white/10 opacity-60 hover:opacity-100" style="">
389                                        <img src="images/gallery/img_53.jpg" loading="lazy" class="w-full h-full object-cover">
390                                        <span class="absolute bottom-0 inset-x-0 bg-black/75 text-[9px] font-mono text-white text-center font-bold">54</span>
391                                    </button>
392                                
393                            </div>
394
395                            <!-- PROMINENT BUTTON ON THE WEBSITE BELOW THE SCROLL BAR -->
396                            <div class="pt-2 border-t border-white/5">
397                                <button id="export-view-mode-btn" type="button" onclick="toggleExportViewMode()" class="w-full py-3.5 px-5 rounded-2xl font-black uppercase tracking-wider text-xs shadow-2xl transition-all flex items-center justify-center gap-3 border active:scale-[0.99] cursor-pointer" style="background-color: #f97316; border-color: rgba(255,255,255,0.25); color: #ffffff; box-shadow: 0 10px 25px -5px #f9731660">
398                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-white">
399                                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25a2.25 2.25 0 0 1-2.25 2.25h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25h-2.25a2.25 2.25 0 0 1-2.25-2.25v-2.25Z" />
400                                    </svg>
401                                    <span>See as Gallery (Populate All Images)</span>
402                                </button>
403                            </div>
404                        </div>
405                    </div>
406
407                    <!-- Slideshow Mode Container -->
408                    <div id="export-slideshow-container" class="relative group rounded-3xl overflow-hidden bg-slate-900 border border-white/10 shadow-2xl aspect-[16/10] max-h-[700px] flex items-center justify-center">
409                        <img id="export-slideshow-img" src="images/gallery/img_0.jpg" onclick="openLightbox(exportSlideIndex)" class="w-full h-full object-contain cursor-pointer transition-transform duration-500 hover:scale-[1.02]">
410                        <button type="button" onclick="changeExportSlide(-1)" class="absolute left-4 top-1/2 -translate-y-1/2 w-11 h-11 rounded-full bg-slate-950/70 border border-white/20 text-white flex items-center justify-center opacity-80 hover:opacity-100 hover:scale-110 active:scale-95 transition-all shadow-2xl backdrop-blur-md cursor-pointer">◀</button>
411                        <button type="button" onclick="changeExportSlide(1)" class="absolute right-4 top-1/2 -translate-y-1/2 w-11 h-11 rounded-full bg-slate-950/70 border border-white/20 text-white flex items-center justify-center opacity-80 hover:opacity-100 hover:scale-110 active:scale-95 transition-all shadow-2xl backdrop-blur-md cursor-pointer">▶</button>
412                        <div class="absolute bottom-4 inset-x-4 flex items-center justify-between pointer-events-none">
413                            <span id="export-slideshow-hud" class="px-3.5 py-1.5 rounded-full bg-slate-950/80 backdrop-blur-md border border-white/15 text-xs font-mono font-bold text-white shadow-lg">Photo #1 of 54</span>
414                            <span class="px-3.5 py-1.5 rounded-full bg-slate-950/80 backdrop-blur-md border border-white/15 text-[10px] font-bold uppercase text-slate-300 shadow-lg">Click photo to expand 🔍</span>
415                        </div>
416                    </div>
417
418                    <!-- Gallery Grid View Container (Hidden initially when in slideshow mode) -->
419                    <div id="export-gallery-container" style="display: none;" class="w-full">
420                        <div class="columns-1 sm:columns-2 gap-4 md:gap-6">
421                            
422                                <div id="export-gallery-photo-0" onclick="openLightbox(0)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
423                                    <img src="images/gallery/img_0.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 1">
424                                </div>
425                            
426                                <div id="export-gallery-photo-1" onclick="openLightbox(1)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
427                                    <img src="images/gallery/img_1.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 2">
428                                </div>
429                            
430                                <div id="export-gallery-photo-2" onclick="openLightbox(2)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
431                                    <img src="images/gallery/img_2.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 3">
432                                </div>
433                            
434                                <div id="export-gallery-photo-3" onclick="openLightbox(3)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
435                                    <img src="images/gallery/img_3.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 4">
436                                </div>
437                            
438                                <div id="export-gallery-photo-4" onclick="openLightbox(4)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
439                                    <img src="images/gallery/img_4.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 5">
440                                </div>
441                            
442                                <div id="export-gallery-photo-5" onclick="openLightbox(5)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
443                                    <img src="images/gallery/img_5.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 6">
444                                </div>
445                            
446                                <div id="export-gallery-photo-6" onclick="openLightbox(6)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
447                                    <img src="images/gallery/img_6.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 7">
448                                </div>
449                            
450                                <div id="export-gallery-photo-7" onclick="openLightbox(7)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
451                                    <img src="images/gallery/img_7.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 8">
452                                </div>
453                            
454                                <div id="export-gallery-photo-8" onclick="openLightbox(8)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
455                                    <img src="images/gallery/img_8.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 9">
456                                </div>
457                            
458                                <div id="export-gallery-photo-9" onclick="openLightbox(9)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
459                                    <img src="images/gallery/img_9.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 10">
460                                </div>
461                            
462                                <div id="export-gallery-photo-10" onclick="openLightbox(10)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
463                                    <img src="images/gallery/img_10.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 11">
464                                </div>
465                            
466                                <div id="export-gallery-photo-11" onclick="openLightbox(11)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
467                                    <img src="images/gallery/img_11.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 12">
468                                </div>
469                            
470                                <div id="export-gallery-photo-12" onclick="openLightbox(12)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
471                                    <img src="images/gallery/img_12.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 13">
472                                </div>
473                            
474                                <div id="export-gallery-photo-13" onclick="openLightbox(13)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
475                                    <img src="images/gallery/img_13.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 14">
476                                </div>
477                            
478                                <div id="export-gallery-photo-14" onclick="openLightbox(14)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
479                                    <img src="images/gallery/img_14.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 15">
480                                </div>
481                            
482                                <div id="export-gallery-photo-15" onclick="openLightbox(15)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
483                                    <img src="images/gallery/img_15.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 16">
484                                </div>
485                            
486                                <div id="export-gallery-photo-16" onclick="openLightbox(16)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
487                                    <img src="images/gallery/img_16.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 17">
488                                </div>
489                            
490                                <div id="export-gallery-photo-17" onclick="openLightbox(17)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
491                                    <img src="images/gallery/img_17.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 18">
492                                </div>
493                            
494                                <div id="export-gallery-photo-18" onclick="openLightbox(18)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
495                                    <img src="images/gallery/img_18.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 19">
496                                </div>
497                            
498                                <div id="export-gallery-photo-19" onclick="openLightbox(19)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
499                                    <img src="images/gallery/img_19.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 20">
500                                </div>
501                            
502                                <div id="export-gallery-photo-20" onclick="openLightbox(20)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
503                                    <img src="images/gallery/img_20.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 21">
504                                </div>
505                            
506                                <div id="export-gallery-photo-21" onclick="openLightbox(21)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
507                 
507                   <img src="images/gallery/img_21.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 22">
508                                </div>
509                            
510                                <div id="export-gallery-photo-22" onclick="openLightbox(22)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
511                                    <img src="images/gallery/img_22.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 23">
512                                </div>
513                            
514                                <div id="export-gallery-photo-23" onclick="openLightbox(23)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
515                                    <img src="images/gallery/img_23.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 24">
516                                </div>
517                            
518                                <div id="export-gallery-photo-24" onclick="openLightbox(24)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
519                                    <img src="images/gallery/img_24.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 25">
520                                </div>
521                            
522                                <div id="export-gallery-photo-25" onclick="openLightbox(25)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
523                                    <img src="images/gallery/img_25.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 26">
524                                </div>
525                            
526                                <div id="export-gallery-photo-26" onclick="openLightbox(26)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
527                                    <img src="images/gallery/img_26.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 27">
528                                </div>
529                            
530                                <div id="export-gallery-photo-27" onclick="openLightbox(27)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
531                                    <img src="images/gallery/img_27.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 28">
532                                </div>
533                            
534                                <div id="export-gallery-photo-28" onclick="openLightbox(28)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
535                                    <img src="images/gallery/img_28.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 29">
536                                </div>
537                            
538                                <div id="export-gallery-photo-29" onclick="openLightbox(29)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
539                                    <img src="images/gallery/img_29.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 30">
540                                </div>
541                            
542                                <div id="export-gallery-photo-30" onclick="openLightbox(30)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
543                                    <img src="images/gallery/img_30.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 31">
544                                </div>
545                            
546                                <div id="export-gallery-photo-31" onclick="openLightbox(31)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
547                                    <img src="images/gallery/img_31.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 32">
548                                </div>
549                            
550                                <div id="export-gallery-photo-32" onclick="openLightbox(32)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
551                                    <img src="images/gallery/img_32.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 33">
552                                </div>
553                            
554                                <div id="export-gallery-photo-33" onclick="openLightbox(33)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
555                                    <img src="images/gallery/img_33.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 34">
556                                </div>
557                            
558                                <div id="export-gallery-photo-34" onclick="openLightbox(34)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
559                                    <img src="images/gallery/img_34.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 35">
560                                </div>
561                            
562                                <div id="export-gallery-photo-35" onclick="openLightbox(35)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
563                                    <img src="images/gallery/img_35.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 36">
564                                </div>
565                            
566                                <div id="export-gallery-photo-36" onclick="openLightbox(36)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
567                                    <img src="images/gallery/img_36.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 37">
568                                </div>
569                            
570                                <div id="export-gallery-photo-37" onclick="openLightbox(37)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
571                                    <img src="images/gallery/img_37.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 38">
572                                </div>
573                            
574                                <div id="export-gallery-photo-38" onclick="openLightbox(38)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
575                                    <img src="images/gallery/img_38.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 39">
576                                </div>
577                            
578                                <div id="export-gallery-photo-39" onclick="openLightbox(39)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
579                                    <img src="images/gallery/img_39.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 40">
580                                </div>
581                            
582                                <div id="export-gallery-photo-40" onclick="openLightbox(40)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
583                                    <img src="images/gallery/img_40.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 41">
584                                </div>
585                            
586                                <div id="export-gallery-photo-41" onclick="openLightbox(41)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
587                                    <img src="images/gallery/img_41.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 42">
588                                </div>
589                            
590                                <div id="export-gallery-photo-42" onclick="openLightbox(42)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
591                                    <img src="images/gallery/img_42.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 43">
592                                </div>
593                            
594                                <div id="export-gallery-photo-43" onclick="openLightbox(43)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
595                                    <img src="images/gallery/img_43.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 44">
596                                </div>
597                            
598                                <div id="export-gallery-photo-44" onclick="openLightbox(44)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
599                                    <img src="images/gallery/img_44.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 45">
600                                </div>
601                            
602                                <div id="export-gallery-photo-45" onclick="openLightbox(45)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
603                                    <img src="images/gallery/img_45.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 46">
604                                </div>
605                            
606                                <div id="export-gallery-photo-46" onclick="openLightbox(46)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
607                                    <img src="images/gallery/img_46.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 47">
608                                </div>
609                            
610                                <div id="export-gallery-photo-47" onclick="openLightbox(47)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
611                                    <img src="images/gallery/img_47.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 48">
612                                </div>
613                            
614                                <div id="export-gallery-photo-48" onclick="openLightbox(48)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
615                                    <img src="images/gallery/img_48.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 49">
616                                </div>
617                            
618                                <div id="export-gallery-photo-49" onclick="openLightbox(49)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
619                                    <img src="images/gallery/img_49.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 50">
620                                </div>
621                            
622                                <div id="
622export-gallery-photo-50" onclick="openLightbox(50)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
623                                    <img src="images/gallery/img_50.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 51">
624                                </div>
625                            
626                                <div id="export-gallery-photo-51" onclick="openLightbox(51)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
627                                    <img src="images/gallery/img_51.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 52">
628                                </div>
629                            
630                                <div id="export-gallery-photo-52" onclick="openLightbox(52)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
631                                    <img src="images/gallery/img_52.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 53">
632                                </div>
633                            
634                                <div id="export-gallery-photo-53" onclick="openLightbox(53)" class="break-inside-avoid w-full rounded-3xl overflow-hidden border border-white/10 bg-slate-900 shadow-xl mb-4 md:mb-6 cursor-pointer group hover:border-white/25 transition-all duration-300">
635                                    <img src="images/gallery/img_53.jpg" loading="lazy" decoding="async" class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-700" alt="Gallery photo 54">
636                                </div>
637                            
638                        </div>
639                    </div>
640                </div>
641                
642                <div id="floorplan" class="tab-content">
643                    
644                    <div class="space-y-8">
645                        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 p-6 glass-panel rounded-3xl border border-white/10">
646                            <div>
647                                <h3 class="text-sm font-black text-white uppercase tracking-wider">Architectural Floor Plan</h3>
648                                <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-0.5">Click numbered hotspot pins to view room photography</p>
649                            </div>
650                            <div class="flex items-center gap-3">
651                                <div class="px-3 py-1.5 bg-orange-500/10 border border-orange-500/30 rounded-xl text-[10px] font-black text-orange-400 uppercase tracking-widest">🎯 19 Hotspots</div>
652                                <a href="images/floorplan.jpg" download="FloorPlan.png" class="px-4 py-2.5 bg-gradient-to-r from-orange-600 to-amber-600 hover:from-orange-500 hover:to-amber-500 text-white font-black text-[10px] uppercase tracking-widest rounded-xl shadow-lg transition-all flex items-center gap-2">
653                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-3.5 h-3.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" /></svg>
654                                    Download Floor Plan
655                                </a>
656                            </div>
657                        </div>
658                        <div class="p-4 sm:p-8 bg-slate-900 rounded-[2.5rem] border border-white/10 flex flex-col items-center justify-center shadow-2xl relative overflow-hidden group">
659                            <div class="w-full flex flex-wrap items-center justify-between gap-3 mb-4 p-3.5 bg-slate-950/80 backdrop-blur-md rounded-2xl border border-white/10 z-30">
660                                <div class="flex flex-wrap items-center gap-2">
661                                    <span class="text-[10px] font-black text-orange-400 uppercase tracking-widest mr-1">🔍 Blueprint Zoom:</span>
662                                    <button onclick="zoomExportFloorPlan(-0.25)" class="w-7 h-7 rounded-lg bg-slate-800 hover:bg-slate-700 text-white font-black text-xs flex items-center justify-center border border-white/10 cursor-pointer">-</button>
663                                    <button onclick="setExportFloorPlanZoom(1)" class="px-2.5 py-1 rounded-lg text-[10px] font-black bg-slate-900 text-slate-400 border border-white/10 hover:text-white cursor-pointer">100%</button>
664                                    <button onclick="setExportFloorPlanZoom(1.25)" class="px-2.5 py-1 rounded-lg text-[10px] font-black bg-slate-900 text-slate-400 border border-white/10 hover:text-white cursor-pointer">125%</button>
665                                    <button onclick="setExportFloorPlanZoom(1.5)" class="px-2.5 py-1 rounded-lg text-[10px] font-black bg-slate-900 text-slate-400 border border-white/10 hover:text-white cursor-pointer">150%</button>
666                                    <button onclick="setExportFloorPlanZoom(2)" class="px-2.5 py-1 rounded-lg text-[10px] font-black bg-slate-900 text-slate-400 border border-white/10 hover:text-white cursor-pointer">200%</button>
667                                    <button onclick="setExportFloorPlanZoom(2.5)" class="px-2.5 py-1 rounded-lg text-[10px] font-black bg-slate-900 text-slate-400 border border-white/10 hover:text-white cursor-pointer">250%</button>
668                                    <button onclick="zoomExportFloorPlan(0.25)" class="w-7 h-7 rounded-lg bg-slate-800 hover:bg-slate-700 text-white font-black text-xs flex items-center justify-center border border-white/10 cursor-pointer">+</button>
669                                </div>
670                                <div class="flex items-center gap-2">
671                                    <span class="hidden sm:inline-block text-[9px] font-bold text-slate-500 uppercase tracking-widest">Pins stay small when zoomed</span>
672                                    <a href="images/floorplan.jpg" download="FloorPlan.png" class="px-3 py-1.5 bg-slate-900 hover:bg-slate-800 text-white border border-white/20 rounded-xl text-[10px] font-black uppercase tracking-wider backdrop-blur-md shadow-xl flex items-center gap-1.5 transition-all">
673                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-3.5 h-3.5 text-orange-400"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" /></svg>
674                                        Download
675                                    </a>
676                                </div>
677                            </div>
678                            <div id="export-floorplan-scroll" class="w-full max-h-[75vh] overflow-auto rounded-2xl p-1 bg-slate-950/60 border border-white/5 flex justify-start items-start select-none">
679                                <div id="export-floorplan-canvas" class="relative w-full max-w-4xl bg-white rounded-2xl overflow-hidden shadow-2xl transition-transform duration-200 shrink-0 origin-top-left">
680                                    <img src="images/floorplan.jpg" class="block w-full h-auto pointer-events-none">
681                                    
682                                        <div style="left: 41%; top: 76%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
683                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
684                                            <button onclick="openLightbox(1, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all">
685                                                1
686                                            </button>
687                                            <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50">
688                                                <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_1.jpg" class="w-full h-full object-cover"></div>
689                                                <div class="space-y-1">
690                                                    <div class="flex items-center justify-between">
691                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #1</span>
692                                                        <span class="text-[8px] font-bold text-slate-500">Spot #1</span>
693                                                    </div>
694                                                    
695                                                    <button onclick="openLightbox(1, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button>
696                                                </div>
697                                            </div>
698                                        </div>
699                                        
700                                        <div style="left: 41%; top: 65%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
701                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
702                                            <button onclick="openLightbox(4, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all">
703                                                2
704                                            </button>
705                                            <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50">
706                                                <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_4.jpg" class="w-full h-full object-cover"></div>
707                                                <div class="space-y-1">
708                                                    <div class="flex items-center justify-between">
709                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #2</span>
710                                                        <span class="text-[8px] font-bold text-slate-500">Spot #2</span>
711                                                    </div>
712                                                    
713                                                    <button onclick="openLightbox(4, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button>
714                                                </div>
715                                            </div>
716                                        </div>
717                                        
718                                        <div style="left: 29%; top: 42%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
719                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
720                                            <button onclick="openLightbox(6, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all">
721                                                3
722                                            </button>
723                                            <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50">
724                                                <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_6.jpg" class="w-full h-full object-cover"></div>
725                                                <div class="space-y-1">
726                                                    <div class="flex items-center justify-between">
727                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #3</span>
728                                                        <span class="text-[8px] font-bold text-slate-500">Spot #3</span>
729                                                    </div>
730                                                    
731                                                    <button onclick="openLightbox(6, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button>
732                                                </div>
733                                            </div>
734                                        </div>
735                                        
736                                        <div style="left: 41%; top: 50%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
737                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
738                                            <button onclick="openLightbox(14, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all">
739                                                4
740                                            </button>
741                                            <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50">
742                                                <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_14.jpg" class="w-full h-full object-cover"></div>
743                                                <div class="space-y-1">
744                                                    <div class="flex items-center justify-between">
745                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #4</span>
746                                                        <span class="text-[8px] font-bold text-slate-500">Spot #4</span>
747                                                    </div>
748                                                    
749                                                    <button onclick="openLightbox(14, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button>
750                                                </div>
751                                            </div>
752                                        </div>
753                                        
754                                        <div style="left: 39%; top: 40%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
755                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
756                                            <button onclick="openLightbox(17, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all">
757                                                5
758                                            </button>
759                                            <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50">
760                                                <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_17.jpg" class="w-full h-full object-cover"></div>
761                                                <div class="space-y-1">
762                                                    <div class="flex items-center justify-between">
763                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #5</span>
764                                                        <span class="text-[8px] font-bold text-slate-500">Spot #5</span>
765                                                    </div>
766                                                    
767                                                    <button onclick="openLightbox(17, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button>
768                                                </div>
769                                            </div>
770                                        </div>
771                                        
772                                        <div style="left: 9%; top: 50%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
773                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
774                                            <button onclick="openLightbox(19, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all">
775                                                6
776                                            </button>
777                                            <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50">
778                                                <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_19.jpg" class="w-full h-full object-cover"></div>
779                                                <div class="space-y-1">
780                                                    <div class="flex items-center justify-between">
781                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #6</span>
782                                                        <span class="text-[8px] font-bold text-slate-500">Spot #6</span>
783                                                    </div>
784                                                    
785                                                    <button onclick="openLightbox(19, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button>
786                                                </div>
787                                            </div>
788                                        </div>
789                                        
790                                        <div style="left: 6%; top: 58%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
791                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
792                                            <button onclick="openLightbox(20, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all">
793                                                7
794                                            </button>
795                                            <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50">
796                                                <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_20.jpg" class="w-full h-full object-cover"></div>
797                                                <div class="space-y-1">
798                                                    <div class="flex items-center justify-between">
799                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #7</span>
800                                                        <span class="text-[8px] font-bold text-slate-500">Spot #7</span>
801                                                    </div>
802                                                    
803                                                    <button onclick="openLightbox(20, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button>
804                                                </div>
805                                            </div>
806                                        </div>
807                                        
808                                        <div style="left: 15%; top: 59%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
809                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
810                                            <button onclick="openLightbox(21, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all">
811                                                8
812                                            </button>
813                                            <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50">
814                                                <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_21.jpg" class="w-full h-full object-cover"></div>
815                                                <div class="space-y-1">
816                                                    <div class="flex items-center justify-between">
817                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #8</span>
818                                                        <span class="text-[8px] font-bold text-slate-500">Spot #8</span>
819                                                    </div>
820                                                    
821                                                    <button onclick="openLightbox(21, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button>
822                                                </div>
823                                            </div>
824                                        </div>
825                                        
826                                        <div style="left: 8%; top: 72%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
827                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
828                                            <button onclick="openLightbox(23, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all">
829                                                9
830                                            </button>
831                                            <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50">
832                                                <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_23.jpg" class="w-full h-full object-cover"></div>
833                                                <div class="space-y-1">
834                                                    <div class="flex items-center justify-between">
835                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #9</span>
836                                                        <span class="text-[8px] font-bold text-slate-500">Spot #9</span>
837                                                    </div>
838                                                    
839                                                    <button onclick="openLightbox(23, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button>
840                                                </div>
841                                            </div>
842                                        </div>
843                                        
844                                        <div style="left: 27%; top: 78%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
845                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
846                                            <button onclick="openLightbox(24, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all">
847                                                10
848                                            </button>
849                                            <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50">
850                                                <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_24.jpg" class="w-full h-full object-cover"></div>
851                                                <div class="space-y-1">
852                                                    <div class="flex items-center justify-between">
853                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #10</span>
854                                                        <span class="text-[8px] font-bold text-slate-500">Spot #10</span>
855                                                    </div>
856                                                    
857                                                    <button onclick="openLightbox(24, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button>
858                                                </div>
859                                            </div>
860                                        </div>
861                                        
862                                        <div style="left: 32%; top: 69%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
863                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
864                                            <button onclick="openLightbox(25, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all">
865                                                11
866                                            </button>
867                                            <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50">
868                                                <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_25.jpg" class="w-full h-full object-cover"></div>
869                                                <div class="space-y-1">
870                                                    <div class="flex items-center justify-between">
871                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #11</span>
872                                                        <span class="text-[8px] font-bold text-slate-500">Spot #11</span>
873                                                    </div>
874                                                    
875                                                    <button onclick="openLightbox(25, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button>
876                                                </div>
877                                            </div>
878                                        </div>
879                                        
880                                        <div style="left: 58%; top: 53%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
881                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
882                                            <button onclick="openLightbox(26, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all">
883                                                12
884                                            </button>
885                                            <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50">
886                                                <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_26.jpg" class="w-full h-full object-cover"></div>
887                                                <div class="space-y-1">
888                                                    <div class="flex items-center justify-between">
889                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #12</span>
890                                                        <span class="text-[8px] font-bold text-slate-500">Spot #12</span>
891                                                    </div>
892                                                    
893                                                    <button onclick="openLightbox(26, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button>
894                                                </div>
895                                            </div>
896                                        </div>
897                                        
898                                        <div style="left: 71%; top: 47%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
899                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
900                                            <button onclick="openLightbox(29, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all">
901                                                13
902                                            </button>
903                                            <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50">
904                                                <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_29.jpg" class="w-full h-full object-cover"></div>
905                                                <div class="space-y-1">
906                                                    <div class="flex items-center justify-between">
907                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #13</span>
908                                                        <span class="text-[8px] font-bold text-slate-500">Spot #13</span>
909                                                    </div>
910                                                    
911                                                    <button onclick="openLightbox(29, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button>
912                                                </div>
913                                            </div>
914                                        </div>
915                                        
916                                        <div style="left: 66%; top: 72%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
917                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
918                                            <button onclick="openLightbox(33, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all">
919                                                14
920                                            </button>
921                                            <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50">
922                                                <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_33.jpg" class="w-full h-full object-cover"></div>
923                                                <div class="space-y-1">
924                                                    <div class="flex items-center justify-between">
925                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #14</span>
926                                                        <span class="text-[8px] font-bold text-slate-500">Spot #14</span>
927                                                    </div>
928                                                    
929                                                    <button onclick="openLightbox(33, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button>
930                                                </div>
931                                            </div>
932                                        </div>
933                                        
934                                        <div style="left: 55%; top: 64%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
935                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
936                                            <button onclick="openLightbox(34, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all">
937                                                15
938                                            </button>
939                                            <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50">
940                                                <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_34.jpg" class="w-full h-full object-cover"></div>
941                                                <div class="space-y-1">
942                                                    <div class="flex items-center justify-between">
943                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #15</span>
944                                                        <span class="text-[8px] font-bold text-slate-500">Spot #15</span>
945                                                    </div>
946                                                    
947                                                    <button onclick="openLightbox(34, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button>
948                                                </div>
949                                            </div>
950                                        </div>
951                                        
952                                        <div style="left: 84%; top: 42%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
953                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
954                                            <button onclick="openLightbox(35, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all">
955                                                16
956                                            </button>
957                                            <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50">
958                                                <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_35.jpg" class="w-full h-full object-cover"></div>
959                                                <div class="space-y-1">
960                                                    <div class="flex items-center justify-between">
961                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #16</span>
962                                                        <span class="text-[8px] font-bold text-slate-500">Spot #16</span>
963                                                    </div>
964                                                    
965                                                    <button onclick="openLightbox(35, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button>
966                                                </div>
967                                            </div>
968                                        </div>
969                                        
970                                        <div style="left: 92%; top: 46%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
971                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
972                                            <button onclick="openLightbox(36, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all">
973                                                17
974                                            </button>
975                                            <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50">
976                                                <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_36.jpg" class="w-full h-full object-cover"></div>
977                                                <div class="space-y-1">
978                                                    <div class="flex items-center justify-between">
979                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #17</span>
980                                                        <span class="text-[8px] font-bold text-slate-500">Spot #17</span>
981                                                    </div>
982                                                    
983                                                    <button onclick="openLightbox(36, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button>
984                                                </div>
985                                            </div>
986                                        </div>
987                                        
988                                        <div style="left: 92%; top: 59%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
989                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
990                                            <button onclick="openLightbox(37, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all">
991                                                18
992                                            </button>
993                                            <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50">
994                                                <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_37.jpg" class="w-full h-full object-cover"></div>
995                                                <div class="space-y-1">
996                                                    <div class="flex items-center justify-between">
997                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #18</span>
998                                                        <span class="text-[8px] font-bold text-slate-500">Spot #18</span>
999                                                    </div>
1000                                                    
1001                                                    <button onclick="openLightbox(37, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button>
1002                                                </div>
1003                                            </div>
1004                                        </div>
1005                                        
1006                                        <div style="left: 42%; top: 33%; transform: translate(-50%, -50%) scale(1); transform-origin: center center;" class="export-hotspot-pin absolute z-20 cursor-pointer group/pin">
1007                                            <div class="absolute inset-0 -m-2 rounded-full bg-orange-500/40 animate-ping pointer-events-none"></div>
1008                                            <button onclick="openLightbox(38, true, false)" class="relative w-6 h-6 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-[8px] sm:text-[10px] font-black shadow-2xl border-2 bg-slate-950 text-orange-400 border-orange-500 hover:bg-orange-500 hover:text-white transition-all">
1009                                                19
1010                                            </button>
1011                                            <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-60 p-3 bg-slate-950/95 border border-orange-500/40 rounded-2xl shadow-2xl backdrop-blur-xl opacity-0 scale-95 pointer-events-none group-hover/pin:opacity-100 group-hover/pin:scale-100 group-hover/pin:pointer-events-auto transition-all duration-300 z-50">
1012                                                <div class="w-full h-24 rounded-xl overflow-hidden mb-2 bg-slate-900"><img src="images/gallery/img_38.jpg" class="w-full h-full object-cover"></div>
1013                                                <div class="space-y-1">
1014                                                    <div class="flex items-center justify-between">
1015                                                        <span class="text-[10px] font-black text-orange-400 uppercase tracking-wider">Hotspot Pin #19</span>
1016                                                        <span class="text-[8px] font-bold text-slate-500">Spot #19</span>
1017                                                    </div>
1018                                                    
1019                                                    <button onclick="openLightbox(38, true, false)" class="w-full mt-2 py-1 bg-orange-600 text-white rounded-lg font-black text-[8px] uppercase tracking-widest shadow">View Image</button>
1020                                                </div>
1021                                            </div>
1022                                        </div>
1023                                        
1024                                </div>
1025                            </div>
1026                        </div>
1027                    </div>
1028                    
1029
1030                    
1031                </div>
1032                
1033                <div id="interactive" class="tab-content space-y-12">
1034                    <div class="w-full h-[72vh] sm:h-[82vh] min-h-[520px] md:min-h-[640px] rounded-[2rem] sm:rounded-[2.5rem] overflow-hidden border border-white/10 bg-black shadow-2xl"><iframe src="https://kuula.co/share/collection/7TTMW?logo=-1&info=0&fs=1&vr=1&gyro=0&initload=0&autorotate=0.67&autop=10&autopalt=1&thumbs=1&alpha=0.60&nav=1&sd=1" width="100%" height="100%" frameBorder="0" allowFullScreen allow="xr-spatial-tracking; accelerometer; gyroscope; magnetometer; fullscreen; autoplay; web-share" loading="lazy" referrerpolicy="no-referrer-when-downgrade" class="w-full h-full border-0" title="Matterport 3D Tour"></iframe></div>
1035                    
1036                </div>
1037
1038
1039                
1040                
1041                
1042                
1043                <div id="map" class="tab-content space-y-6">
1044                    <!-- Map & Location Header -->
1045                    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 p-6 glass-panel rounded-3xl border border-white/10">
1046                        <div>
1047                            <div class="flex items-center gap-2">
1048                                <span class="w-2 h-2 rounded-full animate-pulse" style="background-color: var(--brand)"></span>
1049                                <h3 class="text-sm font-black text-white uppercase tracking-wider">Location &amp; Neighborhood</h3>
1050                            </div>
1051                            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">
1052                                5379 Wellburn Drive, Delta
1053                            </p>
1054                        </div>
1055                        <div class="flex items-center gap-2">
1056                            <button onclick="copyExportAddress()" class="px-4 py-2 bg-slate-900 hover:bg-slate-800 text-slate-200 hover:text-white border border-white/10 rounded-xl text-[10px] font-black uppercase tracking-wider transition-all flex items-center gap-2 cursor-pointer shadow-lg">
1057                                <span id="export-copy-icon">📋</span> <span id="export-copy-text">Copy Address</span>
1058                            </button>
1059                        </div>
1060                    </div>
1061
1062                    <!-- Smart 1-Tap Navigation & Driving Directions -->
1063                    <div class="p-5 bg-slate-900/90 backdrop-blur-xl rounded-3xl border border-white/10 shadow-2xl space-y-4">
1064                        <div class="flex items-center justify-between">
1065                            <span class="text-[10px] font-black uppercase tracking-widest text-slate-400 flex items-center gap-1.5">
1066                                <span>🧭</span> 1-Tap Navigation &amp; Directions
1067                            </span>
1068                            <span class="text-[9px] font-bold text-emerald-400 uppercase tracking-wider flex items-center gap-1">
1069                                <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span> Free GPS Deep Links
1070                            </span>
1071                        </div>
1072                        
1073                        <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
1074                            <a href="https://www.google.com/maps/dir/?api=1&destination=5379%20Wellburn%20Drive%2C%20Delta" target="_blank" rel="noopener noreferrer" class="p-3.5 bg-slate-950/70 hover:bg-slate-800/80 border border-white/10 hover:border-blue-500/50 rounded-2xl flex flex-col items-center justify-center gap-1.5 text-center group transition-all">
1075                                <span class="text-xl group-hover:scale-110 transition-transform">🗺️</span>
1076                                <span class="text-[10px] font-black text-white uppercase tracking-wider">Google Maps</span>
1077                                <span class="text-[8px] font-bold text-slate-400">Live Traffic &amp; Route</span>
1078                            </a>
1079
1080                            <a href="https://maps.apple.com/?daddr=5379%20Wellburn%20Drive%2C%20Delta" target="_blank" rel="noopener noreferrer" class="p-3.5 bg-slate-950/70 hover:bg-slate-800/80 border border-white/10 hover:border-slate-400/50 rounded-2xl flex flex-col items-center justify-center gap-1.5 text-center group transition-all">
1081                                <span class="text-xl group-hover:scale-110 transition-transform">🍎</span>
1082                                <span class="text-[10px] font-black text-white uppercase tracking-wider">Apple Maps</span>
1083                                <span class="text-[8px] font-bold text-slate-400">iOS &amp; CarPlay</span>
1084                            </a>
1085
1086                            <a href="https://waze.com/ul?q=5379%20Wellburn%20Drive%2C%20Delta&navigate=yes" target="_blank" rel="noopener noreferrer" class="p-3.5 bg-slate-950/70 hover:bg-slate-800/80 border border-white/10 hover:border-cyan-500/50 rounded-2xl flex flex-col items-center justify-center gap-1.5 text-center group transition-all">
1087                                <span class="text-xl group-hover:scale-110 transition-transform">🚙</span>
1088                                <span class="text-[10px] font-black text-white uppercase tracking-wider">Waze GPS</span>
1089                                <span class="text-[8px] font-bold text-slate-400">Real-Time Hazards</span>
1090                            </a>
1091
1092                            <a href="https://www.google.com/maps/search/?api=1&query=5379%20Wellburn%20Drive%2C%20Delta" target="_blank" rel="noopener noreferrer" class="p-3.5 bg-slate-950/70 hover:bg-slate-800/80 border border-white/10 hover:border-amber-500/50 rounded-2xl flex flex-col items-center justify-center gap-1.5 text-center group transition-all">
1093                                <span class="text-xl group-hover:scale-110 transition-transform">🚶</span>
1094                                <span class="text-[10px] font-black text-white uppercase tracking-wider">Street View</span>
1095                                <span class="text-[8px] font-bold text-slate-400">Walk The Block</span>
1096                            </a>
1097                        </div>
1098                    </div>
1099
1100                    <!-- Map Layer Switcher & POI Category Filters -->
1101                    <div class="space-y-3">
1102                        <div class="flex flex-wrap items-center justify-between gap-3 p-3.5 bg-slate-950/80 backdrop-blur-md rounded-2xl border border-white/10">
1103                            <div class="flex flex-wrap items-center gap-2">
1104                                <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest mr-1">🗺️ Layer:</span>
1105                                <button onclick="setExportMapLayer('roadmap')" id="btn-layer-roadmap" class="export-layer-btn px-3 py-1.5 rounded-xl text-[10px] font-black transition-all cursor-pointer bg-slate-800 text-white border border-white/20">Roadmap</button>
1106                                <button onclick="setExportMapLayer('satellite')" id="btn-layer-satellite" class="export-layer-btn px-3 py-1.5 rounded-xl text-[10px] font-black transition-all cursor-pointer bg-slate-900 text-slate-400 border border-white/10 hover:text-white">🛰️ Satellite</button>
1107                                <button onclick="setExportMapLayer('terrain')" id="btn-layer-terrain" class="export-layer-btn px-3 py-1.5 rounded-xl text-[10px] font-black transition-all cursor-pointer bg-slate-900 text-slate-400 border border-white/10 hover:text-white">🏔️ Terrain</button>
1108                            </div>
1109
1110                            <div class="flex items-center gap-2">
1111                                <a href="https://maps.google.com/maps?q=5379%20Wellburn%20Drive%2C%20Delta" target="_blank" rel="noopener noreferrer" class="px-3.5 py-1.5 bg-slate-900 hover:bg-slate-800 text-slate-300 hover:text-white border border-white/10 rounded-xl text-[10px] font-black uppercase tracking-wider transition-all flex items-center gap-1.5 shadow-lg">
1112                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-3.5 h-3.5 text-blue-400"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /></svg>
1113                                    Full Map
1114                                </a>
1115                            </div>
1116                        </div>
1117
1118                        <!-- Points of Interest Pills -->
1119                        <div class="flex items-center gap-2 overflow-x-auto py-2 px-1 scrollbar-hide">
1120                            <span class="text-[9px] font-black uppercase tracking-widest text-slate-500 whitespace-nowrap mr-1">Nearby POIs:</span>
1121                            <button onclick="setExportPoi('all', '')" id="poi-btn-all" class="export-poi-btn px-3 py-1.5 rounded-xl text-[10px] font-black whitespace-nowrap transition-all cursor-pointer border" style="background-color: var(--brand); color: #fff; border-color: var(--brand);">📍 Property Pin</button>
1122                            <button onclick="setExportPoi('schools', 'schools')" id="poi-btn-schools" class="export-poi-btn px-3 py-1.5 rounded-xl text-[10px] font-black whitespace-nowrap transition-all cursor-pointer bg-slate-900 text-slate-400 border border-white/10 hover:text-white">🏫 Schools</button>
1123                            <button onclick="setExportPoi('dining', 'restaurants cafes')" id="poi-btn-dining" class="export-poi-btn px-3 py-1.5 rounded-xl text-[10px] font-black whitespace-nowrap transition-all cursor-pointer bg-slate-900 text-slate-400 border border-white/10 hover:text-white">☕ Cafes &amp; Dining</button>
1124                            <button onclick="setExportPoi('parks', 'parks recreation')" id="poi-btn-parks" class="export-poi-btn px-3 py-1.5 rounded-xl text-[10px] font-black whitespace-nowrap transition-all cursor-pointer bg-slate-900 text-slate-400 border border-white/10 hover:text-white">🌲 Parks &amp; Rec</button>
1125                            <button onclick="setExportPoi('transit', 'transit train station')" id="poi-btn-transit" class="export-poi-btn px-3 py-1.5 rounded-xl text-[10px] font-black whitespace-nowrap transition-all cursor-pointer bg-slate-900 text-slate-400 border border-white/10 hover:text-white">🚆 Transit</button>
1126                            <button onclick="setExportPoi('shopping', 'grocery store shopping')" id="poi-btn-shopping" class="export-poi-btn px-3 py-1.5 rounded-xl text-[10px] font-black whitespace-nowrap transition-all cursor-pointer bg-slate-900 text-slate-400 border border-white/10 hover:text-white">🛍️ Groceries &amp; Retail</button>
1127                            <button onclick="setExportPoi('health', 'hospital urgent care')" id="poi-btn-health" class="export-poi-btn px-3 py-1.5 rounded-xl text-[10px] font-black whitespace-nowrap transition-all cursor-pointer bg-slate-900 text-slate-400 border border-white/10 hover:text-white">🏥 Medical</button>
1128                        </div>
1129
1130                        <!-- Active POI Search Indicator Banner -->
1131                        <div id="export-poi-banner" style="display: none;" class="p-3 bg-slate-900/90 rounded-xl border border-white/10 flex items-center justify-between">
1132                            <div class="flex items-center gap-2">
1133                                <span class="w-2 h-2 rounded-full bg-orange-400 animate-ping"></span>
1134                                <span id="export-poi-banner-text" class="text-[10px] font-black text-white uppercase tracking-wider"></span>
1135                            </div>
1136                            <button onclick="setExportPoi('all', '')" class="text-[9px] font-black text-orange-400 hover:text-white uppercase tracking-wider cursor-pointer">
1137                                Reset to Property Pin ✕
1138                            </button>
1139                        </div>
1140                    </div>
1141
1142                    <!-- Embedded Interactive Map Canvas -->
1143                    <div class="w-full h-[62vh] sm:h-[72vh] min-h-[460px] rounded-[2rem] sm:rounded-[2.5rem] overflow-hidden border border-white/10 bg-slate-950 shadow-2xl relative group">
1144                        <iframe 
1145                            id="export-map-iframe" 
1146                            src="https://maps.google.com/maps?q=5379%20Wellburn%20Drive%2C%20Delta&t=&z=15&ie=UTF8&iwloc=&output=embed" 
1147                            width="100%" 
1148                            height="100%" 
1149                            frameBorder="0" 
1150                            allowFullScreen 
1151                            loading="lazy" 
1152                            referrerpolicy="no-referrer-when-downgrade" 
1153                            class="w-full h-full border-0" 
1154                            title="Property Location Map"
1155                        ></iframe>
1156                    </div>
1157                </div>
1158                
1159
1160            </div>
1161
1162            <div class="lg:col-span-4">
1163                <div class="sticky top-10 space-y-6">
1164                    <div class="p-8 md:p-10 glass-panel rounded-[3rem] border border-white/10 space-y-8 text-center">
1165                        <div class="flex items-center justify-center gap-3">
1166                            <div class="w-28 h-28 rounded-full border-4 p-1 overflow-hidden shadow-2xl shrink-0" style="border-color: var(--brand)">
1167                                <img src="images/headshot.jpg" class="w-full h-full object-cover rounded-full">
1168                            </div>
1169                        </div>
1170                        <div class="space-y-4">
1171                            <span class="text-[10px] font-black text-slate-500 uppercase tracking-widest">Listing Associate</span>
1172                            
1173                            <div class="space-y-1">
1174                                <h3 class="text-xl font-black text-white uppercase tracking-tighter">Dinnell Real Estate Group</h3>
1175                                <p class="font-bold text-[10px] uppercase tracking-widest" style="color: var(--brand)">ReMax Westcoast</p>
1176                                <div class="flex flex-col gap-0.5 pt-1 text-[10px] font-bold uppercase text-slate-400">
1177                                   
1178                                   <div class="truncate">[email protected]</div>
1179                                </div>
1180                            </div>
1181
1182                            <a href="https://dinnell.ca" target="_blank" rel="noopener noreferrer" class="block truncate pt-2 underline underline-offset-4 text-[10px] font-bold uppercase" style="color: var(--brand)">dinnell.ca</a>
1183                        </div>
1184                        <button onclick="toggleModal(true)" class="w-full py-5 rounded-2xl bg-white text-slate-950 font-black uppercase tracking-widest text-[11px] shadow-xl hover:scale-105 transition-transform">Request Private Viewing</button>
1185                    </div>
1186
1187                    
1188
1189                    <div class="flex justify-center">
1190                        <img src="https://cmyixvfqicuycuhgqjnv.supabase.co/storage/v1/object/public/clients/logo2025_convertedpng.png" class="max-h-8 w-auto object-contain opacity-60 hover:opacity-100 transition-opacity" alt="Broker Logo">
1191                    </div>
1192                </div>
1193            </div>
1194        </div>
1195    </div>
1196
1197    <div id="contact-modal" class="fixed inset-0 z-[200] bg-slate-950/90 backdrop-blur-xl hidden items-center justify-center p-4" style="display: none">
1198        <div class="max-w-md w-full glass-panel p-8 md:p-10 rounded-[2.5rem] border border-white/10 shadow-2xl relative">
1199            <button onclick="toggleModal(false)" class="absolute top-6 right-6 p-2 text-slate-500 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2.5" stroke="currentColor" class="w-6 h-6"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /></svg></button>
1200            <div id="form-container" class="space-y-8">
1201                <div class="space-y-2"><h3 class="text-3xl font-black text-white uppercase tracking-tighter">Private Viewing</h3><p class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Property: 5379 Wellburn Drive</p></div>
1202                <form class='space-y-4' method='POST' name='property-inquiry'>
1203                    <input type="hidden" name="form-name" value="property-inquiry" /><input type="hidden" name="property_address" value="5379 Wellburn Drive" />
1204                    <div class="space-y-1"><label class="text-[9px] font-black text-slate-500 uppercase tracking-widest">Full Name</label><input required type="text" name="name" class="w-full bg-slate-900/50 border border-white/5 rounded-xl px-4 py-3 text-sm text-white focus:ring-1 focus:ring-orange-500 outline-none" /></div>
1205                    <div class="space-y-1"><label class="text-[9px] font-black text-slate-500 uppercase tracking-widest">Email Address</label><input required type="email" name="email" class="w-full bg-slate-900/50 border border-white/5 rounded-xl px-4 py-3 text-sm text-white focus:ring-1 focus:ring-orange-500 outline-none" /></div>
1206                    <div class="space-y-1"><label class="text-[9px] font-black text-slate-500 uppercase tracking-widest">Message</label><textarea name="message" rows="3" class="w-full bg-slate-900/50 border border-white/5 rounded-xl px-4 py-3 text-sm text-white focus:ring-1 focus:ring-orange-500 outline-none resize-none"></textarea></div>
1207                    <button type="submit" class="w-full py-4 mt-4 rounded-xl font-black uppercase tracking-widest text-[11px] text-white shadow-xl" style="background-color: var(--brand)">Send Inquiry</button>
1208                </form>
1209            </div>
1210        </div>
1211    </div>
1212
1213    
1213<script>
1214        const PROPERTY_LOC = "5379 Wellburn Drive, Delta";
1215        const PROPERTY_CITY = "Delta";
1216        const BRAND_COLOR = "#f97316";
1217        const GALLERY_IMAGES = ["images/gallery/img_0.jpg","images/gallery/img_1.jpg","images/gallery/img_2.jpg","images/gallery/img_3.jpg","images/gallery/img_4.jpg","images/gallery/img_5.jpg","images/gallery/img_6.jpg","images/gallery/img_7.jpg","images/gallery/img_8.jpg","images/gallery/img_9.jpg","images/gallery/img_10.jpg","images/gallery/img_11.jpg","images/gallery/img_12.jpg","images/gallery/img_13.jpg","images/gallery/img_14.jpg","images/gallery/img_15.jpg","images/gallery/img_16.jpg","images/gallery/img_17.jpg","images/gallery/img_18.jpg","images/gallery/img_19.jpg","images/gallery/img_20.jpg","images/gallery/img_21.jpg","images/gallery/img_22.jpg","images/gallery/img_23.jpg","images/gallery/img_24.jpg","images/gallery/img_25.jpg","images/gallery/img_26.jpg","images/gallery/img_27.jpg","images/gallery/img_28.jpg","images/gallery/img_29.jpg","images/gallery/img_30.jpg","images/gallery/img_31.jpg","images/gallery/img_32.jpg","images/gallery/img_33.jpg","images/gallery/img_34.jpg","images/gallery/img_35.jpg","images/gallery/img_36.jpg","images/gallery/img_37.jpg","images/gallery/img_38.jpg","images/gallery/img_39.jpg","images/gallery/img_40.jpg","images/gallery/img_41.jpg","images/gallery/img_42.jpg","images/gallery/img_43.jpg","images/gallery/img_44.jpg","images/gallery/img_45.jpg","
1217images/gallery/img_46.jpg","images/gallery/img_47.jpg","images/gallery/img_48.jpg","images/gallery/img_49.jpg","images/gallery/img_50.jpg","images/gallery/img_51.jpg","images/gallery/img_52.jpg","images/gallery/img_53.jpg"];
1218        const EMBEDDED_PANOS = {};
1219        let activeLightboxIdx = 0;
1220        
1221        function switchTab(tabId) {
1222            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
1223            document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
1224            const target = document.getElementById(tabId);
1225            if (target) target.classList.add('active');
1226            const btn = document.getElementById('btn-' + tabId);
1227            if (btn) btn.classList.add('active');
1228            if(tabId === 'drone360') window.dispatchEvent(new Event('resize')); 
1229        }
1230        
1231        function toggleModal(show) { document.getElementById('contact-modal').style.display = show ? 'flex' : 'none'; }
1232
1233        let currentExportZoom = 1;
1234        function setExportFloorPlanZoom(level) {
1235            currentExportZoom = Math.min(3, Math.max(1, level));
1236            const canvas = document.getElementById('export-floorplan-canvas');
1237            if (canvas) {
1238                canvas.style.transform = 'scale(' + currentExportZoom + ')';
1239                canvas.style.marginRight = currentExportZoom > 1 ? ((currentExportZoom - 1) * 100) + '%' : '0';
1240                canvas.style.marginBottom = currentExportZoom > 1 ? ((currentExportZoom - 1) * 100) + '%' : '0';
1241            }
1242            const pins = document.querySelectorAll('.export-hotspot-pin');
1243            const invScale = 1 / currentExportZoom;
1244            pins.forEach(function(pin) {
1245                pin.style.transform = 'translate(-50%, -50%) scale(' + invScale + ')';
1246            });
1247        }
1248        function zoomExportFloorPlan(delta) {
1249            setExportFloorPlanZoom(+(currentExportZoom + delta).toFixed(2));
1250        }
1251
1252
1253
1254        let pannellumViewer = null;
1255        let isHotspotLightbox = false;
1256        let hotspotIs360 = false;
1257
1258        function checkIs360(src, cb) {
1259            if (!src) return cb(false);
1260            if (isHotspotLightbox && hotspotIs360) {
1261                return cb(true);
1262            }
1263            cb(false);
1264        }
1265
1266        function openLightbox(index, isHotspot, is360) {
1267            isHotspotLightbox = !!isHotspot;
1268            hotspotIs360 = !!is360;
1269            activeLightboxIdx = index;
1270            updateLightbox();
1271            document.getElementById('lightbox').classList.add('active');
1272            document.body.style.overflow = 'hidden';
1273        }
1274        
1275        function closeLightbox() {
1276            if (pannellumViewer) {
1277                try { pannellumViewer.destroy(); } catch(e){}
1278                pannellumViewer = null;
1279            }
1280            document.getElementById('lightbox').classList.remove('active');
1281            document.body.style.overflow = 'auto';
1282        }
1283
1284        function changeLightbox(delta) {
1285            if (isHotspotLightbox) return;
1286            activeLightboxIdx = (activeLightboxIdx + delta + GALLERY_IMAGES.length) % GALLERY_IMAGES.length;
1287            updateLightbox();
1288        }
1289
1290        function updateLightbox() {
1291            const relativeSrc = GALLERY_IMAGES[activeLightboxIdx];
1292            const dataSrc = (EMBEDDED_PANOS && EMBEDDED_PANOS[activeLightboxIdx]) ? EMBEDDED_PANOS[activeLightboxIdx] : relativeSrc;
1293            const imgEl = document.getElementById('lightbox-img');
1294            const panoEl = document.getElementById('lightbox-pano');
1295            const badgeEl = document.getElementById('lightbox-badge');
1296            const counter = document.getElementById('lightbox-counter');
1297            const prevBtn = document.getElementById('lightbox-prev');
1298            const nextBtn = document.getElementById('lightbox-next');
1299
1300            if (prevBtn) prevBtn.style.display = isHotspotLightbox ? 'none' : 'block';
1301            if (nextBtn) nextBtn.style.display = isHotspotLightbox ? 'none' : 'block';
1302            if (counter) counter.innerText = isHotspotLightbox ? 'Hotspot Photo' : ((activeLightboxIdx + 1) + ' / ' + GALLERY_IMAGES.length);
1303
1304            if (pannellumViewer) {
1305                try { pannellumViewer.destroy(); } catch(e){}
1306                pannellumViewer = null;
1307            }
1308            if (panoEl) panoEl.innerHTML = '';
1309
1310            checkIs360(dataSrc, function(is360) {
1311                if (is360) {
1312                    imgEl.style.display = 'none';
1313                    panoEl.style.display = 'block';
1314                    badgeEl.style.display = 'flex';
1315
1316                    function initPannellum() {
1317                        if (window.pannellum) {
1318                            panoEl.innerHTML = '';
1319                            function createViewer(panoPath) {
1320                                try {
1321                                    pannellumViewer = pannellum.viewer('lightbox-pano', {
1322                                        type: 'equirectangular',
1323                                        panorama: panoPath,
1324                                        autoLoad: true,
1325                                        showZoomCtrl: true,
1326                                        compass: false,
1327                                        hfov: 100,
1328                                        minHfov: 30,
1329                                        maxHfov: 120,
1330                                        haov: 360,
1331                                        vaov: 180,
1332                                        vOffset: 0,
1333                                        friction: 0.15
1334                                    });
1335                                    setTimeout(function() {
1336                                        if (pannellumViewer) try { pannellumViewer.resize(); } catch(err){}
1337                                    }, 200);
1338                                } catch (e) {
1339                                    console.error("Pannellum init error:", e);
1340                                    if (panoPath !== relativeSrc) {
1341                                        createViewer(relativeSrc);
1342                                    }
1343                                }
1344                            }
1345                            createViewer(dataSrc);
1346                        } else {
1347                            setTimeout(initPannellum, 100);
1348                        }
1349                    }
1350                    initPannellum();
1351                } else {
1352                    panoEl.style.display = 'none';
1353                    badgeEl.style.display = 'none';
1354                    imgEl.style.display = 'block';
1355                    imgEl.src = relativeSrc;
1356                }
1357            });
1358        }
1359
1360        document.addEventListener('keydown', e => {
1361            if (!document.getElementById('lightbox').classList.contains('active')) return;
1362            if (e.key === 'Escape') closeLightbox();
1363            if (!isHotspotLightbox) {
1364                if (e.key === 'ArrowLeft') changeLightbox(-1);
1365                if (e.key === 'ArrowRight') changeLightbox(1);
1366            }
1367        });
1368
1369        // Website Slideshow & Fast Scroller Logic
1370        let exportViewMode = 'slideshow';
1371        let exportSlideIndex = 0;
1372        let isExportPlaying = true;
1373        let exportTimerStartTime = Date.now();
1374        let exportTimerInterval = null;
1375        let exportSlideCycleTimer = null;
1376
1377        function resetExportSlideshowTimer() {
1378            if (exportTimerInterval) clearInterval(exportTimerInterval);
1379            if (exportSlideCycleTimer) clearTimeout(exportSlideCycleTimer);
1380            const timerBar = document.getElementById('export-timer-bar');
1381
1382            if (exportViewMode !== 'slideshow' || !isExportPlaying || GALLERY_IMAGES.length <= 1) {
1383                if (timerBar) timerBar.style.width = '0%';
1384                return;
1385            }
1386
1387            exportTimerStartTime = Date.now();
1388            if (timerBar) timerBar.style.width = '0%';
1389
1390            exportTimerInterval = setInterval(function() {
1391                const elapsed = Date.now() - exportTimerStartTime;
1392                const pct = Math.min(100, (elapsed / 2000) * 100);
1393                if (timerBar) timerBar.style.width = pct + '%';
1394            }, 50);
1395
1396            exportSlideCycleTimer = setTimeout(function() {
1397                changeExportSlide(1);
1398            }, 2000);
1399        }
1400
1401        function setExportSlide(idx) {
1402            if (!GALLERY_IMAGES || GALLERY_IMAGES.length === 0) return;
1403            exportSlideIndex = (idx + GALLERY_IMAGES.length) % GALLERY_IMAGES.length;
1404            
1405            const imgEl = document.getElementById('export-slideshow-img');
1406            const sliderInput = document.getElementById('export-slider-input');
1407            const badgeEl = document.getElementById('export-slide-badge');
1408            const hudEl = document.getElementById('export-slideshow-hud');
1409
1410            if (imgEl && GALLERY_IMAGES[exportSlideIndex]) {
1411                imgEl.src = GALLERY_IMAGES[exportSlideIndex];
1412            }
1413            if (sliderInput) sliderInput.value = exportSlideIndex;
1414            if (badgeEl) badgeEl.innerHTML = '#' + (exportSlideIndex + 1) + ' <span class="text-slate-500 text-[10px]">/ ' + GALLERY_IMAGES.length + '</span>';
1415            if (hudEl) hudEl.innerText = 'Photo #' + (exportSlideIndex + 1) + ' of ' + GALLERY_IMAGES.length;
1416
1417            document.querySelectorAll('.export-thumb-item').forEach(function(el, i) {
1418                if (i === exportSlideIndex) {
1419                    el.classList.add('scale-105', 'shadow-xl');
1420                    el.style.borderColor = BRAND_COLOR;
1421                    el.style.boxShadow = '0 0 15px ' + BRAND_COLOR + '40';
1422                    el.style.opacity = '1';
1423                } else {
1424                    el.classList.remove('scale-105', 'shadow-xl');
1425                    el.style.borderColor = 'rgba(255,255,255,0.1)';
1426                    el.style.boxShadow = 'none';
1427                    el.style.opacity = '0.6';
1428                }
1429            });
1430
1431            if (exportViewMode === 'gallery') {
1432                var targetPhoto = document.getElementById('export-gallery-photo-' + exportSlideIndex);
1433                if (targetPhoto) {
1434                    targetPhoto.scrollIntoView({ behavior: 'smooth', block: 'center' });
1435                }
1436            }
1437
1438            resetExportSlideshowTimer();
1439        }
1440
1441        function changeExportSlide(delta) {
1442            setExportSlide(exportSlideIndex + delta);
1443        }
1444
1445        function toggleExportSlideshowPlay() {
1446            isExportPlaying = !isExportPlaying;
1447            const btn = document.getElementById('export-play-btn');
1448            const dot = document.getElementById('export-status-dot');
1449            const sub = document.getElementById('export-status-sub');
1450
1451            if (btn) {
1452                btn.innerText = isExportPlaying ? '⏸ Pause' : '▶ Play (2s)';
1453                btn.style.backgroundColor = isExportPlaying ? BRAND_COLOR + '20' : 'rgba(16, 185, 129, 0.15)';
1454                btn.style.color = isExportPlaying ? BRAND_COLOR : '#34d399';
1455            }
1456            if (dot) {
1457                if (isExportPlaying) dot.classList.add('animate-ping');
1458                else dot.classList.remove('animate-ping');
1459            }
1460            if (sub) {
1461                sub.innerText = isExportPlaying ? 'Auto-advancing every 2 seconds' : 'Slideshow Paused';
1462            }
1463            resetExportSlideshowTimer();
1464        }
1465
1466        function toggleExportThumbStrip() {
1467            const strip = document.getElementById('export-thumb-strip');
1468            if (strip) {
1469                strip.style.display = (strip.style.display === 'none' || !strip.style.display) ? 'flex' : 'none';
1470            }
1471        }
1472
1473        function toggleExportViewMode() {
1474            exportViewMode = exportViewMode === 'slideshow' ? 'gallery' : 'slideshow';
1475            const slideshowContainer = document.getElementById('export-slideshow-container');
1476            const galleryContainer = document.getElementById('export-gallery-container');
1477            const btn = document.getElementById('export-view-mode-btn');
1478            const statusTitle = document.getElementById('export-status-title');
1479            const timerTrack = document.getElementById('export-timer-track');
1480            const playBtn = document.getElementById('export-play-btn');
1481
1482            if (exportViewMode === 'slideshow') {
1483                if (slideshowContainer) slideshowContainer.style.display = 'flex';
1484                if (galleryContainer) galleryContainer.style.display = 'none';
1485                if (timerTrack) timerTrack.style.display = 'block';
1486                if (playBtn) playBtn.style.display = 'inline-flex';
1487                if (statusTitle) statusTitle.innerText = 'Slideshow Mode (2s Auto-Play)';
1488                if (btn) {
1489                    btn.style.backgroundColor = BRAND_COLOR;
1490                    btn.style.borderColor = 'rgba(255,255,255,0.25)';
1491                    btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-white"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25a2.25 2.25 0 0 1-2.25 2.25h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25h-2.25a2.25 2.25 0 0 1-2.25-2.25v-2.25Z" /></svg><span>See as Gallery (Populate All Images)</span>';
1492                }
1493            } else {
1494                if (slideshowContainer) slideshowContainer.style.display = 'none';
1495                if (galleryContainer) galleryContainer.style.display = 'block';
1496                if (timerTrack) timerTrack.style.display = 'none';
1497                if (playBtn) playBtn.style.display = 'none';
1498                if (statusTitle) statusTitle.innerText = 'Gallery Grid (' + GALLERY_IMAGES.length + ' Photos)';
1499                if (btn) {
1500                    btn.style.backgroundColor = 'rgba(30, 41, 59, 
15000.9)';
1501                    btn.style.borderColor = BRAND_COLOR + '50';
1502                    btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4 text-orange-400"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" /></svg><span>See as Slideshow (Auto 2s Per Image)</span>';
1503                }
1504            }
1505            resetExportSlideshowTimer();
1506        }
1507
1508        let currentExportMapLayer = 'roadmap';
1509        let currentExportPoiQuery = '';
1510        const BASE_MAP_ADDRESS = "5379 Wellburn Drive, Delta";
1511
1512        function updateExportMapSrc() {
1513            const tParam = currentExportMapLayer === 'satellite' ? 'k' : (currentExportMapLayer === 'terrain' ? 'p' : '');
1514            const zoom = currentExportPoiQuery ? 14 : (currentExportMapLayer === 'satellite' ? 17 : 15);
1515            const qStr = currentExportPoiQuery ? (currentExportPoiQuery + ' near ' + BASE_MAP_ADDRESS) : BASE_MAP_ADDRESS;
1516            const url = 'https://maps.google.com/maps?q=' + encodeURIComponent(qStr) + '&t=' + tParam + '&z=' + zoom + '&ie=UTF8&iwloc=&output=embed';
1517            const iframe = document.getElementById('export-map-iframe');
1518            if (iframe) iframe.src = url;
1519        }
1520
1521        function setExportMapLayer(layer) {
1522            currentExportMapLayer = layer;
1523            document.querySelectorAll('.export-layer-btn').forEach(function(btn) {
1524                btn.className = 'export-layer-btn px-3 py-1.5 rounded-xl text-[10px] font-black transition-all cursor-pointer bg-slate-900 text-slate-400 border border-white/10 hover:text-white';
1525            });
1526            const activeBtn = document.getElementById('btn-layer-' + layer);
1527            if (activeBtn) {
1528                activeBtn.className = 'export-layer-btn px-3 py-1.5 rounded-xl text-[10px] font-black transition-all cursor-pointer bg-slate-800 text-white border border-white/20 shadow-md';
1529            }
1530            updateExportMapSrc();
1531        }
1532
1533        function setExportPoi(poiId, query) {
1534            currentExportPoiQuery = query;
1535            document.querySelectorAll('.export-poi-btn').forEach(function(btn) {
1536                btn.style.backgroundColor = '';
1537                btn.style.color = '';
1538                btn.style.borderColor = '';
1539                btn.className = 'export-poi-btn px-3 py-1.5 rounded-xl text-[10px] font-black whitespace-nowrap transition-all cursor-pointer bg-slate-900 text-slate-400 border border-white/10 hover:text-white';
1540            });
1541            const activeBtn = document.getElementById('poi-btn-' + poiId);
1542            if (activeBtn) {
1543                activeBtn.style.backgroundColor = BRAND_COLOR;
1544                activeBtn.style.color = '#ffffff';
1545                activeBtn.style.borderColor = BRAND_COLOR;
1546            }
1547            const banner = document.getElementById('export-poi-banner');
1548            const bannerText = document.getElementById('export-poi-banner-text');
1549            if (banner && bannerText) {
1550                if (query) {
1551                    banner.style.display = 'flex';
1552                    bannerText.textContent = 'Highlighting nearby ' + poiId.toUpperCase() + ' around ' + BASE_MAP_ADDRESS;
1553                } else {
1554                    banner.style.display = 'none';
1555                }
1556            }
1557            updateExportMapSrc();
1558        }
1559
1560        function copyExportAddress() {
1561            navigator.clipboard.writeText(BASE_MAP_ADDRESS).then(function() {
1562                const text = document.getElementById('export-copy-text');
1563                const icon = document.getElementById('export-copy-icon');
1564                if (text) text.textContent = 'Address Copied!';
1565                if (icon) icon.textContent = '✅';
1566                setTimeout(function() {
1567                    if (text) text.textContent = 'Copy Address';
1568                    if (icon) icon.textContent = '📋';
1569                }, 2500);
1570            });
1571        }
1572
1573        setTimeout(function() {
1574            setExportSlide(0);
1575        }, 200);
1576
1577
1578    </script>
1578
1579</body>
1580</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.