diff --git a/classes.html b/classes.html
index 820b57b..4cda809 100644
--- a/classes.html
+++ b/classes.html
@@ -1,4 +1,4 @@
-﻿<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
@@ -6,246 +6,199 @@
   <title>Dance Classes — Sabor Flow Da Nang</title>
   <meta name="description" content="Latin dance classes in Da Nang. Find Salsa, Bachata, Kizomba, and Zouk classes for all levels.">
   <link rel="icon" type="image/jpeg" href="assets/logo.jpg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
 
-  <nav class="nav">
-    <div class="nav-container">
-      <a href="index.html" class="nav-brand">
-        <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-        <span class="nav-brand-name">SABOR FLOW <span class="nav-brand-city">Da Nang</span></span>
-      </a>
-      <button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
-        <span></span><span></span><span></span>
-      </button>
-      <ul class="nav-links" id="nav-links">
-        <li><a href="index.html">Home</a></li>
-        <li><a href="schedule.html">Schedule</a></li>
-        <li><a href="connect.html">Connect</a></li>
-        <li><a href="studios.html">Studios</a></li>
-        <li><a href="classes.html" class="active">Classes</a></li>
-        <li><a href="festivals.html">Festivals</a></li>
-      </ul>
-    </div>
+  <div class="sfB-bg" aria-hidden="true"></div>
+
+  <nav class="sfB-mobile-nav" id="sfB-mobile-nav">
+    <button class="mnav-close" id="sfB-mobile-nav-close">✕</button>
+    <a href="/">Home</a>
+    <a href="schedule.html">Schedule</a>
+    <a href="connect.html">Connect</a>
+    <a href="studios.html">Studios</a>
+    <a href="classes.html" class="active">Classes</a>
+    <a href="festivals.html">Festivals</a>
   </nav>
 
-  <div class="container">
-    <div class="page-header">
-      <p class="section-label">Da Nang &middot; Hoi An</p>
-      <h1>Dance Classes</h1>
-      <p class="subtitle">Whether you&rsquo;re just starting out or looking to sharpen your moves &mdash; there&rsquo;s a class for you.</p>
+  <header class="sfB-topbar">
+    <a href="/" class="logo">
+      <div class="mark"><img src="assets/logo.jpg" alt="Sabor Flow Da Nang"></div>
+      <div class="name">SABOR FLOW<span class="city">Da Nang</span></div>
+    </a>
+    <nav class="sfB-nav">
+      <a href="/">Home</a>
+      <a href="schedule.html">Schedule</a>
+      <a href="connect.html">Connect</a>
+      <a href="studios.html">Studios</a>
+      <a href="classes.html" class="active">Classes</a>
+      <a href="festivals.html">Festivals</a>
+    </nav>
+    <div class="topbar-right">
+      <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
+        @saborflowdanang
+      </a>
+      <button class="sfB-hamburger" id="sfB-hamburger" aria-label="Open menu">
+        <span></span><span></span><span></span>
+      </button>
+    </div>
+  </header>
+
+  <main class="sfB-page">
+    <div class="sfB-page-head">
+      <h1>Dance <em>Classes</em></h1>
+      <div class="info">
+        Whether you're just starting out or looking to sharpen your moves &mdash; there's a class for you in Da Nang and Hoi An.
+      </div>
     </div>
 
-    <div class="filter-bar">
-      <button class="filter-pill active" data-filter="all">All</button>
-      <button class="filter-pill" data-filter="salsa">Salsa</button>
-      <button class="filter-pill" data-filter="bachata">Bachata</button>
-      <button class="filter-pill" data-filter="kizomba">Kizomba</button>
-      <button class="filter-pill" data-filter="zouk">Zouk</button>
-      <button class="filter-pill" data-filter="beginner">Beginner</button>
-      <button class="filter-pill" data-filter="advanced">Advanced</button>
+    <div class="sfB-toolbar">
+      <div class="sfB-pills">
+        <button class="filter-pill active" data-filter="all">All</button>
+        <button class="filter-pill" data-filter="salsa">Salsa</button>
+        <button class="filter-pill" data-filter="bachata">Bachata</button>
+        <button class="filter-pill" data-filter="kizomba">Kizomba</button>
+        <button class="filter-pill" data-filter="zouk">Zouk</button>
+        <button class="filter-pill" data-filter="beginner">Beginner</button>
+        <button class="filter-pill" data-filter="advanced">Advanced</button>
+      </div>
     </div>
 
-    <div class="card-grid">
+    <div class="sfB-cards two">
 
       <!-- Lucho Giraldes — Salsa -->
-      <div class="card filterable-card" data-styles="salsa,beginner,intermediate,advanced">
-        <div class="card-body">
-          <div class="card-title">Lucho Giraldes — Salsa</div>
-          <div class="tags">
-            <span class="tag tag-salsa">Salsa On1</span>
-            <span class="tag tag-salsa">Salsa On2</span>
-            <span class="tag tag-beginner">Beginner</span>
-            <span class="tag tag-intermediate">Intermediate</span>
-            <span class="tag tag-advanced">Advanced</span>
-          </div>
-          <div class="card-info">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
-            <span>Lucho Giraldes &mdash; 20+ years experience</span>
-          </div>
-          <div class="card-info">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
-            <span>Various venues in Da Nang (see website for details)</span>
-          </div>
-          <div class="card-info">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
-            <span>Check website for current schedule</span>
-          </div>
-          <div class="card-links">
-            <a href="https://salsadanang.com" target="_blank" rel="noopener" class="card-link">
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
-              salsadanang.com
-            </a>
-            <a href="https://www.instagram.com/salsadanang/" target="_blank" rel="noopener" class="card-link">
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
-              @salsadanang
-            </a>
-          </div>
+      <div class="sfB-card-x filterable-card" data-styles="salsa,beginner,intermediate,advanced">
+        <div class="stripe salsa"></div>
+        <h3>Lucho Giraldes — Salsa</h3>
+        <div class="ts">
+          <span class="sfB-chip salsa">Salsa On1</span>
+          <span class="sfB-chip salsa">Salsa On2</span>
+        </div>
+        <div class="info">
+          <div class="row"><span class="ic">👤</span><span>Lucho Giraldes &mdash; 20+ years experience</span></div>
+          <div class="row"><span class="ic">📍</span><span>Various venues in Da Nang (see website)</span></div>
+          <div class="row"><span class="ic">📅</span><span>Check website for current schedule</span></div>
+          <div class="row"><span class="ic">🎓</span><span>Beginner · Intermediate · Advanced</span></div>
+        </div>
+        <div class="links">
+          <a href="https://salsadanang.com" target="_blank" rel="noopener">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+            salsadanang.com
+          </a>
+          <a href="https://www.instagram.com/salsadanang/" target="_blank" rel="noopener">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
+            @salsadanang
+          </a>
         </div>
       </div>
 
       <!-- Daisy Nguyen -->
-      <div class="card filterable-card" data-styles="bachata,kizomba,intermediate">
-        <div class="card-body">
-          <div class="card-title">Daisy Nguyen</div>
-          <div class="tags">
-            <span class="tag tag-bachata">Bachata</span>
-            <span class="tag tag-kizomba">Kizomba</span>
-            <span class="tag tag-intermediate">Intermediate</span>
-          </div>
-          <div class="card-info">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
-            <span>Daisy Nguyen &mdash; local instructor &amp; social organizer</span>
-          </div>
-          <div class="card-info">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
-            <span>Da Nang (venues change &mdash; follow for updates)</span>
-          </div>
-          <div class="card-info">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
-            <span>Tuesday at Caliz Bar &middot; Sunday at Corner Bar</span>
-          </div>
-          <div class="card-links">
-            <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="card-link">
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
-              Check Instagram
-            </a>
-          </div>
+      <div class="sfB-card-x filterable-card" data-styles="bachata,kizomba,intermediate">
+        <div class="stripe bachata"></div>
+        <h3>Daisy Nguyen</h3>
+        <div class="ts">
+          <span class="sfB-chip bachata">Bachata</span>
+          <span class="sfB-chip kizomba">Kizomba</span>
+        </div>
+        <div class="info">
+          <div class="row"><span class="ic">👤</span><span>Daisy Nguyen &mdash; local instructor &amp; social organizer</span></div>
+          <div class="row"><span class="ic">📍</span><span>Da Nang (venues change &mdash; follow for updates)</span></div>
+          <div class="row"><span class="ic">📅</span><span>Tuesday at Caliz Bar · Sunday at Corner Bar</span></div>
+        </div>
+        <div class="links">
+          <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
+            Check Instagram
+          </a>
         </div>
       </div>
 
       <!-- Frog Goose — Bachata Workshop -->
-      <div class="card filterable-card" data-styles="bachata,beginner,intermediate">
-        <div class="card-body">
-          <div class="card-title">Frog Goose — Bachata Workshop</div>
-          <div class="tags">
-            <span class="tag tag-bachata">Bachata</span>
-            <span class="tag tag-beginner">Beginner</span>
-            <span class="tag tag-intermediate">Intermediate</span>
-          </div>
-          <div class="card-info">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
-            <span>Luu Nhat Phuong, Phong &amp; Shai</span>
-          </div>
-          <div class="card-info">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
-            <span>292 Vo Nguyen Giap, Ngu Hanh Son, Da Nang</span>
-          </div>
-          <div class="card-info">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
-            <span>Every Monday &mdash; Workshop 8:30 PM &middot; Social from 9:30 PM</span>
-          </div>
-          <div class="card-links">
-            <a href="https://www.facebook.com/frog.goose/" target="_blank" rel="noopener" class="card-link">
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
-              Facebook
-            </a>
-          </div>
+      <div class="sfB-card-x filterable-card" data-styles="bachata,beginner,intermediate">
+        <div class="stripe bachata"></div>
+        <h3>Frog Goose — Bachata Workshop</h3>
+        <div class="ts">
+          <span class="sfB-chip bachata">Bachata</span>
+        </div>
+        <div class="info">
+          <div class="row"><span class="ic">👥</span><span>Luu Nhat Phuong, Phong &amp; Shai</span></div>
+          <div class="row"><span class="ic">📍</span><span>292 Vo Nguyen Giap, Ngu Hanh Son, Da Nang</span></div>
+          <div class="row"><span class="ic">📅</span><span>Every Monday &mdash; Workshop 8:30 PM · Social 9:30 PM</span></div>
+          <div class="row"><span class="ic">🎓</span><span>Beginner · Intermediate</span></div>
+        </div>
+        <div class="links">
+          <a href="https://www.facebook.com/frog.goose/" target="_blank" rel="noopener">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
+            Facebook
+          </a>
         </div>
       </div>
 
       <!-- Sean Kim — Kizomba & Bachata -->
-      <div class="card filterable-card" data-styles="kizomba,bachata,intermediate">
-        <div class="card-body">
-          <div class="card-title">Sean Kim — Kizomba &amp; Bachata</div>
-          <div class="tags">
-            <span class="tag tag-kizomba">Kizomba</span>
-            <span class="tag tag-bachata">Bachata</span>
-            <span class="tag tag-intermediate">Intermediate</span>
-          </div>
-          <div class="card-info">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
-            <span>Sean Kim &mdash; organizer of the Wednesday Bachata Kiz Night</span>
-          </div>
-          <div class="card-info">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
-            <span>Ket Fai Bar, Da Nang</span>
-          </div>
-          <div class="card-info">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
-            <span>Wednesday &mdash; Kizomba from 19:30 &middot; Bachata from 21:00</span>
-          </div>
-          <div class="card-links">
-            <a href="connect.html" class="card-link">
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-              Contact via Sabor Flow Da Nang
-            </a>
-          </div>
+      <div class="sfB-card-x filterable-card" data-styles="kizomba,bachata,intermediate">
+        <div class="stripe kizomba"></div>
+        <h3>Sean Kim — Kizomba &amp; Bachata</h3>
+        <div class="ts">
+          <span class="sfB-chip kizomba">Kizomba</span>
+          <span class="sfB-chip bachata">Bachata</span>
+        </div>
+        <div class="info">
+          <div class="row"><span class="ic">👤</span><span>Sean Kim &mdash; organizer of the Wednesday Bachata Kiz Night</span></div>
+          <div class="row"><span class="ic">📍</span><span>Ket Fai Bar, Da Nang</span></div>
+          <div class="row"><span class="ic">📅</span><span>Wednesday &mdash; Kizomba 7:30 PM · Bachata 9 PM</span></div>
+        </div>
+        <div class="links">
+          <a href="connect.html">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+            Contact via Sabor Flow
+          </a>
         </div>
       </div>
 
       <!-- 50 Decibels -->
-      <div class="card filterable-card" data-styles="kizomba,zouk,salsa,bachata,beginner">
-        <div class="card-body">
-          <div class="card-title">50 Decibels</div>
-          <div class="tags">
-            <span class="tag tag-kizomba">Kizomba</span>
-            <span class="tag tag-zouk">Zouk</span>
-            <span class="tag tag-salsa">Salsa</span>
-            <span class="tag tag-bachata">Bachata</span>
-            <span class="tag tag-beginner">Beginner-friendly</span>
-          </div>
-          <div class="card-info">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
-            <span>36 Đ. Ng. Thi Si, Bac My An, Ngu Hanh Son, Da Nang</span>
-          </div>
-          <div class="card-info">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
-            <span>Monday 9 PM &mdash; Kizomba &amp; Zouk night</span>
-          </div>
-          <div class="card-info">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
-            <span>Friday 9 PM &mdash; Latin Vibes (Salsa, Bachata, Kizomba)</span>
-          </div>
-          <div class="card-info">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
-            <span>~$3 USD cover</span>
-          </div>
+      <div class="sfB-card-x filterable-card" data-styles="kizomba,zouk,salsa,bachata,beginner">
+        <div class="stripe multi"></div>
+        <h3>50 Decibels</h3>
+        <div class="ts">
+          <span class="sfB-chip kizomba">Kizomba</span>
+          <span class="sfB-chip zouk">Zouk</span>
+          <span class="sfB-chip salsa">Salsa</span>
+          <span class="sfB-chip bachata">Bachata</span>
+        </div>
+        <div class="info">
+          <div class="row"><span class="ic">📍</span><span>36 Ng. Thi Si, Bac My An, Ngu Hanh Son, Da Nang</span></div>
+          <div class="row"><span class="ic">📅</span><span>Monday 9 PM &mdash; Kizomba &amp; Zouk night</span></div>
+          <div class="row"><span class="ic">📅</span><span>Friday 9 PM &mdash; Latin Vibes (Salsa, Bachata, Kizomba)</span></div>
+          <div class="row"><span class="ic">💵</span><span>~$3 USD cover · Beginner-friendly</span></div>
         </div>
       </div>
 
     </div>
 
-    <div class="mt-3" style="background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center">
-      <p style="color:var(--muted);margin-bottom:1rem">Teaching in Da Nang and not listed here? Get in touch.</p>
-      <a href="connect.html" class="btn btn-ghost">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-        <span>Contact Us</span>
-      </a>
+    <div class="sfB-suggest">
+      <p>Teaching in Da Nang and not listed here? Get in touch.</p>
+      <a href="connect.html" class="sfB-btn ghost">Contact Us</a>
     </div>
-  </div>
+  </main>
 
-  <footer class="footer" style="margin-top:4rem">
-    <div class="container">
-      <div class="footer-inner">
-        <div>
-          <a href="index.html" class="footer-brand">
-            <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-            <span class="footer-brand-name">SABOR FLOW <span class="footer-brand-city">Da Nang</span></span>
-          </a>
-          <p class="footer-tagline">Da Nang's Latin dance community</p>
-        </div>
-        <nav class="footer-nav">
-          <a href="index.html">Home</a>
-          <a href="schedule.html">Schedule</a>
-          <a href="connect.html">Connect</a>
-          <a href="studios.html">Studios</a>
-          <a href="classes.html">Classes</a>
-          <a href="festivals.html">Festivals</a>
-        </nav>
-        <div class="footer-social">
-          <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="footer-social-link">
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
-            @saborflowdanang
-          </a>
-          <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="footer-social-link">
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
-            Da Nang SBK Group
-          </a>
-        </div>
-      </div>
-      <div class="footer-bottom">Made with love for the Da Nang dance community</div>
+  <footer class="sfB-foot">
+    <div><strong>SABOR FLOW</strong> Da Nang &mdash; Latin dance community &copy; 2025</div>
+    <nav class="foot-links">
+      <a href="/">Home</a>
+      <a href="schedule.html">Schedule</a>
+      <a href="connect.html">Connect</a>
+      <a href="studios.html">Studios</a>
+      <a href="classes.html">Classes</a>
+      <a href="festivals.html">Festivals</a>
+    </nav>
+    <div class="foot-social">
+      <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a>
+      <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener">Facebook</a>
     </div>
   </footer>
 
diff --git a/connect.html b/connect.html
index e19fab6..b795f55 100644
--- a/connect.html
+++ b/connect.html
@@ -1,4 +1,4 @@
-﻿<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
@@ -6,135 +6,155 @@
   <title>Connect — Sabor Flow Da Nang</title>
   <meta name="description" content="Follow Sabor Flow Da Nang on Instagram and get in touch with the Latin dance community.">
   <link rel="icon" type="image/jpeg" href="assets/logo.jpg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
 
-  <nav class="nav">
-    <div class="nav-container">
-      <a href="index.html" class="nav-brand">
-        <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-        <span class="nav-brand-name">SABOR FLOW <span class="nav-brand-city">Da Nang</span></span>
-      </a>
-      <button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
-        <span></span><span></span><span></span>
-      </button>
-      <ul class="nav-links" id="nav-links">
-        <li><a href="index.html">Home</a></li>
-        <li><a href="schedule.html">Schedule</a></li>
-        <li><a href="connect.html" class="active">Connect</a></li>
-        <li><a href="studios.html">Studios</a></li>
-        <li><a href="classes.html">Classes</a></li>
-        <li><a href="festivals.html">Festivals</a></li>
-      </ul>
-    </div>
+  <div class="sfB-bg" aria-hidden="true"></div>
+
+  <nav class="sfB-mobile-nav" id="sfB-mobile-nav">
+    <button class="mnav-close" id="sfB-mobile-nav-close">✕</button>
+    <a href="/">Home</a>
+    <a href="schedule.html">Schedule</a>
+    <a href="connect.html" class="active">Connect</a>
+    <a href="studios.html">Studios</a>
+    <a href="classes.html">Classes</a>
+    <a href="festivals.html">Festivals</a>
   </nav>
 
