// ============================================================ // Our Story — IMPACT values. Ported verbatim from the design deliverables // our-story-impact-desktop.html + our-story-impact-mobile.html. These REPLACE // the old : the desktop interactive IMPACT word shows >900px and // the mobile vertical accordion shows ≤900px (paired via the GI-MOBILE-SWAP-V1 // wrappers in app.html). Vanilla-JS logic preserved inside useEffect, scoped to // each component's root ref. Brand CSS vars come from site-wide colors_and_type.css. // ============================================================ // ---------- Desktop: interactive IMPACT word + active value panel ---------- const OurStoryImpactDesktop = () => { const rootRef = React.useRef(null); React.useEffect(() => { const root = rootRef.current; if (!root) return; var VALUES = [ { letter: 'I', title: 'Integrity', desc: 'We provide accurate information, transparent guidance, and honest recommendations — even when the answer is difficult.' }, { letter: 'M', title: 'Mutual Respect', desc: 'We treat clients, partners, and colleagues the way we would expect to be treated in a long-term relationship.' }, { letter: 'P', title: 'Partnership First', desc: 'Every decision is made from the client’s perspective and aligned with their long-term outcome.' }, { letter: 'A', title: 'Accountability', desc: 'We take ownership from assessment through commissioning and stand behind the outcome.' }, { letter: 'C', title: 'Commitment', desc: 'We fully commit to the projects we accept and the standards we promise.' }, { letter: 'T', title: 'Think Long-Term', desc: 'We design solutions and relationships around long-term performance, reliability, and trust.' } ]; var tabs = Array.prototype.slice.call(root.querySelectorAll('.vi-letter')); var panel = root.querySelector('.vi-panel'); var echo = root.querySelector('#vi-echo'); var title = root.querySelector('#vi-title'); var desc = root.querySelector('#vi-desc'); var current = -1; var swapTimer = null; function select(i, focus) { if (i === current) return; var v = VALUES[i]; tabs.forEach(function (t, idx) { t.setAttribute('aria-selected', idx === i ? 'true' : 'false'); }); panel.setAttribute('aria-labelledby', 'tab-' + i); if (focus) tabs[i].focus(); panel.classList.add('is-swapping'); swapTimer = window.setTimeout(function () { echo.textContent = v.letter; title.textContent = v.title; desc.textContent = v.desc; panel.classList.remove('is-swapping'); }, 180); current = i; } tabs.forEach(function (t) { t.addEventListener('click', function () { select(parseInt(t.dataset.i, 10), false); }); }); // keyboard: arrows move + activate, home/end jump var tablist = panel.parentNode.querySelector('[role="tablist"]'); function onKey(e) { var i = current < 0 ? 0 : current, next = null; if (e.key === 'ArrowRight' || e.key === 'ArrowDown') next = (i + 1) % tabs.length; else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') next = (i - 1 + tabs.length) % tabs.length; else if (e.key === 'Home') next = 0; else if (e.key === 'End') next = tabs.length - 1; if (next !== null) { e.preventDefault(); select(next, true); } } tablist.addEventListener('keydown', onKey); current = 0; // default active: Integrity (already rendered in markup) return () => { if (swapTimer) window.clearTimeout(swapTimer); }; }, []); return ( <>
{/* HEADER */}
Our values

Six principles. One word.

We work to an acronym we hold ourselves accountable to: IMPACT. Six principles that guide how we scope projects, communicate risk, and build long-term client relationships.

Select a letter Held since 2012
{/* INTERACTIVE WORD */}
{/* ACTIVE VALUE PANEL */}
I

Integrity

We provide accurate information, transparent guidance, and honest recommendations — even when the answer is difficult.

{/* FOOTNOTE */}

Our IMPACT principles are the standard we expect to be measured against — from first assessment through commissioning and the years of performance that follow.

Green Integrations
); }; // ---------- Mobile: vertical IMPACT accordion (one value always open) ---------- const OurStoryImpactMobile = () => { const rootRef = React.useRef(null); React.useEffect(() => { const root = rootRef.current; if (!root) return; var items = Array.prototype.slice.call(root.querySelectorAll('.vm-item')); function open(item) { items.forEach(function (it) { var isTarget = it === item; it.classList.toggle('is-open', isTarget); it.querySelector('.vm-row').setAttribute('aria-expanded', isTarget ? 'true' : 'false'); }); } var handlers = []; items.forEach(function (it) { var row = it.querySelector('.vm-row'); var fn = function () { // tapping the open row keeps it open (always one value visible) if (!it.classList.contains('is-open')) open(it); }; row.addEventListener('click', fn); handlers.push([row, fn]); }); return () => { handlers.forEach(function (h) { h[0].removeEventListener('click', h[1]); }); }; }, []); const ITEMS = [ { l: 'I', t: 'Integrity', d: 'We provide accurate information, transparent guidance, and honest recommendations — even when the answer is difficult.' }, { l: 'M', t: 'Mutual Respect', d: 'We treat clients, partners, and colleagues the way we would expect to be treated in a long-term relationship.' }, { l: 'P', t: 'Partnership First', d: 'Every decision is made from the client’s perspective and aligned with their long-term outcome.' }, { l: 'A', t: 'Accountability', d: 'We take ownership from assessment through commissioning and stand behind the outcome.' }, { l: 'C', t: 'Commitment', d: 'We fully commit to the projects we accept and the standards we promise.' }, { l: 'T', t: 'Think Long-Term', d: 'We design solutions and relationships around long-term performance, reliability, and trust.' } ]; return ( <>
{/* INTRO */}
Our values

Six principles. One word.

We work to an acronym we hold ourselves accountable to: IMPACT. Six principles that guide how we scope projects, communicate risk, and build long-term client relationships.

{/* VERTICAL IMPACT ACCORDION */}
{ITEMS.map((it, i) => (

{it.d}

))}
{/* FOOTNOTE */}

Our IMPACT principles are the standard we expect to be measured against — from first assessment through commissioning.

Held since 2012
); }; Object.assign(window, { OurStoryImpactDesktop, OurStoryImpactMobile });