console: the real mark in the masthead, not type set to look like it

The brand was being drawn: a circled "Z" in Source Sans beside "ZURICH kotak"
in letter-spaced caps with "General Insurance" under it. That is a passable
imitation of a logo and not the logo — the real mark's proportions, its weight
contrast and its plate are all in the asset, which the login page has been
using all along.

So the masthead carries the artwork, at half the bar's height, and nothing is
set in type beside it: the asset already says both lines, and the wordmark
next to it was the same sentence twice. Bundled from src/assets rather than
public/, so Vite rewrites the URL relative and it resolves under the
/zurich-kotak/ mount.

On a phone the mark shrinks rather than shedding its second line — that line
is inside the artwork now, so it cannot be dropped on its own the way the type
lockup's could.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/layout/Shell.css

@@ -29,16 +29,12 @@
 .mast__burger:hover { background: rgba(255, 255, 255, .12); }
 .mast__burger:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .28); }
 
-.mast__logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
+/* Half the bar's height, which is where a 3.7:1 lockup sits without crowding
-.mast__z {
+   the app name beside it. The asset carries its own rounded plate and the
-  width: 30px; height: 30px; border-radius: 50%;
+   words "ZURICH kotak / General Insurance", so nothing is set in type next to
-  background: #fff; color: var(--zk-navy);
+   it — that was the same sentence twice. The radius matches the artwork's own
-  font-weight: 700; font-size: 17px;
+   corners so no hairline shows at the edge. */
-  display: grid; place-items: center;
+.mast__logo { flex: none; display: block; height: 28px; width: auto; border-radius: 6px; }
-}
-.mast__word b { display: block; white-space: nowrap; font-weight: 700; font-size: 17px; letter-spacing: .06em; line-height: 1.15; }
-.mast__word b span { font-weight: 500; letter-spacing: 0; }
-.mast__word small { display: block; white-space: nowrap; font-size: 11.5px; opacity: .75; margin-top: -1px; letter-spacing: .02em; }
 
 .mast__sep { width: 1px; height: 26px; background: rgba(255, 255, 255, .22); }
 
@@ -160,9 +156,10 @@
   .shell__top { gap: 12px; padding: 0 14px; }
   .mast__burger { display: grid; }
   .mast__sep,
-  .mast__word small,
   .mast__app span { display: none; }
-  .mast__word b { font-size: 15.5px; }
+  /* "General Insurance" is inside the artwork, so it cannot be dropped on its
+     own the way the type lockup's second line was. The mark shrinks instead. */
+  .mast__logo { height: 24px; }
   .mast__app { font-size: 15.5px; }
 
   .shell__body { flex-direction: row; }

src/layout/Shell.jsx

@@ -6,6 +6,7 @@ import { useStageCounts } from '../api/portfolio.jsx'
 import { useZino } from '../api/provider.jsx'
 import AskDesk from '../components/AskDesk.jsx'
 import UserMenu from './UserMenu.jsx'
+import logo from '../assets/brand/zurich_logo.webp'
 import './Shell.css'
 
 /**
@@ -85,13 +86,12 @@ export default function Shell() {
               : <path d="M3 6h14M3 10h14M3 14h14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />}
           </svg>
         </button>
-        <div className="mast__logo">
+        {/* The lockup as ARTWORK, not as type. It was set in Source Sans with
-          <span className="mast__z" aria-hidden="true">Z</span>
+            a drawn Z, which is a passable imitation of a brand and not the
-          <div className="mast__word">
+            brand: the real mark's proportions, its weight contrast and its
-            <b>ZURICH <span>kotak</span></b>
+            plate are all in the asset. Bundled from src/assets so Vite
-            <small>General Insurance</small>
+            rewrites the URL and it resolves under the sub-path mount. */}
-          </div>
+        <img className="mast__logo" src={logo} alt="Zurich Kotak General Insurance" />
-        </div>
         <span className="mast__sep" aria-hidden="true" />
         <div className="mast__app">Lead Desk <span>Lead to policy</span></div>
         {canAskDesk ? (