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 > Coaching & Training — Lean 101</ title >
< meta name = "description" content = "Tailored coaching and bespoke training that turns Lean theory into everyday practice. Build the capability so the improvement sticks — long after we've gone." >
< 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 ( -- orange );
--accent-rgb : 236 , 139 , 51 ;
}
* { 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 ( 236 , 139 , 51 , 0.15 );
border-color : rgba ( 236 , 139 , 51 , 0.3 );
}
. fit-icon {
width : 40 px ; height : 40 px ; border-radius : 10 px ;
background : rgba ( 236 , 139 , 51 , 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 ; }
/* ─── VOICES (Who it's for, dialogue style) ─── */
. voices {
max-width : 920 px ;
margin : 0 auto ;
display : flex ;
flex-direction : column ;
gap : 38 px ;
}
. voice {
display : flex ;
flex-direction : column ;
gap : 16 px ;
max-width : 560 px ;
transition : transform 0.4 s cubic-bezier ( 0.2 , 0.8 , 0.2 , 1 );
}
. voice : hover { transform : translateY ( -3 px ); }
. voice-left { align-self : flex-start ; align-items : flex-start ; }
. voice-right { align-self : flex-end ; align-items : flex-end ; }
. voice-bubble {
background : var ( -- white );
border : 1 px solid rgba ( 0 , 0 , 0 , 0.07 );
border-radius : 18 px ;
padding : 20 px 26 px ;
position : relative ;
box-shadow : 0 6 px 22 px -10 px rgba ( 0 , 0 , 0 , 0.1 );
transition : box-shadow 0.3 s ease , border-color 0.3 s ease ;
}
. voice : hover . voice-bubble {
box-shadow : 0 14 px 36 px -14 px rgba ( 236 , 139 , 51 , 0.25 );
border-color : rgba ( 236 , 139 , 51 , 0.35 );
}
/* Quote glyph in the corner — large, soft, decorative */
. voice-bubble :: before {
content : '\201C' ;
position : absolute ;
top : -10 px ;
font-family : Georgia , 'Times New Roman' , serif ;
font-size : 56 px ;
line-height : 1 ;
color : var ( -- orange );
opacity : 0.35 ;
font-weight : 700 ;
}
. voice-left . voice-bubble :: before { left : 16 px ; }
. voice-right . voice-bubble :: before { right : 16 px ; }
. voice-bubble p {
font-size : 17 px ;
line-height : 1.55 ;
color : var ( -- ink );
font-weight : 500 ;
letter-spacing : -0.005 em ;
padding-left : 4 px ;
padding-right : 4 px ;
padding-top : 6 px ;
}
/* Tail on the bubble */
. voice-bubble :: after {
content : '' ;
position : absolute ;
bottom : -8 px ;
width : 16 px ;
height : 16 px ;
background : var ( -- white );
border-right : 1 px solid rgba ( 0 , 0 , 0 , 0.07 );
border-bottom : 1 px solid rgba ( 0 , 0 , 0 , 0.07 );
transform : rotate ( 45 deg );
}
. voice-left . voice-bubble :: after { left : 38 px ; }
. voice-right . voice-bubble :: after { right : 38 px ; }
. voice : hover . voice-bubble :: after {
border-right-color : rgba ( 236 , 139 , 51 , 0.35 );
border-bottom-color : rgba ( 236 , 139 , 51 , 0.35 );
}
/* The "label" beneath each bubble — gives it a name and one-liner */
. voice-meta {
display : flex ;
align-items : center ;
gap : 14 px ;
padding : 0 6 px ;
}
. voice-right . voice-meta { flex-direction : row-reverse ; }
. voice-icon {
width : 40 px ;
height : 40 px ;
border-radius : 10 px ;
background : rgba ( 236 , 139 , 51 , 0.12 );
color : var ( -- orange );
display : flex ;
align-items : center ;
justify-content : center ;
flex-shrink : 0 ;
}
. voice-icon svg { width : 20 px ; height : 20 px ; }
. voice-meta-text { display : flex ; flex-direction : column ; gap : 2 px ; }
. voice-right . voice-meta-text { text-align : right ; }
. voice-meta-text strong {
font-size : 14 px ;
font-weight : 600 ;
color : var ( -- ink );
letter-spacing : -0.005 em ;
}
. voice-meta-text span {
font-size : 13 px ;
color : var ( -- charcoal );
line-height : 1.4 ;
}
@ media ( max-width : 720px ) {
. voices { gap : 28 px ; }
. voice , . voice-left , . voice-right {
align-self : stretch ;
max-width : 100 % ;
align-items : flex-start ;
}
. voice-right . voice-meta { flex-direction : row ; }
. voice-right . voice-meta-text { text-align : left ; }
. voice-bubble { padding : 18 px 22 px ; }
. voice-bubble p { font-size : 15.5 px ; }
}
/* ─── 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 ;
}
}
/* ─── CAPABILITY LADDER (Shu-Ha-Ri) ─── */
. ladder {
margin-top : 30 px ;
margin-bottom : 32 px ;
position : relative ;
padding-left : 60 px ;
}
. ladder-line {
position : absolute ;
left : 30 px ;
top : 0 ;
bottom : 0 ;
width : 3 px ;
background : linear-gradient ( to bottom ,
rgba ( 236 , 139 , 51 , 0.3 ) 0 % ,
rgba ( 236 , 139 , 51 , 0.65 ) 50 % ,
var ( -- orange ) 100 %
);
border-radius : 3 px ;
}
. ladder-step {
position : relative ;
padding-bottom : 48 px ;
transform : translateY ( 0 );
transition : transform 0.3 s ease ;
}
. ladder-step : last-child { padding-bottom : 0 ; }
. ladder-step : hover { transform : translateY ( -2 px ); }
. ladder-marker {
position : absolute ;
left : -42 px ;
top : 0 ;
width : 60 px ;
height : 60 px ;
background : var ( -- white );
border : 3 px solid var ( -- orange );
border-radius : 50 % ;
display : flex ;
align-items : center ;
justify-content : center ;
box-shadow : 0 8 px 24 px -8 px rgba ( 236 , 139 , 51 , 0.35 );
transition : transform 0.3 s ease , box-shadow 0.3 s ease ;
}
/* 3 stages — earlier is lighter, later is deeper */
. ladder-step [ data-level = "1" ] . ladder-marker { border-color : rgba ( 236 , 139 , 51 , 0.45 ); }
. ladder-step [ data-level = "2" ] . ladder-marker { border-color : rgba ( 236 , 139 , 51 , 0.75 ); }
. ladder-step [ data-level = "3" ] . ladder-marker { border-color : var ( -- orange ); }
. ladder-step : hover . ladder-marker {
transform : scale ( 1.08 );
box-shadow : 0 12 px 32 px -8 px rgba ( 236 , 139 , 51 , 0.5 );
}
. ladder-num {
font-size : 16 px ;
font-weight : 700 ;
color : var ( -- orange );
letter-spacing : -0.01 em ;
}
. ladder-content {
background : var ( -- white );
border : 1 px solid rgba ( 0 , 0 , 0 , 0.07 );
border-radius : 14 px ;
padding : 26 px 30 px ;
margin-left : 32 px ;
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 ;
}
. ladder-step : hover . ladder-content {
transform : translateY ( -3 px );
box-shadow : 0 18 px 40 px -20 px rgba ( 236 , 139 , 51 , 0.18 );
border-color : rgba ( 236 , 139 , 51 , 0.3 );
}
. ladder-stage {
display : inline-flex ;
align-items : center ;
gap : 10 px ;
background : rgba ( 236 , 139 , 51 , 0.1 );
color : var ( -- orange );
padding : 5 px 14 px ;
border-radius : 999 px ;
font-size : 12 px ;
font-weight : 600 ;
letter-spacing : 0.04 em ;
text-transform : uppercase ;
margin-bottom : 14 px ;
}
/* The Japanese term (Shu / Ha / Ri) — small, italic, subtle separator */
. ladder-stage-jp {
font-size : 11 px ;
font-style : italic ;
text-transform : none ;
letter-spacing : 0 ;
opacity : 0.7 ;
padding-left : 10 px ;
border-left : 1 px solid rgba ( 236 , 139 , 51 , 0.4 );
font-weight : 500 ;
}
. ladder-content h3 {
font-size : 21 px ;
font-weight : 600 ;
letter-spacing : -0.015 em ;
margin-bottom : 10 px ;
color : var ( -- ink );
line-height : 1.2 ;
}
. ladder-content h3 em {
font-style : italic ;
font-weight : 600 ;
color : var ( -- orange );
/* Italic letters lean right and can visually collapse the space after them.
A tiny right-side padding restores the breathing room. */
padding-right : 0.06 em ;
}
. ladder-content > p {
font-size : 15 px ;
line-height : 1.6 ;
color : var ( -- charcoal );
margin-bottom : 18 px ;
}
. ladder-hallmark {
padding : 14 px 18 px ;
background : var ( -- grey - soft );
border-left : 3 px solid var ( -- orange );
border-radius : 8 px ;
font-size : 13.5 px ;
color : var ( -- charcoal );
line-height : 1.55 ;
font-style : italic ;
}
. ladder-hallmark strong {
color : var ( -- ink );
font-style : normal ;
font-weight : 600 ;
}
. ladder-note {
background : linear-gradient ( 135 deg , rgba ( 236 , 139 , 51 , 0.06 ), rgba ( 0 , 112 , 199 , 0.04 ));
border : 1 px solid rgba ( 236 , 139 , 51 , 0.18 );
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 ;
}
. ladder-note strong { color : var ( -- ink ); }
@ media ( max-width : 600px ) {
. ladder { padding-left : 50 px ; }
. ladder-line { left : 24 px ; }
. ladder-marker { left : -38 px ; width : 48 px ; height : 48 px ; }
. ladder-num { font-size : 14 px ; }
. ladder-content { padding : 22 px 22 px ; margin-left : 18 px ; }
. ladder-content h3 { font-size : 18 px ; }
. ladder-stage { flex-wrap : wrap ; }
}
/* ─── 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: soft dots (Coaching / gentle, less directional) ─── */
. 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%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%0A%20%20%3Cg%20fill%3D%22%23ec8b33%22%20opacity%3D%220.55%22%3E%0A%20%20%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%221.4%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%221.4%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E" );
background-repeat : repeat ;
background-size : 32 px 32 px ;
opacity : 0.18 ;
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%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%0A%20%20%3Cg%20fill%3D%22%23ec8b33%22%20opacity%3D%220.55%22%3E%0A%20%20%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%221.4%22/%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%221.4%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E" );
background-repeat : repeat ;
background-size : 40 px 40 px ;
opacity : 0.12 ;
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" href = "consulting.html" > Process Excellence</ a ></ li >
2026-05-06 22:38:06 +12:00
< li >< a class = "nav-drawer-subitem coaching current" 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" > Coaching & Training</ span >
< h1 > Building < em > capability</ em > and culture.</ h1 >
< p class = "page-hero-sub" >
Tailored coaching and bespoke training that turns Lean theory into everyday practice. Your team owns the improvement — and keeps building on it long after we've gone.
</ 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-1521737711867-e3b97375f902?auto=format&fit=crop&w=1600&q=80" alt = "Coaching conversation between two people in a working environment" >
</ div >
</ div >
</ header >
<!-- ───── WHO IT'S FOR — coaching: dialogue-driven ───── -->
< section class = "section" >
< div class = "section-inner" >
< div class = "section-anchor-photo" >
< img src = "https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=1600&q=80" alt = "Workshop with team members collaborating around laptops" >
</ div >
< div class = "section-head" >
< div class = "section-eyebrow" > Who it's for</ div >
< h2 class = "section-title" > If any of these sound familiar, this is for you.</ h2 >
< p class = "section-lede" >
Most businesses we coach have smart people who want to improve. The problem isn't will — it's method. These are the things leaders most often say when they reach out.
</ p >
</ div >
< div class = "voices" >
< div class = "voice voice-left" >
< div class = "voice-bubble" >
< p > "Improvement only happens when I'm in the room. The moment I step out, it goes back to how it was."</ p >
</ div >
< div class = "voice-meta" >
< div class = "voice-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" >< circle cx = "12" cy = "8" r = "4" />< path d = "M20 21a8 8 0 0 0-16 0" /></ svg >
</ div >
< div class = "voice-meta-text" >
< strong > The leader-bottleneck</ strong >
< span > Capability lives in one person — and only one person.</ span >
</ div >
</ div >
</ div >
< div class = "voice voice-right" >
< div class = "voice-bubble" >
< p > "My team has experience. They've been here years. But when something goes wrong they just... work around it. They don't dig."</ p >
</ div >
< div class = "voice-meta" >
< div class = "voice-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" >< circle cx = "11" cy = "11" r = "8" />< path d = "m21 21-4.3-4.3" /></ svg >
</ div >
< div class = "voice-meta-text" >
< strong > Smart people, no framework</ strong >
< span > Experience without a method for getting to root cause.</ span >
</ div >
</ div >
</ div >
< div class = "voice voice-left" >
< div class = "voice-bubble" >
< p > "We had a consultant come in two years ago. The slides were great. The improvements lasted about a quarter. We're back where we started."</ p >
</ div >
< div class = "voice-meta" >
< div class = "voice-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" >< path d = "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /></ svg >
</ div >
< div class = "voice-meta-text" >
< strong > The slide-deck graveyard</ strong >
< span > Past help left process, not capability. The team never owned it.</ span >
</ div >
</ div >
</ div >
< div class = "voice voice-right" >
< div class = "voice-bubble" >
< p > "I don't want to keep paying consultants. I want my team to be the consultants — for ourselves, and for whoever joins next."</ p >
</ div >
< div class = "voice-meta" >
< div class = "voice-icon" >
< svg viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" >< path d = "M22 10v6M2 10l10-5 10 5-10 5z" />< path d = "M6 12v5c3 3 9 3 12 0v-5" /></ svg >
</ div >
< div class = "voice-meta-text" >
< strong > Self-sustaining capability</ strong >
< span > The goal isn't a method, it's an internal improvement habit.</ span >
</ div >
</ div >
</ div >
</ div >
</ div >
</ section >
<!-- ───── APPROACH: SHU-HA-RI (in plain English) ───── -->
< 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" > Learn it. Adapt it. Teach it.</ h2 >
< p class = "section-lede" >
Real capability develops in three stages — first you follow the method, then you adapt it to your context, then you teach the next team. We borrow this from the Toyota Way, where it's called Shu-Ha-Ri.
</ p >
</ div >
< div class = "ladder" >
< div class = "ladder-line" ></ div >
< div class = "ladder-step" data-level = "1" >
< div class = "ladder-marker" >
< div class = "ladder-num" > 01</ div >
</ div >
< div class = "ladder-content" >
< div class = "ladder-stage" > Stage 1 · Learn the method < span class = "ladder-stage-jp" > Shu</ span ></ div >
< h3 > Follow the form. Build the muscle.</ h3 >
< p > The team learns the methods exactly as taught — A3 problem-solving, 5 Whys, value-stream mapping, structured root-cause analysis. The goal at this stage isn't creativity. It's fluency in the form, before improvising.</ p >
< div class = "ladder-hallmark" >
< strong > What it sounds like:</ strong > "We're using the method, even when it feels slow. We're getting better at it."
</ div >
</ div >
</ div >
< div class = "ladder-step" data-level = "2" >
< div class = "ladder-marker" >
< div class = "ladder-num" > 02</ div >
</ div >
< div class = "ladder-content" >
< div class = "ladder-stage" > Stage 2 · Adapt to your context < span class = "ladder-stage-jp" > Ha</ span ></ div >
< h3 > Understand < em > why</ em > the method works. Then adjust it.</ h3 >
< p > The team starts seeing why each step exists — and what to bend, skip, or extend for their own situation. Coaching shifts from instruction to discussion. Methods become tools they apply, not rules they follow.</ p >
< div class = "ladder-hallmark" >
< strong > What it sounds like:</ strong > "We're solving real problems with the methods — and adjusting them to fit how we actually work."
</ div >
</ div >
</ div >
< div class = "ladder-step" data-level = "3" >
< div class = "ladder-marker" >
< div class = "ladder-num" > 03</ div >
</ div >
< div class = "ladder-content" >
< div class = "ladder-stage" > Stage 3 · Teach the next team < span class = "ladder-stage-jp" > Ri</ span ></ div >
< h3 > The method becomes how you think. Then you teach it.</ h3 >
< p > Your most capable people are now coaches themselves. They run workshops, mentor others, and propagate the method across the business. They create new approaches when the situation calls for it. The improvement engine has gone internal.</ p >
< div class = "ladder-hallmark" >
< strong > What it sounds like:</ strong > "We're teaching the next team without us in the room. Improvement is just how we work now."
</ div >
</ div >
</ div >
</ div >
< div class = "ladder-note" >
< strong > Why this approach?</ strong > Because the goal isn't a slide deck of methods — it's a team that can teach the next team. Most consultancies stop at Stage 1: a binder of tools, no real ownership. We're built around getting you to Stage 3 and stepping back.
</ 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 Coaching & Training delivers real value.</ h2 >
< p class = "section-lede" >
Two illustrative scenarios showing what kind of work this looks like and what kind of capability typically develops. Real programs are shaped to your team and the problems they're solving.
</ p >
</ div >
< div class = "examples-grid" >
< div class = "example-card" >
< div class = "example-card-photo" >
< img src = "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?auto=format&fit=crop&w=1200&q=80" alt = "Senior leader in a one-on-one coaching context" >
</ 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 = "M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z" /></ svg >
Leadership development
</ span >
< h3 > Building Lean leaders, not just Lean teams.</ h3 >
< p > Senior leaders sponsor improvement but don't lead it. Improvement happens to the team, not through it. We coach 3– </ p >
< div class = "example-outcomes" >
< div class = "example-outcome" >
< div class = "example-outcome-value" > 3– < sup > *</ sup ></ div >
< div class = "example-outcome-label" > Leaders coached to fluency</ div >
</ div >
< div class = "example-outcome" >
< div class = "example-outcome-value" > 2– × < sup > *</ sup ></ div >
< div class = "example-outcome-label" > More improvement cycles per quarter</ div >
</ div >
</ div >
</ div >
< div class = "example-card" >
< div class = "example-card-photo" >
< img src = "https://images.unsplash.com/photo-1542744173-8e7e53415bb0?auto=format&fit=crop&w=1200&q=80" alt = "Team in a structured discussion around a table" >
</ 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 = "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />< circle cx = "9" cy = "7" r = "4" />< path d = "M22 21v-2a4 4 0 0 0-3-3.87" />< path d = "M16 3.13a4 4 0 0 1 0 7.75" /></ svg >
Frontline team capability
</ span >
< h3 > Turning a frontline team into structured problem-solvers.</ h3 >
< p > Smart, experienced team but no shared method. Same issues recur. A 12-week program: workshops on A3, 5 Whys, and value-stream mapping; weekly coaching cycles where the team brings real problems and we coach them through structured solving.</ p >
< div class = "example-outcomes" >
< div class = "example-outcome" >
< div class = "example-outcome-value" > 8– < sup > *</ sup ></ div >
< div class = "example-outcome-label" > Team members trained to fluency</ div >
</ div >
< div class = "example-outcome" >
< div class = "example-outcome-value" > 5– < sup > *</ sup ></ div >
< div class = "example-outcome-label" > Real problems solved during program</ 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 program. Often, the start of a partnership.</ h2 >
< p class = "section-lede" >
Most coaching engagements begin as a focused program — a workshop series, a capability build, or a train-the-trainer rollout. The capability work that follows tends to grow into an ongoing partnership over time.
</ p >
</ div >
< div class = "engagement" >
< div class = "size-timeline" >
< div class = "size-track" >
< 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" > 4– </ div >
< div class = "size-stop-marker" ></ div >
< div class = "size-stop-desc" > Intensive workshop series for one team. Foundations laid, first wins delivered.</ div >
</ div >
< div class = "size-stop" >
< div class = "size-stop-label" > Medium</ div >
< div class = "size-stop-time" > 3– </ div >
< div class = "size-stop-marker" ></ div >
< div class = "size-stop-desc" > Focused capability build for one team. Coaching cadence, real problems solved.</ div >
</ div >
< div class = "size-stop" >
< div class = "size-stop-label" > Large</ div >
< div class = "size-stop-time" > 9– </ div >
< div class = "size-stop-marker" ></ div >
< div class = "size-stop-desc" > Full train-the-trainer program. Internal champions, business-wide rollout.</ div >
</ div >
</ div >
</ div >
< 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 >
< 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" > Embedded improvement coaching. Light-touch retained support — periodic check-ins, problem-solving cadence, and refresher content as your team and business grow.</ div >
</ div >
</ div >
</ div >
< div class = "accordion engagement-accordion" data-state = "closed" >
< button class = "accordion-toggle" type = "button" aria-expanded = "false" aria-controls = "considerations-panel-coaching" >
< span class = "accordion-toggle-text" >
< span class = "accordion-toggle-title" > What drives scope and cadence</ span >
< span class = "accordion-toggle-hint" > Three considerations shape where a program lands — how many people, their starting capability, and the depth of coaching needed.</ 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-coaching" 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" > How many people</ div >
< div class = "var-card-detail" > Coaching one leadership team is one engagement size. Building capability across 60 people in a multi-site organisation is another.</ div >
</ div >
< div class = "var-card" >
< div class = "var-card-label" > Consideration 2</ div >
< div class = "var-card-title" > Starting capability</ div >
< div class = "var-card-detail" > Teams new to Lean and structured problem-solving need more foundational content. Teams with the basics need targeted coaching, faster.</ div >
</ div >
< div class = "var-card" >
< div class = "var-card-label" > Consideration 3</ div >
< div class = "var-card-title" > Depth & cadence</ div >
< div class = "var-card-detail" > A one-off 5-day intensive is short. A program with monthly coaching cycles, train-the-trainer, and quarterly reviews runs across 9-12 months.</ 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-coaching" >
< 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 — coaching, workshops, train-the-trainer, and tools your team keeps.</ 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-coaching" aria-hidden = "true" >
< div class = "accordion-panel-inner" >
< div class = "deliverables" >
< div class = "deliverable" >
< h4 > Leadership coaching</ h4 >
< p > One-on-one and small-group coaching for leaders who need to lead the improvement, not just sponsor it. Practical tools they use the next day.</ p >
</ div >
< div class = "deliverable" >
< h4 > Capability-building workshops</ h4 >
< p > Bespoke workshops on Lean fundamentals, problem-solving (A3, 5 Whys, root cause), value stream thinking, and standard work — pitched to your team's level.</ p >
</ div >
< div class = "deliverable" >
< h4 > Train-the-trainer programs</ h4 >
< p > We coach a small group of internal champions to a level where they can run the workshops themselves. Your improvement engine, internalised.</ p >
</ div >
< div class = "deliverable" >
< h4 > Improvement coaching cadence</ h4 >
< p > Weekly or fortnightly coaching sessions where teams bring real problems and we coach them through structured solving — not give them the answer.</ p >
</ div >
< div class = "deliverable" >
< h4 > Practical tools & templates</ h4 >
< p > A3 templates, problem-solving worksheets, standard-work formats — adapted to your business and ready for your team to use without us.</ p >
</ div >
< div class = "deliverable" >
< h4 > Capability assessment & review</ h4 >
< p > Baseline and final assessments so you can see — measurably — where the capability has grown and where it still needs reinforcement.</ 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 capability-building work — not specific client results. Real programs are shaped to your team's starting capability and the business problems they're solving.
</ 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 >
