); } // ── AmbientGlyph — absolutely positioned organic glyph that responds to // scroll: vertical parallax + optional rotation. Reads the global // `data-glyph-mode` attribute to allow tweak-driven toggling. function AmbientGlyph({ children, position, size = 160, color = "currentColor", opacity = 0.12, parallax = 30, rotate = 0 }) { const ref = useRefS(null); const [t, setT] = useStateS({ y: 0, r: 0, mode: "scroll" }); useEffectS(() => { let raf = 0; const compute = () => { const mode = document.body.getAttribute("data-glyph-mode") || "scroll"; if (!ref.current) return; if (mode === "static") { setT((s) => s.y === 0 && s.r === 0 && s.mode === "static" ? s : { y: 0, r: 0, mode: "static" }); return; } if (mode === "breathe") { // continuous, no scroll dependency const ms = performance.now(); const phase = ms / 4200 % 1; const r = Math.sin(phase * Math.PI * 2) * (rotate * 0.4); setT((s) => s.mode === "breathe" && s.y === 0 && Math.abs(s.r - r) < 0.01 ? s : { y: 0, r, mode }); return; } // scroll-responsive const rect = ref.current.getBoundingClientRect(); const vh = window.innerHeight; const center = rect.top + rect.height / 2; const norm = 1 - center / vh; // ~0 when at bottom of viewport, ~1 at top const y = norm * parallax, r = norm * rotate; // Only re-render when the value actually moved (i.e. the user is scrolling). setT((s) => s.mode === mode && Math.abs(s.y - y) < 0.01 && Math.abs(s.r - r) < 0.01 ? s : { y, r, mode }); }; const tick = () => {compute();raf = requestAnimationFrame(tick);}; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [parallax, rotate]); return (

{children}

); } // ── Insight quote — single-line marquee that scrolls left→right, repeating function InsightQuote() { const isMobile = useIsMobile(); const Quote = () => Change rarely fails for lack of strategy. It fails when insight is missing. ; // Two identical halves so the -50%→0 slide loops seamlessly. const half = [0, 1, 2].map((i) => ); return (

{half} {half.map((q, i) => )}

The Metis Principle

); } // ── AIW Featured marquee — dark indigo callout, plum accents function AIWFeature() { const isMobile = useIsMobile(); const questions = [ "Where is your operational drag? Which processes cost the most in time, errors, and fatigue.", "Are you AI-ready? Whether your data is structured and secure enough to power intelligent agents.", "What is the efficiency dividend? How much human capacity can you unlock.", "How do you govern the machines? The rules of engagement for AI-human teams."]; const stats = [ { n: "40–60%", l: "Cycle-time reduction in data-heavy functions" }, { n: "3×", l: "Faster decision making" }, { n: "10–14", l: "Weeks · typical audit timeline" }]; return (

{/* ambient line art — scroll-responsive */} {GLYPHS.network} {GLYPHS.loop}

Now Featured

AI in your workflow,
without the hype.

The AI Workflow Integration Audit is built for C-suite leaders who want measurable operational gains. We treat AI as a digital workforce, not a software toy.

{questions.map((q, i) =>

{String(i + 1).padStart(2, "0")}

{q}

)}

