/* global React */ /* global I, Placeholder, useRoute, useToast, useCart, PACKAGES, PACKAGE_LANES */ const { useMemo: useServicesMemo } = React; function PackagesSection() { const { goto } = useRoute(); const cart = useCart(); const toast = useToast(); const [activeLane, setActiveLane] = React.useState("nights"); const lanes = window.PACKAGE_LANES; const filtered = window.PACKAGES.filter((p) => p.lane === activeLane); const addPackage = (pkg, e) => { e.stopPropagation(); cart.add({ id: pkg.id, name: `${pkg.name} · deposit`, variant: pkg.code, price: pkg.price, qty: 1, kind: "package" }); cart.setOpen(true); toast(`${pkg.name} deposit added.`); }; return (
§ Packages

Curated. Bookable.
Three ways to start.

Don't know exactly what you need? Pick a package. Each one has a fixed scope, a deposit you can pay today, and a real human reading the brief within a working day. If your project is bigger than what's here, the open brief is one tab over.

{/* Lane tabs */}
{lanes.map((l) => ( ))}

{lanes.find((l) => l.key === activeLane)?.blurb}

{/* Cards */}
{filtered.map((pkg) => (
{pkg.code} {lanes.find((l) => l.key === pkg.lane)?.label}

{pkg.name}

{pkg.subtitle}

Duration{pkg.duration}
Delivery{pkg.deliver}
Pricing{pkg.totalLabel}
    {pkg.highlights.map((h) => (
  • {h}
    • ))}
))}

Just know you want photography or video? Skip the package and start an open brief.

); } /* ───────────────────────────────────────────────────────────────── Services index, three disciplines, one team ───────────────────────────────────────────────────────────────── */ function Services() { const { route, goto } = useRoute(); const services = Object.values(window.SERVICES); return (
{/* Header */}
§ Services

Image, film, and web.
One team. No handoffs.

A boutique studio led by Simeon Reid, with a trusted bench of camera, sound, and edit collaborators that scale up per shoot. The same hand reads the brief, runs the set, and signs off the final cut. That closeness is the work. It's why the cut, the grade, and the page feel like one hand.

  • 2021Founded · still operator-led
  • 3Disciplines, one calendar
  • 1Project lead, start to finish
{/* Three service cards */}
{services.map((s, i) => (
goto("service", { key: s.key })}> {(() => { const ms = window.MEDIA?.home?.services?.[s.key]; return ( ); })()}
0{i + 1} / 03

{s.name}

{s.tagline}

{s.lede}

Tiers

{s.tiers.length} engagements

Starts at

{s.tiers[0].priceBand.replace("from ", "")}

Sample work

{window.WORK.filter(w => w.discipline.some(d => s.descriptors.some(dd => dd.toLowerCase().includes(d.toLowerCase().split(" ")[0])))).length || 2} cases

Read the discipline
))}
{/* CURATED PACKAGES */}
{/* Cross-discipline band */}
§ The whole studio

Most of our best work crosses two rooms.

A capsule launch is rarely just photography, it's image, motion, and a microsite that holds them. When we pitch, we pitch the whole project. One scope, one timeline, one fee.

  • + Capsule launch Stills + 60s social + microsite · 4 weeks
  • + Brand film + landing Hero film + dedicated page · 8 weeks
  • + Editorial + e-comm Lookbook + storefront build · 12 weeks
{/* Calendar / intake */}
§ Calendar · {new Date().getFullYear()}

Booking briefs now.

The studio reads every inquiry by hand and writes back inside a working day. Quarter-by-quarter intake; we'll tell you the soonest available date on the first reply.

{[ ["Q1", "Open", "open"], ["Q2", "Open", "open"], ["Q3", "Open", "open"], ["Q4", "Open", "open"], ].map(([q, label, state]) => (
{q} {label}
))}
); } /* ───────────────────────────────────────────────────────────────── Service detail, discipline page ───────────────────────────────────────────────────────────────── */ function ServiceDetail() { const { route, goto } = useRoute(); const key = route.params?.key || "photography"; const s = window.SERVICES[key] || window.SERVICES.photography; const related = useServicesMemo( () => window.WORK.filter(p => p.discipline.some(d => s.descriptors.some(dd => dd.toLowerCase().includes(d.toLowerCase().split(" ")[0])))).slice(0, 3), [key] ); const disciplineList = Object.values(window.SERVICES); const idx = disciplineList.findIndex(x => x.key === key); const next = disciplineList[(idx + 1) % disciplineList.length]; return (
{/* Discipline header */}
Discipline · 0{idx + 1} of 0{disciplineList.length}

{s.name}.

{s.tagline}

{s.lede}

{s.descriptors.map(d => {d})}
{/* Hero — pulls real media from MEDIA.home.services[] */}
{(() => { const ms = window.MEDIA?.home?.services?.[s.key]; return ( ); })()}
{/* Studio note */}
§ The studio note

{s.blurb}

{/* For whom + Outcomes, two columns */}
§ Who this is for

The brief that fits this room.

    {s.forWhom.map((w, i) =>
  • {w}
    • )}
§ What you walk away with

The outcomes we underwrite.

    {s.outcomes.map((o, i) =>
  • 0{i + 1}{o}
    • )}
{/* Process */}
§ Process

Four stages, never more, never less.

{s.process.map(([n, name, body], i) => (
{n}

{name}

{body}

{i < s.process.length - 1 &&
}
))}
{/* Tiers / pricing */}
§ Engagements

Three tiers. The bands are honest.

Entry tiers publish a starting band. Senior tiers vary too widely to print — every proposal is fixed-fee, scoped, and sent within three working days.

{s.tiers.map((t, i) => (
0{i + 1} · {t.priceLabel}

{t.name}

{t.priceBand} {!t.public && Bespoke}
Duration
{t.duration}
Deliverable
{t.deliver}
    {t.highlights.map(h =>
  • {h}
    • )}
))}
{/* Related work */} {related.length > 0 && ( <>
§ Recent {s.name.toLowerCase()}

In the room.

goto("work")}>All work
{related.map(p => (
goto("project", { id: p.id })}>
{p.client} · {p.year}

{p.title}

{p.summary}

))}
)} {/* CTA + Next discipline */}
§ Begin

Have a {s.name.toLowerCase()} brief?

The booking flow takes about six minutes. We read every brief by hand and write back within one working day.

goto("service", { key: next.key })}> Next discipline

{next.name}

{next.tagline}

Open the room
); } Object.assign(window, { Services, ServiceDetail });