function Hero() {
  return (
    <section style={{ background: 'transparent', overflow: 'hidden' }}>
      <style>{`
        .eivi-hero-image-wrap {
          display: flex; align-items: center; justify-content: center;
          position: relative; order: -1;
          min-height: 280px;
        }
        @media (min-width: 900px) {
          .eivi-hero-image-wrap { order: 0; justify-content: flex-end; min-height: 640px; }
        }
      `}</style>
      <div
        className="container grid-2 hero-split"
        style={{ padding: 'clamp(56px, 10vw, 140px) clamp(20px, 5vw, 64px) clamp(56px, 9vw, 120px)' }}>
        
        <div>
          <h1 className="t-h1" style={{ margin: 0, color: '#000', fontWeight: 500 }}>Your energy is your weight. So understand it – and change it.

          </h1>
          <p className="t-body" style={{ color: '#000', marginTop: 'clamp(20px, 3vw, 40px)', maxWidth: 540, lineHeight: 1.6 }}>Eivi (pronounced ee-vee) is the next-generation metabolic health service from Tony Martin, built on 30 years of research into blood glucose. It allows you to understand and take control of your metabolism, and coaches you to natural weight loss that lasts.

          </p>
          <div className="cta-row" style={{ marginTop: 'clamp(32px, 4.5vw, 56px)' }}>
            <a href="/join.html" className="btn btn-primary btn-lg">Join the waitlist</a>
          </div>
        </div>
        <div className="eivi-hero-image-wrap">
          <div style={{
            width: '100%', maxWidth: 560,
            aspectRatio: '4 / 5',
            borderRadius: 'clamp(16px, 2.2vw, 24px)',
            overflow: 'hidden',
            background: '#F9F9F9'
          }}>
            <img
              src="./assets/photos/tony-martin-hero.jpg"
              alt="Tony Martin, Eivi founder"
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            
          </div>
        </div>
      </div>
    </section>);

}
window.Hero = Hero;