/* Two-tier brand header — used by every service/info page.
 *   Top:    white band  → logo + tagline
 *   Middle: 3px gold accent strip
 *   Bottom: navy band   → back-link (and future nav)
 *
 * Color and font tokens come from each page's :root vars + the existing
 * Inter / Saira Google Fonts link. Hex fallbacks are inlined in
 * case a page is loaded standalone. */

.page-header {
  display: block;
  background: #fff;
}

.page-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  background: #fff;
}

.page-header__top img {
  height: 46px;
  width: auto;
  display: block;
}

.page-header__tagline {
  font-family: 'Saira', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy, #17244A);
  opacity: 0.62;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.page-header__accent {
  height: 3px;
  background: var(--gold, #EBA911);
}

.page-header__bottom {
  background: var(--navy, #17244A);
  padding: 0.4rem 1.25rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 36px;
}

.page-header__bottom .back-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.4rem 0.7rem;
  margin-right: -0.4rem;
  color: var(--gold, #EBA911);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-radius: 6px;
  transition: background 0.15s;
}

.page-header__bottom .back-link:hover {
  background: rgba(235, 169, 17, 0.12);
}

.page-header__bottom .back-link:focus-visible {
  outline: 2px solid var(--gold, #EBA911);
  outline-offset: 2px;
}

@media (max-width: 540px) {
  .page-header__top { padding: 0.7rem 1rem; }
  .page-header__top img { height: 38px; }
  .page-header__tagline { font-size: 0.78rem; }
  .page-header__bottom { padding: 0.3rem 1rem; }
}