{stats.map((s) =>

{s.n}

{s.l}

)} Start the AIW audit

); } // ── The Work — 3-pane interactive overview. Bone aesthetic, plum accents. // Left rail: 3 lines (Organizations / Individuals / AI Workflow) // Center: list of offerings for the selected line, click to expand // Right: short field-note fragments function TheWork() { const lines = { org: { label: "For Organizations", sub: "Companies, teams, leaders.", glyph: GLYPHS.archway, items: [ { name: "Audit Portfolio", short: "Seven diagnostics across culture, leadership, performance, change, and AI." }, { name: "Leadership Development Programs", short: "Custom academies for resilient, high-performing leaders." }, { name: "Retainer Advisory", short: "Sustained partnership for organizations in motion." }, { name: "Workshops & Keynotes", short: "Psychology translated into actionable strategy." }] }, ind: { label: "For Individuals", sub: "Executives, founders, professionals.", glyph: GLYPHS.crescent, items: [ { name: "Executive Coaching", short: "Evidence-based 1:1 coaching for leaders ready to lead with authenticity." }, { name: "Group Coaching", short: "Small cohorts of 6\u20138. Peer learning paired with expert facilitation." }, { name: "Leadership Intensives", short: "One- or two-day immersions for rapid clarity." }, { name: "Psychological Strategy Sessions", short: "90 minutes of targeted guidance on mindset, communication, or leadership." }] }, ai: { label: "AI Workflow Integration", sub: "Most requested. Built for C-suite leaders.", glyph: GLYPHS.network, items: [ { name: "Operational Drag Heatmap", short: "Where human capacity is trapped in low-leverage loops." }, { name: "ROI-Ranked Roadmap", short: "Quick wins separated from long-term plays." }, { name: "Human\u2013AI Governance Framework", short: "The rules of engagement for AI-human teams." }, { name: "10\u201312 Week Integration Blueprint", short: "The path from one pilot to operational scale." }] } }; const [tab, setTab] = useStateS("org"); const [open, setOpen] = useStateS(0); const isMobile = useIsMobile(); const fragments = [ "We partner with leaders to surface the patterns shaping their people and performance.", "We work the problem until your team can run it without us.", "Insight is the start. Implementation is the work."]; const active = lines[tab]; return (

The work

A diagnostic architecture for the modern enterprise.

Enterprise-grade audits, leadership development at every level, and individual coaching for the leaders who carry it.

{/* Left rail */}

{Object.entries(lines).map(([k, v]) => { const isActive = tab === k; return ( ); })}

{/* Center detail */}

{active.items.length} offerings

{active.items.map((s, i) => { const isOpen = open === i; return (

{s.short}

Inquire · read more →

); })}

{/* Margin notes */}

From the field

{fragments.map((f, i) =>

{f}

)}

View full service menu →

); } // ── What We Do — 4 cards with line glyphs function WhatWeDo() { const cards = [ { tag: "Organizational", title: "Audit Portfolio", body: "Seven enterprise diagnostics across culture, leadership, performance, and change. Available standalone or as a full suite.", glyph: GLYPHS.archway }, { tag: "Leadership", title: "Development Programs", body: "Custom academies that cultivate emotionally intelligent, resilient, high-performing leaders.", glyph: GLYPHS.steps }, { tag: "Ongoing", title: "Retainer Advisory", body: "Sustained leadership and culture partnership for organizations in motion.", glyph: GLYPHS.loop }, { tag: "Individual", title: "Executive Coaching", body: "Personalized, evidence-based coaching for leaders ready to deepen self-awareness.", glyph: GLYPHS.crescent }]; return (

What we do

A diagnostic architecture for the modern enterprise.

Enterprise-grade audits, leadership development at every level, and individual coaching for the leaders who carry it.

{cards.map((c, i) => { e.currentTarget.style.transform = "translateY(-3px)"; e.currentTarget.style.borderColor = "rgba(76,46,69,0.25)"; e.currentTarget.style.boxShadow = "0 18px 36px rgba(28,30,63,0.08)"; }} onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.borderColor = "var(--border-soft)"; e.currentTarget.style.boxShadow = "none"; }}>

{c.glyph}

{c.tag}

{c.title}

{c.body}

)}

