/* Restore the utility bar's original lower divider, not the main header's lower border. */
.site-modern .util { border-bottom: 1px solid #ffffff10; }
.site-modern header { border-top: 0; border-bottom: 0; }

/* Keep the header colour at the top and reserve black for the lowest edge. */
.site-modern #p-home .nh-hero {
  background-color: #0c1425;
  background-image:
    radial-gradient(ellipse 125% 55% at 50% -15%, #0c1425 0 50%, transparent 100%),
    radial-gradient(ellipse 112% 60% at 64% 135%, rgba(1, 3, 8, .58) 0%, transparent 88%),
    radial-gradient(ellipse 145% 115% at 37% 52%, rgba(121, 63, 112, .17) 0%, transparent 82%),
    radial-gradient(ellipse 120% 90% at var(--kvcf-field-x) calc(var(--kvcf-field-y) - 22%), color-mix(in srgb, var(--kvcf-flow-blue) 78%, #315f8d) 0%, transparent 82%),
    radial-gradient(ellipse 120% 100% at calc(100% - var(--kvcf-field-x)) calc(var(--kvcf-field-y) - 31%), color-mix(in srgb, var(--kvcf-flow-teal) 45%, #39948a) 0%, transparent 82%);
}

.site-modern #p-home #bHeroTitle em {
  color: #afd3e3;
}

/* Reduce the visible logo while keeping its first opaque pixel on the content gutter. */
.site-modern header .logo .header-brand-mark { width: 190px; height: 40px; }
.site-modern header .logo .header-brand-mark img { width: 220px; left: -18px; top: -17px; }
@media (max-width: 1200px) {
  .site-modern header .logo .header-brand-mark { width: 160px; height: 35px; }
  .site-modern header .logo .header-brand-mark img { width: 185px; left: -15px; top: -14px; }
}
@media (max-width: 900px) {
  .site-modern header .logo .header-brand-mark { width: 137px; height: 31px; }
  .site-modern header .logo .header-brand-mark img { width: 160px; left: -13px; top: -11px; }
}
@media (max-width: 380px) {
  .site-modern header .logo .header-brand-mark { width: 125px; height: 28px; }
  .site-modern header .logo .header-brand-mark img { width: 145px; left: -12px; top: -10px; }
}