function Services({ lang }) {
  return (
    <section className="band band-sage services-band" id="what">
      <div className="wrap">
        <div className="services-header">
          <div>
            <div className="eyebrow eyebrow-dim">{t(COPY.services.eye, lang)}</div>
            <h2 style={{fontFamily:"var(--font-display)",fontWeight:700,fontSize:"clamp(1.8rem,4vw,3rem)",letterSpacing:"-.035em",color:"var(--shyft-dark)",marginTop:".5rem"}}>{t(COPY.services.h2, lang)}</h2>
          </div>
        </div>
        <div className="services-grid">
          {COPY.services.items.map((it, i) => (
            <div className="service" key={i}>
              <div className="service-tag">{t(it.tag, lang)}</div>
              <h3>{t(it.title, lang)}</h3>
              <p>{t(it.desc, lang)}</p>
            </div>
          ))}
        </div>
        <p className="services-foot">{t(COPY.services.foot, lang)}</p>
      </div>
    </section>
  );
}
window.Services = Services;