</div>
        <div style={{ marginTop: 2 }}>
          <Button type="submit" variant="primary" size="lg" iconEnd={<CIcon name="arrow-right" size={17} />}>Send enquiry</Button>
        </div>
        <p style={{ fontFamily: NS, fontSize: 13, lineHeight: 1.55, color: "var(--text-muted)", margin: 0 }}>
          We use your details only to respond to your enquiry. See our <a href="#privacy">privacy policy</a>.
        </p>
        <p style={{ fontFamily: NS, fontSize: 12.5, lineHeight: 1.5, color: "var(--text-muted)", margin: 0, paddingTop: 12, borderTop: "1px dashed var(--border-default)" }}>
          <Ph>Field requirements are a recommendation for CE to approve</Ph>: only email, name, company and message are required; telephone, country and institution type are optional to lift completion.
        </p>
      </div>
    </form>
  );
}

function EnquirySection({ capability, formRef }) {
  const steps = [
    "We read your enquiry and route it to the right economist",
    "We come back within one working day",
    "A scoping call to agree the question, outputs and timeline, with no obligation",
  ];
  return (
    <section id="enquire" ref={formRef} style={{ background: "linear-gradient(180deg, #F4F6FC 0%, #E6ECF7 100%)", borderBottom: "1px solid var(--border-subtle)", scrollMarginTop: 80 }}>
      <div style={{ maxWidth: MAX, margin: "0 auto", padding: "64px 32px" }}>
        <div className="ce-enq-grid">
          {/* Reassurance panel */}
          <div>
            <Eyebrow style={{ marginBottom: 16 }}>Enquire</Eyebrow>
            <h2 style={{ fontFamily: SERIF, fontWeight: 600, fontSize: 34, lineHeight: 1.13, letterSpacing: "-0.015em", color: "var(--text-primary)", margin: 0 }}>Tell us what you need.</h2>

<div style={{ marginTop: 30, fontFamily: NS, fontWeight: 700, fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-muted)", marginBottom: 14 }}>What happens next</div>
            <ol style={{ listStyle: "none", counterReset: "s", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 16 }}>
              {steps.map((s, i) => (
                <li key={i} style={{ display: "flex", gap: 14 }}>
                  <span style={{ width: 28, height: 28, borderRadius: "50%", background: "var(--brand)", color: "#fff", fontFamily: NS, fontWeight: 700, fontSize: 14, display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "0 0 auto" }}>{i + 1}</span>
                  <span style={{ fontFamily: NS, fontSize: 16, lineHeight: 1.5, color: "var(--text-secondary)", paddingTop: 3 }}>{i === 1 ? <><Ph>We come back within one working day</Ph></> : s}</span>
                </li>
              ))}
            </ol>

<div style={{ marginTop: 30, paddingTop: 24, borderTop: "1px solid var(--border-subtle)" }}>
              <div style={{ fontFamily: NS, fontSize: 15, color: "var(--text-secondary)", marginBottom: 4 }}>Or email us directly at</div>
              <a href={emailHref(CONSULTANCY_EMAIL)} className="ce-plain-mail" style={{ fontSize: 18 }}>{CONSULTANCY_EMAIL}</a>
            </div>
          </div>

{/* Form */}
          <EnquiryForm capability={capability} />
        </div>
      </div>
    </section>
  );
}

/* ================================================================
   Sticky enquiry bar — appears after the hero leaves the viewport.
================================================================ */
function StickyBar({ onEnquire }) {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const hero = document.getElementById("cons-hero");
    if (!hero || !("IntersectionObserver" in window)) return;
    const io = new IntersectionObserver(([e]) => setShow(!e.isIntersecting), { threshold: 0, rootMargin: "-80px 0px 0px 0px" });
    io.observe(hero);
    return () => io.disconnect();
  }, []);
  return (
    <div className={"ce-sticky" + (show ? "" : " hide")}>
      <div className="ce-sticky-desk">
        <span style={{ fontFamily: NS, fontSize: 14.5, fontWeight: 600, color: "#fff" }}>Ready to scope a question?</span>
        <a href={emailHref(CONSULTANCY_EMAIL)} aria-label={"Email " + CONSULTANCY_EMAIL} style={{ width: 40, height: 40, borderRadius: 999, border: "1px solid rgba(255,255,255,0.24)", color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><CIcon name="mail" size={18} /></a>
        <Button variant="inverse" size="md" onClick={onEnquire} iconEnd={<CIcon name="arrow-right" size={16} />}>Enquire</Button>
      </div>
      <div className="ce-sticky-mob">
        <a href={emailHref(CONSULTANCY_EMAIL)} aria-label={"Email " + CONSULTANCY_EMAIL} style={{ width: 46, height: 46, borderRadius: 12, border: "1px solid rgba(255,255,255,0.24)", color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "0 0 auto" }}><CIcon name="mail" size={20} /></a>
        <Button variant="inverse" size="lg" block onClick={onEnquire} iconEnd={<CIcon name="arrow-right" size={18} />}>Enquire</Button>
      </div>
    </div>
  );
}

/* ================================================================
   App
================================================================ */
function App() {
  const [active, setActive] = React.useState(0);
  const [capability, setCapability] = React.useState("");
  const formRef = React.useRef();

// Deep-link: ?capability=slug preselects the form.
  React.useEffect(() => {
    const p = new URLSearchParams(location.search).get("capability");
    if (p && CAPABILITIES.some((c) => c.slug === p)) setCapability(p + "|" + Date.now());
  }, []);

return (
    <div style={{ minHeight: "100vh", background: "var(--surface-page)" }}>
      <SiteHeader />
      <Hero onEnquire={onEnquire} />
      <CapabilitySection active={active} setActive={setActive} onDiscuss={onDiscuss} />
      <ProofAndCases onDiscuss={onDiscuss} />
      <EngagementSection />
      <TeamSection />
      <EnquirySection capability={cleanCap} formRef={formRef} />
      <SiteFooter />
      <StickyBar onEnquire={onEnquire} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

{H1_LIVE}

{cap.heading}

Comparable engagements, by capability.

{cs.title}

{s.h}

{m.name}

You work directly with the economists who do the analysis, not an account team.

Thanks. Your enquiry is with the consultancy team.