Lumen Agency Landing

Provide studio name/promise, three capabilities and two to four projects with client/type/year, outcome, brief, build details, three stats and approved quote. Add archive projects, services/durations, process/week ranges, engagement prices, team facts, FAQs and contact/availability. Treat missing ordinary details as listed placeholders for confirmation; client names, testimonials, outcome figures, fees, staff, audits, awards, directors and registrations must not become invented proof.

Use standalone HTML with no project. In an existing/requested framework, inspect conventions, preserve unrelated files and port sections, case/legal data, tokens, observers and dialogs into the host’s idiom. Keep fonts/images local and do not embed the template as an iframe or inject it as raw HTML. The output remains a one-page information structure unless the actual brief changes; a framework alone does not create case/blog routes.

Preserve the quiet hero stack on plain white: muted arc mark, one-line desktop headline up to 72px, three-line introduction, three open capability columns and one Explore work action. Phone text wraps naturally at roughly 36px. Keep the reference’s generous mark/headline/lead/trio/action gaps and avoid photos, product windows, second actions, badges or stat strips in the hero. A teal-to-blue clause appears here and once in the Work heading, not across every section.

Carry Bricolage Grotesque display, Instrument Sans body/UI and Geist Mono project/meta/URL labels. White/zinc surfaces, fine rules, neutral layered shadows and a 1280px container with 20–40px gutters support the work; section spacing spans roughly 88–152px. Use 10px controls, 16px cards/media, 24px major panels and pill chips. Client accents remain inside mock windows. Keep one dark slate contact surface, crosshair grounds behind proof/contact and no dark-mode variant or purple wash.

Keep the page rhythm: hero, client marks, first testimonial, work, second testimonial, services, process/engagements, studio, FAQ, contact and footer. Short versions may omit secondary proof/archive/engagement/studio sections, but do not place both testimonial bands together. Plan two to four featured rows and move the rest into the archive; each case ID must match its row/dialog trigger. Category counts include both featured and archive rows, so a filter can validly show no published case while still returning archive items.

Rebuild one meaningful browser window per actual project. Choose a schedule, invoice/document, storefront, dashboard or docs/design-system body, changing address bar, client accent, entities, prices, dates and statuses together. The client-world photo answers who the work served; the interface answers what the studio built. These miniature windows are visual proof layouts rather than delivered client applications. The image guide permits an approved real screenshot inside the window if supplied, distinct from generating fake UI inside a photograph.

Preserve case-study depth and navigation. Each needs the actual brief/build, four fact roles, three contextual outcomes and attributed quote; next/previous loops through the case collection. Dialog media is cloned from that project row, so row/dialog identity and IDs must stay consistent. Test focus trapping/Escape/arrows/scrim close and return focus, plus the similar-project action after closing. Do not describe dialogs as separately addressable case pages.

Match service/engagement counts to their grids. Three or six services fill desktop columns; four/five can add a useful Ask us card rather than leave a hole. Keep the capability trio and studio figures at three. Two to four engagement models need matching CSS columns and valid project-type/budget presets. Process typically uses three to five verb-named steps with week ranges and deliverables. Prices and timing must be actual offers; a selected package only pre-fills the enquiry, not a purchase or reservation.

Adapt the proof structure for other professional practices. Law/accounting can use selected matters, practice areas and fee models, while architecture/interiors can pair project-site photos with plans/schedules and completed-building archive entries. Keep evidence specific to that domain without asserting professional outcomes or compliance. Real customer marks need permission/confirmation; otherwise omit or mark a fictional concept clearly rather than presenting generated clients as a track record.

Plan eight role-specific photos in one bright editorial series: four client worlds, two quote portraits, studio group and planning detail. Replace the sample pilates/workshop/roastery/bike-share scenes for actual projects; neutral blank-card planning detail may remain a placeholder when appropriate. Generated team/portraits are stand-ins, and the seven-person group cannot substantiate a real headcount. Use approved real people/photos or monograms when a portrait is unavailable. An available image tool may charge.

Keep daylight, pale oak/white interiors and subtle mint/blush/sand consistent, without text/logos/screens in generated photos. Check every crop at 1440/1024/768/390px, especially the top-cropped team frame and client-world subjects. Reuse that project’s photo/window in its dialog rather than counting the clone as new evidence. File references do not establish real-client identity, usage rights or photographic accuracy.

Keep enquiry choices and presets wired together. Project-type buttons are multiselect with Not sure yet exclusive; service/package/case actions select valid choices and budgets. The local validator checks name length, email, at least one type, budget and a twenty-character message; optional company/start add context. Currency, budget labels, option values and every preset must change together. Test a preset after a previous successful enquiry, because preselection returns early while the form fields are hidden until reset.

Explain form outcomes honestly. Enquiry waits about 1.1 seconds, shows submitted project/budget/start/company and promises a reply by the next weekday computed in the visitor’s local calendar with British date formatting. It does not account for holidays or actual studio capacity and sends nothing. Newsletter only validates/reveals inline confirmation. Replace received/reply/subscribed promises with explicit demo wording until services are connected; copy-email feedback also needs an actual clipboard check.

Rebrand metadata, header/mobile/footer marks, contact/availability date, legal name/address/directors/company numbers, mail/phone, case names/photos/file IDs, browser URLs/data, testimonials and summary/reply copy. Update anchors, navigation-spy values and links together. Remove sample proof from comments/attributes as well as visible text. Resolve token/document exceptions consciously: the headline gradient rule coexists with specified button halo, contact-ring and proof-spark treatments, so avoid interpreting it as a ban on those reference details.

Prepare offline output with Node.js 18+ and initial access for three font downloads. Embed local photos/fonts and target under 5MB with an 8MB cap. The inliner writes the file then reports missing assets/fonts and does not itself enforce that hard cap; check both exit result and validator. Repeated images use a shared-source script, so include disk/iframe loading in acceptance. Adjacent-file delivery self-hosts assets rather than leaving CDN fonts.

Run static validation for assets, sample identities, section/anchor/nav/case/legal IDs, category counts, form presets, plan columns, labels and signature warnings/errors. The validator checks selected patterns rather than actual service results or full visual fidelity; its display-size threshold is looser than the documented 72px target. A framework port needs its own build/type/lint. Review at 1440/1024/768/390px: work/archive/empty filters, every case/next/previous/legal dialog, service/plan presets, enquiry empty/fix/success/reset, newsletter, clipboard, FAQ, sheet focus/Escape, anchors, reduced motion and phone mockup readability. Fix/recheck and report actual checks, confirmed facts, stand-in imagery and service gaps.