Hero and brand name visual hierarchy

- Hero: "Sabor Flow" large + "Da Nang" inline, smaller and muted
- Nav/footer brand: "SABOR FLOW" bold + "Da Nang" smaller and muted
- No line break between the two parts in either context

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

index.html

@@ -14,7 +14,7 @@
     <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 DA NANG</span>
+        <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>
@@ -35,7 +35,7 @@
     <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 Da Nang</h1>
+      <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">
@@ -143,7 +143,7 @@
         <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 DA NANG</span>
+            <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>