/* =========================================================
   Shared inner-page banner — matches meru-advantages (M-Clap)
   Classes: .page-banner | aliases: .mclap-banner, .robo-banner, .ab-hero
   Optional: style="--page-banner-image:url('...')" on the section
   ========================================================= */

.page-banner,
.mclap-banner,
.robo-banner,
.ab-hero{
  position:relative;
  overflow:hidden;
  min-height:220px;
  padding:110px 0 48px;
  color:#fff;
  background:#363587;
  display:flex;
  align-items:flex-end;
}

.page-banner-bg,
.mclap-banner-bg,
.robo-banner-bg,
.ab-hero-bg{
  position:absolute;
  inset:0;
  background-color:#363587;
  background-image:url("../img/gopanpally-building.jpg");
  background-position:center 40%;
  background-size:cover;
  background-repeat:no-repeat;
  transform:scale(1.04);
  z-index:0;
}

.page-banner-bg::after,
.mclap-banner-bg::after,
.robo-banner-bg::after,
.ab-hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(54,53,135,.78) 0%, rgba(54,53,135,.62) 48%, rgba(54,53,135,.42) 100%),
    radial-gradient(ellipse 55% 80% at 90% 20%, rgba(245,195,7,.18), transparent 55%);
  pointer-events:none;
}

.page-banner-inner,
.mclap-banner-inner,
.robo-banner-inner,
.ab-hero > .wrap{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
}

.page-banner-crumb,
.mclap-banner-crumb,
.robo-banner-crumb,
.ab-hero .ab-crumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0;
  padding:0;
  width:auto;
  max-width:100%;
  border:none;
  border-radius:0;
  background:transparent;
  backdrop-filter:none;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.04em;
  color:rgba(255,255,255,.7);
  text-transform:none;
}

.page-banner-crumb a,
.mclap-banner-crumb a,
.robo-banner-crumb a,
.ab-hero .ab-crumb a{
  color:#fff;
  text-decoration:none;
  opacity:.92;
  font-weight:600;
}

.page-banner-crumb a:hover,
.mclap-banner-crumb a:hover,
.robo-banner-crumb a:hover,
.ab-hero .ab-crumb a:hover{
  color:var(--marigold);
  opacity:1;
}

.page-banner-crumb span,
.mclap-banner-crumb span,
.robo-banner-crumb span,
.ab-hero .ab-crumb span{
  opacity:.45;
}

.page-banner-crumb [aria-current="page"],
.mclap-banner-crumb [aria-current="page"],
.robo-banner-crumb [aria-current="page"],
.ab-hero .ab-crumb span:last-child{
  opacity:1;
  color:var(--marigold);
  font-weight:700;
}

.page-banner-title,
.mclap-banner-title,
.robo-banner-title,
.ab-hero h1{
  margin:0;
  color:#fff;
  font-family:var(--display);
  font-size:var(--fs-h1);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.2;
  max-width:none;
  text-shadow:none;
}

.ab-hero .ab-hero-orb,
.ab-hero .fun-mark,
.ab-hero .fun-blob,
.ab-hero .eyebrow,
.ab-hero > .wrap > p{
  display:none !important;
}

@media (max-width:900px){
  .page-banner,
  .mclap-banner,
  .robo-banner,
  .ab-hero{
    min-height:200px;
    padding:100px 0 40px;
  }
  .page-banner-inner,
  .mclap-banner-inner,
  .robo-banner-inner,
  .ab-hero > .wrap{
    align-items:center;
    text-align:center;
  }
  .page-banner-crumb,
  .mclap-banner-crumb,
  .robo-banner-crumb,
  .ab-hero .ab-crumb{
    justify-content:center;
  }
}

@media (max-width:640px){
  .page-banner,
  .mclap-banner,
  .robo-banner,
  .ab-hero{
    min-height:180px;
    padding:92px 0 36px;
  }
}