// Section heading helper + page hero
window.SectionHead=function SectionHead({eb,title,sub,right}){
  return (
    <div className="row-end">
      <div className="section-head">
        <div className="eyebrow eb-line">{eb}</div>
        <h2>{title}</h2>
        {sub?<p style={{fontSize:17,maxWidth:"54ch",marginTop:8}}>{sub}</p>:null}
      </div>
      {right||null}
    </div>
  );
};
window.PageHero=function PageHero({eb,title,sub,hue,label,img}){
  return (
    <section style={{padding:"clamp(80px,9vw,140px) 0 clamp(40px,5vw,72px)",position:"relative"}}>
      <div className="container" style={{display:"grid",gridTemplateColumns:"1.2fr .8fr",gap:60,alignItems:"end"}}>
        <div>
          <div className="eyebrow eb-line">{eb}</div>
          <h1 style={{marginTop:14,fontStyle:"italic"}}>{title}</h1>
          {sub?<p style={{fontSize:18,marginTop:16,maxWidth:"50ch"}}>{sub}</p>:null}
        </div>
        <div style={{aspectRatio:"4/3",borderRadius:"var(--r-xl)",overflow:"hidden",position:"relative",boxShadow:"var(--shadow-2)"}}>
          <PH hue={hue||"lagoon"} label={label||""} img={img} svg={PHart.waves}/>
        </div>
      </div>
    </section>
  );
};