.hp-hero{
  position:relative; min-height:50vh; background:#e9eef2;
  background-size:cover; background-position:center; overflow:hidden;
}
.hp-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.35); z-index:1; }
.hp-inner{ position:relative; z-index:2; max-width:1000px; margin:0 auto; padding:5rem 2rem; text-align:center; color:#fff; }
.hp-title{ font-family:'Playfair Display',serif; font-size:clamp(2rem,4vw,3rem); margin-bottom:.75rem; }
.hp-text{  font-family:'Karla',sans-serif; font-size:clamp(1rem,2.2vw,1.25rem); line-height:1.6; opacity:.95; }