/* ── Banner shell ─────────────────────────────────────────── */
    .banner {
      position: relative;
      width: 100%;
      min-height: 280px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      overflow: hidden;
    }

    /* ── Left: rust/brown panel ───────────────────────────────── */
    .panel-left {
      position: relative;
        padding: 42px 107px 75px 200px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      z-index: 2;
      margin: 0 auto;
    }

    .eyebrow {
      display: block;
        width: 230px;
    height: 10px;
    background: #E8521A;
      background: #E8521A;
      margin-bottom: 16px;
    }

    .panel-left h2 {
         font-size: 3.5rem;
      font-weight: 800;
      color: #ffffff;
      line-height: 1.0;
      letter-spacing: 0.01em;
      text-transform: uppercase;
    }

    .tagline {
         font-size: 1.5rem;
      font-weight: 700;
      color: #fff;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 20px;
    }

    .body-copy {
      color: rgba(255,255,255,0.82);
    }

    .body-copy p + p {
      margin-top: 12px;
    }

    /* ── Right: two-image composite ──────────────────────────── */
    .panel-right {
      position: relative;
    }

    /* city / project photo fills the whole right panel */
    .img-project {
      position: absolute;
      inset: 0;
     width: 74%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      margin-left: auto;
    }

    /* engineers photo sits left-of-centre, bleeds into left panel */
    .img-engineers {
    right: 62%;      /* overlaps the diagonal seam */
      bottom: 0;
      height: 519px;
      width: auto;
      object-fit: contain;
      object-position: bottom left;
      z-index: 10;
      /* subtle shadow to separate from both backgrounds */
      filter: drop-shadow(-8px 0 18px rgba(0,0,0,0.45));
    }
      .panel-right {
    position: relative;
        display: flex;
    align-items: flex-end;
  }
/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .banner {
    display: block;
  }

  .panel-left {
    padding: 42px 42px 75px 32px;
  }

  .panel-left h2 {
    font-size: 3rem;
  }


}


/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .banner {
    display: block;
  }

  .panel-left {
    padding: 42px 42px 75px 32px;
  }

  .panel-left h2 {
    font-size: 3rem;
  }

  .panel-right {
    display: none;
  }
}