/* The header (with its optional hero) and the footer. */

.site-header { position: relative; background: var(--navy); color: var(--on-navy); overflow: hidden; }
.site-header-stripe { height: 4px; background: var(--action); }

.site-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 16px; position: relative; z-index: 1; }

.site-brand { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); color: var(--on-navy); text-decoration: none; }
.site-brand:hover { color: var(--on-navy); }
.site-brand span { font-family: var(--font-display); font-weight: 700; font-size: 23px; }

.site-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 26px; }
.site-menu a:not(.btn) {
  display: inline-flex; align-items: center; min-height: var(--tap);
  color: var(--on-navy-body); font-weight: 600; font-size: 15px; text-decoration: none;
}
.site-menu a:not(.btn):hover, .site-menu a[aria-current] { color: var(--on-navy); }
.site-menu a[aria-current]:not(.btn) { box-shadow: inset 0 -2px 0 var(--accent); }

.site-menu-button {
  display: none; width: var(--tap); height: var(--tap); align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-small); background: transparent; color: var(--on-navy); cursor: pointer;
}

@media (max-width: 760px) {
  .site-menu-button { display: inline-flex; }
  .site-menu { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 12px; }
  .site-menu a:not(.btn) { border-top: 1px solid var(--navy-line); }
  .site-menu .btn { margin-top: 12px; }
  .is-menu-open .site-menu { display: flex; }
}

/* A page's title band, under the nav. */
.page-band { position: relative; z-index: 1; padding-block: 40px 72px; }
.page-band h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 800; max-width: 820px; }
.page-band p:not(.eyebrow) { margin-top: 18px; max-width: 640px; font-size: 19px; color: var(--on-navy-body); }
.page-band-center { text-align: center; }
.page-band-center h1, .page-band-center p:not(.eyebrow) { margin-inline: auto; }

.site-footer { background: var(--night); color: var(--on-night); padding-block: 56px 40px; font-size: 15px; }
.site-footer a { color: var(--on-night); text-decoration: none; }
.site-footer a:hover { color: var(--on-navy); text-decoration: underline; }
.site-footer-cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; }
.site-footer-about { max-width: 340px; }
.site-footer-about p + p { margin-top: 10px; }
.site-footer-about a { color: var(--on-navy); }
.site-footer-name { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--on-navy); }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 24px 56px; }
.site-footer-links div { display: grid; align-content: start; gap: 2px; }
.site-footer-links a { display: inline-flex; align-items: center; min-height: 36px; }
.site-footer-head { margin-bottom: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-navy); }
.site-footer-base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  margin-top: 44px; padding-top: 28px; border-top: 1px solid rgb(255 255 255 / 0.1);
}
.site-footer-company { display: inline-flex; align-items: center; min-height: var(--tap); }
.site-footer-company img { width: 122px; height: auto; }
.site-footer-small { font-size: 13px; color: var(--on-night-muted); }
.site-footer-small a { color: var(--on-night); font-weight: 700; }