Improve mobile name layout

components/home-page.tsx

@@ -16,6 +16,11 @@ export function HomePage({ language }: { language: Language }) {
   const dir = getDirection(language);
   const t = portfolioContent[language];
   const founderName = language === "ar" ? sharedProfile.founderNameAr : sharedProfile.founderNameEn;
+  const founderNameParts = founderName.trim().split(/\s+/);
+  const mobileFounderNameLines =
+    founderNameParts.length > 2
+      ? [`${founderNameParts[0]} ${founderNameParts[1]}`, founderNameParts.slice(2).join(" ")]
+      : [founderName];
   const address = language === "ar" ? sharedProfile.addressAr : sharedProfile.address;
   const heroImageAlt =
     language === "ar"
@@ -63,7 +68,12 @@ export function HomePage({ language }: { language: Language }) {
                     language === "en" ? "type-hero-title-latin" : ""
                   }`}
                 >
-                  {founderName}
+                  <span className="hidden sm:inline">{founderName}</span>
+                  <span className="hero-title-mobile-lines sm:hidden">
+                    {mobileFounderNameLines.map((line) => (
+                      <span key={line}>{line}</span>
+                    ))}
+                  </span>
                 </h1>
 
                 <div className="mt-8 max-w-2xl space-y-4">

components/navbar.tsx

@@ -11,6 +11,9 @@ export function Navbar({ language }: { language: Language }) {
   const t = portfolioContent[language].ui;
   const brandName = language === "ar" ? sharedProfile.brandNameAr : sharedProfile.brandNameEn;
   const basePath = getBasePath(language);
+  const brandParts = brandName.trim().split(/\s+/);
+  const mobileBrandLines =
+    brandParts.length > 2 ? [`${brandParts[0]} ${brandParts[1]}`, brandParts.slice(2).join(" ")] : [brandName];
 
   const navItems = [
     { label: t.navAbout, href: `${basePath}#about` },
@@ -23,25 +26,30 @@ export function Navbar({ language }: { language: Language }) {
   return (
     <header className="navbar-shell sticky top-0 z-50 border-b backdrop-blur-xl">
       <div
-        className={`site-container relative flex items-center justify-between gap-4 py-4 ${
+        className={`site-container navbar-layout relative flex items-center justify-between gap-4 py-4 ${
           dir === "rtl" ? "md:flex-row-reverse md:justify-between" : "md:justify-between"
         }`}
       >
-        <Link href={basePath} className="min-w-0 max-w-[68vw] md:max-w-fit">
-          <div className={`flex items-center gap-4 ${dir === "rtl" ? "flex-row-reverse" : ""}`}>
-            <div className="logo-shell overflow-hidden rounded-[20px] border p-2">
+        <Link href={basePath} className="navbar-brand-link min-w-0 max-w-[68vw] md:max-w-fit">
+          <div className={`navbar-brand-lockup flex items-center gap-4 ${dir === "rtl" ? "flex-row-reverse" : ""}`}>
+            <div className="logo-shell navbar-logo-shell overflow-hidden rounded-[20px] border p-2">
               <Image
                 src={sharedProfile.logoImage}
                 alt={language === "ar" ? "\u0634\u0639\u0627\u0631 \u063a\u0631\u064a\u0633 \u0628\u0637\u0631\u0633 \u0633\u0644\u0645\u0648\u0646" : "Grace Butrus Salmoun logo"}
                 width={60}
                 height={60}
-                className="h-[60px] w-[60px] rounded-[14px] object-contain"
+                className="navbar-logo-image h-[60px] w-[60px] rounded-[14px] object-contain"
               />
             </div>
-            <div className={`min-w-0 ${dir === "rtl" ? "text-right" : ""}`}>
-              <p className="type-brand display-face text-[var(--color-ink)]">
+            <div className={`navbar-brand-copy min-w-0 ${dir === "rtl" ? "text-right" : ""}`}>
+              <p className="type-brand display-face hidden text-[var(--color-ink)] sm:block">
                 {brandName}
               </p>
+              <p className="type-brand display-face navbar-brand-mobile text-[var(--color-ink)] sm:hidden">
+                {mobileBrandLines.map((line) => (
+                  <span key={line}>{line}</span>
+                ))}
+              </p>
               <p className="type-label mt-1 hidden tracking-[0.18em] text-[var(--color-muted)] sm:block">
                 {t.architectureEngineer}
               </p>
@@ -62,7 +70,7 @@ export function Navbar({ language }: { language: Language }) {
           </div>
         </div>
 
-        <div className={`flex items-center gap-2 md:hidden ${dir === "rtl" ? "flex-row-reverse" : ""}`}>
+        <div className={`navbar-mobile-controls flex items-center gap-2 md:hidden ${dir === "rtl" ? "flex-row-reverse" : ""}`}>
           <ThemeToggle language={language} />
           <LanguageToggle language={language} />
           <MobileNav