/* V8-PUB9D — Hero composition and vertical rhythm correction */

/*
 * PUB9C deliberately lets the Africa network behave like an open canvas.
 * On wide screens the 1:1 SVG could therefore size itself from the full
 * right-column width, making the hero unnecessarily tall and pushing both
 * the copy and the visible African outline too far below the header.
 * PUB9D constrains the visual by height and removes the SVG's unused outer
 * viewBox space, so headline and network read as one composition.
 */
@media (min-width: 961px){
  .pub9-hero{
    min-height:0!important;
    height:auto!important;
    padding-top:clamp(2.25rem,3vw,3.35rem)!important;
    padding-bottom:clamp(2.5rem,3.8vw,4rem)!important;
  }

  .pub9-hero-grid{
    min-height:0!important;
    align-items:start!important;
    gap:clamp(1.5rem,3.2vw,3.75rem)!important;
  }

  .pub9-hero-copy{
    align-self:start;
    padding-top:clamp(.2rem,.65vw,.7rem);
  }

  .pub9c-network-visual{
    align-self:start;
    min-height:0!important;
    height:clamp(540px,38vw,680px);
    margin-top:-.55rem;
    align-items:flex-start;
    justify-content:center;
  }

  .pub9c-africa-network{
    width:auto!important;
    height:100%!important;
    max-width:none!important;
    transform:translateX(2%)!important;
  }

  .pub9c-network-mantra{
    right:.25rem;
    bottom:1.15rem;
  }

  .pub9c-network-caption{
    left:4%;
    bottom:.8rem;
  }
}

@media (min-width: 1440px){
  .pub9-hero-grid{
    grid-template-columns:minmax(0,.82fr) minmax(560px,.98fr)!important;
  }

  .pub9c-network-visual{
    height:clamp(575px,35vw,700px);
    margin-top:-.85rem;
  }
}

/* Keep the stacked/tablet composition compact without forcing desktop sizing. */
@media (max-width: 960px){
  .pub9-hero{
    min-height:0!important;
    padding-top:clamp(1.75rem,5vw,2.75rem)!important;
  }

  .pub9c-network-visual{
    margin-top:.25rem;
  }
}

@media (max-width: 700px){
  .pub9-hero{
    padding-top:1.5rem!important;
  }
}