/* Plain header (used when no hero image is set) */
.sp-header { padding: 26px 18px 10px; }
.sp-header__inner { max-width: 1200px; margin: 0 auto; }
.sp-header__title {
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Hero (only shown when heroImage exists) */
.sp-hero{
  min-height: 260px;
  background: #111;
  background-size: cover;
  background-position: center;
  position: relative;
}
.sp-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.20));
}
.sp-hero__inner{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 18px 34px;
}
.sp-hero__title{
  margin: 0;
  color: #fff;
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Dotted band (only shown when hero is shown) */
.sp-divider{
  height: 70px;
  background:
    radial-gradient(circle at 8px 8px, rgba(0,0,0,.85) 3.5px, transparent 4px) 0 0 / 22px 22px,
    radial-gradient(circle at 8px 8px, rgba(0,0,0,.55) 2.5px, transparent 3px) 11px 11px / 22px 22px,
    #fff;
}

/* Content */
.sp-content{ padding: 22px 18px 60px; background: #fff; }
.sp-content__inner{ max-width: 1200px; margin: 0 auto; }

/* RTE typography */
.sp-rte{ font-size: 16px; line-height: 1.75; }
.sp-rte p{ margin: 0 0 14px; }
.sp-rte h2{ margin: 22px 0 10px; font-size: 22px; font-weight: 900; }
.sp-rte h3{ margin: 18px 0 10px; font-size: 19px; font-weight: 900; }
.sp-rte a{ text-decoration: underline; }

@media (max-width: 900px){
  .sp-hero__title{ font-size: 34px; }
  .sp-hero__inner{ padding: 54px 18px 28px; }
  .sp-header__title{ font-size: 30px; }
}