Leadership Development Programs
Comprehensive programs tailored to build the mindset and skills your leaders need to succeed.
Learn moreAll page-level spacing is token-driven. Use these values for every layout decision — never raw numbers.
Breakpoints: 768px & 1024px. Page margin & gutter flex globally at every
breakpoint. Column count (--grid-cols) is applied per section as each is audited —
see docs/responsive-grid-audit.md.
Responsive grid
Grid
--sp-page-x
desktop clamp(2rem, 5.357vw − 1.429rem, 5rem) · 32px → 80px
--gutter
1.25rem · 20px
Spacing
--sp-section
clamp(3.75rem, 6.25vw, 7.5rem) · 60px → 120px · section top/bottom padding
--sp-nav-h
clamp(5rem, 6.51vw, 7.8125rem) · 80px → 125px · scroll offsets & sticky positioning
--pad-card
1.875rem · 30px
--gap-card
2.1875rem · 35px · icon → text, between items
--gap-card-lg
2.5rem · 40px · photo card content gap
All values are CSS custom properties on :root in _tokens.css. Never use raw hex or px — always reference a token.
Colour — Brand Palette
--c-charcoal
#101820 — Main headings, pull quotes
--c-body-text
#4E5053 — Body copy, small body copy
--c-background
#F7F5F2 — Neutral bg, card backgrounds
--c-white
#ffffff — White surfaces
--c-navy
#163B68 — Base colour, cap headings, Leader 360
--c-green
#009D8A — Inclusion 360, inclusion topics
--c-red
#E61951 — Buttons, links, Leadership Workshops
--c-orange
#F6861F — MentorKey, mentoring topics
--c-pale-blue
#6CCCE3 — High Performing Teams
--c-lime
#A1C046 — Workshop accents (sparingly)
Colour — Interaction States
--c-red-hover
Red — hover state
--c-red-press
Red — pressed state
--c-navy-hover
Navy — hover state
--c-green-hover
Green — hover state
--c-green-press
Green — pressed state
--c-orange-hover
Orange — hover state
--c-orange-press
Orange — pressed state
--c-background-hover
Beige card — hover darken
Colour — Alpha Variants
--c-charcoal-70
rgba(16,24,32,0.70) — Dimmed headings, secondary overlay
--c-charcoal-10
rgba(16,24,32,0.10) — Subtle tints
--c-navy-70
rgba(22,59,104,0.70) — Muted navy text, meta labels
--c-navy-10
rgba(22,59,104,0.10) — Borders, dividers
--c-navy-05
rgba(22,59,104,0.05) — Very subtle row backgrounds
--c-white-70
rgba(255,255,255,0.70) — White text on dark surfaces
--c-white-20
rgba(255,255,255,0.20) — Type icon tile background
--c-white-10
rgba(255,255,255,0.10) — Subtle white overlay
--c-black-70
rgba(0,0,0,0.70) — Dark gradient overlays (CS card)
--c-black-60
rgba(0,0,0,0.60) — Dark gradient overlays
--c-red-10
rgba(230,25,81,0.10) — Code tag backgrounds, red tints
--c-green-10
rgba(0,157,138,0.10) — Green tints
--c-orange-10
rgba(246,134,31,0.10) — Orange tints
Typography — Families & Weights
--f-heading
'Euclid Flex', system-ui--f-body
'Larsseit', system-ui--f-serif
'Baskervville', Georgia--fw-light
300 — Headings, card titles
--fw-regular
400 — Body copy
--fw-medium
500 — Labels, nav links
--fw-semibold
600 — UI emphasis
--fw-bold
700 — Buttons, caps, CTA text
Typography — Type Scale & Line Heights
--fs-h1
52px → 100px--fs-h2
48px → 90px--fs-h3
36px → 68px--fs-h4
28px → 50px--fs-h5
22px → 32px--fs-body
16px → 23px--fs-small
15px → 18px--fs-cap
14px → 16px--fs-button
16px → 20px--fs-card-title
22px → 35px--fs-card-title-sm
20px → 32px--lh-h1
1 — Hero headings
--lh-h2
1 — Impact headings
--lh-h3
1.2 — Section headings
--lh-h4
1.3 — Pull quotes
--lh-h5
1.3 — Subheads
--lh-body
1.6 — Body copy
--lh-small
1.5 — Small body
--lh-cap
1.5 — Cap headings
--lh-btn
1.3 — Button text
--lh-card-title
1.2 — Primary card titles
--lh-card-title-sm
1.3 — Secondary card titles
--ls-cap
0.0875rem (1.4px) — Cap heading letter-spacing
--em-h1
×1.1 — H1 italic — 100px → 110px
--em-h2
×1.11 — H2 italic — 90px → 100px
--em-h3
×1.03 — H3 italic — 68px → 70px (subtle)
--em-h4
×1.1 — H4 italic — 50px → 55px
Spacing & Grid
Page & Grid
--sp-page-x
20px → 80px--sp-section
60px → 120px--sp-nav-h
80px → 125px--gutter
20px fixedCard Component
--pad-card
30px fixed--gap-card
24px → 35px--gap-card-lg
28px → 40pxEffects — Shadows, Radius & Transitions
Shadows
--sh-card
Standard card resting shadow
--sh-card-hover
Card hover / lifted state
--sh-lg
Large container shadow
--sh-bar
Navigation bar shadow
Transitions
--transition
0.25s ease--transition-layout
0.35s ease--transition-zoom
0.45s easeBorder Radius
--r-xs
0.5625rem (9px)--r-sm
0.75rem (12px)--r-md
1.125rem (18px)--r-lg
1.25rem (20px)--r-xl
clamp(1.5rem, 3vw, 3rem)--r-pill
9999pxBuilding adaptive, inclusive leaders
Leading in complex environments
Leadership challenges we solve
At the crossroads of strategy, culture and human behaviour,
we transform...
Leadership Development Programs
How can we support you?
Comprehensive programs tailored to build the mindset and skills leaders need to thrive.
Comprehensive programs tailored to build the mindset and skills your leaders need to succeed in their roles and drive lasting organisational impact.
--r-xs
9px (fixed)
Type icon tile — tightest corner
--r-sm
12px (fixed)
Small icon container
--r-md
18px (fixed)
Button icon bubble, mid-size chips
--r-lg
20px (fixed)
Flat content cards (insight, service), panels
--r-xl
24px → 48px (fluid)
Large containers, buttons, sections
--r-pill
9999px
Badges, pills, tags — always fully rounded
--r-foot-c
32px → 64px (fluid)
Footer corner helper (used in --r-foot shorthand)
Service Icons
.pill — solid filled label. Used in card headers alongside .type-icon.
.badge — small outlined label. Used for category filters and topic tags.
Note: .type-icon is demoed in the Icons section above.
Pill — .pill (solid fill)
.pill--white sits on coloured or dark backgrounds. The parent card sets --pill-color
to tint the text — one pill class, any colour context, no extra variants needed.
Badge — .badge (outlined)
Used for filters and taxonomy tags. Class names use legacy colour aliases: --pink → --c-red · --teal → --c-green · --amber → --c-orange · --navy → --c-navy.
.card--white (on beige section) · .card--beige (on white section) · Hover for shadow.
Icon: /assets/icons/icon-{slug}.svg at 150px.
Comprehensive programs tailored to build the mindset and skills your leaders need to succeed.
Learn more
Aligning executive groups around shared purpose, robust communication, and strategic vision.
Learn more
Strategic frameworks linking emerging talent with senior sponsors to accelerate growth.
Learn more
One-on-one reflective partnerships for senior leaders navigating complex challenges.
Learn more
Targeted, high-impact sessions focused on specific skills like feedback or adaptive thinking.
Learn more
Equipping leaders to foster psychological safety, mitigate bias, and leverage diverse thinking.
Learn more
.insight-card--colour (navy/green/orange · no photo) · .insight-card--photo (image top · beige content) · .insight-card--compact (no excerpt · taller image).
Hover colour cards to reveal excerpt.
Colour Variant (no photo)
Explore the behaviours that distinguish effective leaders when facing ambiguity, disruption, and high-stakes decisions across complex organisations.
Research-backed strategies for creating environments where diverse voices are heard, respected, and actively sought out at the leadership table.
Mentoring builds skills — but sponsorship opens doors. Discover why the distinction matters and how to design programs that accelerate career progression.
Photo Variant
Trust isn't built overnight. These evidence-based habits help leaders at every level create the conditions for sustainable, high-performance cultures.
Senior leaders share how they've embedded inclusion into everyday decision-making — and what changed when they did.
What separates organisations where mentoring drives real career progression from those where it stays transactional? This episode unpacks the difference.
Team-member card: portrait photo + red arrow chip + name + role + LinkedIn icon. Data source: team_member CPT (featured image + ACF role + ACF linkedin). Reusable template-part: template-parts/components/profile-card.php.
Arrow chip — distinct from .type-icon. Default points up-right; on hover the icon rotates -45° (ease) so it points right, suggesting forward motion into the bio page. Hover any card below to see the motion.
LinkedIn chip — default bg var(--c-navy-30) (closest brand-aligned neutral; no flat-grey token in the system). Hover swaps to solid var(--c-navy). Auto-hides when the ACF linkedin field is empty (see third card).
Founding Director
Principal Consultant
Senior Consultant
Full-bleed image card with gradient overlay and bottom-anchored content. Hover zooms the image and collapses the excerpt. CTA must be a <span> — never a nested <a>.
Case Study Variant (3-up)
Pharetra quam eros phasellus varius aliquam nunc accumsan iaculis pellentesque.
How a leading healthcare provider embedded inclusion practice across 40 sites and measurably improved retention.
A tailored Leadership 360 program delivered measurable behaviour change across a federal agency leadership cohort.
