Hi Matt — these are the latest HTML/CSS/JS files for the Lean101 website. Drop-in replacement for the current site, restructured into a 4-page setup, with photos and the latest engagement-section restructure.

File structure

lean101-website/
├── index.html                       — Homepage
├── services/
│   ├── consulting.html              — Process Excellence & Transformation
│   ├── coaching.html                — Coaching & Training
│   └── digital-solutions.html       — Digital Solutions
├── assets/
│   ├── lean101-isotipo.png          — Hexagon mark only (used in nav)
│   └── lean101-logotipo.png         — Full wordmark (used in mobile drawer + footer)
└── README.md                        — This file

Every page is fully self-contained — all CSS is inlined in a <style> block, all JS is in a single <script> block at the bottom, and there are no external CSS/JS dependencies beyond Google Fonts and Unsplash images.

Conventions worth knowing

HTML structure

All four pages share the same <nav>, footer, and CTA card markup
Each page has its own inlined CSS (currently no shared stylesheet — keeps each page self-contained for easy preview, but happy to refactor if you want a shared styles.css)
Pages are responsive down to ~360px wide — break points are at 1100px, 920px, 880px, 720px, 540px, 460px

CSS variables At the top of each <style> block:

--blue: #0070c7
--blue-deep: #005aa3
--orange: #ec8b33
--charcoal: #565656
--grey: #efefef
--ink: #1a1a1a

Each service page also has --accent set to either blue or orange — that drives the page's accent colouring.

Typography

General Sans (Fontshare) — weights 400/500/600/700
Loaded from https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap

JavaScript There are a few small interactive elements:

Hero stats counter animation (homepage) — uses IntersectionObserver, ticks from 0 to target on scroll-in
Mobile hamburger drawer — slides in from right, body scroll lock
Outcomes carousel (homepage) — horizontal scroll-snap with prev/next buttons + mobile pagination dots
Two accordions in the engagement section (each service page) — animated max-height expand
Example outcome reveal animation (each service page) — fade-in-and-slide-up on scroll-in
All animations respect prefers-reduced-motion

Section structure on each service page

1. Hero (with photo)
2. Who it's for (with photo + 4 problem cards)
3. The framework (DMAIC / SHU-HA-RI / Build cards)
4. What this looks like in practice (2 example cards with photos)
5. The engagement (timeline + 2 accordions)
6. Page footnote
7. CTA
8. Footer

The engagement section now folds together what used to be three separate things — the timeline (sizing), the considerations (what shapes the scope), and the deliverables list (what you get). It now reads as one comprehensive "this is the engagement" moment:

Timeline first — three project tiers as starting points, transition arrow, partnership as destination
Then two stacked accordions:
- "What drives scope and timeline" — the three considerations that shape sizing
- "See what's in a typical engagement" — the deliverables list

Both accordions are closed by default. The deliverables list used to be a standalone "What's included" section between Who-it's-for and the framework — that section is gone now and the content lives here, as reference content for prospects who want to verify scope.

⚠️ Photos — please verify

The site has 12 photos sourced from Unsplash (free, commercial-use, no attribution required) — placed across the 3 service pages:

Page	Section	Photo URL
Consulting	Hero	`photo-1581091226825-a6a2a5aee158`
Consulting	Who it's for (anchor)	`photo-1556761175-5973dc0f32e7`
Consulting	Examples — Manufacturing	`photo-1565793298595-6a879b1d9492`
Consulting	Examples — Services & admin	`photo-1454165804606-c3d57bc86b40`
Coaching	Hero	`photo-1521737711867-e3b97375f902`
Coaching	Who it's for (anchor)	`photo-1519389950473-47ba0277781c`
Coaching	Examples — Leadership development	`photo-1573497019940-1c28c88b4f3e`
Coaching	Examples — Frontline team	`photo-1542744173-8e7e53415bb0`
Digital	Hero	`photo-1551288049-bebda4e38f71`
Digital	Who it's for (anchor)	`photo-1460925895917-afdab827c52f`
Digital	Examples — Dashboard	`photo-1543286386-713bdd548da4`
Digital	Examples — Custom app	`photo-1517292987719-0369a794ec0f`

Photos are referenced as direct Unsplash CDN URLs in the HTML, e.g.

<img src="https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&w=1600&q=80" alt="...">

Two action items here:

Please load each page and verify the photos look right. They were chosen by content/context but not visually verified before integration — there's a chance one or two don't match the intent. If any look off, swap with another Unsplash search, the URL pattern is: https://images.unsplash.com/photo-{ID}?auto=format&fit=crop&w=1600&q=80
Consider self-hosting them. Currently they load from Unsplash's CDN. This works, but if you'd prefer self-hosted (no external dependency, faster load on poor connections), download each one once and put them in assets/photos/ — the HTML references will need updating to local paths.

Things that need real values before launch

The following placeholders need swapping with real URLs before going live:

href="#contact" on the dark "Book a call" CTA buttons — these point to #contact for now, but should ultimately link to the real Calendly URL (Alex will provide).
href="#" on the LinkedIn footer link — should point to the Lean101 LinkedIn company page.
No favicon yet — happy to leave this for you to add via your tooling, or we can generate one from the isotipo if helpful.
No Open Graph / Twitter meta tags yet — also a "before launch" item for clean link previews on LinkedIn / WhatsApp / Slack.

Hero image — important note

We added a fourth KPI to the hero on the homepage and changed the desktop design. The hero photo itself stays the same (the team-around-table image you currently have).

The four KPIs are now:

Efficiency +35% (blue)
Cost savings −27% (orange)
Lead time −44% (orange)
Engagement +41% (blue)

In the current source files, the KPIs sit in a 2×2 card panel below the hero photo on both desktop and mobile. On the live site they should sit on top of the photo on desktop, and only drop below on mobile — that's how the existing live site already works, we're just keeping that pattern. The fourth KPI was added so the desktop overlay layout doesn't have an awkward blank slot in the 2×2 grid.

In short: keep your current desktop overlay layout, add the new fourth KPI value (Engagement +41%), and the source CSS in this package is fine as the mobile-side fallback.

Quick deploy notes

All paths in the HTML are relative — assets/... from the homepage, ../assets/... from service pages
No build step required, no preprocessor needed — these are static HTML files ready to serve
Service pages use clean URLs (/services/consulting) — your nginx config or equivalent will need a try_files $uri $uri.html $uri/ =404; rule to support both .html and clean URLs

If anything's unclear or you want me to refactor anything to fit your tooling better (shared stylesheet, separate JS file, build pipeline-friendly format), just let me know.

— Alex

README.md Unescape Escape

Lean101 — Website source files (v3.5)