/* ===== How We Engage: panel + left rail ===== */

/* If you can set a Section ID in Zoho Sites: #how-we-engage */
#how-we-engage {
  /* panel look */
  background: rgba(0,0,0,0.035);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 14px;
  padding: 28px 28px 22px 28px;
  margin: 28px 0;
}

/* Keep text measure readable (prevents wide-wall-of-text) */
#how-we-engage .zpelement,
#how-we-engage p,
#how-we-engage div {
  max-width: 980px;
}

/* Title styling */
#how-we-engage h2,
#how-we-engage h3 {
  margin: 0 0 14px 0;
  letter-spacing: 0.2px;
}

/* Left rail accent (architectural feel) */
#how-we-engage {
  position: relative;
  overflow: hidden;
}

#how-we-engage::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 6px;
  background: rgba(0,0,0,0.22);
  border-radius: 6px;
}

/* Ensure content doesn't overlap the rail */
#how-we-engage > * {
  position: relative;
  padding-left: 18px;
}

/* Paragraph rhythm */
#how-we-engage p {
  margin: 0 0 14px 0;
  line-height: 1.65;
}

/* Mobile tuning */
@media (max-width: 768px) {
  #how-we-engage {
    padding: 20px 18px 16px 18px;
    border-radius: 12px;
  }
  #how-we-engage::before {
    top: 14px;
    bottom: 14px;
  }
}