-  <div class="container">
-    <div class="page-header">
-      <p class="section-label">Stay in the loop</p>
-      <h1>Connect</h1>
-      <p class="subtitle">Follow for the latest socials, photos, and community news.</p>
-    </div>
-
-    <!-- Instagram profile card -->
-    <div class="ig-profile-card">
-      <img src="assets/logo.jpg" alt="Sabor Flow Da Nang" class="ig-avatar">
-      <div class="ig-handle">@saborflowdanang</div>
-      <p class="ig-desc">Photos, videos, and announcements from Da Nang's Latin dance community. Social dances almost every day of the week.</p>
-      <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="btn btn-primary">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
-        <span>Open on Instagram</span>
+  <header class="sfB-topbar">
+    <a href="/" class="logo">
+      <div class="mark"><img src="assets/logo.jpg" alt="Sabor Flow Da Nang"></div>
+      <div class="name">SABOR FLOW<span class="city">Da Nang</span></div>
+    </a>
+    <nav class="sfB-nav">
+      <a href="/">Home</a>
+      <a href="schedule.html">Schedule</a>
+      <a href="connect.html" class="active">Connect</a>
+      <a href="studios.html">Studios</a>
+      <a href="classes.html">Classes</a>
+      <a href="festivals.html">Festivals</a>
+    </nav>
+    <div class="topbar-right">
+      <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
+        @saborflowdanang
       </a>
+      <button class="sfB-hamburger" id="sfB-hamburger" aria-label="Open menu">
+        <span></span><span></span><span></span>
+      </button>
+    </div>
+  </header>
+
+  <main class="sfB-page">
+    <div class="sfB-page-head">
+      <h1>Stay <em>Connected</em></h1>
+      <div class="info">
+        Sabor Flow lives on Instagram and inside a few group chats. There's no app, no email list, no spam &mdash; just messages from real dancers about real parties. Pick whichever channel fits.
+      </div>
     </div>
 
-    <!-- Latest posts -->
-    <p class="section-label" style="margin-bottom:1.5rem">Latest posts</p>
-
-    <!--
-      HOW TO ADD REAL INSTAGRAM EMBEDS:
-      1. Open instagram.com and go to any post from @saborflowdanang
-      2. Click the three dots on the post → "Embed"
-      3. Copy the embed code and paste it here, replacing one of the placeholders below.
-      The <script> tag at the bottom of the page loads them automatically.
-    -->
-    <div class="ig-embeds">
-
-      <div class="ig-placeholder">
-        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" style="color:var(--muted)"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
-        <p>Latest posts from the community</p>
-        <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" style="color:var(--teal);font-size:.75rem;letter-spacing:.1em;font-weight:600;text-transform:uppercase">View on Instagram</a>
-      </div>
-
-      <div class="ig-placeholder">
-        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" style="color:var(--muted)"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
-        <p>Videos, reels, and social dance moments</p>
-        <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" style="color:var(--teal);font-size:.75rem;letter-spacing:.1em;font-weight:600;text-transform:uppercase">View on Instagram</a>
-      </div>
-
-      <div class="ig-placeholder">
-        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" style="color:var(--muted)"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
-        <p>Workshops, festivals, and special events</p>
-        <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" style="color:var(--teal);font-size:.75rem;letter-spacing:.1em;font-weight:600;text-transform:uppercase">View on Instagram</a>
-      </div>
-
-    </div>
-
-    <!-- Contact -->
-    <div class="contact-box">
-      <p class="section-label">Get in touch</p>
-      <h2 style="margin-bottom:1rem">Want to collaborate?</h2>
-      <p style="color:var(--muted);max-width:540px;margin:0 auto 2rem">
-        Want to host a social? Suggest a venue? Collaborate on an event? Or just say hi?
-        We&rsquo;d love to hear from you &mdash; we don&rsquo;t bite, we just dance.
-      </p>
-      <div class="contact-ctas">
-        <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="btn btn-primary">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
-          <span>DM on Instagram</span>
-        </a>
-        <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="btn btn-ghost">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
-          <span>Join the Facebook Group</span>
-        </a>
-      </div>
-    </div>
-  </div>
-
-  <footer class="footer" style="margin-top:4rem">
-    <div class="container">
-      <div class="footer-inner">
+    <!-- Instagram profile hero -->
+    <div class="sfB-connect-hero">
+      <div class="ch-left">
+        <div class="ava"><img src="assets/logo.jpg" alt="Sabor Flow Da Nang"></div>
         <div>
-          <a href="index.html" class="footer-brand">
-            <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-            <span class="footer-brand-name">SABOR FLOW <span class="footer-brand-city">Da Nang</span></span>
-          </a>
-          <p class="footer-tagline">Da Nang's Latin dance community</p>
-        </div>
-        <nav class="footer-nav">
-          <a href="index.html">Home</a>
-          <a href="schedule.html">Schedule</a>
-          <a href="connect.html">Connect</a>
-          <a href="studios.html">Studios</a>
-          <a href="classes.html">Classes</a>
-          <a href="festivals.html">Festivals</a>
-        </nav>
-        <div class="footer-social">
-          <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="footer-social-link">
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
-            @saborflowdanang
-          </a>
-          <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="footer-social-link">
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
-            Da Nang SBK Group
-          </a>
+          <div class="h">@saborflowdanang</div>
+          <h2>The Instagram is the source of truth.</h2>
+          <p>Photos, videos, and announcements from Da Nang's Latin dance community. Social dances almost every day of the week.</p>
         </div>
       </div>
-      <div class="footer-bottom">Made with love for the Da Nang dance community</div>
+      <div class="ch-right">
+        <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-btn primary">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
+          Follow on Instagram
+        </a>
+        <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="sfB-btn ghost">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
+          Join Facebook Group
+        </a>
+        <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-btn ghost">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+          DM Us
+        </a>
+      </div>
+    </div>
+
+    <!-- Instagram grid -->
+    <div style="margin-top: 48px;">
+      <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
+        <h2 style="font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 28px; letter-spacing: -1px;">
+          Latest from the <em style="font-family: 'Caveat Brush', cursive; font-style: normal; font-weight: 400; color: var(--sf-coral);">floor</em>
+        </h2>
+        <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" style="font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--sf-gold); letter-spacing: 1px; text-decoration: none;">VIEW ALL ↗</a>
+      </div>
+      <div class="sfB-igrid">
+        <div class="ig">
+          <span class="heart">♡ 142</span>
+          <span class="lbl">// caliz · sensual night</span>
+        </div>
+        <div class="ig">
+          <span class="heart">♡ 89</span>
+          <span class="lbl">// shai · workshop</span>
+        </div>
+        <div class="ig">
+          <span class="heart">♡ 211</span>
+          <span class="lbl">// hoi an · la riva</span>
+        </div>
+        <div class="ig">
+          <span class="heart">♡ 67</span>
+          <span class="lbl">// malibu · salsa</span>
+        </div>
+        <div class="ig">
+          <span class="heart">♡ 178</span>
+          <span class="lbl">// bachata party</span>
+        </div>
+        <div class="ig">
+          <span class="heart">♡ 93</span>
+          <span class="lbl">// ket fai · kizomba</span>
+        </div>
+        <div class="ig">
+          <span class="heart">♡ 134</span>
+          <span class="lbl">// last call · sunday</span>
+        </div>
+        <div class="ig">
+          <span class="heart">♡ 256</span>
+          <span class="lbl">// vlx · da nang</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Collaborate banner -->
+    <div class="sfB-collab">
+      <div class="l">/ COLLABORATE</div>
+      <h2>Run a venue? <em>Teach?</em><br>DJ Latin?</h2>
+      <p>We're always looking to expand the floor. If you're an instructor, DJ, or you run a bar that wants to host a Latin night &mdash; let's talk. Sabor Flow is non-profit and connects people, never charges.</p>
+      <div class="acts">
+        <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-btn primary">Get in touch ↗</a>
+        <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="sfB-btn ghost">Facebook Group ↗</a>
+      </div>
+    </div>
+  </main>
+
+  <footer class="sfB-foot">
+    <div><strong>SABOR FLOW</strong> Da Nang &mdash; Latin dance community &copy; 2025</div>
+    <nav class="foot-links">
+      <a href="/">Home</a>
+      <a href="schedule.html">Schedule</a>
+      <a href="connect.html">Connect</a>
+      <a href="studios.html">Studios</a>
+      <a href="classes.html">Classes</a>
+      <a href="festivals.html">Festivals</a>
+    </nav>
+    <div class="foot-social">
+      <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a>
+      <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener">Facebook</a>
     </div>
   </footer>
 
-  <script async src="//www.instagram.com/embed.js"></script>
   <script src="js/main.js"></script>
 </body>
 </html>
diff --git a/css/style.css b/css/style.css
index 0dd1e07..80a867e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,766 +1,1343 @@
-@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;700;800&family=Inter:wght@300;400;500;600&display=swap');
-
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+/* Sabor Flow Da Nang — Tropical Heat design system
+   Ported from Claude Design handoff (Direction B).
+   Google Fonts loaded in each HTML <head>. */
 
 :root {
-  --bg:      #111111;
-  --surface: #181818;
-  --border:  #222222;
-  --orange:  #e8572a;
-  --gold:    #f0a030;
-  --teal:    #18b8b8;
-  --coral:   #d05570;
-  --text:    #ebebeb;
-  --muted:   #666666;
-  --radius:  2px;
-  --tr:      0.2s ease;
-  --max-w:   1200px;
+  --sf-coral:     #F26B6B;
+  --sf-orange:    #F2994A;
+  --sf-gold:      #F2C94C;
+  --sf-teal:      #2E8B95;
+  --sf-teal-deep: #1A5560;
+  --sf-ink:       #0E0B0E;
+  --sf-ink-2:     #15101A;
+  --sf-paper:     #F7EFE3;
 }
 
