// Trellum — Home + Services pages

const Page = ({ children }) => <main>{children}</main>;

const PageHeadingH1 = React.forwardRef(({ children, style, ...rest }, ref) => (
  <h1 ref={ref} tabIndex={-1} style={{
    fontFamily: 'var(--ff-display)', fontWeight: 400,
    letterSpacing: '-0.015em', margin: 0, outline: 'none',
    ...style,
  }} {...rest}>{children}</h1>
));

// ─────────── HOME ───────────
const goToServicesAnchor = (setPage, anchorId) => (e) => {
  if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
  e.preventDefault();
  setPage('services');
  setTimeout(() => {
    const el = document.getElementById(anchorId);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }, 80);
};

const Home = ({ setPage, h1Ref }) => (
  <Page>
    {/* HERO */}
    <section style={{
      background: 'var(--teal)',
      padding: 'clamp(96px, 14vh, 160px) 48px clamp(64px, 10vh, 120px)',
      minHeight: 'calc(100vh - 64px)',
      display: 'flex', alignItems: 'center',
    }} className="mob-pad">
      <div style={{ maxWidth: 1100, margin: '0 auto', width: '100%' }}>
        <PageHeadingH1 ref={h1Ref} style={{
          fontSize: 'clamp(2.75rem, 6.5vw, 5rem)', lineHeight: 1.05,
          color: 'var(--paper)',
        }}>
          <FadeIn as="span" delay={200} style={{ display: 'block' }}>Operational Intelligence and AI Engineering</FadeIn>
          <FadeIn as="span" delay={360} duration={620} style={{ display: 'block' }}>
            <em style={{ fontStyle: 'italic', color: 'var(--canton)', fontFamily: 'var(--ff-display)' }}>for Facilities Management.</em>
          </FadeIn>
        </PageHeadingH1>
        <FadeIn delay={900}>
          <p style={{
            fontFamily: 'var(--ff-body)', fontWeight: 300,
            fontSize: 'clamp(15px, 1.1vw, 17px)', lineHeight: 1.7,
            color: 'rgba(245,245,243,0.85)', maxWidth: 680, margin: '32px 0 0',
          }}>
            Trellum reads the contract, recognises the operational pattern, and engineers the tooling that holds the team&apos;s response together. PFI, block management, and contract-heavy estates — built by an FM operator, not a consultancy.
          </p>
        </FadeIn>
        <FadeIn delay={1100} style={{ marginTop: 40, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          <a
            href={pagePath('oi')}
            onClick={navClick(setPage, 'oi')}
            className="btn btn-primary"
            style={{ fontSize: 13, padding: '11px 20px', textDecoration: 'none' }}
          >Operational Intelligence <Arrow /></a>
          <a
            href={pagePath('aie')}
            onClick={navClick(setPage, 'aie')}
            className="btn"
            style={{
              fontSize: 13, padding: '11px 20px', textDecoration: 'none',
              background: 'transparent', color: 'var(--canton)',
              border: '1px solid var(--canton)',
            }}
          >AI Engineering <Arrow /></a>
        </FadeIn>
      </div>
    </section>

    {/* VERTICAL RECOGNITION STRIP */}
    <section style={{ background: 'var(--paper)', padding: '96px 48px 0' }} className="mob-pad">
      <div style={{ maxWidth: 1100, margin: '0 auto', paddingTop: 48, borderTop: '1px solid var(--stone)' }}>
        <InView><Eyebrow>By regulatory context</Eyebrow></InView>
        <InView style={{
          marginTop: 28, background: 'var(--stone-light)', borderRadius: 6,
          padding: 32, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56,
        }} className="mob-stack">
          <div>
            <p style={{
              fontFamily: 'var(--ff-body)', fontWeight: 300, fontSize: 16,
              color: 'var(--charcoal)', lineHeight: 1.7, margin: 0,
            }}>
              If you&apos;re managing a PFI contract approaching expiry, a deduction dispute, or asset condition concerns at handback —
            </p>
            <a
              href={pagePath('pfi')}
              onClick={navClick(setPage, 'pfi')}
              className="btn btn-ghost-light"
              style={{ marginTop: 20, fontSize: 13, padding: '11px 20px', textDecoration: 'none' }}
            >PFI engagements <Arrow /></a>
          </div>
          <div>
            <p style={{
              fontFamily: 'var(--ff-body)', fontWeight: 300, fontSize: 16,
              color: 'var(--charcoal)', lineHeight: 1.7, margin: 0,
            }}>
              If you carry Accountable Person duties, manage HRBs, or face BSR contact on the golden thread —
            </p>
            <a
              href={pagePath('block')}
              onClick={navClick(setPage, 'block')}
              className="btn btn-ghost-light"
              style={{ marginTop: 20, fontSize: 13, padding: '11px 20px', textDecoration: 'none' }}
            >Block management engagements <Arrow /></a>
          </div>
        </InView>
        <div style={{ marginTop: 48, borderBottom: '1px solid var(--stone)' }} />
      </div>
    </section>

    {/* TWO PRACTICE PANELS */}
    <section style={{ background: 'var(--paper)', padding: '96px 48px' }} className="mob-pad">
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <InView><Eyebrow>What Trellum does</Eyebrow></InView>
        <div style={{
          marginTop: 40, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32,
        }} className="mob-stack">
          <InView style={{ background: 'var(--paper)', border: '1px solid var(--stone)', padding: 44 }}>
            <div style={{ height: 3, width: 56, background: 'var(--canton)', marginBottom: 28 }} />
            <h2 style={{
              fontFamily: 'var(--ff-display)', fontWeight: 400,
              fontSize: 'clamp(1.75rem, 2.6vw, 2.125rem)', lineHeight: 1.15,
              color: 'var(--slate)', margin: 0, letterSpacing: '-0.01em',
            }}>Operational Intelligence</h2>
            <p style={{
              marginTop: 20, fontFamily: 'var(--ff-body)', fontWeight: 300,
              fontSize: 16, lineHeight: 1.75, color: 'var(--charcoal)',
            }}>
              Trellum reads operational data — CAFM exports, compliance records, service performance returns — against the contract or the statutory regime that governs them. The work surfaces what the data shows versus what the operator or the records claim, and lodges the findings in a register the team can defend under scrutiny.
            </p>
            <p style={{
              marginTop: 16, fontFamily: 'var(--ff-body)', fontWeight: 300,
              fontSize: 16, lineHeight: 1.75, color: 'var(--charcoal)',
            }}>
              Across FM operations — sharpened in PFI as Payment Mechanism Audits, in block management as Golden Thread Gap Audits.
            </p>
            <a
              href={pagePath('oi')}
              onClick={navClick(setPage, 'oi')}
              className="tr-link"
              style={{
                display: 'inline-block', marginTop: 28,
                fontFamily: 'var(--ff-body)', fontWeight: 500, fontSize: 13,
                color: 'var(--canton)', letterSpacing: '0.02em', textDecoration: 'none',
              }}
            >More on Operational Intelligence <Arrow /></a>
          </InView>
          <InView style={{ background: 'var(--paper)', border: '1px solid var(--stone)', padding: 44 }}>
            <div style={{ height: 3, width: 56, background: 'var(--canton)', marginBottom: 28 }} />
            <h2 style={{
              fontFamily: 'var(--ff-display)', fontWeight: 400,
              fontSize: 'clamp(1.75rem, 2.6vw, 2.125rem)', lineHeight: 1.15,
              color: 'var(--slate)', margin: 0, letterSpacing: '-0.01em',
            }}>AI Engineering</h2>
            <p style={{
              marginTop: 20, fontFamily: 'var(--ff-body)', fontWeight: 300,
              fontSize: 16, lineHeight: 1.75, color: 'var(--charcoal)',
            }}>
              Trellum builds AI tooling into FM workflows — custom GPTs trained on the contract or the regulation, prompt libraries calibrated to the team&apos;s role, agentic workflows that turn unstructured operational data into structured outputs the team can defend. Built on whatever platform the team already owns. No vendor capture.
            </p>
            <p style={{
              marginTop: 16, fontFamily: 'var(--ff-body)', fontWeight: 300,
              fontSize: 16, lineHeight: 1.75, color: 'var(--charcoal)',
            }}>
              Across FM operations — sharpened for PFI workflows in paymech analysis and PMR review, for block management in golden thread evidence mapping and AP transitions.
            </p>
            <a
              href={pagePath('aie')}
              onClick={navClick(setPage, 'aie')}
              className="tr-link"
              style={{
                display: 'inline-block', marginTop: 28,
                fontFamily: 'var(--ff-body)', fontWeight: 500, fontSize: 13,
                color: 'var(--canton)', letterSpacing: '0.02em', textDecoration: 'none',
              }}
            >More on AI Engineering <Arrow /></a>
          </InView>
        </div>
      </div>
    </section>

    {/* PRACTITIONER PANEL */}
    <section style={{ background: 'var(--paper)', padding: '96px 48px' }} className="mob-pad">
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <InView><Eyebrow>Who builds this work</Eyebrow></InView>
        <InView as="h2" style={{
          fontFamily: 'var(--ff-display)', fontWeight: 400,
          fontSize: 'clamp(2rem, 3.5vw, 2.75rem)', lineHeight: 1.15,
          color: 'var(--slate)', maxWidth: 820, margin: '16px 0 36px',
          letterSpacing: '-0.01em',
        }}>
          An FM operator, <Em>not a consultancy.</Em>
        </InView>
        <InView as="p" style={{
          fontFamily: 'var(--ff-body)', fontWeight: 300, fontSize: 16,
          color: 'var(--charcoal)', lineHeight: 1.75, maxWidth: 720, margin: 0,
        }}>
          Trellum is built by a working FM practitioner — someone who has held the contract, run the helpdesk, managed the deduction conversation, and built the digital tooling that runs underneath all of it. The career behind Trellum spans four layers — commercial, technical, contractual, and digital — and the practice is the combination, not any single layer.
        </InView>
        <InView as="p" style={{
          marginTop: 20, fontFamily: 'var(--ff-body)', fontWeight: 300, fontSize: 16,
          color: 'var(--charcoal)', lineHeight: 1.75, maxWidth: 720,
        }}>
          That matters because the work Trellum sells cannot be done at distance. Reading a payment mechanism schedule against twelve months of CAFM data takes operational depth that surveying credentials do not produce. Building AI tooling that survives the Monday after training week takes domain knowledge that generic Microsoft partners do not carry. Trellum holds both.
        </InView>
        <InView style={{ marginTop: 32 }}>
          <a
            href={pagePath('approach')}
            onClick={navClick(setPage, 'approach')}
            className="tr-link"
            style={{
              fontFamily: 'var(--ff-body)', fontWeight: 500, fontSize: 13,
              color: 'var(--canton)', letterSpacing: '0.02em', textDecoration: 'none',
            }}
          >More on the approach <Arrow /></a>
        </InView>
      </div>
    </section>

    {/* ENTRY POINTS */}
    <section style={{ background: 'var(--paper)', padding: '96px 48px' }} className="mob-pad">
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <InView><Eyebrow>Three ways in</Eyebrow></InView>
        <InView as="h2" style={{
          fontFamily: 'var(--ff-display)', fontWeight: 400,
          fontSize: 'clamp(2rem, 3.5vw, 2.75rem)', lineHeight: 1.15,
          color: 'var(--slate)', maxWidth: 820, margin: '16px 0 56px',
          letterSpacing: '-0.01em',
        }}>
          Each ends with something <Em>that remains useable.</Em>
        </InView>
        {[
          ['01', 'FM AI Engineering', 'Building AI tooling into FM workflows. Custom GPTs, prompt libraries, agentic workflows, and automations designed for the contract you hold and the systems you run.', ['4–8 weeks', 'Engineering']],
          ['02', 'FM Digital Adoption', 'Targeted adoption work for FM teams who already own the platforms. Role-specific change management — property managers, contract managers, helpdesk supervisors, PPM administrators.', ['3–6 weeks', 'Adoption']],
          ['03', 'Contract & Compliance Intelligence', 'A clause-level read of the obligation — PFI payment mechanism or BSA golden-thread regime. Mapping obligations against the evidence the organisation holds.', ['Scoped', 'PFI & BSA']],
        ].map(([n, title, body, tags], i) => (
          <InView key={n}>
            <RuledRow
              n={n}
              title={title}
              body={body}
              tags={tags}
              onClick={() => setPage('services')}
              first={i === 0}
              cols="60px 1fr auto"
            />
          </InView>
        ))}
      </div>
    </section>

    <CTABand
      heading="Trellum fills the gap in Facilities Management that exists between what’s written down and what actually happens"
      body="If you carry obligations the team is currently struggling to evidence under scrutiny, the first conversation is direct."
      primaryLabel="Start a conversation →"
      primaryOnClick={() => setPage('contact')}
    />
  </Page>
);

// ─────────── SERVICES ───────────
const Services = ({ setPage, h1Ref }) => {
  const oiOfferings = [
    {
      n: '01', title: 'Operational Diagnostic',
      body: "A structured read of an FM operation as it actually runs. Trellum reads three layers in parallel: the contract or statutory regime that governs the work, the data the operation produces against that regime, and the work itself — how tasks are being performed, where defined process and lived practice diverge, where work gets picked up, dropped, reclassified, or migrated between queues without the records capturing the move.\n\nThe diagnostic produces a prioritised roadmap the team can act on. Useful whether or not the engagement continues beyond it.",
      tags: ['3–5 days', 'Entry diagnostic'],
      brings: ['Access to the FM team and the contract or compliance documentation', 'Read access to CAFM and compliance records', 'Time on site — the diagnostic is run with the team, not at distance', 'A named sponsor for the engagement'],
      receives: ['A written diagnostic across the three layers — contract, data, work', 'A prioritised roadmap with named next actions', 'A debrief session covering findings and next-step options'],
    },
    {
      n: '02', title: 'Contract & Compliance Intelligence',
      body: "A clause-level read of the obligation — a PFI payment mechanism, a BSA golden-thread regime, or another contract-and-compliance regime where the evidence requirement is heavier than the team's current capacity to meet it. The work maps obligations against the evidence the organisation holds and identifies where the two diverge.",
      tags: ['Scoped per engagement', 'Specialist'],
      brings: ['Contract documentation (PM schedule, lease, or compliance framework)', 'Operational data (helpdesk, PPM records, or compliance register)', 'Named point of contact'],
      receives: ['Named obligation register', 'Evidence gap analysis', 'Remediation owners identified'],
    },
    {
      n: '03', title: 'Payment Mechanism Audit',
      body: "A scoped read of the PFI schedule's availability and deduction logic against the recorded service events the authority holds. Findings are framed as observations against the contract — the client draws the conclusion. The same document serves the authority's position and the operator's preparation.",
      tags: ['5–7 days', 'PFI sprint'],
      brings: ['The operative payment mechanism schedule', 'CAFM export covering at least twelve months', 'Accommodation schedule and recent FM monthly reports'],
      receives: ['A written audit document — executive summary, contract comprehension, operational pattern analysis, calculation exposure', 'A working register lodged in a format the team can extend', 'A debrief session, executive-summary-ready for non-specialist senior management'],
    },
    {
      n: '04', title: 'Golden Thread Gap Audit',
      body: "A scoped read of the BSA Part 4 information requirements against the records the organisation currently holds. Findings are framed as observations against the statutory regime, categorised by gap type — absent, unstructured, undated, inaccessible. The output supports both the duty-holder's defensible position and the Accountable Person's criminal liability protection.",
      tags: ['5–7 days', 'Block sprint'],
      brings: ['Current evidence base — registers, plans, compliance records', 'AP/PAP designation documentation', 'Access to the property management or compliance lead'],
      receives: ['A written audit — statutory comprehension, evidence pattern analysis, gap register with remediation path', 'A working gap register the team can extend', 'A debrief session calibrated to AP duty-holder needs'],
    },
  ];

  const aieOfferings = [
    {
      n: '01', title: 'Digital Readiness Assessment',
      body: "A structured read of an FM team's digital position before any AI engineering or adoption work. The assessment maps the platform stack the team owns, the data quality available for AI workflows, the role-by-role candidates for AI tooling and automation, and the change readiness in the team that will use what gets built.\n\nThe output is a prioritised roadmap that scopes the AI engineering or adoption work the team is actually ready for. Useful whether or not the engagement continues beyond it.",
      tags: ['3–5 days', 'Entry diagnostic'],
      brings: ['Existing platform stack documentation (M365, Workspace, CAFM, others)', 'Sample operational data the team produces in the workflows under review', 'Access to the roles the AI work would target', 'A named sponsor for the engagement'],
      receives: ['A written assessment across platform, data, use cases, and readiness', 'A prioritised roadmap scoping the AI engineering or adoption work the team is ready for', 'A debrief session with named recommendations'],
    },
    {
      n: '02', title: 'FM AI Engineering',
      body: "Scoped engagements that build AI-powered tooling into FM workflows. Custom GPTs trained on the contract. Prompt libraries specific to PFI payment mechanisms or BSA evidence requirements. Agentic workflows that turn unstructured operational data — emails, reports, helpdesk logs — into structured outputs the team can defend. Delivered on the team's own platform stack — Microsoft 365, Google Workspace, the CAFM, or direct API. Platform-agnostic by design.",
      tags: ['4–8 weeks', 'Engineering'],
      brings: ['Named workflows in scope', 'Access to existing systems', 'Management sponsorship', 'A clear problem to solve'],
      receives: ['Working tools deployed in client environment', 'Documentation the team can extend', "Trained team members who can operate and maintain what's been built"],
    },
    {
      n: '03', title: 'FM Digital Adoption',
      body: "Targeted adoption work for FM teams who already own the platforms. The engagement maps the actual FM tasks consuming the team's week against the platform features that could absorb them, and runs the role-specific change management to land the shift. Property managers, contract managers, helpdesk supervisors, PPM administrators — different roles, different workflows, different adoption paths.",
      tags: ['3–6 weeks', 'Adoption'],
      brings: ['Existing platform access (M365, Google Workspace, CAFM, or equivalent)', 'Named roles and workflows in scope', 'Management sponsorship'],
      receives: ['Role-specific adoption playbook', 'Use-case mapping by role', "Handover register tracking what's been adopted, by whom, with what evidence"],
    },
  ];

  const renderOffering = (o, i) => (
    <InView key={o.n} style={{
      marginTop: i === 0 ? 0 : 64,
      paddingTop: i === 0 ? 0 : 64,
      borderTop: i === 0 ? 'none' : '1px solid var(--stone)',
      display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56,
    }} className="mob-stack">
      <div>
        <div style={{ fontFamily: 'var(--ff-display)', fontStyle: 'italic', fontSize: 48, color: 'var(--canton)', lineHeight: 1 }}>{o.n}</div>
        <h2 style={{ fontFamily: 'var(--ff-display)', fontSize: 30, color: 'var(--slate)', margin: '8px 0 0', fontWeight: 400, letterSpacing: '-0.01em' }}>{o.title}</h2>
        {o.body.split('\n\n').map((para, idx) => (
          <p key={idx} style={{ fontFamily: 'var(--ff-body)', fontWeight: 300, fontSize: 16, color: 'var(--charcoal)', lineHeight: 1.75, marginTop: idx === 0 ? 20 : 16 }}>{para}</p>
        ))}
        <div style={{ marginTop: 24 }}>
          {o.tags.map((t) => <Tag key={t}>{t}</Tag>)}
        </div>
      </div>
      <div style={{ background: 'var(--stone-light)', padding: 32, borderRadius: 6 }}>
        <Eyebrow>What the client brings</Eyebrow>
        <ul style={{ listStyle: 'none', padding: 0, margin: '14px 0 0' }}>
          {o.brings.map((b) => (
            <li key={b} style={{ fontFamily: 'var(--ff-body)', fontWeight: 300, fontSize: 14, color: 'var(--charcoal)', lineHeight: 1.8 }}>· {b}</li>
          ))}
        </ul>
        <hr style={{ border: 'none', borderTop: '1px solid var(--stone)', margin: '20px 0' }} />
        <Eyebrow>What the client receives</Eyebrow>
        <ul style={{ listStyle: 'none', padding: 0, margin: '14px 0 0' }}>
          {o.receives.map((b) => (
            <li key={b} style={{ fontFamily: 'var(--ff-body)', fontWeight: 300, fontSize: 14, color: 'var(--charcoal)', lineHeight: 1.8 }}>· {b}</li>
          ))}
        </ul>
      </div>
    </InView>
  );

  return (
    <Page>
      {/* HEADER */}
      <section style={{ background: 'var(--teal)', padding: '96px 48px' }} className="mob-pad">
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <FadeIn delay={200}><Eyebrow>Services</Eyebrow></FadeIn>
          <FadeIn delay={320}>
            <PageHeadingH1 ref={h1Ref} style={{
              fontSize: 'clamp(2.5rem, 5vw, 3.75rem)', color: 'var(--paper)',
              lineHeight: 1.08, maxWidth: 920, marginTop: 16,
            }}>
              Fixed-fee engagements. Defined scope. <Em>Deployable outputs.</Em>
            </PageHeadingH1>
          </FadeIn>
          <FadeIn delay={1100}>
            <p style={{
              fontFamily: 'var(--ff-body)', fontWeight: 300, fontSize: 17,
              color: 'rgba(245,245,243,0.85)', maxWidth: 640, marginTop: 24, lineHeight: 1.7,
            }}>
              Every engagement ends with an artefact your team can maintain. Not a deck filed after the meeting. Not an ongoing dependency.
            </p>
          </FadeIn>
        </div>
      </section>

      {/* OFFERINGS — by practice */}
      <section style={{ background: 'var(--paper)', padding: '96px 48px' }} className="mob-pad">
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          {/* Practice 01 — Operational Intelligence */}
          <InView><Eyebrow>Practice 01</Eyebrow></InView>
          <InView as="h2" style={{
            fontFamily: 'var(--ff-display)', fontSize: 'clamp(1.75rem, 3vw, 2.25rem)',
            color: 'var(--slate)', margin: '12px 0 16px', fontWeight: 400,
            letterSpacing: '-0.01em', lineHeight: 1.2, maxWidth: 820,
          }}>
            Operational Intelligence
          </InView>
          <InView as="p" style={{
            fontFamily: 'var(--ff-body)', fontWeight: 300, fontSize: 16,
            color: 'var(--charcoal)', lineHeight: 1.7, maxWidth: 720, margin: '0 0 56px',
          }}>
            Reading the operation against a contractual or statutory regime. Pattern recognition in CAFM and compliance data. Contract literacy at the schedule level. The work of knowing what is actually happening in the operation — not what the records or the operator report says is happening.
          </InView>
          {oiOfferings.map((o, i) => renderOffering(o, i))}

          {/* Practice 02 — AI Engineering */}
          <div style={{ marginTop: 96, paddingTop: 96, borderTop: '1px solid var(--stone)' }}>
            <InView><Eyebrow>Practice 02</Eyebrow></InView>
            <InView as="h2" style={{
              fontFamily: 'var(--ff-display)', fontSize: 'clamp(1.75rem, 3vw, 2.25rem)',
              color: 'var(--slate)', margin: '12px 0 16px', fontWeight: 400,
              letterSpacing: '-0.01em', lineHeight: 1.2, maxWidth: 820,
            }}>
              AI Engineering
            </InView>
            <InView as="p" style={{
              fontFamily: 'var(--ff-body)', fontWeight: 300, fontSize: 16,
              color: 'var(--charcoal)', lineHeight: 1.7, maxWidth: 720, margin: '0 0 56px',
            }}>
              Building AI tooling into FM workflows. Custom GPTs trained on the contract or the regulation. Prompt libraries calibrated to the team&apos;s role. Agentic workflows that turn unstructured operational data into structured outputs the team can defend. Built on whatever platform the team already owns.
            </InView>
            {aieOfferings.map((o, i) => renderOffering(o, i))}
          </div>
        </div>
      </section>

      {/* PRACTICE LINKS */}
      <section style={{ background: 'var(--paper)', padding: '96px 48px' }} className="mob-pad">
        <div style={{ maxWidth: 1100, margin: '0 auto', paddingTop: 48, borderTop: '1px solid var(--stone)' }}>
          <InView><Eyebrow>Named specialisms</Eyebrow></InView>
          <InView as="h2" style={{
            fontFamily: 'var(--ff-display)', fontSize: 'clamp(1.75rem, 3vw, 2.25rem)',
            color: 'var(--slate)', margin: '12px 0 16px', fontWeight: 400,
            letterSpacing: '-0.01em', lineHeight: 1.2, maxWidth: 820,
          }}>
            Either side of the table.
          </InView>
          <InView as="p" style={{
            fontFamily: 'var(--ff-body)', fontWeight: 300, fontSize: 16,
            color: 'var(--charcoal)', lineHeight: 1.7, maxWidth: 680, margin: '0 0 36px',
          }}>
            Trellum&apos;s PFI and block management work is built for either side of the obligation. The same engagement serves the contracting authority or the FM operator in PFI, the duty-holder or the managing agent in block management.
          </InView>
          <div style={{ marginTop: 28 }}>
            <InView>
              <RuledRow n="01" first title="PFI & FM contracts" body="Payment mechanism literacy for the side of the table that carries the risk." onClick={() => setPage('pfi')} cols="60px 1fr auto" />
            </InView>
            <InView>
              <RuledRow n="02" title="Residential block management" body="Golden-thread evidence the Accountable Person can defend at a safety-case review." onClick={() => setPage('block')} cols="60px 1fr auto" />
            </InView>
          </div>
        </div>
      </section>

      <CTABand
        eyebrow="Not sure which engagement fits"
        heading="The first conversation tells you which engagement fits."
        body="No diagnostic required up front. If you have a contract or a statutory regime the team can't currently evidence under scrutiny, Trellum will tell you which engagement actually matches the need — and which one doesn't."
        primaryLabel="Start a conversation"
        primaryOnClick={() => setPage('contact')}
      />
    </Page>
  );
};

Object.assign(window, { Page, PageHeadingH1, Home, Services });
