1916 lines
67 KiB
HTML
1916 lines
67 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Process Excellence & Transformation — Lean 101</title>
|
||
<meta name="description" content="Process improvement consulting that diagnoses where work breaks down, designs the fix, and runs the change with you. For Australian SMBs that want change to last.">
|
||
<link rel="preconnect" href="https://api.fontshare.com">
|
||
<link href="https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--blue: #0070c7;
|
||
--blue-deep: #005aa3;
|
||
--orange: #ec8b33;
|
||
--charcoal: #565656;
|
||
--grey: #efefef;
|
||
--grey-soft: #f6f7f9;
|
||
--ink: #1a1a1a;
|
||
--white: #ffffff;
|
||
--accent: var(--blue);
|
||
--accent-rgb: 0, 112, 199;
|
||
}
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
html { scroll-behavior: smooth; }
|
||
body {
|
||
font-family: 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
color: var(--ink);
|
||
background: var(--white);
|
||
font-weight: 400;
|
||
line-height: 1.5;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
img { max-width: 100%; display: block; }
|
||
a { color: inherit; }
|
||
|
||
/* ─── NAV (matches homepage) ─── */
|
||
.nav {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
background: rgba(255, 255, 255, 0.85);
|
||
backdrop-filter: saturate(180%) blur(20px);
|
||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||
}
|
||
.nav-inner {
|
||
max-width: 1200px; margin: 0 auto; padding: 0 28px; height: 68px;
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
}
|
||
.nav-logo { display: flex; align-items: center; text-decoration: none; }
|
||
.nav-logo img { height: 44px; width: 44px; object-fit: contain; }
|
||
.nav-links { display: flex; gap: 32px; list-style: none; }
|
||
.nav-links > li { position: relative; }
|
||
.nav-links a {
|
||
color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500;
|
||
opacity: 0.85; transition: opacity 0.2s; display: inline-flex; align-items: center; gap: 4px;
|
||
}
|
||
.nav-links a:hover { opacity: 1; }
|
||
.nav-links a.current { opacity: 1; color: var(--blue); }
|
||
.nav-links .has-dropdown > a::after {
|
||
content: ''; width: 8px; height: 8px;
|
||
border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
|
||
transform: rotate(45deg) translate(-2px, -2px); margin-left: 2px; transition: transform 0.2s;
|
||
}
|
||
.nav-links .has-dropdown:hover > a::after {
|
||
transform: rotate(225deg) translate(-2px, -2px);
|
||
}
|
||
.nav-dropdown {
|
||
position: absolute;
|
||
top: calc(100% + 6px);
|
||
left: 0;
|
||
min-width: 240px;
|
||
background: var(--white);
|
||
border: 1px solid rgba(0,0,0,0.06);
|
||
border-radius: 12px;
|
||
padding: 8px;
|
||
box-shadow: 0 16px 40px -12px rgba(0,0,0,0.18), 0 4px 10px -4px rgba(0,0,0,0.06);
|
||
list-style: none;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transform: translateY(-6px);
|
||
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
|
||
z-index: 200;
|
||
}
|
||
.nav-links .has-dropdown:hover .nav-dropdown,
|
||
.nav-links .has-dropdown:focus-within .nav-dropdown {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
transform: translateY(0);
|
||
}
|
||
/* Invisible bridge so cursor can travel from nav item to dropdown */
|
||
.nav-links .has-dropdown::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
right: 0;
|
||
height: 12px;
|
||
}
|
||
.nav-dropdown li { display: block; }
|
||
.nav-dropdown a {
|
||
display: block;
|
||
padding: 10px 14px;
|
||
border-radius: 8px;
|
||
text-decoration: none;
|
||
transition: background 0.15s ease, color 0.15s ease;
|
||
opacity: 1;
|
||
color: var(--ink);
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
letter-spacing: -0.005em;
|
||
}
|
||
.nav-dropdown a::after { display: none; }
|
||
.nav-dropdown a:hover {
|
||
background: var(--grey-soft);
|
||
color: var(--blue);
|
||
}
|
||
.nav-dropdown a.current {
|
||
background: var(--grey-soft);
|
||
color: var(--blue);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.nav-cta {
|
||
background: var(--ink); color: white; padding: 9px 18px; border-radius: 999px;
|
||
font-size: 13px; font-weight: 500; text-decoration: none; transition: background 0.2s;
|
||
}
|
||
.nav-cta:hover { background: var(--blue); }
|
||
|
||
/* ─── Hamburger button (mobile only) ─── */
|
||
.nav-hamburger {
|
||
display: none;
|
||
background: transparent;
|
||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||
border-radius: 10px;
|
||
padding: 8px;
|
||
cursor: pointer;
|
||
color: var(--ink);
|
||
transition: background 0.2s, border-color 0.2s;
|
||
margin-left: 12px;
|
||
}
|
||
.nav-hamburger:hover {
|
||
background: var(--grey-soft);
|
||
border-color: rgba(0, 0, 0, 0.2);
|
||
}
|
||
.nav-hamburger svg { display: block; width: 22px; height: 22px; }
|
||
|
||
/* ─── Mobile drawer overlay ─── */
|
||
.nav-drawer-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, 0.4);
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 0.3s ease;
|
||
z-index: 99;
|
||
}
|
||
.nav-drawer-overlay.is-open {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* ─── Mobile drawer (slides in from right) ─── */
|
||
.nav-drawer {
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: min(320px, 85vw);
|
||
background: var(--white);
|
||
box-shadow: -8px 0 30px -10px rgba(0, 0, 0, 0.15);
|
||
transform: translateX(100%);
|
||
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||
z-index: 100;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow-y: auto;
|
||
}
|
||
.nav-drawer.is-open { transform: translateX(0); }
|
||
|
||
.nav-drawer-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20px 24px;
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||
}
|
||
.nav-drawer-head img { height: 28px; width: auto; }
|
||
.nav-drawer-close {
|
||
background: transparent;
|
||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||
border-radius: 10px;
|
||
padding: 8px;
|
||
cursor: pointer;
|
||
color: var(--ink);
|
||
transition: background 0.2s, border-color 0.2s;
|
||
}
|
||
.nav-drawer-close:hover {
|
||
background: var(--grey-soft);
|
||
border-color: rgba(0, 0, 0, 0.2);
|
||
}
|
||
.nav-drawer-close svg { display: block; width: 18px; height: 18px; }
|
||
|
||
.nav-drawer-body { padding: 16px 0; flex: 1; }
|
||
.nav-drawer ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
.nav-drawer-item {
|
||
display: block;
|
||
padding: 14px 24px;
|
||
color: var(--ink);
|
||
text-decoration: none;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
border-left: 3px solid transparent;
|
||
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
||
}
|
||
.nav-drawer-item:hover {
|
||
background: var(--grey-soft);
|
||
border-left-color: var(--blue);
|
||
}
|
||
|
||
.nav-drawer-group-label {
|
||
display: block;
|
||
padding: 18px 24px 8px;
|
||
color: var(--charcoal);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
}
|
||
.nav-drawer-subitem {
|
||
display: block;
|
||
padding: 12px 24px 12px 36px;
|
||
color: var(--ink);
|
||
text-decoration: none;
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
border-left: 3px solid transparent;
|
||
transition: background 0.15s, border-color 0.15s;
|
||
}
|
||
.nav-drawer-subitem:hover {
|
||
background: var(--grey-soft);
|
||
border-left-color: var(--blue);
|
||
}
|
||
.nav-drawer-subitem.coaching:hover { border-left-color: var(--orange); }
|
||
.nav-drawer-subitem.current { background: rgba(0,112,199,0.06); border-left-color: var(--blue); }
|
||
.nav-drawer-subitem.coaching.current { background: rgba(236,139,51,0.06); border-left-color: var(--orange); }
|
||
|
||
.nav-drawer-foot {
|
||
padding: 20px 24px 28px;
|
||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||
}
|
||
.nav-drawer-cta {
|
||
display: block;
|
||
text-align: center;
|
||
background: var(--blue);
|
||
color: var(--white);
|
||
padding: 14px 22px;
|
||
border-radius: 999px;
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
text-decoration: none;
|
||
transition: background 0.2s;
|
||
}
|
||
.nav-drawer-cta:hover { background: var(--blue-deep); }
|
||
|
||
body.nav-drawer-locked { overflow: hidden; }
|
||
|
||
@media (max-width: 720px) {
|
||
.nav-links { display: none; }
|
||
.nav-cta { display: none; }
|
||
.nav-hamburger { display: inline-flex; align-items: center; justify-content: center; }
|
||
}
|
||
|
||
/* ─── PAGE HERO ─── */
|
||
.page-hero {
|
||
padding: 110px 28px 90px;
|
||
background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
|
||
}
|
||
.page-hero-inner { max-width: 900px; margin: 0 auto; text-align: center; }
|
||
.page-eyebrow {
|
||
display: inline-block; color: var(--accent); font-size: 13px;
|
||
font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
|
||
margin-bottom: 16px;
|
||
}
|
||
.page-hero h1 {
|
||
font-size: clamp(36px, 5.5vw, 64px); font-weight: 600;
|
||
letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 22px;
|
||
}
|
||
.page-hero h1 em {
|
||
font-style: normal; color: var(--accent);
|
||
}
|
||
.page-hero-sub {
|
||
font-size: clamp(17px, 1.6vw, 20px); color: var(--charcoal);
|
||
max-width: 720px; margin: 0 auto 32px; line-height: 1.5;
|
||
}
|
||
.page-hero-ctas {
|
||
display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
|
||
}
|
||
.btn {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
padding: 14px 26px; border-radius: 999px; font-size: 15px; font-weight: 500;
|
||
text-decoration: none; transition: all 0.2s; border: none; cursor: pointer;
|
||
}
|
||
.btn-primary { background: var(--blue); color: white; }
|
||
.btn-primary:hover { background: var(--blue-deep); }
|
||
.btn-secondary {
|
||
background: var(--white); color: var(--ink); border: 1px solid rgba(0, 0, 0, 0.12);
|
||
}
|
||
.btn-secondary:hover { background: var(--grey-soft); border-color: rgba(0, 0, 0, 0.2); }
|
||
.btn-arrow { transition: transform 0.2s; }
|
||
.btn:hover .btn-arrow { transform: translateX(3px); }
|
||
|
||
/* ─── SECTIONS ─── */
|
||
.section { padding: 130px 28px; }
|
||
.section.alt { background: var(--grey-soft); }
|
||
.section-inner { max-width: 1100px; margin: 0 auto; }
|
||
.section-eyebrow {
|
||
color: var(--accent); font-size: 13px; font-weight: 600;
|
||
letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px;
|
||
}
|
||
.section-title {
|
||
font-size: clamp(30px, 4vw, 44px); font-weight: 600;
|
||
letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 18px;
|
||
max-width: 920px;
|
||
}
|
||
.section-lede {
|
||
font-size: clamp(16px, 1.3vw, 18px); color: var(--charcoal);
|
||
max-width: 820px; line-height: 1.55;
|
||
}
|
||
.section-head { margin-bottom: 72px; }
|
||
/* Centred section heads stay narrower so the eye lands cleanly */
|
||
.section-head.center { text-align: center; }
|
||
.section-head.center .section-title {
|
||
max-width: 760px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
.section-head.center .section-lede {
|
||
max-width: 680px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
/* ─── WHO IT'S FOR (problem cards) ─── */
|
||
.fit-grid {
|
||
display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
|
||
}
|
||
@media (max-width: 720px) { .fit-grid { grid-template-columns: 1fr; } }
|
||
.fit-card {
|
||
background: var(--white); border: 1px solid rgba(0,0,0,0.07);
|
||
border-radius: 16px; padding: 28px;
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
|
||
}
|
||
.fit-card:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 16px 36px -18px rgba(0, 112, 199, 0.15);
|
||
border-color: rgba(0, 112, 199, 0.3);
|
||
}
|
||
.fit-icon {
|
||
width: 40px; height: 40px; border-radius: 10px;
|
||
background: rgba(0, 112, 199, 0.1); color: var(--accent);
|
||
display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
|
||
}
|
||
.fit-icon svg { width: 20px; height: 20px; }
|
||
.fit-card h3 {
|
||
font-size: 17px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em;
|
||
}
|
||
.fit-card p { font-size: 14.5px; color: var(--charcoal); line-height: 1.55; }
|
||
|
||
/* ─── WHAT'S INCLUDED (deliverables list) ─── */
|
||
.deliverables {
|
||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
|
||
}
|
||
@media (max-width: 880px) { .deliverables { grid-template-columns: 1fr 1fr; } }
|
||
@media (max-width: 540px) { .deliverables { grid-template-columns: 1fr; } }
|
||
.deliverable {
|
||
background: var(--white); border: 1px solid rgba(0,0,0,0.07);
|
||
border-radius: 14px; padding: 22px;
|
||
border-top: 3px solid var(--accent);
|
||
}
|
||
.deliverable h4 {
|
||
font-size: 15px; font-weight: 600; margin-bottom: 6px;
|
||
color: var(--ink); letter-spacing: -0.005em;
|
||
}
|
||
.deliverable p { font-size: 14px; color: var(--charcoal); line-height: 1.5; }
|
||
|
||
/* ─── Accordion wrapper for "What's included" ───
|
||
Compact summary by default; expands to reveal the deliverables grid.
|
||
Custom button + div pattern (not native <details>) for animation control. */
|
||
.accordion {
|
||
background: var(--white);
|
||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.06);
|
||
}
|
||
.accordion-toggle {
|
||
width: 100%;
|
||
background: transparent;
|
||
border: none;
|
||
padding: 22px 28px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 18px;
|
||
text-align: left;
|
||
color: var(--ink);
|
||
font-family: inherit;
|
||
transition: background 0.2s ease;
|
||
}
|
||
.accordion-toggle:hover {
|
||
background: var(--grey-soft);
|
||
}
|
||
.accordion-toggle:focus-visible {
|
||
outline: 2px solid var(--accent);
|
||
outline-offset: -2px;
|
||
}
|
||
.accordion-toggle-text {
|
||
flex: 1;
|
||
}
|
||
.accordion-toggle-title {
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
margin-bottom: 4px;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.accordion-toggle-hint {
|
||
font-size: 13.5px;
|
||
color: var(--charcoal);
|
||
line-height: 1.5;
|
||
}
|
||
.accordion-chevron {
|
||
flex-shrink: 0;
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
background: rgba(var(--accent-rgb), 0.08);
|
||
color: var(--accent);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s ease;
|
||
}
|
||
.accordion-chevron svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
display: block;
|
||
}
|
||
.accordion-toggle:hover .accordion-chevron {
|
||
background: rgba(var(--accent-rgb), 0.14);
|
||
}
|
||
/* When expanded: rotate chevron 180° so it points up */
|
||
.accordion[data-state="open"] .accordion-chevron {
|
||
transform: rotate(180deg);
|
||
}
|
||
/* The collapsible content panel */
|
||
.accordion-panel {
|
||
max-height: 0;
|
||
overflow: hidden;
|
||
transition: max-height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||
}
|
||
.accordion-panel-inner {
|
||
padding: 0 28px 28px;
|
||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||
padding-top: 22px;
|
||
}
|
||
/* Reduced-motion: skip the animation */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.accordion-panel { transition: none; }
|
||
.accordion-chevron { transition: none; }
|
||
}
|
||
|
||
/* ─── PROCESS (4 step horizontal flow — matches homepage style) ─── */
|
||
.flow {
|
||
margin-top: 30px;
|
||
display: grid;
|
||
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
|
||
align-items: stretch; gap: 0;
|
||
}
|
||
.flow-step {
|
||
background: var(--white); border: 1px solid rgba(0,0,0,0.07);
|
||
border-radius: 16px; padding: 24px 22px;
|
||
display: flex; flex-direction: column;
|
||
box-shadow: 0 4px 16px -8px rgba(0,0,0,0.06);
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
|
||
border-top: 3px solid var(--accent);
|
||
}
|
||
.flow-step:nth-child(1) { --step-accent: var(--blue); --step-shadow: rgba(0, 112, 199, 0.22); }
|
||
.flow-step:nth-child(3) { --step-accent: var(--orange); --step-shadow: rgba(236, 139, 51, 0.22); }
|
||
.flow-step:nth-child(5) { --step-accent: var(--blue); --step-shadow: rgba(0, 112, 199, 0.22); }
|
||
.flow-step:nth-child(7) { --step-accent: var(--orange); --step-shadow: rgba(236, 139, 51, 0.22); }
|
||
.flow-step { border-top-color: var(--step-accent, var(--accent)); }
|
||
.flow-step:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 22px 50px -22px var(--step-shadow);
|
||
border-color: var(--step-accent);
|
||
}
|
||
.flow-step-label {
|
||
font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
|
||
color: var(--step-accent); margin-bottom: 6px; text-transform: uppercase;
|
||
}
|
||
.flow-step-title {
|
||
font-size: 20px; font-weight: 600; margin-bottom: 10px;
|
||
letter-spacing: -0.015em; color: var(--ink); line-height: 1.15;
|
||
}
|
||
.flow-step-desc {
|
||
color: var(--charcoal); font-size: 13.5px; line-height: 1.55; margin-bottom: 14px; flex: 1;
|
||
}
|
||
.flow-step-outcome {
|
||
color: var(--step-accent); font-size: 13px; line-height: 1.5; font-style: italic;
|
||
padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.07); font-weight: 500;
|
||
}
|
||
.flow-arrow {
|
||
display: flex; align-items: center; justify-content: center;
|
||
width: 36px; color: rgba(0, 0, 0, 0.18);
|
||
}
|
||
.flow-arrow svg { width: 24px; height: 24px; }
|
||
.flow-arrow:nth-child(2) { color: var(--blue); opacity: 0.5; }
|
||
.flow-arrow:nth-child(4) { color: #b08a6b; opacity: 0.6; }
|
||
.flow-arrow:nth-child(6) { color: var(--orange); opacity: 0.6; }
|
||
@media (max-width: 1100px) {
|
||
.flow { grid-template-columns: 1fr 1fr; gap: 18px; }
|
||
.flow-step:nth-child(1) { grid-column: 1; grid-row: 1; }
|
||
.flow-step:nth-child(3) { grid-column: 2; grid-row: 1; }
|
||
.flow-step:nth-child(5) { grid-column: 1; grid-row: 3; }
|
||
.flow-step:nth-child(7) { grid-column: 2; grid-row: 3; }
|
||
.flow-arrow { display: none; }
|
||
}
|
||
@media (max-width: 600px) {
|
||
.flow { grid-template-columns: 1fr; gap: 12px; }
|
||
.flow-step:nth-child(1), .flow-step:nth-child(3),
|
||
.flow-step:nth-child(5), .flow-step:nth-child(7) {
|
||
grid-column: 1; grid-row: auto;
|
||
}
|
||
}
|
||
|
||
/* ─── DMAIC FRAMEWORK ─── */
|
||
.dmaic {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: 12px;
|
||
margin-top: 20px;
|
||
margin-bottom: 32px;
|
||
position: relative;
|
||
}
|
||
/* Connecting line behind all the letter circles */
|
||
.dmaic::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 38px;
|
||
left: 10%;
|
||
right: 10%;
|
||
height: 2px;
|
||
background: linear-gradient(to right,
|
||
rgba(0,112,199,0.4) 0%,
|
||
rgba(0,112,199,0.4) 25%,
|
||
#b08a6b 50%,
|
||
rgba(236,139,51,0.5) 75%,
|
||
rgba(236,139,51,0.5) 100%
|
||
);
|
||
z-index: 0;
|
||
border-radius: 2px;
|
||
}
|
||
.dmaic-step {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
position: relative;
|
||
z-index: 1;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
.dmaic-step:hover { transform: translateY(-4px); }
|
||
|
||
/* Big letter circles with gradient fill: D->blue, M->blue/purple, A->purple/orange, I->orange-warm, C->orange */
|
||
.dmaic-letter {
|
||
width: 76px;
|
||
height: 76px;
|
||
border-radius: 50%;
|
||
background: var(--blue);
|
||
color: white;
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 18px;
|
||
box-shadow: 0 10px 24px -10px rgba(0,0,0,0.25);
|
||
border: 4px solid var(--white);
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
.dmaic-step:nth-child(1) .dmaic-letter { background: linear-gradient(135deg, #0070c7, #005aa3); }
|
||
.dmaic-step:nth-child(2) .dmaic-letter { background: linear-gradient(135deg, #1d63b3, #6e7eaa); }
|
||
.dmaic-step:nth-child(3) .dmaic-letter { background: linear-gradient(135deg, #8a82a3, #b08a6b); }
|
||
.dmaic-step:nth-child(4) .dmaic-letter { background: linear-gradient(135deg, #b07a55, #d88842); }
|
||
.dmaic-step:nth-child(5) .dmaic-letter { background: linear-gradient(135deg, #ec8b33, #d97a1f); }
|
||
|
||
.dmaic-step:hover .dmaic-letter {
|
||
transform: scale(1.06);
|
||
box-shadow: 0 14px 32px -10px rgba(0,0,0,0.35);
|
||
}
|
||
.dmaic-step-body { padding: 0 8px; }
|
||
.dmaic-step-body h3 {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
letter-spacing: -0.01em;
|
||
margin-bottom: 8px;
|
||
color: var(--ink);
|
||
}
|
||
.dmaic-step-body p {
|
||
font-size: 13.5px;
|
||
line-height: 1.5;
|
||
color: var(--charcoal);
|
||
}
|
||
.dmaic-note {
|
||
background: linear-gradient(135deg, rgba(0,112,199,0.06), rgba(236,139,51,0.06));
|
||
border: 1px solid rgba(0,112,199,0.12);
|
||
border-radius: 12px;
|
||
padding: 22px 26px;
|
||
color: var(--charcoal);
|
||
font-size: 14.5px;
|
||
line-height: 1.6;
|
||
max-width: 920px;
|
||
margin: 0 auto;
|
||
}
|
||
.dmaic-note strong { color: var(--ink); }
|
||
|
||
/* Tablet: 2 rows */
|
||
@media (max-width: 980px) {
|
||
.dmaic { grid-template-columns: repeat(3, 1fr); gap: 32px 16px; }
|
||
.dmaic::before { display: none; }
|
||
}
|
||
/* Mobile: stacked vertically with a vertical connector line */
|
||
@media (max-width: 600px) {
|
||
.dmaic {
|
||
grid-template-columns: 1fr;
|
||
gap: 24px;
|
||
padding-left: 36px;
|
||
position: relative;
|
||
}
|
||
/* Vertical connecting line down the left, gradient blue→orange to match desktop */
|
||
.dmaic::before {
|
||
display: block;
|
||
content: '';
|
||
position: absolute;
|
||
left: 28px;
|
||
top: 30px;
|
||
bottom: 30px;
|
||
right: auto;
|
||
width: 2px;
|
||
height: auto;
|
||
background: linear-gradient(to bottom,
|
||
rgba(0,112,199,0.4) 0%,
|
||
rgba(0,112,199,0.4) 25%,
|
||
#b08a6b 50%,
|
||
rgba(236,139,51,0.5) 75%,
|
||
rgba(236,139,51,0.5) 100%
|
||
);
|
||
border-radius: 2px;
|
||
z-index: 0;
|
||
}
|
||
.dmaic-step {
|
||
flex-direction: row;
|
||
text-align: left;
|
||
gap: 20px;
|
||
align-items: flex-start;
|
||
position: relative;
|
||
}
|
||
.dmaic-letter {
|
||
width: 56px;
|
||
height: 56px;
|
||
font-size: 24px;
|
||
flex-shrink: 0;
|
||
margin-bottom: 0;
|
||
margin-left: -36px;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
.dmaic-step-body { padding: 0; flex: 1; padding-top: 6px; }
|
||
.dmaic-step-body h3 { font-size: 17px; margin-bottom: 4px; }
|
||
}
|
||
|
||
/* ─── ENGAGEMENT SIZE TABLE ─── */
|
||
.engagement {
|
||
background: var(--white); border: 1px solid rgba(0,0,0,0.07);
|
||
border-radius: 18px; padding: 36px;
|
||
box-shadow: 0 6px 24px -10px rgba(0,0,0,0.08);
|
||
}
|
||
.engagement-intro {
|
||
color: var(--charcoal); font-size: 15px; line-height: 1.6;
|
||
margin-bottom: 28px; max-width: 760px;
|
||
}
|
||
.engagement-vars {
|
||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
|
||
margin-bottom: 32px;
|
||
}
|
||
@media (max-width: 760px) { .engagement-vars { grid-template-columns: 1fr; } }
|
||
.var-card {
|
||
padding: 20px; border-radius: 12px; background: var(--grey-soft);
|
||
}
|
||
.var-card-label {
|
||
font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
|
||
text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
|
||
}
|
||
.var-card-title {
|
||
font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 6px;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.var-card-detail { font-size: 13.5px; color: var(--charcoal); line-height: 1.5; }
|
||
.engagement-summary {
|
||
padding: 22px; border-radius: 12px;
|
||
background: linear-gradient(135deg, rgba(0,112,199,0.06), rgba(236,139,51,0.06));
|
||
border: 1px solid rgba(0,112,199,0.12);
|
||
}
|
||
.engagement-summary strong { color: var(--ink); }
|
||
|
||
|
||
/* ─── PROJECT-TO-PARTNERSHIP JOURNEY (clean horizontal row, no cluster) ─── */
|
||
/* Three project tiers sit in a row on the left as "starting points", then a
|
||
visual transition column, then Partnership styled as the destination. */
|
||
.size-track {
|
||
position: relative;
|
||
display: grid;
|
||
grid-template-columns: 1.7fr auto 1.1fr;
|
||
align-items: stretch;
|
||
gap: 0;
|
||
padding: 0;
|
||
}
|
||
.size-track::before { display: none; }
|
||
|
||
/* Left side: small label + clean horizontal row of 3 project tiers */
|
||
.size-projects {
|
||
padding: 0 12px;
|
||
position: relative;
|
||
}
|
||
.size-projects-label {
|
||
display: block;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: var(--charcoal);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
margin-bottom: 32px;
|
||
text-align: center;
|
||
opacity: 0.7;
|
||
}
|
||
.size-projects-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 0;
|
||
position: relative;
|
||
}
|
||
/* Connecting line beneath the 3 markers — full width across the project row */
|
||
.size-projects-row::before {
|
||
content: '';
|
||
position: absolute;
|
||
/* Position aligns with marker centre */
|
||
top: 76px;
|
||
left: calc(16.66% + 8px);
|
||
right: calc(16.66% + 8px);
|
||
height: 2px;
|
||
background: var(--accent);
|
||
opacity: 0.25;
|
||
border-radius: 2px;
|
||
z-index: 0;
|
||
}
|
||
|
||
.size-projects-row .size-stop {
|
||
text-align: center;
|
||
padding: 0 14px;
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0;
|
||
}
|
||
.size-projects-row .size-stop-label {
|
||
display: inline-block;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--accent);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
margin-bottom: 12px;
|
||
padding: 4px 14px;
|
||
background: rgba(var(--accent-rgb), 0.1);
|
||
border-radius: 999px;
|
||
}
|
||
.size-projects-row .size-stop-time {
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
letter-spacing: -0.015em;
|
||
margin-bottom: 14px;
|
||
line-height: 1.1;
|
||
}
|
||
.size-projects-row .size-stop-marker {
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 50%;
|
||
background: var(--accent);
|
||
border: 3px solid var(--white);
|
||
box-shadow: 0 4px 12px -2px rgba(0,0,0,0.15);
|
||
margin-bottom: 16px;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
.size-projects-row .size-stop-desc {
|
||
font-size: 13.5px;
|
||
line-height: 1.5;
|
||
color: var(--charcoal);
|
||
padding: 0 6px;
|
||
}
|
||
|
||
/* The transition column — arrow + "Often evolves into" */
|
||
.size-transition {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 22px;
|
||
text-align: center;
|
||
gap: 14px;
|
||
/* Vertically centre on the marker line — push slightly up to align with project markers */
|
||
padding-top: 32px;
|
||
}
|
||
.size-transition-label {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: var(--charcoal);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
line-height: 1.4;
|
||
max-width: 110px;
|
||
}
|
||
.size-transition-arrow {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, var(--blue), var(--orange));
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--white);
|
||
box-shadow: 0 8px 22px -8px rgba(0, 112, 199, 0.35);
|
||
}
|
||
.size-transition-arrow svg {
|
||
width: 22px;
|
||
height: 22px;
|
||
}
|
||
|
||
/* Partnership tier — destination card, visually anchoring right side */
|
||
.size-stop.partnership {
|
||
text-align: center;
|
||
padding: 36px 28px 32px;
|
||
background: linear-gradient(135deg, rgba(0,112,199,0.06), rgba(236,139,51,0.08));
|
||
border: 1.5px solid rgba(var(--accent-rgb), 0.22);
|
||
border-radius: 18px;
|
||
margin-top: 0;
|
||
position: relative;
|
||
}
|
||
.size-stop.partnership::before {
|
||
content: 'Where we aim';
|
||
position: absolute;
|
||
top: -10px;
|
||
right: 22px;
|
||
background: var(--white);
|
||
border: 1px solid rgba(var(--accent-rgb), 0.25);
|
||
padding: 4px 12px;
|
||
border-radius: 999px;
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
color: var(--charcoal);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
.size-stop.partnership .size-stop-label {
|
||
background: linear-gradient(135deg, var(--blue), var(--orange));
|
||
color: var(--white);
|
||
padding: 6px 18px;
|
||
margin-bottom: 16px;
|
||
display: inline-block;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
border-radius: 999px;
|
||
}
|
||
.size-stop.partnership .size-stop-time {
|
||
font-size: 26px;
|
||
color: var(--ink);
|
||
margin-bottom: 14px;
|
||
font-weight: 600;
|
||
letter-spacing: -0.015em;
|
||
line-height: 1.1;
|
||
}
|
||
.size-stop.partnership .size-stop-desc {
|
||
font-size: 14px;
|
||
line-height: 1.55;
|
||
color: var(--charcoal);
|
||
}
|
||
.size-stop.partnership .size-stop-marker {
|
||
width: 32px;
|
||
height: 18px;
|
||
border-radius: 0;
|
||
background: transparent;
|
||
border: none;
|
||
box-shadow: none;
|
||
position: relative;
|
||
margin: 0 auto 16px;
|
||
}
|
||
.size-stop.partnership .size-stop-marker::before,
|
||
.size-stop.partnership .size-stop-marker::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
width: 14px;
|
||
height: 14px;
|
||
border: 3px solid var(--accent);
|
||
border-radius: 50%;
|
||
}
|
||
.size-stop.partnership .size-stop-marker::before {
|
||
left: 0;
|
||
border-color: var(--blue);
|
||
}
|
||
.size-stop.partnership .size-stop-marker::after {
|
||
right: 0;
|
||
border-color: var(--orange);
|
||
}
|
||
|
||
/* Mobile/tablet: stack the journey vertically */
|
||
@media (max-width: 920px) {
|
||
.size-track {
|
||
grid-template-columns: 1fr;
|
||
gap: 28px;
|
||
}
|
||
.size-projects {
|
||
padding: 0;
|
||
}
|
||
.size-projects-label {
|
||
margin-bottom: 24px;
|
||
}
|
||
.size-projects-row {
|
||
grid-template-columns: 1fr;
|
||
gap: 28px;
|
||
}
|
||
.size-projects-row::before {
|
||
display: none;
|
||
}
|
||
.size-projects-row .size-stop {
|
||
padding: 0 12px;
|
||
}
|
||
.size-transition {
|
||
flex-direction: row;
|
||
padding: 8px 0;
|
||
gap: 16px;
|
||
justify-content: center;
|
||
}
|
||
.size-transition-arrow {
|
||
transform: rotate(90deg);
|
||
width: 44px;
|
||
height: 44px;
|
||
}
|
||
.size-transition-arrow svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
.size-transition-label {
|
||
max-width: none;
|
||
}
|
||
.size-stop.partnership {
|
||
padding: 32px 24px 28px;
|
||
}
|
||
.size-stop.partnership::before {
|
||
right: auto;
|
||
left: 22px;
|
||
}
|
||
}
|
||
|
||
|
||
/* ─── CTA ─── */
|
||
.cta-wrap { padding: 100px 28px 120px; background: var(--white); }
|
||
.cta-card {
|
||
max-width: 1100px; margin: 0 auto;
|
||
background: linear-gradient(135deg, #1a2230 0%, #1a1a1a 60%, #2a1f1a 100%);
|
||
border-radius: 24px; padding: 70px 50px; text-align: center;
|
||
position: relative; overflow: hidden; color: white;
|
||
}
|
||
.cta-card::before {
|
||
content: ''; position: absolute; top: -30%; left: -10%; width: 60%; height: 160%;
|
||
background: radial-gradient(ellipse, rgba(0,112,199,0.22), transparent 65%); pointer-events: none;
|
||
}
|
||
.cta-card::after {
|
||
content: ''; position: absolute; bottom: -30%; right: -10%; width: 60%; height: 160%;
|
||
background: radial-gradient(ellipse, rgba(236,139,51,0.18), transparent 65%); pointer-events: none;
|
||
}
|
||
.cta-inner { position: relative; z-index: 2; max-width: 700px; margin: 0 auto; }
|
||
.cta-card h2 {
|
||
font-size: clamp(30px, 4.2vw, 48px); font-weight: 600;
|
||
letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 16px;
|
||
}
|
||
.cta-card h2 em {
|
||
font-style: italic; font-weight: 500; color: var(--orange); margin-right: 0.12em;
|
||
}
|
||
.cta-card p {
|
||
font-size: 16px; color: rgba(255,255,255,0.78);
|
||
margin-bottom: 30px; line-height: 1.55;
|
||
}
|
||
.btn-on-dark {
|
||
background: var(--blue); color: white;
|
||
box-shadow: 0 12px 32px -8px rgba(0,112,199,0.5);
|
||
}
|
||
.btn-on-dark:hover { background: var(--blue-deep); }
|
||
.btn-ghost-dark {
|
||
background: transparent; color: white; border: 1px solid rgba(255,255,255,0.25);
|
||
}
|
||
.btn-ghost-dark:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.4); }
|
||
@media (max-width: 720px) { .cta-card { padding: 50px 28px; } }
|
||
|
||
/* ─── FOOTER (matches homepage) ─── */
|
||
.footer { background: var(--ink); color: white; padding: 60px 28px 28px; }
|
||
.footer-inner { max-width: 1200px; margin: 0 auto; }
|
||
.footer-grid {
|
||
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px;
|
||
}
|
||
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
|
||
.footer-brand img { max-height: 56px; width: auto; margin-bottom: 18px; }
|
||
.footer-brand p { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.55; max-width: 280px; }
|
||
.footer-col h5 {
|
||
font-size: 13px; font-weight: 600; text-transform: uppercase;
|
||
letter-spacing: 0.05em; margin-bottom: 16px; color: rgba(255,255,255,0.5);
|
||
}
|
||
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
|
||
.footer-col a {
|
||
color: rgba(255,255,255,0.85); text-decoration: none; font-size: 14px; transition: color 0.2s;
|
||
}
|
||
.footer-col a:hover { color: var(--orange); }
|
||
.footer-bottom {
|
||
border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px;
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
font-size: 13px; color: rgba(255,255,255,0.5); flex-wrap: wrap; gap: 12px;
|
||
}
|
||
|
||
/* Reveal */
|
||
@media (prefers-reduced-motion: no-preference) {
|
||
.reveal {
|
||
opacity: 0; transform: translateY(20px);
|
||
transition: opacity 0.8s ease, transform 0.8s ease;
|
||
}
|
||
.reveal.in { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
|
||
/* ─── "What this looks like in practice" — value examples ─── */
|
||
.examples-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 24px;
|
||
margin-top: 12px;
|
||
}
|
||
@media (max-width: 880px) {
|
||
.examples-grid { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
.example-card {
|
||
background: var(--white);
|
||
border: 1px solid rgba(0,0,0,0.07);
|
||
border-radius: 18px;
|
||
padding: 32px 32px 28px;
|
||
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
|
||
box-shadow: 0 6px 22px -10px rgba(0,0,0,0.07);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.example-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 22px 48px -22px rgba(var(--accent-rgb), 0.22);
|
||
border-color: rgba(var(--accent-rgb), 0.3);
|
||
}
|
||
|
||
.example-eyebrow {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--accent);
|
||
margin-bottom: 14px;
|
||
}
|
||
.example-eyebrow svg {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
|
||
.example-card h3 {
|
||
font-size: 21px;
|
||
font-weight: 600;
|
||
letter-spacing: -0.015em;
|
||
line-height: 1.25;
|
||
color: var(--ink);
|
||
margin-bottom: 14px;
|
||
}
|
||
.example-card > p {
|
||
font-size: 15px;
|
||
line-height: 1.6;
|
||
color: var(--charcoal);
|
||
margin-bottom: 22px;
|
||
}
|
||
|
||
/* Outcome metrics row — now 2 metrics, more breathing room */
|
||
.example-outcomes {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 18px;
|
||
padding: 20px 0 4px;
|
||
border-top: 1px solid rgba(0,0,0,0.06);
|
||
}
|
||
@media (max-width: 540px) {
|
||
.example-outcomes { grid-template-columns: 1fr; gap: 12px; }
|
||
}
|
||
.example-outcome {
|
||
text-align: left;
|
||
padding: 0 4px;
|
||
}
|
||
.example-outcome-value {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: var(--accent);
|
||
letter-spacing: -0.02em;
|
||
line-height: 1.1;
|
||
margin-bottom: 4px;
|
||
}
|
||
/* Asterisk superscript — same accent colour, no underline */
|
||
.example-outcome-value sup {
|
||
font-size: 0.55em;
|
||
font-weight: 600;
|
||
margin-left: 1px;
|
||
vertical-align: super;
|
||
line-height: 1;
|
||
}
|
||
.example-outcome-label {
|
||
font-size: 12.5px;
|
||
color: var(--charcoal);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* Page-level footnote — slim band sitting between the examples section
|
||
and the closing CTA. Annotates the asterisks on the example metrics. */
|
||
.page-footnote {
|
||
max-width: 880px;
|
||
margin: 0 auto;
|
||
padding: 24px 28px;
|
||
background: transparent;
|
||
border-top: 1px solid rgba(0,0,0,0.08);
|
||
border-bottom: 1px solid rgba(0,0,0,0.08);
|
||
font-size: 12.5px;
|
||
line-height: 1.6;
|
||
color: var(--charcoal);
|
||
text-align: center;
|
||
}
|
||
.page-footnote sup {
|
||
font-weight: 600;
|
||
color: var(--accent);
|
||
margin-right: 2px;
|
||
}
|
||
.page-footnote strong { color: var(--ink); font-weight: 600; }
|
||
.page-footnote-wrap {
|
||
padding: 0 28px;
|
||
background: var(--white);
|
||
}
|
||
|
||
/* ─── Background pattern: chevrons (Consulting / process flow) ─── */
|
||
.page-hero {
|
||
background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
|
||
position: relative;
|
||
}
|
||
.page-hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%230070c7%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.5%22%3E%0A%20%20%20%20%3Cpolyline%20points%3D%220%2C15%2015%2C5%2030%2C15%2045%2C5%2060%2C15%22/%3E%0A%20%20%20%20%3Cpolyline%20points%3D%220%2C35%2015%2C25%2030%2C35%2045%2C25%2060%2C35%22/%3E%0A%20%20%20%20%3Cpolyline%20points%3D%220%2C55%2015%2C45%2030%2C55%2045%2C45%2060%2C55%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
|
||
background-repeat: repeat;
|
||
background-size: 60px 60px;
|
||
opacity: 0.06;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
.page-hero > * { position: relative; z-index: 1; }
|
||
.page-hero-inner { position: relative; z-index: 1; }
|
||
|
||
#approach {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
#approach::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%230070c7%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%220.5%22%3E%0A%20%20%20%20%3Cpolyline%20points%3D%220%2C15%2015%2C5%2030%2C15%2045%2C5%2060%2C15%22/%3E%0A%20%20%20%20%3Cpolyline%20points%3D%220%2C35%2015%2C25%2030%2C35%2045%2C25%2060%2C35%22/%3E%0A%20%20%20%20%3Cpolyline%20points%3D%220%2C55%2015%2C45%2030%2C55%2045%2C45%2060%2C55%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
|
||
background-repeat: repeat;
|
||
background-size: 80px 80px;
|
||
opacity: 0.04;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
#approach > * { position: relative; z-index: 1; }
|
||
|
||
|
||
/* ─── Reveal animation on example outcome metrics ─── */
|
||
/* When the card scrolls into view, the values fade in and slide up,
|
||
staggered for visual rhythm. Made more noticeable with longer duration
|
||
and bigger movement. */
|
||
.example-outcome-value {
|
||
opacity: 0;
|
||
transform: translateY(16px);
|
||
transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
|
||
transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||
}
|
||
.example-card.is-revealed .example-outcome-value {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
/* Stagger so first outcome appears, then second one a moment later */
|
||
.example-card.is-revealed .example-outcome:nth-child(1) .example-outcome-value {
|
||
transition-delay: 0.05s;
|
||
}
|
||
.example-card.is-revealed .example-outcome:nth-child(2) .example-outcome-value {
|
||
transition-delay: 0.30s;
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.example-outcome-value {
|
||
opacity: 1;
|
||
transform: none;
|
||
transition: none;
|
||
}
|
||
}
|
||
|
||
/* Mobile: dial back the bumped section padding so phones don't waste space */
|
||
@media (max-width: 720px) {
|
||
.section { padding: 80px 22px; }
|
||
.page-hero { padding: 64px 22px 52px; }
|
||
.cta-wrap { padding: 64px 22px 80px; }
|
||
.section-head { margin-bottom: 48px; }
|
||
}
|
||
|
||
/* ─── Hero with photo (side-by-side, photo right on desktop, above on mobile) ─── */
|
||
.page-hero-inner.with-photo {
|
||
max-width: 1200px;
|
||
text-align: left;
|
||
display: grid;
|
||
grid-template-columns: 1.1fr 1fr;
|
||
gap: 56px;
|
||
align-items: center;
|
||
}
|
||
.page-hero-inner.with-photo .page-hero-text {
|
||
/* Text column */
|
||
}
|
||
.page-hero-photo {
|
||
aspect-ratio: 4 / 5;
|
||
border-radius: 22px;
|
||
overflow: hidden;
|
||
box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.18);
|
||
background: var(--grey);
|
||
}
|
||
.page-hero-photo img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
/* On smaller widths, stack: photo above, text below */
|
||
@media (max-width: 880px) {
|
||
.page-hero-inner.with-photo {
|
||
grid-template-columns: 1fr;
|
||
gap: 32px;
|
||
text-align: center;
|
||
}
|
||
.page-hero-inner.with-photo .page-hero-ctas {
|
||
justify-content: center;
|
||
}
|
||
.page-hero-photo {
|
||
aspect-ratio: 16 / 9;
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
order: -1; /* photo above text on mobile */
|
||
}
|
||
}
|
||
@media (max-width: 540px) {
|
||
.page-hero-photo { aspect-ratio: 4 / 3; }
|
||
}
|
||
|
||
/* ─── Section anchor photo (wide band above "Who it's for" cards) ─── */
|
||
.section-anchor-photo {
|
||
width: 100%;
|
||
max-width: 1100px;
|
||
margin: 0 auto 56px;
|
||
aspect-ratio: 21 / 9;
|
||
border-radius: 22px;
|
||
overflow: hidden;
|
||
box-shadow: 0 22px 50px -25px rgba(0, 0, 0, 0.15);
|
||
}
|
||
.section-anchor-photo img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
@media (max-width: 720px) {
|
||
.section-anchor-photo {
|
||
aspect-ratio: 16 / 9;
|
||
margin-bottom: 40px;
|
||
border-radius: 16px;
|
||
}
|
||
}
|
||
|
||
/* ─── Example card photo (horizontal band at top of card) ─── */
|
||
.example-card-photo {
|
||
margin: -32px -32px 24px; /* extends to card edges, since card has 32px padding */
|
||
aspect-ratio: 16 / 9;
|
||
overflow: hidden;
|
||
border-top-left-radius: 18px;
|
||
border-top-right-radius: 18px;
|
||
background: var(--grey);
|
||
}
|
||
.example-card-photo img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
|
||
/* Engagement-section accordion sits below the timeline — give it breathing room */
|
||
.engagement-accordion {
|
||
margin-top: 56px;
|
||
}
|
||
/* Second accordion (deliverables) sits below the first; smaller gap so they read as a pair */
|
||
.engagement-accordion-deliverables {
|
||
margin-top: 16px;
|
||
}
|
||
@media (max-width: 720px) {
|
||
.engagement-accordion { margin-top: 40px; }
|
||
.engagement-accordion-deliverables { margin-top: 12px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ───── NAV ───── -->
|
||
<nav class="nav">
|
||
<div class="nav-inner">
|
||
<a href="../index.html" class="nav-logo" aria-label="Lean 101 home">
|
||
<img src="../assets/lean101-isotipo.png" alt="Lean 101">
|
||
</a>
|
||
<ul class="nav-links">
|
||
<li class="has-dropdown">
|
||
<a href="../index.html#services" class="current">Services</a>
|
||
<ul class="nav-dropdown" role="menu">
|
||
<li role="none">
|
||
<a href="consulting.html" class="current" role="menuitem">Process Excellence & Transformation</a>
|
||
</li>
|
||
<li role="none">
|
||
<a href="coaching.html" role="menuitem">Coaching & Training</a>
|
||
</li>
|
||
<li role="none">
|
||
<a href="digital-solutions.html" role="menuitem">Digital Solutions</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="../index.html#process">How it works</a></li>
|
||
<li><a href="../index.html#why">Why Lean 101</a></li>
|
||
<li><a href="../index.html#contact">Contact</a></li>
|
||
</ul>
|
||
<a href="../index.html#contact" class="nav-cta">Book a call</a>
|
||
<button class="nav-hamburger" type="button" aria-label="Open menu" aria-expanded="false" aria-controls="nav-drawer">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="3" y1="6" x2="21" y2="6"/>
|
||
<line x1="3" y1="12" x2="21" y2="12"/>
|
||
<line x1="3" y1="18" x2="21" y2="18"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Mobile drawer + overlay -->
|
||
<div class="nav-drawer-overlay" data-drawer-overlay aria-hidden="true"></div>
|
||
<aside class="nav-drawer" id="nav-drawer" aria-label="Mobile navigation" aria-hidden="true">
|
||
<div class="nav-drawer-head">
|
||
<img src="../assets/lean101-logotipo.png" alt="Lean 101">
|
||
<button class="nav-drawer-close" type="button" aria-label="Close menu">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<nav class="nav-drawer-body">
|
||
<ul>
|
||
<li><span class="nav-drawer-group-label">Services</span></li>
|
||
<li><a class="nav-drawer-subitem current" href="consulting.html">Process Excellence & Transformation</a></li>
|
||
<li><a class="nav-drawer-subitem coaching" href="coaching.html">Coaching & Training</a></li>
|
||
<li><a class="nav-drawer-subitem" href="digital-solutions.html">Digital Solutions</a></li>
|
||
<li><a class="nav-drawer-item" href="../index.html#process">How it works</a></li>
|
||
<li><a class="nav-drawer-item" href="../index.html#why">Why Lean 101</a></li>
|
||
<li><a class="nav-drawer-item" href="../index.html#contact">Contact</a></li>
|
||
</ul>
|
||
</nav>
|
||
<div class="nav-drawer-foot">
|
||
<a href="../index.html#contact" class="nav-drawer-cta">Book a call</a>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- ───── PAGE HERO ───── -->
|
||
<header class="page-hero">
|
||
<div class="page-hero-inner with-photo">
|
||
<div class="page-hero-text">
|
||
<span class="page-eyebrow">Consulting</span>
|
||
<h1>Process Excellence & <em>Transformation.</em></h1>
|
||
<p class="page-hero-sub">
|
||
We diagnose where work is breaking down, design optimised processes, and run the change with you — not just for you. Practical Lean and Six Sigma applied to how your business actually runs.
|
||
</p>
|
||
<div class="page-hero-ctas">
|
||
<a href="../index.html#contact" class="btn btn-primary">
|
||
Book a free intro call <span class="btn-arrow">→</span>
|
||
</a>
|
||
<a href="#approach" class="btn btn-secondary">See how it works</a>
|
||
</div>
|
||
</div>
|
||
<div class="page-hero-photo">
|
||
<img src="https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&w=1600&q=80" alt="Operations team at work in a real workplace">
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ───── WHO IT'S FOR ───── -->
|
||
<section class="section">
|
||
<div class="section-inner">
|
||
<div class="section-anchor-photo">
|
||
<img src="https://images.unsplash.com/photo-1556761175-5973dc0f32e7?auto=format&fit=crop&w=1600&q=80" alt="Team in a working session, problem-solving on a whiteboard">
|
||
</div>
|
||
<div class="section-head">
|
||
<div class="section-eyebrow">Who it's for</div>
|
||
<h2 class="section-title">Built for businesses where the process used to work — and now doesn't.</h2>
|
||
<p class="section-lede">
|
||
Most of our consulting clients aren't in crisis. They've grown, things have got more complex, and the way work flows has stopped keeping up. If any of these sound familiar, this is for you.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="fit-grid">
|
||
<div class="fit-card">
|
||
<div class="fit-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||
</div>
|
||
<h3>Things take longer than they used to</h3>
|
||
<p>Lead times have crept up. Customers wait longer. Your team is busy but throughput hasn't kept pace with demand.</p>
|
||
</div>
|
||
<div class="fit-card">
|
||
<div class="fit-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg>
|
||
</div>
|
||
<h3>Errors are repeating, not improving</h3>
|
||
<p>The same defects, the same rework, the same complaints — month after month. Fixes are reactive, not structural.</p>
|
||
</div>
|
||
<div class="fit-card">
|
||
<div class="fit-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="2" x2="12" y2="22"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||
</div>
|
||
<h3>You sense waste, but can't quantify it</h3>
|
||
<p>You know there's slack in the system. Hand-offs, waiting, duplicate work. But you don't have data to prove where, or how much.</p>
|
||
</div>
|
||
<div class="fit-card">
|
||
<div class="fit-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/></svg>
|
||
</div>
|
||
<h3>You've grown — and the system hasn't kept up</h3>
|
||
<p>What worked at 20 people doesn't work at 80. The same roles do more jobs, the same processes carry more load, and the cracks are starting to show.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ───── APPROACH: DMAIC ───── -->
|
||
<section class="section" id="approach">
|
||
<div class="section-inner">
|
||
<div class="section-head center">
|
||
<div class="section-eyebrow">The framework</div>
|
||
<h2 class="section-title">Lean Six Sigma, applied with discipline.</h2>
|
||
<p class="section-lede">
|
||
Process Excellence engagements run on the DMAIC framework — five phases proven across decades of operational improvement work, adapted to your scale and context.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="dmaic">
|
||
<div class="dmaic-step">
|
||
<div class="dmaic-letter">D</div>
|
||
<div class="dmaic-step-body">
|
||
<h3>Define</h3>
|
||
<p>Scope the problem and the goal. Anchor the engagement to a measurable target before any work begins.</p>
|
||
</div>
|
||
</div>
|
||
<div class="dmaic-step">
|
||
<div class="dmaic-letter">M</div>
|
||
<div class="dmaic-step-body">
|
||
<h3>Measure</h3>
|
||
<p>Capture the current state with hard data — cycle times, defects, hand-offs, costs. Evidence over opinion.</p>
|
||
</div>
|
||
</div>
|
||
<div class="dmaic-step">
|
||
<div class="dmaic-letter">A</div>
|
||
<div class="dmaic-step-body">
|
||
<h3>Analyse</h3>
|
||
<p>Find the root causes. Separate symptoms from structural drivers using value-stream mapping and analysis.</p>
|
||
</div>
|
||
</div>
|
||
<div class="dmaic-step">
|
||
<div class="dmaic-letter">I</div>
|
||
<div class="dmaic-step-body">
|
||
<h3>Improve</h3>
|
||
<p>Design and pilot the fix with your team. Prove it works on a focused area before scaling.</p>
|
||
</div>
|
||
</div>
|
||
<div class="dmaic-step">
|
||
<div class="dmaic-letter">C</div>
|
||
<div class="dmaic-step-body">
|
||
<h3>Control</h3>
|
||
<p>Lock in the gains. Standard work and visual controls hold the improvement — and feed the next cycle.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dmaic-note">
|
||
<strong>Why DMAIC?</strong> It's the most widely-adopted process improvement framework in the world — used across manufacturing, healthcare, and service industries for over 30 years. We apply it well, adapted to small-to-mid businesses where most consultancies overcomplicate it.
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ───── WHAT THIS LOOKS LIKE IN PRACTICE ───── -->
|
||
<section class="section alt">
|
||
<div class="section-inner">
|
||
<div class="section-head">
|
||
<div class="section-eyebrow">What this looks like in practice</div>
|
||
<h2 class="section-title">Where Process Excellence delivers real value.</h2>
|
||
<p class="section-lede">
|
||
Two illustrative scenarios showing what kind of work this looks like and what kind of results typically follow. Real engagements are scoped to your specific operation.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="examples-grid">
|
||
<div class="example-card">
|
||
<div class="example-card-photo">
|
||
<img src="https://images.unsplash.com/photo-1565793298595-6a879b1d9492?auto=format&fit=crop&w=1200&q=80" alt="Manufacturing line at work">
|
||
</div>
|
||
<span class="example-eyebrow">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
|
||
Manufacturing & operations
|
||
</span>
|
||
<h3>Reducing lead time on a manual production line.</h3>
|
||
<p>Customers waiting, work piling up, the team busy but not productive. We value-stream map the production flow, identify hand-off bottlenecks, and redesign standard work to eliminate wait states between stations.</p>
|
||
<div class="example-outcomes">
|
||
<div class="example-outcome">
|
||
<div class="example-outcome-value">−30 to −50%<sup>*</sup></div>
|
||
<div class="example-outcome-label">Lead time reduction</div>
|
||
</div>
|
||
<div class="example-outcome">
|
||
<div class="example-outcome-value">+20 to +40%<sup>*</sup></div>
|
||
<div class="example-outcome-label">Throughput on the same headcount</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="example-card">
|
||
<div class="example-card-photo">
|
||
<img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1200&q=80" alt="Office team reviewing process workflows">
|
||
</div>
|
||
<span class="example-eyebrow">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
||
Services & admin
|
||
</span>
|
||
<h3>Cutting cycle time on quote-to-cash.</h3>
|
||
<p>Deals taking weeks to quote, errors slipping through, sales chasing internal teams for status. We map the full quote-to-invoice flow across departments, eliminate duplicate hand-offs, and standardise the request-to-approval flow.</p>
|
||
<div class="example-outcomes">
|
||
<div class="example-outcome">
|
||
<div class="example-outcome-value">−40 to −70%<sup>*</sup></div>
|
||
<div class="example-outcome-label">Cycle time, quote to invoice</div>
|
||
</div>
|
||
<div class="example-outcome">
|
||
<div class="example-outcome-value">−50 to −80%<sup>*</sup></div>
|
||
<div class="example-outcome-label">Errors and rework</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ───── ENGAGEMENT SIZE & TIMEFRAME ───── -->
|
||
<section class="section">
|
||
<div class="section-inner">
|
||
<div class="section-head">
|
||
<div class="section-eyebrow">The engagement</div>
|
||
<h2 class="section-title">A focused project. Often, the start of a partnership.</h2>
|
||
<p class="section-lede">
|
||
Most engagements begin as a focused project — small, medium, or large depending on scope. The work that delivers tends to grow into an ongoing partnership over time.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="engagement">
|
||
<!-- Considerations collapsed by default — reference content, not selling content -->
|
||
<div class="size-timeline">
|
||
<div class="size-track">
|
||
<!-- Three project tiers grouped as "starting points" -->
|
||
<div class="size-projects">
|
||
<div class="size-projects-label">Starting points</div>
|
||
<div class="size-projects-row">
|
||
<div class="size-stop">
|
||
<div class="size-stop-label">Small</div>
|
||
<div class="size-stop-time">6–8 weeks</div>
|
||
<div class="size-stop-marker"></div>
|
||
<div class="size-stop-desc">Single process, single site. Focused improvement on one bottleneck.</div>
|
||
</div>
|
||
<div class="size-stop">
|
||
<div class="size-stop-label">Medium</div>
|
||
<div class="size-stop-time">10–16 weeks</div>
|
||
<div class="size-stop-marker"></div>
|
||
<div class="size-stop-desc">Multi-process, single site, or full-process redesign with rollout to 1-2 teams.</div>
|
||
</div>
|
||
<div class="size-stop">
|
||
<div class="size-stop-label">Large</div>
|
||
<div class="size-stop-time">4–6 months</div>
|
||
<div class="size-stop-marker"></div>
|
||
<div class="size-stop-desc">Multi-site or full-business transformation. Operating-model redesign at scale.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Visual transition: project work tends to evolve into partnership -->
|
||
<div class="size-transition" aria-hidden="true">
|
||
<div class="size-transition-arrow">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M5 12h14"/>
|
||
<path d="m13 6 6 6-6 6"/>
|
||
</svg>
|
||
</div>
|
||
<div class="size-transition-label">Often<br>evolves into</div>
|
||
</div>
|
||
|
||
<!-- The destination: partnership -->
|
||
<div class="size-stop partnership">
|
||
<div class="size-stop-label">Partnership</div>
|
||
<div class="size-stop-time">Ongoing</div>
|
||
<div class="size-stop-marker"></div>
|
||
<div class="size-stop-desc">A continuous improvement journey. We stay alongside your team as the business evolves — embedded support across cycles, not a single project.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- The journey: project tiers as starting points, partnership as destination -->
|
||
<div class="accordion engagement-accordion" data-state="closed">
|
||
<button class="accordion-toggle" type="button" aria-expanded="false" aria-controls="considerations-panel-consulting">
|
||
<span class="accordion-toggle-text">
|
||
<span class="accordion-toggle-title">What drives scope and timeline</span>
|
||
<span class="accordion-toggle-hint">Three considerations shape where an engagement lands — team size, scope, and your team's role in the work.</span>
|
||
</span>
|
||
<span class="accordion-chevron" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
||
</span>
|
||
</button>
|
||
<div class="accordion-panel" id="considerations-panel-consulting" aria-hidden="true">
|
||
<div class="accordion-panel-inner">
|
||
<div class="engagement-vars">
|
||
<div class="var-card">
|
||
<div class="var-card-label">Consideration 1</div>
|
||
<div class="var-card-title">Team size & complexity</div>
|
||
<div class="var-card-detail">A focused process redesign for one 5-person team is fast. A full transformation across 80 people, three sites, and four product lines is not.</div>
|
||
</div>
|
||
<div class="var-card">
|
||
<div class="var-card-label">Consideration 2</div>
|
||
<div class="var-card-title">Scope & depth</div>
|
||
<div class="var-card-detail">A single process redesign is one type of engagement. A full operating-model redesign with leadership coaching and digital tooling is another.</div>
|
||
</div>
|
||
<div class="var-card">
|
||
<div class="var-card-label">Consideration 3</div>
|
||
<div class="var-card-title">Internal capacity</div>
|
||
<div class="var-card-detail">If your team has the time and skill to lead the rollout themselves with our coaching, the engagement is shorter. If we do more of the heavy lifting, longer.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion engagement-accordion-deliverables" data-state="closed">
|
||
<button class="accordion-toggle" type="button" aria-expanded="false" aria-controls="included-panel-consulting">
|
||
<span class="accordion-toggle-text">
|
||
<span class="accordion-toggle-title">See what's in a typical engagement</span>
|
||
<span class="accordion-toggle-hint">Six deliverables — diagnosis, design, pilot, rollout, and handover.</span>
|
||
</span>
|
||
<span class="accordion-chevron" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
||
</span>
|
||
</button>
|
||
<div class="accordion-panel" id="included-panel-consulting" aria-hidden="true">
|
||
<div class="accordion-panel-inner">
|
||
<div class="deliverables">
|
||
<div class="deliverable">
|
||
<h4>Process mapping & baseline measurement</h4>
|
||
<p>Current state mapped, time studies, hand-off analysis, and a quantified baseline you can measure improvement against.</p>
|
||
</div>
|
||
<div class="deliverable">
|
||
<h4>Maturity assessment</h4>
|
||
<p>Where your operational excellence sits today — across leadership, systems, capability, and culture. Honest, benchmarked.</p>
|
||
</div>
|
||
<div class="deliverable">
|
||
<h4>Future-state design</h4>
|
||
<p>The new way of working, designed with your team. Includes standard work, visual controls, and the supporting metrics.</p>
|
||
</div>
|
||
<div class="deliverable">
|
||
<h4>Pilot in one focused area</h4>
|
||
<p>Proof on a single process, team, or product line — with hard data on the gains before we scale.</p>
|
||
</div>
|
||
<div class="deliverable">
|
||
<h4>Roll-out plan & coaching</h4>
|
||
<p>Scaling the proven approach across the business. Includes change-management coaching for leaders so the rollout sticks.</p>
|
||
</div>
|
||
<div class="deliverable">
|
||
<h4>Sustain handover</h4>
|
||
<p>Train-the-trainer, dashboards, and clear playbooks so the improvement runs without us — your team owns it.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ───── PAGE FOOTNOTE — annotates asterisks on examples metrics ───── -->
|
||
<div class="page-footnote-wrap">
|
||
<p class="page-footnote">
|
||
<sup>*</sup><strong>About these ranges.</strong> These are illustrative scenarios drawn from typical Lean improvement work — not specific client results. Real engagements are tailored to your business; scope, sector, and starting capability all shape what's achievable.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- ───── CTA ───── -->
|
||
<section class="cta-wrap" id="contact">
|
||
<div class="cta-card">
|
||
<div class="cta-inner">
|
||
<h2>Let's find <em>your</em> first improvement.</h2>
|
||
<p>Start with a free 30-minute intro call. If it's a fit, we'll schedule a 1-hour site visit to walk your operation together — and from there we'll scope a tailored partnership.</p>
|
||
<div class="page-hero-ctas">
|
||
<a href="#" class="btn btn-on-dark">
|
||
Book a free intro call <span class="btn-arrow">→</span>
|
||
</a>
|
||
<a href="mailto:hello@lean-101.com" class="btn btn-ghost-dark">hello@lean-101.com</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ───── FOOTER ───── -->
|
||
<footer class="footer">
|
||
<div class="footer-inner">
|
||
<div class="footer-grid">
|
||
<div class="footer-brand">
|
||
<img src="../assets/lean101-logotipo.png" alt="Lean 101">
|
||
<p>For businesses that want change to last.</p>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h5>Services</h5>
|
||
<ul>
|
||
<li><a href="consulting.html">Consulting</a></li>
|
||
<li><a href="coaching.html">Coaching & Training</a></li>
|
||
<li><a href="digital-solutions.html">Digital Solutions</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h5>Company</h5>
|
||
<ul>
|
||
<li><a href="../index.html#why">About</a></li>
|
||
<li><a href="../index.html#process">Approach</a></li>
|
||
<li><a href="../index.html#contact">Contact</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h5>Connect</h5>
|
||
<ul>
|
||
<li><a href="#">LinkedIn</a></li>
|
||
<li><a href="mailto:hello@lean-101.com">Email</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<span>© 2026 Lean 101. All rights reserved.</span>
|
||
<span>Based in Melbourne, working worldwide.</span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(e => {
|
||
if (e.isIntersecting) {
|
||
e.target.classList.add('in');
|
||
observer.unobserve(e.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.1 });
|
||
document.querySelectorAll('.section, .cta-wrap').forEach(el => {
|
||
el.classList.add('reveal');
|
||
observer.observe(el);
|
||
});
|
||
</script>
|
||
|
||
<script>
|
||
// ─── Mobile drawer (hamburger menu) ───
|
||
const drawer = document.querySelector('.nav-drawer');
|
||
const overlay = document.querySelector('[data-drawer-overlay]');
|
||
const hamburger = document.querySelector('.nav-hamburger');
|
||
const drawerClose = document.querySelector('.nav-drawer-close');
|
||
|
||
function openDrawer() {
|
||
if (!drawer) return;
|
||
drawer.classList.add('is-open');
|
||
drawer.setAttribute('aria-hidden', 'false');
|
||
overlay.classList.add('is-open');
|
||
overlay.setAttribute('aria-hidden', 'false');
|
||
hamburger.setAttribute('aria-expanded', 'true');
|
||
document.body.classList.add('nav-drawer-locked');
|
||
}
|
||
function closeDrawer() {
|
||
if (!drawer) return;
|
||
drawer.classList.remove('is-open');
|
||
drawer.setAttribute('aria-hidden', 'true');
|
||
overlay.classList.remove('is-open');
|
||
overlay.setAttribute('aria-hidden', 'true');
|
||
hamburger.setAttribute('aria-expanded', 'false');
|
||
document.body.classList.remove('nav-drawer-locked');
|
||
}
|
||
|
||
if (hamburger) hamburger.addEventListener('click', openDrawer);
|
||
if (drawerClose) drawerClose.addEventListener('click', closeDrawer);
|
||
if (overlay) overlay.addEventListener('click', closeDrawer);
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape' && drawer && drawer.classList.contains('is-open')) {
|
||
closeDrawer();
|
||
}
|
||
});
|
||
document.querySelectorAll('.nav-drawer a').forEach(link => {
|
||
link.addEventListener('click', closeDrawer);
|
||
});
|
||
// ─── Example card outcome reveal animation ───
|
||
// Each card's outcome values fade in and slide up when the card scrolls into view.
|
||
const exampleCards = document.querySelectorAll('.example-card');
|
||
if (exampleCards.length > 0) {
|
||
const exObs = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('is-revealed');
|
||
exObs.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.5, rootMargin: '0px 0px -10% 0px' });
|
||
exampleCards.forEach(card => exObs.observe(card));
|
||
}
|
||
|
||
|
||
// ─── Accordion toggle for "What's included" ───
|
||
document.querySelectorAll('.accordion').forEach(acc => {
|
||
const toggle = acc.querySelector('.accordion-toggle');
|
||
const panel = acc.querySelector('.accordion-panel');
|
||
if (!toggle || !panel) return;
|
||
|
||
toggle.addEventListener('click', () => {
|
||
const isOpen = acc.dataset.state === 'open';
|
||
if (isOpen) {
|
||
// Closing: set explicit max-height first (current height), then transition to 0
|
||
panel.style.maxHeight = panel.scrollHeight + 'px';
|
||
// Force a reflow so the browser registers the explicit height
|
||
// before we transition to 0
|
||
panel.offsetHeight;
|
||
panel.style.maxHeight = '0px';
|
||
acc.dataset.state = 'closed';
|
||
toggle.setAttribute('aria-expanded', 'false');
|
||
panel.setAttribute('aria-hidden', 'true');
|
||
} else {
|
||
// Opening: set max-height to content height, then clean up after transition
|
||
panel.style.maxHeight = panel.scrollHeight + 'px';
|
||
acc.dataset.state = 'open';
|
||
toggle.setAttribute('aria-expanded', 'true');
|
||
panel.setAttribute('aria-hidden', 'false');
|
||
// After the transition, set max-height to 'none' so resize doesn't clip content
|
||
panel.addEventListener('transitionend', function once() {
|
||
if (acc.dataset.state === 'open') {
|
||
panel.style.maxHeight = 'none';
|
||
}
|
||
panel.removeEventListener('transitionend', once);
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|