function About() {
  const competencies = [
    "Enterprise & Digital Transformation",
    "Strategic Business Planning & Execution",
    "Program & Portfolio Leadership (EPMO / PMO)",
    "Change Management & Organisational Development",
    "Data Analytics & Business Intelligence",
    "Governance, Risk & Compliance",
    "Innovation & Continuous Improvement",
    "Stakeholder & Executive Leadership",
  ];

  const sectors = [
    { t: "Government", b: "Policy-adjacent transformation, portfolio governance and capability uplift in the public sector." },
    { t: "Health & Aged Care", b: "Enterprise program delivery and operational transformation for large care providers." },
    { t: "Finance & Utilities", b: "Regulatory change, cost optimisation and strategic program leadership." },
    { t: "Not-for-profit", b: "Building innovation frameworks, RPA/AI adoption, and high-performing delivery teams." },
  ];

  return (
    <section id="about" className="section" style={{background:'var(--ivory)'}}>
      <div className="wrap">
        <div style={{maxWidth:900, marginBottom:'clamp(48px, 6vw, 80px)'}}>
          <Eyebrow>About CASC Global</Eyebrow>
          <h2 style={{marginTop:20, fontWeight:300}}>
            A boutique consultancy built on <span className="italic">two decades</span> of enterprise transformation.
          </h2>
        </div>

        <div className="grid-2" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'clamp(32px, 5vw, 80px)', alignItems:'start', marginBottom:'clamp(48px, 6vw, 80px)'}}>
          <div style={{display:'flex', flexDirection:'column', gap:20, fontSize:17, lineHeight:1.75}}>
            <p>
              CASC Global partners with organisations on enterprise-wide transformation and digital innovation — architecting and implementing the kind of large-scale programs that deliver measurable strategic growth, operational efficiency, and cultural change.
            </p>
            <p style={{color:'var(--muted)'}}>
              Our work spans government, corporate, and not-for-profit sectors. We bring calm authority and evidence-based decision-making to complex environments, and align people, process, and technology to strategy.
            </p>
            <p style={{color:'var(--muted)'}}>
              In parallel, we work directly with professional women to provide the practical frameworks, scripts and resources they need to advance their careers — because lasting organisational change requires change at the individual level too.
            </p>
          </div>

          <div>
            <ImgPh label="workshop · strategy session" aspect="4 / 3" />
          </div>
        </div>

        <div style={{borderTop:'1px solid var(--rule)', borderBottom:'1px solid var(--rule)', padding:'clamp(32px, 4vw, 48px) 0'}}>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24}} className="grid-3">
            <div>
              <div style={{fontFamily:'var(--heading-font)', fontSize:44, fontStyle:'italic', color:'var(--rose-deep)', lineHeight:1}}>20+</div>
              <div style={{fontSize:12, letterSpacing:'.14em', textTransform:'uppercase', color:'var(--muted)', marginTop:10}}>Years of leadership experience</div>
            </div>
            <div>
              <div style={{fontFamily:'var(--heading-font)', fontSize:44, fontStyle:'italic', color:'var(--rose-deep)', lineHeight:1}}>3</div>
              <div style={{fontSize:12, letterSpacing:'.14em', textTransform:'uppercase', color:'var(--muted)', marginTop:10}}>Sectors — government, corporate, NFP</div>
            </div>
            <div>
              <div style={{fontFamily:'var(--heading-font)', fontSize:44, fontStyle:'italic', color:'var(--rose-deep)', lineHeight:1}}>EPMO</div>
              <div style={{fontSize:12, letterSpacing:'.14em', textTransform:'uppercase', color:'var(--muted)', marginTop:10}}>Portfolio & program leadership</div>
            </div>
          </div>
        </div>

        <div style={{marginTop:'clamp(48px, 6vw, 80px)'}}>
          <div className="eyebrow" style={{color:'var(--muted)', marginBottom:24}}>Sectors we serve</div>
          <div className="grid-4" style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:'clamp(16px, 2vw, 32px)'}}>
            {sectors.map((s, i) => (
              <div key={s.t} style={{borderTop:'1px solid var(--rule)', paddingTop:20}}>
                <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:14}}>
                  <span className="diamond" style={{background:'var(--rose)'}}></span>
                  <span style={{fontSize:11, letterSpacing:'.22em', textTransform:'uppercase', color:'var(--muted)'}}>0{i+1}</span>
                </div>
                <h4 style={{fontFamily:'var(--heading-font)', fontStyle:'italic', fontSize:22, fontWeight:400, color:'var(--charcoal)'}}>{s.t}</h4>
                <p style={{marginTop:10, fontSize:14, lineHeight:1.65, color:'var(--muted)'}}>{s.b}</p>
              </div>
            ))}
          </div>
        </div>

        <div style={{marginTop:'clamp(48px, 6vw, 80px)'}}>
          <div className="eyebrow" style={{color:'var(--muted)', marginBottom:16}}>Core capabilities</div>
          <div style={{display:'flex', flexWrap:'wrap', gap:8}}>
            {competencies.map(c => <span key={c} className="chip">{c}</span>)}
          </div>
        </div>

        <blockquote style={{marginTop:'clamp(48px, 6vw, 80px)', padding:'32px 0 32px 32px', borderLeft:'2px solid var(--terracotta)', fontFamily:'var(--heading-font)', fontStyle:'italic', fontSize:'clamp(22px, 2.2vw, 30px)', lineHeight:1.4, color:'var(--charcoal)', maxWidth:900}}>
          "Real change happens when you understand both sides of the equation — the organisation and the individual."
        </blockquote>
      </div>
    </section>
  );
}
Object.assign(window, { About });