2083 lines
72 KiB
HTML
2083 lines
72 KiB
HTML
<!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; }
|
||
|
||
/* ─── NAV (matches homepage) ─── */
|
||
.nav {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
background: rgba(255, 255, 255, 0.85);
|
||
backdrop-filter: saturate(180%) blur(20px);
|
||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||
}
|
||
.nav-inner {
|
||
max-width: 1200px; margin: 0 auto; padding: 0 28px; height: 68px;
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
}
|
||
.nav-logo { display: flex; align-items: center; text-decoration: none; }
|
||
.nav-logo img { height: 44px; width: 44px; object-fit: contain; }
|
||
.nav-links { display: flex; gap: 32px; list-style: none; }
|
||
.nav-links > li { position: relative; }
|
||
.nav-links a {
|
||
color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500;
|
||
opacity: 0.85; transition: opacity 0.2s; display: inline-flex; align-items: center; gap: 4px;
|
||
}
|
||
.nav-links a:hover { opacity: 1; }
|
||
.nav-links a.current { opacity: 1; color: var(--orange); }
|
||
.nav-links .has-dropdown > a::after {
|
||
content: ''; width: 8px; height: 8px;
|
||
border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
|
||
transform: rotate(45deg) translate(-2px, -2px); margin-left: 2px; transition: transform 0.2s;
|
||
}
|
||
.nav-links .has-dropdown:hover > a::after {
|
||
transform: rotate(225deg) translate(-2px, -2px);
|
||
}
|
||
.nav-dropdown {
|
||
position: absolute;
|
||
top: calc(100% + 6px);
|
||
left: 0;
|
||
min-width: 240px;
|
||
background: var(--white);
|
||
border: 1px solid rgba(0,0,0,0.06);
|
||
border-radius: 12px;
|
||
padding: 8px;
|
||
box-shadow: 0 16px 40px -12px rgba(0,0,0,0.18), 0 4px 10px -4px rgba(0,0,0,0.06);
|
||
list-style: none;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transform: translateY(-6px);
|
||
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
|
||
z-index: 200;
|
||
}
|
||
.nav-links .has-dropdown:hover .nav-dropdown,
|
||
.nav-links .has-dropdown:focus-within .nav-dropdown {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
transform: translateY(0);
|
||
}
|
||
/* Invisible bridge so cursor can travel from nav item to dropdown */
|
||
.nav-links .has-dropdown::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
right: 0;
|
||
height: 12px;
|
||
}
|
||
.nav-dropdown li { display: block; }
|
||
.nav-dropdown a {
|
||
display: block;
|
||
padding: 10px 14px;
|
||
border-radius: 8px;
|
||
text-decoration: none;
|
||
transition: background 0.15s ease, color 0.15s ease;
|
||
opacity: 1;
|
||
color: var(--ink);
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
letter-spacing: -0.005em;
|
||
}
|
||
.nav-dropdown a::after { display: none; }
|
||
.nav-dropdown a:hover {
|
||
background: var(--grey-soft);
|
||
color: var(--blue);
|
||
}
|
||
.nav-dropdown a.current {
|
||
background: var(--grey-soft);
|
||
color: var(--orange);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.nav-cta {
|
||
background: var(--ink); color: white; padding: 9px 18px; border-radius: 999px;
|
||
font-size: 13px; font-weight: 500; text-decoration: none; transition: background 0.2s;
|
||
}
|
||
.nav-cta:hover { background: var(--blue); }
|
||
|
||
/* ─── Hamburger button (mobile only) ─── */
|
||
.nav-hamburger {
|
||
display: none;
|
||
background: transparent;
|
||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||
border-radius: 10px;
|
||
padding: 8px;
|
||
cursor: pointer;
|
||
color: var(--ink);
|
||
transition: background 0.2s, border-color 0.2s;
|
||
margin-left: 12px;
|
||
}
|
||
.nav-hamburger:hover {
|
||
background: var(--grey-soft);
|
||
border-color: rgba(0, 0, 0, 0.2);
|
||
}
|
||
.nav-hamburger svg { display: block; width: 22px; height: 22px; }
|
||
|
||
/* ─── Mobile drawer overlay ─── */
|
||
.nav-drawer-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, 0.4);
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 0.3s ease;
|
||
z-index: 99;
|
||
}
|
||
.nav-drawer-overlay.is-open {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* ─── Mobile drawer (slides in from right) ─── */
|
||
.nav-drawer {
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: min(320px, 85vw);
|
||
background: var(--white);
|
||
box-shadow: -8px 0 30px -10px rgba(0, 0, 0, 0.15);
|
||
transform: translateX(100%);
|
||
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||
z-index: 100;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow-y: auto;
|
||
}
|
||
.nav-drawer.is-open { transform: translateX(0); }
|
||
|
||
.nav-drawer-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20px 24px;
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||
}
|
||
.nav-drawer-head img { height: 28px; width: auto; }
|
||
.nav-drawer-close {
|
||
background: transparent;
|
||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||
border-radius: 10px;
|
||
padding: 8px;
|
||
cursor: pointer;
|
||
color: var(--ink);
|
||
transition: background 0.2s, border-color 0.2s;
|
||
}
|
||
.nav-drawer-close:hover {
|
||
background: var(--grey-soft);
|
||
border-color: rgba(0, 0, 0, 0.2);
|
||
}
|
||
.nav-drawer-close svg { display: block; width: 18px; height: 18px; }
|
||
|
||
.nav-drawer-body { padding: 16px 0; flex: 1; }
|
||
.nav-drawer ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
.nav-drawer-item {
|
||
display: block;
|
||
padding: 14px 24px;
|
||
color: var(--ink);
|
||
text-decoration: none;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
border-left: 3px solid transparent;
|
||
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
||
}
|
||
.nav-drawer-item:hover {
|
||
background: var(--grey-soft);
|
||
border-left-color: var(--blue);
|
||
}
|
||
|
||
.nav-drawer-group-label {
|
||
display: block;
|
||
padding: 18px 24px 8px;
|
||
color: var(--charcoal);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
}
|
||
.nav-drawer-subitem {
|
||
display: block;
|
||
padding: 12px 24px 12px 36px;
|
||
color: var(--ink);
|
||
text-decoration: none;
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
border-left: 3px solid transparent;
|
||
transition: background 0.15s, border-color 0.15s;
|
||
}
|
||
.nav-drawer-subitem:hover {
|
||
background: var(--grey-soft);
|
||
border-left-color: var(--blue);
|
||
}
|
||
.nav-drawer-subitem.coaching:hover { border-left-color: var(--orange); }
|
||
.nav-drawer-subitem.current { background: rgba(0,112,199,0.06); border-left-color: var(--blue); }
|
||
.nav-drawer-subitem.coaching.current { background: rgba(236,139,51,0.06); border-left-color: var(--orange); }
|
||
|
||
.nav-drawer-foot {
|
||
padding: 20px 24px 28px;
|
||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||
}
|
||
.nav-drawer-cta {
|
||
display: block;
|
||
text-align: center;
|
||
background: var(--blue);
|
||
color: var(--white);
|
||
padding: 14px 22px;
|
||
border-radius: 999px;
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
text-decoration: none;
|
||
transition: background 0.2s;
|
||
}
|
||
.nav-drawer-cta:hover { background: var(--blue-deep); }
|
||
|
||
body.nav-drawer-locked { overflow: hidden; }
|
||
|
||
@media (max-width: 720px) {
|
||
.nav-links { display: none; }
|
||
.nav-cta { display: none; }
|
||
.nav-hamburger { display: inline-flex; align-items: center; justify-content: center; }
|
||
}
|
||
|
||
/* ─── PAGE HERO ─── */
|
||
.page-hero {
|
||
padding: 110px 28px 90px;
|
||
background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
|
||
}
|
||
.page-hero-inner { max-width: 900px; margin: 0 auto; text-align: center; }
|
||
.page-eyebrow {
|
||
display: inline-block; color: var(--accent); font-size: 13px;
|
||
font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
|
||
margin-bottom: 16px;
|
||
}
|
||
.page-hero h1 {
|
||
font-size: clamp(36px, 5.5vw, 64px); font-weight: 600;
|
||
letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 22px;
|
||
}
|
||
.page-hero h1 em {
|
||
font-style: normal; color: var(--accent);
|
||
}
|
||
.page-hero-sub {
|
||
font-size: clamp(17px, 1.6vw, 20px); color: var(--charcoal);
|
||
max-width: 720px; margin: 0 auto 32px; line-height: 1.5;
|
||
}
|
||
.page-hero-ctas {
|
||
display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
|
||
}
|
||
.btn {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
padding: 14px 26px; border-radius: 999px; font-size: 15px; font-weight: 500;
|
||
text-decoration: none; transition: all 0.2s; border: none; cursor: pointer;
|
||
}
|
||
.btn-primary { background: var(--blue); color: white; }
|
||
.btn-primary:hover { background: var(--blue-deep); }
|
||
.btn-secondary {
|
||
background: var(--white); color: var(--ink); border: 1px solid rgba(0, 0, 0, 0.12);
|
||
}
|
||
.btn-secondary:hover { background: var(--grey-soft); border-color: rgba(0, 0, 0, 0.2); }
|
||
.btn-arrow { transition: transform 0.2s; }
|
||
.btn:hover .btn-arrow { transform: translateX(3px); }
|
||
|
||
/* ─── SECTIONS ─── */
|
||
.section { padding: 130px 28px; }
|
||
.section.alt { background: var(--grey-soft); }
|
||
.section-inner { max-width: 1100px; margin: 0 auto; }
|
||
.section-eyebrow {
|
||
color: var(--accent); font-size: 13px; font-weight: 600;
|
||
letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px;
|
||
}
|
||
.section-title {
|
||
font-size: clamp(30px, 4vw, 44px); font-weight: 600;
|
||
letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 18px;
|
||
max-width: 920px;
|
||
}
|
||
.section-lede {
|
||
font-size: clamp(16px, 1.3vw, 18px); color: var(--charcoal);
|
||
max-width: 820px; line-height: 1.55;
|
||
}
|
||
.section-head { margin-bottom: 72px; }
|
||
/* Centred section heads stay narrower so the eye lands cleanly */
|
||
.section-head.center { text-align: center; }
|
||
.section-head.center .section-title {
|
||
max-width: 760px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
.section-head.center .section-lede {
|
||
max-width: 680px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
/* ─── WHO IT'S FOR (problem cards) ─── */
|
||
.fit-grid {
|
||
display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
|
||
}
|
||
@media (max-width: 720px) { .fit-grid { grid-template-columns: 1fr; } }
|
||
.fit-card {
|
||
background: var(--white); border: 1px solid rgba(0,0,0,0.07);
|
||
border-radius: 16px; padding: 28px;
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
|
||
}
|
||
.fit-card:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 16px 36px -18px rgba(236, 139, 51, 0.15);
|
||
border-color: rgba(236, 139, 51, 0.3);
|
||
}
|
||
.fit-icon {
|
||
width: 40px; height: 40px; border-radius: 10px;
|
||
background: rgba(236, 139, 51, 0.1); color: var(--accent);
|
||
display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
|
||
}
|
||
.fit-icon svg { width: 20px; height: 20px; }
|
||
.fit-card h3 {
|
||
font-size: 17px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em;
|
||
}
|
||
.fit-card p { font-size: 14.5px; color: var(--charcoal); line-height: 1.55; }
|
||
|
||
/* ─── VOICES (Who it's for, dialogue style) ─── */
|
||
.voices {
|
||
max-width: 920px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 38px;
|
||
}
|
||
.voice {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
max-width: 560px;
|
||
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||
}
|
||
.voice:hover { transform: translateY(-3px); }
|
||
.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: 1px solid rgba(0,0,0,0.07);
|
||
border-radius: 18px;
|
||
padding: 20px 26px;
|
||
position: relative;
|
||
box-shadow: 0 6px 22px -10px rgba(0,0,0,0.1);
|
||
transition: box-shadow 0.3s ease, border-color 0.3s ease;
|
||
}
|
||
.voice:hover .voice-bubble {
|
||
box-shadow: 0 14px 36px -14px 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: -10px;
|
||
font-family: Georgia, 'Times New Roman', serif;
|
||
font-size: 56px;
|
||
line-height: 1;
|
||
color: var(--orange);
|
||
opacity: 0.35;
|
||
font-weight: 700;
|
||
}
|
||
.voice-left .voice-bubble::before { left: 16px; }
|
||
.voice-right .voice-bubble::before { right: 16px; }
|
||
.voice-bubble p {
|
||
font-size: 17px;
|
||
line-height: 1.55;
|
||
color: var(--ink);
|
||
font-weight: 500;
|
||
letter-spacing: -0.005em;
|
||
padding-left: 4px;
|
||
padding-right: 4px;
|
||
padding-top: 6px;
|
||
}
|
||
/* Tail on the bubble */
|
||
.voice-bubble::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -8px;
|
||
width: 16px;
|
||
height: 16px;
|
||
background: var(--white);
|
||
border-right: 1px solid rgba(0,0,0,0.07);
|
||
border-bottom: 1px solid rgba(0,0,0,0.07);
|
||
transform: rotate(45deg);
|
||
}
|
||
.voice-left .voice-bubble::after { left: 38px; }
|
||
.voice-right .voice-bubble::after { right: 38px; }
|
||
.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: 14px;
|
||
padding: 0 6px;
|
||
}
|
||
.voice-right .voice-meta { flex-direction: row-reverse; }
|
||
.voice-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 10px;
|
||
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: 20px; height: 20px; }
|
||
.voice-meta-text { display: flex; flex-direction: column; gap: 2px; }
|
||
.voice-right .voice-meta-text { text-align: right; }
|
||
.voice-meta-text strong {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
letter-spacing: -0.005em;
|
||
}
|
||
.voice-meta-text span {
|
||
font-size: 13px;
|
||
color: var(--charcoal);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.voices { gap: 28px; }
|
||
.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: 18px 22px; }
|
||
.voice-bubble p { font-size: 15.5px; }
|
||
}
|
||
|
||
/* ─── WHAT'S INCLUDED (deliverables list) ─── */
|
||
.deliverables {
|
||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
|
||
}
|
||
@media (max-width: 880px) { .deliverables { grid-template-columns: 1fr 1fr; } }
|
||
@media (max-width: 540px) { .deliverables { grid-template-columns: 1fr; } }
|
||
.deliverable {
|
||
background: var(--white); border: 1px solid rgba(0,0,0,0.07);
|
||
border-radius: 14px; padding: 22px;
|
||
border-top: 3px solid var(--accent);
|
||
}
|
||
.deliverable h4 {
|
||
font-size: 15px; font-weight: 600; margin-bottom: 6px;
|
||
color: var(--ink); letter-spacing: -0.005em;
|
||
}
|
||
.deliverable p { font-size: 14px; color: var(--charcoal); line-height: 1.5; }
|
||
|
||
/* ─── Accordion wrapper for "What's included" ───
|
||
Compact summary by default; expands to reveal the deliverables grid.
|
||
Custom button + div pattern (not native <details>) for animation control. */
|
||
.accordion {
|
||
background: var(--white);
|
||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.06);
|
||
}
|
||
.accordion-toggle {
|
||
width: 100%;
|
||
background: transparent;
|
||
border: none;
|
||
padding: 22px 28px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 18px;
|
||
text-align: left;
|
||
color: var(--ink);
|
||
font-family: inherit;
|
||
transition: background 0.2s ease;
|
||
}
|
||
.accordion-toggle:hover {
|
||
background: var(--grey-soft);
|
||
}
|
||
.accordion-toggle:focus-visible {
|
||
outline: 2px solid var(--accent);
|
||
outline-offset: -2px;
|
||
}
|
||
.accordion-toggle-text {
|
||
flex: 1;
|
||
}
|
||
.accordion-toggle-title {
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
margin-bottom: 4px;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.accordion-toggle-hint {
|
||
font-size: 13.5px;
|
||
color: var(--charcoal);
|
||
line-height: 1.5;
|
||
}
|
||
.accordion-chevron {
|
||
flex-shrink: 0;
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
background: rgba(var(--accent-rgb), 0.08);
|
||
color: var(--accent);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s ease;
|
||
}
|
||
.accordion-chevron svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
display: block;
|
||
}
|
||
.accordion-toggle:hover .accordion-chevron {
|
||
background: rgba(var(--accent-rgb), 0.14);
|
||
}
|
||
/* When expanded: rotate chevron 180° so it points up */
|
||
.accordion[data-state="open"] .accordion-chevron {
|
||
transform: rotate(180deg);
|
||
}
|
||
/* The collapsible content panel */
|
||
.accordion-panel {
|
||
max-height: 0;
|
||
overflow: hidden;
|
||
transition: max-height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||
}
|
||
.accordion-panel-inner {
|
||
padding: 0 28px 28px;
|
||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||
padding-top: 22px;
|
||
}
|
||
/* Reduced-motion: skip the animation */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.accordion-panel { transition: none; }
|
||
.accordion-chevron { transition: none; }
|
||
}
|
||
|
||
/* ─── PROCESS (4 step horizontal flow — matches homepage style) ─── */
|
||
.flow {
|
||
margin-top: 30px;
|
||
display: grid;
|
||
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
|
||
align-items: stretch; gap: 0;
|
||
}
|
||
.flow-step {
|
||
background: var(--white); border: 1px solid rgba(0,0,0,0.07);
|
||
border-radius: 16px; padding: 24px 22px;
|
||
display: flex; flex-direction: column;
|
||
box-shadow: 0 4px 16px -8px rgba(0,0,0,0.06);
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
|
||
border-top: 3px solid var(--accent);
|
||
}
|
||
.flow-step:nth-child(1) { --step-accent: var(--blue); --step-shadow: rgba(0, 112, 199, 0.22); }
|
||
.flow-step:nth-child(3) { --step-accent: var(--orange); --step-shadow: rgba(236, 139, 51, 0.22); }
|
||
.flow-step:nth-child(5) { --step-accent: var(--blue); --step-shadow: rgba(0, 112, 199, 0.22); }
|
||
.flow-step:nth-child(7) { --step-accent: var(--orange); --step-shadow: rgba(236, 139, 51, 0.22); }
|
||
.flow-step { border-top-color: var(--step-accent, var(--accent)); }
|
||
.flow-step:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 22px 50px -22px var(--step-shadow);
|
||
border-color: var(--step-accent);
|
||
}
|
||
.flow-step-label {
|
||
font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
|
||
color: var(--step-accent); margin-bottom: 6px; text-transform: uppercase;
|
||
}
|
||
.flow-step-title {
|
||
font-size: 20px; font-weight: 600; margin-bottom: 10px;
|
||
letter-spacing: -0.015em; color: var(--ink); line-height: 1.15;
|
||
}
|
||
.flow-step-desc {
|
||
color: var(--charcoal); font-size: 13.5px; line-height: 1.55; margin-bottom: 14px; flex: 1;
|
||
}
|
||
.flow-step-outcome {
|
||
color: var(--step-accent); font-size: 13px; line-height: 1.5; font-style: italic;
|
||
padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.07); font-weight: 500;
|
||
}
|
||
.flow-arrow {
|
||
display: flex; align-items: center; justify-content: center;
|
||
width: 36px; color: rgba(0, 0, 0, 0.18);
|
||
}
|
||
.flow-arrow svg { width: 24px; height: 24px; }
|
||
.flow-arrow:nth-child(2) { color: var(--blue); opacity: 0.5; }
|
||
.flow-arrow:nth-child(4) { color: #b08a6b; opacity: 0.6; }
|
||
.flow-arrow:nth-child(6) { color: var(--orange); opacity: 0.6; }
|
||
@media (max-width: 1100px) {
|
||
.flow { grid-template-columns: 1fr 1fr; gap: 18px; }
|
||
.flow-step:nth-child(1) { grid-column: 1; grid-row: 1; }
|
||
.flow-step:nth-child(3) { grid-column: 2; grid-row: 1; }
|
||
.flow-step:nth-child(5) { grid-column: 1; grid-row: 3; }
|
||
.flow-step:nth-child(7) { grid-column: 2; grid-row: 3; }
|
||
.flow-arrow { display: none; }
|
||
}
|
||
@media (max-width: 600px) {
|
||
.flow { grid-template-columns: 1fr; gap: 12px; }
|
||
.flow-step:nth-child(1), .flow-step:nth-child(3),
|
||
.flow-step:nth-child(5), .flow-step:nth-child(7) {
|
||
grid-column: 1; grid-row: auto;
|
||
}
|
||
}
|
||
|
||
/* ─── CAPABILITY LADDER (Shu-Ha-Ri) ─── */
|
||
.ladder {
|
||
margin-top: 30px;
|
||
margin-bottom: 32px;
|
||
position: relative;
|
||
padding-left: 60px;
|
||
}
|
||
.ladder-line {
|
||
position: absolute;
|
||
left: 30px;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 3px;
|
||
background: linear-gradient(to bottom,
|
||
rgba(236, 139, 51, 0.3) 0%,
|
||
rgba(236, 139, 51, 0.65) 50%,
|
||
var(--orange) 100%
|
||
);
|
||
border-radius: 3px;
|
||
}
|
||
.ladder-step {
|
||
position: relative;
|
||
padding-bottom: 48px;
|
||
transform: translateY(0);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
.ladder-step:last-child { padding-bottom: 0; }
|
||
.ladder-step:hover { transform: translateY(-2px); }
|
||
|
||
.ladder-marker {
|
||
position: absolute;
|
||
left: -42px;
|
||
top: 0;
|
||
width: 60px;
|
||
height: 60px;
|
||
background: var(--white);
|
||
border: 3px solid var(--orange);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 8px 24px -8px rgba(236, 139, 51, 0.35);
|
||
transition: transform 0.3s ease, box-shadow 0.3s 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 12px 32px -8px rgba(236, 139, 51, 0.5);
|
||
}
|
||
.ladder-num {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: var(--orange);
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
.ladder-content {
|
||
background: var(--white);
|
||
border: 1px solid rgba(0,0,0,0.07);
|
||
border-radius: 14px;
|
||
padding: 26px 30px;
|
||
margin-left: 32px;
|
||
box-shadow: 0 4px 16px -8px rgba(0,0,0,0.06);
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
|
||
}
|
||
.ladder-step:hover .ladder-content {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 18px 40px -20px rgba(236, 139, 51, 0.18);
|
||
border-color: rgba(236, 139, 51, 0.3);
|
||
}
|
||
.ladder-stage {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
background: rgba(236, 139, 51, 0.1);
|
||
color: var(--orange);
|
||
padding: 5px 14px;
|
||
border-radius: 999px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 14px;
|
||
}
|
||
/* The Japanese term (Shu / Ha / Ri) — small, italic, subtle separator */
|
||
.ladder-stage-jp {
|
||
font-size: 11px;
|
||
font-style: italic;
|
||
text-transform: none;
|
||
letter-spacing: 0;
|
||
opacity: 0.7;
|
||
padding-left: 10px;
|
||
border-left: 1px solid rgba(236, 139, 51, 0.4);
|
||
font-weight: 500;
|
||
}
|
||
.ladder-content h3 {
|
||
font-size: 21px;
|
||
font-weight: 600;
|
||
letter-spacing: -0.015em;
|
||
margin-bottom: 10px;
|
||
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.06em;
|
||
}
|
||
.ladder-content > p {
|
||
font-size: 15px;
|
||
line-height: 1.6;
|
||
color: var(--charcoal);
|
||
margin-bottom: 18px;
|
||
}
|
||
.ladder-hallmark {
|
||
padding: 14px 18px;
|
||
background: var(--grey-soft);
|
||
border-left: 3px solid var(--orange);
|
||
border-radius: 8px;
|
||
font-size: 13.5px;
|
||
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(135deg, rgba(236, 139, 51, 0.06), rgba(0,112,199,0.04));
|
||
border: 1px solid rgba(236, 139, 51, 0.18);
|
||
border-radius: 12px;
|
||
padding: 22px 26px;
|
||
color: var(--charcoal);
|
||
font-size: 14.5px;
|
||
line-height: 1.6;
|
||
max-width: 920px;
|
||
margin: 0 auto;
|
||
}
|
||
.ladder-note strong { color: var(--ink); }
|
||
|
||
@media (max-width: 600px) {
|
||
.ladder { padding-left: 50px; }
|
||
.ladder-line { left: 24px; }
|
||
.ladder-marker { left: -38px; width: 48px; height: 48px; }
|
||
.ladder-num { font-size: 14px; }
|
||
.ladder-content { padding: 22px 22px; margin-left: 18px; }
|
||
.ladder-content h3 { font-size: 18px; }
|
||
.ladder-stage { flex-wrap: wrap; }
|
||
}
|
||
|
||
/* ─── ENGAGEMENT SIZE TABLE ─── */
|
||
.engagement {
|
||
background: var(--white); border: 1px solid rgba(0,0,0,0.07);
|
||
border-radius: 18px; padding: 36px;
|
||
box-shadow: 0 6px 24px -10px rgba(0,0,0,0.08);
|
||
}
|
||
.engagement-intro {
|
||
color: var(--charcoal); font-size: 15px; line-height: 1.6;
|
||
margin-bottom: 28px; max-width: 760px;
|
||
}
|
||
.engagement-vars {
|
||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
|
||
margin-bottom: 32px;
|
||
}
|
||
@media (max-width: 760px) { .engagement-vars { grid-template-columns: 1fr; } }
|
||
.var-card {
|
||
padding: 20px; border-radius: 12px; background: var(--grey-soft);
|
||
}
|
||
.var-card-label {
|
||
font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
|
||
text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
|
||
}
|
||
.var-card-title {
|
||
font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 6px;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.var-card-detail { font-size: 13.5px; color: var(--charcoal); line-height: 1.5; }
|
||
.engagement-summary {
|
||
padding: 22px; border-radius: 12px;
|
||
background: linear-gradient(135deg, rgba(0,112,199,0.06), rgba(236,139,51,0.06));
|
||
border: 1px solid rgba(0,112,199,0.12);
|
||
}
|
||
.engagement-summary strong { color: var(--ink); }
|
||
|
||
|
||
/* ─── PROJECT-TO-PARTNERSHIP JOURNEY (clean horizontal row, no cluster) ─── */
|
||
/* Three project tiers sit in a row on the left as "starting points", then a
|
||
visual transition column, then Partnership styled as the destination. */
|
||
.size-track {
|
||
position: relative;
|
||
display: grid;
|
||
grid-template-columns: 1.7fr auto 1.1fr;
|
||
align-items: stretch;
|
||
gap: 0;
|
||
padding: 0;
|
||
}
|
||
.size-track::before { display: none; }
|
||
|
||
/* Left side: small label + clean horizontal row of 3 project tiers */
|
||
.size-projects {
|
||
padding: 0 12px;
|
||
position: relative;
|
||
}
|
||
.size-projects-label {
|
||
display: block;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: var(--charcoal);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
margin-bottom: 32px;
|
||
text-align: center;
|
||
opacity: 0.7;
|
||
}
|
||
.size-projects-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 0;
|
||
position: relative;
|
||
}
|
||
/* Connecting line beneath the 3 markers — full width across the project row */
|
||
.size-projects-row::before {
|
||
content: '';
|
||
position: absolute;
|
||
/* Position aligns with marker centre */
|
||
top: 76px;
|
||
left: calc(16.66% + 8px);
|
||
right: calc(16.66% + 8px);
|
||
height: 2px;
|
||
background: var(--accent);
|
||
opacity: 0.25;
|
||
border-radius: 2px;
|
||
z-index: 0;
|
||
}
|
||
|
||
.size-projects-row .size-stop {
|
||
text-align: center;
|
||
padding: 0 14px;
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0;
|
||
}
|
||
.size-projects-row .size-stop-label {
|
||
display: inline-block;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--accent);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
margin-bottom: 12px;
|
||
padding: 4px 14px;
|
||
background: rgba(var(--accent-rgb), 0.1);
|
||
border-radius: 999px;
|
||
}
|
||
.size-projects-row .size-stop-time {
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
letter-spacing: -0.015em;
|
||
margin-bottom: 14px;
|
||
line-height: 1.1;
|
||
}
|
||
.size-projects-row .size-stop-marker {
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 50%;
|
||
background: var(--accent);
|
||
border: 3px solid var(--white);
|
||
box-shadow: 0 4px 12px -2px rgba(0,0,0,0.15);
|
||
margin-bottom: 16px;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
.size-projects-row .size-stop-desc {
|
||
font-size: 13.5px;
|
||
line-height: 1.5;
|
||
color: var(--charcoal);
|
||
padding: 0 6px;
|
||
}
|
||
|
||
/* The transition column — arrow + "Often evolves into" */
|
||
.size-transition {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 22px;
|
||
text-align: center;
|
||
gap: 14px;
|
||
/* Vertically centre on the marker line — push slightly up to align with project markers */
|
||
padding-top: 32px;
|
||
}
|
||
.size-transition-label {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: var(--charcoal);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
line-height: 1.4;
|
||
max-width: 110px;
|
||
}
|
||
.size-transition-arrow {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, var(--blue), var(--orange));
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--white);
|
||
box-shadow: 0 8px 22px -8px rgba(0, 112, 199, 0.35);
|
||
}
|
||
.size-transition-arrow svg {
|
||
width: 22px;
|
||
height: 22px;
|
||
}
|
||
|
||
/* Partnership tier — destination card, visually anchoring right side */
|
||
.size-stop.partnership {
|
||
text-align: center;
|
||
padding: 36px 28px 32px;
|
||
background: linear-gradient(135deg, rgba(0,112,199,0.06), rgba(236,139,51,0.08));
|
||
border: 1.5px solid rgba(var(--accent-rgb), 0.22);
|
||
border-radius: 18px;
|
||
margin-top: 0;
|
||
position: relative;
|
||
}
|
||
.size-stop.partnership::before {
|
||
content: 'Where we aim';
|
||
position: absolute;
|
||
top: -10px;
|
||
right: 22px;
|
||
background: var(--white);
|
||
border: 1px solid rgba(var(--accent-rgb), 0.25);
|
||
padding: 4px 12px;
|
||
border-radius: 999px;
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
color: var(--charcoal);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
.size-stop.partnership .size-stop-label {
|
||
background: linear-gradient(135deg, var(--blue), var(--orange));
|
||
color: var(--white);
|
||
padding: 6px 18px;
|
||
margin-bottom: 16px;
|
||
display: inline-block;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
border-radius: 999px;
|
||
}
|
||
.size-stop.partnership .size-stop-time {
|
||
font-size: 26px;
|
||
color: var(--ink);
|
||
margin-bottom: 14px;
|
||
font-weight: 600;
|
||
letter-spacing: -0.015em;
|
||
line-height: 1.1;
|
||
}
|
||
.size-stop.partnership .size-stop-desc {
|
||
font-size: 14px;
|
||
line-height: 1.55;
|
||
color: var(--charcoal);
|
||
}
|
||
.size-stop.partnership .size-stop-marker {
|
||
width: 32px;
|
||
height: 18px;
|
||
border-radius: 0;
|
||
background: transparent;
|
||
border: none;
|
||
box-shadow: none;
|
||
position: relative;
|
||
margin: 0 auto 16px;
|
||
}
|
||
.size-stop.partnership .size-stop-marker::before,
|
||
.size-stop.partnership .size-stop-marker::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
width: 14px;
|
||
height: 14px;
|
||
border: 3px solid var(--accent);
|
||
border-radius: 50%;
|
||
}
|
||
.size-stop.partnership .size-stop-marker::before {
|
||
left: 0;
|
||
border-color: var(--blue);
|
||
}
|
||
.size-stop.partnership .size-stop-marker::after {
|
||
right: 0;
|
||
border-color: var(--orange);
|
||
}
|
||
|
||
/* Mobile/tablet: stack the journey vertically */
|
||
@media (max-width: 920px) {
|
||
.size-track {
|
||
grid-template-columns: 1fr;
|
||
gap: 28px;
|
||
}
|
||
.size-projects {
|
||
padding: 0;
|
||
}
|
||
.size-projects-label {
|
||
margin-bottom: 24px;
|
||
}
|
||
.size-projects-row {
|
||
grid-template-columns: 1fr;
|
||
gap: 28px;
|
||
}
|
||
.size-projects-row::before {
|
||
display: none;
|
||
}
|
||
.size-projects-row .size-stop {
|
||
padding: 0 12px;
|
||
}
|
||
.size-transition {
|
||
flex-direction: row;
|
||
padding: 8px 0;
|
||
gap: 16px;
|
||
justify-content: center;
|
||
}
|
||
.size-transition-arrow {
|
||
transform: rotate(90deg);
|
||
width: 44px;
|
||
height: 44px;
|
||
}
|
||
.size-transition-arrow svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
.size-transition-label {
|
||
max-width: none;
|
||
}
|
||
.size-stop.partnership {
|
||
padding: 32px 24px 28px;
|
||
}
|
||
.size-stop.partnership::before {
|
||
right: auto;
|
||
left: 22px;
|
||
}
|
||
}
|
||
|
||
|
||
/* ─── CTA ─── */
|
||
.cta-wrap { padding: 100px 28px 120px; background: var(--white); }
|
||
.cta-card {
|
||
max-width: 1100px; margin: 0 auto;
|
||
background: linear-gradient(135deg, #1a2230 0%, #1a1a1a 60%, #2a1f1a 100%);
|
||
border-radius: 24px; padding: 70px 50px; text-align: center;
|
||
position: relative; overflow: hidden; color: white;
|
||
}
|
||
.cta-card::before {
|
||
content: ''; position: absolute; top: -30%; left: -10%; width: 60%; height: 160%;
|
||
background: radial-gradient(ellipse, rgba(0,112,199,0.22), transparent 65%); pointer-events: none;
|
||
}
|
||
.cta-card::after {
|
||
content: ''; position: absolute; bottom: -30%; right: -10%; width: 60%; height: 160%;
|
||
background: radial-gradient(ellipse, rgba(236,139,51,0.18), transparent 65%); pointer-events: none;
|
||
}
|
||
.cta-inner { position: relative; z-index: 2; max-width: 700px; margin: 0 auto; }
|
||
.cta-card h2 {
|
||
font-size: clamp(30px, 4.2vw, 48px); font-weight: 600;
|
||
letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 16px;
|
||
}
|
||
.cta-card h2 em {
|
||
font-style: italic; font-weight: 500; color: var(--orange); margin-right: 0.12em;
|
||
}
|
||
.cta-card p {
|
||
font-size: 16px; color: rgba(255,255,255,0.78);
|
||
margin-bottom: 30px; line-height: 1.55;
|
||
}
|
||
.btn-on-dark {
|
||
background: var(--blue); color: white;
|
||
box-shadow: 0 12px 32px -8px rgba(0,112,199,0.5);
|
||
}
|
||
.btn-on-dark:hover { background: var(--blue-deep); }
|
||
.btn-ghost-dark {
|
||
background: transparent; color: white; border: 1px solid rgba(255,255,255,0.25);
|
||
}
|
||
.btn-ghost-dark:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.4); }
|
||
@media (max-width: 720px) { .cta-card { padding: 50px 28px; } }
|
||
|
||
/* ─── FOOTER (matches homepage) ─── */
|
||
.footer { background: var(--ink); color: white; padding: 60px 28px 28px; }
|
||
.footer-inner { max-width: 1200px; margin: 0 auto; }
|
||
.footer-grid {
|
||
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px;
|
||
}
|
||
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
|
||
.footer-brand img { max-height: 56px; width: auto; margin-bottom: 18px; }
|
||
.footer-brand p { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.55; max-width: 280px; }
|
||
.footer-col h5 {
|
||
font-size: 13px; font-weight: 600; text-transform: uppercase;
|
||
letter-spacing: 0.05em; margin-bottom: 16px; color: rgba(255,255,255,0.5);
|
||
}
|
||
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
|
||
.footer-col a {
|
||
color: rgba(255,255,255,0.85); text-decoration: none; font-size: 14px; transition: color 0.2s;
|
||
}
|
||
.footer-col a:hover { color: var(--orange); }
|
||
.footer-bottom {
|
||
border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px;
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
font-size: 13px; color: rgba(255,255,255,0.5); flex-wrap: wrap; gap: 12px;
|
||
}
|
||
|
||
/* Reveal */
|
||
@media (prefers-reduced-motion: no-preference) {
|
||
.reveal {
|
||
opacity: 0; transform: translateY(20px);
|
||
transition: opacity 0.8s ease, transform 0.8s ease;
|
||
}
|
||
.reveal.in { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
|
||
/* ─── "What this looks like in practice" — value examples ─── */
|
||
.examples-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 24px;
|
||
margin-top: 12px;
|
||
}
|
||
@media (max-width: 880px) {
|
||
.examples-grid { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
.example-card {
|
||
background: var(--white);
|
||
border: 1px solid rgba(0,0,0,0.07);
|
||
border-radius: 18px;
|
||
padding: 32px 32px 28px;
|
||
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
|
||
box-shadow: 0 6px 22px -10px rgba(0,0,0,0.07);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.example-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 22px 48px -22px rgba(var(--accent-rgb), 0.22);
|
||
border-color: rgba(var(--accent-rgb), 0.3);
|
||
}
|
||
|
||
.example-eyebrow {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--accent);
|
||
margin-bottom: 14px;
|
||
}
|
||
.example-eyebrow svg {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
|
||
.example-card h3 {
|
||
font-size: 21px;
|
||
font-weight: 600;
|
||
letter-spacing: -0.015em;
|
||
line-height: 1.25;
|
||
color: var(--ink);
|
||
margin-bottom: 14px;
|
||
}
|
||
.example-card > p {
|
||
font-size: 15px;
|
||
line-height: 1.6;
|
||
color: var(--charcoal);
|
||
margin-bottom: 22px;
|
||
}
|
||
|
||
/* Outcome metrics row — now 2 metrics, more breathing room */
|
||
.example-outcomes {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 18px;
|
||
padding: 20px 0 4px;
|
||
border-top: 1px solid rgba(0,0,0,0.06);
|
||
}
|
||
@media (max-width: 540px) {
|
||
.example-outcomes { grid-template-columns: 1fr; gap: 12px; }
|
||
}
|
||
.example-outcome {
|
||
text-align: left;
|
||
padding: 0 4px;
|
||
}
|
||
.example-outcome-value {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: var(--accent);
|
||
letter-spacing: -0.02em;
|
||
line-height: 1.1;
|
||
margin-bottom: 4px;
|
||
}
|
||
/* Asterisk superscript — same accent colour, no underline */
|
||
.example-outcome-value sup {
|
||
font-size: 0.55em;
|
||
font-weight: 600;
|
||
margin-left: 1px;
|
||
vertical-align: super;
|
||
line-height: 1;
|
||
}
|
||
.example-outcome-label {
|
||
font-size: 12.5px;
|
||
color: var(--charcoal);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* Page-level footnote — slim band sitting between the examples section
|
||
and the closing CTA. Annotates the asterisks on the example metrics. */
|
||
.page-footnote {
|
||
max-width: 880px;
|
||
margin: 0 auto;
|
||
padding: 24px 28px;
|
||
background: transparent;
|
||
border-top: 1px solid rgba(0,0,0,0.08);
|
||
border-bottom: 1px solid rgba(0,0,0,0.08);
|
||
font-size: 12.5px;
|
||
line-height: 1.6;
|
||
color: var(--charcoal);
|
||
text-align: center;
|
||
}
|
||
.page-footnote sup {
|
||
font-weight: 600;
|
||
color: var(--accent);
|
||
margin-right: 2px;
|
||
}
|
||
.page-footnote strong { color: var(--ink); font-weight: 600; }
|
||
.page-footnote-wrap {
|
||
padding: 0 28px;
|
||
background: var(--white);
|
||
}
|
||
|
||
/* ─── Background pattern: soft dots (Coaching / gentle, less directional) ─── */
|
||
.page-hero {
|
||
background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
|
||
position: relative;
|
||
}
|
||
.page-hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%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: 32px 32px;
|
||
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: 40px 40px;
|
||
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(16px);
|
||
transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
|
||
transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||
}
|
||
.example-card.is-revealed .example-outcome-value {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
/* Stagger so first outcome appears, then second one a moment later */
|
||
.example-card.is-revealed .example-outcome:nth-child(1) .example-outcome-value {
|
||
transition-delay: 0.05s;
|
||
}
|
||
.example-card.is-revealed .example-outcome:nth-child(2) .example-outcome-value {
|
||
transition-delay: 0.30s;
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.example-outcome-value {
|
||
opacity: 1;
|
||
transform: none;
|
||
transition: none;
|
||
}
|
||
}
|
||
|
||
/* Mobile: dial back the bumped section padding so phones don't waste space */
|
||
@media (max-width: 720px) {
|
||
.section { padding: 80px 22px; }
|
||
.page-hero { padding: 64px 22px 52px; }
|
||
.cta-wrap { padding: 64px 22px 80px; }
|
||
.section-head { margin-bottom: 48px; }
|
||
}
|
||
|
||
/* ─── Hero with photo (side-by-side, photo right on desktop, above on mobile) ─── */
|
||
.page-hero-inner.with-photo {
|
||
max-width: 1200px;
|
||
text-align: left;
|
||
display: grid;
|
||
grid-template-columns: 1.1fr 1fr;
|
||
gap: 56px;
|
||
align-items: center;
|
||
}
|
||
.page-hero-inner.with-photo .page-hero-text {
|
||
/* Text column */
|
||
}
|
||
.page-hero-photo {
|
||
aspect-ratio: 4 / 5;
|
||
border-radius: 22px;
|
||
overflow: hidden;
|
||
box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.18);
|
||
background: var(--grey);
|
||
}
|
||
.page-hero-photo img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
/* On smaller widths, stack: photo above, text below */
|
||
@media (max-width: 880px) {
|
||
.page-hero-inner.with-photo {
|
||
grid-template-columns: 1fr;
|
||
gap: 32px;
|
||
text-align: center;
|
||
}
|
||
.page-hero-inner.with-photo .page-hero-ctas {
|
||
justify-content: center;
|
||
}
|
||
.page-hero-photo {
|
||
aspect-ratio: 16 / 9;
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
order: -1; /* photo above text on mobile */
|
||
}
|
||
}
|
||
@media (max-width: 540px) {
|
||
.page-hero-photo { aspect-ratio: 4 / 3; }
|
||
}
|
||
|
||
/* ─── Section anchor photo (wide band above "Who it's for" cards) ─── */
|
||
.section-anchor-photo {
|
||
width: 100%;
|
||
max-width: 1100px;
|
||
margin: 0 auto 56px;
|
||
aspect-ratio: 21 / 9;
|
||
border-radius: 22px;
|
||
overflow: hidden;
|
||
box-shadow: 0 22px 50px -25px rgba(0, 0, 0, 0.15);
|
||
}
|
||
.section-anchor-photo img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
@media (max-width: 720px) {
|
||
.section-anchor-photo {
|
||
aspect-ratio: 16 / 9;
|
||
margin-bottom: 40px;
|
||
border-radius: 16px;
|
||
}
|
||
}
|
||
|
||
/* ─── Example card photo (horizontal band at top of card) ─── */
|
||
.example-card-photo {
|
||
margin: -32px -32px 24px; /* extends to card edges, since card has 32px padding */
|
||
aspect-ratio: 16 / 9;
|
||
overflow: hidden;
|
||
border-top-left-radius: 18px;
|
||
border-top-right-radius: 18px;
|
||
background: var(--grey);
|
||
}
|
||
.example-card-photo img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
|
||
/* Engagement-section accordion sits below the timeline — give it breathing room */
|
||
.engagement-accordion {
|
||
margin-top: 56px;
|
||
}
|
||
/* Second accordion (deliverables) sits below the first; smaller gap so they read as a pair */
|
||
.engagement-accordion-deliverables {
|
||
margin-top: 16px;
|
||
}
|
||
@media (max-width: 720px) {
|
||
.engagement-accordion { margin-top: 40px; }
|
||
.engagement-accordion-deliverables { margin-top: 12px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ───── NAV ───── -->
|
||
<nav class="nav">
|
||
<div class="nav-inner">
|
||
<a href="../index.html" class="nav-logo" aria-label="Lean 101 home">
|
||
<img src="../assets/lean101-isotipo.png" alt="Lean 101">
|
||
</a>
|
||
<ul class="nav-links">
|
||
<li class="has-dropdown">
|
||
<a href="../index.html#services" class="current">Services</a>
|
||
<ul class="nav-dropdown" role="menu">
|
||
<li role="none">
|
||
<a href="consulting.html" role="menuitem">Process Excellence & Transformation</a>
|
||
</li>
|
||
<li role="none">
|
||
<a href="coaching.html" class="current" role="menuitem">Coaching & Training</a>
|
||
</li>
|
||
<li role="none">
|
||
<a href="digital-solutions.html" role="menuitem">Digital Solutions</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="../index.html#process">How it works</a></li>
|
||
<li><a href="../index.html#why">Why Lean 101</a></li>
|
||
<li><a href="../index.html#contact">Contact</a></li>
|
||
</ul>
|
||
<a href="../index.html#contact" class="nav-cta">Book a call</a>
|
||
<button class="nav-hamburger" type="button" aria-label="Open menu" aria-expanded="false" aria-controls="nav-drawer">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="3" y1="6" x2="21" y2="6"/>
|
||
<line x1="3" y1="12" x2="21" y2="12"/>
|
||
<line x1="3" y1="18" x2="21" y2="18"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Mobile drawer + overlay -->
|
||
<div class="nav-drawer-overlay" data-drawer-overlay aria-hidden="true"></div>
|
||
<aside class="nav-drawer" id="nav-drawer" aria-label="Mobile navigation" aria-hidden="true">
|
||
<div class="nav-drawer-head">
|
||
<img src="../assets/lean101-logotipo.png" alt="Lean 101">
|
||
<button class="nav-drawer-close" type="button" aria-label="Close menu">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<nav class="nav-drawer-body">
|
||
<ul>
|
||
<li><span class="nav-drawer-group-label">Services</span></li>
|
||
<li><a class="nav-drawer-subitem" href="consulting.html">Process Excellence & Transformation</a></li>
|
||
<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>
|
||
<li><a class="nav-drawer-item" href="../index.html#process">How it works</a></li>
|
||
<li><a class="nav-drawer-item" href="../index.html#why">Why Lean 101</a></li>
|
||
<li><a class="nav-drawer-item" href="../index.html#contact">Contact</a></li>
|
||
</ul>
|
||
</nav>
|
||
<div class="nav-drawer-foot">
|
||
<a href="../index.html#contact" class="nav-drawer-cta">Book a call</a>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- ───── PAGE HERO ───── -->
|
||
<header class="page-hero">
|
||
<div class="page-hero-inner with-photo">
|
||
<div class="page-hero-text">
|
||
<span class="page-eyebrow">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">
|
||
Book a free intro call <span class="btn-arrow">→</span>
|
||
</a>
|
||
<a href="#approach" class="btn btn-secondary">See how it works</a>
|
||
</div>
|
||
</div>
|
||
<div class="page-hero-photo">
|
||
<img src="https://images.unsplash.com/photo-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–6 senior leaders one-on-one, helping them shift from giving answers to asking the right structured questions — and run their own A3 cycles on real business problems.</p>
|
||
<div class="example-outcomes">
|
||
<div class="example-outcome">
|
||
<div class="example-outcome-value">3–6<sup>*</sup></div>
|
||
<div class="example-outcome-label">Leaders coached to fluency</div>
|
||
</div>
|
||
<div class="example-outcome">
|
||
<div class="example-outcome-value">2–4×<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–15<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–12<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–6 weeks</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–6 months</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–12 months</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>
|
||
<p>Start with a free 30-minute intro call. If it's a fit, we'll schedule a 1-hour site visit to walk your operation together — and from there we'll scope a tailored partnership.</p>
|
||
<div class="page-hero-ctas">
|
||
<a href="#" class="btn btn-on-dark">
|
||
Book a free intro call <span class="btn-arrow">→</span>
|
||
</a>
|
||
<a href="mailto:hello@lean-101.com" class="btn btn-ghost-dark">hello@lean-101.com</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ───── FOOTER ───── -->
|
||
<footer class="footer">
|
||
<div class="footer-inner">
|
||
<div class="footer-grid">
|
||
<div class="footer-brand">
|
||
<img src="../assets/lean101-logotipo.png" alt="Lean 101">
|
||
<p>For businesses that want change to last.</p>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h5>Services</h5>
|
||
<ul>
|
||
<li><a href="consulting.html">Consulting</a></li>
|
||
<li><a href="coaching.html">Coaching & Training</a></li>
|
||
<li><a href="digital-solutions.html">Digital Solutions</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h5>Company</h5>
|
||
<ul>
|
||
<li><a href="../index.html#why">About</a></li>
|
||
<li><a href="../index.html#process">Approach</a></li>
|
||
<li><a href="../index.html#contact">Contact</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h5>Connect</h5>
|
||
<ul>
|
||
<li><a href="#">LinkedIn</a></li>
|
||
<li><a href="mailto:hello@lean-101.com">Email</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<span>© 2026 Lean 101. All rights reserved.</span>
|
||
<span>Based in Melbourne, working worldwide.</span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(e => {
|
||
if (e.isIntersecting) {
|
||
e.target.classList.add('in');
|
||
observer.unobserve(e.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.1 });
|
||
document.querySelectorAll('.section, .cta-wrap').forEach(el => {
|
||
el.classList.add('reveal');
|
||
observer.observe(el);
|
||
});
|
||
</script>
|
||
|
||
<script>
|
||
// ─── Mobile drawer (hamburger menu) ───
|
||
const drawer = document.querySelector('.nav-drawer');
|
||
const overlay = document.querySelector('[data-drawer-overlay]');
|
||
const hamburger = document.querySelector('.nav-hamburger');
|
||
const drawerClose = document.querySelector('.nav-drawer-close');
|
||
|
||
function openDrawer() {
|
||
if (!drawer) return;
|
||
drawer.classList.add('is-open');
|
||
drawer.setAttribute('aria-hidden', 'false');
|
||
overlay.classList.add('is-open');
|
||
overlay.setAttribute('aria-hidden', 'false');
|
||
hamburger.setAttribute('aria-expanded', 'true');
|
||
document.body.classList.add('nav-drawer-locked');
|
||
}
|
||
function closeDrawer() {
|
||
if (!drawer) return;
|
||
drawer.classList.remove('is-open');
|
||
drawer.setAttribute('aria-hidden', 'true');
|
||
overlay.classList.remove('is-open');
|
||
overlay.setAttribute('aria-hidden', 'true');
|
||
hamburger.setAttribute('aria-expanded', 'false');
|
||
document.body.classList.remove('nav-drawer-locked');
|
||
}
|
||
|
||
if (hamburger) hamburger.addEventListener('click', openDrawer);
|
||
if (drawerClose) drawerClose.addEventListener('click', closeDrawer);
|
||
if (overlay) overlay.addEventListener('click', closeDrawer);
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape' && drawer && drawer.classList.contains('is-open')) {
|
||
closeDrawer();
|
||
}
|
||
});
|
||
document.querySelectorAll('.nav-drawer a').forEach(link => {
|
||
link.addEventListener('click', closeDrawer);
|
||
});
|
||
// ─── Example card outcome reveal animation ───
|
||
// Each card's outcome values fade in and slide up when the card scrolls into view.
|
||
const exampleCards = document.querySelectorAll('.example-card');
|
||
if (exampleCards.length > 0) {
|
||
const exObs = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('is-revealed');
|
||
exObs.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.5, rootMargin: '0px 0px -10% 0px' });
|
||
exampleCards.forEach(card => exObs.observe(card));
|
||
}
|
||
|
||
|
||
// ─── Accordion toggle for "What's included" ───
|
||
document.querySelectorAll('.accordion').forEach(acc => {
|
||
const toggle = acc.querySelector('.accordion-toggle');
|
||
const panel = acc.querySelector('.accordion-panel');
|
||
if (!toggle || !panel) return;
|
||
|
||
toggle.addEventListener('click', () => {
|
||
const isOpen = acc.dataset.state === 'open';
|
||
if (isOpen) {
|
||
// Closing: set explicit max-height first (current height), then transition to 0
|
||
panel.style.maxHeight = panel.scrollHeight + 'px';
|
||
// Force a reflow so the browser registers the explicit height
|
||
// before we transition to 0
|
||
panel.offsetHeight;
|
||
panel.style.maxHeight = '0px';
|
||
acc.dataset.state = 'closed';
|
||
toggle.setAttribute('aria-expanded', 'false');
|
||
panel.setAttribute('aria-hidden', 'true');
|
||
} else {
|
||
// Opening: set max-height to content height, then clean up after transition
|
||
panel.style.maxHeight = panel.scrollHeight + 'px';
|
||
acc.dataset.state = 'open';
|
||
toggle.setAttribute('aria-expanded', 'true');
|
||
panel.setAttribute('aria-hidden', 'false');
|
||
// After the transition, set max-height to 'none' so resize doesn't clip content
|
||
panel.addEventListener('transitionend', function once() {
|
||
if (acc.dataset.state === 'open') {
|
||
panel.style.maxHeight = 'none';
|
||
}
|
||
panel.removeEventListener('transitionend', once);
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|