/* The top of every page: top bar, agency name + logo + tagline, and menu.
   Values copied from the Contact page's design. Everything is scoped to #gh and
   reset first, so the different styles on each page can't change how it looks. */

#gh, #gh *, #gh *::before, #gh *::after { all: revert; box-sizing: border-box; }

#gh {
  display: block;
  margin: 0;
  padding: 0;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  color: #3d3d3d;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

#gh .gh-topbar { display: flex; justify-content: flex-end; align-items: center; gap: 24px; margin: 0; padding: 10px 24px; background: #1a2e4a; }
#gh .gh-topbar a { display: flex; align-items: center; gap: 6px; color: #ccd6e8; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s; }
#gh .gh-topbar a:hover { color: #4db8ff; }
#gh .gh-divider { color: #3a506b; }

#gh .gh-header { display: block; margin: 0; padding: 20px 24px 16px; background: #ffffff; text-align: center; border-bottom: 3px solid #1a2e4a; }
#gh .gh-name { margin: 4px 0 0; font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 800; letter-spacing: 0.02em; color: #1a2e4a; }
#gh .gh-logo { display: block; width: 118px; max-width: 40vw; height: auto; margin: 14px auto 8px; border: 0; }
#gh .gh-tagline { margin: 4px 0 0; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #8a93a8; }

#gh .gh-nav { display: flex; justify-content: center; flex-wrap: wrap; margin: 0; padding: 0; background: #234268; }
#gh .gh-nav a { padding: 14px 22px; color: #ccd6e8; text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-right: 1px solid rgba(255, 255, 255, 0.08); transition: background 0.2s, color 0.2s; }
#gh .gh-nav a:hover, #gh .gh-nav a.active { background: #1a6fd4; color: #ffffff; }

@media (max-width: 640px) {
  /* Let the top bar wrap on phones instead of running off the side of the screen. */
  #gh .gh-topbar { flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
  #gh .gh-nav a { padding: 12px 14px; font-size: 12px; }
}

/* Blog pages aren't inside the page wrapper the other pages use, so this gives the
   header the same width and spacing there. */
.gh-outer { max-width: 1170px; margin: 0 auto; padding: 40px 10px 0; box-sizing: border-box; }