View full service menu →

); } // ── MovementGlyph — renders the proper SVG for each "movement" verb and // animates the meaningful internal element (not the whole frame): // recognize — concentric ripples expand outward // discern — 3 dots drop into the sieve // recalibrate — the scale bar tilts around the fulcrum; the fulcrum // and base stay still // `p` is a 0..1 progression: scroll (default), continuous breathe, or 0 static. function MovementGlyph({ kind }) { const ref = useRefS(null); const [s, setS] = useStateS({ p: 0, mode: "scroll" }); useEffectS(() => { let raf = 0; const tick = () => { const mode = document.body.getAttribute("data-glyph-mode") || "scroll"; if (!ref.current) {raf = requestAnimationFrame(tick);return;} if (mode === "static") { setS((prev) => prev.p === 1 && prev.mode === "static" ? prev : { p: 1, mode: "static" }); } else if (mode === "breathe") { const phase = performance.now() / 3600 % 1; const p = 0.5 + 0.5 * Math.sin(phase * Math.PI * 2); setS((prev) => prev.mode === "breathe" && Math.abs(prev.p - p) < 0.005 ? prev : { p, mode }); } else { const rect = ref.current.getBoundingClientRect(); const vh = window.innerHeight; // 0 when glyph enters from bottom, 1 when it leaves top const passed = (vh - rect.top) / (vh + rect.height); const p = Math.max(0, Math.min(1, passed)); // Only re-render when progress actually changed (user is scrolling). setS((prev) => prev.mode === mode && Math.abs(prev.p - p) < 0.005 ? prev : { p, mode }); } raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); const inner = kind === "recognize" ? : kind === "discern" ? : kind === "recalibrate" ? : null; return

{inner}

; } // ── RipplesGlyph — rings pulse outward; opacity wave makes each ring "fire" // in sequence as `progress` advances. function RipplesGlyph({ progress = 0 }) { // ease so the pulse breathes rather than scrubs const e = (k) => k < 0.5 ? 2 * k * k : 1 - Math.pow(-2 * k + 2, 2) / 2; const wave = e(progress); const rings = [ { base: 20, amp: 6, baseOp: 1.0, phase: 0.0 }, { base: 38, amp: 10, baseOp: 0.6, phase: 0.18 }, { base: 56, amp: 14, baseOp: 0.35, phase: 0.36 }]; return ( ); } // ── SieveGlyph — 3 dots drop from above the sieve mouth, accelerating, then // settle at their resting positions inside the bowl. The sieve frame itself // stays still. function SieveGlyph({ progress = 0 }) { // Settled (resting) positions, matching the original sieve composition const dots = [ { cx: 50, settledY: 46, startY: -6, delay: 0.00 }, { cx: 70, settledY: 50, startY: -10, delay: 0.18 }, { cx: 60, settledY: 38, startY: -14, delay: 0.36 }]; // ease-in (accel) on the way down — feels like gravity const eIn = (k) => k * k; return ( ); } // ── LeverGlyph — only the scale bar (and its end caps) rotate; the fulcrum // triangle and base stay anchored. Pivot is the apex of the fulcrum, ≈ (60, 65). function LeverGlyph({ progress = 0 }) { // ±18° rocking around the fulcrum const tilt = (progress - 0.5) * 36; return ( ); } // ── BlinkingEye — replaces the rotating eye glyph; lids close briefly on a // 6s cycle. Used in the closing CTA ambient pair. function BlinkingEye() { return ( ); } // ── How We Work — Recognize / Discern / Recalibrate function HowWeWork() { const movements = [ { n: "01", verb: "Recognize", tag: "See what's overlooked", body: "We surface the patterns shaping people and performance. The ones too close to see.", kind: "recognize" }, { n: "02", verb: "Discern", tag: "Separate signal from noise", body: "Behavioral science and validated assessments turn lived experience into decision-ready intelligence.", kind: "discern" }, { n: "03", verb: "Recalibrate", tag: "Move the right levers", body: "We stay through implementation. Insight becomes the structural and behavioral changes that hold.", kind: "recalibrate" }]; const isMobile = useIsMobile(); return (

How we work

Recognize.{" "} Discern.{" "} Recalibrate.

Three movements shape every engagement. A one-time audit or a multi-year partnership runs through all three.

{movements.map((m, i) =>

{m.verb}

{m.tag}

{m.body}

)}

); } // ── Closing function ClosingCTA() { const isMobile = useIsMobile(); return (

Begin

Ready to see your organization clearly?

Start with a free 30-minute discovery call or step into the AI Workflow audit.

Book a strategy session Explore the audits

); } window.Stillness = Stillness; window.METIS_GLYPHS = GLYPHS;

Wisdom at Work.