+/* ── Reset ── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 html { scroll-behavior: smooth; }
-
 body {
-  background: var(--bg);
-  color: var(--text);
-  font-family: 'Inter', sans-serif;
-  font-size: 15px;
-  line-height: 1.65;
+  background: #0B0512;
+  color: var(--sf-paper);
+  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
   min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  -webkit-font-smoothing: antialiased;
+  overflow-x: hidden;
 }
-
+img { display: block; max-width: 100%; }
 a { color: inherit; text-decoration: none; }
-img { max-width: 100%; height: auto; display: block; }
-ul { list-style: none; }
+button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
 
-.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; }
-
-/* ===== TYPE ===== */
-h1, h2, h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; line-height: 1.1; color: var(--text); }
-h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
-h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
-h3 { font-size: clamp(1rem, 2vw, 1.3rem); }
-
-.section-label {
-  font-family: 'Plus Jakarta Sans', sans-serif;
-  font-size: 0.6rem;
-  font-weight: 700;
-  letter-spacing: 0.28em;
-  text-transform: uppercase;
-  color: var(--orange);
-  margin-bottom: 0.85rem;
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
+/* ── Background blobs (fixed, full page) ── */
+.sfB-bg {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
 }
-.section-label::before {
+.sfB-bg::before {
   content: '';
-  display: block;
-  width: 18px;
-  height: 1px;
-  background: var(--orange);
-  flex-shrink: 0;
+  position: absolute;
+  inset: -10%;
+  background:
+    radial-gradient(ellipse 60% 50% at 80% 0%,   rgba(242,107,107,0.30), transparent 60%),
+    radial-gradient(ellipse 50% 40% at 10% 30%,  rgba(46,139,149,0.25),  transparent 60%),
+    radial-gradient(ellipse 40% 30% at 50% 90%,  rgba(242,201,76,0.18),  transparent 60%);
+  filter: blur(60px);
 }
+.sfB-bg::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
+  background-size: 4px 4px;
+  opacity: 0.7;
+  mix-blend-mode: overlay;
+}
+body > *:not(.sfB-bg) { position: relative; z-index: 1; }
 
-/* ===== NAV ===== */
-.nav {
+/* ── Topbar ── */
+.sfB-topbar {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  padding: 18px 40px;
+  border-bottom: 1px solid rgba(255,246,232,0.06);
   position: sticky;
   top: 0;
   z-index: 100;
-  background: rgba(17,17,17,0.94);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border-bottom: 1px solid var(--border);
+  background: rgba(11,5,18,0.85);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
 }
-
-.nav-container {
-  max-width: var(--max-w);
-  margin: 0 auto;
-  padding: 0 2rem;
-  height: 60px;
+.sfB-topbar .logo {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 10px;
 }
-
-.nav-brand { display: flex; align-items: center; gap: 0.65rem; }
-.nav-brand img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
-.nav-brand-name {
-  font-family: 'Plus Jakarta Sans', sans-serif;
-  font-size: 0.82rem;
+.sfB-topbar .logo .mark {
+  width: 34px; height: 34px;
+  border-radius: 10px;
+  overflow: hidden;
+  border: 1px solid rgba(255,255,255,0.1);
+  flex-shrink: 0;
+}
+.sfB-topbar .logo .mark img { width: 100%; height: 100%; object-fit: cover; }
+.sfB-topbar .logo .name {
+  font-family: 'Bricolage Grotesque', sans-serif;
   font-weight: 800;
-  letter-spacing: 0.12em;
-  color: var(--text);
+  font-size: 16px;
+  letter-spacing: -0.5px;
+  line-height: 1;
   display: flex;
   flex-direction: column;
-  line-height: 1.15;
+  gap: 3px;
 }
-.nav-brand-city {
-  font-size: 0.72em;
-  font-weight: 400;
-  letter-spacing: 0.2em;
+.sfB-topbar .logo .name .city {
+  font-size: 8px;
+  letter-spacing: 3px;
   text-transform: uppercase;
-  color: var(--muted);
+  font-weight: 600;
+  color: var(--sf-coral);
 }
 
-.nav-links { display: flex; align-items: center; }
-.nav-links a {
-  display: block;
-  padding: 0.3rem 0.85rem;
-  font-family: 'Plus Jakarta Sans', sans-serif;
-  font-size: 0.65rem;
-  font-weight: 700;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--muted);
-  position: relative;
-  transition: color var(--tr);
+.sfB-nav {
+  display: flex;
+  gap: 4px;
+  background: rgba(255,246,232,0.05);
+  padding: 5px;
+  border-radius: 999px;
+  border: 1px solid rgba(255,255,255,0.06);
+}
+.sfB-nav a {
+  padding: 8px 15px;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.2px;
+  border-radius: 999px;
+  color: rgba(255,246,232,0.7);
+  transition: all .18s;
   white-space: nowrap;
 }
-.nav-links a::after {
-  content: '';
-  position: absolute;
-  bottom: -1px;
-  left: 0.85rem;
-  right: 0.85rem;
-  height: 1px;
-  background: var(--orange);
-  transform: scaleX(0);
-  transition: transform var(--tr);
+.sfB-nav a.active {
+  background: linear-gradient(135deg, var(--sf-coral), var(--sf-orange));
+  color: #1a0d0d;
+  box-shadow: 0 4px 12px rgba(242,107,107,0.35);
 }
-.nav-links a:hover { color: var(--text); }
-.nav-links a:hover::after { transform: scaleX(1); }
-.nav-links a.active { color: var(--text); }
-.nav-links a.active::after { transform: scaleX(1); background: var(--gold); }
+.sfB-nav a:hover:not(.active) { color: #fff; background: rgba(255,255,255,0.05); }
 
-.nav-hamburger {
+.sfB-topbar .topbar-right {
+  justify-self: end;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.sfB-ig {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 8px 13px;
+  border-radius: 999px;
+  background: rgba(255,246,232,0.08);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.4px;
+  white-space: nowrap;
+}
+.sfB-ig:hover { background: rgba(255,246,232,0.15); }
+
+/* hamburger */
+.sfB-hamburger {
   display: none;
   flex-direction: column;
+  justify-content: center;
   gap: 5px;
-  background: none;
-  border: none;
+  width: 38px; height: 38px;
+  border-radius: 10px;
+  background: rgba(255,246,232,0.08);
+  padding: 10px;
+  border: 0;
   cursor: pointer;
-  padding: 8px;
 }
-.nav-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--text); transition: var(--tr); }
-
-/* ===== BUTTONS ===== */
-.btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.55rem;
-  padding: 0.8rem 1.75rem;
-  font-family: 'Plus Jakarta Sans', sans-serif;
-  font-size: 0.68rem;
-  font-weight: 700;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  cursor: pointer;
-  border: none;
-  border-radius: 0;
-  position: relative;
-  overflow: hidden;
-  transition: color var(--tr), box-shadow var(--tr);
-  white-space: nowrap;
-}
-.btn > span, .btn > svg { position: relative; z-index: 1; }
-.btn::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  transform: translateX(-101%);
-  transition: transform 0.3s ease;
-  z-index: 0;
-}
-.btn:hover::before { transform: translateX(0); }
-
-.btn-primary { background: var(--orange); color: #fff; }
-.btn-primary::before { background: #0f0f0f; }
-.btn-primary:hover { color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
-
-.btn-outline { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); }
-.btn-outline::before { background: rgba(255,255,255,0.05); }
-.btn-outline:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28); }
-
-.btn-orange-outline { background: transparent; color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
-.btn-orange-outline::before { background: var(--orange); }
-.btn-orange-outline:hover { color: #fff; }
-
-.btn-ghost { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--border); }
-.btn-ghost::before { background: var(--surface); }
-.btn-ghost:hover { color: var(--text); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); }
-
-/* Inline text CTA */
-.cta-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.65rem;
-  font-family: 'Plus Jakarta Sans', sans-serif;
-  font-size: 0.68rem;
-  font-weight: 700;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  color: var(--text);
-  transition: color var(--tr), gap var(--tr);
-}
-.cta-link svg { transition: transform var(--tr); }
-.cta-link:hover { color: var(--gold); gap: 1rem; }
-.cta-link:hover svg { transform: translateX(3px); }
-
-/* ===== SECTIONS ===== */
-section { padding: 5rem 0; }
-
-.page-header { padding: 4rem 0 3rem; }
-.page-header h1 { margin-bottom: 0.65rem; }
-.page-header .subtitle { color: var(--muted); font-size: 0.92rem; max-width: 500px; }
-
-/* ===== CARDS ===== */
-.card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  overflow: hidden;
-  transition: border-color var(--tr);
-}
-.card:hover { border-color: rgba(232,87,42,0.35); }
-.card-body { padding: 1.5rem; }
-.card-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.4rem; }
-.card-text  { color: var(--muted); font-size: 0.85rem; line-height: 1.65; }
-
-/* Loose card grid (studios, classes) */
-.card-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 1.5rem;
-}
-
-/* Tight bordered grid (about, explore, teaser) */
-.grid-tight {
-  display: grid;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  overflow: hidden;
-}
-.grid-tight > * {
-  border-bottom: 1px solid var(--border);
-  border-right: 1px solid var(--border);
-  transition: background var(--tr);
-}
-.grid-tight > *:hover { background: var(--surface); }
-
-/* ===== TAGS ===== */
-.tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.75rem 0; }
-.tag {
-  padding: 0.15rem 0.55rem;
-  border-radius: 2px;
-  font-size: 0.62rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  white-space: nowrap;
-}
-.tag-salsa        { background: rgba(232,87,42,0.14);  color: var(--orange); }
-.tag-bachata      { background: rgba(208,85,112,0.14); color: var(--coral);  }
-.tag-kizomba      { background: rgba(24,184,184,0.14); color: var(--teal);   }
-.tag-zouk         { background: rgba(240,160,48,0.14); color: var(--gold);   }
-.tag-tango        { background: rgba(120,120,120,0.1); color: var(--muted);  }
-.tag-beginner     { background: rgba(24,184,184,0.14); color: var(--teal);   }
-.tag-intermediate { background: rgba(240,160,48,0.14); color: var(--gold);   }
-.tag-advanced     { background: rgba(232,87,42,0.14);  color: var(--orange); }
-
-/* ===== FILTERS ===== */
-.filter-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 2.5rem; }
-.filter-pill {
-  padding: 0.45rem 1rem;
-  border: 1px solid var(--border);
-  background: transparent;
-  color: var(--muted);
-  font-family: 'Plus Jakarta Sans', sans-serif;
-  font-size: 0.62rem;
-  font-weight: 700;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  cursor: pointer;
-  border-radius: 2px;
-  transition: background var(--tr), color var(--tr), border-color var(--tr);
-}
-.filter-pill:hover  { color: var(--text); border-color: rgba(255,255,255,0.2); }
-.filter-pill.active { background: var(--orange); border-color: var(--orange); color: #fff; }
-
-/* ===== CARD INFO & LINKS ===== */
-.card-info {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.5rem;
-  color: var(--muted);
-  font-size: 0.83rem;
-  margin-top: 0.6rem;
-  line-height: 1.5;
-}
-.card-info svg { margin-top: 2px; flex-shrink: 0; color: var(--orange); opacity: 0.5; }
-.card-info a { color: var(--text); }
-.card-info a:hover { color: var(--orange); }
-
-.card-links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
-.card-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-  font-family: 'Plus Jakarta Sans', sans-serif;
-  font-size: 0.62rem;
-  font-weight: 700;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--muted);
-  transition: color var(--tr);
-}
-.card-link:hover { color: var(--orange); }
-
-/* ===== HERO ===== */
-.hero {
-  min-height: calc(100vh - 60px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-  background: var(--bg);
-}
-.hero::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background:
-    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(232,87,42,0.07) 0%, transparent 100%),
-    radial-gradient(ellipse 40% 30% at 75% 15%, rgba(240,160,48,0.04) 0%, transparent 100%);
-  pointer-events: none;
-}
-.hero::after {
-  content: '';
-  position: absolute;
-  left: 2rem;
-  top: 20%;
-  bottom: 20%;
-  width: 1px;
-  background: linear-gradient(to bottom, transparent, rgba(232,87,42,0.2), transparent);
-}
-
-.hero-content { position: relative; z-index: 1; padding: 3rem 2rem; max-width: 720px; }
-
-.hero-eyebrow {
-  font-family: 'Plus Jakarta Sans', sans-serif;
-  font-size: 0.6rem;
-  font-weight: 700;
-  letter-spacing: 0.32em;
-  text-transform: uppercase;
-  color: var(--muted);
-  margin-bottom: 2.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-}
-.hero-eyebrow::before, .hero-eyebrow::after {
-  content: '';
+.sfB-hamburger span {
   display: block;
-  width: 32px;
-  height: 1px;
-  background: var(--border);
+  width: 100%; height: 2px;
+  background: var(--sf-paper);
+  border-radius: 2px;
 }
 
-.hero-logo {
-  width: 110px;
-  height: 110px;
-  border-radius: 50%;
-  object-fit: cover;
-  margin: 0 auto 2.5rem;
-  border: 1px solid rgba(232,87,42,0.18);
-  box-shadow: 0 0 48px rgba(232,87,42,0.08);
+/* mobile nav overlay */
+.sfB-mobile-nav {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  background: rgba(11,5,18,0.97);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
 }
-
-.hero-title {
-  font-family: 'Plus Jakarta Sans', sans-serif;
-  font-size: clamp(4rem, 13vw, 9rem);
+.sfB-mobile-nav.open { display: flex; }
+.sfB-mobile-nav a {
+  font-family: 'Bricolage Grotesque', sans-serif;
   font-weight: 800;
-  letter-spacing: -0.03em;
-  line-height: 1;
-  color: var(--text);
-  white-space: nowrap;
-  margin-bottom: 0.35rem;
+  font-size: 28px;
+  letter-spacing: -0.5px;
+  padding: 10px 30px;
+  border-radius: 14px;
+  color: rgba(255,246,232,0.85);
+  transition: all .15s;
 }
-.hero-title-city {
-  display: block;
-  font-size: 0.22em;
-  font-weight: 400;
-  letter-spacing: 0.4em;
-  text-transform: uppercase;
-  color: var(--muted);
-  margin-top: 0.5em;
+.sfB-mobile-nav a:hover, .sfB-mobile-nav a.active {
+  color: var(--sf-coral);
+  background: rgba(242,107,107,0.1);
 }
-
-.hero-rule { width: 36px; height: 1px; background: var(--orange); margin: 1.5rem auto; }
-
-.hero-subtitle {
-  font-size: 0.78rem;
-  font-weight: 400;
-  letter-spacing: 0.28em;
-  text-transform: uppercase;
-  color: var(--muted);
-  margin-bottom: 3.5rem;
-}
-
-.hero-ctas { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.75rem; }
-.hero-divider { width: 1px; height: 14px; background: var(--border); }
-
-/* ===== ABOUT GRID ===== */
-.about-grid {
-  grid-template-columns: repeat(3, 1fr);
-}
-.about-card { padding: 2.5rem 2rem; }
-.about-card .card-icon { width: 28px; height: 28px; color: var(--orange); opacity: 0.7; margin-bottom: 1.25rem; display: block; }
-.about-card h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.6rem; }
-.about-card p  { color: var(--muted); font-size: 0.83rem; line-height: 1.75; }
-
-/* ===== TEASER ===== */
-.teaser-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
-.teaser-card { padding: 1.5rem; }
-.teaser-day {
-  font-family: 'Plus Jakarta Sans', sans-serif;
-  font-size: 0.58rem;
-  font-weight: 700;
-  letter-spacing: 0.22em;
-  text-transform: uppercase;
-  color: var(--orange);
-  margin-bottom: 0.4rem;
-}
-.teaser-social { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 0.92rem; color: var(--text); margin-bottom: 0.2rem; }
-.teaser-venue  { color: var(--muted); font-size: 0.78rem; }
-.teaser-meta   { color: var(--muted); font-size: 0.75rem; margin-top: 0.3rem; }
-
-/* ===== IG BANNER ===== */
-.ig-banner {
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 4.5rem 2rem;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-}
-.ig-banner::before {
-  content: '';
+.sfB-mobile-nav .mnav-close {
   position: absolute;
-  inset: 0;
-  background: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(232,87,42,0.06) 0%, transparent 100%);
-  pointer-events: none;
-}
-.ig-banner > * { position: relative; z-index: 1; }
-.ig-banner h2 { margin-bottom: 0.65rem; }
-.ig-banner p  { color: var(--muted); margin-bottom: 2rem; font-size: 0.88rem; max-width: 420px; margin-left: auto; margin-right: auto; }
-
-/* ===== EXPLORE GRID ===== */
-.explore-grid { grid-template-columns: repeat(3, 1fr); }
-.explore-card { padding: 2.5rem 2rem; display: block; }
-.explore-card .card-icon { width: 24px; height: 24px; color: var(--muted); margin-bottom: 1.25rem; display: block; transition: color var(--tr); }
-.explore-card:hover .card-icon { color: var(--orange); }
-.explore-card .card-title { font-size: 0.9rem; margin-bottom: 0.45rem; }
-.explore-card .card-text  { font-size: 0.8rem; }
-
-/* ===== SCHEDULE TABLE ===== */
-.schedule-note {
-  border: 1px solid var(--border);
-  border-left: 2px solid var(--teal);
-  padding: 1rem 1.25rem;
-  color: var(--muted);
-  font-size: 0.83rem;
-  margin-bottom: 2rem;
+  top: 22px; right: 22px;
+  width: 44px; height: 44px;
+  border-radius: 12px;
+  background: rgba(255,246,232,0.08);
   display: flex;
-  align-items: flex-start;
-  gap: 0.75rem;
-  line-height: 1.6;
-  border-radius: var(--radius);
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+  cursor: pointer;
+  color: var(--sf-paper);
+  border: 0;
 }
-.schedule-note svg { flex-shrink: 0; margin-top: 2px; color: var(--teal); opacity: 0.6; }
 
-.schedule-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
-.schedule-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
-.schedule-table thead th {
-  background: var(--surface);
-  padding: 0.8rem 1.25rem;
-  text-align: left;
-  font-family: 'Plus Jakarta Sans', sans-serif;
-  font-size: 0.58rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.14em;
-  color: var(--muted);
-  border-bottom: 1px solid var(--border);
-  white-space: nowrap;
+/* ── Animations ── */
+@keyframes sfB-dot-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50%       { opacity: 0.4; transform: scale(0.65); }
 }
-.schedule-table tbody tr { border-bottom: 1px solid var(--border); transition: background var(--tr); }
-.schedule-table tbody tr:last-child { border-bottom: none; }
-.schedule-table tbody tr:hover { background: var(--surface); }
-.schedule-table td { padding: 1rem 1.25rem; vertical-align: middle; }
-
-.day-badge {
-  display: inline-block;
-  padding: 0.12rem 0.5rem;
-  border-radius: 2px;
-  font-family: 'Plus Jakarta Sans', sans-serif;
-  font-size: 0.58rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  white-space: nowrap;
+@keyframes sfB-mq {
+  to { transform: translateX(-50%); }
 }
-.day-monday    { background: rgba(232,87,42,0.12);  color: var(--orange); }
-.day-tuesday   { background: rgba(240,160,48,0.12); color: var(--gold);   }
-.day-wednesday { background: rgba(24,184,184,0.12); color: var(--teal);   }
-.day-thursday  { background: rgba(208,85,112,0.12); color: var(--coral);  }
-.day-friday    { background: rgba(232,87,42,0.12);  color: var(--orange); }
-.day-saturday  { background: rgba(240,160,48,0.12); color: var(--gold);   }
-.day-sunday    { background: rgba(24,184,184,0.12); color: var(--teal);   }
 
-.venue-map-link {
+/* ── Hero ── */
+.sfB-hero {
+  padding: 48px 40px 30px;
+  display: grid;
+  grid-template-columns: 1.5fr 1fr;
+  gap: 40px;
+  align-items: center;
+}
+.sfB-hero .left { position: relative; }
+
+.sfB-hero .kicker {
   display: inline-flex;
   align-items: center;
-  gap: 0.3rem;
-  color: var(--muted);
-  transition: color var(--tr);
+  gap: 10px;
+  padding: 8px 14px;
+  border-radius: 999px;
+  background: rgba(255,246,232,0.06);
+  border: 1px solid rgba(255,246,232,0.1);
+  font-size: 10px;
+  letter-spacing: 2.5px;
+  text-transform: uppercase;
+  font-weight: 600;
+  color: rgba(255,246,232,0.85);
 }
-.venue-map-link:hover { color: var(--teal); }
-.venue-map-link svg { opacity: 0.5; flex-shrink: 0; transition: opacity var(--tr); }
-.venue-map-link:hover svg { opacity: 1; }
-
-.social-name    { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 0.83rem; color: var(--text); }
-.venue-name     { color: var(--muted); font-size: 0.8rem; }
-.music-text     { color: var(--muted); font-size: 0.78rem; }
-.city-badge     { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.7rem; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: 0.05em; }
-.organizer-text { color: var(--muted); font-size: 0.78rem; }
-
-@media (max-width: 768px) {
-  .schedule-table-wrap { border: none; overflow: visible; }
-  .schedule-table, .schedule-table thead, .schedule-table tbody,
-  .schedule-table tr, .schedule-table th, .schedule-table td { display: block; width: 100%; }
-  .schedule-table thead { display: none; }
-  .schedule-table tbody tr {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-left: 2px solid var(--orange);
-    border-radius: var(--radius);
-    padding: 1rem 1.25rem;
-    margin-bottom: 1rem;
-  }
-  .schedule-table td { padding: 0.3rem 0; border: none; }
-  .schedule-table td::before {
-    content: attr(data-label);
-    display: block;
-    font-size: 0.58rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: var(--muted);
-    margin-bottom: 0.1rem;
-    font-family: 'Plus Jakarta Sans', sans-serif;
-  }
+.sfB-hero .kicker .dot {
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  background: var(--sf-gold);
+  box-shadow: 0 0 10px var(--sf-gold);
+  animation: sfB-dot-pulse 1.6s ease-in-out infinite;
 }
 
-/* ===== CONNECT ===== */
-.ig-profile-card {
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 4rem 2rem;
-  text-align: center;
-  margin-bottom: 3rem;
+.sfB-hero h1 {
+  font-family: 'Bricolage Grotesque', sans-serif;
+  font-weight: 800;
+  font-size: 118px;
+  line-height: 0.87;
+  letter-spacing: -4px;
+  margin-top: 18px;
+  color: var(--sf-paper);
+}
+.sfB-hero h1 .glow {
+  background: linear-gradient(120deg, var(--sf-coral), var(--sf-gold) 50%, var(--sf-orange));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  font-style: italic;
+  font-family: 'Caveat Brush', cursive;
+  letter-spacing: 0;
+  font-weight: 400;
+  display: inline-block;
+  transform: rotate(-3deg) translateY(6px);
+  margin: 0 -4px;
+}
+.sfB-hero h1 .vn {
+  display: block;
+  font-size: 19px;
+  font-weight: 700;
+  letter-spacing: 8px;
+  color: var(--sf-teal);
+  margin-top: 18px;
+  text-transform: uppercase;
+  font-family: 'Plus Jakarta Sans', sans-serif;
+}
+.sfB-hero h1 .vn span { color: var(--sf-coral); }
+
+.sfB-hero .lead {
+  margin-top: 26px;
+  font-size: 15px;
+  line-height: 1.55;
+  color: rgba(255,246,232,0.7);
+  max-width: 460px;
+}
+.sfB-hero .ctas {
+  display: flex;
+  gap: 12px;
+  margin-top: 28px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+/* buttons */
+.sfB-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 13px 22px;
+  border-radius: 14px;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+  transition: transform .2s, box-shadow .2s;
+  white-space: nowrap;
+}
+.sfB-btn.primary {
+  background: linear-gradient(135deg, var(--sf-coral), var(--sf-orange));
+  color: #1a0d0d;
+  box-shadow: 0 10px 28px rgba(242,107,107,0.35);
+}
+.sfB-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(242,107,107,0.45); }
+.sfB-btn.ghost {
+  background: rgba(255,246,232,0.08);
+  color: var(--sf-paper);
+  border: 1px solid rgba(255,246,232,0.12);
+}
+.sfB-btn.ghost:hover { background: rgba(255,246,232,0.14); }
+.sfB-btn.dark {
+  background: #1a0d0d;
+  color: var(--sf-paper);
+}
+.sfB-btn.dark:hover { background: #000; }
+
+.sfB-hero .meta-row {
+  display: flex;
+  gap: 26px;
+  margin-top: 34px;
+  padding-top: 26px;
+  border-top: 1px solid rgba(255,246,232,0.08);
+}
+.sfB-hero .meta-row .item .v {
+  font-family: 'Bricolage Grotesque', sans-serif;
+  font-weight: 800;
+  font-size: 30px;
+  line-height: 1;
+  background: linear-gradient(135deg, var(--sf-coral), var(--sf-gold));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.sfB-hero .meta-row .item .l {
+  font-size: 10px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: rgba(255,246,232,0.5);
+  margin-top: 6px;
+}
+
+/* hero right — card stack */
+.sfB-hero .hero-right {
   position: relative;
-  overflow: hidden;
+  height: 460px;
 }
-.ig-profile-card::before {
-  content: '';
+.sfB-stack-card {
+  position: absolute;
+  border-radius: 20px;
+  overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
+  border: 1px solid rgba(255,255,255,0.1);
+}
+.sfB-stack-card.c1 {
+  top: 0; right: 0;
+  width: 230px; height: 300px;
+  background: linear-gradient(160deg, var(--sf-coral), #8B2A2A);
+  transform: rotate(6deg);
+  z-index: 3;
+}
+.sfB-stack-card.c2 {
+  top: 60px; right: 200px;
+  width: 200px; height: 260px;
+  background: linear-gradient(160deg, var(--sf-teal), var(--sf-teal-deep));
+  transform: rotate(-8deg);
+  z-index: 2;
+}
+.sfB-stack-card.c3 {
+  top: 220px; right: 80px;
+  width: 220px; height: 220px;
+  background: linear-gradient(160deg, var(--sf-orange), #B85A1F);
+  transform: rotate(3deg);
+  z-index: 4;
+}
+.sfB-stack-card .ph {
   position: absolute;
   inset: 0;
-  background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(232,87,42,0.05) 0%, transparent 100%);
-  pointer-events: none;
+  background-image: repeating-linear-gradient(
+    45deg, rgba(255,255,255,0.05) 0 12px, transparent 12px 24px);
+}
+.sfB-stack-card .tag {
+  position: absolute;
+  top: 14px; left: 14px;
+  font-family: 'Caveat Brush', cursive;
+  font-size: 28px;
+  color: rgba(255,255,255,0.9);
+  line-height: 1;
+}
+.sfB-stack-card .ph-label {
+  position: absolute;
+  bottom: 12px; left: 14px; right: 14px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 9px;
+  letter-spacing: 1px;
+  color: rgba(255,255,255,0.65);
+  text-transform: uppercase;
 }
-.ig-profile-card > * { position: relative; z-index: 1; }
-.ig-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto 1.25rem; border: 1px solid rgba(232,87,42,0.25); }
-.ig-handle { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--text); margin-bottom: 0.5rem; letter-spacing: -0.02em; }
-.ig-desc { color: var(--muted); margin-bottom: 2rem; font-size: 0.875rem; max-width: 400px; margin-left: auto; margin-right: auto; }
 
-.ig-embeds { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 3rem; }
-.ig-placeholder {
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
+.sfB-hero .hero-right .badge {
+  position: absolute;
+  bottom: 0; left: 0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 13px 17px;
+  background: rgba(11,5,18,0.88);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-radius: 16px;
+  border: 1px solid rgba(255,246,232,0.1);
+  z-index: 5;
+}
+.sfB-hero .hero-right .badge .ic {
+  width: 34px; height: 34px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, var(--sf-gold), var(--sf-orange));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #1a0d0d;
+  font-size: 18px;
+}
+.sfB-hero .hero-right .badge .t { font-size: 12px; font-weight: 700; }
+.sfB-hero .hero-right .badge .s { font-size: 10px; color: rgba(255,255,255,0.6); }
+
+/* ── Marquee ── */
+.sfB-marquee {
+  padding: 18px 0;
+  margin-top: 30px;
+  border-top: 1px solid rgba(255,246,232,0.06);
+  border-bottom: 1px solid rgba(255,246,232,0.06);
+  overflow: hidden;
+}
+.sfB-marquee .track {
+  display: flex;
+  gap: 50px;
+  animation: sfB-mq 32s linear infinite;
+  white-space: nowrap;
+  width: max-content;
+}
+.sfB-marquee .track span {
+  font-family: 'Caveat Brush', cursive;
+  font-size: 28px;
+  color: rgba(255,246,232,0.85);
+  display: inline-flex;
+  align-items: center;
+  gap: 50px;
+}
+.sfB-marquee .track span::after {
+  content: '✦';
+  color: var(--sf-coral);
+  font-size: 20px;
+}
+
+/* ── Pillars trio ── */
+.sfB-pillars {
+  padding: 60px 40px 30px;
+}
+.sfB-pillars .head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-bottom: 28px;
+  gap: 40px;
+}
+.sfB-pillars .head h2 {
+  font-family: 'Bricolage Grotesque', sans-serif;
+  font-weight: 800;
+  font-size: 52px;
+  line-height: 0.95;
+  letter-spacing: -1.5px;
+  max-width: 540px;
+}
+.sfB-pillars .head h2 em {
+  font-family: 'Caveat Brush', cursive;
+  color: var(--sf-coral);
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+.sfB-pillars .head .num {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  letter-spacing: 1.5px;
+  color: rgba(255,246,232,0.4);
+  white-space: nowrap;
+}
+.sfB-grid3 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 14px;
+}
+.sfB-pcard {
+  position: relative;
+  padding: 28px 24px;
+  border-radius: 22px;
+  overflow: hidden;
   min-height: 280px;
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
+  transition: transform .2s;
+}
+.sfB-pcard:hover { transform: translateY(-4px); }
+.sfB-pcard.c1 { background: linear-gradient(165deg, #C84747, #6B1818); color: var(--sf-paper); }
+.sfB-pcard.c2 { background: linear-gradient(165deg, var(--sf-teal), var(--sf-teal-deep)); color: var(--sf-paper); }
+.sfB-pcard.c3 { background: linear-gradient(165deg, var(--sf-gold), #B57A12); color: #2a1a04; }
+.sfB-pcard .num {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  letter-spacing: 2px;
+  opacity: 0.65;
+}
+.sfB-pcard h3 {
+  font-family: 'Bricolage Grotesque', sans-serif;
+  font-weight: 800;
+  font-size: 30px;
+  line-height: 1;
+  margin-top: 56px;
+  letter-spacing: -0.8px;
+}
+.sfB-pcard h3 em { font-family: 'Caveat Brush', cursive; font-style: normal; font-weight: 400; }
+.sfB-pcard p { font-size: 13px; margin-top: 12px; opacity: 0.85; line-height: 1.5; }
+.sfB-pcard .arr {
+  position: absolute;
+  top: 24px; right: 24px;
+  width: 34px; height: 34px;
+  border-radius: 50%;
+  background: rgba(255,255,255,0.18);
+  display: flex;
   align-items: center;
   justify-content: center;
-  text-align: center;
-  padding: 2rem;
-  gap: 1rem;
-  transition: border-color var(--tr), background var(--tr);
+  font-size: 13px;
 }
-.ig-placeholder:hover { border-color: rgba(232,87,42,0.25); background: var(--surface); }
-.ig-placeholder svg { color: var(--muted); opacity: 0.2; }
-.ig-placeholder p { color: var(--muted); font-size: 0.82rem; }
-.ig-placeholder a { color: var(--orange); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
 
-.contact-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 3.5rem 2rem; text-align: center; }
-.contact-box h2 { margin-bottom: 0.75rem; }
-.contact-box p  { color: var(--muted); margin-bottom: 2rem; max-width: 420px; margin-left: auto; margin-right: auto; font-size: 0.875rem; }
-.contact-ctas   { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
-
-/* ===== STUDIO CARDS ===== */
-.studio-card { position: relative; }
-.studio-card::before {
-  content: '';
-  position: absolute;
-  top: 0; left: 0; right: 0;
-  height: 2px;
-  background: linear-gradient(90deg, var(--orange), var(--gold));
-  opacity: 0;
-  transition: opacity var(--tr);
-  z-index: 1;
+/* ── Schedule teaser ── */
+.sfB-coming {
+  padding: 30px 40px 60px;
 }
-.studio-card:hover::before { opacity: 1; }
-
-/* ===== FESTIVAL CARDS ===== */
-.festival-card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  overflow: hidden;
-  margin-bottom: 2rem;
-  transition: border-color var(--tr);
-}
-.festival-card:hover { border-color: rgba(232,87,42,0.35); }
-
-.festival-poster {
-  height: 240px;
+.sfB-coming .head {
   display: flex;
+  justify-content: space-between;
   align-items: flex-end;
-  padding: 2rem;
-  position: relative;
-  overflow: hidden;
+  margin-bottom: 24px;
+  gap: 20px;
 }
-.festival-card-le .festival-poster { background: linear-gradient(135deg, #0e0614 0%, #1a0830 60%, #070e1a 100%); }
-.festival-card-le .festival-poster::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: radial-gradient(ellipse 60% 80% at 40% 50%, rgba(208,85,112,0.3), transparent 70%);
+.sfB-coming .head h2 {
+  font-family: 'Bricolage Grotesque', sans-serif;
+  font-weight: 800;
+  font-size: 52px;
+  letter-spacing: -1.5px;
+  line-height: 0.95;
 }
-.festival-card-vlx .festival-poster { background: linear-gradient(135deg, #060e06 0%, #0a1a0a 60%, #060e1a 100%); }
-.festival-card-vlx .festival-poster::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: radial-gradient(ellipse 60% 80% at 60% 50%, rgba(24,184,184,0.28), transparent 70%);
+.sfB-coming .head h2 em {
+  font-family: 'Caveat Brush', cursive;
+  color: var(--sf-gold);
+  font-style: normal;
+  font-weight: 400;
 }
-
-.festival-poster-content { position: relative; z-index: 1; }
-.festival-poster h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 800; color: #fff; line-height: 1.05; margin-bottom: 0.3rem; letter-spacing: -0.02em; }
-.festival-dates { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.62rem; font-weight: 700; color: rgba(255,255,255,0.45); letter-spacing: 0.22em; text-transform: uppercase; }
-
-.festival-body { padding: 2rem; }
-.festival-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
-.festival-meta-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--muted); }
-.festival-meta-item svg { color: var(--orange); opacity: 0.5; flex-shrink: 0; }
-.festival-meta-item strong { color: var(--text); font-weight: 500; }
-.festival-desc { color: var(--muted); margin-bottom: 1.75rem; line-height: 1.75; font-size: 0.875rem; }
-.festival-links { display: flex; flex-wrap: wrap; gap: 0.75rem; }
-
-/* ===== CALLOUT ===== */
-.callout { border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; text-align: center; }
-.callout p { color: var(--muted); margin-bottom: 1.25rem; font-size: 0.875rem; }
-
-/* ===== FOOTER ===== */
-.footer { margin-top: auto; border-top: 1px solid var(--border); padding: 3rem 0 2rem; }
-.footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; align-items: start; }
-
-.footer-brand { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.5rem; }
-.footer-brand img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
-.footer-brand-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.12em; color: var(--text); display: flex; flex-direction: column; line-height: 1.15; }
-.footer-brand-city { font-size: 0.72em; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
-.footer-tagline { color: var(--muted); font-size: 0.72rem; }
-
-.footer-nav { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
-.footer-nav a {
-  font-family: 'Plus Jakarta Sans', sans-serif;
-  font-size: 0.62rem;
+.sfB-coming .head a {
+  font-size: 12px;
   font-weight: 700;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--muted);
-  transition: color var(--tr);
-}
-.footer-nav a:hover { color: var(--text); }
-
-.footer-social { display: flex; flex-direction: column; gap: 0.65rem; align-items: flex-end; }
-.footer-social-link {
+  letter-spacing: 0.5px;
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
-  font-family: 'Plus Jakarta Sans', sans-serif;
-  font-size: 0.62rem;
+  gap: 6px;
+  color: var(--sf-coral);
+  white-space: nowrap;
+}
+.sfB-coming .head a:hover { color: var(--sf-orange); }
+.sfB-coming-row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+}
+
+/* teaser card */
+.sfB-tcard {
+  padding: 18px 18px 20px;
+  border-radius: 16px;
+  background: rgba(255,246,232,0.04);
+  border: 1px solid rgba(255,246,232,0.08);
+  transition: all .2s;
+  cursor: pointer;
+  overflow: hidden;
+}
+.sfB-tcard:hover { background: rgba(255,246,232,0.07); border-color: var(--sf-coral); transform: translateY(-2px); }
+.sfB-tcard .day {
+  font-family: 'Caveat Brush', cursive;
+  font-size: 26px;
+  line-height: 1;
+  background: linear-gradient(135deg, var(--sf-coral), var(--sf-gold));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.sfB-tcard .when {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  letter-spacing: 1px;
+  color: rgba(255,255,255,0.5);
+  margin-top: 4px;
+}
+.sfB-tcard h4 {
+  font-family: 'Bricolage Grotesque', sans-serif;
+  font-weight: 800;
+  font-size: 17px;
+  margin-top: 12px;
+  line-height: 1.1;
+  letter-spacing: -0.3px;
+}
+.sfB-tcard .at { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 5px; }
+.sfB-tcard .chips { display: flex; gap: 5px; margin-top: 12px; flex-wrap: wrap; }
+
+/* ── Music chips ── */
+.sfB-chip {
+  font-size: 9px;
   font-weight: 700;
-  letter-spacing: 0.12em;
+  letter-spacing: 1px;
   text-transform: uppercase;
-  color: var(--muted);
-  transition: color var(--tr);
+  padding: 3px 7px;
+  border-radius: 4px;
 }
-.footer-social-link:hover { color: var(--orange); }
+.sfB-chip.salsa   { background: rgba(242,107,107,0.2);  color: var(--sf-coral); }
+.sfB-chip.bachata { background: rgba(242,201,76,0.2);   color: var(--sf-gold); }
+.sfB-chip.kizomba { background: rgba(46,139,149,0.25);  color: #7ed4dd; }
+.sfB-chip.zouk    { background: rgba(242,153,74,0.2);   color: var(--sf-orange); }
 
-.footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); text-align: center; font-size: 0.68rem; color: var(--muted); opacity: 0.5; }
-
-/* ===== RESPONSIVE ===== */
-@media (max-width: 900px) {
-  .about-grid, .explore-grid { grid-template-columns: 1fr; }
-  .footer-inner { grid-template-columns: 1fr; }
-  .footer-social { align-items: flex-start; }
-  .footer-nav { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 1rem; }
+/* ── CTA block ── */
+.sfB-cta {
+  position: relative;
+  margin: 0 40px 50px;
+  padding: 40px;
+  border-radius: 28px;
+  background:
+    linear-gradient(135deg, rgba(242,107,107,0.9), rgba(242,153,74,0.9)),
+    radial-gradient(circle at 80% 30%, rgba(242,201,76,0.5), transparent 50%);
+  color: #1a0d0d;
+  display: grid;
+  grid-template-columns: 1.5fr 1fr;
+  gap: 30px;
+  align-items: center;
+  overflow: hidden;
+}
+.sfB-cta::before {
+  content: '';
+  position: absolute;
+  top: -40px; right: -40px;
+  width: 200px; height: 200px;
+  border-radius: 50%;
+  border: 2px dashed rgba(26,13,13,0.2);
+  pointer-events: none;
+}
+.sfB-cta .quote {
+  font-family: 'Bricolage Grotesque', sans-serif;
+  font-weight: 800;
+  font-size: 34px;
+  line-height: 1.05;
+  letter-spacing: -1px;
+}
+.sfB-cta .quote em { font-family: 'Caveat Brush', cursive; font-style: normal; font-weight: 400; }
+.sfB-cta .who {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  margin-top: 14px;
+  opacity: 0.7;
+}
+.sfB-cta .cta-right {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: relative;
+  z-index: 2;
+}
+.sfB-cta .cta-right a {
+  background: #1a0d0d;
+  color: var(--sf-paper);
+  padding: 15px 22px;
+  border-radius: 14px;
+  font-weight: 700;
+  font-size: 13px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  letter-spacing: 0.3px;
+}
+.sfB-cta .cta-right a:hover { background: #000; }
+.sfB-cta .cta-right a.alt {
+  background: rgba(26,13,13,0.12);
+  color: #1a0d0d;
+  border: 1px solid rgba(26,13,13,0.22);
 }
 
-@media (max-width: 768px) {
-  .nav-hamburger { display: flex; }
-  .nav-links {
-    display: none;
-    position: absolute;
-    top: 60px;
-    left: 0;
-    right: 0;
-    background: rgba(17,17,17,0.98);
-    backdrop-filter: blur(20px);
-    flex-direction: column;
-    padding: 0.5rem 0;
-    border-bottom: 1px solid var(--border);
+/* ── Footer ── */
+.sfB-foot {
+  padding: 28px 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+  border-top: 1px solid rgba(255,246,232,0.06);
+  font-size: 11px;
+  letter-spacing: 0.5px;
+  color: rgba(255,246,232,0.5);
+  flex-wrap: wrap;
+}
+.sfB-foot .foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
+.sfB-foot .foot-links a:hover { color: var(--sf-coral); }
+.sfB-foot .foot-social { display: flex; gap: 14px; }
+.sfB-foot .foot-social a:hover { color: var(--sf-coral); }
+.sfB-foot strong { color: var(--sf-coral); font-weight: 700; }
+
+/* ── Page head (inner pages) ── */
+.sfB-page {
+  padding: 28px 40px 40px;
+}
+.sfB-page-head {
+  margin-top: 28px;
+  display: grid;
+  grid-template-columns: 1.3fr 1fr;
+  gap: 30px;
+  align-items: end;
+}
+.sfB-page-head h1 {
+  font-family: 'Bricolage Grotesque', sans-serif;
+  font-weight: 800;
+  font-size: 88px;
+  line-height: 0.9;
+  letter-spacing: -3px;
+}
+.sfB-page-head h1 em {
+  font-family: 'Caveat Brush', cursive;
+  font-style: normal;
+  font-weight: 400;
+  background: linear-gradient(120deg, var(--sf-coral), var(--sf-gold));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.sfB-page-head .info {
+  font-size: 13px;
+  color: rgba(255,246,232,0.65);
+  line-height: 1.55;
+  padding: 16px 18px;
+  border-radius: 14px;
+  background: rgba(255,246,232,0.04);
+  border: 1px solid rgba(255,246,232,0.08);
+}
+.sfB-page-head .info a { color: var(--sf-teal); }
+.sfB-page-head .info a:hover { color: var(--sf-coral); }
+.sfB-page-head .info b { color: var(--sf-gold); }
+
+/* filter toolbar */
+.sfB-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 28px 0 16px;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+.sfB-pills {
+  display: flex;
+  gap: 6px;
+  background: rgba(255,246,232,0.04);
+  padding: 5px;
+  border-radius: 999px;
+  border: 1px solid rgba(255,246,232,0.06);
+  flex-wrap: wrap;
+}
+.sfB-pills .filter-pill {
+  padding: 8px 14px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  color: rgba(255,246,232,0.65);
+  transition: all .18s;
+  border: 0;
+  cursor: pointer;
+  background: transparent;
+}
+.sfB-pills .filter-pill.active {
+  background: linear-gradient(135deg, var(--sf-coral), var(--sf-orange));
+  color: #1a0d0d;
+}
+.sfB-pills .filter-pill:hover:not(.active) { color: #fff; }
+.filterable-card.hidden { display: none; }
+
+/* ── Schedule list ── */
+.sfB-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.sfB-row {
+  display: grid;
+  grid-template-columns: 120px 1fr 1.5fr 1fr 110px 90px;
+  align-items: center;
+  gap: 14px;
+  padding: 18px 22px;
+  border-radius: 16px;
+  background: rgba(255,246,232,0.03);
+  border: 1px solid rgba(255,246,232,0.06);
+  transition: all .15s;
+  cursor: pointer;
+}
+.sfB-row:hover {
+  background: rgba(255,246,232,0.06);
+  border-color: var(--sf-coral);
+  transform: translateX(4px);
+}
+.sfB-row.today {
+  background: linear-gradient(90deg, rgba(242,107,107,0.14), rgba(255,246,232,0.03) 60%);
+  border-color: rgba(242,107,107,0.45);
+}
+.sfB-row .col-day { display: flex; flex-direction: column; gap: 4px; }
+.sfB-row .col-day .name {
+  font-family: 'Caveat Brush', cursive;
+  font-size: 24px;
+  line-height: 1;
+  background: linear-gradient(135deg, var(--sf-coral), var(--sf-gold));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.sfB-row .col-day .when {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 9px;
+  letter-spacing: 1px;
+  color: rgba(255,246,232,0.45);
+  text-transform: uppercase;
+}
+.sfB-row .col-venue {
+  font-family: 'Bricolage Grotesque', sans-serif;
+  font-weight: 800;
+  font-size: 17px;
+  letter-spacing: -0.3px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.sfB-row .col-venue a { color: inherit; }
+.sfB-row .col-venue a:hover { color: var(--sf-coral); }
+.sfB-row .col-venue .pin {
+  display: inline-flex;
+  width: 20px; height: 20px;
+  border-radius: 50%;
+  background: rgba(46,139,149,0.25);
+  color: #7ed4dd;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  flex-shrink: 0;
+}
+.sfB-row .col-social { font-size: 14px; color: rgba(255,246,232,0.85); font-weight: 500; }
+.sfB-row .col-social .sub {
+  display: block;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 9px;
+  letter-spacing: 0.5px;
+  color: rgba(255,246,232,0.4);
+  margin-top: 4px;
+  text-transform: uppercase;
+}
+.sfB-row .col-music { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
+.sfB-row .col-city {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
+  padding: 5px 10px;
+  border-radius: 6px;
+  text-align: center;
+  width: fit-content;
+}
+.sfB-row .col-city.danang { background: rgba(242,107,107,0.18); color: var(--sf-coral); }
+.sfB-row .col-city.hoian  { background: rgba(46,139,149,0.22);  color: #7ed4dd; }
+.sfB-row .col-org {
+  font-size: 11px;
+  color: rgba(255,246,232,0.5);
+  text-align: right;
+  letter-spacing: 0.3px;
+  line-height: 1.4;
+}
+.sfB-row.today .tonight-label {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 8px;
+  letter-spacing: 1.5px;
+  color: var(--sf-coral);
+  text-transform: uppercase;
+  margin-top: 3px;
+}
+.sfB-page .footnote {
+  margin-top: 20px;
+  font-size: 11px;
+  color: rgba(255,246,232,0.4);
+  letter-spacing: 0.5px;
+}
+
+/* ── Cards grid (studios / classes) ── */
+.sfB-cards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 14px;
+  margin-top: 24px;
+}
+.sfB-cards.two { grid-template-columns: 1fr 1fr; }
+
+.sfB-card-x {
+  position: relative;
+  padding: 22px 22px 24px;
+  border-radius: 18px;
+  background: rgba(255,246,232,0.04);
+  border: 1px solid rgba(255,246,232,0.08);
+  overflow: hidden;
+  transition: all .2s;
+}
+.sfB-card-x:hover { background: rgba(255,246,232,0.06); border-color: var(--sf-coral); transform: translateY(-2px); }
+
+.sfB-card-x .stripe {
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 4px;
+}
+.sfB-card-x .stripe.salsa   { background: var(--sf-coral); }
+.sfB-card-x .stripe.bachata { background: var(--sf-gold); }
+.sfB-card-x .stripe.kizomba { background: var(--sf-teal); }
+.sfB-card-x .stripe.zouk    { background: var(--sf-orange); }
+.sfB-card-x .stripe.multi   { background: linear-gradient(90deg, var(--sf-coral), var(--sf-gold), var(--sf-teal), var(--sf-orange)); }
+
+.sfB-card-x h3 {
+  font-family: 'Bricolage Grotesque', sans-serif;
+  font-weight: 800;
+  font-size: 21px;
+  letter-spacing: -0.5px;
+  line-height: 1.1;
+  margin-top: 10px;
+}
+.sfB-card-x .ts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
+.sfB-card-x .info {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 14px;
+  font-size: 12px;
+  color: rgba(255,246,232,0.7);
+  line-height: 1.4;
+}
+.sfB-card-x .info .row { display: flex; gap: 8px; align-items: flex-start; }
+.sfB-card-x .info .ic {
+  display: inline-flex;
+  width: 18px; height: 18px;
+  flex-shrink: 0;
+  color: var(--sf-coral);
+  align-items: center;
+  justify-content: center;
+}
+.sfB-card-x .info a { color: var(--sf-orange); }
+.sfB-card-x .links {
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+  padding-top: 14px;
+  border-top: 1px solid rgba(255,246,232,0.08);
+  flex-wrap: wrap;
+}
+.sfB-card-x .links a {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  background: rgba(255,246,232,0.06);
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+.sfB-card-x .links a:hover { background: rgba(242,107,107,0.18); color: var(--sf-coral); }
+
+.sfB-suggest {
+  margin-top: 24px;
+  padding: 24px;
+  border-radius: 18px;
+  background: rgba(255,246,232,0.04);
+  border: 1px solid rgba(255,246,232,0.08);
+  text-align: center;
+}
+.sfB-suggest p { color: rgba(255,246,232,0.6); margin-bottom: 16px; font-size: 14px; }
+
+/* ── Festival posters ── */
+.sfB-fest {
+  position: relative;
+  border-radius: 24px;
+  overflow: hidden;
+  margin-top: 20px;
+  display: grid;
+  grid-template-columns: 1fr 1.4fr;
+  min-height: 320px;
+  border: 1px solid rgba(255,246,232,0.08);
+}
+.sfB-fest .poster {
+  position: relative;
+  padding: 32px 30px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+}
+.sfB-fest .poster.coral {
+  background: linear-gradient(160deg, var(--sf-coral) 0%, #8B2A2A 70%, #4A0F0F);
+  color: var(--sf-paper);
+}
+.sfB-fest .poster.teal {
+  background: linear-gradient(160deg, var(--sf-teal) 0%, var(--sf-teal-deep) 60%, #0A2A30);
+  color: var(--sf-paper);
+}
+.sfB-fest .poster::after {
+  content: '';
+  position: absolute;
+  bottom: -60px; right: -60px;
+  width: 280px; height: 280px;
+  border-radius: 50%;
+  border: 2px dashed rgba(255,255,255,0.18);
+  pointer-events: none;
+}
+.sfB-fest .poster::before {
+  content: '';
+  position: absolute;
+  bottom: -40px; right: -40px;
+  width: 200px; height: 200px;
+  border-radius: 50%;
+  border: 2px dashed rgba(255,255,255,0.12);
+  pointer-events: none;
+}
+.sfB-fest .poster .pill {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  padding: 6px 12px;
+  background: rgba(0,0,0,0.25);
+  border-radius: 999px;
+  width: fit-content;
+}
+.sfB-fest .poster .name {
+  font-family: 'Bricolage Grotesque', sans-serif;
+  font-weight: 800;
+  font-size: 46px;
+  letter-spacing: -2px;
+  line-height: 0.95;
+  margin-top: 26px;
+  position: relative;
+  z-index: 1;
+}
+.sfB-fest .poster .name em { font-family: 'Caveat Brush', cursive; font-style: normal; font-weight: 400; }
+.sfB-fest .poster .dates {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 12px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  margin-top: 14px;
+  opacity: 0.85;
+  position: relative;
+  z-index: 1;
+}
+.sfB-fest .poster .big {
+  position: absolute;
+  font-family: 'Bricolage Grotesque', sans-serif;
+  font-weight: 800;
+  font-size: 180px;
+  line-height: 0.85;
+  top: 40px; right: 20px;
+  letter-spacing: -10px;
+  opacity: 0.18;
+  z-index: 0;
+}
+.sfB-fest .body {
+  padding: 28px;
+  background: rgba(11,5,18,0.7);
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.sfB-fest .body .meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  font-size: 12px;
+  color: rgba(255,246,232,0.75);
+}
+.sfB-fest .body .meta .item { display: flex; gap: 6px; align-items: center; }
+.sfB-fest .body .meta .item b { color: var(--sf-paper); }
+.sfB-fest .body .styles { display: flex; flex-wrap: wrap; gap: 5px; }
+.sfB-fest .body p { font-size: 14px; color: rgba(255,246,232,0.8); line-height: 1.55; }
+.sfB-fest .body .acts {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: auto;
+  padding-top: 14px;
+  border-top: 1px solid rgba(255,246,232,0.08);
+}
+.sfB-fest .body .acts a {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+  padding: 10px 16px;
+  border-radius: 10px;
+  background: rgba(255,246,232,0.06);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.sfB-fest .body .acts a:hover { background: rgba(255,246,232,0.1); }
+.sfB-fest .body .acts a.primary {
+  background: linear-gradient(135deg, var(--sf-coral), var(--sf-orange));
+  color: #1a0d0d;
+}
+
+/* ── Connect page ── */
+.sfB-connect-hero {
+  margin-top: 28px;
+  padding: 40px;
+  border-radius: 24px;
+  background:
+    radial-gradient(ellipse at 80% 30%, rgba(242,107,107,0.25), transparent 55%),
+    rgba(255,246,232,0.04);
+  border: 1px solid rgba(255,246,232,0.08);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 40px;
+  align-items: center;
+}
+.sfB-connect-hero .ch-left {
+  display: flex;
+  align-items: center;
+  gap: 22px;
+}
+.sfB-connect-hero .ava {
+  width: 110px; height: 110px;
+  border-radius: 50%;
+  border: 3px solid var(--sf-gold);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.sfB-connect-hero .ava img { width: 100%; height: 100%; object-fit: cover; }
+.sfB-connect-hero h2 {
+  font-family: 'Bricolage Grotesque', sans-serif;
+  font-weight: 800;
+  font-size: 34px;
+  letter-spacing: -1px;
+}
+.sfB-connect-hero .h {
+  font-family: 'Caveat Brush', cursive;
+  font-size: 26px;
+  background: linear-gradient(120deg, var(--sf-coral), var(--sf-gold));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  margin-bottom: 4px;
+}
+.sfB-connect-hero p { font-size: 13px; color: rgba(255,246,232,0.65); margin-top: 8px; line-height: 1.5; }
+.sfB-connect-hero .ch-right { display: flex; flex-direction: column; gap: 10px; }
+
+.sfB-igrid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+  margin-top: 24px;
+}
+.sfB-igrid .ig {
+  aspect-ratio: 1;
+  border-radius: 12px;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid rgba(255,246,232,0.08);
+  background-image: repeating-linear-gradient(
+    45deg, rgba(255,255,255,0.04) 0 8px, transparent 8px 16px);
+  cursor: pointer;
+  transition: transform .2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.sfB-igrid .ig:hover { transform: scale(1.02); }
+.sfB-igrid .ig:nth-child(1) { background-color: rgba(242,107,107,0.2); }
+.sfB-igrid .ig:nth-child(2) { background-color: rgba(46,139,149,0.2); }
+.sfB-igrid .ig:nth-child(3) { background-color: rgba(242,201,76,0.18); }
+.sfB-igrid .ig:nth-child(4) { background-color: rgba(242,153,74,0.2); }
+.sfB-igrid .ig:nth-child(5) { background-color: rgba(46,139,149,0.2); }
+.sfB-igrid .ig:nth-child(6) { background-color: rgba(242,107,107,0.2); }
+.sfB-igrid .ig:nth-child(7) { background-color: rgba(242,153,74,0.2); }
+.sfB-igrid .ig:nth-child(8) { background-color: rgba(242,201,76,0.18); }
+.sfB-igrid .ig .lbl {
+  position: absolute;
+  bottom: 8px; left: 10px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 9px;
+  color: rgba(255,255,255,0.85);
+  letter-spacing: 0.5px;
+}
+
+.sfB-collab {
+  margin-top: 24px;
+  padding: 36px;
+  border-radius: 24px;
+  background: linear-gradient(135deg, var(--sf-teal), var(--sf-teal-deep));
+  text-align: center;
+}
+.sfB-collab .l {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  letter-spacing: 2.5px;
+  text-transform: uppercase;
+  color: var(--sf-gold);
+}
+.sfB-collab h2 {
+  font-family: 'Bricolage Grotesque', sans-serif;
+  font-weight: 800;
+  font-size: 44px;
+  letter-spacing: -1.5px;
+  margin-top: 10px;
+  line-height: 1;
+}
+.sfB-collab h2 em { font-family: 'Caveat Brush', cursive; font-style: normal; font-weight: 400; color: var(--sf-coral); }
+.sfB-collab p {
+  font-size: 14px;
+  color: rgba(255,246,232,0.85);
+  margin-top: 12px;
+  max-width: 500px;
+  margin-left: auto;
+  margin-right: auto;
+  line-height: 1.5;
+}
+.sfB-collab .acts { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .sfB-marquee .track { animation: none; }
+  .sfB-hero .kicker .dot { animation: none; }
+  * { transition-duration: 0.01ms !important; }
+}
+
+/* ── Responsive: tablet ── */
+@media (max-width: 960px) {
+  .sfB-topbar {
+    grid-template-columns: 1fr auto;
+    padding: 14px 20px;
   }
-  .nav-links.open { display: flex; }
-  .nav-links li { width: 100%; }
-  .nav-links a { display: block; padding: 0.8rem 2rem; }
-  .nav-links a::after { display: none; }
+  .sfB-topbar .sfB-nav { display: none; }
+  .sfB-topbar .topbar-right .sfB-ig { display: none; }
+  .sfB-hamburger { display: flex; }
 
-  .hero::after { display: none; }
-  .hero-ctas { flex-direction: column; align-items: center; }
-  .hero-divider { display: none; }
+  .sfB-hero {
+    grid-template-columns: 1fr;
+    padding: 30px 20px 0;
+    gap: 0;
+  }
+  .sfB-hero .hero-right { display: none; }
+  .sfB-hero h1 { font-size: 72px; letter-spacing: -2.5px; }
+  .sfB-hero h1 .vn { font-size: 14px; margin-top: 14px; }
 
-  .teaser-grid { grid-template-columns: 1fr; }
-  .ig-embeds { grid-template-columns: 1fr; }
-  .festival-meta { flex-direction: column; gap: 0.5rem; }
+  .sfB-marquee .track span { font-size: 22px; }
 
-  section { padding: 3rem 0; }
-  .page-header { padding: 2.5rem 0 2rem; }
+  .sfB-pillars { padding: 40px 20px 20px; }
+  .sfB-pillars .head h2 { font-size: 38px; }
+  .sfB-grid3 { grid-template-columns: 1fr; }
+  .sfB-pcard { min-height: 200px; }
+  .sfB-pcard h3 { font-size: 26px; margin-top: 40px; }
+
+  .sfB-coming { padding: 20px 20px 40px; }
+  .sfB-coming .head h2 { font-size: 38px; }
+  .sfB-coming-row { grid-template-columns: 1fr 1fr; }
+
+  .sfB-cta { margin: 0 20px 36px; padding: 28px; grid-template-columns: 1fr; }
+  .sfB-cta .quote { font-size: 26px; }
+
+  .sfB-foot { padding: 20px; flex-direction: column; text-align: center; font-size: 10px; }
+  .sfB-foot .foot-links { justify-content: center; }
+  .sfB-foot .foot-social { justify-content: center; }
+
+  .sfB-page { padding: 20px 20px 30px; }
+  .sfB-page-head { grid-template-columns: 1fr; gap: 16px; }
+  .sfB-page-head h1 { font-size: 56px; letter-spacing: -2px; }
+  .sfB-toolbar { flex-direction: column; align-items: flex-start; }
+  .sfB-pills { overflow-x: auto; flex-wrap: nowrap; border-radius: 14px; }
+
+  .sfB-row {
+    grid-template-columns: 1fr;
+    padding: 14px 16px;
+    gap: 8px;
+  }
+  .sfB-row .col-day { flex-direction: row; align-items: baseline; gap: 8px; }
+  .sfB-row .col-day .name { font-size: 22px; }
+  .sfB-row .col-venue { font-size: 16px; }
+  .sfB-row .col-social { font-size: 13px; }
+  .sfB-row .col-org { text-align: left; }
+  .sfB-row .col-city { width: fit-content; }
+
+  .sfB-cards { grid-template-columns: 1fr 1fr; }
+  .sfB-cards.two { grid-template-columns: 1fr; }
+
+  .sfB-fest { grid-template-columns: 1fr; }
+  .sfB-fest .poster .big { font-size: 110px; }
+
+  .sfB-connect-hero { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
+  .sfB-connect-hero .ch-left { flex-direction: column; text-align: center; align-items: center; }
+  .sfB-igrid { grid-template-columns: repeat(2, 1fr); }
+
+  .sfB-collab h2 { font-size: 34px; }
+  .sfB-collab { padding: 28px; }
 }
 
-@media (max-width: 480px) {
-  .card-grid { grid-template-columns: 1fr; }
-  .container { padding: 0 1.25rem; }
+@media (max-width: 600px) {
+  .sfB-hero h1 { font-size: 54px; letter-spacing: -1.5px; }
+  .sfB-coming-row { grid-template-columns: 1fr; }
+  .sfB-cards { grid-template-columns: 1fr; }
+  .sfB-igrid { grid-template-columns: repeat(2, 1fr); }
+  .sfB-page-head h1 { font-size: 44px; letter-spacing: -1.5px; }
+  .sfB-collab h2 { font-size: 28px; }
 }
-
-/* ===== UTILITY ===== */
-.hidden { display: none !important; }
-.mt-2   { margin-top: 1.5rem; }
-.mt-3   { margin-top: 2.5rem; }
diff --git a/festivals.html b/festivals.html
index dd7631f..a07fc3e 100644
--- a/festivals.html
+++ b/festivals.html
@@ -1,4 +1,4 @@
-﻿<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
@@ -6,78 +6,94 @@
   <title>Festivals — Sabor Flow Da Nang</title>
   <meta name="description" content="Latin dance festivals in Da Nang, Vietnam. Multi-day events with international artists, workshops, and social dancing.">
   <link rel="icon" type="image/jpeg" href="assets/logo.jpg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
 
-  <nav class="nav">
-    <div class="nav-container">
-      <a href="index.html" class="nav-brand">
-        <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-        <span class="nav-brand-name">SABOR FLOW <span class="nav-brand-city">Da Nang</span></span>
-      </a>
-      <button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
-        <span></span><span></span><span></span>
-      </button>
-      <ul class="nav-links" id="nav-links">
-        <li><a href="index.html">Home</a></li>
-        <li><a href="schedule.html">Schedule</a></li>
-        <li><a href="connect.html">Connect</a></li>
-        <li><a href="studios.html">Studios</a></li>
-        <li><a href="classes.html">Classes</a></li>
-        <li><a href="festivals.html" class="active">Festivals</a></li>
-      </ul>
-    </div>
+  <div class="sfB-bg" aria-hidden="true"></div>
+
+  <nav class="sfB-mobile-nav" id="sfB-mobile-nav">
+    <button class="mnav-close" id="sfB-mobile-nav-close">✕</button>
+    <a href="/">Home</a>
+    <a href="schedule.html">Schedule</a>
+    <a href="connect.html">Connect</a>
+    <a href="studios.html">Studios</a>
+    <a href="classes.html">Classes</a>
+    <a href="festivals.html" class="active">Festivals</a>
   </nav>
 
-  <div class="container">
-    <div class="page-header">
-      <p class="section-label">Da Nang 2026</p>
-      <h1>Festivals</h1>
-      <p class="subtitle">Multi-day Latin dance events right here in Da Nang &mdash; workshops, performances, and non-stop social dancing.</p>
+  <header class="sfB-topbar">
+    <a href="/" class="logo">
+      <div class="mark"><img src="assets/logo.jpg" alt="Sabor Flow Da Nang"></div>
+      <div class="name">SABOR FLOW<span class="city">Da Nang</span></div>
+    </a>
+    <nav class="sfB-nav">
+      <a href="/">Home</a>
+      <a href="schedule.html">Schedule</a>
+      <a href="connect.html">Connect</a>
+      <a href="studios.html">Studios</a>
+      <a href="classes.html">Classes</a>
+      <a href="festivals.html" class="active">Festivals</a>
+    </nav>
+    <div class="topbar-right">
+      <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
+        @saborflowdanang
+      </a>
+      <button class="sfB-hamburger" id="sfB-hamburger" aria-label="Open menu">
+        <span></span><span></span><span></span>
+      </button>
+    </div>
+  </header>
+
+  <main class="sfB-page">
+    <div class="sfB-page-head">
+      <h1>Da Nang <em>Festivals</em></h1>
+      <div class="info">
+        Multi-day Latin dance events right here in Da Nang &mdash; workshops, performances, and non-stop social dancing with international artists.
+      </div>
     </div>
 
     <!-- Latin Escape Da Nang 2026 -->
-    <div class="festival-card festival-card-le">
-      <div class="festival-poster">
-        <div class="festival-poster-content">
-          <h2>Latin Escape Da Nang</h2>
-          <div class="festival-dates">May 15 &ndash; 17, 2026</div>
+    <div class="sfB-fest">
+      <div class="poster coral">
+        <span class="pill">Festival · 2026</span>
+        <div>
+          <div class="name">Latin <em>Escape</em></div>
+          <div class="dates">May 15 – 17, 2026</div>
         </div>
+        <div class="big">LE</div>
       </div>
-      <div class="festival-body">
-        <div class="festival-meta">
-          <div class="festival-meta-item">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
-            <strong>May 15&ndash;17, 2026</strong>
+      <div class="body">
+        <div class="meta">
+          <div class="item">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+            <span><b>May 15–17, 2026</b></span>
           </div>
-          <div class="festival-meta-item">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
-            Royal Lotus Hotel &middot; <strong>My Khe Beach, Da Nang</strong>
-          </div>
-          <div class="festival-meta-item">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
-            <strong>Bachata &middot; Kizomba</strong>
+          <div class="item">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+            <span>Royal Lotus Hotel · <b>My Khe Beach, Da Nang</b></span>
           </div>
         </div>
-        <div class="tags" style="margin-bottom:1rem">
-          <span class="tag tag-bachata">Bachata</span>
-          <span class="tag tag-kizomba">Kizomba</span>
+        <div class="styles">
+          <span class="sfB-chip bachata">Bachata</span>
+          <span class="sfB-chip kizomba">Kizomba</span>
         </div>
-        <p class="festival-desc">
-          A destination-style festival set against the backdrop of Da Nang&rsquo;s stunning beach. Three days of workshops, social parties, and performances with international artists. The perfect excuse to combine dancing with a beach getaway.
-        </p>
-        <div class="festival-links">
-          <a href="https://www.facebook.com/latin.escape.danang/" target="_blank" rel="noopener" class="btn btn-ghost">
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
+        <p>A destination-style festival set against the backdrop of Da Nang's stunning beach. Three days of workshops, social parties, and performances with international artists. The perfect excuse to combine dancing with a beach getaway.</p>
+        <div class="acts">
+          <a href="https://www.facebook.com/latin.escape.danang/" target="_blank" rel="noopener">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
             Facebook
           </a>
-          <a href="https://www.instagram.com/latin.escape.danang/" target="_blank" rel="noopener" class="btn btn-ghost">
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
+          <a href="https://www.instagram.com/latin.escape.danang/" target="_blank" rel="noopener">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
             Instagram
           </a>
-          <a href="https://www.tickettailor.com/events/latinescapedanang" target="_blank" rel="noopener" class="btn btn-primary">
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v2z"/></svg>
+          <a href="https://www.tickettailor.com/events/latinescapedanang" target="_blank" rel="noopener" class="primary">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v2z"/></svg>
             Buy Tickets
           </a>
         </div>
@@ -85,95 +101,69 @@
     </div>
 
     <!-- Vietnam Latin Xperience 2026 -->
-    <div class="festival-card festival-card-vlx">
-      <div class="festival-poster">
-        <div class="festival-poster-content">
-          <h2>Vietnam Latin Xperience</h2>
-          <div class="festival-dates">October 2 &ndash; 4, 2026</div>
+    <div class="sfB-fest">
+      <div class="poster teal">
+        <span class="pill">Festival · 2026</span>
+        <div>
+          <div class="name">Vietnam Latin <em>Xperience</em></div>
+          <div class="dates">October 2 – 4, 2026</div>
         </div>
+        <div class="big">VLX</div>
       </div>
-      <div class="festival-body">
-        <div class="festival-meta">
-          <div class="festival-meta-item">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
-            <strong>October 2&ndash;4, 2026</strong>
+      <div class="body">
+        <div class="meta">
+          <div class="item">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+            <span><b>October 2–4, 2026</b></span>
           </div>
-          <div class="festival-meta-item">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
-            Da Nang Beach &middot; <strong>Da Nang</strong>
-          </div>
-          <div class="festival-meta-item">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
-            <strong>Salsa &middot; Bachata &middot; Kizomba &middot; Zouk &amp; more</strong>
+          <div class="item">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+            <span>Da Nang Beach · <b>Da Nang</b></span>
           </div>
         </div>
-        <div class="tags" style="margin-bottom:1rem">
-          <span class="tag tag-salsa">Salsa</span>
-          <span class="tag tag-bachata">Bachata</span>
-          <span class="tag tag-kizomba">Kizomba</span>
-          <span class="tag tag-zouk">Zouk</span>
-          <span class="tag tag-tango">Urban Kiz</span>
-          <span class="tag tag-tango">Konpa</span>
+        <div class="styles">
+          <span class="sfB-chip salsa">Salsa</span>
+          <span class="sfB-chip bachata">Bachata</span>
+          <span class="sfB-chip kizomba">Kizomba</span>
+          <span class="sfB-chip zouk">Zouk</span>
         </div>
-        <p class="festival-desc">
-          Now in its 7th edition and recently moved to Da Nang, the Vietnam Latin Xperience (VLX) is one of Southeast Asia&rsquo;s most beloved Latin festivals. Three days of workshops, bootcamps, and social parties with a warm, family-like community vibe. International artists, beautiful beach setting, unforgettable nights.
-        </p>
-        <div class="festival-links">
-          <a href="https://vietnamlatinxperience.com" target="_blank" rel="noopener" class="btn btn-ghost">
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+        <p>Now in its 7th edition and recently moved to Da Nang, the Vietnam Latin Xperience (VLX) is one of Southeast Asia's most beloved Latin festivals. Three days of workshops, bootcamps, and social parties with a warm, family-like community vibe.</p>
+        <div class="acts">
+          <a href="https://vietnamlatinxperience.com" target="_blank" rel="noopener">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
             Website
           </a>
-          <a href="https://www.facebook.com/VietnamLatinXperience/" target="_blank" rel="noopener" class="btn btn-ghost">
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
+          <a href="https://www.facebook.com/VietnamLatinXperience/" target="_blank" rel="noopener">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
             Facebook
           </a>
-          <a href="https://www.tickettailor.com" target="_blank" rel="noopener" class="btn btn-primary">
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v2z"/></svg>
+          <a href="https://www.tickettailor.com" target="_blank" rel="noopener" class="primary">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v2z"/></svg>
             Buy Tickets
           </a>
         </div>
       </div>
     </div>
 
-    <div style="background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center">
-      <p style="color:var(--muted);margin-bottom:1rem">Know of a festival we should add? Or organizing one yourself?</p>
-      <a href="connect.html" class="btn btn-ghost">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-        <span>Tell Us About It</span>
-      </a>
+    <div class="sfB-suggest">
+      <p>Know of a festival we should add? Or organizing one yourself?</p>
+      <a href="connect.html" class="sfB-btn ghost">Tell Us About It</a>
     </div>
-  </div>
+  </main>
 
-  <footer class="footer" style="margin-top:4rem">
-    <div class="container">
-      <div class="footer-inner">
-        <div>
-          <a href="index.html" class="footer-brand">
-            <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-            <span class="footer-brand-name">SABOR FLOW <span class="footer-brand-city">Da Nang</span></span>
-          </a>
-          <p class="footer-tagline">Da Nang's Latin dance community</p>
-        </div>
-        <nav class="footer-nav">
-          <a href="index.html">Home</a>
-          <a href="schedule.html">Schedule</a>
-          <a href="connect.html">Connect</a>
-          <a href="studios.html">Studios</a>
-          <a href="classes.html">Classes</a>
-          <a href="festivals.html">Festivals</a>
-        </nav>
-        <div class="footer-social">
-          <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="footer-social-link">
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
-            @saborflowdanang
-          </a>
-          <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="footer-social-link">
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
-            Da Nang SBK Group
-          </a>
-        </div>
-      </div>
-      <div class="footer-bottom">Made with love for the Da Nang dance community</div>
+  <footer class="sfB-foot">
+    <div><strong>SABOR FLOW</strong> Da Nang &mdash; Latin dance community &copy; 2025</div>
+    <nav class="foot-links">
+      <a href="/">Home</a>
+      <a href="schedule.html">Schedule</a>
+      <a href="connect.html">Connect</a>
+      <a href="studios.html">Studios</a>
+      <a href="classes.html">Classes</a>
+      <a href="festivals.html">Festivals</a>
+    </nav>
+    <div class="foot-social">
+      <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a>
+      <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener">Facebook</a>
     </div>
   </footer>
 
diff --git a/index.html b/index.html
index ad5ff37..6d714c6 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-﻿<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
@@ -6,167 +6,223 @@
   <title>Sabor Flow Da Nang — Latin Dance Community</title>
   <meta name="description" content="Da Nang's Latin dance community. Weekly socials, studios, classes, and festivals for Salsa, Bachata, Kizomba, and Zouk.">
   <link rel="icon" type="image/jpeg" href="assets/logo.jpg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
 
-  <nav class="nav">
-    <div class="nav-container">
-      <a href="index.html" class="nav-brand">
-        <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-        <span class="nav-brand-name">SABOR FLOW <span class="nav-brand-city">Da Nang</span></span>
-      </a>
-      <button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
-        <span></span><span></span><span></span>
-      </button>
-      <ul class="nav-links" id="nav-links">
-        <li><a href="index.html" class="active">Home</a></li>
-        <li><a href="schedule.html">Schedule</a></li>
-        <li><a href="connect.html">Connect</a></li>
-        <li><a href="studios.html">Studios</a></li>
-        <li><a href="classes.html">Classes</a></li>
-        <li><a href="festivals.html">Festivals</a></li>
-      </ul>
-    </div>
+  <!-- Background blobs -->
+  <div class="sfB-bg" aria-hidden="true"></div>
+
+  <!-- Mobile nav overlay -->
+  <nav class="sfB-mobile-nav" id="sfB-mobile-nav" aria-label="Mobile navigation">
+    <button class="mnav-close" id="sfB-mobile-nav-close" aria-label="Close menu">✕</button>
+    <a href="/" class="active">Home</a>
+    <a href="schedule.html">Schedule</a>
+    <a href="connect.html">Connect</a>
+    <a href="studios.html">Studios</a>
+    <a href="classes.html">Classes</a>
+    <a href="festivals.html">Festivals</a>
   </nav>
 
-  <!-- HERO -->
-  <section class="hero">
-    <div class="hero-content">
-      <p class="hero-eyebrow">Da Nang &middot; Vietnam</p>
-      <img src="assets/logo.jpg" alt="Sabor Flow Da Nang" class="hero-logo">
-      <h1 class="hero-title">Sabor Flow<span class="hero-title-city">Da Nang</span></h1>
-      <div class="hero-rule"></div>
-      <p class="hero-subtitle">Latin Dance Community</p>
-      <div class="hero-ctas">
-        <a href="schedule.html" class="btn btn-primary">
-          <span>Weekly Schedule</span>
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
-        </a>
-        <div class="hero-divider"></div>
-        <a href="studios.html" class="cta-link">
-          Studios
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
-        </a>
-        <div class="hero-divider"></div>
-        <a href="festivals.html" class="cta-link">
-          Festivals
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
-        </a>
+  <!-- Topbar -->
+  <header class="sfB-topbar">
+    <a href="/" class="logo">
+      <div class="mark"><img src="assets/logo.jpg" alt="Sabor Flow Da Nang"></div>
+      <div class="name">
+        SABOR FLOW
+        <span class="city">Da Nang</span>
       </div>
-    </div>
-  </section>
+    </a>
 
-  <!-- ABOUT -->
-  <section>
-    <div class="container">
-      <p class="section-label">What We Are</p>
-      <h2 style="margin-bottom:2.5rem">Community. Music. Dance.</h2>
-      <div class="grid-tight about-grid">
-        <div class="about-card">
-          <svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
-          <h3>Social Dancing</h3>
-          <p>Almost-daily gatherings at bars, clubs, and restaurants in Da Nang and Hoi An. Everyone is welcome — beginner or seasoned pro, no judgment.</p>
+    <nav class="sfB-nav" aria-label="Main navigation">
+      <a href="/" class="active">Home</a>
+      <a href="schedule.html">Schedule</a>
+      <a href="connect.html">Connect</a>
+      <a href="studios.html">Studios</a>
+      <a href="classes.html">Classes</a>
+      <a href="festivals.html">Festivals</a>
+    </nav>
+
+    <div class="topbar-right">
+      <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
+        @saborflowdanang
+      </a>
+      <button class="sfB-hamburger" id="sfB-hamburger" aria-label="Open menu">
+        <span></span><span></span><span></span>
+      </button>
+    </div>
+  </header>
+
+  <!-- Hero -->
+  <section class="sfB-hero">
+    <div class="left">
+      <div class="kicker">
+        <span class="dot"></span>
+        Latin Social Dance · Da Nang · Hoi An
+      </div>
+
+      <h1>
+        Feel the <em class="glow">Sabor</em>
+        <span class="vn">DA NANG · <span>VIETNAM</span></span>
+      </h1>
+
+      <p class="lead">
+        Latin social dance almost every night of the week. Salsa, Bachata, Kizomba, Zouk — at bars and restaurants across Da Nang and Hoi An. Everyone welcome, no partner needed.
+      </p>
+
+      <div class="ctas">
+        <a href="schedule.html" class="sfB-btn primary">
+          Weekly Schedule
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
+        </a>
+        <a href="festivals.html" class="sfB-btn ghost">Upcoming Festivals</a>
+      </div>
+
+      <div class="meta-row">
+        <div class="item">
+          <div class="v">10+</div>
+          <div class="l">Socials/week</div>
         </div>
-        <div class="about-card">
-          <svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
-          <h3>Salsa &middot; Bachata &middot; Kizomba</h3>
-          <p>The best Latin rhythms all week long. Salsa, Bachata, Kizomba, and the fast-growing Zouk. Great music, warm people, genuine connection.</p>
+        <div class="item">
+          <div class="v">4</div>
+          <div class="l">Dance styles</div>
         </div>
-        <div class="about-card">
-          <svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
-          <h3>Community First</h3>
-          <p>A free, non-profit initiative by two Vietnamese women passionate about dance. Here to support and grow Da Nang's Latin dance scene.</p>
+        <div class="item">
+          <div class="v">2</div>
+          <div class="l">Cities</div>
+        </div>
+        <div class="item">
+          <div class="v">∞</div>
+          <div class="l">Good vibes</div>
         </div>
       </div>
     </div>
-  </section>
 
-  <!-- COMING UP -->
-  <section>
-    <div class="container">
-      <p class="section-label">This Week</p>
-      <h2 style="margin-bottom:2.5rem">Coming Up</h2>
-      <div class="grid-tight teaser-grid" id="schedule-teaser"></div>
-      <div class="mt-3">
-        <a href="schedule.html" class="cta-link">
-          View full schedule
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
-        </a>
+    <!-- Card stack (decorative) -->
+    <div class="hero-right" aria-hidden="true">
+      <div class="sfB-stack-card c1">
+        <div class="ph"></div>
+        <span class="tag">Salsa</span>
+        <span class="ph-label">Every Thursday · Malibu</span>
       </div>
-    </div>
-  </section>
-
-  <!-- INSTAGRAM -->
-  <section>
-    <div class="container">
-      <div class="ig-banner">
-        <p class="section-label" style="justify-content:center">Stay Connected</p>
-        <h2 style="margin-bottom:0.65rem">Follow the Community</h2>
-        <p>Catch the latest social dance photos, videos, and event announcements.</p>
-        <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="btn btn-primary">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
-          <span>@saborflowdanang</span>
-        </a>
+      <div class="sfB-stack-card c2">
+        <div class="ph"></div>
+        <span class="tag">Kizomba</span>
+        <span class="ph-label">Every Wednesday · Ket Fai</span>
       </div>
-    </div>
-  </section>
-
-  <!-- EXPLORE -->
-  <section>
-    <div class="container">
-      <p class="section-label">Explore</p>
-      <h2 style="margin-bottom:2.5rem">Find Your Scene</h2>
-      <div class="grid-tight explore-grid">
-        <a href="studios.html" class="explore-card">
-          <svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="2" width="16" height="20" rx="2"/><path d="M9 22v-4h6v4"/><path d="M8 6h.01M16 6h.01M8 10h.01M16 10h.01"/></svg>
-          <div class="card-title">Dance Studios</div>
-          <p class="card-text">Dedicated schools offering Salsa, Bachata, Kizomba and more in Da Nang.</p>
-        </a>
-        <a href="classes.html" class="explore-card">
-          <svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
-          <div class="card-title">Dance Classes</div>
-          <p class="card-text">From total beginner to advanced — find the right class for your level.</p>
-        </a>
-        <a href="festivals.html" class="explore-card">
-          <svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
-          <div class="card-title">Festivals</div>
-          <p class="card-text">Multi-day events with international artists, workshops, and socials.</p>
-        </a>
+      <div class="sfB-stack-card c3">
+        <div class="ph"></div>
+        <span class="tag">Bachata</span>
+        <span class="ph-label">Every Monday · Webe Coffee</span>
       </div>
-    </div>
-  </section>
-
-  <footer class="footer">
-    <div class="container">
-      <div class="footer-inner">
+      <div class="badge">
+        <div class="ic">🎶</div>
         <div>
-          <a href="index.html" class="footer-brand">
-            <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-            <span class="footer-brand-name">SABOR FLOW <span class="footer-brand-city">Da Nang</span></span>
-          </a>
-          <p class="footer-tagline">Da Nang's Latin dance community</p>
-        </div>
-        <nav class="footer-nav">
-          <a href="index.html">Home</a>
-          <a href="schedule.html">Schedule</a>
-          <a href="connect.html">Connect</a>
-          <a href="studios.html">Studios</a>
-          <a href="classes.html">Classes</a>
-          <a href="festivals.html">Festivals</a>
-        </nav>
-        <div class="footer-social">
-          <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="footer-social-link">
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
-            @saborflowdanang
-          </a>
-          <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="footer-social-link">
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
-            Da Nang SBK Group
-          </a>
+          <div class="t">Socials almost every night</div>
+          <div class="s">Da Nang · Hoi An</div>
         </div>
       </div>
-      <div class="footer-bottom">Made with love for the Da Nang dance community</div>
+    </div>
+  </section>
+
+  <!-- Marquee -->
+  <div class="sfB-marquee" aria-hidden="true">
+    <div class="track">
+      <span>Salsa</span>
+      <span>Bachata</span>
+      <span>Kizomba</span>
+      <span>Zouk</span>
+      <span>Da Nang</span>
+      <span>Hoi An</span>
+      <span>Salsa</span>
+      <span>Bachata</span>
+      <span>Kizomba</span>
+      <span>Zouk</span>
+      <span>Da Nang</span>
+      <span>Hoi An</span>
+    </div>
+  </div>
+
+  <!-- Pillars -->
+  <section class="sfB-pillars">
+    <div class="head">
+      <h2>What we <em>do</em></h2>
+      <span class="num">— 01 / 03</span>
+    </div>
+    <div class="sfB-grid3">
+      <div class="sfB-pcard c1">
+        <span class="num">01</span>
+        <div class="arr">→</div>
+        <h3>Social <em>Dancing</em></h3>
+        <p>Almost-daily gatherings at bars, clubs, and restaurants. Small cover charge, great music, warm people. Beginner or pro — everyone is welcome.</p>
+      </div>
+      <div class="sfB-pcard c2">
+        <span class="num">02</span>
+        <div class="arr">→</div>
+        <h3>4 <em>Styles</em></h3>
+        <p>Salsa, Bachata, Kizomba, and the fast-growing Zouk. Each night has its own vibe and music ratio — find the scene that moves you.</p>
+      </div>
+      <div class="sfB-pcard c3">
+        <span class="num">03</span>
+        <div class="arr">→</div>
+        <h3><em>Community</em> First</h3>
+        <p>A free, non-profit initiative by two Vietnamese women passionate about dance. Here to support and grow Da Nang's Latin dance scene.</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- Coming up teaser -->
+  <section class="sfB-coming">
+    <div class="head">
+      <h2>Coming up <em>this week</em></h2>
+      <a href="schedule.html">
+        Full schedule
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
+      </a>
+    </div>
+    <div class="sfB-coming-row" id="sfB-coming-row"></div>
+  </section>
+
+  <!-- CTA block -->
+  <div class="sfB-cta">
+    <div>
+      <div class="quote">
+        Dance is how we <em>connect</em> — no language needed.
+      </div>
+      <div class="who">Sabor Flow Da Nang</div>
+    </div>
+    <div class="cta-right">
+      <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">
+        Follow on Instagram
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
+      </a>
+      <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="alt">
+        Join Facebook Group
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
+      </a>
+    </div>
+  </div>
+
+  <!-- Footer -->
+  <footer class="sfB-foot">
+    <div>
+      <strong>SABOR FLOW</strong> Da Nang &mdash; Latin dance community &copy; 2025
+    </div>
+    <nav class="foot-links">
+      <a href="/">Home</a>
+      <a href="schedule.html">Schedule</a>
+      <a href="connect.html">Connect</a>
+      <a href="studios.html">Studios</a>
+      <a href="classes.html">Classes</a>
+      <a href="festivals.html">Festivals</a>
+    </nav>
+    <div class="foot-social">
+      <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a>
+      <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener">Facebook</a>
     </div>
   </footer>
 
diff --git a/js/main.js b/js/main.js
index 68dd8d8..df9630e 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,81 +1,117 @@
-﻿// ============================================================
+// ============================================================
 // Sabor Flow Da Nang — main.js
 // Update SCHEDULE array monthly when the weekly program changes.
 // ============================================================
 
 const SCHEDULE = [
-  { day: 'Monday',    venue: 'Webe Coffee',       social: 'BOM',                music: '8 Bachata · 1 Salsa · 1 Kizomba',  city: 'Da Nang', organizer: 'Luu Phuong & Shai',  mapUrl: 'https://maps.app.goo.gl/jvaQgcNt4doYwZ2N7' },
-  { day: 'Tuesday',   venue: 'La Riva',            social: 'Latino Dancing',     music: '2 Salsa · 2 Bachata · 2 Kizomba',  city: 'Hoi An',  organizer: 'David Tavares',       mapUrl: 'https://www.google.com/maps/search/?api=1&query=La+Riva+An+Bang+Hoi+An+Vietnam' },
-  { day: 'Tuesday',   venue: 'Caliz Bar',          social: 'Sensual Night',      music: '3 Bachata · 2 Salsa · 2 Kizomba',  city: 'Da Nang', organizer: 'Daisy Nguyen',        mapUrl: 'https://www.google.com/maps/place/C%C3%A1liz+Wine+Bar/@16.0485026,108.2470699,17z' },
-  { day: 'Wednesday', venue: 'Ket Fai Bar',        social: 'Bachata Kiz Night',  music: 'Kizomba 19:30 · Bachata 21:00',    city: 'Da Nang', organizer: 'Sean Kim',            mapUrl: 'https://www.google.com/maps/search/?api=1&query=Ket+Fai+Bar+Da+Nang+Vietnam' },
-  { day: 'Thursday',  venue: 'Malibu',             social: 'Salsa Nights',       music: '2 Salsa · 2 Bachata',              city: 'Da Nang', organizer: 'Lucho Giraldes',      mapUrl: 'https://www.google.com/maps/search/?api=1&query=Malibu+Beach+Club+Da+Nang+Vietnam' },
-  { day: 'Friday',    venue: 'An Thuong By Night', social: 'Dance Unity Party',  music: '2 Salsa · 2 Bachata · 2 Kizomba',  city: 'Da Nang', organizer: 'Nadiya Yagfarova',   mapUrl: 'https://www.google.com/maps/search/?api=1&query=An+Thuong+Tourist+Street+Da+Nang+Vietnam' },
-  { day: 'Saturday',  venue: 'La Riva',            social: 'Latino Dancing',     music: '2 Salsa · 2 Bachata · 2 Kizomba',  city: 'Hoi An',  organizer: 'David Tavares',       mapUrl: 'https://www.google.com/maps/search/?api=1&query=La+Riva+An+Bang+Hoi+An+Vietnam' },
-  { day: 'Saturday',  venue: 'An Thuong By Night', social: 'Bachata Party',      music: 'Only Bachata',                     city: 'Da Nang', organizer: 'Vaclav & Kseniya',   mapUrl: 'https://www.google.com/maps/search/?api=1&query=An+Thuong+Tourist+Street+Da+Nang+Vietnam' },
-  { day: 'Sunday',    venue: 'Last Call',          social: 'Latin Dance Social', music: '3 Bachata · 2 Salsa',              city: 'Da Nang', organizer: 'Vaclav & Kseniya',   mapUrl: 'https://www.google.com/maps/search/?api=1&query=Last+Call+Bar+Da+Nang+Vietnam' },
-  { day: 'Sunday',    venue: 'Corner Bar',         social: 'Sunday Latin',       music: '3 Bachata · 2 Salsa · 3 Kizomba',  city: 'Da Nang', organizer: 'Daisy Nguyen',        mapUrl: 'https://www.google.com/maps/search/?api=1&query=Corner+Bar+Da+Nang+Vietnam' },
+  { day: 'Monday',    when: '8:30 pm',  venue: 'Webe Coffee',       social: 'BOM',                music: '8 Bachata · 1 Salsa · 1 Kizomba',  city: 'Da Nang', organizer: 'Luu Phuong & Shai',  mapUrl: 'https://maps.app.goo.gl/jvaQgcNt4doYwZ2N7' },
+  { day: 'Tuesday',   when: '9 pm',     venue: 'La Riva',            social: 'Latino Dancing',     music: '2 Salsa · 2 Bachata · 2 Kizomba',  city: 'Hoi An',  organizer: 'David Tavares',       mapUrl: 'https://www.google.com/maps/search/?api=1&query=La+Riva+An+Bang+Hoi+An+Vietnam' },
+  { day: 'Tuesday',   when: '9 pm',     venue: 'Caliz Bar',          social: 'Sensual Night',      music: '3 Bachata · 2 Salsa · 2 Kizomba',  city: 'Da Nang', organizer: 'Daisy Nguyen',        mapUrl: 'https://www.google.com/maps/place/C%C3%A1liz+Wine+Bar/@16.0485026,108.2470699,17z' },
+  { day: 'Wednesday', when: '7:30 pm',  venue: 'Ket Fai Bar',        social: 'Bachata Kiz Night',  music: 'Kizomba 7:30 · Bachata 9 pm',      city: 'Da Nang', organizer: 'Sean Kim',            mapUrl: 'https://www.google.com/maps/search/?api=1&query=Ket+Fai+Bar+Da+Nang+Vietnam' },
+  { day: 'Thursday',  when: '9 pm',     venue: 'Malibu',             social: 'Salsa Nights',       music: '2 Salsa · 2 Bachata',              city: 'Da Nang', organizer: 'Lucho Giraldes',      mapUrl: 'https://www.google.com/maps/search/?api=1&query=Malibu+Beach+Club+Da+Nang+Vietnam' },
+  { day: 'Friday',    when: '9 pm',     venue: 'An Thuong By Night', social: 'Dance Unity Party',  music: '2 Salsa · 2 Bachata · 2 Kizomba',  city: 'Da Nang', organizer: 'Nadiya Yagfarova',   mapUrl: 'https://www.google.com/maps/search/?api=1&query=An+Thuong+Tourist+Street+Da+Nang+Vietnam' },
+  { day: 'Saturday',  when: '9 pm',     venue: 'La Riva',            social: 'Latino Dancing',     music: '2 Salsa · 2 Bachata · 2 Kizomba',  city: 'Hoi An',  organizer: 'David Tavares',       mapUrl: 'https://www.google.com/maps/search/?api=1&query=La+Riva+An+Bang+Hoi+An+Vietnam' },
+  { day: 'Saturday',  when: '9 pm',     venue: 'An Thuong By Night', social: 'Bachata Party',      music: 'Only Bachata',                     city: 'Da Nang', organizer: 'Vaclav & Kseniya',   mapUrl: 'https://www.google.com/maps/search/?api=1&query=An+Thuong+Tourist+Street+Da+Nang+Vietnam' },
+  { day: 'Sunday',    when: '9 pm',     venue: 'Last Call',          social: 'Latin Dance Social', music: '3 Bachata · 2 Salsa',              city: 'Da Nang', organizer: 'Vaclav & Kseniya',   mapUrl: 'https://www.google.com/maps/search/?api=1&query=Last+Call+Bar+Da+Nang+Vietnam' },
+  { day: 'Sunday',    when: '9 pm',     venue: 'Corner Bar',         social: 'Sunday Latin',       music: '3 Bachata · 2 Salsa · 3 Kizomba',  city: 'Da Nang', organizer: 'Daisy Nguyen',        mapUrl: 'https://www.google.com/maps/search/?api=1&query=Corner+Bar+Da+Nang+Vietnam' },
 ];
 
-// ---- Navigation ----
+const DAYS_ORDER = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
+
+function getTodayName() {
+  return DAYS_ORDER[new Date().getDay()];
+}
+
+// Parse "2 Salsa · 3 Bachata · 1 Kizomba" into sfB-chip spans
+function musicToChips(music) {
+  const styleMap = { salsa: 'salsa', bachata: 'bachata', kizomba: 'kizomba', zouk: 'zouk' };
+  return music.split('·').map(s => s.trim()).filter(Boolean).map(segment => {
+    let cls = '';
+    for (const [key, val] of Object.entries(styleMap)) {
+      if (segment.toLowerCase().includes(key)) { cls = val; break; }
+    }
+    return `<span class="sfB-chip ${cls}">${segment}</span>`;
+  }).join('');
+}
+
+// ---- Nav (mobile) ----
 function initNav() {
-  const hamburger = document.getElementById('hamburger');
-  const navLinks  = document.getElementById('nav-links');
-  if (!hamburger || !navLinks) return;
+  const hamburger = document.getElementById('sfB-hamburger');
+  const mobileNav = document.getElementById('sfB-mobile-nav');
+  const closeBtn  = document.getElementById('sfB-mobile-nav-close');
 
-  hamburger.addEventListener('click', () => {
-    const isOpen = navLinks.classList.toggle('open');
-    hamburger.setAttribute('aria-expanded', String(isOpen));
+  if (!hamburger || !mobileNav) return;
+
+  hamburger.addEventListener('click', () => mobileNav.classList.add('open'));
+  if (closeBtn) closeBtn.addEventListener('click', () => mobileNav.classList.remove('open'));
+
+  mobileNav.querySelectorAll('a').forEach(link => {
+    link.addEventListener('click', () => mobileNav.classList.remove('open'));
   });
 
-  navLinks.querySelectorAll('a').forEach(link => {
-    link.addEventListener('click', () => navLinks.classList.remove('open'));
+  // close on backdrop click
+  mobileNav.addEventListener('click', e => {
+    if (e.target === mobileNav) mobileNav.classList.remove('open');
   });
 }
 
-// ---- Schedule: full table ----
-function renderScheduleTable() {
-  const tbody = document.getElementById('schedule-tbody');
-  if (!tbody) return;
+// ---- Schedule: full list (schedule.html) ----
+function renderScheduleList() {
+  const list = document.getElementById('sfB-schedule-list');
+  if (!list) return;
 
-  tbody.innerHTML = SCHEDULE.map(row => `
-    <tr>
-      <td data-label="Day">
-        <span class="day-badge day-${row.day.toLowerCase()}">${row.day}</span>
-      </td>
-      <td data-label="Venue" class="venue-name">
-        ${row.mapUrl
-          ? `<a href="${row.mapUrl}" target="_blank" rel="noopener" class="venue-map-link">${row.venue}<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></a>`
-          : row.venue}
-      </td>
-      <td data-label="Social" class="social-name">${row.social}</td>
-      <td data-label="Music"  class="music-text">${row.music}</td>
-      <td data-label="City"><span class="city-badge">${row.city}</span></td>
-      <td data-label="Organizer" class="organizer-text">${row.organizer}</td>
-    </tr>
-  `).join('');
+  const today = getTodayName();
+
+  list.innerHTML = SCHEDULE.map(row => {
+    const isToday = row.day === today;
+    const cityClass = row.city === 'Hoi An' ? 'hoian' : 'danang';
+    const venueEl = row.mapUrl
+      ? `<a href="${row.mapUrl}" target="_blank" rel="noopener">${row.venue}</a>`
+      : row.venue;
+
+    return `
+      <div class="sfB-row${isToday ? ' today' : ''}">
+        <div class="col-day">
+          <span class="name">${row.day}</span>
+          <span class="when">${row.when || ''}</span>
+          ${isToday ? '<span class="tonight-label">▶ Tonight</span>' : ''}
+        </div>
+        <div class="col-venue">
+          <span class="pin">📍</span>
+          ${venueEl}
+        </div>
+        <div class="col-social">
+          ${row.social}
+          <span class="sub">${row.organizer}</span>
+        </div>
+        <div class="col-music">${musicToChips(row.music)}</div>
+        <div><span class="col-city ${cityClass}">${row.city}</span></div>
+        <div class="col-org">${row.organizer}</div>
+      </div>`;
+  }).join('');
 }
 
-// ---- Home: "Coming up this week" teaser (3 events starting from today) ----
+// ---- Home: "Coming up" teaser (4 cards starting from today) ----
 function renderScheduleTeaser() {
-  const container = document.getElementById('schedule-teaser');
+  const container = document.getElementById('sfB-coming-row');
   if (!container) return;
 
-  const DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-  const today = DAYS[new Date().getDay()];
-  const startIdx = DAYS.indexOf(today);
-  const order = [...DAYS.slice(startIdx), ...DAYS.slice(0, startIdx)];
+  const today = getTodayName();
+  const startIdx = DAYS_ORDER.indexOf(today);
+  const order = [...DAYS_ORDER.slice(startIdx), ...DAYS_ORDER.slice(0, startIdx)];
 
   const sorted = [...SCHEDULE].sort(
     (a, b) => order.indexOf(a.day) - order.indexOf(b.day)
   );
 
-  container.innerHTML = sorted.slice(0, 3).map(row => `
-    <div class="teaser-card">
-      <div class="teaser-day">${row.day}</div>
-      <div class="teaser-social">${row.social}</div>
-      <div class="teaser-venue">@ ${row.venue}</div>
-      <div class="teaser-meta">${row.music} &middot; ${row.city}</div>
-    </div>
+  container.innerHTML = sorted.slice(0, 4).map(row => `
+    <a href="schedule.html" class="sfB-tcard">
+      <div class="day">${row.day}</div>
+      <div class="when">${row.when || ''}</div>
+      <h4>${row.social}</h4>
+      <div class="at">@ ${row.venue} · ${row.city}</div>
+      <div class="chips">${musicToChips(row.music)}</div>
+    </a>
   `).join('');
 }
 
@@ -107,7 +143,7 @@ function initFilters() {
 // ---- Init ----
 document.addEventListener('DOMContentLoaded', () => {
   initNav();
-  renderScheduleTable();
+  renderScheduleList();
   renderScheduleTeaser();
   initFilters();
 });
diff --git a/schedule.html b/schedule.html
index 01edcd9..4a20266 100644
--- a/schedule.html
+++ b/schedule.html
@@ -1,4 +1,4 @@
-﻿<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
@@ -6,94 +6,109 @@
   <title>Weekly Schedule — Sabor Flow Da Nang</title>
   <meta name="description" content="The weekly Latin social dance schedule in Da Nang and Hoi An. Salsa, Bachata, Kizomba, Zouk — every day of the week.">
   <link rel="icon" type="image/jpeg" href="assets/logo.jpg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
 
-  <nav class="nav">
-    <div class="nav-container">
-      <a href="index.html" class="nav-brand">
-        <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-        <span class="nav-brand-name">SABOR FLOW <span class="nav-brand-city">Da Nang</span></span>
-      </a>
-      <button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
-        <span></span><span></span><span></span>
-      </button>
-      <ul class="nav-links" id="nav-links">
-        <li><a href="index.html">Home</a></li>
-        <li><a href="schedule.html" class="active">Schedule</a></li>
-        <li><a href="connect.html">Connect</a></li>
-        <li><a href="studios.html">Studios</a></li>
-        <li><a href="classes.html">Classes</a></li>
-        <li><a href="festivals.html">Festivals</a></li>
-      </ul>
-    </div>
+  <div class="sfB-bg" aria-hidden="true"></div>
+
+  <nav class="sfB-mobile-nav" id="sfB-mobile-nav" aria-label="Mobile navigation">
+    <button class="mnav-close" id="sfB-mobile-nav-close" aria-label="Close menu">✕</button>
+    <a href="/">Home</a>
+    <a href="schedule.html" class="active">Schedule</a>
+    <a href="connect.html">Connect</a>
+    <a href="studios.html">Studios</a>
+    <a href="classes.html">Classes</a>
+    <a href="festivals.html">Festivals</a>
   </nav>
 
-  <div class="container">
-    <div class="page-header">
-      <p class="section-label">Da Nang &middot; Hoi An</p>
-      <h1>Weekly Schedule</h1>
-      <p class="subtitle">Your guide to social dancing — every single week.</p>
+  <header class="sfB-topbar">
+    <a href="/" class="logo">
+      <div class="mark"><img src="assets/logo.jpg" alt="Sabor Flow Da Nang"></div>
+      <div class="name">SABOR FLOW<span class="city">Da Nang</span></div>
+    </a>
+    <nav class="sfB-nav">
+      <a href="/">Home</a>
+      <a href="schedule.html" class="active">Schedule</a>
+      <a href="connect.html">Connect</a>
+      <a href="studios.html">Studios</a>
+      <a href="classes.html">Classes</a>
+      <a href="festivals.html">Festivals</a>
+    </nav>
+    <div class="topbar-right">
+      <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
+        @saborflowdanang
+      </a>
+      <button class="sfB-hamburger" id="sfB-hamburger" aria-label="Open menu">
+        <span></span><span></span><span></span>
+      </button>
     </div>
+  </header>
 
-    <div class="schedule-note">
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
-      <span>Music ratios (e.g. <strong style="color:var(--text)">2 Salsa · 2 Bachata · 2 Kizomba</strong>) show approximate songs per style per rotation. Schedules may change — follow <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" style="color:var(--teal)">@saborflowdanang</a> and the <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" style="color:var(--teal)">Da Nang SBK group</a> for real-time updates. Pop-up parties for <strong style="color:var(--text)">Zouk</strong> and <strong style="color:var(--text)">Tango</strong> are announced there too.</span>
-    </div>
-
-    <div class="schedule-table-wrap">
-      <table class="schedule-table">
-        <thead>
-          <tr>
-            <th>Day</th>
-            <th>Venue</th>
-            <th>Social</th>
-            <th>Music</th>
-            <th>City</th>
-            <th>Organizer</th>
-          </tr>
-        </thead>
-        <tbody id="schedule-tbody"></tbody>
-      </table>
-    </div>
-
-    <p class="mt-3" style="color:var(--muted);font-size:.78rem">Schedule updated monthly &mdash; last update: <strong style="color:var(--text);font-weight:500">April 2026</strong></p>
-  </div>
-
-  <footer class="footer" style="margin-top:4rem">
-    <div class="container">
-      <div class="footer-inner">
-        <div>
-          <a href="index.html" class="footer-brand">
-            <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-            <span class="footer-brand-name">SABOR FLOW <span class="footer-brand-city">Da Nang</span></span>
-          </a>
-          <p class="footer-tagline">Da Nang's Latin dance community</p>
-        </div>
-        <nav class="footer-nav">
-          <a href="index.html">Home</a>
-          <a href="schedule.html">Schedule</a>
-          <a href="connect.html">Connect</a>
-          <a href="studios.html">Studios</a>
-          <a href="classes.html">Classes</a>
-          <a href="festivals.html">Festivals</a>
-        </nav>
-        <div class="footer-social">
-          <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="footer-social-link">
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
-            @saborflowdanang
-          </a>
-          <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="footer-social-link">
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
-            Da Nang SBK Group
-          </a>
-        </div>
+  <main class="sfB-page">
+    <div class="sfB-page-head">
+      <h1>Weekly <em>Schedule</em></h1>
+      <div class="info">
+        Music ratios (e.g. <b>2 Salsa · 2 Bachata · 2 Kizomba</b>) show approximate songs per style per rotation. Schedules may change — follow <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">@saborflowdanang</a> and the <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener">Da Nang SBK group</a> for real-time updates. Pop-up parties for <b>Zouk</b> and <b>Tango</b> are announced there too.
       </div>
-      <div class="footer-bottom">Made with love for the Da Nang dance community</div>
+    </div>
+
+    <div class="sfB-toolbar">
+      <div class="sfB-pills">
+        <button class="filter-pill active" data-filter="all">All</button>
+        <button class="filter-pill" data-filter="salsa">Salsa</button>
+        <button class="filter-pill" data-filter="bachata">Bachata</button>
+        <button class="filter-pill" data-filter="kizomba">Kizomba</button>
+        <button class="filter-pill" data-filter="zouk">Zouk</button>
+        <button class="filter-pill" data-filter="danang">Da Nang</button>
+        <button class="filter-pill" data-filter="hoian">Hoi An</button>
+      </div>
+    </div>
+
+    <div class="sfB-list" id="sfB-schedule-list"></div>
+
+    <p class="footnote">Schedule updated monthly &mdash; last update: <strong style="color:var(--sf-gold)">May 2026</strong></p>
+  </main>
+
+  <footer class="sfB-foot">
+    <div><strong>SABOR FLOW</strong> Da Nang &mdash; Latin dance community &copy; 2025</div>
+    <nav class="foot-links">
+      <a href="/">Home</a>
+      <a href="schedule.html">Schedule</a>
+      <a href="connect.html">Connect</a>
+      <a href="studios.html">Studios</a>
+      <a href="classes.html">Classes</a>
+      <a href="festivals.html">Festivals</a>
+    </nav>
+    <div class="foot-social">
+      <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a>
+      <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener">Facebook</a>
     </div>
   </footer>
 
   <script src="js/main.js"></script>
+  <script>
+    // Schedule-page filter by city / style
+    document.addEventListener('DOMContentLoaded', () => {
+      document.querySelectorAll('.sfB-pills .filter-pill').forEach(pill => {
+        pill.addEventListener('click', () => {
+          document.querySelectorAll('.sfB-pills .filter-pill').forEach(p => p.classList.remove('active'));
+          pill.classList.add('active');
+          const f = pill.dataset.filter;
+          document.querySelectorAll('.sfB-row').forEach(row => {
+            if (f === 'all') { row.style.display = ''; return; }
+            const music = row.querySelector('.col-music')?.textContent.toLowerCase() || '';
+            const city  = row.querySelector('.col-city')?.textContent.toLowerCase() || '';
+            const show = music.includes(f) || city.includes(f === 'danang' ? 'da nang' : f);
+            row.style.display = show ? '' : 'none';
+          });
+        });
+      });
+    });
+  </script>
 </body>
 </html>
diff --git a/studios.html b/studios.html
index 5d6efc3..e008487 100644
--- a/studios.html
+++ b/studios.html
@@ -1,4 +1,4 @@
-﻿<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
@@ -6,183 +6,185 @@
   <title>Dance Studios — Sabor Flow Da Nang</title>
   <meta name="description" content="Latin dance studios in Da Nang, Vietnam. Find schools teaching Salsa, Bachata, Kizomba, and Zouk.">
   <link rel="icon" type="image/jpeg" href="assets/logo.jpg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
 
-  <nav class="nav">
-    <div class="nav-container">
-      <a href="index.html" class="nav-brand">
-        <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-        <span class="nav-brand-name">SABOR FLOW <span class="nav-brand-city">Da Nang</span></span>
-      </a>
-      <button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
-        <span></span><span></span><span></span>
-      </button>
-      <ul class="nav-links" id="nav-links">
-        <li><a href="index.html">Home</a></li>
-        <li><a href="schedule.html">Schedule</a></li>
-        <li><a href="connect.html">Connect</a></li>
-        <li><a href="studios.html" class="active">Studios</a></li>
-        <li><a href="classes.html">Classes</a></li>
-        <li><a href="festivals.html">Festivals</a></li>
-      </ul>
-    </div>
+  <div class="sfB-bg" aria-hidden="true"></div>
+
+  <nav class="sfB-mobile-nav" id="sfB-mobile-nav">
+    <button class="mnav-close" id="sfB-mobile-nav-close">✕</button>
+    <a href="/">Home</a>
+    <a href="schedule.html">Schedule</a>
+    <a href="connect.html">Connect</a>
+    <a href="studios.html" class="active">Studios</a>
+    <a href="classes.html">Classes</a>
+    <a href="festivals.html">Festivals</a>
   </nav>
 
-  <div class="container">
-    <div class="page-header">
-      <p class="section-label">Da Nang</p>
-      <h1>Dance Studios</h1>
-      <p class="subtitle">Dedicated schools and venues where you can take Latin dance lessons.</p>
+  <header class="sfB-topbar">
+    <a href="/" class="logo">
+      <div class="mark"><img src="assets/logo.jpg" alt="Sabor Flow Da Nang"></div>
+      <div class="name">SABOR FLOW<span class="city">Da Nang</span></div>
+    </a>
+    <nav class="sfB-nav">
+      <a href="/">Home</a>
+      <a href="schedule.html">Schedule</a>
+      <a href="connect.html">Connect</a>
+      <a href="studios.html" class="active">Studios</a>
+      <a href="classes.html">Classes</a>
+      <a href="festivals.html">Festivals</a>
+    </nav>
+    <div class="topbar-right">
+      <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
+        @saborflowdanang
+      </a>
+      <button class="sfB-hamburger" id="sfB-hamburger" aria-label="Open menu">
+        <span></span><span></span><span></span>
+      </button>
+    </div>
+  </header>
+
+  <main class="sfB-page">
+    <div class="sfB-page-head">
+      <h1>Dance <em>Studios</em></h1>
+      <div class="info">
+        Dedicated schools and venues where you can take Latin dance lessons in Da Nang. Filter by style to find your perfect fit.
+      </div>
     </div>
 
-    <div class="filter-bar">
-      <button class="filter-pill active" data-filter="all">All</button>
-      <button class="filter-pill" data-filter="salsa">Salsa</button>
-      <button class="filter-pill" data-filter="bachata">Bachata</button>
-      <button class="filter-pill" data-filter="kizomba">Kizomba</button>
-      <button class="filter-pill" data-filter="zouk">Zouk</button>
+    <div class="sfB-toolbar">
+      <div class="sfB-pills">
+        <button class="filter-pill active" data-filter="all">All</button>
+        <button class="filter-pill" data-filter="salsa">Salsa</button>
+        <button class="filter-pill" data-filter="bachata">Bachata</button>
+        <button class="filter-pill" data-filter="kizomba">Kizomba</button>
+        <button class="filter-pill" data-filter="zouk">Zouk</button>
+      </div>
     </div>
 
-    <div class="card-grid">
+    <div class="sfB-cards">
 
       <!-- Frog Goose Bachata School -->
-      <div class="card studio-card filterable-card" data-styles="bachata">
-        <div class="card-stripe"></div>
-        <div class="card-body">
-          <div class="card-title">Frog Goose Bachata School</div>
-          <div class="tags">
-            <span class="tag tag-bachata">Bachata</span>
-          </div>
-          <div class="card-info">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+      <div class="sfB-card-x filterable-card" data-styles="bachata">
+        <div class="stripe bachata"></div>
+        <h3>Frog Goose Bachata School</h3>
+        <div class="ts">
+          <span class="sfB-chip bachata">Bachata</span>
+        </div>
+        <div class="info">
+          <div class="row">
+            <span class="ic">📍</span>
             <span>292 Vo Nguyen Giap, Bac My Phu, Ngu Hanh Son, Da Nang</span>
           </div>
-          <div class="card-info">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+          <div class="row">
+            <span class="ic">🕘</span>
             <span>Monday workshops 8:30 PM &middot; Social from 9:30 PM</span>
           </div>
-          <div class="card-info">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
+          <div class="row">
+            <span class="ic">👥</span>
             <span>Luu Nhat Phuong, Phong &amp; Shai</span>
           </div>
-          <div class="card-links">
-            <a href="https://www.facebook.com/frog.goose/" target="_blank" rel="noopener" class="card-link">
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
-              Facebook
-            </a>
-          </div>
+        </div>
+        <div class="links">
+          <a href="https://www.facebook.com/frog.goose/" target="_blank" rel="noopener">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
+            Facebook
+          </a>
         </div>
       </div>
 
       <!-- Salsa Da Nang -->
-      <div class="card studio-card filterable-card" data-styles="salsa">
-        <div class="card-stripe"></div>
-        <div class="card-body">
-          <div class="card-title">Salsa Da Nang</div>
-          <div class="tags">
-            <span class="tag tag-salsa">Salsa On1</span>
-            <span class="tag tag-salsa">Salsa On2</span>
+      <div class="sfB-card-x filterable-card" data-styles="salsa">
+        <div class="stripe salsa"></div>
+        <h3>Salsa Da Nang</h3>
+        <div class="ts">
+          <span class="sfB-chip salsa">Salsa On1</span>
+          <span class="sfB-chip salsa">Salsa On2</span>
+        </div>
+        <div class="info">
+          <div class="row">
+            <span class="ic">📍</span>
+            <span>Da Nang (various venues &mdash; check website)</span>
           </div>
-          <div class="card-info">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
-            <span>Da Nang (various venues &mdash; check website for current location)</span>
-          </div>
-          <div class="card-info">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
+          <div class="row">
+            <span class="ic">👤</span>
             <span>Lucho Giraldes &mdash; 20+ years experience, professional performer</span>
           </div>
-          <div class="card-info">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
-            <span>Beginner &middot; Intermediate &middot; Advanced</span>
-          </div>
-          <div class="card-links">
-            <a href="https://salsadanang.com" target="_blank" rel="noopener" class="card-link">
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
-              Website
-            </a>
-            <a href="https://www.instagram.com/salsadanang/" target="_blank" rel="noopener" class="card-link">
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
-              Instagram
-            </a>
+          <div class="row">
+            <span class="ic">📖</span>
+            <span>Beginner · Intermediate · Advanced</span>
           </div>
         </div>
+        <div class="links">
+          <a href="https://salsadanang.com" target="_blank" rel="noopener">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+            Website
+          </a>
+          <a href="https://www.instagram.com/salsadanang/" target="_blank" rel="noopener">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
+            Instagram
+          </a>
+        </div>
       </div>
 
-      <!-- LearnToDanceDANANG -->
-      <div class="card studio-card filterable-card" data-styles="salsa,bachata,kizomba,zouk">
-        <div class="card-stripe"></div>
-        <div class="card-body">
-          <div class="card-title">LearnToDance Da Nang</div>
-          <div class="tags">
-            <span class="tag tag-salsa">Salsa</span>
-            <span class="tag tag-bachata">Bachata</span>
-            <span class="tag tag-kizomba">Kizomba</span>
-            <span class="tag tag-zouk">Zouk</span>
-          </div>
-          <div class="card-info">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+      <!-- LearnToDance Da Nang -->
+      <div class="sfB-card-x filterable-card" data-styles="salsa,bachata,kizomba,zouk">
+        <div class="stripe multi"></div>
+        <h3>LearnToDance Da Nang</h3>
+        <div class="ts">
+          <span class="sfB-chip salsa">Salsa</span>
+          <span class="sfB-chip bachata">Bachata</span>
+          <span class="sfB-chip kizomba">Kizomba</span>
+          <span class="sfB-chip zouk">Zouk</span>
+        </div>
+        <div class="info">
+          <div class="row">
+            <span class="ic">📍</span>
             <span>Da Nang</span>
           </div>
-          <div class="card-info">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.7 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.61 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.09 6.09l.95-.95a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
-            <span><a href="tel:+84855085903" style="color:var(--orange)">+84 85 508 5903</a></span>
+          <div class="row">
+            <span class="ic">📞</span>
+            <span><a href="tel:+84855085903">+84 85 508 5903</a></span>
           </div>
-          <div class="card-info">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-            <span><a href="mailto:LearnToDanceDANANG@gmail.com" style="color:var(--orange)">LearnToDanceDANANG@gmail.com</a></span>
-          </div>
-          <div class="card-links">
-            <a href="mailto:LearnToDanceDANANG@gmail.com" class="card-link">
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-              Email
-            </a>
+          <div class="row">
+            <span class="ic">✉️</span>
+            <span><a href="mailto:LearnToDanceDANANG@gmail.com">LearnToDanceDANANG@gmail.com</a></span>
           </div>
         </div>
+        <div class="links">
+          <a href="mailto:LearnToDanceDANANG@gmail.com">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+            Email
+          </a>
+        </div>
       </div>
 
     </div>
 
-    <div class="mt-3" style="background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center">
-      <p style="color:var(--muted);margin-bottom:1rem">Know a studio we&rsquo;re missing? Let us know.</p>
-      <a href="connect.html" class="btn btn-ghost">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
-        <span>Contact Us</span>
-      </a>
+    <div class="sfB-suggest">
+      <p>Know a studio we're missing? Let us know.</p>
+      <a href="connect.html" class="sfB-btn ghost">Contact Us</a>
     </div>
-  </div>
+  </main>
 
-  <footer class="footer" style="margin-top:4rem">
-    <div class="container">
-      <div class="footer-inner">
-        <div>
-          <a href="index.html" class="footer-brand">
-            <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-            <span class="footer-brand-name">SABOR FLOW <span class="footer-brand-city">Da Nang</span></span>
-          </a>
-          <p class="footer-tagline">Da Nang's Latin dance community</p>
-        </div>
-        <nav class="footer-nav">
-          <a href="index.html">Home</a>
-          <a href="schedule.html">Schedule</a>
-          <a href="connect.html">Connect</a>
-          <a href="studios.html">Studios</a>
-          <a href="classes.html">Classes</a>
-          <a href="festivals.html">Festivals</a>
-        </nav>
-        <div class="footer-social">
-          <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="footer-social-link">
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
-            @saborflowdanang
-          </a>
-          <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="footer-social-link">
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
-            Da Nang SBK Group
-          </a>
-        </div>
-      </div>
-      <div class="footer-bottom">Made with love for the Da Nang dance community</div>
+  <footer class="sfB-foot">
+    <div><strong>SABOR FLOW</strong> Da Nang &mdash; Latin dance community &copy; 2025</div>
+    <nav class="foot-links">
+      <a href="/">Home</a>
+      <a href="schedule.html">Schedule</a>
+      <a href="connect.html">Connect</a>
+      <a href="studios.html">Studios</a>
+      <a href="classes.html">Classes</a>
+      <a href="festivals.html">Festivals</a>
+    </nav>
+    <div class="foot-social">
+      <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a>
+      <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener">Facebook</a>
     </div>
   </footer>
 
