function Intro() {
  const pillars = [
    { word: "Champion", tail: "your value" },
    { word: "Advance",  tail: "your goals" },
    { word: "Strengthen", tail: "your skills" },
    { word: "Change", tail: "your trajectory" },
  ];
  return (
    <section className="section" style={{background:'var(--paper)'}}>
      <div className="wrap">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1.1fr', gap:'clamp(32px, 6vw, 96px)', alignItems:'start'}} className="grid-2">
          <div>
            <Eyebrow>The CASC approach</Eyebrow>
            <h2 style={{marginTop:20, fontWeight:300}}>
              We operate at the intersection of <span className="italic">corporate strategy</span> and <span className="italic">individual career development</span>.
            </h2>
          </div>
          <div>
            <p style={{fontSize:17, lineHeight:1.75, color:'var(--ink)'}}>
              Real change happens when you understand both sides of the equation. Our work spans two distinct but complementary areas: partnering with organisations on strategic transformation, and equipping professional women with the practical tools they need to advance their careers.
            </p>
            <p style={{fontSize:17, lineHeight:1.75, color:'var(--muted)', marginTop:18}}>
              We help organisations champion diversity, advance their people strategies, strategise for sustainable growth, and change workplace cultures that hold people back. Simply put — CASC Global exists to help organisations and individuals to:
            </p>
          </div>
        </div>

        <div style={{marginTop:'clamp(48px, 6vw, 80px)', borderTop:'1px solid var(--rule)', borderBottom:'1px solid var(--rule)'}}>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)'}} className="grid-4">
            {pillars.map((p, i) => (
              <div key={p.word} style={{padding:'40px 28px', borderLeft: i===0 ? '0' : '1px solid var(--rule)', display:'flex', flexDirection:'column', gap:8}}>
                <div style={{display:'flex', alignItems:'center', gap:8}}>
                  <span className="diamond" style={{background:'var(--rose)'}}></span>
                  <span style={{fontSize:11, letterSpacing:'.22em', textTransform:'uppercase', color:'var(--muted)'}}>0{i+1}</span>
                </div>
                <div style={{fontFamily:'var(--heading-font)', fontSize:'clamp(30px,3vw,44px)', fontStyle:'italic', color:'var(--charcoal)', marginTop:8, lineHeight:1}}>{p.word}</div>
                <div style={{fontSize:14, color:'var(--muted)', marginTop:4}}>{p.tail}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Intro });