2026-05-06 22:38:06 +12:00
<!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 ; }
2026-05-20 23:09:07 +12:00
/* ───────── NAV ───────── */
2026-05-06 22:38:06 +12:00
. nav {
position : sticky ;
top : 0 ;
z-index : 100 ;
2026-05-20 23:09:07 +12:00
background : rgba ( 255 , 255 , 255 , 0.92 );
2026-05-06 22:38:06 +12:00
backdrop-filter : saturate ( 180 % ) blur ( 20 px );
-webkit- backdrop-filter : saturate ( 180 % ) blur ( 20 px );
2026-05-20 23:09:07 +12:00
border-bottom : 1 px solid rgba ( 0 , 0 , 0 , 0.08 );
2026-05-06 22:38:06 +12:00
}
. nav-inner {
2026-05-20 23:09:07 +12:00
max-width : 1100 px ;
margin : 0 auto ;
padding : 0 28 px ;
height : 68 px ;
display : flex ;
align-items : center ;
justify-content : space-between ;
2026-05-06 22:38:06 +12:00
}
2026-05-20 23:09:07 +12:00
. nav-logo {
display : flex ;
align-items : center ;
2026-05-06 22:38:06 +12:00
text-decoration : none ;
2026-05-20 23:09:07 +12:00
}
. nav-logo img {
height : 44 px ;
width : 44 px ;
object-fit : contain ;
}
. nav-links {
display : flex ;
gap : 30 px ;
list-style : none ;
margin : 0 ;
padding : 0 ;
}
. nav-links > li { position : relative ; }
. nav-links > li > a {
2026-05-06 22:38:06 +12:00
color : var ( -- ink );
2026-05-20 23:09:07 +12:00
text-decoration : none ;
2026-05-06 22:38:06 +12:00
font-size : 14 px ;
font-weight : 500 ;
2026-05-20 23:09:07 +12:00
opacity : 0.85 ;
transition : opacity 0.2 s ;
display : inline-flex ;
align-items : center ;
padding : 6 px 0 ;
2026-05-06 22:38:06 +12:00
}
2026-05-20 23:09:07 +12:00
. nav-links > li > a : hover { opacity : 1 ; }
/* Active-page indicator — small accent underline below current page link */
. nav-links > li > a . current {
opacity : 1 ;
position : relative ;
2026-05-06 22:38:06 +12:00
}
2026-05-20 23:09:07 +12:00
. nav-links > li > a . current :: after {
content : '' ;
position : absolute ;
left : 0 ;
right : 0 ;
bottom : -4 px ;
height : 2 px ;
border-radius : 2 px ;
background : var ( -- accent , var ( -- blue ));
2026-05-06 22:38:06 +12:00
}
2026-05-20 23:09:07 +12:00
/* Chevron button — separate from the link, click-only behaviour */
. nav-chevron {
background : transparent ;
border : 0 ;
padding : 6 px 4 px ;
margin : 0 0 0 2 px ;
cursor : pointer ;
color : var ( -- ink );
opacity : 0.6 ;
display : inline-flex ;
align-items : center ;
transition : opacity 0.2 s , transform 0.2 s ease ;
}
. nav-chevron : hover { opacity : 1 ; }
. nav-chevron svg { display : block ; width : 11 px ; height : 11 px ; }
. nav-chevron [ aria-expanded = "true" ] {
opacity : 1 ;
transform : rotate ( 180 deg );
}
/* ───── Mega-panel ───── */
. nav-panel-wrap {
position : absolute ;
top : 100 % ;
left : 50 % ;
transform : translateX ( -50 % );
padding-top : 14 px ;
opacity : 0 ;
visibility : hidden ;
transition : opacity 0.2 s ease , visibility 0.2 s ;
z-index : 200 ;
}
. nav-panel-wrap . is-open {
opacity : 1 ;
visibility : visible ;
}
. nav-panel {
background : var ( -- white );
border : 1 px solid rgba ( 0 , 0 , 0 , 0.06 );
border-radius : 14 px ;
padding : 28 px ;
box-shadow : 0 24 px 60 px -16 px rgba ( 0 , 0 , 0 , 0.20 ),
0 6 px 16 px -6 px rgba ( 0 , 0 , 0 , 0.08 );
list-style : none ;
margin : 0 ;
display : grid ;
gap : 28 px ;
width : max-content ;
max-width : min ( 960 px , calc ( 100 vw - 56 px ));
transform : translateY ( -6 px );
transition : transform 0.2 s ease ;
}
. nav-panel-wrap . is-open . nav-panel { transform : translateY ( 0 ); }
. nav-panel . is-services {
grid-template-columns : repeat ( 3 , minmax ( 180 px , 1 fr ));
min-width : 640 px ;
}
. nav-panel . is-resources {
grid-template-columns : repeat ( 4 , minmax ( 160 px , 1 fr ));
min-width : 760 px ;
}
. nav-panel-col { display : flex ; flex-direction : column ; gap : 6 px ; }
. nav-panel-col > a ,
. nav-panel-col-head {
text-decoration : none ;
color : var ( -- ink );
}
. nav-panel-col-head {
font-size : 14 px ;
font-weight : 600 ;
letter-spacing : -0.005 em ;
color : var ( -- ink );
transition : color 0.15 s ease ;
}
a . nav-panel-col-head : hover { color : var ( -- blue ); }
. nav-panel-col-desc {
font-size : 13 px ;
line-height : 1.5 ;
color : rgba ( 86 , 86 , 86 , 0.85 );
margin : 0 ;
}
. nav-panel-col-link {
margin-top : 4 px ;
font-size : 12.5 px ;
font-weight : 500 ;
color : var ( -- blue );
display : inline-flex ;
align-items : center ;
gap : 4 px ;
text-decoration : none ;
transition : gap 0.15 s ease ;
}
. nav-panel-col-link : hover { gap : 8 px ; }
. nav-panel-col-tag {
display : inline-block ;
margin-top : 4 px ;
font-size : 10.5 px ;
font-weight : 600 ;
letter-spacing : 0.08 em ;
text-transform : uppercase ;
color : rgba ( 86 , 86 , 86 , 0.65 );
}
2026-05-06 22:38:06 +12:00
. nav-cta {
2026-05-20 23:09:07 +12:00
background : var ( -- ink );
color : white ;
padding : 9 px 18 px ;
border-radius : 999 px ;
font-size : 13 px ;
font-weight : 500 ;
text-decoration : none ;
transition : background 0.2 s , transform 0.2 s ;
}
. nav-cta : hover {
background : var ( -- blue - deep );
transform : translateY ( -1 px );
2026-05-06 22:38:06 +12:00
}
/* ─── Hamburger button (mobile only) ─── */
. nav-hamburger {
display : none ;
background : transparent ;
border : 1 px solid rgba ( 0 , 0 , 0 , 0.12 );
border-radius : 10 px ;
padding : 8 px ;
cursor : pointer ;
color : var ( -- ink );
transition : background 0.2 s , border-color 0.2 s ;
margin-left : 12 px ;
}
. nav-hamburger : hover {
background : var ( -- grey - soft );
border-color : rgba ( 0 , 0 , 0 , 0.2 );
}
. nav-hamburger svg { display : block ; width : 22 px ; height : 22 px ; }
2026-05-20 23:09:07 +12:00
/* ─── Mobile menu (full-screen takeover) ─── */
2026-05-06 22:38:06 +12:00
. nav-drawer-overlay {
position : fixed ;
inset : 0 ;
2026-05-20 23:09:07 +12:00
background : transparent ;
2026-05-06 22:38:06 +12:00
opacity : 0 ;
pointer-events : none ;
z-index : 99 ;
}
2026-05-20 23:09:07 +12:00
. nav-drawer-overlay . is-open { pointer-events : auto ; }
2026-05-06 22:38:06 +12:00
. nav-drawer {
position : fixed ;
2026-05-20 23:09:07 +12:00
inset : 0 ;
width : 100 % ;
height : 100 vh ;
2026-05-06 22:38:06 +12:00
background : var ( -- white );
2026-05-20 23:09:07 +12:00
transform : translateY ( -100 % );
transition : transform 0.4 s cubic-bezier ( 0.2 , 0.8 , 0.2 , 1 );
2026-05-06 22:38:06 +12:00
z-index : 100 ;
display : flex ;
flex-direction : column ;
overflow-y : auto ;
}
2026-05-20 23:09:07 +12:00
. nav-drawer . is-open { transform : translateY ( 0 ); }
2026-05-06 22:38:06 +12:00
. nav-drawer-head {
display : flex ;
justify-content : space-between ;
align-items : center ;
2026-05-20 23:09:07 +12:00
padding : 20 px 28 px ;
2026-05-06 22:38:06 +12:00
border-bottom : 1 px solid rgba ( 0 , 0 , 0 , 0.06 );
}
2026-05-20 23:09:07 +12:00
. nav-drawer-head img { height : 30 px ; width : auto ; }
2026-05-06 22:38:06 +12:00
. nav-drawer-close {
background : transparent ;
border : 1 px solid rgba ( 0 , 0 , 0 , 0.1 );
border-radius : 10 px ;
2026-05-20 23:09:07 +12:00
padding : 10 px ;
2026-05-06 22:38:06 +12:00
cursor : pointer ;
color : var ( -- ink );
transition : background 0.2 s , border-color 0.2 s ;
}
. nav-drawer-close : hover {
background : var ( -- grey - soft );
border-color : rgba ( 0 , 0 , 0 , 0.2 );
}
2026-05-20 23:09:07 +12:00
. nav-drawer-close svg { display : block ; width : 20 px ; height : 20 px ; }
2026-05-06 22:38:06 +12:00
2026-05-20 23:09:07 +12:00
. nav-drawer-body {
padding : 36 px 28 px 28 px ;
flex : 1 ;
display : flex ;
flex-direction : column ;
}
2026-05-06 22:38:06 +12:00
. nav-drawer ul {
list-style : none ;
padding : 0 ;
margin : 0 ;
}
. nav-drawer-item {
display : block ;
2026-05-20 23:09:07 +12:00
padding : 18 px 0 ;
2026-05-06 22:38:06 +12:00
color : var ( -- ink );
text-decoration : none ;
2026-05-20 23:09:07 +12:00
font-size : 26 px ;
font-weight : 600 ;
letter-spacing : -0.02 em ;
border-bottom : 1 px solid rgba ( 0 , 0 , 0 , 0.06 );
transition : color 0.15 s , padding-left 0.2 s ease ;
2026-05-06 22:38:06 +12:00
}
2026-05-20 23:09:07 +12:00
. nav-drawer-item : hover { color : var ( -- blue ); padding-left : 6 px ; }
2026-05-06 22:38:06 +12:00
. nav-drawer-group-label {
display : block ;
2026-05-20 23:09:07 +12:00
padding : 28 px 0 12 px ;
2026-05-06 22:38:06 +12:00
color : var ( -- charcoal );
font-size : 11 px ;
font-weight : 600 ;
2026-05-20 23:09:07 +12:00
letter-spacing : 0.12 em ;
2026-05-06 22:38:06 +12:00
text-transform : uppercase ;
2026-05-20 23:09:07 +12:00
opacity : 0.7 ;
border-bottom : 1 px solid rgba ( 0 , 0 , 0 , 0.06 );
2026-05-06 22:38:06 +12:00
}
. nav-drawer-subitem {
display : block ;
2026-05-20 23:09:07 +12:00
padding : 16 px 0 16 px 14 px ;
2026-05-06 22:38:06 +12:00
color : var ( -- ink );
text-decoration : none ;
2026-05-20 23:09:07 +12:00
font-size : 18 px ;
2026-05-06 22:38:06 +12:00
font-weight : 500 ;
2026-05-20 23:09:07 +12:00
border-bottom : 1 px solid rgba ( 0 , 0 , 0 , 0.04 );
2026-05-06 22:38:06 +12:00
border-left : 3 px solid transparent ;
2026-05-20 23:09:07 +12:00
transition : color 0.15 s , border-left-color 0.2 s ease , padding-left 0.2 s ease ;
2026-05-06 22:38:06 +12:00
}
. nav-drawer-subitem : hover {
2026-05-20 23:09:07 +12:00
color : var ( -- blue );
2026-05-06 22:38:06 +12:00
border-left-color : var ( -- blue );
2026-05-20 23:09:07 +12:00
padding-left : 20 px ;
}
. nav-drawer-subitem . coaching : hover {
color : var ( -- orange );
border-left-color : var ( -- orange );
2026-05-06 22:38:06 +12:00
}
. nav-drawer-foot {
2026-05-20 23:09:07 +12:00
padding : 24 px 28 px 32 px ;
2026-05-06 22:38:06 +12:00
border-top : 1 px solid rgba ( 0 , 0 , 0 , 0.06 );
}
. nav-drawer-cta {
display : block ;
text-align : center ;
background : var ( -- blue );
color : var ( -- white );
2026-05-20 23:09:07 +12:00
padding : 16 px 22 px ;
2026-05-06 22:38:06 +12:00
border-radius : 999 px ;
2026-05-20 23:09:07 +12:00
font-size : 16 px ;
2026-05-06 22:38:06 +12:00
font-weight : 500 ;
text-decoration : none ;
transition : background 0.2 s ;
}
. nav-drawer-cta : hover { background : var ( -- blue - deep ); }
2026-05-20 23:09:07 +12:00
. nav-drawer-subitem . current {
color : var ( -- blue );
border-left-color : var ( -- blue );
padding-left : 20 px ;
}
. nav-drawer-subitem . coaching . current {
color : var ( -- orange );
border-left-color : var ( -- orange );
}
2026-05-06 22:38:06 +12:00
body . nav-drawer-locked { overflow : hidden ; }
2026-05-20 23:09:07 +12:00
2026-05-06 22:38:06 +12:00
@ 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 : 110 px 28 px 90 px ;
background : linear-gradient ( 180 deg , #fafbfc 0 % , #ffffff 100 % );
}
. page-hero-inner { max-width : 900 px ; margin : 0 auto ; text-align : center ; }
. page-eyebrow {
display : inline-block ; color : var ( -- accent ); font-size : 13 px ;
font-weight : 600 ; letter-spacing : 0.08 em ; text-transform : uppercase ;
margin-bottom : 16 px ;
}
. page-hero h1 {
font-size : clamp ( 36 px , 5.5 vw , 64 px ); font-weight : 600 ;
letter-spacing : -0.03 em ; line-height : 1.05 ; margin-bottom : 22 px ;
}
. page-hero h1 em {
font-style : normal ; color : var ( -- accent );
}
. page-hero-sub {
font-size : clamp ( 17 px , 1.6 vw , 20 px ); color : var ( -- charcoal );
max-width : 720 px ; margin : 0 auto 32 px ; line-height : 1.5 ;
}
. page-hero-ctas {
display : flex ; gap : 14 px ; justify-content : center ; flex-wrap : wrap ;
}
. btn {
display : inline-flex ; align-items : center ; gap : 6 px ;
padding : 14 px 26 px ; border-radius : 999 px ; font-size : 15 px ; font-weight : 500 ;
text-decoration : none ; transition : all 0.2 s ; 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 : 1 px 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.2 s ; }
. btn : hover . btn-arrow { transform : translateX ( 3 px ); }
/* ─── SECTIONS ─── */
. section { padding : 130 px 28 px ; }
. section . alt { background : var ( -- grey - soft ); }
. section-inner { max-width : 1100 px ; margin : 0 auto ; }
. section-eyebrow {
color : var ( -- accent ); font-size : 13 px ; font-weight : 600 ;
letter-spacing : 0.08 em ; text-transform : uppercase ; margin-bottom : 14 px ;
}
. section-title {
font-size : clamp ( 30 px , 4 vw , 44 px ); font-weight : 600 ;
letter-spacing : -0.025 em ; line-height : 1.1 ; margin-bottom : 18 px ;
max-width : 920 px ;
}
. section-lede {
font-size : clamp ( 16 px , 1.3 vw , 18 px ); color : var ( -- charcoal );
max-width : 820 px ; line-height : 1.55 ;
}
. section-head { margin-bottom : 72 px ; }
/* Centred section heads stay narrower so the eye lands cleanly */
. section-head . center { text-align : center ; }
. section-head . center . section-title {
max-width : 760 px ;
margin-left : auto ;
margin-right : auto ;
}
. section-head . center . section-lede {
max-width : 680 px ;
margin-left : auto ;
margin-right : auto ;
}
/* ─── WHO IT'S FOR (problem cards) ─── */
. fit-grid {
display : grid ; grid-template-columns : repeat ( 2 , 1 fr ); gap : 18 px ;
}
@ media ( max-width : 720px ) { . fit-grid { grid-template-columns : 1 fr ; } }
. fit-card {
background : var ( -- white ); border : 1 px solid rgba ( 0 , 0 , 0 , 0.07 );
border-radius : 16 px ; padding : 28 px ;
transition : transform 0.3 s ease , box-shadow 0.3 s ease , border-color 0.3 s ease ;
}
. fit-card : hover {
transform : translateY ( -3 px );
box-shadow : 0 16 px 36 px -18 px rgba ( 0 , 112 , 199 , 0.15 );
border-color : rgba ( 0 , 112 , 199 , 0.3 );
}
. fit-icon {
width : 40 px ; height : 40 px ; border-radius : 10 px ;
background : rgba ( 0 , 112 , 199 , 0.1 ); color : var ( -- accent );
display : flex ; align-items : center ; justify-content : center ; margin-bottom : 16 px ;
}
. fit-icon svg { width : 20 px ; height : 20 px ; }
. fit-card h3 {
font-size : 17 px ; font-weight : 600 ; margin-bottom : 8 px ; letter-spacing : -0.01 em ;
}
. fit-card p { font-size : 14.5 px ; color : var ( -- charcoal ); line-height : 1.55 ; }
/* ─── WHAT'S INCLUDED (deliverables list) ─── */
. deliverables {
display : grid ; grid-template-columns : repeat ( 3 , 1 fr ); gap : 18 px ;
}
@ media ( max-width : 880px ) { . deliverables { grid-template-columns : 1 fr 1 fr ; } }
@ media ( max-width : 540px ) { . deliverables { grid-template-columns : 1 fr ; } }
. deliverable {
background : var ( -- white ); border : 1 px solid rgba ( 0 , 0 , 0 , 0.07 );
border-radius : 14 px ; padding : 22 px ;
border-top : 3 px solid var ( -- accent );
}
. deliverable h4 {
font-size : 15 px ; font-weight : 600 ; margin-bottom : 6 px ;
color : var ( -- ink ); letter-spacing : -0.005 em ;
}
. deliverable p { font-size : 14 px ; 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 : 1 px solid rgba ( 0 , 0 , 0 , 0.08 );
border-radius : 16 px ;
overflow : hidden ;
box-shadow : 0 4 px 16 px -8 px rgba ( 0 , 0 , 0 , 0.06 );
}
. accordion-toggle {
width : 100 % ;
background : transparent ;
border : none ;
padding : 22 px 28 px ;
cursor : pointer ;
display : flex ;
align-items : center ;
justify-content : space-between ;
gap : 18 px ;
text-align : left ;
color : var ( -- ink );
font-family : inherit ;
transition : background 0.2 s ease ;
}
. accordion-toggle : hover {
background : var ( -- grey - soft );
}
. accordion-toggle : focus-visible {
outline : 2 px solid var ( -- accent );
outline-offset : -2 px ;
}
. accordion-toggle-text {
flex : 1 ;
}
. accordion-toggle-title {
font-size : 17 px ;
font-weight : 600 ;
color : var ( -- ink );
margin-bottom : 4 px ;
letter-spacing : -0.01 em ;
}
. accordion-toggle-hint {
font-size : 13.5 px ;
color : var ( -- charcoal );
line-height : 1.5 ;
}
. accordion-chevron {
flex-shrink : 0 ;
width : 36 px ;
height : 36 px ;
border-radius : 50 % ;
background : rgba ( var ( -- accent - rgb ), 0.08 );
color : var ( -- accent );
display : flex ;
align-items : center ;
justify-content : center ;
transition : transform 0.3 s cubic-bezier ( 0.2 , 0.8 , 0.2 , 1 ), background 0.2 s ease ;
}
. accordion-chevron svg {
width : 18 px ;
height : 18 px ;
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 ( 180 deg );
}
/* The collapsible content panel */
. accordion-panel {
max-height : 0 ;
overflow : hidden ;
transition : max-height 0.5 s cubic-bezier ( 0.2 , 0.8 , 0.2 , 1 );
}
. accordion-panel-inner {
padding : 0 28 px 28 px ;
border-top : 1 px solid rgba ( 0 , 0 , 0 , 0.06 );
padding-top : 22 px ;
}
/* 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 : 30 px ;
display : grid ;
grid-template-columns : 1 fr auto 1 fr auto 1 fr auto 1 fr ;
align-items : stretch ; gap : 0 ;
}
. flow-step {
background : var ( -- white ); border : 1 px solid rgba ( 0 , 0 , 0 , 0.07 );
border-radius : 16 px ; padding : 24 px 22 px ;
display : flex ; flex-direction : column ;
box-shadow : 0 4 px 16 px -8 px rgba ( 0 , 0 , 0 , 0.06 );
transition : transform 0.3 s ease , box-shadow 0.3 s ease , border-color 0.3 s ease ;
border-top : 3 px 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 ( -5 px );
box-shadow : 0 22 px 50 px -22 px var ( -- step - shadow );
border-color : var ( -- step - accent );
}
. flow-step-label {
font-size : 11 px ; font-weight : 600 ; letter-spacing : 0.14 em ;
color : var ( -- step - accent ); margin-bottom : 6 px ; text-transform : uppercase ;
}
. flow-step-title {
font-size : 20 px ; font-weight : 600 ; margin-bottom : 10 px ;
letter-spacing : -0.015 em ; color : var ( -- ink ); line-height : 1.15 ;
}
. flow-step-desc {
color : var ( -- charcoal ); font-size : 13.5 px ; line-height : 1.55 ; margin-bottom : 14 px ; flex : 1 ;
}
. flow-step-outcome {
color : var ( -- step - accent ); font-size : 13 px ; line-height : 1.5 ; font-style : italic ;
padding-top : 12 px ; border-top : 1 px solid rgba ( 0 , 0 , 0 , 0.07 ); font-weight : 500 ;
}
. flow-arrow {
display : flex ; align-items : center ; justify-content : center ;
width : 36 px ; color : rgba ( 0 , 0 , 0 , 0.18 );
}
. flow-arrow svg { width : 24 px ; height : 24 px ; }
. 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 : 1 fr 1 fr ; gap : 18 px ; }
. 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 : 1 fr ; gap : 12 px ; }
. 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 , 1 fr );
gap : 12 px ;
margin-top : 20 px ;
margin-bottom : 32 px ;
position : relative ;
}
/* Connecting line behind all the letter circles */
. dmaic :: before {
content : '' ;
position : absolute ;
top : 38 px ;
left : 10 % ;
right : 10 % ;
height : 2 px ;
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 : 2 px ;
}
. dmaic-step {
display : flex ;
flex-direction : column ;
align-items : center ;
text-align : center ;
position : relative ;
z-index : 1 ;
transition : transform 0.3 s ease ;
}
. dmaic-step : hover { transform : translateY ( -4 px ); }
/* Big letter circles with gradient fill: D->blue, M->blue/purple, A->purple/orange, I->orange-warm, C->orange */
. dmaic-letter {
width : 76 px ;
height : 76 px ;
border-radius : 50 % ;
background : var ( -- blue );
color : white ;
font-size : 32 px ;
font-weight : 700 ;
display : flex ;
align-items : center ;
justify-content : center ;
margin-bottom : 18 px ;
box-shadow : 0 10 px 24 px -10 px rgba ( 0 , 0 , 0 , 0.25 );
border : 4 px solid var ( -- white );
transition : transform 0.3 s ease , box-shadow 0.3 s ease ;
}
. dmaic-step : nth-child ( 1 ) . dmaic-letter { background : linear-gradient ( 135 deg , #0070c7 , #005aa3 ); }
. dmaic-step : nth-child ( 2 ) . dmaic-letter { background : linear-gradient ( 135 deg , #1d63b3 , #6e7eaa ); }
. dmaic-step : nth-child ( 3 ) . dmaic-letter { background : linear-gradient ( 135 deg , #8a82a3 , #b08a6b ); }
. dmaic-step : nth-child ( 4 ) . dmaic-letter { background : linear-gradient ( 135 deg , #b07a55 , #d88842 ); }
. dmaic-step : nth-child ( 5 ) . dmaic-letter { background : linear-gradient ( 135 deg , #ec8b33 , #d97a1f ); }
. dmaic-step : hover . dmaic-letter {
transform : scale ( 1.06 );
box-shadow : 0 14 px 32 px -10 px rgba ( 0 , 0 , 0 , 0.35 );
}
. dmaic-step-body { padding : 0 8 px ; }
. dmaic-step-body h3 {
font-size : 18 px ;
font-weight : 600 ;
letter-spacing : -0.01 em ;
margin-bottom : 8 px ;
color : var ( -- ink );
}
. dmaic-step-body p {
font-size : 13.5 px ;
line-height : 1.5 ;
color : var ( -- charcoal );
}
. dmaic-note {
background : linear-gradient ( 135 deg , rgba ( 0 , 112 , 199 , 0.06 ), rgba ( 236 , 139 , 51 , 0.06 ));
border : 1 px solid rgba ( 0 , 112 , 199 , 0.12 );
border-radius : 12 px ;
padding : 22 px 26 px ;
color : var ( -- charcoal );
font-size : 14.5 px ;
line-height : 1.6 ;
max-width : 920 px ;
margin : 0 auto ;
}
. dmaic-note strong { color : var ( -- ink ); }
/* Tablet: 2 rows */
@ media ( max-width : 980px ) {
. dmaic { grid-template-columns : repeat ( 3 , 1 fr ); gap : 32 px 16 px ; }
. dmaic :: before { display : none ; }
}
/* Mobile: stacked vertically with a vertical connector line */
@ media ( max-width : 600px ) {
. dmaic {
grid-template-columns : 1 fr ;
gap : 24 px ;
padding-left : 36 px ;
position : relative ;
}
/* Vertical connecting line down the left, gradient blue→orange to match desktop */
. dmaic :: before {
display : block ;
content : '' ;
position : absolute ;
left : 28 px ;
top : 30 px ;
bottom : 30 px ;
right : auto ;
width : 2 px ;
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 : 2 px ;
z-index : 0 ;
}
. dmaic-step {
flex-direction : row ;
text-align : left ;
gap : 20 px ;
align-items : flex-start ;
position : relative ;
}
. dmaic-letter {
width : 56 px ;
height : 56 px ;
font-size : 24 px ;
flex-shrink : 0 ;
margin-bottom : 0 ;
margin-left : -36 px ;
position : relative ;
z-index : 2 ;
}
. dmaic-step-body { padding : 0 ; flex : 1 ; padding-top : 6 px ; }
. dmaic-step-body h3 { font-size : 17 px ; margin-bottom : 4 px ; }
}
/* ─── ENGAGEMENT SIZE TABLE ─── */
. engagement {
background : var ( -- white ); border : 1 px solid rgba ( 0 , 0 , 0 , 0.07 );
border-radius : 18 px ; padding : 36 px ;
box-shadow : 0 6 px 24 px -10 px rgba ( 0 , 0 , 0 , 0.08 );
}
. engagement-intro {
color : var ( -- charcoal ); font-size : 15 px ; line-height : 1.6 ;
margin-bottom : 28 px ; max-width : 760 px ;
}
. engagement-vars {
display : grid ; grid-template-columns : repeat ( 3 , 1 fr ); gap : 18 px ;
margin-bottom : 32 px ;
}
@ media ( max-width : 760px ) { . engagement-vars { grid-template-columns : 1 fr ; } }
. var-card {
padding : 20 px ; border-radius : 12 px ; background : var ( -- grey - soft );
}
. var-card-label {
font-size : 12 px ; font-weight : 600 ; letter-spacing : 0.08 em ;
text-transform : uppercase ; color : var ( -- accent ); margin-bottom : 8 px ;
}
. var-card-title {
font-size : 16 px ; font-weight : 600 ; color : var ( -- ink ); margin-bottom : 6 px ;
letter-spacing : -0.01 em ;
}
. var-card-detail { font-size : 13.5 px ; color : var ( -- charcoal ); line-height : 1.5 ; }
. engagement-summary {
padding : 22 px ; border-radius : 12 px ;
background : linear-gradient ( 135 deg , rgba ( 0 , 112 , 199 , 0.06 ), rgba ( 236 , 139 , 51 , 0.06 ));
border : 1 px 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.7 fr auto 1.1 fr ;
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 12 px ;
position : relative ;
}
. size-projects-label {
display : block ;
font-size : 11 px ;
font-weight : 600 ;
color : var ( -- charcoal );
text-transform : uppercase ;
letter-spacing : 0.1 em ;
margin-bottom : 32 px ;
text-align : center ;
opacity : 0.7 ;
}
. size-projects-row {
display : grid ;
grid-template-columns : repeat ( 3 , 1 fr );
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 : 76 px ;
left : calc ( 16.66 % + 8 px );
right : calc ( 16.66 % + 8 px );
height : 2 px ;
background : var ( -- accent );
opacity : 0.25 ;
border-radius : 2 px ;
z-index : 0 ;
}
. size-projects-row . size-stop {
text-align : center ;
padding : 0 14 px ;
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 : 12 px ;
font-weight : 600 ;
color : var ( -- accent );
text-transform : uppercase ;
letter-spacing : 0.08 em ;
margin-bottom : 12 px ;
padding : 4 px 14 px ;
background : rgba ( var ( -- accent - rgb ), 0.1 );
border-radius : 999 px ;
}
. size-projects-row . size-stop-time {
font-size : 22 px ;
font-weight : 600 ;
color : var ( -- ink );
letter-spacing : -0.015 em ;
margin-bottom : 14 px ;
line-height : 1.1 ;
}
. size-projects-row . size-stop-marker {
width : 18 px ;
height : 18 px ;
border-radius : 50 % ;
background : var ( -- accent );
border : 3 px solid var ( -- white );
box-shadow : 0 4 px 12 px -2 px rgba ( 0 , 0 , 0 , 0.15 );
margin-bottom : 16 px ;
position : relative ;
z-index : 2 ;
}
. size-projects-row . size-stop-desc {
font-size : 13.5 px ;
line-height : 1.5 ;
color : var ( -- charcoal );
padding : 0 6 px ;
}
/* The transition column — arrow + "Often evolves into" */
. size-transition {
display : flex ;
flex-direction : column ;
align-items : center ;
justify-content : center ;
padding : 0 22 px ;
text-align : center ;
gap : 14 px ;
/* Vertically centre on the marker line — push slightly up to align with project markers */
padding-top : 32 px ;
}
. size-transition-label {
font-size : 11 px ;
font-weight : 600 ;
color : var ( -- charcoal );
text-transform : uppercase ;
letter-spacing : 0.12 em ;
line-height : 1.4 ;
max-width : 110 px ;
}
. size-transition-arrow {
width : 56 px ;
height : 56 px ;
border-radius : 50 % ;
background : linear-gradient ( 135 deg , var ( -- blue ), var ( -- orange ));
display : flex ;
align-items : center ;
justify-content : center ;
color : var ( -- white );
box-shadow : 0 8 px 22 px -8 px rgba ( 0 , 112 , 199 , 0.35 );
}
. size-transition-arrow svg {
width : 22 px ;
height : 22 px ;
}
/* Partnership tier — destination card, visually anchoring right side */
. size-stop . partnership {
text-align : center ;
padding : 36 px 28 px 32 px ;
background : linear-gradient ( 135 deg , rgba ( 0 , 112 , 199 , 0.06 ), rgba ( 236 , 139 , 51 , 0.08 ));
border : 1.5 px solid rgba ( var ( -- accent - rgb ), 0.22 );
border-radius : 18 px ;
margin-top : 0 ;
position : relative ;
}
. size-stop . partnership :: before {
content : 'Where we aim' ;
position : absolute ;
top : -10 px ;
right : 22 px ;
background : var ( -- white );
border : 1 px solid rgba ( var ( -- accent - rgb ), 0.25 );
padding : 4 px 12 px ;
border-radius : 999 px ;
font-size : 10 px ;
font-weight : 600 ;
color : var ( -- charcoal );
text-transform : uppercase ;
letter-spacing : 0.08 em ;
}
. size-stop . partnership . size-stop-label {
background : linear-gradient ( 135 deg , var ( -- blue ), var ( -- orange ));
color : var ( -- white );
padding : 6 px 18 px ;
margin-bottom : 16 px ;
display : inline-block ;
font-size : 12 px ;
font-weight : 600 ;
letter-spacing : 0.08 em ;
text-transform : uppercase ;
border-radius : 999 px ;
}
. size-stop . partnership . size-stop-time {
font-size : 26 px ;
color : var ( -- ink );
margin-bottom : 14 px ;
font-weight : 600 ;
letter-spacing : -0.015 em ;
line-height : 1.1 ;
}
. size-stop . partnership . size-stop-desc {
font-size : 14 px ;
line-height : 1.55 ;
color : var ( -- charcoal );
}
. size-stop . partnership . size-stop-marker {
width : 32 px ;
height : 18 px ;
border-radius : 0 ;
background : transparent ;
border : none ;
box-shadow : none ;
position : relative ;
margin : 0 auto 16 px ;
}
. size-stop . partnership . size-stop-marker :: before ,
. size-stop . partnership . size-stop-marker :: after {
content : '' ;
position : absolute ;
top : 0 ;
width : 14 px ;
height : 14 px ;
border : 3 px 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 : 1 fr ;
gap : 28 px ;
}
. size-projects {
padding : 0 ;
}
. size-projects-label {
margin-bottom : 24 px ;
}
. size-projects-row {
grid-template-columns : 1 fr ;
gap : 28 px ;
}
. size-projects-row :: before {
display : none ;
}
. size-projects-row . size-stop {
padding : 0 12 px ;
}
. size-transition {
flex-direction : row ;
padding : 8 px 0 ;
gap : 16 px ;
justify-content : center ;
}
. size-transition-arrow {
transform : rotate ( 90 deg );
width : 44 px ;
height : 44 px ;
}
. size-transition-arrow svg {
width : 18 px ;
height : 18 px ;
}
. size-transition-label {
max-width : none ;
}
. size-stop . partnership {
padding : 32 px 24 px 28 px ;
}
. size-stop . partnership :: before {
right : auto ;
left : 22 px ;
}
}
/* ─── CTA ─── */
. cta-wrap { padding : 100 px 28 px 120 px ; background : var ( -- white ); }
. cta-card {
max-width : 1100 px ; margin : 0 auto ;
background : linear-gradient ( 135 deg , #1a2230 0 % , #1a1a1a 60 % , #2a1f1a 100 % );
border-radius : 24 px ; padding : 70 px 50 px ; 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 : 700 px ; margin : 0 auto ; }
. cta-card h2 {
font-size : clamp ( 30 px , 4.2 vw , 48 px ); font-weight : 600 ;
letter-spacing : -0.025 em ; line-height : 1.1 ; margin-bottom : 16 px ;
}
. cta-card h2 em {
font-style : italic ; font-weight : 500 ; color : var ( -- orange ); margin-right : 0.12 em ;
}
. cta-card p {
font-size : 16 px ; color : rgba ( 255 , 255 , 255 , 0.78 );
margin-bottom : 30 px ; line-height : 1.55 ;
}
. btn-on-dark {
background : var ( -- blue ); color : white ;
box-shadow : 0 12 px 32 px -8 px rgba ( 0 , 112 , 199 , 0.5 );
}
. btn-on-dark : hover { background : var ( -- blue - deep ); }
. btn-ghost-dark {
background : transparent ; color : white ; border : 1 px 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 : 50 px 28 px ; } }
/* ─── FOOTER (matches homepage) ─── */
. footer { background : var ( -- ink ); color : white ; padding : 60 px 28 px 28 px ; }
. footer-inner { max-width : 1200 px ; margin : 0 auto ; }
. footer-grid {
2026-05-20 23:09:07 +12:00
display : grid ; grid-template-columns : 1.6 fr 1 fr 1 fr 1 fr 1 fr ; gap : 40 px ; margin-bottom : 48 px ;
2026-05-06 22:38:06 +12:00
}
@ media ( max-width : 720px ) { . footer-grid { grid-template-columns : 1 fr 1 fr ; } }
. footer-brand img { max-height : 56 px ; width : auto ; margin-bottom : 18 px ; }
. footer-brand p { font-size : 14 px ; color : rgba ( 255 , 255 , 255 , 0.6 ); line-height : 1.55 ; max-width : 280 px ; }
. footer-col h5 {
font-size : 13 px ; font-weight : 600 ; text-transform : uppercase ;
letter-spacing : 0.05 em ; margin-bottom : 16 px ; color : rgba ( 255 , 255 , 255 , 0.5 );
}
. footer-col ul { list-style : none ; display : flex ; flex-direction : column ; gap : 10 px ; }
. footer-col a {
color : rgba ( 255 , 255 , 255 , 0.85 ); text-decoration : none ; font-size : 14 px ; transition : color 0.2 s ;
}
. footer-col a : hover { color : var ( -- orange ); }
. footer-bottom {
border-top : 1 px solid rgba ( 255 , 255 , 255 , 0.1 ); padding-top : 24 px ;
display : flex ; justify-content : space-between ; align-items : center ;
font-size : 13 px ; color : rgba ( 255 , 255 , 255 , 0.5 ); flex-wrap : wrap ; gap : 12 px ;
}
/* Reveal */
@ media ( prefers-reduced-motion : no-preference ) {
. reveal {
opacity : 0 ; transform : translateY ( 20 px );
transition : opacity 0.8 s ease , transform 0.8 s ease ;
}
. reveal . in { opacity : 1 ; transform : translateY ( 0 ); }
}
/* ─── "What this looks like in practice" — value examples ─── */
. examples-grid {
display : grid ;
grid-template-columns : 1 fr 1 fr ;
gap : 24 px ;
margin-top : 12 px ;
}
@ media ( max-width : 880px ) {
. examples-grid { grid-template-columns : 1 fr ; }
}
. example-card {
background : var ( -- white );
border : 1 px solid rgba ( 0 , 0 , 0 , 0.07 );
border-radius : 18 px ;
padding : 32 px 32 px 28 px ;
transition : transform 0.4 s cubic-bezier ( 0.2 , 0.8 , 0.2 , 1 ), box-shadow 0.3 s ease , border-color 0.3 s ease ;
box-shadow : 0 6 px 22 px -10 px rgba ( 0 , 0 , 0 , 0.07 );
display : flex ;
flex-direction : column ;
}
. example-card : hover {
transform : translateY ( -5 px );
box-shadow : 0 22 px 48 px -22 px rgba ( var ( -- accent - rgb ), 0.22 );
border-color : rgba ( var ( -- accent - rgb ), 0.3 );
}
. example-eyebrow {
display : inline-flex ;
align-items : center ;
gap : 8 px ;
font-size : 11 px ;
font-weight : 600 ;
letter-spacing : 0.1 em ;
text-transform : uppercase ;
color : var ( -- accent );
margin-bottom : 14 px ;
}
. example-eyebrow svg {
width : 14 px ;
height : 14 px ;
}
. example-card h3 {
font-size : 21 px ;
font-weight : 600 ;
letter-spacing : -0.015 em ;
line-height : 1.25 ;
color : var ( -- ink );
margin-bottom : 14 px ;
}
. example-card > p {
font-size : 15 px ;
line-height : 1.6 ;
color : var ( -- charcoal );
margin-bottom : 22 px ;
}
/* Outcome metrics row — now 2 metrics, more breathing room */
. example-outcomes {
display : grid ;
grid-template-columns : 1 fr 1 fr ;
gap : 18 px ;
padding : 20 px 0 4 px ;
border-top : 1 px solid rgba ( 0 , 0 , 0 , 0.06 );
}
@ media ( max-width : 540px ) {
. example-outcomes { grid-template-columns : 1 fr ; gap : 12 px ; }
}
. example-outcome {
text-align : left ;
padding : 0 4 px ;
}
. example-outcome-value {
font-size : 24 px ;
font-weight : 600 ;
color : var ( -- accent );
letter-spacing : -0.02 em ;
line-height : 1.1 ;
margin-bottom : 4 px ;
}
/* Asterisk superscript — same accent colour, no underline */
. example-outcome-value sup {
font-size : 0.55 em ;
font-weight : 600 ;
margin-left : 1 px ;
vertical-align : super ;
line-height : 1 ;
}
. example-outcome-label {
font-size : 12.5 px ;
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 : 880 px ;
margin : 0 auto ;
padding : 24 px 28 px ;
background : transparent ;
border-top : 1 px solid rgba ( 0 , 0 , 0 , 0.08 );
border-bottom : 1 px solid rgba ( 0 , 0 , 0 , 0.08 );
font-size : 12.5 px ;
line-height : 1.6 ;
color : var ( -- charcoal );
text-align : center ;
}
. page-footnote sup {
font-weight : 600 ;
color : var ( -- accent );
margin-right : 2 px ;
}
. page-footnote strong { color : var ( -- ink ); font-weight : 600 ; }
. page-footnote-wrap {
padding : 0 28 px ;
background : var ( -- white );
}
/* ─── Background pattern: chevrons (Consulting / process flow) ─── */
. page-hero {
background : linear-gradient ( 180 deg , #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 : 60 px 60 px ;
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 : 80 px 80 px ;
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 ( 16 px );
transition : opacity 0.9 s cubic-bezier ( 0.2 , 0.8 , 0.2 , 1 ),
transform 0.9 s 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.05 s ;
}
. example-card . is-revealed . example-outcome : nth-child ( 2 ) . example-outcome-value {
transition-delay : 0.30 s ;
}
@ 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 : 80 px 22 px ; }
. page-hero { padding : 64 px 22 px 52 px ; }
. cta-wrap { padding : 64 px 22 px 80 px ; }
. section-head { margin-bottom : 48 px ; }
}
/* ─── Hero with photo (side-by-side, photo right on desktop, above on mobile) ─── */
. page-hero-inner . with-photo {
max-width : 1200 px ;
text-align : left ;
display : grid ;
grid-template-columns : 1.1 fr 1 fr ;
gap : 56 px ;
align-items : center ;
}
. page-hero-inner . with-photo . page-hero-text {
/* Text column */
}
. page-hero-photo {
aspect-ratio : 4 / 5 ;
border-radius : 22 px ;
overflow : hidden ;
box-shadow : 0 30 px 60 px -25 px 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 : 1 fr ;
gap : 32 px ;
text-align : center ;
}
. page-hero-inner . with-photo . page-hero-ctas {
justify-content : center ;
}
. page-hero-photo {
aspect-ratio : 16 / 9 ;
max-width : 600 px ;
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 : 1100 px ;
margin : 0 auto 56 px ;
aspect-ratio : 21 / 9 ;
border-radius : 22 px ;
overflow : hidden ;
box-shadow : 0 22 px 50 px -25 px 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 : 40 px ;
border-radius : 16 px ;
}
}
/* ─── Example card photo (horizontal band at top of card) ─── */
. example-card-photo {
margin : -32 px -32 px 24 px ; /* extends to card edges, since card has 32px padding */
aspect-ratio : 16 / 9 ;
overflow : hidden ;
border-top-left-radius : 18 px ;
border-top-right-radius : 18 px ;
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 : 56 px ;
}
/* Second accordion (deliverables) sits below the first; smaller gap so they read as a pair */
. engagement-accordion-deliverables {
margin-top : 16 px ;
}
@ media ( max-width : 720px ) {
. engagement-accordion { margin-top : 40 px ; }
. engagement-accordion-deliverables { margin-top : 12 px ; }
}
</ style >
2026-05-20 23:09:07 +12:00
<!-- Google tag (gtag.js) -->
< script async src = "https://www.googletagmanager.com/gtag/js?id=G-Z5JJBS491H" ></ script >
< script >
window . dataLayer = window . dataLayer || [];
function gtag (){ dataLayer . push ( arguments );}
gtag ( 'js' , new Date ());
gtag ( 'config' , 'G-Z5JJBS491H' );
</ script >
2026-05-06 22:38:06 +12:00
</ head >
< body >
<!-- ───── NAV ───── -->
2026-05-20 23:09:07 +12:00
< nav class = "nav" aria-label = "Primary" >
2026-05-06 22:38:06 +12:00
< 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" >
2026-05-20 23:09:07 +12:00
< li >< a href = "../index.html" > Home</ a ></ li >
< li class = "has-panel" >
2026-05-06 22:38:06 +12:00
< a href = "../index.html#services" class = "current" > Services</ a >
2026-05-20 23:09:07 +12:00
< button class = "nav-chevron" type = "button" aria-haspopup = "true" aria-expanded = "false" aria-controls = "nav-panel-services" aria-label = "Open Services menu" data-panel-trigger = "services" >
< svg viewBox = "0 0 12 12" fill = "none" stroke = "currentColor" stroke-width = "1.6" stroke-linecap = "round" stroke-linejoin = "round" aria-hidden = "true" >< polyline points = "3 4.5 6 8 9 4.5" /></ svg >
</ button >
< div class = "nav-panel-wrap" id = "nav-panel-services" data-panel = "services" role = "region" aria-label = "Services menu" >
< div class = "nav-panel is-services" >
< div class = "nav-panel-col" >
< a href = "consulting.html" class = "nav-panel-col-head" > Process Excellence</ a >
< p class = "nav-panel-col-desc" > Diagnosing where work breaks down, designing the fix, and embedding the change with you.</ p >
< a href = "consulting.html" class = "nav-panel-col-link" > Learn more < span aria-hidden = "true" > →</ span ></ a >
</ div >
< div class = "nav-panel-col" >
< a href = "coaching.html" class = "nav-panel-col-head" > Coaching & Training</ a >
< p class = "nav-panel-col-desc" > Building the capability for your team to lead improvement themselves.</ p >
< a href = "coaching.html" class = "nav-panel-col-link" > Learn more < span aria-hidden = "true" > →</ span ></ a >
</ div >
< div class = "nav-panel-col" >
< a href = "digital-solutions.html" class = "nav-panel-col-head" > Digital Solutions</ a >
< p class = "nav-panel-col-desc" > Custom dashboards, web apps and automation, built for your specific work.</ p >
< a href = "digital-solutions.html" class = "nav-panel-col-link" > Learn more < span aria-hidden = "true" > →</ span ></ a >
</ div >
</ div >
</ div >
2026-05-06 22:38:06 +12:00
</ li >
2026-05-20 23:09:07 +12:00
< li class = "has-panel" >
< a href = "../resources/index.html" > Resources</ a >
< button class = "nav-chevron" type = "button" aria-haspopup = "true" aria-expanded = "false" aria-controls = "nav-panel-resources" aria-label = "Open Resources menu" data-panel-trigger = "resources" >
< svg viewBox = "0 0 12 12" fill = "none" stroke = "currentColor" stroke-width = "1.6" stroke-linecap = "round" stroke-linejoin = "round" aria-hidden = "true" >< polyline points = "3 4.5 6 8 9 4.5" /></ svg >
</ button >
< div class = "nav-panel-wrap" id = "nav-panel-resources" data-panel = "resources" role = "region" aria-label = "Resources menu" >
< div class = "nav-panel is-resources" >
< div class = "nav-panel-col" >
< a href = "../resources/index.html#principles" class = "nav-panel-col-head" > Principles</ a >
< p class = "nav-panel-col-desc" > The why of Lean — the philosophy underneath the methods.</ p >
< span class = "nav-panel-col-tag" > Coming soon</ span >
</ div >
< div class = "nav-panel-col" >
< a href = "../resources/index.html#techniques" class = "nav-panel-col-head" > Techniques</ a >
< p class = "nav-panel-col-desc" > The how of Lean — specific methods explained in plain terms.</ p >
< span class = "nav-panel-col-tag" > Coming soon</ span >
</ div >
< div class = "nav-panel-col" >
< a href = "../resources/index.html#reading" class = "nav-panel-col-head" > Reading</ a >
< p class = "nav-panel-col-desc" > Summaries of the books and articles that shaped how we think.</ p >
< span class = "nav-panel-col-tag" > Coming soon</ span >
</ div >
< div class = "nav-panel-col" >
< a href = "../resources/index.html#templates" class = "nav-panel-col-head" > Templates</ a >
< p class = "nav-panel-col-desc" > Worksheets, checklists and audits you can download and use.</ p >
< span class = "nav-panel-col-tag" > Coming soon</ span >
</ div >
</ div >
</ div >
</ li >
2026-05-06 22:38:06 +12:00
< li >< a href = "../index.html#contact" > Contact</ a ></ li >
</ ul >
2026-05-20 23:09:07 +12:00
< a href = "../index.html#contact" class = "nav-cta" > Let’ s Talk</ a >
<!-- Hamburger menu button — mobile only -->
2026-05-06 22:38:06 +12:00
< 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 >
2026-05-20 23:09:07 +12:00
2026-05-06 22:38:06 +12:00
<!-- 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 >
2026-05-20 23:09:07 +12:00
< li >< a class = "nav-drawer-item" href = "../index.html" > Home</ a ></ li >
2026-05-06 22:38:06 +12:00
< li >< span class = "nav-drawer-group-label" > Services</ span ></ li >
2026-05-20 23:09:07 +12:00
< li >< a class = "nav-drawer-subitem current" href = "consulting.html" > Process Excellence</ a ></ li >
2026-05-06 22:38:06 +12:00
< 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 >
2026-05-20 23:09:07 +12:00
< li >< span class = "nav-drawer-group-label" > Resources</ span ></ li >
< li >< a class = "nav-drawer-subitem" href = "../resources/index.html#principles" > Principles</ a ></ li >
< li >< a class = "nav-drawer-subitem" href = "../resources/index.html#techniques" > Techniques</ a ></ li >
< li >< a class = "nav-drawer-subitem" href = "../resources/index.html#reading" > Reading</ a ></ li >
< li >< a class = "nav-drawer-subitem" href = "../resources/index.html#templates" > Templates</ a ></ li >
2026-05-06 22:38:06 +12:00
< li >< a class = "nav-drawer-item" href = "../index.html#contact" > Contact</ a ></ li >
</ ul >
</ nav >
< div class = "nav-drawer-foot" >
2026-05-20 23:09:07 +12:00
< a href = "../index.html#contact" class = "nav-drawer-cta" > Let’ s Talk</ a >
2026-05-06 22:38:06 +12:00
</ 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" >
2026-05-20 23:09:07 +12:00
Let’ s Talk < span class = "btn-arrow" > →</ span >
2026-05-06 22:38:06 +12:00
</ 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" > − − < 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" > − − < sup > *</ sup ></ div >
< div class = "example-outcome-label" > Cycle time, quote to invoice</ div >
</ div >
< div class = "example-outcome" >
< div class = "example-outcome-value" > − − < 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– </ 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– </ 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– </ 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 >
2026-05-20 23:09:07 +12:00
< p > Tell us a little about your business and what you're looking to improve. We'll get back to you to talk through whether — and how — we can help.</ p >
< div class = "hero-ctas" >
< a href = "../index.html#contact" class = "btn btn-on-dark" >
Let’ s Talk < span class = "btn-arrow" > →</ span >
2026-05-06 22:38:06 +12:00
</ 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 >
2026-05-20 23:09:07 +12:00
< li >< a href = "consulting.html" > Process Excellence</ a ></ li >
2026-05-06 22:38:06 +12:00
< li >< a href = "coaching.html" > Coaching & Training</ a ></ li >
< li >< a href = "digital-solutions.html" > Digital Solutions</ a ></ li >
</ ul >
</ div >
2026-05-20 23:09:07 +12:00
< div class = "footer-col" >
< h5 > Resources</ h5 >
< ul >
< li >< a href = "../resources/index.html#principles" > Principles</ a ></ li >
< li >< a href = "../resources/index.html#techniques" > Techniques</ a ></ li >
< li >< a href = "../resources/index.html#reading" > Reading</ a ></ li >
< li >< a href = "../resources/index.html#templates" > Templates</ a ></ li >
</ ul >
</ div >
2026-05-06 22:38:06 +12:00
< 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 );
});
2026-05-20 23:09:07 +12:00
// ─── Desktop mega-panels (Services / Resources) ───
// Click-only behaviour: chevron toggles its panel, clicking outside or
// pressing Escape closes any open panel. Clicking the link text itself
// (not the chevron) navigates as normal — chevron is a separate trigger.
const panelTriggers = document . querySelectorAll ( '[data-panel-trigger]' );
const panels = document . querySelectorAll ( '[data-panel]' );
function closeAllPanels () {
panels . forEach ( p => p . classList . remove ( 'is-open' ));
panelTriggers . forEach ( t => t . setAttribute ( 'aria-expanded' , 'false' ));
}
panelTriggers . forEach ( trigger => {
trigger . addEventListener ( 'click' , ( e ) => {
e . preventDefault ();
e . stopPropagation ();
const name = trigger . dataset . panelTrigger ;
const panel = document . querySelector ( `[data-panel=" ${ name } "]` );
if ( ! panel ) return ;
const isOpen = panel . classList . contains ( 'is-open' );
closeAllPanels ();
if ( ! isOpen ) {
panel . classList . add ( 'is-open' );
trigger . setAttribute ( 'aria-expanded' , 'true' );
}
});
});
// Click outside any panel closes panels
document . addEventListener ( 'click' , ( e ) => {
if ( ! e . target . closest ( '.has-panel' )) {
closeAllPanels ();
}
});
// Escape closes panels
document . addEventListener ( 'keydown' , ( e ) => {
if ( e . key === 'Escape' ) closeAllPanels ();
});
// Clicking a link inside a panel closes it (so navigation feels clean)
document . querySelectorAll ( '.nav-panel a' ). forEach ( link => {
link . addEventListener ( 'click' , closeAllPanels );
});
2026-05-06 22:38:06 +12:00
// ─── 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 >
