.topbar { padding: .5rem 1rem; background: #fff; border-bottom: 1px solid #ddd; }
.nav { display: flex; align-items: center; gap: 1rem; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { flex: 0 0 auto; text-decoration: none; color: #004080; font-weight: 500; }
.brand { white-space: nowrap; font-weight: 700; color: #000; }
.container { max-width: 980px; margin: 0 auto; padding: 1rem; }
.center { display: grid; place-items: center; padding: 0 1rem 2rem; }
.hero-img { max-width: 100%; height: auto; display: block; border-radius: 8px; }
.footer { padding: 1rem; text-align: center; color: #666; font-size: .9rem; }

/* --- Global topbar refinements (mobile-first) --- */
header.topbar {
  padding: 8px 12px;                 /* tighter bar */
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 12px;               /* less gap under the bar */
}

/* keep the inner nav aligned with page content width */
header.topbar .nav {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 960px;                  /* match your content width */
  margin: 0 auto;                    /* center it */
  width: 100%;
  box-sizing: border-box;
}

/* brand image sizing so the bar isn’t oversized on phones */
header.topbar .brand img {
  height: 40px;                      /* was too tall; shrink on mobile */
  width: auto;
  display: block;
}

/* slightly larger on tablets/desktops */
@media (min-width: 640px) {
  header.topbar { margin-bottom: 16px; }
  header.topbar .brand img { height: 48px; }
}

/* tighten the first section below the bar (e.g., “Family snapshots, health…”) */
.main > h1:first-child,
.main > p:first-child,
.main > div:first-child {
  margin-top: 8px;                   /* reduce extra white space */
}