header {
  display: flex;
  position: relative; /* containing block for the absolutely-positioned bg image below */
  overflow: hidden;
  background-size: cover; /* 100% 100% Ensures the image covers the entire header */
  background-position: left; /* Centers the image */
  background-repeat: no-repeat; /* Prevents tiling */
  width: 100%;
  /* No fixed height and no aspect-ratio here on purpose: the header's height
     is driven by its in-flow content -- the row of logos below, sized by
     .responsive-img (9.5vh / 7vh on mobile). .sp-header__bg-img is
     absolutely positioned with height:100%, so it fills whatever height
     that ends up being -- i.e. the background image's height now equals
     the logos' height, not the other way around. */
}

/* Background is a real <img> now, not a CSS background-image -- your setup
   was not loading url() references inside header.css (tried both an
   absolute /images/... path and a CSS-relative ../../images/... path,
   neither loaded), but plain <img src="/images/..."> tags on this same
   project ARE loading correctly (the two logos prove it). This uses that
   same working mechanism instead of fighting the CSS one. */
.sp-header__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
  z-index: 0;
  pointer-events: none;
}

/* The row holding the two logos needs to be an explicitly stacked,
   z-index'd element -- otherwise painting order rules put a z-index:0
   positioned element (the bg image above) on top of plain in-flow content,
   hiding the logos behind the background instead of showing them over it. */
header > div {
  position: relative;
  z-index: 1;
}

.header img {
  height: 60px;
  object-fit: contain;
}

/* -- Secondary nav strip --------------------------------------------------
   Fixed directly below #sp-header. No hardcoded `top` value here on purpose:
   .responsive-img (the logos that drive #sp-header's height) is viewport-
   height-relative (18vh / 12.5vh), so the header's real pixel height moves
   with the browser window -- any single magic-number offset would only be
   correct at one window size. js/header.js measures #sp-header's actual
   rendered height on load/resize and sets this `top` to match exactly. */
#sp-navigator {
  position: fixed;
  left: 0;
  z-index: 1029;
}

/* Spacer that pushes page content below both fixed bars (header + nav).
   Height is also set by js/header.js, for the same reason as #sp-navigator's
   top above -- it has to match the combined real rendered height, which
   changes with viewport height. */
.sp-fixed-offset {
  display: block;
}
.responsive-img {
  height: 18vh;   /*  was 9.5vh;*/
  width: auto;
}
.transparency-img {
  width: 72%;
}
/*@media (max-width: 576px), (max-height: 400px) {*/
@media (max-width: 768px) {
  .responsive-img {
    height: 12.5vh;    /*  8vh */
  }
  .footer-img {
    width: 100%;
  }
  .transparency-img {
    width: 100%;
  }
  #home-base {
    flex-direction: row; /* side by side on larger screens */
  }

  #home-base .block-rayt {
    order: 2; /* image on the right */
  }

  #home-base .block-left {
    order: 1; /* text on the left */
  }
}